/* =====================================================================
   TruelySell core stylesheet.

   Loaded on every page, for both LTR and RTL, after the theme so its
   overrides apply. Holds the shared palette, the site-wide chrome
   (header, sidebar, dropdowns, toasts, cookie bar) and the paginator.

   Page-specific stylesheets load after this one and reference the
   --ts-* palette below rather than redeclaring colour values.

   Merged from: site-header, user-sidebar, dashboard-ui, header-menus,
   cookie-consent, pagination.
   ===================================================================== */

:root {
    /* Text */
    --ts-ink: #101828;
    --ts-body: #475467;
    --ts-muted: #667085;
    --ts-faint: #98a2b3;

    /* Brand and status */
    --ts-brand: #fd2692;
    --ts-brand-dark: #e01a80;
    --ts-blue: #0a67f2;
    --ts-green: #12b76a;
    --ts-amber: #f79009;
    --ts-red: #f04438;
    --ts-violet: #7a5af8;
    --ts-teal: #0ba5a5;

    /* Hairlines */
    --ts-line-soft: rgba(16, 24, 40, .07);
    --ts-line: rgba(16, 24, 40, .09);
    --ts-line-10: rgba(16, 24, 40, .1);
    --ts-line-strong: rgba(16, 24, 40, .14);
}

/* One shimmer for every skeleton on the site. Page files reference this by
   name rather than each declaring an identical copy. */
@keyframes ts-shimmer {
    0%   { background-position: 100% 0; }
    100% { background-position: 0 0; }
}


/* =====================================================================
   Site header  (was site-header.css)
   ===================================================================== */

.header-new {
    background: #fff;
    border-bottom: 1px solid rgba(16, 24, 40, .08);
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
}

.header-new .header-nav {
    height: 76px;
    padding-inline: 12px;
    gap: 18px;
}

/* Right-hand control cluster: language / sign in / join us */
.header-new .header-btn {
    gap: 10px;
}

.header-new .header-navbar-rht {
    margin: 0;
    padding: 0;
    gap: 10px;
    /* Bootstrap's .nav is flex-wrap:wrap, which let Sign in / Join us drop
       onto a second line once the bar got tight. */
    flex-wrap: nowrap;
    flex: 0 0 auto;
}

.header-new .header-btn {
    flex: 0 0 auto;
}

.header-new .header-navbar-rht>li {
    margin: 0;
    padding: 0;
}

.header-new .navbar-brand.logo img {
    max-height: 38px;
    width: auto;
}

/* The bar must never wrap onto a second line. */
@media (min-width: 992px) {
    .header-new .header-nav {
        flex-wrap: nowrap;
    }

    .header-new .main-menu-wrapper {
        min-width: 0;
    }

    .header-new .main-nav {
        flex-wrap: nowrap;
    }

    .header-new .main-nav>li>a,
    .header-new .header-navbar-rht .btn {
        white-space: nowrap;
    }
}

/* Compact tier: below ~1400px the full set no longer fits comfortably, so
   trim padding first, then drop the provider label to an icon. */
@media (min-width: 992px) and (max-width: 1399.98px) {
    .header-new .header-nav {
        gap: 10px;
    }

    .header-new .main-nav>li>a:not(.btn):not(.nav-categories-toggle):not(.btn-become-provider),
    .header-new .main-nav>li.dropdown>.nav-link.dropdown-toggle {
        padding: 0 9px !important;
        font-size: 14.5px;
    }

    .header-new .nav-categories-toggle {
        padding: 0 12px;
    }

    .header-new .header-navbar-rht .btn {
        padding: 0 14px;
        font-size: 14px;
    }
}

@media (min-width: 992px) and (max-width: 1399.98px) {
    .header-new .btn-become-provider {
        padding: 0 10px;
        font-size: 14px;
    }

    .header-new .language-selects .lang-code {
        display: none;
    }
}

/* ---- Nav links ----
   The theme gives these line-height:85px; the bar is 76px, so the text and
   the active underline both sat off-centre. Re-align to the real height. */
@media (min-width: 992px) {
    .header-new .main-nav>li>a:not(.btn) {
        line-height: 74px !important;
    }

    .header-new .main-nav>li {
        margin-right: 4px !important;
    }

    .header-new .main-nav>li>a:not(.btn):not(.nav-categories-toggle):not(.btn-become-provider) {
        padding: 0 14px !important;
    }

    /* Breathing room around the two control clusters */
    .header-new .main-nav>li:first-child {
        margin-right: 14px !important;
    }
}

.header-new .main-nav>li>a:not(.btn) {
    position: relative;
    font-weight: 500;
    font-size: 15px;
    color: #344054;
    transition: color .18s ease;
}

