/* =====================================================
   BOOKING PAGE — MOBILE REDESIGN
   À ajouter dans un <style> à la fin du fichier Twig,
   juste avant la balise </style> fermante (ou après).
   ===================================================== */

/* ── Variables locales ──────────────────────────────────────────────────── */
:root {
    --drawer-width: 340px;
    --drawer-tab-width: 36px;
    --drawer-accent: #6284e0;
    --drawer-accent-dark: #5773c0;
    --drawer-transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── Wrapper principal ──────────────────────────────────────────────────── */
#selection-drawer {
    position: fixed;
    top: 0;
    right: 0;
    height: 100vh;
    z-index: 999;
    display: flex;
    align-items: stretch;
    pointer-events: none; /* Évite les interférences quand fermé */
}

#selection-drawer.drawer-visible {
    pointer-events: auto;
}

/* ── Onglet déclencheur ─────────────────────────────────────────────────── */
#drawer-toggle-btn {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: var(--drawer-tab-width);
    height: 72px;
    background: var(--drawer-accent);
    border: none;
    border-radius: 10px 0 0 10px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    color: white;
    box-shadow: -2px 0 12px rgba(0,0,0,0.15);
    transition: background var(--drawer-transition), transform var(--drawer-transition);
    pointer-events: auto;
    z-index: 1000;
}

#drawer-toggle-btn:hover {
    background: var(--drawer-accent-dark);
}

/* Badge nombre de services */
#drawer-tab-badge {
    background: white;
    color: var(--drawer-accent);
    border-radius: 50%;
    width: 18px;
    height: 18px;
    font-size: 11px;
    font-weight: 800;
    line-height: 18px;
    text-align: center;
}

/* Rotation de la flèche quand ouvert */
#selection-drawer.drawer-open #drawer-tab-icon {
    transform: rotate(180deg);
}

#drawer-tab-icon {
    transition: transform var(--drawer-transition);
}

/* ── Panneau principal ──────────────────────────────────────────────────── */
#drawer-panel {
    width: var(--drawer-width);
    height: 100%;
    background: white;
    border-left: 2px solid var(--drawer-accent);
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform var(--drawer-transition);
    box-shadow: -4px 0 24px rgba(0,0,0,0.12);
    position: relative;
    right: 0;
}

#selection-drawer.drawer-open #drawer-panel {
    transform: translateX(0);
}

/* ── En-tête drawer ─────────────────────────────────────────────────────── */
#drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 20px 16px;
    border-bottom: 2px solid #f3f4f6;
    flex-shrink: 0;
}

#drawer-title-text {
    font-size: 16px;
    font-weight: 800;
    color: #2d3748;
}

#drawer-close-btn {
    background: none;
    border: none;
    color: #9ca3af;
    cursor: pointer;
    padding: 6px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

#drawer-close-btn:hover {
    background: #f3f4f6;
    color: #4a5568;
}

/* ── Corps scrollable ───────────────────────────────────────────────────── */
#drawer-body {
    flex: 1;
    overflow-y: auto;
    padding: 16px 20px;
    scrollbar-width: thin;
    scrollbar-color: #e2e8f0 transparent;
}

#drawer-body::-webkit-scrollbar { width: 4px; }
#drawer-body::-webkit-scrollbar-thumb { background: #e2e8f0; border-radius: 4px; }

/* État vide */
#drawer-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    min-height: 160px;
    text-align: center;
    color: #9ca3af;
    font-size: 14px;
}

#drawer-empty-state p { margin: 0; }

/* Ligne de service */
.drawer-service-item {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 12px;
    background: #f7fafc;
    border-radius: 10px;
    margin-bottom: 8px;
}

.drawer-service-item:last-child { margin-bottom: 0; }

.drawer-service-name {
    font-weight: 700;
    color: #2d3748;
    font-size: 14px;
    margin-bottom: 2px;
}

.drawer-service-dur {
    font-size: 12px;
    color: #718096;
}

.drawer-service-price {
    font-weight: 800;
    color: var(--drawer-accent);
    font-size: 15px;
    white-space: nowrap;
    padding-left: 8px;
}

/* ── Pied de page ───────────────────────────────────────────────────────── */
#drawer-footer {
    padding: 16px 20px;
    border-top: 2px solid #f3f4f6;
    flex-shrink: 0;
    background: #fafafa;
}

.drawer-total-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.drawer-total-label {
    font-weight: 600;
    color: #4a5568;
    font-size: 14px;
}

.drawer-total-value {
    font-weight: 700;
    font-size: 15px;
}

