/* ======================================================
   nTicket — Dark 3D Liquid Glass Design System
   Chargé exclusivement par resources/views/layouts/app.blade.php
   L'admin layout charge uniquement style.css et n'est pas affecté.
   ====================================================== */

/* ─── 1. Variables dark ──────────────────────────────── */
:root {
  --brand:           #4a8fe8;
  --brand-2:         #a78bfa;
  --brand-bright:    #60a5fa;
  --brand-glow:      rgba(74,143,232,.40);
  --brand-2-glow:    rgba(167,139,250,.25);

  --ink:             #f1f5f9;
  --ink-2:           #cbd5e1;
  --muted:           #64748b;
  --bg:              #080c17;

  /* Glass layers */
  --glass-bg:            rgba(255,255,255,0.055);
  --glass-bg-hover:      rgba(255,255,255,0.095);
  --glass-border:        rgba(255,255,255,0.095);
  --glass-border-hover:  rgba(255,255,255,0.22);
  --glass-shadow:
    0 4px 24px rgba(0,0,0,.42),
    inset 0 1px 0 rgba(255,255,255,.12),
    inset 0 -1px 0 rgba(0,0,0,.10);
  --glass-shadow-hover:
    0 20px 64px rgba(0,0,0,.56),
    inset 0 1px 0 rgba(255,255,255,.22),
    inset 0 -1px 0 rgba(0,0,0,.14);

  --line:  rgba(255,255,255,0.09);
  --ring:  rgba(74,143,232,.35);

  --radius:    16px;
  --radius-sm: 10px;
  --radius-xs: 6px;

  --page-bg: #080c17;
}

/* ─── 2. Base ─────────────────────────────────────────── */
html { background: var(--bg); scroll-behavior: smooth; }

body {
  font-family: Manrope, system-ui, -apple-system, 'Segoe UI', Roboto, Ubuntu, Cantarell, Arial, sans-serif;
  color: var(--ink);
  background: var(--bg);
  min-height: 100vh;
}

/* Supprime les fonds ticket/tech — pas adaptés au dark */
.bg-ticket, .bg-tech { display: none !important; }

/* ─── 3. Orbes liquides animées ────────────────────────── */
.glass-orbs {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
}

.glass-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  animation: orb-float 14s ease-in-out infinite alternate;
}

.glass-orb-1 {
  width: min(700px, 80vw);
  height: min(700px, 80vw);
  background: radial-gradient(circle at 30% 30%, rgba(59,130,246,.38), transparent 65%);
  top: -18%;
  left: -12%;
  animation-duration: 16s;
}
.glass-orb-2 {
  width: min(550px, 70vw);
  height: min(550px, 70vw);
  background: radial-gradient(circle at 60% 40%, rgba(147,51,234,.32), transparent 65%);
  top: 35%;
  right: -15%;
  animation-duration: 20s;
  animation-delay: -7s;
}
.glass-orb-3 {
  width: min(450px, 60vw);
  height: min(450px, 60vw);
  background: radial-gradient(circle at 50% 50%, rgba(16,185,129,.18), transparent 65%);
  bottom: -8%;
  left: 25%;
  animation-duration: 18s;
  animation-delay: -4s;
}
.glass-orb-4 {
  width: min(300px, 40vw);
  height: min(300px, 40vw);
  background: radial-gradient(circle at 40% 60%, rgba(245,158,11,.14), transparent 65%);
  top: 55%;
  left: 8%;
  animation-duration: 22s;
  animation-delay: -11s;
}

@keyframes orb-float {
  0%   { transform: translate(0,    0)    scale(1);    }
  50%  { transform: translate(28px,-18px) scale(1.06); }
  100% { transform: translate(-18px,26px) scale(.94);  }
}

