/* ============================================
   TECHSHOP LANKA — Storefront Fine-Tuned UI
   ============================================ */

/* ─── TOPBAR ─── */
.topbar { background: var(--topbar-bg, #0f172a); padding: 0; color: var(--topbar-contrast, #ffffff); }
.topbar .container { display: flex; align-items: center; justify-content: space-between; min-height: 38px; gap: 16px; }
.topbar-left, .topbar-right { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.topbar-link { color: var(--topbar-contrast, #ffffff) !important; font-size: 12px; font-weight: 500; display: flex; align-items: center; gap: 5px; text-decoration: none; transition: all .2s; opacity: 0.92; }
.topbar-link:hover { color: var(--topbar-contrast, #ffffff) !important; opacity: 1; text-decoration: underline; }
.topbar-link i { color: inherit; }
@media(max-width: 767px) { .topbar { display: none; } }

/* ─── NAVBAR ─── */
.navbar { background: #fff; border-bottom: 2px solid #e2e8f0; position: sticky; top: 0; z-index: 200; transition: box-shadow .3s; }
.navbar.scrolled { box-shadow: 0 4px 24px rgba(0,0,0,0.08); border-bottom-color: transparent; }
.navbar-inner { display: flex; align-items: center; gap: 12px; height: 68px; position: relative; }
.navbar-brand { display: flex; align-items: center; gap: 8px; text-decoration: none; flex-shrink: 0; }
.brand-icon { width: 42px; height: 42px; background: linear-gradient(135deg, var(--accent), var(--accent-dark)); border-radius: 10px; display: flex; align-items: center; justify-content: center; color: var(--accent-contrast, #fff); font-size: 20px; flex-shrink: 0; box-shadow: 0 4px 12px rgba(37,99,235,0.3); }
.brand-text { font-family: 'Outfit', sans-serif; font-size: 21px; font-weight: 800; color: #0f172a; }
.brand-accent { color: var(--accent); }
.navbar-logo { max-height: 44px; width: auto; object-fit: contain; }

/* ─── HERO SLIDER ─── */
.hero-slider-wrap {
    max-width: 1280px;
    margin: 24px auto 0;
    padding: 0 20px;
}
.hero-slider {
    position: relative;
    overflow: hidden;
    background: #1e293b;
    line-height: 0;
    border-radius: 20px;
    box-shadow: 0 10px 32px rgba(15, 23, 42, 0.15);
    height: 480px; /* fixed height so absolute slides stack correctly */
}
.slide { display: none; position: absolute; inset: 0; width: 100%; cursor: pointer; }
.slide.active { display: flex; }
/* Direction-aware enter animations */
.slide.slide-enter-right { animation: slideEnterRight 0.75s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards; }
.slide.slide-enter-left  { animation: slideEnterLeft  0.75s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards; }
.slide.slide-exit-left   { animation: slideExitLeft   0.75s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards; }
.slide.slide-exit-right  { animation: slideExitRight  0.75s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards; }
@keyframes slideEnterRight { from { opacity: 0; transform: translateX(80px); } to { opacity: 1; transform: translateX(0); } }
@keyframes slideEnterLeft  { from { opacity: 0; transform: translateX(-80px); } to { opacity: 1; transform: translateX(0); } }
@keyframes slideExitLeft   { from { opacity: 1; transform: translateX(0); } to { opacity: 0; transform: translateX(-80px); } }
@keyframes slideExitRight  { from { opacity: 1; transform: translateX(0); } to { opacity: 0; transform: translateX(80px); } }
/* Ken Burns zoom on the background image */
.slide.active img { animation: kenBurns 6s ease-in-out forwards; }
@keyframes kenBurns { from { transform: scale(1.08); } to { transform: scale(1); } }
/* Text slides up with slight delay for layered entrance */
.slide.active .slide-text { animation: textSlideUp 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.2s both; }
@keyframes textSlideUp { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: translateY(0); } }
.slide img { width: 100%; height: 100%; object-fit: cover; line-height: 1; position: absolute; inset: 0; }
.slide-overlay {
    position: absolute; inset: 0;
    background: linear-gradient(to left, rgba(15,23,42,0.82) 0%, rgba(15,23,42,0.5) 50%, rgba(15,23,42,0.08) 100%);
    display: flex; align-items: center; justify-content: flex-end;
    width: 100%;
}
.slide-overlay .container {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    width: 100%;
    line-height: 1;
}
.slide-text {
    max-width: 560px;
    padding: 40px 48px 40px 24px;
    color: #fff;
    text-align: right;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}
.slide-badge { display: inline-flex; align-items: center; gap: 6px; background: var(--accent); color: var(--accent-contrast, #ffffff); padding: 5px 14px; border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; margin-bottom: 18px; }
.slide-title { font-family: 'Outfit', sans-serif; font-size: clamp(26px, 4vw, 52px); font-weight: 900; line-height: 1.12; margin-bottom: 14px; text-shadow: 0 2px 16px rgba(0,0,0,0.35); }
.slide-subtitle { font-size: 15px; margin-bottom: 28px; line-height: 1.7; max-width: 480px; text-align: right; }
.slide-actions { display: flex; gap: 12px; flex-wrap: wrap; justify-content: flex-end; }
.slide-prev, .slide-next { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(255,255,255,0.92); backdrop-filter: blur(4px); border: none; width: 46px; height: 46px; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 15px; color: #1e293b; z-index: 10; transition: all .25s; box-shadow: 0 2px 16px rgba(0,0,0,0.25); }
.slide-prev:hover, .slide-next:hover { background: #fff; transform: translateY(-50%) scale(1.1); }
.slide-prev { left: 24px; } .slide-next { right: 24px; }
.slide-dots { position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%); display: flex; gap: 8px; z-index: 10; }
.slide-dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,0.45); border: none; cursor: pointer; transition: all .35s; padding: 0; }
.slide-dot.active { width: 28px; border-radius: 4px; background: #fff; }
.slide-timer { position: absolute; bottom: 0; left: 0; height: 3px; background: linear-gradient(90deg, #2563eb, #60a5fa); }
/* ─── SLIDE HERO MOBILE ─── */
@media(max-width:767px) {
    .hero-slider-wrap {
        margin: 10px auto 0;
        padding: 0 10px;
    }
    .hero-slider { border-radius: 14px; height: 230px; }
    .slide { height: 230px; }
    .slide-text {
        padding: 16px 44px 16px 16px;
        text-align: right;
        align-items: flex-end;
        max-width: 82%;
    }
    .slide-badge { font-size: 10px; padding: 3px 10px; margin-bottom: 8px; }
    .slide-title { font-size: 18px; line-height: 1.2; margin-bottom: 8px; }
    .slide-subtitle { font-size: 12px; display: none; }
    .slide-actions .btn { padding: 6px 14px; font-size: 12px; min-height: 36px; }
    .slide-prev, .slide-next { width: 34px; height: 34px; font-size: 12px; }
    .slide-prev { left: 8px; } .slide-next { right: 8px; }
    .slide-dots { bottom: 12px; }
}

/* ─── TRUST BAR ─── */
.trust-bar { background: #fff; border-bottom: 1px solid #e2e8f0; padding: 12px 0; }
.trust-items { display: flex; align-items: center; justify-content: center; gap: 32px; flex-wrap: wrap; }
.trust-item { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: #334155; white-space: nowrap; }
.trust-item i { color: var(--accent); font-size: 18px; }
@media(max-width:640px) { .trust-items { gap: 14px; } .trust-item span { display: none; } }

/* ─── SECTION STYLES ─── */
.section { padding: 52px 0; }
.section-header { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 28px; flex-wrap: wrap; gap: 12px; }
.section-title { font-size: clamp(20px, 2.5vw, 28px); font-weight: 800; color: #0f172a; margin: 0; }
.section-subtitle { color: #64748b; font-size: 14px; margin-top: 4px; }
.section-label { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px; color: var(--accent); background: var(--accent-light); padding: 4px 12px; border-radius: 999px; margin-bottom: 8px; }
.section-link { font-size: 14px; font-weight: 600; color: var(--accent); text-decoration: none; display: flex; align-items: center; gap: 4px; transition: gap .2s; }
.section-link:hover { gap: 8px; color: var(--accent-dark); }

/* ─── CATEGORY CARDS ─── */
.category-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 12px; }
.category-card { background: #fff; border: 1.5px solid #e2e8f0; border-radius: 16px; padding: 18px 10px 14px; text-align: center; cursor: pointer; transition: all .25s cubic-bezier(.4,0,.2,1); text-decoration: none; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.category-card:hover { border-color: var(--accent); transform: translateY(-5px); box-shadow: 0 10px 32px rgba(37,99,235,0.13); }
.category-icon { width: 54px; height: 54px; border-radius: 14px; background: var(--accent-light); display: flex; align-items: center; justify-content: center; font-size: 22px; color: var(--accent); transition: all .25s; }
.category-card:hover .category-icon { background: var(--accent); color: var(--accent-contrast, #ffffff); box-shadow: 0 4px 16px rgba(37,99,235,0.3); }
.category-name { font-size: 12px; font-weight: 700; color: #1e293b; line-height: 1.3; }
.category-count { font-size: 11px; color: #94a3b8; background: #f1f5f9; padding: 2px 8px; border-radius: 999px; font-weight: 600; }
@media(max-width:480px) { .category-grid { grid-template-columns: repeat(3, 1fr); } }

/* ─── PRODUCT CARDS ─── */
.product-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 16px; }
.product-card { background: #fff; border: 1.5px solid #e2e8f0; border-radius: 16px; overflow: hidden; transition: all .25s cubic-bezier(.4,0,.2,1); display: flex; flex-direction: column; cursor: pointer; }
.product-card:hover { transform: translateY(-5px); box-shadow: 0 12px 40px rgba(37,99,235,0.12); border-color: #bfdbfe; }

.product-card-img { position: relative; background: #f8fafc; aspect-ratio: 1; overflow: hidden; }
.product-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.product-card:hover .product-card-img img { transform: scale(1.07); }
.product-card-img-placeholder { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; color: #cbd5e1; font-size: 44px; min-height: 160px; }

.product-card-badges { position: absolute; top: 10px; left: 10px; display: flex; flex-direction: column; gap: 4px; z-index: 2; }
.product-badge-sale { background: var(--badge-sale-bg, #dc2626); color: var(--badge-sale-text, #ffffff); font-size: 10px; font-weight: 800; padding: 3px 8px; border-radius: 999px; letter-spacing: .3px; }
.product-badge-new  { background: var(--accent); color: var(--accent-contrast, #ffffff); font-size: 10px; font-weight: 800; padding: 3px 8px; border-radius: 999px; }
.product-badge-hot  { background: var(--badge-featured-bg, #f97316); color: var(--badge-featured-text, #ffffff); font-size: 10px; font-weight: 800; padding: 3px 8px; border-radius: 999px; }

.product-card-wishlist { position: absolute; top: 10px; right: 10px; background: rgba(255,255,255,0.9); border: none; width: 32px; height: 32px; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 13px; color: #94a3b8; transition: all .2s; box-shadow: 0 2px 8px rgba(0,0,0,0.1); z-index: 2; }
.product-card-wishlist:hover { color: #dc2626; background: #fff; transform: scale(1.1); }

.product-card-overlay { position: absolute; inset: 0; background: rgba(15,23,42,0.35); display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity .25s; z-index: 3; }
.product-card:hover .product-card-overlay { opacity: 1; }

.product-card-body { padding: 14px 14px 16px; display: flex; flex-direction: column; flex: 1; }
.product-card-category { font-size: 10px; color: #2563eb; font-weight: 700; text-transform: uppercase; letter-spacing: .8px; margin-bottom: 5px; }
.product-card-name-link { text-decoration: none; }
.product-card-name { font-size: 13px; font-weight: 600; color: #1e293b; line-height: 1.45; margin-bottom: 6px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; transition: color .2s; }
.product-card-name-link:hover .product-card-name { color: #2563eb; }
.product-card:hover .product-card-name { color: #2563eb; }
.product-card:focus { outline: 3px solid #2563eb; outline-offset: 2px; border-radius: 16px; }
.product-card-sku { font-size: 10px; color: #94a3b8; margin-bottom: 8px; }

.product-card-price { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; }
.product-price-current { font-size: 17px; font-weight: 800; color: var(--price-color, #f97316); }
.product-price-original { font-size: 12px; text-decoration: line-through; color: #94a3b8; }

.product-card-footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; }
.product-card-stock { font-size: 11px; font-weight: 600; }
.product-stock-in  { color: #16a34a; }
.product-stock-low { color: #d97706; }
.product-stock-out { color: #dc2626; }
.product-add-cart { background: linear-gradient(135deg, #2563eb, #1d4ed8); color: #fff; border: none; border-radius: 8px; padding: 8px 12px; font-size: 12px; font-weight: 700; cursor: pointer; transition: all .2s; white-space: nowrap; display: flex; align-items: center; gap: 5px; }
.product-add-cart:hover { background: linear-gradient(135deg, #1d4ed8, #1e40af); transform: scale(1.03); box-shadow: 0 4px 14px rgba(37,99,235,0.3); }
.product-add-cart:disabled { background: #e2e8f0; color: #94a3b8; cursor: not-allowed; transform: none; box-shadow: none; }

@media(max-width:767px)  { .product-grid { grid-template-columns: repeat(2,1fr); gap: 10px; } }
@media(max-width:400px)  { .product-grid { grid-template-columns: repeat(2,1fr); gap: 8px; } }

/* ─── PROMO BANNERS ─── */
.promo-banners { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.promo-banner { border-radius: 18px; overflow: hidden; position: relative; min-height: 160px; display: flex; align-items: center; text-decoration: none; transition: all .25s; }
.promo-banner:hover { transform: scale(1.015); box-shadow: 0 10px 36px rgba(0,0,0,0.15); }
.promo-banner img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }
.promo-banner-content { position: relative; z-index: 2; padding: 28px 32px; color: #fff; }
.promo-banner-content h3 { font-size: 20px; font-weight: 800; margin-bottom: 6px; text-shadow: 0 1px 4px rgba(0,0,0,0.2); }
.promo-banner-content p { font-size: 13px; opacity: .85; margin-bottom: 14px; }
@media(max-width:600px) { .promo-banners { grid-template-columns: 1fr; } }

/* ─── FOOTER ─── */
.footer { background: var(--footer-bg, #0f172a); color: var(--footer-contrast, #ffffff); margin-top: 56px; }
.footer-brand-text { font-size: 13px; color: var(--footer-contrast, #ffffff) !important; opacity: 0.85; line-height: 1.8; margin-top: 10px; max-width: 240px; }
.footer-col-title { font-size: 13px; font-weight: 700; color: var(--footer-contrast, #ffffff) !important; margin-bottom: 14px; text-transform: uppercase; letter-spacing: .8px; }
.footer-link { display: flex; align-items: center; gap: 6px; color: var(--footer-contrast, #ffffff) !important; opacity: 0.85; font-size: 13px; padding: 5px 0; transition: all .2s; text-decoration: none; }
.footer-link:hover { opacity: 1; color: var(--accent-light, #38bdf8) !important; padding-left: 3px; }
.footer-social { display: flex; gap: 8px; margin-top: 18px; }
.social-btn { width: 36px; height: 36px; border-radius: 10px; background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.2); display: flex; align-items: center; justify-content: center; font-size: 14px; color: var(--footer-contrast, #ffffff); transition: all .2s; text-decoration: none; }
.social-btn:hover { background: var(--hover-color, #2563eb); border-color: transparent; color: #fff; transform: translateY(-2px); }
.footer-bottom { background: var(--footer-bottom-bg, #020617); border-top: 1px solid rgba(255,255,255,0.1); }
.footer-bottom-inner { display: flex; align-items: center; justify-content: space-between; padding: 16px 0; flex-wrap: wrap; gap: 10px; }
.footer-bottom-inner p { font-size: 13px; color: var(--footer-contrast, #ffffff); opacity: 0.85; }
.footer-legal { display: flex; gap: 16px; flex-wrap: wrap; }
.footer-legal a { color: var(--footer-contrast, #ffffff); opacity: 0.78; font-size: 12px; transition: all .2s; }
.footer-legal a:hover { opacity: 1; text-decoration: underline; }
.footer-contact { display: flex; flex-direction: column; gap: 10px; }
.footer-contact-row { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; color: var(--footer-contrast, #ffffff) !important; opacity: 0.88; }
.footer-contact-icon { color: var(--accent); width: 14px; flex-shrink: 0; margin-top: 2px; }
.payment-badges { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 4px; }
.payment-badge { background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.18); padding: 3px 8px; border-radius: 4px; font-size: 10px; font-weight: 700; letter-spacing: .5px; color: var(--footer-contrast, #ffffff); }
.footer-payment { margin-top: 16px; }

/* ─── SEARCH RESULTS ─── */
.search-results { position: absolute; top: calc(100% + 8px); left: 0; right: 0; background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; overflow: hidden; z-index: 300; box-shadow: 0 8px 32px rgba(0,0,0,0.12); display: none; }
.search-results.open { display: block; }
.search-result-item { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid #f1f5f9; transition: background .15s; cursor: pointer; }
.search-result-item:last-child { border-bottom: none; }
.search-result-item:hover { background: #f8fafc; }
.search-result-item img { width: 44px; height: 44px; object-fit: cover; border-radius: 8px; border: 1px solid #e2e8f0; flex-shrink: 0; }
.search-result-info h4 { font-size: 13px; font-weight: 600; color: #1e293b; margin-bottom: 2px; }
.search-result-info p  { font-size: 13px; color: #f97316; font-weight: 700; }

/* ─── BREADCRUMB ─── */
.breadcrumb-bar { background: #fff; border-bottom: 1px solid #e2e8f0; }
.breadcrumb-bar .container { display: flex; align-items: center; gap: 6px; padding-top: 10px; padding-bottom: 10px; flex-wrap: wrap; }
.breadcrumb-bar a { color: #2563eb; font-size: 13px; font-weight: 500; }
.breadcrumb-bar span { color: #64748b; font-size: 13px; }
.breadcrumb-sep { color: #cbd5e1; }

/* ─── WHY US FEATURES ─── */
.features-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 24px; }
.feature-item { text-align: center; padding: 28px 20px; background: #fff; border-radius: 16px; border: 1px solid #e2e8f0; transition: all .25s; }
.feature-item:hover { transform: translateY(-4px); box-shadow: 0 8px 28px rgba(37,99,235,0.1); border-color: #bfdbfe; }
.feature-icon { width: 64px; height: 64px; border-radius: 16px; display: flex; align-items: center; justify-content: center; margin: 0 auto 16px; font-size: 24px; }
.feature-title { font-size: 15px; font-weight: 700; margin-bottom: 8px; color: #1e293b; }
.feature-desc { font-size: 13px; color: #64748b; line-height: 1.7; }

/* ─── ALERTS / FLASH ─── */
.alert { padding: 14px 18px; border-radius: 10px; margin-bottom: 14px; display: flex; align-items: flex-start; gap: 10px; font-size: 14px; border: 1px solid; }
.alert-success { background: #f0fdf4; color: #166534; border-color: #86efac; }
.alert-danger   { background: #fef2f2; color: #991b1b; border-color: #fca5a5; }
.alert-warning  { background: #fffbeb; color: #92400e; border-color: #fcd34d; }
.alert-info     { background: #eff6ff; color: #1e40af; border-color: #93c5fd; }

/* ─── SUB-CATEGORY PILLS ─── */
.sub-category-bar { display: flex; gap: 8px; margin-bottom: 20px; overflow-x: auto; scrollbar-width: none; padding-bottom: 4px; }
.sub-category-bar::-webkit-scrollbar { display: none; }
.sub-cat-pill { display: inline-flex; align-items: center; gap: 6px; padding: 7px 16px; border: 1.5px solid #e2e8f0; border-radius: 999px; font-size: 13px; font-weight: 600; color: #475569; background: #fff; cursor: pointer; white-space: nowrap; transition: all .2s; text-decoration: none; flex-shrink: 0; }
.sub-cat-pill:hover, .sub-cat-pill.active { background: #2563eb; color: #fff; border-color: #2563eb; box-shadow: 0 4px 14px rgba(37,99,235,0.25); }

/* ─── AUTH PAGES ─── */
.auth-page { min-height: 85vh; display: flex; align-items: center; justify-content: center; padding: 32px 20px; background: linear-gradient(135deg, #eff6ff 0%, #e0f2fe 50%, #f0fdf4 100%); }
.auth-card { background: #fff; border-radius: 20px; padding: 40px 36px; width: 100%; max-width: 440px; box-shadow: 0 20px 60px rgba(37,99,235,0.1); border: 1px solid #e2e8f0; }
.auth-logo { text-align: center; margin-bottom: 24px; }
.auth-title { font-size: 24px; font-weight: 800; text-align: center; margin-bottom: 4px; }
.auth-subtitle { color: #64748b; font-size: 14px; text-align: center; margin-bottom: 28px; }

/* ─── WHATSAPP FLOAT ─── */
.whatsapp-float { position: fixed; bottom: 28px; right: 28px; width: 56px; height: 56px; background: #25d366; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 28px; color: #fff; box-shadow: 0 4px 24px rgba(37,211,102,0.45); z-index: 900; transition: transform .25s, box-shadow .25s; text-decoration: none; }
.whatsapp-float:hover { transform: scale(1.1); box-shadow: 0 6px 32px rgba(37,211,102,0.6); color: #fff; }
.whatsapp-tooltip { position: absolute; right: calc(100% + 12px); background: #1e293b; color: #fff; padding: 6px 12px; border-radius: 8px; font-size: 12px; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .2s; box-shadow: 0 4px 12px rgba(0,0,0,0.2); }
.whatsapp-float:hover .whatsapp-tooltip { opacity: 1; }
@media(max-width:480px) { .whatsapp-float { bottom: 16px; right: 16px; width: 48px; height: 48px; font-size: 22px; } }