/* ============================================
   LURAN Store — Components Stylesheet
   ============================================ */

/* === Navbar === */
.navbar { background: var(--bg-header); padding: 0 0; position: sticky; top: 0; z-index: 100; box-shadow: var(--shadow-sm); }
.navbar-inner { display: flex; align-items: center; justify-content: space-between; height: var(--header-height); gap: 20px; }
.navbar-logo { display: flex; align-items: center; gap: 10px; font-size: 1.6rem; font-weight: 800; color: var(--brand); letter-spacing: 2px; flex-shrink: 0; }
.navbar-logo img { height: 40px; }
.navbar-links { display: flex; align-items: center; gap: 28px; }
.navbar-links a { font-weight: 500; color: var(--text-primary); position: relative; padding: 4px 0; }
.navbar-links a::after { content: ''; position: absolute; bottom: -2px; left: 0; width: 0; height: 2px; background: var(--brand); transition: var(--transition); border-radius: var(--radius-full); }
.navbar-links a:hover::after, .navbar-links a.active::after { width: 100%; }
.navbar-links a:hover, .navbar-links a.active { color: var(--brand); }

/* All interactive buttons in the navbar share the same 42×42 footprint so
   they line up vertically and the click-areas feel consistent. */
.navbar-actions { display: flex; align-items: center; gap: 10px; }
.navbar-action-btn {
    position: relative; width: 42px; height: 42px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: var(--radius-full);
    background: var(--bg-main); color: var(--text-primary);
    transition: var(--transition); box-shadow: var(--shadow-sm);
    flex-shrink: 0;
    line-height: 1;
}
.navbar-action-btn:hover { background: var(--brand); color: var(--text-light); transform: translateY(-2px); }
.navbar-action-btn .count-badge { position: absolute; top: -4px; right: -4px; width: 20px; height: 20px; background: var(--danger); color: white; font-size: 0.7rem; font-weight: 700; border-radius: 50%; display: flex; align-items: center; justify-content: center; }

/* Search field — pill that hugs the navbar height; submit button is a
   round 34px chip inside it (so it doesn't fight the action buttons next
   to it for visual weight). */
.navbar-search {
    display: flex; align-items: center;
    background: var(--bg-main);
    border-radius: var(--radius-full);
    padding-block: 4px;
    padding-inline-start: 16px;
    padding-inline-end: 4px;
    flex: 1; max-width: 360px;
    box-shadow: var(--shadow-sm);
}
.navbar-search input {
    flex: 1; padding: 8px 6px; border: none; background: transparent;
    color: inherit; font-size: 0.9rem;
}
.navbar-search input:focus { outline: none; }
.navbar-search button {
    width: 34px; height: 34px;
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--text-secondary);
    border-radius: var(--radius-full);
    transition: var(--transition);
    flex-shrink: 0;
}
.navbar-search button:hover { color: var(--brand); background: rgba(var(--brand-rgb), 0.08); }

/* Language switcher — explicit height so it aligns with the 42px buttons */
.lang-switch {
    height: 42px;
    display: inline-flex; align-items: center; gap: 4px;
    padding: 0 14px;
    border-radius: var(--radius-full);
    background: var(--bg-main);
    font-weight: 600; font-size: 0.85rem;
    color: var(--brand);
    border: 1px solid var(--border-color);
    transition: var(--transition);
    flex-shrink: 0;
    white-space: nowrap;
}
.lang-switch:hover { background: var(--brand); color: var(--text-light); }

/* User-menu trigger — turned from <div> into <button> for keyboard a11y;
   reset UA chrome and lock to the same 42×42 footprint as the action btns. */
.user-menu { position: relative; }
.user-menu-toggle {
    width: 42px; height: 42px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 50%;
    cursor: pointer;
    background: transparent;
    transition: var(--transition);
    flex-shrink: 0;
}
.user-menu-toggle:hover { transform: translateY(-2px); }
.user-menu-toggle img {
    width: 36px; height: 36px;
    border-radius: 50%; object-fit: cover;
    border: 2px solid var(--brand-light);
    display: block;
}