/* ─── 4. Navbar ───────────────────────────────────────── */
.navbar {
  background: rgba(8,12,23,.72) !important;
  backdrop-filter: blur(28px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(28px) saturate(180%) !important;
  border-bottom: 1px solid var(--glass-border) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 8px 32px rgba(0,0,0,.36) !important;
}

.navbar .navbar-brand,
.navbar .navbar-brand:hover  { color: var(--ink) !important; }
.navbar .nav-link            { color: var(--ink-2) !important; }
.navbar .nav-link:hover,
.navbar .nav-link.active     { color: var(--ink) !important; }
.navbar .nav-link .nav-ico   { opacity: .65; }
.navbar .nav-link:hover .nav-ico { opacity: 1; }

.navbar-toggler {
  border-color: var(--glass-border) !important;
  background: var(--glass-bg) !important;
}
.navbar-toggler-icon { filter: invert(1) opacity(.8); }

/* Dropdown → glass */
.dropdown-menu {
  background: rgba(8,13,26,.88) !important;
  backdrop-filter: blur(28px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(28px) saturate(160%) !important;
  border: 1px solid var(--glass-border) !important;
  box-shadow: 0 20px 56px rgba(0,0,0,.58), inset 0 1px 0 rgba(255,255,255,.07) !important;
  border-radius: var(--radius) !important;
}
.dropdown-item              { color: var(--ink-2) !important; border-radius: var(--radius-xs); }
.dropdown-item:hover,
.dropdown-item:focus        { background: var(--glass-bg-hover) !important; color: var(--ink) !important; }
.dropdown-item.text-danger  { color: #f87171 !important; }
.dropdown-item.text-danger:hover { background: rgba(239,68,68,.14) !important; }
.dropdown-divider           { border-color: var(--glass-border) !important; }

/* ─── 5. Surfaces & cartes glass ──────────────────────── */
.surface,
.card {
  background: var(--glass-bg) !important;
  backdrop-filter: blur(18px) saturate(150%) !important;
  -webkit-backdrop-filter: blur(18px) saturate(150%) !important;
  border: 1px solid var(--glass-border) !important;
  box-shadow: var(--glass-shadow) !important;
  color: var(--ink) !important;
  border-radius: var(--radius) !important;
  overflow: hidden;
  position: relative;
}

/* Highlight iridescent en haut à gauche (effet réfraction) */
.surface::after,
.card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    135deg,
    rgba(255,255,255,.13) 0%,
    rgba(255,255,255,.03) 35%,
    rgba(130,100,255,.06) 65%,
    rgba(59,130,246,.04) 100%
  );
  pointer-events: none;
  z-index: 0;
}

.card > *,
.surface > * { position: relative; z-index: 1; }

/* ─── 6. Effet 3D hover sur les cartes ──────────────────── */
/* Uniquement sur les appareils à souris (hover réel + pointeur fin) : sur
   mobile/tactile, "will-change:transform" + "transform-style:preserve-3d"
   combinés au "backdrop-filter" du .card ci-dessus (section 5) déclenchent un
   bug de composition connu de Safari iOS pendant le scroll — la couche
   floutée se déchire en diagonale (repaint partiel, triangle non flouté /
   non arrondi visible en haut de carte). Le tactile n'a de toute façon pas
   de vrai hover : on retire complètement l'effet (et le will-change qui
   cause le bug) plutôt que de le neutraliser à moitié. */
@media (hover: hover) and (pointer: fine) {
  .card,
  .event-card {
    transition:
      transform .42s cubic-bezier(.23,1,.32,1),
      box-shadow .42s ease,
      border-color .28s ease,
      background .28s ease !important;
    transform-style: preserve-3d;
    will-change: transform;
  }

  .card:hover,
  .event-card:hover {
    background: var(--glass-bg-hover) !important;
    border-color: var(--glass-border-hover) !important;
    box-shadow: var(--glass-shadow-hover) !important;
    transform: perspective(800px) rotateX(-1.8deg) rotateY(1.8deg) scale(1.025) translateY(-6px) !important;
  }
}

/* ─── 7. Texte ─────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6  { color: var(--ink) !important; }
p, li                     { color: var(--ink-2); }
.text-muted, .muted       { color: #6b7d9e !important; }
.text-dark                { color: var(--ink) !important; }
.text-dark:hover          { color: var(--ink) !important; }
.text-primary             { color: var(--brand-bright) !important; }
a                         { color: var(--brand-bright); }
a:hover                   { color: #93c5fd; }

/* Lien dark card title */
.card-title a, h6 a       { color: var(--ink) !important; }
.card-title a:hover, h6 a:hover { color: var(--brand-bright) !important; }

/* ─── 8. Boutons ───────────────────────────────────────── */
.btn-brand {
  --bs-btn-color: #fff !important;
  background: linear-gradient(135deg, #1e5fc4, #3b82f6) !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  color: #fff !important;
  box-shadow:
    0 4px 20px -4px rgba(59,130,246,.55),
    inset 0 1px 0 rgba(255,255,255,.22) !important;
  border-radius: var(--radius-sm) !important;
  transition: all .22s ease !important;
}
.btn-brand:hover, .btn-brand:focus {
  background: linear-gradient(135deg, #1a56b4, #4f8ef7) !important;
  box-shadow: 0 8px 28px -4px rgba(59,130,246,.65), inset 0 1px 0 rgba(255,255,255,.28) !important;
  transform: translateY(-1px) !important;
  color: #fff !important;
}

.btn-ghost {
  background: var(--glass-bg) !important;
  border: 1px solid var(--glass-border) !important;
  color: var(--ink-2) !important;
  backdrop-filter: blur(8px) !important;
  border-radius: var(--radius-sm) !important;
}
.btn-ghost:hover, .btn-ghost:focus {
  background: var(--glass-bg-hover) !important;
  border-color: var(--glass-border-hover) !important;
  color: var(--ink) !important;
}

.btn-outline-secondary {
  border-color: var(--glass-border) !important;
  color: var(--ink-2) !important;
  background: transparent !important;
  border-radius: var(--radius-sm) !important;
}
.btn-outline-secondary:hover {
  background: var(--glass-bg) !important;
  border-color: var(--glass-border-hover) !important;
  color: var(--ink) !important;
}

.btn-outline-primary {
  border-color: var(--brand) !important;
  color: var(--brand-bright) !important;
  border-radius: var(--radius-sm) !important;
}
.btn-outline-primary:hover {
  background: rgba(59,130,246,.16) !important;
  color: #fff !important;
}

.btn-success {
  background: linear-gradient(135deg, #059669, #10b981) !important;
  border-color: transparent !important;
  box-shadow: 0 4px 16px -4px rgba(16,185,129,.45) !important;
  border-radius: var(--radius-sm) !important;
}
.btn-success:hover {
  background: linear-gradient(135deg, #047857, #059669) !important;
  box-shadow: 0 6px 20px -4px rgba(16,185,129,.55) !important;
}

.btn-danger {
  background: linear-gradient(135deg, #dc2626, #ef4444) !important;
  border-color: transparent !important;
  box-shadow: 0 4px 16px -4px rgba(239,68,68,.45) !important;
  border-radius: var(--radius-sm) !important;
}
.btn-sm { border-radius: var(--radius-xs) !important; }

/* ─── 9. Formulaires ───────────────────────────────────── */
.form-control,
.form-select {
  background: rgba(255,255,255,.06) !important;
  border: 1px solid var(--glass-border) !important;
  color: var(--ink) !important;
  border-radius: var(--radius-sm) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  transition: background .2s, border-color .2s, box-shadow .2s !important;
}
.form-control::placeholder    { color: rgba(255,255,255,.28) !important; }
.form-control:focus,
.form-select:focus {
  background: rgba(255,255,255,.09) !important;
  border-color: rgba(59,130,246,.55) !important;
  box-shadow: 0 0 0 .25rem rgba(59,130,246,.20) !important;
  color: var(--ink) !important;
}

.form-select option { background: #0c1428; color: var(--ink); }

.input-group-text {
  background: rgba(255,255,255,.06) !important;
  border: 1px solid var(--glass-border) !important;
  border-right: none !important;
  color: #94a3b8 !important;
  backdrop-filter: blur(8px) !important;
}
.input-group .form-control { border-left: none !important; }

.form-label       { color: var(--ink-2) !important; }
.form-check-label { color: var(--ink-2) !important; }
.form-text        { color: #94a3b8 !important; } /* Bootstrap ne définit rien pour le dark ici : texte d'aide sinon rendu dans sa couleur grise par défaut (pensée pour fond clair), peu lisible sur le glass sombre */
.form-check-input {
  background-color: rgba(255,255,255,.08) !important;
  border-color: var(--glass-border) !important;
}
.form-check-input:checked {
  background-color: var(--brand) !important;
  border-color: var(--brand) !important;
}

/* ─── 10. Badges & pills ──────────────────────────────── */
.badge { border-radius: 999px !important; font-weight: 600; }

.badge.bg-dark,
.badge.bg-secondary,
.badge.bg-dark.bg-opacity-75 {
  background: rgba(255,255,255,.12) !important;
  color: var(--ink) !important;
  border: 1px solid var(--glass-border) !important;
}
.badge.bg-success { background: rgba(16,185,129,.22) !important;  color: #6ee7b7 !important; border: 1px solid rgba(16,185,129,.30) !important; }
.badge.bg-warning { background: rgba(245,158,11,.22) !important;  color: #fcd34d !important; border: 1px solid rgba(245,158,11,.30) !important; }
.badge.bg-danger  { background: rgba(239,68,68,.22)  !important;  color: #fca5a5 !important; border: 1px solid rgba(239,68,68,.30)  !important; }
.badge.bg-white   { background: rgba(255,255,255,.15) !important; color: var(--ink) !important; }
.badge.text-dark  { color: var(--ink) !important; }

.pill {
  background: var(--glass-bg) !important;
  border-color: var(--glass-border) !important;
  color: var(--ink-2) !important;
  border-radius: var(--radius-xs) !important;
}
.pill i { opacity: .75; }

.badge-soft {
  background: rgba(74,143,232,.14) !important;
  border-color: rgba(74,143,232,.25) !important;
  color: var(--brand-bright) !important;
}

/* Category badge (couleur inline) — garder le texte lisible sur fond sombre */
[style*="background"][class~="badge"] {
  opacity: .95;
}

/* ─── 11. Alertes ─────────────────────────────────────── */
.alert-danger  { background: rgba(239,68,68,.12)  !important; border-color: rgba(239,68,68,.28)  !important; color: #fca5a5 !important; }
.alert-warning { background: rgba(245,158,11,.12) !important; border-color: rgba(245,158,11,.28) !important; color: #fcd34d !important; }
.alert-success { background: rgba(16,185,129,.12) !important; border-color: rgba(16,185,129,.28) !important; color: #6ee7b7 !important; }
.alert-info    { background: rgba(59,130,246,.12)  !important; border-color: rgba(59,130,246,.28)  !important; color: #93c5fd !important; }
.btn-close     { filter: invert(1) !important; }

/* ─── 12. Modales ─────────────────────────────────────── */
.modal-content {
  background: rgba(6,10,22,.82) !important;
  backdrop-filter: blur(36px) saturate(200%) !important;
  -webkit-backdrop-filter: blur(36px) saturate(200%) !important;
  border: 1px solid var(--glass-border-hover) !important;
  border-radius: var(--radius) !important;
}
.modal-content::after { display: none; } /* pas d'iridescence sur les modales */
.modal-header  { border-bottom: 1px solid var(--glass-border) !important; }
.modal-footer  { border-top:    1px solid var(--glass-border) !important; }
.modal-title   { color: var(--ink) !important; }
.modal-backdrop { backdrop-filter: blur(4px) !important; background: rgba(0,0,0,.65) !important; }

/* ─── 12bis. Accordéons ────────────────────────────────── */
.accordion-item {
  background: transparent !important;
  border-color: var(--glass-border) !important;
  color: var(--ink) !important;
}
.accordion-button {
  background: transparent !important;
  color: var(--ink) !important;
  font-weight: 600;
}
.accordion-button:not(.collapsed) {
  background: var(--glass-bg-hover) !important;
  color: var(--ink) !important;
  box-shadow: inset 0 -1px 0 var(--glass-border) !important;
}
.accordion-button:focus { box-shadow: 0 0 0 .2rem rgba(59,130,246,.20) !important; }
.accordion-button::after { filter: invert(1) !important; }
.accordion-body { color: var(--ink-2) !important; }

/* ─── 13. Footer ──────────────────────────────────────── */
.footer {
  background: rgba(6,10,22,.90) !important;
  border-top: 1px solid var(--glass-border) !important;
  backdrop-filter: blur(16px) !important;
  color: var(--ink-2) !important;
}
.footer .mini, .footer span { color: var(--ink-2) !important; }
.footer a                   { color: #6b7d9e   !important; }
.footer a:hover             { color: var(--ink) !important; }
.footer .btn-ghost          { color: #6b7d9e   !important; }

/* ─── 14. Pagination ──────────────────────────────────── */
.page-link {
  background: var(--glass-bg) !important;
  border-color: var(--glass-border) !important;
  color: var(--ink-2) !important;
  border-radius: var(--radius-xs) !important;
}
.page-link:hover       { background: var(--glass-bg-hover) !important; color: var(--ink) !important; }
.page-item.active .page-link   { background: var(--brand) !important; border-color: var(--brand) !important; color: #fff !important; }
.page-item.disabled .page-link { opacity: .35; }

/* ─── 15. Tables ──────────────────────────────────────── */
.table {
  --bs-table-color:        var(--ink);
  --bs-table-bg:           transparent;
  --bs-table-border-color: var(--glass-border);
  --bs-table-striped-bg:   rgba(255,255,255,.025);
  --bs-table-hover-bg:     rgba(255,255,255,.06);
}
.table th {
  color: var(--ink-2) !important;
  font-weight: 600;
  font-size: .84rem;
  letter-spacing: .04em;
  text-transform: uppercase;
}

/* ─── 16. Toast ───────────────────────────────────────── */
#mainToast, .toast {
  background: rgba(8,13,26,.90) !important;
  border: 1px solid var(--glass-border) !important;
  backdrop-filter: blur(20px) !important;
  color: var(--ink) !important;
  border-radius: var(--radius-sm) !important;
}

/* ─── 17. Connexion / auth ────────────────────────────── */
.btn-google {
  background: rgba(255,255,255,.06) !important;
  border: 1px solid var(--glass-border) !important;
  color: var(--ink) !important;
  border-radius: var(--radius-sm) !important;
}
.btn-google:hover { background: rgba(255,255,255,.10) !important; }

.hr-or span { background: transparent !important; color: #6b7d9e !important; }

/* ─── 18. QR box ──────────────────────────────────────── */
.qr-box {
  background: #fff !important;
  border: 1px solid rgba(255,255,255,.25) !important;
  border-radius: var(--radius) !important;
}

/* ─── 19. Wizard d'achat & cartes tickets ─────────────── */
.ticket-grid .ticket-card {
  background: var(--glass-bg) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: var(--radius-sm) !important;
  color: var(--ink) !important;
  transition: background .2s, border-color .2s, box-shadow .2s !important;
}
.ticket-grid .ticket-card:hover:not(.opacity-50) {
  background: var(--glass-bg-hover) !important;
  border-color: rgba(59,130,246,.38) !important;
  box-shadow: 0 4px 20px rgba(0,0,0,.30) !important;
}
.ticket-grid .ticket-card.active {
  outline: 2px solid var(--brand-bright) !important;
  background: rgba(59,130,246,.10) !important;
}
.ticket-grid .ticket-card .label,
.ticket-grid .ticket-card .price { color: var(--ink) !important; }
.ticket-grid .ticket-card .muted  { color: #6b7d9e !important; }

.method-grid .method-card {
  background: var(--glass-bg) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: var(--radius-sm) !important;
  transition: background .2s, border-color .2s !important;
}
.method-grid .method-card:hover { background: var(--glass-bg-hover) !important; }
.method-grid .method-card.active { outline: 2px solid var(--brand-bright) !important; }
/* Logo opérateur (bglogo) garde son fond blanc */
.method-grid .method-card.bglogo {
  background: #fff var(--logo) center / cover no-repeat !important;
  padding: 0 !important;
}

.step-dots .dot     { background: rgba(255,255,255,.18) !important; border-radius: 3px; }
.step-dots .dot.on  { background: var(--brand) !important; }

.summary .key { color: #6b7d9e !important; }
.summary .val { color: var(--ink) !important; }

/* ─── 20. Texte dégradé ───────────────────────────────── */
.text-gradient {
  background: linear-gradient(90deg, var(--brand-bright), var(--brand-2)) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
}

/* ─── 21. Section title underline ───────────────────────── */
.section-title::after {
  background: linear-gradient(90deg, var(--brand), var(--brand-2)) !important;
  opacity: .75 !important;
}

/* ─── 22. Ticket notch ────────────────────────────────── */
.surface.notched::before,
.surface.notched::after { background: var(--bg) !important; }

/* ─── 23. Hero (page événement) ───────────────────────── */
.hero h1   { color: var(--ink) !important; }
.hero .lead { color: var(--ink-2) !important; }

/* ─── 24. Event card image cover ─────────────────────── */
.event-card .card-body .text-dark { color: var(--ink) !important; }
.event-card .card-text, .event-card .small { color: var(--ink-2) !important; }

/* ─── 25. Input group (checkout phone) ──────────────────── */
.phone-group .input-group-text {
  background: rgba(255,255,255,.08) !important;
  color: var(--ink) !important;
  border-right: none !important;
  border-color: var(--glass-border) !important;
}
.phone-group .form-control {
  border-left: none !important;
  color: var(--ink) !important;
}

/* ─── 26. Mini-helper & prix ──────────────────────────── */
.mini-helper { color: #6b7d9e !important; }
.price       { color: var(--ink) !important; }
.total-badge { color: var(--brand-bright) !important; }

/* ─── 27. Scrollbar dark ──────────────────────────────── */
::-webkit-scrollbar        { width: 6px; height: 6px; }
::-webkit-scrollbar-track  { background: transparent; }
::-webkit-scrollbar-thumb  { background: rgba(255,255,255,.14); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.24); }

/* ─── 28. Sélection texte ─────────────────────────────── */
::selection { background: rgba(59,130,246,.35); color: #fff; }

/* ─── 29. Responsive orbes ────────────────────────────── */
@media (max-width: 576px) {
  .glass-orb-1 { filter: blur(60px); }
  .glass-orb-2 { filter: blur(60px); }
  .glass-orb-3 { filter: blur(50px); }
  .glass-orb-4 { display: none; }
}

/* ─── 30. WhatsApp float ──────────────────────────────── */
#waFloat {
  box-shadow: 0 4px 20px rgba(37,211,102,.50) !important;
}
#waFloat::after {
  background: rgba(6,10,22,.92) !important;
  color: var(--ink) !important;
}