/* =========================================================
   Abiball Tickets – Design System
   Palette: Orange #e67e22 primary, Red #c0392b accent, White surfaces
   Background: grey → orange → red gradient (matches reference)
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Plus+Jakarta+Sans:wght@700;800&display=swap');

:root {
  /* Brand colours – adjusted to match reference site */
  --primary:        #e67e22;   /* warm orange */
  --primary-dark:   #d35400;   /* hover / active */
  --primary-light:  #fff3e0;   /* tint bg */
  --accent:         #c0392b;   /* red */
  --accent-dark:    #962d22;
  --accent-light:   #fdecea;

  /* Page background – gradient like reference */
  --bg-gradient:    linear-gradient(135deg, #bdc3c7 0%, #e67e22 60%, #c0392b 100%);

  /* Surfaces */
  --bg:             #f7f4f2;
  --card:           #ffffff;
  --card-2:         #fdf9f7;
  --border:         rgba(0,0,0,.10);

  /* Text */
  --text:           #1a1209;
  --muted:          #6b5e54;
  --faint:          #b0a49c;

  /* Semantic */
  --success:        #2e7d32;
  --success-bg:     #e8f5e9;
  --warning:        #e65100;
  --warning-bg:     #fff3e0;
  --danger:         #b71c1c;
  --danger-bg:      #ffebee;
  --info:           #1565c0;
  --info-bg:        #e3f2fd;

  /* Shape */
  --radius:         10px;
  --radius-sm:      6px;
  --radius-lg:      16px;
  --radius-full:    9999px;

  /* Elevation */
  --shadow-sm:      0 1px 3px rgba(0,0,0,.08);
  --shadow:         0 2px 10px rgba(0,0,0,.10);
  --shadow-lg:      0 8px 28px rgba(0,0,0,.13);

  /* Typography */
  --font:           'Inter', system-ui, sans-serif;
  --font-display:   'Plus Jakarta Sans', 'Inter', system-ui, sans-serif;

  /* Transition */
  --ease:           180ms cubic-bezier(.16,1,.3,1);
}