/* === Dropdown menus ===
   Use opacity/visibility instead of display:none so Alpine's :class="{ 'is-open': open }"
   toggle (driven by `is-open`/`active` classes in the navbar component) actually shows
   the menu. Previously CSS hard-set `display: none` which Alpine x-show couldn't override
   reliably under the dark luxury theme. Colors remain whatever luxury-polish.css applies. */
.user-dropdown {
    position: absolute; top: 100%; right: 0; min-width: 200px;
    background: var(--bg-main); border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    padding: 8px 0; z-index: 200;
    opacity: 0; visibility: hidden;
    transform: translateY(-6px);
    pointer-events: none;
    transition: opacity .18s ease, transform .18s ease, visibility .18s;
}
body[dir="rtl"] .user-dropdown { right: auto; left: 0; }
.user-dropdown.is-open,
.user-dropdown.active { opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto; }
.user-dropdown a { display: flex; align-items: center; gap: 10px; padding: 10px 18px; font-size: 0.9rem; transition: var(--transition); }
.user-dropdown a:hover { background: var(--bg-section); color: var(--brand); }
.user-dropdown a.lang-option-active { background: rgba(var(--brand-rgb), 0.08); font-weight: 600; color: var(--brand); }
.user-dropdown hr { border: none; border-top: 1px solid var(--border-color); margin: 4px 0; }
.mobile-menu-btn { display: none; font-size: 1.4rem; color: var(--text-primary); }
@media (max-width: 768px) {
    .navbar-links, .navbar-search { display: none; }
    .mobile-menu-btn { display: flex; }
    .navbar-links.active { display: flex; flex-direction: column; position: absolute; top: var(--header-height); left: 0; right: 0; background: var(--bg-header); padding: 20px; gap: 16px; box-shadow: var(--shadow-md); }
}

/* === Footer === */
.footer { background: var(--bg-header); padding: 48px 0 0; margin-top: 60px; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 40px; padding-bottom: 40px; }
.footer-brand { }
.footer-brand h3 { color: var(--brand); font-size: 1.5rem; letter-spacing: 2px; margin-bottom: 12px; }
.footer-brand p { color: var(--text-secondary); font-size: 0.9rem; line-height: 1.8; }
.footer-col h4 { color: var(--text-primary); margin-bottom: 16px; font-size: 1rem; }
.footer-col a { display: block; color: var(--text-secondary); font-size: 0.9rem; padding: 4px 0; transition: var(--transition); }
.footer-col a:hover { color: var(--brand); padding-left: 4px; }
body[dir="rtl"] .footer-col a:hover { padding-left: 0; padding-right: 4px; }
.footer-social { display: flex; gap: 10px; margin-top: 16px; }
.footer-social a { width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-full); background: var(--bg-main); color: var(--text-secondary); transition: var(--transition); }
.footer-social a:hover { background: var(--brand); color: var(--text-light); transform: translateY(-3px); }
.footer-bottom { border-top: 1px solid var(--border-color); padding: 16px 0; text-align: center; color: var(--text-secondary); font-size: 0.85rem; }
@media (max-width: 768px) { .footer-grid { grid-template-columns: 1fr 1fr; gap: 24px; } }
@media (max-width: 480px) { .footer-grid { grid-template-columns: 1fr; } }

