/* ════════════════════════════════════════════════════════════════
   DESKTOP PROFILE DROPDOWN  (fl-pd)
════════════════════════════════════════════════════════════════ */

.login-header {
    position: relative;
    cursor: pointer;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: flex !important;
    align-items: center;
    justify-content: center;
    transition: background .2s ease;
}
.login-header:hover {
    background: rgba(130, 94, 153, .12);
}
.login-header i,
.login-header .feather-user {
    font-size: 18px;
    color: #21142A;
    transition: color .2s ease;
    display: block;
}
.login-header:hover i,
.login-header:hover .feather-user {
    color: #825E99;
}
/* Suppress inner widget's own dropdown behavior */
.login-header .block-top-link > div { display: none !important; }

.fl-pd {
    position: fixed;
    top: 0;
    right: 0;
    width: 288px;
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 4px 6px -1px rgba(33,20,42,.06), 0 16px 48px -8px rgba(33,20,42,.18);
    z-index: 99999;
    opacity: 0;
    transform: translateY(-8px) scale(.98);
    pointer-events: none;
    transition: opacity .2s ease, transform .2s ease;
    overflow: hidden;
}
.fl-pd.is-open {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

/* ── Profile card (logged in) ── */
.fl-pd__profile {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 18px 18px 14px;
}
.fl-pd__avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #E8DCEF;
    flex-shrink: 0;
}
.fl-pd__avatar--flower {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    flex-shrink: 0;
    overflow: hidden;
    border: 2px solid #E8DCEF;
}
.fl-pd__avatar--flower .fl-flower-avatar,
.fl-pd__guest-icon .fl-flower-avatar {
    width: 100%;
    height: 100%;
}
.fl-pd__info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.fl-pd__name {
    font-size: 14px;
    font-weight: 700;
    color: #21142A;
    font-family: 'Geist', sans-serif;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.fl-pd__email {
    font-size: 12px;
    color: #8a7a9a;
    font-family: 'Geist', sans-serif;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.fl-pd__divider { height: 1px; background: #F3EEF7; margin: 0 18px; }

/* ── Links ── */
.fl-pd__links { padding: 8px 0; }
.fl-pd__link {
    display: flex !important;
    align-items: center;
    gap: 10px;
    padding: 10px 18px;
    font-size: 13.5px;
    font-weight: 500;
    color: #21142A !important;
    font-family: 'Geist', sans-serif;
    text-decoration: none !important;
    transition: background .15s, color .15s;
}
.fl-pd__link:hover { background: #FAF5FF; color: #825E99 !important; }
.fl-pd__link-icon {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: #F3EEF7;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #825E99;
    transition: background .15s;
}
.fl-pd__link:hover .fl-pd__link-icon { background: #E8DCEF; }

/* ── Logout ── */
.fl-pd__logout {
    display: flex !important;
    align-items: center;
    gap: 8px;
    padding: 12px 18px 14px;
    font-size: 13.5px;
    font-weight: 600;
    color: #c0392b !important;
    font-family: 'Geist', sans-serif;
    text-decoration: none !important;
    transition: background .15s;
}
.fl-pd__logout:hover { background: #fff5f5; }

/* ── Guest state ── */
.fl-pd__guest {
    padding: 20px 18px 18px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}
.fl-pd__guest-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    overflow: hidden;
    margin-bottom: 4px;
    flex-shrink: 0;
}
.fl-pd__guest-title {
    font-size: 15px;
    font-weight: 700;
    color: #21142A;
    font-family: 'Geist', sans-serif;
    margin: 0;
}
.fl-pd__guest-sub {
    font-size: 12.5px;
    color: #8a7a9a;
    font-family: 'Geist', sans-serif;
    margin: 0 0 8px;
    line-height: 1.5;
}
.fl-pd__signin-btn {
    display: block;
    background: #21142A;
    color: #fff !important;
    border-radius: 50px;
    padding: 11px 24px;
    font-size: 14px;
    font-weight: 600;
    font-family: 'Geist', sans-serif;
    text-decoration: none !important;
    transition: background .2s;
    width: 100%;
    text-align: center;
}
.fl-pd__signin-btn:hover { background: #3a1f50; }
.fl-pd__register-link {
    font-size: 12.5px;
    color: #825E99 !important;
    text-decoration: underline !important;
    font-family: 'Geist', sans-serif;
    margin-top: 4px;
}


/* ════════════════════════════════════════════════════════════════
   MOBILE SLIDE PANEL  (fl-mob)
════════════════════════════════════════════════════════════════ */

.fl-mob-overlay {
    position: fixed;
    inset: 0;
    background: rgba(10,4,16,.55);
    z-index: 99997;
    opacity: 0;
    pointer-events: none;
    transition: opacity .3s ease;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}
.fl-mob-overlay.is-open { opacity: 1; pointer-events: auto; }

.fl-mob-panel {
    position: fixed;
    top: 0;
    left: 0;
    width: 320px;
    max-width: 88vw;
    height: 100dvh;
    background: #ffffff;
    z-index: 99998;
    transform: translateX(-100%);
    transition: transform .35s cubic-bezier(.4,0,.2,1);
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    -webkit-overflow-scrolling: touch;
}
.fl-mob-panel.is-open { transform: translateX(0); }
body.fl-mob-open { overflow: hidden; }

/* ── Panel header ── */
.fl-mob-panel__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 16px 16px 20px;
    border-bottom: 1px solid #F3EEF7;
    flex-shrink: 0;
    position: sticky;
    top: 0;
    background: #fff;
    z-index: 2;
}
.fl-mob-panel__logo-link { display: flex; align-items: center; }
.fl-mob-panel__logo { height: 36px; width: auto; }
.fl-mob-panel__site-name {
    font-size: 16px;
    font-weight: 800;
    color: #21142A;
    font-family: 'Geist', sans-serif;
}
.fl-mob-panel__close {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1.5px solid #E8DCEF;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #21142A;
    transition: background .15s, border-color .15s;
    flex-shrink: 0;
}
.fl-mob-panel__close:hover { background: #F3EEF7; border-color: #825E99; }

/* ── Profile card — pinned to bottom ── */
.fl-mob-panel__profile {
    padding: 16px 20px;
    border-top: 1px solid #F3EEF7;
    background: #FAF5FF;
    flex-shrink: 0;
    margin-top: auto;
}
.fl-mob-panel__user {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
}
.fl-mob-panel__avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #E8DCEF;
    flex-shrink: 0;
}
.fl-mob-panel__avatar--flower {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid #E8DCEF;
    flex-shrink: 0;
}
.fl-mob-panel__avatar--flower .fl-flower-avatar { width: 100%; height: 100%; }
.fl-mob-panel__user-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.fl-mob-panel__user-name {
    font-size: 14px;
    font-weight: 700;
    color: #21142A;
    font-family: 'Geist', sans-serif;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.fl-mob-panel__user-email {
    font-size: 12px;
    color: #8a7a9a;
    font-family: 'Geist', sans-serif;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Account quick links ── */
.fl-mob-panel__account-links {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}
.fl-mob-panel__account-link {
    display: flex !important;
    align-items: center;
    gap: 6px;
    padding: 9px 12px;
    background: #fff;
    border: 1.5px solid #E8DCEF;
    border-radius: 10px;
    font-size: 12.5px;
    font-weight: 600;
    color: #21142A !important;
    font-family: 'Geist', sans-serif;
    text-decoration: none !important;
    transition: background .15s, border-color .15s;
}
.fl-mob-panel__account-link:hover {
    background: #E8DCEF;
    border-color: #825E99;
    color: #825E99 !important;
}
.fl-mob-panel__account-link svg { color: #825E99; flex-shrink: 0; }
.fl-mob-panel__account-link--logout {
    grid-column: 1 / -1;
    color: #c0392b !important;
    border-color: #f5c6c2;
    background: #fff5f5;
}
.fl-mob-panel__account-link--logout:hover {
    background: #fde8e6;
    border-color: #c0392b;
    color: #c0392b !important;
}
.fl-mob-panel__account-link--logout svg { color: #c0392b; }

/* ── Guest ── */
.fl-mob-panel__guest { padding: 4px 0; }
.fl-mob-panel__guest-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    font-weight: 700;
    color: #21142A;
    font-family: 'Geist', sans-serif;
    margin: 0 0 12px;
}
.fl-mob-panel__guest-title .fl-flower-avatar { width: 32px; height: 32px; flex-shrink: 0; }
.fl-mob-panel__auth-btns { display: flex; gap: 8px; }
.fl-mob-panel__signin-btn,
.fl-mob-panel__register-btn {
    flex: 1;
    text-align: center;
    padding: 11px 8px;
    border-radius: 50px;
    font-size: 13px;
    font-weight: 600;
    font-family: 'Geist', sans-serif;
    text-decoration: none !important;
    transition: background .2s, color .2s;
}
.fl-mob-panel__signin-btn { background: #21142A; color: #fff !important; }
.fl-mob-panel__signin-btn:hover { background: #3a1f50; }
.fl-mob-panel__register-btn { background: transparent; color: #21142A !important; border: 1.5px solid #21142A; }
.fl-mob-panel__register-btn:hover { background: #21142A; color: #fff !important; }

/* ── Navigation ── */
.fl-mob-panel__nav { flex: 1; padding: 8px 0; }
.fl-mob-menu { list-style: none; padding: 0; margin: 0; }
.fl-mob-menu > li { border-bottom: 1px solid #F3EEF7; }
.fl-mob-menu > li > a {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    font-size: 15px;
    font-weight: 600;
    color: #21142A !important;
    font-family: 'Geist', sans-serif;
    text-decoration: none !important;
    transition: color .15s, background .15s;
}
.fl-mob-menu > li > a span { flex: 1; }
.fl-mob-menu > li > a:hover { color: #825E99 !important; background: #FAF5FF; }
.fl-mob-menu > li.current-menu-item > a,
.fl-mob-menu > li.current-menu-ancestor > a { color: #825E99 !important; }

.fl-mob-menu .menu-item-has-children > a::after {
    content: '';
    display: inline-block;
    width: 18px;
    height: 18px;
    background-image: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23825E99' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    flex-shrink: 0;
    transition: transform .25s ease;
}
.fl-mob-menu .menu-item-has-children.is-expanded > a::after { transform: rotate(180deg); }

.fl-mob-menu .sub-menu { list-style: none; padding: 0; margin: 0; background: #FAF5FF; display: none; }
.fl-mob-menu .menu-item-has-children.is-expanded > .sub-menu { display: block; }
.fl-mob-menu .sub-menu li a {
    display: block !important;
    padding: 11px 20px 11px 36px;
    font-size: 13.5px;
    font-weight: 500;
    color: #4a3858 !important;
    font-family: 'Geist', sans-serif;
    text-decoration: none !important;
    border-top: 1px solid #E8DCEF;
    transition: color .15s;
}
.fl-mob-menu .sub-menu li a:hover { color: #825E99 !important; }

/* navigation.php no longer outputs a separate footer — logout is inside the account grid */