/* Widget "Commander" — charte graphique My Wok, dimensions et forme du
   popup calquées sur celui de tutti-pizza.com (carte blanche très arrondie,
   généreusement espacée, bouton de fermeture circulaire flottant sur le
   coin, titre en badge incliné). Valeurs extraites du CSS réel de
   tutti-pizza.com (élément #brxe-wgoxzg et ses points de rupture). */

/* Si ce fichier est chargé DIRECTEMENT sur my-wok.com, supprimez la ligne
   @import ci-dessous : le site charge déjà Corben / Amatic SC / Roboto
   Condensed en polices auto-hébergées (YOOtheme), ce fallback Google Fonts
   ne sert que pour prévisualiser le popup hors du site my-wok.com. */
@import url("https://fonts.googleapis.com/css2?family=Corben:wght@400;700&family=Roboto+Condensed:wght@400;700&family=Amatic+SC:wght@400;700&display=swap");

:root {
  --cop-primary: #8fc63c;   /* vert — CTA, badge, bouton fermer */
  --cop-primary-dark: #7aa833;
  --cop-accent: #8fc63c;    /* vert — accents (headings, survol, téléphone) */
  --cop-text: #311718;      /* marron foncé — texte, badge titre */
  --cop-muted: #947e6e;
  --cop-bg: #fff;
  --cop-bg-muted: #f6e5c5;  /* beige */
  --cop-border: #ddceb1;
  --cop-radius: 0px;        /* boutons à angles droits, comme sur my-wok.com */
  --cop-font-heading: "Corben", georgia, serif;
  --cop-font-body: "Roboto Condensed", arial, sans-serif;
  --cop-font-accent: "Amatic SC", sans-serif;

  /* Forme de la carte popup (identique à tutti-pizza.com) */
  --cop-card-radius: 50px;
  --cop-card-pad-v: 80px;
  --cop-card-pad-h: 80px;
  --cop-card-max-width: 1270px;
}

.cop-no-scroll {
  overflow: hidden;
}

.cop-overlay {
  position: fixed;
  inset: 0;
  background: rgb(48 22 24 / 60%);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease;
  padding: 24px;
}

@media (width <= 575px) {
  .cop-overlay { padding: 10px; }
}

.cop-overlay-open {
  opacity: 1;
  visibility: visible;
}

/* La carte porte elle-même le padding/rayon/largeur (comme #brxe-wgoxzg sur
   tutti-pizza.com). Pas d'overflow:hidden ici : le bouton fermer flotte
   volontairement en dehors du coin, et rien ne doit jamais être rogné
   (notamment la liste de suggestions d'adresse de l'étape 1). */

/* display:flex + une chaîne flex:1/min-height:0 jusqu'à .cop-scroll-area
   (voir plus bas) : c'est ce qui empêche la liste de déborder de la carte
   en bas — le modal reste capé à max-height, et c'est .cop-scroll-area
   qui absorbe l'excédent avec son propre défilement interne, jamais le
   modal lui-même (qui reste overflow:visible pour ne rien rogner). */
.cop-modal {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--cop-bg);
  color: var(--cop-text);
  width: 100%;
  max-width: var(--cop-card-max-width);
  max-height: 88vh;
  border-radius: var(--cop-card-radius);
  padding: var(--cop-card-pad-v) var(--cop-card-pad-h);
  box-shadow: 0 30px 80px rgb(48 22 24 / 35%);
  transform: translateY(12px);
  transition: transform 0.2s ease;
  font-family: var(--cop-font-body);
}

.cop-overlay-open .cop-modal {
  transform: translateY(0);
}

/* Points de rupture repris de tutti-pizza.com (#brxe-wgoxzg) */
@media (width <= 1399px) {
  .cop-modal { padding: 64px var(--cop-card-pad-h); }
}

@media (width <= 1199px) {
  .cop-modal {
    --cop-card-radius: 30px;

    padding: 64px 48px;
    max-width: 95vw;
  }
}

