/*
 * Wellness to Book — brand override layer.
 * Loaded AFTER all theme CSS (style.css, 02_style.css, buyer_dashboard.css) so it wins the cascade.
 * Every color references the CSS variables injected by frontend/partials/root-style.blade.php,
 * so admin color changes keep flowing through ("dynamic branding").
 */

/* ------------------------------------------------------------------
   1. Accessibility — restore keyboard focus (theme resets use *{outline:none})
------------------------------------------------------------------ */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--main-color-three) !important;
    outline-offset: 2px;
}

/* ------------------------------------------------------------------
   2. Surfaces — replace off-brand creams / baby blues / lavender
------------------------------------------------------------------ */
.section-bg-1 {
    background-color: var(--wtc-cloud);
}

.section-bg-2,
.single-service.section-bg-2 {
    background-color: var(--wtc-teal-soft);
}

.navbar-bg-2 {
    background: var(--wtc-cloud);
}

@media (min-width: 320px) and (max-width: 991.98px) {
    .navbar-area.navbar-two .nav-container .navbar-collapse.show .navbar-nav {
        background: var(--wtc-cloud);
    }
}

.gradient-bg-1 {
    background: linear-gradient(90deg, var(--wtc-cloud) 0%, var(--wtc-teal-soft) 100%);
}

