/* ============================================================================
   popup.css — Habillage des pop-up de la boutique
   Panier · Adresse de livraison · Vérification produit · Dépôt BTC

   Toutes les couleurs viennent de variables --pp-* injectées par
   includes/popup_theme.php, elles-mêmes issues de SuperAdmin → Pop-Up.

   Ce fichier est chargé APRÈS main.css et surcharge volontairement les trois
   blocs .glass-* qui s'y empilaient (thème clair, règles contradictoires).
   ========================================================================== */

/* Tout élément d'un pop-up compte bordure et padding dans sa largeur :
   la boutique ne pose pas box-sizing globalement, et un width:100% nu
   débordait alors son conteneur. */
.glass-panel, .glass-panel *, .glass-panel *::before, .glass-panel *::after{
  box-sizing: border-box;
}

/* ------------------------------------------------------------- structure -- */
.glass-overlay{
  position: fixed; inset: 0; z-index: 2147483647;
  /* Tenté ici : height:var(--mlz-vh) pour caler la pop-up sur la hauteur
     RÉELLEMENT visible (mesurée en JS, voir bottom_menu.php) plutôt que
     100vh, qui dans Telegram ne correspond pas toujours à la zone visible.
     Abandonné : sur cette page, --mlz-vh se révèle plus petit que la vraie
     zone disponible ici (topbar + conteneur intermédiaire mesurés
     différemment selon le contexte) — la pop-up se retrouvait décalée vers
     le bas avec un vide au-dessus, pire que le problème d'origine. Retour à
     inset:0 seul (100% de la fenêtre de positionnement réelle, toujours
     juste) tant qu'une mesure fiable commune à toutes les pages n'est pas
     trouvée. */
  display: none; align-items: center; justify-content: center;
  padding: 16px;
  background: var(--pp-overlay, rgba(5,8,16,.74));
  /* Flou désactivé sur demande — le fond derrière la pop-up reste net,
     seul le voile semi-opaque (--pp-overlay) l'assombrit. */
  -webkit-backdrop-filter: none;
          backdrop-filter: none;
  opacity: 0;
  transition: opacity .18s ease;
  pointer-events: none;
}
/* La teinte est répétée sur .glass-overlay.open : main.css la pose sur ce
   sélecteur à deux classes, plus spécifique que .glass-overlay seul. Sans ce
   rappel, l'ancien voile gris l'emporterait sur celui de la configuration. */
.glass-overlay.open{
  display: flex !important;
  opacity: 1;
  pointer-events: auto;
  background: var(--pp-overlay, rgba(5,8,16,.74));
  /* Flou désactivé sur demande — le fond derrière la pop-up reste net,
     seul le voile semi-opaque (--pp-overlay) l'assombrit. */
  -webkit-backdrop-filter: none;
          backdrop-filter: none;
}

