/* ================================================
   Auth / newsletter modal redesign
   Covers the site-wide footer modals:
     #modalSignup / #modalRegisterSuccess (newsletter popup)
     #modalLogin  / #modalRegister        (header Log In / Register)
   Aligns them with the vb redesign: Inter, red #c8102e (hover #a50d26),
   6px input radius / 12px card radius, #e5e5e5 borders, #1a1a1a text,
   #6b6b6b muted. All render in footer.php, so this file is loaded
   site-wide via a filemtime-versioned enqueue in functions.php.
   ================================================ */

/* ---- Dialog / content shell ---- */
#modalSignup .modal-dialog {
    max-width: 880px;
    /* Vertically center (markup has no .modal-dialog-centered class) */
    display: flex;
    align-items: center;
    min-height: calc(100% - 3.5rem);
    margin: 1.75rem auto;
}
#modalSignup .modal-content {
    border: 0;
    border-radius: 12px !important; /* beats legacy #modalSignup .modal-content { border-radius:0 !important } */
    overflow: hidden;               /* clip the left image to the rounded corners */
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.18);
}
#modalSignup .modal-body {
    padding: 0;
}
#modalSignup .modal-body .btn-close {
    position: absolute;
    top: 18px;
    right: 18px;
    z-index: 2;
    opacity: 0.7;
}
#modalSignup .modal-body .btn-close:hover {
    opacity: 1;
}

/* ---- Left image column ---- */
#modalSignup .modal-body .row > div:first-child {
    padding-left: 32px;
}
#modalSignup .modal-body .signup-image {
    width: 100%;
    height: 100%;
    min-height: 340px; /* fixed fallback so the image never collapses */
    flex: 1;
    background-color: #f5f5f5;
}

/* ---- Right content column ---- */
#modalSignup .modal-body .signup-content {
    margin-left: 0;
    padding: 48px 44px;
    font-family: 'Inter', sans-serif;
    color: #1a1a1a;
}
#modalSignup .modal-body .signup-content,
#modalSignup .modal-body .signup-content p,
#modalSignup .modal-body .signup-content span,
#modalSignup .modal-body .signup-content label,
#modalSignup .modal-body .signup-content a {
    font-family: 'Inter', sans-serif;
}

/* Heading comes from the ACF `pop_up_text` block — style whatever tag it uses */
#modalSignup .modal-body .signup-content h1,
#modalSignup .modal-body .signup-content h2,
#modalSignup .modal-body .signup-content h3,
#modalSignup .modal-body .signup-content h4,
#modalSignup .modal-body .signup-content h5 {
    font-family: 'Inter', sans-serif;
    font-size: 26px;
    line-height: 32px;
    font-weight: 700;
    letter-spacing: -0.5px;
    color: #1a1a1a;
    margin: 0 0 8px;
}
#modalSignup .modal-body .signup-content p {
    font-size: 15px;
    line-height: 22px;
    color: #6b6b6b;
    margin: 0 0 6px;
}

/* ---- Inputs ---- */
#modalSignup .modal-body .signup-content input[type=text],
#modalSignup .modal-body .signup-content input[type=email],
#modalSignup .modal-body .signup-content input[type=password],
#modalSignup .modal-body .signup-content .register-input {
    width: 100%;
    height: 46px;
    padding: 10px 15px;
    margin: 0 0 14px;
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    color: #1a1a1a;
    background: #fff;
    border: 1px solid #e5e5e5;
    border-radius: 6px;
    box-shadow: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
#modalSignup .modal-body .signup-content input::placeholder,
#modalSignup .modal-body .signup-content .register-input::placeholder {
    color: #9a9a9a;
}
#modalSignup .modal-body .signup-content input[type=text]:focus,
#modalSignup .modal-body .signup-content input[type=email]:focus,
#modalSignup .modal-body .signup-content input[type=password]:focus,
#modalSignup .modal-body .signup-content .register-input:focus {
    outline: none;
    border-color: #c8102e;
    box-shadow: 0 0 0 3px rgba(200, 16, 46, 0.12);
}

/* ---- Opt-in checkbox ---- */
#modalSignup .vb-checkbox {
    font-size: 14px;
    color: #6b6b6b;
}
#modalSignup .vb-checkbox .checkmark {
    top: 2px;
    height: 20px;
    width: 20px;
    border: 1px solid #e5e5e5;
    border-radius: 4px;
    background-color: #fff;
}
#modalSignup .vb-checkbox input:checked ~ .checkmark {
    background-color: #c8102e;
    border-color: #c8102e;
}
#modalSignup .vb-checkbox input:checked ~ .checkmark:after {
    border-color: #fff; /* white tick on the red fill */
}

