/* ================================================================
   Shop theme — panier, checkout, paiement (couleurs = settings)
   ================================================================ */

.shop-page {
    color: var(--shop-ink, #0f172a);
    max-width: 72rem;
    margin: 0 auto;
    padding: 1.5rem 1rem 3rem;
}

.shop-page h1,
.shop-page h2,
.shop-page h3 {
    /* Fallback lisible si --shop-title est blanc sur fond clair */
    color: var(--shop-title, var(--shop-ink, #0f172a)) !important;
}

/* Titres page paiement : couleur selon fond (gérée en inline dans la vue) */
.pay-page.shop-page > h1.pay-title,
.pay-page.shop-page h1.pay-title,
.pay-page.shop-page h2.pay-heading.pay-on-page {
    background: none !important;
}

.shop-page .neon {
    color: var(--shop-accent) !important;
    text-shadow: none !important;
}

/* Cartes / panneaux — encre toujours lisible sur la surface */
.shop-page .shop-card,
.shop-page .bg-white,
.shop-page .bg-white\/5,
.shop-page .bg-black\/30,
.shop-page .bg-white\/10 {
    background: var(--shop-surface) !important;
    border-color: var(--shop-border) !important;
    color: var(--shop-ink) !important;
}

.shop-page .shop-card h1,
.shop-page .shop-card h2,
.shop-page .shop-card h3,
.shop-page .bg-white h1,
.shop-page .bg-white h2,
.shop-page .bg-white h3,
.shop-page .bg-black\/30 h1,
.shop-page .bg-black\/30 h2,
.shop-page .bg-black\/30 h3,
.shop-page .bg-white\/10 h1,
.shop-page .bg-white\/10 h2,
.shop-page .bg-white\/10 h3 {
    color: var(--shop-title, var(--shop-ink)) !important;
}

.shop-page .border-white\/10,
.shop-page .border-white\/20,
.shop-page .border-t.border-white\/20 {
    border-color: var(--shop-border) !important;
}

.shop-page .text-white\/70,
.shop-page .text-white\/60,
.shop-page .text-white\/50,
.shop-page .text-white\/80 {
    color: var(--shop-muted) !important;
}

/* Champs */
.shop-page input[type="text"],
.shop-page input[type="email"],
.shop-page input[type="tel"],
.shop-page input[type="number"],
.shop-page input[type="password"],
.shop-page select,
.shop-page textarea {
    background: var(--shop-surface-2) !important;
    border-color: var(--shop-border) !important;
    color: var(--shop-ink) !important;
}
.shop-page input:focus,
.shop-page select:focus,
.shop-page textarea:focus {
    border-color: var(--shop-accent) !important;
    outline: none;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--shop-accent) 25%, transparent);
}

/* Boutons primaires */
.shop-page .bg-primary-dynamic,
.shop-page .bg-\[\#ff6600\],
.shop-page a.bg-primary-dynamic,
.shop-page button.bg-pink-500,
.shop-page .bg-pink-500 {
    background-color: var(--shop-accent) !important;
    color: #fff !important;
    border-color: transparent !important;
}
.shop-page .bg-primary-hover-dynamic:hover,
.shop-page .hover\:bg-\[\#ff944d\]:hover,
.shop-page a.bg-primary-dynamic:hover,
.shop-page .bg-pink-500:hover {
    background-color: var(--shop-accent-hover) !important;
    filter: brightness(1.05);
}

.shop-page .text-primary-dynamic,
.shop-page .text-\[\#ff6600\],
.shop-page .group-hover\:text-\[\#ff6600\]:hover {
    color: var(--shop-accent) !important;
}

.shop-page .hover\:border-\[\#ff6600\]:hover,
.shop-page .hover\:border-pink-500:hover {
    border-color: var(--shop-accent) !important;
}

.shop-page .hover\:bg-\[\#ff6600\]\/5:hover,
.shop-page .hover\:bg-white\/5:hover,
.shop-page .hover\:bg-white\/20:hover,
.shop-page .bg-white\/10:hover {
    background-color: color-mix(in srgb, var(--shop-accent) 12%, var(--shop-surface)) !important;
}

/* Step badges checkout */
.shop-page .bg-pink-500.w-8,
.shop-page span.bg-pink-500 {
    background-color: var(--shop-accent) !important;
    color: #fff !important;
}

/* Liens / boutons texte (vider panier, retour checkout…) */
.shop-page a:not([class*="bg-"]):not(.shop-gateway):not(.shop-btn-ghost) {
    color: var(--shop-link) !important;
}
.shop-page a:not([class*="bg-"]):not(.shop-gateway):not(.shop-btn-ghost):hover {
    color: var(--shop-link-hover) !important;
}

.shop-page button:not([class*="bg-"]):not(.bg-primary-dynamic):not(.bg-pink-500):not(.shop-btn-ghost) {
    color: var(--shop-ink) !important;
}
.shop-page button:not([class*="bg-"]):not(.bg-primary-dynamic):not(.shop-btn-ghost):hover {
    color: var(--shop-accent) !important;
}

/* Gateway cards (paiement) */
.shop-page .shop-gateway {
    background: var(--shop-surface) !important;
    border: 1px solid var(--shop-border) !important;
    color: var(--shop-ink) !important;
    border-radius: .75rem;
    transition: border-color .15s, background .15s, transform .15s;
}
.shop-page .shop-gateway:hover {
    border-color: var(--shop-accent) !important;
    background: color-mix(in srgb, var(--shop-accent) 8%, var(--shop-surface)) !important;
    transform: translateY(-1px);
}
.shop-page .shop-gateway h3 {
    color: var(--shop-ink) !important;
}
.shop-page .shop-gateway:hover h3 {
    color: var(--shop-accent) !important;
}
.shop-page .shop-gateway p {
    color: var(--shop-muted) !important;
}
.shop-page .shop-gateway__icon {
    background: color-mix(in srgb, var(--shop-accent) 14%, transparent) !important;
    color: var(--shop-accent) !important;
}
.shop-page .shop-gateway__fee {
    color: var(--shop-accent) !important;
}

/* Alertes info */
.shop-page .shop-note {
    background: color-mix(in srgb, var(--shop-accent) 10%, var(--shop-surface));
    border: 1px solid color-mix(in srgb, var(--shop-accent) 35%, var(--shop-border));
    color: var(--shop-ink);
    border-radius: .75rem;
    padding: 1rem;
}

/* Lignes panier */
.shop-page .cart-item {
    background: var(--shop-surface);
    border: 1px solid var(--shop-border);
    border-radius: .65rem;
    color: var(--shop-ink);
}

.shop-page .shop-muted {
    color: var(--shop-muted) !important;
}

.shop-page a.shop-btn-ghost,
.shop-page button.shop-btn-ghost,
.shop-page .shop-btn-ghost {
    border: 1px solid var(--shop-border) !important;
    background: var(--shop-surface) !important;
    color: var(--shop-ink) !important;
    border-radius: .5rem;
    padding: .5rem 1rem;
    display: inline-block;
    transition: background .15s, border-color .15s, color .15s;
}
.shop-page a.shop-btn-ghost:hover,
.shop-page button.shop-btn-ghost:hover,
.shop-page .shop-btn-ghost:hover {
    border-color: var(--shop-accent) !important;
    background: color-mix(in srgb, var(--shop-accent) 10%, var(--shop-surface)) !important;
    color: var(--shop-accent) !important;
}