/* ==========================================================================
   JUARA ARENA — Customer Web
   Design tokens & component system
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Plus+Jakarta+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap');

:root{
  /* --- brand palette --- */
  --pink:        #FF4D8D;
  --pink-rose:   #E84393;
  --purple:      #9B51E0;
  --violet:      #5B2EFF;
  --ink:         #0F0F0F;

  --bg:          #FFFFFF;
  --bg-tint:     #FAF8FF;
  --bg-tint-2:   #F5F0FF;
  --line:        rgba(15,15,15,.10);
  --line-soft:   rgba(15,15,15,.06);

  --text-1:      #17151C;
  --text-2:      #55506A;
  --text-3:      #8C87A0;

  --brand-gradient: linear-gradient(120deg, var(--pink) 0%, var(--pink-rose) 32%, var(--purple) 66%, var(--violet) 100%);
  --brand-gradient-soft: linear-gradient(120deg, rgba(255,77,141,.12) 0%, rgba(155,81,224,.12) 55%, rgba(91,46,255,.12) 100%);

  --radius-lg: 24px;
  --radius-md: 16px;
  --radius-sm: 10px;

  --shadow-1: 0 16px 40px -18px rgba(91,46,255,.28);
  --shadow-2: 0 10px 26px -14px rgba(15,15,15,.18);

  --font-display: 'Space Grotesk', 'Segoe UI', sans-serif;
  --font-body: 'Plus Jakarta Sans', 'Segoe UI', sans-serif;
}

*{ box-sizing: border-box; }

html{ scroll-behavior: smooth; }

