/* ==========================================================================
   Secure Patient Intake Page
   Page template: page-secure-intake.php
   ========================================================================== */

/* ============================================
   STANDALONE HEADER — Logo + Secure Badge
   ============================================ */
   .vp-secure-header {
    background: var(--Neutral-100);
    border-bottom: 1px solid var(--Neutral-300);
    padding: 20px 16px;
}
.vp-secure-header-inner {
    max-width: 1232px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.vp-secure-logo {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--Neutral-800);
    font-weight: 600;
    font-size: 18px;
    text-decoration: none;
}
.vp-secure-logo img {
    height: 38px;
    width: auto;
}
.vp-secure-badge {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--S-c-green-100);
    color: var(--S-c-green-400);
    padding: 8px 16px;
    border-radius: 44px;
    font-size: 14px;
    font-weight: 600;
}
.vp-secure-badge svg {
    flex-shrink: 0;
}

/* ============================================
   STANDALONE FOOTER
   ============================================ */
.vp-secure-footer {
    background: var(--Neutral-300);
    padding: 24px 16px;
    text-align: center;
}
.vp-secure-footer p {
    font-size: 14px;
    color: var(--Neutral-600);
    line-height: 155%;
}
.vp-secure-footer a {
    color: var(--Primary-primary);
    text-decoration: none;
}
.vp-secure-footer a:hover {
    color: var(--Neutral-800);
} 

/* ============================================
   TRUST BANNER
   ============================================ */
.vp-trust-banner {
    background: linear-gradient(135deg, var(--Primary-primary) 0%, #8C58DA 100%);
    padding: 52px 16px;
    text-align: center;
    position: relative;
    overflow: hidden;
}
.vp-trust-banner::before {
    content: '';
    position: absolute;
    top: -60px;
    right: -60px;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: rgba(255,255,255,0.05);
}
.vp-trust-banner::after {
    content: '';
    position: absolute;
    bottom: -40px;
    left: -40px;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    background: rgba(255,255,255,0.04);
}
.vp-trust-banner-inner {
    position: relative;
    z-index: 1;
    max-width: 700px;
    margin: 0 auto;
}
.vp-shield-icon {
    width: 64px;
    height: 64px;
    background: rgba(255,255,255,0.15);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
}
.vp-trust-banner h1 {
    color: var(--Neutral-100);
    font-size: 36px;
    font-weight: 600;
    line-height: 130%;
    margin-bottom: 8px;
}
.vp-trust-banner svg {
    width: 100%;
    max-width: 400px;
}
.vp-trust-banner p {
    color: rgba(255,255,255,0.85);
    font-size: 18px;
    line-height: 160%;
    max-width: 400px;
    margin: 16px auto 0;
}

.vp-trust-banner p.vp-trust-banner-text{
    max-width: 560px;
}

/* ============================================
   HIPAA TRUST BAR
   ============================================ */
.vp-hipaa-bar {
    background: var(--Neutral-100);
    border-bottom: 1px solid var(--Neutral-300);
    padding: 20px 16px;
}
.vp-hipaa-bar-inner {
    display: flex;
    justify-content: center;
    gap: 36px;
    flex-wrap: wrap;
}
.vp-hipaa-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    color: var(--Neutral-600);
}
.vp-hipaa-item svg {
    flex-shrink: 0;
}

/* ============================================
   FORM SECTION
   ============================================ */
.vp-secure-form-section {
    padding: 48px 0 80px;
}
.vp-secure-form-inner {
    max-width: 720px;
}

/* Info callout */
.vp-info-callout {
    background: var(--Primary-3);
    border: 1px solid var(--Primary-2);
    border-radius: 16px;
    padding: 20px 24px;
    display: flex;
    gap: 14px;
    align-items: flex-start;
    margin-bottom: 32px;
}
.vp-info-callout svg {
    flex-shrink: 0;
    margin-top: 2px;
}
.vp-info-callout p {
    font-size: 15px;
    line-height: 155%;
    color: var(--Neutral-700);
}

/* Form card */
.vp-secure-form-card {
    background: var(--Neutral-100);
    border-radius: 24px;
    border: 1px solid var(--Neutral-300);
    box-shadow: 0 4px 24px rgba(0,0,0,0.04);
}

.gm-secure-form {
    padding: 48px 40px;
}