/* ── Reset ──────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: none; scroll-behavior: smooth; }
body {
  font-family:     var(--font);
  background:      var(--bg-gradient);
  min-height:      100dvh;
  color:           var(--text);
  font-size:       1rem;
  line-height:     1.6;
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
input, button, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: none; }

/* ── Topbar ─────────────────────────────────────────────── */
.topbar {
  background:    rgba(0,0,0,.18);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color:         #fff;
  padding:       0 1.25rem;
  height:        56px;
  display:       flex;
  align-items:   center;
  gap:           .75rem;
  border-bottom: 1px solid rgba(255,255,255,.15);
  position:      sticky;
  top:           0;
  z-index:       100;
}
.topbar h1 {
  font-family:  var(--font-display);
  font-size:    1.1rem;
  font-weight:  800;
  letter-spacing: -.01em;
  flex:         1;
  color:        #fff;
  text-shadow:  0 1px 3px rgba(0,0,0,.25);
}
.topbar .nav-links { display: flex; gap: .5rem; }
.topbar .nav-links a {
  color:           rgba(255,255,255,.85);
  text-decoration: none;
  font-size:       .875rem;
  font-weight:     500;
  padding:         .3rem .65rem;
  border-radius:   var(--radius-sm);
  transition:      background var(--ease);
}
.topbar .nav-links a:hover { color: #fff; background: rgba(255,255,255,.18); }

/* ── Container ──────────────────────────────────────────── */
.container {
  max-width:  900px;
  margin:     0 auto;
  padding:    1.5rem 1rem;
}

/* ── Cards ──────────────────────────────────────────────── */
.card {
  background:    var(--card);
  border-radius: var(--radius-lg);
  box-shadow:    0 10px 30px rgba(0,0,0,.20);
  padding:       1.5rem;
  margin-bottom: 1.25rem;
  border:        1px solid rgba(255,255,255,.8);
}
.card h2 {
  font-family:    var(--font-display);
  font-size:      1.05rem;
  font-weight:    700;
  color:          var(--primary);
  margin-bottom:  1rem;
  padding-bottom: .6rem;
  border-bottom:  2px solid var(--primary-light);
  display:        flex;
  align-items:    center;
  gap:            .4rem;
}

/* ── Buttons ────────────────────────────────────────────── */
.btn {
  display:       inline-flex;
  align-items:   center;
  justify-content: center;
  gap:           .4rem;
  padding:       .6rem 1.25rem;
  border:        none;
  border-radius: var(--radius);
  font-size:     .925rem;
  font-weight:   700;
  transition:    all var(--ease);
  min-height:    44px;
  white-space:   nowrap;
}
.btn:hover   { transform: translateY(-2px); filter: brightness(1.07); }
.btn:active  { transform: scale(.97); }
.btn:disabled { opacity: .55; pointer-events: none; }
.btn-sm { padding: .35rem .75rem; font-size: .8rem; min-height: 34px; }

.btn-primary  {
  background:  linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
  color:       #fff;
  box-shadow:  0 4px 15px rgba(230,126,34,.40);
}
.btn-primary:hover { box-shadow: 0 6px 20px rgba(230,126,34,.50); }
.btn-accent   {
  background:  var(--accent);
  color:       #fff;
  box-shadow:  0 2px 8px rgba(192,57,43,.28);
}
.btn-accent:hover { background: var(--accent-dark); }
.btn-success  { background: var(--success);  color: #fff; }
.btn-warning  { background: var(--warning);  color: #fff; }
.btn-danger   { background: var(--danger);   color: #fff; }
.btn-outline  {
  background:    transparent;
  color:         #fff;
  border:        2px solid rgba(255,255,255,.7);
}
.btn-outline:hover { background: rgba(255,255,255,.15); border-color: #fff; }
.btn-outline-dark  {
  background:    transparent;
  color:         var(--primary);
  border:        2px solid var(--primary);
}
.btn-outline-dark:hover { background: var(--primary-light); }

/* ── Forms ──────────────────────────────────────────────── */
.form-group { margin-bottom: 1rem; }
.form-group label {
  display:       block;
  font-weight:   600;
  font-size:     .875rem;
  margin-bottom: .35rem;
  color:         var(--text);
}

.form-group input,
.form-group select,
.form-group textarea {
  width:         100%;
  padding:       .625rem .85rem;
  border:        1.5px solid var(--border);
  border-radius: var(--radius);
  font-size:     .95rem;
  background:    #fff;
  transition:    border-color var(--ease), box-shadow var(--ease);
  -webkit-appearance: none;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline:       none;
  border-color:  var(--primary);
  box-shadow:    0 0 0 3px rgba(230,126,34,.15);
}
.form-group textarea { resize: vertical; min-height: 100px; }

/* ── Tables ─────────────────────────────────────────────── */
.table-wrap { overflow-x: auto; border-radius: var(--radius); }
table { width: 100%; border-collapse: collapse; font-size: .875rem; }
th {
  background:  var(--primary);
  color:       #fff;
  padding:     .55rem .85rem;
  text-align:  left;
  font-weight: 600;
  font-size:   .825rem;
  white-space: nowrap;
}
th:first-child { border-radius: var(--radius-sm) 0 0 0; }
th:last-child  { border-radius: 0 var(--radius-sm) 0 0; }
td { padding: .5rem .85rem; border-bottom: 1px solid var(--border); vertical-align: middle; }
tr:last-child td { border-bottom: none; }
tr:nth-child(even) td { background: var(--card-2); }

/* ── Badges ─────────────────────────────────────────────── */
.badge {
  display:       inline-flex;
  align-items:   center;
  padding:       .2rem .65rem;
  border-radius: var(--radius-full);
  font-size:     .75rem;
  font-weight:   700;
  line-height:   1.4;
  white-space:   nowrap;
}
.badge-success { background: var(--success-bg); color: var(--success); }
.badge-warning { background: var(--warning-bg); color: var(--warning); }
.badge-danger  { background: var(--danger-bg);  color: var(--danger);  }
.badge-muted   { background: #f0ebe7;            color: var(--muted);   }
.badge-primary { background: var(--primary-light); color: var(--primary-dark); }

/* ── Alerts ─────────────────────────────────────────────── */
.alert {
  padding:       .85rem 1rem;
  border-radius: var(--radius);
  margin-bottom: 1rem;
  font-size:     .9rem;
  border-left:   4px solid;
}
.alert-success { background: var(--success-bg); color: var(--success); border-color: var(--success); }
.alert-warning { background: var(--warning-bg); color: var(--warning); border-color: var(--warning); }
.alert-danger  { background: var(--danger-bg);  color: var(--danger);  border-color: var(--danger);  }
.alert-info    { background: var(--info-bg);    color: var(--info);    border-color: var(--info);    }

/* ── Tabs ───────────────────────────────────────────────── */
.tabs {
  display:        flex;
  gap:            .2rem;
  margin-bottom:  1.25rem;
  border-bottom:  2px solid rgba(255,255,255,.25);
  overflow-x:     auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.tabs::-webkit-scrollbar { display: none; }
.tab-btn {
  padding:        .6rem 1rem;
  background:     transparent;
  border:         none;
  cursor:         pointer;
  font-size:      .875rem;
  font-weight:    600;
  color:          rgba(255,255,255,.7);
  border-bottom:  3px solid transparent;
  margin-bottom:  -2px;
  transition:     color var(--ease), border-color var(--ease);
  white-space:    nowrap;
  min-height:     44px;
}
.tab-btn.active { color: #fff; border-bottom-color: #fff; }
.tab-pane { display: none; }
.tab-pane.active { display: block; }

/* ── Code input ─────────────────────────────────────────── */
.code-input-big {
  font-size:       2rem !important;
  letter-spacing:  .35em;
  text-align:      center;
  text-transform:  uppercase;
  font-weight:     700;
  font-family:     'Courier New', monospace !important;
  border:          2px solid rgba(255,255,255,.5) !important;
  padding:         .85rem !important;
  background:      rgba(255,255,255,.95) !important;
}
.code-input-big:focus {
  border-color: var(--primary) !important;
  box-shadow:   0 0 0 4px rgba(230,126,34,.25) !important;
}

/* ── QR image ───────────────────────────────────────────── */
.qr-img {
  display:       block;
  margin:        1rem auto;
  border:        4px solid var(--border);
  border-radius: var(--radius);
}

/* ── Spinner ────────────────────────────────────────────── */
.spinner {
  display:          inline-block;
  width:            1.1rem;
  height:           1.1rem;
  border:           2.5px solid rgba(255,255,255,.35);
  border-top-color: #fff;
  border-radius:    50%;
  animation:        spin .6s linear infinite;
  vertical-align:   middle;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Hero (index page) ──────────────────────────────────── */
.hero {
  text-align:    center;
  padding:       clamp(2.5rem, 8vw, 5rem) 1.5rem;
  position:      relative;
  color:         #fff;
}
.hero h1 {
  font-family:   var(--font-display);
  font-size:     clamp(1.75rem, 5vw, 3rem);
  font-weight:   800;
  margin-bottom: .5rem;
  line-height:   1.15;
  text-shadow:   0 2px 8px rgba(0,0,0,.25);
}
.hero p {
  font-size:     clamp(1rem, 2vw, 1.15rem);
  opacity:       .9;
  margin-bottom: 1.75rem;
  max-width:     520px;
  margin-left:   auto;
  margin-right:  auto;
  text-shadow:   0 1px 4px rgba(0,0,0,.2);
}

/* ── Stats grid ─────────────────────────────────────────── */
.stats-grid {
  display:               grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap:                   .9rem;
  margin-bottom:         1.25rem;
}
.stat-card {
  background:    var(--card);
  border-radius: var(--radius);
  box-shadow:    var(--shadow);
  border:        1px solid var(--border);
  padding:       1.1rem .9rem;
  text-align:    center;
}
.stat-value {
  font-family: var(--font-display);
  font-size:   1.65rem;
  font-weight: 800;
  color:       var(--primary);
  line-height: 1.1;
}
.stat-label {
  font-size:  .75rem;
  color:      var(--muted);
  margin-top: .25rem;
  font-weight: 500;
}

/* ── Settings grid ──────────────────────────────────────── */
.settings-grid {
  display:               grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap:                   0 1.25rem;
}

/* ── Admin wrapper (tabs have gradient bg) ──────────────── */
.admin-wrapper {
  min-height: 100dvh;
}

/* ── Login overlay (admin) ──────────────────────────────── */
#loginOverlay {
  display:          none;
  position:         fixed;
  inset:            0;
  background:       var(--bg-gradient);
  z-index:          9999;
  align-items:      center;
  justify-content:  center;
  padding:          1rem;
}
.login-box {
  background:    #fff;
  border-radius: var(--radius-lg);
  padding:       2.25rem 2rem;
  width:         100%;
  max-width:     380px;
  box-shadow:    0 10px 40px rgba(0,0,0,.30);
  text-align:    center;
}
.login-box h2 {
  font-family:   var(--font-display);
  font-size:     1.35rem;
  font-weight:   800;
  color:         var(--primary);
  margin-bottom: .3rem;
}
.login-box p {
  color:         var(--muted);
  font-size:     .875rem;
  margin-bottom: 1.5rem;
}
.login-box input {
  width:         100%;
  padding:       .75rem 1rem;
  border:        1.5px solid var(--border);
  border-radius: var(--radius);
  font-size:     1.2rem;
  letter-spacing: .2em;
  text-align:    center;
  margin-bottom: .75rem;
  -webkit-appearance: none;
}
.login-box input:focus {
  outline:      none;
  border-color: var(--primary);
  box-shadow:   0 0 0 3px rgba(230,126,34,.15);
}
#loginError {
  color:       var(--danger);
  font-size:   .875rem;
  margin-top:  .5rem;
  min-height:  1.2em;
}

/* ── Danger zone ────────────────────────────────────────── */
.danger-zone {
  border:        2px solid var(--danger);
  border-radius: var(--radius-lg);
  padding:       1.5rem;
  background:    var(--danger-bg);
  margin-top:    1rem;
}
.danger-zone h3 {
  color:         var(--danger);
  font-size:     1rem;
  font-weight:   700;
  margin-bottom: 1rem;
  display:       flex;
  align-items:   center;
  gap:           .4rem;
}
.danger-row {
  display:         flex;
  gap:             .6rem;
  align-items:     flex-end;
  flex-wrap:       wrap;
  margin-bottom:   .75rem;
}
.danger-row input {
  flex:          1;
  min-width:     80px;
  padding:       .55rem .8rem;
  border:        1.5px solid rgba(183,28,28,.3);
  border-radius: var(--radius-sm);
  font-size:     .9rem;
  background:    #fff;
}
.danger-row input:focus {
  outline:      none;
  border-color: var(--danger);
  box-shadow:   0 0 0 3px rgba(183,28,28,.12);
}
#dangerResult {
  margin-top:    .75rem;
  padding:       .65rem .9rem;
  border-radius: var(--radius-sm);
  font-size:     .875rem;
  min-height:    2.2em;
}
#dangerResult.success { background: var(--success-bg); color: var(--success); }
#dangerResult.error   { background: var(--danger-bg);  color: var(--danger);  }

/* ── Payment table card ─────────────────────────────────── */
.payment-info-table { width: 100%; border-collapse: collapse; }
.payment-info-table th {
  background:    var(--primary-light);
  color:         var(--primary-dark);
  padding:       .55rem .85rem;
  border-radius: 0;
  font-size:     .825rem;
}
.payment-info-table td { padding: .6rem .85rem; border-bottom: 1px solid var(--border); }
.payment-info-table tr:last-child td { border-bottom: none; }

/* ── White text helpers (on gradient bg) ────────────────── */
.text-white { color: #fff; }
.text-white-muted { color: rgba(255,255,255,.8); }

/* ── Responsive ─────────────────────────────────────────── */
@media (max-width: 600px) {
  .topbar h1           { font-size: 1rem; }
  .card                { padding: 1.1rem; border-radius: var(--radius); }
  .hero h1             { font-size: 1.75rem; }
  .code-input-big      { font-size: 1.4rem !important; letter-spacing: .15em; }
  .stats-grid          { grid-template-columns: repeat(2, 1fr); }
  .settings-grid       { grid-template-columns: 1fr; }
  .btn                 { font-size: .875rem; }
  table                { font-size: .8rem; }
  th, td               { padding: .45rem .6rem; }
  .tab-btn             { font-size: .8rem; padding: .55rem .75rem; }
}
@media (max-width: 380px) {
  .code-input-big      { font-size: 1.15rem !important; letter-spacing: .1em; }
}