/* =========================================================
   SAHF CONSULTATION MODAL
   =========================================================

   Light institutional theme.

   Functionality is intentionally untouched.
   Existing JS selectors, data attributes and state classes
   remain exactly the same.
   ========================================================= */


/* =========================================================
   DESIGN TOKENS
   ========================================================= */

.consultation-modal{

    --cm-navy:#0B1F33;
    --cm-navy-deep:#071523;

    --cm-cream:#F6F3EC;
    --cm-cream-deep:#ECE7DC;

    --cm-white:#FFFFFF;

    --cm-gold:#C9A24D;
    --cm-gold-dark:#9A7A34;

    --cm-text:#0B1F33;
    --cm-text-muted:#667382;

    --cm-line:rgba(11,31,51,0.14);
    --cm-line-strong:rgba(11,31,51,0.22);

    --cm-input:#FFFFFF;

    --cm-danger:#B85F45;
    --cm-success:#6E8B6A;

    font-family:'Inter',sans-serif;

    -webkit-font-smoothing:antialiased;
}


/* =========================================================
   BOX SIZING
   ========================================================= */

.consultation-modal,
.consultation-modal *{

    box-sizing:border-box;
}


/* =========================================================
   OVERLAY
   ========================================================= */

.consultation-modal-overlay{

    position:fixed;

    inset:0;

    z-index:1000;

    display:none;

    align-items:center;

    justify-content:center;

    padding:24px;

    background:rgba(7,21,35,0.58);

    -webkit-backdrop-filter:blur(4px);

    backdrop-filter:blur(4px);

    opacity:0;

    transition:opacity .25s ease;
}


.consultation-modal-overlay[data-open="true"]{

    display:flex;

    opacity:1;
}


/* =========================================================
   DIALOG
   ========================================================= */

.consultation-modal-dialog{

    position:relative;

    width:100%;

    max-width:560px;

    max-height:min(88vh,860px);

    background:var(--cm-cream);

    color:var(--cm-text);

    border:1px solid var(--cm-line-strong);

    box-shadow:
        0 24px 70px rgba(7,21,35,0.20);

    display:flex;

    flex-direction:column;

    transform:translateY(14px) scale(0.98);

    transition:transform .25s ease;
}


#consultationModalForm:not([hidden]){

    display:flex;

    flex-direction:column;

    flex:1;

    min-height:0;
}


.consultation-modal-overlay[data-open="true"]
.consultation-modal-dialog{

    transform:none;
}


@media (prefers-reduced-motion:reduce){

    .consultation-modal-overlay,
    .consultation-modal-dialog{

        transition:none;
    }

}


/* =========================================================
   HEADER
   ========================================================= */

.consultation-modal-header{

    flex:none;

    padding:32px 32px 20px;

    border-bottom:1px solid var(--cm-line);
}


.consultation-modal-eyebrow{

    display:inline-flex;

    align-items:center;

    gap:10px;

    font-size:0.72rem;

    letter-spacing:0.16em;

    text-transform:uppercase;

    color:var(--cm-gold-dark);

    margin-bottom:14px;
}


.consultation-modal-eyebrow::before{

    content:'';

    width:18px;

    height:1px;

    background:var(--cm-gold);
}


.consultation-modal-title{

    font-family:'Playfair Display',serif;

    font-weight:600;

    font-size:1.5rem;

    line-height:1.3;

    margin:0;

    color:var(--cm-navy);

    /*
     * Explicitly non-italic.
     */
    font-style:normal;
}


.consultation-modal-subtitle{

    margin:8px 0 0;

    font-size:0.9rem;

    line-height:1.6;

    color:var(--cm-text-muted);
}


/* =========================================================
   CLOSE BUTTON
   ========================================================= */

.consultation-modal-close{

    position:absolute;

    top:24px;

    right:24px;

    width:32px;

    height:32px;

    background:transparent;

    border:1px solid var(--cm-line-strong);

    color:var(--cm-text-muted);

    cursor:pointer;

    display:flex;

    align-items:center;

    justify-content:center;

    transition:
        border-color .2s ease,
        color .2s ease,
        background .2s ease;
}


.consultation-modal-close:hover{

    border-color:var(--cm-gold);

    color:var(--cm-gold-dark);

    background:rgba(201,162,77,0.05);
}


.consultation-modal-close svg{

    width:14px;

    height:14px;
}


/* =========================================================
   SCROLLABLE BODY
   ========================================================= */

.consultation-modal-body{

    flex:1 1 auto;

    min-height:0;

    overflow-y:auto;

    padding:28px 32px 8px;
}


/* =========================================================
   FORM SECTIONS
   ========================================================= */