.drawer-total-duration-value { color: #3b82f6; }
.drawer-total-price-value    { color: #10b981; font-size: 20px; font-weight: 900; }

/* Bloc réduction */
#drawer-discount-block {
    margin-bottom: 12px;
    padding: 10px 14px;
    background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
    border-radius: 10px;
    border: 2px solid #6ee7b7;
}

.drawer-discount-name   { font-size: 13px; font-weight: 700; color: #065f46; }
.drawer-discount-amount { font-size: 12px; color: #047857; margin-top: 2px; }

/* Bloc acompte */
#drawer-deposit-block {
    margin-bottom: 12px;
    padding: 14px;
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    border-radius: 10px;
    border: 2px solid #f59e0b;
}

.drawer-deposit-label  { font-weight: 700; color: #92400e; font-size: 14px; }
.drawer-deposit-amount {
    font-size: 22px;
    font-weight: 900;
    color: #92400e;
    text-align: center;
    margin-top: 4px;
}

/* Bouton effacer */
#drawer-clear-btn {
    width: 100%;
    padding: 10px;
    border: 2px solid #ef4444;
    background: white;
    color: #ef4444;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    margin-top: 4px;
}

#drawer-clear-btn:hover {
    background: #fef2f2;
}

/* ── Overlay fond (optionnel, désactivable) ─────────────────────────────── */
#drawer-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.2);
    z-index: 998;
    backdrop-filter: blur(1px);
}

#drawer-overlay.active { display: block; }

/* ── Responsive : masqué sur mobile (géré par booking_mobile.css) ────────── */
@media (max-width: 768px) {
    #selection-drawer { display: none !important; }
}