/* === Product Card === */
.product-card { background: var(--bg-card); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); transition: var(--transition); position: relative; }
.product-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.product-card-img { position: relative; overflow: hidden; aspect-ratio: 1; background: var(--bg-section); }
.product-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
.product-card:hover .product-card-img img { transform: scale(1.08); }
.product-card-wishlist { width: 36px; height: 36px; background: rgba(255,255,255,0.9); backdrop-filter: blur(4px); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: var(--text-secondary); transition: var(--transition); border: none; cursor: pointer; }
.product-card-wishlist:hover, .product-card-wishlist.active { color: var(--danger); background: white; }
.product-card-body { padding: 16px; }
.product-card-category { font-size: 0.8rem; color: var(--text-secondary); margin-bottom: 4px; text-transform: uppercase; letter-spacing: 0.5px; }
.product-card-name { font-size: 1rem; font-weight: 600; margin-bottom: 8px; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.product-card-price { display: flex; align-items: baseline; gap: 8px; margin-bottom: 8px; }
.product-card-rating { display: flex; align-items: center; gap: 4px; }
.product-card-rating .stars { color: var(--warning); font-size: 0.85rem; }
.product-card-rating .count { color: var(--text-secondary); font-size: 0.8rem; }
.product-card-actions { display: flex; gap: 8px; margin-top: 12px; }
.product-card-actions .btn { flex: 1; padding: 8px 12px; font-size: 0.85rem; }

/* === Category Card === */
.category-card { position: relative; border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 4/3; cursor: pointer; box-shadow: var(--shadow-sm); transition: var(--transition); }
.category-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.category-card img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
.category-card:hover img { transform: scale(1.1); }
.category-card-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.1) 60%, transparent 100%); display: flex; align-items: flex-end; padding: 24px; }
.category-card-name { color: white; font-size: 1.3rem; font-weight: 700; text-shadow: 0 2px 4px rgba(0,0,0,0.3); }
.category-card-count { color: rgba(255,255,255,0.8); font-size: 0.85rem; margin-top: 4px; }