.header-new .main-nav>li>a:not(.btn):hover,
.header-new .main-nav>li.active>a:not(.btn) {
    color: var(--primary, #FD2692);
}

.header-new .main-nav>li>a:not(.btn)::after {
    content: "";
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 22px;
    height: 2px;
    border-radius: 2px;
    background: var(--primary, #FD2692);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform .2s ease;
}

/* The theme ships a global `.dropdown .dropdown-toggle` rule that paints a
   white box + 1px border on ANY dropdown toggle. That turned the Service
   and How It Works nav links into bordered boxes. Neutralise it for the
   header nav (the Categories pill and language button keep their own). */
.header-new .main-nav>li.dropdown>.nav-link.dropdown-toggle,
.header-new .main-nav>li>.dropdown>a.dropdown-toggle:not(.nav-categories-toggle):not(.language-selects) {
    background-color: transparent;
    border: 0;
    border-radius: 0;
    padding: 0 14px;
    font-size: 15px;
    font-weight: 500;
    color: #344054;
}

.header-new .main-nav>li.dropdown>.nav-link.dropdown-toggle::after {
    display: none;
}

.header-new .main-nav>li.dropdown>.nav-link.dropdown-toggle .fa-chevron-down {
    font-size: 11px;
    margin-left: 6px;
    opacity: .55;
    transition: transform .18s ease;
}

.header-new .main-nav>li.dropdown.show>.nav-link.dropdown-toggle .fa-chevron-down {
    transform: rotate(180deg);
    opacity: 1;
}

.header-new .main-nav>li.dropdown>.nav-link.dropdown-toggle:hover,
.header-new .main-nav>li.dropdown.show>.nav-link.dropdown-toggle {
    color: var(--primary, #FD2692);
}

/* The pill / CTA style links must not get the underline treatment. */
.header-new .main-nav>li>a.nav-categories-toggle::after,
.header-new .main-nav>li>a.btn-become-provider::after,
.header-new .main-nav>li .dropdown>a::after {
    display: none;
}

.header-new .main-nav>li.active>a:not(.btn)::after,
.header-new .main-nav>li>a:not(.btn):hover::after {
    transform: scaleX(1);
}

/* ---- Categories pill ---- */
.header-new .nav-categories-toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 42px;
    padding: 0 16px;
    border: 1px solid rgba(16, 24, 40, .12);
    border-radius: 10px;
    background: #fff;
    font-weight: 500;
    transition: all .18s ease;
}

.header-new .nav-categories-toggle:hover {
    border-color: var(--primary, #FD2692);
    color: var(--primary, #FD2692);
}

/* ---- Shared dropdown panel ----
   These use data-bs-display="static" so Popper never repositions them.
   Placement is handled here, which stops the panels being flipped above
   the bar or pushed off the left edge by the header's own stacking. */
.header-new .dropdown {
    position: relative;
}

.header-new .nav-panel {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: auto;
    transform: none !important;
    inset: auto auto auto 0 !important;
    z-index: 1002;
    background: #fff;
    border: 1px solid rgba(16, 24, 40, .08);
    border-radius: 14px;
    box-shadow: 0 16px 40px rgba(16, 24, 40, .12);
    padding: 12px;
    margin-top: 12px;
    animation: navPanelIn .18s ease;
}

.header-new .nav-panel.show {
    display: block;
}

/* Panels near the right edge open right-aligned so they stay on screen. */
.header-new .main-nav>li:nth-last-child(-n+3) .nav-panel {
    left: auto;
    right: 0;
    inset: auto 0 auto auto !important;
}

@keyframes navPanelIn {
    from {
        opacity: 0;
        transform: translateY(-6px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .header-new .nav-panel {
        animation: none;
    }
}

.header-new .nav-panel-title {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #98a2b3;
    padding: 6px 12px 8px;
    margin: 0;
}

/* ---- Rich item rows (Services / How It Works) ---- */
.header-new .nav-rich-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 11px 12px;
    border-radius: 10px;
    color: inherit;
    text-decoration: none;
    transition: background .16s ease;
}

.header-new .nav-rich-item:hover {
    background: rgba(253, 38, 150, .06);
}

.header-new .nav-rich-icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    /* Neutral gray: the icons are wayfinding, not accents. */
    background: rgba(16, 24, 40, .06);
    color: #667085;
    font-size: 19px;
}

.header-new .nav-rich-title {
    display: block;
    font-size: 14.5px;
    font-weight: 600;
    line-height: 1.3;
    margin-bottom: 2px;
}

.header-new .nav-rich-desc {
    display: block;
    font-size: 12.5px;
    line-height: 1.45;
    color: #667085;
}

.header-new .nav-panel-footer {
    border-top: 1px solid rgba(16, 24, 40, .08);
    margin-top: 8px;
    padding: 10px 12px 4px;
}

.header-new .nav-panel-footer a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    font-weight: 600;
    color: var(--primary, #FD2692);
    text-decoration: none;
}

.header-new .nav-panel-footer a:hover {
    gap: 10px;
}

/* ---- Category grid ---- */
.header-new .nav-category-panel {
    width: 520px;
    max-width: calc(100vw - 32px);
}

.header-new .nav-category-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2px;
    max-height: 340px;
    overflow-y: auto;
}

.header-new .nav-category-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    border-radius: 10px;
    color: inherit;
    text-decoration: none;
    transition: background .16s ease;
}

.header-new .nav-category-item:hover {
    background: rgba(253, 38, 150, .06);
}

.header-new .nav-category-icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: rgba(16, 24, 40, .04);
    overflow: hidden;
}

.header-new .nav-category-icon img {
    width: 18px;
    height: 18px;
    object-fit: contain;
}

.header-new .nav-category-name {
    flex: 1 1 auto;
    font-size: 14px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.header-new .nav-category-count {
    flex: 0 0 auto;
    font-size: 11.5px;
    color: #98a2b3;
    background: rgba(16, 24, 40, .05);
    border-radius: 999px;
    padding: 1px 8px;
}

/* ---- Become a provider (secondary CTA) ---- */
.header-new .btn-become-provider {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 42px;
    padding: 0 14px;
    gap: 6px;
    padding: 0 14px;
    border: 0;
    border-radius: 12px;
    font-size: 14.5px;
    font-weight: 500;
    color: #344054;
    background: transparent;
    transition: background .18s ease, color .18s ease;
}

/* Icon sits in its own soft chip — reads as a feature, not a bordered box */
.header-new .btn-become-provider i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    font-size: 16px;
    color: var(--secondary, #0A67F2);
    background: rgba(10, 103, 242, .1);
    transition: background .18s ease, transform .18s ease;
}

.header-new .btn-become-provider:hover {
    color: var(--secondary, #0A67F2);
    background: rgba(16, 24, 40, .04);
}

/* ---- Language ---- */
/* Separate the language control from the provider link so the two
   borderless controls don't read as one blob. */
.header-new .main-nav>li.nav-lang-item {
    position: relative;
    margin-left: 10px !important;
    padding-left: 10px;
}

@media (min-width: 992px) {
    .header-new .main-nav>li.nav-lang-item::before {
        content: "";
        position: absolute;
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 1px;
        height: 22px;
        background: rgba(16, 24, 40, .12);
    }
}

.header-new .language-selects {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    height: 42px;
    padding: 0 10px;
    border: 0;
    border-radius: 12px;
    background: transparent;
    font-size: 13.5px;
    font-weight: 600;
    color: #475467;
    transition: background .18s ease;
}

.header-new .language-selects::after {
    display: none;
}

.header-new .language-selects img {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    object-fit: cover;
    box-shadow: 0 0 0 1px rgba(16, 24, 40, .08);
}

.header-new .language-selects .lang-code {
    text-transform: uppercase;
    letter-spacing: .04em;
}

.header-new .language-selects .ti-chevron-down {
    font-size: 13px;
    opacity: .5;
    transition: transform .18s ease;
}

.header-new .language-selects:hover {
    background: rgba(16, 24, 40, .05);
    color: #101828;
}

.header-new .dropdown.show>.language-selects {
    background: rgba(16, 24, 40, .06);
    color: #101828;
}

.header-new .dropdown.show>.language-selects .ti-chevron-down {
    transform: rotate(180deg);
    opacity: .9;
}

.header-new .language-menu {
    min-width: 210px;
    padding: 8px;
    border: 1px solid rgba(16, 24, 40, .08);
    border-radius: 12px;
    box-shadow: 0 16px 40px rgba(16, 24, 40, .12);
}

.header-new .language-menu .dropdown-item {
    border-radius: 8px;
    padding: 9px 10px;
    font-size: 14px;
}

.header-new .language-menu .dropdown-item img {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    object-fit: cover;
}

.header-new .language-menu .dropdown-item.is-active {
    background: rgba(253, 38, 150, .08);
    color: var(--primary, #FD2692);
    font-weight: 600;
}

/* ---- Auth buttons ---- */
.header-new .header-navbar-rht .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 42px;
    padding: 0 18px;
    border-radius: 10px;
    font-size: 14.5px;
    font-weight: 600;
    white-space: nowrap;
}

.header-new .btn-signin {
    border: 1px solid rgba(16, 24, 40, .14);
    background: #fff;
    color: #101828;
    transition: all .18s ease;
}

.header-new .btn-signin:hover {
    border-color: rgba(16, 24, 40, .3);
    background: #fff;
}

.header-new .btn-joinus {
    border: 0;
    color: #fff;
    box-shadow: 0 4px 14px rgba(253, 38, 150, .28);
    transition: transform .18s ease, box-shadow .18s ease;
}

.header-new .btn-joinus:hover {
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(253, 38, 150, .34);
}

.header-new .btn-joinus:active {
    transform: translateY(0);
}

/* ---- Mobile drawer ---- */
@media (max-width: 991.98px) {
    .header-new .header-nav {
        height: 66px;
    }

    .header-new .nav-panel,
    .header-new .nav-category-panel {
        width: 100%;
        max-width: none;
        border: 0;
        box-shadow: none;
        padding: 0;
        margin-top: 4px;
    }

    .header-new .nav-category-grid {
        grid-template-columns: 1fr;
        max-height: none;
    }

    .header-new .nav-categories-toggle {
        width: 100%;
        justify-content: space-between;
    }

    .header-new .btn-become-provider {
        width: 100%;
        justify-content: center;
        margin-top: 4px;
    }

    .header-new .mobile-header .main-nav>li {
        border-bottom: 1px solid rgba(16, 24, 40, .07);
    }
}

/* =====================================================================
   Customer dashboard sidebar  (was user-sidebar.css)
   ===================================================================== */

/* =====================================================================
   Customer dashboard sidebar.

   Overrides the theme's flat .user-sidebar card with a SaaS-style nav:
   a quieter profile block, grouped links, a clear active state and
   properly aligned icons. Scoped to .user-sidebar-col so no other
   sidebar on the site is affected.
   ===================================================================== */

.user-sidebar-col {
    --us-line: var(--ts-line, rgba(16, 24, 40, .09));
    --us-ink: var(--ts-ink, #101828);
    --us-muted: var(--ts-muted, #667085);
    --us-faint: var(--ts-faint, #98a2b3);
}

/* ---- Card ---- */
.user-sidebar-col .user-sidebar {
    border: 1px solid var(--us-line);
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
    overflow: hidden;
}

/* ---- Profile block ---- */
.user-sidebar-col .user-sidebar-header {
    padding: 24px 20px 20px;
    margin-bottom: 0;
    border-bottom: 1px solid var(--us-line);
    background: #fbfcfd;
}

.user-sidebar-col .user-sidebar-header .avatar {
    width: 72px;
    height: 72px;
    margin-bottom: 12px;
    border-radius: 50%;
    padding: 3px;
    background: #fff;
    box-shadow: 0 0 0 1px var(--us-line);
}
.user-sidebar-col .user-sidebar-header .avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.user-sidebar-col .user-sidebar-header h6 {
    margin-bottom: 4px;
    font-size: 16px;
    font-weight: 650;
    letter-spacing: -.015em;
    color: var(--us-ink);
}

.user-sidebar-col .user-sidebar-header p {
    margin-bottom: 0;
    font-size: 12.5px;
    color: var(--us-faint);
}

/* ---- Navigation ---- */
.user-sidebar-col .user-sidebar-body {
    padding: 12px 12px 14px;
}

.user-sidebar-col .user-sidebar-body ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* The theme spaces items with mb-4; a nav list wants a tighter rhythm. */
.user-sidebar-col .user-sidebar-body > ul > li {
    margin-bottom: 2px !important;
}
.user-sidebar-col .user-sidebar-body > ul > li:last-child {
    margin-bottom: 0 !important;
}

.user-sidebar-col .user-sidebar-body > ul > li > a {
    position: relative;
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 10px 12px;
    border-radius: 10px;
    font-size: 14.5px;
    font-weight: 500;
    color: #475467;
    text-decoration: none;
    transition: background .16s ease, color .16s ease;
}

.user-sidebar-col .user-sidebar-body > ul > li > a i {
    width: 20px;
    font-size: 18px;
    color: var(--us-faint);
    transition: color .16s ease;
}

@media (hover: hover) {
    .user-sidebar-col .user-sidebar-body > ul > li > a:hover {
        background: #f4f5f7;
        color: var(--us-ink);
    }
    .user-sidebar-col .user-sidebar-body > ul > li > a:hover i {
        color: #475467;
    }
}

/* Active item: filled pill plus an accent rail, so the current page is
   obvious without relying on colour alone. */
.user-sidebar-col .user-sidebar-body > ul > li > a.active {
    background: rgba(253, 38, 150, .07);
    color: var(--primary, #FD2692);
    font-weight: 650;
}
.user-sidebar-col .user-sidebar-body > ul > li > a.active i {
    color: var(--primary, #FD2692);
}
.user-sidebar-col .user-sidebar-body > ul > li > a.active::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 20px;
    border-radius: 0 3px 3px 0;
    background: var(--primary, #FD2692);
}

/* Chat unread badge */
.user-sidebar-col .user-sidebar-body .badge {
    font-size: 11px;
    font-weight: 700;
    padding: 3px 7px;
    border-radius: 999px;
}

/* ---- Settings submenu ---- */
.user-sidebar-col .user-sidebar-body .submenu > a {
    justify-content: space-between;
}
.user-sidebar-col .user-sidebar-body .submenu > a .menu-arrow {
    margin-left: auto;
    transition: transform .2s ease;
}
.user-sidebar-col .user-sidebar-body .submenu ul {
    margin-left: 0 !important;
    padding: 2px 0 2px 30px;
}
.user-sidebar-col .user-sidebar-body .submenu ul li {
    margin-bottom: 0 !important;
}
.user-sidebar-col .user-sidebar-body .submenu ul li a {
    display: flex;
    align-items: center;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 13.5px;
    color: var(--us-muted);
    text-decoration: none;
    transition: background .16s ease, color .16s ease;
}
.user-sidebar-col .user-sidebar-body .submenu ul li a i {
    font-size: 15px;
    color: var(--us-faint);
}
@media (hover: hover) {
    .user-sidebar-col .user-sidebar-body .submenu ul li a:hover {
        background: #f4f5f7;
        color: var(--us-ink);
    }
}
.user-sidebar-col .user-sidebar-body .submenu ul li a.active {
    color: var(--primary, #FD2692);
    font-weight: 600;
}

/* Logout reads as a terminal action, separated from the nav above it. */
.user-sidebar-col .user-sidebar-body > ul > li:last-child > a {
    margin-top: 6px;
    padding-top: 14px;
    border-top: 1px solid var(--us-line);
    border-radius: 0;
    color: #b42318;
}
.user-sidebar-col .user-sidebar-body > ul > li:last-child > a i {
    color: #b42318;
}
@media (hover: hover) {
    .user-sidebar-col .user-sidebar-body > ul > li:last-child > a:hover {
        background: rgba(240, 68, 56, .05);
        color: #912018;
    }
}

@media (prefers-reduced-motion: reduce) {
    .user-sidebar-col .user-sidebar-body a,
    .user-sidebar-col .user-sidebar-body a i { transition: none; }
}

/* =====================================================================
   Dashboard shell and toast overrides  (was dashboard-ui.css)
   ===================================================================== */

/* =====================================================================
   Shared customer-dashboard chrome.

   1. One page surface across every authenticated dashboard page, matching
      the Quote Requests page.
   2. A premium replacement for toastr's default look, done entirely in
      CSS so none of the ~400 existing toastr calls change.
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. Dashboard page background
   The customer sidebar only appears on dashboard pages, so it identifies
   them without needing a class on every wrapper.
   --------------------------------------------------------------------- */
body:has(.user-sidebar-col) { background: #f4f5f7; }

.page-wrapper:has(.user-sidebar-col) {
    background: #f4f5f7;
    min-height: 70vh;
}

/* The theme's .content paints an opaque white slab that would otherwise
   show as a band across the grey page. */
.page-wrapper:has(.user-sidebar-col) > .content { background: transparent; }

/* Give pages that carry no padding of their own the same breathing room
   the Quote Requests page has. */
.page-wrapper:has(.user-sidebar-col):not(.qr-page):not(.qd-page):not(.rq-page):not(.gq-page) {
    padding: clamp(24px, 3vw, 40px) 0 clamp(44px, 6vw, 72px);
}

/* =====================================================================
   2. Toastr
   Overrides the plugin stylesheet: no gradient tiles, no bitmap icons,
   no heavy shadow. One white surface, a coloured accent rail and a
   circular status icon.
   ===================================================================== */

#toast-container { pointer-events: none; }

#toast-container > div {
    position: relative;
    overflow: hidden;
    width: 360px;
    max-width: calc(100vw - 32px);
    padding: 16px 44px 16px 58px;
    margin: 0 0 12px;

    background: #fff;
    border: 1px solid rgba(16, 24, 40, .1);
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(16, 24, 40, .14), 0 2px 6px rgba(16, 24, 40, .06);

    /* The plugin ships base64 tile icons; the circle below replaces them. */
    background-image: none !important;
    opacity: 1;
    pointer-events: auto;
    transition: transform .2s ease, box-shadow .2s ease;
}

#toast-container > div:hover {
    box-shadow: 0 16px 40px rgba(16, 24, 40, .18), 0 2px 6px rgba(16, 24, 40, .06);
    opacity: 1;
}

/* Accent rail carries the status colour. */
#toast-container > div::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
}

/* Circular status icon, drawn from a data URI so it needs no icon font. */
#toast-container > div::after {
    content: "";
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 16px 16px;
}

#toast-container > .toast-success::before { background: #12b76a; }
#toast-container > .toast-success::after {
    background-color: rgba(18, 183, 106, .12);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23027a48' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
}

#toast-container > .toast-error::before { background: #f04438; }
#toast-container > .toast-error::after {
    background-color: rgba(240, 68, 56, .12);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b42318' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3C/svg%3E");
}

#toast-container > .toast-warning::before { background: #f79009; }
#toast-container > .toast-warning::after {
    background-color: rgba(247, 144, 9, .14);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b54708' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='12' y1='8' x2='12' y2='13'/%3E%3Cline x1='12' y1='17' x2='12.01' y2='17'/%3E%3C/svg%3E");
}

#toast-container > .toast-info::before { background: #0a67f2; }
#toast-container > .toast-info::after {
    background-color: rgba(10, 103, 242, .12);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230a67f2' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='12' y1='11' x2='12' y2='16'/%3E%3Cline x1='12' y1='7' x2='12.01' y2='7'/%3E%3C/svg%3E");
}

#toast-container .toast-title {
    margin-bottom: 2px;
    font-size: 14.5px;
    font-weight: 650;
    letter-spacing: -.01em;
    color: #101828;
}

#toast-container .toast-message {
    font-size: 13.5px;
    line-height: 1.55;
    color: #475467;
    word-break: break-word;
}