body{
  font-family: var(--font-body);
  color: var(--text-1);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

h1,h2,h3,h4,.display-font{
  font-family: var(--font-display);
  letter-spacing: -0.01em;
  color: var(--ink);
}

p{ color: var(--text-2); line-height: 1.65; }

a{ color: var(--violet); text-decoration: none; }
a:hover{ color: var(--pink-rose); }

:focus-visible{
  outline: 2.5px solid var(--violet);
  outline-offset: 2px;
  border-radius: 4px;
}

.container-page{
  max-width: 1220px;
  margin: 0 auto;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}

.section{ padding: 4.5rem 0; }
.section-tight{ padding: 2.75rem 0; }
@media (max-width: 767px){
  .section{ padding: 3rem 0; }
}

.bg-tint{ background: var(--bg-tint); }

.text-gradient{
  background: var(--brand-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.eyebrow{
  font-family: var(--font-body);
  font-weight: 700;
  font-size: .8rem;
  color: var(--pink-rose);
  display: inline-flex;
  align-items: center;
  gap: .5rem;
}
.eyebrow::before{
  content:"";
  width: 20px; height: 2px;
  background: var(--brand-gradient);
  border-radius: 2px;
  display:inline-block;
}

.section-head{ max-width: 620px; margin-bottom: 2.5rem; }
.section-head h2{ font-size: 2rem; font-weight: 700; margin: .5rem 0 .6rem; }
@media (min-width: 992px){ .section-head h2{ font-size: 2.4rem; } }

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn{
  font-family: var(--font-body);
  font-weight: 600;
  border-radius: 999px;
  padding: .72rem 1.5rem;
  border: 1px solid transparent;
  transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease, color .18s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
}
.btn:active{ transform: translateY(1px); }

.btn-brand{
  background: var(--brand-gradient);
  background-size: 160% 160%;
  background-position: 0% 50%;
  color: #fff;
  box-shadow: var(--shadow-1);
}
.btn-brand:hover{
  background-position: 100% 50%;
  color:#fff;
  box-shadow: 0 18px 34px -14px rgba(232,67,147,.55);
  transform: translateY(-1px);
}
.btn-brand:disabled{ opacity:.55; box-shadow:none; transform:none; cursor:not-allowed; }

.btn-outline-brand{
  background: #fff;
  border-color: var(--line);
  color: var(--ink);
}
.btn-outline-brand:hover{
  border-color: var(--purple);
  color: var(--violet);
  background: var(--bg-tint-2);
}

.btn-ghost{
  background: transparent;
  color: var(--ink);
  padding: .6rem 1rem;
}
.btn-ghost:hover{ color: var(--pink-rose); }

.btn-sm{ padding: .5rem 1.05rem; font-size: .875rem; }
.btn-block{ width:100%; }

.btn-danger-soft{
  background: #FFF0F4;
  color: #C9265C;
  border-color: #FBD6E2;
}
.btn-danger-soft:hover{ background:#FFE2EB; color:#a91b49; }

/* ==========================================================================
   Navbar
   ========================================================================== */
.ja-navbar{
  position: sticky; top: 0; z-index: 1030;
  background: rgba(255,255,255,.86);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--line-soft);
}
.ja-navbar .container-page{
  display:flex; align-items:center; justify-content:space-between;
  height: 74px;
}
.ja-brand{
  display:flex; align-items:center; gap:.6rem;
  font-family: var(--font-display);
  font-weight: 700; font-size: 1.22rem;
  color: var(--ink);
}
.ja-brand:hover{ color: var(--ink); }
.ja-brand .mark{
  width: 38px; height: 38px; border-radius: 11px;
  background: var(--brand-gradient);
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-weight:700; font-size:1.05rem;
  box-shadow: var(--shadow-1);
  flex-shrink: 0;
}
.ja-nav-links{ display:flex; align-items:center; gap: 1.9rem; }
.ja-nav-links a{
  font-weight: 600; font-size: .95rem; color: var(--text-2);
  position:relative; padding: .25rem 0;
}
.ja-nav-links a:hover{ color: var(--ink); }
.ja-nav-links a.active{ color: var(--ink); }
.ja-nav-links a.active::after{
  content:""; position:absolute; left:0; right:0; bottom:-6px; height:3px;
  border-radius:3px; background: var(--brand-gradient);
}
.ja-nav-actions{ display:flex; align-items:center; gap:.6rem; }

.ja-user-chip{
  display:flex; align-items:center; gap:.55rem;
  background: var(--bg-tint-2); border:1px solid var(--line);
  border-radius: 999px; padding: .35rem .9rem .35rem .35rem;
  font-weight:600; font-size:.9rem; color: var(--ink);
  cursor:pointer;
}
.ja-user-chip img, .ja-user-chip .avatar-fallback{
  width: 30px; height:30px; border-radius:50%; object-fit:cover;
  background: var(--brand-gradient); color:#fff; display:flex; align-items:center; justify-content:center; font-size:.8rem; font-weight:700;
}
.ja-navbar-toggle{ display:none; background:none; border:1px solid var(--line); border-radius:10px; padding:.4rem .6rem; }

@media (max-width: 991px){
  .ja-nav-links{
    position:absolute; top:74px; left:0; right:0; background:#fff;
    flex-direction:column; align-items:flex-start; gap: 0;
    border-bottom: 1px solid var(--line-soft);
    max-height:0; overflow:hidden; transition: max-height .25s ease;
  }
  .ja-nav-links.open{ max-height:340px; }
  .ja-nav-links a{ width:100%; padding: .9rem 1.25rem; border-bottom:1px solid var(--line-soft); }
  .ja-nav-links a.active::after{ display:none; }
  .ja-nav-links a.active{ background: var(--bg-tint-2); }
  .ja-navbar-toggle{ display:inline-flex; }
}

/* ==========================================================================
   Hero
   ========================================================================== */
.hero{
  position: relative;
  overflow: hidden;
  background: var(--ink);
  padding: 4.5rem 0 6.5rem;
}
.hero::before{
  content:"";
  position:absolute; inset:0;
  background: var(--brand-gradient);
  clip-path: polygon(0 0, 100% 0, 100% 78%, 0 100%);
  opacity: .97;
}
.hero .court-lines{
  position:absolute; inset:0; opacity:.16; pointer-events:none;
  background-image:
    repeating-linear-gradient(90deg, transparent 0 118px, rgba(255,255,255,.9) 118px 120px),
    repeating-linear-gradient(0deg, transparent 0 118px, rgba(255,255,255,.9) 118px 120px);
  clip-path: polygon(0 0, 100% 0, 100% 78%, 0 100%);
}
.hero-inner{ position:relative; z-index:2; }
.hero h1{
  color:#fff; font-size: 2.4rem; font-weight:700; line-height:1.12;
  max-width: 620px;
}
@media (min-width: 768px){ .hero h1{ font-size: 3.2rem; } }
.hero p.lead{
  color: rgba(255,255,255,.86); max-width: 480px; font-size: 1.05rem; margin: 1.1rem 0 1.8rem;
}
.hero-stats{ display:flex; gap: .9rem; margin-top: 2.4rem; flex-wrap: wrap; }
.hero-stat{
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.22);
  border-radius: var(--radius-md);
  padding: .9rem 1.2rem;
  color:#fff;
  min-width: 128px;
}
.hero-stat strong{ display:block; font-family: var(--font-display); font-size:1.4rem; }
.hero-stat span{ font-size:.8rem; color: rgba(255,255,255,.78); }

.hero-search{
  position: relative; z-index: 3;
  background:#fff;
  border-radius: var(--radius-lg);
  box-shadow: 0 30px 60px -20px rgba(15,15,15,.35);
  padding: 1.6rem;
}
.hero-search h3{ font-size:1.05rem; margin-bottom:1rem; }
.hero-search .form-label{ font-size:.78rem; font-weight:700; color: var(--text-3); text-transform: none; }

/* ==========================================================================
   Chips / Filters
   ========================================================================== */
.chip{
  display:inline-flex; align-items:center; gap:.4rem;
  border: 1.5px solid var(--line);
  background:#fff;
  border-radius:999px;
  padding:.5rem 1.05rem;
  font-weight:600; font-size:.88rem; color: var(--text-2);
  cursor:pointer; transition: all .16s ease; white-space:nowrap;
}
.chip:hover{ border-color: var(--purple); color: var(--ink); }
.chip.active{
  background: var(--brand-gradient); border-color: transparent; color:#fff;
  box-shadow: var(--shadow-1);
}
.chip-scroll{
  display:flex; gap:.7rem; overflow-x:auto; padding-bottom:.4rem;
  scrollbar-width: thin;
}
.chip-scroll::-webkit-scrollbar{ height:6px; }
.chip-scroll::-webkit-scrollbar-thumb{ background: var(--line); border-radius:4px; }

/* ==========================================================================
   City card
   ========================================================================== */
.city-card{
  position: relative;
  flex: 0 0 190px;
  height: 230px;
  border-radius: var(--radius-md);
  overflow:hidden;
  color:#fff;
  background: linear-gradient(160deg,#3a2a55,#1b1425);
  background-size: cover; background-position:center;
  display:flex; align-items:flex-end; padding:1rem;
  box-shadow: var(--shadow-2);
  transition: transform .2s ease;
}
.city-card:hover{ transform: translateY(-4px); color:#fff; }
.city-card::after{
  content:""; position:absolute; inset:0;
  background: linear-gradient(0deg, rgba(15,15,15,.82) 0%, rgba(15,15,15,.05) 62%);
}
.city-card .content{ position:relative; z-index:2; }
.city-card .content strong{ font-family: var(--font-display); font-size:1.05rem; display:block; }
.city-card .content span{ font-size:.8rem; opacity:.85; }

/* ==========================================================================
   Ticket card (court listing) — perforated ticket motif
   ========================================================================== */
.ticket-card{
  position: relative;
  display:flex;
  background:#fff;
  border-radius: var(--radius-md);
  border: 1px solid var(--line-soft);
  overflow:hidden;
  box-shadow: var(--shadow-2);
  transition: transform .2s ease, box-shadow .2s ease;
  height: 100%;
}
.ticket-card:hover{ transform: translateY(-4px); box-shadow: 0 22px 40px -18px rgba(91,46,255,.28); }
.ticket-card .ticket-image{
  flex: 0 0 42%;
  position:relative;
  min-height: 180px;
  background: linear-gradient(160deg,#e9defc,#ffe2ee);
  background-size: cover; background-position:center;
}
.ticket-card .ticket-badge{
  position:absolute; top:.65rem; left:.65rem;
  background: rgba(15,15,15,.72); color:#fff; font-size:.7rem; font-weight:700;
  border-radius:999px; padding:.28rem .7rem; text-transform: capitalize;
}
.ticket-divider{
  position:relative; width:0;
  border-left:2px dashed var(--line);
}
.ticket-divider::before,.ticket-divider::after{
  content:""; position:absolute; left:-9px; width:18px; height:18px;
  background: var(--bg); border:1px solid var(--line-soft); border-radius:50%;
}
.ticket-divider::before{ top:-9px; }
.ticket-divider::after{ bottom:-9px; }
.bg-tint .ticket-divider::before,.bg-tint .ticket-divider::after{ background: var(--bg-tint); }

.ticket-stub{ flex:1; padding: 1.1rem 1.25rem; display:flex; flex-direction:column; }
.ticket-stub .cat{ font-size:.75rem; font-weight:700; color: var(--purple); text-transform:capitalize; }
.ticket-stub h3{ font-size:1.05rem; margin:.2rem 0 .35rem; line-height:1.3; }
.ticket-stub .meta{ font-size:.82rem; color: var(--text-3); display:flex; align-items:center; gap:.35rem; margin-bottom:.2rem; }
.ticket-stub .spacer{ flex:1; }
.ticket-stub .price-row{ display:flex; align-items:flex-end; justify-content:space-between; margin-top:.85rem; }
.ticket-stub .price{ font-family: var(--font-display); font-weight:700; color: var(--violet); font-size:1.15rem; }
.ticket-stub .price small{ font-family: var(--font-body); font-weight:600; color: var(--text-3); font-size:.72rem; }

@media (max-width: 575px){
  .ticket-card{ flex-direction:column; }
  .ticket-card .ticket-image{ flex-basis: 170px; width:100%; }
  .ticket-divider{ width:auto; height:0; border-left:none; border-top:2px dashed var(--line); }
  .ticket-divider::before,.ticket-divider::after{ top:-9px; left:auto; }
  .ticket-divider::before{ left: 24px; }
  .ticket-divider::after{ right: 24px; left:auto; }
}

/* ==========================================================================
   How it works
   ========================================================================== */
.step-card{ position:relative; padding: 1.6rem 1.4rem 1.4rem; }
.step-card .num{
  font-family: var(--font-display); font-weight:700;
  font-size: 4.2rem; line-height:1;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(91,46,255,.25);
  margin-bottom: -1rem;
}
.step-card h4{ font-size:1.1rem; margin-bottom:.4rem; }
.step-card p{ font-size:.92rem; }

/* ==========================================================================
   Filter bar (courts page)
   ========================================================================== */
.filter-bar{
  background:#fff; border:1px solid var(--line-soft);
  border-radius: var(--radius-md); padding: 1.1rem 1.25rem;
  box-shadow: var(--shadow-2);
}
.filter-bar .form-label{ font-size:.76rem; font-weight:700; color:var(--text-3); margin-bottom:.3rem; }
.form-control, .form-select{
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--line);
  padding: .62rem .9rem;
  font-size: .93rem;
}
.form-control:focus, .form-select:focus{
  border-color: var(--purple);
  box-shadow: 0 0 0 .18rem rgba(155,81,224,.16);
}
.input-icon{ position:relative; }
.input-icon svg{ position:absolute; left:.85rem; top:50%; transform:translateY(-50%); opacity:.5; }
.input-icon .form-control{ padding-left:2.4rem; }

/* ==========================================================================
   Slot picker
   ========================================================================== */
.slot-grid{ display:grid; grid-template-columns: repeat(auto-fill,minmax(78px,1fr)); gap:.55rem; }
.slot-chip{
  border: 1.5px solid var(--line); border-radius: var(--radius-sm);
  background:#fff; padding:.55rem .4rem; text-align:center;
  font-weight:700; font-size:.86rem; color: var(--text-2);
  cursor:pointer; transition: all .14s ease; user-select:none;
}
.slot-chip:hover:not(.disabled){ border-color: var(--purple); color:var(--ink); }
.slot-chip.selected{ background: var(--brand-gradient); border-color:transparent; color:#fff; box-shadow: var(--shadow-1); }
.slot-chip.in-range{ background: var(--bg-tint-2); border-color: var(--purple); color: var(--violet); }
.slot-chip.disabled{ background:#F5F4F7; color: var(--text-3); text-decoration: line-through; cursor:not-allowed; opacity:.7; }

.booking-summary{
  background: var(--bg-tint); border:1px solid var(--line-soft);
  border-radius: var(--radius-md); padding: 1.15rem 1.25rem;
}
.booking-summary .row-line{ display:flex; justify-content:space-between; font-size:.92rem; padding:.35rem 0; color:var(--text-2); }
.booking-summary .row-line.total{ font-weight:700; color:var(--ink); font-size:1.05rem; border-top:1px dashed var(--line); margin-top:.4rem; padding-top:.7rem; }

.price-panel{
  background:#fff; border:1px solid var(--line-soft); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-1); padding: 1.5rem;
}

/* ==========================================================================
   Status badges
   ========================================================================== */
.badge-status{ font-size:.74rem; font-weight:700; border-radius:999px; padding:.3rem .75rem; text-transform:capitalize; display:inline-block; }
.badge-pending{ background:#FFF3D6; color:#9A6B00; }
.badge-paid, .badge-upcoming{ background:#E4F7EA; color:#177A3E; }
.badge-completed{ background:#E7EEFF; color:#2A48C9; }
.badge-cancelled, .badge-failed{ background:#FDEAEE; color:#C9265C; }

/* ==========================================================================
   Booking ticket (bookings page)
   ========================================================================== */
.booking-ticket{
  background:#fff; border:1px solid var(--line-soft); border-radius: var(--radius-md);
  box-shadow: var(--shadow-2); overflow:hidden;
}
.booking-ticket .bt-head{
  display:flex; align-items:center; justify-content:space-between;
  padding: .9rem 1.2rem; border-bottom: 1px dashed var(--line);
  gap: .6rem; flex-wrap:wrap;
}
.booking-ticket .bt-body{ padding: 1rem 1.2rem; display:flex; gap:1rem; flex-wrap:wrap; align-items:center; }
.booking-ticket .bt-thumb{ width:76px; height:76px; border-radius:12px; object-fit:cover; background: var(--bg-tint-2); flex-shrink:0; }
.booking-ticket .bt-actions{ padding: .9rem 1.2rem; border-top:1px solid var(--line-soft); display:flex; gap:.6rem; flex-wrap:wrap; background: var(--bg-tint); }

/* ==========================================================================
   Auth pages
   ========================================================================== */
.auth-shell{ min-height: calc(100vh - 74px); display:flex; }
.auth-visual{
  flex: 0 0 44%;
  position:relative; overflow:hidden;
  background: var(--ink);
  display:flex; align-items:center; justify-content:center;
  padding: 3rem;
}
.auth-visual::before{
  content:""; position:absolute; inset:0; background: var(--brand-gradient); opacity:.95;
}
.auth-visual .court-lines{
  position:absolute; inset:0; opacity:.18;
  background-image:
    repeating-linear-gradient(90deg, transparent 0 90px, rgba(255,255,255,.9) 90px 92px),
    repeating-linear-gradient(0deg, transparent 0 90px, rgba(255,255,255,.9) 90px 92px);
}
.auth-visual .content{ position:relative; z-index:2; color:#fff; max-width:360px; }
.auth-visual h2{ color:#fff; font-size:1.9rem; margin-bottom:.8rem; }
.auth-visual p{ color: rgba(255,255,255,.85); }
.auth-form-side{ flex:1; display:flex; align-items:center; justify-content:center; padding: 2.5rem 1.25rem; }
.auth-card{ width:100%; max-width: 420px; }
@media (max-width: 900px){ .auth-visual{ display:none; } }

/* ==========================================================================
   Footer
   ========================================================================== */
.ja-footer{ background: var(--ink); color: rgba(255,255,255,.7); padding: 3.5rem 0 1.5rem; position:relative; }
.ja-footer::before{ content:""; position:absolute; top:0; left:0; right:0; height:4px; background: var(--brand-gradient); }
.ja-footer h5{ color:#fff; font-family:var(--font-display); font-size:1rem; margin-bottom:1rem; }
.ja-footer a{ color: rgba(255,255,255,.66); font-size:.92rem; }
.ja-footer a:hover{ color:#fff; }
.ja-footer .ja-brand{ color:#fff; }
.ja-footer hr{ border-color: rgba(255,255,255,.12); margin: 2rem 0 1.2rem; }
.ja-footer .fine{ font-size:.82rem; color: rgba(255,255,255,.45); }

/* ==========================================================================
   Misc
   ========================================================================== */
.skeleton{
  background: linear-gradient(90deg, var(--bg-tint-2) 25%, #fff 37%, var(--bg-tint-2) 63%);
  background-size: 400% 100%;
  animation: skeleton-loading 1.4s ease infinite;
  border-radius: var(--radius-sm);
}
@keyframes skeleton-loading{ 0%{ background-position: 100% 50%; } 100%{ background-position: 0 50%; } }

.empty-state{ text-align:center; padding: 3.5rem 1rem; color: var(--text-3); }
.empty-state .icon{ font-size:2.6rem; margin-bottom:.8rem; }

.toast-stack{ position:fixed; top: 90px; right: 1.25rem; z-index: 2000; display:flex; flex-direction:column; gap:.6rem; }
.ja-toast{
  background:#fff; border-radius: var(--radius-sm); box-shadow: var(--shadow-2);
  padding: .85rem 1.1rem; min-width: 260px; max-width: 340px;
  border-left: 4px solid var(--violet); font-size:.9rem; font-weight:600; color: var(--ink);
  animation: toast-in .2s ease;
}
.ja-toast.error{ border-left-color: #E14A6B; }
.ja-toast.success{ border-left-color: #1F9D55; }
@keyframes toast-in{ from{ transform: translateX(20px); opacity:0; } to{ transform:translateX(0); opacity:1; } }

.avatar-upload{ width:88px; height:88px; border-radius:50%; object-fit:cover; background: var(--brand-gradient); }

.pagination .page-link{ border-radius:10px !important; margin:0 3px; border:1px solid var(--line); color: var(--ink); font-weight:600; }
.pagination .page-item.active .page-link{ background: var(--brand-gradient); border-color:transparent; }

.modal-content{ border-radius: var(--radius-md); border:none; }
.modal-header{ border-bottom:1px solid var(--line-soft); }
.modal-footer{ border-top:1px solid var(--line-soft); }

.countdown-pill{
  display:inline-flex; align-items:center; gap:.4rem;
  background:#FFF0F4; color:#C9265C; font-weight:700; font-size:.85rem;
  border-radius:999px; padding:.35rem .85rem;
}

::selection{ background: var(--pink); color:#fff; }