.consultation-modal-section{

    padding-bottom:26px;

    margin-bottom:26px;

    border-bottom:1px solid var(--cm-line);
}


.consultation-modal-section:last-of-type{

    border-bottom:none;

    margin-bottom:0;

    padding-bottom:0;
}


.consultation-modal-section-label{

    /*
     * Removed italic styling.
     */

    font-family:'Inter',sans-serif;

    font-style:normal;

    font-weight:600;

    font-size:0.82rem;

    line-height:1.4;

    letter-spacing:0.08em;

    text-transform:uppercase;

    color:var(--cm-gold-dark);

    margin:0 0 16px;
}


/* =========================================================
   FIELD ROWS
   ========================================================= */

.consultation-modal-row{

    display:flex;

    gap:12px;
}


.consultation-modal-row
+ .consultation-modal-row{

    margin-top:14px;
}


.consultation-modal-field{

    flex:1;

    min-width:0;

    text-align:left;
}


.consultation-modal-field
+ .consultation-modal-field{

    margin-top:14px;
}


.consultation-modal-row
.consultation-modal-field
+ .consultation-modal-field{

    margin-top:0;
}


/* =========================================================
   LABELS
   ========================================================= */

.consultation-modal-label{

    display:block;

    font-size:0.78rem;

    font-weight:500;

    color:var(--cm-text);

    margin-bottom:7px;
}


.consultation-modal-label-optional{

    font-size:0.72rem;

    color:var(--cm-text-muted);

    opacity:1;
}


/* =========================================================
   INPUTS / SELECT / TEXTAREA
   ========================================================= */

.consultation-modal-input,
.consultation-modal-select,
.consultation-modal-textarea{

    width:100%;

    background:var(--cm-input);

    border:1px solid var(--cm-line-strong);

    color:var(--cm-text);

    font-family:inherit;

    font-size:0.93rem;

    padding:13px 14px;

    border-radius:0;

    transition:
        border-color .2s ease,
        background .2s ease,
        box-shadow .2s ease;
}


.consultation-modal-input:focus,
.consultation-modal-select:focus,
.consultation-modal-textarea:focus{

    outline:none;

    border-color:var(--cm-gold);

    background:var(--cm-white);

    box-shadow:
        0 0 0 2px rgba(201,162,77,0.10);
}


.consultation-modal-input::placeholder,
.consultation-modal-textarea::placeholder{

    color:#8993A0;

    opacity:1;
}


.consultation-modal-field[data-invalid="true"]
.consultation-modal-input,
.consultation-modal-field[data-invalid="true"]
.consultation-modal-select,
.consultation-modal-field[data-invalid="true"]
.consultation-modal-textarea{

    border-color:var(--cm-danger);
}


/* =========================================================
   SELECT
   ========================================================= */

.consultation-modal-select{

    appearance:none;

    -webkit-appearance:none;

    background-color:var(--cm-input);

    background-image:url(
        "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239A7A34' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"
    );

    background-repeat:no-repeat;

    background-position:right 12px center;

    background-size:14px;

    padding-right:36px;
}


.consultation-modal-select:invalid{

    color:var(--cm-text-muted);
}


/* =========================================================
   TEXTAREA
   ========================================================= */

.consultation-modal-textarea{

    resize:vertical;

    min-height:96px;

    line-height:1.6;
}


.consultation-modal-counter{

    display:block;

    margin-top:6px;

    font-size:0.72rem;

    color:var(--cm-text-muted);

    text-align:right;
}


/* =========================================================
   ERRORS
   ========================================================= */

.consultation-modal-error{

    display:block;

    margin-top:6px;

    font-size:0.76rem;

    line-height:1.4;

    color:var(--cm-danger);

    min-height:1.3em;
}


/* =========================================================
   PILLS
   ========================================================= */

.consultation-modal-pills{

    display:flex;

    flex-wrap:wrap;

    gap:8px;
}


.consultation-modal-pill{

    position:relative;
}


.consultation-modal-pill input{

    position:absolute;

    width:1px;

    height:1px;

    padding:0;

    margin:-1px;

    overflow:hidden;

    clip:rect(0,0,0,0);

    white-space:nowrap;

    border:0;
}


.consultation-modal-pill span{

    display:inline-flex;

    align-items:center;

    padding:9px 16px;

    font-size:0.84rem;

    border:1px solid var(--cm-line-strong);

    background:var(--cm-white);

    color:var(--cm-text-muted);

    cursor:pointer;

    transition:
        border-color .2s ease,
        color .2s ease,
        background .2s ease;
}