/* Help text below form */
.vp-secure-help {
    text-align: center;
    margin-top: 24px;
    padding: 16px;
}
.vp-secure-help p {
    color: var(--Neutral-600);
    font-size: 15px;
}
.vp-secure-help a {
    color: var(--Primary-primary);
    font-weight: 600;
}
.vp-secure-help a:hover {
    color: var(--Neutral-800);
}

/* ============================================
   WPFORMS FIELD OVERRIDES (inside .gm-secure-form)
   ============================================ */

/* Labels */
.gm-secure-form .wpforms-field-label {
    display: block;
    font-weight: 700;
    font-size: 16px;
    line-height: 148%;
    color: var(--Neutral-800);
    margin-bottom: 8px;
}

/* Required asterisk */
.gm-secure-form .wpforms-required-label {
    color: var(--S-c-red-400, #DC2B2B);
}

/* All inputs, selects, textareas */ 
.gm-secure-form input[type="text"],
.gm-secure-form input[type="email"],
.gm-secure-form input[type="tel"],
.gm-secure-form input[type="date"],
.gm-secure-form input[type="number"],
.gm-secure-form select,
.gm-secure-form textarea {
    border-radius: 16px !important;
    border: 1px solid var(--Neutral-400) !important;
    background: var(--Neutral-100) !important;
    box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.02) !important;
    padding: 18px 16px !important;
    width: 100% !important;
    font-family: var(--font-family-onest) !important;
    font-size: 17px !important;
    font-weight: 500 !important;
    line-height: 140% !important;
    color: var(--Neutral-800) !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
    outline: none !important;
    margin-top: 0;
}

.gm-secure-form input:focus,
.gm-secure-form select:focus,
.gm-secure-form textarea:focus {
    border-color: var(--Primary-primary) !important; 
}

.gm-secure-form input::placeholder,
.gm-secure-form textarea::placeholder {
    color: var(--Neutral-500) !important;
    font-weight: 400 !important;
}

/* Textarea */
.gm-secure-form textarea {
    min-height: 100px;
    resize: vertical;
}

/* Select dropdown */
.gm-secure-form select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M9.57086 14.7091L4.98086 10.1191C4.7946 9.93174 4.69006 9.67829 4.69006 9.41411C4.69006 9.14992 4.7946 8.89647 4.98086 8.70911C5.07382 8.61538 5.18442 8.54098 5.30628 8.49021C5.42814 8.43945 5.55884 8.41331 5.69086 8.41331C5.82287 8.41331 5.95357 8.43945 6.07543 8.49021C6.19729 8.54098 6.30789 8.61538 6.40086 8.70911L10.9809 13.3091C11.0738 13.4028 11.1844 13.4772 11.3063 13.528C11.4281 13.5788 11.5588 13.6049 11.6909 13.6049C11.8229 13.6049 11.9536 13.5788 12.0754 13.528C12.1973 13.4772 12.3079 13.4028 12.4009 13.3091L16.9809 8.70911C17.1678 8.5208 17.422 8.41449 17.6873 8.41355C17.9527 8.41261 18.2076 8.51713 18.3959 8.70411C18.5842 8.89108 18.6905 9.14521 18.6914 9.41057C18.6924 9.67593 18.5878 9.9308 18.4009 10.1191L13.8109 14.7091C13.2484 15.2709 12.4859 15.5865 11.6909 15.5865C10.8959 15.5865 10.1334 15.2709 9.57086 14.7091Z' fill='%23626270'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 16px center !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    padding-right: 48px !important;
    cursor: pointer;
}
.gm-secure-form select:invalid {
    color: var(--Neutral-500) !important;
    font-weight: 400 !important;
}
.gm-secure-form select:valid {
    color: var(--Neutral-800) !important;
    font-weight: 500 !important;
}

/* Date field - fix native picker */
.gm-secure-form input[type="date"] {
    cursor: pointer;
}

.gm-secure-form .wpforms-field-date-time fieldset{
    border: none;
}

.gm-secure-form .wpforms-field-date-time fieldset .wpforms-field-date-dropdown-wrap{
    display: flex;
    width: 100%;
    gap: 20px;
}

/* Layout rows spacing */
.gm-secure-form .wpforms-field-layout-rows .wpforms-layout-row {
    margin-bottom: 20px;
}