#toast-container .toast-close-button {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 22px;
    height: 22px;
    padding: 0;
    border-radius: 6px;

    color: #98a2b3;
    font-size: 17px;
    font-weight: 400;
    line-height: 20px;
    text-shadow: none;
    opacity: 1;
    transition: background .16s ease, color .16s ease;
}
#toast-container .toast-close-button:hover,
#toast-container .toast-close-button:focus {
    background: rgba(16, 24, 40, .06);
    color: #101828;
    opacity: 1;
}

/* Timing bar, kept thin and tinted to the status colour. */
#toast-container .toast-progress {
    position: absolute;
    left: 0;
    bottom: 0;
    height: 2px;
    opacity: 1;
    background: rgba(16, 24, 40, .18);
}
#toast-container > .toast-success .toast-progress { background: #12b76a; }
#toast-container > .toast-error   .toast-progress { background: #f04438; }
#toast-container > .toast-warning .toast-progress { background: #f79009; }
#toast-container > .toast-info    .toast-progress { background: #0a67f2; }

/* Position: clear of the header, and full width on small screens. */
#toast-container.toast-top-right {
    top: 84px;
    right: 16px;
}
@media (max-width: 575.98px) {
    #toast-container.toast-top-right {
        top: 72px;
        right: 12px;
        left: 12px;
    }
    #toast-container > div { width: auto; }
}

