/* Mobile header icons + navigation drawer.
   The old mobile nav was an in-flow Bootstrap collapse that pushed the page
   down, sat under the sticky footer, and needed two taps to reach a category.
   Five header icons also never fitted beside the logo at phone widths. */

/* ── Header icon buttons ─────────────────────────────────────────────── */
.ps-micon {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* 44px is the minimum comfortable touch target. */
    width: 44px;
    height: 44px;
    padding: 0;
    background: none;
    border: none;
    color: #16425b;
    font-size: 1.15rem;
    line-height: 1;
    flex: 0 0 auto;
}

.ps-micon:active {
    color: #0f6fa9;
}

.ps-micon--menu {
    font-size: 1.5rem;
    margin-left: 0.15rem;
}

.ps-micon__badge {
    position: absolute;
    top: 4px;
    right: 2px;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    background: #2a8ec7;
    color: #fff;
    border-radius: 999px;
    font-size: 0.62rem;
    font-weight: 700;
    line-height: 17px;
    text-align: center;
}

.ps-fav-count-badge.ps-micon__badge {
    background: #dc2626;
}

/* The logo had an inline width of 200px, which beat the stylesheet's mobile
   rule and overflowed its column. Inline style removed; sized here. */
@media (max-width: 991.98px) {
    #lottie-logo {
        width: 132px;
        height: 42px;
        min-height: 42px;
    }

    .navbar-brand {
        min-height: 42px;
    }
}

@media (max-width: 400px) {
    #lottie-logo {
        width: 112px;
    }

    .ps-micon {
        width: 39px;
    }
}

/* ── Navigation drawer ───────────────────────────────────────────────── */
.ps-mnav {
    width: min(400px, 92vw);
    display: flex;
    flex-direction: column;
    background: #fff;
}

.ps-mnav__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.85rem 1rem;
    background: linear-gradient(135deg, #2a8ec7 0%, #16425b 100%);
    color: #fff;
    flex: 0 0 auto;
}

.ps-mnav__title {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.ps-mnav__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    background: rgba(255, 255, 255, 0.14);
    border: none;
    border-radius: 50%;
    color: #fff;
    font-size: 1rem;
}

.ps-mnav__close:active {
    background: rgba(255, 255, 255, 0.26);
}

/* Search — mobile previously had only an icon that opened a modal. */
.ps-mnav__search {
    position: relative;
    padding: 0.85rem 1rem;
    border-bottom: 1px solid #e6ebf2;
    background: #f7f9fc;
    flex: 0 0 auto;
}

.ps-mnav__search i {
    position: absolute;
    left: 1.75rem;
    top: 50%;
    transform: translateY(-50%);
    color: #2a8ec7;
    font-size: 0.95rem;
    pointer-events: none;
}

.ps-mnav__search input {
    width: 100%;
    /* 16px prevents iOS zooming the viewport on focus. */
    font-size: 16px;
    padding: 0.7rem 0.9rem 0.7rem 2.4rem;
    background: #fff;
    border: 1px solid #e3eaf2;
    border-radius: 2rem;
    color: #16425b;
}

.ps-mnav__search input:focus {
    outline: none;
    border-color: #2a8ec7;
    box-shadow: 0 0 0 3px rgba(42, 142, 199, 0.15);
}

.ps-mnav__body {
    flex: 1 1 auto;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

/* Consultative links inside the drawer */
.ps-mnav__links {
    margin: 0;
    padding: 0;
    border-top: 1px solid #eef2f7;
}

.ps-mnav__links .nav-item {
    border-bottom: 1px solid #eef2f7;
}

.ps-mnav__links .nav-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.85rem 1rem;
    font-size: 0.98rem;
    font-weight: 600;
    color: #16425b;
}

.ps-mnav__links .nav-link:active {
    background: #f7f9fc;
    color: #0f6fa9;
}

.ps-mnav__links .mobile-submenu {
    padding-left: 0;
    background: #f7f9fc;
}

.ps-mnav__links .mobile-submenu ul {
    padding-left: 0 !important;
}

.ps-mnav__links .mobile-submenu .nav-link {
    padding-left: 2rem;
    font-size: 0.92rem;
    font-weight: 500;
    color: #475569;
}

