/* =============================================================
   ESA Connection – PMPro v3 Checkout Styles  (v29.0.0)
   File: wp-content/themes/buddyboss-theme-child/paid-memberships-pro/css/esa-checkout.css
   ============================================================= */

:root {
    --esa-teal:        #3db49b;
    --esa-teal-dark:   #2e9080;
    --esa-teal-light:  #e8f7f4;
    --esa-text:        #1a2433;
    --esa-muted:       #6b7a8d;
    --esa-border:      #dde3ea;
    --esa-bg:          #f4f7fa;
    --esa-white:       #ffffff;
    --esa-radius:      10px;
    --esa-radius-lg:   16px;
    --esa-shadow:      0 2px 16px rgba(26,36,51,.07);
    --esa-font:        -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --esa-ease:        0.18s ease;
}

/* ═══════════════════════════════════════════════════════════
   STRIP THEME PADDING
═══════════════════════════════════════════════════════════ */
body.pmpro_checkout #primary,
body.pmpro_checkout .content-area,
body.pmpro_checkout #main,
body.pmpro_checkout .entry-content,
body.pmpro_checkout article {
    padding: 0 !important;
    margin: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
}

body.pmpro_checkout .bb-grid,
body.pmpro_checkout .site-content-grid,
body.pmpro_checkout .site-content {
    padding: 0 !important;
    margin: 0 !important;
    max-width: 100% !important;
}

/* ═══════════════════════════════════════════════════════════
   LAYOUT
═══════════════════════════════════════════════════════════ */
.pmpro_checkout {
    padding: 0 !important;
    max-width: 100% !important;
    background: var(--esa-bg);
}

.esa-checkout-wrap {
    display: flex;
    min-height: 100vh;
    align-items: stretch;
    font-family: var(--esa-font);
    width: 100%;
    /* On mobile this is overridden to auto in the media query */
}

