/**
 * BKK Ticket System Styles — v5.0.1
 *
 * Covers three areas:
 *   1. Ticket Selection Page  [bkk_ticket_select]
 *      .bkk-ticket-select-wrap, .bkk-ticket-form, .bkk-ticket-tier, .qty-btn etc.
 *      Card style intentionally mirrors the RSVP form:
 *        background: #f9f9f9  |  border: 1px solid #e5e5e5  |  border-radius: 12px
 *        Input borders: 1px solid #ccc with white background
 *        Tier rows: white background, #e5e5e5 border
 *
 *   2. Ticket Thank-You Page  [bkk_ticket_thankyou]
 *      .bkk-ticket-ty-wrap, .bkk-ticket-ty-card, .bkk-ticket-ty-qr etc.
 *
 *   3. Check-in Scanner  [bkk_checkin_scanner] + admin page
 *      .bkk-scanner-wrap, .bkk-video-container, .bkk-scan-result etc.
 *
 * Enqueued in: BKK_Events_Zeffy_Plugin::frontend_enqueue() (bkk-events-zeffy.php)
 * Handle:      bkk-tickets-css
 * Version:     5.0.3  (bump this whenever styles change to bust cache)
 */

/* ── BKK Ticket System v5.0.0 ────────────────────────────────────────────── */