/* Footer: the CTA stays in view rather than scrolling away. */
.ps-mnav__foot {
    flex: 0 0 auto;
    padding: 0.9rem 1rem calc(0.9rem + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid #e6ebf2;
    background: #fff;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

.ps-mnav__cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.85rem 1rem;
    background: linear-gradient(135deg, #2a8ec7 0%, #16425b 100%);
    color: #fff !important;
    border-radius: 2rem;
    font-size: 1rem;
    font-weight: 700;
    text-decoration: none;
}

.ps-mnav__call {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    color: #16425b;
    font-size: 1rem;
    font-weight: 700;
    text-decoration: none;
}

/* ── Drill-down: full definition ─────────────────────────────────────────
   These were lost when an earlier mega-menu CSS rewrite replaced a block the
   drill styles happened to sit inside. Without them every level rendered at
   once as a bulleted list. Defined here now, next to the drawer that uses
   them, so a mega-menu edit cannot take them out again. */
.ps-drill {
    overflow: hidden;
}

.ps-drill__viewport {
    position: relative;
}

/* One level at a time. */
.ps-drill__level {
    display: none;
}

.ps-drill__level.is-active {
    display: block;
    animation: psDrillIn 0.18s ease;
}

@keyframes psDrillIn {
    from { opacity: 0; transform: translateX(8px); }
    to   { opacity: 1; transform: translateX(0); }
}

@media (prefers-reduced-motion: reduce) {
    .ps-drill__level.is-active { animation: none; }
}

.ps-drill__list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.ps-drill__list li {
    margin: 0;
}

.ps-drill__item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    padding: 0.7rem 1rem;
    background: none;
    border: none;
    border-bottom: 1px solid #eef2f7;
    font-size: 0.97rem;
    font-weight: 600;
    color: #16425b;
    text-align: left;
    text-decoration: none;
    min-height: 56px;
}

.ps-drill__item:hover,
.ps-drill__item:focus,
.ps-drill__item:active {
    background: #f7f9fc;
    color: #0f6fa9;
}

.ps-drill__thumb {
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    border-radius: 0.5rem;
    background: #f4f7fa center/cover no-repeat;
    border: 1px solid #e9eff5;
}

.ps-drill__label {
    flex: 1 1 auto;
    min-width: 0;
}

.ps-drill__meta {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    margin-left: auto;
    color: #94a3b8;
    font-size: 0.8rem;
    flex: 0 0 auto;
}

.ps-drill__count {
    background: #eef3f8;
    color: #64748b;
    border-radius: 1rem;
    padding: 0.05rem 0.5rem;
    font-size: 0.72rem;
    font-weight: 700;
}

.ps-drill__item--all {
    justify-content: space-between;
    font-weight: 700;
    color: #0f6fa9;
    min-height: 52px;
}

.ps-drill__back {
    position: sticky;
    top: 0;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    width: 100%;
    padding: 0.75rem 1rem;
    background: #f7f9fc;
    border: none;
    border-bottom: 1px solid #e6ebf2;
    font-size: 0.85rem;
    font-weight: 600;
    color: #64748b;
}

.ps-drill__back:active {
    color: #0f6fa9;
}

.ps-drill__title {
    padding: 0.85rem 1rem 0.5rem;
    margin: 0;
    font-weight: 700;
    color: #16425b;
    font-size: 1.05rem;
}

/* ── Search modal ────────────────────────────────────────────────────────
   The input sits inside a modal-dialog-scrollable body, so as live results
   filled the body the input scrolled up out of view — on a phone, behind the
   keyboard, which is why you could not see what you were typing. Pin the form
   to the top of the scroller so it stays put while results move underneath. */
#searchModal .modal-body {
    position: relative;
}

#searchModal #custom-search-form {
    position: sticky;
    top: 0;
    z-index: 3;
    background: #fff;
    padding-top: 0.25rem;
    padding-bottom: 0.6rem;
    margin-bottom: 0.25rem;
    box-shadow: 0 0.5rem 0.5rem -0.5rem rgba(15, 42, 60, 0.12);
}

#searchModal #search-modal-input {
    /* 16px keeps iOS from zooming the viewport on focus, which was also
       pushing the field off screen. */
    font-size: 16px;
    color: #16425b;
}

@media (max-width: 575.98px) {
    /* Fullscreen on phones: give the results room and keep the field visible. */
    #searchModal .modal-body {
        padding-top: 0.5rem;
    }

    #searchModal .form-text {
        font-size: 0.78rem;
    }
}

