/* ==========================================================================
   DESIGN TOKENS
   Palette: warm stone paper + charcoal-ink + a muted brass accent (a nod to
   Jaipur's marble/brass craft trades, not the generic AI cream+terracotta
   combo). Deep teal as a secondary "trust/clean" color for status states.
   Type: Fraunces (serif, warm, has real character) for headlines, Sora
   (geometric sans) for UI/body. No build step required — plain CSS,
   loads fine on any shared host.
   ========================================================================== */
:root{
  --ink:      #14181F;
  --ink-soft: #2B303A;
  --paper:    #F6F3ED;
  --paper-2:  #EFEAE0;
  --line:     #E1DACB;
  --brass:    #B8863B;
  --brass-d:  #8F6726;
  --teal:     #1F4C46;
  --teal-l:   #E4EEEC;
  --success:  #2F7D5E;
  --danger:   #B3432B;
  --danger-l: #F7E7E1;
  --muted:    #6B6459;
  --radius:   10px;
  --radius-lg:16px;
  --shadow:   0 1px 2px rgba(20,24,31,.06), 0 8px 24px rgba(20,24,31,.05);
  --maxw:     1180px;
}

*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:'Sora', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size:16px; line-height:1.55; -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{
  font-family:'Fraunces', Georgia, serif; color:var(--ink);
  margin:0 0 .4em; font-weight:600; letter-spacing:-.01em;
}
h1{ font-size:clamp(1.9rem,5vw,3rem); line-height:1.08; }
h2{ font-size:clamp(1.5rem,3.6vw,2.1rem); line-height:1.15; }
h3{ font-size:1.2rem; }
p{ margin:0 0 1em; color:var(--ink-soft); }
a{ color:inherit; text-decoration:none; }
img{ max-width:100%; display:block; }
.container{ max-width:var(--maxw); margin:0 auto; padding:0 20px; }
.muted{ color:var(--muted); }