/* ── Ticket Selection Page ───────────────────────────────────────────────── */
.bkk-ticket-select-wrap {
  max-width: 640px;
  margin: 0 auto;
  padding: 24px 16px;
  font-family: Arial, sans-serif;
}
.bkk-ticket-event-title {
  font-size: 1.5em;
  font-weight: 700;
  color: #1e3a8a;
  margin-bottom: 8px;
}
.bkk-ticket-event-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 0.9em;
  color: #64748b;
  margin-bottom: 20px;
}
.bkk-ticket-errors {
  background: #fef2f2;
  border: 1px solid #fca5a5;
  border-radius: 8px;
  padding: 12px 16px;
  margin-bottom: 20px;
  color: #991b1b;
}
.bkk-ticket-errors ul { margin: 8px 0 0 16px; }
.bkk-ticket-form { background: #f9f9f9; border: 1px solid #e5e5e5; border-radius: 12px; padding: 28px 24px; }
.bkk-ticket-section-title {
  font-weight: 700;
  font-size: 1em;
  color: #1e40af;
  margin: 20px 0 12px;
  padding-bottom: 6px;
  border-bottom: 2px solid #eff6ff;
}
.bkk-ticket-section-title:first-of-type { margin-top: 0; }
.bkk-ticket-row-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 14px;
}
.bkk-ticket-row-2 label,
.bkk-ticket-form label {
  display: block;
  font-weight: 600;
  margin-bottom: 4px;
  font-size: 0.9em;
  color: #374151;
}
.bkk-ticket-form input[type="text"],
.bkk-ticket-form input[type="email"],
.bkk-ticket-form input[type="tel"] {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-size: 1em;
  box-sizing: border-box;
  transition: border-color .15s;
  background: #fff;
}
.bkk-ticket-form input:focus { outline: none; border-color: #3b82f6; box-shadow: 0 0 0 3px rgba(59,130,246,.15); }
.req { color: #ef4444; }

/* Tier selectors */
.bkk-ticket-tiers { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }
.bkk-ticket-tier {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #fff;
  border: 1px solid #e5e5e5;
  border-radius: 8px;
  padding: 12px 16px;
}
.bkk-tier-info { display: flex; flex-direction: column; }
.bkk-tier-name  { font-weight: 600; color: #1e293b; }
.bkk-tier-price { font-size: 0.88em; color: #3b82f6; font-weight: 600; margin-top: 2px; }
.bkk-tier-qty   { display: flex; align-items: center; gap: 8px; }
.qty-btn {
  width: 32px; height: 32px;
  background: #1e40af; color: #fff; border: none;
  border-radius: 50%; font-size: 18px; font-weight: 700;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: background .15s;
}
.qty-btn:hover { background: #1e3a8a; }
.qty-input {
  width: 52px; text-align: center;
  border: 1px solid #d1d5db; border-radius: 6px;
  padding: 6px; font-size: 1em; font-weight: 600;
}
.qty-input::-webkit-inner-spin-button,
.qty-input::-webkit-outer-spin-button { -webkit-appearance: none; }

.bkk-ticket-note {
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  border-radius: 6px;
  padding: 10px 14px;
  font-size: 0.88em;
  color: #1e40af;
  margin-bottom: 16px;
}
.bkk-ticket-total-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #1e40af;
  color: #fff;
  padding: 14px 18px;
  border-radius: 8px;
  font-weight: 700;
  font-size: 1.05em;
  margin-bottom: 16px;
}
.bkk-total-amount { font-size: 1.3em; }
.bkk-ticket-submit-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.85em;
  color: #64748b;
  margin-bottom: 16px;
}
.bkk-ticket-submit-btn {
  width: 100%;
  background: #059669;
  color: #fff;
  border: none;
  padding: 15px;
  border-radius: 8px;
  font-size: 1.1em;
  font-weight: 700;
  cursor: pointer;
  transition: background .15s;
}
.bkk-ticket-submit-btn:hover { background: #047857; }
@media (max-width: 540px) {
  .bkk-ticket-row-2 { grid-template-columns: 1fr; }
}

/* ── Thank You Page ───────────────────────────────────────────────────────── */
.bkk-ticket-ty-wrap {
  max-width: 560px;
  margin: 40px auto;
  padding: 24px 16px;
  text-align: center;
  font-family: Arial, sans-serif;
}
.bkk-ticket-ty-icon  { font-size: 56px; line-height: 1; margin-bottom: 12px; }
.bkk-ticket-ty-title { font-size: 1.6em; font-weight: 800; color: #1e3a8a; margin-bottom: 8px; }
.bkk-ticket-ty-sub   { color: #64748b; font-size: 1em; margin-bottom: 24px; }
.bkk-ticket-ty-card  {
  background: #fff;
  border: 2px solid #bfdbfe;
  border-radius: 12px;
  padding: 24px;
  margin-bottom: 16px;
}
.bkk-ticket-ty-order      { font-size: 1.1em; color: #1e40af; font-weight: 700; margin-bottom: 6px; }
.bkk-ticket-ty-breakdown  { color: #374151; margin-bottom: 16px; font-size: 0.95em; }
.bkk-ticket-ty-qr         { border: 3px solid #1e40af; border-radius: 8px; width: 180px; height: 180px; display: block; margin: 0 auto 16px; }
.bkk-ticket-ty-scan-note  { color: #64748b; font-size: 0.88em; margin-bottom: 16px; }

/* ── Scanner Page ─────────────────────────────────────────────────────────── */
.bkk-scanner-wrap {
  max-width: 520px;
  margin: 0 auto;
  font-family: Arial, sans-serif;
  padding: 16px;
}
.bkk-scanner-header { text-align: center; margin-bottom: 16px; }
.bkk-scanner-header h2 { font-size: 1.4em; color: #1e3a8a; margin: 0 0 4px; }
.bkk-scanner-header p  { color: #64748b; margin: 0; font-size: 0.9em; }
.bkk-scanner-tabs { display: flex; gap: 8px; margin-bottom: 16px; }
.bkk-tab-btn {
  flex: 1; padding: 10px; border: 2px solid #e2e8f0; background: #f8fafc;
  border-radius: 8px; font-weight: 600; cursor: pointer; font-size: 0.95em; transition: all .15s;
}
.bkk-tab-btn.active { background: #1e40af; color: #fff; border-color: #1e40af; }
.bkk-video-container {
  position: relative;
  background: #000;
  border-radius: 12px;
  overflow: hidden;
  aspect-ratio: 1;
  max-width: 400px;
  margin: 0 auto;
}
#bkk-scanner-video { width: 100%; height: 100%; object-fit: cover; display: block; }
.bkk-scanner-overlay { position: absolute; inset: 0; pointer-events: none; }
.bkk-scanner-corner {
  position: absolute;
  width: 28px; height: 28px;
  border-color: #22c55e; border-style: solid; border-width: 0;
}
.bkk-scanner-corner.tl { top: 20px; left: 20px; border-top-width: 4px; border-left-width: 4px; border-radius: 4px 0 0 0; }
.bkk-scanner-corner.tr { top: 20px; right: 20px; border-top-width: 4px; border-right-width: 4px; border-radius: 0 4px 0 0; }
.bkk-scanner-corner.bl { bottom: 20px; left: 20px; border-bottom-width: 4px; border-left-width: 4px; border-radius: 0 0 0 4px; }
.bkk-scanner-corner.br { bottom: 20px; right: 20px; border-bottom-width: 4px; border-right-width: 4px; border-radius: 0 0 4px 0; }
#bkk-scan-line {
  position: absolute;
  top: 20%; left: 15%; right: 15%;
  height: 2px;
  background: #22c55e;
  opacity: 0;
  animation: bkk-scan 2s linear infinite;
}
@keyframes bkk-scan {
  0%   { top: 20%; opacity: .8; }
  50%  { top: 75%; opacity: .8; }
  100% { top: 20%; opacity: .8; }
}
.bkk-scanner-btn {
  background: #1e40af; color: #fff;
  border: none; padding: 11px 24px;
  border-radius: 8px; font-size: 0.95em; font-weight: 600;
  cursor: pointer; margin: 4px;
  transition: background .15s;
}
.bkk-scanner-btn:hover { background: #1e3a8a; }
.bkk-scanner-btn.bkk-btn-secondary { background: #64748b; }
.bkk-manual-form { padding: 16px; background: #f8fafc; border-radius: 8px; }

/* Scan result */
.bkk-scan-result {
  margin-top: 16px;
  padding: 20px;
  border-radius: 10px;
  text-align: center;
  font-family: Arial, sans-serif;
}
.bkk-scan-valid    { background: #f0fdf4; border: 2px solid #22c55e; }
.bkk-scan-error    { background: #fef2f2; border: 2px solid #ef4444; }
.bkk-scan-duplicate{ background: #fffbeb; border: 2px solid #f59e0b; }
.bkk-scan-scanning { background: #eff6ff; border: 2px solid #3b82f6; }
.bkk-scan-headline { font-size: 1.3em; font-weight: 800; margin-bottom: 6px; }
.bkk-scan-valid    .bkk-scan-headline { color: #15803d; }
.bkk-scan-error    .bkk-scan-headline { color: #dc2626; }
.bkk-scan-duplicate.bkk-scan-headline { color: #d97706; }
.bkk-scan-name     { font-size: 1.15em; font-weight: 700; color: #1e293b; margin-bottom: 4px; }
.bkk-scan-detail   { font-size: 0.9em; color: #475569; margin-bottom: 4px; }
.bkk-scan-event    { font-size: 0.85em; color: #64748b; font-style: italic; }
.bkk-scan-note     { font-size: 0.82em; color: #92400e; margin-top: 8px; background: #fef9c3; padding: 6px 10px; border-radius: 6px; }

/* Stats */
.bkk-scan-stats { display: flex; gap: 12px; margin: 16px 0; justify-content: center; flex-wrap: wrap; }
.bkk-stat { background: #fff; border: 1px solid #e2e8f0; border-radius: 8px; padding: 12px 20px; text-align: center; min-width: 90px; }
.bkk-stat span { display: block; font-size: 1.6em; font-weight: 700; color: #1e40af; }
.bkk-stat small { font-size: 0.75em; color: #64748b; text-transform: uppercase; letter-spacing: .5px; }
.bkk-scanner-filter { margin-top: 16px; padding-top: 12px; border-top: 1px solid #e2e8f0; }