@media (width <= 991px) {
  .cop-modal {
    --cop-card-radius: 24px;

    padding: 48px 32px;
    max-width: 80%;
  }
}

@media (width <= 767px) {
  .cop-modal {
    --cop-card-radius: 16px;

    padding: 40px 24px;
    max-width: calc(100% - 24px);
  }
}

@media (width <= 575px) {
  .cop-modal {
    padding: 28px 14px;
    max-width: 100%;
    max-height: 94vh;
  }
}

/* Bouton fermer : cercle qui flotte sur le coin supérieur droit de la
   carte, à cheval sur le bord — même traitement que tutti-pizza.com. */
.cop-close {
  position: absolute;
  top: -12px;
  right: -12px;
  width: 50px;
  height: 50px;
  border: none;
  border-radius: 50%;
  background: var(--cop-primary);
  color: #fff;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  z-index: 3;
  box-shadow: 0 6px 16px rgb(48 22 24 / 25%);
  transition: background-color 0.15s ease, color 0.15s ease;
}

.cop-close:hover {
  background: var(--cop-text);
  color: var(--cop-primary);
}

@media (width <= 767px) {
  .cop-close {
    top: -10px;
    right: -10px;
    width: 40px;
    height: 40px;
    font-size: 18px;
  }
}

.cop-header {
  flex: 0 0 auto;
  text-align: center;
  margin-bottom: 24px;
}

@media (width <= 575px) {
  .cop-header { margin-bottom: 14px; }
}

/* Badge "Commander" incliné, comme le titre de la popup tutti-pizza.com */
.cop-badge-title {
  display: inline-flex;
  transform: rotateZ(-4deg);
  background: var(--cop-text);
  color: var(--cop-primary);
  font-family: var(--cop-font-heading);
  font-weight: 700;
  font-size: 34px;
  padding: 10px 18px;
  margin-bottom: 12px;
}

@media (width <= 1399px) { .cop-badge-title { font-size: 32px; } }

@media (width <= 1199px) { .cop-badge-title { font-size: 30px; } }

@media (width <= 991px)  { .cop-badge-title { font-size: 25px; } }

@media (width <= 767px)  { .cop-badge-title { font-size: 20px; } }

@media (width <= 575px)  {
  .cop-badge-title {
    font-size: 16px;
    padding: 6px 12px;
  }
}

.cop-header h2 {
  margin: 0;
  font-family: var(--cop-font-heading);
  font-weight: 700;
  font-size: 30px;
  color: var(--cop-accent);
}

@media (width <= 767px) { .cop-header h2 { font-size: 24px; } }

@media (width <= 575px) { .cop-header h2 { font-size: 20px; } }

.cop-steps {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 16px;
}

.cop-step-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--cop-border);
}

.cop-step-active {
  background: var(--cop-primary);
}

.cop-body {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}

.cop-panel {
  display: none;
}

.cop-panel-active {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}

.cop-lead {
  flex: 0 0 auto;
  margin: 0 0 20px;
  color: var(--cop-text);
  font-family: var(--cop-font-body);
  font-weight: 700;
  font-size: 21px;
  text-align: center;
}

@media (width <= 1399px) { .cop-lead { font-size: 19px; } }

@media (width <= 1199px) { .cop-lead { font-size: 18px; } }

@media (width <= 991px)  { .cop-lead { font-size: 16px; } }

@media (width <= 767px)  { .cop-lead { font-size: 14px; } }

.cop-search-inner {
  flex: 0 0 auto;
  max-width: 420px;
  width: 100%;
  margin: 0 auto;
}

.cop-geoloc-btn {
  width: 100%;
  padding: 14px;
  border: none;
  border-radius: var(--cop-radius);
  background: var(--cop-primary);
  color: #fff;
  font-family: var(--cop-font-body);
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.cop-geoloc-btn:hover {
  background: var(--cop-primary-dark);
}

.cop-divider {
  display: flex;
  align-items: center;
  text-align: center;
  color: var(--cop-muted);
  font-family: var(--cop-font-accent);
  font-size: 18px;
  margin: 14px 0;
}

.cop-divider::before,
.cop-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--cop-border);
}