/* === Star Rating === */
.star-rating { display: inline-flex; align-items: center; gap: 2px; }
.star-rating .star { color: #e0e0e0; font-size: 1.1rem; transition: var(--transition); }
.star-rating .star.filled { color: var(--warning); }
.star-rating .star.half { position: relative; }
.star-rating-input { display: flex; gap: 4px; }
.star-rating-input label { cursor: pointer; font-size: 1.5rem; color: #e0e0e0; transition: var(--transition); }
.star-rating-input label:hover, .star-rating-input label.active { color: var(--warning); }
.star-rating-input input { display: none; }

/* === Breadcrumb === */
.breadcrumb { display: flex; align-items: center; gap: 8px; padding: 16px 0; font-size: 0.9rem; flex-wrap: wrap; }
.breadcrumb a { color: var(--text-secondary); transition: var(--transition); }
.breadcrumb a:hover { color: var(--brand); }
.breadcrumb .separator { color: var(--text-muted); }
.breadcrumb .current { color: var(--brand); font-weight: 600; }

/* === Hero Section === */
.hero { position: relative; min-height: 500px; display: flex; align-items: center; background: linear-gradient(135deg, var(--bg-header) 0%, var(--bg-section) 100%); overflow: hidden; }
.hero-content { position: relative; z-index: 2; max-width: 600px; }
.hero-badge { display: inline-flex; align-items: center; gap: 6px; background: rgba(var(--brand-rgb), 0.1); color: var(--brand); padding: 6px 16px; border-radius: var(--radius-full); font-size: 0.85rem; font-weight: 600; margin-bottom: 20px; }
.hero h1 { font-size: 3rem; font-weight: 800; line-height: 1.2; margin-bottom: 16px; background: linear-gradient(135deg, var(--text-primary), var(--brand-dark)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.hero p { font-size: 1.15rem; color: var(--text-secondary); margin-bottom: 32px; line-height: 1.8; }
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.hero-decoration { position: absolute; right: -50px; top: 50%; transform: translateY(-50%); width: 500px; height: 500px; background: radial-gradient(circle, rgba(var(--brand-rgb), 0.08) 0%, transparent 70%); border-radius: 50%; z-index: 1; }
body[dir="rtl"] .hero-decoration { right: auto; left: -50px; }
@media (max-width: 768px) {
    .hero { min-height: 400px; } .hero h1 { font-size: 2rem; } .hero p { font-size: 1rem; }
    .hero-decoration { display: none; }
}

/* === Image Gallery === */
.gallery { display: flex; gap: 12px; }
.gallery-main { flex: 1; border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 1; background: var(--bg-section); }
.gallery-main img { width: 100%; height: 100%; object-fit: cover; cursor: zoom-in; transition: transform 0.3s ease; }
.gallery-main img:hover { transform: scale(1.05); }
.gallery-thumbs { display: flex; flex-direction: column; gap: 8px; width: 80px; }
.gallery-thumb { width: 80px; height: 80px; border-radius: var(--radius-sm); overflow: hidden; cursor: pointer; border: 2px solid transparent; transition: var(--transition); opacity: 0.6; }
.gallery-thumb:hover, .gallery-thumb.active { border-color: var(--brand); opacity: 1; }
.gallery-thumb img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 768px) {
    .gallery { flex-direction: column-reverse; }
    .gallery-thumbs { flex-direction: row; width: 100%; }
}

/* === Review Card === */
.review-card { background: var(--bg-section); border-radius: var(--radius); padding: 20px; }
.review-header { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.review-avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
.review-meta { }
.review-meta h5 { font-size: 0.95rem; font-weight: 600; }
.review-meta span { font-size: 0.8rem; color: var(--text-secondary); }
.review-body { color: var(--text-primary); font-size: 0.95rem; line-height: 1.7; }

/* === Cart Item === */
.cart-item { display: flex; gap: 16px; padding: 20px; background: var(--bg-main); border-radius: var(--radius); box-shadow: var(--shadow-sm); align-items: center; }
.cart-item-img { width: 100px; height: 100px; border-radius: var(--radius-sm); overflow: hidden; flex-shrink: 0; }
.cart-item-img img { width: 100%; height: 100%; object-fit: cover; }
.cart-item-info { flex: 1; }
.cart-item-name { font-weight: 600; margin-bottom: 4px; }
.cart-item-price { color: var(--brand); font-weight: 700; }
.cart-quantity { display: flex; align-items: center; gap: 0; border: 1px solid var(--border-color); border-radius: var(--radius-sm); overflow: hidden; }
.cart-quantity button { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; background: var(--bg-section); transition: var(--transition); }
.cart-quantity button:hover { background: var(--brand); color: white; }
.cart-quantity input { width: 48px; height: 36px; text-align: center; border: none; border-left: 1px solid var(--border-color); border-right: 1px solid var(--border-color); font-weight: 600; }
.cart-item-remove { color: var(--text-muted); transition: var(--transition); }
.cart-item-remove:hover { color: var(--danger); }
@media (max-width: 480px) { .cart-item { flex-wrap: wrap; } .cart-item-img { width: 80px; height: 80px; } }

/* === Sidebar Filter === */
.sidebar-filter { background: var(--bg-main); border-radius: var(--radius); padding: 24px; box-shadow: var(--shadow-sm); }
.filter-group { margin-bottom: 24px; }
.filter-group h4 { font-size: 0.95rem; margin-bottom: 12px; color: var(--text-primary); }
.filter-tag { display: inline-flex; align-items: center; padding: 6px 14px; border-radius: var(--radius-full); border: 1px solid var(--border-color); font-size: 0.85rem; cursor: pointer; transition: var(--transition); margin: 0 4px 8px 0; background: var(--bg-main); }
body[dir="rtl"] .filter-tag { margin: 0 0 8px 4px; }
.filter-tag:hover, .filter-tag.active { background: var(--brand); color: white; border-color: var(--brand); }
.filter-sort select { width: 100%; }

/* === Auth Pages === */
.auth-page { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--bg-header), var(--bg-section)); padding: 40px 20px; }
.auth-card { background: var(--bg-main); border-radius: var(--radius-xl); padding: 48px 40px; width: 100%; max-width: 440px; box-shadow: var(--shadow-lg); }
.auth-card-logo { text-align: center; margin-bottom: 32px; }
.auth-card-logo h2 { color: var(--brand); font-size: 2rem; letter-spacing: 3px; }
.auth-card-logo p { color: var(--text-secondary); font-size: 0.9rem; margin-top: 8px; }
.auth-divider { display: flex; align-items: center; gap: 12px; margin: 24px 0; color: var(--text-muted); font-size: 0.85rem; }
.auth-divider::before, .auth-divider::after { content: ''; flex: 1; height: 1px; background: var(--border-color); }
.auth-footer { text-align: center; margin-top: 24px; font-size: 0.9rem; color: var(--text-secondary); }
.auth-footer a { color: var(--brand); font-weight: 600; }
@media (max-width: 480px) { .auth-card { padding: 32px 24px; } }

/* === Checkout Summary === */
.checkout-summary { background: var(--bg-section); border-radius: var(--radius); padding: 24px; }
.checkout-summary-item { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid var(--border-color); }
.checkout-summary-total { display: flex; justify-content: space-between; padding: 16px 0 0; font-weight: 700; font-size: 1.2rem; color: var(--brand); }

/* === Profile === */
.profile-header { display: flex; align-items: center; gap: 24px; background: var(--bg-section); padding: 32px; border-radius: var(--radius-lg); margin-bottom: 32px; }
.profile-avatar { width: 100px; height: 100px; border-radius: 50%; object-fit: cover; border: 4px solid var(--brand-light); }
.profile-info h2 { margin-bottom: 4px; }
.profile-info p { color: var(--text-secondary); }
.profile-tabs { display: flex; gap: 0; border-bottom: 2px solid var(--border-color); margin-bottom: 24px; }
.profile-tab { padding: 12px 24px; font-weight: 600; color: var(--text-secondary); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -2px; transition: var(--transition); }
.profile-tab:hover, .profile-tab.active { color: var(--brand); border-bottom-color: var(--brand); }

/* === Storefront pagination ===
   Uses theme variables (not hardcoded #fff / #ececec) so the same rules
   work on the light base palette AND the dark luxury-polish overrides.
   The current page gets a brand fill + soft brand glow. */
.store-pagination {
    display: flex; justify-content: center; align-items: center;
    gap: 6px; flex-wrap: wrap;
    padding: 24px 0 12px;
}
.store-pagination-link {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 40px; height: 40px; padding: 0 12px;
    border-radius: var(--radius-full);
    background: var(--bg-card);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    font-size: 0.9rem; font-weight: 600;
    text-decoration: none;
    transition: var(--transition);
    line-height: 1;
}
.store-pagination-link:hover {
    background: var(--brand);
    color: #fff;
    border-color: var(--brand);
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(var(--brand-rgb), 0.28);
}
.store-pagination-link.is-current {
    background: linear-gradient(135deg, var(--brand-light), var(--brand-dark));
    color: #fff;
    border-color: var(--brand);
    cursor: default;
    box-shadow: 0 4px 14px rgba(var(--brand-rgb), 0.32);
}
.store-pagination-link.is-current:hover { transform: none; }
.store-pagination-link.is-disabled {
    opacity: 0.35; cursor: not-allowed; pointer-events: none;
    background: var(--bg-card); color: var(--text-secondary);
}
.store-pagination-dots {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 40px; height: 40px;
    color: var(--text-muted); font-weight: 600;
}

/* === Brand Logo Images === */
.navbar-logo { padding: 6px 0; }
.navbar-logo img {
    height: 56px;
    width: auto;
    max-width: 160px;
    object-fit: contain;
    border-radius: 10px;
    display: block;
    transition: transform 0.25s ease;
}
.navbar-logo:hover img { transform: scale(1.04); }

.footer-brand-logo { display: inline-block; margin-bottom: 14px; }
.footer-brand-logo img {
    max-width: 220px;
    width: 100%;
    height: auto;
    border-radius: 12px;
    display: block;
}

.admin-sidebar-logo { display: inline-block; }
.admin-sidebar-logo img {
    max-width: 140px;
    width: 100%;
    height: auto;
    border-radius: 12px;
    display: block;
    margin: 0 auto;
}

.auth-card-logo-img {
    max-width: 240px;
    width: 100%;
    height: auto;
    border-radius: 12px;
    display: block;
    margin: 0 auto 12px;
}

@media (max-width: 768px) {
    .navbar-logo img { height: 44px; max-width: 120px; }
    .footer-brand-logo img { max-width: 180px; }
}