/* =====================================================
   THEME 1 — קלאסי "HORIZON"
   Top Navbar + Category Strip + Cart on Side
   Font: Plus Jakarta Sans | 2026 Clean Commerce
   ===================================================== */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap');

:root {
    --nav-h: 72px;
    --strip-h: 54px;
    --page-bg: #F0F2F8;
    --nav-bg: rgba(255,255,255,0.92);
    --strip-bg: #ffffff;
    --card-bg: #ffffff;
    --sidebar-width: 0px;
    --primary: var(--primary-color, #1abc9c);
    --text-1: #111827;
    --text-2: #374151;
    --text-3: #9CA3AF;
    --border: #E5E7EB;
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.07);
    --shadow-md: 0 4px 16px rgba(0,0,0,0.10);
    --shadow-lg: 0 12px 40px rgba(0,0,0,0.14);
    --ease: cubic-bezier(.4,0,.2,1);
    --t: all 0.22s var(--ease);
}
*,*::before,*::after{box-sizing:border-box}
body{font-family:'Plus Jakarta Sans',-apple-system,sans-serif;background:var(--page-bg);color:var(--text-1);-webkit-font-smoothing:antialiased;margin:0}
ul,li{list-style:none;padding:0;margin:0}
h1,h2,h3,h4,h5{margin:0;padding:0}
p{margin:0;padding:0}
a{padding:0;margin:0;text-decoration:none;color:inherit}
a:focus,input:focus{outline:none;box-shadow:none}

