/* ═══════════════════════════════════════════════════════════
   pages.css — Page-specific layouts
   ═══════════════════════════════════════════════════════════ */
 
/* ── HOME HERO ───────────────────────────────────────────── */
.hero{
  min-height:calc(100vh - var(--nav-h));
  display:grid;grid-template-columns:1fr 1fr;align-items:stretch;
  gap:0;padding:0;position:relative;overflow:hidden;
  background:var(--cream)
}
.hero-text{position:relative;z-index:1;padding:4rem 0 4rem max(1.5rem,calc((100vw - 1180px)/2 + 1.5rem))}
.hero-eye{
  display:inline-flex;align-items:center;gap:.4rem;
  background:var(--teal-ghost);color:var(--teal);
  padding:.35rem .9rem;border-radius:var(--r-pill);
  font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;
  margin-bottom:1.25rem
}
.hero h1{
  font-family:var(--ff-display);font-size:clamp(2.4rem,4.5vw,3.6rem);
  font-weight:700;line-height:1.1;color:var(--ink);margin-bottom:1.1rem
}
.hero h1 em{font-style:italic;color:var(--teal)}
.hero-desc{font-size:1.05rem;color:var(--ink-md);max-width:460px;margin-bottom:2rem;line-height:1.7}
.hero-btns{display:flex;gap:1rem;flex-wrap:wrap}
.hero-numbers{display:flex;gap:2rem;margin-top:2.5rem;padding-top:2rem;border-top:1px solid var(--cream-dk)}
.hero-num-val{font-family:var(--ff-display);font-size:1.7rem;font-weight:700;color:var(--teal)}
.hero-num-lab{font-size:.8rem;color:var(--ink-lt)}
.hero-visual{
  position:relative;
  overflow:hidden;
  border-radius:0 0 0 80px;
  min-height:500px;
}
.hero-emoji{font-size:9rem;animation:floatY 4s ease-in-out infinite;filter:drop-shadow(0 20px 40px rgba(0,0,0,.15))}
 
/* features */
.features-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}
.feat-card{padding:2rem;background:var(--white);border-radius:var(--r-xl);border:1px solid var(--cream-dk);text-align:center;transition:all var(--dur)}
.feat-card:hover{box-shadow:var(--sh-lg);transform:translateY(-5px)}
.feat-icon{font-size:2.5rem;margin-bottom:1rem}
.feat-card h3{font-family:var(--ff-display);font-size:1.1rem;color:var(--teal-dk);margin-bottom:.5rem}
.feat-card p{font-size:.88rem;color:var(--ink-lt)}
 
/* services preview */
.services-band{background:var(--cream-md)}
.svcs-preview-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:1.25rem}
.svc-preview-card .svc-img{height:170px;background:linear-gradient(135deg,var(--teal-dk),var(--teal));display:flex;align-items:center;justify-content:center;font-size:4rem}
.svc-preview-card .svc-body{padding:1.1rem}
.svc-preview-card .svc-cat{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--teal);margin-bottom:.3rem}
.svc-preview-card .svc-name{font-weight:700;font-size:1rem;margin-bottom:.3rem}
.svc-preview-card .svc-desc{font-size:.83rem;color:var(--ink-lt);margin-bottom:.85rem;line-height:1.55}
.svc-preview-card .svc-footer{display:flex;align-items:center;justify-content:space-between}
.svc-price{font-family:var(--ff-mono);font-size:1.25rem;font-weight:600;color:var(--teal)}
.svc-rating{font-size:.82rem;color:var(--ink-lt)}
.svc-rating .star-lit{color:#F0A500}
 
/* CTA band */
.cta-band{background:linear-gradient(135deg,var(--teal-dk),var(--amber));color:#fff;text-align:center;padding:5rem 0;position:relative;overflow:hidden}
.cta-band::before{content:'🐾';position:absolute;font-size:18rem;opacity:.05;top:50%;left:50%;transform:translate(-50%,-50%);pointer-events:none}
.cta-band h2{font-family:var(--ff-display);font-size:clamp(1.9rem,3.5vw,2.8rem);position:relative;z-index:1}
.cta-band p{opacity:.88;margin:.75rem 0 2rem;font-size:1.02rem;position:relative;z-index:1}
 
/* testimonials */
.testi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem}
.testi-card{background:var(--white);border-radius:var(--r-xl);padding:1.5rem;border:1px solid var(--cream-dk);position:relative}
.testi-card::before{content:'"';position:absolute;top:.75rem;right:1rem;font-family:var(--ff-display);font-size:4rem;color:var(--cream-dk);line-height:1}
.testi-text{font-size:.9rem;line-height:1.7;font-style:italic;color:var(--ink);margin-bottom:1rem}
.testi-author{display:flex;align-items:center;gap:.75rem}
.testi-av{width:40px;height:40px;border-radius:50%;background:var(--teal);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.9rem;flex-shrink:0}
.testi-name{font-weight:600;font-size:.88rem}
.testi-sub{font-size:.78rem;color:var(--ink-lt)}
 
/* ── AUTH PAGES ──────────────────────────────────────────── */
.auth-page{min-height:calc(100vh - var(--nav-h));display:grid;grid-template-columns:1fr 1fr}
.auth-panel{background:linear-gradient(145deg,var(--teal-dk),var(--teal),var(--amber));display:flex;flex-direction:column;align-items:center;justify-content:center;padding:3rem;color:#fff;gap:1.5rem}
.auth-panel-emoji{font-size:7rem;animation:floatY 4s ease-in-out infinite}
.auth-panel h2{font-family:var(--ff-display);font-size:1.9rem;text-align:center}
.auth-panel p{opacity:.82;text-align:center;max-width:280px;font-size:.95rem}
.auth-form-panel{display:flex;align-items:center;justify-content:center;padding:2.5rem;background:var(--cream)}
.auth-form-box{width:100%;max-width:420px;animation:fadeUp .5s var(--ease)}
.auth-form-box h1{font-family:var(--ff-display);font-size:2rem;color:var(--teal-dk);margin-bottom:.25rem}
.auth-form-box .auth-sub{color:var(--ink-lt);margin-bottom:1.75rem;font-size:.93rem}
 
/* ── NEW LOGIN CARD LAYOUT ───────────────────────────────── */
.login-page {
  min-height: calc(100vh - var(--nav-h));
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--cream);
  padding: 2rem 1rem;
}
.login-card {
  background: var(--white);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-lg);
  border: 1px solid var(--cream-dk);
  width: 100%;
  max-width: 420px;
  padding: 2.5rem 2rem;
  animation: slideUp .35s var(--ease);
  text-align: center;
}
.login-logo {
  margin-bottom: 1.5rem;
  display: flex;
  justify-content: center;
}
.login-logo-img {
  height: 48px;
  width: auto;
  max-width: 200px;
  object-fit: contain;
}
.login-title {
  font-family: var(--ff-display);
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--teal-dk);
  margin-bottom: .35rem;
}
.login-sub {
  color: var(--ink-lt);
  font-size: .93rem;
  margin-bottom: 1.75rem;
}
.login-form .form-label {
  text-align: left;
}
.login-form .form-control {
  border-radius: var(--r-pill);
  background: var(--cream);
  border-color: var(--cream-dk);
}
.login-form .form-control:focus {
  background: var(--white);
  border-color: var(--teal);
}
.login-forgot {
  font-size: .82rem;
  color: var(--teal);
  cursor: pointer;
  font-weight: 500;
}
.login-forgot:hover { text-decoration: underline; }
.auth-switch a { color: var(--teal); font-weight: 600; cursor: pointer; }
.auth-switch a:hover { text-decoration: underline; }
@media (max-width: 480px) {
  .login-card { padding: 2rem 1.25rem; }
  .login-title { font-size: 1.5rem; }
}
.auth-switch{text-align:center;margin-top:1.25rem;font-size:.88rem;color:var(--ink-lt)}
.auth-switch a{color:var(--teal);font-weight:600;cursor:pointer}
.auth-switch a:hover{text-decoration:underline}
.auth-demo{background:var(--cream-md);border-radius:var(--r-md);padding:.75rem 1rem;font-size:.78rem;color:var(--ink-lt);margin-top:.75rem}
.auth-demo strong{color:var(--teal)}
 