/* ---- Submit button (primary red, matches checkout / flycart) ---- */
#modalSignup .modal-body .signup-content .btn-primary,
#modalSignup #register-submit-btn-2 {
    display: block;
    width: 100%;
    background-color: #c8102e;
    border: 1px solid #c8102e;
    border-radius: 6px;
    color: #fff;
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    letter-spacing: -0.3125px;
    padding: 12px 24px;
    box-shadow: none;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}
#modalSignup .modal-body .signup-content .btn-primary:hover,
#modalSignup .modal-body .signup-content .btn-primary:focus,
#modalSignup #register-submit-btn-2:hover,
#modalSignup #register-submit-btn-2:focus {
    background-color: #a50d26;
    border-color: #a50d26;
    color: #fff;
    text-decoration: none;
}

/* ---- Inline alert ---- */
#modalSignup .vb-alert {
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    line-height: 20px;
    padding: 10px 14px;
    border-radius: 6px;
    background: rgba(200, 16, 46, 0.06);
    border: 1px solid rgba(200, 16, 46, 0.25);
    color: #c8102e;
}

/* ================================================
   Success modal (#modalRegisterSuccess)
   ================================================ */
#modalRegisterSuccess .modal-dialog {
    max-width: 560px;
}
#modalRegisterSuccess .modal-content {
    border: 0;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.18);
}
#modalRegisterSuccess .modal-body {
    padding: 40px 44px;
    font-family: 'Inter', sans-serif;
    color: #1a1a1a;
}
#modalRegisterSuccess .modal-body .btn-close {
    position: absolute;
    top: 18px;
    right: 18px;
    z-index: 2;
    opacity: 0.7;
}
#modalRegisterSuccess .modal-body .btn-close:hover {
    opacity: 1;
}
#modalRegisterSuccess .modal-body h1,
#modalRegisterSuccess .modal-body h2,
#modalRegisterSuccess .modal-body h3,
#modalRegisterSuccess .modal-body h4 {
    font-family: 'Inter', sans-serif;
    font-size: 24px;
    line-height: 30px;
    font-weight: 700;
    letter-spacing: -0.5px;
    color: #1a1a1a;
}
#modalRegisterSuccess .modal-body p {
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    line-height: 22px;
    color: #6b6b6b;
}
#modalRegisterSuccess .custom-logo {
    max-width: 220px;
    height: auto;
}
#modalRegisterSuccess .btn-primary {
    display: block;
    width: 100%;
    background-color: #c8102e;
    border: 1px solid #c8102e;
    border-radius: 6px;
    color: #fff;
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    letter-spacing: -0.3125px;
    padding: 12px 24px;
    box-shadow: none;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}
#modalRegisterSuccess .btn-primary:hover,
#modalRegisterSuccess .btn-primary:focus {
    background-color: #a50d26;
    border-color: #a50d26;
    color: #fff;
    text-decoration: none;
}

/* ---- Responsive ---- */
@media (max-width: 991px) {
    #modalSignup .modal-dialog {
        max-width: 100%;
        margin: 6rem 16px auto;
    }
}
@media (max-width: 767px) {
    #modalSignup .modal-body .signup-content {
        padding: 40px 28px;
    }
    #modalSignup .modal-body .signup-content h1,
    #modalSignup .modal-body .signup-content h2,
    #modalSignup .modal-body .signup-content h3,
    #modalSignup .modal-body .signup-content h4,
    #modalSignup .modal-body .signup-content h5 {
        font-size: 22px;
        line-height: 28px;
    }
    #modalRegisterSuccess .modal-body {
        padding: 32px 28px;
    }
}

/* ================================================
   Login / Register modals (#modalLogin / #modalRegister)
   Single-column auth modals opened from the header links. Logo on top,
   intro line, fields, primary button, and toggle links. (Replaces the
   legacy #modalLogin/#modalRegister rules removed from global.css.)
   ================================================ */

/* Dialog / shell — vertically centered, single column */
#modalLogin .modal-dialog,
#modalRegister .modal-dialog {
    max-width: 540px;
    display: flex;
    align-items: center;
    min-height: calc(100% - 3.5rem);
    margin: 1.75rem auto;
}
#modalLogin .modal-content,
#modalRegister .modal-content {
    border: 0;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.18);
}
#modalLogin .modal-body,
#modalRegister .modal-body {
    position: relative;
    padding: 40px 44px 44px;
    font-family: 'Inter', sans-serif;
    color: #1a1a1a;
}
#modalLogin .modal-body p,
#modalRegister .modal-body p {
    font-family: 'Inter', sans-serif;
}

