/* Main project styles - no inline styles allowed per spec */
:root { --brand-color: #0d6efd; }

body {
    padding-bottom: 4rem;
    background: #ffffff;
    color: #212529;
}

.cookie-consent { position: fixed; left: 0; right:0; bottom: 0; background: rgba(0,0,0,0.7); color: #fff; display: none; }
.cookie-inner { display:flex; justify-content:space-between; align-items:center; gap:1rem; padding:0.75rem 1rem; }
.cookie-inner p { margin:0; }

@media (max-width:576px) {
  .cookie-inner { flex-direction:column; align-items:flex-start; }
}

.navbar-logo img {
    height: 40px;
}

.cbs-logo {
    height: 20px;
    vertical-align: middle;
}
.hero-video-wrap{position:relative;width:100%;overflow:hidden}
.hero-video-wrap video{width:100%;height:auto;display:block}
.hero-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none}
/* simple semi-transparent dark navbar over the hero */
.hero-nav{position:absolute;top:0;left:0;right:0;height:64px;display:flex;align-items:center;justify-content:space-between;padding:0 1rem;background:rgba(3,37,65,0.7);z-index:20;pointer-events:auto}
.hero-nav .nav-left,.hero-nav .nav-right{display:flex;align-items:center}
.nav-logo{height:50px;display:block}
.nav-right{gap:.6rem}
.nav-right a{color:#fff;text-decoration:none;display:inline-flex;align-items:center;justify-content:center}
.nav-icon{width:36px;height:36px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:rgba(255,255,255,0.06);color:#fff}
@media (max-width:600px){.hero-nav{height:56px;padding:0 .6rem}.nav-logo{height:32px}.nav-icon{width:30px;height:30px}}
.hero-content{width:min(900px,80%);display:flex;flex-direction:column;align-items:center;gap:.6rem;text-align:center}
.hero-sub{white-space:normal;word-break:break-word}

/* base font size for hero elements; used to keep titles/sub/cta proportional */
.hero-video-wrap{--hero-base:clamp(28px,6vw,96px)}

#main-title{pointer-events:auto;text-align:center;color:#fff;font-weight:100;line-height:1;font-size:var(--hero-base)}
/* second line spacing */
#main-title br{display:block;line-height:1}

/* sub and cta scale relative to --hero-base but keep reasonable min/max with clamp */
.hero-sub{color:#fff;max-width:900px;text-align:center;margin-top:0.8rem;font-size:clamp(12px,calc(var(--hero-base) * 0.22),20px)}
.hero-cta a{color:#fff;text-decoration:none;font-weight:500;font-size:clamp(12px,calc(var(--hero-base) * 0.16),16px)}

/* Mobile portrait: ensure video shows center and a minimum hero height */
@media (max-width: 900px) and (orientation: portrait){
    .hero-video-wrap{min-height:940px;height:940px;--hero-base:clamp(32px,7vw,80px)}
    .hero-video-wrap video{width:100%;height:100%;object-fit:cover;object-position:center center;display:block}
    .hero-overlay{align-items:center;padding:0 1rem}
    .hero-sub{max-width:85%}
}

/* Mobile: center hero text and buttons; reduce hero p font-size by 20% */
@media (max-width: 900px) {
    .about-hero .hero-inner .row { justify-content: center; }
    .about-hero .hero-inner .row > [class*="col-"] { text-align: center !important; }
    .about-hero .hero-inner p, .about-hero .hero-inner .lead { font-size: 0.8em !important; }
    .about-hero .hero-inner .btn { display: inline-block; margin-left: auto; margin-right: auto; }
}

/* Toolbar / shop adjustments for mobile */
@media (max-width: 900px) {
    /* Right-align the mobile filter row */
    .toolbar-row .mobile-filter-row { justify-content: flex-end; }

    /* Make filter icon larger and hide the text label (text already hidden with d-none d-md-inline) */
    #filter-toggle i.fa-sliders, #filter-toggle-desktop i.fa-sliders { font-size: 1rem; }
    #filter-toggle { padding: .28rem .5rem; }

    /* Center the switches inline */
    .toolbar-row .switch-group { display:flex; justify-content: center !important; width: 100%; }
    .toolbar-row .switch-group .form-check { margin: 0 .5rem; display: inline-flex; align-items: center; }

    /* Center the sort block under switches */
    .toolbar-row .sort-block { display: block !important; text-align: center !important; margin: .6rem auto 0 !important; width:100%; }

    /* Mobile category select next to filter should be noticeable */
    #mobile-category-select { min-width: 140px; }
}

/* Extra overrides to enforce mobile-only icon (hide any label text) and smaller switches */
@media (max-width: 900px) {
    /* hide any textual label inside the mobile filter button */
    .mobile-filter-row #filter-toggle .filter-label, #filter-toggle .filter-label { display: none !important; visibility: hidden !important; width: 0 !important; height: 0 !important; overflow: hidden !important; }

    /* center sort-block again if other rules interfere */
    .toolbar-row .sort-block { display:block !important; text-align:center !important; margin-top:.5rem !important; }

    /* make form-switch smaller and centered */
    .toolbar-row .form-check.form-switch .form-check-input {
        width: 34px !important;
        height: 18px !important;
        transform: scale(0.92) !important;
    }
    .toolbar-row .form-check.form-switch .form-check-label { margin-left: .4rem !important; font-size: .9rem !important; }
}

/* Ensure hero background shows center and cap its height on mobile */
@media (max-width: 900px) {
    .hero-media, .about-hero .hero-media, .refs-hero .hero-media {
        background-position: center center !important;
        background-size: cover !important;
        height: 460px !important;
        max-height: 460px !important;
        overflow: hidden;
    }
}

/* Ensure hero parent reserves space and content is center-center on mobile */
@media (max-width: 900px) {
    .about-hero, .refs-hero { position: relative; min-height: 460px; height: 460px; }
    .about-hero .hero-media, .refs-hero .hero-media { position: absolute; inset: 0; }
    .about-hero .hero-inner, .refs-hero .hero-inner {
        position: relative;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        padding-top: 0;
        padding-bottom: 0;
    }
    .about-hero .hero-inner .row { width: 100%; margin: 0; }
    .about-hero .hero-inner .col-lg-8, .about-hero .hero-inner .col-lg-4 { width: 100%; }
    /* Push the following content down by ensuring the section occupies its height */
    .about-hero + main, .refs-hero + main { margin-top: 0; }
}

/* Slightly larger hero paragraph on small screens for readability (+8%) */
@media (max-width: 900px) {
    .about-hero .hero-inner p, .refs-hero .hero-inner p { font-size: 0.86em !important; }
}

.brand-logo {
    height: 200px;
} 

#navbar {
    background: rgba(14, 24, 39, 0.872);
    backdrop-filter: blur(10px);
    color: #f3f3f3;
}

/* Replace bootstrap toggler default with FontAwesome bar so color matches icons */
.navbar-light .navbar-toggler-icon { background-image: none; }
.navbar-toggler .navbar-toggler-icon-fa { color: #f3f3f3; font-size: 1.15em; line-height:1; }
.navbar-toggler { color: inherit; border: 0; }

#navbar .nav-link {
    color: #d1d9e79d;
    font-weight: 500;
    transition: color 0.3s ease;
}

#navbar .nav-link:hover {
    color: var(--brand-color);
}

/* Featured categories carousel styles */
.featured{padding:1.6rem 0}
.featured .title{font-size:1.4rem;font-weight:600;margin-bottom:1rem}
.list-wrapper{position:relative}
.list-viewport{overflow:hidden}
.list{display:flex;gap:1rem;align-items:flex-start;transition:transform 400ms cubic-bezier(.22,.9,.3,1)}
.item{flex:0 0 calc(25% - 0.75rem);text-decoration:none;color:inherit}
.img-box{background:#fff;border-radius:6px;overflow:hidden;box-shadow:0 6px 18px rgba(13,37,65,0.06);display:flex;flex-direction:column;align-items:stretch}
.img-info{position:relative;overflow:hidden;display:block}
.img-info .img{width:100%;height:340px;object-fit:cover;display:block;transition:transform 300ms ease}
.item .title{padding:.6rem .6rem .9rem;color:#222;font-size:1rem;text-align:center}
.item:hover .img-info .img{transform:scale(1.06)}
.item:active .img-info .img{transform:scale(0.99)}
.arrow{position:absolute;top:50%;transform:translateY(-50%);border:0;background:rgba(0,0,0,0.5);color:#fff;width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:12}
.arrow.left{left:-12px}
.arrow.right{right:-12px}
.arrow:focus{outline:2px solid rgba(0,0,0,0.12)}
.scrollbar-wrapper{position:relative;margin-top:.75rem}
.scrollbar{height:6px;background:rgba(0,0,0,0.06);border-radius:6px;overflow:hidden}
.scrollbar-thumb{height:100%;background:var(--brand-color);width:80px;transform:translateX(0);transition:transform 300ms linear,width 300ms linear}

@media (max-width:900px){
    .item{flex:0 0 calc(50% - 0.75rem)}
    .img-info .img{height:280px}
}
@media (max-width:576px){
    .item{flex:0 0 calc(100% - 0.75rem)}
    .img-info .img{height:220px}
    .arrow.left{left:6px}
    .arrow.right{right:6px}
}

/* Shop page styles */
.shop-container { gap: 1.5rem; }
.filter-card { position: sticky; top: 84px; }
.product-grid .product-card { border: 0; overflow: hidden; border-radius: 8px; }
.product-card .img-wrap { display: block; overflow: hidden; }
.product-card img { width:100%; height:220px; object-fit:cover; transition:transform .28s ease; }
.product-card:hover img { transform: scale(1.04); }
.product-card .card-body { padding: .8rem; }
.product-card .card-title { font-size: .95rem; margin-bottom: .25rem; }
.product-card .price { font-size: .95rem; }

@media (max-width:576px) {
    .product-card img { height:160px; }
}

/* Toolbar and sidebar */
.toolbar-row { border-top: 1px solid rgba(0,0,0,0.06); padding-top: 1rem; margin-top: .5rem; }
.sidebar { position: sticky; top: 84px; }
.sidebar .form-check { margin-bottom: .5rem; }

/* Product card refinements to match reference */
.product-card { overflow: visible; }
.product-card .main-img { height: 320px; object-fit: cover; display:block; }
.badge-custom { position: absolute; left: 12px; top: 12px; background: #fff; color:#333; padding:6px 10px; border-radius:4px; font-size:12px; box-shadow:0 4px 8px rgba(0,0,0,0.06); }
.thumbs .thumb { width:42px; height:36px; object-fit:cover; border-radius:3px; border:1px solid rgba(0,0,0,0.06); }
.thumbs .more { width:42px; height:36px; display:inline-flex; align-items:center; justify-content:center; background:#f3f3f3; border-radius:3px; font-size:12px; color:#666; }
.price-block .price { font-size:1rem; font-weight:600; color:#d9534f; }
.price-block .orig-price { text-decoration: line-through; font-size:0.85rem; }

@media (max-width: 1200px) {
    .product-card .main-img { height: 260px; }
}
@media (max-width: 768px) {
    .product-card .main-img { height: 200px; }
    .sidebar { position: static; }
}

/* small helpers */
.breadcrumb { background: transparent; padding: 0; }
.product-grid { align-items: stretch; }

/* References / Portfolio gallery styles */
.refs-filters .btn { border-radius: 999px; padding: .28rem .6rem; }
.refs-grid img { width:100%; height:220px; object-fit:cover; border-radius:6px; display:block; }
.ref-card { margin:0; position:relative; overflow:visible; }
.ref-card figcaption { padding-top: .5rem; }
.ref-card .title { font-weight:600; color:#222; }
.ref-card .meta { font-size:.85rem; color:#6c757d; }
.ref-card a { text-decoration:none; color:inherit; }

/* References page modern tweaks */
.refs-hero { position:relative; min-height:320px; margin-bottom:2rem; }
.refs-hero .hero-media { position:absolute; inset:0; background-size:cover; background-position:center; filter:brightness(.45) contrast(.95); }
.refs-hero .hero-inner { position:relative; padding:4rem 0; }
.refs-grid .ref-card { transition:transform .28s ease, box-shadow .18s ease; border-radius:10px; overflow:hidden }
.refs-grid .ref-card img { width:100%; height:220px; object-fit:cover; display:block; transition:transform .28s ease; }
.refs-grid .ref-card:hover { transform:translateY(-6px); box-shadow:0 18px 40px rgba(3,37,65,0.08); }
.refs-grid .ref-card figcaption { background:linear-gradient(180deg,#fff, #fafafa); padding: .75rem .8rem; }
.refs-grid .ref-card .title { font-size:1rem }
.refs-grid .ref-card .meta { font-size:.82rem }

@media (min-width:1200px) {
    .refs-grid .ref-card img { height:240px }
}

@media (max-width:768px) {
    .refs-hero { min-height:220px }
    .refs-grid .ref-card img { height:160px }
}

@media (min-width:1200px) {
    .refs-grid img { height:240px; }
}

@media (max-width:768px) {
    .refs-grid img { height:160px; }
    .refs-filters { gap:.4rem; }
}

/* Login page styles */
.login-card { border-radius:12px; padding:1rem; }
.login-card .form-control-lg { border-radius:8px; }
.login-card .btn-lg { border-radius:8px; }
.login-card .fa-google { color:#db4437 }
.login-card .fa-facebook { color:#1877f2 }

@media (max-width:576px) {
    .login-card { padding:1rem; }
}

/* Registration page tweaks */
.card p.small { margin-bottom: 0; }
.btn-group .btn.active { background-color: var(--brand-color); color: #fff; border-color: var(--brand-color); }
.card input.form-control { border-radius: 8px; }
.card h6 { margin-top: .5rem; }

/* About / Our Story styles */
.about-hero { position:relative; color:#fff; }
.about-hero .hero-media { position:absolute; inset:0; background-size:cover; background-position:center; filter:contrast(.9) brightness(.6); }
.about-hero .hero-inner { position:relative; padding:6rem 0; }
.about-hero .display-5 { color:#fff; font-weight:600; }
.story-section .timeline { margin-top:1.5rem; }
.timeline-item { display:flex; gap:1rem; align-items:flex-start; margin-bottom:1rem; }
.timeline-marker { min-width:56px; background:#fff; color:#222; padding:.5rem .6rem; border-radius:8px; font-weight:600; box-shadow:0 6px 18px rgba(13,37,65,0.06); }
.timeline-body h5 { margin-bottom:.25rem; }
.value-card { min-height:120px; }
.cta-section { background:transparent; }

@media (max-width:768px) {
    .about-hero .hero-inner { padding:3rem 0; }
    .about-hero .display-5 { font-size:1.6rem; }
    .timeline-item { flex-direction:row; }
}

/* Contact page styles */
.map-responsive { position:relative; overflow:hidden; padding-top:56.25%; }
.map-responsive iframe { position:absolute; top:0; left:0; width:100%; height:100%; border:0; }
.map-card { min-height:240px; }
.contact-info li { margin-bottom:.6rem; }
.card .was-validated .form-control:invalid { border-color:#dc3545; }
.card .was-validated .form-control:valid { border-color:var(--brand-color); }

@media (max-width:576px){
    .map-card { min-height:180px; }
}

/* Cookie banner and modal styles */
.cookie-banner { display:none; position:fixed; left:0; right:0; bottom:18px; z-index:1100; }
.cookie-banner .cookie-inner { background: rgba(255,255,255,0.98); border-radius:10px; padding:16px; box-shadow:0 10px 30px rgba(3,37,65,0.08); align-items:center; }
.cookie-banner .cookie-text strong{ display:block; font-weight:600; }
.cookie-banner .cookie-actions { align-items:center; }
.cookie-banner .cookie-actions .btn { min-width:fit-content; }

/* Modal tweaks to keep compact */
#cookieModal .modal-body { padding-top: .5rem; }
#cookieModal .form-check { padding-left: .25rem; }

/* Ensure switches inside cookie modal fit and don't overflow */
#cookieModal .form-check.form-switch{display:flex;align-items:center;justify-content:space-between;gap:0.75rem;padding-right:0.25rem}
#cookieModal .form-check .form-check-label{flex:1;margin:0;white-space:normal;color:#343a40}
#cookieModal .form-check .form-check-input{flex:0 0 auto;width:46px;height:26px;margin-left:0}
#cookieModal .modal-content{overflow:visible}

@media (max-width:576px){
    .cookie-banner .cookie-inner { padding:12px; }
    .cookie-banner .cookie-text { font-size: .95rem; }
}

/* Cart badge in navbar */
.cart-badge { position: absolute; top: -6px; right: -6px; min-width:20px; height:20px; padding:0 6px; display:inline-flex; align-items:center; justify-content:center; background:#d9534f; color:#fff; font-size:12px; font-weight:600; border-radius:999px; box-shadow:0 2px 6px rgba(0,0,0,0.12); transform:translateZ(0); opacity:0; transition:opacity .18s ease, transform .18s ease; }
.cart-badge.visible { opacity:1; transform:translateY(0); }
.nav-link.position-relative { position: relative; }

@media (max-width:576px){
    .cart-badge { top: -4px; right: -4px; min-width:18px; height:18px; font-size:11px; }
}

/* Style the small toggles in the toolbar to match the reference layout */
.toolbar-row .form-check.form-switch { display: inline-flex; align-items: center; margin-right: 1rem; }
.toolbar-row .form-check-input { width: 42px; height: 22px; margin-left: 0; }
.toolbar-row .form-check-input:focus { box-shadow: none; }
.toolbar-row .form-check-input:checked { background-color: var(--brand-color); border-color: var(--brand-color); }
.toolbar-row .form-check-label { margin-left: .5rem; font-size: .92rem; color: #6c757d; white-space: nowrap; }

/* Make the filter toggle button visually closer to reference */
#filter-toggle { border-radius: 4px; padding: .36rem .6rem; border: 1px solid rgba(0,0,0,0.08); background: #fff; }
#filter-toggle i { margin-left: .35rem; }
#filter-toggle:focus { outline: 2px solid rgba(0,0,0,0.12); }
#filter-toggle:hover { background: #7a7a7a; }

@media (max-width: 992px) {
    .toolbar-row .form-check.form-switch { margin-right: .6rem; }
    .toolbar-row .form-check-label { font-size: .85rem; }
}

/* Cart page styles */
.empty-state { display: none; }
.list-group .cart-item { display:flex; gap:1rem; padding: .8rem; border:1px solid rgba(0,0,0,0.04); border-radius:10px; margin-bottom:.75rem; background:#fff; align-items:center; }
.cart-item .prod-thumb { width:88px; height:88px; flex:0 0 88px; border-radius:8px; overflow:hidden; background:#f8f9fa; display:inline-block }
.cart-item .prod-thumb img{width:100%;height:100%;object-fit:cover}
.cart-item .prod-body { flex:1; min-width:0 }
.cart-item .prod-title { font-weight:600; margin-bottom:.25rem }
.cart-item .prod-meta { font-size:.88rem; color:#6c757d }
.cart-item .price { font-weight:700; color:#d9534f }
.qty-controls { display:inline-flex; align-items:center; gap:.4rem }
.qty-controls button { width:34px; height:34px; padding:0; display:inline-flex; align-items:center; justify-content:center; border-radius:8px; border:1px solid rgba(0,0,0,0.06); background:#fff }
.qty-controls input { width:56px; text-align:center; border:1px solid rgba(0,0,0,0.06); border-radius:8px; padding:.35rem }
.cart-item .item-actions { display:flex; gap:.5rem; align-items:center }
.cart-item .remove-btn { color:#dc3545; background:transparent; border:0 }
.cart-item .save-later { color:#6c757d; background:transparent; border:0 }

/* Summary card extras */
.card .form-text.text-danger { min-height:1.1em }
.position-sticky .card { border-radius:12px }

@media (max-width:992px){
    .position-sticky { position: static !important }
    .cart-item { flex-direction:row }
    .cart-item .prod-thumb { width:72px; height:72px }
}

@media (max-width:576px){
    .cart-item { gap:.6rem; padding:.6rem }
    .cart-item .prod-thumb { width:64px; height:64px }
    #cart-summary { margin-top:1rem }
    .empty-state { display:block }
}

/* Toast container for quick feedback */
.toast-container-fixed { position: fixed; bottom: 1rem; right: 1rem; z-index: 1200; display: flex; flex-direction: column; gap: 0.6rem; align-items: flex-end; }
.toast-container-fixed .toast { min-width: 220px; }

/* Dark theme for toasts to match navbar/icons */
.toast, .toast.show {
    background: rgba(14,24,39,0.96) !important;
    color: #f3f3f3 !important;
    border: 0 !important;
    box-shadow: 0 8px 28px rgba(3,37,65,0.28) !important;
}
.toast .toast-header {
    background: transparent !important;
    border-bottom: 0 !important;
    color: #f3f3f3 !important;
}
.toast .toast-body { color: #f3f3f3 !important; }
/* Make the close icon visible on dark background */
.toast .btn-close {
    filter: invert(1) grayscale(1) brightness(1.6);
}