/* ── SERVICES PAGE ───────────────────────────────────────── */
.filter-sticky{background:var(--white);border-bottom:1px solid var(--cream-dk);padding:.85rem 0;position:sticky;top:var(--nav-h);z-index:100}
.services-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(255px,1fr));gap:1.25rem}
 
/* ── OWNER DASHBOARD ─────────────────────────────────────── */
.cats-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:1.25rem}
 
/* ── MANAGE SERVICES (admin) ─────────────────────────────── */
.svc-manage-card{display:flex;align-items:center;gap:1rem;padding:1rem 1.25rem;background:var(--white);border:1px solid var(--cream-dk);border-radius:var(--r-lg);transition:box-shadow var(--dur)}
.svc-manage-card:hover{box-shadow:var(--sh-md)}
 
/* ── REPORT PAGE ─────────────────────────────────────────── */
.report-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem}
 
/* ── RESPONSIVE ──────────────────────────────────────────── */
@media(max-width:1024px){
  .stats-grid{grid-template-columns:repeat(2,1fr)}
  .features-grid{grid-template-columns:repeat(2,1fr)}
  .testi-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:768px){
  .hero{grid-template-columns:1fr}
  .hero::before{display:none}
  .hero-visual{display:none}
  .auth-page{grid-template-columns:1fr}
  .auth-panel{display:none}
  .dash-layout{grid-template-columns:1fr}
  .sidebar{position:static;height:auto;display:flex;flex-wrap:wrap;border-right:none;border-bottom:1px solid var(--cream-dk);padding:.5rem}
  .sidebar-label{display:none}
  .sidebar-link{border-left:none;border-bottom:2px solid transparent;padding:.5rem .75rem;border-radius:var(--r-md);font-size:.82rem}
  .sidebar-link.active{border-bottom-color:var(--teal);background:var(--teal-ghost)}
  .dash-content{padding:1.25rem}
  .stats-grid{grid-template-columns:1fr 1fr}
  .features-grid{grid-template-columns:1fr}
  .testi-grid{grid-template-columns:1fr}
  .report-grid{grid-template-columns:1fr}
}
@media(max-width:480px){
  .stats-grid{grid-template-columns:1fr}
  .hero h1{font-size:2rem}
}
 
/* ── HERO CAT IMAGE ──────────────────────────────────────── */
.hero-cat-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
 
/* ── SERVICE CARD IMAGE ──────────────────────────────────── */
.svc-card-img {
  width: 100%;
  height: 170px;
  object-fit: cover;
  object-position: center;
  display: block;
}
 
/* ═══════════════════════════════════════════════════════════
   OWNER DASHBOARD — New wireframe layout
   ═══════════════════════════════════════════════════════════ */
 
/* Layout */
.od-layout {
  display: grid;
  grid-template-columns: 260px 1fr;
  min-height: 100vh;
}
 
/* ── SIDEBAR ─────────────────────────────────────────────── */
.od-sidebar {
  background: var(--white);
  border-right: 1px solid var(--cream-dk);
  display: flex;
  flex-direction: column;
  padding: 1.25rem 1.25rem 1.25rem;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}
 
/* Brand */
.od-sidebar-brand {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--cream-dk);
  margin-bottom: 1rem;
}
.od-brand-logo {
  width: 52px;
  height: 52px;
  object-fit: contain;
  border-radius: var(--r-md);
  border: 1px solid var(--cream-dk);
  flex-shrink: 0;
  padding: 4px;
}
.od-brand-name {
  font-family: var(--ff-display);
  font-size: .95rem;
  font-weight: 700;
  color: var(--teal-dk);
  line-height: 1.2;
}
.od-brand-sub {
  font-size: .68rem;
  color: var(--ink-lt);
  line-height: 1.4;
  margin-top: 2px;
}
 
/* Nav */
.od-nav-label {
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--ink-lt);
  margin-bottom: .5rem;
}
.od-nav-link {
  display: block;
  padding: .65rem .85rem;
  border-radius: var(--r-md);
  font-size: .92rem;
  font-weight: 500;
  color: var(--ink-md);
  cursor: pointer;
  transition: all var(--dur);
  margin-bottom: .2rem;
  text-decoration: none;
}
.od-nav-link:hover  { background: var(--cream); color: var(--teal); }
.od-nav-link.active { background: var(--teal-ghost); color: var(--teal); font-weight: 700; }
 
