/* ========================================================================= CART SIDEBAR — modern e-commerce checkout aesthetic Targets: the right-hand column of storefront index / product page. Scope: #idcartpopup (the wrapper used by cartpopupclick). Style: inspired by international stores (ASOS, Allbirds, Glossier, Aritzia) — soft white surfaces, generous breathing room, confident typography, a single primary CTA. ========================================================================= */ /* ── 1. Container ────────────────────────────────────────────────── */ #idcartpopup { --cart-bg: #ffffff; --cart-surface: #ffffff; --cart-soft: #f7f7f8; --cart-border: #ececef; --cart-divider: #f1f1f3; --cart-text-1: #0e1015; --cart-text-2: #5b6068; --cart-text-3: #9aa0a8; --cart-accent: var(--primary-color, #111315); --cart-shadow: 0 1px 2px rgba(0,0,0,0.04), 0 8px 28px rgba(0,0,0,0.04); --cart-radius-lg: 18px; --cart-radius-md: 12px; --cart-radius-sm: 8px; color: var(--cart-text-1); font-family: var(--store-font, inherit); } /* Inline (col-xl-4) — make every card share the same modern look, remove the old separators and tighten vertical spacing. */ .cart-side-inline #idcartpopup { display: flex; flex-direction: column; gap: 14px; padding: 2px 2px 24px; } /* ── Push vs stick ── `cart-push-push` (default) — the inline cart scrolls with the page. `cart-push-stick` — the inline cart is glued to the top of the viewport right under the header. In this mode the hero is moved INSIDE the products column (see index.blade) so the .row starts at the very top of the content area, letting the sticky column climb all the way up. The `top:` distance equals the header's measured height, set live by the header-sync JS on as --header-h (fallback 60). */ body.cart-push-stick .cart-side-inline { position: sticky !important; top: var(--header-h, 60px); align-self: flex-start; /* No inner scroll — the cart is whatever height its content needs. overflow stays visible so it doesn't introduce a scrollbar inside the sidebar (user requirement). The page scroll handles anything taller than the viewport. */ overflow: visible !important; transition: none !important; } /* The row holding the columns must not stretch the sticky one — without align-items:flex-start a Bootstrap row defaults to align-items:stretch which forces both columns to equal heights and breaks sticky. */ body.cart-push-stick .row.match-height { align-items: flex-start !important; } @media (max-width: 991px) { /* On narrow viewports the cart drops below the products, so sticking it to the top under a narrow header would just take over the screen — fall back to normal flow. */ body.cart-push-stick .cart-side-inline { position: static !important; max-height: none; overflow-y: visible !important; } } /* All cart cards: same flat-modern look (replaces the previous mixed look where some cards had borders and others didn't). */ #idcartpopup > .card, #idcartpopup .cart-card, #idcartpopup .delivery-card, #idcartpopup .instruction-card { background: var(--cart-surface) !important; border: 1px solid var(--cart-border) !important; border-radius: var(--cart-radius-lg) !important; box-shadow: var(--cart-shadow) !important; margin: 0 !important; overflow: hidden; } /* Card headers — slim, lighter divider, no harsh background */ #idcartpopup .card-header, #idcartpopup .cart-header { background: transparent !important; border: none !important; border-bottom: 1px solid var(--cart-divider) !important; padding: 18px 22px 14px !important; display: flex; align-items: center; justify-content: space-between; } #idcartpopup .card-header .card-title, #idcartpopup .cart-header .card-title { font-size: 15.5px; font-weight: 700; letter-spacing: -0.01em; color: var(--cart-text-1); margin: 0; text-transform: none; } #idcartpopup .card-body { padding: 16px 22px !important; } #idcartpopup .card-footer { background: transparent !important; border-top: 1px solid var(--cart-divider) !important; padding: 14px 22px 18px !important; } /* ── 2. Empty-cart state ─────────────────────────────────────────── */ #idcartpopup .empty-cart { width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; background: var(--cart-soft); color: var(--cart-text-3); transition: background .15s ease, color .15s ease; } #idcartpopup .empty-cart:hover { background: #fee2e2; color: #b91c1c; } #idcartpopup .empty-cart svg { width: 14px; height: 14px; fill: currentColor; } /* ── 3. Cart line items ─────────────────────────────────────────── */ #idcartpopup .checkout-body, .cart-side-inline #idcartpopup .checkout-body { overflow: visible !important; width: auto !important; max-height: none !important; background: rgba(255, 255, 255, 0.2) !important; padding: 0px 12px !important; border-radius: 14px !important; } #idcartpopup .checkout-items { display: grid !important; grid-template-columns: 56px 1fr auto; /* Per merchant — top-align so the title + price sit flush with the top of the thumbnail rather than drifting toward the centre when the qty stepper takes more vertical space. */ align-items: start; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--cart-divider); justify-content: initial !important; } #idcartpopup .checkout-items:last-child { border-bottom: 0; } /* Product thumbnail — visible again. Compact 56px square with the image fully covering, rounded corners matching the cart-radius so the line item reads as a single product card. */ #idcartpopup .checkout-items .customer-images { display: block !important; width: 56px; height: 56px; border-radius: var(--cart-radius-md); overflow: hidden; background: var(--cart-soft); flex-shrink: 0; } #idcartpopup .checkout-items .customer-images img { width: 100% !important; height: 100% !important; object-fit: cover; display: block; } #idcartpopup .checkout-items .customer-name { min-width: 0; padding: 0 !important; display: flex; flex-direction: column; /* Title + price stay tight together, hugging the top of the row next to the image rather than spreading. */ align-items: flex-start; justify-content: flex-start; gap: 2px; } #idcartpopup .checkout-items .customer-name .title, #idcartpopup .checkout-items .customer-name h6.title { width: auto !important; padding: 0 !important; margin: 0; font-size: 13.5px; font-weight: 600; color: var(--cart-text-1); letter-spacing: -0.005em; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; white-space: normal; } #idcartpopup .checkout-items .customer-name .title a { color: inherit !important; text-decoration: none; } #idcartpopup .checkout-items .customer-name .title a:hover { color: var(--cart-accent) !important; } #idcartpopup .checkout-items .title_tax { font-size: 11px; color: var(--cart-text-3); margin: 0 !important; line-height: 1.4; } /* Variant chips — small rounded chips showing each picked dim as "Label: Value" (e.g. "צבע: ירוק"). They wrap onto multiple lines when there are 3+ dimensions so a long variant set never truncates. The .cart-variant-chips--row instance spans every column of the .checkout-items grid (image / name / qty) so it reads as its own full-width row beneath the item content. */ #idcartpopup .checkout-items .cart-variant-chips { display: flex; flex-wrap: wrap; gap: 4px; margin: 4px 0 2px; line-height: 1.2; } #idcartpopup .checkout-items .cart-variant-chips--row { grid-column: 1 / -1; margin: 2px 0 0; padding-top: 6px; } #idcartpopup .checkout-items .cart-variant-chip { display: inline-flex; align-items: baseline; gap: 4px; padding: 4px 9px; background: var(--cart-soft, #f7f7f8); border: 1px solid var(--cart-border, #ececef); border-radius: 999px; font-size: 11px; font-weight: 500; color: var(--cart-text-2, #5b6068); line-height: 1.3; white-space: nowrap; } #idcartpopup .checkout-items .cart-variant-chip__label { color: var(--cart-text-3, #9aa0a8); font-weight: 500; } #idcartpopup .checkout-items .cart-variant-chip__value { color: var(--cart-text-1, #0e1015); font-weight: 700; } /* Pill add-ons chip — same shape as the variant chip but a soft cream background so it reads as "extras" not "spec" at a glance. The trailing +₪X price gets a stronger weight + brand-ish color so it pops next to the comma-joined value list. */ #idcartpopup .checkout-items .cart-variant-chip--pill { background: #fff8e8; border-color: #f3e6c3; white-space: normal; } #idcartpopup .checkout-items .cart-variant-chip__price { color: var(--cart-text-1, #0e1015); font-weight: 700; margin-inline-start: 2px; } html[data-scheme="dark"] #idcartpopup .checkout-items .cart-variant-chip { background: var(--cart-soft, #1c1f24); border-color: var(--cart-border, #2a2e35); color: var(--cart-text-2, #9aa0a8); } #idcartpopup .checkout-items .price-spin { /* Per merchant — bolder + slightly larger than the title so the price reads as the primary number on the line item, with the brand accent colour drawing the eye to it. */ font-size: 15px; font-weight: 800; color: var(--cart-accent, #0e1015); margin: 0; letter-spacing: -0.01em; } /* Quantity stepper — pill, dark-on-white. Auto-flows to grid col 3 (the auto-width column reserved for it). The earlier `grid-column: 2` rule was a holdover from when the grid had different columns and was forcing the stepper to overlap the product name. */ #idcartpopup .checkout-items .item-spin { grid-column: auto; justify-self: end; width: auto !important; margin: 0 !important; display: inline-flex !important; align-items: center; gap: 0; background: var(--cart-surface); border: 1px solid var(--cart-border); border-radius: 999px; padding: 3px; overflow: hidden; } #idcartpopup .checkout-items .item-spin button.spin-rupes, #idcartpopup .checkout-items .item-spin button.product_qty { width: 26px; height: 26px; padding: 0; border: 0; border-radius: 999px; background: transparent; color: var(--cart-text-2); font-size: 16px; font-weight: 600; line-height: 1; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: background .15s ease, color .15s ease; box-shadow: none !important; margin: 0 !important; } #idcartpopup .checkout-items .item-spin button:hover { background: var(--cart-soft); color: var(--cart-text-1); } #idcartpopup .checkout-items .item-spin input.bx-cart-qty, #idcartpopup .checkout-items .item-spin .product_qty_input { width: 28px !important; height: 26px; background: transparent !important; border: 0 !important; color: var(--cart-text-1) !important; font-size: 13px; font-weight: 700; text-align: center; padding: 0 !important; outline: none !important; box-shadow: none !important; } /* ── 4. Order summary (invoice block) ───────────────────────────── */ #idcartpopup .invoice-details .invoice-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; } #idcartpopup .invoice-details .invoice-detail { display: flex !important; align-items: center; justify-content: space-between; margin: 0 !important; font-size: 13.5px; color: var(--cart-text-2); } #idcartpopup .invoice-details .invoice-title { font-weight: 500; color: var(--cart-text-2); } #idcartpopup .invoice-details .invoice-amt { font-weight: 600; color: var(--cart-text-1); font-variant-numeric: tabular-nums; } #idcartpopup .invoice-details .invoice-detail#Subtotal, #idcartpopup .invoice-details .invoice-detail:last-child { /* Per merchant — flush against the row above. No top border, no top margin, no top padding. The Total reads as part of the same list block instead of being visually detached. */ margin-top: 0 !important; padding-top: 0 !important; } #idcartpopup .invoice-details .total-title { font-size: 14.5px !important; font-weight: 700 !important; color: var(--cart-text-1) !important; text-transform: none !important; } #idcartpopup .invoice-details .total-amount, #idcartpopup .invoice-details .final_total_price { font-size: 19px !important; font-weight: 800 !important; color: var(--cart-text-1) !important; letter-spacing: -0.015em !important; line-height: 1.2; } /* ── 5. Delivery details / form inputs ──────────────────────────── */ #idcartpopup .delivery-card .card-body, #idcartpopup .delivery-card .card-body.detail-form { padding: 18px 22px 20px !important; } #idcartpopup .form-group { margin-bottom: 12px; } #idcartpopup .form-group:last-child { margin-bottom: 0; } #idcartpopup .form-control-label, #idcartpopup label.form-control-label { display: block; font-size: 11.5px; font-weight: 600; color: var(--cart-text-2); letter-spacing: 0.04em; text-transform: uppercase; margin-bottom: 6px; } #idcartpopup .delivery-card input[type="text"], #idcartpopup .delivery-card input[type="email"], #idcartpopup .delivery-card input[type="tel"], #idcartpopup .delivery-card .form-group input, #idcartpopup .form-group .active, #idcartpopup .delivery-card .form-control, #idcartpopup textarea.special_instruct, #idcartpopup textarea.form-control, #idcartpopup select.change_location, #idcartpopup select.form-control { width: 100% !important; height: 44px !important; background: var(--cart-surface) !important; border: 1px solid var(--cart-border) !important; border-radius: var(--cart-radius-md) !important; padding: 0 14px !important; font-size: 14px !important; color: var(--cart-text-1) !important; box-shadow: none !important; transition: border-color .15s ease, box-shadow .15s ease; appearance: none; -webkit-appearance: none; } #idcartpopup textarea.special_instruct, #idcartpopup textarea.form-control { height: 90px !important; padding: 12px 14px !important; line-height: 1.5; resize: vertical; } #idcartpopup .delivery-card input:focus, #idcartpopup .form-group input:focus, #idcartpopup textarea.special_instruct:focus, #idcartpopup textarea.form-control:focus, #idcartpopup select.change_location:focus, #idcartpopup select.form-control:focus { border-color: var(--cart-accent) !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--cart-accent) 14%, transparent) !important; outline: none !important; } #idcartpopup input::placeholder, #idcartpopup textarea::placeholder { color: var(--cart-text-3); } /* Select chevron */ #idcartpopup select.change_location, #idcartpopup select.form-control { background-image: url("data:image/svg+xml;utf8,") !important; background-repeat: no-repeat !important; background-position: right 14px center !important; background-size: 12px !important; padding-right: 36px !important; } [dir="rtl"] #idcartpopup select.change_location, [dir="rtl"] #idcartpopup select.form-control { background-position: left 14px center !important; padding-right: 14px !important; padding-left: 36px !important; } /* ── 6. Coupon row ──────────────────────────────────────────────── */ #idcartpopup .card .card-body.row { padding: 14px 22px !important; margin: 0 !important; display: flex; flex-wrap: nowrap; align-items: center; gap: 8px; } #idcartpopup .card .card-body.row > .col-8 { flex: 1 1 auto; max-width: none; padding: 0 !important; } #idcartpopup .card .card-body.row > .col-4 { flex: 0 0 auto; width: auto; padding: 0 !important; display: flex; align-items: center; } #idcartpopup input.coupon { height: 42px !important; background: var(--cart-soft) !important; border: 1px solid transparent !important; border-radius: var(--cart-radius-md) !important; padding: 0 14px !important; font-size: 13.5px !important; color: var(--cart-text-1) !important; width: 100% !important; } #idcartpopup input.coupon:focus { background: var(--cart-surface) !important; border-color: var(--cart-accent) !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--cart-accent) 14%, transparent) !important; } #idcartpopup .apply-coupon, #idcartpopup a.btn.apply-coupon { height: 42px; padding: 0 18px !important; background: var(--cart-text-1) !important; color: #fff !important; border-radius: var(--cart-radius-md) !important; border: 0 !important; font-size: 13px !important; font-weight: 600 !important; letter-spacing: 0.02em; display: inline-flex; align-items: center; justify-content: center; line-height: 1; transition: background .15s ease, transform .15s ease; } #idcartpopup .apply-coupon:hover { background: #000 !important; transform: translateY(-1px); } /* Inline coupon row inside the cart summary's card-footer — sits right under the Total line. Visual separator on top so it feels like a distinct row but stays inside the card. */ #idcartpopup .cart-coupon-row { display: flex; align-items: center; gap: 8px; margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--cart-divider); } #idcartpopup .cart-coupon-row input.coupon { flex: 1 1 auto; min-width: 0; } #idcartpopup .cart-coupon-row .apply-coupon { flex: 0 0 auto; } /* ── 7. Payment buttons block ───────────────────────────────────── */ #idcartpopup .checkoutButtons { display: grid; grid-template-columns: 1fr; gap: 10px; width: 100%; margin: 0; padding: 0; } #idcartpopup .checkoutButtons > [class*="col-"] { width: 100% !important; max-width: none !important; min-width: 0 !important; flex: none !important; padding: 0 !important; display: block !important; text-align: initial !important; } #idcartpopup .checkoutButtons .card { background: transparent !important; border: 0 !important; box-shadow: none !important; border-radius: 0 !important; margin: 0 !important; padding: 0 !important; overflow: visible !important; } #idcartpopup .checkoutButtons .card .btn, #idcartpopup .checkoutButtons button.btn, #idcartpopup .checkoutButtons .whatsap-btn, #idcartpopup .checkoutButtons .telegram-btn { width: 100% !important; height: 52px !important; padding: 0 18px !important; background: var(--cart-surface) !important; color: var(--cart-text-1) !important; border: 1px solid var(--cart-border) !important; border-radius: var(--cart-radius-md) !important; box-shadow: none !important; font-size: 14.5px !important; font-weight: 600 !important; letter-spacing: -0.005em; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 10px; line-height: 1; transition: background .15s ease, border-color .15s ease, transform .15s ease; text-align: center; } #idcartpopup .checkoutButtons .btn:hover, #idcartpopup .checkoutButtons .whatsap-btn:hover, #idcartpopup .checkoutButtons .telegram-btn:hover { background: var(--cart-soft) !important; border-color: var(--cart-text-3) !important; transform: translateY(-1px); } #idcartpopup .checkoutButtons .btn img { width: 18px !important; height: 18px !important; padding: 0 !important; margin: 0 !important; object-fit: contain; } #idcartpopup .checkoutButtons .btn i, #idcartpopup .checkoutButtons .btn .fab, #idcartpopup .checkoutButtons .btn .fas { font-size: 17px; margin: 0 !important; } /* Legacy "first child = primary CTA" override removed per merchant — all payment buttons share the same neutral card style now. The .cart-payment-bar scoped block further below sets the uniform 52px-tall card-style button. */ /* Trust strip section removed — markup and styles both stripped per merchant brief. */ /* ── 9. Mobile / cart-open drawer behavior ──────────────────────── */ /* When opened via the bell-cart icon (#idcartpopup becomes a fullscreen drawer) we want the same modern look, plus a clear close affordance at the top. We rely on existing JS to toggle visibility. */ @media (max-width: 991px) { #idcartpopup { background: var(--cart-bg) !important; padding: 18px 16px 32px !important; } .cart-side-inline #idcartpopup { padding: 0 0 24px !important; gap: 12px; } #idcartpopup .card-header, #idcartpopup .cart-header { padding: 16px 18px 12px !important; } #idcartpopup .card-body { padding: 14px 18px !important; } #idcartpopup .card-footer { padding: 12px 18px 16px !important; } #idcartpopup .checkout-items { grid-template-columns: 1fr auto; gap: 12px; } } /* ── 10. RTL fine-tune ──────────────────────────────────────────── */ [dir="rtl"] #idcartpopup .invoice-details .invoice-detail, [dir="rtl"] #idcartpopup .checkoutButtons .btn { text-align: right; } /* ── 11. ACCORDION — Cart / Delivery+Notes / Location ───────────── Three vertically-stacked collapsible sections share one outer card. Each section has a click-to-toggle header (section title + chevron). Only one section is open at a time — clicking another header closes the current and opens the new. Same DOM regardless of open state, so payment handlers still find .fname / .email / .change_location / .special_instruct by class. ────────────────────────────────────────────────────────────── */ #idcartpopup .cart-acc { background: var(--cart-surface); border: 1px solid var(--cart-border); border-radius: var(--cart-radius-lg); box-shadow: var(--cart-shadow); overflow: hidden; } #idcartpopup .cart-acc__item + .cart-acc__item { border-top: 1px solid var(--cart-divider); } #idcartpopup .cart-acc__head { /* !important on display + width to defeat legacy Bootstrap / custom.css button rules that ship width:100% / display:block and would otherwise collapse the layout. */ display: flex !important; width: 100% !important; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px !important; background: transparent !important; border: none !important; border-radius: 0 !important; margin: 0 !important; font-size: 13.5px; font-weight: 700; color: var(--cart-text-1); text-align: start; cursor: pointer; transition: background .15s; text-transform: none; letter-spacing: -0.005em; box-shadow: none; } #idcartpopup .cart-acc__head:hover { background: var(--cart-soft) !important; } #idcartpopup .cart-acc__item.is-open > .cart-acc__head { background: var(--cart-soft) !important; } #idcartpopup .cart-acc__title { flex: 1; line-height: 1.2; } #idcartpopup .cart-acc__chev { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; color: var(--cart-text-2); transition: transform .25s ease; } #idcartpopup .cart-acc__chev svg { width: 16px; height: 16px; display: block; } #idcartpopup .cart-acc__item.is-open > .cart-acc__head .cart-acc__chev { transform: rotate(180deg); } /* Bodies — only the .is-open item's accordion body renders; the plain section body renders unconditionally. Both strip the inner .card chrome since the wrapping container provides the border. */ #idcartpopup .cart-acc__body { display: none; } #idcartpopup .cart-acc__item.is-open > .cart-acc__body { display: block; } #idcartpopup .cart-acc__body > .card, #idcartpopup .cart-section__body > .card { border: 0 !important; border-radius: 0 !important; box-shadow: none !important; background: transparent !important; margin: 0; } #idcartpopup .cart-acc__body > .card .card-header, #idcartpopup .cart-section__body > .card .card-header { /* The accordion / section head already labels the section. */ display: none; } #idcartpopup .cart-acc__body > .card .card-body, #idcartpopup .cart-section__body > .card .card-body { padding: 0px 5px 0px !important; } #idcartpopup .cart-acc__body > .card .card-footer, #idcartpopup .cart-section__body > .card .card-footer { padding: 0 !important; } /* Notes + shipping sub-block separator styling lives in section 16 (the form layout block) — declared there so the grid-column span sits alongside the spacing rules. */ /* Delivery Details — plain always-visible section (no accordion). Sits below the Cart accordion and absorbs the shipping zone + notes that used to be separate sections. Visual rhythm matches the accordion above: same border, same title-bar shape, just without the toggle behavior. */ #idcartpopup .cart-section { background: var(--cart-surface); border: 1px solid var(--cart-border); border-radius: var(--cart-radius-lg); box-shadow: var(--cart-shadow); overflow: hidden; margin-top: 8px; } #idcartpopup .cart-section__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; background: var(--cart-soft); border-bottom: 1px solid var(--cart-divider); } #idcartpopup .cart-section__title { font-size: 13.5px; font-weight: 700; color: var(--cart-text-1); letter-spacing: -0.005em; line-height: 1.2; } /* Empty-cart trash icon in the section head. Subtle by default, reddens on hover to signal a destructive action. */ #idcartpopup .cart-section__clear { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 8px; color: var(--cart-text-3); background: transparent; transition: background .15s, color .15s; text-decoration: none; } #idcartpopup .cart-section__clear:hover { background: rgba(220, 53, 69, 0.08); color: #dc3545; text-decoration: none; } #idcartpopup .cart-section__clear svg { display: block; } #idcartpopup .cart-section__body { /* the inner .card carries its own padding */ } html[data-scheme="dark"] #idcartpopup .cart-section { background: #15151b; border-color: rgba(255, 255, 255, 0.08); } html[data-scheme="dark"] #idcartpopup .cart-section__head { background: rgba(255, 255, 255, 0.04); border-bottom-color: rgba(255, 255, 255, 0.08); } html[data-scheme="dark"] #idcartpopup .cart-section__title { color: #e8ecf4; } /* ── 12. FIXED PAYMENT BAR ─────────────────────────────────────── Sticky to the bottom of the cart scroll area so the checkout button is always one click away no matter how far the shopper has scrolled through the items list above. Background fill + top shadow give it a clear "lifted off the page" affordance. ────────────────────────────────────────────────────────────── */ #idcartpopup .cart-payment-bar { position: sticky; bottom: 0; z-index: 5; background: var(--cart-bg); margin-top: auto; padding: 14px 14px 16px; border-top: 1px solid var(--cart-divider); box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.06); border-radius: var(--cart-radius-lg) var(--cart-radius-lg) 0 0; } #idcartpopup .cart-payment-bar > .row { margin: 0; } #idcartpopup .cart-payment-bar .checkoutButtons { padding: 0; gap: 8px; } /* The drawer mode opens the cart as a slide-in panel with overflow on #idcartpopup itself — sticky-bottom works out of the box there. Inline-side mode flows in the page column with the cart sticky to the viewport; sticky-bottom on .cart-payment-bar inherits the page scroll context which is what we want there too. */ .cart-side-inline #idcartpopup .cart-payment-bar { /* Pull the payment bar flush to the column edges so the lift shadow visually spans the full width of the side cart. */ margin-inline: -2px; padding-inline: 16px; } html[data-scheme="dark"] #idcartpopup .cart-payment-bar { background: #15151b; border-top-color: rgba(255, 255, 255, 0.08); box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.45); } html[data-scheme="dark"] #idcartpopup .cart-acc { background: #15151b; border-color: rgba(255, 255, 255, 0.08); } html[data-scheme="dark"] #idcartpopup .cart-acc__item + .cart-acc__item { border-top-color: rgba(255, 255, 255, 0.08); } html[data-scheme="dark"] #idcartpopup .cart-acc__head { color: #e8ecf4; } html[data-scheme="dark"] #idcartpopup .cart-acc__head:hover, html[data-scheme="dark"] #idcartpopup .cart-acc__item.is-open > .cart-acc__head { background: rgba(255, 255, 255, 0.05) !important; } html[data-scheme="dark"] #idcartpopup .cart-acc__chev { color: #94a3b8; } html[data-scheme="dark"] #idcartpopup .cart-acc__notes { border-top-color: rgba(255, 255, 255, 0.10); } /* ── 13. Floating contact widget — don't overlap the cart ───────── The .store-contact bubble lives at fixed bottom/end with z-index 1400. In drawer mode it sat ON TOP of the payment buttons whenever the shopper opened the cart; in inline-side mode it constantly overlapped the right column where the cart lives. Drawer mode: hide it entirely while body.cart-open is active so the payment row is reachable. Inline-side mode: in RTL the cart pins to the right, so flip the contact widget to the left edge. In LTR the cart is on the left so we keep contact on its default right edge. ────────────────────────────────────────────────────────────── */ body.cart-open .store-contact { display: none !important; } /* Lock the page scroll while the cart drawer is open so the background products grid doesn't slide around when the shopper scrolls inside the cart. overflow:hidden on is the standard modal scroll-lock pattern; too for iOS Safari which keeps scrolling unless both are locked. */ body.cart-open, html:has(body.cart-open) { overflow: hidden !important; } [dir="rtl"] body.cart-inline-on .store-contact { inset-inline-end: auto !important; inset-inline-start: 22px !important; right: auto !important; left: 22px !important; } /* ── 14. Edge-to-edge accordion + true bottom-pinned payment bar ─── Per merchant brief: drop the padding around the accordion so it sits flush with the cart panel edges, and pin the payment buttons to the actual bottom of the viewport (the old sticky-bottom rule was clipped 80px above the bottom by .cart-side-panel's bottom padding). Strategy: flip the cart panel to a flex column, zero out vertical padding, let #idcartpopup expand to fill the panel as a flex column with .cart-acc taking flex:1 (scrollable) and the payment bar as a fixed-height last child. No sticky positioning needed — the natural flow puts the payment bar at the bottom always. ────────────────────────────────────────────────────────────── */ /* Drawer mode — payment bar always pinned to the drawer's bottom regardless of how little cart content there is above. The trick is flex-column + margin-top:auto on the bar: when content is short, the auto margin consumes the empty space and pushes the bar to the bottom of the flex container; when content is tall, position:sticky bottom:0 keeps the bar visible at the viewport bottom while the content above scrolls. Both states land the bar at bottom:0 of the visible drawer. */ body.cart-mode-drawer .cart-side-panel { padding: 0 !important; display: flex !important; flex-direction: column !important; overflow: hidden !important; } body.cart-mode-drawer .cart-side-panel #idcartpopup { flex: 1 1 auto !important; min-height: 0 !important; display: flex !important; flex-direction: column !important; /* Per merchant — the bottom dock (totals + הוסיפו גם + continue / payment-bar) must stay FIXED at the bottom of the drawer even when the cart has many items. Switching this from overflow-y:auto to overflow:hidden moves the scroll inward to .cart-section--cart .card-body (already configured as overflow-y:auto above), so the dock sits in normal flow at the bottom of #idcartpopup and stays there regardless of items count. */ overflow: hidden !important; padding: 0 !important; } body.cart-mode-drawer .cart-side-panel #idcartpopup .cart-acc { border-radius: 0 !important; border-inline: 0 !important; border-top: 0 !important; box-shadow: none !important; margin: 0 !important; flex: 0 0 auto !important; } /* .cart-section base is flex:0 0 auto so non-cart sections (delivery on step 2) stay sized to content; the cart section in step 1 gets its own flex:1 rule scoped to data-checkout-step lower in this file so the items scroll internally. */ body.cart-mode-drawer .cart-side-panel #idcartpopup .cart-section { border-radius: 0 !important; border-inline: 0 !important; border-top: 0 !important; box-shadow: none !important; margin: 0 !important; flex: 0 0 auto !important; } body.cart-mode-drawer .cart-side-panel #idcartpopup .cart-payment-bar { position: sticky !important; bottom: 0 !important; margin: auto 0 0 !important; /* push to bottom of flex column when content is short */ flex: 0 0 auto !important; z-index: 10; border-radius: 0 !important; background: var(--cart-bg) !important; border-top: 1px solid var(--cart-divider); box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.08); } /* Popup mode — centered modal (760px desktop / 460px mobile). Uses flex-column so #idcartpopup gets a defined height (flex:1 of the panel) which gives sticky-bottom a proper scroll context to pin the payment bar against. The earlier height:calc(100% - 28px) approach didn't work because the panel itself has height:auto (sized to content with a max-height), so 100% was ill-defined. */ body.cart-mode-popup .cart-side-panel { display: flex !important; flex-direction: column !important; padding: 28px 0 0 !important; overflow: hidden !important; } body.cart-mode-popup .cart-side-panel #idcartpopup { flex: 1 1 auto !important; min-height: 0 !important; display: flex !important; flex-direction: column !important; /* Same as drawer mode — moving the scroll INWARD to the cart items area so the bottom dock (totals + הוסיפו גם + continue / payment-bar) stays glued to the popup's bottom edge regardless of items count. */ overflow: hidden !important; padding: 0 !important; background: transparent !important; height: auto !important; max-height: 100% !important; } body.cart-mode-popup .cart-side-panel #idcartpopup > .cart-section { flex: 0 0 auto !important; } body.cart-mode-popup .cart-side-panel #idcartpopup > .cart-section, body.cart-mode-popup .cart-side-panel #idcartpopup > .cart-acc { margin: 0 28px 12px !important; } body.cart-mode-popup .cart-side-panel #idcartpopup .cart-payment-bar { position: sticky !important; bottom: 0 !important; margin: auto 0 0 !important; /* push to bottom when content is short */ flex: 0 0 auto !important; z-index: 5; border-radius: 0 0 20px 20px !important; border-top: 1px solid var(--cart-divider); box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.06); background: var(--cart-bg) !important; } @media (max-width: 768px) { body.cart-mode-popup .cart-side-panel { padding: 22px 0 0 !important; } body.cart-mode-popup .cart-side-panel #idcartpopup { height: calc(100% - 22px); } body.cart-mode-popup .cart-side-panel #idcartpopup > .cart-section, body.cart-mode-popup .cart-side-panel #idcartpopup > .cart-acc { margin: 0 18px 10px !important; } body.cart-mode-popup .cart-side-panel #idcartpopup .cart-payment-bar { border-radius: 0 0 16px 16px !important; } } /* Under mode — 320px dropdown anchored below the cart icon. Flex column on the panel so #idcartpopup gets a real height (flex:1) that sticky-bottom can pin against. Panel padding zeroed so the sections sit edge-to-edge with the dropdown's rounded box. */ body.cart-mode-under .cart-side-panel { display: flex !important; flex-direction: column !important; padding: 0 !important; overflow: hidden !important; } body.cart-mode-under .cart-side-panel #idcartpopup { flex: 1 1 auto !important; min-height: 0 !important; display: flex !important; flex-direction: column !important; overflow-y: auto !important; overflow-x: hidden !important; padding: 0 !important; height: auto !important; max-height: none !important; } body.cart-mode-under .cart-side-panel #idcartpopup > .cart-section { flex: 0 0 auto !important; } body.cart-mode-under .cart-side-panel #idcartpopup > .cart-section { margin: 0 !important; border-radius: 0 !important; border-inline: 0 !important; border-top: 0 !important; box-shadow: none !important; } body.cart-mode-under .cart-side-panel #idcartpopup > .cart-section:not(:last-of-type) { border-bottom: 1px solid var(--cart-divider) !important; } body.cart-mode-under .cart-side-panel #idcartpopup .cart-payment-bar { position: sticky !important; bottom: 0 !important; margin: auto 0 0 !important; /* push to bottom when content is short */ flex: 0 0 auto !important; z-index: 5; border-radius: 0 0 14px 14px !important; border-top: 1px solid var(--cart-divider); background: var(--cart-bg) !important; padding: 10px 12px 12px !important; } /* Under mode is narrow (320px) — switch payment buttons to 1-per- row so the labels don't get truncated mid-word. */ body.cart-mode-under .cart-payment-bar .checkoutButtons > [class*="col-"] { flex: 0 0 100% !important; max-width: 100% !important; width: 100% !important; } /* Inline-side mode — cart lives as a sticky column in the page layout. Force full viewport height + flex-column so the payment bar pins to the viewport bottom regardless of cart length, just like the drawer mode. The accordion handles its own internal scroll when content overflows. */ .cart-side-inline #idcartpopup { position: sticky; top: 0; height: 100vh; height: 100dvh; display: flex !important; flex-direction: column !important; overflow: hidden !important; padding: 0 !important; gap: 0 !important; } .cart-side-inline #idcartpopup .cart-acc { flex: 1 1 auto !important; min-height: 0 !important; overflow-y: auto !important; margin: 0 !important; border-radius: 0 !important; border: 0 !important; box-shadow: none !important; } .cart-side-inline #idcartpopup .cart-payment-bar { flex: 0 0 auto !important; margin-top: auto !important; margin-inline: 0 !important; position: static !important; border-radius: 0 !important; } /* Popup mode — the centered modal version. Apply the same flex column treatment so the payment bar pins to the modal bottom instead of getting eaten by the modal's bottom padding. */ body.cart-mode-popup .cart-side-panel { padding-top: 36px !important; padding-bottom: 0 !important; display: flex !important; flex-direction: column !important; } body.cart-mode-popup .cart-side-panel #idcartpopup { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; overflow: hidden; } body.cart-mode-popup .cart-side-panel #idcartpopup .cart-acc { flex: 1 1 auto; min-height: 0; overflow-y: auto; } body.cart-mode-popup .cart-side-panel #idcartpopup .cart-payment-bar { position: static !important; flex: 0 0 auto; border-radius: 0 0 20px 20px; } /* ── 15. Inline icons on payment buttons ───────────────────────── Phone-Order and Cash-on-Delivery used to share whatsapp.svg — wrong icon for both actions. Inline SVGs now; this base rule sets the icon's colour treatment. Strokes inherit currentColor so the icon flips automatically with the button's text colour (was hardcoded #ffffff which made the strokes invisible on the secondary white-background payment buttons). Actual size is controlled by the cart-payment-bar icon-normalising rule below. */ .pay-phone-icon, .pay-cash-icon { stroke: currentColor; fill: none; flex-shrink: 0; display: inline-block; vertical-align: middle; } /* ── 16. Delivery Details form — clean stacked column layout ────── The legacy rule in custom.css set every .detail-form .form-group to width:48% with float:right, producing a messy 2-up grid where sibling rows didn't line up and the notes textarea ended up half-width too. Reset to a vertical stack with consistent gaps, then style the labels + inputs with the modern card aesthetic. ────────────────────────────────────────────────────────────── */ /* 2-column grid: contact / address fields share rows pairwise. Shipping zone + notes span the full row (set further down with grid-column: 1 / -1) since they're sectioned sub-blocks rather than peer fields. */ #idcartpopup .delivery-card .card-body, #idcartpopup .delivery-card .card-body.detail-form, #idcartpopup .delivery-card .detail-form { display: grid !important; grid-template-columns: 1fr 1fr; gap: 14px 12px !important; padding: 18px 20px 22px !important; } #idcartpopup .delivery-card .form-group, #idcartpopup .delivery-card .card-body .form-group, #idcartpopup .delivery-card .card-body.detail-form .form-group { width: auto !important; min-width: 0; float: none !important; margin: 0 !important; padding: 0 !important; display: block; } #idcartpopup .delivery-card .form-control-label { display: block; margin: 0 0 6px; font-size: 12px; font-weight: 600; color: var(--cart-text-2); letter-spacing: 0.01em; text-transform: none; } #idcartpopup .delivery-card .form-group input[type="text"], #idcartpopup .delivery-card .form-group input[type="email"], #idcartpopup .delivery-card .form-group input[type="tel"], #idcartpopup .delivery-card .form-group input[type="number"], #idcartpopup .delivery-card .form-group textarea, #idcartpopup .delivery-card .form-group select, #idcartpopup .delivery-card .form-group .form-control { width: 100% !important; height: auto !important; min-height: 46px; padding: 11px 14px !important; background: var(--cart-soft) !important; border: 1px solid var(--cart-border) !important; border-radius: 12px !important; font-size: 14px !important; color: var(--cart-text-1) !important; line-height: 1.4 !important; font-family: inherit; transition: border-color .15s, background .15s, box-shadow .15s; box-shadow: none !important; margin: 0 !important; } #idcartpopup .delivery-card .form-group input::placeholder, #idcartpopup .delivery-card .form-group textarea::placeholder { color: var(--cart-text-3); } #idcartpopup .delivery-card .form-group input:focus, #idcartpopup .delivery-card .form-group textarea:focus, #idcartpopup .delivery-card .form-group select:focus, #idcartpopup .delivery-card .form-group .form-control:focus { outline: none; background: #ffffff !important; border-color: var(--cart-accent) !important; box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.04) !important; } #idcartpopup .delivery-card .form-group textarea { min-height: 72px !important; resize: vertical; } /* Order Notes + Shipping zone — span both columns of the 2-up grid so they break out of the half-width layout (they're sub-sections not peer fields). Dashed top-border separates each sub-block. */ #idcartpopup .cart-acc__notes, #idcartpopup .cart-section__shipping { grid-column: 1 / -1 !important; margin-top: 8px !important; padding-top: 12px !important; border-top: 1px dashed var(--cart-divider); width: 100% !important; float: none !important; } html[data-scheme="dark"] #idcartpopup .delivery-card .form-control-label { color: #94a3b8; } html[data-scheme="dark"] #idcartpopup .delivery-card .form-group input, html[data-scheme="dark"] #idcartpopup .delivery-card .form-group textarea, html[data-scheme="dark"] #idcartpopup .delivery-card .form-group select, html[data-scheme="dark"] #idcartpopup .delivery-card .form-group .form-control { background: rgba(255,255,255,0.04) !important; border-color: rgba(255,255,255,0.10) !important; color: #e8ecf4 !important; } html[data-scheme="dark"] #idcartpopup .delivery-card .form-group input:focus, html[data-scheme="dark"] #idcartpopup .delivery-card .form-group textarea:focus, html[data-scheme="dark"] #idcartpopup .delivery-card .form-group select:focus { background: rgba(255,255,255,0.08) !important; border-color: rgba(255,255,255,0.30) !important; box-shadow: 0 0 0 3px rgba(255,255,255,0.05) !important; } html[data-scheme="dark"] #idcartpopup .cart-acc__notes { border-top-color: rgba(255,255,255,0.10); } /* ── 17. Compact payment buttons — 2-per-row, every viewport ───── The legacy markup uses col-lg-6 col-md-6 col-sm-12, which makes each button take a full row on a 340px cart drawer (sm width). Force 2-per-row regardless of breakpoint + tighten the per-card spacing so 4-6 payment methods all stay visible at the pinned bottom without scroll. The per-button height shrinks from ~52px to ~40px which is plenty for icon + label. ────────────────────────────────────────────────────────────── */ #idcartpopup .cart-payment-bar .checkoutButtons { display: grid !important; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0 !important; padding: 0 !important; } #idcartpopup .cart-payment-bar .checkoutButtons > [class*="col-"] { /* Grid lets each item take its column naturally — no need to compute calc(50% - gap). Half-half on every row, no Bootstrap col-lg-6 width competing with the grid. */ flex: initial !important; width: auto !important; max-width: none !important; padding: 0 !important; margin: 0 !important; } /* When there's only a single payment method enabled, span the full row so it doesn't look orphaned at half-width. */ #idcartpopup .cart-payment-bar .checkoutButtons > [class*="col-"]:only-child { grid-column: 1 / -1; } /* Odd count — last button (3rd of 3, 5th of 5, etc.) spans the full row instead of leaving a half-empty slot. */ #idcartpopup .cart-payment-bar .checkoutButtons > [class*="col-"]:last-child:nth-child(odd) { grid-column: 1 / -1; } #idcartpopup .cart-payment-bar .checkoutButtons .card { margin: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; } /* Per merchant — payment buttons redesigned to read as proper tap targets (52px tall, comfortable padding, real type size). Layout uses a 3-cell grid (icon | label | phantom) so the label stays visually centred regardless of icon width. Background is the soft-surface card style with a subtle border + lift shadow on hover. */ #idcartpopup .cart-payment-bar .checkoutButtons .btn { width: 100% !important; min-height: 52px !important; padding: 10px 14px !important; background: var(--cart-surface, #fff) !important; color: var(--cart-text-1) !important; border: 1px solid var(--cart-border, #e6e7ea) !important; border-radius: 14px !important; font-size: 13px !important; font-weight: 700 !important; line-height: 1.25 !important; letter-spacing: -0.005em !important; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04) !important; display: grid !important; grid-template-columns: 24px 1fr 24px; align-items: center !important; justify-content: stretch !important; column-gap: 8px; white-space: nowrap; overflow: hidden; text-align: center; transition: background .15s ease, border-color .15s ease, transform .12s ease, box-shadow .15s ease; } #idcartpopup .cart-payment-bar .checkoutButtons .btn:hover { background: var(--cart-soft, #f7f7f8) !important; border-color: var(--cart-text-3, #9aa0a8) !important; transform: translateY(-1px); box-shadow: 0 4px 10px rgba(15, 23, 42, 0.08) !important; } #idcartpopup .cart-payment-bar .checkoutButtons .btn:active { transform: translateY(0); box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06) !important; } /* The icon — always the first child element of the button — anchors to the start column. Span text in the label cell (auto-flow) or wrap the label in a for explicit placement. */ #idcartpopup .cart-payment-bar .checkoutButtons .btn > img, #idcartpopup .cart-payment-bar .checkoutButtons .btn > svg, #idcartpopup .cart-payment-bar .checkoutButtons .btn > i, #idcartpopup .cart-payment-bar .checkoutButtons .btn > .pay-phone-icon, #idcartpopup .cart-payment-bar .checkoutButtons .btn > .pay-cash-icon { grid-column: 1; justify-self: center; align-self: center; } /* Buttons with no icon (rare — keeps the column structure stable). */ #idcartpopup .cart-payment-bar .checkoutButtons .btn::after { content: ''; grid-column: 3; pointer-events: none; } /* Normalise every payment-button icon — img / svg / FontAwesome — to the same 20×20 visual footprint so the button row reads as one consistent shape regardless of which icon a particular payment method ships with. */ #idcartpopup .cart-payment-bar .checkoutButtons .btn img, #idcartpopup .cart-payment-bar .checkoutButtons .btn svg, #idcartpopup .cart-payment-bar .checkoutButtons .btn .pay-phone-icon, #idcartpopup .cart-payment-bar .checkoutButtons .btn .pay-cash-icon { width: 20px !important; height: 20px !important; min-width: 20px !important; margin: 0 !important; flex-shrink: 0; object-fit: contain; } #idcartpopup .cart-payment-bar .checkoutButtons .btn i.fa, #idcartpopup .cart-payment-bar .checkoutButtons .btn i.fas, #idcartpopup .cart-payment-bar .checkoutButtons .btn i.fab, #idcartpopup .cart-payment-bar .checkoutButtons .btn i.far { display: inline-flex !important; align-items: center; justify-content: center; font-size: 16px !important; line-height: 1 !important; width: 22px !important; height: 22px !important; text-align: center; margin: 0 !important; flex-shrink: 0; color: inherit !important; visibility: visible !important; opacity: 1 !important; } /* The PayPal + similar buttons wrap their