/* ── Sticky-header spacer ────────────────────────────────────────────────
   The spacer reserves the header's height while it is pinned. Its only
   display:none rule lived inside the desktop media query, so below 992px it
   rendered as an empty block carrying the inline height the JS had set — ~81px
   of dead space that read as a giant header. Hidden by default at every width;
   the desktop rule re-shows it when actually stuck. */
.ps-header-spacer {
    display: none !important;
}

@media (min-width: 992px) {
    .ps-header-spacer.is-active {
        display: block !important;
    }
}

/* ── Live search results inside the drawer ───────────────────────────────
   The result markup comes back from the same AJAX endpoint as the modal, but
   the item styles were scoped to #searchModal — so unstyled here without
   these. Kept in step with that block deliberately. */
.ps-mnav__results {
    flex: 0 1 auto;
    max-height: 46vh;
    overflow-y: auto;
    overscroll-behavior: contain;
    border-bottom: 1px solid #e6ebf2;
}

.ps-mnav__results:empty {
    display: none;
}

.ps-mnav__results .ps-search-item {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.6rem 1rem;
    border-bottom: 1px solid #eef2f7;
    text-decoration: none;
    color: #16425b;
    transition: background-color 0.12s ease;
}

.ps-mnav__results .ps-search-item:hover,
.ps-mnav__results .ps-search-item:focus,
.ps-mnav__results .ps-search-item:active {
    background-color: #f6f7f9;
}

.ps-mnav__results .ps-search-thumb {
    width: 46px;
    height: 46px;
    object-fit: contain;
    border-radius: 6px;
    background: #fff;
    flex: 0 0 auto;
}

.ps-mnav__results .ps-search-item-img {
    width: 46px;
    height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

.ps-mnav__results .min-w-0 {
    min-width: 0;
}

.ps-mnav__results .ps-search-item .fw-semibold {
    font-size: 0.9rem;
    line-height: 1.25;
}

.ps-mnav__results .alert {
    margin: 0.75rem 1rem;
    font-size: 0.85rem;
}

/* ── Cookie consent badge ────────────────────────────────────────────────
   The real defect was the z-index: 999999, which put this above the
   navigation drawer (9999) and every modal (1050+), so it covered the menu
   and any dialog. That is fixed by lowering it — NOT by hiding it.

   It stays visible deliberately. It is the only reliable route to withdraw
   consent: clicking it programmatically creates the preference centre but
   does not show it, and revisitCkyConsent() throws inside the vendor's own
   banner.js. Hiding it would risk leaving visitors with no way to change
   their choice, which is a compliance problem rather than an aesthetic one.

   The footer and mobile-menu links are additional convenience routes; if the
   plugin refuses, they fall back to the cookie policy. */
.cky-btn-revisit-wrapper,
.cky-revisit-bottom-left,
.cky-revisit-bottom-right {
    /* Below modals and the drawer, above ordinary page content. */
    z-index: 1035 !important;
}

@media (max-width: 991.98px) {
    /* Clear of the mobile sticky footer (z-1040, ~70px tall). */
    .cky-btn-revisit-wrapper {
        bottom: 78px !important;
        transform: scale(0.85);
        transform-origin: bottom left;
    }
}

/* Never let it sit on top of an open drawer or modal. */
body.modal-open .cky-btn-revisit-wrapper,
body.offcanvas-open .cky-btn-revisit-wrapper {
    opacity: 0 !important;
    pointer-events: none !important;
}

/* Footer trigger — a button styled as the sibling links around it. */
.ps-cookie-link {
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    color: rgba(255, 255, 255, 0.5);
    text-decoration: none;
    cursor: pointer;
}

.ps-cookie-link:hover,
.ps-cookie-link:focus {
    color: #fff;
    text-decoration: underline;
}

/* Drawer trigger — matches the other drawer rows exactly. */
.ps-mnav__cookie {
    width: 100%;
    background: none;
    border: none;
    text-align: left;
    cursor: pointer;
}

/* ── Chat widget ─────────────────────────────────────────────────────────
   Already hidden below 768px (its toggle is display:none), but the mobile
   layout switches at 992px — so tablets got the chat bubble AND the mobile
   drawer, two contact affordances competing in the same corner. Aligned to
   the same breakpoint as the rest of the mobile layout. */
@media (max-width: 991.98px) {
    .global-chat-widget {
        display: none !important;
    }
}