/* User at bottom */
.od-sidebar-user {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin-top: auto;
  padding-top: 1.25rem;
  border-top: 1px solid var(--cream-dk);
}
.od-user-avatar {
  width: 42px; height: 42px;
  border-radius: 50%;
  background: var(--cream-dk);
  display: flex; align-items: center; justify-content: center;
  font-size: .85rem; font-weight: 700; color: var(--ink-md);
  flex-shrink: 0;
  border: 2px dashed var(--ink-lt);
}
.od-user-name { font-weight: 600; font-size: .88rem; }
.od-user-role { font-size: .75rem; color: var(--ink-lt); }
 
/* Hamburger (mobile) */
.od-hamburger {
  display: none;
  background: none; border: none;
  font-size: 1.3rem; cursor: pointer;
  padding: .35rem; color: var(--ink);
}
 
/* ── MAIN CONTENT ────────────────────────────────────────── */
.od-main {
  padding: 2rem 2rem 3rem;
  background: var(--cream);
  overflow-y: auto;
}
 
/* Greeting */
.od-greeting { margin-bottom: 2rem; }
.od-greeting-title {
  font-family: var(--ff-display);
  font-size: 1.7rem;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.2;
}
.od-greeting-sub { font-size: .92rem; color: var(--ink-lt); margin-top: .2rem; }
 
/* Section */
.od-section { margin-bottom: 2.25rem; }
.od-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}
.od-section-title {
  font-family: var(--ff-display);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--ink);
}
.od-link-btn {
  font-size: .85rem;
  color: var(--ink-lt);
  font-weight: 500;
  cursor: pointer;
  transition: color var(--dur);
  text-decoration: none;
}
.od-link-btn:hover { color: var(--teal); }
 
/* Cat chips row */
.od-cats-row {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}
.od-cat-chip {
  background: var(--white);
  border: 1px solid var(--cream-dk);
  border-radius: var(--r-lg);
  padding: .85rem 1rem;
  text-align: center;
  cursor: pointer;
  transition: all var(--dur);
  min-width: 90px;
}
.od-cat-chip:hover { border-color: var(--teal); box-shadow: var(--sh-sm); }
.od-cat-chip-img   { font-size: 2.2rem; }
.od-cat-chip-name  { font-size: .8rem; font-weight: 600; margin-top: .3rem; color: var(--ink); }
 
.od-add-cat {
  background: var(--white);
  border: 2px dashed var(--cream-dk);
  border-radius: var(--r-lg);
  padding: .85rem 1rem;
  text-align: center;
  cursor: pointer;
  min-width: 90px;
  transition: border-color var(--dur);
}
.od-add-cat:hover { border-color: var(--teal); }
.od-add-cat-icon  { font-size: 1.5rem; color: var(--ink-lt); line-height: 1; }
.od-add-cat-label { font-size: .78rem; color: var(--ink-lt); margin-top: .3rem; }
 
/* Categories grid */
.od-cat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1rem;
}
.od-cat-card {
  background: var(--white);
  border-radius: var(--r-lg);
  border: 1px solid var(--cream-dk);
  overflow: hidden;
  transition: all var(--dur);
  cursor: pointer;
}
.od-cat-card:hover { box-shadow: var(--sh-md); transform: translateY(-2px); }
.od-cat-card-img {
  height: 140px;
  overflow: hidden;
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  background: var(--cream-md);
  padding: 0;
  text-align: center;
  font-size: 2.5rem;
  line-height: 140px;
}
.od-cat-card-body { padding: .85rem; }
.od-cat-card-name {
  font-weight: 700;
  font-size: .92rem;
  color: var(--ink);
  margin-bottom: .35rem;
}
.od-cat-card-desc {
  font-size: .78rem;
  color: var(--ink-lt);
  line-height: 1.5;
  margin-bottom: .75rem;
}
.od-explore-btn {
  background: var(--teal-ghost);
  color: var(--teal);
  border: none;
  border-radius: var(--r-pill);
  padding: .35rem .9rem;
  font-size: .78rem;
  font-weight: 600;
  cursor: pointer;
  font-family: var(--ff-body);
  transition: all var(--dur);
}
.od-explore-btn:hover { background: var(--teal); color: #fff; }
 
/* Booking cards grid */
.od-bk-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1rem;
}
.od-bk-card {
  background: var(--white);
  border-radius: var(--r-lg);
  border: 1px solid var(--cream-dk);
  padding: 1rem 1.1rem;
  transition: box-shadow var(--dur);
}
.od-bk-card:hover { box-shadow: var(--sh-md); }
.od-bk-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: .5rem;
  margin-bottom: .5rem;
}
.od-bk-name {
  font-weight: 700;
  font-size: .92rem;
  color: var(--ink);
  line-height: 1.3;
}
.od-bk-meta {
  font-size: .82rem;
  color: var(--ink-lt);
  margin-bottom: .75rem;
}
.od-bk-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: .65rem;
  border-top: 1px solid var(--cream-md);
}
.od-bk-price {
  font-family: var(--ff-mono);
  font-weight: 700;
  font-size: .92rem;
  color: var(--ink);
}
.od-details-btn {
  background: var(--cream-md);
  border: none;
  border-radius: var(--r-pill);
  padding: .3rem .85rem;
  font-size: .78rem;
  font-weight: 600;
  cursor: pointer;
  font-family: var(--ff-body);
  color: var(--ink-md);
  transition: all var(--dur);
}
.od-details-btn:hover { background: var(--teal); color: #fff; }
 
/* ── RESPONSIVE ──────────────────────────────────────────── */
@media (max-width: 900px) {
  .od-layout { grid-template-columns: 1fr; }
  .od-sidebar {
    position: static; height: auto;
    flex-direction: row; flex-wrap: wrap;
    align-items: center; gap: .5rem;
    padding: .75rem 1rem;
    border-right: none;
    border-bottom: 1px solid var(--cream-dk);
  }
  .od-sidebar-brand { border-bottom: none; margin-bottom: 0; padding-bottom: 0; flex: 1; }
  .od-hamburger { display: block; }
  .od-nav {
    display: none; width: 100%;
    padding: .5rem 0;
    border-top: 1px solid var(--cream-dk);
    margin-top: .5rem;
  }
  .od-nav.od-nav-open { display: block; }
  .od-nav-label { padding: 0 .5rem; }
  .od-nav-link { padding: .5rem .75rem; }
  .od-sidebar-user { display: none; }
  .od-main { padding: 1.25rem; }
}
@media (max-width: 480px) {
  .od-cat-grid { grid-template-columns: 1fr 1fr; }
  .od-bk-grid  { grid-template-columns: 1fr; }
}
 
/* ── SIDEBAR USER MENU ───────────────────────────────────── */
.od-sidebar-user {
  cursor: pointer;
  position: relative;
  border-radius: var(--r-md);
  padding: .6rem .5rem;
  transition: background var(--dur);
}
.od-sidebar-user:hover { background: var(--cream); }
 
.od-user-menu {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 0; right: 0;
  background: var(--white);
  border: 1px solid var(--cream-dk);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-lg);
  overflow: hidden;
  z-index: 100;
  animation: slideUp .18s var(--ease);
}
.od-user-menu-item {
  display: block;
  padding: .65rem 1rem;
  font-size: .88rem;
  font-weight: 500;
  color: var(--ink);
  cursor: pointer;
  transition: background var(--dur);
  text-decoration: none;
}
.od-user-menu-item:hover { background: var(--cream); }
.od-user-menu-danger { color: var(--danger) !important; }
.od-user-menu-danger:hover { background: rgba(192,57,43,.06) !important; }
.od-user-menu-sep { height: 1px; background: var(--cream-dk); margin: .2rem 0; }
 