@media (prefers-reduced-motion: reduce) {
    #toast-container > div { transition: none; }
}

/* The theme's stylenew.css sets solid fills and white text on the success and
   error toasts with !important, which beats any specificity. These match that
   weight so every toast shares one white surface. */
#toast-container > .toast,
#toast-container > .toast-success,
#toast-container > .toast-error,
#toast-container > .toast-warning,
#toast-container > .toast-info {
    background-color: #fff !important;
    background-image: none !important;
}

#toast-container > .toast-success .toast-message,
#toast-container > .toast-error .toast-message,
#toast-container > .toast-warning .toast-message,
#toast-container > .toast-info .toast-message {
    color: #475467 !important;
}

#toast-container > .toast-success .toast-title,
#toast-container > .toast-error .toast-title,
#toast-container > .toast-warning .toast-title,
#toast-container > .toast-info .toast-title {
    color: #101828 !important;
}

/* =====================================================================
   Header notification and account dropdowns  (was header-menus.css)
   ===================================================================== */

/* =====================================================================
   Header notification and account dropdowns.

   Two panels sharing one design system: same radius, shadow, type scale,
   icon size and hover treatment. Only these two menus are affected — the
   logo, categories, service menu, language selector and wishlist link keep
   their existing styling.
   ===================================================================== */

