/* ========================================================================= 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; } #idcartpopup .checkout-items { display: grid !important; grid-template-columns: 1fr auto; align-items: center; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--cart-divider); justify-content: initial !important; } #idcartpopup .checkout-items:last-child { border-bottom: 0; } /* Product image removed from the cart line — the title + variant carry enough identity, dropping the thumbnail makes the sidebar feel lighter and lets longer product names breathe. */ #idcartpopup .checkout-items .customer-images { display: none !important; } #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, accessible */ #idcartpopup .checkout-items .item-spin { grid-column: 2; 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); } /* ── 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); } /* ── 8. Trust strip (added via blade) ───────────────────────────── */ #idcartpopup .cart-trust { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 14px 18px; background: var(--cart-soft); border: 1px solid var(--cart-border); border-radius: var(--cart-radius-md); margin: 0; } #idcartpopup .cart-trust__item { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; font-size: 10.5px; font-weight: 600; color: var(--cart-text-2); letter-spacing: 0.01em; line-height: 1.3; } #idcartpopup .cart-trust__item svg { width: 18px; height: 18px; stroke: var(--cart-text-2); stroke-width: 1.8; fill: none; stroke-linecap: round; stroke-linejoin: round; } /* ── 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; }