/* ── CATEGORY CARD PHOTO ─────────────────────────────────── */
.od-cat-card-photo {
  width: 100%;
  height: 140px;
  object-fit: cover;
  object-position: center;
  display: block;
}
 
 
/* ═══════════════════════════════════════════════════════════
   SERVICES PAGE — New sidebar filter layout
   ═══════════════════════════════════════════════════════════ */
 
.sp-layout {
  display: grid;
  grid-template-columns: 270px 1fr;
  min-height: 100vh;
}
 
/* ── SIDEBAR ─────────────────────────────────────────────── */
.sp-sidebar {
  background: var(--white);
  border-right: 1px solid var(--cream-dk);
  padding: 1.5rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}
 
/* Brand */
.sp-brand {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--cream-dk);
}
.sp-brand-logo {
  width: 52px; height: 52px;
  object-fit: contain;
  border-radius: var(--r-md);
  border: 1px solid var(--cream-dk);
  flex-shrink: 0;
  padding: 4px;
}
.sp-brand-name {
  font-family: var(--ff-display);
  font-size: .95rem;
  font-weight: 700;
  color: var(--teal-dk);
}
.sp-brand-sub {
  font-size: .68rem;
  color: var(--ink-lt);
  line-height: 1.4;
  margin-top: 2px;
}
 
/* User */
.sp-user {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--cream-dk);
}
.sp-user-avatar {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--teal);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: .85rem; flex-shrink: 0;
}
.sp-user-name { font-weight: 600; font-size: .88rem; }
.sp-user-role { font-size: .75rem; color: var(--ink-lt); }
 
/* Filters */
.sp-filters {
  background: var(--cream);
  border-radius: var(--r-lg);
  padding: 1.1rem;
  flex: 1;
}
.sp-filters-title {
  font-weight: 700;
  font-size: 1rem;
  color: var(--ink);
  margin-bottom: 1.1rem;
  display: flex;
  align-items: center;
  gap: .5rem;
}
.sp-filter-group { margin-bottom: 1.1rem; }
.sp-filter-label {
  font-size: .82rem;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: .45rem;
}
.sp-search-wrap {
  display: flex;
  align-items: center;
  gap: .5rem;
  background: var(--white);
  border: 1.5px solid var(--cream-dk);
  border-radius: var(--r-md);
  padding: .5rem .75rem;
  transition: border-color var(--dur);
}
.sp-search-wrap:focus-within { border-color: var(--teal); }
.sp-search-icon { font-size: .9rem; flex-shrink: 0; }
.sp-search-input {
  border: none; outline: none; background: none;
  font-size: .88rem; width: 100%;
  font-family: var(--ff-body); color: var(--ink);
}
.sp-search-input::placeholder { color: var(--ink-lt); }
.sp-select {
  width: 100%;
  padding: .55rem .75rem;
  border: 1.5px solid var(--cream-dk);
  border-radius: var(--r-md);
  background: var(--white);
  font-size: .88rem;
  font-family: var(--ff-body);
  color: var(--ink);
  appearance: none;
  cursor: pointer;
  outline: none;
  transition: border-color var(--dur);
}
.sp-select:focus { border-color: var(--teal); }
.sp-price-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: .4rem;
}
.sp-price-val { font-size: .82rem; font-weight: 600; color: var(--teal); }
.sp-range {
  width: 100%;
  accent-color: var(--teal);
  margin-bottom: .35rem;
  cursor: pointer;
}
.sp-filter-btns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .6rem;
  margin-top: 1.25rem;
}
 
/* ── MAIN ────────────────────────────────────────────────── */
.sp-main {
  padding: 2rem 2.5rem 3rem;
  background: var(--cream);
}
/* Top bar with back link + user */
.sp-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--cream-dk);
}
.sp-back-link {
  font-size: .85rem;
  color: var(--ink-lt);
  cursor: pointer;
  transition: color var(--dur);
  text-decoration: none;
}
.sp-back-link:hover { color: var(--teal); }
.sp-topbar-user {
  display: flex;
  align-items: center;
  gap: .65rem;
}
.sp-title {
  font-family: var(--ff-display);
  font-size: 2rem;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: .3rem;
}
.sp-subtitle {
  font-size: .92rem;
  color: var(--ink-lt);
  margin-bottom: 1.75rem;
}
 
