/* ========================================================================= 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; align-items: center; 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; gap: 4px; } #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; } #idcartpopup .checkout-items .price-spin { font-size: 13.5px; font-weight: 700; color: var(--cart-text-1); margin: 2px 0 0; } /* 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 { margin-top: 8px !important; padding-top: 12px; border-top: 1px solid var(--cart-divider); } #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; } /* The first payment button becomes the primary CTA. Subsequent buttons are secondary. This works regardless of which payment methods the store has enabled, because we only target the first child. */ #idcartpopup .checkoutButtons > [class*="col-"]:first-child .btn, #idcartpopup .checkoutButtons > [class*="col-"]:first-child .whatsap-btn, #idcartpopup .checkoutButtons > [class*="col-"]:first-child .telegram-btn { background: var(--cart-text-1) !important; color: #fff !important; border-color: var(--cart-text-1) !important; height: 56px !important; font-size: 15.5px !important; box-shadow: 0 6px 18px rgba(0,0,0,0.10) !important; } #idcartpopup .checkoutButtons > [class*="col-"]:first-child .btn:hover { background: #000 !important; border-color: #000 !important; transform: translateY(-1px); } #idcartpopup .checkoutButtons > [class*="col-"]:first-child .btn img, #idcartpopup .checkoutButtons > [class*="col-"]:first-child .btn i { filter: brightness(0) invert(1); } /* 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; overflow-y: auto !important; overflow-x: hidden !important; padding: 0 !important; } body.cart-mode-drawer .cart-side-panel #idcartpopup .cart-acc, 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; overflow-y: auto !important; overflow-x: hidden !important; padding: 0 !important; background: transparent !important; height: auto !important; /* Clamp the inner scroller to the panel's height so a long cart triggers an overflow-y scroll inside the popup instead of pushing past the modal's max-height and clipping at the bottom edge with no way to reach the payment bar. Previously max-height:none let the content grow unbounded and the cart couldn't be scrolled at all in popup mode. */ 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: 10px 10px !important; padding: 16px 18px 18px !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 5px; font-size: 11.5px; 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: 40px; padding: 9px 12px !important; background: var(--cart-soft) !important; border: 1px solid var(--cart-border) !important; border-radius: var(--cart-radius-md) !important; font-size: 13.5px !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: flex !important; flex-wrap: wrap; gap: 6px; margin: 0 !important; padding: 0 !important; } #idcartpopup .cart-payment-bar .checkoutButtons > [class*="col-"] { flex: 0 0 calc(50% - 3px) !important; max-width: calc(50% - 3px) !important; width: calc(50% - 3px) !important; padding: 0 !important; margin: 0 !important; } #idcartpopup .cart-payment-bar .checkoutButtons .card { margin: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; } #idcartpopup .cart-payment-bar .checkoutButtons .btn { /* Layout: icon pinned to the start edge, text centred in the remaining space. Implemented as a 3-cell grid (icon | label | phantom) where the phantom column has the same width as the icon column, so the label ends up visually centred even with a real icon on the start side. Without the phantom column the label would drift away from centre when the icon takes width. */ width: 100% !important; min-height: 40px !important; padding: 8px 12px !important; font-size: 11.5px !important; line-height: 1.2 !important; border-radius: 10px !important; display: grid !important; grid-template-columns: 22px 1fr 22px; align-items: center !important; justify-content: stretch !important; column-gap: 6px; white-space: nowrap; overflow: hidden; text-align: center; } /* 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 18×18 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: 18px !important; height: 18px !important; min-width: 18px !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