.glass-panel{
  position: relative;
  width: min(560px, 100%);
  max-height: min(82vh, 680px);
  margin: 0;
  display: flex; flex-direction: column;
  background: var(--pp-card, #151B24);
  color: var(--pp-text, #E8EDF5);
  border: 1px solid var(--pp-border, #28323F);
  border-radius: var(--pp-radius, 18px);
  box-shadow: 0 28px 70px -18px rgba(0,0,0,.75);
  overflow: hidden;
  transform: translateY(14px) scale(.97);
  opacity: 0;
  transition: transform .22s cubic-bezier(.2,.7,.3,1), opacity .16s ease;
}
.glass-overlay.open .glass-panel{ transform: none; opacity: 1; }
.glass-overlay.open.closing .glass-panel{ transform: translateY(14px) scale(.97); opacity: 0; }

/* ---------------------------------------------------------------- entête -- */
.glass-panel .panel-head{
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 16px;
  background: var(--pp-head, #1A2230);
  border-bottom: 1px solid var(--pp-border, #28323F);
  flex: 0 0 auto;
}
.glass-panel .panel-title{
  font-weight: 700; font-size: 1rem; letter-spacing: -.01em;
  color: var(--pp-text, #E8EDF5);
  display: flex; align-items: center; gap: .5rem; min-width: 0;
}
.glass-panel .panel-close{
  width: 34px; height: 34px; flex: 0 0 auto;
  display: grid; place-items: center;
  border-radius: 10px; cursor: pointer;
  background: color-mix(in srgb, var(--pp-text, #E8EDF5) 8%, transparent);
  border: 1px solid var(--pp-border, #28323F);
  color: var(--pp-muted, #93A1B3);
  font-size: 15px; line-height: 1;
  transition: background .15s ease, color .15s ease, transform .12s ease;
}
.glass-panel .panel-close:hover{
  background: color-mix(in srgb, var(--pp-text, #E8EDF5) 15%, transparent);
  color: var(--pp-text, #E8EDF5);
  transform: scale(1.05);
}

/* ----------------------------------------------------------------- corps -- */
.glass-panel .panel-body{
  padding: 16px;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  flex: 1 1 auto;
  color: var(--pp-text, #E8EDF5);
}
.glass-panel .panel-body::-webkit-scrollbar{ width: 7px; }
.glass-panel .panel-body::-webkit-scrollbar-thumb{
  background: var(--pp-border, #28323F); border-radius: 99px;
}
.glass-panel .panel-body::-webkit-scrollbar-track{ background: transparent; }

.glass-panel .panel-foot{
  padding: 14px 16px;
  border-top: 1px solid var(--pp-border, #28323F);
  background: var(--pp-head, #1A2230);
  display: flex; gap: 10px; flex-wrap: wrap;
  flex: 0 0 auto;
}
.glass-panel .panel-foot .btn{ flex: 1 1 auto; }

/* ------------------------------------------------------------ formulaires -- */
.glass-panel .field{ display: grid; gap: 6px; margin-bottom: 14px; }
.glass-panel .field:last-child{ margin-bottom: 0; }
.glass-panel .label{
  font-size: 12px; font-weight: 600; letter-spacing: .02em;
  color: var(--pp-muted, #93A1B3);
}
.glass-panel .label .req{ color: var(--pp-accent, #2FD48F); margin-left: 2px; }

.glass-panel .input, .glass-panel .textarea, .glass-panel input[type="text"], .glass-panel input[type="tel"], .glass-panel input[type="number"], .glass-panel input[type="email"], .glass-panel textarea, .glass-panel select{
  width: 100%;
  box-sizing: border-box;
  padding: 11px 13px;
  background: var(--pp-input, #0F151D);
  border: 1px solid var(--pp-border, #28323F);
  border-radius: 11px;
  color: var(--pp-text, #E8EDF5);
  font-size: 14px; font-family: inherit;
  outline: none;
  transition: border-color .16s ease, box-shadow .16s ease;
}
.glass-panel .textarea, .glass-panel textarea{ min-height: 84px; resize: vertical; }

.glass-panel .input:focus, .glass-panel .textarea:focus, .glass-panel input:focus, .glass-panel textarea:focus{
  border-color: var(--pp-accent, #2FD48F);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--pp-accent, #2FD48F) 22%, transparent);
}
.glass-panel .input::placeholder, .glass-panel .textarea::placeholder, .glass-panel ::placeholder{
  color: color-mix(in srgb, var(--pp-muted, #93A1B3) 65%, transparent);
}

/* --------------------------------------------------------------- boutons -- */
.glass-panel .btn, .glass-panel .panel-foot .btn{
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: 12px 16px;
  border-radius: 12px;
  border: 1px solid transparent;
  font-weight: 650; font-size: 14px; font-family: inherit;
  cursor: pointer; text-decoration: none !important;
  transition: transform .12s ease, filter .16s ease, background .16s ease;
  box-shadow: none;
}
.glass-panel .btn:active{ transform: translateY(1px); }

.glass-panel .btn-primary, .glass-panel .panel-foot .btn-primary{
  background: var(--pp-accent, #2FD48F) !important;
  color: var(--pp-accent-text, #06251A) !important;
  border-color: var(--pp-accent, #2FD48F) !important;
}
.glass-panel .btn-primary:hover{ filter: brightness(1.08); }

/* le bouton ambre historique devient le bouton secondaire du thème */
.glass-panel .btn-amber, .glass-panel .btn-ghost, .glass-panel .panel-foot .btn-amber, .glass-panel .panel-foot .btn-ghost{
  background: var(--pp-ghost, #232D3B) !important;
  color: var(--pp-text, #E8EDF5) !important;
  border-color: var(--pp-border, #28323F) !important;
}
.glass-panel .btn-amber:hover, .glass-panel .btn-ghost:hover{ filter: brightness(1.15); }

.glass-panel .btn-danger{
  background: color-mix(in srgb, var(--pp-danger, #EE6E69) 16%, transparent) !important;
  color: var(--pp-danger, #EE6E69) !important;
  border-color: color-mix(in srgb, var(--pp-danger, #EE6E69) 40%, transparent) !important;
}
.glass-panel .btn-xs{ padding: 10px 13px; font-size: 13px; }

/* ------------------------------------------------------- tableau panier -- */
.glass-panel .cart-table{
  width: 100%; border-collapse: collapse; font-size: 13.5px;
  color: var(--pp-text, #E8EDF5);
}
.glass-panel .cart-table thead th{
  text-align: left; font-weight: 600; font-size: 11px;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--pp-muted, #93A1B3);
  /* padding-top a 0 collait ARTICLE/QTE/PRIX au liseré du haut du tableau */
  padding: 10px 8px 8px;
  border-bottom: 1px solid var(--pp-border, #28323F);
}
.glass-panel .cart-table tbody td{
  padding: 11px 8px;
  border-bottom: 1px solid color-mix(in srgb, var(--pp-border, #28323F) 55%, transparent);
  vertical-align: middle;
}
.glass-panel .cart-table tbody tr:last-child td{ border-bottom: 0; }
.glass-panel .empty-msg{
  text-align: center; padding: 28px 12px;
  color: var(--pp-muted, #93A1B3); font-size: 14px;
}

/* -------------------------------------------- récapitulatif de commande -- */
/* Le code promo vivait dans le pied de page, coincé entre les boutons.
   Il rejoint ici un vrai bloc « récapitulatif », lu de haut en bas :
   sous-total → code → réduction → total. */
.glass-panel .cart-recap{
  margin-top: 16px;
  background: var(--pp-input, #0F151D);
  border: 1px solid var(--pp-border, #28323F);
  border-radius: 14px;
  padding: 14px;
}
.glass-panel .recap-line{
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  font-size: 13.5px; color: var(--pp-muted, #93A1B3);
  padding: 5px 0;
}
.glass-panel .recap-line .val{
  font-variant-numeric: tabular-nums;
  color: var(--pp-text, #E8EDF5); font-weight: 600;
}
.glass-panel .recap-line.discount .val{ color: var(--pp-accent, #2FD48F); }
.glass-panel .recap-sep{
  height: 1px; margin: 10px 0;
  background: var(--pp-border, #28323F);
}
.glass-panel .recap-total{
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
}
.glass-panel .recap-total .lbl{ font-size: 13px; color: var(--pp-muted, #93A1B3); }
.glass-panel .recap-total .val{
  font-size: 1.35rem; font-weight: 800; letter-spacing: -.02em;
  color: var(--pp-text, #E8EDF5); font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------ code promo -- */
.glass-panel .cart-promo{ margin-top: 12px; }
.glass-panel .cart-promo-label{
  display: block; margin-bottom: 6px;
  font-size: 12px; font-weight: 600; color: var(--pp-muted, #93A1B3);
}
.glass-panel .cart-promo-row{ display: flex; gap: 8px; }
.glass-panel .cart-promo-input{
  flex: 1 1 auto; min-width: 0;
  box-sizing: border-box;
  padding: 10px 12px;
  background: var(--pp-card, #151B24);
  border: 1px solid var(--pp-border, #28323F);
  border-radius: 10px;
  color: var(--pp-text, #E8EDF5);
  font-size: 13.5px; letter-spacing: .06em; text-transform: uppercase;
  outline: none;
}
.glass-panel .cart-promo-input:focus{
  border-color: var(--pp-accent, #2FD48F);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--pp-accent, #2FD48F) 22%, transparent);
}
.glass-panel .cart-promo-row .btn{ flex: 0 0 auto; padding: 10px 15px; }

.glass-panel .cart-promo-feedback{ margin-top: 7px; font-size: 12px; min-height: 0; }
.glass-panel .cart-promo-feedback:empty{ display: none; }
.glass-panel .cart-promo-feedback.error{ color: var(--pp-danger, #EE6E69); }
.glass-panel .cart-promo-feedback.success{ color: var(--pp-accent, #2FD48F); }

/* code appliqué : une puce, plus une ligne de tableau */
.glass-panel .cart-promo-summary{
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-top: 10px; padding: 9px 11px;
  background: color-mix(in srgb, var(--pp-accent, #2FD48F) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--pp-accent, #2FD48F) 32%, transparent);
  border-radius: 10px;
  font-size: 13px;
}
.glass-panel .cart-promo-summary .label{ color: var(--pp-muted, #93A1B3); }
.glass-panel .cart-promo-summary .value{
  font-weight: 700; color: var(--pp-accent, #2FD48F);
  font-variant-numeric: tabular-nums; margin-left: auto;
}
.glass-panel #promo-remove-btn{
  background: none !important; border: 0 !important; padding: 0 !important;
  color: var(--pp-danger, #EE6E69) !important;
  font-size: 11px; cursor: pointer; text-decoration: underline;
}

/* --------------------------------------------------------------- alertes -- */
.glass-panel .cart-addr-alert{
  display: flex; align-items: flex-start; gap: 10px;
  padding: 11px 13px; margin-bottom: 12px;
  background: color-mix(in srgb, var(--pp-danger, #EE6E69) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--pp-danger, #EE6E69) 32%, transparent);
  border-radius: 11px;
  color: var(--pp-danger, #EE6E69);
  font-size: 13px; line-height: 1.5;
}

/* ------------------------------------------------------- résultat / BTC -- */
.glass-panel .order-result{ text-align: center; padding: 8px 0; }
.glass-panel .order-msg{ font-size: 15px; line-height: 1.6; color: var(--pp-text, #E8EDF5); margin: 0 0 10px; }
.glass-panel .order-meta{
  font-size: 12.5px; color: var(--pp-muted, #93A1B3);
  background: var(--pp-input, #0F151D);
  border: 1px solid var(--pp-border, #28323F);
  border-radius: 11px; padding: 11px; margin-top: 10px;
  word-break: break-all; text-align: left;
}

/* adresse BTC et autres valeurs à copier */
.glass-panel code, .glass-panel .mono, .glass-panel .btc-address{
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  background: var(--pp-input, #0F151D);
  border: 1px solid var(--pp-border, #28323F);
  border-radius: 9px;
  padding: 9px 11px;
  color: var(--pp-text, #E8EDF5);
  font-size: 12.5px;
  display: block; word-break: break-all;
}
.glass-panel img[src*="qr"], .glass-panel .qr img, .glass-panel canvas{
  background: #fff; border-radius: 12px; padding: 8px;
}



/* ============================================================================
   Le dock reste visible sous les pop-ups

   Le voile couvre `inset: 0` avec une teinte opaque et un flou : le dock, qui
   vit bien plus bas dans l'empilement, disparaissait completement des qu'un
   pop-up s'ouvrait. Le remonter au-dessus du voile n'etait pas une option — le
   voile est deja a la valeur maximale d'un z-index, et le panneau, ancre en
   bas sur mobile, se serait retrouve a moitie sous le menu.

   On arrete donc le voile juste au-dessus du dock. Le menu reste visible et
   utilisable sans rien changer a l'empilement, et le panneau, aligne sur le
   bas du voile, vient naturellement se poser au-dessus de lui.

   Consequence assumee : toucher le dock ne ferme plus le pop-up, cette zone ne
   fait plus partie du voile. C'est le comportement attendu d'une barre de
   navigation qui reste accessible.
   ========================================================================== */
.glass-overlay{
  inset: 0 0 var(--mlz-dock-real, 130px) 0;
}

/* Le verrou « ouvrez depuis Telegram » doit, lui, tout recouvrir : c'est un
   blocage, pas un pop-up de la boutique. */
#desktop-lock-modal.glass-overlay{ inset: 0; }

/* --------------------------------------------------------- petits écrans -- */
@media (max-width: 480px){
  .glass-overlay{ padding: 10px 10px 8px; align-items: flex-end; }
  .glass-panel{
    max-height: 88vh;
    border-radius: calc(var(--pp-radius, 18px) + 4px);
  }
  .panel-head{ padding: 12px 13px; }
  .panel-body{ padding: 13px; }
  .panel-foot{ padding: 12px 13px; }
  .panel-foot .btn{ flex: 1 1 100%; }
  .glass-panel .cart-table{ font-size: 12.5px; }
  .glass-panel .cart-table tbody td{ padding: 9px 6px; }
  .glass-panel .recap-total .val{ font-size: 1.2rem; }
}

/* les pop-up ne doivent pas glisser sous le clavier virtuel */
@media (max-height: 560px){
  .glass-panel{ max-height: 92vh; }
}

@media (prefers-reduced-motion: reduce){
  .glass-overlay, .glass-panel{ transition: none; }
}

/* ============================================================================
   Reprise de la peau « theme clair » heritee de main.css

   main.css habille encore les pop-ups pour un fond blanc : degrade blanc sur
   les en-tetes de tableau, lignes alternees blanches, ombre blanche sur le
   cadre. Les regles d'ici, plus specifiques, gagnaient sur la couleur du texte
   et les marges — mais une regle ne peut pas ecraser une propriete qu'elle ne
   declare pas. Tout ce que main.css peignait et que ce fichier passait sous
   silence restait donc en clair sur le panneau sombre : d'ou la barre grise
   au-dessus du panier.

   Ce bloc reprend explicitement chacune de ces surfaces.
   ========================================================================== */

.glass-panel .table-wrap{
  background: color-mix(in srgb, var(--pp-text, #E8EDF5) 4%, transparent);
  border: 1px solid var(--pp-border, #28323F);
  box-shadow: none;
}

.glass-panel .cart-table thead th{
  /* le degrade blanc de main.css se voyait par-dessus le panneau sombre */
  background: none;
  border-bottom: 1px solid var(--pp-border, #28323F);
}

/* Les lignes alternees passaient en blanc des qu'un article entrait dans le
   panier — invisible tant qu'il est vide, mais fatal au premier ajout. */
.glass-panel .cart-table tbody tr:nth-child(odd),
.glass-panel .cart-table tbody tr:nth-child(even){
  background: transparent;
}
.glass-panel .cart-table tbody tr:nth-child(even){
  background: color-mix(in srgb, var(--pp-text, #E8EDF5) 3%, transparent);
}

/* Alignement des en-tetes.
   La regle groupee de ce fichier forcait text-align:left sur TOUS les th, et sa
   specificite (0,3,3) ecrasait les .col-* de main.css (0,1,0) : les intitules
   QTE et PRIX se retrouvaient a gauche pendant que leurs cellules restaient
   centrees et a droite. On restitue chaque colonne a son alignement. */
.glass-panel .cart-table thead th.col-qty{   text-align: center; }
.glass-panel .cart-table thead th.col-price{ text-align: right;  }
.glass-panel .cart-table thead th.col-del{   text-align: center; }

/* Compteur de quantite et suppression : main.css les dessine en blanc sur fond
   noir tres transparent, pense pour un panneau clair. Sur le panneau sombre le
   compteur ressortait en pastille blanche pleine et les boutons disparaissaient
   presque. Ils suivent desormais les couleurs du theme. */
.glass-panel .qty{
  background: color-mix(in srgb, var(--pp-text, #E8EDF5) 6%, transparent);
  border: 1px solid var(--pp-border, #28323F);
  color: var(--pp-text, #E8EDF5);
}
.glass-panel .qty-btn,
.glass-panel .del-btn{
  background: color-mix(in srgb, var(--pp-text, #E8EDF5) 10%, transparent);
  color: var(--pp-text, #E8EDF5);
  transition: background .16s ease;
}
.glass-panel .qty-btn:hover,
.glass-panel .del-btn:hover{
  background: color-mix(in srgb, var(--pp-accent, #2FD48F) 28%, transparent);
}
.glass-panel .del-btn:hover{
  background: color-mix(in srgb, var(--pp-danger, #E5484D) 30%, transparent);
}
@media (prefers-reduced-motion: reduce){
  .glass-panel .qty-btn, .glass-panel .del-btn{ transition: none; }
}

/* ============================================================================
   Surfaces encore ecrites pour un panneau clair

   Les regles visees ici sont posees en `#id .classe` avec !important : aucune
   selection de classe ne pouvait les reprendre. On repasse donc par la meme
   forme, et ce fichier etant charge apres main.css, c'est lui qui tranche.
   ========================================================================== */

/* Textes quasi noirs sur panneau sombre : illisibles. */
#address-saved-modal .glass-panel .order-heading,
#order-modal .glass-panel .order-heading{ color: var(--pp-text, #E8EDF5); }
#address-saved-modal .glass-panel .order-msg,
#order-modal .glass-panel .order-msg{ color: var(--pp-muted, #93A1B3); }

/* Fiche de verification : cadres et pastilles dessines en noir tres
   transparent avec un liseré blanc — invisibles sur fond sombre, sauf le
   liseré, seul reste visible. */
#verify-result-modal .vr-header{
  background: color-mix(in srgb, var(--pp-text, #E8EDF5) 5%, transparent) !important;
  border: 1px solid var(--pp-border, #28323F) !important;
  box-shadow: none !important;
}
#verify-result-modal .vr-thumb{
  /* plaque sombre plutot que blanche : les visuels produits sont detoures, une
     plaque blanche creait un pave lumineux au milieu du panneau */
  background: color-mix(in srgb, var(--pp-text, #E8EDF5) 8%, transparent) !important;
  border: 1px solid var(--pp-border, #28323F) !important;
  box-shadow: none !important;
}
#verify-result-modal .vr-badge{
  background: color-mix(in srgb, var(--pp-text, #E8EDF5) 8%, transparent) !important;
  border: 1px solid var(--pp-border, #28323F) !important;
  box-shadow: none !important;
  color: var(--pp-text, #E8EDF5) !important;
}
/* Les pastilles vertes et bleues gardent leur fond clair : leur texte sombre y
   reste lisible, c'est leur code couleur qui porte l'information. */
#verify-result-modal .vr-badge.ok,
#verify-result-modal .vr-badge.cat{ box-shadow: none !important; }
#verify-result-modal .vr-descbox{
  background: color-mix(in srgb, var(--pp-text, #E8EDF5) 4%, transparent) !important;
  border: 1px solid var(--pp-border, #28323F) !important;
  box-shadow: none !important;
}

/* Cases a cocher : laissees au rendu natif, elles apparaissaient en carre gris
   clair, seul element non traite du panneau. */
.glass-panel input[type="checkbox"],
.glass-panel input[type="radio"]{
  accent-color: var(--pp-accent, #2FD48F);
}
.glass-panel input[type="checkbox"]:disabled{ opacity: .55; }