/* ── SERVICE CARDS GRID ──────────────────────────────────── */
.sp-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.1rem;
}
.sp-card {
  background: var(--white);
  border-radius: var(--r-lg);
  border: 1px solid var(--cream-dk);
  overflow: hidden;
  transition: all var(--dur);
}
.sp-card:hover { box-shadow: var(--sh-md); transform: translateY(-2px); }
.sp-card-img {
  position: relative;
  background: var(--cream-md);
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sp-card-emoji { font-size: 3.5rem; }
.sp-card-badge {
  position: absolute;
  top: .6rem; right: .6rem;
  background: var(--teal);
  color: #fff;
  font-size: .68rem;
  font-weight: 700;
  padding: .2rem .6rem;
  border-radius: var(--r-pill);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.sp-card-body { padding: .85rem; }
.sp-card-name {
  font-weight: 700;
  font-size: .92rem;
  color: var(--ink);
  margin-bottom: .2rem;
}
.sp-card-duration {
  font-size: .78rem;
  color: var(--ink-lt);
  margin-bottom: .75rem;
}
.sp-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.sp-card-price {
  font-family: var(--ff-mono);
  font-weight: 700;
  font-size: .92rem;
  color: var(--ink);
}
.sp-book-btn {
  background: var(--teal);
  color: #fff;
  border: none;
  border-radius: var(--r-pill);
  padding: .3rem .85rem;
  font-size: .78rem;
  font-weight: 600;
  cursor: pointer;
  font-family: var(--ff-body);
  transition: background var(--dur);
}
.sp-book-btn:hover { background: var(--teal-dk); }
 
/* ── RESPONSIVE ──────────────────────────────────────────── */
@media (max-width: 1024px) {
  .sp-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .sp-layout { grid-template-columns: 1fr; }
  .sp-sidebar { position: static; height: auto; flex-direction: column; }
  .sp-main { padding: 1.25rem; }
  .sp-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .sp-grid { grid-template-columns: 1fr; }
}
 
/* ── SERVICES PAGE TOPBAR ────────────────────────────────── */
.sp-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--cream-dk);
}
.sp-topbar-user {
  display: flex;
  align-items: center;
  gap: .65rem;
}
 
/* ── SERVICES PAGE TOPBAR ────────────────────────────────── */
.sp-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--cream-dk);
}
.sp-topbar-user {
  display: flex;
  align-items: center;
  gap: .65rem;
}
/* ── SERVICE CARD PHOTO ──────────────────────────────────── */
.sp-card-photo {
  width: 100%;
  height: 200px;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* ═══════════════════════════════════════════════════════════
   BOOKING PAGE — New split layout
   ═══════════════════════════════════════════════════════════ */
.bk-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 100vh;
}

/* ── LEFT PANEL ──────────────────────────────────────────── */
.bk-left {
  background: var(--white);
  border-right: 1px solid var(--cream-dk);
  padding: 2rem;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

/* Header row */
.bk-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--cream-dk);
}
.bk-brand { display:flex;align-items:center;gap:.6rem; }
.bk-brand-logo { width:48px;height:48px;object-fit:contain;border-radius:var(--r-md);border:1px solid var(--cream-dk);padding:3px;flex-shrink:0; }
.bk-brand-name { font-family:var(--ff-display);font-size:.95rem;font-weight:700;color:var(--teal-dk); }
.bk-brand-sub  { font-size:.65rem;color:var(--ink-lt);line-height:1.4; }
.bk-user { display:flex;align-items:center;gap:.6rem; }
.bk-user-av { width:42px;height:42px;border-radius:50%;background:var(--cream-md);display:flex;align-items:center;justify-content:center;font-size:.82rem;font-weight:700;color:var(--ink-md);border:2px dashed var(--cream-dk); }
.bk-user-name { font-weight:600;font-size:.85rem; }
.bk-user-role { font-size:.72rem;color:var(--ink-lt); }

/* Back + title */
.bk-title-row { display:flex;align-items:flex-start;gap:.85rem; }
.bk-back { width:34px;height:34px;border-radius:50%;border:1.5px solid var(--cream-dk);background:var(--white);display:flex;align-items:center;justify-content:center;font-size:1rem;cursor:pointer;flex-shrink:0;transition:all var(--dur);color:var(--ink); }
.bk-back:hover { border-color:var(--teal);color:var(--teal); }
.bk-title    { font-family:var(--ff-display);font-size:1.35rem;font-weight:700;color:var(--ink); }
.bk-subtitle { font-size:.83rem;color:var(--ink-lt);margin-top:.15rem; }

/* Form */
.bk-form { display:flex;flex-direction:column;gap:0; }
.bk-select {
  appearance:none;cursor:pointer;
  background:var(--cream) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23888' stroke-width='1.5' fill='none'/%3E%3C/svg%3E") no-repeat right 1rem center;
}

