/* ==========================================================
   Newsletter Popup
   Cast Iron Range Cookers
   ========================================================== */

:root{

    --newsletter-overlay:rgba(0,0,0,.72);

    --newsletter-white:#ffffff;
    --newsletter-black:#222;

    --newsletter-primary:#8b5e3c;
    --newsletter-primary-hover:#734b2e;

    --newsletter-border:#d9d9d9;

    --newsletter-radius:12px;

    --newsletter-shadow:
        0 20px 60px rgba(0,0,0,.35);

    --newsletter-transition:.3s ease;

}

/* Prevent scrolling while popup is open */

body.newsletter-open{
    overflow:hidden;
}

/* ----------------------------------------------------------
   Overlay
---------------------------------------------------------- */

.newsletter-overlay{

    position:fixed;

    inset:0;

    display:flex;

    justify-content:center;

    align-items:center;

    padding:20px;

    background:var(--newsletter-overlay);

    z-index:99999;

    visibility:hidden;

    opacity:0;

    transition:opacity .35s ease,
               visibility .35s ease;

}

/* shown via JS */

.newsletter-overlay.active{

    visibility:visible;

    opacity:1;

}

/* ----------------------------------------------------------
   Window
---------------------------------------------------------- */

.newsletter-modal{

    position:relative;

    display:flex;

    width:100%;

    max-width:920px;

    background:#fff;

    border-radius:var(--newsletter-radius);

    overflow:hidden;

    box-shadow:var(--newsletter-shadow);

    transform:translateY(30px) scale(.96);

    transition:transform .35s ease;

}

.newsletter-overlay.active .newsletter-modal{

    transform:translateY(0) scale(1);

}

/* ----------------------------------------------------------
   Left image
---------------------------------------------------------- */

.newsletter-image{

    flex:1;

    min-height:520px;

    background:#ddd;

}

.newsletter-image img{

    width:100%;

    height:100%;

    object-fit:cover;

    display:block;

}

/* ----------------------------------------------------------
   Right panel
---------------------------------------------------------- */

.newsletter-content{

    flex:1;

    padding:48px;

    display:flex;

    flex-direction:column;

    justify-content:center;

}

.newsletter-kicker{

    display:inline-block;

    margin-bottom:14px;

    color:var(--newsletter-primary);

    font-size:.82rem;

    font-weight:700;

    letter-spacing:2px;

    text-transform:uppercase;

}

.newsletter-content h2{

    margin:0 0 18px;

    font-size:2rem;

    line-height:1.2;

    color:#222;

}

.newsletter-intro{

    margin-bottom:18px;

    line-height:1.7;

    color:#555;

}

.newsletter-highlight{

    margin-bottom:30px;

    padding:18px;

    background:#f8f6f2;

    border-left:5px solid var(--newsletter-primary);

    line-height:1.6;

}

/* ----------------------------------------------------------
   Form
---------------------------------------------------------- */

.newsletter-content label{

    display:block;

    margin-bottom:8px;

    font-weight:600;

}

.newsletter-content input[type=email]{

    width:100%;

    padding:14px 16px;

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

    border-radius:6px;

    font-size:16px;

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

}

.newsletter-content input[type=email]:focus{

    outline:none;

    border-color:var(--newsletter-primary);

    box-shadow:0 0 0 3px rgba(139,94,60,.15);

}

.newsletter-submit{

    width:100%;

    margin-top:20px;

    padding:15px;

    border:none;

    border-radius:6px;

    background:var(--newsletter-primary);

    color:#fff;

    font-size:16px;

    font-weight:600;

    cursor:pointer;

    transition:background var(--newsletter-transition);

}

.newsletter-submit:hover:not(:disabled){

    background:var(--newsletter-primary-hover);

}

.newsletter-submit:disabled{

    opacity:.55;

    cursor:not-allowed;

}

/* ----------------------------------------------------------
   Footer text
---------------------------------------------------------- */

.newsletter-smallprint{

    margin-top:22px;

    font-size:.85rem;

    color:#777;

    text-align:center;

}

/* ----------------------------------------------------------
   Close button
---------------------------------------------------------- */

.newsletter-close{

    position:absolute;

    top:14px;

    right:14px;

    width:42px;

    height:42px;

    border:none;

    border-radius:50%;

    background:#fff;

    color:#555;

    font-size:28px;

    line-height:1;

    cursor:pointer;

    box-shadow:0 3px 10px rgba(0,0,0,.15);

    transition:all .2s ease;

}

.newsletter-close:hover{

    background:#f2f2f2;

    transform:rotate(90deg);

}

/* ----------------------------------------------------------
   Responsive
---------------------------------------------------------- */

@media (max-width:900px){

    .newsletter-modal{

        flex-direction:column;

        max-width:560px;

    }

    .newsletter-image{

        min-height:260px;

    }

    .newsletter-content{

        padding:34px;

    }

}

@media (max-width:600px){

    .newsletter-overlay{

        padding:12px;

    }

    .newsletter-content{

        padding:26px;

    }

    .newsletter-content h2{

        font-size:1.6rem;

    }

    .newsletter-image{

        min-height:220px;

    }

}

@media (max-height:700px){

    .newsletter-modal{

        max-height:95vh;

        overflow:auto;

    }

}

.newsletter-message {
    padding: 12px 16px;
    margin-bottom: 16px;
    border-radius: 4px;
    font-size: 14px;
}
.newsletter-message-success {
    background: #d4edda;
    color: #155724;
}
.newsletter-message-error {
    background: #f8d7da;
    color: #721c24;
}