@import url('https://fonts.googleapis.com/css2?family=Big+Shoulders+Display:wght@700;800;900&family=Manrope:wght@400;500;600;700;800&family=IBM+Plex+Mono:wght@500;600;700&display=swap');

:root{
  /* These match the actual mobile app's screen palette exactly (not the
     brighter logo/marketing green) — the whole point is the website should
     look like the app, not like a separate brand. */
  --cream:#F5F1E6;
  --ink:#2B3328;
  --ink-soft:#6B7566;
  --sage:#7A9166;
  --sage-dark:#5E7A4E;
  --sage-light:#E7EEDF;
  --gold:#C9A227;
  --line:rgba(43,51,40,0.12);
  --white:#FFFDF8;
  --mint:#E7EEDF;
  --yellow:#C9A227;
  --blue:#4C6B5E;
  --radius:16px;
  --ease: cubic-bezier(.22,1,.36,1);
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family:'Manrope', Arial, sans-serif;
  background:var(--cream);
  color:var(--ink);
  line-height:1.6;
}
a{color:inherit;}
.wrap{max-width:1000px; margin:0 auto; padding:0 24px;}
h1,h2,h3{font-family:'Big Shoulders Display', sans-serif; font-weight:800; letter-spacing:-0.01em; line-height:1.05;}

/* ================= ANIMATIONS ================= */
@keyframes fadeSlideIn{from{opacity:0; transform:translateY(14px);} to{opacity:1; transform:translateY(0);}}
@keyframes fadeIn{from{opacity:0;} to{opacity:1;}}
@keyframes popIn{from{opacity:0; transform:scale(.9);} to{opacity:1; transform:scale(1);}}
@keyframes pulse{0%,100%{transform:scale(1); opacity:1;} 50%{transform:scale(1.3); opacity:.6;}}
@keyframes shimmer{0%{background-position:-200px 0;} 100%{background-position:calc(200px + 100%) 0;}}
@keyframes typingDot{0%,60%,100%{transform:translateY(0); opacity:.4;} 30%{transform:translateY(-4px); opacity:1;}}
@keyframes float{0%,100%{transform:translateY(0px) rotate(0deg);} 50%{transform:translateY(-10px) rotate(3deg);}}
@keyframes floatSlow{0%,100%{transform:translateY(0px);} 50%{transform:translateY(-16px);}}
@keyframes drawCheck{from{stroke-dashoffset:24;} to{stroke-dashoffset:0;}}
@keyframes spinSlow{from{transform:rotate(0deg);} to{transform:rotate(360deg);}}
@keyframes wiggle{0%,100%{transform:rotate(0deg);} 25%{transform:rotate(-4deg);} 75%{transform:rotate(4deg);}}

.section:not(.hidden){animation:fadeSlideIn .4s var(--ease);}

/* ================= TOPBAR / NAV ================= */
.topbar{
  display:flex; justify-content:space-between; align-items:center;
  padding:16px 24px; border-bottom:1px solid var(--line); background:var(--white);
  position:sticky; top:0; z-index:30; backdrop-filter:blur(8px);
}
.topbar .logo{font-family:'Big Shoulders Display', sans-serif; font-size:20px; font-weight:800; transition:transform .2s var(--ease);}
.topbar .logo:hover{transform:scale(1.03);}
.topbar .who{font-size:14px; color:var(--ink-soft); display:flex; align-items:center; gap:14px;}

.navtabs{
  display:flex; gap:6px; padding:14px 24px; background:var(--white);
  border-bottom:1px solid var(--line); overflow-x:auto;
  position:sticky; top:65px; z-index:29;
}
.navtab{
  padding:9px 16px; border-radius:100px; font-size:13.5px; font-weight:600;
  border:none; background:transparent; color:var(--ink-soft); cursor:pointer; white-space:nowrap;
  transition:background .18s var(--ease), color .18s var(--ease), transform .1s;
}
.navtab.active{background:var(--ink); color:var(--cream);}
.navtab:hover:not(.active){background:var(--sage-light); color:var(--ink);}
.navtab:active{transform:scale(.96);}

/* ================= HOME HERO (with illustration) ================= */
.home-hero{
  background:linear-gradient(135deg, var(--sage) 0%, var(--sage-dark) 100%);
  border-radius:22px; padding:40px 36px; margin-bottom:28px; color:var(--white);
  position:relative; overflow:hidden; min-height:150px;
}
.home-hero .hero-copy{position:relative; z-index:2; max-width:60%;}
.home-hero h1{font-size:32px; margin-bottom:8px;}
.home-hero p{font-size:14.5px; color:rgba(245,241,230,.92); max-width:420px;}
.home-hero-art{
  position:absolute; right:-10px; bottom:-18px; width:180px; height:180px; z-index:1; opacity:.95;
  animation:floatSlow 5s ease-in-out infinite;
}
.home-hero::after{
  content:''; position:absolute; top:-30%; right:15%; width:200px; height:200px;
  background:radial-gradient(circle, rgba(255,255,255,.15), transparent 70%); border-radius:50%;
}