.hn-panel,
.hp-panel {
    --hm-line: var(--ts-line, rgba(16, 24, 40, .09));
    --hm-ink: var(--ts-ink, #101828);
    --hm-body: var(--ts-body, #475467);
    --hm-muted: var(--ts-faint, #98a2b3);
    --hm-brand: var(--ts-brand, #fd2692);
    --hm-blue: var(--ts-blue, #0a67f2);
    --hm-green: var(--ts-green, #12b76a);
    --hm-violet: var(--ts-violet, #7a5af8);
    --hm-amber: var(--ts-amber, #f79009);
    --hm-red: var(--ts-red, #f04438);
    /* The theme's own dropdown padding would fight the panel layout. */
    padding: 0 !important;
    border: 1px solid var(--hm-line) !important;
    border-radius: 16px !important;
    background: #fff;
    box-shadow: 0 20px 48px rgba(16, 24, 40, .16), 0 2px 8px rgba(16, 24, 40, .06) !important;
    overflow: hidden;
    z-index: 1055;
}

/* A short, restrained entrance rather than a bounce. */
.hn-panel.show,
.hp-panel.show {
    animation: hm-in .16s ease-out;
}

@keyframes hm-in {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: translateY(0); }
}

/* The theme sizes every link inside .provider-head-links as a 32px circular
   icon button, which is meant for the bell itself. The panel's own links must
   opt out of that. */
.hn-panel a,
.provider-head-links .notification-dropdown a {
    width: auto;
    height: auto;
    border-radius: 0;
    background: transparent;
}

/* Both panels are anchored to the right edge of the header, so they cannot
   run off the side of the viewport. */
.hn-panel.dropdown-menu,
.hp-panel.dropdown-menu {
    right: 0;
    left: auto !important;
    transform: none !important;
}

/* ============================================ notification panel */

.hn-panel {
    width: 400px;
    max-width: calc(100vw - 24px);
    flex-direction: column;
}
/* Only the open panel becomes a flex column; Bootstrap still owns the hiding. */
.hn-panel.show { display: flex; }

.hn-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    padding: 16px 18px 12px;
    border-bottom: 1px solid var(--hm-line);
}
.hn-head-text h6,
.hn-panel .notification-title {
    margin: 0;
    font-size: 15.5px;
    font-weight: 660;
    letter-spacing: -.02em;
    color: var(--hm-ink);
}
.hn-summary {
    display: block;
    margin-top: 2px;
    font-size: 12.5px;
    color: var(--hm-body);
}
.hn-summary:empty { display: none; }

.hn-readall {
    flex: 0 0 auto;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--hm-blue);
    cursor: pointer;
    white-space: nowrap;
}
.hn-readall:hover { color: #0850c4; }
.hn-readall.is-hidden { display: none; }

/* Filter pills scroll sideways rather than making the panel taller. */
.hn-tabs {
    display: flex;
    gap: 6px;
    padding: 10px 18px;
    border-bottom: 1px solid var(--hm-line);
    overflow-x: auto;
    scrollbar-width: none;
}
.hn-tabs::-webkit-scrollbar { display: none; }
.hn-tabs:empty { display: none; }

.hn-tab {
    flex: 0 0 auto;
    height: 28px;
    padding: 0 11px;
    border: 1px solid rgba(16, 24, 40, .14);
    border-radius: 999px;
    background: #fff;
    color: var(--hm-body);
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.hn-tab:hover { border-color: rgba(16, 24, 40, .28); color: var(--hm-ink); }
.hn-tab.is-active { background: var(--hm-ink); border-color: var(--hm-ink); color: #fff; }

/* The list scrolls; the header and footer stay put. */
.hn-scroll {
    flex: 1 1 auto;
    max-height: 360px;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.hn-list { display: flex; flex-direction: column; }

.hn-item {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 11px;
    padding: 12px 18px;
    border-bottom: 1px solid var(--hm-line);
    color: inherit;
    text-decoration: none;
    transition: background .14s ease;
}
.hn-item:last-child { border-bottom: 0; }
.hn-item .hn-icon { border-radius: 9px; }
.hn-item:hover { background: #fcfcfd; color: inherit; }

.hn-item.is-unread { background: rgba(253, 38, 146, .028); }
.hn-item.is-unread:hover { background: rgba(253, 38, 146, .05); }

.hn-dot {
    position: absolute;
    left: 7px;
    top: 21px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--hm-brand);
    opacity: 0;
}
.hn-item.is-unread .hn-dot { opacity: 1; }

.hn-icon {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    font-size: 16px;
}
.hn-icon.is-blue { background: rgba(10, 103, 242, .1); color: var(--hm-blue); }
.hn-icon.is-violet { background: rgba(122, 90, 248, .12); color: #5b34e0; }
/* Find a Provider, kept visually apart from the violet Get Quotes tone. */
.hn-icon.is-brand { background: rgba(253, 38, 146, .1); color: #b0136a; }
.hn-icon.is-amber { background: rgba(247, 144, 9, .14); color: #b54708; }
.hn-icon.is-green { background: rgba(18, 183, 106, .12); color: #039855; }
.hn-icon.is-neutral { background: rgba(16, 24, 40, .06); color: #475467; }

.hn-body { flex: 1 1 auto; min-width: 0; display: block; }

.hn-title {
    display: block;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--hm-ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.hn-item.is-unread .hn-title { font-weight: 700; }

.hn-message {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-top: 1px;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--hm-body);
}
.hn-time { display: block; margin-top: 3px; font-size: 11.5px; color: var(--hm-muted); }

/* The footer links are plain text actions, not the theme's icon buttons. */
.hn-foot a { width: auto; height: auto; border: 0; background: transparent; }

.hn-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 12px 18px;
    border-top: 1px solid var(--hm-line);
    background: #fcfcfd;
}
.hn-cancel {
    font-size: 13px;
    font-weight: 600;
    color: var(--hm-body);
    cursor: pointer;
}
.hn-cancel:hover { color: var(--hm-ink); }
.hn-viewall {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--hm-blue);
}
.hn-viewall:hover { color: #0850c4; }
.hn-viewall i { font-size: 15px; }

/* ---- empty ---- */

.hn-empty { padding: 36px 20px; text-align: center; }
.hn-empty-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    margin-bottom: 11px;
    border-radius: 50%;
    background: rgba(16, 24, 40, .05);
    color: var(--hm-muted);
    font-size: 21px;
}
.hn-empty h6 { margin: 0 0 3px; font-size: 14px; font-weight: 650; color: var(--hm-ink); }
.hn-empty p { margin: 0; font-size: 12.5px; color: var(--hm-body); }

/* ---- skeleton ---- */

.hn-skeleton { padding: 4px 0; }
.hn-skel-row { display: flex; align-items: center; gap: 11px; padding: 12px 18px; }
.hn-skel-lines { flex: 1 1 auto; min-width: 0; }
.hn-skel {
    display: block;
    border-radius: 6px;
    /* Neutral shimmer on the same white surface as the list it replaces. */
    background:
        linear-gradient(90deg, rgba(16, 24, 40, .05) 25%, rgba(16, 24, 40, .09) 37%, rgba(16, 24, 40, .05) 63%)
        0 0 / 400% 100%;
    animation: ts-shimmer 1.5s ease-in-out infinite;
}
.hn-skel-icon { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 9px; }
.hn-skel-line { height: 9px; }
.hn-skel-line.is-title { width: 44%; margin-bottom: 7px; }
.hn-skel-line:not(.is-title) { width: 72%; }


/* ================================================ account panel */

.hp-panel {
    width: 300px;
    max-width: calc(100vw - 24px);
    flex-direction: column;
}
.hp-panel.show { display: flex; }

.hp-identity {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 16px 14px;
    border-bottom: 1px solid var(--hm-line);
}
.hp-avatar {
    flex: 0 0 auto;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    object-fit: cover;
    /* A clean ring rather than a hard border. */
    box-shadow: 0 0 0 2px #fff, 0 0 0 3px rgba(16, 24, 40, .1);
}
.hp-identity-text { min-width: 0; }

.hp-name {
    display: block;
    font-size: 14.5px;
    font-weight: 660;
    letter-spacing: -.015em;
    color: var(--hm-ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.hp-meta { display: flex; align-items: center; gap: 8px; margin: 3px 0 2px; }
.hp-role {
    padding: 2px 7px;
    border-radius: 5px;
    background: rgba(16, 24, 40, .06);
    color: #475467;
    font-size: 10.5px;
    font-weight: 650;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.hp-status {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11.5px;
    font-weight: 600;
    color: #039855;
}
.hp-status-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--hm-green); }

.hp-email {
    display: block;
    font-size: 12px;
    color: var(--hm-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.hp-quick {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--hm-line);
}
.hp-quick:has(> :only-child) { grid-template-columns: 1fr; }
.hp-quick-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 34px;
    padding: 0 12px;
    border: 1px solid rgba(16, 24, 40, .14);
    border-radius: 9px;
    background: #fff;
    color: #344054;
    font-size: 12.5px;
    font-weight: 600;
    transition: border-color .15s ease, color .15s ease;
}
.hp-quick-btn:hover { border-color: rgba(16, 24, 40, .3); color: var(--hm-ink); }

.hp-scroll {
    flex: 1 1 auto;
    max-height: 340px;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 8px;
}

.hp-group + .hp-group { margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--hm-line); }

.hp-group-label {
    display: block;
    padding: 6px 10px 4px;
    font-size: 10.5px;
    font-weight: 650;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--hm-muted);
}

.hp-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 8px;
    color: #344054;
    font-size: 13.5px;
    font-weight: 500;
    text-decoration: none;
    transition: background .14s ease, color .14s ease;
}
.hp-link i { font-size: 17px; color: var(--hm-muted); transition: color .14s ease; }
.hp-link:hover { background: #f2f4f7; color: var(--hm-ink); }
.hp-link:hover i { color: var(--hm-ink); }

/* The current page: a light wash and an accented icon, not the sidebar's
   solid block. */
.hp-link.is-current { background: rgba(253, 38, 146, .06); color: var(--hm-brand); font-weight: 600; }
.hp-link.is-current i { color: var(--hm-brand); }

/* Logout reads as an exit, kept away from the navigation above it. */
.hp-logout {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 13px 18px;
    border-top: 1px solid var(--hm-line);
    background: #fcfcfd;
    color: #b42318;
    font-size: 13.5px;
    font-weight: 600;
    text-decoration: none;
    transition: background .14s ease;
}
.hp-logout i { font-size: 17px; }
.hp-logout:hover { background: rgba(240, 68, 56, .06); color: #912018; }

/* ---------------------------------------------------------- responsive */

@media (max-width: 575.98px) {
    /* Both panels centre themselves and fit the viewport. */
    .hn-panel,
    .hp-panel {
        position: fixed !important;
        top: 68px !important;
        left: 12px !important;
        right: 12px !important;
        width: auto !important;
        max-width: none !important;
        transform: none !important;
    }
    .hn-scroll { max-height: calc(100vh - 250px); }
    .hp-scroll { max-height: calc(100vh - 320px); }
}

@media (prefers-reduced-motion: reduce) {
    .hn-panel.show, .hp-panel.show { animation: none; }
    .hn-skel { animation: none; }
    .hn-item, .hp-link, .hn-tab, .hp-quick-btn { transition: none; }
}

/* =====================================================================
   Cookie consent bar  (was cookie-consent.css)
   ===================================================================== */

.cookie-consent {
    position: fixed;
    left: 24px;
    bottom: 24px;
    right: auto;
    width: min(420px, calc(100vw - 32px));
    z-index: 1050;

    display: block;
    padding: 20px 22px 18px;
    background: #fff;
    border: 1px solid rgba(16, 24, 40, .1);
    border-radius: 16px;
    box-shadow: 0 18px 44px rgba(16, 24, 40, .16), 0 2px 6px rgba(16, 24, 40, .06);

    font-family: inherit;
    font-size: 14px;
    color: #475467;

    opacity: 0;
    transform: translateY(14px);
    transition: opacity .28s ease, transform .28s ease;
}

.cookie-consent.hidden { display: none; }

.cookie-consent.visible {
    opacity: 1;
    transform: translateY(0);
}

.cookie-consent__head {
    display: flex;
    align-items: center;
    gap: 11px;
    margin-bottom: 10px;
}

.cookie-consent__icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 11px;
    background: rgba(253, 38, 150, .09);
    color: var(--primary, #FD2692);
    font-size: 20px;
}

.cookie-consent__title {
    margin: 0;
    font-size: 15.5px;
    font-weight: 650;
    letter-spacing: -.01em;
    color: #101828;
}

/* Kept as the message wrapper the Blade content renders into. */
.cookie-consent .cookie-consent__message {
    display: block;
    margin: 0 0 16px;
    padding: 0;
    font-size: 13.5px;
    line-height: 1.6;
    color: #667085;
    font-weight: 400;
}

.cookie-consent .cookie-consent__message p { margin: 0; }

.cookie-consent__link {
    color: var(--primary, #FD2692);
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}
.cookie-consent__link:hover { text-decoration: underline; }

.cookie-consent__actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Specificity is deliberately high: the theme ships flat green/red
   rules for these two buttons that would otherwise win. */
.cookie-consent .cookie-consent__actions .cookie-consent__agree,
.cookie-consent .cookie-consent__actions .cookie-consent__decline {
    flex: 1 1 0;
    height: 42px;
    margin: 0;
    padding: 0 18px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all .18s ease;
}

.cookie-consent .cookie-consent__actions .cookie-consent__agree {
    background: #101828;
    border: 1px solid #101828;
    color: #fff;
}
.cookie-consent .cookie-consent__actions .cookie-consent__agree:hover {
    background: var(--primary, #FD2692);
    border-color: var(--primary, #FD2692);
    color: #fff;
}

.cookie-consent .cookie-consent__actions .cookie-consent__decline {
    background: #fff;
    border: 1px solid rgba(16, 24, 40, .14);
    color: #475467;
}
.cookie-consent .cookie-consent__actions .cookie-consent__decline:hover {
    border-color: rgba(16, 24, 40, .3);
    color: #101828;
    background: #fff;
}

.cookie-consent__agree:focus-visible,
.cookie-consent__decline:focus-visible {
    outline: 2px solid var(--primary, #FD2692);
    outline-offset: 2px;
}

/* Mobile: full-width sheet anchored to the bottom */
@media (max-width: 575.98px) {
    .cookie-consent {
        left: 12px;
        right: 12px;
        bottom: 12px;
        width: auto;
        padding: 18px 18px 16px;
        border-radius: 14px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .cookie-consent { transition: none; transform: none; }
}

/* =====================================================================
   Shared paginator  (was pagination.css)
   ===================================================================== */

/* =====================================================================
   Shared server-side pagination.

   Visually identical to the Quotes page control, which is built in JS from
   its own `.qr-pg-*` classes. These `.ts-pg-*` rules are the Blade
   equivalent, used by `pagination.truelysell` on server-paginated pages.
   ===================================================================== */

.ts-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    width: 100%;
    padding: 14px 16px;
    background: #fff;
    border: 1px solid rgba(16, 24, 40, .08);
    border-radius: 14px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
}

.ts-pg-count { font-size: 13px; color: #667085; }
.ts-pg-count strong { color: #101828; font-weight: 650; font-variant-numeric: tabular-nums; }

.ts-pg-controls { display: flex; align-items: center; gap: 4px; }

.ts-pg-btn {
    min-width: 36px;
    height: 36px;
    padding: 0 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid transparent;
    border-radius: 9px;
    background: transparent;
    color: #475467;
    font-size: 13.5px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    text-decoration: none;
    cursor: pointer;
    transition: background .16s ease, color .16s ease, border-color .16s ease;
}
.ts-pg-btn.is-arrow { color: #667085; }
.ts-pg-btn.is-arrow i { font-size: 17px; }

.ts-pg-btn.is-current {
    background: #101828;
    color: #fff;
    border-color: #101828;
}

/* Disabled arrows are rendered as spans, so there is no href to suppress. */
.ts-pg-btn.is-disabled { opacity: .35; cursor: not-allowed; }

@media (hover: hover) {
    .ts-pg-btn:not(.is-disabled):not(.is-current):hover {
        background: #f2f4f7;
        color: #101828;
        text-decoration: none;
    }
}

.ts-pg-gap { padding: 0 4px; color: #98a2b3; font-size: 13.5px; user-select: none; }

@media (max-width: 575.98px) {
    .ts-pagination { justify-content: center; }
    .ts-pg-count { width: 100%; text-align: center; }
}

/* =====================================================================
   Marketplace activity widget (provider and admin dashboards).

   Counts come from real notification records; the three workflows are
   shown side by side but never merged.
   ===================================================================== */
.ma-card {
    border: 1px solid var(--ts-line); border-radius: 16px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04); margin-bottom: 24px;
}
.ma-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 14px; margin-bottom: 16px;
}
.ma-head h6 {
    font-size: 15.5px; font-weight: 650; letter-spacing: -.01em; color: var(--ts-ink);
}
.ma-link {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 13px; font-weight: 600; color: var(--ts-brand); text-decoration: none;
}
.ma-link:hover { color: var(--ts-brand-dark); }

.ma-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px;
}
.ma-tile {
    display: flex; align-items: center; gap: 12px;
    padding: 14px 16px;
    border: 1px solid var(--ts-line); border-radius: 12px;
    background: #fbfcfd; text-decoration: none;
    transition: border-color .18s ease, box-shadow .18s ease;
}
a.ma-tile:hover {
    border-color: var(--ts-line-strong);
    box-shadow: 0 8px 20px rgba(16, 24, 40, .06);
}
.ma-tile-icon {
    flex: 0 0 auto;
    display: inline-flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; border-radius: 10px; font-size: 18px;
}
.ma-tile.is-bookings .ma-tile-icon     { background: rgba(10, 103, 242, .1); color: var(--ts-blue); }
.ma-tile.is-requirements .ma-tile-icon { background: rgba(253, 38, 146, .1); color: var(--ts-brand); }
.ma-tile.is-quotes .ma-tile-icon       { background: rgba(122, 90, 248, .12); color: var(--ts-violet); }
.ma-tile.is-payments .ma-tile-icon     { background: rgba(18, 183, 106, .12); color: var(--ts-green); }

.ma-tile-body { display: flex; flex-direction: column; min-width: 0; }
.ma-tile-value {
    display: flex; align-items: center; gap: 7px;
    font-size: 20px; font-weight: 700; letter-spacing: -.02em;
    color: var(--ts-ink); font-variant-numeric: tabular-nums; line-height: 1.2;
}
.ma-tile-new {
    padding: 2px 8px; border-radius: 999px;
    background: rgba(253, 38, 146, .1); color: var(--ts-brand);
    font-size: 10.5px; font-weight: 700; letter-spacing: .02em;
}
.ma-tile-label { font-size: 12.5px; color: var(--ts-body); }

/* =====================================================================
   Skeleton loaders — booking wizard and elsewhere.

   The theme paints skeletons in a warm #dbd9d4 and fades their opacity,
   which reads as flashing rather than loading, and shows as light slabs
   on the dark booking sidebar. These override the tone and motion only;
   the markup and class names are untouched.
   ===================================================================== */
.skeleton {
    background-color: transparent;
    background-image: linear-gradient(
        90deg,
        rgba(16, 24, 40, .06) 25%,
        rgba(16, 24, 40, .11) 37%,
        rgba(16, 24, 40, .06) 63%
    );
    background-size: 400% 100%;
    background-position: 0 0;
    border-radius: 8px;
    animation: ts-shimmer 1.5s ease-in-out infinite;
    opacity: 1;
}

/* On the dark sidebar the same tint has to come from the light side. */
.bg-dark .skeleton,
.booking-sidebar .skeleton {
    background-image: linear-gradient(
        90deg,
        rgba(255, 255, 255, .08) 25%,
        rgba(255, 255, 255, .16) 37%,
        rgba(255, 255, 255, .08) 63%
    );
}

/* Uniform 150px bars read as a broken list. Varying the widths makes the
   placeholder look like the text it stands in for. */
.label-skeleton { width: 60%; max-width: 180px; height: 13px; margin-bottom: 8px; }
.label-skeleton:nth-of-type(even) { width: 45%; }
.input-skeleton { height: 42px; border-radius: 10px; }

@media (prefers-reduced-motion: reduce) {
    .skeleton { animation: none; }
}

/* =====================================================================
   Booking coupons — available offers and the apply field.
   ===================================================================== */
.cp-offers {
    margin-bottom: 14px; padding: 14px;
    border: 1px solid var(--ts-line); border-radius: 12px;
    background: #fbfcfd;
}
.cp-offers-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 10px; margin-bottom: 10px;
}
.cp-offers-title {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 12.5px; font-weight: 700; color: var(--ts-ink);
}
.cp-offers-title i { font-size: 15px; color: var(--ts-brand); }
.cp-offers-count {
    padding: 2px 8px; border-radius: 999px;
    background: rgba(16, 24, 40, .06); color: var(--ts-body);
    font-size: 11px; font-weight: 700;
}

.cp-list { display: flex; flex-direction: column; gap: 8px; }

/* A ticket: the saving on the left, the code in the middle, copy on the right. */
.cp-item {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 10px;
    border: 1px dashed rgba(18, 183, 106, .4); border-radius: 10px;
    background: #fff;
}
.cp-item-value {
    flex: 0 0 auto; min-width: 46px; padding: 5px 8px;
    border-radius: 8px; text-align: center;
    background: rgba(18, 183, 106, .12); color: #027a48;
    font-size: 13px; font-weight: 700; line-height: 1.2;
}
.cp-item-body { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.cp-item-code {
    font-size: 13px; font-weight: 700; letter-spacing: .04em;
    color: var(--ts-ink); word-break: break-all;
}
.cp-item-note { font-size: 11px; color: var(--ts-faint); }

.cp-copy {
    flex: 0 0 auto;
    display: inline-flex; align-items: center; gap: 5px;
    padding: 6px 10px; border: 1px solid var(--ts-line-strong); border-radius: 8px;
    background: #fff; color: var(--ts-body);
    font-size: 11.5px; font-weight: 650; cursor: pointer;
    transition: border-color .18s ease, color .18s ease, background-color .18s ease;
}
.cp-copy i { font-size: 14px; }
.cp-copy:hover { border-color: var(--ts-brand); color: var(--ts-brand); }
.cp-copy:focus-visible { outline: 2px solid var(--ts-brand); outline-offset: 2px; }

/* Confirmation shown on the button itself, so the feedback is where the
   click was. */
.cp-copy.is-copied {
    border-color: rgba(18, 183, 106, .5);
    background: rgba(18, 183, 106, .1);
    color: #027a48;
}

/* ---- Apply field ---- */
.cp-apply-label {
    display: block; margin-bottom: 6px;
    font-size: 12.5px; font-weight: 700; color: var(--ts-ink);
}
.cp-apply-row { display: flex; gap: 8px; }
.cp-apply-row .form-control {
    flex: 1 1 auto; height: 40px; min-width: 0;
    border: 1px solid var(--ts-line-strong); border-radius: 10px;
    font-size: 13px; letter-spacing: .03em; box-shadow: none;
}
.cp-apply-row .form-control:focus {
    border-color: var(--ts-brand);
    box-shadow: 0 0 0 3px rgba(253, 38, 146, .12);
}
.cp-apply-btn {
    flex: 0 0 auto; padding: 0 16px; height: 40px;
    border: 0; border-radius: 10px;
    background: var(--ts-ink); color: #fff;
    font-size: 12.5px; font-weight: 650; cursor: pointer;
    transition: background-color .18s ease;
}
.cp-apply-btn:hover { background: #000; }
.cp-apply-btn.is-remove { background: var(--ts-red); }
.cp-apply-btn.is-remove:hover { background: #d92d20; }

.cp-apply-msg { display: block; margin-top: 5px; font-size: 11.5px; }

@media (max-width: 359px) {
    .cp-copy-label { display: none; }
}

/* Header notification panel: Mark read and Clear as two distinct actions. */
.hn-head-actions { display: inline-flex; align-items: center; gap: 10px; }
.hn-head-actions .hn-clear { color: var(--ts-red); }
.hn-head-actions .hn-clear:hover { color: #d92d20; }

/* Notification removal controls on the provider list. */
.nt-delete {
    display: inline-flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; padding: 0;
    border: 1px solid transparent; border-radius: 8px;
    background: transparent; color: var(--ts-faint); cursor: pointer;
    transition: border-color .18s ease, color .18s ease, background-color .18s ease;
}
.nt-delete i { font-size: 15px; }
.nt-delete:hover {
    border-color: rgba(240, 68, 56, .35);
    background: rgba(240, 68, 56, .06);
    color: var(--ts-red);
}
.nt-delete[disabled] { opacity: .5; cursor: default; }

.nt-clear-all {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 14px; border: 1px solid rgba(240, 68, 56, .35); border-radius: 10px;
    background: #fff; color: var(--ts-red);
    font-size: 13px; font-weight: 600; cursor: pointer;
    transition: border-color .18s ease, background-color .18s ease;
}
.nt-clear-all:hover { border-color: var(--ts-red); background: rgba(240, 68, 56, .06); }
.nt-clear-all[disabled] { opacity: .6; cursor: default; }