.cop-divider span {
  padding: 0 12px;
}

.cop-address-form {
  position: relative;
}

.cop-address-input {
  width: 100%;
  padding: 12px 14px;
  border: 2px solid var(--cop-border);
  border-radius: var(--cop-radius);
  font-family: var(--cop-font-body);
  font-size: 15px;
  box-sizing: border-box;
}

.cop-address-input:focus {
  outline: none;
  border-color: var(--cop-primary);
}

/* Suggestions d'adresse : l'étape 1 n'a elle-même aucun overflow ni
   hauteur limitée (ni le modal, ni le body), donc cette liste s'affiche
   toujours en entier, bien visible à l'intérieur du cadre du popup. */
.cop-autocomplete-results {
  list-style: none;
  margin: 4px 0 0;
  padding: 4px;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--cop-bg);
  border: 2px solid var(--cop-primary);
  box-shadow: 0 10px 24px rgb(48 22 24 / 18%);
  max-height: 220px;
  overflow-y: auto;
  z-index: 5;
}

.cop-autocomplete-item {
  padding: 10px;
  cursor: pointer;
  font-size: 14px;
  border-bottom: 1px solid var(--cop-border);
}

.cop-autocomplete-item:last-child {
  border-bottom: none;
}

.cop-autocomplete-item:hover {
  background: var(--cop-bg-muted);
  color: var(--cop-accent);
}

.cop-submit-btn {
  width: 100%;
  margin-top: 12px;
  padding: 12px;
  border: none;
  border-radius: var(--cop-radius);
  background: var(--cop-text);
  color: #fff;
  font-family: var(--cop-font-body);
  font-weight: 700;
  cursor: pointer;
}

.cop-submit-btn:hover {
  background: var(--cop-accent);
}

.cop-error {
  color: var(--cop-accent);
  font-size: 13px;
  margin: 12px 0 0;
  text-align: center;
  min-height: 1em;
}

.cop-back-btn {
  display: block;
  flex: 0 0 auto;
  border: none;
  background: none;
  color: var(--cop-accent);
  font-family: var(--cop-font-accent);
  font-size: 20px;
  cursor: pointer;
  padding: 4px 0 10px;
  margin: 0 auto 4px;
  text-align: center;
}

.cop-back-btn:hover {
  text-decoration: underline;
}

/* Seule cette zone défile, avec exactement l'espace restant dans la carte
   (flex:1 + min-height:0 dans la chaîne .cop-modal > .cop-body >
   .cop-panel-active > .cop-scroll-area) : la liste ne peut donc plus
   déborder de la carte, quelle que soit sa longueur ou la hauteur de
   l'écran — elle défile toujours à l'intérieur du popup. */
.cop-scroll-area {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 4px;
}

/* La carte étant désormais large (jusqu'à 1270px, comme sur
   tutti-pizza.com), les résultats s'organisent en grille responsive
   plutôt qu'en simple liste verticale. */
.cop-restaurant-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
}

@media (width <= 575px) {
  /* Sur très petit écran, une carte de 260px minimum peut dépasser la
     largeur disponible : on force une seule colonne pleine largeur. */
  .cop-restaurant-list {
    grid-template-columns: 1fr;
    gap: 12px;
  }
}

.cop-mode-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
  max-width: 500px;
  margin: 0 auto;
}

.cop-restaurant-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  text-align: left;
  border: 1px solid var(--cop-border);
  border-radius: var(--cop-radius);
  padding: 12px;
  background: var(--cop-bg);
  cursor: pointer;
  font-family: inherit;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.cop-restaurant-card:hover,
.cop-restaurant-card:focus-visible {
  border-color: var(--cop-primary);
  box-shadow: 0 4px 14px rgb(48 22 24 / 10%);
}