.quick-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-bottom:28px;}
.quick-card{
  background:var(--white); border-radius:16px; padding:24px; border:1px solid var(--line);
  cursor:pointer; transition:box-shadow .25s var(--ease), transform .25s var(--ease), border-color .25s;
  animation:popIn .4s var(--ease) backwards; position:relative; overflow:hidden;
}
.quick-card:nth-child(1){animation-delay:.03s;}
.quick-card:nth-child(2){animation-delay:.1s;}
.quick-card:nth-child(3){animation-delay:.17s;}
.quick-card:hover{transform:translateY(-5px); box-shadow:0 18px 34px -18px rgba(43,51,40,.3); border-color:var(--sage);}
.quick-card:active{transform:translateY(-1px) scale(.99);}
.quick-card .icon{
  width:46px; height:46px; border-radius:13px; display:flex; align-items:center; justify-content:center;
  margin-bottom:14px; transition:transform .35s var(--ease);
}
.quick-card:hover .icon{animation:wiggle .5s var(--ease);}
.quick-card h4{font-family:'Manrope',sans-serif; font-weight:800; font-size:16px; margin-bottom:4px;}
.quick-card p{font-size:13px; color:var(--ink-soft);}
@media(max-width:860px){.quick-grid{grid-template-columns:1fr;} .home-hero .hero-copy{max-width:100%;} .home-hero-art{display:none;}}

.mini-status{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  background:var(--white); border-radius:16px; padding:20px 22px; border:1px solid var(--line); margin-bottom:16px;
  animation:fadeSlideIn .4s var(--ease) .12s backwards;
}
.mini-status .label{font-size:12px; color:var(--ink-soft); margin-bottom:4px; font-weight:600; text-transform:uppercase; letter-spacing:.03em;}
.mini-status .value{font-size:16px; font-weight:700;}

/* ================= BUTTONS ================= */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:12px 22px; border-radius:100px; font-weight:700; font-size:14px;
  cursor:pointer; border:none; background:var(--sage-dark); color:var(--white);
  transition:background .18s var(--ease), transform .12s var(--ease), box-shadow .18s var(--ease);
}
.btn:hover:not(:disabled){background:var(--ink); box-shadow:0 8px 20px -10px rgba(43,51,40,.45);}
.btn:active:not(:disabled){transform:scale(.96);}
.btn-outline{background:transparent; color:var(--ink); border:1.5px solid var(--ink);}
.btn-outline:hover:not(:disabled){background:var(--ink); color:var(--cream);}
.btn-block{width:100%;}
.btn:disabled{opacity:.5; cursor:not-allowed;}

.card{background:var(--white); border-radius:var(--radius); padding:28px; border:1px solid var(--line); transition:box-shadow .25s var(--ease);}

/* ================= AUTH PAGES ================= */
.auth-shell{
  min-height:100vh; display:flex; align-items:center; justify-content:center; padding:24px;
  background:radial-gradient(circle at 15% 15%, rgba(122,145,102,.10), transparent 50%),
             radial-gradient(circle at 85% 85%, rgba(43,51,40,.06), transparent 50%);
  position:relative; overflow:hidden;
}
.auth-shell::before, .auth-shell::after{
  content:''; position:absolute; border-radius:50%; opacity:.5;
}
.auth-shell::before{width:280px; height:280px; background:var(--sage-light); top:-80px; left:-80px; animation:floatSlow 7s ease-in-out infinite;}
.auth-shell::after{width:200px; height:200px; background:var(--sage-light); bottom:-60px; right:-60px; animation:floatSlow 6s ease-in-out infinite reverse;}
.auth-card{width:100%; max-width:400px; animation:fadeSlideIn .45s var(--ease); position:relative; z-index:2;}
.auth-card h1{font-size:28px; margin-bottom:6px;}
.auth-card p.sub{color:var(--ink-soft); font-size:14px; margin-bottom:24px;}