/* Calendar */
.bk-calendar { border:1.5px solid var(--cream-dk);border-radius:var(--r-lg);overflow:hidden; }
.bk-cal-nav  { display:flex;align-items:center;justify-content:space-between;padding:.75rem 1rem;background:var(--cream); }
.bk-cal-btn  { background:none;border:1.5px solid var(--cream-dk);border-radius:50%;width:28px;height:28px;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:1rem;color:var(--ink);transition:all var(--dur); }
.bk-cal-btn:hover { border-color:var(--teal);color:var(--teal); }
.bk-cal-month { font-weight:700;font-size:.95rem;color:var(--ink); }
.bk-cal-days-head { display:grid;grid-template-columns:repeat(7,1fr);background:var(--cream-md); }
.bk-cal-dname { text-align:center;font-size:.68rem;font-weight:700;color:var(--ink-lt);padding:.4rem 0;letter-spacing:.04em; }
.bk-cal-grid  { display:grid;grid-template-columns:repeat(7,1fr);gap:2px;padding:.5rem; }
.bk-cal-cell  { aspect-ratio:1;display:flex;align-items:center;justify-content:center;font-size:.85rem;border-radius:50%;cursor:pointer;transition:all var(--dur);color:var(--ink); }
.bk-cal-cell:hover:not(.bk-cal-past) { background:var(--teal-ghost);color:var(--teal); }
.bk-cal-sel   { background:var(--teal)!important;color:#fff!important;font-weight:700; }
.bk-cal-past  { color:var(--ink-lt);cursor:not-allowed;opacity:.45; }
.bk-cal-empty { cursor:default; }

/* ── RIGHT PANEL ─────────────────────────────────────────── */
.bk-right {
  background: var(--cream);
  padding: 2rem;
  display: flex;
  flex-direction: column;
}
.bk-slots-wrap {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  padding-top: 5.5rem; /* align with left panel content */
}
.bk-slots-title { font-family:var(--ff-display);font-size:1.5rem;font-weight:700;color:var(--ink); }
.bk-slots-sub   { font-size:.88rem;color:var(--ink-lt); }
.bk-slots-grid  { display:grid;grid-template-columns:1fr 1fr;gap:.75rem; }
.bk-slot {
  padding:.85rem;border-radius:var(--r-lg);
  border:1.5px solid var(--cream-dk);background:var(--white);
  text-align:center;font-size:.9rem;font-weight:500;
  cursor:pointer;transition:all var(--dur);color:var(--ink);
}
.bk-slot:hover:not(.bk-slot-taken) { border-color:var(--teal);color:var(--teal); }
.bk-slot-active { background:var(--teal-dk)!important;color:#fff!important;border-color:var(--teal-dk)!important;font-weight:700; }
.bk-slot-taken  { background:var(--cream-md);color:var(--ink-lt);cursor:not-allowed;text-decoration:line-through; }
.bk-book-btn {
  width:100%;padding:1rem;border-radius:var(--r-lg);
  background:var(--ink);color:#fff;border:none;
  font-size:1rem;font-weight:700;font-family:var(--ff-body);
  cursor:pointer;transition:all var(--dur);margin-top:.5rem;
}
.bk-book-btn:hover:not(:disabled) { background:var(--teal); }
.bk-book-btn:disabled { opacity:.45;cursor:not-allowed; }

/* ── RESPONSIVE ──────────────────────────────────────────── */
@media (max-width: 900px) {
  .bk-layout { grid-template-columns:1fr; }
  .bk-right  { border-top:1px solid var(--cream-dk); }
  .bk-slots-wrap { padding-top:0; }
}

/* ═══════════════════════════════════════════════════════════
   MY CATS PAGE — New list card layout
   ═══════════════════════════════════════════════════════════ */
.mc-title {
  font-family: var(--ff-display);
  font-size: 1.7rem;
  font-weight: 700;
  color: var(--ink);
}
.mc-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.mc-card {
  background: var(--white);
  border: 1px solid var(--cream-dk);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: box-shadow var(--dur);
}
.mc-card:hover { box-shadow: var(--sh-md); }
.mc-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--cream-md);
}
.mc-cat-name  { font-weight: 700; font-size: 1rem; color: var(--ink); }
.mc-cat-breed { font-size: .82rem; color: var(--ink-lt); margin-top: .1rem; }
.mc-card-actions { display: flex; gap: .85rem; }
.mc-action-btn {
  font-size: .82rem; font-weight: 500;
  color: var(--teal); background: none; border: none;
  cursor: pointer; font-family: var(--ff-body);
  padding: 0; transition: color var(--dur);
}
.mc-action-btn:hover { text-decoration: underline; }
.mc-action-del { color: var(--danger) !important; }
.mc-card-body { padding: .85rem 1.25rem; }
.mc-info-row {
  display: flex;
  align-items: baseline;
  gap: .75rem;
  padding: .35rem 0;
}
.mc-info-label {
  font-weight: 600;
  font-size: .88rem;
  color: var(--ink);
  min-width: 80px;
}
.mc-info-val { font-size: .88rem; color: var(--ink-lt); }
.mc-medical-btn {
  margin-top: .75rem;
  background: none;
  border: 1.5px solid var(--teal);
  border-radius: var(--r-pill);
  padding: .35rem 1rem;
  font-size: .82rem;
  font-weight: 600;
  color: var(--teal);
  cursor: pointer;
  font-family: var(--ff-body);
  transition: all var(--dur);
}
.mc-medical-btn:hover { background: var(--teal); color: #fff; }

/* ── BOOKING SUCCESS POPUP ───────────────────────────────── */
.bk-success-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.35);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 999;
  animation: fadeIn .25s ease;
}
.bk-success-card {
  background: var(--white);
  border-radius: var(--r-xl);
  border: 2.5px solid var(--teal);
  padding: 2.5rem 2rem;
  max-width: 340px;
  width: 90%;
  text-align: center;
  animation: slideUp .3s var(--ease);
  box-shadow: var(--sh-xl);
}
.bk-success-icon {
  font-size: 3rem;
  margin-bottom: 1rem;
  background: var(--cream-md);
  width: 72px; height: 72px;
  border-radius: var(--r-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.25rem;
}
.bk-success-title {
  font-family: var(--ff-display);
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: .75rem;
}
.bk-success-msg {
  font-size: .9rem;
  color: var(--ink-md);
  line-height: 1.6;
  margin-bottom: 1.5rem;
}
.bk-success-btn {
  background: var(--teal);
  color: #fff;
  border: none;
  border-radius: var(--r-pill);
  padding: .65rem 1.5rem;
  font-size: .9rem;
  font-weight: 600;
  cursor: pointer;
  font-family: var(--ff-body);
  transition: background var(--dur);
  width: 100%;
}
.bk-success-btn:hover { background: var(--teal-dk); }

/* ═══════════════════════════════════════════════════════════
   MY BOOKINGS PAGE
   ═══════════════════════════════════════════════════════════ */

/* Tabs */
.mb-tabs {
  display: flex;
  gap: .5rem;
  margin-bottom: 1.5rem;
}
.mb-tab {
  padding: .55rem 1.35rem;
  border-radius: var(--r-pill);
  border: 1.5px solid var(--cream-dk);
  background: var(--white);
  font-size: .88rem;
  font-weight: 600;
  color: var(--ink-md);
  cursor: pointer;
  font-family: var(--ff-body);
  transition: all var(--dur);
}
.mb-tab.active {
  background: var(--ink);
  color: #fff;
  border-color: var(--ink);
}
.mb-tab:hover:not(.active) { border-color: var(--teal); color: var(--teal); }

/* Grid */
.mb-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1rem;
}

/* Card */
.mb-card {
  background: var(--white);
  border: 1px solid var(--cream-dk);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: box-shadow var(--dur), transform var(--dur);
}
.mb-card:hover { box-shadow: var(--sh-md); transform: translateY(-2px); }

