/* ================================================================
   MOBILE NAVBAR — #floverfy-mobile-navbar
   Matches the reference sidebar design
   CSS-only · zero PHP/JS changes
   ================================================================ */

/* ── Offcanvas panel itself ── */
#floverfy-mobile-navbar {
    width: 100% !important;
    max-width: 390px;
    background: #fff !important;
    overflow: hidden;
    box-shadow: 2px 0 24px rgba(15, 34, 54, .18);
}

#floverfy-mobile-navbar .offcanvas-body {
    padding: 0 !important;
    overflow-y: auto;
    overflow-x: hidden;
}

/* ================================================================
   HEADER BAR — dark navy with logo + close button
   ================================================================ */
#floverfy-mobile-navbar .offcanvas-header {
    background: #0f2236;
    color: #fff;
    padding: 14px 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: auto;
    border-bottom: none;
}

/* Logo image in header */
#floverfy-mobile-navbar .offcanvas-header .offcanvas-title img {
    height: 30px;
    width: auto;
    filter: brightness(10) saturate(0);
}

/* Close button: white X — override Bootstrap's dark SVG with a white one */
#floverfy-mobile-navbar .offcanvas-header .btn-close {
    background-color: transparent !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'%3E%3Cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 14px !important;
    width: 24px;
    height: 24px;
    opacity: 1 !important;
    padding: 0;
    flex-shrink: 0;
    border: none;
    filter: none !important;
}

/* ================================================================
   2px NAVY ACCENT RULE (real HTML element)
   ================================================================ */
.fv-mobile-nav-divider {
    height: 2px;
    background: #0f2236;
    flex-shrink: 0;
}


/* ================================================================
   MAIN NAVIGATION ACCORDION
   ================================================================ */

/* Remove all Bootstrap accordion decoration */
#mobile-navigation-acc {
    --bs-accordion-bg: #fff;
    --bs-accordion-border-color: var(--ink-200, #dbe1e9);
    --bs-accordion-border-radius: 0;
    --bs-accordion-inner-border-radius: 0;
    background: #fff;
}

#mobile-navigation-acc .accordion-item {
    border: none;
    border-bottom: 1px solid var(--ink-200, #dfe4ea);
    border-radius: 0 !important;
    background: #fff;
}

/* ── Top-level menu button ── */
#mobile-navigation-acc .accordion-button {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px 18px;
    background: transparent;
    text-align: left;
    font-size: 14px;
    font-weight: 700;
    color: var(--ink-900, #0f2236);
    letter-spacing: -0.005em;
    border: none;
    border-radius: 0 !important;
    box-shadow: none !important;
}

/* Bootstrap's ::after chevron — replace with custom chevron size & colour */
#mobile-navigation-acc .accordion-button::after {
    width: 16px;
    height: 16px;
    background-size: 16px;
    flex-shrink: 0;
    filter: invert(40%) sepia(10%) saturate(500%) hue-rotate(180deg) brightness(80%);
}

/* Open state: body background tint */
#mobile-navigation-acc .accordion-button:not(.collapsed) {
    background: var(--ink-50, #f6f8fb);
    color: #0f2236;
    box-shadow: none !important;
}

/* Accordion collapse panel */
#mobile-navigation-acc .accordion-collapse {
    background: #fff;
}

#mobile-navigation-acc .accordion-body {
    padding: 0 !important;
}

