/* ════════════════════════════════════════════════════════════════
   BBW4LIFE — PAYPAL SHIPPING MODAL (pages produit)
   Popup de livraison ouvert par le bouton "Buy with PayPal" sur les
   pages produit — même formulaire que checkout.js/checkout.css,
   extrait dans un fichier scopé (préfixe .ppsm-) pour ne jamais
   entrer en conflit avec le reste de products.css. Les variables
   --ck-* de checkout.css sont redéclarées ici localement, pas
   importées, pour ne rien charger de checkout.css sur ces pages
   (son reset universel casserait le layout produit).
════════════════════════════════════════════════════════════════ */
.ppsm-overlay {
    --ck-bg:          #F6EFE5;
    --ck-ivory:       #FCF8F1;
    --ck-gold:        var(--bbw-gold, #B8925A);
    --ck-gold-ultra:  #FAF4E9;
    --ck-gold-pale:   #EFE4CF;
    --ck-charcoal:    var(--bbw-black, #15110E);
    --ck-mist:        #8B7E6E;
    --ck-mist-l:      #B4A791;
    --ck-border:      rgba(184,146,90,0.24);
    --ck-border-s:    rgba(184,146,90,0.12);
    --ck-shadow-l:    0 18px 52px rgba(21,17,14,0.13), 0 4px 16px rgba(21,17,14,0.07);
    --ck-shadow-m:    0 4px 20px rgba(21,17,14,0.07), 0 1px 4px rgba(21,17,14,0.04);
    --ck-shadow-s:    0 1px 3px rgba(21,17,14,0.04), 0 3px 14px rgba(21,17,14,0.035);
    --ck-trans:       all 0.30s cubic-bezier(0.4, 0, 0.2, 1);
    --ck-spring:      all 0.42s cubic-bezier(0.34, 1.56, 0.64, 1);
    --ck-radius:      4px;
    --ck-radius-sm:   3px;

    position: fixed;
    inset: 0;
    z-index: 100000;
    background: rgba(21,17,14,0.55);
    display: none;
    align-items: flex-start;
    justify-content: center;
    padding: 24px 16px;
    overflow-y: auto;
}
.ppsm-overlay.active { display: flex; }

.ppsm-modal {
    background: var(--ck-bg);
    border-radius: 8px;
    box-shadow: var(--ck-shadow-l);
    width: 100%;
    max-width: 560px;
    margin: auto;
    padding: 28px 24px 24px;
    position: relative;
    box-sizing: border-box;
}

@media (max-width: 640px) {
    .ppsm-overlay {
        padding: 10px 0;
        align-items: flex-start;
    }
    .ppsm-modal {
        max-width: 100%;
        width: 100%;
        margin: 0;
        border-radius: 0;
        padding: 18px 12px 16px;
    }
    #ppsm-shipping-form {
        gap: 10px;
    }
}

.ppsm-close {
    position: absolute;
    top: 14px; right: 14px;
    width: 32px; height: 32px;
    border-radius: 50%;
    border: 1px solid var(--ck-border);
    background: #fff;
    color: var(--ck-charcoal);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}
.ppsm-close:hover { background: var(--ck-gold-ultra); border-color: var(--ck-gold); }

.ppsm-title {
    font-family: var(--font-display, serif);
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--ck-charcoal);
    margin: 0 0 4px;
}
.ppsm-subtitle {
    font-size: 0.82rem;
    color: var(--ck-mist);
    margin: 0 0 18px;
}

#ppsm-shipping-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}
#ppsm-shipping-form .ppsm-full { grid-column: 1 / -1; }

@media (max-width: 520px) {
    #ppsm-shipping-form { grid-template-columns: 1fr; }
}

#ppsm-shipping-form label {
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--ck-gold);
    margin-bottom: -6px;
    display: block;
}

#ppsm-shipping-form input,
#ppsm-shipping-form textarea {
    padding: 13px 16px;
    border: 1.5px solid var(--ck-border);
    border-radius: var(--ck-radius-sm);
    width: 100%;
    box-sizing: border-box;
    font-family: var(--font-body, sans-serif);
    font-size: 0.90rem;
    color: var(--ck-charcoal);
    background: rgba(255,255,255,0.80);
    transition: var(--ck-trans);
    outline: none;
}
#ppsm-shipping-form input:focus,
#ppsm-shipping-form textarea:focus {
    border-color: var(--ck-gold);
    background: #fff;
    box-shadow: 0 0 0 3px rgba(184,146,90,0.14);
}
#ppsm-shipping-form textarea { resize: vertical; min-height: 70px; }

.ppsm-phone-group { display: flex; gap: 8px; }
#ppsm-phone-code {
    width: 90px !important;
    background: var(--ck-gold-ultra) !important;
    color: var(--ck-gold) !important;
    font-weight: 700;
    cursor: not-allowed;
    text-align: center;
    border-color: var(--ck-border) !important;
}
#ppsm-phone { flex: 1; }

/* ── Custom searchable select (pays / ville) — copie scopée de
   .custom-select-* dans checkout.css. ── */
