/* ==========================================================================
   LCDP NEWSLETTER PAGE
   ========================================================================== */

.lcdp-newsletter-page {
    position:
        relative;

    min-height:
        70vh;

    padding:
        44px
        0
        72px;

    background:
        transparent;
}


/* ==========================================================================
   MAIN CARD
   ========================================================================== */

.newsletter-card {
    max-width:
        920px;

    margin:
        0
        auto;

    overflow:
        hidden;

    background:
        rgba(255, 255, 255, 0.24);

    border:
        1px solid rgba(255, 255, 255, 0.34);

    border-radius:
        24px;

    box-shadow:
        0 28px 70px rgba(0, 0, 0, 0.24),
        inset 0 1px 0 rgba(255, 255, 255, 0.26);

    backdrop-filter:
        blur(24px)
        saturate(145%);

    -webkit-backdrop-filter:
        blur(24px)
        saturate(145%);
}


/* ==========================================================================
   HERO
   ========================================================================== */

.newsletter-hero {
    padding:
        40px
        42px
        34px;

    background:
        linear-gradient(
            135deg,
            #ffffff 0%,
            #f3f7fb 100%
        );

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


.newsletter-eyebrow {
    display:
        inline-flex;

    margin-bottom:
        12px;

    color:
        var(--lcdp-primary);

    font-size:
        0.76rem;

    font-weight:
        750;

    letter-spacing:
        0.08em;

    text-transform:
        uppercase;
}


.newsletter-hero h1 {
    max-width:
        760px;

    margin:
        0
        0
        14px;

    color:
        var(--lcdp-text);

    font-size:
        clamp(2rem, 4vw, 3.1rem);

    font-weight:
        780;

    line-height:
        1.06;
}


.newsletter-hero p {
    max-width:
        700px;

    margin:
        0;

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

    font-size:
        1rem;

    line-height:
        1.6;
}


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

.newsletter-body {
    padding:
        34px
        42px
        42px;
}


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

.glass-section {
    padding:
        24px;

    margin-bottom:
        22px;

    background:
        rgba(255, 255, 255, 0.52);

    border:
        1px solid rgba(255, 255, 255, 0.42);

    border-radius:
        18px;

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.32);

    backdrop-filter:
        blur(18px)
        saturate(135%);

    -webkit-backdrop-filter:
        blur(18px)
        saturate(135%);
}


.section-title {
    margin-bottom:
        18px;

    color:
        var(--lcdp-text);

    font-size:
        1rem;

    font-weight:
        750;
}


/* ==========================================================================
   FORM CONTROLS
   ========================================================================== */

.newsletter-card .form-label,
#preferencesModal .form-label {
    margin-bottom:
        7px;

    color:
        var(--lcdp-text);

    font-size:
        0.86rem;

    font-weight:
        650;
}


.newsletter-card .form-control,
#preferencesModal .form-control {
    min-height:
        48px;

    padding:
        10px
        13px;

    background:
        rgba(255, 255, 255, 0.92);

    color:
        var(--lcdp-text);

    border:
        1px solid rgba(203, 213, 225, 0.95);

    border-radius:
        11px;

    box-shadow:
        none;

    font-size:
        0.95rem;
}


.newsletter-card .form-control:focus,
#preferencesModal .form-control:focus {
    border-color:
        var(--lcdp-primary);

    box-shadow:
        0 0 0 3px rgba(37, 99, 235, 0.10);
}


.required-star {
    color:
        #dc2626;
}


.hint-text {
    margin-top:
        7px;

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

    font-size:
        0.8rem;

    line-height:
        1.45;
}


/* ==========================================================================
   PHONE RECOMMENDATION
   ========================================================================== */

.phone-recommendation {
    margin-top:
        12px;

    padding:
        13px
        15px;

    background:
        #fff8e7;

    color:
        #713f12;

    border:
        1px solid #f3dfaa;

    border-radius:
        12px;

    font-size:
        0.83rem;

    line-height:
        1.5;
}


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

.consent-card {
    padding:
        18px;

    background:
        rgba(255, 255, 255, 0.58);

    border:
        1px solid rgba(255, 255, 255, 0.46);

    border-radius:
        14px;

    backdrop-filter:
        blur(12px)
        saturate(125%);

    -webkit-backdrop-filter:
        blur(12px)
        saturate(125%);
}


.consent-card + .consent-card {
    margin-top:
        14px;
}


.consent-label {
    display:
        flex;

    align-items:
        flex-start;

    gap:
        12px;

    margin:
        0;

    color:
        var(--lcdp-text);

    font-size:
        0.9rem;

    font-weight:
        600;

    line-height:
        1.5;

    cursor:
        pointer;
}