/* ═══════════════════════════════════════════════════════════
   SIDEBAR
═══════════════════════════════════════════════════════════ */
.esa-checkout-sidebar {
    width: 340px;
    min-width: 300px;
    flex-shrink: 0;
    background: linear-gradient(155deg, #3db49b 0%, #257a68 100%);
    color: #fff;
    padding: 48px 32px;
    display: flex;
    flex-direction: column;
    gap: 28px;
    /* No fixed height or overflow — let it grow to fit all benefits */
    min-height: 100vh;
    height: auto;
    overflow: visible;
}

.esa-sidebar-logo { display: none !important; }

.esa-sidebar-sitename { font-size: 1.2rem; font-weight: 700; }

.esa-sidebar-card {
    background: rgba(255,255,255,.13);
    border: 1px solid rgba(255,255,255,.22);
    border-radius: var(--esa-radius-lg);
    padding: 24px 22px;
}

.esa-sidebar-eyebrow { font-size:.72rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase; opacity:.75; margin:0 0 6px; }
.esa-sidebar-level { font-size:1.65rem; font-weight:800; margin:0 0 18px; line-height:1.2; }

.esa-sidebar-price { display:flex; flex-direction:column; gap:3px; padding:16px 0; border-top:1px solid rgba(255,255,255,.2); border-bottom:1px solid rgba(255,255,255,.2); margin-bottom:18px; }
.esa-price-big { font-size:2.6rem; font-weight:900; letter-spacing:-.04em; line-height:1; }
.esa-price-sub { font-size:.82rem; opacity:.8; }

.esa-sidebar-benefits { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:9px; }
.esa-sidebar-benefits li { font-size:.84rem; opacity:.92; padding-left:26px; position:relative; }
.esa-sidebar-benefits li::before {
    content:''; position:absolute; left:0; top:2px; width:16px; height:16px;
    background: rgba(255,255,255,.22)
        url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.5' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E")
        center/9px no-repeat;
    border-radius:50%;
}

.esa-sidebar-upgrade { background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.24); border-radius:10px; padding:12px 14px; margin:14px 0 4px; }
.esa-sidebar-upgrade-title { font-weight:700; font-size:.9rem; margin:0 0 10px; color:#fff; }
.esa-sidebar-upgrade .esa-sidebar-benefits { gap:7px; }
.esa-sidebar-group { margin-top:18px; }
.esa-sidebar-group:first-of-type { margin-top:0; }
.esa-sidebar-group-title {
    font-size:.9rem; font-weight:700; margin:0 0 10px; color:#fff;
    padding-bottom:7px; border-bottom:1px solid rgba(255,255,255,.22);
}

.esa-sidebar-switch { font-size:.78rem; opacity:.78; margin-top:auto; text-align:center; }
.esa-sidebar-switch a { color:#fff; text-decoration:underline; }

/* ═══════════════════════════════════════════════════════════
   FORM COLUMN
═══════════════════════════════════════════════════════════ */
.esa-checkout-form-col {
    flex: 1 1 0;
    min-width: 0;
    padding: 48px 64px 64px;
    overflow: visible;             /* let content expand; page scrolls normally */
    background: var(--esa-bg);
    display: flex;
    flex-direction: column;
}

.esa-form-header { margin-bottom: 32px; }

.esa-form-header h1 {
    font-family: "Didact Gothic", Sans-serif !important;
    font-size: 1.9rem; font-weight: 800;
    color: var(--esa-text); margin: 0 0 8px; letter-spacing: -.03em;
}

.esa-form-header-sub { font-size: .88rem; color: var(--esa-muted); margin: 0; }
.esa-form-header-sub a { color: var(--esa-teal-dark); font-weight: 600; text-decoration: none; }
.esa-form-header-sub a:hover { text-decoration: underline; }

/* ═══════════════════════════════════════════════════════════
   PMPro OVERRIDES
═══════════════════════════════════════════════════════════ */

.esa-checkout-form-col .pmpro_checkout,
.esa-checkout-form-col #pmpro_form {
    max-width: 100% !important;
    width: 100% !important;
    padding: 0 !important;
    background: transparent !important;
}

/* Section cards */
.esa-checkout-form-col .pmpro_form_fieldset,
.esa-checkout-form-col #pmpro_pricing_fields,
.esa-checkout-form-col #pmpro_user_fields,
.esa-checkout-form-col #pmpro_form_fieldset-additional-information,
.esa-checkout-form-col #pmpro_payment_information_fields,
.esa-checkout-form-col #pmpro_tos_fields {
    background: var(--esa-white) !important;
    border: 1px solid var(--esa-border) !important;
    border-radius: var(--esa-radius-lg) !important;
    padding: 28px 32px 24px !important;
    margin-bottom: 16px !important;
    box-shadow: var(--esa-shadow) !important;
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* Force pmpro_card visible and full width — strip inner card in ALL fieldsets
   so there is never a box-inside-a-box effect (ZIP, account, payment, etc.) */
#pmpro_user_fields .pmpro_card,
#pmpro_form_fieldset-additional-information .pmpro_card,
#pmpro_payment_information_fields .pmpro_card,
.esa-checkout-form-col .pmpro_form_fieldset .pmpro_card {
    display: block !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
}

#pmpro_user_fields .pmpro_card_content,
#pmpro_form_fieldset-additional-information .pmpro_card_content,
.esa-checkout-form-col .pmpro_form_fieldset .pmpro_card_content,
.esa-checkout-form-col .pmpro_card_content {
    max-width: 100% !important;
    width: 100% !important;
    padding: 0 !important;
}

/* Hide inner legend/actions */
#pmpro_user_fields .pmpro_card .pmpro_form_legend,
#pmpro_user_fields .pmpro_card .pmpro_card_actions { display: none !important; }

/* ── CSS-level hides (backup for JS, wins over any PMPro inline styles) ──
   These target PMPro's specific field classes directly.
   Prefixed with .esa-checkout-form-col to beat the .pmpro_form_field { display:flex }
   rule which appears later and is more specific. */

/* Username entire row */


/* Confirm email row */


/* Confirm password = second .pmpro_form_field-password inside a .pmpro_cols-2 */


/* Password hint paragraph — direct child of .pmpro_form_fields, not our notes */
.esa-checkout-form-col .pmpro_form_fields > p:not(.esa-info-note) { display: none !important; }

/* PMPro's own password toggle buttons — ALL variants */
#pmpro-toggle-password-button,
.pmpro_btn-password-toggle,
.pmpro_form_field-password-toggle { display: none !important; }

/* ── Section headings — only show the H2, hide the LEGEND element ── */
/* The legend (pmpro_form_legend) and H2 both render with border-bottom = two lines */
.esa-checkout-form-col .pmpro_form_legend {
    display: none !important;
}

.esa-checkout-form-col h2.pmpro_form_heading,
.esa-checkout-form-col h2.pmpro_card_title {
    font-size: .95rem !important; font-weight: 700 !important;
    color: var(--esa-text) !important;
    border: none !important;
    padding: 0 0 14px !important; margin: 0 0 16px !important;
    border-bottom: 1px solid var(--esa-border) !important;
    width: 100% !important; display: block !important;
    font-family: var(--esa-font) !important; letter-spacing: -.01em !important;
}

/* ── Labels ── */
.esa-checkout-form-col label,
.esa-checkout-form-col .pmpro_form_label {
    font-size: .78rem !important; font-weight: 600 !important;
    color: var(--esa-text) !important; display: block !important;
    margin-bottom: 5px !important; font-family: var(--esa-font) !important;
}

/* ── Inputs — full width ── */
.esa-checkout-form-col input[type="text"],
.esa-checkout-form-col input[type="email"],
.esa-checkout-form-col input[type="password"],
.esa-checkout-form-col input[type="tel"] {
    width: 100% !important;
    height: 46px !important;
    border: 1.5px solid var(--esa-border) !important;
    border-radius: var(--esa-radius) !important;
    padding: 0 14px !important;
    font-size: .93rem !important;
    font-family: var(--esa-font) !important;
    color: var(--esa-text) !important;
    background: var(--esa-white) !important;
    box-shadow: none !important; outline: none !important;
    transition: border-color var(--esa-ease), box-shadow var(--esa-ease) !important;
    -webkit-appearance: none !important;
    box-sizing: border-box !important;
}

.esa-checkout-form-col input[type="text"]:focus,
.esa-checkout-form-col input[type="email"]:focus,
.esa-checkout-form-col input[type="password"]:focus {
    border-color: var(--esa-teal) !important;
    box-shadow: 0 0 0 3px rgba(61,180,155,.14) !important;
}

.esa-checkout-form-col input::placeholder { color: #b8c2cc !important; }

/* PMPro v3 field containers */
.esa-checkout-form-col .pmpro_form_fields {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    width: 100% !important;
}

.esa-checkout-form-col .pmpro_cols-2 {
    display: block !important;
    width: 100% !important;
}

.esa-checkout-form-col .pmpro_form_field {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    margin-bottom: 16px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* Password field — force full width column layout */
.esa-checkout-form-col .pmpro_form_field-password {
    flex-direction: column !important;
    align-items: stretch !important;
    width: 100% !important;
}

/* ── Field-level hides — placed AFTER the flex rule so they win cascade ──
   Same specificity but later in file = these override display:flex above */
.esa-checkout-form-col .pmpro_form_field-username        { display: none !important; }
.esa-checkout-form-col .pmpro_form_field-bconfirmemail   { display: none !important; }
.esa-checkout-form-col .pmpro_cols-2 .pmpro_form_field-password:last-child { display: none !important; }

/* ═══════════════════════════════════════════════════════════
   SHARED INFO NOTE STYLE (email note + password note)
═══════════════════════════════════════════════════════════ */
.esa-info-note,
#esa-email-username-note,
#esa-pw-note {
    display: flex !important;
    align-items: flex-start !important;
    gap: 8px !important;
    background: var(--esa-teal-light) !important;
    border: 1px solid rgba(61,180,155,.3) !important;
    border-radius: var(--esa-radius) !important;
    padding: 12px 14px !important;
    font-size: .82rem !important;
    color: #1a3a32 !important;
    line-height: 1.5 !important;
    margin: 0 0 14px !important;
    font-family: var(--esa-font) !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.esa-info-note svg { color: var(--esa-teal-dark); margin-top: 1px; }

/* ── Password toggle (our custom) ── */
.esa-pw-wrap {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
}

.esa-pw-wrap input[type="password"],
.esa-pw-wrap input[type="text"] {
    padding-right: 46px !important;
    width: 100% !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
}

.esa-pw-toggle {
    position: absolute !important; right: 12px !important;
    background: none !important; border: none !important;
    cursor: pointer !important; padding: 0 !important;
    color: var(--esa-muted) !important;
    display: flex !important; align-items: center !important;
    box-shadow: none !important; height: auto !important; width: auto !important;
    flex-shrink: 0 !important;
    transition: color var(--esa-ease) !important;
}

.esa-pw-toggle:hover,
.esa-pw-toggle--active { color: var(--esa-teal) !important; }

/* ── Membership info card ── */
.esa-checkout-form-col #pmpro_pricing_fields {
    background: var(--esa-teal-light) !important;
    border-color: rgba(61,180,155,.3) !important;
    box-shadow: none !important;
}

/* Hide "You have selected the X membership level." text */
.esa-checkout-form-col .pmpro_level_name_text { display: none !important; }

/* Hide only the Payment Details subsection inside the pricing card on free levels.
   Keeps "Membership Information" and level description visible.
   Also hides discount code — no use on a free level. */
.esa-checkout-wrap--free #pmpro_pricing_fields h3,
.esa-checkout-wrap--free #pmpro_pricing_fields .pmpro_level-cost,
.esa-checkout-wrap--free #pmpro_pricing_fields .pmpro_card_content > table,
.esa-checkout-wrap--free #pmpro_pricing_fields .pmpro_card_content > p:not(:first-child),
.esa-checkout-wrap--free #pmpro_pricing_fields .pmpro_card_content strong,
.esa-checkout-wrap--free #pmpro_pricing_fields .pmpro_card_actions,
.esa-checkout-wrap--free .pmpro-checkout-payment-details { display: none !important; }

.esa-checkout-form-col #pmpro_pricing_fields h2,
.esa-checkout-form-col #pmpro_pricing_fields h3 {
    color: var(--esa-teal-dark) !important;
    border-color: rgba(61,180,155,.3) !important;
}

/* ── TOS ── */
.esa-checkout-form-col #pmpro_tos_fields {
    background: #fafbff !important;
    border-style: dashed !important;
}