.cop-restaurant-card:focus-visible {
  outline: 2px solid var(--cop-primary);
  outline-offset: 2px;
}

/* Restaurant sans lien de commande en ligne : carte purement informative,
   pas d'affordance de clic (le numéro de téléphone reste cliquable). */
.cop-restaurant-card-static {
  cursor: default;
}

.cop-restaurant-card-static:hover,
.cop-restaurant-card-static:focus-visible {
  border-color: var(--cop-border);
  box-shadow: none;
}

.cop-restaurant-img {
  width: 100%;
  height: 120px;
  border-radius: var(--cop-radius);
  object-fit: cover;
  flex-shrink: 0;
  background: var(--cop-bg-muted);
}

.cop-restaurant-info {
  flex: 1;
  min-width: 0;
}

.cop-restaurant-top {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: baseline;
}

.cop-restaurant-name {
  font-family: var(--cop-font-heading);
  font-weight: 700;
  font-size: 16px;
  color: var(--cop-accent);
}

.cop-restaurant-distance {
  font-size: 13px;
  font-weight: 700;
  color: var(--cop-accent);
  white-space: nowrap;
}

.cop-restaurant-address {
  font-size: 13px;
  color: var(--cop-muted);
  margin-top: 2px;
}

.cop-restaurant-services {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.cop-service-badge {
  font-size: 11px;
  font-weight: 700;
  color: var(--cop-text);
  background: var(--cop-bg-muted);
  border-radius: 999px;
  padding: 3px 10px;
  white-space: nowrap;
}

.cop-restaurant-meta {
  margin-top: 8px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 13px;
}

.cop-restaurant-hours {
  color: var(--cop-muted);
}

.cop-restaurant-phone {
  color: var(--cop-accent);
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}

.cop-restaurant-phone:hover {
  text-decoration: underline;
}

.cop-restaurant-summary {
  flex: 0 0 auto;
  display: flex;
  gap: 12px;
  align-items: center;
  border: 1px solid var(--cop-border);
  border-radius: var(--cop-radius);
  padding: 10px;
  margin-bottom: 16px;
  max-width: 420px;
  margin-left: auto;
  margin-right: auto;
}

.cop-restaurant-summary .cop-restaurant-img {
  width: 56px;
  height: 56px;
}

.cop-mode-btn {
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: 14px;
  border-radius: var(--cop-radius);
  border: 2px solid var(--cop-primary);
  background: var(--cop-primary);
  color: #fff;
  font-family: var(--cop-font-body);
  font-weight: 700;
  font-size: 15px;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}

.cop-mode-btn:hover {
  background: var(--cop-primary-dark);
  border-color: var(--cop-primary-dark);
}

/* Uber Eats / Deliveroo : boutons secondaires (sortie vers une plateforme
   tierce), visuellement distincts de la livraison/vente directe. */
.cop-mode-btn.cop-mode-ubereats,
.cop-mode-btn.cop-mode-deliveroo {
  background: var(--cop-bg);
  color: var(--cop-text);
  border-color: var(--cop-border);
}

.cop-mode-btn.cop-mode-ubereats:hover,
.cop-mode-btn.cop-mode-deliveroo:hover {
  border-color: var(--cop-accent);
  color: var(--cop-accent);
  background: var(--cop-bg);
}

.cop-loader {
  position: absolute;
  inset: 0;
  background: rgb(255 255 255 / 80%);
  display: flex;
  align-items: center;
  justify-content: center;
}

.cop-loader[hidden] {
  display: none;
}

.cop-spinner {
  width: 32px;
  height: 32px;
  border: 3px solid var(--cop-border);
  border-top-color: var(--cop-primary);
  border-radius: 50%;
  animation: cop-spin 0.7s linear infinite;
}

@keyframes cop-spin {
  to {
    transform: rotate(360deg);
  }
}

/* Le popup reste volontairement toujours en thème clair (fond blanc), y
   compris quand le système est en dark mode : sur fond sombre, le vert
   d'accent perdait en lisibilité. */