/* =============================================
   Public-site shared controls: search pill, language menu, cart badge,
   login/register buttons, dropdowns and the auth modals.
   Used by the Default layout AND every template layout. All colours come
   from the front-end variables (--text, --accent, --bg-card ...), which each
   template defines for light and dark mode.
   ============================================= */

/* Search pill */
.nav-search { position: relative; }
.nav-search input {
    border: 1px solid var(--border-light);
    border-radius: 50px;
    padding: 0.42rem 1rem 0.42rem 2.4rem;
    font-size: 0.88rem;
    width: 240px;
    background: var(--hover-overlay);
    color: var(--text);
    transition: all 0.2s;
}
.nav-search input::placeholder { color: var(--text-dim); }
.nav-search input:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-light);
    outline: none;
    background: var(--focus-overlay);
    width: 300px;
}
.nav-search i {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-dim);
    font-size: 0.9rem;
}
[dir="ltr"] .nav-search i { left: 0.85rem; }
[dir="rtl"] .nav-search i { right: 0.85rem; }
[dir="rtl"] .nav-search input { padding: 0.42rem 2.4rem 0.42rem 1rem; }

/* Language dropdown */
.lang-dropdown .btn {
    border: 1px solid var(--border-light);
    border-radius: 8px;
    padding: 0.38rem 0.7rem;
    font-size: 0.88rem;
    color: var(--text-muted);
    background: transparent;
    display: flex;
    align-items: center;
    gap: 0.4rem;
}
.lang-dropdown .btn:hover { background: var(--hover-overlay); color: var(--text); }
.lang-dropdown .dropdown-menu {
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: 10px;
    padding: 0.35rem;
    min-width: 140px;
}
.lang-dropdown .dropdown-item {
    color: var(--text-muted);
    border-radius: 6px;
    padding: 0.5rem 0.75rem;
    font-size: 0.88rem;
}
.lang-dropdown .dropdown-item:hover { background: var(--accent-light); color: var(--accent); }
.lang-dropdown .dropdown-item.active { background: var(--accent); color: #fff; }
.lang-dropdown .dropdown-item.active:hover { background: var(--accent-dark); color: #fff; }

/* Cart badge */
.cart-link { position: relative; }
.cart-link .badge {
    position: absolute;
    top: -4px;
    font-size: 0.62rem;
    padding: 0.18rem 0.42rem;
    border-radius: 50%;
    background: var(--danger);
}
[dir="ltr"] .cart-link .badge { right: -4px; }
[dir="rtl"] .cart-link .badge { left: -4px; }

/* Auth buttons */
.btn-nav-login {
    border: 1px solid var(--border-light);
    color: var(--text-muted);
    background: transparent;
    border-radius: 8px;
    padding: 0.38rem 0.9rem;
    font-weight: 500;
    font-size: 0.88rem;
    transition: all 0.2s;
}
.btn-nav-login:hover { background: var(--focus-overlay); color: var(--text); border-color: var(--border-light); }
.btn-nav-register {
    background: var(--accent);
    color: #fff;
    border: 1px solid var(--accent);
    border-radius: 8px;
    padding: 0.38rem 0.9rem;
    font-weight: 500;
    font-size: 0.88rem;
    transition: all 0.2s;
}
.btn-nav-register:hover { background: var(--accent-dark); border-color: var(--accent-dark); color: #fff; }

.dropdown-menu {
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: 10px;
    padding: 0.35rem;
}
.dropdown-item {
    color: var(--text-muted);
    border-radius: 6px;
    padding: 0.55rem 0.8rem;
    transition: all 0.15s;
}
.dropdown-item:hover { background: var(--accent-light); color: var(--accent); }

.container { width: 90%; max-width: 90%; }
main { flex: 1; padding-bottom: 2rem; }

/* Auth modal */
.auth-logo-modal {
    width: 68px;
    height: 68px;
    border-radius: 16px;
    background: var(--accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    color: white;
}
.modal-content { background: var(--bg-card); border: 1px solid var(--border-light); border-radius: 16px; color: var(--text); backdrop-filter: blur(12px); }
.modal-content .form-control { background: var(--hover-overlay); border-color: var(--border-light); color: var(--text); }
.modal-content .form-control:focus { background: var(--focus-overlay); border-color: var(--accent); color: var(--text); box-shadow: 0 0 0 3px var(--accent-light); }
.modal-content .form-control::placeholder { color: var(--text-dim); }
.modal-content .form-label { color: var(--text-muted); }
.modal-content .form-check-label { color: var(--text-muted); }
.modal-content .text-muted { color: var(--text-dim) !important; }
[data-bs-theme="dark"] .modal-content .btn-close { filter: invert(1); }
.modal-content .alert-info { background: var(--accent-light); border-color: var(--accent-light); color: var(--accent); }
.modal-content .btn-outline-secondary { color: var(--text-muted); border-color: var(--border-light); }
.modal-content .btn-outline-secondary:hover { background: var(--hover-overlay); color: var(--text); }
.btn-primary { background: var(--accent); border-color: var(--accent); }
.btn-primary:hover { background: var(--accent-dark); border-color: var(--accent-dark); }