@media (max-width: 768px) {

  /* ─────────────────────────────────────────────────────
     1. HERO — compact, sans padding excessif
  ───────────────────────────────────────────────────── */

  .hero-page.hero-purple {
    padding: 14px 16px 18px !important;
  }

  .hero-page.hero-purple .section_wrapper,
  .hero-page.hero-purple .items_group,
  .hero-page.hero-purple .column {
    padding: 0 !important;
    margin: 0 !important;
  }

  /* Lien retour — moins de marge */
  .hero-page.hero-purple a[href] {
    font-size: 13px !important;
    margin-bottom: 10px !important;
  }

  /* Titre principal — plus compact */
  .hero-page.hero-purple h1 {
    font-size: 22px !important;
    margin: 0 0 8px 0 !important;
    line-height: 1.2 !important;
  }

  /* Méta (ville + téléphone) */
  .hero-page.hero-purple p {
    font-size: 13px !important;
    margin: 0 !important;
  }

  /* ─────────────────────────────────────────────────────
     2. LAYOUT GÉNÉRAL — pleine largeur, moins de padding
  ───────────────────────────────────────────────────── */

  #Content .sections_group,
  #Content .section_wrapper,
  #Content .items_group,
  #Content .column.one {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Section fond gris — padding réduit */
  #Content .section[style*="padding: 60px"] {
    padding: 10px 0 20px !important;
  }

  /* ─────────────────────────────────────────────────────
     3. CARTES D'ÉTAPES — bords à bords, coins arrondis
  ───────────────────────────────────────────────────── */

  /* Wrapper blanc de chaque étape */
  #bookingForm > .items_group > .column > div[style*="background: white"][style*="border-radius: 16px"],
  #step2 > .column > div[style*="background: white"],
  #step3 > .column > div[style*="background: white"],
  #step4 > .column > div[style*="background: white"],
  #employee-selection > .column > div[style*="background: white"] {
    border-radius: 0 !important;
    padding: 16px !important;
    box-shadow: none !important;
    border-top: 0.5px solid #e2e8f0;
    border-bottom: 0.5px solid #e2e8f0;
  }

  /* Réduire l'espace entre étapes */
  #bookingForm > .items_group {
    margin-bottom: 0 !important;
  }

  /* ─────────────────────────────────────────────────────
     4. SERVICES UI — lignes pleine largeur (nouveau JS)
        Les cartes .service-card-row générées par le JS
  ───────────────────────────────────────────────────── */

  /* Wrapper global de l'UI services */
  #booking-services-wrapper {
    padding: 0 !important;
  }

  /* Header de l'étape 1 */
  #booking-services-wrapper .booking-step-header {
    padding: 14px 16px 10px !important;
    display: flex;
    align-items: center;
    gap: 10px;
    border-bottom: 0.5px solid #e2e8f0;
  }

  #booking-services-wrapper .booking-step-header h2 {
    font-size: 16px !important;
    font-weight: 600 !important;
    margin: 0 !important;
  }

  #booking-services-wrapper .booking-step-header .booking-step-hint {
    font-size: 12px !important;
    color: #718096;
    margin: 0 0 0 auto !important;
  }

  #booking-services-wrapper .booking-step-number {
    width: 26px !important;
    height: 26px !important;
    min-width: 26px;
    font-size: 13px !important;
    border-radius: 7px !important;
  }

  /* Pills des catégories — scrollable horizontal */
  #booking-categories-pills {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    gap: 8px !important;
    padding: 10px 16px !important;
    scrollbar-width: none !important;
    -webkit-overflow-scrolling: touch;
    border-bottom: 0.5px solid #e2e8f0;
  }

  #booking-categories-pills::-webkit-scrollbar {
    display: none;
  }

  .cat-pill {
    flex-shrink: 0 !important;
    padding: 6px 14px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    border-radius: 20px !important;
    white-space: nowrap;
  }

  .cat-pill.active {
    background: #fdf2f8 !important;
    color: #e91e63 !important;
    border: 1.5px solid #e91e63 !important;
  }

  .cat-pill.inactive {
    background: #f7fafc !important;
    color: #718096 !important;
    border: 1.5px solid #e2e8f0 !important;
  }

  /* Layout sidebar + contenu — passer en colonne */
  .booking-services-layout {
    display: flex !important;
    flex-direction: column !important;
  }

  /* Sidebar catégories — cachée sur mobile (remplacée par pills) */
  .booking-categories-sidebar {
    display: none !important;
  }

  /* Contenu des services — pleine largeur */
  .booking-services-content {
    width: 100% !important;
    padding: 0 !important;
  }

  /* Header de catégorie active */
  .active-category-header {
    padding: 8px 16px !important;
    font-size: 13px !important;
    font-weight: 600;
    color: #4a5568;
    display: flex;
    align-items: center;
    gap: 6px;
    background: #f7fafc;
    border-bottom: 0.5px solid #e2e8f0;
  }

  /* Grille des services → liste colonne */
  .services-grid-inner {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    padding: 0 !important;
  }

  /* ─────────────────────────────────────────────────────
     5. CARTES SERVICE (service-card-row) — lignes natives
  ───────────────────────────────────────────────────── */

  .service-card-row {
    border-radius: 0 !important;
    border-left: none !important;
    border-right: none !important;
    border-top: none !important;
    border-bottom: 0.5px solid #e2e8f0 !important;
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
  }

  .service-card-row:last-child {
    border-bottom: none !important;
  }

  .service-card-row.selected {
    background: #fdf2f8 !important;
    border-bottom-color: #f9a8d4 !important;
  }

  /* Inner wrapper */
  .service-card-row > div[style*="padding: 10px"] {
    padding: 12px 16px !important;
  }

  /* ─────────────────────────────────────────────────────
     6. BARRE DE SÉLECTION STICKY — footer de la carte
  ───────────────────────────────────────────────────── */

  #booking-selection-bar {
    position: sticky !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 100 !important;
    background: white !important;
    border-radius: 0 !important;
    border-top: 2px solid #e2e8f0 !important;
    border-left: none !important;
    border-right: none !important;
    border-bottom: none !important;
    padding: 12px 16px !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    box-shadow: 0 -4px 16px rgba(0,0,0,0.08) !important;
    gap: 12px !important;
  }

  #booking-selection-bar.has-selection {
    border-top-color: #f9a8d4 !important;
  }

  .selection-bar-left {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
  }

  #sbar-count {
    font-size: 13px !important;
    color: #718096;
    font-weight: 500;
  }

  #sbar-total {
    font-size: 18px !important;
    font-weight: 700 !important;
    color: #2d3748;
    gap: 8px;
  }

  #sbar-price {
    font-size: 18px;
    font-weight: 700;
    color: #e91e63;
  }

  .total-duration {
    font-size: 13px !important;
    color: #718096 !important;
    font-weight: 400 !important;
  }

  .selection-bar-right {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex-shrink: 0 !important;
  }

  #booking-clear-btn {
    display: none !important; /* visible only after selection via JS */
    padding: 9px 12px !important;
    font-size: 13px !important;
    background: #fef2f2 !important;
    color: #ef4444 !important;
    border: 1.5px solid #fecaca !important;
    border-radius: 10px !important;
  }

  #booking-clear-btn.visible {
    display: flex !important;
  }

  #booking-proceed-btn {
    padding: 10px 18px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    background: #e2e8f0 !important;
    color: #9ca3af !important;
    border: none !important;
    border-radius: 10px !important;
    white-space: nowrap !important;
    cursor: not-allowed !important;
    transition: all 0.2s ease !important;
  }

  #booking-proceed-btn.enabled {
    background: linear-gradient(135deg, #e91e63 0%, #c2185b 100%) !important;
    color: white !important;
    cursor: pointer !important;
    box-shadow: 0 4px 12px rgba(233, 30, 99, 0.3) !important;
  }

  /* ─────────────────────────────────────────────────────
     7. ÉTAPE 2 : CALENDRIER + CRÉNEAUX — colonne unique
  ───────────────────────────────────────────────────── */

  /* Grid 1fr 1fr → colonne */
  #step2 div[style*="grid-template-columns: 1fr 1fr"],
  #step2 > .column > div > div[style*="display: grid"] {
    display: flex !important;
    flex-direction: column !important;
    gap: 20px !important;
  }

  /* Calendrier pleine largeur */
  #calendar {
    padding: 0 !important;
    background: transparent !important;
  }

  /* Titre des créneaux */
  #step2 h3 {
    font-size: 15px !important;
    margin-bottom: 12px !important;
  }

  /* Grille des créneaux — 3 colonnes sur mobile */
  #slotsGrid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 8px !important;
    max-height: none !important;
  }

  .slot-btn {
    padding: 10px 6px !important;
    font-size: 14px !important;
    border-radius: 10px !important;
  }

  /* ─────────────────────────────────────────────────────
     8. ÉTAPE 3 : FORMULAIRE — colonne unique
  ───────────────────────────────────────────────────── */

  #step3 div[style*="grid-template-columns: repeat(2, 1fr)"] {
    grid-template-columns: 1fr !important;
  }

  /* Champ notes & voucher — pleine largeur */
  #step3 div[style*="grid-column: 1 / -1"] {
    grid-column: auto !important;
  }

  /* Bouton continuer — pleine largeur */
  #continueBtn {
    width: 100% !important;
    padding: 14px !important;
    font-size: 16px !important;
  }

  /* ─────────────────────────────────────────────────────
     9. RÉCAPITULATIF (étape 4)
  ───────────────────────────────────────────────────── */

  #bookingSummary {
    padding: 16px !important;
  }

  /* Boutons bas de récap — colonne */
  #step4 div[style*="display: flex"][style*="gap: 12px"][style*="justify-content: center"] {
    flex-direction: column !important;
    gap: 10px !important;
  }

  #backBtn,
  #step4 button[type="submit"] {
    width: 100% !important;
    padding: 14px !important;
    font-size: 16px !important;
  }

  /* ─────────────────────────────────────────────────────
     10. PANNEAU FLOTTANT — remplacé par la sticky bar
         On le cache sur mobile pour éviter la double info
  ───────────────────────────────────────────────────── */

  #floating-summary {
    display: none !important;
  }

  /* ─────────────────────────────────────────────────────
     11. SÉLECTION D'EMPLOYÉ
  ───────────────────────────────────────────────────── */

  #employee-selection {
    margin: 0 !important;
  }

  #employee-select {
    font-size: 16px !important; /* Évite le zoom auto iOS */
  }

  /* ─────────────────────────────────────────────────────
     12. FLASH MESSAGES — pleine largeur
  ───────────────────────────────────────────────────── */

  #Content .section[style*="padding: 20px"] .section_wrapper {
    padding: 0 !important;
  }

  #Content .section[style*="padding: 20px"] > .section_wrapper > .items_group > .column > div {
    border-radius: 0 !important;
  }

  /* ─────────────────────────────────────────────────────
     13. FULLCALENDAR — ajustements mobiles
  ───────────────────────────────────────────────────── */

  .fc .fc-toolbar {
    gap: 8px !important;
  }

  .fc .fc-toolbar-title {
    font-size: 15px !important;
  }

  .fc .fc-daygrid-day-number {
    font-size: 12px !important;
    padding: 4px !important;
  }

  .fc .fc-col-header-cell-cushion {
    font-size: 11px !important;
    padding: 6px 2px !important;
  }

  .fc-daygrid-day.selected-date::after {
    display: none !important; /* Trop petit sur mobile */
  }

  /* ─────────────────────────────────────────────────────
     14. TOUCHES FINALES — espacement cohérent
  ───────────────────────────────────────────────────── */

  /* Supprimer le padding latéral de la section fond gris */
  .section[style*="background: #f5f7fa"] .section_wrapper {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* Headings des étapes — taille réduite */
  #step2 h2,
  #step3 h2,
  #step4 h2 {
    font-size: 18px !important;
  }

  /* Icônes de numéros d'étapes */
  #step2 > .column > div > div:first-child > div:first-child,
  #step3 > .column > div > div:first-child > div:first-child {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px;
    font-size: 15px !important;
  }

}

/* ─────────────────────────────────────────────────────
   EXTRA SMALL (<400px) — iPhone SE et très petits écrans
───────────────────────────────────────────────────── */
@media (max-width: 400px) {

  .hero-page.hero-purple h1 {
    font-size: 19px !important;
  }

  #slotsGrid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  .cat-pill {
    font-size: 12px !important;
    padding: 5px 11px !important;
  }

  #booking-proceed-btn {
    font-size: 13px !important;
    padding: 10px 14px !important;
  }

}