/* Individual field spacing */
.gm-secure-form .wpforms-field {
    margin-bottom: 20px;
}

.gm-secure-form .wpforms-layout-column .wpforms-field{
    margin-bottom: 0;
}

/* Sub-labels (below fields like Name first/last) */
.gm-secure-form .wpforms-field-sublabel {
    display: none;
}

/* ============================================
   SECTION HEADERS (HTML blocks in WPForms)
   ============================================ */
.gm-section-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--Neutral-300);
    margin-bottom: 8px;
}
.gm-section-header .gm-section-icon {
    width: 40px;
    height: 40px;
    background: var(--Primary-3);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.gm-section-header h3 {
    font-size: 22px;
    font-weight: 600;
    color: var(--Neutral-800);
    line-height: 130%;
}

/* Section divider (HTML block between sections) */
.gm-section-divider {
    height: 1px;
    background: var(--Neutral-300);
    margin: 20px 0;
}

/* ============================================
   FILE UPLOAD STYLING
   ============================================ */
.gm-secure-form .wpforms-field-file-upload .wpforms-field-label {
    font-weight: 600;
    font-size: 15px;
    color: var(--Neutral-700);
}

/* Modern drag-drop upload area */
.gm-secure-form .wpforms-uploader {
    border: 2px dashed var(--Neutral-400) !important;
    border-radius: 16px !important;
    background: #fff !important;
    padding: 28px 20px !important;
    transition: border-color 0.2s ease, background 0.2s ease;
}
.gm-secure-form .wpforms-uploader:hover {
    border-color: var(--Primary-2) !important;
    background: var(--Primary-3) !important;
}

/* Upload hint text */
.gm-upload-hint {
    font-size: 14px;
    color: var(--Neutral-500);
    margin-top: 6px;
}

/* Upload row labels */
.gm-upload-row-label {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}
.gm-upload-row-label span {
    font-weight: 600;
    font-size: 15px;
    color: var(--Neutral-700);
}

/* ============================================
   CONSENT / PRIVACY CHECKBOX
   ============================================ */
.gm-secure-form .gm-privacy {
    margin-top: 12px;
}
.gm-secure-form .gm-privacy fieldset {
    border: none;
}
.gm-secure-form .gm-privacy ul li {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}
.gm-secure-form .gm-privacy ul li label {
    font-size: 15px;
    line-height: 155%;
    color: var(--Neutral-600);
    font-weight: 400;
    cursor: pointer;
}
.gm-secure-form .gm-privacy ul li a {
    text-decoration: underline;
    color: #8c59da;
}

/* Custom checkbox */
.gm-secure-form .gm-privacy ul li input[type="checkbox"] {
    width: 22px !important;
    height: 22px !important;
    min-width: 22px;
    border-radius: 6px !important;
    border: 1.5px solid var(--Neutral-400) !important;
    background: var(--Neutral-100) !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    padding: 0 !important;
    cursor: pointer;
    margin-top: 2px;
    transition: all 0.2s ease;
    box-shadow: none !important;
}
.gm-secure-form .gm-privacy ul li input[type="checkbox"]:checked {
    background-color: var(--Primary-primary) !important;
    border-color: var(--Primary-primary) !important;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 8l3 3 5-6' stroke='white' stroke-width='2'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
}

/* ============================================
   SUBMIT BUTTON
   ============================================ */
.gm-secure-form .wpforms-submit.gm-submit-form {
    display: flex;
    width: 100%;
    height: 64px;
    justify-content: center;
    align-items: center;
    gap: 12px;
    border-radius: 12px;
    box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.12);
    background: var(--Primary-primary);
    color: var(--Neutral-100);
    border: none;
    font-family: var(--font-family-onest);
    font-size: 18px;
    font-weight: 700;
    line-height: 148%;
    cursor: pointer;
    transition: background 0.3s ease, box-shadow 0.3s ease;
    margin-top: 28px;
}
.gm-secure-form .wpforms-submit.gm-submit-form:hover {
    background: var(--Secondary-1);
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.16);
}

/* ============================================
   SUCCESS / ERROR STATES
   ============================================ */
.gm-secure-form .wpforms-confirmation-container {
    color: var(--S-c-green-400);
    font-weight: 500;
    font-size: 20px;
    text-align: center;
    padding: 48px 24px;
    line-height: 150%;
}

