/* ==========================================================================
   WiseTask — Appointment & Fitness Theme
   "Calm Clinical" design system — sage/teal + off-white, rounded, spacious
   Loads AFTER bootstrap.min.css / swiper.min.css / iconsax.gitlab.io font / iconly.css
   Replaces the old style.css entirely.
   ========================================================================== */

/* ---------- 1. Fonts ---------- */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700&family=Mulish:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400&display=swap');

/* ---------- 2. Design tokens ---------- */
:root{
  /* base surface */
  --bg:#FAF9F4;
  --bg-alt:#F1EFE6;
  --surface:#FFFFFF;
  --surface-alt:#F4F6F4;
  --border:#E6E3D6;
  --border-soft:#EFEDE3;

  /* ink */
  --ink:#1E2A24;
  --ink-soft:#5C6B62;
  --ink-faint:#93A099;
  --ink-on-primary:#FFFFFF;

  /* brand — sage/teal (falls back if PHP-injected --color-primary is absent) */
  --primary: var(--color-primary, #4C8577);
  --primary-dark:#386256;
  --primary-light:#E3EEE9;
  --primary-rgb: var(--color-primary-rgb, 76,133,119);

  --accent:#C08552;      /* warm clay — sparingly, badges/highlights only */
  --accent-light:#F4E7DA;

  --success:#3F9142;
  --success-light:#E5F3E1;
  --warning:#C8912E;
  --warning-light:#FBF0DA;
  --danger:#C1594A;
  --danger-light:#FBE7E2;
  --info:#3D82A8;
  --info-light:#E3F0F6;

  /* elevation */
  --shadow-sm: 0 1px 3px rgba(30,42,36,0.06), 0 1px 2px rgba(30,42,36,0.04);
  --shadow-md: 0 8px 24px rgba(30,42,36,0.08);
  --shadow-lg: 0 16px 40px rgba(30,42,36,0.12);

  /* shape */
  --r-sm:10px;
  --r-md:16px;
  --r-lg:22px;
  --r-pill:999px;

  /* type */
  --font-display:'Fraunces', Georgia, serif;
  --font-body:'Mulish', -apple-system, BlinkMacSystemFont, sans-serif;

  /* layout */
  --header-h:64px;
  --bottomnav-h:70px;
  --safe-b: env(safe-area-inset-bottom, 0px);

  color-scheme: light;
}

[data-theme="dark"]{
  --bg:#121815;
  --bg-alt:#0E1310;
  --surface:#1B231F;
  --surface-alt:#212B26;
  --border:#2B3630;
  --border-soft:#24302A;

  --ink:#ECEFEA;
  --ink-soft:#A9B4AC;
  --ink-faint:#6E7A72;
  --ink-on-primary:#0E1310;

  --primary: var(--color-primary, #7FBBA9);
  --primary-dark:#5E9A89;
  --primary-light:#1E2B26;
  --primary-rgb: var(--color-primary-rgb, 127,187,169);

  --accent:#D6A272;
  --accent-light:#332822;

  --success:#6FBE72;
  --success-light:#1D2B1E;
  --warning:#E0B45C;
  --warning-light:#332A16;
  --danger:#E08072;
  --danger-light:#332120;
  --info:#7CB9DA;
  --info-light:#1B2A32;

  --shadow-sm: 0 1px 3px rgba(0,0,0,0.35);
  --shadow-md: 0 8px 24px rgba(0,0,0,0.4);
  --shadow-lg: 0 16px 40px rgba(0,0,0,0.5);

  color-scheme: dark;
}

/* ---------- 3. Reset / base ---------- */
*{ box-sizing:border-box; }
html{ -webkit-tap-highlight-color:transparent; }
body.mulish-font{
  font-family:var(--font-body);
  background:var(--bg);
  color:var(--ink);
  transition:background .25s ease, color .25s ease;
  padding-bottom:calc(var(--bottomnav-h) + var(--safe-b));
}
h1,h2,h3,h4,h5,h6{ font-family:var(--font-display); color:var(--ink); font-weight:600; margin:0; }
p{ color:var(--ink-soft); margin:0; }
a{ text-decoration:none; color:inherit; }
img{ max-width:100%; display:block; }
::selection{ background:var(--primary); color:var(--ink-on-primary); }

.app-container{
  max-width:640px;
  margin:0 auto;
  padding:0 18px;
}
@media (min-width:992px){
  .app-container{ max-width:900px; padding:0 32px; }
}

.section{ padding-top:20px; }
.section--first{ padding-top:14px; }
.section-title{
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:14px;
}
.section-title h3{ font-size:19px; }
.section-title a{ font-size:13px; font-weight:700; color:var(--primary); }

.text-muted-soft{ color:var(--ink-soft); }
.text-faint{ color:var(--ink-faint); }

/* ---------- 4. Sticky header ---------- */
.app-header{
  position:sticky; top:0; z-index:50;
  height:var(--header-h);
  display:flex; align-items:center;
  background:rgba(250,249,244,0.86);
  backdrop-filter:blur(14px) saturate(160%);
  -webkit-backdrop-filter:blur(14px) saturate(160%);
  border-bottom:1px solid var(--border-soft);
}
[data-theme="dark"] .app-header{ background:rgba(18,24,21,0.82); }

.app-header__inner{
  width:100%;
  display:flex; align-items:center; gap:12px;
}
.app-header__btn{
  width:40px; height:40px; flex:0 0 auto;
  display:flex; align-items:center; justify-content:center;
  border-radius:var(--r-pill);
  background:var(--surface-alt);
  color:var(--ink);
  border:1px solid var(--border-soft);
  transition:background .15s ease, transform .1s ease;
}
.app-header__btn:active{ transform:scale(.94); }
.app-header__btn:hover{ background:var(--primary-light); color:var(--primary-dark); }
.app-header__title{
  flex:1 1 auto; min-width:0;
  font-size:17px; font-weight:600;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.app-header__title small{
  display:block; font-family:var(--font-body); font-weight:500;
  font-size:11px; color:var(--ink-faint); margin-top:1px;
}
.app-header__logo img{ height:30px; width:auto; }
.app-header__actions{ display:flex; align-items:center; gap:8px; flex:0 0 auto; }

/* theme toggle pill button used in header */
.theme-toggle-btn{
  width:40px; height:40px; border-radius:var(--r-pill);
  border:1px solid var(--border-soft); background:var(--surface-alt);
  display:flex; align-items:center; justify-content:center; color:var(--ink);
}
.theme-toggle-btn .i-sun{ display:none; }
[data-theme="dark"] .theme-toggle-btn .i-sun{ display:block; }
[data-theme="dark"] .theme-toggle-btn .i-moon{ display:none; }

/* ---------- 5. Search bar ---------- */
.app-search{ position:relative; margin-top:16px; }
.app-search input{
  width:100%; height:48px;
  border-radius:var(--r-pill);
  border:1px solid var(--border);
  background:var(--surface);
  padding:0 46px 0 46px;
  font-family:var(--font-body); font-size:14px; color:var(--ink);
  box-shadow:var(--shadow-sm);
}
.app-search input::placeholder{ color:var(--ink-faint); }
.app-search input:focus{ outline:none; border-color:var(--primary); box-shadow:0 0 0 3px rgba(var(--primary-rgb),0.15); }
.app-search .app-search__icon{
  position:absolute; left:16px; top:50%; transform:translateY(-50%);
  color:var(--ink-faint); font-size:16px; pointer-events:none;
}

/* ---------- 6. Pill tabs (categories / All-Fitness / My Progress) ---------- */
.pill-tabs{
  display:flex; gap:6px; overflow-x:auto; padding:5px;
  background:var(--surface-alt); border-radius:var(--r-pill);
  border:1px solid var(--border-soft);
  scrollbar-width:none;
}
.pill-tabs::-webkit-scrollbar{ display:none; }
.pill-tabs .nav-link{
  flex:0 0 auto; white-space:nowrap;
  border:0 !important; border-radius:var(--r-pill) !important;
  padding:9px 18px !important; font-size:13px; font-weight:600;
  color:var(--ink-soft); background:transparent;
}
.pill-tabs.nav-pills .nav-link{ flex:1 1 0; text-align:center; }
.pill-tabs .nav-link.active{
  background:var(--surface) !important; color:var(--primary-dark) !important;
  box-shadow:var(--shadow-sm);
}

/* ---------- 7. Promo / CTA banner ---------- */
.promo-banner{
  position:relative; border-radius:var(--r-lg); overflow:hidden;
  min-height:170px; padding:26px 22px; display:flex; align-items:flex-end;
  background-size:cover; background-position:center;
  box-shadow:var(--shadow-md);
}
.promo-banner::before{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(20,28,24,.15), rgba(20,28,24,.78));
}
.promo-banner__content{ position:relative; z-index:1; color:#fff; }
.promo-banner__content h2{ color:#fff; font-size:21px; margin-bottom:6px; }
.promo-banner__content p{ color:rgba(255,255,255,.82); font-size:13px; margin-bottom:14px; }

/* ---------- 8. Buttons ---------- */
.btn{
  font-family:var(--font-body); font-weight:700; font-size:14px;
  border-radius:var(--r-md); border:1px solid transparent;
  padding:12px 20px; display:inline-flex; align-items:center; justify-content:center; gap:8px;
  transition:transform .1s ease, background .15s ease, box-shadow .15s ease;
}
.btn:active{ transform:scale(.98); }
.btn-primary, .btn-gradient{
  background:var(--primary) !important; border-color:var(--primary) !important;
  color:var(--ink-on-primary) !important; box-shadow:var(--shadow-sm);
}
.btn-primary:hover, .btn-gradient:hover{ background:var(--primary-dark) !important; border-color:var(--primary-dark) !important; }
.btn-outline-primary{
  background:transparent !important; border-color:var(--primary) !important; color:var(--primary-dark) !important;
}
.btn-outline-primary:hover{ background:var(--primary-light) !important; }
.btn-outline-success{ background:transparent !important; border-color:var(--success) !important; color:var(--success) !important; }
.btn-outline-danger{ background:transparent !important; border-color:var(--danger) !important; color:var(--danger) !important; }
.btn-danger{ background:var(--danger) !important; border-color:var(--danger) !important; color:#fff !important; }
.btn-success{ background:var(--success) !important; border-color:var(--success) !important; color:#fff !important; }
.btn-light{ background:var(--surface-alt) !important; border-color:var(--border-soft) !important; color:var(--ink) !important; }
.btn-sm{ padding:8px 14px; font-size:12px; border-radius:var(--r-sm); }
.btn.w-100{ width:100%; }

/* small circular quick-book pill used on service cards */
.btn-quick{
  background:var(--ink) !important; color:#fff !important;
  border-radius:var(--r-sm) !important; font-size:12px !important; padding:8px 12px !important;
}
[data-theme="dark"] .btn-quick{ background:var(--primary) !important; color:var(--ink-on-primary) !important; }

/* ---------- 9. Service / vendor carousel cards ---------- */
.card-scroller{ margin-top:2px; }
.service-card{
  position:relative; background:var(--surface);
  border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow-sm);
  border:1px solid var(--border-soft);
  height:100%;
}
.service-card__img{ position:relative; aspect-ratio:4/3; overflow:hidden; background:var(--surface-alt); }
.service-card__img img{ width:100%; height:100%; object-fit:cover; }
.service-card__body{ padding:14px; }
.service-card__body h4{ font-size:14.5px; line-height:1.3; margin-bottom:4px; cursor:pointer; }
.service-card__meta{ display:flex; align-items:center; gap:5px; font-size:11.5px; color:var(--ink-soft); margin-bottom:8px; }
.service-card__price-row{ display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
.service-card__price{ font-family:var(--font-display); font-weight:600; font-size:15px; color:var(--primary-dark); }
.service-card__price del{ font-size:11px; color:var(--ink-faint); margin-left:5px; font-family:var(--font-body); }
.service-card__vendor{ font-size:10.5px; color:var(--ink-faint); }

.wishlist-btn{
  position:absolute; top:10px; right:10px; z-index:5;
  width:34px; height:34px; border-radius:var(--r-pill);
  background:rgba(255,255,255,.92); backdrop-filter:blur(4px);
  display:flex; align-items:center; justify-content:center;
  color:var(--ink-soft); box-shadow:var(--shadow-sm);
}
.wishlist-btn.active, .wishlist-btn.active i{ color:var(--danger); }

.h-scroll-list{
  display:flex; gap:14px; overflow-x:auto; padding:2px 2px 10px;
  list-style:none; margin:0; scroll-snap-type:x proximity;
}
.h-scroll-list::-webkit-scrollbar{ height:0; }
.h-scroll-list > li{ scroll-snap-align:start; }

/* ---------- 10. List item cards (bookings / orders / programs) ---------- */
.item-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:14px; }
.item-card{
  background:var(--surface); border:1px solid var(--border-soft);
  border-radius:var(--r-lg); padding:14px; box-shadow:var(--shadow-sm);
  display:flex; gap:14px;
}
.item-card__img{ flex:0 0 auto; width:88px; height:88px; border-radius:var(--r-md); overflow:hidden; background:var(--surface-alt); position:relative; }
.item-card__img img{ width:100%; height:100%; object-fit:cover; }
.item-card__img .locked-overlay{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  background:rgba(20,28,24,.35); color:#fff; font-size:20px;
}
.item-card__body{ flex:1 1 auto; min-width:0; }
.item-card__top{ display:flex; justify-content:space-between; align-items:flex-start; gap:8px; }
.item-card__top h4{ font-size:15px; line-height:1.3; margin-bottom:3px; }
.item-card__sub{ font-size:11.5px; color:var(--ink-soft); margin-bottom:6px; display:flex; align-items:center; gap:4px; }
.item-card__meta-row{ display:flex; gap:14px; margin:6px 0; flex-wrap:wrap; }
.item-card__meta-row span{ font-size:11px; color:var(--ink-soft); display:flex; align-items:center; gap:4px; }
.item-card.is-locked{ opacity:.6; }
.item-card__manage{
  display:block; text-align:center; margin-top:8px;
  font-size:12.5px; font-weight:700; padding:9px; border-radius:var(--r-sm);
  border:1px solid var(--primary); color:var(--primary-dark);
}
.item-card__manage:hover{ background:var(--primary-light); }

.focus-chip{
  display:inline-flex; font-size:10px; font-weight:600; padding:4px 10px;
  border-radius:var(--r-pill); background:var(--primary-light); color:var(--primary-dark);
  border:1px solid rgba(var(--primary-rgb),0.18);
}

.notice-banner{
  font-size:11.5px; line-height:1.4; border-radius:var(--r-sm);
  background:var(--warning-light); color:#7A5B1E; padding:8px 10px; margin:8px 0;
  border:1px solid rgba(200,145,46,0.2);
}
[data-theme="dark"] .notice-banner{ color:var(--warning); }

/* ---------- 11. Status pills + progress ---------- */
.status-pill{
  display:inline-flex; align-items:center; font-size:10px; font-weight:700;
  letter-spacing:.02em; text-transform:uppercase; padding:4px 10px;
  border-radius:var(--r-pill); color:#fff;
}
.status-pill--pending, .badge.bg-warning{ background:var(--warning) !important; color:#fff !important; }
.status-pill--success, .badge.bg-success{ background:var(--success) !important; color:#fff !important; }
.status-pill--danger, .badge.bg-danger{ background:var(--danger) !important; color:#fff !important; }
.status-pill--info, .badge.bg-info{ background:var(--info) !important; color:#fff !important; }
.status-pill--muted, .badge.bg-secondary{ background:var(--ink-faint) !important; color:#fff !important; }
.status-pill--primary, .badge.bg-primary{ background:var(--primary) !important; color:var(--ink-on-primary) !important; }

.progress-row{ margin-top:10px; }
.progress-row__label{ display:flex; justify-content:space-between; font-size:10.5px; font-weight:700; margin-bottom:5px; text-transform:uppercase; letter-spacing:.02em; }
.progress{
  height:6px !important; background:var(--border-soft) !important;
  border-radius:var(--r-pill) !important; overflow:hidden;
}
.progress-bar{ border-radius:var(--r-pill); transition:width .4s ease; }

/* ---------- 12. Forms ---------- */
.form-field{ margin-bottom:16px; }
.form-field label, .form-label{
  display:block; font-size:12px; font-weight:700; color:var(--ink-soft);
  margin-bottom:6px; text-transform:uppercase; letter-spacing:.02em;
}
.form-control, .form-select, .input-group{
  background:var(--surface-alt) !important; border:1px solid var(--border) !important;
  border-radius:var(--r-md) !important; color:var(--ink) !important;
  font-family:var(--font-body); font-size:14.5px;
}
.form-control{ padding:12px 14px !important; height:auto !important; }
.form-control:focus{ outline:none; box-shadow:0 0 0 3px rgba(var(--primary-rgb),.15) !important; border-color:var(--primary) !important; background:var(--surface) !important; }
.input-group{ display:flex; align-items:center; padding:0 12px; }
.input-group .form-control{ background:transparent !important; border:0 !important; box-shadow:none !important; }
.input-group i{ color:var(--ink-faint); margin-right:8px; }
.color-red{ color:var(--danger); }
.text-danger{ color:var(--danger) !important; font-size:12px; }
.alert{ border-radius:var(--r-md); border:0; font-size:13px; padding:12px 14px; }
.alert-success{ background:var(--success-light); color:var(--success); }
.alert-danger{ background:var(--danger-light); color:var(--danger); }
.alert-warning{ background:var(--warning-light); color:#7A5B1E; }

/* dark-mode toggle switch (settings page) */
.theme-toggle-button{ position:relative; width:46px; height:26px; }
.theme-toggle-button input{ appearance:none; width:46px; height:26px; border-radius:var(--r-pill); background:var(--border); position:relative; cursor:pointer; outline:none; transition:background .2s; }
.theme-toggle-button input::before{ content:''; position:absolute; width:20px; height:20px; border-radius:50%; background:#fff; top:3px; left:3px; transition:transform .2s; box-shadow:var(--shadow-sm); }
.theme-toggle-button input:checked{ background:var(--primary); }
.theme-toggle-button input:checked::before{ transform:translateX(20px); }

/* ---------- 13. Menu / settings lists ---------- */
.menu-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
.menu-item{
  display:flex; align-items:center; gap:14px; background:var(--surface);
  border:1px solid var(--border-soft); border-radius:var(--r-md); padding:14px 16px;
  box-shadow:var(--shadow-sm);
}
.menu-item__icon{
  width:40px; height:40px; border-radius:var(--r-pill); background:var(--primary-light);
  color:var(--primary-dark); display:flex; align-items:center; justify-content:center; flex:0 0 auto;
}
.menu-item__body{ flex:1 1 auto; display:flex; align-items:center; justify-content:space-between; }
.menu-item__body h5{ font-size:14px; margin-bottom:2px; }
.menu-item__body h6{ font-size:11.5px; font-weight:500; color:var(--ink-faint); }
.menu-item .chevron{ color:var(--ink-faint); }

/* ---------- 14. Profile blocks ---------- */
.profile-hero{ text-align:center; padding:26px 0 10px; }
.profile-hero img{ width:88px; height:88px; border-radius:50%; object-fit:cover; margin:0 auto 12px; border:3px solid var(--surface); box-shadow:var(--shadow-md); }
.profile-hero h3{ font-size:18px; }
.profile-hero h4{ font-size:12.5px; font-weight:500; color:var(--ink-faint); }

/* ---------- 15. Drawers / offcanvas ---------- */
.offcanvas{ background:var(--surface) !important; color:var(--ink) !important; border:0 !important; }
.offcanvas-start{ width:300px !important; border-radius:0 var(--r-lg) var(--r-lg) 0 !important; }
.offcanvas-bottom{ border-radius:var(--r-lg) var(--r-lg) 0 0 !important; }
.offcanvas-header{ padding:18px 18px 10px; border-bottom:1px solid var(--border-soft); }
.offcanvas-title{ font-family:var(--font-display); font-weight:600; }
.btn-close{ filter:var(--bs-btn-close-filter,none); }
[data-theme="dark"] .btn-close{ filter:invert(1) grayscale(100%) brightness(1.6); }

/* ---------- 16. Sticky bottom nav ---------- */
.app-bottom-nav{
  position:fixed; left:0; right:0; bottom:0; z-index:60;
  height:calc(var(--bottomnav-h) + var(--safe-b));
  padding-bottom:var(--safe-b);
  background:rgba(255,255,255,0.92);
  backdrop-filter:blur(16px) saturate(160%);
  -webkit-backdrop-filter:blur(16px) saturate(160%);
  border-top:1px solid var(--border-soft);
  box-shadow:0 -6px 24px rgba(30,42,36,0.06);
}
[data-theme="dark"] .app-bottom-nav{ background:rgba(18,24,21,0.9); }
.app-bottom-nav ul{ list-style:none; margin:0; padding:0; height:var(--bottomnav-h); display:flex; align-items:center; justify-content:space-around; }
.app-bottom-nav li{ flex:1 1 0; height:100%; }
.app-bottom-nav a{
  height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
  color:var(--ink-faint); position:relative;
}
.app-bottom-nav .icon{ width:22px; height:22px; display:flex; align-items:center; justify-content:center; font-size:20px; }
.app-bottom-nav h5{ font-size:10.5px; font-weight:600; color:var(--ink-faint); margin:0; }
.app-bottom-nav li.active a{ color:var(--primary-dark); }
.app-bottom-nav li.active h5{ color:var(--primary-dark); }
.app-bottom-nav li.active::before{
  content:''; position:absolute; top:6px; left:50%; transform:translateX(-50%);
  width:26px; height:3px; border-radius:var(--r-pill); background:var(--primary);
}

/* ---------- 17. Desktop enhancements ---------- */
@media (min-width:992px){
  body.mulish-font{ padding-bottom:0; }
  .app-bottom-nav{ display:none; }
  .item-list{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
  .desktop-hide{ display:none; }
}
@media (max-width:991px){ .mobile-hide{ display:none; } }

/* ---------- 18. Auth pages ---------- */
.auth-shell{
  min-height:100vh; display:flex; align-items:center; justify-content:center;
  padding:32px 20px; background:
    radial-gradient(circle at 15% 10%, rgba(var(--primary-rgb),0.10), transparent 45%),
    radial-gradient(circle at 90% 90%, rgba(var(--primary-rgb),0.08), transparent 45%),
    var(--bg);
}
.auth-card{
  width:100%; max-width:420px; background:var(--surface);
  border:1px solid var(--border-soft); border-radius:var(--r-lg);
  box-shadow:var(--shadow-lg); padding:34px 28px;
}
.auth-card__logo{ text-align:center; margin-bottom:18px; }
.auth-card__logo img{ height:36px; margin:0 auto; }
.auth-card h3.title{ font-size:22px; text-align:center; margin-bottom:22px; }
.auth-card .or-text{ display:flex; align-items:center; gap:10px; color:var(--ink-faint); font-size:12px; margin:16px 0; }
.auth-card .or-text span:not(.font-sm){ flex:1; height:1px; background:var(--border); }
.auth-card .btn-icon{ width:44px; height:44px; display:flex; align-items:center; justify-content:center; border-radius:50%; border:1px solid var(--border); color:var(--ink-soft); }
.auth-card .link a{ color:var(--primary-dark); font-weight:700; }
.auth-card .show-password-field{ position:absolute; right:14px; top:50%; transform:translateY(-50%); color:var(--ink-faint); cursor:pointer; }

/* ---------- 19. Fitness player ---------- */
.player-video{
  position:relative; border-radius:var(--r-lg); overflow:hidden;
  background:#000; box-shadow:var(--shadow-md); border:3px solid var(--surface);
}
.player-video video{ width:100%; display:block; background:#000; }
.player-watermark{ position:absolute; top:14px; right:14px; z-index:2; width:46px; opacity:.6; pointer-events:none; }
.player-meta{ display:flex; align-items:center; justify-content:space-between; margin-top:14px; }
.player-meta h4{ font-size:17px; }
.player-controls{ display:flex; gap:10px; margin-top:18px; padding-bottom:18px; align-items:center; }
.player-controls .btn-nav{ width:56px; height:56px; border-radius:50%; padding:0; flex:0 0 auto; }
.player-controls .btn-play{
  width:64px; height:64px; border-radius:50%; padding:0; flex:0 0 auto; position:relative;
}
.player-controls .btn-play::after{
  content:''; position:absolute; inset:-6px; border-radius:50%;
  border:2px solid rgba(var(--primary-rgb),0.35);
  animation:breathe 2.6s ease-in-out infinite;
}
@keyframes breathe{
  0%,100%{ transform:scale(.94); opacity:.7; }
  50%{ transform:scale(1.08); opacity:0; }
}
.player-controls .btn-next{ flex:1 1 auto; }

.exercise-goal-ring{
  width:46px; height:46px; border-radius:50%;
  background:var(--primary-light); color:var(--primary-dark);
  display:flex; align-items:center; justify-content:center; flex:0 0 auto;
}

/* ---------- 20. Misc / tables (orders) ---------- */
table.table{ color:var(--ink); }
table.table thead th{ font-size:11px; text-transform:uppercase; color:var(--ink-faint); border-bottom:1px solid var(--border); font-weight:700; }
table.table td{ border-color:var(--border-soft); font-size:13px; vertical-align:middle; }

.pagination{ gap:6px; }
.page-link{
  border-radius:var(--r-sm) !important; border:1px solid var(--border-soft) !important;
  color:var(--ink-soft) !important; background:var(--surface) !important;
}
.page-item.active .page-link{ background:var(--primary) !important; border-color:var(--primary) !important; color:var(--ink-on-primary) !important; }

.empty-state{ text-align:center; padding:56px 20px; }
.empty-state i, .empty-state .iconsax{ font-size:44px; color:var(--ink-faint); opacity:.6; margin-bottom:12px; }
.empty-state h6{ font-size:14px; color:var(--ink-soft); font-weight:600; }

.modal-content{ background:var(--surface) !important; color:var(--ink) !important; border-radius:var(--r-lg) !important; border:0 !important; box-shadow:var(--shadow-lg) !important; }

/* ---------- 21. Preloader ---------- */
/* script.js adds/removes these classes on window 'load' — this file supplies
   the actual visual styling, since it replaces the old style.css. */
.loader{
  position:fixed; inset:0; z-index:9999;
  display:flex; align-items:center; justify-content:center;
  background:var(--bg);
  transition:opacity .8s ease, visibility .8s ease;
  opacity:1; visibility:visible;
}
.loader img{
  width:64px; height:64px; object-fit:contain;
  animation:loader-pulse 1.1s ease-in-out infinite;
}
.loader.hide{ opacity:0; visibility:hidden; pointer-events:none; }
@keyframes loader-pulse{
  0%,100%{ transform:scale(1); opacity:1; }
  50%{ transform:scale(.88); opacity:.6; }
}
/* Prevent the page from scrolling/jumping behind the preloader while it's up */
body:has(.loader:not(.hide)){ overflow:hidden; }

.hotel-card-slider{ height:auto !important; padding-bottom:10px !important; }
.swiper-wrapper{ height:auto !important; }