/* =========================================================
   FabioMart – Public Storefront CSS
   Bootstrap 5.3 + custom overrides
   ========================================================= */

:root {
    --fm-primary:    #e63946;
    --fm-secondary:  #1d3557;
    --fm-accent:     #f4a261;
    --fm-text:       #212529;
    --fm-muted:      #6c757d;
    --fm-radius:     0.5rem;
    --fm-shadow:     0 2px 16px rgba(0,0,0,.08);
}

body {
    font-family: 'Segoe UI', system-ui, sans-serif;
    color: var(--fm-text);
    background: #f8f9fa;
}

/* ── Utilities ── */
.text-primary  { color: var(--fm-primary)!important; }
.bg-primary    { background-color: var(--fm-primary)!important; }
.btn-primary   { background-color: var(--fm-primary); border-color: var(--fm-primary); }
.btn-primary:hover { background-color: #c1121f; border-color: #c1121f; }

/* ── Navbar ── */
.navbar-top { background: var(--fm-secondary); }
.navbar-main { background: #fff; box-shadow: 0 1px 6px rgba(0,0,0,.08); position: sticky; top: 0; z-index: 1030; }
.navbar-main .nav-link { font-weight: 500; color: #333; padding: .5rem .9rem; }
.navbar-main .nav-link:hover { color: var(--fm-primary); }
.navbar-main .nav-link.active { color: var(--fm-primary); }

/* ── Search bar ── */
.search-wrap { position: relative; flex: 1; max-width: 560px; }
.search-wrap input { border-radius: 24px; padding-left: 44px; background: #f0f2f4; border: 1.5px solid transparent; transition: .2s; }
.search-wrap input:focus { background: #fff; border-color: var(--fm-primary); box-shadow: none; }
.search-wrap .search-icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--fm-muted); }
.search-results { position: absolute; top: calc(100% + 6px); left: 0; right: 0; background: #fff; border: 1px solid #ddd; border-radius: var(--fm-radius); box-shadow: var(--fm-shadow); z-index: 9999; max-height: 420px; overflow-y: auto; }
.search-results .search-item { display: flex; align-items: center; gap: 12px; padding: 10px 14px; text-decoration: none; color: inherit; transition: .15s; }
.search-results .search-item:hover { background: #f8f9fa; }
.search-results .search-item img { width: 44px; height: 44px; border-radius: 6px; object-fit: cover; }

/* ── Hero Carousel ── */
.hero-carousel .carousel-item img { height: 480px; object-fit: cover; }
.hero-carousel .carousel-caption { background: linear-gradient(transparent, rgba(0,0,0,.55)); bottom: 0; left: 0; right: 0; padding: 2rem; text-align: left; border-radius: 0; }
@media(max-width:768px){ .hero-carousel .carousel-item img { height: 240px; } .hero-carousel .carousel-caption h5 { font-size:1.1rem; } }

/* ── Category strip ── */
.category-strip { background: #fff; border-bottom: 1px solid #e9ecef; }
.cat-chip { display:inline-flex; align-items:center; gap:6px; padding:8px 16px; border-radius:20px; text-decoration:none; color:#444; font-size:.875rem; font-weight:500; border:1px solid #e9ecef; white-space:nowrap; transition:.2s; }
.cat-chip:hover, .cat-chip.active { background:var(--fm-primary); color:#fff; border-color:var(--fm-primary); }
.cat-chip i { font-size:1rem; }

/* ── Section titles ── */
.section-title { font-size: 1.5rem; font-weight: 700; color: var(--fm-secondary); }
.section-title::after { content:''; display:block; width:48px; height:3px; background:var(--fm-primary); margin-top:6px; border-radius:2px; }

/* ── Product Cards ── */
.product-card { background: #fff; border-radius: var(--fm-radius); box-shadow: var(--fm-shadow); overflow: hidden; transition: transform .2s, box-shadow .2s; height: 100%; }
.product-card:hover { transform: translateY(-4px); box-shadow: 0 8px 24px rgba(0,0,0,.12); }
.product-card .card-img-wrap { position: relative; overflow: hidden; background: #f8f9fa; }
.product-card .card-img-wrap img,
.product-card .product-img { width: 100%; height: 220px; object-fit: cover; transition: transform .4s; }
.product-card:hover .card-img-wrap img,
.product-card:hover .product-img { transform: scale(1.04); }
.product-card .badge-corner { position: absolute; top: 10px; left: 10px; }
.product-card .action-btns { position: absolute; top: 10px; right: 10px; display: flex; flex-direction: column; gap: 6px; opacity: 0; transform: translateX(8px); transition: .2s; }
.product-card:hover .action-btns { opacity: 1; transform: translateX(0); }
.product-card .action-btn { width: 36px; height: 36px; border-radius: 50%; background: #fff; border: none; box-shadow: 0 2px 6px rgba(0,0,0,.12); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: .15s; color: #444; }
.product-card .action-btn:hover { background: var(--fm-primary); color: #fff; }
.product-card .card-body { padding: 14px; }
.product-card .product-name { font-weight: 600; font-size: .95rem; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.product-card .price-current { font-size: 1.15rem; font-weight: 700; color: var(--fm-primary); }
.product-card .price-original { font-size: .85rem; color: var(--fm-muted); text-decoration: line-through; }
.product-card .add-cart-btn { width: 100%; margin-top: 10px; border-radius: 22px; font-weight: 600; font-size: .875rem; }
.discount-badge { background: var(--fm-primary); color: #fff; font-size: .75rem; font-weight: 700; padding: 3px 8px; border-radius: 12px; }
.new-badge { background: #198754; color: #fff; font-size: .75rem; font-weight: 700; padding: 3px 8px; border-radius: 12px; }

/* ── Star ratings ── */
.stars { color: #f4a261; font-size: .85rem; }

/* ── Cart page ── */
.cart-table th { background: #f8f9fa; font-weight: 600; font-size: .875rem; }
.cart-qty-input { width: 70px; text-align: center; }
.cart-summary { background: #fff; border-radius: var(--fm-radius); box-shadow: var(--fm-shadow); padding: 1.5rem; position: sticky; top: 90px; }

/* ── Product detail ── */
.product-detail-imgs .main-img { width: 100%; border-radius: var(--fm-radius); overflow: hidden; }
.product-detail-imgs .main-img img { width: 100%; height: 420px; object-fit: cover; }
.product-detail-imgs .thumb-list { display: flex; gap: 8px; margin-top: 10px; overflow-x: auto; }
.product-detail-imgs .thumb-list img { width: 72px; height: 72px; object-fit: cover; border-radius: 6px; cursor: pointer; border: 2px solid transparent; transition: .15s; }
.product-detail-imgs .thumb-list img.active { border-color: var(--fm-primary); }
.variant-btn { padding: 6px 16px; border: 1.5px solid #dee2e6; border-radius: 20px; background: #fff; cursor: pointer; font-size: .875rem; transition: .15s; }
.variant-btn:hover, .variant-btn.active { border-color: var(--fm-primary); color: var(--fm-primary); background: #fff0f1; }
.qty-input-wrap { display: flex; align-items: center; gap: 0; border: 1.5px solid #dee2e6; border-radius: 8px; overflow: hidden; width: fit-content; }
.qty-input-wrap button { border: none; background: #f8f9fa; padding: 8px 14px; cursor: pointer; font-size: 1rem; transition: .15s; }
.qty-input-wrap button:hover { background: var(--fm-primary); color: #fff; }
.qty-input-wrap input { border: none; width: 50px; text-align: center; outline: none; font-weight: 600; }

/* ── Reviews ── */
.review-item { border-bottom: 1px solid #f0f0f0; padding: 14px 0; }
.review-item:last-child { border-bottom: none; }
.review-author { font-weight: 600; font-size: .9rem; }

/* ── Promo code ── */
.promo-row input { border-radius: 8px 0 0 8px; }
.promo-row button { border-radius: 0 8px 8px 0; }

/* ── Trust badges ── */
.trust-badge { text-align: center; padding: 1.5rem 1rem; }
.trust-badge i { font-size: 2.4rem; color: var(--fm-primary); display: block; margin-bottom: .5rem; }
.trust-badge h6 { font-weight: 700; margin-bottom: .25rem; }

/* ── Footer ── */
footer { background: var(--fm-secondary) !important; color: rgba(255,255,255,.85) !important; }
footer a { color: rgba(255,255,255,.7) !important; text-decoration: none; transition: color .15s; }
footer a:hover { color: #fff !important; }
footer .footer-heading { font-weight: 700; color: #fff !important; font-size: 1rem; margin-bottom: 1.25rem; }
/* Fix invisible text — Bootstrap text-muted is dark gray; override for dark footer */
footer .text-muted, footer small.text-muted, footer li { color: rgba(255,255,255,.65) !important; }
footer h6.text-muted, footer .text-uppercase { color: rgba(255,255,255,.5) !important; letter-spacing:.04em; }
footer .btn-outline-secondary { color: rgba(255,255,255,.7); border-color: rgba(255,255,255,.3); }
footer .btn-outline-secondary:hover { background: rgba(255,255,255,.15); color: #fff; border-color: rgba(255,255,255,.6); }
footer hr { border-color: rgba(255,255,255,.15) !important; }
footer span, footer .d-flex span { color: rgba(255,255,255,.6) !important; }
.footer-bottom { background: rgba(0,0,0,.2); font-size: .82rem; }

/* ── Responsive product grid ── */
@media(max-width:576px){
    .product-card .card-img-wrap img,
    .product-card .product-img { height: 170px; }
    .hero-carousel .carousel-item img { height: 200px; }
}

/* ── Toast ── */
.fm-toast { position: fixed; bottom: 20px; right: 20px; z-index: 99999; min-width: 280px; }

/* ── Checkout ── */
.checkout-card { background: #fff; border-radius: var(--fm-radius); box-shadow: var(--fm-shadow); padding: 1.25rem; margin-bottom: 1rem; }
.payment-option { display: flex; align-items: center; gap: 12px; padding: 14px; border: 1.5px solid #dee2e6; border-radius: 10px; cursor: pointer; transition: .15s; }
.payment-option:has(input:checked) { border-color: var(--fm-primary); background: #fff0f1; }

/* ── Order status timeline ── */
.timeline { list-style: none; padding: 0; margin: 0; }
.timeline li { position: relative; padding-left: 32px; padding-bottom: 20px; }
.timeline li:last-child { padding-bottom: 0; }
.timeline li::before { content: ''; position: absolute; left: 10px; top: 22px; bottom: 0; width: 2px; background: #dee2e6; }
.timeline li:last-child::before { display: none; }
.timeline .dot { position: absolute; left: 0; top: 4px; width: 20px; height: 20px; border-radius: 50%; background: #dee2e6; display: flex; align-items: center; justify-content: center; font-size: 9px; }
.timeline .dot.done { background: #198754; color: #fff; }