/*
 * Wellness To Call — 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);
}

.new_service__single__thumb img {
    transition: transform .35s ease;
}

.new_service__single:hover .new_service__single__thumb img {
    transform: scale(1.05);
    object-fit: cover;
    border-radius: 16px 16px 0 0;
}

.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: cover !important;
    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-background-image {
    aspect-ratio: 16 / 9;
    background-size: cover;
    background-position: center;
    border-radius: 20px;
    transition: transform 0.4s ease;
}
.details-thumb:hover .service-details-background-image {
    transform: scale(1.02);
}

/* 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: none !important;
    background: var(--main-color-two, #C0552F) !important;
}
.single-packages .btn-wrapper .cmn-btn:hover {
    background: var(--wtc-clay, #DE6E4B) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 12px 24px -5px rgba(192, 85, 47, 0.4) !important;
}
.single-packages .live-chat-button-class-for-style {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 12px;
    width: 100%;
    background: transparent !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 {
    background: var(--main-color-one, #12504A) !important;
    color: #ffffff !important;
    transform: translateY(-2px) !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;
        bottom: 14px !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;
        bottom: 72px !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;
}