.mb-card-img {
  position: relative;
  height: 150px;
  background: var(--cream-md);
  display: flex;
  align-items: center;
  justify-content: center;
}
.mb-card-photo {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  display: block;
}
.mb-card-emoji { font-size: 3rem; }
.mb-card-badge {
  position: absolute;
  top: .6rem; right: .6rem;
  background: var(--teal);
  color: #fff;
  font-size: .65rem;
  font-weight: 700;
  padding: .2rem .55rem;
  border-radius: var(--r-pill);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.mb-card-body { padding: .9rem; }
.mb-card-name {
  font-weight: 700;
  font-size: .92rem;
  color: var(--ink);
  margin-bottom: .3rem;
}
.mb-card-meta {
  font-size: .78rem;
  color: var(--ink-lt);
  margin-bottom: .2rem;
}
.mb-card-note {
  font-size: .75rem;
  color: var(--teal);
  font-style: italic;
  margin: .35rem 0;
}
.mb-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: .75rem;
  padding-top: .65rem;
  border-top: 1px solid var(--cream-md);
}
.mb-card-price {
  font-family: var(--ff-mono);
  font-weight: 700;
  font-size: .9rem;
  color: var(--ink);
}
.mb-card-btns { display: flex; gap: .4rem; }
.mb-btn {
  border: none;
  border-radius: var(--r-pill);
  padding: .28rem .75rem;
  font-size: .75rem;
  font-weight: 600;
  cursor: pointer;
  font-family: var(--ff-body);
  transition: all var(--dur);
}
.mb-btn-mod    { background: var(--teal-ghost); color: var(--teal); }
.mb-btn-mod:hover { background: var(--teal); color: #fff; }
.mb-btn-cancel { background: rgba(192,57,43,.08); color: var(--danger); }
.mb-btn-cancel:hover { background: var(--danger); color: #fff; }

/* Floating action button */
.mb-fab {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  background: var(--teal);
  color: #fff;
  border: none;
  border-radius: var(--r-pill);
  padding: .8rem 1.5rem;
  font-size: .9rem;
  font-weight: 700;
  font-family: var(--ff-body);
  cursor: pointer;
  box-shadow: 0 4px 20px rgba(42,124,124,.4);
  transition: all var(--dur);
  z-index: 50;
}
.mb-fab:hover { background: var(--teal-dk); transform: translateY(-2px); box-shadow: 0 6px 24px rgba(42,124,124,.5); }

/* ═══════════════════════════════════════════════════════════
   NOTIFICATIONS PAGE — Owner
   ═══════════════════════════════════════════════════════════ */
.nf-group { margin-bottom: 1.5rem; }
.nf-date-label {
  font-size: .78rem;
  font-weight: 700;
  color: var(--ink-lt);
  text-transform: uppercase;
  letter-spacing: .07em;
  margin-bottom: .6rem;
  padding-bottom: .4rem;
  border-bottom: 1px solid var(--cream-dk);
}
.nf-row {
  display: flex;
  align-items: flex-start;
  gap: .85rem;
  padding: .9rem .75rem;
  border-radius: var(--r-lg);
  cursor: pointer;
  transition: background var(--dur);
  position: relative;
}
.nf-row:hover { background: var(--cream); }
.nf-unread    { background: var(--teal-ghost); }
.nf-unread:hover { background: var(--cream-md); }
.nf-avatar {
  width: 42px; height: 42px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem;
  flex-shrink: 0;
}
.nf-body { flex: 1; min-width: 0; }
.nf-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .5rem;
  margin-bottom: .25rem;
}
.nf-title      { font-size: .9rem; color: var(--ink); font-weight: 500; }
.nf-title-bold { font-weight: 700; }
.nf-time       { font-size: .75rem; color: var(--ink-lt); flex-shrink: 0; }
.nf-msg        { font-size: .83rem; color: var(--ink-lt); line-height: 1.55; }

/* ═══════════════════════════════════════════════════════════
   ADMIN DASHBOARD
   ═══════════════════════════════════════════════════════════ */
.ad-title-row  { margin-bottom: 1.75rem; }
.ad-title      { font-family:var(--ff-display);font-size:1.7rem;font-weight:700;color:var(--ink); }
.ad-subtitle   { font-size:.9rem;color:var(--ink-lt);margin-top:.2rem; }

/* Stat cards */
.ad-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-bottom: 2rem;
}
.ad-stat-card {
  background: var(--white);
  border: 1px solid var(--cream-dk);
  border-radius: var(--r-lg);
  padding: 1.25rem 1.5rem;
  transition: box-shadow var(--dur);
}
.ad-stat-card:hover { box-shadow: var(--sh-md); }
.ad-stat-icon  { width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.3rem;margin-bottom:.85rem; }
.ad-stat-label { font-size:.82rem;color:var(--ink-lt);font-weight:500;margin-bottom:.4rem; }
.ad-stat-val   { font-family:var(--ff-display);font-size:2rem;font-weight:700;color:var(--ink); }

/* Sections */
.ad-section        { margin-bottom: 2rem; }
.ad-section-header { display:flex;align-items:center;justify-content:space-between;margin-bottom:1rem; }
.ad-section-title  { font-family:var(--ff-display);font-size:1.2rem;font-weight:700;color:var(--ink); }

/* Schedule grid */
.ad-schedule-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 1rem;
}
.ad-sched-card {
  background: var(--white);
  border: 1px solid var(--cream-dk);
  border-radius: var(--r-lg);
  padding: 1rem;
  text-align: center;
  transition: box-shadow var(--dur);
}
.ad-sched-card:hover { box-shadow: var(--sh-md); }
.ad-sched-avatar {
  width: 44px;height: 44px;border-radius: 50%;
  background: var(--cream-md);
  display: flex;align-items: center;justify-content: center;
  font-weight: 700;font-size: .88rem;color: var(--ink-md);
  margin: 0 auto .6rem;
  border: 2px dashed var(--cream-dk);
}
.ad-sched-name { font-weight: 700;font-size: .88rem;color: var(--ink);margin-bottom: .2rem; }
.ad-sched-svc  { font-size: .8rem;color: var(--teal);font-weight: 600;margin-bottom: .2rem; }
.ad-sched-cat  { font-size: .78rem;color: var(--ink-lt);margin-bottom: .2rem; }
.ad-sched-time { font-size: .78rem;color: var(--ink-lt);font-weight: 600; }

/* Recent bookings table */
.ad-table-wrap { overflow-x: auto; }
.ad-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .88rem;
}
.ad-table th {
  text-align: left;
  padding: .6rem .85rem;
  font-size: .75rem;
  font-weight: 700;
  color: var(--ink-lt);
  text-transform: uppercase;
  letter-spacing: .06em;
  border-bottom: 2px solid var(--cream-dk);
}
.ad-table td {
  padding: .75rem .85rem;
  border-bottom: 1px solid var(--cream-md);
  color: var(--ink);
  vertical-align: middle;
}
.ad-table tr:last-child td { border-bottom: none; }
.ad-table tr:hover td { background: var(--cream); }