/* Fix: display:flex breaks the label into 3 columns (checkbox | link | text).
   Use block with the checkbox floated so text wraps naturally. */
.esa-checkout-form-col #pmpro_tos_fields .pmpro_form_label {
    font-size: .84rem !important;
    font-weight: 400 !important;
    color: var(--esa-muted) !important;
    line-height: 1.6 !important;
    display: block !important;   /* not flex — text must wrap inline */
    cursor: pointer !important;
}

.esa-checkout-form-col #tos {
    float: left !important;
    width: 16px !important;
    height: 16px !important;
    margin: 3px 10px 0 0 !important;
    accent-color: var(--esa-teal) !important;
    cursor: pointer !important;
    flex-shrink: 0 !important;
}

/* Clear float after TOS row */
.esa-checkout-form-col #pmpro_tos_fields .pmpro_form_label::after {
    content: '';
    display: table;
    clear: both;
}

.esa-checkout-form-col #pmpro_tos_fields a {
    color: var(--esa-teal-dark) !important;
    font-weight: 600 !important;
}

/* ── reCAPTCHA ── */
.esa-checkout-form-col .pmpro_captcha { margin-bottom: 20px !important; }

/* ── Messages ── */
.esa-checkout-form-col .pmpro_message {
    border-radius: var(--esa-radius) !important;
    padding: 12px 16px !important; font-size: .88rem !important; margin-bottom: 16px !important;
}