.gradient-bg-2 {
    background: radial-gradient(circle, #ffffff 0%, var(--wtc-cloud) 100%);
}

/* Site footer: calm cloud → teal-soft wash with a sand hairline (was cream → lavender) */
.gradient-footer {
    background: linear-gradient(180deg, var(--wtc-cloud) 0%, var(--wtc-teal-soft) 100%);
    border-top: 1px solid var(--wtc-sand);
}

/* Inner-page breadcrumb band: teal-soft with a quiet ripple signature (brand §5.5) */
.banner-inner-area.section-bg-2 {
    position: relative;
    overflow: hidden;
    background-color: var(--wtc-teal-soft);
}

.banner-inner-area.section-bg-2::after {
    content: "";
    position: absolute;
    right: -60px;
    top: 50%;
    transform: translateY(-50%);
    width: 340px;
    height: 340px;
    pointer-events: none;
    background:
        radial-gradient(circle at center, transparent 54px, rgba(var(--main-color-one-rgb), .07) 55px, transparent 57px),
        radial-gradient(circle at center, transparent 104px, rgba(var(--main-color-one-rgb), .06) 105px, transparent 107px),
        radial-gradient(circle at center, transparent 154px, rgba(var(--main-color-one-rgb), .05) 155px, transparent 157px);
}

.banner-inner-area.section-bg-2 .container {
    position: relative;
    z-index: 1;
}

/* ------------------------------------------------------------------
   3. Buttons — primary CTA is Clay (brand §5.6), 12px control radius
------------------------------------------------------------------ */
.cmn-btn {
    border-radius: 12px;
    transition: background-color .25s ease, border-color .25s ease, color .25s ease,
        transform .2s ease, box-shadow .25s ease;
}

.cmn-btn.btn-bg-1 {
    background: var(--main-color-two);
    border: 1px solid var(--main-color-two);
    color: #fff;
}

.cmn-btn.btn-bg-1:hover,
.cmn-btn.btn-bg-1:focus-visible {
    background: var(--wtc-clay);
    border-color: var(--wtc-clay);
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 10px 22px -10px rgba(var(--main-color-two-rgb), .55);
}

.cmn-btn.btn-bg-1:active {
    transform: translateY(0);
}

/* Outlined/secondary buttons stay teal */
.cmn-btn.btn-outline-1 {
    border-radius: 12px;
}

/* ------------------------------------------------------------------
   4. Cards — 16px radius, calm lift hover (no 1.2x zoom / object-fit jump)
------------------------------------------------------------------ */
.new_service__single {
    border-radius: 16px;
    border: 1px solid var(--wtc-sand);
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.new_service__single:hover {
    transform: translateY(-4px);
    border-color: var(--wtc-sand);
    box-shadow: 0 18px 40px -18px rgba(var(--main-color-one-rgb), .28);
}

/* Keep featured service cards and their actions aligned when titles or
   provider names wrap to a different number of lines. */
.featured-services-equal-cards .row > [class*="col-"] {
    display: flex;
}

.featured-services-equal-cards .new_service__single {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    width: 100%;
}

.featured-services-equal-cards .new_service__single__contents {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
}

.featured-services-equal-cards .new_service__single__contents > .btn-wrapper {
    margin-top: auto;
}

/* Category names can occupy one or two lines. Stretch every item to the
   tallest card and pin the service count to a consistent baseline. */
.new_category_area .new_category__flex {
    align-items: stretch;
}

.new_category_area .new_category__item {
    display: flex;
}

.new_category_area .new_category__single {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    width: 100%;
}

.new_category_area .new_category__single__contents {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
}

.new_category_area .new_category__single__title {
    min-height: 52px;
}

.new_category_area .new_category__single__para {
    margin-top: auto;
}

.new_service__single__thumb img {
    transition: opacity .25s ease;
}

/* Media reliability and crop system.
   Service cards use a fixed 16:9 stage at every breakpoint so uploads never
   stretch or collapse. Images are contained rather than cropped: portrait
   providers keep their full head and venue photos retain their full scene. */
.new_service__single__thumb {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 16 / 9;
    background: var(--wtc-cloud, #F5F8F6);
    align-items: stretch !important;
}

.new_service__single__thumb > a {
    display: block;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.new_service__single__thumb > a > img,
.new_service__single__thumb > img {
    display: block;
    width: 100% !important;
    height: 100% !important;
    max-width: none;
    object-fit: contain !important;
    object-position: center center !important;
    border-radius: 0 !important;
    background: var(--wtc-cloud, #F5F8F6);
}

.new_service__single:hover .new_service__single__thumb > a > img,
.new_service__single:hover .new_service__single__thumb > img {
    object-fit: contain !important;
    transform: none !important;
    opacity: .96;
}

.new_service__single__thumb img.no-image,
.new_service__single__thumb img.wtb-image-fallback {
    object-fit: contain !important;
    object-position: center !important;
    padding: clamp(20px, 8%, 38px);
    transform: none !important;
}

/* Apply the same stable treatment to other repeatable media cards. */
.new_jobs__single__thumb,
.new_blog__single__thumb {
    aspect-ratio: 16 / 9;
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background:
        linear-gradient(135deg, rgba(17, 108, 97, .12), rgba(220, 239, 233, .92)),
        var(--wtc-teal-soft, #DCEFE9);
}

.new_jobs__single__thumb img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: center center !important;
}

.new_blog__media-stage {
    position: absolute;
    inset: 0;
    display: block;
    overflow: hidden;
    background: var(--wtc-teal-soft, #DCEFE9);
}

.new_blog__media-stage::after {
    position: absolute;
    z-index: 2;
    inset: 0;
    background: linear-gradient(135deg, rgba(17, 108, 97, .08), rgba(255, 255, 255, .04));
    content: "";
    pointer-events: none;
}

.new_blog__media-backdrop,
.new_blog__media-foreground {
    position: absolute;
    inset: 0;
    display: block;
}

.new_blog__media-backdrop {
    z-index: 0;
    overflow: hidden;
}

.new_blog__media-backdrop img {
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    object-fit: cover !important;
    object-position: center center !important;
    filter: blur(18px) saturate(.72);
    opacity: .38;
    transform: scale(1.12) !important;
}

.new_blog__media-foreground {
    z-index: 1;
    padding: clamp(6px, 1.2vw, 14px);
}

.new_blog__media-foreground img {
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    object-fit: contain !important;
    object-position: center center !important;
    filter: none;
    transform: none !important;
}

.new_blog_area .row.g-4 > [class*="col-"] {
    display: flex;
}

.new_blog__single {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    min-height: 445px;
}

.new_blog__single__contents {
    display: flex;
    flex: 1;
    flex-direction: column;
}

.new_blog__single:hover .new_blog__media-foreground img {
    object-fit: contain !important;
    transform: none !important;
}

.new_tasker__single__thumb {
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--wtc-teal-soft, #DCEFE9);
}

.new_tasker__single__thumb img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: center center !important;
    background: var(--wtc-cloud, #F5F8F6);
}

/* Legacy service cards render uploads as CSS backgrounds rather than <img>.
   Use the exact uploaded image twice: a restrained cover backdrop fills the
   stage while a sharp contained foreground preserves the complete person,
   venue, treatment, and logo. This applies to related services, categories,
   seller profiles, popular/featured services, maps, and AJAX service lists. */
.single-service .service-thumb.service-bg-thumb-format {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background-image: none !important;
    background-color: var(--wtc-cloud, #F5F8F6) !important;
}

.single-service .service-thumb.service-bg-thumb-format::before,
.single-service .service-thumb.service-bg-thumb-format::after {
    content: "";
    position: absolute;
    pointer-events: none;
    background-image: var(--wtc-media-image);
    background-repeat: no-repeat;
    background-position: center;
}

.single-service .service-thumb.service-bg-thumb-format::before {
    inset: -18px;
    z-index: -2;
    background-size: cover;
    filter: blur(18px) saturate(.72);
    transform: scale(1.08);
    opacity: .3;
}

.single-service .service-thumb.service-bg-thumb-format::after {
    inset: 0;
    z-index: -1;
    background-size: contain;
}

.single-service .service-thumb.service-bg-thumb-format > * {
    z-index: 2;
}

.single-service:hover .service-thumb.service-bg-thumb-format::after {
    transform: none;
}

/* Some search and provider-profile cards use a direct <img> instead of the
   background helper. Give them the same 3:2 non-cropping stage and disable
   the legacy 1.2x hover zoom that cuts faces. */
.single-service .service-thumb > img {
    display: block;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 3 / 2;
    object-fit: contain !important;
    object-position: center !important;
    background: var(--wtc-cloud, #F5F8F6);
    transform: none !important;
    border-radius: 10px 10px 0 0;
}

.single-service:hover .service-thumb > img {
    transform: none !important;
}

img.wtb-image-fallback {
    object-fit: contain !important;
    object-position: center !important;
    background: var(--wtc-teal-soft, #DCEFE9);
}

/* Footer methods come from the enabled gateway registry, never a static logo list. */
.copyright-payment .payment-list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 14px;
}

.copyright-payment .payment-list .dynamic-payment-method {
    margin-right: 0 !important;
}

.copyright-payment .payment-method-brand {
    display: inline-flex;
    min-height: 40px;
    align-items: center;
    justify-content: center;
    padding: 6px 10px;
    border: 1px solid rgba(12, 81, 72, .12);
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 4px 12px rgba(12, 81, 72, .06);
}

.copyright-payment .payment-method-logo {
    display: block;
    width: auto !important;
    height: 24px !important;
    max-width: 110px;
    object-fit: contain !important;
}

.copyright-payment .gateway-label-chip {
    min-height: 30px;
    padding: 5px 10px !important;
    border: 1px solid rgba(12, 81, 72, .16);
    border-radius: 999px;
    background: var(--wtc-teal-soft, #DCEFE9);
    color: var(--wtc-teal, #0C5148);
    white-space: nowrap;
}

.single_seller_profile,
.single_seller_profile.gray_bg {
    background-color: #fff;
    border: 1px solid var(--wtc-sand);
    border-radius: 16px;
    transition: transform .25s ease, box-shadow .25s ease;
}

.single_seller_profile:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 40px -18px rgba(var(--main-color-one-rgb), .25);
}

.new_choose__single,
.dashboard_promo {
    border-radius: 16px;
}

/* ------------------------------------------------------------------
   5. Forms — modern focus treatment
------------------------------------------------------------------ */
.form--control:focus,
.form-control:focus {
    border-color: var(--main-color-three);
    box-shadow: 0 0 0 3px rgba(var(--main-color-three-rgb), .25);
}

/* ------------------------------------------------------------------
   6. Legacy label/badge palette → brand hues
   (style.css category tags, counters and status labels)
------------------------------------------------------------------ */
.badge-danger,
.notification-count {
    background-color: var(--wtc-clay-cta);
}

/* ------------------------------------------------------------------
   7. Preloader — the brand ripple (clay dot, expanding mint arcs)
------------------------------------------------------------------ */
.preloader {
    background: var(--wtc-teal-deeper);
}

.loader_bars,
.loader_bars:before,
.loader_bars:after {
    animation: none;
    border: none;
    box-shadow: none;
}

.loader_bars {
    position: relative;
    width: 110px;
    height: 110px;
}

.loader_bars:before,
.loader_bars:after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid var(--wtc-mint);
    opacity: 0;
    animation: wtcRipple 2s cubic-bezier(.2, .6, .35, 1) infinite;
}

.loader_bars:after {
    animation-delay: 1s;
}

.loader_bars span {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 18px;
    height: 18px;
    margin: -9px 0 0 -9px;
    border-radius: 50%;
    background: var(--wtc-clay);
    animation: wtcDotPulse 2s ease-in-out infinite;
}

@keyframes wtcRipple {
    0% {
        transform: scale(.18);
        opacity: .95;
    }

    100% {
        transform: scale(1);
        opacity: 0;
    }
}

@keyframes wtcDotPulse {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.18);
    }
}

/* ------------------------------------------------------------------
   8. Scroll-reveal (elements get .wtc-reveal via brand-theme.js)
------------------------------------------------------------------ */
@media (prefers-reduced-motion: no-preference) {
    .wtc-reveal {
        opacity: 0;
        transform: translateY(18px);
        transition: opacity .55s ease, transform .55s ease;
    }

    .wtc-reveal.wtc-in {
        opacity: 1;
        transform: none;
    }
}

/* Hero ambient layers go dormant while scrolled out of view (brand-theme.js) */
.wtc-hero--asleep *,
.wtc-hero--asleep *::before,
.wtc-hero--asleep *::after {
    animation-play-state: paused !important;
}

/* ------------------------------------------------------------------
   9. Reduced motion — silence decorative animation site-wide
------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {

    .wtc-hero *,
    .wtc-hero *::before,
    .wtc-hero *::after,
    .loader_bars,
    .loader_bars::before,
    .loader_bars::after,
    .loader_bars span,
    .back-to-top {
        animation: none !important;
        transition: none !important;
    }
}


/* ------------------------------------------------------------------
   10. Contact Us Page Improvements (Dynamic Page Builder Modules)
   ------------------------------------------------------------------ */

/* Promo / Contact Info Cards */
.contact-promo-area {
    padding-top: 80px !important;
    padding-bottom: 40px !important;
}

.single-contacts {
    background: #ffffff !important;
    border: 1px solid var(--wtc-sand, #e9e0d2) !important;
    border-radius: 20px !important;
    box-shadow: 0 10px 30px -10px rgba(18, 80, 74, 0.05) !important;
    padding: 40px 30px !important;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.single-contacts:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 20px 40px -15px rgba(18, 80, 74, 0.12) !important;
}

/* Force consistent branding on icons (remove off-brand colors) */
.contact-promo-area div[class*=col]:nth-child(3n+2) .single-contacts .contact-icon,
.contact-promo-area div[class*=col]:nth-child(3n+3) .single-contacts .contact-icon,
.single-contacts .contact-icon {
    background: #f4f8f7 !important;
    color: var(--main-color-one, #116c61) !important;
    width: 72px !important;
    height: 72px !important;
    font-size: 32px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 50% !important;
    margin-bottom: 25px !important;
    transition: all 0.3s ease !important;
}

.single-contacts:hover .contact-icon {
    transform: scale(1.05) !important;
    background: var(--main-color-one, #116c61) !important;
    color: #ffffff !important;
}

.single-contacts .contacts-contents .title {
    font-family: 'Bricolage Grotesque', 'Poppins', sans-serif !important;
    font-size: 20px !important;
    font-weight: 800 !important;
    color: #12504a !important;
    margin-bottom: 12px !important;
    letter-spacing: -0.01em !important;
}

.single-contacts .contacts-contents .item-contents .item {
    font-size: 15px !important;
    font-weight: 500 !important;
    color: #64748b !important;
    text-decoration: none !important;
}

.single-contacts .contacts-contents .item-contents .item a {
    color: #64748b !important;
    text-decoration: none !important;
    transition: color 0.2s ease !important;
}

.single-contacts .contacts-contents .item-contents .item a:hover {
    color: var(--main-color-one, #116c61) !important;
}

/* Contact Form Section Card Layout */
.contact-area {
    background: #ffffff !important;
    padding-top: 40px !important;
    padding-bottom: 80px !important;
}

.contact-area .container {
    max-width: 780px !important;
    background: #ffffff !important;
    border: 1px solid var(--wtc-sand, #e9e0d2) !important;
    border-radius: 24px !important;
    box-shadow: 0 20px 40px -15px rgba(18, 80, 74, 0.08), 0 5px 15px -5px rgba(0, 0, 0, 0.02) !important;
    padding: 50px 60px !important;
}

@media (max-width: 768px) {
    .contact-area .container {
        padding: 30px 20px !important;
        border-radius: 16px !important;
        margin-left: 15px !important;
        margin-right: 15px !important;
        width: auto !important;
    }
}

.contact-area .section-title-two {
    text-align: center !important;
    margin-bottom: 35px !important;
}

.contact-area .section-title-two .title {
    font-size: 28px !important;
    font-weight: 800 !important;
    color: #12504a !important;
    font-family: 'Bricolage Grotesque', 'Poppins', sans-serif !important;
    letter-spacing: -0.02em !important;
}

/* Contact Form Input & Label Enhancements */
.contact-area .form-group {
    margin-bottom: 22px !important;
}

.contact-area label {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #334155 !important;
    margin-bottom: 8px !important;
    display: block !important;
}

.contact-area input,
.contact-area textarea {
    display: block !important;
    width: 100% !important;
    padding: 13px 18px !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    color: #1e293b !important;
    background-color: #ffffff !important;
    border: 1.5px solid #ded8ca !important;
    border-radius: 12px !important;
    transition: all 0.25s ease-in-out !important;
}

.contact-area input:focus,
.contact-area textarea:focus {
    border-color: var(--main-color-one, #116c61) !important;
    box-shadow: 0 0 0 4px rgba(17, 108, 97, 0.12) !important;
    outline: 0 !important;
}

/* Custom Contact Submit Button Styling */
.contact-area .btn-default {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: var(--main-color-one, #116c61) !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    padding: 14px 35px !important;
    font-size: 15px !important;
    border-radius: 12px !important;
    border: none !important;
    box-shadow: 0 4px 14px rgba(17, 108, 97, 0.2) !important;
    cursor: pointer !important;
    transition: all 0.25s ease !important;
    outline: none !important;
    margin-top: 10px !important;
    width: auto !important;
}

.contact-area .btn-default:hover,
.contact-area .btn-default:focus {
    background: #0e5047 !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 6px 18px rgba(17, 108, 97, 0.28) !important;
    color: #ffffff !important;
}


/* ------------------------------------------------------------------
   11. Blog Page Improvements
   ------------------------------------------------------------------ */

.blog-area {
    background: #ffffff !important;
    padding-top: 60px !important;
    padding-bottom: 80px !important;
}

.single-blog {
    background: #ffffff !important;
    border: 1px solid var(--wtc-sand, #e9e0d2) !important;
    border-radius: 20px !important;
    box-shadow: 0 10px 30px -10px rgba(18, 80, 74, 0.04) !important;
    overflow: hidden !important;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.3s ease !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    margin: 0 !important;
}

.single-blog:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 20px 40px -15px rgba(18, 80, 74, 0.12) !important;
    border-color: var(--main-color-one, #116c61) !important;
}

.single-blog .blog-thumb {
    height: 240px !important;
    width: 100% !important;
    overflow: hidden !important;
    display: block !important;
    border-radius: 19px 19px 0 0 !important;
    transition: transform 0.4s ease !important;
}

.single-blog:hover .blog-thumb {
    transform: scale(1.02) !important;
}

.single-blog .blog-contents {
    padding: 30px 24px !important;
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
}

.single-blog .blog-contents .tags {
    display: flex !important;
    gap: 16px !important;
    margin-bottom: 15px !important;
    padding: 0 !important;
    list-style: none !important;
}

.single-blog .blog-contents .tags li {
    font-size: 13px !important;
    font-weight: 600 !important;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.single-blog .blog-contents .tags li a {
    color: #64748b !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    text-decoration: none !important;
    transition: color 0.2s ease !important;
}

.single-blog .blog-contents .tags li a i {
    color: var(--main-color-one, #116c61) !important;
    font-size: 16px !important;
}

.single-blog .blog-contents .tags li a:hover {
    color: var(--main-color-one, #116c61) !important;
}

.single-blog .blog-contents .common-title {
    font-family: 'Bricolage Grotesque', 'Poppins', sans-serif !important;
    font-size: 20px !important;
    font-weight: 800 !important;
    line-height: 1.4 !important;
    color: #12504a !important;
    margin-bottom: 12px !important;
    letter-spacing: -0.01em !important;
}

.single-blog .blog-contents .common-title a {
    color: #12504a !important;
    text-decoration: none !important;
    transition: color 0.2s ease !important;
}

.single-blog .blog-contents .common-title a:hover {
    color: var(--main-color-one, #116c61) !important;
}

.single-blog .blog-contents .common-para {
    font-size: 15px !important;
    color: #64748b !important;
    line-height: 1.6 !important;
    margin-bottom: 0 !important;
    flex: 1 !important;
}

/* Pagination Overrides */
.blog-pagination .custom-pagination nav {
    display: flex !important;
    justify-content: center !important;
}

.blog-pagination .custom-pagination ul.pagination {
    display: flex !important;
    gap: 8px !important;
    list-style: none !important;
    padding: 0 !important;
}

.blog-pagination .custom-pagination ul.pagination li .page-link,
.blog-pagination .custom-pagination ul.pagination li span {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 44px !important;
    height: 44px !important;
    border-radius: 10px !important;
    border: 1px solid var(--wtc-sand, #e9e0d2) !important;
    background: #ffffff !important;
    color: #475569 !important;
    font-weight: 600 !important;
    font-size: 15px !important;
    transition: all 0.2s ease !important;
    text-decoration: none !important;
}

.blog-pagination .custom-pagination ul.pagination li.active span,
.blog-pagination .custom-pagination ul.pagination li.active .page-link,
.blog-pagination .custom-pagination ul.pagination li a.page-link:hover {
    background: var(--main-color-one, #116c61) !important;
    color: #ffffff !important;
    border-color: var(--main-color-one, #116c61) !important;
    box-shadow: 0 4px 10px rgba(17, 108, 97, 0.2) !important;
}



/* Booking page (theme-two "new_" layout) hardening.
   Stock 02_style.css gives .new_serviceDetails__author__thumb img no size
   constraint (it relies on the thumb file being 150x150) and leaves the sticky
   booking sidebar transparent. Constrain the thumb and give the sidebar cards
   an opaque surface so an oversized upload can never flood the layout. */
.new_serviceDetails__author__thumb {
    width: 160px !important;
    height: 90px !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    border: 1px solid var(--wtc-sand, #e9e0d2) !important;
    box-shadow: 0 4px 10px rgba(18, 80, 74, 0.05) !important;
    flex-shrink: 0;
}
.new_serviceDetails__author__thumb img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: center !important;
    background: var(--wtc-cloud, #F5F8F6);
    border-radius: 12px !important;
}

@media (max-width: 575px) {
    .new_serviceDetails__author__thumb {
        width: 100px !important;
        height: 56px !important;
    }
}

.new_serviceDetails__side__item {
    background: #ffffff !important;
    border-color: var(--wtc-sand, #e9e0d2) !important;
    box-shadow: 0 10px 30px -18px rgba(18, 80, 74, 0.18) !important;
}

/* ==================================================================
   12. Service Details Page Enhancements
   ================================================================== */

/* Image Gallery Slider */
.details-thumb {
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 15px 35px -15px rgba(18, 80, 74, 0.12);
    border: 1px solid var(--wtc-sand, #e9e0d2);
    background-color: #ffffff;
}
.service-details-media-stage,
.service-details-background-image {
    aspect-ratio: 16 / 9;
    width: 100%;
    overflow: hidden;
    background: var(--wtc-cloud, #F5F8F6);
    border-radius: 20px;
}
.service-details-media-stage {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    isolation: isolate;
}
.service-details-media-stage::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: rgba(245, 248, 246, .42);
    backdrop-filter: blur(1px);
}
.service-details-media-backdrop {
    position: absolute;
    inset: -18px;
    z-index: -2;
    overflow: hidden;
}
.service-details-gallery-backdrop {
    display: block;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    filter: blur(18px) saturate(.72);
    transform: scale(1.08);
    opacity: .34;
}
.service-details-gallery-image {
    display: block;
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: center !important;
    background: transparent;
    position: relative;
    z-index: 1;
}
/* Backward-compatible safety for any cached/background gallery markup. */
.service-details-background-image {
    background-size: contain !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
}

/* Author & Meta Row Card */
.author-tag.style-02 {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 20px;
    background: #ffffff;
    border: 1px solid var(--wtc-sand, #e9e0d2);
    border-radius: 16px;
    padding: 16px 24px;
    margin-bottom: 30px;
    box-shadow: 0 5px 15px rgba(18, 80, 74, 0.02);
}
.author-tag.style-02 .tag-list {
    margin: 0 !important;
}
.author-tag.style-02 .authors {
    display: flex;
    align-items: center;
    gap: 12px;
}
.author-tag.style-02 .authors .thumb {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid var(--wtc-mint, #9fe1cb);
}
.author-tag.style-02 .authors .thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.author-tag.style-02 .author-title {
    font-family: var(--heading-font);
    font-weight: 800;
    color: var(--wtc-teal-deep);
    font-size: 16px;
}
.author-tag.style-02 .reviews {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    font-weight: 600;
    color: var(--wtc-teal);
}
.author-tag.style-02 .reviews i {
    color: var(--review-color, #E8A23D);
    font-size: 16px;
}
.author-tag.style-02 .video-btn {
    margin-left: auto;
}
@media (max-width: 767px) {
    .author-tag.style-02 .video-btn {
        margin-left: 0;
        width: 100%;
    }
}

/* Modern Pill Tabs System */
.details-tabs.tabs {
    display: flex;
    background: #f4f7f6;
    border: 1.5px solid var(--wtc-sand, #e9e0d2);
    border-radius: 14px;
    padding: 6px;
    gap: 6px;
    list-style: none;
    margin-bottom: 30px !important;
}
.details-tabs.tabs .list {
    flex: 1;
    text-align: center;
    font-family: var(--heading-font);
    font-weight: 700;
    font-size: 15px;
    color: var(--wtc-teal);
    padding: 12px 20px;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border: none !important;
    background: transparent;
    margin: 0 !important;
}
.details-tabs.tabs .list:hover {
    background: rgba(18, 80, 74, 0.04);
    color: var(--wtc-teal-deep);
}
.details-tabs.tabs .list.active {
    background: var(--main-color-one, #12504A) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(18, 80, 74, 0.15);
}

/* Inclusions & Benefits List with SVGs */
.overview-benefits {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 16px;
    padding: 0;
    margin: 25px 0 0 0 !important;
    list-style: none !important;
}
.overview-benefits .list {
    display: flex !important;
    align-items: flex-start;
    gap: 12px;
    background: #ffffff;
    border: 1px solid var(--wtc-sand, #e9e0d2);
    border-radius: 12px;
    padding: 16px 20px;
    margin: 0 !important;
    font-weight: 600;
    font-size: 15px;
    color: var(--wtc-ink);
    transition: transform 0.2s ease, border-color 0.2s ease;
}
.overview-benefits .list:hover {
    transform: translateY(-2px);
    border-color: var(--main-color-three, #5DCAA5);
}
.overview-benefits .list::before {
    content: "" !important;
    display: inline-block;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23116C61' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    margin-right: 0 !important;
}

/* Accordion / FAQ Area */
.faq-area {
    padding-top: 40px !important;
    padding-bottom: 20px !important;
}
.faq-contents .faq-item {
    background: #ffffff;
    border: 1.5px solid var(--wtc-sand, #e9e0d2);
    border-radius: 14px;
    margin-bottom: 14px;
    overflow: hidden;
    transition: box-shadow 0.3s ease, border-color 0.3s ease;
}
.faq-contents .faq-item.active,
.faq-contents .faq-item:hover {
    box-shadow: 0 10px 25px -10px rgba(18, 80, 74, 0.08);
    border-color: var(--main-color-one, #12504A);
}
.faq-contents .faq-item .faq-title {
    font-family: var(--heading-font);
    font-weight: 700;
    font-size: 17px;
    color: var(--wtc-teal-deep);
    padding: 18px 24px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0;
    transition: color 0.2s ease;
}
.faq-contents .faq-item .faq-title::after {
    content: "\f107";
    font-family: "Line Awesome Free";
    font-weight: 900;
    font-size: 18px;
    transition: transform 0.3s ease;
}
.faq-contents .faq-item.active .faq-title::after {
    transform: rotate(180deg);
}
.faq-contents .faq-item .faq-panel {
    padding: 0 24px 20px 24px;
    font-size: 15px;
    color: var(--wtc-ink);
    line-height: 1.6;
}

/* Sidebar Package Box */
.service-details-package {
    position: sticky;
    top: 110px;
    z-index: 10;
}
.single-packages {
    background: #ffffff !important;
    border: 1.5px solid var(--wtc-sand, #e9e0d2) !important;
    border-radius: 24px !important;
    box-shadow: 0 20px 40px -15px rgba(18, 80, 74, 0.08) !important;
    padding: 35px 30px !important;
}
.single-packages .package-price {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0 0 20px 0;
    padding: 0 0 20px 0;
    border-bottom: 1.5px solid var(--wtc-sand, #e9e0d2);
    list-style: none;
}
.single-packages .package-price li:first-child {
    font-family: var(--heading-font);
    font-weight: 800;
    font-size: 22px;
    color: var(--wtc-teal-deep);
}
.single-packages .package-price li:last-child {
    font-family: var(--heading-font);
    font-weight: 800;
    font-size: 26px;
    color: var(--wtc-clay-cta);
}
.tilte-available {
    font-family: var(--heading-font) !important;
    font-weight: 700 !important;
    color: var(--wtc-teal) !important;
    margin-bottom: 14px !important;
}
.available-list {
    list-style: none;
    padding: 0;
    margin: 0 0 25px 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.available-list li {
    font-size: 14px;
    font-weight: 600;
    color: var(--wtc-ink);
    display: flex;
    align-items: center;
    gap: 8px;
}
.available-list li::before {
    content: "\f00c";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    color: var(--main-color-three, #5DCAA5);
    font-size: 14px;
}
.single-packages .btn-wrapper .cmn-btn {
    font-size: 16px !important;
    font-weight: 700 !important;
    padding: 16px 24px !important;
    box-shadow: 0 10px 20px -5px rgba(192, 85, 47, 0.3) !important;
    border-radius: 12px !important;
}
.single-packages .btn-wrapper .wtc-service-primary {
    border: 1px solid var(--main-color-two, #C0552F) !important;
    background: var(--main-color-two, #C0552F) !important;
    color: #ffffff !important;
}
.single-packages .btn-wrapper .wtc-service-primary:hover,
.single-packages .btn-wrapper .wtc-service-primary:focus-visible {
    background: var(--wtc-clay, #DE6E4B) !important;
    border-color: var(--wtc-clay, #DE6E4B) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 12px 24px -5px rgba(192, 85, 47, 0.4) !important;
}
.wtc-service-actions {
    display: grid;
    gap: 12px;
}
.single-packages .live-chat-button-class-for-style {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 0 !important;
    width: 100%;
    min-height: 52px;
    background: #ffffff !important;
    border: 1.5px solid var(--main-color-one, #12504A) !important;
    color: var(--main-color-one, #12504A) !important;
    box-shadow: none !important;
    font-weight: 700 !important;
}
.single-packages .live-chat-button-class-for-style:hover,
.single-packages .live-chat-button-class-for-style:focus-visible {
    background: var(--main-color-one, #12504A) !important;
    border-color: var(--main-color-one, #12504A) !important;
    color: #ffffff !important;
    transform: translateY(-2px) !important;
}

@media (max-width: 575.98px) {
    .service-details-media-stage,
    .service-details-background-image {
        aspect-ratio: 4 / 3;
        border-radius: 14px;
    }
    .details-thumb {
        border-radius: 14px;
    }
    .single-packages {
        padding: 26px 20px !important;
        border-radius: 18px !important;
    }
}
.order-pagkages {
    border-top: 1.5px solid var(--wtc-sand, #e9e0d2);
    margin-top: 25px;
    padding-top: 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.order-pagkages .single-order {
    font-size: 13px;
    font-weight: 600;
    color: var(--wtc-teal);
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Reviews List & Cards */
.about-review-tab {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-top: 20px;
}
.about-seller-flex-content.style-02 {
    background: #ffffff;
    border: 1px solid var(--wtc-sand, #e9e0d2);
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 4px 15px rgba(18, 80, 74, 0.02);
    display: flex;
    gap: 20px;
    transition: transform 0.2s ease;
}
.about-seller-flex-content.style-02:hover {
    transform: translateY(-2px);
}
.about-seller-flex-content.style-02 .about-seller-thumb {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
}
.about-seller-flex-content.style-02 .about-seller-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.about-seller-flex-content.style-02 .about-seller-content {
    flex: 1;
}
.about-seller-flex-content.style-02 .about-seller-content .title {
    font-family: var(--heading-font);
    font-weight: 700;
    font-size: 16px;
    color: var(--wtc-teal-deep);
    margin-bottom: 6px;
}
.about-seller-flex-content.style-02 .about-seller-list {
    display: flex;
    gap: 2px;
    margin-bottom: 10px;
}
.about-seller-flex-content.style-02 .about-seller-list .icon i {
    color: var(--review-color, #E8A23D);
    font-size: 14px;
}
.about-review-para {
    font-size: 14px;
    color: var(--wtc-ink);
    line-height: 1.6;
    margin-bottom: 10px !important;
}
.review-date {
    font-size: 12px;
    font-weight: 600;
    color: var(--extra-light-color);
}

/* ==================================================================
   13. Service Booking Page Enhancements
   ================================================================== */

/* Step timeline indicator override */
.new_stepForm_list {
    border-left: 2px solid var(--wtc-sand, #e9e0d2);
    padding-left: 24px;
    margin-left: 12px;
}
.new_stepForm_list__item {
    position: relative;
}
.new_stepForm_list__item::before {
    content: "";
    position: absolute;
    left: -33px;
    top: 8px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #ffffff;
    border: 2px solid var(--wtc-sand, #e9e0d2);
    transition: all 0.3s ease;
}
.new_stepForm_list__item.active::before {
    background: var(--main-color-two, #C0552F);
    border-color: var(--main-color-two, #C0552F);
    box-shadow: 0 0 0 5px rgba(192, 85, 47, 0.2);
}
.new_stepForm_list__item.completed::before {
    background: var(--main-color-three, #5DCAA5);
    border-color: var(--main-color-three, #5DCAA5);
    content: "\f00c";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    color: #ffffff;
    font-size: 8px;
    line-height: 12px;
    text-align: center;
}
.new_stepForm_list__item__click__icon {
    display: none !important; /* Hide old icon box to use timeline dot */
}

/* Fieldset and forms */
.new_stepForm fieldset {
    background: #ffffff;
    border: 1px solid var(--wtc-sand, #e9e0d2);
    border-radius: 20px;
    padding: 30px;
    box-shadow: 0 10px 30px rgba(18, 80, 74, 0.02);
    margin-top: 20px;
}
.new_stepForm fieldset .label-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--wtc-teal-deep);
    margin-bottom: 8px;
}
.new_stepForm fieldset .form--control {
    border: 1.5px solid var(--wtc-sand, #e9e0d2);
    border-radius: 12px;
    padding: 12px 16px;
    font-size: 15px;
    transition: all 0.2s ease;
}
.new_stepForm fieldset .form--control:focus {
    border-color: var(--main-color-one, #12504A);
    box-shadow: 0 0 0 4px rgba(18, 80, 74, 0.1);
}

/* Inclusions stepper and optional extras cards */
.new_packageBook__addFeature {
    background: #ffffff;
    border: 1.5px solid var(--wtc-sand, #e9e0d2);
    border-radius: 16px !important;
    padding: 20px;
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.new_packageBook__addFeature:hover {
    border-color: var(--main-color-three, #5DCAA5);
    box-shadow: 0 8px 20px rgba(18, 80, 74, 0.04);
}
.new_packageBook__addFeature__title {
    font-family: var(--heading-font);
    font-weight: 700;
    color: var(--wtc-teal-deep);
    font-size: 16px !important;
    margin: 0;
}
.new_packageBook__addFeature__price {
    font-family: var(--heading-font);
    font-weight: 800;
    color: var(--wtc-clay-cta);
    font-size: 16px;
}
.package_quantity {
    display: inline-flex;
    align-items: center;
    border: 1.5px solid var(--wtc-sand, #e9e0d2);
    border-radius: 10px;
    overflow: hidden;
    background: #ffffff;
}
.package_quantity__icon {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f4f7f6;
    color: var(--wtc-teal-deep);
    cursor: pointer;
    transition: background 0.2s ease;
}
.package_quantity__icon:hover {
    background: var(--wtc-teal-soft, #dcefe9);
}
.package_quantity__input {
    width: 44px;
    border: none !important;
    text-align: center;
    font-weight: 700;
    color: var(--wtc-teal-deep);
    height: 36px;
}
.package_quantity__input::-webkit-outer-spin-button,
.package_quantity__input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Time slots pills */
.show-schedule {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 15px;
}
.show-schedule .v-1 {
    display: none; /* Hide default radio check visual */
}
.show-schedule li {
    list-style: none;
}
.show-schedule .list {
    border: 1.5px solid var(--wtc-sand, #e9e0d2) !important;
    border-radius: 30px !important;
    padding: 10px 20px !important;
    font-weight: 700 !important;
    color: var(--wtc-teal) !important;
    background: #ffffff !important;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    margin: 0 !important;
}
.show-schedule .list:hover {
    border-color: var(--main-color-three, #5DCAA5) !important;
    background: var(--wtc-teal-soft, #dcefe9) !important;
}
.show-schedule .list.active {
    background: var(--main-color-one, #12504A) !important;
    color: #ffffff !important;
    border-color: var(--main-color-one, #12504A) !important;
    box-shadow: 0 4px 10px rgba(18, 80, 74, 0.15);
}

/* Booking summary sidebar */
.new_serviceDetails__side {
    position: sticky;
    top: 110px;
    z-index: 10;
}
.new_serviceDetails__side__item {
    background: #ffffff !important;
    border: 1.5px solid var(--wtc-sand, #e9e0d2) !important;
    border-radius: 20px !important;
    padding: 24px !important;
    box-shadow: 0 10px 30px -18px rgba(18, 80, 74, 0.18) !important;
}
.new_serviceBooking__summary__title {
    font-family: var(--heading-font);
    font-weight: 800;
    font-size: 20px;
    color: var(--wtc-teal-deep);
    border-bottom: 1.5px solid var(--wtc-sand, #e9e0d2);
    padding-bottom: 12px;
    margin-bottom: 20px;
}
.new_serviceBooking__summary__sub_title {
    font-family: var(--heading-font);
    font-weight: 700;
    font-size: 15px;
    color: var(--wtc-teal);
    margin-top: 15px;
    margin-bottom: 10px;
}
.new_serviceBooking__summary__list__item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
    font-weight: 600;
    color: var(--wtc-ink);
    padding: 10px 0;
    border-bottom: 1px dashed var(--wtc-sand, #e9e0d2);
}
.new_serviceBooking__summary__list__item:last-child {
    border-bottom: none;
}
.new_serviceBooking__summary__list__item .value-count {
    font-weight: 700;
    color: var(--wtc-teal-deep);
}
.new_serviceBooking__summary__list__item .total-amount {
    font-size: 18px;
    color: var(--wtc-clay-cta);
    font-weight: 800;
}
.coupon_input_field {
    display: flex !important;
    gap: 8px;
    margin-top: 15px;
    padding: 0 !important;
    border: none !important;
}
.coupon_input_field .coupon_code {
    flex: 1;
    border: 1.5px solid var(--wtc-sand, #e9e0d2);
    border-radius: 10px;
    padding: 8px 12px;
    font-size: 13px;
}
.coupon_input_field .apply-coupon {
    background: var(--main-color-one, #12504A);
    color: #ffffff;
    font-weight: 700;
    border: none;
    border-radius: 10px;
    padding: 8px 16px;
    font-size: 13px;
    cursor: pointer;
    transition: background 0.2s ease;
}
.coupon_input_field .apply-coupon:hover {
    background: var(--wtc-teal, #116C61);
}

/* Multi-step Navigation Buttons */
.stepForm_btn {
    background: var(--main-color-two, #C0552F) !important;
    color: #ffffff !important;
    border: none !important;
    font-weight: 700 !important;
    padding: 12px 24px !important;
    border-radius: 10px !important;
    transition: all 0.25s ease !important;
    box-shadow: 0 4px 12px rgba(192, 85, 47, 0.2) !important;
    cursor: pointer;
}
.stepForm_btn:hover {
    background: var(--wtc-clay, #DE6E4B) !important;
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(192, 85, 47, 0.28) !important;
}
.stepForm_btn__previous {
    background: transparent !important;
    color: var(--wtc-teal) !important;
    border: 1.5px solid var(--wtc-sand, #e9e0d2) !important;
    font-weight: 700 !important;
    padding: 11px 24px !important;
    border-radius: 10px !important;
    transition: all 0.25s ease !important;
    cursor: pointer;
}
.stepForm_btn__previous:hover {
    border-color: var(--wtc-teal) !important;
    background: var(--wtc-teal-soft, #dcefe9) !important;
}

/* ==================================================================
   14. WTC Custom Video Player Styles
   ================================================================== */
.wtc-video-container {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #000000;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 12px 30px rgba(18, 80, 74, 0.2);
    border: 1px solid var(--wtc-sand, #e9e0d2);
}
.wtc-video-container iframe,
.wtc-video-container video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
    border: none;
}
.wtc-video-container.tiktok-container {
    aspect-ratio: 9 / 16;
    max-width: 330px;
    margin: 0 auto;
    border-radius: 16px;
    box-shadow: 0 12px 30px rgba(18, 80, 74, 0.25);
}
.wtc-native-player {
    outline: none;
}

/* Dynamic centered video modal */
#exampleModalvideo_modal .modal-content {
    background: #000000;
    border: 1px solid var(--wtc-sand, #e9e0d2);
    border-radius: 20px;
    overflow: hidden;
}
#exampleModalvideo_modal .modal-body {
    padding: 0;
    background: #000000;
}
#exampleModalvideo_modal .modal-footer {
    background: #0d1e1c;
    border-top: 1px solid rgba(233, 224, 210, 0.1);
    padding: 12px 20px;
}
#exampleModalvideo_modal .modal-footer .btn-secondary {
    background: transparent;
    color: var(--wtc-sand);
    border: 1px solid rgba(233, 224, 210, 0.2);
    border-radius: 8px;
    padding: 6px 16px;
    font-weight: 600;
    transition: all 0.2s ease;
}
#exampleModalvideo_modal .modal-footer .btn-secondary:hover {
    background: rgba(233, 224, 210, 0.1);
    border-color: var(--wtc-sand);
}

/* Provider Mode & Verification Badges */
.provider-mode-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    font-size: 11px;
    font-weight: 600;
    border-radius: 30px;
    background-color: var(--wtc-teal-deep);
    color: #ffffff;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.provider-mode-badge.mobile {
    background-color: var(--wtc-clay-cta);
}
.seller-verified-badge {
    font-size: 1.1rem;
    color: var(--main-color-one);
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
}
.seller-verified-badge i {
    color: var(--main-color-one) !important;
}

/* ==================================================================
   13. Premium Mobile Layout & Responsiveness Hardening (Combined)
   ================================================================== */

@media only screen and (max-width: 991.98px) {
    /* Align mobile header items symmetrically via modern Flexbox layout */
    .navbar-area .nav-container {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding: 12px 16px !important;
        min-height: 60px !important;
    }
    
    .navbar-area .nav-container .responsive-mobile-menu {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        width: 100% !important;
        position: relative !important;
    }
    
    /* Remove off-center absolute offsets from the mobile toggler */
    .navbar-area .nav-container .responsive-mobile-menu .navbar-toggler {
        position: static !important;
        transform: none !important;
        margin: 0 !important;
        padding: 8px 10px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    /* Center and push user account menu between logo and hamburger */
    .navbar-area .nav-container .onlymobile-device-account-navbar {
        display: block !important;
        margin: 0 16px 0 auto !important;
    }
    
    .navbar-area .nav-container .onlymobile-device-account-navbar-flex {
        position: static !important;
        transform: none !important;
        display: flex !important;
        align-items: center !important;
    }

    /* Hide the desktop right-menu at <=991px to prevent double logins */
    .navbar-area .nav-container > .nav-right-content {
        display: none !important;
    }
    
    /* Mobile drawer menu brand formatting (override off-brand blue #F1F6FF) */
    .navbar-area .nav-container .navbar-collapse.show .navbar-nav,
    .navbar-area .nav-container .navbar-collapse .navbar-nav {
        background: var(--wtc-cloud, #f5f8f6) !important;
        border-radius: 16px !important;
        padding: 16px !important;
        margin-top: 15px !important;
        border: 1.5px solid var(--wtc-sand, #e9e0d2) !important;
        box-shadow: 0 12px 30px -10px rgba(18, 80, 74, 0.16) !important;
    }
    
    .navbar-area .nav-container .navbar-collapse .navbar-nav li a {
        padding: 10px 14px !important;
        border-radius: 8px !important;
        color: var(--wtc-teal-deep, #12504a) !important;
        font-weight: 600 !important;
        transition: background-color 0.2s ease !important;
    }
    
    .navbar-area .nav-container .navbar-collapse .navbar-nav li a:hover {
        background-color: var(--wtc-teal-soft, #dcefe9) !important;
    }

    /* Logged in mobile style: avatar-only on mobile menu */
    .onlymobile-device-account-navbar .info-bar-item-two .accounts.loggedin {
        display: none !important;
    }
    
    .login-account-new {
        display: inline-flex !important;
        align-items: center !important;
        gap: 10px !important;
    }
    
    .login-account-new .login-link,
    .login-account-new .join-btn {
        white-space: nowrap !important;
    }
}

/* Small phones: compact logo + short join label so the header fits 360px */
@media only screen and (max-width: 575.98px) {
    .navbar-area .nav-container .logo-wrapper .logo img {
        max-width: 112px !important;
    }
    .login-account-new .login-link {
        font-size: 13px !important;
    }
    .login-account-new .login-link .login-icon {
        width: 16px !important;
        height: 16px !important;
    }
    .login-account-new .join-btn {
        padding: 7px 14px !important;
        font-size: 12.5px !important;
    }
    .join-label--full {
        display: none !important;
    }
    .join-label--short {
        display: inline !important;
    }
}
.join-label--short {
    display: none;
}

/* Ultra-narrow phones (Galaxy Fold cover 280px, iPhone SE 1st gen 320px):
   icon-only login + compact logo so the hamburger stays on-screen */
@media only screen and (max-width: 349.98px) {
    .navbar-area .nav-container {
        padding: 12px 10px !important;
    }
    .navbar-area .nav-container .logo-wrapper .logo img {
        max-width: 92px !important;
    }
    .navbar-area .nav-container .onlymobile-device-account-navbar {
        margin: 0 8px 0 auto !important;
    }
    /* 3-class selectors: must outrank the equal-!important inline <style> in
       user-menu.blade.php, which loads after this sheet */
    .navbar-area .nav-container .login-account-new {
        gap: 8px !important;
    }
    .navbar-area .nav-container .login-account-new .login-link {
        font-size: 0 !important; /* hides "Log in" text, keeps the icon + accessible name */
    }
    .navbar-area .nav-container .login-account-new .login-link::after {
        display: none !important;
    }
    .navbar-area .nav-container .login-account-new .login-link .login-icon {
        width: 20px !important;
        height: 20px !important;
    }
    .navbar-area .nav-container .login-account-new .join-btn {
        padding: 7px 12px !important;
    }
}

/* Neutralize Fiverr-green (#1DBF73) input/button outline/focus states */
.form--control:focus,
.form-control:focus,
.signup-forms .single-signup .form--control:focus,
.single-forms .form--control:focus {
    border-color: var(--main-color-one, #12504A) !important;
    box-shadow: 0 0 0 4px rgba(18, 80, 74, 0.15) !important;
}

/* ==================================================================
   14. Hero Autocomplete Search Dropdown (#all_search_result) Refactoring
   ================================================================== */

/* Correct relative parent positioning for search results anchor */
.wtc-hero__content {
    position: relative !important;
}

#all_search_result {
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: 640px !important;
    background-color: transparent !important;
    padding: 0 !important;
    margin-top: 8px !important;
    z-index: 99999 !important;
}

/* Dropdown suggestion box formatting */
#all_search_result .card {
    background: var(--wtc-cloud, #f5f8f6) !important;
    border: 1.5px solid var(--wtc-sand, #e9e0d2) !important;
    border-radius: 16px !important;
    box-shadow: 0 15px 35px -10px rgba(18, 80, 74, 0.25) !important;
    overflow: hidden !important;
    margin-top: 0 !important;
}

#all_search_result .card-body {
    padding: 8px !important;
}

/* Individual suggestion items as premium horizontal rows */
#all_search_result .search_servie_image_content {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    padding: 10px 14px !important;
    border-radius: 10px !important;
    transition: background-color 0.2s ease, transform 0.2s ease !important;
    color: var(--wtc-teal-deep, #12504a) !important;
    text-decoration: none !important;
}

#all_search_result .search_servie_image_content:hover {
    background-color: var(--wtc-teal-soft, #dcefe9) !important;
    transform: translateX(4px) !important;
}

#all_search_result .search_thumb {
    width: 42px !important;
    height: 42px !important;
    border-radius: 8px !important;
    background-size: cover !important;
    background-position: center !important;
    flex-shrink: 0 !important;
    border: 1px solid var(--wtc-sand, #e9e0d2) !important;
}

#all_search_result .search-text-item {
    font-family: var(--body-font) !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: var(--wtc-teal-deep, #12504a) !important;
    line-height: 1.4 !important;
}

#all_search_result .search-text-item br {
    display: none !important; /* Single line horizontal flow */
}

#all_search_result .search-text-item .provider-mode-badge {
    margin-left: 8px !important;
    vertical-align: middle !important;
    font-size: 9px !important;
    padding: 2px 8px !important;
}

/* Select2 overrides inside the hero search bar */
.wtc-search .select2-container--default .select2-selection--single {
    background-color: transparent !important;
    border: none !important;
    height: auto !important;
    padding: 12px 0 !important;
}

.wtc-search .select2-container--default .select2-selection--single .select2-selection__rendered {
    color: #17302C !important;
    font-family: var(--body-font) !important;
    font-size: 15px !important;
    padding-left: 0 !important;
    padding-right: 20px !important;
}

.wtc-search .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 100% !important;
    top: 0 !important;
    right: 0 !important;
}

.wtc-search .select2-container {
    width: 100% !important;
}

/* R2 · Floating live-chat pill + back-to-top (≤767px)
   The full-width "Login To Chat" pill sat centre-bottom and covered CTAs,
   form buttons and the booking wizard's Previous/Next. Collapse it to an
   icon bubble stacked with back-to-top in the bottom-right corner. */
@media only screen and (max-width: 767.98px) {
    .open-button {
        font-size: 0 !important;      /* hides the text node, keeps the icon */
        width: 48px !important;
        height: 48px !important;
        padding: 0 !important;
        border-radius: 50% !important;
        right: 14px !important;
        /* Sits above the five-tab bar (§APP, 2026-07-23). At the old 14px it
           landed squarely on the Profile tab and covered it completely on the
           720x1600 test handset. */
        bottom: calc(64px + 14px + env(safe-area-inset-bottom, 0px)) !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        box-shadow: 0 10px 24px -8px rgba(18, 80, 74, 0.45);
    }
    .open-button i {
        font-size: 22px !important;
        margin: 0 !important;
    }
    /* the in-card provider chat button reuses .open-button — keep it a
       normal labelled button */
    .single-packages .open-button {
        position: unset !important;
        width: 100% !important;
        height: auto !important;
        font-size: 15px !important;
        padding: 12px 20px !important;
        border-radius: 8px !important;
        box-shadow: none;
    }
    .single-packages .open-button i { font-size: 18px !important; }

    .back-to-top {
        right: 17px !important;
        /* stacked above the chat bubble, which itself now clears the tab bar */
        bottom: calc(64px + 72px + env(safe-area-inset-bottom, 0px)) !important;
        width: 42px !important;
        height: 42px !important;
        line-height: 42px !important;
        font-size: 20px !important;
    }
}

/* R3 · Hero background decor (≤767px)
   The clay dot and rotating arcs are positioned for the desktop canvas and
   collided with the search chips / content on phones. */
@media only screen and (max-width: 767.98px) {
    .wtc-hero__bg .dot,
    .wtc-hero__bg .arc { display: none !important; }
}

/* R4 · Mid-word breaking on service details
   style.css sets word-break:break-all on description copy → "firewood-heat
   ed". Break only when a word genuinely overflows. */
.details-content-tab .details-tap-para,
.details-content-tab p,
.new_serviceDetails p {
    word-break: normal !important;
    overflow-wrap: break-word !important;
}

/* R5 · Service-list filter drawer (≤1199px)
   The col-xl-3 filter column stacks above results on tablet/mobile, pushing
   services two screens down. Collapse it behind a Filters toggle (button is
   injected in service-list-one.blade.php). */
.wtc-filter-toggle { display: none; }
@media only screen and (max-width: 1199.98px) {
    .wtc-filter-toggle {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        background: #fff;
        border: 1px solid var(--wtc-sand, #E9E0D2);
        border-radius: 12px;
        padding: 14px 18px;
        margin-bottom: 10px;
        font-family: var(--heading-font), sans-serif;
        font-weight: 700;
        font-size: 16px;
        color: var(--main-color-one, #12504A);
        cursor: pointer;
    }
    .wtc-filter-toggle i {
        font-size: 20px;
        transition: transform 0.25s ease;
    }
    .wtc-filter-toggle.is-open i { transform: rotate(180deg); }
    #search_service_list_form .new_serviceDetails__side { display: none; }
    #search_service_list_form .new_serviceDetails__side.is-open { display: block; }
}

/* R6 · Price range inputs clipped their own values ("150000" cut off):
   19px digits inside a ~60px box. Let the fields flex and size the digits
   to fit six-figure UGX amounts. */
.price-input .field { min-width: 0; flex: 1 1 auto; }
.price-input .min_price_range,
.price-input .max_price_range { flex: 1 1 auto; min-width: 0; }
.price-input .min_price_range input,
.price-input .max_price_range input {
    width: 100% !important;
    min-width: 0 !important;
    font-size: 15px !important;
}

/* R7 · Safety net: every dashboard/table wrapper scrolls instead of
   forcing page-level horizontal scroll on phones */
.dash-single-inner,
.dashboard_table__main,
.table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* R8 · Service-details tab pills: stop "About Provider" wrapping into a
   two-line pill; let the row scroll on very small screens instead */
@media only screen and (max-width: 575.98px) {
    .details-content-tab .nav-tabs,
    .tab-button-area ul {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .details-content-tab .nav-tabs .nav-link,
    .tab-button-area ul li a { white-space: nowrap; }
}

/* R9 · Cookie banner — brand the consent dialog (plugin CSS hardcodes
   Quicksand + off-palette button borders) */
#gdpr-cookie-message {
    border: 1px solid var(--wtc-sand, #E9E0D2);
    border-radius: 16px !important;
    box-shadow: 0 18px 40px -18px rgba(18, 80, 74, 0.35) !important;
}
#gdpr-cookie-message h4,
#gdpr-cookie-message h5 {
    font-family: var(--heading-font), sans-serif !important;
    color: var(--main-color-one, #12504A) !important;
}
#gdpr-cookie-message p,
#gdpr-cookie-message ul,
#gdpr-cookie-message a {
    font-family: var(--body-font), sans-serif !important;
    color: #52635E !important;
}
#gdpr-cookie-message button,
button#ihavecookiesBtn {
    font-family: var(--body-font), sans-serif !important;
    border-radius: 999px !important;
    font-weight: 600 !important;
}
#gdpr-cookie-message button#gdpr-cookie-accept {
    background: var(--main-color-two, #C0552F) !important;
    border: 1px solid var(--main-color-two, #C0552F) !important;
    color: #fff !important;
}
#gdpr-cookie-message button#gdpr-cookie-advanced,
#gdpr-cookie-message button#gdpr-cookie-more,
#gdpr-cookie-message button#gdpr-cookie-decline {
    background: #fff !important;
    border: 1px solid var(--wtc-sand, #E9E0D2) !important;
    color: var(--main-color-one, #12504A) !important;
}

/* R10 · Page-builder titles with baked-in demo colors
   Widget content stores inline spans like <span style="color:rgb(29,191,115)">
   (Fiverr green on the pricing title). Force them back to the heading color —
   stylesheet !important beats inline styles. */
.section-title .title span[style*="color"],
h1 span[style*="color"],
h2 span[style*="color"],
h3 span[style*="color"] {
    color: inherit !important;
}

/* R11 · Subscription plan cards — make the Buy Now action visible
   (0.8px ghost outline was nearly invisible on the gray card) */
.pricing-table-10 .cmn-btn.btn-outline-1 {
    border: 1.5px solid var(--main-color-one, #12504A) !important;
    color: var(--main-color-one, #12504A) !important;
    border-radius: 999px !important;
    font-weight: 600;
    opacity: 1 !important; /* theme dims it to 0.4 — the real "invisible button" culprit */
}
.pricing-table-10 .cmn-btn.btn-outline-1:hover,
.pricing-table-10 .cmn-btn.btn-outline-1:focus-visible {
    background: var(--main-color-two, #C0552F) !important;
    border-color: var(--main-color-two, #C0552F) !important;
    color: #fff !important;
}

/* R12 · Stock Bootstrap blues → brand
   (modal Buy Now buttons, alert-info onboarding checklist, seller order
   status chips use default #0d6efd / baby-blue surfaces) */
.btn-primary {
    background-color: var(--main-color-one, #12504A) !important;
    border-color: var(--main-color-one, #12504A) !important;
}
.btn-primary:hover,
.btn-primary:focus {
    background-color: var(--main-color-two, #C0552F) !important;
    border-color: var(--main-color-two, #C0552F) !important;
}
.alert-info {
    background-color: var(--wtc-teal-soft, #DCEFE9) !important;
    border-color: var(--wtc-mint, #5DCAA5) !important;
    color: var(--main-color-one, #12504A) !important;
}
.alert-info a { color: var(--main-color-two, #C0552F) !important; }

/* Seller order status chips (baby-blue pills on /seller/orders) */
.paymentGateway_add__item_seller_order.custom_radio__single_seller_order {
    background: var(--wtc-cloud, #F5F8F6) !important;
    border: 1px solid var(--wtc-sand, #E9E0D2) !important;
}
.paymentGateway_add__item_seller_order.custom_radio__single_seller_order label {
    color: var(--main-color-one, #12504A) !important;
}

/* ============================================================
   R13 · Trust strip (frontend/partials/trust-strip.blade.php)
   Marketing strip for verification / tracking / payments / reviews.
   ============================================================ */
.wtc-trust-strip {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    padding: 18px 20px;
    margin: 24px 0;
    background: var(--section-bg-2, #F6F1E7);
    border: 1px solid var(--wtc-sand, #E9E0D2);
    border-radius: 12px;
}
.wtc-trust-item {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}
.wtc-trust-item > i {
    font-size: 28px;
    color: var(--main-color-two, #C0552F);
    flex-shrink: 0;
}
.wtc-trust-item strong {
    display: block;
    font-size: 14px;
    color: var(--heading-color, #12504A);
    line-height: 1.3;
}
.wtc-trust-item span {
    display: block;
    font-size: 12px;
    color: var(--body-color, #5b6b68);
    line-height: 1.35;
}
@media (max-width: 991px) {
    .wtc-trust-strip { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
    .wtc-trust-strip { grid-template-columns: 1fr; gap: 12px; padding: 14px 16px; }
}

/* ============================================================
   R14 · Bundle offers (frontend/partials/service-bundles.blade.php)
   ============================================================ */
.wtc-bundle-offers {
    margin: 24px 0;
    padding: 18px 20px;
    background: var(--section-bg-2, #F6F1E7);
    border: 1px solid var(--wtc-sand, #E9E0D2);
    border-radius: 12px;
}
.wtc-bundle-offers__title {
    font-size: 18px;
    color: var(--heading-color, #12504A);
    margin-bottom: 14px;
}
.wtc-bundle-offers__grid {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.wtc-bundle-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    padding: 14px 16px;
    background: #fff;
    border: 1px solid var(--wtc-sand, #E9E0D2);
    border-radius: 10px;
}
.wtc-bundle-card__meta {
    display: block;
    font-size: 13px;
    color: var(--body-color, #5b6b68);
    margin-top: 2px;
}
.wtc-bundle-card__badge {
    display: inline-block;
    margin-top: 6px;
    padding: 2px 10px;
    font-size: 12px;
    font-weight: 700;
    color: #fff;
    background: var(--main-color-two, #C0552F);
    border-radius: 20px;
}
.wtc-bundle-card__buy {
    display: flex;
    align-items: center;
    gap: 12px;
}
.wtc-bundle-card__price {
    font-weight: 800;
    font-size: 18px;
    color: var(--heading-color, #12504A);
}
.wtc-bundle-offers__note {
    display: block;
    margin-top: 10px;
    color: var(--body-color, #5b6b68);
}
@media (max-width: 480px) {
    .wtc-bundle-card { flex-direction: column; align-items: flex-start; }
    .wtc-bundle-card__buy { width: 100%; justify-content: space-between; }
}
/* Real app screenshots uploaded through Page Builder > Banner: 01.
   Raw portrait captures are framed here, while legacy composed mockups remain
   untouched until an administrator uploads replacements. */
.wtc-app-choice {
    position: relative;
    min-width: 0;
    margin: 0;
    padding: 10px;
    border: 1px solid rgba(17, 108, 97, .12);
    border-radius: 24px;
    background: rgba(255, 255, 255, .5);
    box-shadow: 0 22px 50px -38px rgba(10, 71, 64, .48);
}

.wtc-app-choice__input {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    opacity: 0;
}

.wtc-app-choice__tabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    padding: 5px;
    border: 1px solid rgba(17, 108, 97, .1);
    border-radius: 17px;
    background: rgba(226, 241, 236, .66);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .88);
}

.wtc-app-choice__tab {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    margin: 0;
    padding: 13px 14px;
    border: 1px solid transparent;
    border-radius: 12px;
    color: var(--heading-color, #12504a);
    cursor: pointer;
    transform: translateY(0);
    transition: color .24s ease, background-color .24s ease, border-color .24s ease,
        box-shadow .24s ease, transform .24s ease;
}

.wtc-app-choice__tab:hover {
    color: var(--main-color-one, #116c61);
    transform: translateY(-1px);
}

.wtc-app-choice__tab > i {
    display: inline-grid;
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
    place-items: center;
    border: 1px solid rgba(17, 108, 97, .08);
    border-radius: 12px;
    background: rgba(255, 255, 255, .72);
    color: var(--main-color-one, #116c61);
    font-size: 21px;
    box-shadow: 0 8px 18px -14px rgba(17, 108, 97, .72);
    transition: color .24s ease, background-color .24s ease, border-color .24s ease,
        box-shadow .24s ease, transform .24s ease;
}

.wtc-app-choice__tab span,
.wtc-app-choice__tab strong,
.wtc-app-choice__tab small {
    display: block;
    min-width: 0;
}

.wtc-app-choice__tab strong {
    font-size: 15px;
    font-weight: 750;
    line-height: 1.25;
}

.wtc-app-choice__tab small {
    margin-top: 3px;
    color: var(--body-color, #5b6b68);
    font-size: 11px;
    line-height: 1.3;
}

.wtc-app-choice__input--client:checked ~ .wtc-app-choice__tabs .wtc-app-choice__tab--client,
.wtc-app-choice__input--provider:checked ~ .wtc-app-choice__tabs .wtc-app-choice__tab--provider {
    border-color: rgba(17, 108, 97, .2);
    background: #fff;
    box-shadow: 0 12px 25px -18px rgba(18, 80, 74, .58), inset 0 -3px 0 var(--main-color-one, #116c61);
    transform: translateY(-1px);
}

.wtc-app-choice__input--client:checked ~ .wtc-app-choice__tabs .wtc-app-choice__tab--client > i,
.wtc-app-choice__input--provider:checked ~ .wtc-app-choice__tabs .wtc-app-choice__tab--provider > i {
    border-color: var(--main-color-one, #116c61);
    background: var(--main-color-one, #116c61);
    color: #fff;
    box-shadow: 0 10px 22px -13px rgba(17, 108, 97, .85);
    transform: scale(1.05) rotate(-3deg);
}

.wtc-app-choice__input--client:focus-visible ~ .wtc-app-choice__tabs .wtc-app-choice__tab--client,
.wtc-app-choice__input--provider:focus-visible ~ .wtc-app-choice__tabs .wtc-app-choice__tab--provider {
    outline: 3px solid rgba(192, 85, 47, .28);
    outline-offset: 2px;
}

.wtc-app-choice__panels {
    margin-top: 16px;
    padding: 0 3px 2px;
}

.wtc-app-choice__panel {
    display: none;
}

.wtc-app-choice__input--client:checked ~ .wtc-app-choice__panels .wtc-app-choice__panel--client,
.wtc-app-choice__input--provider:checked ~ .wtc-app-choice__panels .wtc-app-choice__panel--provider {
    display: block;
    animation: wtc-app-panel-in .34s cubic-bezier(.22, .8, .3, 1) both;
}

@keyframes wtc-app-panel-in {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.wtc-app-choice__panel-title {
    margin: 0 0 11px;
    color: var(--heading-color, #12504a);
    font-size: 16px;
    font-weight: 750;
    letter-spacing: -.01em;
}

.wtc-app-download-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.wtc-app-download {
    display: flex;
    align-items: center;
    position: relative;
    gap: 10px;
    min-width: 0;
    min-height: 68px;
    padding: 11px 12px;
    overflow: hidden;
    border: 1px solid rgba(17, 108, 97, .18);
    border-radius: 15px;
    background: #fff;
    color: var(--heading-color, #12504a);
    text-decoration: none !important;
    box-shadow: 0 12px 24px -24px rgba(18, 80, 74, .65);
    transform: translateY(0);
    transition: color .24s ease, background-color .24s ease, transform .24s ease,
        border-color .24s ease, box-shadow .24s ease;
}

a.wtc-app-download:hover,
a.wtc-app-download:focus-visible {
    border-color: var(--main-color-one, #116c61);
    color: var(--heading-color, #12504a);
    background: rgba(246, 252, 250, .98);
    box-shadow: 0 18px 32px -22px rgba(18, 80, 74, .68);
    transform: translateY(-4px);
}

a.wtc-app-download:active {
    box-shadow: 0 10px 18px -18px rgba(18, 80, 74, .58);
    transform: translateY(-1px) scale(.985);
}

a.wtc-app-download:focus-visible {
    outline: 3px solid rgba(192, 85, 47, .32);
    outline-offset: 3px;
}

.wtc-app-download > i:first-child {
    display: inline-grid;
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
    place-items: center;
    border-radius: 11px;
    background: rgba(220, 239, 233, .8);
    color: var(--main-color-one, #116c61);
    font-size: 23px;
    transition: color .24s ease, background-color .24s ease, transform .24s ease;
}

a.wtc-app-download:hover > i:first-child,
a.wtc-app-download:focus-visible > i:first-child {
    background: var(--main-color-one, #116c61);
    color: #fff;
    transform: scale(1.06) rotate(-4deg);
}

.wtc-app-download span,
.wtc-app-download small,
.wtc-app-download strong {
    display: block;
    min-width: 0;
}

.wtc-app-download small {
    margin-bottom: 3px;
    color: var(--body-color, #5b6b68);
    font-size: 9px;
    font-weight: 650;
    line-height: 1.15;
    letter-spacing: .035em;
    text-transform: uppercase;
}

.wtc-app-download strong {
    font-size: 12px;
    font-weight: 750;
    line-height: 1.2;
}

.wtc-app-download__external {
    margin-left: auto;
    font-size: 12px !important;
    opacity: .56;
    transition: opacity .24s ease, transform .24s ease;
}

.wtc-app-download.has-store-badge {
    justify-content: space-between;
}

.wtc-app-store-badge {
    display: block;
    width: min(108px, calc(100% - 48px));
    height: auto;
    max-height: 38px;
    object-fit: contain;
    object-position: left center;
}

.wtc-app-download__availability {
    display: inline-flex !important;
    flex: 0 0 auto;
    width: auto !important;
    margin: 0 !important;
    padding: 4px 7px !important;
    border-radius: 999px;
    background: rgba(192, 85, 47, .1) !important;
    color: var(--main-color-two, #c0552f) !important;
    font-size: 8px !important;
    font-weight: 750 !important;
    letter-spacing: .02em !important;
    line-height: 1.1 !important;
    text-transform: uppercase;
}

a.wtc-app-download:hover .wtc-app-download__external,
a.wtc-app-download:focus-visible .wtc-app-download__external {
    opacity: 1;
    transform: translate(2px, -2px);
}

.wtc-app-download.is-unavailable {
    width: 100%;
    font: inherit;
    text-align: left;
    border-color: rgba(17, 108, 97, .14);
    background: rgba(255, 255, 255, .56);
    box-shadow: none;
    color: #657773;
    cursor: pointer;
}

button.wtc-app-download.is-unavailable:hover,
button.wtc-app-download.is-unavailable:focus-visible {
    border-color: rgba(192, 85, 47, .32);
    background: rgba(255, 255, 255, .86);
    box-shadow: 0 12px 24px -22px rgba(18, 80, 74, .52);
    color: var(--heading-color, #12504a);
    transform: translateY(-2px);
}

button.wtc-app-download.is-unavailable:focus-visible {
    outline: 3px solid rgba(192, 85, 47, .28);
    outline-offset: 3px;
}

.wtc-app-download.is-unavailable > i:first-child {
    background: rgba(224, 233, 230, .72);
    color: #73827f;
}

.wtc-app-download.is-unavailable small {
    display: inline-flex;
    width: fit-content;
    padding: 3px 6px;
    border-radius: 999px;
    background: rgba(192, 85, 47, .1);
    color: var(--main-color-two, #c0552f);
    letter-spacing: .02em;
}

.wtc-app-choice__security-note {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 14px 0 0;
    padding: 9px 11px;
    border-radius: 11px;
    background: rgba(220, 239, 233, .48);
    color: var(--body-color, #5b6b68);
    font-size: 11px;
    line-height: 1.45;
}

.wtc-app-choice__security-note i {
    margin-top: 2px;
    color: var(--main-color-one, #116c61);
    font-size: 14px;
}

.wtc-app-download-feedback {
    position: absolute;
    z-index: 4;
    right: 10px;
    bottom: 10px;
    left: 10px;
    display: flex;
    align-items: center;
    gap: 9px;
    min-height: 38px;
    padding: 9px 12px;
    border: 1px solid rgba(255, 255, 255, .15);
    border-radius: 11px;
    background: var(--heading-color, #12504a);
    box-shadow: 0 18px 32px -20px rgba(8, 52, 48, .82);
    color: #fff;
    font-size: 11px;
    font-weight: 650;
    line-height: 1.35;
    opacity: 0;
    pointer-events: none;
    transform: translateY(8px) scale(.985);
    transition: opacity .2s ease, transform .24s cubic-bezier(.22, .8, .3, 1);
}

.wtc-app-download-feedback.is-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.wtc-app-download-feedback i {
    flex: 0 0 auto;
    color: #9fe0d2;
    font-size: 17px;
}

@media (prefers-reduced-motion: reduce) {
    .wtc-app-choice__tab,
    .wtc-app-choice__tab > i,
    .wtc-app-download,
    .wtc-app-download > i:first-child,
    .wtc-app-download__external {
        transition-duration: .01ms !important;
    }

    .wtc-app-download-feedback {
        transition-duration: .01ms !important;
    }

    .wtc-app-choice__input--client:checked ~ .wtc-app-choice__panels .wtc-app-choice__panel--client,
    .wtc-app-choice__input--provider:checked ~ .wtc-app-choice__panels .wtc-app-choice__panel--provider {
        animation: none;
    }
}

@media (max-width: 575.98px) {
    .wtc-app-choice__tabs,
    .wtc-app-download-grid {
        grid-template-columns: 1fr;
    }

    .wtc-app-choice__tab {
        padding: 10px 12px;
    }

    .wtc-app-choice {
        padding: 8px;
        border-radius: 19px;
    }

    .wtc-app-choice__panels {
        padding-inline: 1px;
    }
}

.new_app__thumb .wtc-phone-frame {
    position: relative;
    width: clamp(210px, 17vw, 330px);
    aspect-ratio: 9 / 19.5;
    padding: 10px;
    overflow: hidden;
    border: 3px solid #1b2529;
    border-radius: clamp(30px, 3vw, 52px);
    background: #0c1417;
    box-shadow: 0 24px 55px rgba(10, 47, 44, .22), inset 0 0 0 1px rgba(255,255,255,.22);
}

.new_app__thumb .wtc-phone-frame__screen {
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: clamp(22px, 2.4vw, 42px);
    background: #fff;
}

.new_app__thumb .wtc-phone-frame__screen img,
.new_app__thumb img.wtc-app-screenshot {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
}

.new_app__thumb .wtc-phone-frame__speaker {
    position: absolute;
    z-index: 2;
    top: 17px;
    left: 50%;
    width: 34%;
    height: 18px;
    border-radius: 0 0 14px 14px;
    background: #0c1417;
    transform: translateX(-50%);
}

.new_app__thumb .wtc-phone-frame--rear {
    transform: translate(12%, 6%) scale(.88);
    transform-origin: bottom right;
}

.new_app__thumb .wtc-phone-frame--front {
    position: relative;
    z-index: 2;
}

@media (max-width: 767.98px) {
    .new_app__thumb {
        justify-content: center;
    }

    .new_app__thumb .wtc-phone-frame {
        width: min(45vw, 260px);
    }
}


/* ------------------------------------------------------------------
   H1. Home hub - Jiji-style category rail + listings (BrowseCategoryThree,
   pagebuilder view browse-category/category-listings-hub). Sidebar of round
   category images on the left, compact listing cards on the right.
------------------------------------------------------------------ */
.wtc-homehub__grid {
    display: grid;
    grid-template-columns: 320px minmax(0, 1fr);
    gap: 24px;
    align-items: start;
}

.wtc-homehub__rail {
    background: #fff;
    border: 1px solid var(--wtc-sand);
    border-radius: 12px;
    padding: 6px 0 4px;
    box-shadow: 0 2px 10px rgba(23, 48, 44, .05);
}

.wtc-homehub__rail-title {
    font-size: 18px;
    margin: 10px 16px 4px;
    color: var(--wtc-ink);
}

.wtc-homehub__cats {
    list-style: none;
    margin: 0;
    padding: 0;
    /* no overflow clamp: the subcategory flyout is position:absolute and an
       overflow container would clip it (only ~8 categories, no scroll needed) */
}

.wtc-homehub__cats > li {
    position: relative;
}

/* Subcategory flyout: opens on hover (no click needed) and stays open while
   the pointer is over the row OR the panel — the panel is a child of the li,
   overlaps it by 6px (no dead gap), and hides with a short linger delay so a
   diagonal mouse path doesn't dismiss it. Desktop only. */
.wtc-homehub__fly {
    position: absolute;
    left: calc(100% - 6px);
    top: -6px;
    width: 300px;
    background: #fff;
    border: 1px solid var(--wtc-sand);
    border-radius: 12px;
    box-shadow: 0 14px 36px rgba(23, 48, 44, .16);
    padding: 6px 0 8px;
    z-index: 40;
    opacity: 0;
    visibility: hidden;
    transform: translateX(6px);
    transition: opacity .18s ease .25s, transform .18s ease .25s, visibility 0s linear .43s;
}

@media (min-width: 992px) {
    .wtc-homehub__cats > li:hover > .wtc-homehub__fly {
        opacity: 1;
        visibility: visible;
        transform: none;
        transition-delay: .06s, .06s, .06s;
    }

    .wtc-homehub__cats > li:hover > .wtc-homehub__cat {
        background: var(--wtc-teal-soft);
    }
}

.wtc-homehub__fly-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 10px 16px;
    font-weight: 700;
    font-size: 14.5px;
    color: var(--wtc-teal-deep);
    border-bottom: 1px solid var(--wtc-cloud);
}

.wtc-homehub__fly-title:hover {
    color: var(--wtc-clay-cta);
}

.wtc-homehub__fly-list {
    list-style: none;
    margin: 0;
    padding: 4px 0 0;
    max-height: 420px;
    overflow-y: auto;
}

.wtc-homehub__fly-list a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 16px;
    font-size: 14px;
    color: var(--wtc-ink);
}

.wtc-homehub__fly-list a:hover {
    background: var(--wtc-teal-soft);
    color: var(--wtc-teal-deep);
}

.wtc-homehub__fly-count {
    color: #6f8681;
    font-size: 12.5px;
}

@media (max-width: 991.98px) {
    .wtc-homehub__fly {
        display: none;
    }
}

.wtc-homehub__cat {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    border-bottom: 1px solid var(--wtc-cloud);
}

.wtc-homehub__cats li:last-child .wtc-homehub__cat {
    border-bottom: 0;
}

.wtc-homehub__cat:hover {
    background: var(--wtc-teal-soft);
}

.wtc-homehub__cat-img {
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--wtc-teal-soft);
}

.wtc-homehub__cat-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Icon fallback for categories without photography — centred in the same
   circle the photo would fill, so the rail stays visually even. */
.wtc-homehub__cat-img {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.wtc-homehub__cat-img i {
    font-size: 22px;
    line-height: 1;
    color: var(--wtc-teal-deep, #17302c);
}

.wtc-homehub__cat-name {
    display: block;
    font-weight: 600;
    color: var(--wtc-ink);
    font-size: 15px;
    line-height: 1.25;
}

.wtc-homehub__cat-count {
    display: block;
    color: #6f8681;
    font-size: 13px;
    margin-top: 2px;
}

.wtc-homehub__cat-arrow {
    margin-left: auto;
    color: #9fb3ae;
    font-size: 13px;
}

.wtc-homehub__all {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 12px 16px 8px;
    font-weight: 600;
    color: var(--wtc-teal);
}

.wtc-homehub__heading {
    font-size: 24px;
    margin: 4px 0 18px;
    color: var(--wtc-ink);
}

.wtc-homehub__cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 16px;
}

.wtc-homehub__card {
    display: block;
    background: #fff;
    border: 1px solid var(--wtc-sand);
    border-radius: 12px;
    overflow: hidden;
    transition: box-shadow .2s ease, transform .2s ease;
}

.wtc-homehub__card:hover {
    box-shadow: 0 8px 24px rgba(23, 48, 44, .10);
    transform: translateY(-2px);
}

.wtc-homehub__card-img {
    display: block;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--wtc-cloud);
}

.wtc-homehub__card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.wtc-homehub__card-body {
    display: block;
    padding: 10px 12px 12px;
}

.wtc-homehub__card-title {
    color: var(--wtc-ink);
    font-size: 14.5px;
    font-weight: 600;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.7em;
}

.wtc-homehub__card-price {
    display: block;
    color: var(--wtc-teal);
    font-weight: 700;
    margin-top: 6px;
}

.wtc-homehub__card-loc {
    display: block;
    color: #6f8681;
    font-size: 12.5px;
    margin-top: 4px;
}

@media (max-width: 991.98px) {
    .wtc-homehub__grid {
        grid-template-columns: 1fr;
    }

    .wtc-homehub__cats {
        max-height: none;
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .wtc-homehub__cat {
        border-bottom: 0;
        border-radius: 10px;
    }
}

@media (max-width: 575.98px) {
    .wtc-homehub__cats {
        grid-template-columns: 1fr;
    }

    .wtc-homehub__cards {
        grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    }
}

/* ------------------------------------------------------------------
   J1. Jiji-style category tree sidebar on taxonomy pages
   (frontend/partials/category-tree-sidebar). Desktop: boxed rail with
   nested subcategory tree + live counts. Mobile: horizontal chip strip.
------------------------------------------------------------------ */
.wtc-catside {
    position: sticky;
    top: 90px;
    background: #fff;
    border: 1px solid var(--wtc-sand);
    border-radius: 12px;
    padding: 6px 0 10px;
    box-shadow: 0 2px 10px rgba(23, 48, 44, .05);
}

.wtc-catside__title {
    font-size: 18px;
    margin: 10px 16px 6px;
    color: var(--wtc-ink);
}

.wtc-catside__list,
.wtc-catside__subs {
    list-style: none;
    margin: 0;
    padding: 0;
}

.wtc-catside__cat,
.wtc-catside__sub {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 9px 16px;
    font-size: 14.5px;
    color: var(--wtc-ink);
}

.wtc-catside__cat {
    font-weight: 700;
}

.wtc-catside__subs .wtc-catside__sub {
    padding-left: 28px;
    font-size: 14px;
    font-weight: 400;
}

.wtc-catside__children .wtc-catside__sub {
    padding-left: 42px;
    font-size: 13.5px;
}

.wtc-catside__cat:hover,
.wtc-catside__sub:hover {
    background: var(--wtc-teal-soft);
    color: var(--wtc-teal-deep);
}

.wtc-catside__cat.is-active,
.wtc-catside__sub.is-active {
    color: var(--wtc-teal-deep);
    background: var(--wtc-teal-soft);
    border-left: 3px solid var(--wtc-teal);
}

.wtc-catside__count {
    color: #6f8681;
    font-size: 12.5px;
    font-weight: 400;
    white-space: nowrap;
}

.wtc-catside__showall {
    display: block;
    background: none;
    border: 0;
    color: var(--wtc-teal);
    font-weight: 700;
    font-size: 13.5px;
    padding: 8px 16px 2px;
    cursor: pointer;
}

.wtc-catside__showall:hover {
    color: var(--wtc-clay-cta);
    text-decoration: underline;
}

.wtc-results-title {
    font-size: 22px;
    margin-bottom: 6px;
}

.wtc-results-title strong {
    color: var(--wtc-teal-deep);
}

/* mobile chip strip */
.wtc-catside-chips {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding: 2px 2px 10px;
    margin-bottom: 6px;
    scrollbar-width: none;
}

.wtc-catside-chips::-webkit-scrollbar {
    display: none;
}

.wtc-catside-chip {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border: 1px solid var(--wtc-sand);
    border-radius: 999px;
    background: #fff;
    color: var(--wtc-ink);
    font-size: 13.5px;
    white-space: nowrap;
}

.wtc-catside-chip span {
    color: #6f8681;
    font-size: 12px;
}

.wtc-catside-chip.is-active {
    background: var(--wtc-teal-deep);
    border-color: var(--wtc-teal-deep);
    color: #fff;
}

.wtc-catside-chip.is-active span {
    color: #cfe8df;
}

/* ------------------------------------------------------------------
   H2. Home hub - main-category TILES (Wellness / Entertainment / Hotels
   and Dining). The app's "Browse categories" block: a card each with a
   circular icon, the name, and how many categories sit under it. On web
   they double as tabs — the active one filters the rail below (JS in
   category-listings-hub blade). Read off
   wellness_app/lib/features/home/main_category_row.dart.
------------------------------------------------------------------ */
.wtc-homehub__maincards {
    display: grid;
    /* Three across, because three is exactly what there is — the same call
       the app's MainCategoryRow makes. Extras wrap cleanly rather than
       squeezing every tile thinner. */
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin: 0 0 22px;
}

.wtc-homehub__maincard {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 16px 8px 14px;
    border: 1px solid var(--wtc-sand);
    background: #fff;
    color: var(--wtc-ink);
    border-radius: 12px;
    line-height: 1.25;
    text-align: center;
    cursor: pointer;
    transition: box-shadow .15s ease, border-color .15s ease, transform .15s ease;
}

.wtc-homehub__maincard:hover {
    border-color: var(--wtc-teal);
    box-shadow: 0 6px 18px rgba(var(--main-color-one-rgb), .10);
    transform: translateY(-2px);
}

/* Selected: teal ring + soft tint, so it is clear which vertical the rail
   below is showing. The app's tiles have no selected state because they
   navigate away; on web they stay put and filter, so the state matters. */
.wtc-homehub__maincard.is-active {
    border-color: var(--wtc-teal-deep);
    box-shadow: inset 0 0 0 1px var(--wtc-teal-deep);
    background: var(--wtc-teal-soft);
}

.wtc-homehub__maincard-ic {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--wtc-teal-soft);
    color: var(--wtc-teal-deep);
    font-size: 21px;
    flex: 0 0 auto;
}

.wtc-homehub__maincard.is-active .wtc-homehub__maincard-ic {
    background: #fff;
}

.wtc-homehub__maincard-ic img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.wtc-homehub__maincard-name {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--wtc-ink);
    /* Fixed two-line box so the count lands on the same baseline whether the
       name wraps ("Hotels and Dining") or not — the app does the same with a
       SizedBox around its label. */
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 2.5em;
}

.wtc-homehub__maincard-count {
    font-size: 11px;
    color: #6f8681;
}

.wtc-homehub__empty {
    margin: 8px 16px 12px;
    font-size: 14px;
    color: #6f8681;
}

@media (max-width: 991.98px) {
    .wtc-homehub__maincards {
        gap: 10px;
        margin-bottom: 14px;
    }

    .wtc-homehub__maincard {
        padding: 14px 6px 12px;
    }

    .wtc-homehub__maincard-ic {
        width: 40px;
        height: 40px;
        font-size: 19px;
    }

    .wtc-homehub__maincard-name {
        font-size: 12.5px;
    }

    .wtc-homehub__maincard-count {
        font-size: 10.5px;
    }
}

/* SJ1 addition: main-category group headers inside the category rail */
.wtc-catside__group {
    margin: 10px 0 2px;
    padding: 6px 14px 4px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #6f8681;
    border-top: 1px solid var(--wtc-sand);
}

.wtc-catside__list > .wtc-catside__group:first-child {
    border-top: 0;
    margin-top: 0;
}

/* ------------------------------------------------------------------
   T1. Trust — "Verified providers only" filter toggle on listing pages
------------------------------------------------------------------ */
.wtc-verified-filter {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 50px;
    margin: 0;
    padding: 0 14px;
    border: 1px solid var(--wtc-sand);
    border-radius: 4px;
    background: #fff;
    cursor: pointer;
    font-size: 14.5px;
    color: var(--wtc-ink);
    user-select: none;
}

.wtc-verified-filter input {
    width: 17px;
    height: 17px;
    accent-color: var(--wtc-teal-deep);
    cursor: pointer;
    flex: 0 0 auto;
}

.wtc-verified-filter span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    line-height: 1.2;
}

.wtc-verified-filter i {
    color: var(--wtc-teal-deep);
    font-size: 18px;
}

.wtc-verified-filter:hover {
    border-color: var(--wtc-teal-deep);
}

/* ------------------------------------------------------------------
   T2. Search type-ahead — free-text location/service suggestions
   (partial: frontend/partials/search-suggest.blade.php)
------------------------------------------------------------------ */
.wtc-loc-input {
    height: 50px;
    margin-bottom: 8px;
    border: 1px solid var(--wtc-sand);
    border-radius: 4px;
    font-size: 14.5px;
}

.wtc-loc-input:focus {
    border-color: var(--wtc-teal-deep);
    box-shadow: none;
    outline: none;
}

.wtc-suggest-list {
    position: absolute;
    z-index: 40;
    top: 52px;
    left: 0;
    right: 0;
    margin: 0;
    padding: 4px 0;
    list-style: none;
    background: #fff;
    border: 1px solid var(--wtc-sand);
    border-radius: 6px;
    box-shadow: 0 8px 24px rgba(23, 48, 44, .12);
    max-height: 280px;
    overflow-y: auto;
}

.wtc-suggest-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 9px 14px;
    cursor: pointer;
    font-size: 14px;
    color: var(--wtc-ink);
}

.wtc-suggest-item:hover {
    background: rgba(15, 118, 110, .08);
}

.wtc-suggest-item em {
    font-style: normal;
    font-size: 11.5px;
    color: #6f8681;
    text-transform: uppercase;
    letter-spacing: .04em;
    flex: 0 0 auto;
}

/* ------------------------------------------------------------------
   T3. Coupon ticket — shareable discount page (/coupon/{code})
------------------------------------------------------------------ */
.wtc-ticket {
    background: #fff;
    border: 2px dashed var(--wtc-teal-deep);
    border-radius: 14px;
    padding: 30px 26px;
    text-align: center;
    box-shadow: 0 6px 22px rgba(23, 48, 44, .07);
}

.wtc-ticket.is-void {
    border-color: #d9c9c6;
    opacity: .92;
}

.wtc-ticket__label {
    display: inline-block;
    font-size: 12px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #6f8681;
}

.wtc-ticket__amount {
    font-size: 48px;
    font-weight: 800;
    line-height: 1.1;
    color: var(--wtc-teal-deep);
    margin: 6px 0 2px;
}

.wtc-ticket__amount small {
    display: block;
    font-size: 15px;
    font-weight: 600;
    color: var(--wtc-ink);
}

.wtc-ticket__provider {
    margin: 6px 0 16px;
    color: var(--wtc-ink);
}

.wtc-ticket__code {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
    padding: 14px;
    border-top: 1px dashed var(--wtc-sand);
    border-bottom: 1px dashed var(--wtc-sand);
}

.wtc-ticket__code span {
    font-size: 12px;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #6f8681;
}

.wtc-ticket__code strong {
    font-size: 24px;
    letter-spacing: .18em;
    color: var(--wtc-ink);
}

.wtc-ticket__expiry,
.wtc-ticket__hint {
    margin: 14px 0 0;
    font-size: 14px;
    color: #6f8681;
}

.wtc-ticket__void {
    margin: 16px 0 0;
    font-size: 14.5px;
    font-weight: 600;
    color: #c0392b;
}

/* ------------------------------------------------------------------
   L1. Legal documents — readable long-form policy pages
------------------------------------------------------------------ */
.legal-doc {
    max-width: 820px;
    line-height: 1.75;
    color: var(--wtc-ink);
}

.legal-doc h2 {
    font-size: 22px;
    margin: 34px 0 10px;
    padding-top: 18px;
    border-top: 1px solid var(--wtc-sand);
}

.legal-doc h2:first-of-type { border-top: 0; padding-top: 0; }

.legal-doc h3 {
    font-size: 17px;
    margin: 22px 0 8px;
    color: var(--wtc-teal-deep);
}

.legal-doc p, .legal-doc li { font-size: 15.5px; }
.legal-doc ul, .legal-doc ol { padding-left: 22px; margin-bottom: 14px; }
.legal-doc li { margin-bottom: 7px; }

.legal-meta {
    font-size: 13.5px;
    color: #6f8681;
    margin-bottom: 6px;
}

.legal-summary {
    background: var(--wtc-cloud, #F5F8F6);
    border-left: 4px solid var(--wtc-teal-deep);
    padding: 14px 18px;
    border-radius: 0 8px 8px 0;
    font-size: 15.5px;
    margin-bottom: 14px;
}

.legal-note {
    font-size: 14px;
    color: #6f8681;
}

.legal-table {
    width: 100%;
    border-collapse: collapse;
    margin: 14px 0 20px;
    font-size: 14.5px;
    display: block;
    overflow-x: auto;
}

.legal-table th,
.legal-table td {
    border: 1px solid var(--wtc-sand);
    padding: 10px 12px;
    text-align: left;
    vertical-align: top;
}

.legal-table th {
    background: var(--wtc-cloud, #F5F8F6);
    font-weight: 700;
}

@media (max-width: 767.98px) {
    .legal-doc h2 { font-size: 19px; }
    .legal-doc p, .legal-doc li { font-size: 15px; }
}

/* ============================================================================
   §M  MARKETPLACE LAYER — Jiji-density discovery UI, Wellness to Book palette
   Added 2026-07-22, phase 1 of docs/JIJI_REDESIGN_AND_APP_MERGE_PLAN_2026-07-22.md

   Role mapping from Jiji's palette to ours:
     Jiji green  (prices, links)      -> --wtc-teal      brand base
     Jiji orange (the primary CTA)    -> --wtc-clay-cta  our highest-contrast colour
   Jiji makes its main action deliberately NOT the brand colour so it wins the
   page. Clay plays that role here, so we get the same hierarchy without
   wearing someone else's identity.
   ========================================================================= */

.mk-grid {
    display: grid;
    /* two-up on phones is the density change that matters most — the old
       one-up card showed a single listing per screen */
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}
@media (min-width: 576px) { .mk-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } }
@media (min-width: 768px) { .mk-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .mk-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* list view: one column, media beside the body */
.mk-grid.is-list { grid-template-columns: 1fr; gap: 10px; }

/* Horizontal scroll strip — the app's "Popular right now" row. Cards keep the
   exact same design as the grid (.mk-card); they just sit in a snapping,
   side-scrolling track showing ~2.2 at a time on a phone, the way the app does.
   The card's own image uses flex height, so a track height is pinned here to
   stop a short-text card collapsing next to a tall one. */
.mk-hrow {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 2px 2px 8px;
    margin-bottom: 8px;
}
.mk-hrow::-webkit-scrollbar { display: none; }
.mk-hrow > .mk-card {
    flex: 0 0 clamp(158px, 44vw, 240px);
    scroll-snap-align: start;
}
.mk-hrow > .mk-card .mk-card__media {
    aspect-ratio: 4 / 3;
    flex: 0 0 auto;
}
@media (min-width: 768px) {
    .mk-hrow > .mk-card { flex-basis: clamp(220px, 24vw, 280px); }
}

.mk-card {
    background: #fff;
    border: 1px solid var(--wtc-sand);
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: box-shadow .18s ease, transform .18s ease;
}
.mk-card:hover { box-shadow: 0 6px 20px rgba(var(--main-color-one-rgb), .12); transform: translateY(-2px); }

.mk-card__media {
    position: relative;
    display: block;
    aspect-ratio: 4 / 3;
    background: var(--wtc-cloud);
    overflow: hidden;
}
.mk-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }

.mk-flag {
    position: absolute;
    z-index: 2;
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    padding: 4px 7px;
    border-radius: 20px;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    white-space: nowrap;
}
.mk-flag--featured { top: 8px; left: 8px; background: var(--wtc-clay-cta); color: #fff; }
.mk-flag--mode { bottom: 8px; left: 8px; background: rgba(255, 255, 255, .94); color: var(--wtc-teal-deep); }
.mk-flag--mode.is-mobile { color: var(--wtc-clay-cta); }

.mk-card__body { padding: 10px 11px 12px; display: flex; flex-direction: column; gap: 5px; flex: 1 1 auto; }

/* price leads the card */
.mk-card__price {
    margin: 0;
    font-family: var(--heading-font);
    font-size: 17px;
    font-weight: 800;
    line-height: 1.15;
    color: var(--wtc-teal);
}

.mk-card__title { margin: 0; font-size: 14px; line-height: 1.3; font-weight: 600; }
.mk-card__title a { color: var(--heading-color); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mk-card__title a:hover { color: var(--wtc-teal); }

.mk-card__desc {
    margin: 0;
    font-size: 12.5px;
    line-height: 1.4;
    color: var(--light-color);
    max-height: 3.2em;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    word-break: break-word;
}

.mk-card__trust { display: flex; flex-wrap: wrap; gap: 4px; }
.mk-chip {
    font-size: 10.5px;
    font-weight: 600;
    line-height: 1;
    padding: 4px 7px;
    border-radius: 20px;
    background: var(--wtc-cloud);
    color: var(--light-color);
    display: inline-flex;
    align-items: center;
    gap: 3px;
    white-space: nowrap;
}
.mk-chip--rating { background: rgba(var(--main-color-two-rgb), .10); color: var(--wtc-clay-cta); }
.mk-chip--new { background: rgba(var(--main-color-two-rgb), .10); color: var(--wtc-clay-cta); }
.mk-chip--verified { background: rgba(var(--main-color-one-rgb), .10); color: var(--wtc-teal); }
.mk-chip--unverified { background: rgba(140, 150, 150, 0.12); color: #6b7c79; }
.mk-muted { opacity: .7; font-weight: 500; }

.mk-card__meta { margin: 0; font-size: 11.5px; color: var(--extra-light-color); line-height: 1.35; }
.mk-card__meta a { color: var(--extra-light-color); text-decoration: underline; text-underline-offset: 2px; }
.mk-card__meta a:hover { color: var(--wtc-teal); }
.mk-card__by { display: block; }

.mk-card__actions { display: flex; gap: 6px; margin-top: auto; padding-top: 8px; }
.mk-btn {
    flex: 1 1 auto;
    text-align: center;
    font-size: 12.5px;
    font-weight: 700;
    padding: 8px 10px;
    border-radius: 8px;
    line-height: 1.2;
    white-space: nowrap;
}
/* clay, not teal — the booking action must win the card (see header note) */
.mk-btn--book { background: var(--wtc-clay-cta); color: #fff; }
.mk-btn--book:hover { background: var(--wtc-clay); color: #fff; }
.mk-btn--ghost { background: transparent; border: 1px solid var(--wtc-sand); color: var(--heading-color); }
.mk-btn--ghost:hover { border-color: var(--wtc-teal); color: var(--wtc-teal); }

/* ---- list layout ---------------------------------------------------- */
.mk-card--list { flex-direction: row; }
.mk-card--list .mk-card__media { width: 132px; flex: 0 0 132px; aspect-ratio: 1 / 1; }
.mk-card--list .mk-card__body { padding: 10px 12px; }
.mk-card--list .mk-card__desc { max-height: 4.2em; -webkit-line-clamp: 3; }
@media (min-width: 768px) {
    .mk-card--list .mk-card__media { width: 220px; flex: 0 0 220px; aspect-ratio: 4 / 3; }
    .mk-card--list .mk-card__price { font-size: 19px; }
    .mk-card--list .mk-card__title { font-size: 16px; }
    .mk-card--list .mk-card__actions { max-width: 320px; }
}
@media (max-width: 575.98px) {
    .mk-card--list .mk-card__actions .mk-btn--ghost { display: none; }
}

/* ---- feed toolbar: result count + grid/list toggle ------------------- */
.mk-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
    flex-wrap: wrap;
}
.mk-toolbar__count { margin: 0; font-size: 13.5px; color: var(--light-color); }
.mk-toolbar__count strong { color: var(--heading-color); }
.mk-viewtoggle { display: inline-flex; border: 1px solid var(--wtc-sand); border-radius: 8px; overflow: hidden; background: #fff; }
.mk-viewtoggle button {
    border: 0;
    background: transparent;
    padding: 7px 11px;
    line-height: 1;
    font-size: 16px;
    color: var(--extra-light-color);
    cursor: pointer;
}
.mk-viewtoggle button.is-active { background: var(--wtc-teal); color: #fff; }
.mk-viewtoggle button:focus-visible { outline: 2px solid var(--wtc-teal); outline-offset: -2px; }

/* ---- home catalogue: section head ------------------------------------ */
.mk-home-feed { background: var(--wtc-cloud); }
.mk-home-feed__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
}
.mk-home-feed__title { margin: 0; font-size: 22px; font-weight: 800; color: var(--heading-color); }
.mk-home-feed__all { font-size: 13.5px; font-weight: 700; color: var(--wtc-teal); white-space: nowrap; }
.mk-home-feed__all:hover { color: var(--wtc-clay-cta); }
@media (min-width: 768px) { .mk-home-feed__title { font-size: 26px; } }

/* ---- sticky search + location bar (Jiji's pinned header) ------------- */
.mk-searchbar {
    position: sticky;
    top: 0;
    z-index: 60;
    background: var(--wtc-teal-deep);
    padding: 10px 0;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .10);
}
.mk-searchbar__inner { display: flex; gap: 8px; align-items: stretch; }
.mk-searchbar__loc {
    flex: 0 0 auto;
    max-width: 42%;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255, 255, 255, .14);
    color: #fff;
    border: 0;
    border-radius: 8px;
    padding: 0 12px;
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
}
.mk-searchbar__loc:hover { background: rgba(255, 255, 255, .22); color: #fff; }
.mk-searchbar__form { flex: 1 1 auto; display: flex; background: #fff; border-radius: 8px; overflow: hidden; margin: 0; }
.mk-searchbar__form input {
    flex: 1 1 auto;
    border: 0;
    padding: 11px 14px;
    font-size: 14px;
    min-width: 0;
    color: var(--heading-color);
    background: transparent;
}
.mk-searchbar__form input:focus { outline: 0; }
.mk-searchbar__form button {
    border: 0;
    background: var(--wtc-clay-cta);
    color: #fff;
    padding: 0 16px;
    font-size: 17px;
    line-height: 1;
    cursor: pointer;
}
.mk-searchbar__form button:hover { background: var(--wtc-clay); }
@media (max-width: 575.98px) {
    .mk-searchbar__loc { max-width: 38%; font-size: 12.5px; padding: 0 9px; }
    .mk-searchbar__form input { padding: 10px 11px; font-size: 13.5px; }
}

/* ---- slim hero on the home page --------------------------------------
   Jiji has no hero at all - you land on listings. The owner chose to keep a
   short branded strip (plan section 4), so the hero is compressed rather than
   removed. It was min-height 690-880px, which pushed the first listing about
   three screens down on a phone - the exact problem this phase exists to fix.
   Content is untouched, only the box it sits in.

   Selector is `section.wtc-story-hero`, not `.wtc-story-hero`: the addon
   prints its own sizing in an INLINE <style> block, which comes after this
   file in document order and therefore wins at equal specificity. The element
   qualifier buys the one point needed to beat it.                         */
section.wtc-story-hero { min-height: 380px; }
section.wtc-story-hero .wtc-story-hero__inner { padding-top: 30px; padding-bottom: 26px; }

@media (max-width: 991px) {
    section.wtc-story-hero { min-height: 300px; }
}
@media (max-width: 767px) {
    section.wtc-story-hero { min-height: 250px; }
    section.wtc-story-hero .wtc-story-hero__inner { padding-top: 20px; padding-bottom: 18px; }
}

/* On a phone the hero is REMOVED entirely (owner's call, 2026-07-23), so the
   page lands straight on the search bar and the category rail — exactly what
   the app does, which has no hero at all. Kept from 992px up, where a desktop
   has the room for a branded strip above the listings. The `section.` qualifier
   beats the addon's inline sizing, same reason as the slimming rules above. */
@media (max-width: 991.98px) {
    section.wtc-story-hero { display: none !important; }
}

/* Hero content, trimmed. The box was already capped above; this is what
   actually made it 813px tall.
   - The hero carried its OWN search box. The pinned bar at the top of every
     page now does that job, and two search boxes one above the other is just
     a question about which one works.
   - Headline and subtitle are scaled down and the subtitle clamped, so the
     copy still reads but stops eating the fold.                            */
section.wtc-story-hero .wtc-story-search { display: none; }
section.wtc-story-hero .wtc-story-hero__subtitle {
    max-height: 3.2em;
    overflow: hidden;
    margin-bottom: 14px;
}
section.wtc-story-hero .wtc-story-hero__content > :not(.wtc-story-hero__actions) { margin-bottom: 10px; }

@media (max-width: 767px) {
    /* the supporting detail row is the first thing to go on a phone */
    section.wtc-story-hero .wtc-story-detail { display: none; }
    section.wtc-story-hero .wtc-story-hero__subtitle { max-height: 2.9em; font-size: 14px; }
}

/* Unpriced listings read as a prompt, not a price — smaller and muted so a
   real price still wins the eye in a grid of mixed cards. */
.mk-card__price.is-quote { font-size: 14px; font-weight: 700; color: var(--light-color); }

/* ---- home category rail: chip strip on phones -------------------------
   The rail is a 430px vertical list of 18 categories. On a desktop sidebar
   that is fine; stacked above the listings on a phone it pushed the first
   card to 1208px - past the fold twice over. Jiji solves this with a
   horizontally scrollable strip, and the category pages here already do the
   same thing, so this matches both.                                      */
@media (max-width: 991.98px) {
    .wtc-homehub__cats {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        gap: 8px;
        padding-bottom: 6px;
        margin-bottom: 4px;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .wtc-homehub__cats::-webkit-scrollbar { display: none; }
    .wtc-homehub__cats > li {
        flex: 0 0 auto;
        border: 1px solid var(--wtc-sand);
        border-radius: 20px;
        background: #fff;
    }
    .wtc-homehub__cats > li > a {
        display: flex;
        align-items: center;
        gap: 6px;
        white-space: nowrap;
        padding: 8px 13px;
        font-size: 13px;
    }
    /* the per-category count still earns its place - it is the "54,953 ads"
       signal that tells you the marketplace is alive */
    .wtc-homehub__cats > li .wtc-homehub__cat-count { font-size: 11px; opacity: .7; }
}

/* A grid/flex child defaults to min-width:auto, so the nowrap chip row above
   grew the whole page instead of scrolling inside itself - the entire home
   page scrolled sideways on a phone. min-width:0 is what actually contains
   it; overflow-x alone does not. */
@media (max-width: 991.98px) {
    .wtc-homehub__rail { min-width: 0; max-width: 100%; }
    .wtc-homehub__cats { min-width: 0; max-width: 100%; }
}

/* ---- provider profile: browse-this-provider rail + scoped search ------
   Jiji's seller page gives you a search box scoped to that seller and a
   category breakdown with counts. A spa with forty treatments is unusable
   without both; ours used to show four random services in a carousel.
   docs/JIJI_PAGE_TEARDOWN_2026-07-22.md §1                              */
.mk-provider-rail {
    background: #fff;
    border: 1px solid var(--wtc-sand);
    border-radius: 12px;
    padding: 14px;
}
.mk-provider-rail__title { margin: 0 0 10px; font-size: 15px; font-weight: 700; color: var(--heading-color); }
.mk-provider-cats { list-style: none; margin: 0; padding: 0; }
.mk-provider-cats > li + li { border-top: 1px solid var(--wtc-cloud); }
.mk-provider-cats a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 9px 4px;
    font-size: 13.5px;
    color: var(--light-color);
}
.mk-provider-cats a:hover { color: var(--wtc-teal); }
.mk-provider-cats a.is-active { color: var(--wtc-teal); font-weight: 700; }
.mk-provider-cats__count {
    flex: 0 0 auto;
    font-size: 11.5px;
    font-weight: 700;
    color: var(--extra-light-color);
    background: var(--wtc-cloud);
    border-radius: 20px;
    padding: 2px 8px;
}

.mk-provider-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}
.mk-provider-head__title { margin: 0; font-size: 20px; font-weight: 800; color: var(--heading-color); }
.mk-provider-search { display: flex; background: #fff; border: 1px solid var(--wtc-sand); border-radius: 8px; overflow: hidden; margin: 0; }
.mk-provider-search input { border: 0; padding: 9px 12px; font-size: 13.5px; min-width: 0; width: 190px; background: transparent; color: var(--heading-color); }
.mk-provider-search input:focus { outline: 0; }
.mk-provider-search button { border: 0; background: var(--wtc-teal); color: #fff; padding: 0 13px; font-size: 15px; cursor: pointer; }
.mk-provider-search button:hover { background: var(--wtc-teal-deep); }

@media (max-width: 991.98px) {
    .mk-provider-rail { margin-bottom: 18px; }
    /* same chip-strip treatment as the home rail, same min-width:0 guard */
    .mk-provider-rail, .mk-provider-cats { min-width: 0; max-width: 100%; }
    .mk-provider-cats {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        gap: 8px;
        scrollbar-width: none;
    }
    .mk-provider-cats::-webkit-scrollbar { display: none; }
    .mk-provider-cats > li { flex: 0 0 auto; border: 1px solid var(--wtc-sand); border-radius: 20px; }
    .mk-provider-cats > li + li { border-top: 1px solid var(--wtc-sand); }
    .mk-provider-cats a { padding: 7px 12px; white-space: nowrap; font-size: 13px; }
    .mk-provider-search input { width: 100%; }
    .mk-provider-head { flex-direction: column; align-items: stretch; }
}

/* ---- dashboard tile grid (Jiji's Profile tab) -------------------------
   Jiji's Profile IS the dashboard: a two-column grid of destinations, each
   with a live count. It is navigation with numbers on it, not a wall of
   statistics - you see what needs attention and tap straight into it. Our
   old stat cards showed the same numbers but did not take you anywhere.
   docs/JIJI_PAGE_TEARDOWN_2026-07-22.md §5                              */
.mk-tiles-wrap { margin-bottom: 22px; }
.mk-tiles__title { margin: 0 0 12px; font-size: 18px; font-weight: 800; color: var(--heading-color); }
.mk-tiles {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}
@media (min-width: 992px)  { .mk-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1400px) { .mk-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.mk-tile {
    display: flex;
    align-items: center;
    gap: 11px;
    min-width: 0;
    padding: 13px 13px;
    background: #fff;
    border: 1px solid var(--wtc-sand);
    border-radius: 12px;
    transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}
.mk-tile:hover {
    border-color: var(--wtc-teal);
    box-shadow: 0 5px 16px rgba(var(--main-color-one-rgb), .12);
    transform: translateY(-1px);
}
.mk-tile__icon {
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    border-radius: 11px;
    background: rgba(var(--main-color-one-rgb), .10);
    color: var(--wtc-teal);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 19px;
}
.mk-tile__body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.mk-tile__label {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--heading-color);
    line-height: 1.25;
    overflow: hidden;
    text-overflow: ellipsis;
}
.mk-tile__note { font-size: 11.5px; color: var(--extra-light-color); line-height: 1.2; }
.mk-tile__count {
    flex: 0 0 auto;
    min-width: 24px;
    text-align: center;
    font-size: 11.5px;
    font-weight: 800;
    line-height: 1;
    padding: 5px 7px;
    border-radius: 20px;
    background: rgba(var(--main-color-one-rgb), .12);
    color: var(--wtc-teal);
}
/* clay means "this is waiting on you" - the same signal Jiji gives with its
   red unread badges, in our palette */
.mk-tile__count.is-urgent { background: var(--wtc-clay-cta); color: #fff; }

@media (max-width: 400px) {
    .mk-tile { padding: 11px 10px; gap: 9px; }
    .mk-tile__icon { width: 33px; height: 33px; font-size: 17px; }
    .mk-tile__label { font-size: 12.5px; }
}

/* ---- search results summary ------------------------------------------
   A results page that does not echo the query leaves you unsure whether the
   search ran at all, and with no obvious way back to everything.          */
.mk-searchsummary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    background: var(--wtc-cloud);
    border: 1px solid var(--wtc-sand);
    border-radius: 10px;
    padding: 10px 14px;
    margin-bottom: 16px;
}
.mk-searchsummary__text { margin: 0; font-size: 14px; color: var(--light-color); }
.mk-searchsummary__text strong { color: var(--heading-color); }
.mk-searchsummary__clear { font-size: 13px; font-weight: 700; color: var(--wtc-clay-cta); white-space: nowrap; }
.mk-searchsummary__clear:hover { color: var(--wtc-clay); }

/* Price unit sits with the number but must not compete with it - the amount
   is what people scan, the unit is what makes it mean something. */
.mk-card__unit { font-size: 11.5px; font-weight: 600; color: var(--extra-light-color); white-space: nowrap; }

/* ============================================================================
   §SWITCH  ONE desktop/mobile boundary, auto-switched by viewport
   ============================================================================
   The site is ONE responsive theme, not two codebases. The mobile design (the
   app-like one: search-bar header, five-tab bar, category tiles, single column)
   and the desktop design are the SAME pages re-laid-out at a single boundary —
   992px. The browser picks the side that fits the screen automatically, on
   every device, with no user-agent guessing: a phone gets the mobile theme, a
   laptop the desktop theme, and a resized window flips live at 992px.

   That 992px line is the single source of truth for the split. The tab bar, the
   app header, the desktop header quicknav and the category tiles all pivot on
   it (search this file for `991.98px` / `min-width: 992px`).

   These two helpers let ANY component opt one side in or out cleanly, so the two
   "themes" can keep diverging without ever forking a second template. They only
   HIDE on the wrong side — the shown side keeps the element's natural display
   (block, flex, inline…), so they are safe to drop on anything.

     <div class="wtb-only-desktop"> …shown on laptops, gone on phones… </div>
     <span class="wtb-only-mobile"> …shown on phones, gone on laptops… </span>
   ========================================================================= */
@media (max-width: 991.98px) { .wtb-only-desktop { display: none !important; } }
@media (min-width: 992px)    { .wtb-only-mobile  { display: none !important; } }


/* ============================================================================
   §APP  APP SHELL ON THE WEB — the phone gets the app's five-tab bar
   Added 2026-07-23. Pairs with resources/views/frontend/partials/app-tabbar.blade.php.

   The joined Flutter app is one app with one bar (Home · Saved · List ⊕ ·
   Messages · Profile). Opening the same product in a phone browser gave you a
   hamburger instead, so the two felt like different products. These values are
   read off `wellness_app/lib/features/shell/app_shell.dart` on purpose:
   height 64, icon 24, label 11.5px/600, teal when selected, muted when not,
   no pill behind the selected item, and the middle tab stays clay either way.
   ========================================================================= */

.app-tabbar {
    display: none; /* phones only — see the media query below */
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1030;
    background: #fff;
    border-top: 1px solid var(--wtc-sand);
    /* The test handset has a 3-button navigation bar, not a slim gesture
       handle. Without the inset the labels sit underneath it and the tabs are
       genuinely hard to hit — the same trap the app's SafeArea solves. */
    padding-bottom: env(safe-area-inset-bottom, 0px);
    box-shadow: 0 -2px 12px rgba(23, 48, 44, .06);
}

.app-tabbar__item {
    flex: 1 1 0;
    min-width: 0;
    height: 64px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    text-decoration: none;
    color: var(--light-color);
    font-size: 11.5px;
    font-weight: 600;
    line-height: 1;
    -webkit-tap-highlight-color: transparent;
}
.app-tabbar__item i { font-size: 24px; line-height: 1; }
.app-tabbar__item span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app-tabbar__item:hover { color: var(--light-color); text-decoration: none; }
.app-tabbar__item.is-active,
.app-tabbar__item.is-active:hover { color: var(--wtc-teal); }

/* The primary action does not change colour with selection: it is not a peer
   of the browse tabs. Same rule as the app's middle tab and the web's Book Now. */
.app-tabbar__item--primary,
.app-tabbar__item--primary:hover { color: var(--wtc-clay-cta); }

.app-tabbar__icon-wrap { position: relative; display: inline-flex; }
.app-tabbar__badge {
    position: absolute;
    top: -4px;
    left: 60%;
    min-width: 16px;
    padding: 0 4px;
    border-radius: 20px;
    background: var(--wtc-clay-cta);
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    line-height: 16px;
    text-align: center;
}

@media (max-width: 991.98px) {
    .app-tabbar { display: flex; }

    /* Reserve the bar's height so the last row of content, the footer links and
       any sticky CTA are reachable instead of sitting under the bar. */
    body.__wellnesstobook.has-app-tabbar {
        padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px));
    }
    /* Anything already pinned to the bottom has to clear the bar too. */
    body.has-app-tabbar .sticky-book-bar,
    body.has-app-tabbar .mk-stickybar,
    body.has-app-tabbar #back-to-top,
    body.has-app-tabbar .back-to-top,
    body.has-app-tabbar .scroll-to-top {
        bottom: calc(64px + 12px + env(safe-area-inset-bottom, 0px));
    }
}

/* The floating public-chat launcher is REMOVED on a phone (owner's call,
   2026-07-24). The app has no floating chat bubble — messaging is the Messages
   tab — and on the web it sat over the listings and the tab bar. Hidden below
   992px; the chat popup goes with it since there is no way left to open it.
   Kept on desktop, where there is no tab bar and it is the only way in. */
@media (max-width: 991.98px) {
    body.has-app-tabbar .open-button,
    body.has-app-tabbar .chat-mobile-icon,
    body.has-app-tabbar .chat-wrapper-area {
        display: none !important;
    }
}

/* ---- the card bookmark -----------------------------------------------
   The app's card has had one since day one; the website's had the routes and
   the table but no control, so nothing could ever reach the Saved list. */
.mk-card { position: relative; }
.mk-save {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 2;
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .92);
    color: var(--wtc-teal);
    font-size: 19px;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 1px 6px rgba(23, 48, 44, .18);
    transition: transform .15s ease, color .15s ease, background .15s ease;
}
.mk-save:hover { transform: scale(1.06); }
.mk-save.is-saved { color: var(--wtc-clay-cta); }
.mk-save.is-busy { opacity: .55; pointer-events: none; }

/* ---- the same destinations in the desktop header ----------------------
   Built from wellness_app_destinations(), the list the phone's tab bar reads.
   Hidden below 992px because down there the tab bar is already showing them. */
.app-quicknav {
    display: none;
    align-items: center;
    gap: 4px;
    margin-right: 10px;
}
@media (min-width: 992px) {
    .app-quicknav { display: inline-flex; }
}
.app-quicknav__item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 12px;
    border-radius: 999px;
    color: var(--heading-color);
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    text-decoration: none;
    transition: background .15s ease, color .15s ease;
}
.app-quicknav__item i { font-size: 18px; line-height: 1; }
.app-quicknav__item:hover { background: var(--wtc-teal-soft); color: var(--wtc-teal-deep); text-decoration: none; }
.app-quicknav__item.is-active { background: var(--wtc-teal-soft); color: var(--wtc-teal-deep); }
.app-quicknav__item--primary { color: var(--wtc-clay-cta); }
.app-quicknav__item--primary:hover { background: rgba(192, 85, 47, .10); color: var(--wtc-clay); }

.app-quicknav__icon-wrap { position: relative; display: inline-flex; }
.app-quicknav__badge {
    position: absolute;
    top: -6px;
    left: 60%;
    min-width: 16px;
    padding: 0 4px;
    border-radius: 20px;
    background: var(--wtc-clay-cta);
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    line-height: 16px;
    text-align: center;
}

/* Narrow desktops run out of header before they run out of destinations —
   drop to icons rather than wrapping the header onto two rows. */
@media (min-width: 992px) and (max-width: 1199.98px) {
    .app-quicknav__label { display: none; }
    .app-quicknav__item { padding: 8px 10px; }
}

/* ---- account page header (Saved, and anything like it) ----------------
   Without this the h1 inherits the theme's hero-sized heading: "Saved" landed
   at ~64px on a 384px phone and ate a third of the screen before the first
   card. The app's equivalent screen gives the title one line. */
.mk-section { padding: 24px 0 40px; }
.mk-pagehead { margin-bottom: 18px; }
.mk-pagehead__title {
    margin: 0 0 6px;
    font-size: 26px;
    line-height: 1.2;
    color: var(--wtc-teal-deep);
}
.mk-pagehead__sub {
    margin: 0;
    max-width: 620px;
    font-size: 14px;
    line-height: 1.55;
    color: var(--light-color);
}
@media (min-width: 768px) {
    .mk-section { padding: 40px 0 60px; }
    .mk-pagehead__title { font-size: 34px; }
}

/* ---- account hub: the app's Profile tab, on the web --------------------
   Teal identity header, two-column tile grid, gear top-right. Values follow
   `wellness_app/lib/features/profile/profile_screen.dart` so the two screens
   read as one product. Three columns from 768px and four from 992px, because a
   two-up grid of small tiles on a wide desktop is mostly empty space. */
.ac-hub__head {
    background: var(--wtc-teal-deep);
    color: #fff;
    padding: 18px 0 20px;
}
.ac-hub__identity { display: flex; align-items: center; gap: 12px; }
.ac-hub__avatar {
    flex: 0 0 auto;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    overflow: hidden;
    background: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.ac-hub__avatar img { width: 100%; height: 100%; object-fit: cover; }
.ac-hub__who { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.ac-hub__who strong { font-size: 18px; font-weight: 800; color: #fff; }
.ac-hub__who small { font-size: 13px; color: rgba(255, 255, 255, .8); }
.ac-hub__gear { flex: 0 0 auto; color: #fff; font-size: 24px; line-height: 1; padding: 6px; }
.ac-hub__gear:hover { color: var(--wtc-mint); }

.ac-hub__grouptitle {
    margin: 26px 0 12px;
    font-size: 15px;
    font-weight: 700;
    color: var(--light-color);
    text-transform: uppercase;
    letter-spacing: .04em;
}

.ac-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: 18px;
}
@media (min-width: 768px) { .ac-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; } }
@media (min-width: 992px) { .ac-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.ac-tile {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 14px;
    background: #fff;
    border: 1px solid var(--wtc-sand);
    border-radius: 12px;
    color: var(--heading-color);
    font-size: 15px;
    font-weight: 700;
    line-height: 1.25;
    text-decoration: none;
    transition: box-shadow .18s ease, transform .18s ease;
}
.ac-tile:hover { box-shadow: 0 6px 20px rgba(var(--main-color-one-rgb), .12); transform: translateY(-2px); color: var(--heading-color); text-decoration: none; }
.ac-tile__icon {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--wtc-teal-soft);
    color: var(--wtc-teal-deep);
    font-size: 21px;
}
.ac-tile.is-clay .ac-tile__icon { background: rgba(192, 85, 47, .10); color: var(--wtc-clay-cta); }
.ac-tile__label { min-width: 0; }
.ac-tile__badge {
    position: absolute;
    top: 8px;
    right: 10px;
    padding: 1px 7px;
    border-radius: 20px;
    background: var(--wtc-clay-cta);
    color: #fff;
    font-size: 11px;
    font-weight: 800;
}

.ac-links { list-style: none; margin: 26px 0 0; padding: 0; border-top: 1px solid var(--wtc-sand); }
.ac-links li { border-bottom: 1px solid var(--wtc-sand); }
.ac-links a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 2px;
    color: var(--heading-color);
    font-size: 14px;
    text-decoration: none;
}
.ac-links a i { color: var(--wtc-teal); font-size: 18px; }
.ac-links__out, .ac-links__out i { color: var(--wtc-clay-cta) !important; }

/* The hub is the Profile tab's destination, so it must clear the tab bar. */
.ac-hub { padding-bottom: 30px; }

/* ---- the app's header, on a phone --------------------------------------
   The app opens on the teal search bar and nothing above it. The website put an
   86px white row first (logo · Log in · Join · ☰), so the same product had a
   different top depending on how you opened it.

   On phones that row is hidden and the search bar becomes the header. Nothing
   is lost: Log in / Join are the Profile tab now, exactly as in the app, and
   the site menu moves into the bar as a leading ☰ (see marketplace-searchbar).
   The collapse PANEL is deliberately left alone — hiding the whole navbar would
   take the menu with it. */
.mk-searchbar__menu { display: none; }

@media (max-width: 991.98px) {
    body.has-app-tabbar nav.navbar-area .responsive-mobile-menu { display: none !important; }
    body.has-app-tabbar nav.navbar-area {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        min-height: 0 !important;
    }
    /* The container carries its own min-height, so hiding the row left an empty
       60px band above the search bar — the header looked the same height as
       before, just blank. Collapse it too, and let the open menu re-expand it. */
    body.has-app-tabbar nav.navbar-area .nav-container {
        /* !important because `.container-two` sets 15px vertical padding at
           higher specificity — without it a 30px empty band survived. */
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        min-height: 0 !important;
        height: auto !important;
    }
    body.has-app-tabbar nav.navbar-area { border-bottom: 0 !important; }

    /* The opened menu drops BELOW the bar rather than above it.
       The navbar precedes the search bar in the document, so in normal flow the
       panel pushed the bar down and the ☰ ended up underneath the menu it had
       just opened. Fixed at the bar's own height keeps the header still and the
       menu where the tap suggests it will be. */
    body.has-app-tabbar nav.navbar-area .navbar-collapse.show {
        position: fixed;
        top: 60px;
        left: 0;
        right: 0;
        z-index: 59;
        background: #fff;
        padding: 8px 16px 14px;
        border-bottom: 1px solid var(--wtc-sand);
        box-shadow: 0 8px 20px rgba(23, 48, 44, .12);
        max-height: 70vh;
        overflow-y: auto;
    }

    .mk-searchbar__menu {
        flex: 0 0 auto;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 38px;
        border: 0;
        border-radius: 8px;
        background: rgba(255, 255, 255, .14);
        color: #fff;
        font-size: 20px;
        line-height: 1;
        cursor: pointer;
    }
    .mk-searchbar__menu:hover { background: rgba(255, 255, 255, .22); color: #fff; }

    /* Three controls in 384px: the location pill gives up the width, because a
       search box you cannot read what you typed into is the worse trade. */
    .mk-searchbar__loc { max-width: 34%; }
}
@media (max-width: 575.98px) {
    .mk-searchbar__loc { max-width: 32%; }
}


/* ============================================================================
   §DASH  LOGGED-IN DASHBOARD — bring the buyer + seller dashboards up to the
   same brand polish as the public site. Added 2026-07-24.
   ----------------------------------------------------------------------------
   The public marketplace was redesigned (§M) but the logged-in dashboards still
   read as the stock Qixer template: colours are bridged to the brand (via the
   --new-* / --main-color-one map in root-style.blade.php) but the *polish* —
   elevation, card treatment, the sidebar active state, spacing — was never
   done, so the two halves of the product feel like different apps.

   buyer_dashboard.css loads BEFORE brand-theme.css, so these same-specificity
   rules win by cascade order. Everything is scoped under .dashboard__area and
   touches ONLY colour / border / radius / shadow / spacing / weight — never
   position, width, height or display — so the existing layout is untouched.
   Pairs with the buyer/seller master layouts + sidebar-two partials.
   ========================================================================= */

/* --- Sidebar: softer brand frame + roomier rail --------------------------- */
.dashboard__area .dashboard__left {
    background: #ffffff;
    border-right: 1px solid var(--wtc-sand);
}
.dashboard__area .dashboard__bottom__list__item a {
    color: var(--wtc-ink);
    font-weight: 600;
    border-radius: 12px;
    margin-bottom: 2px;
}
.dashboard__area .dashboard__bottom__list__item a i {
    color: var(--wtc-teal);
    transition: color .2s ease;
}
.dashboard__area .dashboard__bottom__list__item > a:hover {
    background: var(--wtc-teal-soft);
    color: var(--wtc-teal-deep);
}
/* Active item: the brand tint + a left accent bar so the current page reads at
   a glance, the way a premium product signals location. */
.dashboard__area .dashboard__bottom__list__item.active > a {
    background: var(--wtc-teal-soft);
    color: var(--wtc-teal-deep);
    font-weight: 700;
    box-shadow: inset 3px 0 0 0 var(--wtc-clay);
}
.dashboard__area .dashboard__bottom__list__item.active > a i {
    color: var(--wtc-teal-deep);
}

/* --- Content surface + heading -------------------------------------------- */
.dashboard__area {
    background: var(--wtc-cloud);
}
.dashboard__area .dashboard__headerContents__left h4,
.dashboard__area .dashboard__headerContents__left h3,
.dashboard__area .dashboard_table__title h4,
.dashboard__area .dashboard__body h4 {
    font-family: var(--heading-font);
    color: var(--wtc-teal-deep);
}

/* --- Content cards: real elevation, brand border, calmer radius -----------
   .dashboard__inner__item IS the card (search panel + each service row). Inner
   wrappers (.dashboard-services, .dash-left-service, .dashboard__wallet) must
   NOT get a border or they double up inside the card. */
.dashboard__area .dashboard__inner__item {
    border: 1px solid var(--wtc-sand) !important;
    border-radius: 18px !important;
    box-shadow: 0 14px 34px -22px rgba(18, 80, 74, 0.18);
    transition: box-shadow .25s ease, transform .25s ease, border-color .25s ease;
}
/* Service rows lift slightly on hover — a small, calm cue that a row is a link
   to a bookable service, not just a static block. */
.dashboard__area .dashboard__inner__item:hover {
    box-shadow: 0 20px 44px -20px rgba(18, 80, 74, 0.26);
    border-color: var(--wtc-mint) !important;
}
.dashboard__area .dashboard-starting,
.dashboard__area .dash-righ-service .dashboard-starting {
    color: var(--wtc-teal);
    font-family: var(--heading-font);
    font-weight: 800;
}

/* --- Search panel: match the public search bar's calm surface ------------- */
.dashboard__area .dashboard__headerGlobal,
.dashboard__area .dashboard__headerGlobal__content {
    border-radius: 18px;
}

/* --- Primary buttons: one brand button everywhere ------------------------- */
.dashboard__area .btn-bg-1,
.dashboard__area .dashboard_table__title__btn,
.dashboard__area .dashboard__headerGlobal__btn {
    background: var(--wtc-clay) !important;
    border-color: var(--wtc-clay) !important;
    color: #ffffff !important;
    border-radius: 12px !important;
    font-weight: 700;
    transition: background .2s ease, box-shadow .2s ease, transform .2s ease;
}
.dashboard__area .btn-bg-1:hover,
.dashboard__area .dashboard_table__title__btn:hover,
.dashboard__area .dashboard__headerGlobal__btn:hover {
    background: var(--wtc-clay-cta) !important;
    border-color: var(--wtc-clay-cta) !important;
    box-shadow: 0 12px 24px -12px rgba(192, 85, 47, 0.5);
    transform: translateY(-1px);
}

/* --- Form controls: brand focus ring, no jarring blue -------------------- */
.dashboard__area .single-dashboard-input input,
.dashboard__area .single-dashboard-input select,
.dashboard__area .single-dashboard-input textarea,
.dashboard__area input.form-control,
.dashboard__area select.form-control,
.dashboard__area textarea.form-control {
    border-radius: 12px;
    border: 1px solid var(--wtc-sand);
    transition: border-color .2s ease, box-shadow .2s ease;
}
.dashboard__area .single-dashboard-input input:focus,
.dashboard__area .single-dashboard-input select:focus,
.dashboard__area .single-dashboard-input textarea:focus,
.dashboard__area input.form-control:focus,
.dashboard__area select.form-control:focus,
.dashboard__area textarea.form-control:focus {
    border-color: var(--wtc-teal);
    box-shadow: 0 0 0 3px rgba(17, 108, 97, 0.16);
    outline: none;
}


/* ============================================================================
   §COOKIE  CONSENT AS A BOTTOM BAR, NOT A FLOATING CARD. Added 2026-07-24.
   ----------------------------------------------------------------------------
   The plugin ships the consent dialog as a 40%-wide card pinned to
   `right:30px; bottom:100px`. Measured at 1440x900 it occupies x=825-1395,
   y=568-800 — i.e. it lands directly on top of the right-hand column, covering
   the login password field, the service-detail booking card and the booking
   summary on a visitor's FIRST view of those pages, which is exactly when the
   page has to be legible.

   Re-lay it as a full-width bar across the bottom: it still can't be missed,
   but it no longer sits on any content column. The markup is generated by the
   plugin's JS, so this is CSS-only — no plugin edit, no consent-logic change.
   jquery.ihavecookies.css loads BEFORE brand-theme.css, so same-specificity
   (#id) rules win on cascade order.

   Real structure (read off the live DOM, not guessed):
     #gdpr-cookie-message > span#gdpr-cookie-close
                          > div.gdpr-cookie-content-wraper-area   (title/message)
                          > div.gdpr-cookie-types                 (Manage panel)
                          > div.gdpr-btn-group                    (Accept/Manage/Decline)
   ========================================================================= */

/* NOTE the `div#` prefix: the plugin sets `div#gdpr-cookie-message{display:block}`,
   which is id+type specificity. A plain `#id` rule loses to it no matter the
   cascade order, so the bar silently stayed `display:block` and every child took
   its own full-width row. Match the specificity and let source order decide. */
div#gdpr-cookie-message {
    /* Undo the floating-card geometry */
    left: 0;
    right: 0;
    bottom: 0;
    width: auto;
    max-width: none;
    margin-left: 0;
    transform: none;

    /* Centre the contents on a 1320px container (matches .container) while the
       bar itself stays edge-to-edge, so it reads as page chrome. */
    padding: 16px max(24px, calc((100% - 1320px) / 2));
    border-radius: 0 !important;
    border: 0;
    border-top: 1px solid var(--wtc-sand, #E9E0D2);
    box-shadow: 0 -10px 30px -12px rgba(18, 80, 74, 0.20) !important;

    /* Above the app tab bar (1030) and the sticky search bar (60): a consent
       prompt the user cannot see is a consent prompt that cannot be answered. */
    z-index: 1040;

    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 28px;

    /* If "Manage" expands the cookie-type list, scroll inside the bar rather
       than letting it grow past the viewport. */
    max-height: 80vh;
    overflow-y: auto;
}

#gdpr-cookie-message .gdpr-cookie-content-wraper-area {
    flex: 1 1 420px;
    padding-right: 0;
    min-width: 0;
}
#gdpr-cookie-message .gdpr-btn-group {
    flex: 0 0 auto;
    margin-top: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
/* The expandable "Manage" panel takes its own full-width row under the text —
   but ONLY once it is open. While collapsed the plugin leaves it in the DOM at
   height:0/visibility:hidden, and as a `flex: 1 1 100%` item it still consumes
   a flex line, which pushed the buttons onto a third row and made the bar twice
   as tall as it needs to be. Take it out of the flow until it is shown. */
#gdpr-cookie-message .gdpr-cookie-types {
    flex: 1 1 100%;
}
#gdpr-cookie-message .gdpr-cookie-types:not(.show),
#gdpr-cookie-message .gdpr-cookie-top-part:not(.show) {
    display: none;
}
/* Buttons: kill the stacked-card margins now that they sit in a row. */
#gdpr-cookie-message .gdpr-btn-group button,
#gdpr-cookie-message .gdpr-btn-group button + button {
    margin: 0;
}
#gdpr-cookie-message h4 { margin-bottom: 4px; }
#gdpr-cookie-message p:last-child { margin-bottom: 0; }

/* The desktop chat launcher is `position:fixed; bottom:30px; right:100px` at
   z-index 9990 — i.e. it paints ON TOP of the consent bar and lands squarely on
   the Manage / Decline buttons. Lift it above the bar for as long as the bar is
   on screen; it drops back the moment consent is given and the bar is removed.
   `:has()` degrades silently to today's behaviour on engines without it. */
body:has(#gdpr-cookie-message) .open-button {
    bottom: 145px;
    transition: bottom .25s ease;
}

/* The close X was `color:#fff` on a white panel — invisible. */
#gdpr-cookie-message #gdpr-cookie-close {
    color: var(--wtc-ink, #17302C);
    font-size: 16px;
    line-height: 1;
    opacity: .55;
    padding: 6px;
}
#gdpr-cookie-message #gdpr-cookie-close:hover { opacity: 1; }

@media (max-width: 991.98px) {
    /* Clear the five-tab app bar (§APP) using the same offset every other
       bottom-pinned element here uses, so the tabs stay tappable. */
    div#gdpr-cookie-message {
        bottom: calc(64px + env(safe-area-inset-bottom, 0px));
        left: 0;
        right: 0;
        width: auto;
        transform: none;
        margin-left: 0;
        padding: 14px 16px;
        gap: 10px;
    }
    #gdpr-cookie-message .gdpr-cookie-content-wraper-area { flex: 1 1 100%; }
    #gdpr-cookie-message .gdpr-btn-group { flex: 1 1 100%; }
    #gdpr-cookie-message .gdpr-btn-group button { flex: 1 1 auto; }
}

/* ==================================================================
   §HEADER  DESKTOP HEADER MUST NOT WRAP. Added 2026-07-25.

   The header's "Log in" link and "Join Wellness to Book" pill were
   wrapping mid-label on every desktop width below 1700px. Measured on
   /user/forget-password at 1440x900 before this block:

     width  "Log in"  Join pill  nav rows
     1920    1 line    1.95        1     <- only width that was correct
     1600    2 lines   2.95        2
     1440    2 lines   3.95        2
     1366    2 lines   3.95        3
     1024    2 lines   3.95        2

   Root cause was NOT missing CSS — `white-space: nowrap` for exactly
   these two elements already existed, but it sits inside
   `@media only screen and (max-width: 991.98px)` (opens ~line 1806), so
   it only ever applied to the MOBILE side of the §SWITCH boundary. Every
   desktop viewport fell through with the theme default `normal`.

   So this is the same rule, restated for >=992px. Nothing else changes:
   no position, width, height or display is touched, per the §DASH rule.
   ================================================================== */
@media only screen and (min-width: 992px) {
    .login-account-new .login-link,
    .login-account-new .join-btn {
        white-space: nowrap;
    }

    /* The pill's two labels are both in the DOM (`--full` / `--short`, the
       short one swapped in under 576px). Guard against the collapsed one
       ever contributing width on desktop. */
    .login-account-new .join-btn .join-label--short {
        display: none;
    }
}

/* ==================================================================
   §AUTH  THE REST OF THE AUTH FAMILY GETS LOGIN'S CARD. Added 2026-07-25.

   /login renders a deliberate premium treatment: a 520px white card with
   a 24px radius and soft brand shadow, centred on a pale brand gradient.
   But that styling lives in an inline <style> block inside
   frontend/user/login.blade.php, so it applies to that ONE page.

   Four sibling pages reuse the exact same markup and got none of it.
   Measured on /user/forget-password before this block:

     .signup-wrapper  650px wide, background rgba(0,0,0,0)  (transparent)
     .signup-area     background none

   i.e. an unstyled form floating on the page background, at a moment
   (password recovery, email verification, OTP) where the product most
   needs to look trustworthy.

   Scoped via an explicit `.wtb-auth-shell` class rather than `.signup-area`,
   because pages/services/partials/service-book-one.blade.php ALSO uses
   `signup-area padding-top-70 padding-bottom-100` — styling the bare class
   would have restyled the booking flow. Added to exactly four views:
   forget-password-form, email-verify, otp-verification,
   set-phone-number-to-login-otp-code.

   login.blade.php is untouched: its inline <style> still wins on cascade
   order, so that page renders byte-identically to before.
   ================================================================== */
.signup-area.wtb-auth-shell {
    background: linear-gradient(180deg, #f5f8f6 0%, #ffffff 100%);
}

.signup-area.wtb-auth-shell .signup-wrapper {
    max-width: 520px;
    margin: 0 auto;
    background: #ffffff;
    border: 1px solid #e2ebd9;
    border-radius: 24px;
    box-shadow: 0 20px 40px -15px rgba(18, 80, 74, 0.08),
                0 5px 15px -5px rgba(0, 0, 0, 0.02);
    padding: 50px 40px;
}

@media (max-width: 576px) {
    .signup-area.wtb-auth-shell .signup-wrapper {
        padding: 30px 20px;
        border-radius: 16px;
        margin: 0 15px;
    }
}

/* ==================================================================
   §HEADER2  MAKE THE DESKTOP HEADER ACTUALLY FIT. Added 2026-07-25.

   §HEADER above stopped the LABELS wrapping. This block stops the NAV
   wrapping, which was the larger half of the problem.

   The arithmetic, measured at 1440x900 (container 1340px):

     logo                200px
     nav (6 items)       760px   <- 425px of text + 6 x 2 x 28px padding
     right cluster       645px   <- quicknav 297 + Log in 68 + Join pill 216
     ------------------------------
     needed             1605px   vs 1340 available

   That is why 1700px was the only width that laid out on one row, and why
   nav items spilled onto 2-3 rows at every common desktop size. Padding
   alone cannot close a 265px gap: fitting 425px of text into the 495px the
   nav actually gets would need ~6px of link padding, which looks broken.

   So space is reclaimed in tiers, cheapest first:

     1200-1699px  nav padding 28->16px (saves 144px)
                  quicknav becomes icon-only (saves ~175px)
     992-1199px   nav padding ->12px, and the Join pill uses its SHORT
                  label, which already exists in the markup for <576px

   Hiding .app-quicknav__label is accessibility-safe: every item already
   carries title="{label}" (see partials/app-quicknav.blade.php), which
   becomes the accessible name once the visible text is display:none.

   Selector matches style.css:2345 exactly so it wins on cascade order.
   Nothing here changes position/width/height of any container.
   ================================================================== */
/* Tier 1 — 1400-1699px. Bootstrap gives a 1320px container here, so only
   the cheap levers are needed and the full brand CTA is kept.
   Verified at 1440: nav needs 623px, gets 658px. */
@media only screen and (min-width: 1400px) and (max-width: 1699.98px) {
    .navbar-area .nav-container .navbar-collapse .navbar-nav li a {
        padding: 10px 16px;
    }
    .app-quicknav .app-quicknav__item .app-quicknav__label {
        display: none;
    }
    .app-quicknav .app-quicknav__item {
        padding-left: 10px;
        padding-right: 10px;
    }
}

/* Tier 2 — 1200-1399px, which includes 1366, one of the most common laptop
   widths. The container COLLAPSES to 1140px here (Bootstrap's >=1200 step),
   costing ~200px of viewport, so this tier needs every lever: tighter nav
   padding, icon-only quicknav, and the short "Join" label. */
@media only screen and (min-width: 1200px) and (max-width: 1399.98px) {
    /* 8px, not 10px: the <ul> is display:block with inline-block items, so
       the HTML whitespace between each </li><li> renders as a real ~4px
       space. Five gaps = ~20px that no element measurement reports. At 10px
       padding the items summed to 581 inside a 586px container and STILL
       wrapped, purely because of that invisible 20px. */
    .navbar-area .nav-container .navbar-collapse .navbar-nav li a {
        padding: 10px 8px;
    }
    .app-quicknav .app-quicknav__item .app-quicknav__label {
        display: none;
    }
    .app-quicknav .app-quicknav__item {
        padding-left: 8px;
        padding-right: 8px;
    }
    .login-account-new {
        gap: 14px;
    }
    /* Swap to the short "Join" label. Must outrank §HEADER's rule above,
       which hides --short for all of >=992px; later in file wins. */
    .login-account-new .join-btn .join-label--full {
        display: none;
    }
    .login-account-new .join-btn .join-label--short {
        display: inline;
    }
}

/* Tier 3 — 992-1199px. A single row is ARITHMETICALLY IMPOSSIBLE here and
   no amount of padding fixes it: container 960px - logo 160 - right cluster
   354 leaves 446px for a nav whose six labels are 425px of text on their
   own, i.e. ~1.7px of padding per side. Do not keep shrinking padding
   chasing it.

   So this tier stops fighting and makes two rows look deliberate: same
   compact treatment as tier 2, plus a tightened row gap and centred rows.
   (Moving the hamburger breakpoint up would fix it, but §SWITCH mandates a
   single 992px boundary for the whole theme — not worth forking.) */
@media only screen and (min-width: 992px) and (max-width: 1199.98px) {
    .navbar-area .nav-container .navbar-collapse .navbar-nav li a {
        padding: 8px 10px;
    }
    .app-quicknav .app-quicknav__item .app-quicknav__label {
        display: none;
    }
    .app-quicknav .app-quicknav__item {
        padding-left: 8px;
        padding-right: 8px;
    }
    .login-account-new {
        gap: 12px;
    }
    .login-account-new .join-btn .join-label--full {
        display: none;
    }
    .login-account-new .join-btn .join-label--short {
        display: inline;
    }
    .navbar-area .nav-container .navbar-collapse .navbar-nav {
        justify-content: center;
    }
}

/* ==================================================================
   §HEADER3  STRICT SINGLE-LINE DESKTOP HEADER NO-WRAP GUARANTEE
   ================================================================== */
@media only screen and (min-width: 992px) {
    .navbar-area .nav-container {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 12px !important;
    }

    .navbar-area .nav-container .responsive-mobile-menu {
        flex-shrink: 0 !important;
        display: flex !important;
        align-items: center !important;
    }

    .navbar-area .nav-container .navbar-collapse {
        display: flex !important;
        flex: 1 1 auto !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: center !important;
        width: auto !important;
    }

    .navbar-area .nav-container .navbar-collapse .navbar-nav {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        margin: 0 auto !important;
        padding: 0 !important;
        gap: 2px !important;
    }

    .navbar-area .nav-container .navbar-collapse .navbar-nav > li {
        display: inline-flex !important;
        align-items: center !important;
        flex-shrink: 0 !important;
        white-space: nowrap !important;
        margin: 0 !important;
    }

    .navbar-area .nav-container .navbar-collapse .navbar-nav > li > a {
        display: inline-flex !important;
        align-items: center !important;
        white-space: nowrap !important;
        padding: 8px 12px !important;
        font-size: 14px !important;
        line-height: 1.2 !important;
    }

    .navbar-area .nav-container .nav-right-content {
        flex-shrink: 0 !important;
        display: flex !important;
        align-items: center !important;
        margin-left: auto !important;
    }

    .navbar-area .nav-container .navbar-right-inner {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        gap: 12px !important;
    }

    .navbar-area .nav-container .login-account-new {
        display: inline-flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        gap: 12px !important;
        margin: 0 !important;
    }

    .navbar-area .nav-container .login-account-new .login-link {
        display: inline-flex !important;
        align-items: center !important;
        white-space: nowrap !important;
        line-height: 1.2 !important;
    }

    .navbar-area .nav-container .login-account-new .join-btn {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        white-space: nowrap !important;
        line-height: 1 !important;
        height: 42px !important;
        padding: 0 20px !important;
        border-radius: 99px !important;
        box-sizing: border-box !important;
        vertical-align: middle !important;
        margin: 0 !important;
    }
}

/* ==================================================================
   §JIJI_HEADER  JIJI UGANDA SIMPLE HEADER ACTION RAIL & CTA BUTTON
   ================================================================== */
.jiji-header-rail {
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
}

.jiji-icon-btn {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.16) !important;
    color: #ffffff !important;
    font-size: 20px !important;
    text-decoration: none !important;
    transition: all 0.2s ease-in-out !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08) !important;
}

.navbar-two .jiji-icon-btn,
body:not(.navbar-dark) .jiji-icon-btn,
.header-style-01 .navbar-two .jiji-icon-btn {
    background: #eef5f4 !important;
    color: #0f5b53 !important;
}

.jiji-icon-btn:hover {
    background: #ff8000 !important;
    color: #ffffff !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 10px rgba(255, 128, 0, 0.3) !important;
}

.jiji-badge {
    position: absolute !important;
    top: -2px !important;
    right: -2px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 18px !important;
    height: 18px !important;
    padding: 0 4px !important;
    border-radius: 99px !important;
    background: #e63946 !important;
    color: #ffffff !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2) !important;
}

.login-account-new .join-btn.jiji-cta-btn,
.jiji-cta-btn {
    background-color: #ff8000 !important;
    border: 1px solid #ff8000 !important;
    color: #ffffff !important;
    font-weight: 750 !important;
    font-size: 13.5px !important;
    padding: 0 20px !important;
    height: 42px !important;
    border-radius: 99px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.4px !important;
    box-shadow: 0 4px 14px rgba(255, 128, 0, 0.35) !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.login-account-new .join-btn.jiji-cta-btn:hover,
.jiji-cta-btn:hover {
    background-color: #e07000 !important;
    border-color: #e07000 !important;
    color: #ffffff !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 6px 18px rgba(255, 128, 0, 0.45) !important;
}

/* ---- Jiji Hero Search Banner -------------------------------- */
.jiji-hero-banner {
    background: #0f5b53 !important;
    padding: 42px 16px 48px !important;
    text-align: center !important;
    color: #ffffff !important;
    position: relative !important;
    z-index: 10 !important;
}

.jiji-hero-banner .jiji-hero-title {
    color: #ffffff !important;
    font-size: 28px !important;
    font-weight: 750 !important;
    margin-bottom: 22px !important;
    letter-spacing: -0.3px !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15) !important;
}

.jiji-hero-banner .mk-searchbar__inner {
    max-width: 680px !important;
    margin: 0 auto !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15) !important;
}

.jiji-hero-banner .mk-searchbar__loc {
    background: #ffffff !important;
    color: #2b3b38 !important;
    border-radius: 8px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
}

.jiji-hero-banner .mk-searchbar__loc:hover {
    background: #f0f4f3 !important;
    color: #0f5b53 !important;
}

.jiji-hero-banner .mk-searchbar__form {
    border-radius: 8px !important;
    background: #ffffff !important;
}

.jiji-hero-banner .mk-searchbar__form button {
    background: transparent !important;
    color: #6b7c79 !important;
    font-size: 18px !important;
    padding: 0 18px !important;
}

.jiji-hero-banner .mk-searchbar__form button:hover {
    color: #0f5b53 !important;
}

@media (max-width: 767.98px) {
    .jiji-hero-banner {
        padding: 24px 12px 28px !important;
    }
    .jiji-hero-banner .jiji-hero-title {
        font-size: 20px !important;
        margin-bottom: 16px !important;
    }
}

/* ==================================================================
   §NO_TEXT_HEADER  DESKTOP HEADER: NO TEXT LINKS, ONLY LOGO + ICONS + CTA
   ================================================================== */
@media only screen and (min-width: 992px) {
    /* Hide the middle text links menu completely from the desktop header */
    .navbar-area .nav-container .navbar-collapse {
        display: none !important;
    }

    /* Push the logo to the left and right action cluster to the far right */
    .navbar-area .nav-container {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 16px !important;
        width: 100% !important;
    }

    .navbar-area .nav-container .responsive-mobile-menu {
        flex: 0 0 auto !important;
        display: flex !important;
        align-items: center !important;
    }

    .navbar-area .nav-container .nav-right-content {
        flex: 0 0 auto !important;
        display: flex !important;
        align-items: center !important;
        margin-left: auto !important;
    }

    .navbar-area .nav-container .navbar-right-inner {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        gap: 14px !important;
    }
}

/* ==================================================================
   §JIJI_MENU_CARD  JIJI UGANDA PROFILE DROPDOWN MENU CARD
   ================================================================== */
.login-account.jiji-account-dropdown {
    position: relative !important;
}

.login-account.jiji-account-dropdown .account-list-item.jiji-menu-card {
    position: absolute !important;
    top: calc(100% + 12px) !important;
    right: 0 !important;
    left: auto !important;
    width: 220px !important;
    background: #ffffff !important;
    border-radius: 14px !important;
    box-shadow: 0 14px 35px rgba(0, 0, 0, 0.16), 0 3px 8px rgba(0, 0, 0, 0.06) !important;
    border: 1px solid #e1ecea !important;
    padding: 8px 0 !important;
    margin: 0 !important;
    list-style: none !important;
    z-index: 1000 !important;
}

.login-account.jiji-account-dropdown .account-list-item.jiji-menu-card li.list {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
}

.login-account.jiji-account-dropdown .account-list-item.jiji-menu-card li.list a {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 10px 18px !important;
    color: #243532 !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    transition: background 0.15s ease, color 0.15s ease !important;
}

.login-account.jiji-account-dropdown .account-list-item.jiji-menu-card li.list a i {
    font-size: 19px !important;
    color: #4a635f !important;
    width: 22px !important;
    text-align: center !important;
    transition: color 0.15s ease !important;
}

.login-account.jiji-account-dropdown .account-list-item.jiji-menu-card li.list a:hover {
    background: #f0f7f6 !important;
    color: #0f5b53 !important;
}

.login-account.jiji-account-dropdown .account-list-item.jiji-menu-card li.list a:hover i {
    color: #0f5b53 !important;
}

/* ==================================================================
   §JIJI_GUEST_HEADER  JIJI UGANDA GUEST HEADER (SIGN IN | REGISTRATION)
   ================================================================== */
.jiji-header-tagline {
    color: rgba(255, 255, 255, 0.75) !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
    margin: 0 auto !important;
}

.jiji-guest-header {
    display: inline-flex !important;
    align-items: center !important;
    gap: 10px !important;
}

.jiji-guest-header .login-link {
    color: #ffffff !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    text-decoration: none !important;
    transition: opacity 0.15s ease !important;
}

.navbar-two .jiji-guest-header .login-link,
body:not(.navbar-dark) .jiji-guest-header .login-link {
    color: #0f5b53 !important;
}

.jiji-guest-header .login-link:hover {
    opacity: 0.8 !important;
}

.jiji-guest-header .jiji-sep {
    color: rgba(255, 255, 255, 0.4) !important;
    font-size: 14px !important;
    font-weight: 400 !important;
}

.navbar-two .jiji-guest-header .jiji-sep,
body:not(.navbar-dark) .jiji-guest-header .jiji-sep {
    color: rgba(15, 91, 83, 0.4) !important;
}

/* ==================================================================
   §JIJI_DESKTOP_LAYOUT  DESKTOP CATEGORIES SIDEBAR + QUICK TILES
   ================================================================== */
.jiji-sidebar-card {
    background: #ffffff !important;
    border-radius: 14px !important;
    border: 1px solid #e2eae8 !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04) !important;
    overflow: hidden !important;
}

.jiji-sidebar-head {
    padding: 14px 18px !important;
    border-bottom: 1px solid #edf2f1 !important;
    background: #fafcfc !important;
}

.jiji-sidebar-title {
    font-size: 15px !important;
    font-weight: 750 !important;
    color: #0f5b53 !important;
    margin: 0 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}

.jiji-sidebar-list {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.jiji-sidebar-item {
    border-bottom: 1px solid #f2f7f6 !important;
}

.jiji-sidebar-item:last-child {
    border-bottom: none !important;
}

.jiji-sidebar-link {
    display: flex !important;
    align-items: center !important;
    padding: 11px 16px !important;
    text-decoration: none !important;
    color: #2b3a38 !important;
    transition: background 0.15s ease, color 0.15s ease !important;
}

.jiji-sidebar-link:hover {
    background: #f0f7f6 !important;
    color: #0f5b53 !important;
}

.jiji-sidebar-ic {
    width: 32px !important;
    height: 32px !important;
    border-radius: 8px !important;
    background: #eef6f5 !important;
    color: #0f5b53 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 18px !important;
    margin-right: 12px !important;
    flex-shrink: 0 !important;
}

.jiji-sidebar-ic img {
    width: 20px !important;
    height: 20px !important;
    object-fit: contain !important;
}

.jiji-sidebar-info {
    flex: 1 1 auto !important;
    min-width: 0 !important;
}

.jiji-sidebar-name {
    display: block !important;
    font-size: 13.5px !important;
    font-weight: 650 !important;
    color: #2b3a38 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.jiji-sidebar-count {
    display: block !important;
    font-size: 11px !important;
    color: #7b8e8b !important;
}

.jiji-sidebar-arrow {
    font-size: 14px !important;
    color: #a0b2af !important;
    margin-left: 6px !important;
}

/* Quick Action Banner Tiles */
.jiji-tile-strip {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 12px !important;
}

.jiji-tile {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 14px 10px !important;
    border-radius: 12px !important;
    text-decoration: none !important;
    text-align: center !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
    border: 1px solid rgba(0, 0, 0, 0.05) !important;
}

.jiji-tile:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08) !important;
}

.jiji-tile--gold { background: #fff8eb !important; color: #b45309 !important; }
.jiji-tile--mint { background: #eefcf6 !important; color: #047857 !important; }
.jiji-tile--blue { background: #eff6ff !important; color: #1d4ed8 !important; }
.jiji-tile--purple { background: #f5f3ff !important; color: #6d28d9 !important; }

.jiji-tile-ic {
    font-size: 24px !important;
    margin-bottom: 6px !important;
}

.jiji-tile-label {
    font-size: 12.5px !important;
    font-weight: 700 !important;
}

@media (max-width: 767.98px) {
    .jiji-tile-strip {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* Sidebar row and chevron toggle button */
.jiji-sidebar-row {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
}

.jiji-sidebar-row .jiji-sidebar-link {
    flex: 1 1 auto !important;
}

.jiji-sidebar-toggle-btn {
    background: transparent !important;
    border: none !important;
    outline: none !important;
    color: #556c68 !important;
    font-size: 16px !important;
    padding: 10px 14px !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: transform 0.2s ease, color 0.2s ease !important;
}

.jiji-sidebar-toggle-btn:hover {
    color: #0f5b53 !important;
}

.jiji-sidebar-item.is-open .jiji-sidebar-toggle-btn i {
    transform: rotate(180deg) !important;
    color: #0f5b53 !important;
}

/* Nested Subcategories in Sidebar */
.jiji-subcat-list {
    display: none !important;
    list-style: none !important;
    padding: 4px 0 8px 52px !important;
    margin: 0 !important;
    background: #fafdfd !important;
    border-top: 1px dashed #e5f0ee !important;
}

.jiji-sidebar-item.is-open .jiji-subcat-list {
    display: block !important;
}

.jiji-subcat-item {
    margin: 2px 0 !important;
}

.jiji-subcat-link {
    display: block !important;
    padding: 5px 12px !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
    color: #556c68 !important;
    text-decoration: none !important;
    border-radius: 6px !important;
    transition: all 0.15s ease !important;
}

.jiji-subcat-link:hover,
.jiji-subcat-item.active .jiji-subcat-link {
    color: #0f5b53 !important;
    background: #e6f4f1 !important;
    font-weight: 700 !important;
}

.jiji-sidebar-item.active .jiji-sidebar-link {
    background: #eef7f5 !important;
    color: #0f5b53 !important;
}

/* ==========================================================================
   §JIJI_SINGLE_PRODUCT_PAGE (Jiji-style Product & Service Details)
   ========================================================================== */
.jiji-single-container {
    padding-top: 24px !important;
    padding-bottom: 60px !important;
}

/* Breadcrumbs */
.jiji-breadcrumbs {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    margin-bottom: 20px !important;
    list-style: none !important;
    padding: 0 !important;
}

.jiji-crumb-item {
    font-size: 13px !important;
    color: #6b7c79 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.jiji-crumb-item a {
    color: #556c68 !important;
    text-decoration: none !important;
    font-weight: 500 !important;
    background: #ffffff !important;
    padding: 4px 10px !important;
    border-radius: 16px !important;
    border: 1px solid #e2ece9 !important;
    transition: all 0.2s ease !important;
}

.jiji-crumb-item a:hover {
    color: #0f5b53 !important;
    border-color: #0f5b53 !important;
}

.jiji-crumb-item.active span {
    font-weight: 600 !important;
    color: #1a2b27 !important;
    background: #f0f7f5 !important;
    padding: 4px 10px !important;
    border-radius: 16px !important;
}

.jiji-crumb-sep {
    color: #a0b2af !important;
    font-size: 11px !important;
}

/* White Card Wrapper */
.jiji-card {
    background: #ffffff !important;
    border-radius: 12px !important;
    border: 1px solid #e5f0ee !important;
    padding: 24px !important;
    margin-bottom: 24px !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.03) !important;
}

/* Image Gallery Viewer */
.jiji-gallery-stage {
    position: relative !important;
    width: 100% !important;
    height: 440px !important;
    border-radius: 10px !important;
    overflow: hidden !important;
    background: #f8faf9 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.jiji-gallery-stage img {
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
}

.jiji-gallery-counter {
    position: absolute !important;
    top: 14px !important;
    left: 14px !important;
    background: rgba(0,0,0,0.65) !important;
    color: #ffffff !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    padding: 4px 10px !important;
    border-radius: 6px !important;
}

.jiji-thumbs-row {
    display: flex !important;
    gap: 10px !important;
    margin-top: 14px !important;
    overflow-x: auto !important;
    padding-bottom: 4px !important;
}

.jiji-thumb-item {
    width: 90px !important;
    height: 65px !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    border: 2px solid transparent !important;
    cursor: pointer !important;
    flex-shrink: 0 !important;
    transition: all 0.2s ease !important;
}

.jiji-thumb-item.active,
.jiji-thumb-item:hover {
    border-color: #0f5b53 !important;
}

.jiji-thumb-item img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

/* Product Header & Meta */
.jiji-product-title {
    font-size: 24px !important;
    font-weight: 700 !important;
    color: #1a2b27 !important;
    line-height: 1.3 !important;
    margin-bottom: 12px !important;
}

.jiji-meta-bar {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 16px !important;
    padding-bottom: 18px !important;
    margin-bottom: 20px !important;
    border-bottom: 1px solid #edf4f2 !important;
    font-size: 13px !important;
    color: #556c68 !important;
}

.jiji-meta-item {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
}

/* Key Specifications Grid */
.jiji-specs-title {
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #1a2b27 !important;
    margin-bottom: 16px !important;
}

.jiji-specs-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 16px 24px !important;
    margin-bottom: 24px !important;
}

.jiji-spec-box {
    display: flex !important;
    flex-direction: column !important;
}

.jiji-spec-label {
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    color: #8fa39e !important;
    letter-spacing: 0.5px !important;
    margin-bottom: 4px !important;
}

.jiji-spec-value {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #243532 !important;
}

/* Description Block */
.jiji-desc-body {
    font-size: 14.5px !important;
    line-height: 1.7 !important;
    color: #384d48 !important;
}

/* Price Sidebar Card */
.jiji-price-amount {
    font-size: 28px !important;
    font-weight: 800 !important;
    color: #0f5b53 !important;
    line-height: 1.1 !important;
    margin-bottom: 6px !important;
}

.jiji-price-badge {
    display: inline-block !important;
    background: #eef7f5 !important;
    color: #0f5b53 !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    padding: 3px 10px !important;
    border-radius: 12px !important;
    margin-bottom: 20px !important;
}

/* Buttons */
.jiji-btn-green {
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    background: #0f5b53 !important;
    color: #ffffff !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    padding: 12px 20px !important;
    border-radius: 8px !important;
    text-decoration: none !important;
    border: none !important;
    transition: background 0.2s ease !important;
    margin-bottom: 10px !important;
}

.jiji-btn-green:hover {
    background: #093b36 !important;
    color: #ffffff !important;
}

.jiji-btn-outline {
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    background: #ffffff !important;
    color: #0f5b53 !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    padding: 11px 20px !important;
    border-radius: 8px !important;
    border: 2px solid #0f5b53 !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
    margin-bottom: 10px !important;
}

.jiji-btn-outline:hover {
    background: #eef7f5 !important;
    color: #093b36 !important;
}

/* Provider Profile Card */
.jiji-seller-head {
    display: flex !important;
    align-items: center !important;
    gap: 14px !important;
    margin-bottom: 16px !important;
}

.jiji-seller-avatar {
    width: 56px !important;
    height: 56px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    border: 2px solid #0f5b53 !important;
}

.jiji-seller-name {
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #1a2b27 !important;
    margin: 0 0 4px 0 !important;
}

.jiji-seller-badges {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
}

/* Safety Tips */
.jiji-safety-title {
    font-size: 15px !important;
    font-weight: 700 !important;
    color: #1a2b27 !important;
    margin-bottom: 12px !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.jiji-safety-list {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    font-size: 13px !important;
    color: #556c68 !important;
}

.jiji-safety-list li {
    position: relative !important;
    padding-left: 20px !important;
    margin-bottom: 10px !important;
    line-height: 1.4 !important;
}

.jiji-safety-list li::before {
    content: "•" !important;
    position: absolute !important;
    left: 4px !important;
    color: #0f5b53 !important;
    font-size: 16px !important;
}