/* ===== Faruk Store — storefront theme (on top of Bootstrap 5) ===== */
:root {
    --fs-primary: #0f766e;
    --fs-primary-dark: #115e59;
    --fs-primary-soft: #ccfbf1;
    --fs-accent: #f59e0b;
    --fs-ink: #0f172a;
    --fs-muted: #64748b;
    --fs-border: #e2e8f0;
    --fs-surface: #f8fafc;
    --fs-radius: 14px;
    --bs-primary: #0f766e;
    --bs-primary-rgb: 15, 118, 110;
    --bs-link-color: #0f766e;
    --bs-link-color-rgb: 15, 118, 110;
    --bs-link-hover-color: #115e59;
    --bs-link-hover-color-rgb: 17, 94, 89;
    --bs-body-font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --bs-body-color: #1e293b;
    --bs-border-radius: .6rem;
}

body { background: #fff; color: var(--bs-body-color); display: flex; flex-direction: column; min-height: 100vh; }
.site-main { flex: 1 0 auto; }
a { text-decoration: none; }
a:hover { text-decoration: underline; }
.min-w-0 { min-width: 0; }
.skip-link { position: absolute; left: 1rem; top: .5rem; z-index: 2000; background: #fff; padding: .5rem 1rem; border-radius: .5rem; }

.btn-primary {
    --bs-btn-bg: var(--fs-primary); --bs-btn-border-color: var(--fs-primary);
    --bs-btn-hover-bg: var(--fs-primary-dark); --bs-btn-hover-border-color: var(--fs-primary-dark);
    --bs-btn-active-bg: #134e4a; --bs-btn-active-border-color: #134e4a;
    --bs-btn-disabled-bg: #5eaaa3; --bs-btn-disabled-border-color: #5eaaa3;
    font-weight: 600;
}
.btn-outline-primary {
    --bs-btn-color: var(--fs-primary); --bs-btn-border-color: var(--fs-primary);
    --bs-btn-hover-bg: var(--fs-primary); --bs-btn-hover-border-color: var(--fs-primary);
    --bs-btn-active-bg: var(--fs-primary-dark); --bs-btn-active-border-color: var(--fs-primary-dark);
}
.text-bg-primary { background-color: var(--fs-primary) !important; }
.border-primary { border-color: var(--fs-primary) !important; }
.form-control:focus, .form-select:focus, .form-check-input:focus { border-color: #5eead4; box-shadow: 0 0 0 .2rem rgba(15, 118, 110, .2); }
.form-check-input:checked { background-color: var(--fs-primary); border-color: var(--fs-primary); }
.page-link { color: var(--fs-primary); }
.active > .page-link, .page-link.active { background-color: var(--fs-primary); border-color: var(--fs-primary); }
.list-group-item.active { background-color: var(--fs-primary); border-color: var(--fs-primary); }

/* ---- Header ---- */
.topbar { background: var(--fs-ink); color: #cbd5e1; padding: .35rem 0; }
.topbar a { color: #e2e8f0; }
.site-header { background: rgba(255, 255, 255, .96); backdrop-filter: saturate(180%) blur(8px); border-bottom: 1px solid var(--fs-border); }
.brand { display: inline-flex; align-items: center; gap: .5rem; color: var(--fs-ink); font-weight: 800; font-size: 1.25rem; letter-spacing: -.02em; }
.brand:hover { text-decoration: none; color: var(--fs-ink); }
.brand-mark { width: 36px; height: 36px; display: inline-grid; place-items: center; border-radius: 10px; background: linear-gradient(135deg, var(--fs-primary), #14b8a6); color: #fff; font-size: 1.1rem; }
.search-form { min-width: 0; max-width: 640px; margin: 0 auto; }
.search-form .form-control { border-radius: 999px 0 0 999px; padding-left: 1.1rem; background: var(--fs-surface); }
.search-form .btn { border-radius: 0 999px 999px 0; padding-inline: 1.1rem; }
@media (max-width: 991.98px) { .search-form { flex-basis: 100%; max-width: none; } }
.btn-icon { border: 0; background: transparent; color: var(--fs-ink); font-weight: 500; padding: .45rem .6rem; border-radius: .6rem; display: inline-flex; align-items: center; }
.btn-icon:hover { background: var(--fs-surface); text-decoration: none; }
.btn-icon .bi { font-size: 1.3rem; }
.cart-badge { position: absolute; top: 0; left: 1.45rem; min-width: 1.15rem; height: 1.15rem; padding: 0 .3rem; border-radius: 999px; background: var(--fs-accent); color: #111; font-size: .7rem; font-weight: 700; display: grid; place-items: center; }
.category-nav { border-top: 1px solid var(--fs-border); }
/* No overflow here: a scrolling container would clip the category dropdowns. */
.category-menu { flex-wrap: wrap; }
.category-menu .dropdown-menu { margin-top: 0; border-radius: .6rem; box-shadow: 0 10px 30px rgba(15, 23, 42, .1); }
.category-menu .nav-link { color: #334155; font-weight: 500; padding: .6rem .9rem; white-space: nowrap; }
.category-menu .nav-link:hover { color: var(--fs-primary); text-decoration: none; }

/* ---- Hero & sections ---- */
.hero { border-radius: var(--fs-radius); overflow: hidden; }
.hero .carousel-item { position: relative; }
.hero-img { width: 100%; height: clamp(240px, 38vw, 440px); object-fit: cover; display: block; }
.hero-fallback, .hero-plain { background: linear-gradient(120deg, var(--fs-primary), #0ea5e9); }
.hero-caption { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; padding: clamp(1.5rem, 5vw, 4rem); color: #fff; max-width: 680px; text-shadow: 0 1px 12px rgba(0, 0, 0, .15); }
.value-props .vp { display: flex; gap: .75rem; align-items: center; padding: 1rem; border: 1px solid var(--fs-border); border-radius: var(--fs-radius); background: var(--fs-surface); height: 100%; }
.value-props .vp .bi { font-size: 1.6rem; color: var(--fs-primary); }
.value-props .vp strong { display: block; font-size: .95rem; }
.value-props .vp span { font-size: .8rem; color: var(--fs-muted); }
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.section-head h2 { font-size: 1.4rem; font-weight: 700; margin: 0; letter-spacing: -.01em; }
.section-head a { font-weight: 600; font-size: .9rem; }
.category-tile { position: relative; display: block; border-radius: var(--fs-radius); overflow: hidden; aspect-ratio: 3 / 2; background: var(--fs-surface); color: #fff; }
.category-tile img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; }
.category-tile:hover img { transform: scale(1.04); }
.category-tile-body { position: absolute; inset: auto 0 0 0; padding: 1rem 1.25rem; background: linear-gradient(transparent, rgba(0, 0, 0, .55)); }
.category-tile-body strong { display: block; font-size: 1.25rem; }
.category-tile-body small { opacity: .9; }
.category-tile:hover { text-decoration: none; }

/* ---- Product cards ---- */
.product-card { border: 1px solid var(--fs-border); border-radius: var(--fs-radius); overflow: hidden; transition: box-shadow .2s ease, transform .2s ease; }
.product-card:hover { box-shadow: 0 10px 30px rgba(15, 23, 42, .08); transform: translateY(-2px); }
.product-media { position: relative; display: block; aspect-ratio: 1 / 1; background: var(--fs-surface); }
.product-media img { width: 100%; height: 100%; object-fit: cover; }
.product-placeholder { display: grid; place-items: center; width: 100%; height: 100%; color: #94a3b8; font-size: 2.5rem; }
.product-badges { position: absolute; top: .6rem; left: .6rem; display: flex; gap: .3rem; }
.product-cat { font-size: .75rem; text-transform: uppercase; letter-spacing: .05em; color: var(--fs-muted); font-weight: 600; }
.product-title { font-size: .98rem; font-weight: 600; margin: .2rem 0 .4rem; line-height: 1.35; }
.product-title a { color: var(--fs-ink); }
.price { font-weight: 800; font-size: 1.1rem; color: var(--fs-ink); }
.price-old { color: #94a3b8; margin-left: .35rem; font-size: .9rem; }
.save-amount { display: block; font-size: .75rem; color: #b91c1c; font-weight: 600; }
.price-lg { font-size: 2rem; font-weight: 800; color: var(--fs-ink); letter-spacing: -.02em; }
@media (max-width: 575.98px) {
    .product-card .card-body { padding: .75rem; }
    .product-card .btn { font-size: .8rem; padding: .35rem .5rem; }
    .price { font-size: 1rem; }
}

/* ---- Catalog ---- */
.filter-panel { gap: 1rem; }
.filter-block { border: 1px solid var(--fs-border); border-radius: var(--fs-radius); padding: 1rem; margin-bottom: 1rem; width: 100%; }
.filter-title { font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; color: var(--fs-muted); font-weight: 700; margin-bottom: .6rem; }
.category-filter a { display: block; padding: .2rem 0; color: #334155; }
.category-filter a.active { color: var(--fs-primary); font-weight: 700; }
.empty-state { text-align: center; padding: 4rem 1rem; }
.empty-state > .bi { font-size: 3rem; color: #94a3b8; display: block; margin-bottom: 1rem; }

/* ---- Product page ---- */
.gallery-main { border-radius: var(--fs-radius); overflow: hidden; background: var(--fs-surface); position: relative; }
.gallery-main img { width: 100%; height: 100%; object-fit: cover; }
.gallery-badge { position: absolute; top: 1rem; left: 1rem; width: auto !important; height: auto !important; font-size: .95rem; }
.gallery-thumbs { display: flex; gap: .5rem; margin-top: .75rem; overflow-x: auto; }
.gallery-thumbs .thumb { border: 2px solid transparent; border-radius: .6rem; padding: 0; width: 76px; height: 76px; overflow: hidden; background: none; flex: 0 0 auto; }
.gallery-thumbs .thumb.active { border-color: var(--fs-primary); }
.gallery-thumbs img { width: 100%; height: 100%; object-fit: cover; }
.qty-stepper { display: flex; width: 140px; }
.qty-stepper .btn { width: 40px; }
.qty-stepper .form-control { border-radius: 0; -moz-appearance: textfield; }
.qty-stepper .btn:first-child { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.qty-stepper .btn:last-child { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.qty-stepper input::-webkit-outer-spin-button, .qty-stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.stock-pill { display: inline-flex; gap: .35rem; align-items: center; padding: .3rem .75rem; border-radius: 999px; font-size: .85rem; font-weight: 600; }
.stock-pill.in { background: #dcfce7; color: #166534; }
.stock-pill.low { background: #fef3c7; color: #92400e; }
.stock-pill.out { background: #fee2e2; color: #991b1b; }
.perks li { margin-bottom: .35rem; }
.perks .bi { color: var(--fs-primary); margin-right: .35rem; }
.spec-table th { width: 40%; color: var(--fs-muted); font-weight: 500; }

/* ---- Cart & checkout ---- */
.cart-thumb { width: 88px; height: 88px; flex: 0 0 88px; border-radius: .6rem; overflow: hidden; background: var(--fs-surface); display: block; }
.cart-thumb img { width: 100%; height: 100%; object-fit: cover; }
.cart-thumb.small-thumb { width: 56px; height: 56px; flex-basis: 56px; }
.qty-input { width: 80px; }
.summary-card { border-radius: var(--fs-radius); border-color: var(--fs-border); background: var(--fs-surface); }
.summary-list { margin: 0 0 1rem; }
.summary-list > div { display: flex; justify-content: space-between; gap: 1rem; padding: .3rem 0; }
.summary-list dt { font-weight: 400; }
.summary-list dd { margin: 0; font-weight: 600; white-space: nowrap; }
.summary-total { border-top: 1px solid var(--fs-border); margin-top: .4rem; padding-top: .7rem !important; font-size: 1.15rem; }
.summary-total dt, .summary-total dd { font-weight: 800; }
.coupon-applied { background: var(--fs-primary-soft); color: var(--fs-primary-dark); padding: .5rem .75rem; border-radius: .6rem; font-size: .9rem; }
.free-ship { background: #fef9c3; padding: .5rem .75rem; border-radius: .6rem; }
.checkout-steps { list-style: none; display: flex; gap: .5rem; padding: 0; margin: 0 0 1.5rem; flex-wrap: wrap; font-size: .85rem; counter-reset: step; }
.checkout-steps li { counter-increment: step; color: var(--fs-muted); display: flex; align-items: center; gap: .4rem; }
.checkout-steps li::before { content: counter(step); width: 1.5rem; height: 1.5rem; border-radius: 50%; display: grid; place-items: center; background: var(--fs-border); font-weight: 700; font-size: .75rem; }
.checkout-steps li:not(:last-child)::after { content: ""; width: 2rem; height: 2px; background: var(--fs-border); margin-left: .25rem; }
.checkout-steps li.done::before { background: var(--fs-primary); color: #fff; content: "✓"; }
.checkout-steps li.current { color: var(--fs-ink); font-weight: 700; }
.checkout-steps li.current::before { background: var(--fs-ink); color: #fff; }
.step-num { display: inline-grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: 50%; background: var(--fs-primary); color: #fff; font-size: .85rem; margin-right: .35rem; }
.option-list { display: grid; gap: .6rem; }
.option-card { display: flex; gap: .75rem; align-items: flex-start; padding: .9rem 1rem; border: 1px solid var(--fs-border); border-radius: .75rem; cursor: pointer; transition: border-color .15s, background .15s; }
.option-card:hover { border-color: #99f6e4; }
.option-card:has(input:checked) { border-color: var(--fs-primary); background: #f0fdfa; box-shadow: 0 0 0 1px var(--fs-primary); }
.option-card .form-check-input { margin-top: .25rem; flex-shrink: 0; }
.option-body { flex: 1; }
.option-price { font-weight: 700; white-space: nowrap; }
.checkout-items li { display: flex; gap: .75rem; align-items: center; padding: .4rem 0; }
.ci-thumb { position: relative; width: 48px; height: 48px; flex: 0 0 48px; border-radius: .5rem; background: #fff; border: 1px solid var(--fs-border); }
.ci-thumb img { width: 100%; height: 100%; object-fit: cover; border-radius: .5rem; }
.ci-qty { position: absolute; top: -.45rem; right: -.45rem; background: var(--fs-muted); color: #fff; font-size: .7rem; border-radius: 999px; min-width: 1.2rem; height: 1.2rem; display: grid; place-items: center; font-weight: 700; }

/* ---- Orders ---- */
.confirmation-hero > .bi { font-size: 3.5rem; display: block; margin-bottom: .5rem; }
.order-tracker { list-style: none; display: flex; padding: 0; margin: 1rem 0 0; }
.order-tracker li { flex: 1; position: relative; text-align: center; font-size: .8rem; color: var(--fs-muted); }
.order-tracker li::before { content: ""; position: absolute; top: .55rem; left: -50%; width: 100%; height: 3px; background: var(--fs-border); z-index: 0; }
.order-tracker li:first-child::before { display: none; }
.order-tracker li.done::before { background: var(--fs-primary); }
.order-tracker .dot { position: relative; z-index: 1; display: block; width: 1.25rem; height: 1.25rem; margin: 0 auto .35rem; border-radius: 50%; background: var(--fs-border); border: 3px solid #fff; box-shadow: 0 0 0 1px var(--fs-border); }
.order-tracker li.done .dot { background: var(--fs-primary); box-shadow: 0 0 0 1px var(--fs-primary); }
.order-tracker li.current .label { color: var(--fs-ink); font-weight: 700; }
.bank-details { white-space: pre-wrap; font-family: inherit; }
.tracking { background: var(--fs-surface); border-radius: .6rem; padding: .6rem .8rem; }

/* ---- Auth & account ---- */
.auth-container { max-width: 520px; }
.auth-card { border-radius: var(--fs-radius); border-color: var(--fs-border); box-shadow: 0 10px 40px rgba(15, 23, 42, .06); }
.account-nav .list-group-item { border-color: var(--fs-border); }
.content-page article { max-width: 760px; line-height: 1.75; }

/* ---- Footer ---- */
.site-footer { background: var(--fs-ink); color: #cbd5e1; margin-top: 4rem; }
.site-footer .brand { color: #fff; }
.footer-title { font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; color: #fff; font-weight: 700; margin-bottom: .9rem; }
.footer-links li { margin-bottom: .45rem; }
.footer-links a, .footer-contact a { color: #cbd5e1; }
.footer-links a:hover { color: #fff; }
.footer-contact li { margin-bottom: .45rem; }
.footer-contact .bi { margin-right: .35rem; color: #5eead4; }
.footer-bottom { border-top: 1px solid rgba(255, 255, 255, .08); color: #94a3b8; }
.payment-icons .bi { font-size: 1.6rem; margin-right: .6rem; color: #e2e8f0; }
.site-footer .text-secondary-emphasis { color: #94a3b8 !important; }

.toast.success { background: #065f46; color: #fff; }
.toast.error { background: #991b1b; color: #fff; }
.toast .btn-close { filter: invert(1); }

/* ---- Language switcher ---- */
.lang-switch { display: inline-flex; border: 1px solid rgba(255, 255, 255, .25); border-radius: 999px; overflow: hidden; }
.lang-switch a { padding: 0 .55rem; line-height: 1.5; font-weight: 600; font-size: .75rem; color: #cbd5e1; text-decoration: none; }
.lang-switch a.active { background: #fff; color: var(--fs-ink); }