/* ═══════════════════════════════════════════════════════════════════
   TVS Birthday — Checkout Fields & Credit Widget  v4.3.2
   Defensive against Astra/Storefront/WC themes that add black lines
   to every .form-row. Builds one unified card with no internal seams.
═══════════════════════════════════════════════════════════════════ */

/* ── 0. NUKE all theme borders on our scope (highest priority) ──── */
.tvs-bday-section-heading,
.tvs-bday-section-heading::before,
.tvs-bday-section-heading::after,
.tvs-bday-field,
.tvs-bday-field::before,
.tvs-bday-field::after,
.tvs-bday-optin-row,
.tvs-bday-optin-row::before,
.tvs-bday-optin-row::after,
.tvs-bday-heading-row,
.tvs-bday-heading-row::before,
.tvs-bday-heading-row::after,
.tvs-birthday-upsell-notice,
.tvs-credit-widget {
    border-top: 0 !important;
    border-bottom: 0 !important;
    background-image: none !important;
    box-shadow: none !important;
}
.tvs-bday-section-heading,
.tvs-bday-field,
.tvs-bday-optin-row {
    list-style: none !important;
    padding-left: 0 !important;
}
/* Some themes add a horizontal rule via :before / :after */
.tvs-bday-section-heading::before,
.tvs-bday-section-heading::after,
.tvs-bday-field::before,
.tvs-bday-field::after,
.tvs-bday-optin-row::before,
.tvs-bday-optin-row::after,
.tvs-bday-heading-row::before,
.tvs-bday-heading-row::after {
    display: none !important;
    content: none !important;
    border: 0 !important;
    background: transparent !important;
    height: 0 !important;
}

/* Defensive: Astra's <hr> equivalent on .woocommerce-billing-fields .form-row */
.woocommerce-billing-fields .tvs-bday-section-heading,
.woocommerce-billing-fields .tvs-bday-field,
.woocommerce-billing-fields .tvs-bday-optin-row,
form.checkout .tvs-bday-section-heading,
form.checkout .tvs-bday-field,
form.checkout .tvs-bday-optin-row {
    border: 0 !important;
    background-color: transparent !important;
    margin-top: 0 !important;
}

/* Astra wraps <label> elements in styled boxes — strip them */
.tvs-bday-section-heading label,
.tvs-bday-field label,
.tvs-bday-field > label,
.tvs-bday-optin-row label,
.tvs-bday-heading-row label {
    border: 0 !important;
    background: transparent !important;
    padding: 0 0 6px 2px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #5a4a10 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    line-height: 1.3 !important;
    box-shadow: none !important;
    display: block !important;
}

