/* ==========================================================================
   monshas.css - The Monsha's UI layer
   Built from _changelog/2026-09-24_023_ui-reskin-stage-1/css/*.css in filename
   order. Edit the parts, re-run scratchpad/build_css.sh, re-upload.
   Do not hand-edit this file on the server.

   Linked immediately after @vite(...) so it wins equal-specificity ties
   against the compiled theme stylesheet without !important.
   Build: 2026-09-24  v20
   ========================================================================== */


/* ---------- 00-tokens.css ---------- */
/* ==========================================================================
   The Monsha's — brand layer
   Served from public/frontend/css/monshas.css, linked immediately after the
   compiled theme stylesheet in frontend/layout/head.blade.php. That position
   is deliberate: it is the only one that beats style-dde1e400.css on an
   equal-specificity tie, so almost nothing here needs !important.

   The palette is sampled from themonshas.com, which is the design this site
   is being brought in line with. Token names are kept from the earlier
   --tm-* layer so every rule written in entries 014-019 retargets to the new
   brand automatically.
   ========================================================================== */

:root{
  /* --- themonshas.com palette ------------------------------------------- */
  --tm-plum-dark:#292128;      /* headings, logo "The" */
  --tm-plum:#4A293F;           /* CTA gradient start */
  --tm-plum-mid:#68465A;       /* CTA gradient middle */
  --tm-mauve:#76566B;          /* brand accent, logo "Monsha's" */
  --tm-mauve-soft:#8A6578;     /* CTA gradient end */
  --tm-gold:#C9A46A;           /* rules, underlines, small accents */
  --tm-gold-deep:#D4AF37;      /* ratings, badges */
  --tm-gold-soft:#E8C98F;
  --tm-tan:#A98772;            /* icons */
  --tm-cream:#FFF3E2;          /* warm section ground */
  --tm-blush:#E8DEE3;          /* cool section ground */
  --tm-footer:#0b0b0b;

  /* --- mapped onto the names the existing UI layer already uses ---------- */
  --tm-primary:var(--tm-mauve);
  --tm-primary-dark:var(--tm-plum);
  --tm-primary-soft:#F6F0F3;
  --tm-accent:var(--tm-gold);
  --tm-green:#16a34a;          /* savings / discount — deliberately not gold */
  --tm-sand:var(--tm-gold-soft);
  --tm-ink:var(--tm-plum-dark);
  --tm-muted:#625860;
  --tm-line:#EDE5E8;
  --tm-line-strong:#E3D9DE;
  --tm-surface:#ffffff;
  --tm-bg:#FAF7F8;

  --tm-cta:linear-gradient(90deg, #4A293F 0%, #68465A 55%, #8A6578 100%);
  --tm-font:'Poppins', 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --tm-r:14px;
  --tm-r-sm:10px;
  --tm-r-lg:20px;
  --tm-r-pill:999px;
  --tm-shadow:0 1px 2px rgba(41,33,40,.04), 0 4px 16px rgba(41,33,40,.06);
  --tm-shadow-lg:0 8px 28px rgba(41,33,40,.10);
  --tm-shadow-cta:0 6px 18px rgba(74,41,63,.28);
}

/* --------------------------------------------------------------------------
   Typography
   The compiled theme pins DM Sans with !important on ten selectors, so those
   have to be named explicitly. Everything else inherits from body.
   -------------------------------------------------------------------------- */
body,
button, input, optgroup, select, textarea,
h1, h2, h3, h4, h5, h6,
section .accordion .accordion-item,
.terms-section .accordion .accordion-item,
.privacy-section .accordion .accordion-item,
.custom-nav-tabs .nav-item .nav-link span,
.custom-nav-tabs .nav-item .nav-link small{
  font-family:var(--tm-font) !important;
}

body{
  color:var(--tm-muted);
  background:var(--tm-surface);
  -webkit-font-smoothing:antialiased;
}

h1, h2, h3, h4, h5, h6{
  color:var(--tm-plum-dark);
  letter-spacing:-.01em;
  /* the theme sets `h1,h2{text-transform:capitalize}`, which turns a written
     sentence into Title Case. Headings are admin-authored - show them as typed. */
  text-transform:none;
}
h1{ font-weight:600; }
h2, h3{ font-weight:600; }

a{ color:var(--tm-mauve); }
a:hover{ color:var(--tm-plum); }

/* Section heading, themonshas.com style: title left, gold hairline under it,
   "view all" pushed right. The theme already lays .title out as a flex row. */
.title h2,
.title h3{
  position:relative;
  padding-bottom:10px;
  font-weight:600;
  color:var(--tm-plum-dark);
}
.title h2::after,
.title h3::after{
  content:'';
  position:absolute;
  left:0;
  bottom:0;
  width:48px;
  height:2px;
  background:var(--tm-gold);
  border-radius:2px;
}
.title .view-all{
  color:var(--tm-mauve);
  font-weight:500;
}
.title .view-all:hover{ color:var(--tm-plum); }

/* ---------- 01-foundation.css ---------- */
/* ==========================================================================
   The Monsha's — UI layer
   Entries 014-019. Served from public/frontend/css/monshas.css (was the
   Backend > Customizations > Custom CSS box until entry 023).
   ========================================================================== */

/* Nothing on a phone should ever scroll sideways. Individual overflow bugs are
   fixed at source below; this is the backstop that stops one bad element
   shifting the whole page left and clipping content off the edge. */
html, body{ max-width:100%; overflow-x:hidden; }
/* `overflow-x:hidden` on body turns it into a scroll container, which silently
   kills `position:sticky` on the header (entry 023). `clip` does the same
   clipping WITHOUT establishing a scroll container, so the sticky header keeps
   working. The hidden declaration above stays as the fallback. */
@supports (overflow:clip){
  html, body{ overflow-x:clip; }
}
img, svg, video, table{ max-width:100%; }

/* Tokens moved to 00-tokens.css and retargeted to the themonshas.com palette. */

/* --------------------------------------------------------------------------
   1. Category images
   The theme styles these tiles for transparent ICONS:
     .custom-nav-tabs .nav-item .nav-link img { width:50px; object-fit:contain }
     .custom-nav-tabs .nav-item .nav-link .img-box { padding:…; background:… }
   With real photographs that letterboxes a small image inside a grey square.
   Make the box a true circle and let the photo fill it.
   -------------------------------------------------------------------------- */
.custom-nav-tabs .nav-item .nav-link .img-box,
.category-section .custom-nav-tabs .nav-link .img-box{
  width:clamp(66px, 17vw, 96px);
  height:clamp(66px, 17vw, 96px);
  aspect-ratio:1 / 1;
  padding:0;
  background:transparent;
  border-radius:50%;
  overflow:hidden;
  margin:0 auto 10px;
  box-shadow:var(--tm-shadow);
}

.custom-nav-tabs .nav-item .nav-link .img-box img,
.custom-nav-tabs .nav-item .nav-link img,
.category-section .custom-nav-tabs .nav-link .img-box img{
  width:100%;
  height:100%;
  object-fit:cover;      /* was: contain -> letterboxed */
  object-position:center;
  display:block;
  border-radius:50%;
  /* the theme inverts these for dark mode, which wrecks photographs */
  filter:none;
}

/* circular variant used on the category listing */
.custom-nav-tabs .nav-item .nav-link.categories .img-box{
  width:clamp(56px, 15vw, 72px);
  min-width:clamp(56px, 15vw, 72px);
  height:clamp(56px, 15vw, 72px);
  border-radius:50%;
  margin-bottom:0 !important;
}

/* tile itself: lighter, calmer */
.category-section .custom-nav-tabs .nav-link{
  border:1px solid var(--tm-line);
  border-radius:var(--tm-r);
  box-shadow:none;
  transition:box-shadow .2s ease, border-color .2s ease, transform .2s ease;
}
.category-section .custom-nav-tabs .nav-link:hover,
.category-section .custom-nav-tabs .nav-link.active{
  border-color:var(--tm-primary);
  box-shadow:var(--tm-shadow);
}
.category-section .custom-nav-tabs .nav-link span{
  font-weight:600;
  color:var(--tm-ink);
  line-height:1.25;
}
.category-section .custom-nav-tabs .nav-link small{ color:var(--tm-muted); }

/* ---------- 02-cards-and-polish.css ---------- */
/* ==========================================================================
   2. Service cards + global polish
   ========================================================================== */

body{ color:var(--tm-ink); }

/* one calm card treatment instead of the theme's mixed borders/shadows */
.service-list-section .card,
.service-section .card,
.offer-section .card,
.card{
  border-radius:var(--tm-r);
  border:1px solid var(--tm-line);
  box-shadow:none;
  overflow:hidden;
  transition:box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}
.service-list-section .card:hover,
.service-section .card:hover{
  box-shadow:var(--tm-shadow-lg);
  border-color:transparent;
  transform:translateY(-2px);
}

/* Service artwork is 1280x720 with typography baked in, so the card shows the
   whole 16:9 frame - at this ratio `cover` crops nothing. */
.card .card-img img,
.card .overflow-hidden > a.card-img img{
  width:100%;
  height:auto;
  aspect-ratio:16 / 9;
  object-fit:cover;
  object-position:center;
  display:block;
}
.card .overflow-hidden{ border-radius:var(--tm-r-sm); }

/* The theme parks BOTH badges in the same corner:
     .like-icon{ position:absolute; top:10px; left:10px }
     .discount-tag{ position:absolute; top:10px; right:10px }
   and my discount rule moved the pill left, straight under the heart.
   Discount keeps the left, wishlist moves to the right. */
.card .like-icon,
.like-icon{
  left:auto;
  right:10px;
  z-index:4;
  background-color:rgba(255,255,255,.92);
  box-shadow:0 1px 4px rgba(16,24,40,.16);
}

/* price: payable price is the hero, MRP is secondary */
.card .service-title small,
.service-details-content .amount .value{
  color:var(--tm-ink);
  font-weight:700;
}
.card .service-title del{
  color:var(--tm-muted);
  font-weight:400;
  opacity:.75;
}

/* pills */
.discount-tag,
.sale-tag span,
.badge{ border-radius:var(--tm-r-pill); }
.discount-tag{ background:var(--tm-accent); color:#fff; font-weight:600; letter-spacing:.01em; }

/* buttons: teal, pill, comfortable target */
.btn-solid,
.book-now-btn.btn-solid{
  background:var(--tm-primary);
  border-color:var(--tm-primary);
  border-radius:var(--tm-r-pill);
  font-weight:600;
  min-height:44px;
}
.btn-solid:hover,
.book-now-btn.btn-solid:hover{
  background:var(--tm-primary-dark);
  border-color:var(--tm-primary-dark);
}
.btn-outline{
  border-radius:var(--tm-r-pill);
  border-color:var(--tm-primary);
  color:var(--tm-primary);
  min-height:44px;
}
.btn-outline:hover{ background:var(--tm-primary); color:#fff; }

/* visible, on-brand focus ring (accessibility) */
a:focus-visible, button:focus-visible, .btn:focus-visible, input:focus-visible, select:focus-visible{
  outline:none;
  box-shadow:0 0 0 3px rgba(0,149,145,.28);
  border-radius:var(--tm-r-sm);
}

/* section headings */
.title h2, .title h3{ color:var(--tm-ink); font-weight:700; letter-spacing:-.01em; }
.view-all{ color:var(--tm-primary); font-weight:600; }

/* long lists paint faster */
.service-list-section .row > .col,
.blog-section .row > .col{ content-visibility:auto; contain-intrinsic-size:320px; }


/* ==========================================================================
   MOBILE ONLY  (< 768px)
   ========================================================================== */
@media (max-width: 767.98px){

  body{ background:var(--tm-bg); }

  /* ---- service card: full-width 16:9 artwork on top, details beneath ----
     The service images are 1280x720 graphics with the service name typeset
     INTO them ("HAIR CUT / MUNDAN - PURITY - BLESSINGS / The Monsha's"). The
     previous 112px square thumbnail cropped that to unreadable fragments
     ("EADING", "ONEY WAX"), so the card is built around the whole rectangle. */
  .service-list-section .row > .col > .card,
  .service-section .row > .col > .card{
    display:block;
    padding:0;
    gap:0;
    background:var(--tm-surface);
    max-width:100%;
    overflow:hidden;
    border-radius:var(--tm-r);
  }
  .service-list-section .row > .col > .card *,
  .service-section .row > .col > .card *{ min-width:0; }
  .service-list-section .row > .col > .card > .overflow-hidden,
  .service-section .row > .col > .card > .overflow-hidden{
    width:100%;
    height:auto;
    border-radius:0;
    align-self:auto;
  }
  .service-list-section .row > .col > .card .card-body,
  .service-section .row > .col > .card .card-body{
    padding:12px 14px 0;
    display:flex;
    flex-direction:column;
    gap:6px;
  }
  .service-list-section .row > .col > .card .card-footer,
  .service-section .row > .col > .card .card-footer{
    padding:10px 14px 14px;
    border:0;
    background:transparent;
    display:block;
  }
  .card .service-title h4{
    font-size:15px;
    line-height:1.3;
    margin:0;
    overflow-wrap:anywhere;
    white-space:normal;
  }
  .card .service-detail{ margin-top:2px !important; }
  .card .service-detail ul{ gap:10px; flex-wrap:wrap; }
  .card .card-footer .book-now-btn.btn-solid,
  .card .book-now-btn.btn-solid{
    padding:9px 18px;
    font-size:14px;
    min-height:42px;
    width:100%;
    max-width:100%;
    white-space:nowrap;
  }

  /* ---- declutter ---- */
  /* single-currency, India-only: the mobile sub-header only shows "INR" */
  .sub-header.d-xxl-none{ display:none !important; }
  /* NOTE: the breadcrumb banner is NOT display:none here - its top padding is the
     only thing clearing the theme's absolutely-positioned header. It is collapsed
     to a bare spacer in 04-layout-fixes.css instead. */
  /* "The Monsha's · 0" repeated on every card - one provider, empty rating */
  .card .card-footer .footer-detail{ display:none !important; }
  /* footer link farm: keep logo + copyright, drop the columns */
  .footer-section .nav-folderized .row > [class*="col-"]:not(:first-child){ display:none !important; }

  /* ---- rhythm ---- */
  .section-b-space{ padding-bottom:22px; }
  .title h2{ font-size:19px; }
  .title h3{ font-size:17px; }
  .container-fluid-lg, .container-fluid-md, .container-fluid-xl{ padding-left:14px; padding-right:14px; }

  /* category rail: tighter, scrollable, no cramped tiles */
  .category-section .custom-nav-tabs .nav-link{ padding:10px 6px; }
  .category-section .custom-nav-tabs .nav-link span{ font-size:12px; }
  .category-section .custom-nav-tabs .nav-link small{ font-size:11px; }
}

/* ---------- 03-bottom-nav.css ---------- */
/* ==========================================================================
   3. Sticky bottom navigation (mobile only)
   Markup lives in Customizations > Custom HTML > Footer.
   Hidden from 768px up, so desktop is untouched.
   ========================================================================== */

.tm-bottom-nav{ display:none; }

@media (max-width: 767.98px){

  .tm-bottom-nav{
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    position:fixed;
    left:0; right:0; bottom:0;
    z-index:1030;                       /* above content, below Bootstrap modals (1055) */
    background:rgba(255,255,255,.96);
    backdrop-filter:saturate(180%) blur(12px);
    -webkit-backdrop-filter:saturate(180%) blur(12px);
    border-top:1px solid var(--tm-line);
    padding:6px 4px calc(6px + env(safe-area-inset-bottom));
    box-shadow:0 -2px 16px rgba(16,24,40,.06);
  }

  .tm-bottom-nav a{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:3px;
    min-height:48px;                    /* comfortable tap target */
    padding:4px 2px;
    font-size:11px;
    font-weight:600;
    line-height:1;
    color:var(--tm-muted);
    text-decoration:none;
    border-radius:12px;
    transition:color .15s ease, background .15s ease;
  }
  .tm-bottom-nav a svg{
    width:22px; height:22px;
    stroke:currentColor;
    fill:none;
    stroke-width:1.7;
    stroke-linecap:round;
    stroke-linejoin:round;
  }
  .tm-bottom-nav a:active{ background:var(--tm-primary-soft); }
  .tm-bottom-nav a.is-active{ color:var(--tm-primary); }

  /* keep page content clear of the bar */
  body{ padding-bottom:64px; }

  /* the theme's floating widgets would sit under the bar */
  .scroll-to-top, #scroll-to-top, .whatsapp-btn{ bottom:76px !important; }
}

/* ---------- 04-layout-fixes.css ---------- */
/* ==========================================================================
   4. Layout fixes + YesMadam-style upper section
   ========================================================================== */

/* --------------------------------------------------------------------------
   4a. HEADER OVERLAP  (regression from hiding the breadcrumb)
   The theme's header is `position:absolute; top:52px`, and .breadcrumb-section's
   135-154px top padding was the only thing pushing content clear of it.
   Keep the spacer, drop the banner visuals.
   -------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------
   4a-i. HEADER
   `header{ position:absolute; top:52px }` leaves a 52px transparent strip for
   the .sub-header, which is hidden on mobile - so on phones that strip is dead
   space. Pull the bar to the top.

   On every page EXCEPT the homepage the header has no hero behind it, so it
   gets a solid brand background. `.tm-home` / `.tm-inner` is set on <html> by
   the footer JS, because this theme has no per-page body class.
   -------------------------------------------------------------------------- */
.tm-inner header{
  top:0;
  background:var(--tm-primary);
  box-shadow:0 2px 14px rgba(16,24,40,.12);
}
.tm-inner header .top-header a:not(.dropdown-item),
.tm-inner header .top-header .nav-link,
.tm-inner header .top-header .custom-navbar .nav-link{
  color:#fff;
}
.tm-inner header .top-header .iconsax{ --Iconsax-Color:#ffffff; }
/* dropdown panels keep their own light background - do not whiten their text */
.tm-inner header .top-header .dropdown-menu a,
.tm-inner header .top-header .dropdown-menu .dropdown-item{ color:var(--tm-ink); }

@media (max-width: 767.98px){
  header{ top:0; }

  .breadcrumb-section{
    display:block !important;      /* was display:none - that removed the spacer */
    padding-block:84px 0 !important;
    min-height:0;
    background:none !important;
  }
  /* hide only the visuals, keep the box doing its spacing job */
  .breadcrumb-section > img.bg-img,
  .breadcrumb-section .breadcrumb-contain{ display:none !important; }
}

/* --------------------------------------------------------------------------
   4b. CATEGORY TILES — symmetric grid
   Theme uses `.custom-nav-tabs .nav-item { width: fit-content }` with a wrapping
   flex row, so pills size to their label and stagger. Force an even grid.
   -------------------------------------------------------------------------- */
/* The homepage rail is a SWIPER:
     <div class="swiper nav-tabs nav category-slider custom-nav-tabs">
       <div class="swiper-wrapper"> <div class="swiper-slide nav-item"> …
   Putting the grid on the container made the tiles grandchildren rather than
   grid items, and left Swiper measuring a bogus height - a ~600px void under
   the search bar on desktop. Neutralise Swiper and grid the WRAPPER instead.
   The /category page uses a plain <ul>, so it is gridded directly. */
.category-section .custom-nav-tabs .swiper-wrapper,
.category-row .custom-nav-tabs{
  display:grid;
  /* minmax(0,…) is essential: a plain 1fr floors at min-content, so a long
     category name makes the track wider than the screen and the whole grid
     overflows horizontally (labels then clip off the left edge). */
  grid-template-columns:repeat(auto-fill, minmax(160px, 1fr));
  gap:12px;
  border-bottom:0;
  padding-bottom:0;
  margin-bottom:0;
  max-width:100%;
}
.category-section .custom-nav-tabs.swiper{ overflow:visible; }
.category-section .custom-nav-tabs .swiper-wrapper{
  transform:none !important;   /* Swiper writes this inline every resize */
  height:auto !important;
}
.category-section .custom-nav-tabs .swiper-slide{
  width:auto !important;
  margin:0 !important;
  height:auto;
}
.category-section .swiper-pagination{ display:none; }
/* the theme also emits an empty <ul class="custom-nav-tabs custom-scroll"> */
.category-section ul.custom-nav-tabs:not(:has(.nav-item)){ display:none; }
.category-section .custom-nav-tabs .nav-item,
.category-row .custom-nav-tabs .nav-item{
  width:100%;              /* was fit-content */
  min-width:0;
  display:flex;
}
.category-section .custom-nav-tabs .nav-item .nav-link,
.category-row .custom-nav-tabs .nav-item .nav-link{
  width:100%;
  height:100%;
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px;
  border-radius:var(--tm-r);
  background:var(--tm-surface);
  border:1px solid var(--tm-line);
  text-align:left;
}
/* the pill variant becomes a card so every tile is the same shape */
.custom-nav-tabs .nav-item .nav-link.categories{
  border-radius:var(--tm-r);
  flex-direction:row;
  padding:10px;
  gap:10px;
}
.category-section .custom-nav-tabs .nav-item .nav-link span,
.category-row .custom-nav-tabs .nav-item .nav-link span,
.category-section .custom-nav-tabs .nav-item .nav-link small,
.category-row .custom-nav-tabs .nav-item .nav-link small{
  display:block;
  width:100%;
  min-width:0;
  max-width:100%;
  white-space:normal;        /* the theme keeps these on a single line */
  overflow-wrap:anywhere;
  word-break:break-word;
}

@media (max-width: 767.98px){
  .category-section .custom-nav-tabs .swiper-wrapper,
  .category-row .custom-nav-tabs{
    grid-template-columns:repeat(2, minmax(0, 1fr));   /* minmax(0,…): see above */
    gap:10px;
  }
  .category-section .custom-nav-tabs .nav-item .nav-link,
  .category-row .custom-nav-tabs .nav-item .nav-link{
    flex-direction:column;
    align-items:stretch;
    text-align:center;
    gap:8px;
    padding:8px 8px 12px;
    overflow:hidden;
  }

  /* The category artwork is wide marketing graphics WITH TEXT baked in. A
     circular crop cuts them to unreadable fragments ("BO", "EAN", "OOM").
     A 16:9 rounded panel shows the whole graphic instead. */
  .custom-nav-tabs .nav-item .nav-link .img-box,
  .custom-nav-tabs .nav-item .nav-link.categories .img-box,
  .category-section .custom-nav-tabs .nav-link .img-box{
    width:100%;
    min-width:0;
    height:auto;
    aspect-ratio:16 / 9;
    border-radius:10px;
    margin:0;
    box-shadow:none;
  }
  .custom-nav-tabs .nav-item .nav-link .img-box img,
  .custom-nav-tabs .nav-item .nav-link img,
  .category-section .custom-nav-tabs .nav-link .img-box img{
    border-radius:10px;
  }
}

/* --------------------------------------------------------------------------
   4c. UPPER SECTION — search block
   The headline/paragraph/decoration are hidden in 05-hero-banner.css (all
   breakpoints); this only handles the search field itself and the backdrop.
   -------------------------------------------------------------------------- */
@media (max-width: 767.98px){

  /* compact search block: location + search only, like the reference */
  .home-section{
    padding-top:92px;
    padding-bottom:10px;
    background-image:none;
    background:linear-gradient(180deg, var(--tm-primary-soft) 0%, #fff 100%);
  }
  .home-section .home-contain .home-form-group input{
    border-radius:var(--tm-r-pill);
    min-height:46px;
    box-shadow:var(--tm-shadow);
    border:1px solid var(--tm-line);
  }

  /* the homescreen banner strip itself is styled in 05-hero-banner.css --
     it is now a real Blade section, not a JS-moved offer carousel. */

  /* section heading like "Explore Our Categories" */
  .category-section .title h2{ font-size:18px; margin-bottom:12px; }
}

/* ---------- 05-hero-banner.css ---------- */
/* ==========================================================================
   5. Homescreen banner (full-bleed hero) + discount badge + loader
   Markup is admin-managed:
   Backend > Home Page > Homescreen Banner  ->  section.home-screen-banner-section
   CSS scroll-snap carousel: no swiper instance, no JS.
   ========================================================================== */

.home-screen-banner-section{
  padding-top:14px;
  padding-bottom:26px;
}
.home-screen-banner-section .title h2{
  color:var(--tm-ink);
  font-weight:700;
  letter-spacing:-.01em;
}

/* One banner per view at every breakpoint, the rest reachable by swiping.
   `grid-auto-columns:minmax(0,1fr)` crammed all six into a single row on
   desktop, which squashed them into unreadable slivers. */
.home-screen-banner-track{
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns:100%;
  gap:0;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.home-screen-banner-track::-webkit-scrollbar{ display:none; }
.home-screen-banner-slide{ scroll-snap-align:start; }

.home-screen-banner-card{
  position:relative;
  display:block;
  border-radius:var(--tm-r);
  overflow:hidden;
  background:var(--tm-primary-soft);
  box-shadow:var(--tm-shadow);
  isolation:isolate;
}

/* 16:9 is the artwork's native ratio - never crop it, the banners carry their
   own typography and cropping would cut the headline off. */
.home-screen-banner-img{
  width:100%;
  aspect-ratio:16 / 9;
  object-fit:cover;
  object-position:center;
  display:block;
}

/* Optional overlay. Only renders when the admin fills title / description /
   button text, which is deliberately empty for artwork that already carries
   its own headline. */
   Blade always emits the wrapper div, and it contains whitespace, so `:empty`
   would never match it - the scrim is opted IN via :has() instead. If :has()
   is unavailable the banner simply shows no scrim, which is the safe failure.

   Anchored BOTTOM-LEFT to match the reference design: the call to action sits
   low on the artwork, scrim darkening downwards. */
.home-screen-banner-detail{
  position:absolute;
  inset:auto 0 0 0;
  z-index:2;
  padding:0;
  color:#fff;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  text-align:left;
  gap:2px;
}
.home-screen-banner-detail:has(> h3),
.home-screen-banner-detail:has(> p),
.home-screen-banner-detail:has(> a){
  padding:18px;
  background:linear-gradient(180deg, rgba(15,23,32,0) 0%, rgba(15,23,32,.30) 45%, rgba(15,23,32,.66) 100%);
}
.home-screen-banner-detail h3{
  color:#fff;
  font-size:19px;
  line-height:1.25;
  margin:0 0 3px;
  font-weight:700;
}
.home-screen-banner-detail p{
  color:rgba(255,255,255,.92);
  font-size:13px;
  line-height:1.4;
  margin:0 0 10px;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.home-screen-banner-detail .btn-outline{
  background:#fff;
  color:var(--tm-primary);
  border-color:#fff;
  border-radius:var(--tm-r-sm);
  min-height:38px;
  padding:7px 18px;
  margin-top:8px;
  font-size:13px;
  font-weight:600;
  box-shadow:0 2px 8px rgba(16,24,40,.22);
}
.home-screen-banner-detail .btn-outline:hover{
  background:var(--tm-primary);
  color:#fff;
  border-color:var(--tm-primary);
}

.home-screen-banner-tag{
  position:absolute;
  top:12px;
  left:12px;
  right:auto;
  z-index:2;
  background:var(--tm-accent);
  color:#fff;
  font-size:11px;
  font-weight:600;
  letter-spacing:.02em;
  padding:4px 11px;
  border-radius:var(--tm-r-pill);
}

/* whole-card tap target, under the text so a button still wins the click */
.home-screen-banner-link{
  position:absolute;
  inset:0;
  z-index:1;
}



/* --------------------------------------------------------------------------
   5a. MOBILE: full-bleed hero
   Edge to edge, square corners, flush under the search block - the banner is
   the hero, not a card sitting inside a padded container.
   -------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------
   5a-i. Search block, all breakpoints: location + search only, like the
   reference. The vendor headline ("One-Stop Solution For Your home service")
   and its emoji paragraph are generic handyman copy, not salon copy, and the
   dots/arrow GIFs are theme decoration.

   The text is CLIPPED rather than display:none so it stays in the accessibility
   tree and in the indexable DOM. The proper fix is to rewrite it in
   Backend > Home Page > Home Banner - this only stops it being shown.
   -------------------------------------------------------------------------- */
.home-section .home-icon{ display:none; }

.home-section .home-contain h1,
.home-section .home-contain > p{
  position:absolute;
  width:1px; height:1px;
  padding:0; margin:-1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
  white-space:nowrap;
  border:0;
}
.home-section .home-contain .home-form-group{ padding-top:0; margin-top:0; }

/* The theme pins the search block with `position:absolute; top:143px` (178px on
   desktop) so it floats over its hero background. With a real banner section in
   the flow that made it land ON the artwork. Put it in normal flow everywhere -
   this must NOT be mobile-only, or desktop keeps the overlap. */
.home-section .home-contain{
  position:static;
  top:auto; left:auto; right:auto;
  width:100%;
  margin:0;
}
/* the theme's hero backdrop is a 127.0.0.1 URL baked into the vendor build */
.home-section{ background-image:none; }
/* an empty swiper still reserves its aspect-ratio box - all breakpoints */
.home-section .home-slider:not(:has(.swiper-slide)){ display:none; }

@media (min-width: 768px){
  /* clear the absolutely-positioned header, which would otherwise sit on the
     artwork now that the banner is the first thing in .home-section */
  .home-screen-banner-section{ padding-top:132px; padding-bottom:8px; }
  .home-screen-banner-track{
    max-width:1040px;
    margin-inline:auto;
  }
  .home-section .home-contain{ text-align:center; }
  .home-section .home-contain .home-form-group{
    max-width:700px;
    margin:0 auto;
    padding-top:20px;
  }
}

/* Search submit button.
   On mobile its only label is <i data-feather="search" class="d-sm-none"></i>,
   which stays EMPTY until feather.replace() runs. If that never fires the
   button collapses to its padding and reads as missing. Guarantee a size, and
   paint a magnifier only while the <i> is still empty (no double icon once
   feather does run). */
/* The theme styles the search for a DARK hero background:
     .input-group{ border:1px solid rgba(255,255,255,.2) }
     .form-control{ color:#fff }
     .input-group .btn{ background:transparent; color/border:var(--font-color) }
   On a light page that is white text in a transparent button on white - which
   is exactly why the search button read as "disappeared". These rules match the
   theme's own selector depth so they win on order, without !important. */
.home-section .home-contain .home-form-group .input-group{
  background:var(--tm-surface);
  border:1px solid var(--tm-line);
  box-shadow:var(--tm-shadow);
  border-radius:var(--tm-r-pill);
}
.home-section .home-contain .home-form-group .input-group .position-relative .form-control{
  color:var(--tm-ink);
  background:transparent;
  border:0;
}
.home-section .home-contain .home-form-group .input-group .btn{
  background-color:var(--tm-primary);
  border-color:var(--tm-primary);
  color:#fff;
  border-radius:var(--tm-r-pill);
}
.home-section .home-contain .home-form-group .input-group .btn:hover{
  background-color:var(--tm-primary-dark);
  border-color:var(--tm-primary-dark);
  color:#fff;
}

#findServiceBtn{
  min-width:54px;
  min-height:46px;
  border-radius:var(--tm-r-pill);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
}
#findServiceBtn > i:empty::before{
  content:"";
  display:block;
  width:18px;
  height:18px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.6-3.6'/%3E%3C/svg%3E") center / contain no-repeat;
}

@media (max-width: 767.98px){

  /* the search block is now just a pill: no dead space above or below it */
  .home-section{ padding-bottom:0 !important; }
  .home-section .home-contain{ padding-bottom:0; margin-bottom:0; }
  .home-section > .container-fluid-lg{ padding-bottom:0; }
  .home-section .home-contain .home-form-group{ margin-bottom:0; padding-bottom:0; }

  /* the service rail follows the search; keep it clear of the theme's spacing */
  .home-section .home-slider{ margin-top:16px; padding-top:0; }

  /* banner first, search bar beneath it, nothing above the artwork.
     .home-section carries Bootstrap's `pt-0`, which is padding-top:0 !important,
     so the theme's own calc() top padding is already dead - only stray margins
     could open a white strip above the banner. Close them explicitly. */
  .home-section{ margin-top:0; }
  .home-screen-banner-section{ padding:0; margin:0; position:relative; }
  .home-section > .container-fluid-lg{ padding-top:0; }

  /* Full bleed puts the artwork under the theme's absolutely-positioned header
     (top:52px), so the logo and icons need a scrim to stay legible over a
     light banner. Sits above the image, below the tap overlay. */
  .home-screen-banner-section::before{
    content:"";
    position:absolute;
    inset:0 0 auto 0;
    height:108px;
    background:linear-gradient(180deg, rgba(10,16,22,.30) 0%, rgba(10,16,22,0) 100%);
    z-index:3;
    pointer-events:none;
  }

  .home-section .home-contain{ text-align:left; }
  .home-section .home-contain .home-form-group{
    padding-top:14px;
    max-width:none;
  }
  .home-screen-banner-section .title{ padding:0 14px; margin-top:14px; }
  /* break out of the theme's gutter */
  .home-screen-banner-section .container-fluid-lg{
    padding-left:0;
    padding-right:0;
    max-width:none;
    width:100%;
  }

  .home-screen-banner-track{ scroll-padding-left:0; }

  .home-screen-banner-card{
    border-radius:0;
    box-shadow:none;
  }

  .home-screen-banner-detail{ padding:12px 14px; }
  .home-screen-banner-detail h3{ font-size:16px; }
  .home-screen-banner-detail p{ font-size:12px; margin-bottom:8px; }
  .home-screen-banner-detail .btn-outline{ min-height:34px; padding:6px 15px; font-size:12px; }
}


/* --------------------------------------------------------------------------
   5b. Discount badge — small green pill, tag icon, top-LEFT of the card image
   The theme sets `.discount-tag{position:absolute; top:10px; right:10px}`.
   Setting `left` without clearing `right` pinned BOTH edges, which stretched
   the pill across the whole card. `right:auto` is the fix.
   -------------------------------------------------------------------------- */
.card{ position:relative; }

.card > .discount-tag,
.discount-tag{
  position:absolute;
  top:8px;
  left:8px;
  right:auto;                 /* <- theme pins right:10px; both = full width */
  bottom:auto;
  width:auto;
  max-width:calc(100% - 16px);
  display:inline-flex;
  align-items:center;
  gap:4px;
  margin:0;
  padding:3px 9px 3px 7px;
  background:var(--tm-green);
  color:#fff;
  font-size:11px;
  line-height:1.35;
  font-weight:700;
  letter-spacing:.01em;
  white-space:nowrap;
  border-radius:var(--tm-r-pill);
  box-shadow:0 1px 3px rgba(16,24,40,.18);
  pointer-events:none;
}

.card > .discount-tag::before,
.discount-tag::before{
  content:"";
  flex:0 0 auto;
  width:11px;
  height:11px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath d='M21.41 11.58l-9-9A2 2 0 0 0 11 2H4a2 2 0 0 0-2 2v7a2 2 0 0 0 .59 1.41l9 9a2 2 0 0 0 2.82 0l7-7a2 2 0 0 0 0-2.83zM6.5 8A1.5 1.5 0 1 1 8 6.5 1.5 1.5 0 0 1 6.5 8z'/%3E%3C/svg%3E") center / contain no-repeat;
}

@media (max-width: 767.98px){
  .card > .discount-tag{
    top:10px;
    left:10px;
    font-size:10px;
    padding:2px 8px 2px 6px;
  }
  .card > .discount-tag::before{ width:10px; height:10px; }
}


/* --------------------------------------------------------------------------
   5c. Loading indicators in the brand colour
   The full-page loader is a vendor GIF, so it is swapped for a CSS ring.
   -------------------------------------------------------------------------- */
@keyframes tm-spin{ to{ transform:rotate(360deg); } }

.page-loader .page-loader-wrapper img{ display:none; }
.page-loader .page-loader-wrapper::after{
  content:"";
  display:block;
  width:46px;
  height:46px;
  margin:0 auto;
  border:3px solid var(--tm-primary-soft);
  border-top-color:var(--tm-primary);
  border-radius:50%;
  animation:tm-spin .7s linear infinite;
}

.spinner-border{ color:var(--tm-primary); }
.location-loader .spinner-border{ color:var(--tm-primary); }

/* ---------- 06-site-polish.css ---------- */
/* ==========================================================================
   6. Site-wide polish — applies to every frontend page
   Conservative by design: rhythm, type, forms, states. No section is hidden
   here, and no colour is changed that I could not trace to a theme rule.
   ========================================================================== */

/* --------------------------------------------------------------------------
   6a. Nothing overflows
   Long service names, blog titles and pasted URLs are the usual culprits.
   -------------------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6, p, li, td, th, span, a{ overflow-wrap:break-word; }
.table-responsive, .table-wrapper{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
pre, code{ white-space:pre-wrap; word-break:break-word; }

/* --------------------------------------------------------------------------
   6b. Vertical rhythm
   The theme mixes fixed 40/60/80px paddings; this makes it one fluid scale.
   -------------------------------------------------------------------------- */
.section-b-space{ padding-bottom:clamp(26px, 4vw, 56px); }
.section-t-space{ padding-top:clamp(26px, 4vw, 56px); }
section{ scroll-margin-top:96px; }

/* --------------------------------------------------------------------------
   6c. Section headings
   -------------------------------------------------------------------------- */
/* Only lay the heading out as a row when it actually has a "view all" link -
   several .title blocks are a heading stacked over a paragraph, and forcing
   flex-row on those would put the subtitle beside the heading. */
.title:has(.view-all){
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:12px;
}
.title{ margin-bottom:clamp(12px, 2vw, 20px); }
.title h2{
  font-size:clamp(18px, 2.1vw, 26px);
  font-weight:700;
  letter-spacing:-.02em;
  color:var(--tm-ink);
  margin:0;
  line-height:1.25;
}
.title h3{ font-size:clamp(16px, 1.7vw, 20px); font-weight:700; margin:0; }
.title p{ color:var(--tm-muted); margin:6px 0 0; }
.view-all{
  white-space:nowrap;
  font-weight:600;
  color:var(--tm-primary);
  display:inline-flex;
  align-items:center;
  gap:6px;
}
.view-all:hover{ color:var(--tm-primary-dark); }

/* --------------------------------------------------------------------------
   6d. Empty states
   "no data found" was unstyled bare text; make it read as intentional.
   -------------------------------------------------------------------------- */
.no-data-found{
  padding:clamp(24px, 5vw, 44px) 16px;
  text-align:center;
  color:var(--tm-muted);
  background:var(--tm-bg);
  border:1px dashed var(--tm-line);
  border-radius:var(--tm-r);
  width:100%;
}
.no-data-found p{ margin:0; font-size:15px; }
.no-data-found img{ max-width:180px; margin:0 auto 12px; display:block; }

/* --------------------------------------------------------------------------
   6e. Forms — contact, login, register, checkout, account
   -------------------------------------------------------------------------- */
.form-control,
.form-select{
  border-radius:var(--tm-r-sm);
  border:1px solid var(--tm-line);
  min-height:46px;
  color:var(--tm-ink);
  background-color:var(--tm-surface);
}
.form-control::placeholder{ color:#9aa1ac; }
.form-control:focus,
.form-select:focus{
  border-color:var(--tm-primary);
  box-shadow:0 0 0 3px rgba(0,149,145,.16);
  outline:none;
}
textarea.form-control{ min-height:120px; }
.form-label,
form label{ font-weight:600; color:var(--tm-ink); margin-bottom:6px; }
.invalid-feedback{ font-size:13px; }
.form-check-input:checked{ background-color:var(--tm-primary); border-color:var(--tm-primary); }

/* --------------------------------------------------------------------------
   6f. Pagination
   -------------------------------------------------------------------------- */
.pagination{ gap:6px; flex-wrap:wrap; justify-content:center; }
.pagination .page-link{
  border-radius:10px;
  border:1px solid var(--tm-line);
  color:var(--tm-ink);
  min-width:40px;
  min-height:40px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:600;
}
.pagination .page-item.active .page-link{
  background:var(--tm-primary);
  border-color:var(--tm-primary);
  color:#fff;
}
.pagination .page-item.disabled .page-link{ opacity:.5; }

/* --------------------------------------------------------------------------
   6g. Blog cards — covers are 16:9 like everything else on this site
   -------------------------------------------------------------------------- */
.blog-section .card .card-img img,
.blog-box .blog-image img{
  width:100%;
  height:auto;
  aspect-ratio:16 / 9;
  object-fit:cover;
  display:block;
}
.blog-section .card .card-body{ padding:14px; }
.blog-section .card h4,
.blog-section .card h5{
  font-size:16px;
  line-height:1.35;
  font-weight:600;
  color:var(--tm-ink);
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

/* blog article body: readable measure and spacing */
.blog-detail-section .blog-detail-contain p,
.blog-contain p{ line-height:1.75; color:#3d4450; }
.blog-detail-section img{ border-radius:var(--tm-r); height:auto; }

/* --------------------------------------------------------------------------
   6h. Modals — the Book Now flow lives here
   -------------------------------------------------------------------------- */
.modal-content{ border:0; border-radius:var(--tm-r); box-shadow:var(--tm-shadow-lg); }
.modal-header{ border-bottom:1px solid var(--tm-line); padding:16px 18px; }
.modal-title{ font-weight:700; color:var(--tm-ink); }
.modal-body{ padding:18px; }
.modal-footer{ border-top:1px solid var(--tm-line); padding:14px 18px; }
@media (max-width: 575.98px){
  .modal-dialog{ margin:10px; }
  .modal-body{ padding:14px; max-height:72vh; overflow-y:auto; }
}

/* --------------------------------------------------------------------------
   6i. Breadcrumb / page header — desktop only (mobile collapses it to a spacer)
   -------------------------------------------------------------------------- */
@media (min-width: 768px){
  .breadcrumb-section .breadcrumb-contain h2,
  .breadcrumb-section .breadcrumb-contain h1{
    font-weight:700;
    letter-spacing:-.02em;
  }
  .breadcrumb-section .breadcrumb-contain{ position:relative; z-index:1; }
}

/* --------------------------------------------------------------------------
   6j. Footer
   -------------------------------------------------------------------------- */
.footer-section{ border-top:1px solid var(--tm-line); }
.footer-section a{ color:var(--tm-muted); }
.footer-section a:hover{ color:var(--tm-primary); }
.footer-section .footer-title h4,
.footer-section h4{ color:var(--tm-ink); font-weight:700; font-size:16px; }
.footer-section .copyright{ color:var(--tm-muted); font-size:13px; }

/* --------------------------------------------------------------------------
   6k. Provider / testimonial cards
   -------------------------------------------------------------------------- */
.service-provider-section .card img,
.provider-card img{ object-fit:cover; }
.about-us-section .card{ height:100%; }

/* --------------------------------------------------------------------------
   6l. Touch targets — anything tappable clears 44px on a phone
   -------------------------------------------------------------------------- */
@media (max-width: 767.98px){
  /* Scoped deliberately: a blanket `.nav-link` / `.btn` rule here would
     re-flow the category tiles (also .nav-link) and the full-width Book Now. */
  header .nav-link,
  .footer-section a,
  .dropdown-item,
  .pagination .page-link{ min-height:44px; }
  .dropdown-item{ display:flex; align-items:center; }
}

/* ---------- 07-page-services.css ---------- */
/* ==========================================================================
   7. Custom page > promoted services — full-bleed banner cards
   Markup: resources/views/frontend/page/details.blade.php
   Admin:  Backend > Pages > (page) > Related Services
   Only renders when a page has services attached.
   ========================================================================== */

.page-service-section{
  padding-top:clamp(18px, 3vw, 34px);
}
.page-service-section .title h3{
  font-size:clamp(18px, 2.1vw, 26px);
  font-weight:700;
  letter-spacing:-.02em;
  color:var(--tm-ink);
  margin:0;
}

.page-service-list{
  display:flex;
  flex-direction:column;
  gap:clamp(14px, 2vw, 22px);
}

/* One banner per row. Artwork left, details right.
   minmax(0,…) on BOTH tracks is deliberate: a plain 1fr floors at min-content,
   which is what pushed earlier card grids wider than the viewport. */
.page-service-card{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0, 380px) minmax(0, 1fr);
  align-items:stretch;
  gap:0;
  width:100%;
  max-width:100%;
  overflow:hidden;
  border-radius:var(--tm-r);
  border:1px solid var(--tm-line);
  background:var(--tm-surface);
  box-shadow:var(--tm-shadow);
  transition:box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}
.page-service-card:hover{
  box-shadow:var(--tm-shadow-lg);
  border-color:transparent;
  transform:translateY(-2px);
}
.page-service-card > *{ min-width:0; }

/* Service artwork is 1280x720 with the service name typeset into it, so the
   whole 16:9 frame is shown - at this ratio `cover` crops nothing. */
.page-service-media{
  border-radius:0;
  height:100%;
}
.page-service-media .card-img,
.page-service-media a{ display:block; height:100%; }
.page-service-card .page-service-media img{
  width:100%;
  height:100%;
  min-height:100%;
  aspect-ratio:16 / 9;
  object-fit:cover;
  object-position:center;
  display:block;
  border-radius:0;
}

.page-service-body{
  padding:clamp(16px, 2vw, 26px);
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:10px;
  border:0;
  background:transparent;
}
.page-service-card .service-title h4{
  font-size:clamp(17px, 1.6vw, 22px);
  line-height:1.3;
  font-weight:700;
  margin:0 0 6px;
  overflow-wrap:anywhere;
}
.page-service-card .service-title h4 a{ color:var(--tm-ink); }
.page-service-card .service-title h4 a:hover{ color:var(--tm-primary); }
.page-service-card .service-title small{
  font-size:clamp(16px, 1.5vw, 20px);
  font-weight:700;
  color:var(--tm-ink);
}
.page-service-card .service-title del{
  color:var(--tm-muted);
  font-weight:400;
  opacity:.75;
}

.page-service-card .service-detail ul{
  display:flex;
  align-items:center;
  gap:16px;
  flex-wrap:wrap;
  margin:0;
  padding:0;
  list-style:none;
}
.page-service-card .service-detail li{
  display:inline-flex;
  align-items:center;
  gap:6px;
  color:var(--tm-muted);
  font-size:14px;
}

.page-service-action{ margin-top:6px; }
.page-service-card .book-now-btn.btn-solid{
  width:auto;
  min-width:170px;
  min-height:46px;
  padding:10px 26px;
  font-size:15px;
}

/* badges — same conventions as the service cards elsewhere on the site */
.page-service-card > .discount-tag{ top:12px; left:12px; right:auto; z-index:4; }
.page-service-card > .like-icon{ top:12px; right:12px; left:auto; z-index:4; }


@media (max-width: 767.98px){
  .page-service-section{ padding-top:10px; }
  .page-service-list{ gap:14px; }

  /* stack: artwork on top, details beneath */
  .page-service-card{
    grid-template-columns:minmax(0, 1fr);
  }
  .page-service-card .page-service-media img{
    height:auto;
    min-height:0;
    aspect-ratio:16 / 9;
  }
  .page-service-body{ padding:14px; gap:8px; }
  .page-service-card .book-now-btn.btn-solid{
    width:100%;
    min-width:0;
  }
}

/* ---------- 08-page-faq.css ---------- */
/* ==========================================================================
   8. Custom page > FAQ accordion  +  page section spacing
   Markup: resources/views/frontend/page/details.blade.php
   Admin:  Backend > Pages > (page) > FAQ
   Plain Bootstrap collapse - no custom JS.
   ========================================================================== */

/* --------------------------------------------------------------------------
   8a. The "Related Services" heading is dropped on custom pages.
   The cards speak for themselves and the label read as boilerplate above them.
   Hidden rather than removed from the Blade so this stays a CSS-only change.
   -------------------------------------------------------------------------- */
.page-service-section .title{ display:none; }
.page-service-section{ padding-top:clamp(14px, 2.5vw, 28px); }

/* --------------------------------------------------------------------------
   8b. The PAGE-level FAQ reads as part of the article, not a separate section
   No "Frequently Asked Questions" heading, matching column width, and only a
   small gap after the copy - so it continues the page rather than restarting it.
   The SITE-wide FAQ keeps its heading; it is a distinct band (see 09).
   -------------------------------------------------------------------------- */
.page-faq-section .title{ display:none; }

.page-faq-section{
  margin-top:clamp(10px, 1.6vw, 18px);
  padding-top:0;
}

/* align with the article's measure instead of the narrower 900px default */
.page-faq-section .page-faq-accordion{
  max-width:none;
}

/* --------------------------------------------------------------------------
   8c. The accordion itself
   A quiet stacked list: hairline-bordered rows, a thin chevron that flips, and
   a soft tint on the row that is open. No heavy borders, no badge icon.
   -------------------------------------------------------------------------- */
.page-faq-accordion{
  display:flex;
  flex-direction:column;
  gap:8px;
  max-width:900px;
  /* neutralise Bootstrap's own chrome so the rules below are not fighting it */
  --bs-accordion-border-width:0;
  --bs-accordion-btn-focus-box-shadow:none;
  --bs-accordion-active-bg:transparent;
  --bs-accordion-active-color:var(--tm-ink);
  --bs-accordion-btn-padding-x:0;
  --bs-accordion-btn-padding-y:0;
}

.page-faq-accordion .accordion-item{
  border:1px solid var(--tm-line);
  border-radius:10px !important;
  background:var(--tm-surface);
  overflow:hidden;
  transition:background-color .18s ease;
}

/* the open row is tinted rather than outlined */
.page-faq-accordion .accordion-item:has(.accordion-button:not(.collapsed)){
  background:#f7f7f9;
}

.page-faq-accordion .accordion-header{ margin:0; }

.page-faq-accordion .accordion-button{
  background:transparent;
  color:var(--tm-ink);
  font-weight:600;
  font-size:15px;
  line-height:1.5;
  padding:16px 18px;
  box-shadow:none;
  gap:14px;
  text-align:left;
  overflow-wrap:anywhere;
}
.page-faq-accordion .accordion-button:not(.collapsed){
  background:transparent;
  color:var(--tm-ink);
  box-shadow:none;
}
.page-faq-accordion .accordion-button:focus-visible{
  box-shadow:inset 0 0 0 2px rgba(0,149,145,.35);
}

/* thin grey chevron that flips on open - replaces Bootstrap's fixed dark icon */
.page-faq-accordion .accordion-button::after{
  flex:0 0 auto;
  width:18px;
  height:18px;
  margin-left:auto;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-size:18px 18px;
  background-position:center;
  background-repeat:no-repeat;
  transform:rotate(0deg);
  transition:transform .2s ease;
}
.page-faq-accordion .accordion-button:not(.collapsed)::after{
  transform:rotate(180deg);
}

.page-faq-accordion .accordion-body{
  padding:0 18px 18px;
  color:var(--tm-muted);
  font-size:15px;
  line-height:1.75;
  overflow-wrap:anywhere;
}
.page-faq-accordion .accordion-body a{
  color:var(--tm-accent);
  text-decoration:none;
}
.page-faq-accordion .accordion-body a:hover{ text-decoration:underline; }

@media (max-width: 767.98px){
  .page-faq-accordion{ gap:8px; }
  .page-faq-accordion .accordion-button{ font-size:14.5px; padding:14px 15px; gap:10px; }
  .page-faq-accordion .accordion-button::after{ width:16px; height:16px; background-size:16px 16px; }
  .page-faq-accordion .accordion-body{ padding:0 15px 15px; font-size:14px; }
}

/* ---------- 09-site-faq.css ---------- */
/* ==========================================================================
   9. Site-wide FAQ
   Markup: resources/views/frontend/inc/site-faq.blade.php
   Admin:  Backend > Content Management > FAQ
   Renders on every public page. On a custom page that has its OWN FAQs both
   blocks appear, so this one is set apart: a soft full-width band behind white
   accordion rows, where the page-level block sits on plain white.
   ========================================================================== */

.site-faq-section{
  background:var(--tm-bg);
  border-top:1px solid var(--tm-line);
  padding-block:clamp(30px, 5vw, 60px);
  /* clear separation when it follows a page's own FAQ block */
  margin-top:clamp(30px, 5vw, 60px);
}

/* the page FAQ already ends with generous space, so don't double it up */
.page-faq-section + .site-faq-section{
  margin-top:0;
}

.site-faq-section .title{
  margin-bottom:clamp(14px, 2vw, 22px);
}
.site-faq-section .title h3{
  font-size:clamp(18px, 2.1vw, 24px);
  font-weight:700;
  letter-spacing:-.02em;
  color:var(--tm-ink);
  margin:0;
}

/* Rows sit on white so they lift off the band. Everything else - chevron,
   open-row tint, type - is inherited from .page-faq-accordion in 08, which this
   element also carries; only the differences are restated here. */
.site-faq-accordion .accordion-item{
  background:var(--tm-surface);
  border-color:transparent;
  box-shadow:0 1px 2px rgba(16,24,40,.04);
}
.site-faq-accordion .accordion-item:has(.accordion-button:not(.collapsed)){
  background:var(--tm-surface);
  box-shadow:var(--tm-shadow);
}

@media (max-width: 767.98px){
  .site-faq-section{
    padding-block:24px 28px;
    margin-top:24px;
  }
}

/* ---------- 10-header.css ---------- */
/* ==========================================================================
   10. Header - sticky, white, themonshas.com
   The theme ships `header{position:absolute; top:52px; z-index:4}`, floating
   the bar over a dark hero. EVERY colour inside it is therefore white:
   `--Iconsax-Color: white` on all icons, `#ffffffb3` nav links, `#ffffff1a`
   pill backgrounds, white location text. On a white bar that is invisible -
   which is exactly what "header not rendering properly" looked like.

   So this part does two jobs: put the bar in normal flow, and re-colour every
   one of those rules. Selectors mirror the theme's own chains exactly so they
   win on source order without !important.
   ========================================================================== */

header{
  position:sticky;
  top:0;
  left:0;
  width:100%;
  z-index:60;
  /* Solid, not frosted. A translucent bar over the bright hero artwork went
     murky and washed the phone number out, and it has to look identical at
     every scroll position - so no blur, no alpha, no state change. */
  background:#ffffff;
  border-bottom:1px solid var(--tm-line);
  box-shadow:none;
}

/* Entry 014 painted inner-page headers solid brand with white text. With a
   white bar everywhere that has to be undone - same selectors, so source
   order settles it. */
.tm-inner header{
  top:0;
  background:#ffffff;
  box-shadow:none;
}

/* --------------------------------------------------------------------------
   10a-0. The scroll state
   script.js adds `header.active` past 100px, and the theme paints that state
   `background-color:#010d25` - near black - and jumps the navbar padding to
   40px. On a white bar with dark text that turned the header unreadable
   mid-scroll and made it change size. The bar should look identical at every
   scroll position; only the shadow lifts.
   -------------------------------------------------------------------------- */
header.active{
  position:sticky;
  top:0;
  z-index:60;
  background:#ffffff;
  box-shadow:0 6px 18px rgba(41,33,40,.07);
}
header.active .navbar{
  padding-block:0 !important;
}
header.active .container-fluid-xl{
  padding-inline:calc(12px + .055 * (100vw - 320px));
}

/* --------------------------------------------------------------------------
   10a. Re-colour everything the theme painted white
   -------------------------------------------------------------------------- */
header .custom-navbar i,
header .custom-navbar .nav-right i,
header .nav-right i,
.tm-inner header .top-header .iconsax{ --Iconsax-Color:#4D4148; }

header .custom-navbar .navbar-collapse .navbar-nav .nav-item .nav-link,
.tm-inner header .top-header .custom-navbar .nav-link{
  color:var(--tm-muted);
  font-weight:500;
}
header .custom-navbar .navbar-collapse .navbar-nav .nav-item .nav-link:hover{
  color:var(--tm-mauve);
}

/* The right-hand rail was a row of outlined ovals - cart, location, language,
   login - which reads as clutter next to the one button that matters.
   themonshas.com carries exactly two: an outlined phone and a filled Book Now.
   So everything else loses its pill and becomes a plain icon or text link. */
header .custom-navbar .nav-right .nav-item-right,
header .nav-right .nav-item-right{
  border:none;
  background-color:transparent;
  padding-inline:6px;
}
header .custom-navbar .nav-right .nav-item-right + .nav-item-right:before,
header .nav-right .nav-item-right + .nav-item-right:before{
  display:none;
}
header .custom-navbar .no-dropdown a{
  border:none;
  background:transparent;
  padding-inline:4px;
  height:auto;
}
header .custom-navbar .no-dropdown a span{ color:var(--tm-plum-dark); }

/* Login: a text link, not a fourth outlined oval. */
header .nav-right .login-btn .btn.btn-outline{
  border:none;
  background:transparent;
  padding:6px 8px;
  color:var(--tm-plum-dark);
  font-weight:500;
  box-shadow:none;
}
header .nav-right .login-btn .btn.btn-outline:hover{
  background:transparent;
  color:var(--tm-mauve);
}

/* The theme gives the whole location dropdown a dark navy pill (#1d2537),
   which on a white bar reads as a black blob sitting on the first menu item.
   The button inside already draws the pill, so the wrapper goes transparent. */
header .custom-navbar .location-dropdown{
  background-color:transparent;
  margin-right:12px;
}
header .custom-navbar .logo-content{ gap:14px; }

/* Cart / icon buttons inherit white text from the dark-bar design, which makes
   the cart count invisible against the new white pill. */
header .custom-navbar .nav-right .icon.nav-item-right,
header .nav-right .icon.nav-item-right{ color:var(--tm-plum-dark); }

/* With a single active currency the theme still renders a pill linking to the
   currency already in use - a dead control. Hidden by its own button class so
   the language switcher next to it is untouched, and the real multi-currency
   dropdown (.currency-dropdown) reappears the moment a second one is added. */
header .nav-right .no-dropdown:has(> .currency-btn){ display:none !important; }

/* Flags were sized for a dark bar. */
header .nav-right .language-btn img,
header .nav-right .currency-btn img{
  width:20px;
  height:20px;
  border-radius:50%;
  object-fit:cover;
}
header .nav-right .language-btn span{ gap:6px; }

/* Location trigger. */
header .custom-navbar .location-dropdown .location-btn{
  color:var(--tm-plum-dark);
  font-weight:500;
  border:none;
  padding:6px 4px;
  background:transparent;
}
header .custom-navbar .location-dropdown .location-btn .location-svg,
header .custom-navbar .location-dropdown .location-btn .arrow{ --Iconsax-Color:#A98772; }

/* Location panel: the theme styles it for a dark ground and only lightens it
   in the `header.active` scroll state. Light it permanently. */
header .custom-navbar .location-dropdown .onhover-show-div{
  background-color:#fff;
  border:1px solid var(--tm-line);
  box-shadow:var(--tm-shadow-lg);
}
header .custom-navbar .location-dropdown .onhover-show-div .detect-location .detect-location-title h4,
header .custom-navbar .location-dropdown .onhover-show-div .detect-location .location-content span,
header .custom-navbar .location-dropdown .onhover-show-div .location > div h5{
  color:var(--tm-plum-dark);
}
header .custom-navbar .location-dropdown .onhover-show-div .location{ color:var(--tm-muted); }
header .custom-navbar .location-dropdown .onhover-show-div .location > div h6{ color:var(--tm-muted); }
header .custom-navbar .location-dropdown .onhover-show-div .location > div i,
header .custom-navbar .location-dropdown .onhover-show-div .detect-location .detect-location-title .location-icon{
  --Iconsax-Color:#A98772;
}
header .custom-navbar .location-dropdown .onhover-show-div .location:hover{ color:var(--tm-mauve); }
header .custom-navbar .location-dropdown .onhover-show-div .location:hover i{ --Iconsax-Color:#76566B; }

/* The burger is `filter:invert(1)` for a dark bar, which whites it out here. */
header .custom-navbar .logo-content .navbar-toggler-icon{ filter:none; }
header .navbar-toggler{ border:none; box-shadow:none; padding:4px 6px; }

/* The burger is gone from the header at the owner's request: the bottom
   navigation already carries Home / Categories / Services / Profile, and
   themonshas.com's phone header is just the brand and one button. The menu
   markup is left in the DOM so nothing that scripts it breaks. */
header .custom-navbar .logo-content .navbar-toggler{ display:none !important; }

/* --------------------------------------------------------------------------
   10b. Brand, menu, right-hand rail
   -------------------------------------------------------------------------- */
.sub-header{
  background:var(--tm-primary-soft);
  border-bottom:1px solid var(--tm-line);
  padding-block:6px;
}
.sub-header a{ color:var(--tm-muted); font-size:13px; }
.sub-header .iconsax{ --Iconsax-Color:#7A6B75; }

.top-header{ padding-block:10px; }
.navbar-brand img{ max-height:44px; width:auto; }

header .custom-navbar .navbar-collapse .navbar-nav .nav-item .nav-link{
  position:relative;
  transition:color .3s ease;
}
header .custom-navbar .navbar-collapse .navbar-nav .nav-item .nav-link::after{
  content:'';
  position:absolute;
  left:0;
  bottom:-4px;
  height:1.5px;
  width:0;
  background:var(--tm-gold);
  transition:width .3s ease;
}
header .custom-navbar .navbar-collapse .navbar-nav .nav-item .nav-link:hover::after,
header .custom-navbar .navbar-collapse .navbar-nav .nav-item .nav-link.active::after{ width:100%; }

header .nav-right{ gap:10px; align-items:center; }

/* Phone pill + Book Now, added to the markup in entry 023. Both are driven by
   Theme Options, so an empty setting renders nothing. */
.tm-phone-pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:7px 16px;
  border:1px solid var(--tm-line-strong);
  border-radius:var(--tm-r-pill);
  color:var(--tm-plum-dark);
  font-weight:600;
  white-space:nowrap;
  transition:border-color .3s ease, color .3s ease;
}
.tm-phone-pill:hover{ border-color:var(--tm-tan); color:var(--tm-mauve); }

/* The theme paints `.nav-right .nav-item-right` white for the dark bar, and
   that chain outranks a bare .tm-phone-pill - measured as rgb(255,255,255)
   on the live page, i.e. the number was invisible. Restated at the theme's
   own depth. */
header .custom-navbar .nav-right .nav-item-right .tm-phone-pill,
header .nav-right .nav-item-right .tm-phone-pill,
header .custom-navbar .nav-right .nav-item-right .tm-phone-pill span,
header .nav-right .nav-item-right .tm-phone-pill span{
  color:var(--tm-plum-dark);
}
header .custom-navbar .nav-right .nav-item-right .tm-phone-pill:hover,
header .custom-navbar .nav-right .nav-item-right .tm-phone-pill:hover span{
  color:var(--tm-mauve);
}
header .custom-navbar .nav-right .nav-item-right .tm-header-cta,
header .nav-right .nav-item-right .tm-header-cta{ color:#fff; }
.tm-phone-pill .iconsax{ --Iconsax-Color:#A98772; }

.tm-header-cta{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:9px 22px;
  border-radius:var(--tm-r-pill);
  background:var(--tm-cta);
  color:#fff;
  font-weight:600;
  white-space:nowrap;
  box-shadow:0 2px 8px rgba(74,41,63,.18);
  transition:box-shadow .3s ease, transform .3s ease;
}
.tm-header-cta:hover{
  color:#fff;
  box-shadow:var(--tm-shadow-cta);
  transform:translateY(-1px);
}
/* the pill the theme draws round every nav-right child would double up here */
header .nav-right li:has(.tm-header-cta),
header .nav-right li:has(.tm-phone-pill){
  border:none;
  background:transparent;
  padding:0;
}
header .nav-right li:has(.tm-header-cta):before,
header .nav-right li:has(.tm-phone-pill):before{ display:none; }

/* --------------------------------------------------------------------------
   10c. Mobile header - logo, cart, Book Now. Nothing else.
   themonshas.com's phone header is just the brand and one button; the
   currency/language strip and the login pill are noise at this width, and the
   bottom navigation already carries account and browse.
   -------------------------------------------------------------------------- */
@media (max-width: 991.98px){
  .sub-header{ display:none !important; }
  header .nav-right .login-btn{ display:none !important; }
  header .custom-navbar .location-dropdown .location-btn span.location-part{ display:none; }
  header .custom-navbar .location-dropdown .location-btn{ padding:7px 9px; }
  .tm-header-cta{ padding:8px 16px; font-size:13px; }
  .navbar-brand img{ max-height:36px; }
  .top-header{ padding-block:8px; }
  header .nav-right{ gap:6px; }
}
@media (max-width: 575.98px){
  header .custom-navbar .location-dropdown{ display:none !important; }
  .tm-header-cta{ padding:8px 14px; }
}

/* --------------------------------------------------------------------------
   10d. Unwind the spacing that existed only for an absolute header
   -------------------------------------------------------------------------- */
.breadcrumb-section{
  padding-block:calc(28px + (44 - 28) * ((100vw - 320px) / (1920 - 320)))
                calc(28px + (61 - 28) * ((100vw - 320px) / (1920 - 320)));
}
@media (max-width: 767.98px){
  .breadcrumb-section{ padding-block:18px 0 !important; }
}
@media (min-width: 768px){
  .home-screen-banner-section{ padding-top:0; padding-bottom:8px; }
}
.home-section{ padding-top:0; }

/* ---------- 11-footer.css ---------- */
/* ==========================================================================
   11. Footer — dark, themonshas.com
   The theme's footer is a light 4-column grid with an SVG rule above each
   heading and the copyright block first. themonshas.com uses a near-black
   ground, white headings, muted links and a social row, with the copyright
   last. Column content itself is untouched — it all comes from Theme Options.
   ========================================================================== */

.footer-section{
  background:var(--tm-footer);
  color:#9AA0A6;
  border-top:none;
  padding-block:56px 0;
  margin-top:40px;
}

/* The container is a plain block, so `order` needs a flex context to act on.
   This is what moves the copyright block from first to last. */
.footer-section > .container-fluid-lg{
  display:flex;
  flex-direction:column;
}
.footer-section > .container-fluid-lg > .row{ order:1; }
.footer-section .copyright{
  order:2;
  margin-top:40px;
  padding-block:22px;
  border-top:1px solid rgba(255,255,255,.10);
  display:flex;
  align-items:center;
  gap:14px;
  flex-wrap:wrap;
  color:#8A8F95;
  font-size:13px;
}
.footer-section .copyright p{ margin:0; }
.footer-section .copyright .footer-logo img{ max-height:38px; width:auto; }

/* Headings: white, no decorative rule — replaced by a short gold hairline. */
.footer-section .heading-footer{
  color:#fff;
  font-weight:600;
  font-size:16px;
  letter-spacing:.01em;
  position:relative;
  padding-bottom:12px;
  margin-bottom:14px;
}
.footer-section .heading-footer svg{ display:none; }
.footer-section .heading-footer::after{
  content:'';
  position:absolute;
  left:0;
  bottom:0;
  width:32px;
  height:2px;
  background:var(--tm-gold);
  border-radius:2px;
}

.footer-section a,
.footer-section .nav-link,
.footer-section ul li{
  color:#9AA0A6;
  font-size:14px;
}
.footer-section a:hover,
.footer-section .nav-link:hover{ color:#fff; }
.footer-section ul li{ padding-block:3px; }

/* Become-a-provider CTA sits on the dark ground; the shared .btn-solid rule
   gives it the plum gradient, but the theme paints .footer-section .btn with
   --font-color at higher specificity, so the label is restated here. */
.footer-section .btn.btn-solid{
  color:#fff;
  margin-top:14px;
}
.footer-section .btn.btn-solid:hover{ color:#fff; }
.footer-section .btn.btn-solid .iconsax{ --Iconsax-Color:#ffffff; }

/* --------------------------------------------------------------------------
   11a. Brand column + social row (markup added in this entry, all values
        from Theme Options — an empty setting renders nothing)
   -------------------------------------------------------------------------- */
.tm-footer-brand img{ max-height:44px; width:auto; margin-bottom:16px; }
.tm-footer-brand p{
  color:#9AA0A6;
  font-size:14px;
  line-height:1.7;
  max-width:36ch;
}
.tm-social{
  display:flex;
  gap:12px;
  margin-top:22px;
  flex-wrap:wrap;
}
.tm-social a{
  width:38px;
  height:38px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(255,255,255,.22);
  border-radius:50%;
  color:#9AA0A6;
  transition:color .25s ease, border-color .25s ease, transform .25s ease;
}
.tm-social a:hover{
  color:#fff;
  border-color:#fff;
  transform:translateY(-2px);
}
.tm-social .iconsax{ --Iconsax-Color:currentColor; }
.tm-social svg{ width:17px; height:17px; fill:currentColor; }

/* On phones the theme folds each column into an accordion — keep that, just
   make the chevron visible against the dark ground. */
/* Columns fold into an accordion on phones; the chevron is an iconsax glyph,
   so it takes its colour from the custom property, not `color`. */
.footer-section .heading-footer .down-arrow{ color:#9AA0A6; --Iconsax-Color:#9AA0A6; }

@media (max-width: 575.98px){
  .footer-section{ padding-block:36px 0; }
  .footer-section .copyright{ justify-content:center; text-align:center; }
}

/* ---------- 12-brand-components.css ---------- */
/* ==========================================================================
   Brand components — buttons, badges, forms
   Sits after the page-specific parts so a button looks the same everywhere.
   ========================================================================== */

/* --- Primary call to action -------------------------------------------------
   themonshas.com uses a plum gradient pill with a soft lift on hover. The
   theme's .btn-solid is a flat --primary-color rectangle; .btn-fill and
   .btn-dark-solid are the same button under different names.
   -------------------------------------------------------------------------- */
.btn-solid,
.btn-fill,
.btn-dark-solid,
.btn-animation{
  background:var(--tm-cta);
  border:none;
  color:#fff;
  border-radius:var(--tm-r-pill);
  font-weight:600;
  letter-spacing:.01em;
  box-shadow:0 2px 8px rgba(74,41,63,.18);
  transition:box-shadow .25s ease, transform .25s ease, filter .25s ease;
}
.btn-solid:hover,
.btn-fill:hover,
.btn-dark-solid:hover,
.btn-animation:hover,
.btn-solid:focus-visible,
.btn-fill:focus-visible{
  background:var(--tm-cta);
  color:#fff;
  box-shadow:var(--tm-shadow-cta);
  transform:translateY(-1px);
  filter:saturate(1.05);
}
.btn-solid:disabled,
.btn-fill:disabled{ filter:grayscale(.4); box-shadow:none; transform:none; }

/* Secondary: outlined in the brand mauve, fills on hover. */
.btn-outline{
  border:1px solid var(--tm-line-strong);
  color:var(--tm-plum);
  background:#fff;
  border-radius:var(--tm-r-pill);
  font-weight:500;
  transition:border-color .25s ease, color .25s ease, background .25s ease;
}
.btn-outline:hover,
.btn-outline:focus-visible{
  border-color:var(--tm-mauve);
  color:#fff;
  background:var(--tm-mauve);
}

/* Status buttons keep their own semantics — only the shape is harmonised. */
.btn-solid-success,
.btn-solid-danger,
.btn-solid-gray{ border-radius:var(--tm-r-pill); font-weight:600; }

/* --- Badges ---------------------------------------------------------------- */
.badge-danger{
  background:#E4574C;
  border-radius:var(--tm-r-pill);
  font-weight:600;
}

/* Ratings pick up the gold rather than the theme's yellow. */
.rating i,
.rating svg,
.star-rate i{ color:var(--tm-gold-deep); }

/* --- Forms ----------------------------------------------------------------- */
.form-control,
.form-select{
  border-color:var(--tm-line-strong);
  border-radius:var(--tm-r-sm);
  color:var(--tm-plum-dark);
}
.form-control:focus,
.form-select:focus{
  border-color:var(--tm-mauve);
  box-shadow:0 0 0 3px rgba(118,86,107,.12);
}
.form-control::placeholder{ color:#A79BA2; }

.form-check-input:checked{
  background-color:var(--tm-mauve);
  border-color:var(--tm-mauve);
}

/* --- Loader ---------------------------------------------------------------- */
.loader-wrapper{ background:var(--tm-surface); }

/* --- Selection / focus ring ------------------------------------------------ */
::selection{ background:var(--tm-blush); color:var(--tm-plum-dark); }
:focus-visible{ outline:2px solid var(--tm-gold); outline-offset:2px; }

/* ---------- 13-announcement.css ---------- */
/* ==========================================================================
   13. Announcement bar
   Vendor markup, already in the layout and already admin-driven:
   Backend > Settings > Frontend announcement  ->  status / title / link / link_text
   It renders above the header, so it scrolls away while the header stays.
   ========================================================================== */

.announcement-bar{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  flex-wrap:wrap;
  padding:10px 16px;
  background:linear-gradient(90deg, #3A1F30 0%, #4A293F 45%, #6B4459 100%);
  color:#F3EAEF;
  text-align:center;
}

.announcement-bar .offer-text{
  margin:0;
  font-size:13px;
  font-weight:500;
  line-height:1.5;
  color:#F3EAEF;
  letter-spacing:.01em;
}

.announcement-bar .btn{
  padding:5px 16px;
  min-height:0;
  border-radius:var(--tm-r-pill);
  background:var(--tm-gold);
  border:none;
  color:#2A1B12;
  font-size:12px;
  font-weight:600;
  white-space:nowrap;
  box-shadow:none;
  transition:filter .25s ease, transform .25s ease;
}
.announcement-bar .btn:hover{
  background:var(--tm-gold-soft);
  color:#2A1B12;
  transform:translateY(-1px);
}

@media (max-width: 575.98px){
  .announcement-bar{ padding:8px 12px; gap:10px; }
  .announcement-bar .offer-text{ font-size:12px; }
  .announcement-bar .btn{ padding:4px 13px; font-size:11px; }
}

/* ---------- 14-hero.css ---------- */
/* ==========================================================================
   14. Hero banner - rounded card carousel with dots
   Part 05 made this full-bleed on phones and added a dark scrim, because the
   theme's header was absolutely positioned on top of the artwork. The header
   is in normal flow now, so both of those are wrong: themonshas.com shows the
   banner as an inset rounded card with pagination dots underneath.
   ========================================================================== */

/* The scrim only existed to keep a white logo legible over the artwork. */
.home-screen-banner-section::before{ content:none; }

.home-screen-banner-section{
  padding-top:14px;
  padding-bottom:10px;
}

.home-screen-banner-card{
  border-radius:var(--tm-r-lg);
  box-shadow:0 6px 22px rgba(41,33,40,.10);
}

/* Phones get the gutter and the radius back. */
@media (max-width: 767.98px){
  .home-screen-banner-section{ padding:12px 0 4px; margin:0; }
  .home-screen-banner-section .container-fluid-lg{
    padding-left:14px;
    padding-right:14px;
    max-width:none;
    width:100%;
  }
  .home-screen-banner-card{
    border-radius:var(--tm-r-lg);
    box-shadow:0 6px 22px rgba(41,33,40,.10);
  }
  .home-screen-banner-track{
    scroll-padding-left:0;
    gap:12px;
  }
}

/* --------------------------------------------------------------------------
   14a. Pagination dots
   Rendered by the banner partial and driven by a small scroll listener, so
   there is still no swiper instance to clash with the theme's sliders.
   -------------------------------------------------------------------------- */
.home-screen-banner-dots{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  margin-top:14px;
}
.home-screen-banner-dots button{
  width:7px;
  height:7px;
  padding:0;
  border:none;
  border-radius:var(--tm-r-pill);
  background:#D8CDD4;
  cursor:pointer;
  transition:width .3s ease, background .3s ease;
}
.home-screen-banner-dots button.is-active{
  width:22px;
  background:var(--tm-mauve);
}

/* --------------------------------------------------------------------------
   14b. Search block under the hero
   -------------------------------------------------------------------------- */
.home-section .home-contain .home-form-group{
  padding-top:14px;
}
@media (min-width: 768px){
  .home-section .home-contain .home-form-group{
    max-width:720px;
    margin-inline:auto;
  }
}

/* ---------- 15-picks.css ---------- */
/* ==========================================================================
   15. Curated picks - Women / Men tabs
   New section, admin-managed:
   Backend > Home Page > Women Picks / Men Picks  ->  section.tm-picks-section
   Each tile points at a real category page; the label and image come from the
   category itself.
   ========================================================================== */

.tm-picks-section{
  padding-block:26px 6px;
}

/* --------------------------------------------------------------------------
   15a. The switch
   A segmented pill on a soft plum ground, with the active half carrying the
   brand gradient plus a coloured glow. The `-glow` span is a blurred copy of
   that gradient sitting behind the control, which is what stops the effect
   reading as a flat shadow.
   -------------------------------------------------------------------------- */
.tm-picks-tabs{
  position:relative;
  display:flex;
  align-items:center;
  gap:6px;
  width:max-content;
  max-width:100%;
  margin:0 auto 24px;
  padding:6px;
  border-radius:var(--tm-r-pill);
  background:linear-gradient(180deg, #FAF6F8 0%, #F3EBEF 100%);
  border:1px solid var(--tm-line);
  box-shadow:inset 0 1px 2px rgba(41,33,40,.05);
  isolation:isolate;
}

.tm-picks-tabs-glow{
  position:absolute;
  inset:-14px;
  z-index:-1;
  border-radius:var(--tm-r-pill);
  background:radial-gradient(60% 120% at 50% 50%, rgba(118,86,107,.28) 0%, rgba(201,164,106,.16) 45%, rgba(255,255,255,0) 75%);
  filter:blur(14px);
  opacity:.9;
  pointer-events:none;
}

.tm-picks-tab{
  position:relative;
  border:none;
  background:transparent;
  border-radius:var(--tm-r-pill);
  padding:10px 30px;
  font-size:clamp(13px, 3.4vw, 15px);
  font-weight:600;
  letter-spacing:.01em;
  color:var(--tm-muted);
  cursor:pointer;
  white-space:nowrap;
  transition:color .3s ease, transform .3s ease;
}
.tm-picks-tab:hover{ color:var(--tm-plum); }

.tm-picks-tab.is-active{
  color:#fff;
  background:var(--tm-cta);
  box-shadow:
    0 4px 14px rgba(74,41,63,.34),
    0 0 0 1px rgba(201,164,106,.45),
    0 0 18px rgba(201,164,106,.30);
}

/* A slow sheen across the active half. Purely decorative, and skipped for
   anyone who has asked for reduced motion. */
.tm-picks-tab.is-active::after{
  content:'';
  position:absolute;
  inset:0;
  border-radius:inherit;
  background:linear-gradient(115deg, rgba(255,255,255,0) 35%, rgba(255,255,255,.34) 50%, rgba(255,255,255,0) 65%);
  background-size:280% 100%;
  animation:tm-sheen 3.4s ease-in-out infinite;
  pointer-events:none;
}
@keyframes tm-sheen{
  0%   { background-position:180% 0; }
  55%  { background-position:-80% 0; }
  100% { background-position:-80% 0; }
}
@media (prefers-reduced-motion: reduce){
  .tm-picks-tab.is-active::after{ animation:none; }
}

/* --------------------------------------------------------------------------
   15b. Panes
   Both are rendered so the category links stay in the document for crawlers;
   only visibility is switched.
   -------------------------------------------------------------------------- */
.tm-picks-pane{ display:none; }
.tm-picks-pane.is-active{
  display:block;
  animation:tm-pick-in .32s ease both;
}
@keyframes tm-pick-in{
  from{ opacity:0; transform:translateY(6px); }
  to{ opacity:1; transform:none; }
}
@media (prefers-reduced-motion: reduce){
  .tm-picks-pane.is-active{ animation:none; }
}

.tm-picks-title{
  margin:0 0 20px;
  text-align:center;
  font-size:clamp(18px, 4.2vw, 24px);
  font-weight:600;
  line-height:1.35;
  letter-spacing:-.01em;
  color:var(--tm-plum-dark);
}

.tm-picks-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:14px;
}

.tm-pick{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:9px;
  padding:14px 8px;
  border-radius:var(--tm-r-lg);
  background:var(--tm-bg);
  border:1px solid transparent;
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.tm-pick:hover{
  transform:translateY(-3px) scale(1.02);
  box-shadow:var(--tm-shadow);
  border-color:var(--tm-line);
}

.tm-pick-img{
  width:clamp(84px, 24vw, 132px);
  height:clamp(52px, 14.5vw, 80px);
  border-radius:var(--tm-r);
  overflow:hidden;
  background:#fff;
  border:1px solid var(--tm-line);
  padding:4px;
  flex:0 0 auto;
}
/* Category artwork is 16:9 with its title baked into the image, so cropping it
   square cuts the words in half. `contain` shows the whole frame. */
.tm-pick-img img{
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center;
  border-radius:calc(var(--tm-r) - 5px);
  display:block;
}

.tm-pick-label{
  font-size:clamp(12px, 3.2vw, 15px);
  font-weight:500;
  line-height:1.3;
  color:var(--tm-plum-dark);
}
.tm-pick:hover .tm-pick-label{ color:var(--tm-mauve); }

@media (min-width: 768px){
  .tm-picks-section{ padding-block:40px 10px; }
  .tm-picks-tabs{ margin-bottom:30px; }
  .tm-picks-tab{ padding:11px 42px; }
  .tm-picks-grid{
    grid-template-columns:repeat(6, minmax(0, 1fr));
    gap:20px;
  }
  .tm-pick{ padding:16px 10px; }
}

/* --------------------------------------------------------------------------
   15c. Trust band - one headline figure plus three stats
   Backend > Home Page > Trust Stats
   -------------------------------------------------------------------------- */
.tm-trust-section{
  padding-block:44px;
  text-align:center;
  background:var(--tm-bg);
  margin-top:28px;
}
.tm-trust-section h2{
  font-size:clamp(21px, 4.6vw, 32px);
  font-weight:600;
  margin-bottom:10px;
}
.tm-trust-section .tm-trust-lead{
  max-width:60ch;
  margin:0 auto 34px;
  color:var(--tm-muted);
  font-size:clamp(13px, 3vw, 15px);
  line-height:1.7;
}
.tm-trust-hero-value{
  display:block;
  font-size:clamp(42px, 12vw, 84px);
  font-weight:700;
  line-height:1;
  letter-spacing:-.03em;
  color:var(--tm-mauve);
}
.tm-trust-hero-label{
  display:block;
  margin-top:8px;
  font-size:clamp(15px, 3.6vw, 22px);
  font-weight:500;
  color:var(--tm-plum-dark);
}
.tm-trust-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:18px;
  margin-top:40px;
  padding-top:34px;
  border-top:1px solid var(--tm-line);
}
.tm-trust-grid .tm-trust-value{
  display:block;
  font-size:clamp(19px, 4.6vw, 32px);
  font-weight:700;
  color:var(--tm-plum-dark);
}
.tm-trust-grid .tm-trust-label{
  display:block;
  margin-top:6px;
  color:var(--tm-muted);
  font-size:clamp(11px, 2.6vw, 14px);
  line-height:1.4;
}
@media (max-width: 575.98px){
  .tm-trust-section{ padding-block:32px; }
  .tm-trust-grid{ gap:10px; margin-top:28px; padding-top:24px; }
}

/* ---------- 16-floating.css ---------- */
/* ==========================================================================
   16. Floating WhatsApp button
   Rendered from Theme Options > Contact Us > WhatsApp link. Blank = no button.
   Sits clear of the mobile bottom navigation (part 03), which is 64px tall.
   ========================================================================== */

.tm-whatsapp{
  position:fixed;
  right:16px;
  bottom:20px;
  z-index:55;
  width:54px;
  height:54px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  background:#25D366;
  color:#fff;
  box-shadow:0 6px 18px rgba(37,211,102,.38);
  transition:transform .25s ease, box-shadow .25s ease;
}
.tm-whatsapp:hover{
  color:#fff;
  transform:scale(1.06);
  box-shadow:0 10px 24px rgba(37,211,102,.48);
}
.tm-whatsapp svg{
  width:29px;
  height:29px;
  fill:currentColor;
}

/* Clear the bottom nav on phones. */
@media (max-width: 991.98px){
  .tm-whatsapp{
    bottom:78px;
    width:50px;
    height:50px;
  }
  .tm-whatsapp svg{ width:26px; height:26px; }
}

/* The cart and booking funnels put their own sticky action bar at the bottom;
   a floating button on top of it would cover the primary action. */
.tm-cart-page .tm-whatsapp,
.tm-booking-page .tm-whatsapp{ display:none; }

/* ---------- 17-service-rail.css ---------- */
/* ==========================================================================
   17. Home service rail (Backend > Home Page > Home Banner > services)
   This swiper was empty on every zone-less visit until the getServices() fix,
   so it had never actually been styled. It runs edge to edge with no gutter
   and no card treatment, which reads as a bleed rather than a carousel.
   ========================================================================== */

.home-section .home-slider{
  margin-top:20px;
  margin-bottom:4px;
}

/* Gutter matches every other section, and the peeking next slide now starts
   inside the page rather than under the viewport edge. */
.home-section .home-slider .swiper.service-slider{
  padding-inline:14px;
  /* stays hidden: `visible` lets every off-screen slide paint across the
     page, and only the html overflow backstop was hiding the damage. */
  overflow:hidden;
}
.home-section .home-slider .swiper.service-slider .swiper-slide{
  height:auto;
}

.home-section .home-slider .service-card .img-box{
  border-radius:var(--tm-r);
  overflow:hidden;
  box-shadow:var(--tm-shadow);
  position:relative;
  isolation:isolate;
}
.home-section .home-slider .service-card .img-box img{
  width:100%;
  aspect-ratio:4 / 3;
  object-fit:cover;
  object-position:center;
  display:block;
}

/* Title sits on the artwork, so it needs its own scrim to stay legible over a
   light photograph. */
.home-section .home-slider .service-card .img-box .service-content{
  position:absolute;
  inset:auto 0 0 0;
  padding:26px 12px 10px;
  background:linear-gradient(180deg, rgba(41,33,40,0) 0%, rgba(41,33,40,.72) 100%);
  color:#fff;
}
.home-section .home-slider .service-card .img-box .service-content span{
  color:#fff;
  font-size:13px;
  font-weight:500;
  line-height:1.35;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

@media (min-width: 768px){
  .home-section .home-slider .swiper.service-slider{ padding-inline:0; }
  .home-section .home-slider .service-card .img-box img{ aspect-ratio:16 / 10; }
  .home-section .home-slider .service-card .img-box .service-content span{ font-size:15px; }
}

/* ---------- 18-category-rail.css ---------- */
/* ==========================================================================
   18. Home category rail - circular avatars on a smooth horizontal scroller
   Backend > Home Page > Categories Icon List

   The markup carries `class="swiper category-slider"` but swiper.js never
   initialises anything matching `.category-slider` - there is no
   `new Swiper(".category-slider")` in public/frontend/js/swiper.js. Entry 014
   worked around the resulting dead, mis-measured element by turning the wrapper
   into a CSS grid (part 04).

   This restores it as a rail, but natively: `overflow-x:auto` + scroll-snap on
   the container. That gives real momentum scrolling on touch, needs no swiper
   instance to conflict with the five the theme already runs, and cannot break
   if the vendor changes its swiper config.

   Scoped to `.category-slider`, not `.custom-nav-tabs`: the /category page
   wraps its own grid in `.category-section` with the same tab classes, and
   scoping by those alone turned that page's cards into narrow circles too.
   ========================================================================== */

/* Undo part 04's grid, for this rail only. */
.category-section .category-slider .swiper-wrapper{
  display:flex;
  grid-template-columns:none;
  gap:10px;
  align-items:flex-start;
  transform:none !important;   /* swiper would write this inline if it ever ran */
  height:auto !important;
  padding-bottom:2px;
}

.category-section .category-slider.swiper{
  overflow-x:auto;
  overflow-y:hidden;
  scroll-snap-type:x proximity;
  -webkit-overflow-scrolling:touch;
  scroll-padding-left:2px;
  scrollbar-width:none;
  overscroll-behavior-x:contain;
}
.category-section .category-slider.swiper::-webkit-scrollbar{ display:none; }

.category-section .category-slider .swiper-slide,
.category-section .category-slider .nav-item{
  width:auto !important;
  min-width:0;
  flex:0 0 auto;
  margin:0 !important;
  height:auto;
  scroll-snap-align:start;
  display:block;
}

/* --------------------------------------------------------------------------
   18a. The tile
   Part 04 made these wide left-aligned cards with a border and a white ground.
   Here they are a stacked avatar + label, transparent until selected.
   -------------------------------------------------------------------------- */
.category-section .category-slider .nav-item .nav-link{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  text-align:center;
  gap:9px;
  width:clamp(82px, 22vw, 104px);
  height:auto;
  padding:12px 6px 14px;
  border-radius:var(--tm-r-lg);
  background:transparent;
  border:1px solid transparent;
  box-shadow:none;
  transition:background .25s ease, border-color .25s ease, transform .25s ease;
}
.category-section .category-slider .nav-link:hover{
  background:var(--tm-bg);
  border-color:transparent;
  box-shadow:none;
  transform:translateY(-2px);
}

.category-section .category-slider .nav-item .nav-link .img-box{
  width:clamp(58px, 16vw, 72px);
  height:clamp(58px, 16vw, 72px);
  min-width:0;
  aspect-ratio:1 / 1;
  border-radius:50%;
  overflow:hidden;
  margin:0;
  padding:0;
  background:var(--tm-blush);
  box-shadow:none;
  flex:0 0 auto;
}
.category-section .category-slider .nav-item .nav-link .img-box img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  border-radius:50%;
  display:block;
}

.category-section .category-slider .nav-item .nav-link span{
  display:block;
  width:100%;
  min-width:0;
  font-size:clamp(11px, 3vw, 13px);
  font-weight:500;
  line-height:1.3;
  color:var(--tm-plum-dark);
  text-align:center;
  /* Two lines then ellipsis, so one long name cannot make the rail ragged.
     Part 04 set `word-break:break-word; overflow-wrap:anywhere` for the old
     card layout, which split words mid-name here - reset for this rail. */
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  overflow-wrap:normal;
  word-break:normal;
  hyphens:none;
  /* reserve both lines so every tile is the same height whatever the name */
  min-height:2.6em;
}

/* The service count is not part of this design - the reference rail is just an
   avatar and a name. Hidden rather than removed from the markup so the number
   stays available to anything that reads it. */
.category-section .category-slider .nav-item .nav-link small{
  display:none;
}

/* --------------------------------------------------------------------------
   18b. Selected
   -------------------------------------------------------------------------- */
.category-section .category-slider .nav-item .nav-link.active{
  background:var(--tm-primary-soft);
  border-color:transparent;
  box-shadow:none;
}
.category-section .category-slider .nav-item .nav-link.active span{
  color:var(--tm-mauve);
  font-weight:600;
}
.category-section .category-slider .nav-item .nav-link.active .img-box{
  box-shadow:0 0 0 2px #fff, 0 0 0 4px rgba(118,86,107,.35);
}

/* Part 04 hid the pagination for the grid; there is no swiper writing to it. */
.category-section .swiper-pagination{ display:none; }

@media (min-width: 768px){
  .category-section .category-slider .swiper-wrapper{ gap:14px; }
  .category-section .category-slider .nav-item .nav-link{ padding:14px 8px 16px; }
}

/* ---------- 19-category-page-rail.css ---------- */
/* ==========================================================================
   19. /category - the same circular rail as the home page
   The page already works this way: `ul.nav-tabs.custom-nav-tabs` inside
   `.category-row` is a Bootstrap tab list, and each button switches the pane
   next to it. Only the layout differs - the vendor puts the list in a narrow
   left column (col-xxl-3) with the services beside it, and part 04 turned that
   list into a two-column card grid.

   Here the list becomes a full-width horizontal rail above the services, so the
   page reads like the home rail. Nothing about the tab behaviour changes.

   Markup differs slightly from home: each button is
     .img-box > img  +  .text-box > span + small  +  i.iconsax
   where home has span and small directly on the button.
   ========================================================================== */

/* Stack the two columns: rail on top, services underneath. */
.category-row > [class*="col-"]{
  flex:0 0 100%;
  max-width:100%;
  width:100%;
}

/* Undo part 04's grid for this list. */
.category-row .custom-nav-tabs{
  display:flex;
  /* the theme sets `.category-section .custom-nav-tabs{flex-direction:column}`
     for its sidebar layout, which stacked the whole rail vertically */
  flex-direction:row;
  grid-template-columns:none;
  gap:10px;
  align-items:flex-start;
  flex-wrap:nowrap;
  margin:0 0 4px;
  padding:0 0 2px;
  border-bottom:0;
  overflow-x:auto;
  overflow-y:hidden;
  scroll-snap-type:x proximity;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  overscroll-behavior-x:contain;
}
.category-row .custom-nav-tabs::-webkit-scrollbar{ display:none; }

.category-row .custom-nav-tabs .nav-item{
  width:auto;
  min-width:0;
  flex:0 0 auto;
  margin:0;
  scroll-snap-align:start;
  display:block;
}

/* --------------------------------------------------------------------------
   19a. Tile
   -------------------------------------------------------------------------- */
.category-row .custom-nav-tabs .nav-item .nav-link,
.category-row .custom-nav-tabs .nav-item .nav-link.categories{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  text-align:center;
  gap:9px;
  width:clamp(82px, 22vw, 104px);
  height:auto;
  padding:12px 6px 14px;
  border-radius:var(--tm-r-lg);
  background:transparent;
  border:1px solid transparent;
  box-shadow:none;
  transition:background .25s ease, transform .25s ease;
}
.category-row .custom-nav-tabs .nav-item .nav-link:hover{
  background:var(--tm-bg);
  border-color:transparent;
  box-shadow:none;
  transform:translateY(-2px);
}

.category-row .custom-nav-tabs .nav-item .nav-link .img-box,
.category-row .custom-nav-tabs .nav-item .nav-link.categories .img-box{
  width:clamp(58px, 16vw, 72px);
  height:clamp(58px, 16vw, 72px);
  min-width:clamp(58px, 16vw, 72px);
  aspect-ratio:1 / 1;
  border-radius:50%;
  overflow:hidden;
  margin:0;
  padding:0;
  background:var(--tm-blush);
  box-shadow:none;
  flex:0 0 auto;
}
.category-row .custom-nav-tabs .nav-item .nav-link .img-box img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  border-radius:50%;
  display:block;
}

/* The label lives in a .text-box wrapper on this page. */
.category-row .custom-nav-tabs .nav-item .nav-link .text-box{
  width:100%;
  min-width:0;
  text-align:center;
}
.category-row .custom-nav-tabs .nav-item .nav-link .text-box span{
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  width:100%;
  font-size:clamp(11px, 3vw, 13px);
  font-weight:500;
  line-height:1.3;
  color:var(--tm-plum-dark);
  text-align:center;
  /* part 04 set break-word/anywhere for the card layout, which split names */
  overflow-wrap:normal;
  word-break:normal;
  hyphens:none;
  min-height:2.6em;
}
/* Count and the vendor's trailing arrow are not part of this design. */
.category-row .custom-nav-tabs .nav-item .nav-link .text-box small,
.category-row .custom-nav-tabs .nav-item .nav-link > i.iconsax{
  display:none;
}

/* --------------------------------------------------------------------------
   19b. Selected
   -------------------------------------------------------------------------- */
.category-row .custom-nav-tabs .nav-item .nav-link.active{
  background:var(--tm-primary-soft);
  border-color:transparent;
  box-shadow:none;
}
.category-row .custom-nav-tabs .nav-item .nav-link.active .text-box span{
  color:var(--tm-mauve);
  font-weight:600;
}
.category-row .custom-nav-tabs .nav-item .nav-link.active .img-box{
  box-shadow:0 0 0 2px #fff, 0 0 0 4px rgba(118,86,107,.35);
}

@media (min-width: 768px){
  .category-row .custom-nav-tabs{ gap:14px; }
  .category-row .custom-nav-tabs .nav-item .nav-link,
  .category-row .custom-nav-tabs .nav-item .nav-link.categories{ padding:14px 8px 16px; }
}

/* ---------- 20-service-card.css ---------- */
/* ==========================================================================
   20. Shared premium service card (entry 023, stage 7)
   Markup: resources/views/frontend/inc/service-card.blade.php
   Structure follows themonshas.com: image + rating pill + tagline + an
   "Options & Pricing" box (the site's existing additionalServices relation)
   + provider footer + Book Now. Colours/radii reuse the existing token set -
   no new palette introduced for this feature.
   ========================================================================== */

.tm-service-card{
  border-radius:var(--tm-r-lg);
  border:1px solid var(--tm-line);
  box-shadow:none;
  display:flex;
  flex-direction:column;
  height:100%;
  transition:box-shadow .25s ease, transform .25s ease, border-color .25s ease;
}
.tm-service-card:hover{
  box-shadow:var(--tm-shadow-lg);
  border-color:transparent;
  transform:translateY(-2px);
}

/* --------------------------------------------------------------------------
   20a. Media
   -------------------------------------------------------------------------- */
.tm-card-media{
  position:relative;
  border-radius:var(--tm-r-lg) var(--tm-r-lg) 0 0;
}
.tm-card-media .card-img img{
  width:100%;
  aspect-ratio:4 / 3;
  object-fit:cover;
  object-position:center;
  display:block;
  transition:transform .5s ease;
}
.tm-service-card:hover .tm-card-media img{ transform:scale(1.05); }

.tm-rating-pill{
  position:absolute;
  top:10px;
  right:10px;
  display:inline-flex;
  align-items:center;
  gap:4px;
  padding:4px 9px;
  border-radius:var(--tm-r-pill);
  background:rgba(255,255,255,.92);
  -webkit-backdrop-filter:blur(4px);
  backdrop-filter:blur(4px);
  box-shadow:0 1px 4px rgba(41,33,40,.12);
  font-size:11px;
  font-weight:700;
  color:var(--tm-plum-dark);
}
.tm-rating-pill img{ width:12px; height:12px; }

/* Discount tag and wishlist icon already have theme rules; only the stacking
   context needs confirming since the card is no longer `overflow:hidden`. */
.tm-service-card .discount-tag,
.tm-service-card .like-icon{ z-index:2; }

/* --------------------------------------------------------------------------
   20b. Body
   -------------------------------------------------------------------------- */
.tm-card-body{
  display:flex;
  flex-direction:column;
  gap:8px;
  flex:1 1 auto;
}

.tm-card-title{ margin:0; }
.tm-card-title a{
  font-size:16px;
  font-weight:700;
  color:var(--tm-plum-dark);
  line-height:1.3;
  display:-webkit-box;
  -webkit-line-clamp:1;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
.tm-card-title a:hover{ color:var(--tm-mauve); }

.tm-card-desc{
  margin:0;
  font-size:12.5px;
  line-height:1.5;
  color:var(--tm-muted);
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

/* Tagline pill - themonshas.com uses a dark shimmer gradient; reproduced with
   the site's own CTA gradient rather than inventing a new colour. */
.tm-tagline{
  display:inline-flex;
  align-self:flex-start;
  max-width:100%;
}
.tm-tagline span{
  display:block;
  padding:5px 12px;
  border-radius:var(--tm-r-pill);
  background:var(--tm-cta);
  border:1px solid rgba(201,164,106,.4);
  color:#fff;
  font-size:10.5px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.04em;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:100%;
}

.tm-meta-row{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.tm-meta-chip{
  display:inline-flex;
  align-items:center;
  gap:5px;
  padding:4px 10px;
  border-radius:var(--tm-r-sm);
  background:var(--tm-cream);
  border:1px solid rgba(201,164,106,.35);
  color:var(--tm-plum);
  font-size:11px;
  font-weight:600;
}
.tm-meta-chip .iconsax{ --Iconsax-Size:13px; --Iconsax-Color:#A98772; }

/* --------------------------------------------------------------------------
   20c. Options & Pricing - the "microservice" box
   -------------------------------------------------------------------------- */
.tm-options-box{
  margin-top:2px;
  padding:12px;
  border-radius:var(--tm-r);
  background:var(--tm-bg);
  border:1px solid var(--tm-line);
}
.tm-options-title{
  margin:0 0 8px;
  font-size:10px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--tm-muted);
}
.tm-option-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding-block:6px;
}
.tm-option-row + .tm-option-row{
  border-top:1px solid var(--tm-line);
}
.tm-option-name{
  margin:0;
  font-size:13px;
  font-weight:500;
  color:var(--tm-plum-dark);
  line-height:1.3;
}
.tm-option-duration{
  margin:1px 0 0;
  font-size:11px;
  color:var(--tm-muted);
}
.tm-option-price{
  display:flex;
  align-items:center;
  gap:8px;
  flex:0 0 auto;
}
.tm-option-tier{
  padding:2px 8px;
  border-radius:var(--tm-r-pill);
  background:var(--tm-gold-soft);
  border:1px solid rgba(201,164,106,.5);
  color:var(--tm-plum);
  font-size:9px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.04em;
  white-space:nowrap;
}
.tm-option-amount{
  font-size:14px;
  font-weight:700;
  color:var(--tm-plum-dark);
  white-space:nowrap;
}
.tm-options-footer{
  margin-top:8px;
  padding-top:8px;
  border-top:1px solid var(--tm-line);
  font-size:11px;
  font-weight:600;
  color:var(--tm-mauve);
  text-align:center;
}

/* --------------------------------------------------------------------------
   20d. Footer
   -------------------------------------------------------------------------- */
.tm-card-footer{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  flex-wrap:wrap;
  padding-top:12px;
}
.tm-card-footer .footer-detail{
  display:flex;
  align-items:center;
  gap:8px;
  min-width:0;
}
.tm-card-footer .footer-detail img{
  width:32px;
  height:32px;
  border-radius:50%;
  object-fit:cover;
  flex:0 0 auto;
}
.tm-card-footer .footer-detail p{
  margin:0;
  font-size:12px;
  font-weight:600;
  color:var(--tm-plum-dark);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:120px;
}
.tm-card-price{
  display:flex;
  align-items:center;
  gap:6px;
}
.tm-card-price del{
  font-size:11px;
  color:var(--tm-muted);
}
.tm-card-price strong{
  font-size:13px;
  color:var(--tm-mauve);
}
.tm-card-footer .book-now-btn{
  margin-left:auto;
}

@media (max-width: 575.98px){
  .tm-card-footer{ justify-content:flex-start; }
  .tm-card-footer .book-now-btn{ margin-left:0; width:100%; }
}

/* ---------- 21-service-drawer.css ---------- */
/* ==========================================================================
   21. Feature chips, the options-box expand button, and the microservice
   drawer (entry 023, stage 9)
   Markup: frontend/inc/service-card.blade.php (chips + expand button),
           frontend/inc/service-drawer.blade.php (the drawer itself)
   The drawer is a Bootstrap 5 Offcanvas (bottom) - the JS component ships in
   bootstrap.bundle.min.js, already loaded site-wide, so this file is CSS only.
   ========================================================================== */

/* --------------------------------------------------------------------------
   21a. Feature chips - Service::features, admin-editable, 2 shown on the
   card, the full list shown in the drawer.
   -------------------------------------------------------------------------- */
.tm-feature-list{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}
.tm-feature-chip{
  display:inline-flex;
  align-items:center;
  gap:5px;
  padding:5px 10px;
  border-radius:var(--tm-r-sm);
  background:var(--tm-cream);
  border:1px solid rgba(201,164,106,.35);
  color:var(--tm-plum);
  font-size:11px;
  font-weight:600;
  line-height:1.3;
}
/* A small sparkle mark, drawn in CSS rather than a new icon dependency. */
.tm-feature-chip::before{
  content:'';
  flex:0 0 auto;
  width:7px;
  height:7px;
  background:var(--tm-gold);
  clip-path:polygon(50% 0%, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0% 50%, 39% 39%);
}

/* --------------------------------------------------------------------------
   21b. Options-box footer - count + the round drawer trigger
   -------------------------------------------------------------------------- */
.tm-options-footer{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-top:8px;
  padding-top:8px;
  border-top:1px solid var(--tm-line);
}
.tm-options-count{
  font-size:10px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.06em;
  line-height:1.5;
  color:var(--tm-mauve);
}

.tm-options-expand{
  flex:0 0 auto;
  width:38px;
  height:38px;
  border-radius:50%;
  border:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:var(--tm-plum-dark);
  color:#fff;
  box-shadow:0 2px 8px rgba(41,33,40,.25);
  transition:transform .25s ease, box-shadow .25s ease, background .25s ease;
}
.tm-options-expand .iconsax{ --Iconsax-Size:16px; --Iconsax-Color:#E8C98F; }
.tm-options-expand:hover,
.tm-options-expand:focus-visible{
  background:var(--tm-cta);
  transform:scale(1.08);
  box-shadow:0 4px 14px rgba(74,41,63,.35);
  color:#fff;
}

/* --------------------------------------------------------------------------
   21c. The drawer
   -------------------------------------------------------------------------- */
.tm-drawer{
  max-width:600px;
  margin-inline:auto;
  border-radius:var(--tm-r-lg) var(--tm-r-lg) 0 0;
  max-height:88vh;
}
.tm-drawer .offcanvas-header{
  padding:14px 20px 6px;
  border-bottom:none;
}
.tm-drawer .offcanvas-header .offcanvas-title{
  font-size:13px;
  font-weight:700;
  color:var(--tm-muted);
  text-transform:uppercase;
  letter-spacing:.05em;
}
.tm-drawer .offcanvas-body{
  padding:0 20px 20px;
}

.tm-drawer-media{
  border-radius:var(--tm-r-lg);
  overflow:hidden;
  margin-bottom:16px;
}
.tm-drawer-media img{
  width:100%;
  aspect-ratio:16 / 9;
  object-fit:cover;
  display:block;
}

.tm-drawer-heading{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  margin-bottom:6px;
}
.tm-drawer-heading h4{
  margin:0;
  font-size:21px;
  font-weight:700;
  color:var(--tm-plum-dark);
}

.tm-drawer-desc{
  margin:0 0 12px;
  font-size:13.5px;
  line-height:1.6;
  color:var(--tm-muted);
}

.tm-drawer .tm-tagline{ margin-bottom:14px; }
.tm-drawer .tm-tagline span{ font-size:11px; padding:6px 14px; }

.tm-drawer .tm-feature-list{ margin-bottom:18px; }
.tm-drawer .tm-feature-chip{ font-size:11.5px; }

.tm-drawer-packages-title{
  margin:0 0 12px;
  font-size:11px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--tm-muted);
}

.tm-drawer-packages{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-bottom:18px;
}

.tm-package-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:14px 16px;
  border-radius:var(--tm-r);
  border:1.5px solid var(--tm-line);
  background:#fff;
  cursor:pointer;
  transition:border-color .2s ease, background .2s ease, box-shadow .2s ease;
}
.tm-package-row:hover{ border-color:var(--tm-tan); }
.tm-package-row.is-selected{
  border-color:var(--tm-mauve);
  background:var(--tm-primary-soft);
  box-shadow:0 0 0 1px var(--tm-mauve);
}
/* The real radio stays for accessibility/keyboard use, visually replaced by
   the row's own border+tint so the whole card reads as the control. */
.tm-package-radio{
  position:absolute;
  width:1px; height:1px;
  padding:0; margin:-1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
  white-space:nowrap;
  border:0;
}

.tm-package-info{
  display:flex;
  flex-direction:column;
  gap:4px;
  min-width:0;
}
.tm-package-name{
  font-size:14.5px;
  font-weight:600;
  color:var(--tm-plum-dark);
}
.tm-package-duration{
  display:inline-flex;
  align-items:center;
  gap:5px;
  font-size:12px;
  color:var(--tm-muted);
}
.tm-package-duration .iconsax{ --Iconsax-Size:13px; --Iconsax-Color:#A98772; }

.tm-package-price{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  gap:10px;
}
.tm-package-price .tm-option-tier{
  padding:3px 10px;
  border-radius:var(--tm-r-pill);
  background:var(--tm-gold-soft);
  border:1px solid rgba(201,164,106,.5);
  color:var(--tm-plum);
  font-size:10px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.03em;
  white-space:nowrap;
}
.tm-package-price .tm-option-amount{
  font-size:16px;
  font-weight:700;
  color:var(--tm-plum-dark);
  white-space:nowrap;
}

.tm-drawer-form .tm-drawer-submit,
.tm-drawer-form .btn{
  min-height:48px;
  font-weight:700;
}

@media (max-width: 575.98px){
  .tm-drawer{ max-height:92vh; }
  .tm-package-row{ padding:12px 14px; }
  .tm-package-price{ flex-direction:column; align-items:flex-end; gap:4px; }
}