/* ── Submit ── */
.esa-checkout-form-col #pmpro_btn-submit {
    display: flex !important; align-items: center !important;
    justify-content: center !important; width: 100% !important; height: 52px !important;
    background: linear-gradient(135deg, var(--esa-teal) 0%, var(--esa-teal-dark) 100%) !important;
    color: #fff !important; border: none !important;
    border-radius: var(--esa-radius-lg) !important;
    font-size: 1rem !important; font-weight: 700 !important;
    font-family: var(--esa-font) !important; letter-spacing: -.01em !important;
    cursor: pointer !important;
    box-shadow: 0 4px 18px rgba(61,180,155,.32) !important;
    transition: transform var(--esa-ease), box-shadow var(--esa-ease) !important;
}

.esa-checkout-form-col #pmpro_btn-submit:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 8px 24px rgba(61,180,155,.42) !important;
}

/* Hide the "Click here to enter your discount code" toggle —
   our CSS already keeps the field visible so the link is redundant */
#other_discount_code_p { display: none !important; }

/* Hide the bottom duplicate discount code field inside the payment section —
   the top field (pmpro_other_discount_code) is the one users interact with.
   JS mirrors the value into pmpro_discount_code before form submit. */
.pmpro_payment-discount-code,
.pmpro_form_field.pmpro_payment-discount-code { display: none !important; }

