/* Admin Bar Styling */
body.admin-bar-active { padding-top: 32px !important; }
body.admin-bar-active nav.sticky { top: 32px !important; }
@media print {
    body.admin-bar-active { padding-top: 0 !important; }
    body.admin-bar-active nav.sticky { top: 0 !important; }
}

/* ─── WordPress-like Admin Bar ───────────────────────────────────────────── */
.admin-bar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 2rem;
    background-color: var(--color-adminbar-bg);
    color: var(--color-adminbar-text);
    font-size: 13px;
    z-index: 100000;
}
.admin-bar a:hover,
.admin-bar .admin-bar-hover:hover {
    color: var(--color-adminbar-link) !important;
}
.admin-bar-edit {
    color: var(--color-adminbar-edit) !important;
    font-weight: 700;
}
.admin-bar-menu {
    background-color: var(--color-adminbar-menu);
    border: 1px solid var(--color-adminbar-bg);
}
.admin-bar-menu a:hover {
    background-color: var(--color-adminbar-bg) !important;
    color: var(--color-adminbar-link) !important;
}
.admin-bar-menu button:hover {
    background-color: var(--color-adminbar-bg) !important;
}

/* ─── Social Icons (top bar & footer) ────────────────────────────────────── */
.soc-hover-facebook:hover  { color: var(--color-social-facebook) !important; }
.soc-hover-twitter:hover   { color: var(--color-social-twitter) !important; }
.soc-hover-instagram:hover { color: var(--color-social-instagram) !important; }
.soc-hover-linkedin:hover  { color: var(--color-social-linkedin) !important; }
.soc-hover-youtube:hover   { color: var(--color-social-youtube) !important; }
.soc-hover-telegram:hover  { color: var(--color-social-telegram) !important; }

.soc-bg-hover-facebook:hover  { background-color: var(--color-social-facebook) !important; color: #fff !important; }
.soc-bg-hover-twitter:hover   { background-color: var(--color-social-twitter) !important; color: #fff !important; }
.soc-bg-hover-instagram:hover { background-color: var(--color-social-instagram) !important; color: #fff !important; }
.soc-bg-hover-linkedin:hover  { background-color: var(--color-social-linkedin) !important; color: #fff !important; }
.soc-bg-hover-youtube:hover   { background-color: var(--color-social-youtube) !important; color: #fff !important; }
.soc-bg-hover-telegram:hover  { background-color: var(--color-social-telegram) !important; color: #fff !important; }

/* ─── Main Navigation ────────────────────────────────────────────────────── */
.main-nav-inner { height: 3.5rem; }
@media (min-width: 1024px) {
    .main-nav-inner { height: 72px; }
}
.mobile-menu-btn { position: relative; z-index: 1000; }

.nav-link {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.625rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 500;
    border-radius: 0.75rem;
    white-space: nowrap;
    transition: all 0.3s ease;
    color: #475569;
}
.nav-link:hover {
    color: var(--color-accent);
    background-color: rgba(241, 245, 249, 0.8);
}
.nav-link.is-active {
    color: var(--color-accent);
    background-color: var(--color-accent-soft);
}

.nav-dropdown-panel { width: 600px; max-width: calc(100vw - 2rem); }
.nav-dropdown-deco {
    position: absolute;
    top: 0;
    right: 0;
    width: 8rem;
    height: 8rem;
    background-color: var(--color-accent-faint);
    border-bottom-left-radius: 100%;
    z-index: -10;
}

.nav-personality-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem;
    border-radius: 0.75rem;
    transition: background-color 0.2s ease;
}
.nav-personality-item:hover { background-color: #f8fafc; }
.nav-personality-emoji { font-size: 1.25rem; transition: transform 0.2s ease; }
.nav-personality-item:hover .nav-personality-emoji { transform: scale(1.1); }
.nav-personality-name { transition: color 0.2s ease; }
.nav-personality-item:hover .nav-personality-name { color: var(--color-accent) !important; }

/* ─── Footer ─────────────────────────────────────────────────────────────── */
.site-footer {
    background-color: #0f172a;
    color: #ffffff;
}

/* ─── Newsletter / Telegram Popup ────────────────────────────────────────── */
.site-popup-overlay{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:9999;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .3s;padding:1rem}
.site-popup-overlay.show{opacity:1;pointer-events:auto}
.site-popup{background:#fff;border-radius:1.5rem;max-width:440px;width:100%;box-shadow:0 25px 60px rgba(0,0,0,.25);transform:scale(.9) translateY(20px);transition:transform .35s cubic-bezier(.34,1.56,.64,1);overflow:hidden;position:relative}
.site-popup-overlay.show .site-popup{transform:scale(1) translateY(0)}
.site-popup-close{position:absolute;top:12px;left:12px;width:32px;height:32px;border-radius:50%;background:rgba(0,0,0,.08);border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:18px;color:#64748b;transition:background .2s;z-index:2}
.site-popup-close:hover{background:rgba(0,0,0,.15);color:#1e293b}
.site-popup-body{padding:2rem 2rem 1.5rem;text-align:center}
.site-popup-icon{width:64px;height:64px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:28px;color:#fff;margin:0 auto 1rem;box-shadow:0 8px 20px rgba(0,0,0,.2)}
.site-popup-title{font-size:1.25rem;font-weight:800;color:#1e293b;margin:0 0 .5rem}
.site-popup-desc{font-size:.9rem;color:#64748b;line-height:1.6;margin:0 0 1.5rem}
.site-popup-btn{display:inline-flex;align-items:center;gap:.5rem;padding:.875rem 2rem;border-radius:.75rem;font-weight:700;font-size:.95rem;color:#fff;text-decoration:none;border:none;cursor:pointer;transition:transform .2s,box-shadow .2s;width:100%;justify-content:center}
.site-popup-btn:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(0,0,0,.2)}

/* ─── Mobile User Drawer ─────────────────────────────────────────────────── */
#mobileUserDrawerOverlay { z-index: 99998; }
#mobileUserDrawer { width: 280px; z-index: 99999; }
.mobile-drawer-head {
    background: linear-gradient(90deg, var(--color-accent) 0%, var(--color-accent-hover) 100%);
}

/* ─── Alpine.js helper ───────────────────────────────────────────────────── */