/* Logo */
#modalLogin .custom-logo-link,
#modalRegister .custom-logo-link {
    display: inline-block;
    max-width: 190px;
}
#modalLogin .custom-logo,
#modalRegister .custom-logo {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Intro line (paragraph immediately after the centered logo block) */
#modalLogin .modal-body .my-4 + p,
#modalRegister .modal-body .my-4 + p {
    font-size: 15px;
    line-height: 22px;
    color: #6b6b6b;
    margin-bottom: 22px;
}

/* Close button */
#modalLogin .modal-body .btn-close,
#modalRegister .modal-body .btn-close {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 2;
    opacity: 0.7;
}
#modalLogin .modal-body .btn-close:hover,
#modalRegister .modal-body .btn-close:hover {
    opacity: 1;
}

/* Keep the (hidden) "Remember me" row hidden even if .hidden is undefined */
#modalLogin .modal-body .form-row.hidden {
    display: none;
}

/* Inputs */
#modalLogin .modal-body input.input-text,
#modalLogin .modal-body input[type=text],
#modalLogin .modal-body input[type=password],
#modalRegister .modal-body input[type=text],
#modalRegister .modal-body input[type=password],
#modalRegister .modal-body .register-input {
    width: 100%;
    height: 46px;
    padding: 10px 15px;
    margin: 0;
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    color: #1a1a1a;
    background: #fff;
    border: 1px solid #e5e5e5;
    border-radius: 6px;
    box-shadow: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
#modalLogin .modal-body input::placeholder,
#modalRegister .modal-body input::placeholder {
    color: #9a9a9a;
}
#modalLogin .modal-body input:focus,
#modalRegister .modal-body input:focus {
    outline: none;
    border-color: #c8102e;
    box-shadow: 0 0 0 3px rgba(200, 16, 46, 0.12);
}
/* Even spacing between stacked field wrappers */
#modalLogin .modal-body form p,
#modalRegister .modal-body form p {
    margin-bottom: 14px;
}

/* Opt-in checkbox (register) */
#modalRegister .vb-checkbox {
    padding-left: 28px;
    line-height: 1.5;
    font-size: 14px;
    color: #6b6b6b;
}
#modalRegister .vb-checkbox .checkmark {
    top: 1px;
    height: 20px;
    width: 20px;
    border: 1px solid #e5e5e5;
    border-radius: 4px;
    background-color: #fff;
}
#modalRegister .vb-checkbox input:checked ~ .checkmark {
    background-color: #c8102e;
    border-color: #c8102e;
}
#modalRegister .vb-checkbox input:checked ~ .checkmark:after {
    border-color: #fff;
}

/* Primary button */
#modalLogin #btn-login,
#modalLogin .modal-body .btn-primary,
#modalRegister #register-submit-btn,
#modalRegister .modal-body .btn-primary {
    display: block;
    width: 100%;
    background-color: #c8102e;
    border: 1px solid #c8102e;
    border-radius: 6px;
    color: #fff;
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    letter-spacing: -0.3125px;
    padding: 12px 24px;
    box-shadow: none;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}
#modalLogin #btn-login:hover,
#modalLogin #btn-login:focus,
#modalLogin .modal-body .btn-primary:hover,
#modalLogin .modal-body .btn-primary:focus,
#modalRegister #register-submit-btn:hover,
#modalRegister #register-submit-btn:focus,
#modalRegister .modal-body .btn-primary:hover,
#modalRegister .modal-body .btn-primary:focus {
    background-color: #a50d26;
    border-color: #a50d26;
    color: #fff;
    text-decoration: none;
}

/* Toggle / helper links */
#modalLogin .modal-body a,
#modalRegister .modal-body a {
    color: #c8102e;
    font-family: 'Inter', sans-serif;
}
#modalLogin .modal-body a:hover,
#modalRegister .modal-body a:hover {
    color: #a50d26;
}

/* Inline alert */
#modalLogin .vb-alert,
#modalRegister .vb-alert {
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    line-height: 20px;
    padding: 10px 14px;
    border-radius: 6px;
    background: rgba(200, 16, 46, 0.06);
    border: 1px solid rgba(200, 16, 46, 0.25);
    color: #c8102e;
}

@media (max-width: 575px) {
    #modalLogin .modal-body,
    #modalRegister .modal-body {
        padding: 32px 24px 36px;
    }
}