/* ── Level-1 sub-item link ── */
.fv-mobile-nav-link.fv-nav-level-1 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 18px 12px 32px;
    border-top: 1px solid var(--ink-100, #eef1f5);
    font-size: 13px;
    font-weight: 600;
    color: var(--ink-700, #2d4059);
    text-decoration: none;
    background: #fff;
    width: 100%;
    transition: background .1s;
}

.fv-mobile-nav-link.fv-nav-level-1::after {
    content: '';
    display: inline-block;
    width: 14px;
    height: 14px;
    background-image: url("data:image/svg+xml,%3Csvg width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23a0aec0' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m9 6 6 6-6 6'/%3E%3C/svg%3E");
    background-size: 14px;
    background-repeat: no-repeat;
    flex-shrink: 0;
}

.fv-mobile-nav-link.fv-nav-level-1:hover {
    background: var(--ink-50, #f6f8fb);
}

/* ── Level-1 sub-button (has its own submenu) ── */
#mobile-navigation-acc .accordion-button.fv-nav-level-1 {
    padding: 12px 18px 12px 32px;
    font-size: 13px;
    font-weight: 600;
    color: var(--ink-700, #2d4059);
    border-top: 1px solid var(--ink-100, #eef1f5);
    background: #fff;
}

/* ── Level-2 sub-item link ── */
.fv-mobile-nav-link.fv-nav-level-2 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 11px 18px 11px 46px;
    border-top: 1px solid var(--ink-100, #eef1f5);
    font-size: 12.5px;
    font-weight: 500;
    color: var(--ink-600, #4a6383);
    text-decoration: none;
    background: #fff;
    width: 100%;
    transition: background .1s;
}

.fv-mobile-nav-link.fv-nav-level-2::after {
    content: '';
    display: inline-block;
    width: 12px;
    height: 12px;
    background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23a0aec0' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m9 6 6 6-6 6'/%3E%3C/svg%3E");
    background-size: 12px;
    background-repeat: no-repeat;
    flex-shrink: 0;
}

/* ── Top-level simple link (no submenu) ── */
.fv-mobile-nav-link:not(.fv-nav-level-1):not(.fv-nav-level-2) {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px 18px;
    font-size: 14px;
    font-weight: 700;
    color:#0f2236;
    text-decoration: none;
    background: #fff;
    width: 100%;
    letter-spacing: -0.005em;
    transition: background .1s;
}

.fv-mobile-nav-link:not(.fv-nav-level-1):not(.fv-nav-level-2)::after {
    content: '';
    display: inline-block;
    width: 16px;
    height: 16px;
    background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23a0aec0' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m9 6 6 6-6 6'/%3E%3C/svg%3E");
    background-size: 16px;
    background-repeat: no-repeat;
    flex-shrink: 0;
}

/* ================================================================
   HELP & ACCOUNT SECTION (mobile-header-info-wrap)
   ================================================================ */

/* ── Wrapper: 8px top divider ── */
.mobile-header-info-wrap {
    border-top: 8px solid var(--ink-50, #f6f8fb);
    padding: 0;
    margin-top: 0;
    background: #fff;
}

/* ── "HELP & ACCOUNT" label ── */
.mobile-header-info-wrap::before {
    content: "Help & account";
    display: block;
    padding: 16px 18px 6px;
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-500, #8196ad);
    font-weight: 700;
}

/* ── Reset Bootstrap accordion-header inside this section ── */
.mobile-header-info-wrap .accordion-header {
    all: unset;
    display: block;
}

/* ── Each row container ── */
.single-mobile-header-info {
    border-bottom: 1px solid var(--ink-100, #eef1f5);
}

/* ── The anchor row ── */
.single-mobile-header-info a {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 14px;
    padding: 13px 18px !important;
    background: #fff !important;
    text-decoration: none !important;
    width: 100%;
    border: none !important;
    transition: background .1s;
}

.single-mobile-header-info a:hover {
    background: var(--ink-50, #f6f8fb) !important;
}

/* ── Link label text (the main title) ── */
.single-mobile-header-info a .fv-mh-label,
.single-mobile-header-info a {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--ink-900, #0f2236);
    line-height: 1.2;
}

/* ── Hide the old Bootstrap person icon ── */
.single-mobile-header-info a .bi {
    display: none !important;
}

/* ── Right-arrow chevron ── */
.single-mobile-header-info a::after {
    content: '';
    display: inline-block;
    width: 14px;
    height: 14px;
    min-width: 14px;
    background-image: url("data:image/svg+xml,%3Csvg width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23a0aec0' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m9 6 6 6-6 6'/%3E%3C/svg%3E");
    background-size: 14px;
    background-repeat: no-repeat;
    flex-shrink: 0;
}


/* ================================================================
   MOBILE NAVBAR — FOOTER
   ================================================================ */
.fv-mobile-nav-footer {
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    background: var(--ink-50, #f6f8fb);
    border-top: 1px solid var(--ink-200, #dbe1e9);
    margin-top: auto;
}

.fv-mobile-nav-footer-links {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 18px;
    font-size: 11px;
    color: var(--ink-600, #4a6383);
}

.fv-mobile-nav-footer-links a {
    color: var(--ink-600, #4a6383);
    text-decoration: none;
    font-weight: 500;
}

.fv-mobile-nav-footer-links a:hover {
    text-decoration: underline;
}

.fv-footer-dot {
    color: var(--ink-300, #b0bec8);
}

.fv-mobile-nav-footer-copy {
    text-align: center;
    font-size: 10.5px;
    color: var(--ink-500, #8196ad);
    line-height: 1.5;
}


/* ================================================================
   MOBILE NAVBAR — USER ACCOUNT STRIP
   ================================================================ */

/* ── Shared strip layout ── */
.fv-mobile-user-strip {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    background: var(--ink-50, #f6f8fb);
    border-bottom: 1px solid var(--ink-200, #dbe1e9);
    text-decoration: none !important;
    transition: background .12s;
}

.fv-mobile-user-strip:hover {
    background: var(--ink-100, #eef1f5);
}

/* ── Logged-in avatar circle (dark navy with initials) ── */
.fv-mobile-user-avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: #0f2236;
    color: #fff;
    display: grid;
    place-items: center;
    font-weight: 800;
    font-size: 14px;
    letter-spacing: 0.02em;
    flex-shrink: 0;
}

/* ── Guest avatar circle (lighter outline style) ── */
.fv-mobile-user-avatar--guest {
    background: var(--ink-200, #dbe1e9);
    color: var(--ink-600, #4a6383);
}

/* ── Text block ── */
.fv-mobile-user-info {
    flex: 1 1 0;
    min-width: 0;
}

.fv-mobile-user-name {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--ink-900, #0f2236);
    line-height: 1.2;
}

.fv-mobile-user-sub {
    font-size: 11.5px;
    color: var(--ink-500, #8196ad);
    margin-top: 2px;
}

/* ── Right chevron SVG ── */
.fv-mobile-user-strip > svg:last-child {
    flex-shrink: 0;
    color: var(--ink-400, #a8b8c8);
}