.gm-secure-form .wpforms-error {
    color: #DC2B2B;
    font-size: 14px;
    margin-top: 6px;
}

/* Hide WPForms elements we don't need */
#wpforms-error-noscript,
.wpforms-label-hide,
.wpforms-field-limit-text,
.wpforms-hidden {
    display: none !important;
}

/* ============================================
   WORDPRESS PASSWORD FORM OVERRIDE
   ============================================ */
.vp-password-form-wrap {
    padding: 48px 40px;
    text-align: center;
}
.vp-password-form-wrap .post-password-form > p {
    font-size: 16px;
    line-height: 160%;
    color: var(--Neutral-600);
    margin-bottom: 24px;
}
.vp-password-form-wrap label {
    display: block;
    font-weight: 600;
    font-size: 16px;
    color: var(--Neutral-800);
    margin-bottom: 8px;
    text-align: left;
}
.vp-password-form-wrap input[type="password"] {
    border-radius: 16px;
    border: 1px solid var(--Neutral-400);
    background: var(--Neutral-100);
    box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.02);
    padding: 18px 16px;
    width: 100%;
    font-family: var(--font-family-onest);
    font-size: 17px;
    font-weight: 500;
    outline: none;
    margin: 8px 0;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
/* Invalid password error — style WP's native message */
.post-password-form-invalid-password {
    display: flex; 
    text-align: left;
    gap: 10px;
    margin-bottom: 16px;
}
.post-password-form-invalid-password p {
    color: #DC2B2B;
    font-weight: 600;
    font-size: 15px;
    line-height: 150%;
    margin: 0;
}

.post-password-form-invalid-password::before {
    content: '';
    width: 22px;
    height: 22px;
    min-width: 22px;
    border-radius: 50%;
    background: #DC2B2B url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 4.5v4' stroke='white' stroke-width='1.5' stroke-linecap='round'/%3E%3Ccircle cx='8' cy='11' r='1' fill='white'/%3E%3C/svg%3E") no-repeat center;
} 

.vp-password-form-wrap input[type="password"]:focus {
    border-color: var(--Primary-primary);
    box-shadow: 0 0 0 3px rgba(110, 47, 208, 0.1);
}
.vp-password-form-wrap input[type="submit"] {
    display: flex;
    width: 100%;
    height: 56px;
    justify-content: center;
    align-items: center;
    border-radius: 12px;
    background: var(--Primary-primary);
    color: var(--Neutral-100);
    border: none;
    font-family: var(--font-family-onest);
    font-size: 17px;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.3s ease;
}
.vp-password-form-wrap input[type="submit"]:hover {
    background: var(--Secondary-1);
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 600px) {
    .vp-trust-banner {
        padding: 36px 16px;
    }
    .vp-trust-banner h1 {
        font-size: 32px;
        line-height: 124%;
    }
    .vp-trust-banner p {
        font-size: 16px;
    }
    .vp-hipaa-bar-inner {
        gap: 16px;
        justify-content: flex-start;
    }
    .gm-secure-form {
        padding: 32px 20px;
    }
    .gm-section-header h3 {
        font-size: 19px;
    }
    .vp-secure-form-section {
        padding: 36px 0 60px;
    }
    .vp-secure-logo span {
        display: none;
    }
    .vp-password-form-wrap {
        padding: 36px 24px;
    }
    .gm-secure-form .wpforms-confirmation-container {
        font-size: 16px;
    }
    .gm-secure-form .wpforms-field-layout-rows .wpforms-layout-row {
        gap: 20px;
    }
    div.wpforms-container .wpforms-form .wpforms-field-layout .wpforms-layout-column{
        padding-right: 10px!important;
    }
}

@media (max-width: 480px) {
    .vp-trust-banner h1 {
        font-size: 28px;
    }
    .gm-secure-form {
        padding: 28px 16px;
    }
    .vp-secure-form-card {
        border-radius: 20px;
    }
    .gm-secure-form .wpforms-submit.gm-submit-form {
        height: 56px;
        font-size: 16px;
    }
    .vp-hipaa-bar-inner {
        flex-direction: column;
        align-items: center;
        gap: 10px;
    }
    .vp-info-callout {
        padding: 16px 18px;
    }
}