.consultation-modal-pill
input:checked
+ span{

    border-color:var(--cm-gold);

    color:var(--cm-gold-dark);

    background:rgba(201,162,77,0.08);
}


.consultation-modal-pill
input:focus-visible
+ span{

    outline:2px solid var(--cm-gold);

    outline-offset:2px;
}


/* =========================================================
   CHOICE CARDS
   ========================================================= */

.consultation-modal-cards{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:8px;
}


.consultation-modal-cards[data-cols="1"]{

    grid-template-columns:1fr;
}


.consultation-modal-card{

    position:relative;
}


.consultation-modal-card input{

    position:absolute;

    width:1px;

    height:1px;

    padding:0;

    margin:-1px;

    overflow:hidden;

    clip:rect(0,0,0,0);

    white-space:nowrap;

    border:0;
}


.consultation-modal-card-face{

    display:flex;

    align-items:center;

    gap:10px;

    height:100%;

    padding:12px 14px;

    border:1px solid var(--cm-line-strong);

    background:var(--cm-white);

    cursor:pointer;

    transition:
        border-color .2s ease,
        background .2s ease,
        box-shadow .2s ease;
}


.consultation-modal-card-face:hover{

    border-color:rgba(201,162,77,0.65);

    background:#FCFBF8;
}


.consultation-modal-card-icon{

    flex:none;

    font-size:0.95rem;

    line-height:1;
}


.consultation-modal-card-text{

    font-size:0.85rem;

    line-height:1.35;

    color:var(--cm-text);
}


.consultation-modal-card-text small{

    display:block;

    font-size:0.72rem;

    color:var(--cm-text-muted);

    margin-top:2px;
}


.consultation-modal-card
input:checked
+ .consultation-modal-card-face{

    border-color:var(--cm-gold);

    background:rgba(201,162,77,0.08);

    box-shadow:
        inset 0 0 0 1px rgba(201,162,77,0.10);
}


.consultation-modal-card
input:checked
+ .consultation-modal-card-face
.consultation-modal-card-text{

    color:var(--cm-gold-dark);
}


.consultation-modal-card
input:focus-visible
+ .consultation-modal-card-face{

    outline:2px solid var(--cm-gold);

    outline-offset:2px;
}


/* =========================================================
   PROGRESSIVE DISCLOSURE
   ========================================================= */

.consultation-modal-reveal{

    overflow:hidden;

    max-height:0;

    opacity:0;

    transition:
        max-height .3s ease,
        opacity .25s ease,
        margin-top .3s ease;
}


.consultation-modal-reveal[data-visible="true"]{

    max-height:220px;

    opacity:1;

    margin-top:14px;
}


@media (prefers-reduced-motion:reduce){

    .consultation-modal-reveal{

        transition:none;
    }

}


/* =========================================================
   CONSENT
   ========================================================= */

.consultation-modal-consent{

    display:flex;

    align-items:flex-start;

    gap:10px;

    text-align:left;
}


.consultation-modal-consent input{

    flex:none;

    margin-top:3px;

    width:16px;

    height:16px;

    accent-color:var(--cm-gold);
}


.consultation-modal-consent label{

    font-size:0.78rem;

    line-height:1.6;

    color:var(--cm-text-muted);
}


/* =========================================================
   HONEYPOT
   ========================================================= */

.consultation-modal-hp{

    position:absolute;

    left:-9999px;

    top:-9999px;

    width:1px;

    height:1px;

    overflow:hidden;
}


/* =========================================================
   SUBMIT ERROR
   ========================================================= */

.consultation-modal-submit-error{

    display:block;

    margin-top:14px;

    font-size:0.82rem;

    color:var(--cm-danger);

    text-align:left;
}


/* =========================================================
   FOOTER
   ========================================================= */

.consultation-modal-footer{

    flex:none;

    padding:20px 32px 28px;

    border-top:1px solid var(--cm-line);
}


/* =========================================================
   SUBMIT BUTTON
   ========================================================= */

.consultation-modal-submit{

    width:100%;

    min-height:52px;

    background:var(--cm-gold);

    color:var(--cm-navy-deep);

    font-family:inherit;

    font-weight:600;

    font-size:0.92rem;

    letter-spacing:0.01em;

    border:1px solid var(--cm-gold);

    border-radius:0;

    cursor:pointer;

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    transition:
        background .2s ease,
        border-color .2s ease,
        opacity .2s ease,
        transform .2s ease;
}


.consultation-modal-submit:hover{

    background:#dcb769;

    border-color:#dcb769;

    transform:translateY(-1px);
}


.consultation-modal-submit:active{

    transform:translateY(0);
}


