/**
 * Carte upsell membership — affichée sous le bloc d'achat de la fiche produit shop.
 *
 * Variants : .gas-membership-upsell--card | --banner | --sidebar
 * Tones    : --discreet | --medium | --prominent
 *
 * Tokens : utilise les variables du design system (config/gas-design-tokens.css).
 */

/* ──────────────────────────────────────────────────────────────────────────
   Base
   ────────────────────────────────────────────────────────────────────────── */
.gas-membership-upsell {
    margin-top: var(--gas-space-lg, 1.5rem);
    padding: var(--gas-space-md, 1rem) var(--gas-space-lg, 1.5rem);
    border-radius: var(--gas-radius-md, 8px);
    font-family: var(--gas-font-family, inherit);
    color: var(--gas-text, #222);
    box-sizing: border-box;
}

.gas-membership-upsell__header {
    display: flex;
    flex-direction: column;
    gap: var(--gas-space-xs, 0.25rem);
    margin-bottom: var(--gas-space-sm, 0.5rem);
}

.gas-membership-upsell__badge {
    display: inline-block;
    align-self: flex-start;
    padding: 2px 10px;
    border-radius: var(--gas-radius-pill, 999px);
    background: var(--gas-primary, #6c63ff);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.gas-membership-upsell__title {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 600;
    line-height: 1.3;
    color: inherit;
}

.gas-membership-upsell__price-compare {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--gas-space-sm, 0.5rem) var(--gas-space-md, 1rem);
    margin: var(--gas-space-sm, 0.5rem) 0 var(--gas-space-md, 1rem);
}

.gas-membership-upsell__price-compare--stack {
    flex-direction: column;
    align-items: flex-start;
}

.gas-membership-upsell__price-base {
    color: var(--gas-text-muted, #888);
    text-decoration: line-through;
    font-size: 0.95rem;
}

.gas-membership-upsell__price-with {
    color: var(--gas-primary, #6c63ff);
    font-weight: 700;
    font-size: 1.25rem;
}

.gas-membership-upsell__savings {
    color: var(--gas-success, #2e7d32);
    font-size: 0.9rem;
    font-weight: 500;
}

.gas-membership-upsell__benefits {
    list-style: none;
    margin: 0 0 var(--gas-space-md, 1rem) 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--gas-space-xs, 0.25rem);
}

.gas-membership-upsell__benefits li {
    position: relative;
    padding-left: 1.25rem;
    font-size: 0.95rem;
    line-height: 1.5;
}

.gas-membership-upsell__benefits li::before {
    content: "+";
    position: absolute;
    left: 0;
    top: 0;
    color: var(--gas-primary, #6c63ff);
    font-weight: 700;
}

.gas-membership-upsell__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

/* ──────────────────────────────────────────────────────────────────────────
   Variant : card
   ────────────────────────────────────────────────────────────────────────── */
.gas-membership-upsell--card {
    display: block;
}

/* ──────────────────────────────────────────────────────────────────────────
   Variant : banner
   ────────────────────────────────────────────────────────────────────────── */
.gas-membership-upsell--banner {
    margin-top: 0;
    margin-bottom: var(--gas-space-lg, 1.5rem);
}

.gas-membership-upsell--banner .gas-membership-upsell__banner-content {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--gas-space-md, 1rem);
}

.gas-membership-upsell--banner .gas-membership-upsell__banner-text {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--gas-space-sm, 0.5rem) var(--gas-space-md, 1rem);
}

/* ──────────────────────────────────────────────────────────────────────────
   Variant : sidebar
   ────────────────────────────────────────────────────────────────────────── */
.gas-membership-upsell--sidebar {
    max-width: 320px;
    padding: var(--gas-space-md, 1rem);
}

.gas-membership-upsell--sidebar .gas-membership-upsell__title {
    font-size: 1rem;
}

.gas-membership-upsell--sidebar .gas-membership-upsell__price-with {
    font-size: 1.1rem;
}

/* ──────────────────────────────────────────────────────────────────────────
   Tones — couleurs / fonds
   ────────────────────────────────────────────────────────────────────────── */

/* Discreet : pas de fond, bordure gauche fine. */
.gas-membership-upsell--discreet {
    background: transparent;
    border-left: 3px solid var(--gas-primary, #6c63ff);
    border-radius: 0 var(--gas-radius-md, 8px) var(--gas-radius-md, 8px) 0;
    padding-left: var(--gas-space-md, 1rem);
}

.gas-membership-upsell--discreet .gas-membership-upsell__badge {
    background: transparent;
    color: var(--gas-primary, #6c63ff);
    padding-left: 0;
}

/* Medium : fond soft, bordure 1px. */
.gas-membership-upsell--medium {
    background: var(--gas-primary-soft, rgba(108, 99, 255, 0.08));
    border: 1px solid var(--gas-primary-soft-border, rgba(108, 99, 255, 0.25));
}

/* Prominent : dégradé primary, texte blanc. */
.gas-membership-upsell--prominent {
    background: linear-gradient(135deg,
        var(--gas-primary, #6c63ff) 0%,
        var(--gas-primary-dark, #5046e5) 100%);
    color: #fff;
    border: none;
}

.gas-membership-upsell--prominent .gas-membership-upsell__title,
.gas-membership-upsell--prominent .gas-membership-upsell__price-with,
.gas-membership-upsell--prominent .gas-membership-upsell__benefits li {
    color: #fff;
}

.gas-membership-upsell--prominent .gas-membership-upsell__benefits li::before {
    color: #fff;
}

.gas-membership-upsell--prominent .gas-membership-upsell__price-base {
    color: rgba(255, 255, 255, 0.7);
}

.gas-membership-upsell--prominent .gas-membership-upsell__savings {
    color: #fff;
    font-weight: 700;
    font-size: 1.25rem;
}

.gas-membership-upsell--prominent .gas-membership-upsell__badge {
    background: rgba(255, 255, 255, 0.2);
    color: #fff;
}

.gas-membership-upsell--prominent .gas-membership-upsell__cta {
    background: #fff;
    color: var(--gas-primary, #6c63ff);
    border-color: #fff;
}

.gas-membership-upsell--prominent .gas-membership-upsell__cta:hover,
.gas-membership-upsell--prominent .gas-membership-upsell__cta:focus {
    background: rgba(255, 255, 255, 0.92);
    color: var(--gas-primary-dark, #5046e5);
}

/* ──────────────────────────────────────────────────────────────────────────
   Responsive
   ────────────────────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
    .gas-membership-upsell--banner .gas-membership-upsell__banner-content {
        flex-direction: column;
        align-items: flex-start;
    }

    .gas-membership-upsell__cta {
        width: 100%;
    }
}