/* Hide "The price per seat is $X.XX." pricing line in Group Accounts section */
.esa-checkout-form-col .pmpro_form_field-pricing { display: none !important; }

.esa-checkout-form-col #other_discount_code_button,
.esa-checkout-form-col #discount_code_button {
    height: 38px !important; padding: 0 16px !important;
    border: 1.5px solid var(--esa-teal) !important;
    background: #fff !important; color: var(--esa-teal-dark) !important;
    border-radius: var(--esa-radius) !important;
    font-size: .83rem !important; font-weight: 600 !important; cursor: pointer !important;
}

.esa-checkout-form-col #other_discount_code_button:hover,
.esa-checkout-form-col #discount_code_button:hover { background: var(--esa-teal-light) !important; }

/* ── Security note ── */
.esa-secure-note {
    display: flex !important; align-items: center !important;
    justify-content: center !important; gap: 6px !important;
    font-size: .76rem !important; color: var(--esa-muted) !important; margin: 10px 0 0 !important;
}
.esa-secure-note svg { color: var(--esa-teal) !important; flex-shrink: 0 !important; }

/* PMPro asterisk */
.esa-checkout-form-col .pmpro_asterisk { color: #d94f4f !important; margin-left: 2px !important; }

/* ═══════════════════════════════════════════════════════════
   RESPONSIVE — MOBILE
═══════════════════════════════════════════════════════════ */
@media (max-width: 860px) {

    /* Wrap: stack vertically, let height grow naturally */
    .esa-checkout-wrap {
        flex-direction: column !important;
        min-height: 0 !important;      /* remove 100vh lock */
        height: auto !important;
    }

    /* Sidebar: compact strip at top, no sticky, no fixed height */
    .esa-checkout-sidebar {
        width: 100% !important;
        min-width: 0 !important;
        height: auto !important;
        min-height: 0 !important;
        position: static !important;
        padding: 24px 20px 20px !important;
        gap: 16px !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        align-items: center !important;
    }

    .esa-sidebar-logo { flex-shrink: 0; }
    .esa-sidebar-logo img { max-width: 90px !important; }

    /* Sidebar card: inline summary row */
    .esa-sidebar-card {
        flex: 1 1 auto !important;
        padding: 14px 16px !important;
        min-width: 0 !important;
    }

    .esa-sidebar-eyebrow { display: none !important; }

    .esa-sidebar-level {
        font-size: 1.1rem !important;
        margin-bottom: 6px !important;
    }

    .esa-sidebar-price { padding: 8px 0 0 !important; border: none !important; margin: 0 !important; }
    .esa-price-big { font-size: 1.5rem !important; }
    .esa-price-sub { font-size: .75rem !important; }

    /* Hide benefits list and switch link on mobile */
    .esa-sidebar-benefits,
    .esa-sidebar-switch { display: none !important; }

    /* Form col: remove overflow-y so content expands naturally */
    .esa-checkout-form-col {
        flex: none !important;
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        overflow: visible !important;
        padding: 28px 20px 60px !important;
    }

    /* Center membership info card content on mobile */
    .esa-checkout-form-col #pmpro_pricing_fields,
    .esa-checkout-form-col #pmpro_pricing_fields h2,
    .esa-checkout-form-col #pmpro_pricing_fields h3,
    .esa-checkout-form-col #pmpro_pricing_fields p,
    .esa-checkout-form-col #pmpro_pricing_fields .pmpro_card_content,
    .esa-checkout-form-col #pmpro_pricing_fields .pmpro_card_actions {
        text-align: center !important;
    }

    /* Center the discount code row on mobile */
    .esa-checkout-form-col #pmpro_pricing_fields .pmpro_form_fields-inline {
        justify-content: center !important;
    }
}

@media (max-width: 480px) {
    .esa-checkout-sidebar { padding: 20px 16px !important; }

    .esa-form-header h1 { font-size: 1.4rem !important; }

    .esa-checkout-form-col .pmpro_form_fieldset,
    .esa-checkout-form-col #pmpro_user_fields,
    .esa-checkout-form-col #pmpro_pricing_fields,
    .esa-checkout-form-col #pmpro_tos_fields,
    .esa-checkout-form-col #pmpro_form_fieldset-additional-information {
        padding: 18px 16px !important;
        border-radius: var(--esa-radius) !important;
    }
}