/* ── 1. Section heading ("When is your birthday?") — TOP of card ── */
.tvs-bday-section-heading {
    width: 100% !important;
    margin: 28px 0 0 !important;
    padding: 0 !important;
    clear: both !important;
    border: 0 !important;
    background: transparent !important;
    float: none !important;
}
.tvs-bday-section-inner {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    background: linear-gradient(135deg, #fffdf5 0%, #fff8df 100%) !important;
    border: 2px solid #F1C349 !important;
    border-bottom: 0 !important;
    border-radius: 16px 16px 0 0 !important;
    padding: 18px 22px !important;
}
.tvs-bday-icon {
    font-size: 32px !important;
    line-height: 1 !important;
    flex-shrink: 0 !important;
    filter: drop-shadow(0 2px 4px rgba(241,195,73,.3)) !important;
}
.tvs-bday-section-inner > div:last-child { flex: 1 !important; }
.tvs-bday-section-inner strong {
    display: block !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #2d2d2d !important;
    margin-bottom: 3px !important;
    letter-spacing: -0.2px !important;
}
.tvs-bday-section-inner p {
    margin: 0 !important;
    font-size: 13px !important;
    color: #6e5a16 !important;
    line-height: 1.45 !important;
}

/* ── 2. Date field row — middle of card (single visual block) ── */
.tvs-bday-field {
    width: 100% !important;
    background: #fffdf5 !important;
    border-left: 2px solid #F1C349 !important;
    border-right: 2px solid #F1C349 !important;
    margin: 0 !important;
    padding: 14px 22px 0 !important;
    box-sizing: border-box !important;
    float: none !important;
    clear: none !important;
}
.tvs-bday-field.form-row-first {
    width: 50% !important;
    padding-right: 8px !important;
    float: left !important;
    clear: left !important;
}
.tvs-bday-field.form-row-last {
    width: 50% !important;
    padding-left: 8px !important;
    float: right !important;
    clear: right !important;
}
.tvs-bday-field.tvs-bday-year {
    width: 100% !important;
    clear: both !important;
    float: none !important;
    padding-top: 14px !important;
}

/* ── 3. Select inputs ────────────────────────────────────────── */
.tvs-birthday-select,
select.tvs-birthday-select {
    width: 100% !important;
    padding: 12px 38px 12px 14px !important;
    border: 1.5px solid #e8d88a !important;
    border-radius: 10px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    background-color: #fff !important;
    color: #2d2d2d !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1.5L7 7.5l6-6' stroke='%23b89a1a' fill='none' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 14px center !important;
    cursor: pointer !important;
    box-sizing: border-box !important;
    height: auto !important;
    line-height: 1.4 !important;
    box-shadow: 0 1px 2px rgba(0,0,0,.04) !important;
    transition: border-color .18s ease, box-shadow .18s ease !important;
}
.tvs-birthday-select:hover { border-color: #d4b94a !important; }
.tvs-birthday-select:focus,
.tvs-birthday-select:focus-visible {
    outline: none !important;
    border: 1.5px solid #F1C349 !important;
    box-shadow: 0 0 0 3px rgba(241,195,73,.22) !important;
}

/* ── 4. Optin row — BOTTOM of card ───────────────────────────── */
.tvs-bday-optin-row {
    width: 100% !important;
    background: #fffdf5 !important;
    border: 2px solid #F1C349 !important;
    border-top: 0 !important;
    border-radius: 0 0 16px 16px !important;
    padding: 16px 22px 18px !important;
    margin: 0 0 24px !important;
    clear: both !important;
    float: none !important;
    box-sizing: border-box !important;
}
.tvs-bday-optin-row label {
    display: flex !important;
    align-items: flex-start !important;
    gap: 10px !important;
    cursor: pointer !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: #444 !important;
    line-height: 1.5 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
}
.tvs-bday-optin-row input[type="checkbox"] {
    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;
    margin: 2px 0 0 !important;
    accent-color: #F1C349 !important;
    cursor: pointer !important;
    flex-shrink: 0 !important;
    border: 1.5px solid #d4b94a !important;
    border-radius: 4px !important;
    box-shadow: none !important;
}

/* Hide auto-injected "(optional)" + asterisks */
.tvs-bday-field .optional,
.tvs-bday-optin-row .optional,
.tvs-bday-year .optional,
.tvs-bday-heading-row .optional,
.tvs-bday-section-heading .optional,
.tvs-bday-field .required,
.tvs-bday-optin-row .required { display: none !important; }

/* ════════════════════════════════════════════════════════════════
   UPSELL NOTICE — non-subscribers
════════════════════════════════════════════════════════════════ */
.tvs-birthday-upsell-notice {
    background: linear-gradient(135deg,#fffbf0 0%, #fff5d6 100%);
    border: 2px solid #F1C349 !important;
    border-radius: 14px;
    padding: 20px 22px;
    margin: 22px 0;
    display: flex;
    gap: 16px;
    align-items: flex-start;
    box-shadow: 0 4px 16px rgba(241,195,73,.15);
}
.tvs-upsell-icon { font-size: 36px; line-height: 1; flex-shrink: 0; }
.tvs-upsell-body { flex: 1; }
.tvs-birthday-upsell-notice strong {
    display: block; font-size: 16px; color: #2d2d2d;
    margin-bottom: 6px; font-weight: 700;
}
.tvs-birthday-upsell-notice p {
    font-size: 14px; color: #555; margin: 0 0 12px; line-height: 1.55;
}
.tvs-upsell-btn {
    display: inline-block; background: #F1C349; color: #2d2d2d !important;
    padding: 10px 24px; text-decoration: none !important;
    font-weight: 700; font-size: 14px; border-radius: 50px;
    border: 2px solid #F1C349 !important;
    transition: transform .15s, box-shadow .15s, background .15s;
}
.tvs-upsell-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(241,195,73,.35);
    background: #e6b531; color: #2d2d2d !important; text-decoration: none !important;
}

/* ════════════════════════════════════════════════════════════════
   BIRTHDAY STORE CREDIT WIDGET (CHECKOUT)
════════════════════════════════════════════════════════════════ */
.tvs-credit-widget {
    background: linear-gradient(135deg, #fff8e1 0%, #ffefb8 100%);
    border: 2px solid #F1C349 !important;
    border-radius: 16px; padding: 22px 24px; margin: 24px 0 28px;
    box-shadow: 0 6px 22px rgba(241,195,73,.18);
    position: relative; overflow: hidden;
}
.tvs-credit-widget::before {
    content: ''; position: absolute; top: -40px; right: -40px;
    width: 140px; height: 140px;
    background: radial-gradient(circle, rgba(255,255,255,.4) 0%, transparent 70%);
    pointer-events: none;
}
.tvs-credit-widget-inner {
    display: flex; align-items: center; gap: 18px;
    flex-wrap: wrap; position: relative; z-index: 1;
}
.tvs-credit-icon { font-size: 48px; line-height: 1; flex-shrink: 0; }
.tvs-credit-content { flex: 1; min-width: 220px; }
.tvs-credit-title {
    margin: 0 0 4px !important; font-size: 13px;
    font-weight: 700; text-transform: uppercase;
    letter-spacing: 1px; color: #8b6914;
}
.tvs-credit-balance {
    margin: 0 0 6px !important; font-family: Georgia, 'Playfair Display', serif;
    font-size: 32px; font-weight: 700; color: #2d2d2d; line-height: 1.1;
}
.tvs-credit-desc {
    margin: 0 !important; font-size: 13px; color: #5a4a10; line-height: 1.5;
}
.tvs-credit-desc-removed { display: none; }
.tvs-credit-desc-no-eligible { display: none; }
.tvs-credit-widget.is-removed .tvs-credit-desc-applied { display: none; }
.tvs-credit-widget.is-removed .tvs-credit-desc-removed { display: block; }
.tvs-credit-widget.is-no-eligible .tvs-credit-desc-applied { display: none; }
.tvs-credit-widget.is-no-eligible .tvs-credit-desc-removed { display: none; }
.tvs-credit-widget.is-no-eligible .tvs-credit-desc-no-eligible { display: block; }
.tvs-credit-widget.is-no-eligible .tvs-credit-actions { display: none; }

.tvs-credit-actions { flex-shrink: 0; }
.tvs-credit-toggle {
    display: none; background: #fff; color: #2d2d2d;
    border: 2px solid #F1C349 !important;
    padding: 10px 22px; font-size: 13px; font-weight: 700;
    border-radius: 50px; cursor: pointer;
    transition: all .15s; font-family: inherit;
}
.tvs-credit-toggle:hover { background: #F1C349; color: #2d2d2d; }
.tvs-credit-widget.is-applied .tvs-credit-remove { display: inline-block; }
.tvs-credit-widget.is-removed .tvs-credit-apply  {
    display: inline-block; background: #F1C349; color: #2d2d2d;
}
.tvs-credit-widget.is-removed .tvs-credit-apply:hover { background: #e6b531; }
.tvs-credit-widget.tvs-credit-loading .tvs-credit-toggle { opacity: .5; pointer-events: none; }

/* ── Mobile ── */
@media (max-width: 600px) {
    .tvs-bday-field.form-row-first,
    .tvs-bday-field.form-row-last {
        width: 100% !important; float: none !important; clear: both !important;
        padding-left: 22px !important; padding-right: 22px !important;
    }
    .tvs-bday-field.form-row-last { padding-top: 14px !important; }
    .tvs-credit-widget-inner { gap: 12px; }
    .tvs-credit-icon { font-size: 36px; }
    .tvs-credit-balance { font-size: 26px; }
    .tvs-credit-actions { width: 100%; }
    .tvs-credit-toggle { width: 100%; }
    .tvs-birthday-upsell-notice { flex-direction: column; gap: 10px; padding: 18px; }
    .tvs-upsell-icon { font-size: 32px; }
}