.ppsm-select-wrapper { position: relative; width: 100%; user-select: none; }
.ppsm-select-trigger {
    display: flex; align-items: center; justify-content: space-between;
    padding: 13px 16px;
    border: 1.5px solid var(--ck-border);
    border-radius: var(--ck-radius-sm);
    background: rgba(255,255,255,0.80);
    font-family: var(--font-body, sans-serif);
    font-size: 0.90rem;
    color: var(--ck-charcoal);
    cursor: pointer;
    transition: var(--ck-trans);
    outline: none;
    min-height: 48px;
}
.ppsm-select-wrapper.open .ppsm-select-trigger {
    border-color: var(--ck-gold);
    background: #fff;
    box-shadow: 0 0 0 3px rgba(184,146,90,0.14);
}
.ppsm-select-trigger span { color: var(--ck-charcoal); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ppsm-select-trigger span.placeholder { color: var(--ck-mist-l); font-weight: 300; }
.ppsm-select-arrow { font-size: 0.75rem; color: var(--ck-mist); transition: transform 0.28s ease; flex-shrink: 0; margin-left: 8px; }
.ppsm-select-wrapper.open .ppsm-select-arrow { transform: rotate(180deg); color: var(--ck-gold); }

.ppsm-select-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 4px);
    left: 0; right: 0;
    background: var(--ck-ivory);
    border: 1.5px solid var(--ck-border);
    border-radius: var(--ck-radius-sm);
    box-shadow: var(--ck-shadow-l);
    z-index: 100001;
    overflow: hidden;
}
.ppsm-select-wrapper.open .ppsm-select-dropdown { display: flex; flex-direction: column; }

.ppsm-select-search {
    width: 100%; padding: 10px 14px; border: none;
    border-bottom: 1.5px solid var(--ck-border-s);
    font-family: var(--font-body, sans-serif);
    font-size: 0.86rem; color: var(--ck-charcoal);
    background: var(--ck-gold-ultra); outline: none; flex-shrink: 0;
}
.ppsm-select-search::placeholder { color: var(--ck-mist-l); }

.ppsm-select-list {
    list-style: none; max-height: 200px; overflow-y: auto;
    overscroll-behavior: contain; padding: 4px 0; margin: 0;
}
.ppsm-select-list li {
    padding: 10px 16px;
    font-family: var(--font-body, sans-serif);
    font-size: 0.88rem; color: var(--ck-charcoal);
    cursor: pointer; transition: background 0.15s ease, color 0.15s ease;
}
.ppsm-select-list li:hover { background: var(--ck-gold-ultra); color: var(--ck-gold); }
.ppsm-select-list li.selected { background: var(--ck-gold-pale); color: var(--ck-gold); font-weight: 600; }
.ppsm-select-list li.no-results,
.ppsm-select-list li.loading { color: var(--ck-mist); font-style: italic; cursor: default; pointer-events: none; }

/* ── Shipping method ── */
.ppsm-shipping-options {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin-top: 4px;
}
@media (max-width: 520px) {
    .ppsm-shipping-options { grid-template-columns: repeat(2, 1fr); }
}
.ppsm-shipping-option {
    border: 1.5px solid var(--ck-border);
    border-radius: var(--ck-radius);
    padding: 14px 8px;
    text-align: center;
    cursor: pointer;
    transition: var(--ck-spring);
    background: var(--ck-ivory);
    font-size: 0.76rem;
}
.ppsm-shipping-option i { display: block; margin-bottom: 4px; color: var(--ck-gold); }
.ppsm-shipping-option__label { display: block; }
.ppsm-shipping-option__delay {
    display: block;
    font-size: 0.66rem;
    color: var(--ck-mist);
    margin-top: 2px;
}
.ppsm-shipping-option:hover { border-color: var(--ck-gold); }
.ppsm-shipping-option.selected {
    border-color: var(--ck-gold);
    background: var(--ck-gold-ultra);
    box-shadow: inset 0 0 0 1px var(--ck-gold);
}

/* ── Promo code ──
   2 lignes, toujours visibles (jamais masquées sur mobile) :
   1) texte suggestion + bouton Copy sur la même ligne
   2) champ de saisie + bouton Apply sur la même ligne */
.ppsm-promo-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 4px;
}
.ppsm-promo-row input { flex: 1; min-width: 0; }

#ppsm-suggested-promo {
    align-items: center;
}
.ppsm-suggested-text {
    flex: 1;
    min-width: 0;
    font-size: 0.76rem;
    color: var(--ck-mist);
    line-height: 1.3;
}
#ppsm-suggested-code {
    color: var(--ck-gold);
    font-weight: 700;
    letter-spacing: 0.03em;
}

#ppsm-copy-suggested,
#ppsm-promo-apply {
    padding: 0 16px;
    height: 40px;
    border: 1.5px solid var(--ck-gold);
    border-radius: var(--ck-radius-sm);
    background: var(--ck-gold-ultra);
    color: var(--ck-gold);
    font-weight: 700;
    font-size: 0.76rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
}
#ppsm-copy-suggested:hover,
#ppsm-promo-apply:hover { background: var(--ck-gold-pale); }

#ppsm-promo-message {
    font-size: 0.76rem;
    margin-top: 6px;
    min-height: 14px;
}

/* ── Order summary ── */
.ppsm-summary {
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid var(--ck-border);
}
.ppsm-summary p {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.84rem;
    color: var(--ck-charcoal, #15110E);
    margin: 0 0 6px;
}
.ppsm-summary__discount span:last-child { color: #3E7C5A; }
.ppsm-summary__total {
    margin-top: 8px !important;
    padding-top: 8px;
    border-top: 1px solid var(--ck-border);
    font-size: 1rem !important;
    font-weight: 800;
}

/* ── Bouton continuer vers PayPal ── */
#ppsm-continue-btn {
    width: 100%;
    margin-top: 20px;
    padding: 16px;
    background: #FFC439;
    color: #003087;
    border: none;
    border-radius: var(--ck-radius-sm);
    font-weight: 800;
    font-size: 0.92rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    cursor: pointer;
    transition: var(--ck-trans);
}
#ppsm-continue-btn:hover { background: #f2ba36; }
#ppsm-continue-btn:disabled { opacity: 0.6; cursor: wait; }