.consent-label input {
    flex:
        0
        0
        auto;

    width:
        18px;

    height:
        18px;

    margin-top:
        3px;
}


.sms-disclosure {
    margin-top:
        14px;

    padding-left:
        30px;

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

    font-size:
        0.78rem;

    line-height:
        1.6;
}


.sms-disclosure a {
    color:
        var(--lcdp-primary);

    font-weight:
        650;
}


/* ==========================================================================
   BUTTONS
   ========================================================================== */

.newsletter-submit,
.manage-button {
    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        100%;

    min-height:
        48px;

    padding:
        11px
        18px;

    margin-left:
        0 !important;

    margin-right:
        0 !important;

    border-radius:
        11px;

    box-sizing:
        border-box;

    font-size:
        0.92rem;

    font-weight:
        700;

    line-height:
        1.2;

    text-align:
        center;
}


.newsletter-submit {
    background:
        var(--lcdp-dark);

    color:
        #ffffff;

    border:
        0;
}


.newsletter-submit:hover,
.newsletter-submit:focus {
    background:
        var(--lcdp-primary);

    color:
        #ffffff;
}


.manage-button {
    background:
        #ffffff;

    color:
        var(--lcdp-text);

    border:
        1px solid var(--lcdp-border);
}


.manage-button:hover,
.manage-button:focus {
    background:
        rgba(255, 255, 255, 0.62);

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


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

.newsletter-alert {
    padding:
        16px
        18px;

    margin-bottom:
        22px;

    border-radius:
        14px;
}


.newsletter-alert-error {
    background:
        #fff1f2;

    color:
        #991b1b;

    border:
        1px solid #fecdd3;
}


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

.success-card {
    max-width:
        760px;

    margin:
        0
        auto;

    padding:
        46px
        38px;

    background:
        #ffffff;

    border:
        1px solid var(--lcdp-border);

    border-radius:
        24px;

    box-shadow:
        var(--lcdp-shadow-lg);

    text-align:
        center;
}


.success-icon {
    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        68px;

    height:
        68px;

    margin:
        0
        auto
        20px;

    background:
        #dcfce7;

    color:
        #166534;

    border-radius:
        50%;

    font-size:
        1.8rem;

    font-weight:
        800;
}


/* ==========================================================================
   PREFERENCES MODAL
   ========================================================================== */

#preferencesModal .modal-content {
    overflow:
        hidden;

    border:
        0;

    border-radius:
        20px;

    box-shadow:
        0 0 36px rgba(15, 23, 42, 0.18);
}


#preferencesModal .modal-header {
    padding:
        22px
        24px;

    background:
        #ffffff;

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


#preferencesModal .modal-title {
    color:
        var(--lcdp-text);

    font-weight:
        750;
}


#preferencesModal .modal-body {
    padding:
        24px;
}


#preferencesModal .modal-footer {
    padding:
        16px
        24px
        22px;

    background:
        #ffffff;

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


.code-email {
    margin-bottom:
        18px;

    padding:
        14px
        16px;

    background:
        var(--lcdp-surface-soft);

    border:
        1px solid var(--lcdp-border);

    border-radius:
        12px;

    color:
        var(--lcdp-text);

    text-align:
        center;

    font-weight:
        700;
}


.code-input {
    text-align:
        center;

    font-size:
        1.3rem !important;

    letter-spacing:
        0.18em;
}


/* ==========================================================================
   MOBILE
   ========================================================================== */

@media (max-width: 767.98px) {

    .lcdp-newsletter-page {
        padding:
            18px
            0
            34px;
    }


.newsletter-card {
    border-radius:
        20px;

    background:
        rgba(255, 255, 255, 0.24);
}


    .newsletter-hero {
        padding:
            26px
            20px
            24px;
    }


    .newsletter-hero h1 {
        font-size:
            1.9rem;
    }


    .newsletter-body {
        padding:
            20px;
    }


.glass-section {
    padding:
        18px;

    border-radius:
        15px;

    background:
        rgba(255, 255, 255, 0.50);
}


    .newsletter-card .form-control,
    #preferencesModal .form-control {
        font-size:
            16px;
    }


    .sms-disclosure {
        padding-left:
            0;
    }


    .success-card {
        padding:
            32px
            20px;

        border-radius:
            20px;
    }


    .success-card .btn {
        display:
            flex;

        width:
            100%;

        justify-content:
            center;

        margin:
            10px
            0
            0 !important;
    }


    #preferencesModal .modal-dialog {
        margin:
            12px;
    }


    #preferencesModal .modal-header,
    #preferencesModal .modal-body {
        padding:
            18px;
    }


    #preferencesModal .modal-footer {
        padding:
            16px
            18px
            18px;
    }

}