.field{margin-bottom:16px;}
.field label{display:block; font-size:13px; font-weight:700; margin-bottom:6px;}
.field input, .field select, .field textarea{
  width:100%; padding:11px 14px; border-radius:10px; border:1.5px solid var(--line);
  font-size:14px; font-family:inherit; background:var(--white);
  transition:border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.field input:focus, .field select:focus, .field textarea:focus{
  outline:none; border-color:var(--sage); box-shadow:0 0 0 3px rgba(122,145,102,.18);
}

.role-toggle{display:flex; gap:8px; margin-bottom:20px;}
.role-toggle label{
  flex:1; text-align:center; padding:10px; border-radius:10px; border:1.5px solid var(--line);
  font-size:13px; font-weight:700; cursor:pointer; color:var(--ink-soft);
  transition:background .18s var(--ease), border-color .18s var(--ease), color .18s var(--ease);
}
.role-toggle input{display:none;}
.role-toggle input:checked + span{color:var(--ink);}
.role-toggle label:has(input:checked){background:var(--sage-light); border-color:var(--sage-dark);}

.error-msg{background:#FBE7E7; color:#8A3A3A; padding:10px 14px; border-radius:10px; font-size:13.5px; margin-bottom:14px; animation:popIn .25s var(--ease);}
.success-msg{background:var(--sage-light); color:var(--sage-dark); padding:10px 14px; border-radius:10px; font-size:13.5px; margin-bottom:14px; animation:popIn .25s var(--ease);}
.error-banner{background:#FBE7E7; color:#8A3A3A; padding:12px 20px; font-size:13px; font-weight:600; border-radius:10px; animation:popIn .25s var(--ease);}
.success-banner{background:var(--sage-light); color:var(--sage-dark); padding:12px 20px; font-size:13px; font-weight:600; border-radius:10px; animation:popIn .25s var(--ease);}

/* ================= LISTS / GYMS ================= */
.section{padding:32px 0;}
.city-row{display:flex; gap:10px; margin-bottom:24px; flex-wrap:wrap;}
.city-pill{
  padding:8px 16px; border-radius:100px; font-size:13.5px; font-weight:600;
  border:1.5px solid var(--line); background:var(--white); cursor:pointer; color:var(--ink-soft);
  transition:background .18s var(--ease), color .18s var(--ease), transform .1s;
}
.city-pill:hover{border-color:var(--sage);}
.city-pill:active{transform:scale(.95);}
.city-pill.active{background:var(--ink); color:var(--cream); border-color:var(--ink);}

.gym-list{display:grid; grid-template-columns:repeat(auto-fill, minmax(260px,1fr)); gap:18px;}
.gym-item{
  background:var(--white); border-radius:var(--radius); padding:20px; border:1px solid var(--line);
  cursor:pointer; transition:box-shadow .25s var(--ease), transform .25s var(--ease), border-color .25s;
  animation:popIn .35s var(--ease) backwards;
}
.gym-item:hover{box-shadow:0 16px 30px -16px rgba(43,51,40,.3); transform:translateY(-3px); border-color:var(--sage);}
.gym-item:active{transform:translateY(-1px) scale(.99);}
.gym-item .row{display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:6px;}
.gym-item h4{font-family:'Manrope',sans-serif; font-weight:800; font-size:17px;}
.rate-tag{font-family:'IBM Plex Mono',monospace; background:var(--sage-light); color:var(--sage-dark); font-size:12.5px; font-weight:700; padding:3px 10px; border-radius:100px;}
.gym-item .loc{font-size:13px; color:var(--ink-soft); margin-bottom:10px;}
.tags{display:flex; gap:6px; flex-wrap:wrap;}
.tag{font-size:11px; font-weight:600; background:var(--sage-light); color:var(--sage-dark); padding:3px 9px; border-radius:100px;}

.slot-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(90px,1fr)); gap:10px; margin:20px 0;}
.slot-btn{
  padding:12px 6px; border-radius:10px; border:1.5px solid var(--line); background:var(--white);
  font-size:13px; font-weight:700; cursor:pointer; text-align:center;
  transition:background .18s var(--ease), border-color .18s var(--ease), transform .12s var(--ease), color .18s;
  animation:popIn .3s var(--ease) backwards;
}
.slot-btn:hover:not(.full):not(.selected){border-color:var(--sage); transform:translateY(-2px);}
.slot-btn:active:not(.full){transform:scale(.95);}
.slot-btn.full{opacity:.4; cursor:not-allowed; text-decoration:line-through;}
.slot-btn.selected{background:var(--sage); border-color:var(--sage-dark); color:var(--white); animation:popIn .25s var(--ease);}
.slot-btn small{display:block; font-weight:500; font-size:11px; margin-top:2px;}

/* ================= EMPTY STATES (illustrated) ================= */
.empty{color:var(--ink-soft); font-size:14px; padding:24px 0; animation:fadeIn .3s var(--ease);}
.empty-illustrated{text-align:center; padding:40px 20px; animation:fadeIn .4s var(--ease);}
.empty-illustrated svg{margin-bottom:16px; animation:floatSlow 4s ease-in-out infinite;}
.empty-illustrated p{color:var(--ink-soft); font-size:14px;}

.booking-item{
  display:flex; justify-content:space-between; align-items:center; gap:16px;
  background:var(--white); border-radius:var(--radius); padding:18px 22px; border:1px solid var(--line);
  margin-bottom:12px; transition:box-shadow .2s var(--ease), transform .2s var(--ease);
  animation:fadeSlideIn .35s var(--ease) backwards;
}
.booking-item:hover{box-shadow:0 10px 24px -16px rgba(43,51,40,.25); transform:translateX(2px);}
.booking-item .status{font-size:12px; font-weight:700; padding:4px 12px; border-radius:100px; text-transform:capitalize;}
.status.confirmed{background:var(--blue); color:var(--cream);}
.status.checked_in{background:var(--sage); color:#fff;}
.status.pending_payment{background:var(--yellow); color:#fff;}
.status.cancelled{background:#E8D5D5; color:#7A3D3D;}
.status.open{background:var(--sage-light); color:var(--sage-dark);}
.status.in_progress{background:var(--yellow); color:#fff;}
.status.resolved{background:var(--sage); color:#fff;}

.modal-backdrop{
  position:fixed; inset:0; background:rgba(43,51,40,.55); display:flex; align-items:center; justify-content:center;
  padding:20px; z-index:100; animation:fadeIn .2s var(--ease); backdrop-filter:blur(2px);
}
.modal{background:var(--white); border-radius:20px; padding:30px; max-width:360px; width:100%; text-align:center; animation:popIn .3s var(--ease);}
.modal img{margin:16px auto; border-radius:12px; display:block;}
.modal .success-check{margin:0 auto 8px; animation:popIn .4s var(--ease) .1s backwards;}
.hidden{display:none !important;}

.owner-form .field{margin-bottom:14px;}
table{width:100%; border-collapse:collapse; font-size:14px;}
th,td{text-align:left; padding:10px 8px; border-bottom:1px solid var(--line);}
th{color:var(--ink-soft); font-weight:700; font-size:12.5px; text-transform:uppercase;}
tr{transition:background .15s;}
tbody tr:hover{background:var(--sage-light);}

.skeleton{background:linear-gradient(90deg, var(--sage-light) 25%, #f3f6ef 37%, var(--sage-light) 63%); background-size:400% 100%; animation:shimmer 1.4s ease infinite; border-radius:10px;}
.bell-dot{animation:pulse 1.6s ease infinite;}
.typing-dots span{display:inline-block; width:6px; height:6px; margin:0 1px; background:var(--sage-dark); border-radius:50%; animation:typingDot 1.2s ease infinite;}
.typing-dots span:nth-child(2){animation-delay:.15s;}
.typing-dots span:nth-child(3){animation-delay:.3s;}

/* ---------- Slot templates (owner Manage Slots) ---------- */
.slot-row{display:flex; align-items:center; gap:14px; padding:16px 0; border-bottom:1px solid var(--line);}
.slot-row:last-child{border-bottom:none;}
.slot-row.is-off{opacity:.6;}
.slot-hour{font-weight:700; font-size:15px;}
.slot-status{font-size:12.5px; color:var(--sage-dark); font-weight:600; margin-top:2px;}
.slot-stepper{display:flex; align-items:center; gap:2px; background:var(--cream); border:1px solid var(--line); border-radius:100px; padding:2px;}
.slot-stepper button{width:28px; height:28px; border-radius:50%; border:none; background:transparent; font-size:16px; font-weight:700; cursor:pointer; color:var(--ink);}
.slot-stepper button:hover{background:var(--white);}
.slot-stepper span{min-width:24px; text-align:center; font-weight:700; font-size:14px;}
.toggle-switch{position:relative; display:inline-block; width:42px; height:24px; flex-shrink:0;}
.toggle-switch input{opacity:0; width:0; height:0;}
.toggle-slider{position:absolute; inset:0; background:var(--line); border-radius:100px; cursor:pointer; transition:.15s var(--ease);}
.toggle-slider:before{content:""; position:absolute; width:18px; height:18px; left:3px; top:3px; background:#fff; border-radius:50%; transition:.15s var(--ease); box-shadow:0 1px 3px rgba(0,0,0,.2);}
.toggle-switch input:checked + .toggle-slider{background:var(--sage-dark);}
.toggle-switch input:checked + .toggle-slider:before{transform:translateX(18px);}
.toggle-switch input:disabled + .toggle-slider{opacity:.5; cursor:default;}
.new-slot-form{display:flex; gap:10px; flex-wrap:wrap; align-items:flex-end;}
.meridiem-toggle{display:flex; border:1px solid var(--line); border-radius:10px; overflow:hidden;}
.meridiem-toggle button{padding:11px 16px; border:none; background:var(--white); font-weight:700; font-size:13px; cursor:pointer; color:var(--ink);}
.meridiem-toggle button.active{background:var(--sage-dark); color:#fff;}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important;}
}