/* ─────────────────────────────────────────
   Product Card Component
   /css/product-card.css
───────────────────────────────────────── */

/* ── Wrapper ── */
.medality-product-card {
    height: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
}

/* Push CTA to the bottom of the card only when promo lines
   are present above it — prevents large gaps on cards that
   have no promo content between the price and the CTA */
.medality-product-card:has(.medality-product-card__promo-lines)
    .medality-product-card__cta {
    margin-top: auto !important;
}

/* ── Thrive column height passthrough ──
   Ensures the card fills the full height of the Thrive column
   so margin-top: auto on the CTA has space to push down into.
   Scoped to only affect Thrive wrappers that contain a product card
   to avoid layout side effects on other shortcodes across the site. */
.tve_wp_shortcode:has(.medality-product-card),
.tve_shortcode_rendered:has(.medality-product-card) {
    height: 100%;
}

/* Fallback for browsers that do not support :has() —
   add class "medality-shortcode-wrap" manually to the Thrive
   custom HTML wrapper if :has() support is a concern. */
.medality-shortcode-wrap {
    height: 100%;
}

/* ── Sale preview badge — admin only ── */
.medality-product-card__preview-badge {
    display: inline-block;
    background-color: #f59e0b;
    color: #ffffff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    padding: 3px 10px;
    border-radius: 20px;
    margin-bottom: 8px;
}

/* ── Base typography ── */
.medality-product-card__original-price,
.medality-product-card__sale-price {
    font-size: 46px;
}
.medality-product-card__price-note {
    font-size: 22px;
    font-weight: bold;
}

/* ── CTA button ── */
.medality-product-card__btn {
    margin-bottom: 24px;
    display: inline-block;
    text-decoration: none;
    font-weight: bold;
    padding: 12px 54px;
    border-radius: 100px;
    transition:
        color 0.2s ease-in-out,
        background-color 0.2s ease-in-out;
}
.medality-product-card__btn:hover {
    opacity: 0.88;
    text-decoration: none;
}

/* ── Promo lines ── */
.medality-product-card__promo-lines {
    text-align: center;
    margin-top: 16px;
    padding-bottom: 6px;
}
.medality-product-card__promo-line.text-small {
    font-size: 14px;
    line-height: 1.5;
}
.medality-product-card__promo-line.text-medium {
    font-size: 18px;
    line-height: 1.5;
}
.medality-product-card__promo-line.text-large {
    font-size: 22px;
    line-height: 1.5;
}

/* ── Sale copy ── */
.medality-product-card__sale-copy {
    text-align: center;
}
.medality-product-card__sale-copy span {
    color: #f54f5d;
    font-weight: bold;
}

/* ── Add-on checkbox ── */
.medality-product-card__addon {
    text-align: center;
}
.medality-product-card__addon-label {
    display: inline-flex;
    align-items: flex-start;
    gap: 6px;
    text-align: left;
}
.medality-product-card__addon-label input[type='checkbox'] {
    flex-shrink: 0;
    margin-top: 4px; /* optically align checkbox with first line of text */
}
.medality-product-card__addon-text {
    display: inline;
    line-height: 1.2;
}
.medality-product-card__addon-slash-price {
    text-decoration: line-through;
    opacity: 0.6;
}

/* ── Shared colour helpers ── */
.medality-product-card__addon-text .text-red,
.medality-product-card__promo-lines .text-red,
.medality-product-card-hero .text-red {
    color: #f54f5d !important;
}
.medality-product-card__addon-text .text-navy,
.medality-product-card__promo-lines .text-navy,
.medality-product-card-hero .text-navy {
    color: #000a42 !important;
}
.medality-product-card__addon-text .text-blue,
.medality-product-card__promo-lines .text-blue,
.medality-product-card-hero .text-blue {
    color: #0198da !important;
}

/* ── Hero ── */
.medality-product-card-hero .fs-20 {
    font-size: 20px !important;
}
.medality-product-card-hero .fs-18 {
    font-size: 18px !important;
}
.medality-product-card-hero p {
    color: #ffffff !important;
    padding-bottom: 12px !important;
}
.medality-product-card-hero p span {
    color: #f54f5d;
}
.medality-product-card-hero .text-strong {
    font-weight: bold;
}

/* ══════════════════════════════════════════
   LIGHT VARIANT
══════════════════════════════════════════ */
.medality-product-card--light .medality-product-card__original-price {
    color: #000a42;
}
.medality-product-card--light .medality-product-card__sale-price {
    color: #0b0b6b;
}
.medality-product-card--light .medality-product-card__price-note {
    color: #0b0b6b;
}
.medality-product-card--light .medality-product-card__btn {
    background-color: #f54f5d;
    color: #ffffff;
}
.medality-product-card--light .medality-product-card__btn:hover {
    background-color: #000a42;
    color: #f54f5d;
}
.medality-product-card--light .fa-circle-info {
    color: #000a42;
    display: inline-block;
    padding: 2px 8px 4px 0px;
    font-size: 14px;
}

