/* ==========================================================================
   ServMall theme
   Loaded AFTER the vendor's compiled style.scss so it wins the cascade.
   Restyles the existing dynamic markup — no Blade rewriting, so every
   binding (categories, ads, packages, blogs, providers) keeps working.
   ========================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Raleway:wght@500;600;700;800;900&family=IBM+Plex+Sans:wght@400;500;600&family=IBM+Plex+Mono:wght@500;600&display=swap");

:root {
    --sm-navy: #286090;
    --sm-navy-deep: #254c6d;
    --sm-navy-ink: #1b3d5c;
    --sm-navy-black: #0e2135;
    --sm-blue: #48a0e8;
    --sm-blue-light: #58a8e0;
    --sm-steel: #5f8eb6;
    --sm-mist: #afc7db;
    --sm-cream: #f1decb;

    --sm-amber: #f1a407;
    --sm-rose: #cd3362;
    --sm-olive: #939261;

    --sm-ink: #12212e;
    --sm-ink-2: #41586b;
    --sm-ink-3: #6b8296;
    --sm-rule: #e2e9ef;
    --sm-paper-2: #f6f8fa;

    --sm-display: "Raleway", "Helvetica Neue", Arial, sans-serif;
    --sm-body: "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif;
    --sm-mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;

    --sm-r: 14px;
    --sm-shadow: 0 1px 2px rgba(18, 33, 46, .05), 0 14px 34px -20px rgba(18, 33, 46, .3);
    --sm-shadow-lift: 0 2px 4px rgba(18, 33, 46, .06), 0 26px 46px -22px rgba(18, 33, 46, .42);
}

/* ── typography ───────────────────────────────────────────────────────────
   The theme shipped DM Sans throughout and force-capitalised every heading,
   which produced "ServMall On IOS And Android". Raleway carries the display
   role (ServMall's own face); IBM Plex Sans takes body copy, because Raleway
   goes thin and muddy below ~16px.
   ------------------------------------------------------------------------ */
body,
p, span, li, td, th, label, input, textarea, select,
.form-control, .dropdown-item {
    font-family: var(--sm-body) !important;
}
body { color: var(--sm-ink); font-size: 15.5px; line-height: 1.62; }

h1, h2, h3, h4, h5, h6,
.title h2, .title h3, .btn, .nav-link, .navbar-brand {
    font-family: var(--sm-display) !important;
    letter-spacing: -.018em;
    text-transform: none !important;   /* kills "IOS And Android" */
    text-wrap: balance;
}
h1, h2 { font-weight: 800 !important; }
h3, h4 { font-weight: 700 !important; }
h2 { color: var(--sm-ink); }

/* ── section rhythm ───────────────────────────────────────────────────────
   Vendor spacing was uneven between sections; one scale for all of them.
   ------------------------------------------------------------------------ */
section { padding-top: 72px; padding-bottom: 72px; }
section.pt-0 { padding-top: 0 !important; }
.section-b-space { padding-bottom: 72px; }
.section-bg { background: var(--sm-paper-2) !important; }

.title { margin-bottom: 34px; }
.title h2,
.title h3 {
    font-size: clamp(25px, 2.9vw, 36px) !important;
    font-weight: 800 !important;
    color: var(--sm-ink) !important;
    margin-bottom: 6px;
}
.title p,
.title .sub-title { color: var(--sm-ink-2) !important; font-size: 16px; max-width: 62ch; }
/* the theme's decorative underline reads as an artefact at these weights */
.title h2::after, .title h3::after { background: var(--sm-amber) !important; height: 4px !important; border-radius: 2px; }