@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; }
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5em;
  padding:.85em 1.5em; border-radius:var(--radius); font-weight:600;
  font-size:.95rem; border:1px solid transparent; cursor:pointer;
  transition:transform .15s ease, background .15s ease, border-color .15s ease;
  line-height:1;
}
.btn:active{ transform:scale(.98); }
.btn-primary{ background:var(--brass); color:#fff; }
.btn-primary:hover{ background:var(--brass-d); }
.btn-dark{ background:var(--ink); color:#fff; }
.btn-dark:hover{ background:var(--ink-soft); }
.btn-outline{ background:transparent; border-color:var(--line); color:var(--ink); }
.btn-outline:hover{ border-color:var(--ink); }
.btn-danger{ background:var(--danger); color:#fff; }
.btn-ghost{ background:transparent; color:var(--muted); }
.btn-block{ width:100%; }
.btn-sm{ padding:.55em 1em; font-size:.85rem; }

/* ---------- Forms ---------- */
label{ display:block; font-size:.85rem; font-weight:600; margin-bottom:.4em; color:var(--ink-soft); }
.input, select.input, textarea.input{
  width:100%; padding:.85em 1em; border:1px solid var(--line); border-radius:var(--radius);
  background:#fff; font-family:inherit; font-size:1rem; color:var(--ink);
}
.input:focus, select.input:focus, textarea.input:focus{
  outline:2px solid var(--brass); outline-offset:1px; border-color:var(--brass);
}
.field{ margin-bottom:1.1em; }
.error-text{ color:var(--danger); font-size:.82rem; margin-top:.35em; }
.help-text{ color:var(--muted); font-size:.82rem; margin-top:.35em; }
.otp-boxes{ display:flex; gap:.5em; justify-content:center; }
.otp-boxes input{
  width:2.6em; height:3em; text-align:center; font-size:1.4rem; font-weight:600;
  border:1px solid var(--line); border-radius:var(--radius); background:#fff;
}
.phone-input-group{ display:flex; gap:.5em; }
.country-fixed{
  flex:0 0 auto; display:flex; align-items:center; padding:0 .9em;
  border:1px solid var(--line); border-radius:var(--radius); background:var(--paper-2);
  font-size:.95rem; font-weight:600; color:var(--ink-soft);
}
.phone-input-group input[type="tel"]{ flex:1; min-width:0; }
.btn-link-resend{ background:none; border:none; padding:0; color:var(--brass-d); font-weight:700; font-size:.88rem; cursor:pointer; text-decoration:underline; }
.btn-link-resend:disabled{ color:var(--muted); cursor:not-allowed; text-decoration:none; }

/* ---------- Cards ---------- */
.card{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:1.4em; box-shadow:var(--shadow);
}
.auth-card{ max-width:400px; margin:8vh auto; }

/* ---------- Badges / status ---------- */
.badge{ display:inline-block; padding:.3em .75em; border-radius:999px; font-size:.78rem; font-weight:600; }
.badge-success{ background:#E4F3EC; color:var(--success); }
.badge-warn{ background:#FBF0DE; color:var(--brass-d); }
.badge-danger{ background:var(--danger-l); color:var(--danger); }
.badge-muted{ background:var(--paper-2); color:var(--muted); }

/* ---------- Customer site header / nav ---------- */
.site-header{
  position:sticky; top:0; z-index:40; background:rgba(246,243,237,.92);
  backdrop-filter:blur(6px); border-bottom:1px solid var(--line);
}
.site-header .row{ display:flex; align-items:center; justify-content:space-between; padding:.9em 0; }
.brand{ display:flex; align-items:center; gap:.6em; font-family:'Fraunces',serif; font-weight:600; font-size:1.15rem; }
.brand img{ height:32px; width:32px; border-radius:8px; object-fit:cover; }

/* ---------- Hero ---------- */
.hero{
  position:relative; overflow:hidden; color:#fff;
  background:linear-gradient(160deg, var(--ink) 0%, var(--teal) 130%);
  padding:3.2em 0 2.6em;
}
.hero h1{ color:#fff; max-width:14ch; }
.hero p{ color:#D8D3C6; max-width:42ch; font-size:1.05rem; }
.hero .cta-row{ display:flex; gap:.75em; margin-top:1.4em; flex-wrap:wrap; }

/* ---------- Homepage banner slideshow (admin-managed) ---------- */
.banner-slider{ position:relative; width:100%; aspect-ratio:16/10; max-height:420px; overflow:hidden; background:var(--ink); }
@media (min-width:768px){ .banner-slider{ aspect-ratio:21/8; } }
.banner-slide{ position:absolute; inset:0; opacity:0; transition:opacity .6s ease; }
.banner-slide.is-active{ opacity:1; z-index:1; }
.banner-slide img{ width:100%; height:100%; object-fit:cover; }
.banner-caption{
  position:absolute; left:0; right:0; bottom:0; padding:1.6em 1.2em 1.8em;
  background:linear-gradient(to top, rgba(20,24,31,.85), transparent);
  color:#fff;
}
.banner-caption h1{ color:#fff; font-size:1.5rem; margin:0 0 .2em; }
.banner-caption p{ color:#E8E3D6; margin:0 0 .8em; font-size:.92rem; }
.banner-dots{ position:absolute; bottom:.6em; left:50%; transform:translateX(-50%); display:flex; gap:.4em; z-index:2; }
.banner-dot{ width:8px; height:8px; border-radius:50%; border:none; background:rgba(255,255,255,.5); padding:0; cursor:pointer; }
.banner-dot.is-active{ background:#fff; }

/* ---------- Category grid (homepage) ---------- */
.category-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:1em; }
.category-tile{ text-align:center; }
.category-tile .thumb{
  aspect-ratio:1/1; border-radius:18px; background:var(--paper-2);
  border:1px solid var(--line); overflow:hidden; margin:0 0 .6em;
  display:flex; align-items:center; justify-content:center;
  transition:border-color .15s ease, transform .15s ease;
}
.category-tile:active .thumb{ transform:scale(.96); }
.category-tile:hover .thumb{ border-color:var(--brass); }
.category-tile .thumb img{ width:100%; height:100%; object-fit:cover; }
.category-tile .thumb .emoji-fallback{ font-size:2.4rem; }
.category-tile span{ font-size:.82rem; font-weight:600; color:var(--ink-soft); line-height:1.3; }
@media (min-width:640px){
  .category-grid{ grid-template-columns:repeat(6,1fr); }
}

/* ---------- Service / category grid cards ---------- */
.grid{ display:grid; gap:1.1em; grid-template-columns:repeat(2,1fr); }
@media (min-width:640px){ .grid{ grid-template-columns:repeat(3,1fr); } }
@media (min-width:960px){ .grid{ grid-template-columns:repeat(4,1fr); } }
.svc-card{
  border:1px solid var(--line); border-radius:var(--radius-lg); overflow:hidden;
  background:#fff; transition:border-color .15s ease;
}
.svc-card:hover{ border-color:var(--brass); }
.svc-card .thumb{ aspect-ratio:4/3; background:var(--paper-2); overflow:hidden; }
.svc-card .thumb img{ width:100%; height:100%; object-fit:cover; }
.svc-card .body{ padding:.9em 1em 1.1em; }
.svc-card .price{ color:var(--brass-d); font-weight:700; }

/* ---------- Bottom nav (mobile app feel) ---------- */
.bottom-nav{
  position:fixed; left:0; right:0; bottom:0; z-index:50;
  display:flex; background:#fff; border-top:1px solid var(--line);
  padding:.5em 0 max(.5em, env(safe-area-inset-bottom));
}
.bottom-nav a{
  flex:1; display:flex; flex-direction:column; align-items:center; gap:.2em;
  font-size:.72rem; color:var(--muted); font-weight:600;
}
.bottom-nav a.active{ color:var(--brass-d); }
.page-bottom-spacer{ height:70px; }

/* ---------- WhatsApp support FAB ---------- */
.wa-fab{
  position:fixed; right:18px; bottom:82px; z-index:60;
  width:56px; height:56px; border-radius:50%; background:#25D366;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 6px 18px rgba(37,211,102,.45);
}
@media (min-width:768px){ .wa-fab{ bottom:24px; } }

/* ---------- Admin / Staff shell ---------- */
.admin-shell{ display:flex; min-height:100vh; }
.admin-sidebar{
  width:250px; background:var(--ink); color:#EDEAE2; flex-shrink:0;
  display:flex; flex-direction:column; padding:1.4em 1em 2.5em;
  overflow-y:auto; -webkit-overflow-scrolling:touch;
}
.admin-sidebar .brand{ color:#fff; padding:0 .6em 1.4em; }
.admin-sidebar nav a{
  display:block; padding:.7em .9em; border-radius:8px; color:#C7C2B4;
  font-size:.9rem; font-weight:600; margin-bottom:.15em;
}
.admin-sidebar nav a:hover, .admin-sidebar nav a.active{ background:rgba(255,255,255,.08); color:#fff; }
.admin-sidebar .group-label{ font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; color:#8A8578; margin:1.1em .9em .4em; }
.admin-main{ flex:1; min-width:0; }
.admin-topbar{
  display:flex; align-items:center; justify-content:space-between;
  padding:1em 1.6em; border-bottom:1px solid var(--line); background:#fff;
}
.admin-content{ padding:1.6em; max-width:1100px; }
.stat-grid{ display:grid; gap:1em; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); margin-bottom:1.6em; }
.stat-card{ background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg); padding:1.2em; }
.stat-card .num{ font-family:'Fraunces',serif; font-size:1.9rem; font-weight:600; }
.stat-card .label{ color:var(--muted); font-size:.85rem; }

table.admin-table{ width:100%; border-collapse:collapse; background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg); overflow:hidden; }
table.admin-table th{ text-align:left; font-size:.78rem; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); padding:.9em 1em; background:var(--paper-2); }
table.admin-table td{ padding:.9em 1em; border-top:1px solid var(--line); font-size:.92rem; }

/* ---------- Mobile responsiveness for the whole admin panel ---------- */
@media (max-width:640px){
  .admin-content{ padding:1em .8em; }
  /* Every admin table scrolls horizontally within itself instead of
     forcing the whole page to scroll sideways or squashing columns
     unreadably small. */
  table.admin-table{ display:block; overflow-x:auto; white-space:nowrap; -webkit-overflow-scrolling:touch; }
  table.admin-table th, table.admin-table td{ white-space:nowrap; }
  /* Any side-by-side form fields (built with inline flex styles
     throughout the admin views) stack into a single column instead of
     squeezing together. */
  .admin-content div[style*="display:flex"]{ flex-wrap: wrap !important; }
  .admin-content div[style*="display:flex"] > div,
  .admin-content div[style*="display:flex"] > input,
  .admin-content div[style*="display:flex"] > select{ min-width: 140px; }
  .admin-topbar{ padding:.8em 1em; }
  .card{ padding:1.1em; }
}

.mobile-sidebar-toggle{ display:none; }
@media (max-width:860px){
  .admin-sidebar{ position:fixed; inset:0 auto 0 0; transform:translateX(-100%); transition:transform .2s ease; z-index:70; }
  .admin-sidebar.open{ transform:translateX(0); }
  .mobile-sidebar-toggle{ display:inline-flex; }
}

/* ---------- Staff/Partner portal — its own simple shell, no admin sidebar ---------- */
.staff-topbar{
  display:flex; align-items:center; justify-content:space-between;
  padding:1em 1.2em; background:#fff; border-bottom:1px solid var(--line);
  position:sticky; top:0; z-index:10;
}
.staff-content{ max-width:640px; margin:0 auto; padding:1.4em 1em 3em; }

.alert{ padding:.9em 1.1em; border-radius:var(--radius); margin-bottom:1.2em; font-size:.9rem; }
.alert-success{ background:#E4F3EC; color:var(--success); border:1px solid #bfe3d1; }
.alert-error{ background:var(--danger-l); color:var(--danger); border:1px solid #eec5b6; }

/* ---------- Admin: manual time-slot on/off toggles ---------- */
.slot-toggle-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(110px,1fr)); gap:.6em; }
.slot-toggle{
  display:flex; align-items:center; justify-content:center; padding:.8em .5em;
  border:1px solid var(--line); border-radius:var(--radius); background:#fff;
  cursor:pointer; font-weight:600; font-size:.88rem; color:var(--ink); text-align:center;
  transition:background .15s ease, border-color .15s ease, color .15s ease;
}
.slot-toggle input{ position:absolute; opacity:0; pointer-events:none; }
.slot-toggle.is-off{ background:var(--danger-l); border-color:#eec5b6; color:var(--danger); text-decoration:line-through; }