/* Responsive */
@media (max-width: 768px) {
  .ad-stats { grid-template-columns: 1fr; }
  .ad-schedule-grid { grid-template-columns: 1fr 1fr; }
}

/* ═══════════════════════════════════════════════════════════
   MANAGE SERVICES PAGE
   ═══════════════════════════════════════════════════════════ */
.ms-category   { margin-bottom: 2rem; }
.ms-cat-title  { font-family:var(--ff-display);font-size:1.15rem;font-weight:700;color:var(--ink);margin-bottom:1rem; }
.ms-grid       { display:grid;grid-template-columns:repeat(3,1fr);gap:1rem; }

.ms-card {
  background: var(--white);
  border: 1px solid var(--cream-dk);
  border-radius: var(--r-lg);
  overflow: hidden;
  transition: box-shadow var(--dur);
}
.ms-card:hover { box-shadow: var(--sh-md); }

.ms-card-img {
  position: relative;
  height: 160px;
  background: var(--cream-md);
  display: flex;
  align-items: center;
  justify-content: center;
}
.ms-card-photo { width:100%;height:100%;object-fit:cover;object-position:center;display:block; }
.ms-card-emoji { font-size:3rem; }

.ms-card-actions {
  position: absolute;
  top: .5rem; right: .5rem;
  display: flex;
  gap: .5rem;
}
.ms-action-btn {
  background: rgba(255,255,255,.92);
  border: none;
  border-radius: var(--r-pill);
  padding: .2rem .65rem;
  font-size: .75rem;
  font-weight: 600;
  cursor: pointer;
  font-family: var(--ff-body);
  color: var(--teal);
  transition: all var(--dur);
  backdrop-filter: blur(4px);
}
.ms-action-btn:hover    { background: var(--teal); color: #fff; }
.ms-action-del          { color: var(--danger); }
.ms-action-del:hover    { background: var(--danger); color: #fff; }

.ms-card-body  { padding: .85rem; }
.ms-card-name  { font-weight:700;font-size:.9rem;color:var(--ink);margin-bottom:.2rem; }
.ms-card-meta  { font-size:.78rem;color:var(--ink-lt);margin-bottom:.2rem; }
.ms-card-price { font-family:var(--ff-mono);font-weight:700;font-size:.9rem;color:var(--teal); }

@media (max-width: 900px) { .ms-grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 500px) { .ms-grid { grid-template-columns: 1fr; } }

/* ── BOOKING MANAGEMENT SEARCH & FILTER ──────────────────── */
.bm-search-wrap {
  display: flex;
  align-items: center;
  gap: .5rem;
  background: var(--cream);
  border: 1.5px solid var(--cream-dk);
  border-radius: var(--r-md);
  padding: .55rem .85rem;
  flex: 1;
  min-width: 200px;
  transition: border-color var(--dur);
}
.bm-search-wrap:focus-within { border-color: var(--teal); }
.bm-search-icon  { font-size: .9rem; flex-shrink: 0; }
.bm-search-input {
  border: none; outline: none; background: none;
  font-size: .88rem; width: 100%;
  font-family: var(--ff-body); color: var(--ink);
}
.bm-search-input::placeholder { color: var(--ink-lt); }

.bm-filter-wrap {
  display: flex;
  align-items: center;
  gap: .5rem;
  background: var(--cream);
  border: 1.5px solid var(--cream-dk);
  border-radius: var(--r-md);
  padding: .55rem .85rem;
  transition: border-color var(--dur);
}
.bm-filter-wrap:focus-within { border-color: var(--teal); }
.bm-filter-select {
  border: none; outline: none; background: none;
  font-size: .88rem; font-family: var(--ff-body);
  color: var(--ink); cursor: pointer;
  font-weight: 600;
}

/* ── SERVICES PAGE USER MENU ─────────────────────────────── */
.sp-topbar-user {
  display: flex;
  align-items: center;
  gap: .65rem;
  position: relative;
}
.sp-topbar-user .od-user-menu {
  top: calc(100% + 8px);
  bottom: auto;
  right: 0;
  left: auto;
  min-width: 180px;
}

/* ── SERVICE IMAGE UPLOAD ────────────────────────────────── */
.ms-upload-wrap {
  border: 2px dashed var(--cream-dk);
  border-radius: var(--r-lg);
  cursor: pointer;
  overflow: hidden;
  min-height: 140px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color var(--dur);
  background: var(--cream);
  position: relative;
}
.ms-upload-wrap:hover { border-color: var(--teal); }
.ms-upload-placeholder { text-align: center; padding: 1.5rem; }
.ms-upload-icon  { font-size: 2rem; margin-bottom: .5rem; }
.ms-upload-text  { font-weight: 600; font-size: .9rem; color: var(--ink); }
.ms-upload-hint  { font-size: .75rem; color: var(--ink-lt); margin-top: .25rem; }
.ms-upload-preview {
  width: 100%;
  height: 160px;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* ── BOARDING CHECK-IN/OUT PANEL ─────────────────────────── */
.bk-boarding-form { display:flex;flex-direction:column;gap:1.25rem; }
.bk-boarding-section {
  background: var(--cream);
  border-radius: var(--r-lg);
  padding: 1rem 1.1rem;
  border: 1.5px solid var(--cream-dk);
}
.bk-boarding-label {
  font-weight: 700;
  font-size: .95rem;
  color: var(--teal-dk);
  margin-bottom: .75rem;
}
.bk-boarding-summary {
  background: var(--teal-ghost);
  border: 1.5px solid var(--teal);
  border-radius: var(--r-lg);
  padding: .85rem 1rem;
  line-height: 1.7;
}

/* ── NOTIFICATION RED DOT ────────────────────────────────── */
.od-notif-dot {
  position: absolute;
  top: 50%;
  right: .6rem;
  transform: translateY(-50%);
  width: 8px;
  height: 8px;
  background: #e74c3c;
  border-radius: 50%;
  box-shadow: 0 0 0 2px #fff;
  animation: notif-pulse 2s infinite;
}
@keyframes notif-pulse {
  0%,100% { box-shadow: 0 0 0 2px #fff, 0 0 0 0 rgba(231,76,60,.5); }
  50%     { box-shadow: 0 0 0 2px #fff, 0 0 0 5px rgba(231,76,60,0); }
}