/**
 * ===========================================
 * TICKET CART - STYLES BILLETTERIE PARTAGÉS
 * ===========================================
 * Extrait de matching/template-0/assets/css/style.css. Chargé par les templates
 * `matching` et `ticketing`, APRÈS style.css et responsive.css.
 * Voir /shared/tickets/ticket-cart.js et /shared/tickets/ticket-holders.js.
 */

/* --- Lignes titulaires, étape 1 ------------------------------------------ */

/* ticket-holders-row: la largeur des colonnes du tableau est déjà figée via
   table-layout:fixed + width explicite sur les <th> dans le template.
   overflow:hidden empêche la grille de déborder hors du <td>. */
.ticket-holders-row > td {
  overflow: hidden;
}

.ticket-holders-container {
  overflow: hidden;
}

/* Ticket holder rows */
.ticket-holder-grid {
  display: grid;
  align-items: center;
  gap: 8px;
}

.ticket-header-actions {
  display: flex;
  flex-wrap: nowrap;
  gap: 6px;
  margin-bottom: 5px;
  align-items: center;
  justify-content: center;
  min-width: 0;
}

.ticket-plan-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  font-weight: 700;
  color: var(--theme_color, #6b48ff);
  background: none;
  border: 1.5px solid var(--theme_color, #6b48ff);
  border-radius: 4px;
  padding: 3px 8px;
  cursor: pointer;
  white-space: nowrap;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  transition: background 0.15s, color 0.15s;
  flex-shrink: 0;
}

.ticket-plan-btn:hover {
  background: var(--theme_color, #6b48ff);
  color: #fff;
}

.ticket-auto-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  font-weight: 700;
  color: var(--theme_color, #6b48ff);
  background: none;
  border: 1.5px solid var(--theme_color, #6b48ff);
  border-radius: 4px;
  padding: 3px 8px;
  cursor: pointer;
  white-space: nowrap;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  transition: background 0.15s, color 0.15s;
  flex-shrink: 0;
}

.ticket-auto-btn svg {
  flex-shrink: 0;
}

.ticket-auto-btn:hover {
  background: var(--theme_color, #6b48ff);
  color: #fff;
}

.ticket-feedback {
  font-size: 11px;
  font-weight: 600;
  padding: 4px 8px;
  border-radius: 3px;
  text-align: center;
  margin-top: 6px;
}

.ticket-feedback:empty {
  display: none;
}

.ticket-feedback.is-success {
  color: #0a7c3f;
  background: #e8f6ee;
}

.ticket-feedback.is-error {
  color: #b02a37;
  background: #fbeaec;
}

/* Ticket plan overlay — above .modal { z-index: 999999999 } in this file */
.ticket-plan-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.78);
  z-index: 9999999999 !important;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  box-sizing: border-box;
}

.ticket-plan-modal {
  position: relative;
  z-index: 1;
  background: #fff;
  border-radius: 12px;
  padding: 36px 20px 20px;
  max-width: min(90vw, 820px);
  max-height: 88vh;
  overflow: auto;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.45);
}

.ticket-plan-close {
  position: absolute;
  top: 8px;
  right: 14px;
  background: none;
  border: none;
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
  color: #888;
  padding: 0;
}

.ticket-plan-close:hover { color: #333; }

.ticket-plan-img {
  display: block;
  max-width: 100%;
  height: auto;
}

.ticket-holder-header-cell {
  padding: 6px 6px 4px;
  background-color: #f8f6ff;
  border-top: 2px solid #ede9ff;
}

.ticket-holder-container-cell {
  padding: 0 6px 8px;
  background-color: #f8f6ff;
}

.ticket-holder-scroll {
  max-height: 220px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--theme_color) #ede9ff;
}

.ticket-holder-scroll::-webkit-scrollbar {
  width: 4px;
}

.ticket-holder-scroll::-webkit-scrollbar-track {
  background: #ede9ff;
  border-radius: 2px;
}

.ticket-holder-scroll::-webkit-scrollbar-thumb {
  background: var(--theme_color);
  border-radius: 2px;
}

/* Lignes alternées plutôt que des séparateurs — plus lisible sur plusieurs billets */
/* was: border-top: 1px solid #6c6c6c; + .ticket-holder-item:first-child { border-top: none } */
.ticket-holder-item {
  padding: 6px 4px;
}

.ticket-holder-item:nth-child(odd) {
  background: #fff;
}

.ticket-holder-item:nth-child(even) {
  background: #f1eeff;
}

.ticket-holder-item:first-child {
  border-radius: 6px 6px 0 0;
}

.ticket-holder-item:last-child {
  border-radius: 0 0 6px 6px;
}

.ticket-col-label {
  font-size: 10px;
  font-weight: 700;
  color: var(--theme_color);
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.ticket-info-label {
  font-size: 10px;
  font-weight: 700;
  color: #888;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.ticket-delete-btn {
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  justify-self: center;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  color: #ccc;
  border-radius: 4px;
  transition: color 0.15s;
  flex-shrink: 0;
}

.ticket-delete-btn:hover {
  color: #dc3545;
}

.ticket-field {
  border: 1px solid #d4caff;
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 13px;
  background: #fff;
  color: #333;
  width: 100%;
  box-sizing: border-box;
  min-width: 0;
}

.ticket-field:focus {
  border-color: var(--theme_color);
  box-shadow: 0 0 0 2px rgba(166, 95, 255, 0.12);
  outline: none;
}

.ticket-identifier {
  cursor: pointer;
}

.ticket-field.is-invalid {
  border-color: #dc3545;
  box-shadow: 0 0 0 2px rgba(220, 53, 69, 0.15);
}

.ticket-identifier option:disabled {
  color: #bbb;
}

/* Mobile: hide labels row, wrap fields to 3-per-line under the trash button.
   4th and 5th fields (when required) wrap to a new line automatically. */
@media (max-width: 480px) {
  .ticket-holder-header-cell > .ticket-holder-grid {
    display: none;
  }

  .ticket-holder-item .ticket-holder-grid {
    display: flex !important;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
  }

  .ticket-holder-item .ticket-delete-btn {
    flex: 0 0 24px;
  }

  .ticket-holder-item .ticket-field {
    flex: 1 1 calc((100% - 24px - 4 * 6px) / 3);
    min-width: 0;
  }
}

/* --- Récapitulatif de l'écran de remerciement ---------------------------- */

/* Récapitulatif des places acquises, écran de remerciement */
.thanks-tickets-section {
  margin: 0 0 20px;
  padding: 14px 18px;
  background: #faf9ff;
  border: 1px solid #ede9ff;
  border-radius: 10px;
  text-align: left;
}

/* Spécificité renforcée : le modal de remerciement centre ses <p> */
.thanks-tickets-section .thanks-tickets-title {
  margin: 0 0 8px;
  font-size: 11px;
  font-weight: 700;
  color: #888;
  text-align: left;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

/* Un bloc par produit billet. Le premier colle au titre, les suivants sont
   séparés par un filet pour qu'on voie où commence le produit suivant. */
.thanks-ticket-group + .thanks-ticket-group {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid #ded6ff;
}

/* Spécificité renforcée : le modal de remerciement centre ses <p> */
/* was: nom puis « × N » poussés aux deux bords par space-between.
   Le compteur passe devant le nom, les deux collés à gauche. */
.thanks-tickets-section .thanks-ticket-product {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 0 0 4px;
  font-size: 14px;
  font-weight: 600;
  color: #333;
  text-align: left;
}

.thanks-tickets-section .thanks-ticket-count {
  flex: 0 0 auto;
  font-weight: 700;
  color: var(--theme_color, #6c5ce7);
}

.thanks-tickets-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.thanks-ticket {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 0;
  border-top: 1px solid #ede9ff;
}

.thanks-ticket:first-child {
  border-top: none;
}

/* Spécificité renforcée : le modal de remerciement impose sa couleur et sa taille aux <span> */
.thanks-tickets-section .thanks-ticket-holder {
  font-size: 14px;
  color: #333;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.thanks-tickets-section .thanks-ticket-id {
  flex: 0 0 auto;
  padding: 3px 12px;
  border-radius: 20px;
  background: var(--theme_color, #6c5ce7);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.3px;
  line-height: 1.4;
}

/* --- Places prises entre la sélection et le paiement --------------------- */

/* Places prises entre la sélection et le paiement : avertissement, pas erreur de paiement */
.summary-items-warning {
  background: #fff8e1;
  border: 1px solid #f0c96b;
  border-radius: 8px;
  color: #8a6100;
  font-size: 13px;
  line-height: 1.5;
  padding: 10px 12px;
  margin-bottom: 10px;
}

#summary-items-section.has-ticket-conflict .pd-accordion-header {
  background: #fff8e1;
  color: #8a6100;
}

/* Mode lecture seule du composant titulaires : même gabarit que .ticket-field,
   sans le cadre ni le fond d'un champ saisissable */
.ticket-field-text {
  border-color: transparent;
  background: transparent;
  display: block;
  text-align: center; /* aligné sur .ticket-info-label, qui est centré */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Place à rechoisir : le select reprend le style .ticket-field, teinté en ambre */
.ticket-holder-item.is-conflict .ticket-identifier {
  border-color: #f0c96b;
  background: #fff8e1;
}

.ticket-holder-item.is-conflict .ticket-identifier:focus {
  border-color: #d9a520;
  box-shadow: 0 0 0 2px rgba(217, 165, 32, 0.15);
}