/* ── Utility ── */
.grey-bg{background:var(--primary) !important;border-radius:12px}
.grey-text{color:#fff}
.grey-border{border-color:var(--primary)}
.menu-yellow-bg{background:var(--strip-bg)}
.yellow-text{color:var(--primary)}

/* ══════════════════════════════════════════════
   SIDEBAR → HORIZONTAL CATEGORY STRIP (Desktop)
   ══════════════════════════════════════════════ */
.main-menu{
    position:fixed;
    top:var(--nav-h);
    left:0;
    width:100%;
    height:var(--strip-h);
    background:var(--strip-bg);
    border-bottom:1px solid var(--border);
    box-shadow:var(--shadow-sm);
    overflow:hidden;
    display:flex;
    align-items:center;
    z-index:100;
    transition:var(--t);
}
.menu-fixed{position:fixed}
.menu-expanded{width:100%}
.navbar-hader{display:none}
.main-menu-content{
    width:100%;height:100%;
    display:flex;align-items:center;
    padding-top:0;
}
.title-category{display:none}
.navigation{
    display:flex;flex-direction:row;
    height:auto;overflow-x:auto;overflow-y:hidden;
    padding:0 20px;margin-top:0;
    scrollbar-width:none;
    gap:6px;
}
.navigation::-webkit-scrollbar{display:none}
.nav-item{margin-bottom:0;flex-shrink:0}
.text-link{
    white-space:nowrap;
    padding:7px 18px;
    border-radius:100px;
    font-size:13px;font-weight:600;
    color:var(--text-2);
    border:1.5px solid transparent !important;
    background:transparent;
    transition:var(--t);
    letter-spacing:0.01em;
}
.text-link:hover,.text-link.active{
    background:var(--primary);
    color:#fff;
    border-color:var(--primary) !important;
}
.sub-nav-list{display:none !important}
.sub-toggle-btn{display:none !important}

/* ── Hamburger (mobile only) ── */
.nav-icon{
    position:fixed;left:16px;top:22px;
    width:26px;height:20px;
    display:none;cursor:pointer;z-index:600;
}
.nav-icon span,.nav-icon::before,.nav-icon::after{
    position:absolute;left:0;
    width:26px;height:2px;
    background:var(--text-1);border-radius:2px;
    transition:var(--t);content:'';
}
.nav-icon span{display:block;top:9px}
.nav-icon::before{top:1px}
.nav-icon::after{bottom:1px}
body.nav-open .nav-icon span{opacity:0}
body.nav-open .nav-icon::before{transform:rotate(45deg) translate(5px,6px)}
body.nav-open .nav-icon::after{transform:rotate(-45deg) translate(5px,-6px)}

/* ── App Content ── */
.app-content{margin-left:0 !important;position:relative}

/* ══════════════════
   HEADER / NAVBAR
   ══════════════════ */
.header-navbar{min-height:var(--nav-h)}
.header-navbar.floating-nav{
    position:fixed;top:0;left:0;
    width:100% !important;
    z-index:150;
    padding:0 32px;
    background:var(--nav-bg);
    backdrop-filter:blur(16px);
    -webkit-backdrop-filter:blur(16px);
    border-bottom:1px solid var(--border);
    box-shadow:var(--shadow-sm);
    height:var(--nav-h);
    display:flex;align-items:center;
}
.navbar .navbar-container{
    flex-basis:100%;
    display:flex;align-items:center;
    justify-content:space-between;
}
.nav-brand{text-align:center;padding-right:16px}
.nav-brand.nav-logo img{
    height:44px;width:auto;
    border-radius:10px !important;
    padding:6px 14px !important;
    margin:0 !important;
    background:var(--primary) !important;
}
.nav-title{
    font-family:'Plus Jakarta Sans',sans-serif;
    font-weight:800;font-size:clamp(16px,1.5vw,22px);
    color:var(--text-1);letter-spacing:-0.02em;line-height:1.2;
}
.sub-text{font-size:11px;font-weight:400;color:var(--text-3);display:block;letter-spacing:0.01em}
.status{font-size:10px;font-weight:700;color:#fff;padding:2px 12px;border-radius:20px;letter-spacing:0.05em}
.status.active{background:#22c55e}

/* ── Search ── */
.search-bar{position:relative;display:flex;align-items:center;gap:10px}
.search-input{margin-left:0;position:relative}
.search-input input{
    background:#F3F4F6;
    border:1.5px solid transparent;
    width:clamp(180px,18vw,280px);
    height:42px;border-radius:100px;
    padding:0 18px 0 46px;
    font-family:'Plus Jakarta Sans',sans-serif;
    font-size:13px;font-weight:500;
    color:var(--text-1);transition:var(--t);
}
.search-input input::placeholder{color:var(--text-3)}
.search-input input:focus{
    background:#fff;
    border-color:var(--primary);
    box-shadow:0 0 0 3px rgba(26,188,156,0.12);
}
.search-icon{position:absolute;left:14px;top:50%;transform:translateY(-50%);line-height:1;z-index:1}

/* ── Content Wrapper ── */
.content-wrapper{padding:calc(var(--nav-h) + var(--strip-h) + 24px) 28px 28px}
.content-body{background:transparent;padding:0;border-radius:0}

/* ══════════════
   CART POPUP
   ══════════════ */
.cartpopup{
    position:fixed;bottom:76px;left:20px;
    width:52px;height:52px;
    background:var(--primary);
    border-radius:16px;display:flex;
    align-items:center;justify-content:center;
    box-shadow:0 4px 20px rgba(26,188,156,0.35);
    z-index:200;transition:var(--t);
}
.cartpopup:hover{transform:scale(1.08) translateY(-2px);box-shadow:0 8px 28px rgba(26,188,156,0.45)}
.cartpopup svg{width:22px;height:22px}

/* ══════════════
   CARDS
   ══════════════ */
.card{
    background:var(--card-bg);
    border:1px solid var(--border);
    border-radius:20px;
    box-shadow:var(--shadow-sm);
    transition:var(--t);
}
.card-header{padding:20px 24px 0;border:none;background:transparent}
.card-header .card-title{
    font-weight:700;font-size:17px;
    color:var(--text-1);margin-bottom:0;
    letter-spacing:-0.01em;
}
.card-body{padding:16px 24px}
.card-footer{
    padding:16px 24px;
    background:var(--primary);
    border-top:none;
    border-radius:0 0 19px 19px;
}
.card-footer:last-child{border-radius:0 0 19px 19px}

/* ── Cart Card ── */
.card.cart-card{
    background:var(--primary);
    border-color:transparent;border-radius:20px;
    box-shadow:0 8px 32px rgba(26,188,156,0.2);
}
.cart-card .card-header .card-title{color:#fff}
.cart-card .card-footer{background:rgba(0,0,0,0.15)}
.checkout-body{background:rgba(255,255,255,0.2);padding:14px 12px;border-radius:14px}
.card-body .checkout-items{display:flex;align-items:center;margin-bottom:10px}
.card-body .checkout-items:last-child{margin-bottom:0}
.checkout-items .customer-name{display:flex;padding-left:12px;align-items:center}
.checkout-items .customer-name .title{margin-bottom:0}
.checkout-items .customer-name .title a{font-weight:600;font-size:12px;color:#fff}
.checkout-items .customer-name .detail-qty{font-size:12px;color:rgba(255,255,255,0.75);padding-left:10px}
.item-spin{display:flex;margin-left:auto;align-items:center}
.spin-rupes{background:transparent;border:none;padding:0 6px;height:10px;line-height:10px}
.price-spin{font-weight:700;font-size:13px;color:var(--primary);margin-top:2px}
.spin-rupes .minuse-icon path{fill:var(--primary)}
.invoice-detail{display:flex;justify-content:space-between}
.invoice-details .invoice-detail:last-child{margin-top:16px}
.invoice-title{font-weight:500;font-size:14px;color:#fff}
.invoice-amt{font-weight:600;font-size:14px;color:#fff}
.total-title,.total-amount{font-weight:800;font-size:18px;color:#fff}
.font-weight600{font-weight:700}

/* ── Delivery / Instruction ── */
.delivery-card.instruction-card{background:#F9FAFB;border-color:var(--border);border-radius:20px}
form.detail-form{background:#fff;padding:14px 12px;border-radius:14px}
.instruction-card .card-header .card-title small{color:var(--text-3)}
.instruction-card .card-body{padding-bottom:0}
.instruction-card .card-body .card-text{font-size:12px;color:var(--text-2);border-bottom:none;padding:11px 14px;background:#fff;border-radius:10px}
.instruction-card .card-footer{padding:0 18px 10px;background:transparent;border:none}
.instruction-card .card-footer .card-text{font-size:10px;color:var(--text-3)}
.delivery-card .card-body .form-group{margin-bottom:10px;background:#F9FAFB;padding:9px 18px;border-radius:100px}
.delivery-card .card-body{padding:16px 18px 10px}
.delivery-card .detail-form .form-group:last-child{margin-bottom:0}
.delivery-card .detail-form .form-group label{font-size:11px;font-weight:600;color:var(--text-3);display:block;margin-bottom:0;text-transform:uppercase;letter-spacing:0.06em}
.delivery-card .detail-form .form-group input{display:block;width:100%;border:none;height:22px;padding:0;background:transparent;font-size:13px;color:var(--text-1);font-family:'Plus Jakarta Sans',sans-serif}
.whatsapp-card{padding:0;background:#25D366;border-color:#25D366;border-radius:20px}
.whatsapp-card .whatsap-btn{font-weight:700;font-size:18px;color:#fff;padding:14px 0}
.whatsapp-card .whatsap-btn img{padding-right:14px}

/* ── Products Section ── */
.customer-card{border:none;padding:0;margin-bottom:4px;background:transparent !important}
.customer-card .card-header{display:flex;align-items:center;padding:0 0 16px}
.customer-card .card-header .right-area{display:flex;margin-left:auto;align-items:center}
.customer-card .card-body{padding:0}
.bestsell-card{border:none}
.bestsell-card .card-header,.bestsell-card .card-body{padding-left:0;padding-right:0}

/* ── Sort / Filter ── */
.sort-area,.filter-by{display:flex;align-items:center}
.filter-icon{display:flex;align-items:center;margin-bottom:0;font-size:12px;color:var(--text-3);font-weight:500}
.sort-area .card-text{margin-right:8px;font-size:12px;color:var(--primary);font-weight:600;margin-top:2px}
.sort-area .sort-icon{margin-right:8px;display:block;height:12px;line-height:12px}
.sort-area .sort-icon.active path{fill:var(--primary)}
.sort-area .sort-icon:last-child{margin-right:0}
.filter-by{margin-left:24px}
.filter-icon svg{margin-right:6px}
.filter-icon svg path{fill:var(--primary)}
.filter-icon p{color:var(--text-1)}
.filter-by select{border:none;margin-left:4px;font-size:12px;color:var(--text-3);background:transparent;font-family:'Plus Jakarta Sans',sans-serif}
.price-dropdown{padding-left:8px}
.price-dropdown a span{font-size:12px;color:var(--text-1)}
.price-dropdown .dropdown-item{font-size:12px;color:var(--text-2)}
.price-dropdown .dropdown-item:hover{color:var(--primary)}

/* ── List View ── */
.collection-list{
    display:flex;align-items:center;justify-content:space-between;
    padding:14px 18px 14px 14px;
    background:var(--card-bg);
    border:1px solid var(--border);
    border-radius:16px;margin-bottom:10px;
    transition:var(--t);
}
.collection-list:hover{
    border-color:var(--primary);
    box-shadow:0 4px 20px rgba(26,188,156,0.12);
    transform:translateY(-1px);
}
.collection-list:hover .collection-title .title{color:var(--primary)}
.collection-list:hover .btn-addcart{background:var(--primary);color:#fff;border-color:transparent}
.collection-list:last-child{margin-bottom:0}
.collection-left,.collection-right{display:flex;align-items:center}
.collection-title{padding-left:14px;display:flex;flex-wrap:wrap;align-items:center}
.collection-title .title{font-weight:600;font-size:15px;color:var(--text-1);width:100%;transition:var(--t)}
.collection-title .qty-item{font-size:11px;color:var(--text-3)}
.collection-list .price-spin{font-weight:700;font-size:16px;color:var(--text-1)}
.collection-list .spin-rupes{height:14px;line-height:14px}
.collection-list .spin-rupes img{width:14px;height:14px}
.collection-list .btn-addcart{
    font-weight:700;font-size:11px;
    color:var(--primary);background:transparent;
    border:1.5px solid var(--primary);
    border-radius:100px;display:flex;align-items:center;
    padding:8px 20px;margin-left:16px;transition:var(--t);
    letter-spacing:0.04em;text-transform:uppercase;
}
.collection-list .btn-addcart .cart-icon{margin-left:7px}

/* ══════════════════
   PRODUCT GRID CARDS
   ══════════════════ */
.product-card{
    background:var(--card-bg);
    border:1px solid var(--border);
    border-radius:18px;
    padding:0;
    overflow:hidden;
    transition:var(--t);
    position:relative;
}
.product-card::before{
    content:'';position:absolute;inset:0;
    border-radius:18px;
    box-shadow:0 0 0 2px var(--primary);
    opacity:0;transition:opacity 0.25s var(--ease);
    pointer-events:none;z-index:1;
}
.product-card:hover{
    transform:translateY(-5px);
    box-shadow:var(--shadow-lg);
    border-color:transparent;
}
.product-card:hover::before{opacity:1}
.product-image{overflow:hidden;border-radius:18px 18px 0 0}
.product-image img{
    width:100%;height:145px;object-fit:cover;
    display:block;
    transition:transform 0.5s var(--ease);
}
.product-card:hover .product-image img{transform:scale(1.06)}
.product-detail{padding:12px 14px 14px}
.product-detail .title{
    font-weight:600;font-size:14px;text-align:center;
    color:var(--text-1);margin-top:0;transition:var(--t);
    letter-spacing:-0.01em;
}
.product-card:hover .product-detail .title{color:var(--primary)}
.product-detail .item-spin{margin-top:8px;margin-bottom:10px}
.product-detail .price-spin{
    font-weight:800;font-size:16px;text-align:center;
    color:var(--primary);
}
.product-detail .spin-rupes{height:14px;line-height:14px}
.product-detail .spin-rupes img{width:14px;height:14px}
.product-detail .qty-item{font-size:11px;text-align:center;color:var(--text-3)}
.product-detail .btn-addcart{
    font-weight:700;font-size:11px;color:var(--primary);
    display:flex;padding:9px 0;justify-content:center;
    background:rgba(26,188,156,0.09);border-radius:10px;
    align-items:center;transition:var(--t);
    letter-spacing:0.04em;text-transform:uppercase;
}
.product-card:hover .product-detail .btn-addcart{background:var(--primary);color:#fff}
.product-detail .btn-addcart .cart-icon{margin-left:7px}
.text-store{text-align:center;padding:4px 0 10px;font-size:11px;color:var(--primary)}

/* ══════════════
   RESPONSIVE
   ══════════════ */
@media(max-width:1400px){
    .content-wrapper{padding-left:20px;padding-right:20px}
}
@media(max-width:991px){
    .nav-icon{display:block}
    .main-menu{
        top:0;left:0;width:280px;height:100vh;
        flex-direction:column;align-items:flex-start;
        overflow-y:auto;overflow-x:hidden;
        transform:translateX(-100%);
        background:#fff;
        border-right:1px solid var(--border);
        border-bottom:none;
        transition:transform 0.3s var(--ease);
    }
    body.nav-open .main-menu{transform:translateX(0);box-shadow:var(--shadow-lg)}
    body.nav-open::after{content:'';position:fixed;inset:0;background:rgba(0,0,0,0.3);z-index:99}
    .navbar-hader{display:flex;padding:24px 20px 0;margin-bottom:20px;justify-content:center;width:100%}
    .logo-box{width:150px;height:50px;border-radius:10px}
    .title-category{display:block;padding:0 20px 10px;font-size:10px;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;color:var(--text-3) !important}
    .navigation{flex-direction:column;height:calc(100vh - 200px);padding:0 12px;overflow-y:auto;overflow-x:hidden;gap:2px}
    .nav-item{flex-shrink:initial;margin-bottom:2px}
    .text-link{white-space:normal;padding:9px 14px;border-radius:10px;font-size:13px}
    .sub-nav-list{display:block !important}
    .sub-toggle-btn{display:flex !important}
    .header-navbar.floating-nav{padding-left:54px}
    .content-wrapper{padding:calc(var(--nav-h) + 16px) 16px 16px}
    .row.match-height .col-xl-4{display:flex;flex-wrap:wrap}
    .row.match-height .col-xl-4 .card{width:48%}
    .row.match-height .col-xl-4 .card.delivery-card{width:48%;float:right;margin-left:4%}
    .row.match-height .col-xl-4 .card.instruction-card{width:48%}
    .row.match-height .col-xl-4 .card.whatsapp-card{width:48%;float:right;max-height:55px}
}
@media(max-width:768px){
    .search-input input{width:170px}
    .nav-title{font-size:16px}
    .product-card{margin-bottom:14px}
}
@media(max-width:576px){
    .search-input input{width:130px;font-size:12px}
    .nav-title{font-size:14px}
    .header-navbar.floating-nav{padding:0 12px 0 54px}
}

/* =====================================================
   RTL / LTR DIRECTION SUPPORT
   dir="rtl" is set on <html> for Hebrew, "ltr" for English
   ===================================================== */

/* Checkout bar: inline style has right:0 — flip for RTL */
[dir="rtl"] .telegram-btn { right: auto !important; left: 0 !important; }

/* Cart badge counter */
[dir="rtl"] a.cartpopup::before { right: auto !important; left: -7px !important; }

/* Floating cart icon */
[dir="rtl"] .cartpopup { left: auto !important; right: 20px !important; }

/* Hamburger (nav-icon is always fixed for HORIZON) */
[dir="rtl"] .nav-icon { left: auto !important; right: 16px !important; }

/* Mobile drawer slides from correct side in RTL */
@media (max-width: 991px) {
    [dir="rtl"] .main-menu {
        left: auto !important;
        right: 0 !important;
        transform: translateX(100%) !important;
        transition: transform 0.3s var(--ease) !important;
    }
    [dir="rtl"] body.nav-open .main-menu {
        transform: translateX(0) !important;
    }
    /* Navbar padding: hamburger is now on the right */
    [dir="rtl"] .header-navbar.floating-nav {
        padding-right: 54px !important;
        padding-left: 12px !important;
    }
}
@media(max-width:576px){
    [dir="rtl"] .header-navbar.floating-nav { padding-right: 54px !important; padding-left: 12px !important; }
}