@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{
  --sage:#6DA811;
  --sage-dark:#4F7D0C;
  --mint:#E7EEDF;
  --cream:#F5F1E6;
  --yellow:#C48F28;
  --blue:#35474F;
  --ink:#0A1C27;
  --ink-soft:#5C6B6E;
  --white:#FFFDF8;
  --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;}

/* ---------- Entrance animation for view switches ---------- */
@keyframes fadeSlideIn{
  from{opacity:0; transform:translateY(10px);}
  to{opacity:1; transform:translateY(0);}
}
.section:not(.hidden){animation:fadeSlideIn .38s var(--ease);}

@keyframes fadeIn{
  from{opacity:0;}
  to{opacity:1;}
}
@keyframes popIn{
  from{opacity:0; transform:scale(.92);}
  to{opacity:1; transform:scale(1);}
}
@keyframes pulse{
  0%,100%{transform:scale(1); opacity:1;}
  50%{transform:scale(1.25); opacity:.7;}
}
@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;}
}

.topbar{
  display:flex; justify-content:space-between; align-items:center;
  padding:16px 24px; border-bottom:1px solid rgba(10,28,39,.08); 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:opacity .15s;}
.topbar .logo:hover{opacity:.75;}
.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 rgba(10,28,39,.08); 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(--mint); color:var(--ink);}
.navtab:active{transform:scale(.96);}

.home-hero{
  background:linear-gradient(135deg, var(--sage) 0%, var(--sage-dark) 100%);
  border-radius:20px; padding:36px 32px; margin-bottom:28px; color:var(--white);
  position:relative; overflow:hidden;
}
.home-hero::after{
  content:''; position:absolute; top:-40%; right:-10%; width:220px; height:220px;
  background:radial-gradient(circle, rgba(255,255,255,.18), transparent 70%);
  border-radius:50%;
}
.home-hero h1{font-size:30px; margin-bottom:8px; position:relative;}
.home-hero p{font-size:14.5px; color:rgba(245,241,230,.9); max-width:480px; position:relative;}

.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 rgba(10,28,39,.07);
  cursor:pointer; transition:box-shadow .25s var(--ease), transform .25s var(--ease), border-color .25s;
  animation:popIn .35s var(--ease) backwards;
}
.quick-card:nth-child(1){animation-delay:.02s;}
.quick-card:nth-child(2){animation-delay:.08s;}
.quick-card:nth-child(3){animation-delay:.14s;}
.quick-card:hover{transform:translateY(-4px); box-shadow:0 16px 32px -16px rgba(10,28,39,.25); border-color:var(--sage);}
.quick-card:active{transform:translateY(-1px) scale(.99);}
.quick-card .icon{
  width:44px; height:44px; border-radius:12px; display:flex; align-items:center; justify-content:center;
  margin-bottom:14px; transition:transform .3s var(--ease);
}
.quick-card:hover .icon{transform:scale(1.1) rotate(-4deg);}
.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;}}

.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 rgba(10,28,39,.07); margin-bottom:16px;
  animation:fadeSlideIn .4s var(--ease) .1s 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;}

.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(10,28,39,.4);}
.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 rgba(10,28,39,.07);
  transition:box-shadow .25s var(--ease);
}

.auth-shell{
  min-height:100vh; display:flex; align-items:center; justify-content:center; padding:24px;
  background:radial-gradient(circle at 20% 10%, rgba(109,168,17,.06), transparent 50%),
             radial-gradient(circle at 80% 90%, rgba(10,28,39,.04), transparent 50%);
}
.auth-card{width:100%; max-width:400px; animation:fadeSlideIn .45s var(--ease);}
.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 rgba(10,28,39,.15);
  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(109,168,17,.15);
}

.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 rgba(10,28,39,.15);
  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(--mint); 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(--mint); 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(--mint); color:var(--sage-dark); padding:12px 20px; font-size:13px; font-weight:600; border-radius:10px; animation:popIn .25s var(--ease);}

.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 rgba(10,28,39,.15); 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 rgba(10,28,39,.07);
  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(10,28,39,.28); 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(--mint); 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(--mint); 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 rgba(10,28,39,.15); 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{color:var(--ink-soft); font-size:14px; padding:24px 0; animation:fadeIn .3s var(--ease);}

.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 rgba(10,28,39,.07);
  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(10,28,39,.22); 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(--mint); 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(10,28,39,.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;}
.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 rgba(10,28,39,.08);}
th{color:var(--ink-soft); font-weight:700; font-size:12.5px; text-transform:uppercase;}
tr{transition:background .15s;}
tbody tr:hover{background:var(--mint);}

/* ---------- Loading skeleton shimmer ---------- */
.skeleton{
  background:linear-gradient(90deg, var(--mint) 25%, #f3f6ef 37%, var(--mint) 63%);
  background-size:400% 100%;
  animation:shimmer 1.4s ease infinite;
  border-radius:10px;
}

/* ---------- Notification bell pulse ---------- */
.bell-dot{animation:pulse 1.6s ease infinite;}

/* ---------- Chat typing indicator dots ---------- */
.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;}

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