/* Overlay */
.vip-popup-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}
.vip-summary-coupon {
    margin: 15px 0;
    font-size: 13px;
}

.vip-summary-coupon-row {
    display: flex;
    gap: 10px;
    margin-top: 5px;
}

.vip-summary-coupon-row input.vip-coupon-input {
    flex: 1;
}

.vip-summary-coupon-message {
    margin-top: 5px;
    font-size: 12px;
}

.vip-summary-coupon-message.vip-error {
    color: #ff4b7a;
}

.vip-summary-coupon-message.vip-success {
    color: #97c120;
}
.woocommerce-terms-and-conditions-wrapper {
	display: none;
}
/* Container */
.vip-popup-container {
    background: #050505;
    border-radius: 18px;
    border: 2px solid #FF00D1;
    width: 100%;
    max-width: 520px;
    color: #ffffff;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    position: relative;
    overflow: hidden;
}

/* Close button */
.vip-popup-close {
    position: absolute;
    top: 10px;
    right: 14px;
    border: none;
    background: transparent;
    color: #ffffff;
    font-size: 24px;
    cursor: pointer;
}

/* Header */
.vip-popup-header {
    padding: 24px 24px 18px;
    text-align: center;
    background: #000000;
    border-bottom: 1px solid #FF00D1;
}

.vip-popup-title {
    font-size: 20px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: #FF00D1;
    margin-bottom: 8px;
    font-weight: 700;
}

.vip-popup-price {
    font-size: 28px;
    font-weight: 800;
}

/* Body */
.vip-popup-body {
    padding: 20px 24px 12px;
}

/* Steps */
.vip-step {
    display: none;
}
.vip-step-active {
    display: block;
}

/* Tabs */
.vip-step-switcher {
    display: flex;
    background: #121212;
    border-radius: 999px;
    padding: 4px;
    margin-bottom: 18px;
}

.vip-tab-btn {
    flex: 1;
    border: none;
    border-radius: 999px;
    padding: 8px 0;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    background: transparent;
    color: #a5a5a5;
    cursor: pointer;
}

.vip-tab-btn-active {
    background: #FF00D1;
    color: #000000;
    font-weight: 600;
}

.vip-tab-content {
    display: none;
}
.vip-tab-active {
    display: block;
}

/* Forms */
.vip-form-group {
    margin-bottom: 12px;
}

.vip-form-group label {
    display: block;
    font-size: 13px;
    margin-bottom: 4px;
    color: #d0d0d0;
}

.vip-form-group input {
    width: 100%;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid #333333;
    background: #111111;
    color: #ffffff;
    font-size: 14px;
}

.vip-form-group input:focus {
    outline: none;
    border-color: #FF00D1;
}

/* Primary button */
.vip-primary-btn,
.vip-open-checkout-btn,
.woocommerce #payment #place_order, 
.woocommerce-page #payment #place_order {
    display: inline-block;
    background: #FF00D1;
    color: #000000;
    border-radius: 999px;
    padding: 10px 26px;
    font-size: 15px;
    border: none;
    cursor: pointer;
    font-weight: 700;
    text-align: center;
    text-decoration: none;
}

.vip-primary-btn:hover,
.vip-open-checkout-btn:hover {
    filter: brightness(1.05);
}

/* Petit bouton vert style carte */
.vip-open-checkout-btn {
    background: #FF00D1;
    color: #000000;
    border-radius: 999px;
    padding: 12px 28px;
    font-weight: 700;
}

/* Messages */
.vip-form-message {
    margin-top: 8px;
    font-size: 13px;
}
.vip-form-message.error {
    color: #ff4d4d;
}
.vip-form-message.success {
    color: #FF00D1;
}

/* Résumé produit */
.vip-summary {
    background: #101010;
    border-radius: 12px;
    padding: 12px 14px;
    margin-bottom: 18px;
}

.vip-summary-row {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    padding: 4px 0;
}

.vip-summary-label {
    color: #b0b0b0;
}

.vip-summary-value {
    font-weight: 600;
}

.vip-summary-price {
    color: #FF00D1;
}

/* Checkout wrapper : on nettoie un peu le style WooCommerce */
.vip-checkout-form-wrapper {
    margin-top: 12px;
    font-size: 14px;
}

/* Réduit / neutralise le padding WooCommerce standard dans la pop-up */
.vip-checkout-form-wrapper .woocommerce {
    margin: 0;
}

/* Footer */
.vip-popup-footer {
    padding: 10px 24px 14px;
    text-align: center;
    font-size: 11px;
    color: #aaaaaa;
    background: #050505;
    border-top: 1px solid #111111;
}