.consultation-modal-submit:disabled{

    opacity:0.6;

    cursor:not-allowed;

    transform:none;
}


/* =========================================================
   LOADING
   ========================================================= */

.consultation-modal-spinner{

    width:14px;

    height:14px;

    border:2px solid rgba(7,21,35,0.25);

    border-top-color:var(--cm-navy-deep);

    border-radius:50%;

    display:none;

    animation:consultation-modal-spin .7s linear infinite;
}


.consultation-modal-submit[data-loading="true"]
.consultation-modal-spinner{

    display:inline-block;
}


.consultation-modal-submit[data-loading="true"]
.consultation-modal-submit-label{

    display:none;
}


@keyframes consultation-modal-spin{

    to{

        transform:rotate(360deg);
    }
}


@media (prefers-reduced-motion:reduce){

    .consultation-modal-spinner{

        animation-duration:1.4s;
    }

}


/* =========================================================
   FINE PRINT
   ========================================================= */

.consultation-modal-fineprint{

    margin:14px 0 0;

    font-size:0.7rem;

    line-height:1.6;

    color:var(--cm-text-muted);

    text-align:center;
}


/* =========================================================
   ACCESSIBILITY / FOCUS
   ========================================================= */

.consultation-modal button:focus-visible,
.consultation-modal-input:focus-visible,
.consultation-modal-select:focus-visible,
.consultation-modal-textarea:focus-visible{

    outline:2px solid var(--cm-gold);

    outline-offset:2px;
}


/* =========================================================
   SUCCESS STATE
   ========================================================= */

.consultation-modal-success{

    display:none;

    flex-direction:column;

    align-items:center;

    text-align:center;

    padding:52px 32px 12px;
}


.consultation-modal-success[data-visible="true"]{

    display:flex;
}


.consultation-modal-success-icon{

    width:44px;

    height:44px;

    border:1px solid var(--cm-gold);

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    color:var(--cm-gold-dark);

    margin-bottom:22px;
}


.consultation-modal-success-icon svg{

    width:18px;

    height:18px;
}


.consultation-modal-success-title{

    font-family:'Playfair Display',serif;

    font-weight:600;

    font-size:1.35rem;

    margin:0 0 12px;

    color:var(--cm-navy);

    font-style:normal;
}


.consultation-modal-success-text{

    font-size:0.92rem;

    line-height:1.7;

    color:var(--cm-text-muted);

    max-width:38ch;

    margin:0 0 28px;
}


.consultation-modal-success-cta{

    font-family:inherit;

    font-weight:500;

    font-size:0.86rem;

    color:var(--cm-text);

    background:var(--cm-white);

    border:1px solid var(--cm-line-strong);

    padding:13px 26px;

    cursor:pointer;

    transition:
        border-color .2s ease,
        color .2s ease,
        background .2s ease;
}


.consultation-modal-success-cta:hover{

    border-color:var(--cm-gold);

    color:var(--cm-gold-dark);

    background:#FCFBF8;
}


/* =========================================================
   RESPONSIVE — BOTTOM SHEET
   ========================================================= */

@media (max-width:560px){

    .consultation-modal-overlay{

        padding:0;

        align-items:flex-end;
    }


    .consultation-modal-dialog{

        max-width:none;

        max-height:92vh;

        box-shadow:
            0 -12px 50px rgba(7,21,35,0.18);
    }


    .consultation-modal-overlay[data-open="true"]
    .consultation-modal-dialog{

        transform:none;
    }


    .consultation-modal-dialog{

        transform:translateY(24px);
    }


    .consultation-modal-row{

        flex-direction:column;

        gap:14px;
    }


    .consultation-modal-header,
    .consultation-modal-body,
    .consultation-modal-footer{

        padding-left:22px;

        padding-right:22px;
    }


    .consultation-modal-header{

        padding-top:26px;

        padding-bottom:18px;
    }


    .consultation-modal-close{

        top:18px;

        right:18px;
    }


    .consultation-modal-title{

        font-size:1.35rem;

        padding-right:36px;
    }


    .consultation-modal-body{

        padding-top:24px;
    }


    .consultation-modal-footer{

        padding-top:18px;

        padding-bottom:22px;
    }


    .consultation-modal-success{

        padding-left:22px;

        padding-right:22px;
    }


    .consultation-modal-cards{

        grid-template-columns:1fr 1fr;
    }

}


/* =========================================================
   EXTRA SMALL SCREENS
   ========================================================= */

@media (max-width:380px){

    .consultation-modal-cards{

        grid-template-columns:1fr;
    }


    .consultation-modal-pill span{

        padding-left:13px;

        padding-right:13px;

        font-size:0.8rem;
    }

}