/* ══════════════════════════════════════════
   DARK VARIANT
══════════════════════════════════════════ */
.medality-product-card--dark .medality-product-card__original-price {
    color: #ffffff;
}
.medality-product-card--dark .medality-product-card__sale-price {
    color: #f54f5d;
}
.medality-product-card--dark .medality-product-card__price-note {
    color: #ffffff;
}
.medality-product-card--dark .medality-product-card__btn {
    background-color: #ffffff;
    color: #000a42;
}
.medality-product-card--dark .medality-product-card__btn:hover {
    background-color: #ffffff;
    color: #f54f5d;
}
.medality-product-card--dark .fa-circle-info {
    color: #ffffff;
    display: inline-block;
    padding: 2px 8px 4px 0px;
    font-size: 14px;
}

/* ══════════════════════════════════════════
   GRAY VARIANT
══════════════════════════════════════════ */
.medality-product-card--gray .medality-product-card__original-price {
    color: #000a42;
}
.medality-product-card--gray .medality-product-card__sale-price {
    color: #000a42;
}
.medality-product-card--gray .medality-product-card__price-note {
    color: #000a42;
}
.medality-product-card--gray .medality-product-card__btn {
    background-color: #000a42;
    color: #ffffff;
}
.medality-product-card--gray .medality-product-card__btn:hover {
    background-color: #000a42;
    color: #f54f5d;
}
.medality-product-card--gray .fa-circle-info {
    color: #000a42;
    display: inline-block;
    padding: 2px 8px 4px 0px;
    font-size: 14px;
}

/* ══════════════════════════════════════════
   PRICE COLOR OVERRIDE
   Applies when price_color="white" is set on the shortcode.
   Overrides the variant sale price color to white.
   Useful for dark cards where white price is preferred over red.
══════════════════════════════════════════ */
.medality-product-card--price-white .medality-product-card__sale-price,
.medality-product-card--price-white .medality-product-card__original-price,
.medality-product-card--price-white .medality-product-card__price-note {
    color: #ffffff !important;
}

/* ══════════════════════════════════════════
   COMPACT VARIANT
   Chained with variant selectors to ensure
   specificity always wins over base + variant rules
══════════════════════════════════════════ */

/* Base compact overrides */
.medality-product-card--compact .medality-product-card__original-price,
.medality-product-card--compact .medality-product-card__sale-price {
    font-size: 28px;
}
.medality-product-card--compact .medality-product-card__original-price {
    font-size: 22px;
}
.medality-product-card--compact .medality-product-card__price-note {
    font-size: 13px;
}
.medality-product-card--compact .medality-product-card__btn {
    padding: 12px 24px;
    font-size: 16px;
    min-width: 160px;
}
.medality-product-card--compact .medality-product-card__promo-line {
    font-size: 13px;
}
.medality-product-card--compact .medality-product-card__promo-line.text-large {
    font-size: 20px;
}
.medality-product-card--compact .medality-product-card__promo-line.text-medium {
    font-size: 16px;
}
.medality-product-card--compact .medality-product-card__promo-line.text-small {
    font-size: 12px;
}

/* Compact + gray */
.medality-product-card--compact.medality-product-card--gray
    .medality-product-card__sale-price {
    color: #000a42;
    font-size: 28px;
}
.medality-product-card--compact.medality-product-card--gray
    .medality-product-card__original-price {
    color: #000a42;
    font-size: 22px;
}
.medality-product-card--compact.medality-product-card--gray
    .medality-product-card__price-note {
    color: #000a42;
    font-size: 13px;
}
.medality-product-card--compact.medality-product-card--gray
    .medality-product-card__addon-text {
    font-size: 12px;
}

/* Compact + light — must match specificity of .light .sale-price etc. */
.medality-product-card--compact.medality-product-card--light
    .medality-product-card__sale-price {
    color: #0b0b6b;
    font-size: 28px;
}
.medality-product-card--compact.medality-product-card--light
    .medality-product-card__original-price {
    color: #000a42;
    font-size: 22px;
}
.medality-product-card--compact.medality-product-card--light
    .medality-product-card__price-note {
    color: #0b0b6b;
    font-size: 13px;
}
.medality-product-card--compact.medality-product-card--light
    .medality-product-card__addon-text {
    font-size: 12px;
}

/* Compact + dark */
.medality-product-card--compact.medality-product-card--dark
    .medality-product-card__sale-price {
    color: #f54f5d;
    font-size: 28px;
}
.medality-product-card--compact.medality-product-card--dark
    .medality-product-card__original-price {
    color: #ffffff;
    font-size: 22px;
}
.medality-product-card--compact.medality-product-card--dark
    .medality-product-card__price-note {
    color: #ffffff;
    font-size: 13px;
}
.medality-product-card--compact.medality-product-card--dark
    .medality-product-card__addon-text {
    font-size: 12px;
    color: #ffffff;
}

/* ══════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════ */
@media screen and (min-width: 768px) and (max-width: 1024px) {
    .medality-product-card__original-price,
    .medality-product-card__sale-price {
        font-size: 40px;
    }
    .medality-product-card--compact .medality-product-card__original-price,
    .medality-product-card--compact .medality-product-card__sale-price {
        font-size: 22px;
    }
    .medality-product-card--compact .medality-product-card__original-price {
        font-size: 18px;
    }
}

@media screen and (max-width: 767px) {
    .medality-product-card__original-price,
    .medality-product-card__sale-price {
        font-size: 36px;
    }
    .medality-product-card--compact .medality-product-card__original-price,
    .medality-product-card--compact .medality-product-card__sale-price {
        font-size: 20px;
    }
    .medality-product-card--compact .medality-product-card__original-price {
        font-size: 16px;
    }
}