/*
 * _components/pz-order-modal.css
 * Modal "Commander" — affiche téléphone + adresse + horaires.
 * Système : pz. Convention BEM stricte.
 */

.pz-order-modal {
  display: none;
  position: fixed;
  inset: 0;
  /* Au-dessus de tout : sticky-cta (z-toast=120), nav, etc.
   * Le ramp z-index canonique est en pz-theme.css mais le modal Commander
   * doit dominer pendant son ouverture. */
  z-index: 9999;
  align-items: center;
  justify-content: center;
  padding: var(--pz-sp-4, 24px);
  background: rgba(10, 9, 8, 0.74);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  animation: pz-order-modal-fade 220ms var(--pz-ease-out) both;
}
.pz-order-modal.is-open { display: flex; }

/* Quand le modal est ouvert, masquer les overlays bas (sticky-cta) et
 * empêcher le scroll body. Évite le liseret 1px du sticky-cta qui restait
 * visible par-dessus l'overlay malgré sa transformation translateY(100%). */
body[data-pz-modal-open] .pz-sticky-cta {
  display: none !important;
}
body[data-pz-modal-open] {
  overflow: hidden;
  /* Compense le scrollbar disparu pour éviter le décalage horizontal +
   * le liseret 1px à droite. */
  scrollbar-gutter: stable;
}

@keyframes pz-order-modal-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.pz-order-modal__dialog {
  background: var(--pz-ivory, #fbf6ec);
  color: var(--pz-ink, #0a0908);
  border-radius: var(--pz-radius-lg, 16px);
  max-width: 520px;
  width: 100%;
  padding: var(--pz-sp-5, 34px);
  position: relative;
  box-shadow: var(--pz-shadow-xl, 0 36px 96px rgba(0, 0, 0, 0.45));
  border: 1px solid var(--pz-cream, #ede0c4);
  animation: pz-order-modal-rise 320ms var(--pz-ease-phi) both;
}

@keyframes pz-order-modal-rise {
  from { opacity: 0; transform: translateY(20px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.pz-order-modal__close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--pz-cream, #ede0c4);
  background: transparent;
  color: var(--pz-ink, #0a0908);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background var(--pz-t-quick, 180ms), border-color var(--pz-t-quick, 180ms);
}
.pz-order-modal__close:hover {
  background: var(--pz-cream, #ede0c4);
  border-color: var(--pz-gold, #c9a14a);
}

.pz-order-modal__eyebrow {
  font-family: var(--pz-font-mono, 'JetBrains Mono', monospace);
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--pz-gold, #c9a14a);
  margin-bottom: var(--pz-sp-2, 8px);
}

.pz-order-modal__title {
  font-family: var(--pz-font-display, 'Cormorant Garamond', serif);
  font-size: clamp(1.6rem, 4vw, 2.2rem);
  font-weight: 600;
  line-height: 1.15;
  margin-bottom: var(--pz-sp-4, 21px);
  color: var(--pz-ink, #0a0908);
}

.pz-order-modal__phone {
  display: flex;
  align-items: center;
  gap: var(--pz-sp-3, 13px);
  padding: var(--pz-sp-3, 13px) var(--pz-sp-4, 21px);
  background: var(--pz-red, #b3001b);
  color: var(--pz-ivory, #fbf6ec);
  border-radius: var(--pz-radius, 10px);
  text-decoration: none;
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  margin-bottom: var(--pz-sp-4, 21px);
  transition: background var(--pz-t-quick, 180ms), transform var(--pz-t-quick, 180ms);
  box-shadow: var(--pz-shadow-md, 0 6px 20px rgba(0, 0, 0, 0.18));
}
.pz-order-modal__phone:hover {
  background: var(--pz-red-2, #8a0014);
  transform: translateY(-1px);
}
.pz-order-modal__phone-icon { font-size: 1.5rem; line-height: 1; }

.pz-order-modal__meta {
  display: grid;
  gap: var(--pz-sp-3, 13px);
  padding-top: var(--pz-sp-3, 13px);
  border-top: 1px dashed var(--pz-cream, #ede0c4);
}
.pz-order-modal__meta-item {
  display: flex;
  align-items: flex-start;
  gap: var(--pz-sp-2, 8px);
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--pz-ink-2, #16140f);
}
.pz-order-modal__meta-icon {
  flex-shrink: 0;
  color: var(--pz-gold, #c9a14a);
  margin-top: 2px;
}

.pz-order-modal__hint {
  margin-top: var(--pz-sp-3, 13px);
  font-size: 0.78rem;
  color: var(--pz-ink, #0a0908);
  opacity: 0.6;
  text-align: center;
  font-style: italic;
}

/* ── Opening status — affichage dynamique du prochain créneau ─────── */
.pz-order-modal__opening { line-height: 1.5; }
.pz-order-modal__opening-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 6px;
}
.pz-order-modal__opening-dot--open {
  background: #87cf87;
  box-shadow: 0 0 8px rgba(135, 207, 135, 0.55);
}
.pz-order-modal__opening-dot--countdown {
  background: var(--pz-gold, #c9a14a);
  box-shadow: 0 0 8px var(--pz-gold-glow, rgba(201, 161, 74, 0.45));
}
.pz-order-modal__opening-dot--closed {
  background: var(--pz-red, #b3001b);
  box-shadow: 0 0 8px var(--pz-red-glow, rgba(179, 0, 27, 0.45));
}
.pz-order-modal__countdown {
  display: inline-block;
  padding: 1px 8px;
  margin: 0 2px;
  background: var(--pz-ink, #0a0908);
  color: var(--pz-gold-3, #e6c878);
  border-radius: var(--pz-radius-sm, 6px);
  font-family: var(--pz-font-mono, 'JetBrains Mono', monospace);
  font-weight: 700;
  font-size: 0.92rem;
  letter-spacing: 0.02em;
}

@media (max-width: 540px) {
  .pz-order-modal__dialog { padding: var(--pz-sp-4, 21px); }
  .pz-order-modal__phone { font-size: 1.2rem; }
}

/* ─ tel: visibility per device ─────────────────────────────────────
 * Desktop : show button that opens modal. Mobile : show native tel: link.
 * Convention : Vincent veut que `tel:` ne soit utilisé QUE sur téléphone.
 * Double classe `.topbar__item.topbar__item--*` pour battre la spécificité
 * du `.topbar__item { display: inline-flex }` défini en patterns. */
.topbar__item.topbar__item--desktop-only { display: inline-flex; }
.topbar__item.topbar__item--mobile-only  { display: none; }
@media (max-width: 768px) {
  .topbar__item.topbar__item--desktop-only { display: none; }
  .topbar__item.topbar__item--mobile-only  { display: inline-flex; }
}
/* Reset button to look like the anchor topbar item */
button.topbar__item {
  background: transparent;
  border: none;
  font: inherit;
  cursor: pointer;
  padding: 0;
}
/* navbar-cta as button vs anchor — keep same look */
button.navbar-cta {
  font-family: inherit;
  cursor: pointer;
}