/* Responsive */
@media (max-width: 600px) {
    .vip-popup-container {
        margin: 0 10px;
    }
}
/* ---- Spécifique au checkout VIP : on ne montre que le paiement ---- */

/* Cache le formulaire de coupon */
.vip-checkout-form-wrapper .woocommerce-form-coupon,
.vip-checkout-form-wrapper .woocommerce-form-coupon-toggle {
    display: none !important;
}

/* Cache toute la colonne avec les détails de facturation / infos complémentaires */
.vip-checkout-form-wrapper #customer_details {
    display: none !important;
}

/* Cache le tableau "Votre commande" et les titres */
.vip-checkout-form-wrapper #order_review > h3,
.vip-checkout-form-wrapper #order_review .shop_table,
.vip-checkout-form-wrapper #order_review .woocommerce-checkout-review-order-table {
    display: none !important;
}

/* Cache les textes RGPD / conditions si tu veux un look ultra clean 
.vip-checkout-form-wrapper .woocommerce-privacy-policy-text,
.vip-checkout-form-wrapper .woocommerce-terms-and-conditions-wrapper {
    display: none !important;
} */

/* Cache les notices globales éventuelles (stock, etc.) dans la popup 
.vip-checkout-form-wrapper .woocommerce-NoticeGroup,
.vip-checkout-form-wrapper .woocommerce-error,
.vip-checkout-form-wrapper .woocommerce-info {
    display: none !important;
}*/

/* Ne garde visible que la zone de paiement */
.vip-checkout-form-wrapper #order_review #payment {
    margin-top: 0;
}

/* Optionnel : tu peux resserrer un peu la zone paiement */
.vip-checkout-form-wrapper #payment {
    background: #050505;
    border-radius: 12px;
    border: 1px solid #222;
}
/* On cache VISUELLEMENT les champs billing, mais sans casser leur présence dans le DOM */
.vip-checkout-form-wrapper .woocommerce-billing-fields,
.vip-checkout-form-wrapper [id^="billing_"] {
    max-height: 0;
    overflow: hidden;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    opacity: 0;
    pointer-events: none;
}
/* Pour être sûr que les champs billing ne s’affichent pas même si Woo change son HTML 
.vip-checkout-form-wrapper [id^="billing_"] {
    display: none !important;
}*/
/* Limite la hauteur de la popup et ajoute un scroll interne si nécessaire */
.vip-popup-container {
    max-height: 90vh;
    display: flex;
    flex-direction: column;
}

.vip-popup-body {
    overflow-y: auto;
    max-height: calc(90vh - 120px); /* ajustable selon la hauteur de ton header/footer */
}

/* Étapes récap / paiement */
.vip-step-summary {
    margin-bottom: 12px;
}

.vip-summary-next-btn {
    margin-top: 14px;
    width: 100%;
    text-align: center;
}

.vip-step-payment {
    margin-top: 10px;
}
/* --------- GESTION HAUTEUR POPUP (desktop) --------- */

/* Le container prend max 90% de la hauteur de l'écran, avec scroll interne si nécessaire */
.vip-popup-container {
    max-height: 90vh;
    display: flex;
    flex-direction: column;
}

/* Le corps devient scrollable si le contenu est trop long */
.vip-popup-body {
    overflow-y: auto;
    max-height: calc(90vh - 120px); /* ajuste si besoin selon header/footer */
}
/* ----- Layout compact pour le formulaire d'inscription ----- */

.vip-tab-register #vip-register-form {
    font-size: 14px;
}

.vip-form-row {
    display: flex;
    gap: 10px;
}

.vip-form-group-half {
    flex: 1;
    margin-bottom: 12px;
}

/* On compact un peu les champs dans ce formulaire */
#vip-register-form .vip-form-group input,
#vip-register-form .vip-form-group select {
    padding: 8px 10px;
    font-size: 13px;
}

/* Mobile : on repasse en une seule colonne pour ne pas écraser le texte */
@media (max-width: 480px) {
    .vip-form-row {
        flex-direction: column;
    }
}
/* --------- VERSION MOBILE : overlay scrollable et pop-up en haut --------- */
@media (max-width: 768px) {
    .vip-popup-overlay {
        align-items: flex-start;      /* plus centré verticalement */
        justify-content: center;
        overflow-y: auto;             /* on scrolle l’overlay si c’est trop grand */
        padding: 20px 0;              /* un peu d’air en haut/bas */
    }

    .vip-popup-container {
        margin: 20px 10px;
        width: 100%;
        max-width: 480px;
        max-height: none;             /* on enlève la limite 90vh sur mobile */
    }

    .vip-popup-body {
        max-height: none;             /* plus de limite interne, le scroll se fait sur l’overlay */
        overflow-y: visible;
    }
}