/* ── buttons ──────────────────────────────────────────────────────────── */
.btn {
    font-weight: 700 !important;
    font-size: 14.5px !important;
    border-radius: 100px !important;
    padding: 12px 26px !important;
    letter-spacing: 0 !important;
    transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease, color .18s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn-solid,
.btn.btn-solid {
    background: var(--sm-navy) !important;
    border-color: var(--sm-navy) !important;
    color: #fff !important;
    box-shadow: 0 10px 24px -12px rgba(40, 96, 144, .85);
}
.btn-solid:hover, .btn.btn-solid:hover {
    background: var(--sm-navy-ink) !important;
    border-color: var(--sm-navy-ink) !important;
}
.btn-outline, .btn.btn-outline {
    border: 2px solid var(--sm-navy) !important;
    color: var(--sm-navy) !important;
    background: transparent !important;
}
.btn-outline:hover, .btn.btn-outline:hover {
    background: var(--sm-navy) !important;
    color: #fff !important;
}

/* ── hero ───────────────────────────────────────────────────────────────── */
.home-section,
.home-section.pt-0 {
    padding-top: 84px !important;      /* the theme's pt-0 utility flattened the hero */
}
.home-section {
    background-image:
        linear-gradient(112deg, rgba(14, 33, 53, .95) 0%, rgba(37, 76, 109, .9) 52%, rgba(40, 96, 144, .74) 100%),
        url("/images/servmall/home/bgImage.webp") !important;
    background-size: cover !important;
    background-position: center center !important;
    padding-top: 84px !important;
    padding-bottom: 92px !important;
}
.home-section h1,
.home-section h2 {
    font-family: var(--sm-display) !important;
    font-weight: 800 !important;
    color: #fff !important;
    font-size: clamp(34px, 4.8vw, 56px) !important;
    line-height: 1.1 !important;
}
.home-section p { color: #d3e2ef !important; font-size: 17px; }

/* the animated phrase shipped a red/pink/purple/blue gradient that fights
   every other colour on the page */
.home-animation,
.home-section .home-animation {
    background-image: linear-gradient(100deg, var(--sm-blue-light) 0%, var(--sm-blue) 45%, #8fd0ff 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
    font-weight: 900 !important;
    border: 0 !important;
    position: relative;
}
/* the amber rule under the phrase, echoing the ServMall lockup */
.home-animation::after {
    content: "";
    position: absolute; left: 0; right: 0; bottom: -.06em;
    height: .075em; background: var(--sm-amber); border-radius: 3px;
}

/* search bar — the primary action on the page, so it gets real presence */
.home-section .form-control,
.home-section .select2-container--default .select2-selection--single {
    border-radius: 100px !important;
    border: 0 !important;
    padding: 14px 20px !important;
    font-size: 15px !important;
    min-height: 52px;
}
.home-section .search-section,
.home-section .home-search,
.home-section .search-box {
    background: #fff !important;
    border-radius: 100px !important;
    box-shadow: 0 26px 56px -26px rgba(0, 0, 0, .62) !important;
    padding: 7px !important;
}

/* ── cards: one treatment everywhere ──────────────────────────────────── */
.category-box, .offer-content, .offer-box, .service-box, .product-box,
.blog-box, .blog-main, .package-box, .expert-box, .provider-box,
.service-package-box, .team-box {
    border-radius: var(--sm-r) !important;
    box-shadow: var(--sm-shadow) !important;
    border: 1px solid var(--sm-rule) !important;
    overflow: hidden;
    transition: transform .26s ease, box-shadow .26s ease;
    background: #fff;
}
.category-box:hover, .offer-content:hover, .offer-box:hover, .service-box:hover,
.product-box:hover, .blog-box:hover, .blog-main:hover, .package-box:hover,
.expert-box:hover, .provider-box:hover, .service-package-box:hover {
    transform: translateY(-4px);
    box-shadow: var(--sm-shadow-lift) !important;
}
.category-box img, .service-box img, .product-box img, .blog-box img {
    transition: transform .5s ease;
}
.category-box:hover img, .service-box:hover img,
.product-box:hover img, .blog-box:hover img { transform: scale(1.06); }

/* category tiles were ragged — equal boxes, consistent crop */
.category-section .nav-link { border-radius: 12px !important; font-family: var(--sm-display) !important; font-weight: 600 !important; }
.category-section .nav-link.active { background: var(--sm-navy) !important; color: #fff !important; }
.category-section img { object-fit: cover !important; aspect-ratio: 1 / 1; border-radius: 10px; }

/* ── offers: the trade-accent system from the artisan cards ───────────── */
.offer-section .offer-content { background: #fff; }
.offer-section .swiper-slide:nth-child(3n+1) .offer-content { border-top: 4px solid var(--sm-amber) !important; }
.offer-section .swiper-slide:nth-child(3n+2) .offer-content { border-top: 4px solid var(--sm-rose) !important; }
.offer-section .swiper-slide:nth-child(3n+3) .offer-content { border-top: 4px solid var(--sm-olive) !important; }
.offer-section .offer-content h3 { font-size: 19px !important; font-weight: 800 !important; }
.offer-section .offer-content p { color: var(--sm-ink-2) !important; font-size: 14.5px; }
/* the sale badge */
.offer-section [class*="tag"], .offer-section .offer-tag, .offer-section .label {
    background: var(--sm-navy) !important;
    color: #fff !important;
    border-radius: 100px !important;
    font-family: var(--sm-mono) !important;
    font-size: 10.5px !important;
    letter-spacing: .08em;
    text-transform: uppercase;
    padding: 5px 11px !important;
}

/* ── app + provider bands: navy, so they punctuate the white sections ─── */
.application-section {
    background-image: linear-gradient(120deg, var(--sm-navy-black) 0%, var(--sm-navy-deep) 100%) !important;
    background-color: var(--sm-navy-deep) !important;
    border-radius: 0 !important;
}
.application-section h2, .application-section h3 { color: #fff !important; }
.application-section p, .application-section li, .application-section span { color: #cddced !important; }

.service-provider-section .section-wrap,
.job-request-section {
    background-image: linear-gradient(115deg, var(--sm-navy) 0%, var(--sm-navy-deep) 100%) !important;
    background-color: var(--sm-navy) !important;
    border-radius: 18px !important;
    color: #fff;
}
.service-provider-section .section-wrap h2,
.service-provider-section .section-wrap h3,
.job-request-section h2, .job-request-section h3 { color: #fff !important; }
.service-provider-section .section-wrap p,
.service-provider-section .section-wrap li,
.job-request-section p { color: #cddced !important; }
.service-provider-section .section-wrap .btn,
.job-request-section .btn {
    background: #fff !important; color: var(--sm-navy) !important; border-color: #fff !important;
}

/* ── newsletter ───────────────────────────────────────────────────────── */
.newsletter-section {
    background-image:
        linear-gradient(100deg, rgba(14, 33, 53, .93), rgba(40, 96, 144, .8)),
        url("/images/servmall/home/S23.webp") !important;
    background-size: cover !important;
    background-position: center 30% !important;
}
.newsletter-section h2, .newsletter-section h3 { color: #fff !important; }
.newsletter-section p, .newsletter-section span { color: #cddced !important; }
.newsletter-section .form-control {
    border-radius: 100px !important; border: 0 !important; padding: 14px 20px !important; min-height: 52px;
}

/* ── blogs, packages, experts ─────────────────────────────────────────── */
.blog-section .blog-content h3, .blog-section .blog-main h3 { font-size: 18px !important; }
.blog-section p { color: var(--sm-ink-2) !important; }
.service-package-section .price, .service-list-section .price,
[class*="price"] {
    font-family: var(--sm-display) !important; font-weight: 800 !important; color: var(--sm-navy) !important;
}
[class*="rating"] i, [class*="star"] i, .fa-star { color: var(--sm-amber) !important; }

/* ── header / footer ──────────────────────────────────────────────────── */
header .nav-link, .header-nav a { font-family: var(--sm-display) !important; font-weight: 600 !important; }
footer { background: var(--sm-navy-black) !important; }
footer, footer p, footer a, footer li, footer span { color: #a8c1d6 !important; }
footer a:hover { color: #fff !important; }
footer h4, footer h5 {
    color: #fff !important; font-family: var(--sm-display) !important;
    font-weight: 800 !important; text-transform: uppercase !important;
    letter-spacing: .1em !important; font-size: 13px !important;
}

/* ── the cream blob, as a soft ground behind one band ─────────────────── */
.service-list-section.section-bg { position: relative; overflow: hidden; }
.service-list-section.section-bg::before {
    content: "";
    position: absolute; right: -240px; top: -170px;
    width: 720px; height: 525px; z-index: 0; opacity: .45; pointer-events: none;
    background: url("/images/servmall/home/vector.webp") no-repeat center / contain;
}
.service-list-section.section-bg > * { position: relative; z-index: 1; }

/* ── misc polish ──────────────────────────────────────────────────────── */
a { transition: color .16s ease; }
.swiper-pagination-bullet-active { background: var(--sm-navy) !important; }
::selection { background: var(--sm-blue); color: #fff; }
img { max-width: 100%; }

@media (max-width: 767px) {
    section { padding-top: 52px; padding-bottom: 52px; }
    .section-b-space { padding-bottom: 52px; }
    .home-section { padding-top: 56px !important; padding-bottom: 64px !important; }
}
@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; animation: none !important; }
}


/* ── remaining section backgrounds ──────────────────────────────────────── */
.expert-section {
    background-image: linear-gradient(180deg, #fff 0%, var(--sm-paper-2) 100%) !important;
    background-color: var(--sm-paper-2) !important;
}
.service-provider-section {
    background-image: none !important;
    background-color: transparent !important;
}
.newsletter-content {
    background-image:
        linear-gradient(100deg, rgba(14, 33, 53, .93), rgba(40, 96, 144, .82)),
        url("/images/servmall/home/S23.webp") !important;
    background-size: cover !important;
    background-position: center 28% !important;
    border-radius: 18px !important;
}
.newsletter-content h2, .newsletter-content h3, .newsletter-content h4 { color: #fff !important; }
.newsletter-content p, .newsletter-content span { color: #cddced !important; }

/* ── image fitting ────────────────────────────────────────────────────────
   The theme left object-fit at its initial value (fill) on content images, so
   every photo was stretched to its box — a 616x446 shot squashed into 453x218
   read as an unrecognisable smear. Cover everywhere, with sane aspect boxes.
   ------------------------------------------------------------------------ */
.offer-section img, .offer-img img,
.service-list-section img, .service-box img, .product-box img,
.blog-section img, .blog-box img, .blog-content img,
.expert-section img, .service-package-section img,
.about-us-section img, .application-section img,
.service-provider-section img {
    /* object-fit only. The `width: 100% !important; height: 100% !important`
       that used to live here was over-reach: the problem it was written for was
       photos stretching because object-fit defaults to `fill`, and object-fit
       alone solves that. Forcing the size made this rule out-rank every
       component that sizes its own images — it beat `.img-45 { width: 45px }`,
       `.profile-pic { width: 130px }`, `.selected-img { width: 160px }` and the
       card-footer avatars — so a 45px avatar rendered 490px wide in the cart, an
       80px thumbnail was upscaled to 328px, artisan avatars became ellipses of
       whatever aspect their photo happened to have, and the decorative dots on
       About us stretched to the full viewport width.

       Anything that genuinely needs to fill its box says so in its own rule. */
    object-fit: cover;
}

/* The rule above is for content photos. The theme also scatters small
   absolutely-positioned decorations through these same sections — dots,
   quote marks, shapes — and `width:100% !important` overrode their own
   `width:140px`. Absolutely positioned, they resolve 100% against the initial
   containing block, so on About us a 140x16 row of dots rendered 1850px wide
   and gave the page a horizontal scrollbar. Decorations keep their own size. */
img.sm-decor {
    /* Decorations keep their own dimensions and are never cropped. */
    object-fit: contain;
    max-width: 100%;
}

/* Provider avatars.
   The rule above forced width:100%/height:100% on images in these sections,
   which beat the theme's own `.profile-pic { width:130px; height:130px }`.
   Height then resolved to auto, so every avatar took its source aspect: 263x203
   for most, 263x286 for one portrait shot and 263x94 for a wide one. With
   border-radius:100% on a non-square box those render as ellipses of varying
   squash, and the tall one inflated its whole row — which is what made the
   artisan grid look ragged. A circle needs a square box. */
.expert-content .gray-card-img .profile-pic,
.expert-content .dark-card-img .profile-pic {
    width: 110px !important;
    height: 110px !important;
    object-fit: cover !important;
    border-radius: 50% !important;
    margin-inline: auto;
}
.offer-section .offer-img,
.offer-section .offer-content > a,
.offer-section .offer-content .img-wrap {
    aspect-ratio: 16 / 10;
    overflow: hidden;
    display: block;
}
.blog-section .blog-content.ratio2_1 { aspect-ratio: 16 / 10; overflow: hidden; }

/* Category chips: 800x800 source squeezed into a 50x60 box read as a smudge.
   Bigger, square, and circular so they work as trade icons. */
.category-section .nav-link img,
.category-section .category-box img {
    width: 60px !important;
    height: 60px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    margin-inline: auto;
}
.category-section .nav-link {
    padding: 18px 12px !important;
    text-align: center;
    border: 1px solid var(--sm-rule) !important;
    background: #fff;
    min-height: 128px;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
}
.category-section .nav-link.active img { box-shadow: 0 0 0 3px rgba(255,255,255,.55); }
.category-section .nav-link h4,
.category-section .nav-link h5,
.category-section .nav-link span { font-size: 13.5px !important; line-height: 1.3; }

/* ── offer cards: text was navy-on-photo and unreadable ──────────────────
   The theme lays copy directly over the image with no scrim. Adds a gradient
   from the card's left edge so the headline, body and button hold contrast
   whatever photo sits behind them.
   ------------------------------------------------------------------------ */
.offer-section .offer-content,
.offer-section .offer-box { position: relative; isolation: isolate; }
.offer-section .offer-content::before {
    content: "";
    position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background: linear-gradient(96deg, rgba(14,33,53,.94) 0%, rgba(14,33,53,.82) 42%, rgba(14,33,53,.22) 78%, rgba(14,33,53,.05) 100%);
}
.offer-section .offer-content > *:not(.offer-img) { position: relative; z-index: 1; }
.offer-section .offer-content h2,
.offer-section .offer-content h3,
.offer-section .offer-content h4 { color: #fff !important; text-shadow: 0 1px 12px rgba(0,0,0,.3); }
.offer-section .offer-content p,
.offer-section .offer-content span:not([class*="tag"]) { color: #dbe7f2 !important; }
.offer-section .offer-content .btn {
    background: #fff !important; color: var(--sm-navy) !important; border-color: #fff !important;
}
/* the tag was running off the card edge */
.offer-section [class*="tag"], .offer-section .offer-tag, .offer-section .label {
    max-width: calc(100% - 32px);
    white-space: nowrap;
    background: var(--sm-amber) !important;
    color: var(--sm-navy-black) !important;
    font-weight: 600 !important;
}
.offer-section .swiper-slide:nth-child(3n+2) [class*="tag"] { background: var(--sm-rose) !important; color: #fff !important; }
.offer-section .swiper-slide:nth-child(3n+3) [class*="tag"] { background: var(--sm-olive) !important; color: #fff !important; }

/* ── the cream shape read as a hard-edged rectangle over an empty section;
      softened to a faint wash that cannot fight the content ─────────────── */
.service-list-section.section-bg::before {
    right: -320px; top: -220px;
    width: 640px; height: 470px;
    opacity: .22;
    filter: blur(2px);
}

/* ── empty states ─────────────────────────────────────────────────────────
   "Services not found!" currently renders as bare text in a white slab.
   Given it as a real empty state until services are featured in admin.
   ------------------------------------------------------------------------ */
.service-list-section .no-data-added,
.service-list-section [class*="no-data"],
.service-list-section [class*="not-found"] {
    border: 1px dashed var(--sm-rule) !important;
    border-radius: var(--sm-r) !important;
    background: #fff !important;
    color: var(--sm-ink-3) !important;
    padding: 44px 24px !important;
    font-size: 15px !important;
}

/* ==========================================================================
   ALIGNMENT
   Cards across the page sat on ragged baselines: avatars differed in shape
   and size, rows sized to their tallest child, and images had no common
   aspect box. One grid, one image ratio, one card skeleton.
   ========================================================================== */

/* Every card row stretches, so cards in a row end on the same baseline.
   Scoped with :has(> .card) — an earlier version of this made EVERY Bootstrap
   column a flex container, which laid out stacked content side by side. On the
   bookings page that pushed an empty .col-12 to x=1271 in a 1440px viewport and
   gave the whole page 640px of horizontal scroll. Only columns that actually
   hold a card need to be flex. */
.row { align-items: stretch; }
.row > [class*="col-"]:has(> .card) { display: flex; }
.row > [class*="col-"] > .card { width: 100%; }
.row > [class*="col-"]:has(> .card) > div { width: 100%; }
.swiper-wrapper { align-items: stretch; }
.swiper-slide { height: auto !important; display: flex; }
.swiper-slide > .card,
.swiper-slide > div { width: 100%; }

/* one card skeleton: content column, body grows, footer pinned to the bottom */
.card {
    display: flex !important;
    flex-direction: column;
    height: 100%;
    border-radius: var(--sm-r) !important;
    border: 1px solid var(--sm-rule) !important;
    box-shadow: var(--sm-shadow) !important;
    background: #fff;
    overflow: hidden;
    transition: transform .26s ease, box-shadow .26s ease;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--sm-shadow-lift) !important; }
.card .card-body { flex: 1 1 auto; display: flex; flex-direction: column; gap: 7px; padding: 16px 18px 18px !important; }
.card .card-detail { margin-top: auto; }

/* provider cards: the avatars were a mix of circles and a wide rounded
   rectangle (the one with no image fell back to a placeholder of a different
   shape), which threw every following line out of alignment */
.expert-section .dark-card-img {
    display: flex; align-items: center; justify-content: center;
    padding: 22px 0 4px;
}
.expert-section .dark-card-img img,
.expert-section .profile-pic {
    width: 104px !important;
    height: 104px !important;
    min-width: 104px;
    border-radius: 50% !important;
    object-fit: cover !important;
    object-position: center 22%;
    background: var(--sm-paper-2);
    box-shadow: 0 0 0 4px #fff, 0 8px 22px -10px rgba(18,33,46,.42);
}
.expert-section .card-body { align-items: center; text-align: center; }
.expert-section .card-title { display: flex; flex-direction: column; align-items: center; gap: 5px; }
.expert-section .card-title a { font-family: var(--sm-display) !important; font-weight: 700 !important; font-size: 16.5px !important; color: var(--sm-ink) !important; }
.expert-section .rate { display: inline-flex; align-items: center; gap: 4px; font-family: var(--sm-mono) !important; font-size: 12px !important; }
.expert-section .location { display: flex; align-items: center; justify-content: center; gap: 5px; color: var(--sm-ink-3) !important; }
.expert-section .location h5 { font-size: 13px !important; font-weight: 500 !important; margin: 0; color: var(--sm-ink-3) !important; }
/* addresses ran to one line on some cards and two on others — pin to two */
.expert-section .card-detail p {
    font-size: 13px !important; color: var(--sm-ink-3) !important; text-align: center;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden; min-height: 2.6em; margin: 0;
}

/* testimonials: same treatment, avatar and quote mark on a fixed baseline */
.about-us-section .card-title img:not(.quote) {
    width: 56px !important; height: 56px !important;
    border-radius: 50% !important; object-fit: cover !important;
}
.about-us-section .card-title { display: flex; align-items: center; gap: 12px; }
.about-us-section .card-detail p {
    display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical;
    overflow: hidden; min-height: 6.2em;
}

/* service + package cards: one image ratio so the titles line up */
.service-list-section .card .service-card__media img,
.service-package-section .card img:not(.profile-pic),
.category-section .card img {
    aspect-ratio: 16 / 11;
    width: 100% !important; height: auto !important;
    object-fit: cover !important;
}
/* Do NOT clamp .card-title globally — service cards use custom title markup.
   The old rule + word-break:break-all collapsed titles to one letter. */
.service-package-section .card-title {
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden; min-height: 2.5em;
}

/* the missing-image placeholder was a different shape from a real photo */
img[src=""], img:not([src]) { visibility: hidden; }

/* gutters: the theme mixed g-3, g-5 and g-lg-5 between comparable rows */
.category-section .row, .service-list-section .row,
.expert-section .row, .about-us-section .row { --bs-gutter-x: 1.5rem; --bs-gutter-y: 1.5rem; }

/* ── .dark-card ───────────────────────────────────────────────────────────
   Provider cards use the theme's "dark-card" variant: white type on a
   translucent white panel, meant for a dark ground. On our light section the
   panel resolved to rgba(255,255,255,.1) and the names were white-on-white —
   invisible. Repainted as light cards with ink type.
   ------------------------------------------------------------------------ */
.card.dark-card,
.expert-section .card,
.expert-section .card.dark-card {
    background-color: #fff !important;
    background-image: none !important;
}
.card.dark-card h1, .card.dark-card h2, .card.dark-card h3,
.card.dark-card h4, .card.dark-card h5, .card.dark-card h6,
.card.dark-card a,
.expert-section .card-title h4,
.expert-section .card-title a {
    color: var(--sm-ink) !important;
}
.card.dark-card a:hover,
.expert-section .card-title a:hover h4 { color: var(--sm-navy) !important; }
.card.dark-card p, .card.dark-card small, .card.dark-card span {
    color: var(--sm-ink-3) !important;
}
.card.dark-card .rate small { color: var(--sm-ink-2) !important; font-weight: 600; }

/* ── hero decoration ──────────────────────────────────────────────────────
   The theme scribbles a red oval (heading-bg.png, stretched 481x105 -> 403x86)
   around the animated phrase, plus a dot grid and an animated arrow GIF in the
   corners. Three competing decorations on one headline. Dropped in favour of
   the single amber rule.
   ------------------------------------------------------------------------ */
.home-animation .shape,
.home-section img.shape,
.home-icon { display: none !important; }

/* the phrase now needs its own breathing room without the oval behind it */
.home-animation { padding: 0 2px; }
.home-section .home-contain,
.home-section .container-fluid-lg > .row { justify-content: center; }

/* ── final polish ─────────────────────────────────────────────────────────
   Section headings share one left edge with the content beneath them, and
   every band gets the same vertical rhythm.
   ------------------------------------------------------------------------ */
.title { display: flex; flex-direction: column; align-items: flex-start; }
.title.text-center, .title.text-center * { text-align: center; }
.title.text-center { align-items: center; }

/* the swiper arrows floated over card corners */
.swiper-button-next, .swiper-button-prev {
    width: 38px !important; height: 38px !important;
    background: #fff !important; border: 1px solid var(--sm-rule) !important;
    border-radius: 50% !important; box-shadow: var(--sm-shadow) !important;
}
.swiper-button-next::after, .swiper-button-prev::after {
    font-size: 13px !important; font-weight: 700; color: var(--sm-navy) !important;
}

/* consistent bottom rhythm so bands do not collide */
.category-section, .offer-section, .service-list-section,
.expert-section, .about-us-section { padding-bottom: 72px !important; }

/* ------------------------------------------------------------------
   Proximity bar (PO requirements 13 and 14)

   Sits above a listing: on the left it states the ordering, on the right
   it offers the radius. Right-aligning with margin-left:auto rather than
   justify-content:space-between so the two right-hand controls stay
   together as a pair when the row wraps on a phone.
   ------------------------------------------------------------------ */
.servmall-proximity-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
}

.servmall-proximity-note {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    color: var(--theme-color, #0da487);
}

.servmall-proximity-note .iconsax svg {
    width: 18px;
    height: 18px;
}

.servmall-proximity-label {
    margin-left: auto;
    margin-bottom: 0;
    font-size: 14px;
    white-space: nowrap;
}

.servmall-radius-select {
    width: auto;
    min-width: 150px;
}

/* the distance line on an artisan card, one step quieter than the address
   so it reads as a qualifier rather than a second location */
.servmall-distance h5 {
    opacity: 0.85;
}

/* distance under the artisan's name on a service card — smaller than the
   name, same weight as the rating it sits beside */
.servmall-card-distance {
    font-size: 12px;
    opacity: 0.75;
    line-height: 1.4;
}

/* ── Phase: two-role UX + first-viewport polish (Sep 2026) ─────────────── */

/* Hero: one composition — brand headline + line + search. Floating service
   tiles compete with the CTA and belong in the listings below, not here. */
.home-section .home-slider {
    display: none !important;
}
.home-section {
    min-height: min(78vh, 720px);
    display: flex;
    align-items: center;
}
.home-section .home-contain {
    max-width: 720px;
    margin-inline: auto;
    text-align: center;
    padding-block: 28px 12px;
}
.home-section .home-contain p {
    max-width: 46ch;
    margin-inline: auto;
    margin-bottom: 28px;
}
.home-section .home-form-group {
    max-width: 560px;
    margin-inline: auto;
}

/* Sticky header: glass over light pages, solid navy once scrolled */
header {
    backdrop-filter: saturate(160%) blur(12px);
    -webkit-backdrop-filter: saturate(160%) blur(12px);
}
header .navbar,
header .header-nav {
    transition: background-color .2s ease, box-shadow .2s ease;
}
header.active,
header.sticky,
.fixed-header {
    background: rgba(14, 33, 53, .94) !important;
    box-shadow: 0 10px 28px -18px rgba(14, 33, 53, .55);
}

/* Soften generic breadcrumb chrome */
.breadcrumb-section,
.breadcrumb-section .breadcrumb-content {
    background: var(--sm-paper-2) !important;
    border-bottom: 1px solid var(--sm-rule);
}
.breadcrumb-section h2,
.breadcrumb-section h3 {
    font-family: var(--sm-display) !important;
    font-weight: 800 !important;
    color: var(--sm-ink) !important;
    text-transform: none !important;
}
.breadcrumb-section p { color: var(--sm-ink-2) !important; }

/* Categories: icon-forward, less card chrome */
.category-section .category-box {
    border: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
}
.category-section .category-box:hover {
    transform: none;
    box-shadow: none !important;
}
.category-section .category-box img {
    border-radius: 16px !important;
    box-shadow: var(--sm-shadow);
}

/* Interactive service / provider tiles keep a light card — marketing bands don't */
.service-list-section .service-box,
.expert-section .provider-box,
.expert-section .expert-box {
    border-radius: 16px !important;
}

/* Forms / booking wizard */
.booking-section .form-control,
.cart-section .form-control,
.account-section .form-control,
.log-in-section .form-control {
    border-radius: 12px !important;
    border-color: var(--sm-rule) !important;
    min-height: 48px;
    font-size: 15px !important;
}
.booking-section .form-control:focus,
.cart-section .form-control:focus,
.log-in-section .form-control:focus {
    border-color: var(--sm-blue) !important;
    box-shadow: 0 0 0 3px rgba(72, 160, 232, .22) !important;
}

/* Auth split panel */
.log-in-section .image-contain {
    background: linear-gradient(145deg, var(--sm-navy-black), var(--sm-navy-deep)) !important;
}
.log-in-section .auth-content h2 {
    font-family: var(--sm-display) !important;
    font-weight: 800 !important;
    color: #fff !important;
}
.log-in-section .auth-content p { color: #cddced !important; }
.log-in-section .login-form,
.log-in-section .form-box {
    border-radius: 18px;
}
.log-in-section .btn-solid {
    width: 100%;
    border-radius: 100px !important;
}

/* Listing proximity note — brand navy, not leftover teal */
.servmall-proximity-note {
    color: var(--sm-navy) !important;
}

/* Cart / booking summary panels */
.cart-section .cart-summary,
.booking-section .amount-detail,
.booking-section .bill-summary {
    border-radius: 16px !important;
    border: 1px solid var(--sm-rule) !important;
    box-shadow: var(--sm-shadow) !important;
    background: #fff;
}

/* Hide retired “select servicemen” chrome if any CSS-only remnants remain */
body:not(.servicemen-enabled) .select-servicemen,
body:not(.servicemen-enabled) .as_per_my_choice,
body:not(.servicemen-enabled) .add-person-box {
    display: none !important;
}

@media (max-width: 767.98px) {
    .home-section {
        min-height: auto;
        padding-top: 72px !important;
        padding-bottom: 56px !important;
    }
    .home-section .home-contain { text-align: left; }
    .home-section .home-contain p { margin-inline: 0; }
}

/* Breadcrumb: drop stock photo wash — calm paper band */
.breadcrumb-section > .bg-img { display: none !important; }
.breadcrumb-section {
    padding-top: 36px !important;
    padding-bottom: 28px !important;
}
.breadcrumb-section .breadcrumb-contain { color: var(--sm-ink); }

/* ── Artisan cards: even rows ──────────────────────────────────────────────
   Card height was driven by however long the artisan's address happened to be
   — most wrap to 3 lines, one to 2, one to 5 — so each row sized to its
   longest card and the grid stepped up and down the page. Clamping the address
   to two lines makes every card the same height without truncating anything
   the customer needs: the full address is on the profile.
   ------------------------------------------------------------------------ */
.expert-content .gray-card .card-detail p,
.expert-content .dark-card .card-detail p {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.6em;
}

/* the location line above it is one line by nature; keep it from wrapping into
   a second and reintroducing the same unevenness */
.expert-content .gray-card .location h5,
.expert-content .dark-card .location h5 {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ── Service cards ─────────────────────────────────────────────────────────
   The artisan thumbnail and the title are already sized by
   .service-card__artisan / .service-card__title in servmall-site.css. Nothing
   to add here — the earlier breakage was this file's blanket image rule
   out-ranking those, which the selectors above no longer do.
   ------------------------------------------------------------------------ */

/* ── Booking list: the service thumbnail ───────────────────────────────────
   .service-image reserves a 269x300 box in each booking row, but the image
   inside it rendered at its natural size — 80x50 for one of the seeded
   thumbnails — leaving most of the box empty and the row visually lopsided.
   Fill the box the way every other card in the app does.
   ------------------------------------------------------------------------ */
.booking-sec .booking-box .service-image,
.booking-sec .booking-box .service-image a {
    display: block;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: 10px;
}
.booking-sec .booking-box .service-image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block;
}

/* ── Artisan thumbnail in the legacy card footer ───────────────────────────
   The services listing was rewritten to .service-card markup, but several
   pages still use the original .card > .card-footer > .footer-detail layout —
   the "Featured Services" strip on a service detail page, category, wishlist,
   provider details and the home page. There the blanket image rule above
   forces width:100%/height:100% on the small artisan avatar, so it rendered
   196x196 and pushed the card to 575px tall with the Book Now button stranded
   beside a giant portrait. Same 40px avatar the new cards use.
   ------------------------------------------------------------------------ */
.card .card-footer .footer-detail {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}
.card .card-footer .footer-detail > img,
.card .card-footer .footer-detail > a > img {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px;
    border-radius: 50% !important;
    object-fit: cover !important;
    flex: 0 0 auto;
}
.card .card-footer .footer-detail .star {
    width: 14px !important;
    height: 14px !important;
    flex: 0 0 auto;
}
.card .card-footer .footer-detail > div { min-width: 0; }