/* ArvuSmart — shared mobile-first styles
 * Toate paginile importă acest fișier înainte de <style> inline-ul lor.
 * Stilurile inline per pagină pot suprascrie aceste reguli unde e nevoie.
 */

:root {
    --bg: #000;
    --card: rgba(13,13,13,0.95);
    --text: #fff;
    --muted: rgba(255,255,255,0.55);
    --green: #09ed3b;
    --green-bg: rgba(9,237,59,0.08);
    --green-border: rgba(9,237,59,0.35);
    --border: rgba(255,255,255,0.07);
    --red: #ff4d4d;
    --yellow: #f5c518;
    --bottom-nav-h: 64px;
    --safe-bottom: env(safe-area-inset-bottom, 0px);
}

* { -webkit-tap-highlight-color: transparent; }

/* === MOBILE BREAKPOINT: ascunde top nav links, afișează bottom nav === */
@media (max-width: 767px) {
    /* Top nav: păstrează 64px, ascunde link-urile */
    nav .nav-links,
    nav .nav-link,
    nav.topbar .nav-links { display: none !important; }

    /* Ascunde butoanele auth din top nav pe mobile (le aducem în bottom sheet) */
    nav .nav-btn:not(.arvu-bottom-nav .nav-btn),
    nav > a[href="login.html"]:not(.nav-logo),
    nav > a[href="signup.html"]:not(.nav-logo),
    nav #nav-user,
    nav #nav-login { display: none !important; }

    /* Spațiu jos pentru bottom nav / sticky CTA */
    body { padding-bottom: calc(var(--bottom-nav-h) + var(--safe-bottom) + 0.5rem); }
    body.has-cta { padding-bottom: calc(80px + var(--safe-bottom)); }

    /* Inputs ≥16px pentru no-zoom iOS */
    input[type="text"], input[type="email"], input[type="password"],
    input[type="number"], input[type="tel"], select, textarea {
        font-size: 16px !important;
    }
}

/* === BOTTOM NAV — vizibil doar pe mobile === */
/* IMPORTANT: paginile au inline `nav { position:fixed; top:0; padding:0 3rem; height:64px; border-bottom:...; }`
   care, fiind selector element, cascadează pe `<nav class="arvu-bottom-nav">` pentru proprietățile nesuprascrise.
   Resetăm explicit `top`, `padding`, `border-bottom`, `height` ca să nu se pineze sus și să nu aibă padding orizontal mare. */
.arvu-bottom-nav {
    display: none;
    position: fixed;
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 200;
    background: rgba(0,0,0,0.92);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-top: 1px solid var(--border);
    border-bottom: none;
    padding: 0 0 var(--safe-bottom) 0;
    height: calc(var(--bottom-nav-h) + var(--safe-bottom));
}

@media (max-width: 767px) {
    .arvu-bottom-nav { display: flex; align-items: center; justify-content: space-around; }
}

.arvu-bottom-nav .tab {
    flex: 1;
    min-height: 44px;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    text-decoration: none;
    color: var(--muted);
    font-family: 'Figtree', sans-serif;
    font-size: 0.65rem;
    font-weight: 500;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 4px 2px;
    transition: color 0.2s;
}
.arvu-bottom-nav .tab .icon { font-size: 1.25rem; line-height: 1; }
.arvu-bottom-nav .tab.active { color: var(--green); }
.arvu-bottom-nav .tab.active .icon { transform: scale(1.05); }

/* Center FAB pentru AI */
.arvu-bottom-nav .tab.fab {
    flex: 0 0 auto;
    position: relative;
    margin-top: -18px;
}
.arvu-bottom-nav .tab.fab .icon {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--green);
    color: #000;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    box-shadow: 0 6px 20px rgba(9,237,59,0.4);
    border: 3px solid var(--bg);
}
.arvu-bottom-nav .tab.fab.active .icon { transform: scale(1); }

/* Label „Cunoștințe" → „Învață" pe ecrane f. mici */
@media (max-width: 360px) {
    .arvu-bottom-nav .tab .label-long { display: none; }
}
.arvu-bottom-nav .tab .label-short { display: none; }
@media (max-width: 360px) {
    .arvu-bottom-nav .tab .label-short { display: inline; }
}

/* === BOTTOM SHEET pentru „Mai+" === */
.arvu-sheet-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.6);
    z-index: 300;
}
.arvu-sheet-backdrop.open { display: block; }

.arvu-sheet {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 310;
    background: #0d0d0d;
    border-top: 1px solid var(--border);
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    padding: 1.2rem 1rem calc(1.2rem + var(--safe-bottom));
    transform: translateY(100%);
    transition: transform 0.25s ease;
    max-height: 70vh;
    overflow-y: auto;
}
.arvu-sheet.open { transform: translateY(0); }
.arvu-sheet .sheet-handle {
    width: 40px;
    height: 4px;
    background: rgba(255,255,255,0.2);
    border-radius: 2px;
    margin: 0 auto 1rem;
}
.arvu-sheet .sheet-title {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--muted);
    margin-bottom: 0.8rem;
}
.arvu-sheet a, .arvu-sheet button {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    width: 100%;
    padding: 0.9rem 0.6rem;
    color: var(--text);
    text-decoration: none;
    font-family: 'Figtree', sans-serif;
    font-size: 0.95rem;
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--border);
    cursor: pointer;
    text-align: left;
    min-height: 44px;
}
.arvu-sheet a:last-child, .arvu-sheet button:last-child { border-bottom: none; }
.arvu-sheet a .icon, .arvu-sheet button .icon { font-size: 1.2rem; width: 28px; text-align: center; }
.arvu-sheet button.logout { color: var(--red); }

/* === STICKY CTA pentru login/signup === */
.arvu-cta-bottom {
    display: none;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 200;
    background: linear-gradient(to top, rgba(0,0,0,0.98) 70%, rgba(0,0,0,0));
    padding: 16px;
    padding-bottom: calc(16px + var(--safe-bottom));
    flex-direction: column;
    gap: 10px;
}
@media (max-width: 767px) {
    .arvu-cta-bottom { display: flex; }
}
.arvu-cta-bottom .btn-cta {
    width: 100%;
    min-height: 52px;
    background: var(--green);
    color: #000;
    border: none;
    border-radius: 12px;
    font-family: 'Figtree', sans-serif;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
}
.arvu-cta-bottom .btn-cta:disabled { opacity: 0.5; cursor: not-allowed; }
.arvu-cta-bottom .cta-link {
    text-align: center;
    color: var(--muted);
    font-size: 0.85rem;
    text-decoration: none;
}
.arvu-cta-bottom .cta-link strong { color: #fff; }

/* === Helper utilities folosite în pagini === */
.arvu-table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 0 -1rem;
    padding: 0 1rem;
}
.arvu-table-scroll table { min-width: 540px; }