/* ============================================================ WLA v4 — Modern Design System SEO-first · LLM-friendly · PageSpeed optimized Brand colors: CSS custom properties injected at runtime ============================================================ */ /* ── Design Tokens ── */ :root { --brand: #007bff; --brand-rgb: 0,123,255; --brand-hover: color-mix(in srgb, var(--brand) 85%, #000); --brand-soft: color-mix(in srgb, var(--brand) 10%, #fff); --brand-glow: rgba(var(--brand-rgb), .15); --surface: #fff; --surface-2: #f8f9fb; --surface-3: #f1f3f5; --surface-combo: #f5efe2; --text: #1a1a2e; --text-2: #555770; --text-3: #8b8da3; --border: #e8eaed; --header-bg: #fff; --header-text: #1a1a2e; --footer-bg: #0f0f1a; --footer-text: #a0a3b1; --r: 14px; --r-sm: 10px; --r-pill: 12px; --r-lg: 20px; --r-full: 100px; --shadow-xs: 0 1px 2px rgba(0,0,0,.04); --shadow: 0 4px 16px rgba(0,0,0,.06); --shadow-md: 0 8px 30px rgba(0,0,0,.08); --shadow-lg: 0 16px 48px rgba(0,0,0,.1); --ease: cubic-bezier(.4,0,.2,1); --ease-spring: cubic-bezier(.34,1.56,.64,1); --dur: .3s; /* ── design-system aliases (used by subscription/checkout components) ── */ --space-1: .25rem; --space-2: .5rem; --space-3: .75rem; --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --space-12: 3rem; --border-subtle: #ECEAE6; --border-subtle: #ECEAE6; --bg-surface: var(--surface); --bg-canvas: var(--surface-2); --text-primary: var(--text); --text-secondary: var(--text-2); --radius-lg: var(--r-lg); --radius-md: var(--r); --radius-sm: var(--r-sm); } /* ── Base ── */ *,*::before,*::after { box-sizing: border-box; } html { overflow-x: clip; } body { font-family: 'figtree',system-ui,-apple-system,sans-serif; color: var(--text); background: var(--surface); -webkit-font-smoothing: antialiased; min-height: 100vh; display: flex; flex-direction: column; margin: 0; overflow-x: clip; -webkit-user-select: none; user-select: none; } /* CI3 parity: content isn't selectable/copyable. Keep form fields and explicitly marked content selectable so inputs and (e.g.) referral/share codes still work. */ input,textarea,select,[contenteditable="true"],.is-selectable { -webkit-user-select: text; user-select: text; } main { flex: 1; } img { max-width: 100%; height: auto; display: block; } a { color: var(--fg-1); text-decoration: none; transition: color var(--dur) var(--ease); } a:hover { color: var(--brand-hover); } ::selection { background: var(--brand-soft); color: var(--brand); } /* ── Typography ── */ .h-display { font-size: clamp(2rem,5vw,3.2rem); font-weight: 800; letter-spacing: -.03em; line-height: 1.1; } .h-section { font-size: clamp(1.25rem,3vw,1.75rem); font-weight: 700; letter-spacing: -.02em; line-height: 1.2; text-align: center; } .t-body { font-size: .95rem; line-height: 1.6; color: var(--text-2); } .t-caption { font-size: .82rem; color: var(--text-3); } .t-center { text-align: center; } /* ── Utility ── */ .stack{display:flex;flex-direction:column;gap:.65rem} .between{display:flex;align-items:center;justify-content:space-between} .muted{color:var(--text-3,#999);font-size:.82rem} .body-sm{font-size:.84rem;line-height:1.5;} .caption{font-size:.75rem;color:var(--text-3,#999);line-height:1.4} .divider{border:none;border-top:1px solid var(--border,#eee);margin:.5rem 0} .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0} .chip{display:inline-flex;align-items:center;gap:.25rem;padding:.2rem .55rem;border-radius:999px;border:1px solid var(--border,#e5e7eb);font-size:.75rem;font-weight:600;background:var(--surface,#fff);color:var(--text-2,#555)} .alert{padding:.55rem .75rem;border-radius:8px;font-size:.84rem;background:#fff3cd;border:1px solid #ffc107;color:#664d03} .alert--danger{background:#fef2f2;border-color:var(--danger,#e63946);color:var(--danger,#e63946)} .field{display:flex;flex-direction:column;gap:.35rem;margin-bottom:.75rem} .field label{font-size:.8rem;font-weight:600;color:var(--text-2,#555)} .field:last-child{margin-bottom:0} .input{display:block;width:100%;padding:.55rem .75rem;font-size:.9rem;border:1.5px solid var(--border,#d1d5db);border-radius:var(--r-sm,8px);background:var(--surface,#fff);color:var(--text-1,#111);transition:border-color .15s;outline:none;font-family:inherit} .input:focus{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft,rgba(0,123,255,.12))} .input::placeholder{color:var(--text-3,#aaa);font-size:.86rem} .textarea{resize:vertical;min-height:80px} /* ── Buttons ── */ .btn-brand { background: var(--brand); color: var(--secondary-bg-color); border: none; border-radius: var(--r-full); padding: .65rem 1.8rem; font-weight: 600; font-size: .9rem; cursor: pointer; transition: all var(--dur) var(--ease); display: inline-flex; align-items: center; justify-content: center; gap: .4rem; } .btn-brand:hover, .btn-brand:focus-visible { background: var(--brand-hover); color: var(--brand-secondary, #fff); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0, 0, 0, .08); } .btn-brand:active { transform: translateY(0); box-shadow: none; } .btn-ghost { background: transparent; color: var(--brand); border: 2px solid var(--brand); border-radius: var(--r-full); padding: .55rem 1.6rem; font-weight: 600; font-size: .9rem; cursor: pointer; transition: all var(--dur) var(--ease); } .btn-ghost:hover { background: var(--brand); color: var(--brand-secondary); } .btn-sm { padding: .45rem 1.1rem; font-size: .82rem; } .btn-lg { padding: .8rem 2.2rem; font-size: 1rem; } .btn-icon { width: 40px; height: 40px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; border: none; background: var(--surface-2); color: var(--text-2); transition: all var(--dur) var(--ease); cursor: pointer; } .btn-icon:hover { background: var(--brand-soft); color: var(--brand); } /* BEM btn-- variants (used in checkout + newer views) */ .btn--primary{background:var(--brand);color:var(--brand-secondary);border:none;border-radius:var(--r-2);transition:background .18s ease,color .18s ease,transform .18s ease,box-shadow .18s ease} .btn--primary:hover,.btn--primary:focus-visible{background:var(--brand-hover);color:var(--brand-secondary,#fff);transform:translateY(-1px);box-shadow:0 4px 12px rgba(0,0,0,.08)} .btn--primary:active{transform:translateY(0);box-shadow:none} .btn--primary:disabled,.btn--primary[disabled]{opacity:.45;cursor:not-allowed;pointer-events:none} .btn--secondary{background:var(--surface,#fff);color:var(--brand);border:1.5px solid var(--brand)} .btn--secondary:hover{background:var(--brand-soft)} .btn--ghost{background:transparent;color:var(--text-2,#666);border:1.5px solid var(--border,#ddd)} .btn--ghost:hover{background:var(--surface-2,#f5f5f5);border-color:var(--text-2,#666)} .btn--danger{background:var(--danger,#e63946);color:#fff;border:none} .btn--danger:hover{background:#c62828} .btn--sm{padding:.3rem .7rem;font-size:.8rem} .btn--lg{padding:.7rem 1.4rem;font-size:1rem} .btn--block{width:100%;display:flex} .btn--icon{width:36px;height:36px;padding:0;border-radius:50%;background:var(--surface-2,#f5f5f5);color:var(--text-2,#666);border:none} .btn--icon:hover{background:var(--brand-soft);color:var(--brand)} .btn--pill{border-radius:12px} /* ── Global container cap (Bootstrap parity, applied site-wide) ── */ @media (min-width: 1400px) { .container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl { max-width: 1280px; } } /* ── Header ── */ .site-header { position: sticky; top: 0; z-index: 1030; background: var(--header-bg); border-bottom: 1px solid rgba(0,0,0,.06); transition: background var(--dur) var(--ease), box-shadow var(--dur) var(--ease); } .site-header .container, .site-footer > .container, .footer-copy > .container { max-width: 1280px; padding-left: 32px; padding-right: 32px; } @media (max-width: 767px) { .site-header .container, .site-footer > .container, .footer-copy > .container { padding-left: 16px; padding-right: 16px; } } .site-header.scrolled { box-shadow: var(--shadow); } .site-header .brand-logo { height: 52px; width: auto; transition: transform var(--dur) var(--ease); } .site-header .navbar-brand { outline: none; } .site-header .navbar-brand:focus { outline: none; box-shadow: none; } .site-header .navbar-brand:focus-visible { outline: 2px solid var(--brand); outline-offset: 4px; border-radius: 4px; } .header-nav .nav-link { color: var(--header-text); font-weight: 500; font-size: .88rem; padding: .5rem .8rem; position: relative; transition: color var(--dur) var(--ease); } .header-nav .nav-link::after { content:''; position: absolute; bottom: 0; left: 50%; width: 0; height: 2px; background: var(--header-text); border-radius: 2px; transition: all var(--dur) var(--ease-spring); transform: translateX(-50%); } .header-nav .nav-link:hover, .header-nav .nav-link.active { color: var(--header-text); } .header-nav .nav-link:hover::after, .header-nav .nav-link.active::after { width: 60%; } /* Icon buttons inside header: subtle darker disc on the brand bg */ .site-header .btn-icon { background: rgba(0, 0, 0, .18); color: var(--header-text); } .site-header .btn-icon:hover { background: rgba(0, 0, 0, .28); color: var(--header-text); } .site-header .nav-profile-btn { background: transparent; border: none; color: var(--header-text); display: inline-flex; align-items: center; gap: .4rem; padding: .4rem .65rem; font-size: .9rem; font-weight: 500; cursor: pointer; border-radius: var(--r-sm); transition: background var(--dur) var(--ease); } .site-header .nav-profile-btn:hover { background: color-mix(in srgb, var(--header-text) 12%, transparent); } .site-header .nav-profile-btn i { font-size: 1.1rem; } /* Desktop: logo left, nav centered, profile right (CI3 parity). 3-zone flex — side zones flex:1 balance each other so the nav sits at the true center; the center zone holds its content width and never overlaps the logo/profile even when a brand has many nav items. */ @media (min-width: 992px) { .site-header .navbar > .container { flex-wrap: nowrap; } .navbar-brand.header-zone--left { flex: 1 1 0; min-width: 0; } .header-nav--center { flex: 0 1 auto; justify-content: center; flex-wrap: wrap; margin: 0; } .header-actions.header-zone--right { flex: 1 1 0; justify-content: flex-end; } } /* ── Mobile nav drawer (CI3 card layout) ── Full-width overlay: brand-coloured top bar + a floating white card on a soft brand-tinted backdrop. Pinned to the visible viewport (dvh) so nothing hides under the mobile browser's address bar. */ .mobile-drawer { --bs-offcanvas-width: 100%; max-width: 100vw; } .offcanvas.mobile-drawer { top: 0; bottom: auto; height: 100vh; height: 100dvh; } .mobile-drawer-bar { background: var(--header-bg); padding: .55rem .9rem; border-bottom: none; } .mobile-drawer-bar .btn-icon { background: rgba(255, 255, 255, .92); color: #1a1a2e; width: 34px; height: 34px; } .mobile-drawer-bar .btn-icon:hover { background: #fff; color: var(--brand); } .mobile-drawer-body { background: color-mix(in srgb, var(--brand) 10%, #f4f5f6); padding: 1.1rem .9rem; overflow-y: auto; } .mobile-drawer-card { background: #fff; border-radius: 12px; box-shadow: 0 3px 24px rgba(82, 82, 82, .16); max-width: 500px; margin: 0 auto; padding: .25rem 1rem; } /* overflow:clip (not hidden) locks scroll WITHOUT turning html/body into a scroll container — so descendant position:sticky elements (the header and menu rail) keep pinning instead of collapsing to their static flow position. overflow:hidden here broke sticky, dropping both to the top of the document: after any scroll, opening a modal made them jump out of view, so "the sections behind the modal vanished". The header (z 1030) and menu rail stay BELOW the dim .popup-overlay (z 2000), so they dim uniformly with the page content behind the modal — standard modal UX. (#searchOverlay at z 2100 still covers everything by design.) */ html.modal-open, body.modal-open, body.offcanvas-open { overflow: clip; } .about-bird-img{ position: absolute; background-position: 100%; left: 0; right: 0; bottom: -60px; z-index: -1; margin: auto; width: 100%; background: var(--surface); } /* CI3 nav links: dashed dividers, chevron affordance, brand-coloured hover. */ .mobile-drawer-nav { display: block; } .mobile-drawer-item { display: flex; align-items: center; justify-content: space-between; padding: .85rem 0; font-size: .9rem; font-weight: 500; color: #1a1a2e; text-decoration: none; border-bottom: 1px dashed #d3d3d3; transition: color .12s; } .mobile-drawer-item::after { content: ''; width: 7px; height: 7px; flex-shrink: 0; border-right: 2px solid #b9b9b9; border-bottom: 2px solid #b9b9b9; transform: rotate(-45deg); transition: border-color .12s; } .mobile-drawer-item:hover { color: var(--brand); } .mobile-drawer-item:hover::after { border-color: var(--brand); } .mobile-drawer-section-divider { height: 6px; background: #f5f5f5; margin: .5rem 0; } .mobile-drawer-actions { display: flex; flex-direction: column; gap: .7rem; text-align: center; padding: .9rem 0 1.1rem; } .mobile-drawer-btn { display: block; width: 100%; padding: .8rem 1rem; border-radius: 8px; font-weight: 600; font-size: .95rem; text-align: center; text-decoration: none; transition: filter .15s; } .mobile-drawer-btn--outline { background: #fff; color: var(--brand); border: 1px solid var(--brand); } .mobile-drawer-btn--fill { background: var(--brand); color: var(--brand-on-primary, #fff); border: 1px solid var(--brand); } .mobile-drawer-btn--fill:hover { filter: brightness(.95); } .mobile-drawer-actions__cap { font-size: .8rem; color: #555; } /* Profile drawer (right-side offcanvas opened from the header profile icon) */ .profile-drawer { --bs-offcanvas-width: 380px; max-width: 90vw; } .profile-drawer .offcanvas-header { padding: .9rem 1rem; border-bottom: 1px solid #f0f0f0; } .profile-drawer .offcanvas-body { padding: 0; background: var(--bg-canvas, #f5f5f5); } .profile-drawer .pf-card { box-shadow: none; border-radius: 0; max-width: none; } /* Mobile header grid: burger | logo center | profile */ .mobile-nav-bar { display: grid; grid-template-columns: 32px 1fr 32px; align-items: center; width: 100%; } .mobile-logo-center { display: flex; justify-content: center; align-items: center; min-width: 0; } .mobile-logo-center img { max-height: 45px; width: auto; max-width: 100%; object-fit: contain; } .mobile-logo-center .fw-bold { font-size: 1rem; } @media (max-width: 991px) { .site-header .navbar { padding-top: .5rem; padding-bottom: .5rem; } .site-header .btn-icon { width: 32px; height: 32px; } .site-header .btn-icon i { font-size: 1.15rem; } } @media (max-width: 768px) { #locationInfoBar .container, #locationInfoBar .container-sm { max-width: 100%; padding: 0; } .location-bar-scrolled.location-info-bar, .location-info-bar { background: var(--header-bg) !important; color: var(--header-text) !important; border-top: 1px solid #E6E6E6; border-radius: 0 0 12px 12px; } } /* Drawer logo: bigger than the header so the brand name is readable */ .mobile-drawer .mobile-logo-center img { max-height: 44px; } .mobile-drawer .mobile-logo-center .fw-bold { color: var(--text-1, #111); font-size: 1.05rem; } /* ── Footer ── (rules live in public/assets/css/footer.css) */ /* ── Section / Widget ── */ .section { padding: 3.5rem 0; } .section:nth-child(even) { background: var(--surface-2); } .section-sub, .section-subheading { color: var(--text-3); text-align: center; max-width: 500px; margin: .5rem auto 2rem; font-size: .92rem; } .section-heading, .h-section { font-size: clamp(1.25rem,3vw,1.75rem); font-weight: 700; letter-spacing: -.02em; line-height: 1.2; text-align: center; margin-bottom: .5rem; } /* ── Custom About (vt41) ── brand-agnostic media + copy block. Mirrors the preview's .theo-about sizing (image constrained to 4:3 and cropped, never stretched) but unscoped, so any brand that enables vt41 gets a clean layout at any pId. Layout is pure CSS — the partial only emits widget DB fields. */ .custom-about { display: flex; flex-direction: column; align-items: center; gap: 1.5rem; max-width: 980px; margin: 0 auto; text-align: center; } .custom-about__media { width: 100%; } .custom-about__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-lg); box-shadow: var(--shadow); display: block; } .custom-about__body { width: 100%; } @media (min-width: 768px) { .custom-about { flex-direction: row; gap: 3rem; } .custom-about__media { flex: 0 0 44%; } .custom-about__body { flex: 1; } } /* ── Cards ── */ .card-elevated { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); overflow: hidden; transition: all var(--dur) var(--ease); } .card-elevated:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: transparent; } .card-elevated img { width: 100%; object-fit: cover; } /* ── Banner Carousel ── */ .hero-carousel { border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow); } .hero-carousel .carousel-item img { width: 100%; aspect-ratio: 16/9; object-fit: cover; } .hero-carousel .carousel-control-prev-icon, .hero-carousel .carousel-control-next-icon { width: 2rem; height: 2rem; background-color: rgba(0,0,0,.4); border-radius: 50%; padding: 1.2rem; } .hero-carousel .carousel-indicators [data-bs-target] { width: 8px; height: 8px; border-radius: 50%; opacity: .5; transition: all var(--dur) var(--ease); } .hero-carousel .carousel-indicators .active { opacity: 1; width: 24px; border-radius: 4px; background: var(--brand); } @media(max-width:768px) { .hero-carousel .carousel-item img { aspect-ratio: 16/9; } .hero-carousel { border-radius: 0; } } /* ── Category Circles ── */ .cat-scroll, .cat-grid { display: flex; flex-wrap: wrap; gap: 1.2rem; justify-content: center; padding: .5rem 0; } .cat-pill, .cat-item { text-align: center; width: 90px; cursor: pointer; transition: transform var(--dur) var(--ease); } .cat-pill:hover, .cat-item:hover { transform: translateY(-4px); } .cat-pill img, .cat-item img { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; border: 3px solid var(--surface-3); transition: all var(--dur) var(--ease); margin: 0 auto; } .cat-pill:hover img, .cat-item:hover img { border-color: var(--brand); box-shadow: 0 4px 16px var(--brand-glow); } .cat-pill span, .cat-pill p, .cat-item span, .cat-item p { display: block; margin-top: .5rem; font-size: .76rem; font-weight: 600; color: var(--text); line-height: 1.2; margin-bottom: 0; } /* ── Product Cards ── */ .product-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); overflow: hidden; transition: all var(--dur) var(--ease); height: 100%; } .product-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: transparent; } .product-card .card-img-top { height: 150px; object-fit: cover; } .product-card .card-body { padding: .75rem; } .product-card .item-name { font-size: .85rem; font-weight: 600; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-bottom: .25rem; } .product-card .item-price { font-weight: 700; font-size: .9rem; } .product-card .old-price { text-decoration: line-through; color: var(--text-3); font-weight: 400; font-size: .78rem; margin-left: .3rem; } .btn-add { background: var(--surface); color: var(--brand); border: 1.5px solid var(--brand); border-radius: var(--r-sm); font-weight: 700; font-size: .75rem; padding: .3rem .7rem; cursor: pointer; transition: all var(--dur) var(--ease); letter-spacing: .03em; } .btn-add:hover { background: var(--brand); color: var(--brand-secondary); } /* ── Products Category Page ── */ .pcat-breadcrumb { font-size: .9rem; color: var(--text-2); } .pcat-breadcrumb a { color: var(--text-2); text-decoration: none; } .pcat-breadcrumb a:hover { color: var(--brand); } .pcat-breadcrumb-sep { margin: 0 .4rem; } .pcat-breadcrumb-current { color: var(--brand); font-weight: 600; } .pcat-layout { display: grid; grid-template-columns: 230px 1fr; gap: 1.5rem; align-items: start; } /* Sidebar visual style mirrors the menu page's .menu-rail / .menu-cat — white card with thin border, flat list, left-border active indicator. */ .pcat-sidebar { position: sticky; top: 80px; max-height: calc(100vh - 100px); overflow-y: auto; background: #fff; border: 1px solid var(--border); border-radius: var(--r); box-shadow: none; padding: 0 0 12px; } .pcat-sidebar-heading { font-size: 17px; font-weight: 700; color: var(--fg-1, var(--text)); padding: 14px 12px 12px; margin: 0 0 8px; border-bottom: 1px solid var(--ink-100, var(--border)); } .pcat-sidebar-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; } .pcat-sidebar-item { position: relative; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 8px; padding: 10px 12px; text-decoration: none; color: var(--fg-1, var(--text)); font-size: 14px; font-weight: 500; transition: background var(--dur) var(--ease), color var(--dur) var(--ease); } .pcat-sidebar-name { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pcat-sidebar-count { font-size: 12px; color: var(--fg-muted, var(--text-2)); } .pcat-sidebar-item:hover { background: var(--ink-50, var(--surface-2)); } .pcat-sidebar-item--active { background: var(--ink-100, var(--surface-2)); font-weight: 600; } .pcat-sidebar-item--active::before { content: ''; position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px; border-radius: 0 2px 2px 0; background: var(--fg-1, var(--text)); } .pcat-sidebar-item--active:hover { background: var(--ink-100, var(--surface-2)); } /* Mobile-only category sheet chrome — hidden on desktop (shown in the max-width:767px block below, which turns the sidebar into a slide-up sheet). */ .pcat-cat-fab, .pcat-cat-backdrop, .pcat-cat-mobhead { display: none; } body.pcat-cat-lock { overflow: hidden; } .pcat-items-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .85rem; } .pcat-item-card { display: flex; justify-content: space-between; align-items: flex-start; gap: .9rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); padding: .85rem .85rem 1.6rem; transition: box-shadow var(--dur) var(--ease); } .pcat-item-card:hover { box-shadow: var(--shadow-md); } .pcat-item-card--oos { opacity: .55; } .pcat-item-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .3rem; } .pcat-item-top { display: flex; align-items: center; gap: .35rem; flex-wrap: wrap; } .pcat-item-name { font-size: .9rem; font-weight: 600; color: var(--text); margin: .15rem 0 0; line-height: 1.3; } .pcat-item-link { text-decoration: none; color: inherit; } .pcat-item-link:hover { color: var(--brand); } .pcat-item-desc { font-size: .78rem; color: var(--text-3); margin: 0; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .pcat-item-desc.is-expanded { -webkit-line-clamp: unset; line-clamp: unset; overflow: visible; } .pcat-desc-toggle { display: inline-block; margin-top: .15rem; background: none; border: 0; padding: 0; font-family: inherit; font-size: .7rem; font-weight: 700; color: var(--text); cursor: pointer; } .pcat-desc-toggle:hover { text-decoration: underline; } .pcat-item-price { font-size: 1rem; font-weight: 700; color: var(--text); padding-top: .35rem; font-variant-numeric: tabular-nums; } .pcat-old-price { text-decoration: line-through; color: var(--text-3); font-weight: 400; font-size: .78rem; margin-left: .35rem; } .pcat-badge { font-size: .68rem; font-weight: 700; padding: .15rem .45rem; border-radius: 999px; } .pcat-badge--rec { background: #fef9c3; color: #854d0e; } .pcat-badge--new { background: #dcfce7; color: #166534; } .pcat-order-btn { white-space: nowrap; font-size: .8rem !important; padding: .4rem 1.3rem !important; background: var(--surface) !important; border: 1.5px solid var(--brand) !important; color: var(--brand) !important; border-radius: var(--r-sm) !important; font-weight: 700 !important; letter-spacing: .02em; box-shadow: var(--shadow-md); cursor: pointer; transition: background var(--dur) var(--ease); } /* Float on the image — category cards only (never the product-detail CTA). */ .pcat-item-img-wrap .pcat-order-btn { position: absolute; left: 50%; bottom: -14px; transform: translateX(-50%); z-index: 1; } .pcat-order-btn:hover { background: var(--brand-soft) !important; } .pcat-oos-label { position: absolute; left: 50%; bottom: -12px; transform: translateX(-50%); z-index: 1; white-space: nowrap; font-size: .72rem; color: #b91c1c; font-weight: 600; background: var(--surface); padding: .3rem .7rem; border-radius: var(--r-sm); box-shadow: var(--shadow-md); } .pcat-hero { border-radius: var(--r); overflow: hidden; max-height: 220px; } .pcat-hero-img { width: 100%; height: 220px; object-fit: cover; display: block; } .pcat-item-img-wrap { flex-shrink: 0; position: relative; align-self: flex-start; } .pcat-item-img { width: 130px; height: 130px; border-radius: var(--r); object-fit: cover; display: block; } .pcat-item-img--logo { object-fit: contain; padding: .5rem; background: var(--surface-2); } @media (max-width: 1199px) { .pcat-items-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 767px) { .about-bird-img { display: none; } .about-hero{ background: var(--surface); } .pcat-layout { grid-template-columns: 1fr; gap: 1rem; } .pcat-items-grid { grid-template-columns: 1fr; } .pcat-item-img { width: 120px; height: 120px; } /* Categories become a centered slide-up sheet opened by the floating MENU button (CI3 parity) — replaces the old header pill rail. */ .pcat-sidebar { position: fixed; left: 50%; top: auto; bottom: -140%; transform: translateX(-50%); width: min(340px, calc(100vw - 32px)); max-height: 70vh; overflow: hidden; display: flex; flex-direction: column; padding: 0; border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-lg); z-index: calc(var(--z-modal) + 1); transition: bottom var(--dur) var(--ease); } .pcat-sidebar--open { bottom: 30px; } .pcat-sidebar-heading { display: none; } .pcat-cat-mobhead { display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; padding: 14px 16px 10px; } .pcat-cat-mobhead-title { font-size: 17px; font-weight: 700; color: var(--fg-1, var(--text)); } .pcat-cat-close { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 50%; background: var(--ink-100, var(--surface-2)); color: var(--fg-1, var(--text)); cursor: pointer; } .pcat-sidebar-list { flex-direction: column; flex-wrap: nowrap; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 0 8px 12px; gap: 0; } .pcat-sidebar-item { display: flex; align-items: center; justify-content: space-between; white-space: normal; min-width: 0; padding: 11px 8px; font-size: 15px; font-weight: 400; border: 0; border-radius: 0; background: transparent; color: var(--fg-1, var(--text)); } .pcat-sidebar-name { white-space: normal; } .pcat-sidebar-item:hover { background: transparent; } .pcat-sidebar-item--active { background: transparent; font-weight: 700; } .pcat-sidebar-item--active::before { display: none; } /* Floating MENU button — bottom-centered dark pill */ .pcat-cat-fab { display: inline-flex; align-items: center; gap: 7px; position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(20px + env(safe-area-inset-bottom, 0px)); z-index: var(--z-sticky-cta); padding: 9px 18px; border: 0; border-radius: 999px; background: var(--fg-1, #201C1D); color: #fff; font-family: var(--font-body); font-size: 12px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; box-shadow: 0 12px 32px -4px rgba(32,28,29,.35); cursor: pointer; } .pcat-cat-fab:active { transform: translateX(-50%) scale(.97); } .pcat-cat-fab-ic { flex-shrink: 0; } /* Dark backdrop behind the sheet */ .pcat-cat-backdrop { display: block; position: fixed; inset: 0; background: rgba(0,0,0,.6); z-index: var(--z-modal); } .pcat-cat-backdrop[hidden] { display: none; } } /* ── Products Page ── */ .products-cat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 1.25rem; } .products-page .product-card .card-img-top { aspect-ratio: 1 / 1; height: auto; width: 100%; object-fit: cover; } .products-page .product-card .product-card-logo-fallback { object-fit: contain; padding: 1rem; background: var(--bg-surface, #fafafa); } .products-page .product-card { box-shadow: var(--shadow-sm); } .products-page .product-card:hover { box-shadow: var(--shadow-md); } @media (max-width: 767px) { .products-cat-grid { grid-template-columns: repeat(2, 1fr); gap: .75rem; } } /* Product detail (.pdet-*) styles are consolidated in the single "Product detail page" block further down. .pdet-explore-* lives in the products listing block. */ /* ── Store Picker Sheet ── */ .sp-sheet-header { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.25rem .75rem; border-bottom: 1px solid var(--border); } .sp-sheet-title { font-size: 1rem; font-weight: 700; color: var(--text); margin: 0; } .sp-sheet-body { padding: 1rem 1.25rem 1.5rem; } .sp-outlet-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .4rem; max-height: 55vh; overflow-y: auto; } .sp-outlet-item { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .75rem; border: 1px solid var(--border); border-radius: var(--r-sm); cursor: pointer; transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease); } .sp-outlet-item:hover, .sp-outlet-item:focus-visible { border-color: var(--brand); background: var(--brand-soft); outline: none; } .sp-outlet-name { font-size: .88rem; font-weight: 600; color: var(--text); display: block; } .sp-outlet-meta { font-size: .75rem; color: var(--text-3); display: block; margin-top: .1rem; } .sp-city-list { display: flex; flex-wrap: wrap; gap: .5rem; } .sp-city-btn { font-size: .82rem; padding: .4rem .9rem; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); color: var(--text-2); cursor: pointer; transition: all var(--dur) var(--ease); } .sp-city-btn:hover { border-color: var(--brand); color: var(--brand); background: var(--brand-soft); } .sp-back-btn { display: inline-flex; font-size: .78rem; } .sp-loading { text-align: center; padding: 2.5rem 1rem; color: var(--text-3); font-size: .88rem; } .sp-empty { text-align: center; padding: 2rem 1rem; color: var(--text-3); font-size: .88rem; } /* ── Veg/Non-veg ── */ .veg-badge { width: 14px; height: 14px; border-radius: 3px; display: inline-grid; place-items: center; border: 1.5px solid var(--veg); flex-shrink: 0; vertical-align: middle; } .veg-badge.non-veg { border-color: var(--nonveg); } .veg-badge::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--veg); } .veg-badge.non-veg::before { width: 8px; height: 8px; border-radius: 0; clip-path: polygon(50% 15%, 90% 85%, 10% 85%); background: var(--nonveg); } /* ── Action Cards ── */ .action-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); padding: 1.5rem 1rem; text-align: center; transition: all var(--dur) var(--ease); cursor: pointer; height: 100%; } .action-card:hover { border-color: var(--brand); transform: translateY(-3px); box-shadow: 0 8px 24px var(--brand-glow); } .action-icon { width: 52px; height: 52px; border-radius: 50%; background: var(--brand-soft); color: var(--brand); display: inline-flex; align-items: center; justify-content: center; font-size: 1.3rem; margin-bottom: .7rem; transition: all var(--dur) var(--ease); } .action-card:hover .action-icon { background: var(--brand); color: var(--brand-secondary); } .action-card h6 { font-weight: 700; font-size: .88rem; margin-bottom: .15rem; color: var(--text); } .action-card small { color: var(--text-3); font-size: .75rem; } /* ── Outlet Cards ── */ .outlet-card { border: 1px solid var(--border); border-radius: var(--r); overflow: hidden; transition: all var(--dur) var(--ease); height: 100%; background: var(--surface); } .outlet-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: transparent; } .outlet-card .card-img-top { height: 150px; object-fit: cover; } .outlet-name { font-size: .92rem; font-weight: 700; } .outlet-meta { font-size: .8rem; color: var(--text-3); } .type-badge { font-size: .68rem; padding: .18rem .45rem; border-radius: 4px; font-weight: 600; display: inline-block; } /* ── Promo Cards ── */ .promo-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); box-shadow: var(--shadow-xs); display: flex; flex-direction: column; overflow: hidden; transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease); } .promo-card:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); } .promo-card__top { background: var(--brand-soft); border-bottom: 1.5px dashed var(--brand); padding: 1.1rem 1.25rem; text-align: center; display: flex; flex-direction: column; align-items: center; gap: .35rem; } .promo-card__type { display: inline-block; font-size: .62rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--brand); background: color-mix(in srgb, var(--brand) 12%, transparent); border-radius: var(--r-full); padding: .18rem .55rem; } .promo-card__value { font-size: 1.6rem; font-weight: 900; color: var(--brand); line-height: 1.1; letter-spacing: -.02em; } .promo-card__body { padding: 1rem 1.25rem; flex: 1; display: flex; flex-direction: column; gap: .6rem; } .promo-card__code-row { display: flex; align-items: center; justify-content: space-between; gap: .5rem; background: var(--surface-2); border: 1.5px dashed color-mix(in srgb, var(--brand) 45%, transparent); border-radius: var(--r-sm); padding: .4rem .65rem; } .promo-card__code { font-size: .82rem; font-weight: 800; letter-spacing: .07em; color: var(--brand); } .promo-card__copy { font-size: .72rem; font-weight: 700; color: var(--brand); background: none; border: 1.5px solid var(--brand); border-radius: var(--r-full); padding: .18rem .7rem; cursor: pointer; transition: background var(--dur) var(--ease), color var(--dur) var(--ease); white-space: nowrap; } .promo-card__copy:hover { background: var(--brand); color: var(--brand-secondary); } .promo-card__copy--copied { background: var(--brand); color: var(--brand-secondary); pointer-events: none; } .promo-card__title { font-size: .9rem; font-weight: 600; color: var(--text); margin: 0; line-height: 1.4; } .promo-card__desc { font-size: .78rem; color: var(--text-2); margin: 0; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 1; line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; } .promo-card__desc--expanded { -webkit-line-clamp: unset; line-clamp: unset; overflow: visible; } .promo-card__read-more { font-size: .72rem; font-weight: 600; color: var(--brand); background: none; border: none; padding: 0; cursor: pointer; margin-top: .1rem; line-height: 1; } .promo-card__footer { border-top: 1px solid var(--border); padding: .5rem 1.25rem; } .promo-card__min { font-size: .73rem; color: var(--text-3); } .promo-card--cashback .promo-card__top { background: rgba(39,174,96,.08); border-bottom-color: #27ae60; } .promo-card--cashback .promo-card__type, .promo-card--cashback .promo-card__value, .promo-card--cashback .promo-card__code { color: #27ae60; } .promo-card--cashback .promo-card__type { background: rgba(39,174,96,.1); } .promo-card--cashback .promo-card__code-row { border-color: rgba(39,174,96,.45); } .promo-code-tag { background: var(--brand-soft); color: var(--brand); font-weight: 700; padding: .35rem .9rem; border-radius: 6px; font-size: .82rem; letter-spacing: .04em; } .promo-value { font-size: 1.5rem; font-weight: 800; color: var(--brand); } /* ── Promos Page ── */ .promos-page { max-width: 900px; margin: 0 auto; padding: 2.5rem 1.25rem 3rem; } .promos-page__header { text-align: center; margin-bottom: 2.25rem; } .promos-page__title { font-size: clamp(1.35rem,3vw,1.8rem); font-weight: 800; color: var(--text); margin: 0 0 .4rem; } .promos-page__sub { font-size: .88rem; color: var(--text-3); margin: 0; } .promos-grid { display: grid; grid-template-columns: 1fr; gap: 1.1rem; } @media (min-width: 560px) { .promos-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 860px) { .promos-grid { grid-template-columns: repeat(3, 1fr); } } .promos-page__empty { text-align: center; padding: 4rem 1.5rem; color: var(--text-3); display: flex; flex-direction: column; align-items: center; gap: .75rem; } .promos-page__empty-title { font-size: 1.05rem; font-weight: 600; color: var(--text-2); margin: 0; } .promos-page__empty-sub { font-size: .85rem; color: var(--text-3); margin: 0; } /* ── Testimonials ── */ .testimonial-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); padding: 1.5rem; transition: all var(--dur) var(--ease); height: 100%; } .testimonial-card:hover { box-shadow: var(--shadow-md); } .testimonial-card .stars { color: #f59e0b; margin-bottom: .6rem; } .testimonial-card .review-text { font-size: .9rem; line-height: 1.55; color: var(--text-2); margin-bottom: 1rem; } .reviewer-name { font-weight: 600; font-size: .88rem; } .reviewer-loc { font-size: .78rem; color: var(--text-3); } /* ── Snap Scroll (Horizontal) ── */ .snap-scroll { display: flex; gap: 1rem; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding: .25rem 0; } .snap-scroll::-webkit-scrollbar { display: none; } .snap-scroll > * { scroll-snap-align: start; flex-shrink: 0; } /* ── Checkout ── */ .checkout-tab { border: 2px solid var(--border); border-radius: var(--r-sm); padding: .55rem 1rem; font-weight: 600; color: var(--text-2); transition: all var(--dur) var(--ease); cursor: pointer; display: inline-flex; align-items: center; gap: .35rem; background: var(--surface); } .checkout-tab.active, .checkout-tab:hover { border-color: var(--brand); background: var(--brand-soft); color: var(--brand); } .bill-summary { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); } .bill-row { display: flex; justify-content: space-between; padding: .5rem 0; font-size: .9rem; } .bill-row.total { font-weight: 700; font-size: 1rem; border-top: 2px solid var(--border); padding-top: .8rem; margin-top: .3rem; } /* ── Cart row (checkout + cart page) ── */ .cart-row { display: flex; flex-direction: column; gap: .5rem; padding: .55rem 0; border-bottom: 1px solid var(--border-subtle, #eee); } .cart-row { display: flex; flex-direction: column; gap: .5rem; padding: .55rem 0; border-bottom: 1px solid var(--border-subtle, #eee); } .cart-row:last-child { border-bottom: none; } .cart-row__top { display: flex; align-items: flex-start; gap: .6rem; } .cart-row__top > div:first-child { flex: 1; min-width: 0; } .cart-row__title { display: flex; align-items: center; gap: .35rem; font-size: .88rem; font-weight: 500; margin: 0; color: var(--text-1, #333); } .cart-row__name { min-width: 0; word-break: break-word; line-height: 1.4; } .cart-row__top { display: flex; align-items: flex-start; gap: .6rem; } .cart-row__top > div:first-child { flex: 1; min-width: 0; } .cart-row__title { display: flex; align-items: center; gap: .35rem; font-size: .88rem; font-weight: 500; margin: 0; color: var(--text-1, #333); } .cart-row__name { min-width: 0; word-break: break-word; line-height: 1.4; } .cart-row__qty { display: flex; align-items: center; gap: .25rem; flex-shrink: 0; } .cart-row__qty .btn--icon { width: 26px; height: 26px; font-size: 1rem; line-height: 1; padding: 0; border: 1.5px solid var(--brand); color: var(--fg-1); } .cart-row__qty .mono { min-width: 20px; text-align: center; font-size: .88rem; font-weight: 600; } .cart-row__price { flex-shrink: 0; min-width: 50px; text-align: right; font-size: .9rem; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--text); } .cart-row__mrp { color: var(--text-3); text-decoration: line-through; font-weight: 400; font-size: .76rem; margin-right: .25rem; } .cart-row__price { flex-shrink: 0; min-width: 50px; text-align: right; font-size: .9rem; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--text); } .cart-row__mrp { color: var(--text-3); text-decoration: line-through; font-weight: 400; font-size: .76rem; margin-right: .25rem; } .cart-row__notice{ display:inline-block; margin: .35rem 0 0; padding: .2rem .5rem; font-size: .72rem; font-weight: 500; color: #7a5b00; background: #fff4cf; border-radius: 4px; line-height: 1.3; } /* Brand-grouped cart section (cart + checkout, see public/src/js/modules/checkout.js group renderer at lines 386 & 416). Critical rule is __logo img — without it the raw brand renders at intrinsic size and blows out the column. */ .cart-brand-section { position: relative; background: var(--surface); border-radius: var(--r-md, 12px); box-shadow: var(--shadow-sm, 0 1px 3px rgba(0,0,0,.08)); padding: 1.5rem 1rem .9rem; margin: 1.25rem 0; } .cart-brand-section:first-child { margin-top: .5rem; } .cart-brand-section:last-child { margin-bottom: 0; } .cart-brand-section__body { display: flex; flex-direction: column; } .cart-brand-section__body .cart-row + .cart-row { border-top: 1px dashed var(--border-subtle, var(--border)); padding-top: .65rem; margin-top: .5rem; } .cart-brand-hdr { position: absolute; top: -14px; left: 16px; display: inline-flex; align-items: center; gap: .55rem; padding: .35rem .8rem .35rem .4rem; background: var(--surface); border-radius: 10px; box-shadow: var(--shadow-sm, 0 2px 6px rgba(0,0,0,.1)); max-width: calc(100% - 32px); } .cart-brand-hdr__logo { width: 30px; height: 30px; border-radius: 6px; overflow: hidden; background: var(--brand-soft, rgba(0,0,0,.05)); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; } .cart-brand-hdr__logo img { width: 100%; height: 100%; object-fit: cover; display: block; } .cart-brand-hdr__logo--ph { font-size: .78rem; font-weight: 700; color: var(--brand); } .cart-brand-hdr__name { font-size: .9rem; font-weight: 700; color: var(--text); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cart-brand-hdr__count { display: none; } /* Server-line cart row (CI3 ue_silver/checkout.js generateSingleItemHTML) */ .cart-row__main { flex: 1; min-width: 0; } .cart-row__right { display: flex; flex-direction: column; align-items: flex-end; gap: .3rem; flex-shrink: 0; } .cart-row__priceqty { display: flex; align-items: center; gap: .6rem; } .cart-row__variant { color: var(--text-2, #888); font-weight: 400; margin-left: .15rem; } .cart-row__customs { margin: .4rem 0 0; } .cart-row__customs-toggle { display: inline-flex; align-items: center; gap: .25rem; padding: .15rem .35rem; background: none; border: none; color: var(--text-2, #888); font-size: .76rem; cursor: pointer; } .cart-row__customs-toggle:hover { color: var(--text-1, #333); } .cart-row__customs-chevron { transition: transform .18s ease; } .cart-row__customs--open .cart-row__customs-chevron { transform: rotate(180deg); } .cart-row__customs-list { margin: .3rem 0 0; padding-left: .75rem;display: flex; flex-direction: column; gap: .25rem; } .cart-row__custom-row { display: flex; align-items: center; gap: .4rem; font-size: .78rem; color: var(--text-1, #333); } .cart-row__custom-row--nested { margin-left: 1rem; padding-left: .6rem; border-left: 1px dashed var(--border-subtle, #e6e6e6); color: var(--text-2, #777); } .cart-row__custom-name { flex: 1; min-width: 0; } .cart-row__custom-price { color: var(--text-2, #888); font-variant-numeric: tabular-nums; flex-shrink: 0; } .cart-row__saved { display: inline-block; margin-top: .25rem; padding: .15rem .5rem; border-radius: 6px; background: rgba(10, 139, 62, 0.1); color: #0a8b3e; font-size: .72rem; font-weight: 600; } /* Slot-unavailable row (CI3 Render._singleItemHTML validateStatus=0 parity) */ .cart-row--unavailable .cart-row__name { opacity: .55; } .cart-row--unavailable .cart-row__price { opacity: .55; text-decoration: line-through; } .cart-row__notice--err { color: var(--danger, #e63946); background: #fef2f2; } .cart-row__notice--member { color: #2e7d32; background: #e6f4ea; } .cart-row__save { display:inline-block; padding:.15rem .5rem; font-size:.7rem; font-weight:600; color:#2e7d32; background:#e6f4ea; border-radius:999px; line-height:1.3; white-space:nowrap; } /* ── Bill detail table (dl.bill) ── */ .bill { width: 100%; } .bill__row { display: flex; justify-content: space-between; align-items: baseline; padding: .2em 0; font-size: .875rem; border-bottom: 1px solid var(--border-subtle, #f0f0f0); } .bill__row:last-child { border-bottom: none; } .bill__row dt { color: var(--text-1, #333); font-weight: 400; flex: 1; } .bill__row dd { font-weight: 600; color: var(--text-1, #333); text-align: right; font-variant-numeric: tabular-nums; margin: 0; padding-left: .5rem; } .bill__row--positive dt, .bill__row--positive dd { color: #2e7d32; } .bill__row--total { border-top: 2px solid var(--border, #ddd) !important; border-bottom: none !important; padding-top: .55rem !important; } .bill__row--total dt, .bill__row--total dd { font-weight: 700; font-size: 1rem; } /* ── Profile ── */ .wallet-card { background: linear-gradient(135deg, var(--brand), var(--brand-hover)); border-radius: var(--r-lg); color: var(--brand-secondary); padding: 2rem; position: relative; overflow: hidden; } .wallet-card::before { content:''; position: absolute; top: -30%; right: -20%; width: 200px; height: 200px; background: rgba(255,255,255,.1); border-radius: 50%; } .wallet-card .balance { font-size: 2.2rem; font-weight: 800; } .quick-link { display: flex; align-items: center; gap: 1rem; padding: 1rem 1.2rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-sm); margin-bottom: .5rem; transition: all var(--dur) var(--ease); } .quick-link:hover { border-color: var(--brand); box-shadow: var(--shadow); transform: translateX(4px); } .quick-link i:first-child { font-size: 1.2rem; color: var(--brand); width: 20px; text-align: center; } /* ── Past Orders ── */ .po-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; } @media (min-width: 768px) { .po-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1100px) { .po-grid { grid-template-columns: repeat(3, 1fr); } } .po-card { background: var(--surface); border-radius: var(--r-lg); box-shadow: 0 2px 8px rgba(0,0,0,.06); overflow: hidden; display: flex; flex-direction: column; transition: all var(--dur) var(--ease); border: 1px solid var(--border); } .po-card:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,.08); } .po-head { display: flex; align-items: center; gap: .85rem; padding: .75rem .9rem; background: #eeeeee; } .po-logo { width: 62px; height: 62px; border-radius: 50%; flex-shrink: 0; overflow: hidden; background: #fff; color: var(--text-1); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 1.3rem; } .po-logo img { width: 100%; height: 100%; object-fit: cover; display: block; } .po-head-text { flex: 1; min-width: 0; } .po-head-id { font-weight: 700; font-size: 1rem; color: var(--text-1); line-height: 1.25; } .po-head-loc { font-size: .85rem; color: #707070; line-height: 1.35; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 2px; } .po-status { display: inline-flex; align-items: center; gap: .3rem; padding: .25rem .65rem; border-radius: 999px; font-size: .75rem; font-weight: 600; white-space: nowrap; } .po-status--received { background: #fff4d6; color: #8a6300; } .po-status--accepted { background: #d6f3e0; color: #1e7a3a; } .po-status--ofd { background: #d6e7fb; color: #1656a8; } .po-status--delivered{ background: #d6f3e0; color: #1e7a3a; } .po-status--rejected { background: #fbdcdc; color: #b21f1f; } .po-body { padding: .75rem .9rem; display: flex; justify-content: space-between; gap: 1rem; } .po-body .po-meta { font-size: .85rem; color: #848484; line-height: 1.55; } .po-body .po-meta strong { color: var(--text-1); font-weight: 600; } .po-body .po-total { text-align: right; font-size: .85rem; color: #848484; line-height: 1.55; } .po-body .po-total .po-amount { font-size: 1rem; font-weight: 700; color: var(--fg-1, #212121); display: block; font-variant-numeric: tabular-nums; } .po-body .po-total .po-type { font-weight: 700; color: var(--fg-1, #212121); } .po-otp { margin: 0 .9rem .65rem; padding: .45rem .7rem; background: #eaf6ef; border-radius: var(--r-sm); text-align: center; font-size: .85rem; font-weight: 700; color: var(--text-1); } .po-otp strong { color: var(--brand); margin-left: .3rem; } .po-foot { border-top: 1px dashed #d8d8d8; display: flex; margin-top: auto; } .po-foot a { flex: 1; padding: .7rem .5rem; color: var(--text-1); font-weight: 500; font-size: .92rem; text-decoration: none; text-align: center; transition: color var(--dur) var(--ease); } .po-foot a + a { border-left: 1px solid #ebebeb; } .po-foot a:hover { color: var(--brand); } /* Detail page */ .od-page { background: #f3f4f5; padding: 1.25rem 0 2.5rem; min-height: 70vh; } .od-page > .container { max-width: 760px; } .od-topbar { display: flex; align-items: center; gap: .75rem; padding: 0 .25rem .75rem; } .od-back { width: 36px; height: 36px; border: 1px solid #d8d8d8; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: var(--fg-2, #3A3A3A); background: transparent; text-decoration: none; flex-shrink: 0; font-size: 1.1rem; } .od-topbar-text { flex: 1; min-width: 0; } .od-topbar-title { font-weight: 700; font-size: 1rem; color: var(--fg-1, #212121); line-height: 1.25; } .od-topbar-sub { font-size: .82rem; color: #666; line-height: 1.35; margin-top: 2px; } .od-help { color: #b21f1f; font-weight: 600; font-size: .9rem; text-decoration: underline; flex-shrink: 0; } .od-illustration { text-align: center; padding: .5rem 0 1.25rem; } .od-illustration img { max-height: 240px; max-width: 90%; width: auto; height: auto; display: inline-block; } @media (min-width: 768px) { .od-illustration img { max-height: 320px; max-width: 480px; } } .od-map { height: 300px; border-radius: 10px; overflow: hidden; margin-bottom: 1rem; box-shadow: 0 1px 3px rgba(0,0,0,.05); z-index: 0; } .od-map .leaflet-pane, .od-map .leaflet-control { z-index: 0; } .od-map-tooltip { background: #63932c; color: #fff; border: 0; border-radius: 5px; padding: 5px 10px; box-shadow: none; font-weight: 600; } .od-map-tooltip::before { display: none; } .od-rider { display: flex; align-items: center; justify-content: space-between; gap: .75rem; background: #fff; border: 1px solid rgba(0,0,0,.06); border-radius: 10px; padding: .75rem 1rem; margin-bottom: 1rem; box-shadow: 0 1px 3px rgba(0,0,0,.05); } .od-rider-eta { font-weight: 700; color: var(--brand-color, #63932c); font-size: .95rem; } .od-rider-name { color: #444; font-size: .85rem; margin-top: 1px; } .od-rider-otp { color: #444; font-size: .8rem; margin-top: 2px; } .od-rider-call { display: inline-flex; align-items: center; gap: .35rem; background: var(--brand-color, #63932c); color: #fff; border-radius: 8px; padding: .5rem .9rem; font-weight: 600; font-size: .85rem; text-decoration: none; white-space: nowrap; } .od-status-card { background: #fff; border-radius: 10px; padding: 1.25rem; margin-bottom: 1rem; box-shadow: 0 1px 3px rgba(0,0,0,.05); } .od-status-headline { font-size: 1.1rem; font-weight: 700; margin: 0 0 .25rem; color: var(--fg-1, #212121); } .od-status-sub { font-size: .9rem; color: #666; margin: 0 0 1rem; } .od-tracker { list-style: none; padding: 0; margin: 1rem 0 0; display: flex; justify-content: space-between; position: relative; gap: 0; } .od-tracker::before { content: ''; position: absolute; top: 16px; left: 6%; right: 6%; height: 2px; background: #e3e3e3; z-index: 0; } .od-tracker .od-step { flex: 1; text-align: center; position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: .2rem; } .od-tracker .od-step-dot { width: 32px; height: 32px; border-radius: 50%; background: #e3e3e3; color: transparent; display: inline-flex; align-items: center; justify-content: center; font-size: .95rem; transition: background var(--dur) var(--ease); } .od-tracker .od-step.is-done .od-step-dot { background: #2f7c1f; color: #fff; } .od-tracker .od-step.is-active .od-step-dot { background: #2f7c1f; box-shadow: 0 0 0 4px rgba(47,124,31,.18); } .od-tracker .od-step.is-rejected .od-step-dot { background: #c0392b; color: #fff; } .od-tracker.od-tracker--rejected::before { left: 25%; right: 25%; background: #2f7c1f; } .od-tracker .od-step-label { font-size: .82rem; font-weight: 600; color: var(--fg-1, #212121); margin-top: .25rem; } .od-tracker .od-step:not(.is-done) .od-step-label { color: #888; } .od-tracker .od-step-time { font-size: .72rem; color: #666; line-height: 1.1; } .od-tracker .od-step-date { font-size: .72rem; color: #666; line-height: 1.1; } @media (max-width: 575px) { .locationFlowModal .saved-btn-address { padding: 6px 10px !important; font-size: 10px !important; } #locationFlowModal .locationFlowModal .saved-addr-row__label { font-size: 10px; line-height: 1.3; } .locationFlowModal .saved-btn-address svg { width: 12px; } .od-tracker { gap: 0; } .od-tracker .od-step-label { font-size: .72rem; } .od-tracker .od-step-dot { width: 26px; height: 26px; font-size: .8rem; } .od-tracker::before { top: 13px; } } .od-outlet-bar { background: #fff; border-radius: 10px; padding: .85rem 1.1rem; margin-bottom: 1rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; box-shadow: 0 1px 3px rgba(0,0,0,.04); } .od-outlet-info { min-width: 0; } .od-outlet-name { font-weight: 700; font-size: .95rem; color: var(--fg-1, #212121); } .od-outlet-loc { font-size: .82rem; color: #666; margin-top: 2px; } .od-outlet-btn { display: inline-flex; align-items: center; gap: .4rem; padding: .45rem 1rem; border: 1px solid var(--brand); color: var(--brand); border-radius: 22px; font-weight: 600; font-size: .85rem; text-decoration: none; background: transparent; transition: all var(--dur) var(--ease); } .od-outlet-btn:hover { background: var(--brand); color: var(--brand-secondary); } .od-section-heading { text-align: center; font-size: 1.05rem; font-weight: 700; margin: 1.25rem 0 .75rem; color: var(--fg-1, #212121); } .od-card { background: #fff; border-radius: 10px; padding: .25rem 0; margin-bottom: 1rem; box-shadow: 0 1px 3px rgba(0,0,0,.04); } .od-item-row { display: flex; align-items: flex-start; gap: .85rem; padding: 1rem 1.1rem; border-bottom: 1px solid #ededed; } .od-item-row:last-of-type { border-bottom: none; } .od-item-thumb { width: 56px; height: 56px; border-radius: 8px; overflow: hidden; flex-shrink: 0; background: #f0f0f0; } .od-item-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .od-item-thumb--ph { background: linear-gradient(135deg, #f0f0f0, #e2e2e2); } .od-item-main { flex: 1; min-width: 0; } .od-item-name { display: flex; align-items: center; gap: .45rem; font-weight: 600; font-size: .92rem; color: var(--fg-1, #212121); line-height: 1.3; } .od-item-qty { font-size: .8rem; color: #777; margin-top: .25rem; } .od-item-price { font-weight: 700; font-size: .92rem; color: var(--fg-1, #212121); font-variant-numeric: tabular-nums; white-space: nowrap; } .od-item-mrp { color: #999; text-decoration: line-through; font-weight: 500; margin-right: .25rem; font-size: .82rem; } .od-item-customisation { margin-top: .55rem; padding-top: .5rem; border-top: 1px dashed #ebebeb; } .od-item-customisation-label { font-size: .78rem; font-weight: 600; color: #666; margin-bottom: .35rem; text-transform: uppercase; letter-spacing: .04em; } .od-customisation-row { display: flex; justify-content: space-between; font-size: .82rem; color: #555; padding: .15rem 0; } .od-bill { padding: .85rem 1.1rem 1rem; } .od-bill-row { display: flex; justify-content: space-between; font-size: .9rem; color: #444; padding: .35rem 0; } .od-bill-row .od-bill-free { color: #2f7c1f; font-weight: 600; } .od-bill-discount { color: #2f7c1f; font-weight: 600; } .od-bill-total { border-top: 1px dashed #ebebeb; margin-top: .35rem; padding-top: .65rem; font-weight: 700; font-size: 1rem; color: var(--fg-1, #212121); } .od-details-row { display: flex; gap: 1rem; padding: 1rem 1.1rem; } .od-details-row--divided { border-top: 1px solid #ededed; } .od-detail-cell { display: flex; gap: .65rem; align-items: flex-start; flex: 1; min-width: 0; } .od-detail-cell i { font-size: 1.35rem; color: #666; margin-top: .15rem; flex-shrink: 0; } .od-detail-label { font-size: .82rem; color: #777; } .od-detail-value { font-size: .92rem; font-weight: 600; color: var(--fg-1, #212121); line-height: 1.4; margin-top: 2px; word-break: break-word; } .od-cta { text-align: center; padding: 1rem 0 0; } .od-rate-btn { background: transparent; color: var(--brand); border: 1.5px solid var(--brand); border-radius: 26px; padding: .55rem 2rem; font-weight: 700; font-size: .95rem; cursor: pointer; display: inline-flex; align-items: center; gap: .4rem; transition: all var(--dur) var(--ease); } .od-rate-btn:hover { background: var(--brand); color: var(--brand-secondary); } .help-modal-content { border-radius: 16px; border: none; box-shadow: 0 24px 64px rgba(0, 0, 0, .18); } .help-modal-content .modal-header { border-bottom: 1px solid #f0f0f0; padding: 1.15rem 1.4rem; align-items: center; } .help-modal-content .modal-title { font-weight: 700; font-size: 1.15rem; letter-spacing: -.01em; } .help-modal-content .modal-body { padding: 1.25rem 1.4rem 1.4rem; } /* Circular close button (override Bootstrap's bg-image X) */ .help-modal-content .btn-close { flex: 0 0 auto; width: 34px; height: 34px; margin: 0 0 0 auto; padding: 0; opacity: 1; border: 1px solid #e6e6e6; border-radius: 50%; background-size: 11px; background-position: center; transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease); } .help-modal-content .btn-close:hover { background-color: #f4f4f4; border-color: #d8d8d8; } .help-modal-content .btn-close:focus { box-shadow: 0 0 0 3px var(--brand-soft, rgba(0, 0, 0, .08)); } .help-modal-intro { color: #6b6b6b; font-size: .9rem; line-height: 1.5; margin-bottom: 1.1rem; } .help-accordion .accordion-item { border: 1px solid #ececec; border-radius: 12px !important; margin-bottom: .6rem; overflow: hidden; transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); } .help-accordion .accordion-item:last-child { margin-bottom: 0; } .help-accordion .accordion-item:hover { border-color: #dcdcdc; } .help-accordion .accordion-item:has(.accordion-button:not(.collapsed)) { border-color: var(--brand); box-shadow: 0 2px 10px rgba(0, 0, 0, .05); } .help-accordion .accordion-button { font-weight: 600; font-size: .98rem; color: var(--fg-1, #212121); background: #fff; padding: .95rem 1.1rem; } .help-accordion .accordion-button:not(.collapsed) { background: var(--brand-soft, rgba(0, 0, 0, .04)); color: var(--brand); box-shadow: none; } .help-accordion .accordion-button:focus { box-shadow: none; } .help-accordion .accordion-button:focus-visible { box-shadow: 0 0 0 3px var(--brand-soft, rgba(0, 0, 0, .08)); } .help-accordion .accordion-button::after { width: 1.05rem; height: 1.05rem; background-size: 1.05rem; } .help-accordion .accordion-button:not(.collapsed)::after { filter: none; } .help-accordion .accordion-body { padding: .25rem 1.1rem 1.1rem; font-size: .9rem; color: #555; } .help-accordion .accordion-body p { margin-bottom: .75rem; line-height: 1.5; } .help-accordion .accordion-body textarea { border: 1px solid #d8d8d8; border-radius: 8px; padding: .6rem .8rem; font-size: .9rem; width: 100%; transition: border-color var(--dur) var(--ease); } .help-accordion .accordion-body textarea:focus { border-color: var(--brand); outline: none; box-shadow: 0 0 0 3px var(--brand-soft, rgba(0, 0, 0, .06)); } .help-accordion .accordion-body .btn-brand { margin-top: .9rem; } /* Raise a Concern modal — picker fields, selection list, status (raiseConcern.js) */ .rc-state { color: #888; font-size: .9rem; text-align: center; padding: .85rem 0; margin: 0; } .rc-field { margin-bottom: .75rem; } .rc-field:last-child { margin-bottom: 0; } .rc-field__label { display: block; font-size: .8rem; font-weight: 600; color: #555; margin-bottom: .35rem; } .rc-pick-input { width: 100%; border: 1px solid #d8d8d8; border-radius: 8px; padding: .6rem .8rem; font-size: .9rem; background: #fff; cursor: pointer; transition: border-color var(--dur) var(--ease); } .rc-pick-input:hover { border-color: #c4c4c4; } .rc-pick-input:focus { border-color: var(--brand); outline: none; box-shadow: 0 0 0 3px var(--brand-soft, rgba(0, 0, 0, .06)); } .rc-list { display: flex; flex-direction: column; gap: .5rem; max-height: 60vh; overflow-y: auto; } .rc-list__item { display: flex; flex-direction: column; align-items: flex-start; gap: .15rem; width: 100%; text-align: left; border: 1px solid #ececec; border-radius: 10px; padding: .75rem .9rem; background: #fff; cursor: pointer; transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease); } .rc-list__item:hover, .rc-list__item:focus-visible { border-color: var(--brand); background: var(--brand-soft, rgba(0, 0, 0, .03)); outline: none; } .rc-list__title { font-weight: 600; font-size: .9rem; color: var(--fg-1, #212121); } .rc-list__sub { font-size: .8rem; color: #7b7b7b; } .rc-status { margin: .85rem 0 0; font-size: .85rem; text-align: center; } .rc-status--ok { color: #1a7f37; } .rc-status--err { color: #b21f1f; } .rate-modal-content { border-radius: 14px; border: none; background: #f1f0f5; } .rate-modal-content .modal-header { border-bottom: 1px solid #e6e5eb; padding: 1rem 1.5rem; background: #f7f6fa; border-radius: 14px 14px 0 0; } .rate-modal-content .modal-title { font-weight: 700; font-size: 1.1rem; } .rate-modal-content .modal-body { padding: 1.5rem 1.5rem 1.75rem; } .rate-top { display: flex; justify-content: space-between; align-items: center; gap: 1.5rem; padding-bottom: 1.25rem; border-bottom: 1px solid #e3e2e6; margin-bottom: 1.25rem; } .rate-top-left { min-width: 0; } .rate-top-title { font-size: 1.4rem; font-weight: 700; margin: 0 0 .25rem; color: var(--fg-1, #212121); } .rate-top-sub { color: #6d6d6d; font-size: .95rem; margin: 0; } .rate-meta { display: inline-flex; gap: 1.25rem; padding: .65rem 1rem; background: #fff; border-radius: 8px; align-items: center; box-shadow: 0 1px 3px rgba(0,0,0,.04); flex-shrink: 0; } .rate-meta-item { display: flex; flex-direction: column; gap: 2px; } .rate-meta-item small { color: #6d6d6d; font-size: .8rem; font-weight: 600; } .rate-meta-item strong { font-weight: 700; font-size: .95rem; color: var(--fg-1, #212121); } .rate-meta-divider { width: 1px; align-self: stretch; background: #d8d7dc; } .rate-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-bottom: 1.25rem; } @media (max-width: 767px) { .rate-cards { grid-template-columns: 1fr; } } .rate-card { background: #fff; border-radius: 10px; padding: .9rem 1rem; box-shadow: 0 1px 3px rgba(0,0,0,.05); display: flex; align-items: stretch; gap: .5rem; min-height: 130px; overflow: hidden; } .rate-card-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .25rem; } .rate-card-q { font-size: .95rem; font-weight: 700; color: var(--fg-1, #212121); line-height: 1.3; } .rate-card-sub { font-size: .85rem; color: #8b8b8b; margin-bottom: .35rem; } .rate-card .star-widget { margin-top: auto; } .rate-card .rate-emoji { width: 78px; height: 78px; object-fit: contain; align-self: flex-end; flex-shrink: 0; margin: -.5rem -.4rem -.4rem 0; } .rate-comment-block { margin-bottom: 1.25rem; } .rate-comment-label { display: block; font-size: 1.05rem; font-weight: 700; color: var(--fg-1, #212121); margin-bottom: .55rem; } .rate-textarea { width: 100%; min-height: 110px; background: transparent; border: none; padding: .25rem 0; font-size: .95rem; color: var(--fg-1, #212121); resize: vertical; } .rate-textarea::placeholder { color: #9d9d9d; } .rate-textarea:focus { outline: none; } .rate-textarea[readonly] { color: #555; } .rate-error { color: #b21f1f; background: #fbe7e7; border-radius: 6px; padding: .55rem .85rem; font-size: .9rem; margin-bottom: .85rem; } .rate-success { color: #1e7a3a; background: #e0f3e7; border-radius: 6px; padding: .65rem .85rem; font-size: .95rem; font-weight: 600; text-align: center; margin-bottom: .85rem; } .rate-submit-wrap { display: flex; justify-content: center; padding-top: .5rem; } .rate-submit-btn { background: var(--brand); color: var(--brand-secondary); border: none; border-radius: 28px; padding: .85rem 4rem; font-size: 1rem; font-weight: 700; cursor: pointer; min-width: 280px; transition: background var(--dur) var(--ease); } .rate-submit-btn:hover { background: var(--brand-hover); } .rate-submit-btn:disabled { opacity: .65; cursor: default; } .star-widget { display: inline-flex; flex-direction: row-reverse; } .star-widget input { display: none; } .star-widget label { cursor: pointer; padding: 0 .15rem; color: #d6d6d6; font-size: 1.5rem; line-height: 1; transition: color .15s ease; } .star-widget input:checked ~ label, .star-widget input:checked ~ label ~ label { color: #f6c945; } .star-widget input:not(:checked) ~ label:hover, .star-widget input:not(:checked) ~ label:hover ~ label { color: #f6c945; } .star-widget input:disabled + label { cursor: default; } .star-widget input:disabled + label:hover, .star-widget input:disabled + label:hover ~ label { color: inherit; } /* ── Floating Cart ── */ .floating-cart { position: fixed; bottom: 16px; left: 50%; transform: translateX(-50%); z-index: 1040; width: calc(100% - 32px); max-width: 600px; animation: slideUp .4s var(--ease-spring); } .cart-bar { background: var(--brand); color: var(--brand-secondary); border-radius: var(--r); padding: 14px 20px; box-shadow: 0 8px 32px rgba(var(--brand-rgb),.3); display: flex; justify-content: space-between; align-items: center; font-weight: 600; cursor: pointer; transition: all var(--dur) var(--ease); } .cart-bar:hover { transform: scale(1.01); box-shadow: 0 12px 40px rgba(var(--brand-rgb),.4); } /* ── Global cart FAB (site-wide; CI3 #cart_icon parity) ── */ .cart-fab { position: fixed; right: 20px; bottom: 24px; z-index: 1035; width: 50px; height: 50px; border: none; border-radius: 50%; background: #000; color: #fff; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 8px 24px rgba(0,0,0,.4); cursor: pointer; animation: cartFabPop .35s var(--ease-spring); transition: transform .15s var(--ease), box-shadow .15s var(--ease); } .cart-fab:hover { transform: translateY(-2px) scale(1.03); box-shadow: 0 12px 30px rgba(0,0,0,.5); } .cart-fab:focus-visible { outline: 3px solid rgba(0,0,0,.4); outline-offset: 2px; } .cart-fab[hidden] { display: none; } .cart-fab__icon { width: 24px; height: 24px; } .cart-fab__count { position: absolute; top: -4px; right: -4px; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; background: #fff; color: #000; font-size: .78rem; font-weight: 700; line-height: 22px; text-align: center; box-shadow: 0 2px 6px rgba(0,0,0,.2); font-variant-numeric: tabular-nums; } @keyframes cartFabPop { from { transform: scale(0); opacity: 0; } to { transform: scale(1); opacity: 1; } } @media (min-width: 768px) { .cart-fab { right: 32px; bottom: 32px; width: 60px; height: 60px; } .cart-fab__icon { width: 26px; height: 26px; } } /* ── Animations ── */ @keyframes slideUp { from { transform: translateX(-50%) translateY(100%); opacity: 0; } to { transform: translateX(-50%) translateY(0); opacity: 1; } } @keyframes fadeInUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } } /* Scroll-reveal: starts hidden, JS adds .in when in viewport */ .animate { opacity: 0; transform: translateY(24px); transition: opacity .7s var(--ease), transform .7s var(--ease); } .animate.in { opacity: 1; transform: translateY(0); } .animate.d1 { transition-delay: .1s; } .animate.d2 { transition-delay: .2s; } .animate.d3 { transition-delay: .3s; } .animate.d4 { transition-delay: .4s; } /* Fallback: if JS fails, show after 2s */ @media (prefers-reduced-motion: no-preference) { .animate { animation: fadeInUp .7s var(--ease) 1.5s both; } .animate.in { animation: none; } } /* ── Skeleton ── */ .skeleton { background: linear-gradient(90deg, var(--surface-3) 25%, var(--border) 50%, var(--surface-3) 75%); background-size: 200% 100%; animation: shimmer 1.5s infinite; border-radius: 8px; } @keyframes shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } } /* ── Responsive ── */ @media(max-width:768px) { .section { padding: 2rem 0; } .h-section { font-size: 1.2rem; } .site-header .brand-logo { height: 42px; } .cat-pill { min-width: 70px; } .cat-pill img { width: 56px; height: 56px; } .product-card .card-img-top { height: 120px; } .action-card { padding: 1rem .6rem; } .wallet-card { padding: 1.4rem; } .wallet-card .balance { font-size: 1.6rem; } } /* ── Menu Page ── */ .menu-hero { background: var(--surface); color: var(--text); padding: .75rem 0; border-bottom: 1px solid var(--border); } .menu-hero h1 { color: var(--text); } .menu-hero .text-muted-hero { color: var(--text-3); font-size: .78rem; } .menu-hero .badge.bg-success { background: color-mix(in srgb, #22c55e 15%, #fff) !important; color: #16a34a !important; border: 1px solid color-mix(in srgb, #22c55e 30%, #fff); font-weight: 600; padding: 2px 8px; border-radius: var(--r-full); } .menu-hero .badge.bg-danger { background: color-mix(in srgb, #ef4444 15%, #fff) !important; color: #dc2626 !important; border: 1px solid color-mix(in srgb, #ef4444 30%, #fff); font-weight: 600; padding: 2px 8px; border-radius: var(--r-full); } .menu-hero .rating-pill { display: inline-flex; align-items: center; gap: .25rem; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-full); padding: 2px 8px; font-size: .78rem; color: var(--text); font-weight: 600; } .menu-hero .hero-actions { display: inline-flex; gap: .35rem; } .menu-hero .hero-actions .btn-icon-sm { width: 34px; height: 34px; border-radius: 50%; background: var(--surface-2); color: var(--text-2); display: inline-flex; align-items: center; justify-content: center; border: none; cursor: pointer; transition: all var(--dur) var(--ease); } .menu-hero .hero-actions .btn-icon-sm:hover { background: var(--brand-soft); color: var(--brand); } .section-label { font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); margin-bottom: .75rem; } .hide-scroll { scrollbar-width: none; } .hide-scroll::-webkit-scrollbar { display: none; } .pill-btn { display: inline-flex; align-items: center; gap: .3rem; padding: .4rem .8rem; font-size: .78rem; font-weight: 600; border: 2px solid var(--border); border-radius: var(--r-full); background: var(--surface); color: var(--text-2); cursor: pointer; transition: all var(--dur) var(--ease); white-space: nowrap; flex-shrink: 0; } .pill-btn:hover { border-color: var(--brand); color: var(--brand); } .pill-btn.active { border-color: var(--brand); background: var(--brand-soft); color: var(--brand); } .search-bar { border: 1px solid var(--border); border-radius: var(--r-sm); overflow: hidden; } .search-bar .input-group-text { background: transparent; border: none; } .search-bar .form-control { border: none; box-shadow: none; } .promo-strip { display: flex; align-items: center; gap: .6rem; padding: .6rem .8rem; border-radius: var(--r-sm); background: var(--brand-soft); font-size: .85rem; } .promo-strip i:first-child { color: var(--brand); font-size: 1.1rem; } /* ── Menu Sidebar ── */ .menu-sidebar { position: sticky; top: 110px; max-height: calc(100vh - 130px); overflow-y: auto; padding: .5rem 0; scrollbar-width: thin; } .sidebar-link { display: flex; align-items: center; gap: .35rem; padding: .55rem 1rem; font-size: .84rem; font-weight: 500; color: var(--text-2); text-decoration: none; border-left: 3px solid transparent; transition: all var(--dur) var(--ease); cursor: pointer; } .cat-toggle { font-size: .7rem; color: var(--text-3); margin-left: auto; flex-shrink: 0; transition: transform var(--dur) var(--ease); } .sidebar-link:hover { color: var(--brand); background: var(--brand-soft); } .sidebar-link.active { color: var(--brand); background: var(--brand-soft); border-left-color: var(--brand); font-weight: 600; } .sub-nav { padding: .2rem 0 .3rem; margin-left: 1.2rem; border-left: 2px solid var(--border); } .sub-link { display: block; padding: .25rem .75rem; font-size: .76rem; font-weight: 500; color: var(--text-3); text-decoration: none; cursor: pointer; transition: color var(--dur) var(--ease); } .sub-link:hover, .sub-link.active { color: var(--brand); font-weight: 600; } /* ── Menu Items Area ── */ .menu-items-area { padding: 1rem; padding-bottom: 140px; } .menu-section-title { font-size: .9rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--text); margin: 0 0 .75rem; } .menu-section-title i { font-size: .82rem; margin-right: .25rem; color: var(--brand); } /* ── Menu Item Card ── */ .menu-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); padding: .6rem; transition: all var(--dur) var(--ease); height: 100%; display: flex; flex-direction: column; } .menu-card:hover { box-shadow: var(--shadow); border-color: transparent; } .menu-card.clickable { cursor: pointer; } .menu-card.clickable:hover { border-color: var(--brand); } .mc-img-wrap { position: relative; margin-bottom: .5rem; } .mc-img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--r-sm); display: block; } .mc-noimg { width: 100%; aspect-ratio: 1; background: var(--surface-2); border-radius: var(--r-sm); display: flex; align-items: center; justify-content: center; color: var(--text-3); font-size: 1.8rem; } .mc-name { font-size: .84rem; font-weight: 600; line-height: 1.3; margin-bottom: .15rem; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .mc-desc { font-size: .72rem; line-height: 1.35; color: var(--text-3); display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-bottom: .15rem; } .mc-desc.expanded { -webkit-line-clamp: unset; line-clamp: unset; display: block; } .mc-readmore { font-size: .66rem; color: var(--brand); cursor: pointer; font-weight: 600; border: none; background: none; padding: 0; } /* ── Add to cart button (card) ── */ .btn-add-card { background: var(--brand); color: var(--brand-secondary); border: 1.5px solid var(--brand); border-radius: var(--r-sm); font-weight: 700; font-size: .78rem; padding: .45rem .7rem; cursor: pointer; transition: all var(--dur) var(--ease); letter-spacing: .04em; } .btn-add-card:hover { background: var(--brand-hover); border-color: var(--brand-hover); box-shadow: 0 4px 12px var(--brand-glow); } /* ── Qty Control ── */ .qty-ctl { display: inline-flex; align-items: center; border: 1.5px solid var(--brand); border-radius: var(--r-sm); overflow: hidden; } .qty-ctl[hidden] { display: none !important; } .qty-ctl .qb { width: 30px; height: 30px; border: none; background: var(--brand-soft); color: var(--brand); font-weight: 700; font-size: 1rem; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background var(--dur) var(--ease); } .qty-ctl .qb:hover { background: var(--brand); color: var(--brand-secondary); } .qty-ctl span { min-width: 26px; text-align: center; font-weight: 700; font-size: .85rem; color: var(--brand); } /* ── Login modal: suppress Bootstrap's blue focus border/glow on the phone input inside the +91 input-group. The group already owns the border via inline styles; the focus glow leaks a blue seam between "+91" and the number. */ #loginModal .input-group .form-control:focus { border-color: transparent; box-shadow: none; } /* Login consent T&C links — emphasise the legal anchors inside the consent label. */ .login-consent__link { font-weight: 600; color: var(--fg-1); text-decoration: underline; } .login-consent__link:hover, .login-consent__link:focus-visible { color: var(--brand-hover); } /* ── Popups / Sheets ── */ @keyframes sheetUp { from { transform: translateY(100%); } to { transform: translateY(0); } } @keyframes popupIn { from { transform: scale(.96); opacity: 0; } to { transform: scale(1); opacity: 1; } } .popup-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 2000; display: flex; align-items: flex-end; justify-content: center; } .popup-overlay[hidden] { display: none; } .popup-sheet { background: var(--surface); border-radius: var(--r-lg) var(--r-lg) 0 0; max-width: 480px; width: 100%; max-height: 90vh; display: flex; flex-direction: column; overflow: hidden; animation: sheetUp .3s var(--ease); } @media(min-width:768px) { .popup-overlay { align-items: center; padding: 1rem; } .popup-sheet { border-radius: var(--r-lg); max-height: 85vh; animation: popupIn .22s var(--ease); } /* Wide layout reserved for the customise/variant flow only — simple item detail popups keep their narrower default width (set in menu.css). */ .popup-sheet--customise { width: min(850px, 90vw) !important; max-width: min(1000px, 90vw) !important; } /* Top-aligned variant (matches Bootstrap-modal default position) — used by loginModal so its placement matches the other top-of-viewport popups. Double-class selector bumps specificity above the base .popup-overlay rule. */ .popup-overlay.popup-overlay--top { align-items: flex-start; padding-top: 1.75rem; } } /* Variant popup — scrollable body + sticky footer */ .popup-sheet.popup-variant { display: flex; flex-direction: column; overflow: hidden; } .popup-sheet.popup-variant .popup-scroll { flex: 1 1 auto; overflow-y: auto; min-height: 0; } .popup-sheet.popup-variant .popup-footer { flex-shrink: 0; padding: .75rem 1rem; border-top: 1px solid var(--border); background: var(--surface); box-shadow: 0 -4px 12px rgba(0,0,0,.04); } .popup-sheet.popup-variant .popup-hero-img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: var(--r-lg) var(--r-lg) 0 0; display: block; } .popup-sheet.popup-variant .popup-readmore { font-size: .72rem; color: var(--brand); cursor: pointer; font-weight: 600; border: none; background: none; padding: 0; margin-bottom: .5rem; display: block; } .popup-sheet.popup-variant .btn-icon-sm { width: 32px; height: 32px; border-radius: 50%; background: var(--surface-2); color: var(--text-2); display: inline-flex; align-items: center; justify-content: center; border: none; cursor: pointer; flex-shrink: 0; } .popup-sheet.popup-variant .btn-icon-sm:hover { color: var(--brand); background: var(--brand-soft); } /* ── Search Overlay (full screen) ── */ #searchOverlay { position: fixed; inset: 0; z-index: 2100; background: var(--surface); overflow-y: auto; } #searchOverlay[hidden] { display: none; } .search-overlay-inner { max-width: 600px; margin: 0 auto; } #searchResults .sr-item { display: flex; gap: .75rem; padding: .75rem 0; border-bottom: 1px solid var(--border); align-items: center; } #searchResults .sr-img { width: 70px; height: 70px; border-radius: var(--r-sm); object-fit: cover; flex-shrink: 0; } #searchResults .sr-name { font-weight: 600; font-size: .88rem; } #searchResults .sr-price { font-weight: 700; font-size: .85rem; } /* ── Proceed bar (mobile/tablet only — desktop uses .cart-panel) ── */ /* Sits above the mobile-bottom-bar (search + menu) so both remain visible when cart has items. */ .proceed-bar { position: fixed; bottom: 56px; left: 0; right: 0; z-index: 1041; padding: 0; } @media(min-width:992px) { .proceed-bar { display: none !important; } } .cart-bar { background: var(--brand); color: var(--brand-secondary); padding: 12px 16px; box-shadow: 0 -4px 20px rgba(0,0,0,.15); display: flex; justify-content: space-between; align-items: center; font-weight: 600; cursor: pointer; } /* ── Mobile bottom bar ── */ .mobile-bottom-bar { position: fixed; bottom: 0; left: 0; right: 0; z-index: 1039; background: var(--surface); border-top: 1px solid var(--border); padding: .5rem .75rem; display: flex; gap: .5rem; } .mbb-search { flex-grow: 1; display: flex; align-items: center; gap: .5rem; padding: .5rem .75rem; border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--surface-2); color: var(--text-3); font-size: .85rem; cursor: pointer; text-align: left; } .mbb-menu { flex-shrink: 0; padding: .5rem 1rem; background: var(--text); color: #fff; border: none; border-radius: var(--r-sm); font-weight: 600; font-size: .85rem; cursor: pointer; } /* ── Scroll to top ── */ .scroll-top-btn { position: fixed; bottom: 120px; right: 16px; z-index: 1038; box-shadow: var(--shadow-md); background: var(--surface); width: 42px; height: 42px; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; border: 1px solid var(--border); color: var(--fg-1, var(--text)); } .scroll-top-btn:hover { box-shadow: var(--shadow-lg); transform: translateY(-2px); } .scroll-top-btn[hidden] { display: none; } /* Desktop: stack above the cart FAB (right:32 bottom:32, 60px tall) and center in its column */ @media(min-width:992px) { .scroll-top-btn { right: 41px; bottom: 104px; } } /* ── Featured ── */ #featuredSection .product-card { border: 1px solid var(--border); border-radius: var(--r); overflow: hidden; } #featuredSection .snap-scroll { gap: .75rem; } /* ── Menu Wrap + 3-col Layout ── */ .menu-wrap { max-width: 1280px; margin: 0 auto; padding: 0 12px; } .menu-layout { display: grid; grid-template-columns: 1fr; gap: 16px; align-items: start; } @media(min-width:768px) { .menu-layout { grid-template-columns: 180px 1fr; } } @media(min-width:992px) { .menu-layout { grid-template-columns: 200px 1fr 300px; gap: 20px; } } /* ── Control Bar (single compact row) ── */ .ctl-row { display: flex; align-items: center; gap: .4rem; overflow-x: auto; scrollbar-width: none; flex-wrap: nowrap; } .ctl-row::-webkit-scrollbar { display: none; } .ctl-sep { flex-shrink: 0; width: 1px; height: 22px; background: var(--border); margin: 0 .25rem; } /* ── Store Info Button ── */ .store-info-btn { width: 34px; height: 34px; padding: 0; border-radius: 50%; background: var(--surface-2); color: var(--text-2); border: none; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; font-size: .9rem; transition: all var(--dur) var(--ease); } .store-info-btn:hover { background: var(--brand-soft); color: var(--brand); } /* ── Offer Band (featured offer + N OFFERS dropdown) ── */ .offer-strip-wrap { background: var(--surface-2); border-bottom: 1px solid var(--border); } .offer-band { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .6rem 0; } .offer-featured { display: inline-flex; align-items: center; gap: .5rem; padding: .4rem .65rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-sm); font-size: .8rem; font-weight: 600; color: var(--text); cursor: pointer; flex-shrink: 0; min-width: 0; } .offer-featured .offer-badge { width: 22px; height: 22px; border-radius: 50%; background: color-mix(in srgb, #22c55e 15%, #fff); color: #16a34a; display: inline-flex; align-items: center; justify-content: center; font-size: .75rem; flex-shrink: 0; } .offer-featured .offer-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; } .offer-more { display: inline-flex; align-items: center; gap: .25rem; color: var(--text-2); font-size: .78rem; font-weight: 600; cursor: pointer; background: transparent; border: none; white-space: nowrap; flex-shrink: 0; padding: .4rem .25rem; } .offer-more:hover { color: var(--brand); } .offer-more .offer-count { color: var(--text); font-weight: 700; } /* ── Cart Panel (desktop right sidebar) ── */ .cart-panel { display: none; } @media(min-width:992px) { .cart-panel { display: block; position: sticky; top: 110px; max-height: calc(100vh - 130px); overflow-y: auto; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); padding: 1rem; box-shadow: var(--shadow-xs); } } .cart-panel-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: .75rem; padding-bottom: .6rem; border-bottom: 1px solid var(--border); } .cart-panel-head h6 { font-size: .95rem; font-weight: 700; margin: 0; color: var(--text); } .cart-panel-head .cp-count { font-size: .72rem; color: var(--text-3); background: var(--surface-2); padding: .15rem .5rem; border-radius: var(--r-full); } .cart-empty { text-align: center; padding: 2rem .5rem; color: var(--text-3); } .cart-empty i { font-size: 2.4rem; color: var(--brand); opacity: .35; display: block; margin-bottom: .6rem; } .cart-empty p { font-size: .82rem; margin: 0; font-weight: 500; } .cart-lines { display: flex; flex-direction: column; max-height: 42vh; overflow-y: auto; margin-bottom: .75rem; } .cart-line { display: flex; align-items: center; justify-content: space-between; gap: .6rem; padding: .6rem 0; border-bottom: 1px solid var(--border); } .cart-line:last-child { border-bottom: none; } .cart-line-info { flex-grow: 1; min-width: 0; } .cart-line-name { font-size: .78rem; font-weight: 600; line-height: 1.25; color: var(--text); display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .cart-line-price { font-size: .75rem; color: var(--text-2); margin-top: .1rem; font-weight: 600; } .cart-line .qty-ctl { flex-shrink: 0; transform: scale(.82); transform-origin: right center; } .cart-summary { padding-top: .5rem; border-top: 1px dashed var(--border); margin-top: .25rem; } .cart-subtotal { display: flex; justify-content: space-between; font-size: .85rem; font-weight: 600; margin-bottom: .75rem; color: var(--text-2); } .cart-subtotal strong { font-size: 1rem; color: var(--brand); } .cart-proceed { width: 100%; background: var(--brand); color: var(--brand-secondary); border: none; border-radius: var(--r-sm); padding: .75rem; font-weight: 700; font-size: .88rem; cursor: pointer; transition: all var(--dur) var(--ease); display: inline-flex; align-items: center; justify-content: center; gap: .35rem; } .cart-proceed:hover { background: var(--brand-hover); transform: translateY(-1px); box-shadow: 0 6px 16px var(--brand-glow); } .cart-proceed:disabled { background: var(--border); color: var(--text-3); cursor: not-allowed; transform: none; box-shadow: none; } /* ── Store Info Sheet ── */ .si-sheet-head { padding: 1rem 1rem .5rem; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; } .si-sheet-head h6 { margin: 0; font-weight: 700; font-size: .95rem; } .si-body { padding: .5rem 1rem 1rem; } .si-row { display: flex; align-items: flex-start; gap: .75rem; padding: .65rem 0; border-bottom: 1px solid var(--border); } .si-row:last-child { border-bottom: none; } .si-row i { color: var(--brand); font-size: 1rem; width: 22px; text-align: center; flex-shrink: 0; margin-top: .15rem; } .si-row-label { font-weight: 600; color: var(--text); margin-bottom: .1rem; font-size: .76rem; text-transform: uppercase; letter-spacing: .04em; } .si-row-value { color: var(--text-2); font-size: .85rem; line-height: 1.4; } .si-row-value a { color: var(--brand); } .si-social { display: flex; gap: .5rem; margin-top: .3rem; } .si-social a { width: 36px; height: 36px; border-radius: 50%; background: var(--surface-2); color: var(--text-2); display: inline-flex; align-items: center; justify-content: center; transition: all var(--dur) var(--ease); } .si-social a:hover { background: var(--brand); color: var(--brand-secondary); } /* ── Offer Modal list ── */ .offer-list-item { display: flex; align-items: center; gap: .7rem; padding: .75rem; border: 1.5px dashed var(--brand); border-radius: var(--r-sm); margin-bottom: .5rem; background: var(--brand-soft); } .offer-list-item-info { flex-grow: 1; min-width: 0; } .offer-list-item-title { font-size: .88rem; font-weight: 700; color: var(--text); margin-bottom: .15rem; } .offer-list-item-desc { font-size: .73rem; color: var(--text-2); line-height: 1.3; } .offer-copy-btn { background: var(--brand); color: var(--brand-secondary); padding: .4rem .75rem; border-radius: 6px; font-weight: 700; font-size: .75rem; letter-spacing: .04em; cursor: pointer; border: none; flex-shrink: 0; transition: all var(--dur) var(--ease); } .offer-copy-btn.copied { background: #22c55e; } .offer-copy-btn:hover { transform: scale(1.03); } /* ── Mobile responsive ── */ @media(max-width:767px) { main .section { padding: 30px 15px !important; } .menu-items-area { padding: .5rem; padding-bottom: 140px; } .menu-items-area .row { --bs-gutter-x: .4rem; --bs-gutter-y: .4rem; } .menu-card { padding: .5rem; } .mc-name { font-size: .78rem; } .mc-img { aspect-ratio: 4/5; } } @media(max-width:400px) { .wla-usps__heading { font-size: 1.3rem; } .menu-items-area .col-6 { flex: 0 0 50%; max-width: 50%; } .mc-img { aspect-ratio: 1; } .menu-card { padding: .4rem; } .mc-name { font-size: .72rem; } } /* ── Print ── */ @media print { .site-header,.site-footer,.proceed-bar,.mobile-bottom-bar,.scroll-top-btn { display: none; } } /* ════════════════════════════════════════════════ RESERVATION BOOKING PAGE (reservation_new.php) ════════════════════════════════════════════════ */ /* Outlet banner */ .rv-page-top { background: var(--brand); padding: 2rem 0; } .rv-outlet-card { background: #fff; border-radius: var(--r-lg); box-shadow: var(--shadow-lg); padding: 1.5rem 1.75rem; } .rv-outlet-name { font-size: 1.6rem; font-weight: 800; color: var(--text); margin: 0 0 .5rem; line-height: 1.2; } .rv-service-badges { display: flex; gap: .5rem; align-items: center; padding-bottom: .85rem; border-bottom: 1px solid var(--border); margin-bottom: .85rem; } /* CI3 parity — Delivery/Pickup/Dine-In badges on the outlet card are green, not brand. */ .rv-badge { display: inline-flex; align-items: center; gap: .3rem; font-size: .83rem; font-weight: 600; color: #1e9c4a; } .rv-badge svg { color: #1e9c4a; } .rv-badge-sep { color: var(--border); font-size: 1rem; } .rv-details-actions-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; flex-wrap: wrap; margin-bottom: .75rem; } .rv-detail-row { display: flex; align-items: center; gap: .45rem; font-size: .88rem; color: var(--text-2); margin-bottom: .45rem; } .rv-detail-row svg { flex-shrink: 0; color: var(--brand); } .rv-outlet-meta { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: .5rem; padding-top: .85rem; border-top: 1px solid var(--border); } .rv-meta-label { font-size: .8rem; color: var(--text-2); } .rv-meta-value { font-size: .82rem; font-weight: 600; color: var(--text); } .rv-outlet-actions { display: flex; gap: .6rem; flex-shrink: 0; } .rv-btn-dir { display: inline-flex; align-items: center; gap: .35rem; font-size: .84rem; font-weight: 600; padding: .5rem 1.1rem; border-radius: var(--r-full); border: 1.5px solid var(--brand); color: var(--brand); background: #fff; cursor: pointer; text-decoration: none; transition: all var(--dur) var(--ease); } .rv-btn-dir:hover { background: var(--brand-soft); color: var(--brand); } .rv-btn-call { display: inline-flex; align-items: center; gap: .35rem; font-size: .84rem; font-weight: 600; padding: .5rem 1.1rem; border-radius: var(--r-full); background: var(--brand); color: var(--brand-secondary); border: none; cursor: pointer; text-decoration: none; transition: all var(--dur) var(--ease); } .rv-btn-call:hover { background: var(--brand-hover); color: #fff; } /* Tabs */ .rv-tabs-wrap { background: #fff; border-bottom: 2px solid var(--border); } .rv-tabs { display: flex; } .rv-tab { flex: 0 0 auto; padding: .9rem 2rem; font-size: .9rem; font-weight: 600; color: var(--text-2); cursor: pointer; border: none; background: none; border-bottom: 2.5px solid transparent; margin-bottom: -2px; transition: all var(--dur) var(--ease); } .rv-tab.active { color: var(--brand); border-bottom-color: var(--brand); } .rv-tab:hover { color: var(--brand); } /* Booking area */ .rv-booking-wrap { background: var(--surface-2); padding: 1.5rem 0 3rem; } .rv-home-wrap { padding: 1.5rem 0 2rem; } .rv-section-heading { font-size: 1rem; font-weight: 700; color: var(--text-1); margin: 1.25rem 0 .5rem; } /* Action cards */ .rv-action-row { display: grid; grid-template-columns: 1fr 1fr; gap: .875rem; margin-bottom: .25rem; } .rv-action-card { background: #fff; border-radius: 14px; padding: 1.1rem 1rem 1rem; box-shadow: 0 1px 4px rgba(0,0,0,.06), 0 4px 16px rgba(0,0,0,.04); display: flex; flex-direction: column; gap: .5rem; text-decoration: none; color: inherit; border: none; cursor: pointer; text-align: left; transition: box-shadow .18s, transform .18s; } .rv-action-card:hover { box-shadow: 0 4px 18px rgba(0,0,0,.1); transform: translateY(-2px); } .rv-action-icon { width: 44px; height: 44px; border-radius: 12px; background: color-mix(in srgb, var(--brand) 12%, transparent); display: flex; align-items: center; justify-content: center; color: var(--brand); margin-bottom: .1rem; } .rv-action-title { font-size: .95rem; font-weight: 700; color: var(--text-1); margin: 0; } .rv-action-desc { font-size: .75rem; color: var(--text-2); margin: 0; line-height: 1.4; } .rv-action-btn { display: block; width: 100%; margin-top: .5rem; padding: .6rem .75rem; background: var(--brand); color: var(--brand-secondary); border-radius: 8px; font-size: .82rem; font-weight: 700; text-align: center; text-decoration: none; } /* ── Shared scroll wrapper (both sections) ── */ .rv-scroll-wrap { overflow-x: auto; scrollbar-width: none; } .rv-scroll-wrap::-webkit-scrollbar { display: none; } /* Flex tracks — centered when all items fit, left-scroll when they overflow */ .rv-cat-scroll, .rv-feat-scroll { display: flex; gap: 1rem; min-width: min-content; margin: 0 auto; padding: .5rem 1rem 1rem; } /* ── Explore Menu cards ── */ .rv-cat-scroll-item { flex-shrink: 0; width: 150px; display: flex; flex-direction: column; align-items: center; gap: .5rem; text-decoration: none; color: inherit; transition: transform .18s ease, box-shadow .18s ease; } .rv-cat-scroll-item:hover { transform: translateY(-3px); } .rv-cat-scroll-img { width: 150px; height: 130px; border-radius: 14px; object-fit: cover; display: block; box-shadow: 0 1px 4px rgba(0,0,0,.08), 0 4px 14px rgba(0,0,0,.06); border: 2px solid transparent; transition: border-color .18s ease, box-shadow .18s ease; } .rv-cat-scroll-item:hover .rv-cat-scroll-img { border-color: var(--brand); box-shadow: 0 6px 20px rgba(0,0,0,.14); } .rv-cat-scroll-img--logo { object-fit: contain; padding: 14px; background: #f5f5f7; } .rv-cat-scroll-name { font-size: .82rem; font-weight: 600; color: var(--text-2); margin: 0; text-align: center; } .rv-cat-scroll-item:hover .rv-cat-scroll-name { color: var(--brand); } /* ── Featured Items cards — identical shell to category cards ── */ .rv-feat-card { flex-shrink: 0; width: 150px; background: #fff; border-radius: 14px; overflow: hidden; box-shadow: 0 1px 4px rgba(0,0,0,.08), 0 4px 14px rgba(0,0,0,.06); display: flex; flex-direction: column; border: 2px solid transparent; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; } .rv-feat-card:hover { transform: translateY(-3px); box-shadow: 0 6px 20px rgba(0,0,0,.14); border-color: var(--brand); } .rv-feat-img { width: 150px; height: 130px; object-fit: cover; display: block; } .rv-feat-img--empty { background: #f2f2f5; } .rv-feat-body { padding: .65rem .75rem .75rem; display: flex; flex-direction: column; gap: .2rem; flex: 1; justify-content: flex-start; } .rv-feat-veg { width: 14px; height: 14px; border-radius: 3px; border: 1.5px solid #2ecc40; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; } .rv-feat-veg::after { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #2ecc40; display: block; } .rv-feat-veg--nv { border-color: #e74c3c; } .rv-feat-veg--nv::after { background: #e74c3c; } .rv-feat-name { font-size: .82rem; font-weight: 600; color: var(--text-1); margin: 0; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .rv-feat-desc { font-size: .72rem; color: var(--text-2); margin: 0; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .rv-feat-price { font-size: .88rem; font-weight: 700; color: var(--text-1); margin: 0; padding-top: .25rem; } .rv-feat-add { display: block; margin-top: auto; padding-top: .55rem; text-align: center; font-size: .78rem; font-weight: 700; color: var(--brand); border: 1.5px solid var(--brand); border-radius: 8px; padding: .32rem .5rem; text-decoration: none; letter-spacing: .03em; transition: background .15s, color .15s; } .rv-feat-add:hover { background: var(--brand); color: var(--brand-secondary); } /* Nearby outlets */ .rv-nearby-grid { display: flex; flex-direction: column; gap: .75rem; margin-bottom: 1.5rem; } .rv-nearby-card { display: flex; align-items: center; gap: .75rem; background: var(--bg-surface, #fff); border: 1px solid var(--border-subtle, #eee); border-radius: var(--radius-lg, 14px); padding: .75rem 1rem; text-decoration: none; color: inherit; transition: box-shadow .15s; } .rv-nearby-card:hover { box-shadow: var(--shadow-md, 0 4px 16px rgba(0,0,0,.08)); } .rv-nearby-logo { width: 48px; height: 48px; object-fit: contain; border-radius: var(--radius-md, 10px); flex-shrink: 0; } .rv-nearby-info { flex: 1; min-width: 0; } .rv-nearby-name { font-size: .875rem; font-weight: 600; color: var(--text-1); margin: 0 0 .15rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .rv-nearby-addr { font-size: .75rem; color: var(--text-2); margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .rv-nearby-eta { font-size: .7rem; font-weight: 600; color: var(--brand); background: color-mix(in srgb, var(--brand) 12%, transparent); border-radius: 20px; padding: .2rem .5rem; white-space: nowrap; flex-shrink: 0; } /* ── Profile page (pf-*) ─────────────────────────────────── */ .pf-page { min-height: 100vh; background: var(--bg-canvas, #f5f5f5); padding: 1.5rem 1rem 3rem; display: flex; justify-content: center; } .pf-card { background: #fff; border-radius: 16px; box-shadow: 0 2px 16px rgba(0,0,0,.07); width: 100%; max-width: 480px; overflow: hidden; } .pf-header { display: flex; align-items: center; gap: 1rem; padding: 1.25rem 1.25rem .75rem; } .pf-avatar { width: 54px; height: 54px; border-radius: 50%; background: #eee; display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: #aaa; } .pf-user-info { flex: 1; min-width: 0; } .pf-name { font-size: 1rem; font-weight: 700; color: var(--text-1, #111); margin: 0 0 .15rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pf-email { font-size: .82rem; color: var(--text-2, #666); margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pf-wallet-strip { display: flex; align-items: stretch; background: var(--brand); color: var(--brand-secondary); padding: .75rem 1.25rem; } .pf-wallet-item { flex: 1; display: flex; flex-direction: column; gap: .1rem; } .pf-wallet-label { font-size: .72rem; opacity: .85; } .pf-wallet-val { font-size: 1rem; font-weight: 700; } .pf-wallet-divider { width: 1px; background: rgba(255,255,255,.3); margin: 0 1rem; } .pf-menu { display: flex; flex-direction: column; } .pf-item { display: flex; align-items: center; gap: .75rem; padding: .9rem 1.25rem; text-decoration: none; color: var(--text-1, #111); border-bottom: 1px solid #f5f5f5; transition: background .12s; } .pf-item:hover { background: #fafafa; } .pf-item--brand .pf-item-icon { color: var(--brand); } .pf-item-icon { display: flex; align-items: center; justify-content: center; width: 20px; flex-shrink: 0; color: #555; } .pf-item-label { flex: 1; font-size: .92rem; font-weight: 500; } .pf-item-arrow { color: #ccc; flex-shrink: 0; } .pf-footer { display: flex; flex-direction: column; align-items: center; gap: .5rem; padding: 1.25rem; border-top: 1px solid #f5f5f5; } .pf-logout-btn { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; background: none; border: 1.5px solid #e0e0e0; border-radius: 8px; padding: .55rem 1.5rem; font-size: .88rem; font-weight: 600; color: #e53935; cursor: pointer; transition: background .12s, border-color .12s; } .pf-logout-btn:hover { background: #ffeaea; border-color: #e53935; } .pf-powered { font-size: .72rem; color: #bbb; margin: 0; } /* ── Personal Info page (pf-pi-*) ───────────────────────── */ .pf-pi-header { display: flex; align-items: center; gap: .75rem; padding: 1rem 1.25rem; border-bottom: 1px solid #f0f0f0; } .pf-pi-back { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; color: var(--text-1, #111); text-decoration: none; flex-shrink: 0; } .pf-pi-title { font-size: 1rem; font-weight: 700; color: var(--text-1, #111); margin: 0; } .pf-pi-identity { text-align: center; padding: 1.1rem 1.25rem .75rem; border-bottom: 1px solid #f5f5f5; } .pf-pi-id-name { font-size: 1.05rem; font-weight: 700; color: var(--text-1, #111); margin: 0 0 .2rem; } .pf-pi-id-phone { font-size: .85rem; color: var(--text-2, #666); margin: 0; } .pf-pi-form { padding: 1.25rem; display: flex; flex-direction: column; gap: .9rem; } .pf-pi-field { display: flex; flex-direction: column; gap: .35rem; } .pf-pi-label { font-size: .82rem; font-weight: 600; color: var(--text-2, #555); } .pf-pi-optional { font-weight: 400; color: #bbb; } .pf-pi-input { width: 100%; padding: .6rem .9rem; border: 1.5px solid #e0e0e0; border-radius: 10px; font-size: .93rem; color: var(--text-1, #111); background: #fff; transition: border-color .15s; outline: none; } .pf-pi-input:focus { border-color: var(--brand); } .pf-pi-radio-row { display: flex; gap: 1rem; flex-wrap: wrap; } .pf-pi-radio { display: flex; align-items: center; gap: .4rem; font-size: .9rem; cursor: pointer; } .pf-pi-radio input[type="radio"] { display: none; } .pf-pi-radio-box { width: 18px; height: 18px; border-radius: 50%; border: 2px solid #ccc; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; transition: border-color .15s; } .pf-pi-radio input[type="radio"]:checked + .pf-pi-radio-box { border-color: var(--brand); background: var(--brand); box-shadow: inset 0 0 0 3px #fff; } .pf-pi-date-wrap { position: relative; } .pf-pi-date-wrap .pf-pi-input { padding-right: 2.5rem; } .pf-pi-date-wrap .pf-pi-input::-webkit-calendar-picker-indicator { opacity: 0; width: 0; padding: 0; margin: 0; } .pf-pi-date-icon { position: absolute; right: .75rem; top: 50%; transform: translateY(-50%); color: #aaa; cursor: pointer; } .pf-pi-error { font-size: .83rem; color: #e53935; background: rgba(229,57,53,.08); border-radius: 8px; padding: .5rem .75rem; margin: 0; } .pf-pi-success { font-size: .83rem; color: #2e7d32; background: rgba(46,125,50,.08); border-radius: 8px; padding: .5rem .75rem; margin: 0; } .pf-pi-submit { width: 100%; padding: .75rem; background: var(--brand); color: var(--brand-secondary); border: none; border-radius: 10px; font-size: .95rem; font-weight: 700; cursor: pointer; transition: opacity .15s; } .pf-pi-submit:hover:not(:disabled) { opacity: .88; } .pf-pi-submit:disabled { opacity: .55; cursor: not-allowed; } /* ── My Reservations (rv-page-*) ────────────────────────── */ .rv-page { min-height: 100vh; background: var(--bg-canvas, #f5f5f5); padding: 1.5rem 1rem 3rem; } .rv-page-inner { max-width: 1100px; margin: 0 auto; } .rv-header { display: flex; align-items: center; gap: .75rem; margin-bottom: 1.5rem; } .rv-back { display: flex; align-items: center; justify-content: center; color: var(--text-1, #111); text-decoration: none; } .rv-title { font-size: 1.25rem; font-weight: 700; color: var(--text-1, #111); margin: 0; } .rv-tabs-row { display: flex; justify-content: center; margin-bottom: 1.5rem; } .rv-tabs { display: inline-flex; background: #fff; border-radius: 999px; padding: .3rem; box-shadow: 0 1px 4px rgba(0,0,0,.06); } .rv-tab { background: none; border: 1.5px solid transparent; border-radius: 999px; padding: .5rem 1.5rem; font-size: .88rem; font-weight: 600; color: var(--text-2, #666); cursor: pointer; transition: border-color .15s, color .15s; } .rv-tab.active { color: var(--brand); border-color: var(--brand); } .rv-loading, .rv-empty { font-size: .9rem; color: var(--text-3, #888); text-align: center; padding: 2rem; margin: 0; } .rv-list { display: grid; grid-template-columns: 1fr; gap: 1rem; } .rv-card { display: flex; justify-content: space-between; gap: 1.25rem; align-items: flex-start; background: #fff; border-radius: 14px; padding: 1.5rem 1.75rem; box-shadow: 0 2px 10px rgba(0,0,0,.06); } .rv-card-main { flex: 1; min-width: 0; } .rv-card-name { font-size: 1.05rem; font-weight: 700; color: var(--brand); text-transform: uppercase; letter-spacing: .04em; margin: 0 0 .45rem; } .rv-card-time { font-size: 1.05rem; font-weight: 600; color: var(--text-1, #111); margin: 0 0 .65rem; } .rv-card-meta { display: flex; align-items: center; gap: .6rem; font-size: .88rem; color: var(--text-2, #666); margin: 0; flex-wrap: wrap; } .rv-card-sep { color: var(--border, #e0e0e0); } .rv-status { font-size: .72rem; font-weight: 700; padding: .2rem .65rem; border-radius: 999px; text-transform: capitalize; } .rv-status--pending { background: #fff3cd; color: #856404; } .rv-status--confirmed { background: #d4edda; color: #155724; } .rv-status--served { background: #d1ecf1; color: #0c5460; } .rv-status--rejected { background: #f8d7da; color: #721c24; } .rv-card-actions { display: flex; flex-direction: column; align-items: flex-end; gap: .65rem; flex-shrink: 0; } .rv-card-dir { display: inline-flex; align-items: center; justify-content: center; background: var(--brand); color: var(--brand-secondary); text-decoration: none; font-size: .85rem; font-weight: 600; padding: .55rem 1.4rem; border-radius: 999px; transition: opacity .15s; } .rv-card-dir:hover { opacity: .88; color: #fff; } .rv-card-links { display: flex; align-items: center; gap: .5rem; font-size: .85rem; } .rv-card-link { color: var(--brand); text-decoration: underline; } .rv-card-link:hover { opacity: .8; } @media (min-width: 768px) { .rv-list { grid-template-columns: repeat(auto-fill, minmax(440px, 1fr)); gap: 1.25rem; } .rv-empty { grid-column: 1 / -1; } } @media (max-width: 600px) { .rv-card { flex-direction: column; gap: .75rem; } .rv-card-actions { flex-direction: row; align-items: center; align-self: stretch; justify-content: space-between; } } /* ── Store View page (sv-*) ─────────────────────────────── */ .sv-wrap { padding: 1.5rem 0 2.5rem; } /* Newly Launched scroll */ .sv-newly-scroll { display: flex; gap: .875rem; min-width: min-content; margin: 0 auto; padding: .5rem 1rem 1rem; } /* CI3 parity — horizontal card: square logo on the left, locality/city/pills on the right. */ .sv-newly-card { flex-shrink: 0; width: 320px; background: #fff; border-radius: 14px; padding: 14px 16px; border: 1px solid var(--border-subtle, #eee); box-shadow: 0 1px 4px rgba(0,0,0,.04); display: flex; flex-direction: row; align-items: center; gap: 14px; text-decoration: none; color: inherit; transition: box-shadow .18s, transform .18s; } .sv-newly-card:hover { box-shadow: 0 6px 20px rgba(0,0,0,.08); transform: translateY(-1px); color: inherit; } .sv-newly-logo { width: 64px; height: 64px; object-fit: cover; border-radius: 10px; background: var(--brand); flex-shrink: 0; } .sv-newly-logo--ph { background: var(--brand); } .sv-newly-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; } .sv-newly-name { font-size: 15px; font-weight: 700; color: var(--text-1, #222); margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sv-newly-addr { font-size: 13.5px; color: var(--text-2, #666); margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sv-newly-cta-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; } .sv-newly-chip { font-size: 12px; font-weight: 600; color: var(--brand); background: #fff; border: 1px solid var(--brand); border-radius: 999px; padding: 3px 10px; white-space: nowrap; } @media (max-width: 600px) { .sv-newly-card { width: 280px; } } /* Cities near you */ /* Store-view 2-column layout — main content + sticky QR sidebar on desktop. */ .sv-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 24px; align-items: start; } .sv-main { min-width: 0; } .sv-sidebar { position: sticky; top: 96px; align-self: start; } @media (max-width: 991px) { .sv-layout { grid-template-columns: 1fr; } .sv-sidebar { position: static; } } /* QR card — brand-pink panel with logo, QR image and store badges (CI3 parity). */ .sv-qr-card { background: var(--brand); color: var(--brand-secondary); border-radius: 16px; padding: 18px 16px; text-align: center; box-shadow: 0 6px 22px rgba(0,0,0,.08); } .sv-qr-card__title { font-size: 15px; font-weight: 600; margin: 0 0 10px; color: #fff; } .sv-qr-card__logo { width: 100%; max-width: 220px; max-height: 80px; object-fit: contain; margin: 4px auto 14px; display: block; } .sv-qr-card__sub { font-size: 13px; font-weight: 600; margin: 0 0 10px; color: #fff; } .sv-qr-card__qr { width: 180px; height: 180px; background: #fff; border-radius: 10px; padding: 8px; display: block; margin: 0 auto 12px; } .sv-qr-card__caption { font-size: 11px; letter-spacing: 1.3px; font-weight: 600; color: rgba(255,255,255,.95); margin: 0 0 10px; } /* Side-by-side store badges (CI3 parity) — bare images, no wrapper bg so the badge PNG renders cleanly. */ .sv-qr-card__stores { display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 8px; flex-wrap: nowrap; } .sv-qr-card__store { flex: 1 1 0; min-width: 0; max-width: 130px; line-height: 0; } .sv-qr-card__store img { display: block; width: 100%; height: auto; max-height: 44px; object-fit: contain; } /* Mobile: the sidebar goes full-width (<=991px) — lay the "Get The App" card out as a 2-column grid (logo + store badges on the left, "Scan QR" + QR on the right) instead of one tall column. Desktop sidebar keeps its single-column flow (these grid rules are inert outside the media query). */ @media (max-width: 991px) { .sv-qr-card { display: grid; grid-template-columns: 1fr 1fr; column-gap: 16px; row-gap: 6px; align-items: center; grid-template-areas: "title sub" "logo qr" "caption qr" "badges qr"; } .sv-qr-card__title { grid-area: title; align-self: center; } .sv-qr-card__logo { grid-area: logo; margin: 0 auto; max-width: 100%; } .sv-qr-card__sub { grid-area: sub; margin: 0; align-self: center; } .sv-qr-card__qr { grid-area: qr; width: 100%; max-width: 160px; height: auto; aspect-ratio: 1 / 1; margin: 0 auto; align-self: center; } .sv-qr-card__caption { grid-area: caption; margin: 0; } /* Badges stay in a side-by-side row (footer parity), centered under the logo. */ .sv-qr-card__stores { grid-area: badges; flex-direction: row; flex-wrap: nowrap; justify-content: center; gap: 8px; } .sv-qr-card__store { flex: 1 1 0; max-width: 120px; } } /* ── Mobile sticky "Order Now" bar (store detail page) ── Pinned to the viewport bottom so the order CTA is always reachable. Hidden on desktop, which relies on the top action cards + QR sidebar. */ .sv-mobile-cta { display: none; } @media (max-width: 991px) { .sv-mobile-cta { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1035; display: flex; align-items: center; gap: 10px; padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px)); background: #fff; border-top: 1px solid var(--border-subtle, #eee); box-shadow: 0 -4px 16px rgba(0,0,0,.1); } .sv-mobile-cta__btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 13px 16px; border-radius: 10px; font-size: 15px; font-weight: 700; text-decoration: none; line-height: 1; transition: filter .15s; } .sv-mobile-cta__btn--primary { flex: 1; background: var(--brand); color: var(--brand-secondary); } .sv-mobile-cta__btn--primary:hover { filter: brightness(.95); color: var(--brand-secondary); } .sv-mobile-cta__btn--ghost { flex: 0 0 auto; background: #fff; border: 1.5px solid var(--brand); color: var(--brand); } .sv-mobile-cta__btn--ghost:hover { background: color-mix(in srgb, var(--brand) 10%, #fff); } .sv-mobile-cta__icon { display: inline-flex; } /* The sticky bar replaces the top Order/Reserve action cards on mobile — hide them (store view only) to avoid a duplicate CTA above "Special Promos". */ .sv-main .rv-action-row { display: none; } /* keep the page's last content (incl. the shared footer) clear of the fixed bar, and lift the global cart FAB so it doesn't overlap. */ body:has(.sv-mobile-cta) { padding-bottom: 72px; } body:has(.sv-mobile-cta) .cart-fab { bottom: 80px; } } /* Home-only "Download App" sticky bar (shown ≤767px): stack the cart FAB and the back-to-top button above the bar so the three don't overlap each other. */ @media (max-width: 767px) { body:has(.footer-app-cta) .cart-fab { bottom: 80px; } body:has(.footer-app-cta) .scroll-top-btn { bottom: 142px; } } .sv-cities-wrap { display: flex; flex-wrap: wrap; gap: .45rem .6rem; margin-bottom: 1.5rem; } .sv-city-link { font-size: .82rem; color: var(--text-2); text-decoration: none; padding: .25rem 0; border-bottom: 1px solid transparent; transition: color .15s, border-color .15s; } .sv-city-link:hover { color: var(--brand); border-bottom-color: var(--brand); } .sv-city-link:not(:last-child)::after { content: '|'; margin-left: .6rem; color: var(--border); } /* "Find {Brand} Near you" — horizontal-scroll cards with View Store + Online Order CTAs */ .sv-nearby-scroll { display: flex; gap: .9rem; min-width: min-content; padding: .25rem 0 1.25rem; } .sv-nearby-card { flex: 0 0 320px; max-width: 320px; padding: 16px 16px 14px; background: var(--surface, #fff); border: 1px solid var(--border-subtle, #eee); border-radius: 14px; box-shadow: 0 2px 8px rgba(0,0,0,.04); display: flex; flex-direction: column; gap: 10px; transition: box-shadow .15s, transform .15s; } .sv-nearby-card:hover { box-shadow: 0 6px 18px rgba(0,0,0,.08); transform: translateY(-1px); } .sv-nearby-name { font-size: 18px; font-weight: 700; color: var(--text, #222); margin: 0 0 2px; } .sv-nearby-meta { display: flex; flex-direction: column; gap: 8px; } .sv-nearby-row-pair { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; } .sv-nearby-row { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; color: var(--text-2, #555); line-height: 1.45; } .sv-nearby-row--inline { font-size: 13px; } .sv-nearby-row svg { color: var(--text-2, #555); flex-shrink: 0; margin-top: 2px; } .sv-nearby-full-addr { font-size: 13px; color: var(--text, #444); line-height: 1.5; margin: 2px 0 0; display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .sv-nearby-actions { display: flex; gap: 8px; margin-top: 6px; } .sv-nearby-btn { flex: 1; text-align: center; padding: 10px 12px; border-radius: 8px; font-size: 13.5px; font-weight: 600; text-decoration: none; transition: filter .15s, background .15s; } .sv-nearby-btn--secondary { background: #111; color: #fff; } .sv-nearby-btn--secondary:hover { filter: brightness(1.15); color: #fff; } .sv-nearby-btn--primary { background: var(--brand); color: var(--brand-secondary); } .sv-nearby-btn--primary:hover { filter: brightness(.92); color: #fff; } @media (max-width: 600px) { .sv-nearby-card { flex-basis: 280px; max-width: 280px; } } /* Step cards */ .rv-step { background: #fff; border-radius: 16px; padding: 1.5rem 1.75rem; margin-bottom: .875rem; box-shadow: 0 1px 3px rgba(0,0,0,.05), 0 4px 16px rgba(0,0,0,.04); } .rv-step-title { font-size: .7rem; font-weight: 800; letter-spacing: .12em; color: var(--text-2); text-transform: uppercase; margin: 0 0 1rem; } /* Date buttons */ .rv-date-row { display: flex; gap: .6rem; flex-wrap: wrap; } .rv-date-btn { flex: 1; min-width: 110px; padding: .72rem .9rem; border: none; border-radius: 10px; font-size: .9rem; font-weight: 600; color: var(--text); background: #f2f2f5; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: .25rem; transition: all .2s ease; } .rv-date-btn:hover { background: #e8e8ef; } .rv-date-btn.selected { background: var(--brand); color: var(--brand-secondary); box-shadow: 0 4px 14px color-mix(in srgb, var(--brand) 30%, transparent); } .rv-date-picker-wrap { margin-top: .85rem; display: none; } .rv-date-picker-wrap.show { display: block; } .rv-date-input { width: 100%; padding: .65rem 1rem; border: 1.5px solid var(--border); border-radius: 10px; font-size: .9rem; color: var(--text); background: #fff; } .rv-date-input:focus { outline: none; border-color: var(--brand); } /* Guest selector */ .rv-guest-row { display: flex; gap: .6rem; flex-wrap: wrap; align-items: center; } .rv-guest-btn { width: 56px; height: 56px; border: none; border-radius: 10px; font-size: 1rem; font-weight: 700; color: var(--text); background: #f2f2f5; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all .2s ease; flex-shrink: 0; } .rv-guest-btn:hover { background: #e8e8ef; } .rv-guest-btn.selected { background: var(--brand); color: var(--brand-secondary); box-shadow: 0 4px 14px color-mix(in srgb, var(--brand) 30%, transparent); } .rv-guest-select-wrap { flex: 1; min-width: 140px; position: relative; } .rv-guest-select { width: 100%; padding: .65rem 2rem .65rem 1rem; border: 1.5px solid var(--border); border-radius: 10px; font-size: .9rem; color: var(--text); appearance: none; background: #fff; cursor: pointer; } .rv-guest-select:focus { outline: none; border-color: var(--brand); } .rv-select-caret { position: absolute; right: .75rem; top: 50%; transform: translateY(-50%); pointer-events: none; color: var(--text-2); } /* Time category — segmented pill tabs */ .rv-time-cat-row { display: flex; gap: .25rem; background: #ececee; border-radius: 12px; padding: .28rem; margin-bottom: 1.25rem; } .rv-time-cat-btn { flex: 1; padding: .65rem .4rem; border: none; border-radius: 10px; background: transparent; cursor: pointer; font-size: .85rem; font-weight: 600; color: #999; text-align: center; transition: all .2s ease; white-space: nowrap; } .rv-time-cat-btn:hover { color: #555; background: rgba(255,255,255,.65); } .rv-time-cat-btn.selected { background: var(--brand); color: var(--brand-secondary); box-shadow: 0 2px 10px color-mix(in srgb, var(--brand) 30%, transparent); } /* Time slot chips — borderless soft fill */ .rv-slots-grid { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .5rem; } .rv-slot-btn { padding: .55rem 1.05rem; border: none; border-radius: 10px; font-size: .84rem; font-weight: 600; color: var(--text); background: #f2f2f5; cursor: pointer; transition: all .2s ease; white-space: nowrap; } .rv-slot-btn:hover { background: #e4e4eb; transform: translateY(-1px); box-shadow: 0 3px 10px rgba(0,0,0,.07); } .rv-slot-btn.selected { background: var(--brand); color: var(--brand-secondary); box-shadow: 0 4px 14px color-mix(in srgb, var(--brand) 35%, transparent); transform: translateY(-1px); } .rv-slot-btn--past, .rv-slot-btn:disabled { opacity: .35; cursor: not-allowed; text-decoration: line-through; transform: none; box-shadow: none; } .rv-slots-empty { font-size: .88rem; color: var(--text-2); padding: .5rem 0; } /* Selected slot confirmation badge */ .rv-selected-slot { display: flex; align-items: center; gap: .6rem; background: #fff; border-radius: 12px; padding: .8rem 1.1rem; margin-bottom: .875rem; box-shadow: 0 1px 4px rgba(0,0,0,.06); border-left: 3px solid var(--brand); font-size: .9rem; font-weight: 600; color: var(--text); } .rv-selected-slot::before { content: '✓'; background: var(--brand); color: var(--brand-secondary); width: 20px; height: 20px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: .68rem; font-weight: 900; flex-shrink: 0; line-height: 1; } /* CTA */ .rv-cta-wrap { padding-top: .25rem; } .rv-reserve-btn { width: 100%; padding: 1.1rem; font-size: 1rem; font-weight: 700; border-radius: 14px; background: var(--brand); color: var(--brand-secondary); border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: .5rem; transition: all .2s ease; letter-spacing: .02em; } .rv-reserve-btn:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 8px 28px color-mix(in srgb, var(--brand) 40%, transparent); } .rv-reserve-btn:active:not(:disabled) { transform: translateY(0); box-shadow: none; } .rv-reserve-btn:disabled { opacity: .38; cursor: not-allowed; filter: grayscale(.3); } /* Reservation popup */ .rv-popup { padding: 0; } .rv-popup-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding: 1.5rem 1.5rem 1rem; border-bottom: 1px solid var(--surface-3); } .rv-popup-eyebrow { font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--brand); margin: 0 0 .2rem; } .rv-popup-title { font-size: 1.15rem; font-weight: 700; color: var(--text-1); margin: 0; } .rv-popup-close { background: var(--lightest-grey); border: none; border-radius: 50%; width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; color: var(--fg-1); font-size: 33px; line-height: 1; flex-shrink: 0; transition: background var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out); } .rv-popup-close:hover { transform: rotate(90deg); box-shadow: var(--shadow-sm); } .rv-popup-close:active { transform: rotate(90deg) scale(.92); } .rv-popup-summary { display: flex; align-items: center; flex-wrap: wrap; gap: .35rem .5rem; padding: .9rem 1.5rem; background: var(--surface-2); font-size: .82rem; color: var(--text-2); font-weight: 500; } .rv-sum-item { display: flex; align-items: center; gap: .35rem; } .rv-sum-sep { color: var(--text-3, #bbb); font-weight: 400; } .rv-popup-form { padding: 1.25rem 1.5rem 1.5rem; display: flex; flex-direction: column; gap: .875rem; } .rv-popup-field { display: flex; flex-direction: column; gap: .35rem; } .rv-popup-label { font-size: .8rem; font-weight: 600; color: var(--text-2); } .rv-popup-optional { font-weight: 400; color: var(--text-3, #bbb); } .rv-popup-input { width: 100%; padding: .78rem 1rem; border: 1.5px solid var(--surface-3); border-radius: 10px; font-size: .95rem; color: var(--text-1); background: #fff; outline: none; transition: border-color .15s; box-sizing: border-box; } .rv-popup-input:focus { border-color: var(--brand); } .rv-popup-textarea { resize: none; font-family: inherit; } /* Success state */ .rv-popup-success { padding: 2rem 1.5rem 2rem; display: flex; flex-direction: column; align-items: center; text-align: center; gap: .75rem; } .rv-success-icon { width: 64px; height: 64px; border-radius: 50%; background: color-mix(in srgb, var(--brand) 12%, transparent); display: flex; align-items: center; justify-content: center; color: var(--brand); } .rv-success-title { font-size: 1.15rem; font-weight: 700; color: var(--text-1); margin: 0; } .rv-success-msg { font-size: .9rem; color: var(--text-2); margin: 0; line-height: 1.5; max-width: 320px; } .rv-success-bar { width: 100%; height: 4px; background: var(--surface-3); border-radius: 99px; overflow: hidden; margin-top: .5rem; } .rv-success-bar-fill { height: 100%; width: 100%; background: var(--brand); border-radius: 99px; } /* Progressive reveal animation */ @keyframes rv-fade-up { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } } .rv-reveal { animation: rv-fade-up .35s ease both; } /* Responsive */ @media(max-width: 640px) { .rv-page-top { padding: 1.25rem 0; } .rv-outlet-card { padding: 1.1rem; } .rv-outlet-name { font-size: 1.25rem; } .rv-details-actions-row { flex-direction: column; } .rv-outlet-actions { width: 100%; } .rv-outlet-meta { flex-direction: column; align-items: flex-start; } .rv-date-btn { min-width: 0; font-size: .84rem; } .rv-slot-btn { font-size: .8rem; padding: .48rem .7rem; } .rv-time-cat-btn { font-size: .78rem; padding: .6rem .3rem; } .rv-guest-btn { width: 48px; height: 48px; font-size: .95rem; } .rv-tab { padding: .85rem 1.25rem; font-size: .85rem; } } /* ════════════════════════════════════════════════ STORE LOCATOR (locator.php) ════════════════════════════════════════════════ */ /* Hero */ .sl-hero { background: linear-gradient(135deg, var(--brand) 0%, color-mix(in srgb, var(--brand) 70%, #000) 100%); padding: 3rem 1rem 2.5rem; text-align: center; } .sl-hero-inner { max-width: 720px; margin: 0 auto; } .sl-hero-logo { height: 52px; object-fit: contain; margin-bottom: 1rem; filter: brightness(0) invert(1); } .sl-hero-title { font-size: clamp(1.5rem, 4vw, 2.2rem); font-weight: 800; color: #fff; margin: 0 0 .4rem; line-height: 1.2; } .sl-hero-sub { color: rgba(255,255,255,.75); font-size: .95rem; margin: 0 0 1.5rem; } /* Search row */ .sl-search-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .6rem; } .sl-or { color: rgba(255,255,255,.6); font-size: .8rem; font-weight: 600; letter-spacing: .08em; flex-shrink: 0; } .sl-select-wrap { position: relative; } .sl-select { appearance: none; background: rgba(255,255,255,.15); backdrop-filter: blur(8px); border: 1.5px solid rgba(255,255,255,.35); color: #fff; padding: .55rem 2.2rem .55rem .9rem; border-radius: 999px; font-size: .88rem; cursor: pointer; min-width: 140px; transition: border var(--dur) var(--ease); } .sl-select:focus { outline: none; border-color: rgba(255,255,255,.7); } .sl-select option { background: #222; color: #fff; } .sl-select-arrow { position: absolute; right: .7rem; top: 50%; transform: translateY(-50%); pointer-events: none; color: rgba(255,255,255,.7); } /* Location button */ .sl-location-btn { display: inline-flex; align-items: center; gap: .45rem; background: rgba(255,255,255,.18); backdrop-filter: blur(8px); border: 1.5px solid rgba(255,255,255,.4); color: #fff; padding: .55rem 1.1rem; border-radius: 999px; font-size: .88rem; font-weight: 600; cursor: pointer; transition: background var(--dur) var(--ease), border var(--dur) var(--ease); } .sl-location-btn:hover { background: rgba(255,255,255,.28); border-color: rgba(255,255,255,.7); } .sl-location-btn:disabled { opacity: .6; cursor: not-allowed; } /* Location message banner */ .sl-location-msg { display: inline-flex; align-items: center; gap: 8px; background: rgba(255,248,225,.92); color: #b45309; border: 1px solid rgba(255,220,120,.7); border-radius: var(--r-sm); padding: 10px 14px; font-size: .875rem; font-weight: 500; margin: 12px auto 0; max-width: 100%; box-sizing: border-box; backdrop-filter: blur(4px); } .sl-location-msg span { text-align: left; } .sl-location-msg-close { background: none; border: none; cursor: pointer; color: inherit; font-size: 1rem; line-height: 1; padding: 2px 4px; opacity: .65; transition: opacity .15s; } .sl-location-msg-close:hover { opacity: 1; } /* Filters bar */ .sl-filters-bar { background: var(--surface); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 100; box-shadow: var(--shadow); } .sl-filters-inner { max-width: 1200px; margin: 0 auto; padding: .6rem 1rem; display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; } .sl-filter-pills { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; } .sl-filter-right { display: flex; align-items: center; gap: .6rem; margin-left: auto; } .sl-results-count { font-size: .78rem; color: var(--text-2); white-space: nowrap; font-weight: 500; } /* Order-type dropdown trigger + clear */ .sl-ot-trigger-wrap { display: flex; align-items: center; gap: .25rem; } .sl-ot-clear { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--border); background: var(--surface-2); color: var(--text-2); font-size: .7rem; cursor: pointer; transition: all var(--dur) var(--ease); flex-shrink: 0; } .sl-ot-clear:hover { border-color: #b91c1c; background: #fee2e2; color: #b91c1c; } /* Dropdown item count badge */ .sl-dropdown-item-label { flex: 1; } .sl-ot-count { font-size: .72rem; font-weight: 700; color: var(--text-3); background: var(--surface-2); border-radius: 999px; padding: .1rem .4rem; min-width: 20px; text-align: center; } /* Toggle pills (Veg Only, Open Now) */ .sl-pill { display: inline-flex; align-items: center; gap: .3rem; padding: .38rem .85rem; border-radius: 999px; border: 1.5px solid var(--border); background: var(--surface); color: var(--text-2); font-size: .8rem; font-weight: 600; cursor: pointer; transition: all var(--dur) var(--ease); white-space: nowrap; } .sl-pill:hover { border-color: var(--brand); color: var(--brand); } .sl-pill.active { background: var(--brand); border-color: var(--brand); color: var(--brand-secondary); box-shadow: 0 2px 8px color-mix(in srgb, var(--brand) 35%, transparent); } /* Sort dropdown */ .sl-filter-dropdown { position: relative; } .sl-dropdown-menu { display: none; position: absolute; top: calc(100% + 6px); left: 0; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-sm); box-shadow: var(--shadow-md); min-width: 230px; z-index: 200; padding: .35rem 0; white-space: nowrap; } .sl-dropdown-menu.sl-dropdown-right { left: auto; right: 0; } .sl-dropdown-menu.open { display: block; } .sl-dropdown-item { display: flex; align-items: center; gap: .5rem; padding: .5rem .9rem; font-size: .83rem; color: var(--text); cursor: pointer; transition: background var(--dur) var(--ease); } .sl-dropdown-item:hover { background: var(--surface-2); } .sl-dropdown-item input { accent-color: var(--brand); } /* City tabs */ .sl-city-tabs-wrap { background: var(--surface); border-bottom: 1px solid var(--border); overflow-x: auto; scrollbar-width: none; } .sl-city-tabs-wrap::-webkit-scrollbar { display: none; } .sl-city-tabs { display: flex; max-width: 1200px; margin: 0 auto; padding: 0 1rem; } .sl-city-tab { display: inline-flex; align-items: center; gap: .35rem; padding: .7rem 1.1rem; font-size: .83rem; font-weight: 600; color: var(--text-2); border: none; background: none; cursor: pointer; border-bottom: 2.5px solid transparent; white-space: nowrap; transition: all var(--dur) var(--ease); } .sl-city-tab:hover { color: var(--brand); } .sl-city-tab.active { color: var(--brand); border-bottom-color: var(--brand); } .sl-city-count { background: var(--surface-2); border-radius: 999px; padding: .1rem .45rem; font-size: .7rem; } .sl-city-tab.active .sl-city-count { background: var(--brand-soft); color: var(--brand); } /* Grid */ .sl-grid-section { background: var(--surface-2); min-height: 60vh; padding: 1.5rem 0 3rem; } .sl-grid-wrap { max-width: 1200px; margin: 0 auto; padding: 0 1rem; } .sl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: .85rem; } /* Card */ .sl-card { background: var(--surface); border-radius: var(--r); border: 1px solid var(--border); box-shadow: var(--shadow); transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease); position: relative; overflow: hidden; display: flex; flex-direction: column; } .sl-card:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); } .sl-card[data-href] { cursor: pointer; } .sl-card--coming { opacity: .65; cursor: default; } /* Top banner row: distance (left corner) ↔ Open/Closed (right corner). Both pills are flush to their respective top corners; if distance is hidden the Open badge stays right-aligned via margin-left:auto. */ .sl-card-top { display: flex; align-items: flex-start; justify-content: space-between; min-height: 0; } .sl-card-distance { display: inline-flex; align-items: center; gap: .35rem; font-size: .72rem; font-weight: 700; letter-spacing: .02em; color: #15803d; background: #dcfce7; padding: .35rem .85rem; border-bottom-right-radius: var(--r); } .sl-card-distance[hidden] { display: none; } .sl-open-badge { display: inline-flex; align-items: center; font-size: .72rem; font-weight: 700; letter-spacing: .04em; padding: .35rem .85rem; border-bottom-left-radius: var(--r); margin-left: auto; text-transform: uppercase; } .sl-open-badge--open { background: #dcfce7; color: #15803d; } .sl-open-badge--closed { background: #fee2e2; color: #b91c1c; } .sl-open-badge--pending { background: #fef3c7; color: #b45309; text-transform: none; letter-spacing: 0; max-width: 70%; text-align: right; } /* Body: header row (logo + name | View Store →) then a detail list. */ .sl-card-body { padding: 1rem 1rem .85rem; flex: 1; display: flex; flex-direction: column; gap: .65rem; } .sl-card-header { display: flex; align-items: center; gap: .65rem; } .sl-card-logo { width: 36px; height: 36px; flex-shrink: 0; border-radius: 999px; overflow: hidden; background: var(--surface-2); display: flex; align-items: center; justify-content: center; } .sl-card-logo img { width: 100%; height: 100%; object-fit: cover; } .sl-card-logo-placeholder { font-size: 1rem; font-weight: 800; color: var(--brand); } .sl-card-name { font-size: 1rem; font-weight: 700; color: var(--text); margin: 0; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* View Store → arrow link top-right (CI3 .view-store). */ .sl-card-view-arrow { display: inline-flex; align-items: center; gap: .3rem; color: var(--brand); font-size: .78rem; font-weight: 700; text-decoration: none; flex-shrink: 0; white-space: nowrap; transition: gap var(--dur) var(--ease); } .sl-card-view-arrow:hover { color: var(--brand); gap: .5rem; } .sl-card-view-arrow svg { transition: transform var(--dur) var(--ease); } .sl-card-view-arrow:hover svg { transform: translateX(2px); } /* Detail list (pin/clock rows). */ .sl-card-detail-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .35rem; } .sl-card-detail-list li { display: flex; align-items: center; gap: .45rem; font-size: .82rem; color: var(--text-2); line-height: 1.3; } .sl-card-detail-list svg { flex-shrink: 0; color: var(--text-3); } .sl-card-detail-list strong { color: var(--text); font-weight: 700; } /* Secondary "Orders 24×7 · delivery from…" row — rendered as a soft pill chip so it reads as a UI element distinct from the primary store-hours text above it (avoids the "second sentence in a paragraph" feel). */ .sl-card-detail-list .sl-card-detail-sub { padding-left: 1.35rem; margin-top: .15rem; } .sl-card-detail-list .sl-card-detail-sub span { display: inline-flex; align-items: center; gap: .35rem; background: #f3f4f6; color: var(--text-2); font-size: .74rem; font-weight: 500; padding: .25rem .55rem; border-radius: 6px; line-height: 1.2; } .sl-card-detail-list .sl-card-detail-sub svg { color: var(--brand, #f59e0b); flex-shrink: 0; } /* Order-type chips */ .sl-order-types { display: flex; flex-wrap: wrap; gap: .3rem; } .sl-ot-badge { font-size: .68rem; font-weight: 600; padding: .2rem .55rem; border-radius: 999px; } .sl-ot-delivery { background: #dbeafe; color: #1d4ed8; } .sl-ot-pickup { background: #fef9c3; color: #854d0e; } .sl-ot-dinein { background: #f3e8ff; color: #7e22ce; } .sl-ot-incar { background: #ffe4e6; color: #be123c; } /* Card actions (CI3 .add-space): • Order Online alone → full width primary • +1 secondary → primary gets .sl-cta--half (50%), secondary 50% • +2 secondaries → primary full-width, two secondaries 50/50 below */ .sl-card-actions { display: flex; flex-wrap: wrap; gap: .5rem; padding: 0 1rem 1rem; } .sl-cta { display: inline-flex; align-items: center; justify-content: center; padding: .6rem .8rem; border-radius: var(--r-sm); font-size: .85rem; font-weight: 700; text-decoration: none; text-align: center; white-space: nowrap; transition: all var(--dur) var(--ease); } .sl-cta--primary { flex: 1 0 100%; background: var(--brand); color: var(--brand-secondary); } .sl-cta--primary:hover, .sl-cta--primary:focus-visible { background: var(--brand-hover); color: var(--brand-secondary, #fff); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0, 0, 0, .08); } .sl-cta--primary:active { transform: translateY(0); box-shadow: none; } .sl-cta--primary.sl-cta--half { flex: 1 1 calc(50% - .25rem); } .sl-cta--secondary { flex: 1 1 calc(50% - .25rem); border: 1.5px solid var(--brand); color: var(--brand); background: transparent; } .sl-cta--secondary:hover, .sl-cta--secondary:focus-visible { background: var(--brand); color: var(--brand-secondary, #fff); transform: translateY(-1px); } .sl-cta--secondary:active { transform: translateY(0); } .sl-btn-coming { display: block; width: 100%; text-align: center; background: var(--surface-2); color: var(--text-3); padding: .6rem .8rem; border-radius: var(--r-sm); font-size: .85rem; font-weight: 600; } /* No results / empty */ .sl-no-results, .sl-empty { text-align: center; padding: 3rem 1rem; color: var(--text-2); } .sl-no-results svg, .sl-empty svg { display: block; margin: 0 auto 1rem; opacity: .35; } .sl-no-results p, .sl-empty p { font-size: .95rem; margin-bottom: 1rem; } .sl-btn-reset { background: var(--brand); color: var(--brand-secondary); border: none; padding: .55rem 1.4rem; border-radius: 999px; font-size: .85rem; font-weight: 700; cursor: pointer; transition: opacity var(--dur) var(--ease); } .sl-btn-reset:hover { opacity: .85; } /* Infinite-scroll sentinel — sits below the grid while more outlets remain */ .sl-load-sentinel { display: flex; justify-content: center; align-items: center; padding: 1.75rem 0 .5rem; } .sl-load-spinner { width: 22px; height: 22px; border: 2.5px solid var(--border, rgba(0,0,0,.12)); border-top-color: var(--brand); border-radius: 50%; animation: sl-spin .7s linear infinite; } @keyframes sl-spin { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .sl-load-spinner { animation: none; } } /* Responsive */ @media(max-width: 640px) { .sl-hero { padding: 2rem .75rem 1.75rem; } .sl-search-row { flex-direction: column; align-items: stretch; } .sl-or { text-align: center; } .sl-select, .sl-location-btn { width: 100%; justify-content: center; } .sl-select-wrap { width: 100%; } .sl-grid { grid-template-columns: 1fr; gap: .65rem; } .sl-filters-inner { gap: .35rem; } .sl-card-actions { gap: .3rem; } } /* ── Veg / Non-veg / Egg markers (shared across checkout, cart) ─────────────── */ .veg-marker{width:14px;height:14px;border-radius:3px;display:inline-grid;place-items:center;border:1.5px solid var(--veg,#009A3D);flex-shrink:0;vertical-align:middle} .veg-marker::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--veg,#009A3D)} .veg-marker--nonveg{border-color:var(--nonveg,#E23434)} .veg-marker--nonveg::before{width:8px;height:8px;border-radius:0;clip-path:polygon(50% 15%, 90% 85%, 10% 85%);background:var(--nonveg,#E23434)} .veg-marker--egg{border-color:#d97706} .veg-marker--egg::before{background:#d97706} /* ── Checkout Page ─────────────────────────────────────────────────────────── */ .checkout-page{min-height:100vh;background:var(--bg-2,#f5f5f5)} .checkout-alert{background:#fff3cd;border:1px solid #ffc107;border-radius:8px;padding:.75rem 1rem;margin:.5rem 1rem;font-size:.875rem;color:#664d03} /* Cards */ .card{background:var(--surface,#fff);border-radius:var(--r,12px);border:1px solid var(--border-subtle,#eee)} .card__header{display:flex;align-items:center;justify-content:space-between;padding:.65rem .85rem;border-bottom:1px solid var(--border-subtle,#eee)} .card__body{padding:.75rem .85rem} .card__footer{padding:.6rem .85rem;} .card__header:empty,.card__body:empty,.card__footer:empty{display:none} /* Cart actions — checkout-only ID overrides (the .co-action-link base rules live in checkout.css) */ #addInstructionsBtn.co-action-link svg{color:var(--text-2,#555)} #addMoreItemsLink.co-action-link{color:#1b8a3a;border-color:#1b8a3a} #addMoreItemsLink.co-action-link svg{color:#1b8a3a} #addInstructionsBtn.co-action-link svg{color:var(--text-2,#555)} #addMoreItemsLink.co-action-link{color:#1b8a3a;border-color:#1b8a3a} #addMoreItemsLink.co-action-link svg{color:#1b8a3a} /* Promo / GST IDs (checkout-only; .co-* base rules live in checkout.css) */ #promoBlock{padding:.5rem .75rem;border-bottom:1px dashed var(--border-subtle,#eee);display:flex;align-items:center;gap:.5rem;justify-content:space-between} #oneCoupon{flex:1;min-width:0} #gstTr{position:relative} #gstTr:hover .co-bill__gst-tip, #gstTr:focus-within .co-bill__gst-tip, .co-bill__gst-tip--open{display:block} /* Popup sheet variants (extend base .popup-sheet) */ .popup-sheet--lg{max-width:640px!important} .popup-sheet--sm{max-width:430px!important} .popup-sheet--sm{max-width:430px!important} /* First-login profile prompt — a touch narrower than --sm so it doesn't dominate on narrow desktop windows. !important matches the --sm/--lg convention and beats the desktop .popup-sheet width rule; mobile bottom-sheet rule below still forces 100%. */ .popup-sheet--profile{max-width:520px!important} /* The modal reuses the page-scale .pf-pi-* form. Its own 1.25rem padding doubled the sheet body's padding, and the 1.1rem gap was page-sized — tighten both so the modal reads compact. ID selector beats the base class (no !important needed). */ #profilePromptModal .pf-pi-form{padding:0;gap:.6rem} /* DOB + Anniversary share one row (CI3 parity) to keep the modal short; stack on narrow phones. */ #profilePromptModal .fp-date-row{display:flex;gap:.7rem} #profilePromptModal .fp-date-row>.pf-pi-field{flex:1 1 0;min-width:0} @media(max-width:479px){#profilePromptModal .fp-date-row{flex-direction:column;gap:.6rem}} .popup-sheet--center{margin:auto;border-radius:var(--r,12px)!important} /* Mobile: all modals open as bottom sheets — overrides centered variants. */ @media(max-width:767px){ .popup-overlay,.popup-overlay.popup-overlay--top{align-items:flex-end!important;padding:0!important} .popup-sheet,.popup-sheet--center{margin:0!important;border-radius:var(--r-lg) var(--r-lg) 0 0!important;max-width:100%!important;width:100%!important;animation:sheetUp .3s var(--ease)!important} .modal.fade .modal-dialog{margin:0;max-width:100%!important;width:100%;position:fixed;left:0;right:0;bottom:0;transform:translateY(100%);transition:transform .3s ease} .modal.show .modal-dialog{transform:translateY(0)} .modal-dialog.modal-dialog-centered{align-items:flex-end;min-height:auto} .modal-dialog.modal-dialog-centered .modal-content{border-radius:var(--r-lg) var(--r-lg) 0 0!important;width:100%} } .popup-sheet__header{display:flex;align-items:center;justify-content:space-between;padding:.8rem .9rem;flex-shrink:0} .popup-sheet__header{display:flex;align-items:center;justify-content:space-between;padding:.8rem .9rem;flex-shrink:0} .popup-sheet__header h3{margin:0;font-size:.95rem;font-weight:700} .popup-close.btn--icon{width:32px;height:32px;background:#fff;border:1px solid var(--ink-200,#E5E5E5);color:var(--ink-800,#1F1F1F);font-weight:400;font-size:1rem;line-height:1;box-shadow:var(--shadow-xs)} .popup-close.btn--icon:hover{background:var(--ink-50,#FAFAFA);color:var(--ink-900,#212121);border-color:var(--ink-300,#C7C7C7)} .popup-close.btn--icon{width:32px;height:32px;background:#fff;border:1px solid var(--ink-200,#E5E5E5);color:var(--ink-800,#1F1F1F);font-weight:400;font-size:1rem;line-height:1;box-shadow:var(--shadow-xs)} .popup-close.btn--icon:hover{background:var(--ink-50,#FAFAFA);color:var(--ink-900,#212121);border-color:var(--ink-300,#C7C7C7)} .popup-sheet__body{flex:1;overflow-y:auto;min-height:0;padding:.9rem;-webkit-overflow-scrolling:touch} .popup-sheet__footer{padding:.65rem .9rem;border-top:0 solid var(--border-subtle,#eee);background:var(--surface,#fff);flex-shrink:0;display:flex;gap:.5rem} /* Cart items list — drop the section header, give items breathing room */ @media(min-width:768px){ #cartSection .card__body{padding:.35rem 1rem} .cart-row{padding:.85rem 0;border-bottom:1px solid var(--border-subtle,#eef0f2)} .cart-row__top{gap:.85rem;align-items:flex-start} .cart-row{padding:.85rem 0;border-bottom:1px solid var(--border-subtle,#eef0f2)} .cart-row__top{gap:.85rem;align-items:flex-start} .cart-row:last-child{border-bottom:none} } /* Cart items — mobile compact: stops stepper overflowing on narrow phones */ @media(max-width:480px){ #cartSection .card__body{padding:.5rem .65rem} .cart-row{gap:.4rem;padding:.6rem 0} .cart-row__top{gap:.5rem} .cart-row__title{font-size:.85rem;gap:.3rem} .cart-row__qty{padding:.22rem .25rem;gap:.3rem} .cart-row__qty .btn--icon{width:20px;height:20px;font-size:.95rem} .cart-row__qty .mono{min-width:14px;font-size:.8rem} .cart-row__price{font-size:.85rem;min-width:auto} .cart-row__customs-list{font-size:.78rem} .cart-row__custom-row{padding:.45rem .6rem} } /* Cart items — mobile compact: stops stepper overflowing on narrow phones */ @media(max-width:480px){ #cartSection .card__body{padding:.5rem .65rem} .cart-row{gap:.4rem;padding:.6rem 0} .cart-row__top{gap:.5rem} .cart-row__title{font-size:.85rem;gap:.3rem} .cart-row__qty{padding:.22rem .25rem;gap:.3rem} .cart-row__qty .btn--icon{width:20px;height:20px;font-size:.95rem} .cart-row__qty .mono{min-width:14px;font-size:.8rem} .cart-row__price{font-size:.85rem;min-width:auto} .cart-row__customs-list{font-size:.78rem} .cart-row__custom-row{padding:.45rem .6rem} } /* Bundle badge — inline chip next to item name (replaces right-side "You saved" pill) */ .cart-row__title{align-items:center;gap:.45rem;font-size:.92rem;font-weight:600;color:var(--fg-1);flex-wrap:wrap} .cart-row__bundle-badge{display:inline-flex;align-items:center;padding:.12rem .45rem;border-radius:4px;font-size:.62rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;line-height:1.2;margin-left:.1rem;border:1px solid currentColor;flex-shrink:0} .cart-row__bundle-badge--bogo{color:#1b8a3a;background:#e8f5ea} .cart-row__bundle-badge--combo{color:#8a5a00;background:#fff5e0} /* Cart-row notice — highlighted amber pill for "promos/wallet not applicable" (matches the previous design's prominence), red pill for the OOS error line. */ .cart-row__notice{display:inline-block;margin:.45rem 0 0;padding:.3rem .6rem;background:#fff4cf;color:#7a5b00;border-radius:6px;font-size:.74rem;font-weight:500;text-transform:none;letter-spacing:0;line-height:1.3} @media(max-width:767px){.cart-row__notice{display:block}} @media(max-width:767px){.cart-row__notice{display:block}} .cart-row__notice--err{background:#fdecea;color:#b91c1c;border-radius:999px;font-size:.74rem;font-weight:500} /* Unavailable-item remove button — bare trash icon, no border/background */ .cart-row__remove-btn{width:32px;height:32px;padding:0;border:none;background:none;color:var(--danger,#e63946);display:grid;place-items:center;cursor:pointer;flex-shrink:0;border-radius:6px;transition:background .15s,color .15s} .cart-row__remove-btn:hover{background:color-mix(in srgb,var(--danger,#e63946) 10%,transparent);color:var(--danger,#e63946)} .cart-row__remove-btn svg{display:block} /* Stepper — slim outlined pill, matches the Figma's [- 1 +] pill */ .cart-row__qty{padding:.38rem .35rem;border:1px solid var(--border-80);border-radius:var(--r-2);gap:.45rem;background:var(--surface,#fff)} .cart-row__qty{padding:.38rem .35rem;border:1px solid var(--border-80);border-radius:var(--r-2);gap:.45rem;background:var(--surface,#fff)} .cart-row__qty .btn--icon{width:22px;height:22px;border:none;background:none;color:var(--fg-1);font-size:1rem;font-weight:700;padding:0} .cart-row__qty .btn--icon:hover{background:color-mix(in srgb,var(--brand) 10%,transparent)} .cart-row__qty .mono{min-width:18px;font-size:.84rem;font-weight:600;color:var(--text-1,#222)} .cart-row__price{font-size:.9rem;font-weight:700;color:var(--text)} .cart-row__price{font-size:.9rem;font-weight:700;color:var(--text)} /* Desktop: price sits BESIDE the stepper (not stacked below it) — matches Figma. The .cart-row__mrp
still renders the strikethrough above the final price within the price column, so slash pricing still stacks correctly. */ @media(min-width:768px){ .cart-row__priceqty{gap:.95rem} .cart-row__price{min-width:auto;text-align:right;line-height:1.25} } /* Customizations panel — full-width sibling of the title+stepper row */ .cart-row__customs{margin-top:0} .cart-row__customs-toggle{padding:0;color:var(--text-2,#666);font-size:.78rem;font-weight:500;text-transform:none;letter-spacing:0;display:inline-flex;align-items:center;gap:.3rem} .cart-row__customs-toggle:hover{color:var(--text-1,#333)} .cart-row__customs-list{margin-top:.4rem;padding:0;border-radius:8px;background:var(--surface,#fff);display:flex;flex-direction:column;gap:0} .cart-row__custom-row{padding: 0 .75rem .55rem;font-size:.8rem;color:var(--text-1,#333);gap:.5rem;justify-content:space-between;border-bottom:1px solid var(--border-subtle,#f0f2f4)} .cart-row__custom-row:last-child{border-bottom:none} .cart-row__custom-name{flex:1;min-width:0;color:var(--text-1,#333)} .cart-row__custom-price{color:var(--text-1,#1a1a1a);font-weight:500;flex-shrink:0;font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap} /* Customizations panel — full-width sibling of the title+stepper row */ .cart-row__customs{margin-top:0} .cart-row__customs-toggle{padding:0;color:var(--text-2,#666);font-size:.78rem;font-weight:500;text-transform:none;letter-spacing:0;display:inline-flex;align-items:center;gap:.3rem} .cart-row__customs-toggle:hover{color:var(--text-1,#333)} .cart-row__customs-list{margin-top:.4rem;padding:0;border-radius:8px;background:var(--surface,#fff);display:flex;flex-direction:column;gap:0} .cart-row__custom-row{padding:.55rem .75rem;font-size:.8rem;color:var(--text-1,#333);gap:.5rem;justify-content:space-between;border-bottom:1px solid var(--border-subtle,#f0f2f4)} .cart-row__custom-row:last-child{border-bottom:none} .cart-row__custom-name{flex:1;min-width:0;color:var(--text-1,#333)} .cart-row__custom-price{color:var(--text-1,#1a1a1a);font-weight:500;flex-shrink:0;font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap} /* Checkout-only ID overrides for action pills (.co-action-link base rules live in checkout.css) */ #addInstructionsBtn.co-action-link{color:var(--text-1,#333);border-color:var(--border,#e2e5e9)} #addInstructionsBtn.co-action-link svg{color:var(--text-2,#555)} #addInstructionsBtn.co-action-link:hover{border-color:var(--text-2,#888);background:var(--bg-2,#f5f5f5)} #addMoreItemsLink.co-action-link{color:#1b8a3a;border-color:#1b8a3a} #addMoreItemsLink.co-action-link svg{color:#1b8a3a} #addMoreItemsLink.co-action-link:hover{border-color:#1b8a3a;color:#0f6b2a;background:#ecf7ef} #addInstructionsBtn.co-action-link{color:var(--text-1,#333);border-color:var(--border,#e2e5e9)} #addInstructionsBtn.co-action-link svg{color:var(--text-2,#555)} #addInstructionsBtn.co-action-link:hover{border-color:var(--text-2,#888);background:var(--bg-2,#f5f5f5)} #addMoreItemsLink.co-action-link{color:#1b8a3a;border-color:#1b8a3a} #addMoreItemsLink.co-action-link svg{color:#1b8a3a} #addMoreItemsLink.co-action-link:hover{border-color:#1b8a3a;color:#0f6b2a;background:#ecf7ef} /* "Complete your meal" — checkout-only #complete-your-meal wraps .co-recs (base rules live in checkout.css) */ #complete-your-meal .co-recs{padding:0;background:none;border:none} /* ── Savings Corner (Figma) — dashed dividers + green-check icons ────────── */ /* Header: extra breathing room around the "SAVINGS CORNER" title and drop the default solid border-bottom for a clean eyebrow look. */ #promo_list{padding:.8rem} #promo_list{padding:.8rem} #promo_list .card__header{padding:1.25rem 1.1rem .75rem;border-bottom:none} #promo_list .card__body{padding:0} #promo_list .card__body{padding:0} /* Offer-suggestion group IDs (checkout-only; .co-promo__next + .co-promo__apply etc. live in checkout.css) */ #promoBlock{padding:.8rem 1.1rem;border-bottom:1px dashed var(--border-subtle,#d8dde2);border-top:none} #viewMoreOffersSection{padding:.2rem 0 0;border-bottom:none;border-top:none} #viewMoreOffersSection{padding:.2rem 0 0;border-bottom:none;border-top:none} #promo_list .card__body > :last-child{border-bottom:none} #membership_promo_list .co-promo__applied{border-bottom:none} #membership_promo_list .co-promo__applied{border-bottom:none} /* Suggestion row layout — outlined coupon icon, body text, outlined Apply */ #promoBlock, #membershipPromoBlock{display:flex;align-items:center;gap:.55rem;justify-content:space-between;padding:.8rem 0 0;border-bottom:0px dashed var(--border-subtle,#d8dde2);border-top:none} #membershipPromoBlock{display:flex;align-items:center;gap:.55rem;justify-content:space-between;padding:.8rem 0 0;border-bottom:0px dashed var(--border-subtle,#d8dde2);border-top:none} #membershipPromoBlock:last-child{border-bottom:none} /* Outlined Apply (mixed group: .co-promo__sugg-apply + ID-prefixed wallet/coupon btns) */ .co-promo__sugg-apply.btn, #oneCouponApply > .btn, #oneMembershipCouponApply > .btn, #applyWalletBtn.btn{background:var(--surface,#fff);color:var(--text-1,#1a1a1a);border:1px solid var(--border,#dadde1);box-shadow:none;font-weight:600;padding:.4rem 1.1rem;border-radius:6px} .co-promo__sugg-apply.btn:hover, #oneCouponApply > .btn:hover, #oneMembershipCouponApply > .btn:hover, #applyWalletBtn.btn:hover{border-color:var(--brand);color:var(--brand);background:var(--surface,#fff)} /* Conflict-state mixed group (contains IDs) */ .co-promo--conflict .co-promo__sugg-apply.btn, .co-promo--conflict #oneMembershipCouponApply > .btn, .co-promo--conflict #oneCouponApply > .btn{opacity:1} /* "View All Offers ›" link — sub-link tucked under the suggestion row */ #viewMoreOffersBtn{background:none;border:none;padding:0;color:var(--text-2,#555);font-weight:500;font-size:.76rem;cursor:pointer} #viewMoreOffersBtn::after{content:" ›";font-weight:700;margin-left:.15rem} /* Promo/wallet adjacency rules (mixed groups with #promo_list) */ #promo_list:has(+ .co-wallet:not([hidden])){border-bottom-left-radius:0;border-bottom-right-radius:0;border-bottom:1px dashed var(--border-subtle,#d8dde2)} #promo_list:has(+ .co-wallet:not([hidden])){border-bottom-left-radius:0;border-bottom-right-radius:0;border-bottom:1px dashed var(--border-subtle,#d8dde2)} #promo_list + .co-wallet:not([hidden]){margin-top:-1.25rem;border-top:none;border-top-left-radius:0;border-top-right-radius:0} #promo_list + .co-wallet:not([hidden]) .card__body{border-top:none} /* Bill polish — shared .bill__row rules (paired with .co-bill in checkout.css) */ .bill__row{padding:.5rem 0;font-size:.86rem;border-bottom:none} .bill__row dt{color:var(--text-2,#555);font-weight:400} .bill__row dd{color:var(--text-1,#222);font-weight:600} .bill__row--positive dt,.bill__row--positive dd{color:#1b8a3a;font-weight:600} .bill__row--total{margin-top:.35rem;padding-top:.7rem!important;border-top:1px dashed var(--border-subtle,#eef0f2)!important} .bill__row--total dt,.bill__row--total dd{font-size:1.05rem;font-weight:700;color:var(--fg-1,#1a1a1a)} #gstTr dt{cursor:help;display:inline-flex;align-items:center;gap:.2rem;flex:0 0 auto} /* ── Map address modal ──────────────────────────────────────── */ .popup-sheet--map{max-width:960px;width:min(960px,92vw);padding:0} /* Form-wider split to match the home address picker (left map 45% / right form 55%). */ .addr-map-layout{display:grid;grid-template-columns:0.82fr 1fr;height:560px;overflow:hidden} .addr-map-panel{position:relative;background:var(--bg-canvas,#f5f5f5);border-right:1px solid var(--border-subtle,#eee);display:flex;flex-direction:column} /* Relative wrapper so the map + its floating controls (search, locate, info) live below the mobile screen header instead of overlapping it (mirrors home's .map-outer). */ .addr-map-outer{position:relative;flex:1;min-height:0} #addrMapCanvas{position:absolute;inset:0;width:100%;height:100%} .addr-map__search{position:absolute;top:10px;left:10px;right:10px;z-index:401;display:flex;align-items:center;background:var(--bg-surface,#fff);border-radius:var(--radius-md,10px);box-shadow:var(--shadow-md,0 2px 8px rgba(0,0,0,.12));padding:4px 8px} /* font-size >= 16px: stops iOS Safari from auto-zooming on focus (it never zooms back out, hiding the Confirm CTA on the map-pin step). */ .addr-map__search .input{flex:1;min-width:0;border:none;background:transparent;box-shadow:none;padding:8px 10px;font-size:16px} .addr-map__search .input:focus{box-shadow:none;outline:none} .addr-map__search-btn{display:flex;align-items:center;padding:0 6px;color:var(--text-secondary,#555)} /* Rounded pill, bottom-left — mirrors the home picker's .map-outer-btn. Kept above the bottom info/error/outlet overlay (which sits at bottom:8px) so they never collide. */ .addr-map__locate{position:absolute;bottom:14px;left:14px;z-index:400;background:var(--bg-surface,#fff);box-shadow:var(--shadow-md,0 2px 8px rgba(0,0,0,.12));border-radius:999px;padding:6px 12px;display:inline-flex;align-items:center;gap:.35rem;font-size:13px;font-weight:600;white-space:nowrap} .addr-map__mobile-confirm{display:none} /* Attribute-specificity (0,2,0) beats the media-query `display:block` (0,1,0), so toggling the `hidden` attribute reliably hides the confirm button regardless of viewport. */ .addr-map__mobile-confirm[hidden]{display:none} /* Not-serviceable message — shown on BOTH desktop (below the outlet card / Switch button) and mobile (in the Confirm button's place). `:not([hidden])` (0,2,0) wins over the base. */ .addr-map__notserviceable{display:none;margin:var(--space-3,12px);padding:9px 12px;font-size:.9rem;font-weight:700;color:var(--danger,#e63946);background:color-mix(in srgb,var(--danger,#e63946) 10%,#fff);border:1px solid color-mix(in srgb,var(--danger,#e63946) 30%,#fff);border-radius:var(--radius-md,10px);align-items:center;justify-content:center;gap:6px} .addr-map__notserviceable:not([hidden]){display:flex} .addr-map__notserviceable::before{content:"";flex-shrink:0;width:16px;height:16px;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='12' y1='8' x2='12' y2='12'/%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='12' y1='8' x2='12' y2='12'/%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'/%3E%3C/svg%3E") center/contain no-repeat} /* Amber helper banner under the map — mirrors the home picker's .map-instruction. */ .addr-map__hint{margin:10px;padding:10px 12px;background:var(--warning-soft,#fff8e1);color:var(--text-secondary,#555);border-radius:var(--radius-md,10px);font-size:13px;line-height:1.4} /* The bottom-of-map states use display:flex, which (as an author rule) overrides the UA [hidden]{display:none}. Add explicit element-scoped [hidden] rules so toggling the `hidden` attribute actually hides them — matching the codebase convention. */ .addr-map__info[hidden],.addr-svc-error[hidden],.addr-outlet-card[hidden]{display:none} /* Resolved-location strip BELOW the map (mirrors home's #homeAddrMapInfo, not an overlay): takes the hint's slot once geocoded, so it never covers the map's locate pill. */ .addr-map__info{display:flex;align-items:flex-start;gap:var(--space-2,8px);padding:var(--space-3,12px) var(--space-4,16px);background:var(--bg-canvas,#fafafa);border-top:1px solid var(--border-subtle,#eee)} .addr-map__info svg{flex-shrink:0;color:var(--brand);margin-top:1px} .addr-map__info-text{min-width:0} .addr-map__info-loc{margin:0;font-size:.9rem;font-weight:700;color:var(--text-primary,#111)} .addr-map__info-full{margin:2px 0 0;font-size:.78rem;color:var(--text-secondary,#666);line-height:1.4} /* Not-serviceable + no nearby outlet — amber notice (CI3 "Location not serviceable"). */ .addr-svc-error{position:absolute;bottom:10px;left:8px;right:8px;background:transparent;color:var(--warning,#F59E0B);padding:var(--space-2,8px);text-align:center;font-size:.85rem;font-weight:600;z-index:401;display:flex;flex-direction:column;align-items:center;gap:4px;line-height:1.4;pointer-events:none} .addr-svc-error svg{color:var(--warning,#F59E0B)} .addr-outlet-card{position:absolute;bottom:8px;left:8px;right:8px;background:var(--bg-surface,#fff);border-radius:var(--radius-md,10px);padding:var(--space-3,12px);box-shadow:var(--shadow-md);display:flex;flex-direction:column;gap:var(--space-2,8px);z-index:402} .addr-outlet-card__info{display:flex;flex-direction:column;gap:4px} .addr-outlet-card__loc,.addr-outlet-card__hours{margin:0;font-size:.8rem;color:var(--text-primary,#333);display:flex;align-items:center;gap:.3rem} .addr-outlet-card__loc svg,.addr-outlet-card__hours svg{flex-shrink:0;color:var(--brand)} .addr-form-panel{overflow-y:auto;padding:var(--space-4,16px);display:flex;flex-direction:column;gap:var(--space-3,12px)} .addr-form-panel__title{margin:0;font-size:.95rem;font-weight:700;color:var(--text-primary,#111)} /* "SAVE ADDRESS AS" eyebrow above the type pills — mirrors the home picker's .location-hd */ .addr-type-label{margin:0;font-size:12px;font-weight:700;letter-spacing:.5px;color:var(--text-secondary,#888)} .addr-cross{background:none;border:none;padding:0;line-height:0;cursor:pointer;transition:transform .15s ease} .addr-cross:active{transform:rotate(90deg) scale(.92)} .addr-type-chips{display:flex;gap:var(--space-2,8px);flex-wrap:wrap} /* Match the home address picker's type pills: comfortable size + brand active state (base .chip is small and has no styled active state). Scoped to address chips only. */ .addr-type-chips .chip{padding:6px 14px;font-size:13px} .addr-type-chips .chip--active{border-color:var(--brand);background:var(--brand-soft,rgba(var(--brand-rgb,0,123,255),.08));color:var(--brand);font-weight:600} .addr-req{color:var(--danger,#e63946)} /* Highlighted not-serviceable / validation notice above the Save button. */ .addr-form-error{margin:0 0 var(--space-2,8px);font-size:.82rem;font-weight:700;color:var(--danger,#e63946);text-align:center;display:flex;align-items:center;justify-content:center;gap:6px;padding:9px 12px;border-radius:var(--radius-md,10px);background:color-mix(in srgb,var(--danger,#e63946) 10%,#fff);border:1px solid color-mix(in srgb,var(--danger,#e63946) 30%,#fff)} .addr-form-error[hidden]{display:none} .addr-form-error::before{content:"";flex-shrink:0;width:16px;height:16px;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='12' y1='8' x2='12' y2='12'/%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='12' y1='8' x2='12' y2='12'/%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'/%3E%3C/svg%3E") center/contain no-repeat} /* Disabled Save Address CTA still reads as a button (solid muted fill), not plain text. */ #saveNewAddressBtn:disabled,#saveNewAddressBtn[disabled]{opacity:1;background:color-mix(in srgb,var(--text-2,#555770) 45%,#fff);color:#fff;cursor:not-allowed;pointer-events:none;box-shadow:none} /* Desktop: the form panel scrolls (overflow-y:auto), so pin Save Address to its bottom instead of letting it scroll out of view (mobile pins it via the is-addr-form rule). */ @media(min-width:768px){ /* Bottom padding gives the sticky button a surface-colored gutter so scrolled content doesn't peek beneath it; the button keeps its own brand background. */ .addr-form-panel{padding-bottom:var(--space-3,12px)} .addr-form-panel #saveNewAddressBtn{position:sticky;bottom:0;margin-top:auto} } /* ── Mobile two-screen chrome (map screen / form screen) — mirrors the home picker. Hidden on desktop, where both columns show side-by-side under one sheet header. ── */ .addr-mhead{display:none;align-items:center;gap:var(--space-2,8px);padding:14px 16px;border-bottom:1px solid var(--border-subtle,#eee);background:var(--bg-surface,#fff)} .addr-mhead__title{font-size:1.05rem;font-weight:700;color:var(--text-primary,#111)} .addr-mhead--map{justify-content:space-between} .addr-mhead--map .addr-mhead__title{flex:1;min-width:0} .addr-mhead--form{position:relative;justify-content:center} .addr-mhead--form .addr-mhead__back{position:absolute;left:16px} .addr-mhead__back{background:none;border:1px solid var(--border-subtle,#ECEAE6);border-radius:50%;width:40px;height:40px;display:inline-flex;align-items:center;justify-content:center;color:var(--text-primary,#111);flex-shrink:0;cursor:pointer} /* Confirmed-location card at the top of the form screen (light strip, brand pin). */ .addr-form-info{display:none;align-items:flex-start;gap:var(--space-2,8px);padding:var(--space-3,12px) var(--space-4,16px);background:var(--bg-canvas,#fafafa);border-bottom:1px solid var(--border-subtle,#eee)} .addr-form-info[hidden]{display:none} .addr-form-info svg{flex-shrink:0;color:var(--brand);margin-top:1px} .addr-form-info__loc{margin:0;font-size:.95rem;font-weight:700;color:var(--text-primary,#111)} .addr-form-info__full{margin:2px 0 0;font-size:.8rem;color:var(--text-secondary,#666);line-height:1.4} .addr-map-pin{width:24px;height:36px;background:var(--brand,#e53935);border-radius:50% 50% 50% 0;transform:rotate(-45deg);border:3px solid #fff;box-shadow:var(--shadow-sm)} /* Green teardrop pin (Leaflet divIcon) — unified with the home address picker. */ .addr-map-pin-wrap{filter:drop-shadow(0 3px 3px rgba(0,0,0,.3));background:none;border:none} .addr-map-pin-wrap svg{display:block} @media(max-width:767px){ /* Full-screen two-step swap (map screen ⇄ form screen), like the home picker. The single sheet header is replaced by a per-screen .addr-mhead. */ #addAddModal .popup-sheet__header{display:none} /* Explicit height (not just max-height): the inner panels are flex:1 / the map canvas is absolutely positioned, so without a definite sheet height the whole flex chain collapses to zero and nothing renders. */ .popup-sheet--map{width:100%;max-width:100%;border-radius:var(--radius-lg,16px) var(--radius-lg,16px) 0 0;height:92dvh;max-height:92dvh;display:flex;flex-direction:column} .addr-map-layout{grid-template-columns:1fr;height:auto;flex:1;min-height:0;display:flex;flex-direction:column} .addr-mhead{display:flex} /* MAP STEP (default): map fills, sticky Confirm button at the bottom; form hidden. */ .addr-map-panel{height:auto;flex:1;min-height:0;border-right:none} .addr-form-panel{display:none} .addr-map__mobile-confirm{display:block;margin:var(--space-3,12px)} /* The Confirm button no longer overlaps the map, so the on-map error / outlet overlays sit at the very bottom of the map area. */ .addr-svc-error,.addr-outlet-card{bottom:8px} /* FORM STEP: map screen hidden, form fills the sheet and scrolls; Save Address sticks. */ #addAddModal.is-addr-form .addr-map-panel{display:none} #addAddModal.is-addr-form .addr-form-panel{display:flex;flex:1;min-height:0} #addAddModal .addr-form-panel__title{display:none} /* Full-bleed the form-screen header + location card across the padded form panel. */ .addr-mhead--form{margin:calc(var(--space-4,16px) * -1) calc(var(--space-4,16px) * -1) 0} .addr-form-info{display:flex;margin:0 calc(var(--space-4,16px) * -1)} #addAddModal.is-addr-form #saveNewAddressBtn{position:sticky;bottom:0} } /* ── Products Page ── */ .products-cat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 1rem; } @media (min-width: 768px) { .products-cat-grid { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); } } .products-cat-grid .product-card .card-img-top { width: 100%; aspect-ratio: 1/1; height: auto; object-fit: cover; } .product-card-logo-fallback { object-fit: contain !important; padding: .75rem; background: var(--surface-2); } /* .pcat-* styles live in the "Products Category Page" block higher up (single source of truth; the 3-column grid is defined there). */ /* Store picker sheet */ .sp-sheet-header { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.25rem; border-bottom: 1px solid var(--border); } .sp-sheet-title { font-size: 1rem; font-weight: 600; color: var(--text); margin: 0; } .sp-sheet-body { padding: 1rem 1.25rem; overflow-y: auto; max-height: 60vh; } .sp-city-list { display: flex; flex-direction: column; gap: .5rem; } .sp-city-btn { width: 100%; text-align: left; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-sm); padding: .75rem 1rem; font-size: 1rem; color: var(--text); cursor: pointer; } .sp-city-btn:hover { border-color: var(--brand); color: var(--brand); } .sp-outlet-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .5rem; } .sp-outlet-item { display: flex; align-items: center; justify-content: space-between; padding: .75rem 1rem; border: 1px solid var(--border); border-radius: var(--r-sm); cursor: pointer; } .sp-outlet-item:hover { border-color: var(--brand); } .sp-outlet-name { font-size: 1rem; font-weight: 500; color: var(--text); display: block; } .sp-outlet-meta { font-size: .875rem; color: var(--text-2); } .sp-empty, .sp-loading { color: var(--text-2); text-align: center; padding: 1.5rem 0; } .sp-back-btn { background: none; border: none; color: var(--brand); font-size: .875rem; cursor: pointer; padding: 0 0 .5rem; } /* ── Products listing / explore grid (shared: /products + product-detail) ── */ .pdet-explore-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; } @media (min-width: 480px) { .pdet-explore-grid { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 768px) { .pdet-explore-grid { grid-template-columns: repeat(4, 1fr); } } @media (min-width: 1024px) { .pdet-explore-grid { grid-template-columns: repeat(5, 1fr); } } /* /products landing — 6 per row on desktop (CI3 col-md-2), 3 per row on mobile (CI3 col-4). Uses flex + justify-content:center (not grid) so an incomplete final row stays centered. Scoped to /products; product-detail keeps the grid. */ .pdet-explore-grid--6 { display: flex; flex-wrap: wrap; justify-content: center; } .pdet-explore-grid--6 > .pdet-explore-card { flex: 0 0 calc((100% - 2rem) / 3); } @media (min-width: 768px) { .pdet-explore-grid--6 > .pdet-explore-card { flex: 0 0 calc((100% - 5rem) / 6); padding:.5rem; } } /* /products landing — heading + subheading (web_navigation h1/h2_content) */ .products-head { text-align: center; margin-bottom: 1.5rem; } .products-title { font-size: 1.5rem; font-weight: 700; color: var(--text); margin: 0; } .products-subtitle { font-size: 1rem; font-weight: 500; color: var(--text-color); margin: .75rem 0 0; } @media (min-width: 768px) { .products-title { font-size: 1.75rem; } } .pdet-explore-card { display: flex; flex-direction: column; border-radius: var(--r-pill); overflow: hidden; background: var(--surface); border: 1px solid var(--border); text-decoration: none; color: var(--text); box-shadow: var(--shadow-xs); transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease); } .pdet-explore-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); } .pdet-explore-img { width: 100%; aspect-ratio: 1/1; object-fit: cover; display: block; border-radius: var(--r-2); } .pdet-explore-img--logo { object-fit: contain; padding: 1rem; background: var(--surface-2); } .pdet-explore-label { padding: .5rem 0; text-align: center; } .pdet-explore-label span { font-size: 1rem; font-weight: 600; color: var(--text-color); line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* ── Product detail page ── */ .pdet-wrap { max-width: 1100px; margin: 0 auto; } @media (min-width: 1280px) { .pdet-wrap { max-width: 1200px; } .container, .container-lg, .container-md, .container-sm, .container-xl { max-width: 1200px; } } .pdet-layout { display: grid; gap: 2.5rem; align-items: start; } @media (min-width: 768px) { .pdet-layout { grid-template-columns: 440px 1fr; } } .pdet-img-col { display: flex; justify-content: center; } .pdet-img { width: 100%; max-width: 440px; aspect-ratio: 1/1; object-fit: cover; border-radius: var(--r); display: block; } .pdet-img-placeholder { width: 100%; max-width: 440px; aspect-ratio: 1/1; background: var(--surface-2); border-radius: var(--r); display: flex; align-items: center; justify-content: center; } .pdet-info { display: flex; flex-direction: column; gap: .75rem; } .pdet-badges { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; } .pdet-badge { font-size: .75rem; font-weight: 600; padding: 2px 8px; border-radius: var(--r-sm); } .pdet-badge--rec { background: #fff3cd; color: #856404; } .pdet-badge--new { background: #d1e7dd; color: #0a3622; } .pdet-badge--oos { background: #f8d7da; color: #842029; } .pdet-name { font-size: 1.5rem; font-weight: 700; color: var(--text); margin: 0; } .pdet-desc { font-size: .9375rem; color: var(--text-2); margin: 0; line-height: 1.6; } .pdet-price-row { display: flex; align-items: baseline; gap: .75rem; flex-wrap: wrap; } .pdet-price { font-size: 1.5rem; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; } .pdet-mrp { font-size: 1rem; color: var(--text-3); text-decoration: line-through; font-variant-numeric: tabular-nums; } .pdet-saving { font-size: .875rem; color: #198754; font-weight: 600; } .pdet-tags { display: flex; gap: .5rem; flex-wrap: wrap; } .pdet-tag { font-size: .75rem; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-sm); padding: 2px 8px; color: var(--text-2); } .pdet-oos-msg { font-size: .9375rem; color: var(--text-3); margin: 0; } /* Add to cart — solid brand button under the price */ .pdet-add-btn { align-self: flex-start; margin-top: .5rem; background: var(--brand); color: var(--brand-secondary); border: none; border-radius: var(--r-sm); padding: .7rem 2.4rem; font-size: 1rem; font-weight: 700; cursor: pointer; transition: background var(--dur) var(--ease); } .pdet-add-btn:hover { background: var(--brand-hover); } /* Offers — inline within the info column, below the CTA (divider, not a boxed strip) */ .pdet-offers { margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--border); } .pdet-offers-title { font-size: 1.15rem; font-weight: 700; color: var(--text); margin: 0 0 1rem; } .pdet-offer-row { display: flex; align-items: center; gap: .85rem; padding: .4rem 0; } .pdet-offer-icon { flex-shrink: 0; width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--brand); color: var(--brand-secondary); } .pdet-offer-details { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .1rem; } .pdet-offer-discount { font-size: .95rem; font-weight: 700; color: var(--text); } .pdet-offer-code-text { font-size: .85rem; color: var(--text-2); } .pdet-offer-code-text strong { color: var(--text); font-weight: 700; } .pdet-offer-min { font-size: .78rem; color: var(--text-3); } .pdet-offer-chevron { flex-shrink: 0; color: var(--text-3); } /* You May Also Like */ .pdet-related-heading { font-size: 1.125rem; font-weight: 700; color: var(--text); margin-bottom: 1rem; } .pdet-similar-scroll { display: flex; gap: 1rem; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: .5rem; -webkit-overflow-scrolling: touch; } .pdet-similar-scroll::-webkit-scrollbar { height: 4px; } .pdet-similar-scroll::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; } .pdet-similar-card { flex: 0 0 180px; display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); overflow: hidden; scroll-snap-align: start; } .pdet-similar-card-img-link { display: block; } .pdet-similar-card-img { width: 100%; aspect-ratio: 1/1; object-fit: cover; display: block; } .pdet-similar-card-img--logo { object-fit: contain; padding: .75rem; background: var(--surface-2); } .pdet-similar-card-body { padding: .75rem; display: flex; flex-direction: column; gap: .375rem; flex: 1; } .pdet-similar-card-top { display: flex; align-items: center; } .pdet-similar-card-name { font-size: .875rem; font-weight: 600; color: var(--text); text-decoration: none; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .pdet-similar-card-name:hover { color: var(--brand); } .pdet-similar-card-price { font-size: .9375rem; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; } .pdet-similar-card-mrp { font-size: .8125rem; color: var(--text-3); text-decoration: line-through; margin-left: .25rem; } .pdet-similar-view-btn { margin-top: auto; display: inline-block; text-align: center; padding: .375rem .75rem; border: 1.5px solid var(--brand); border-radius: var(--r-sm); color: var(--brand); font-size: .8125rem; font-weight: 600; text-decoration: none; background: transparent; cursor: pointer; transition: background var(--dur) var(--ease), color var(--dur) var(--ease); } .pdet-similar-view-btn:hover { background: var(--brand); color: var(--brand-secondary); } .pdet-extras { display: flex; flex-direction: column; gap: 1.5rem; } .pdet-extras__head { display: flex; align-items: center; gap: 8px; font-size: .9375rem; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; color: var(--text); margin: 0 0 .75rem; } .pdet-extras__head::before { content: ''; display: block; flex: none; width: 3px; height: 18px; border-radius: 2px; background: var(--brand); } /* ── Profile Page (pf-*) ────────────────────────────────────────────────── */ /* Scoped entirely to .pf-* — no impact on home, menu, store-locator, product pages */ .pf-page { min-height: 100vh; background: var(--surface-2); display: flex; align-items: flex-start; justify-content: center; padding: 2rem 1rem 4rem; } .pf-card { background: #fff; border-radius: var(--r-lg); box-shadow: var(--shadow-md); width: 100%; max-width: 480px; overflow: hidden; } .pf-header { display: flex; align-items: center; gap: 1rem; padding: 1.5rem 1.25rem 1.25rem; border-bottom: 1px solid var(--border); } .pf-avatar { width: 56px; height: 56px; border-radius: 50%; background: var(--brand-soft); color: var(--brand); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .pf-user-info { flex: 1; min-width: 0; } .pf-name { font-size: 1rem; font-weight: 700; color: var(--text); margin: 0 0 .2rem; } .pf-email { font-size: .82rem; color: var(--text-3); margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pf-wallet-strip { display: flex; align-items: center; background: linear-gradient(135deg, var(--brand) 0%, color-mix(in srgb, var(--brand) 75%, #000) 100%); padding: 1rem 1.25rem; gap: 0; } .pf-wallet-item { flex: 1; text-align: center; } .pf-wallet-label { display: block; font-size: .72rem; font-weight: 600; color: rgba(255,255,255,.75); text-transform: uppercase; letter-spacing: .04em; margin-bottom: .2rem; } .pf-wallet-val { display: block; font-size: 1.15rem; font-weight: 800; color: #fff; } .pf-wallet-divider { width: 1px; align-self: stretch; background: rgba(255,255,255,.3); margin: 0 .5rem; } .pf-menu { display: flex; flex-direction: column; padding: .5rem 0; } .pf-item { display: flex; align-items: center; gap: .85rem; padding: .9rem 1.25rem; text-decoration: none; color: var(--text); border-bottom: 1px solid var(--border); transition: background var(--dur) var(--ease); } .pf-item:last-child { border-bottom: none; } .pf-item:hover { background: var(--surface-2); } .pf-item-icon { width: 36px; height: 36px; border-radius: 50%; background: var(--surface-2); display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--text-2); } .pf-item--brand .pf-item-icon { background: var(--brand-soft); color: var(--brand); } .pf-item-label { flex: 1; font-size: .9rem; font-weight: 500; } .pf-item--brand .pf-item-label { color: var(--brand); font-weight: 600; } .pf-item-arrow { color: var(--text-3); flex-shrink: 0; } .pf-footer { padding: 1.25rem; border-top: 1px solid var(--border); display: flex; flex-direction: column; align-items: center; gap: .75rem; } .pf-logout-btn { display: flex; align-items: center; gap: .5rem; background: none; border: 1.5px solid var(--border); border-radius: var(--r-sm); padding: .55rem 1.25rem; font-size: .88rem; font-weight: 600; color: var(--text-2); cursor: pointer; transition: all var(--dur) var(--ease); } .pf-logout-btn:hover { border-color: #ef4444; color: #ef4444; background: #fef2f2; } .pf-powered { font-size: .75rem; color: var(--text-3); margin: 0; } .pf-powered strong { color: var(--brand); font-weight: 700; } /* ── Personal Info Sub-page (pf-pi-*) ──────────────────────────────────── */ .pf-pi-header { display: flex; align-items: center; gap: .75rem; padding: 1.1rem 1.25rem; border-bottom: 1px solid var(--border); } .pf-pi-back { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; color: var(--brand); background: var(--brand-soft); flex-shrink: 0; text-decoration: none; } .pf-pi-title { font-size: 1.1rem; font-weight: 700; color: var(--text); margin: 0; } .pf-pi-identity { padding: 1rem 1.25rem .5rem; border-bottom: 1px solid var(--border); } .pf-pi-id-name { font-size: .95rem; font-weight: 600; color: var(--text); margin: 0 0 .15rem; } .pf-pi-id-phone { font-size: .82rem; color: var(--text-3); margin: 0; } .pf-pi-form { padding: 1.25rem; display: flex; flex-direction: column; gap: 1.1rem; } .pf-pi-field { display: flex; flex-direction: column; gap: .4rem; } .pf-pi-label { font-size: .82rem; font-weight: 600; color: var(--text-2); } .pf-pi-optional { font-weight: 400; color: var(--text-3); } .pf-pi-input { width: 100%; padding: .6rem .85rem; border: 1.5px solid var(--border); border-radius: var(--r-sm); font-size: .9rem; color: var(--text); background: var(--surface); transition: border-color var(--dur) var(--ease); outline: none; box-sizing: border-box; } .pf-pi-input:focus { border-color: var(--brand); } .pf-pi-date-wrap { position: relative; display: flex; align-items: center; } .pf-pi-date-wrap .pf-pi-input { padding-right: 2.5rem; } .pf-pi-date-icon { position: absolute; right: .7rem; color: var(--text-3); pointer-events: none; } .pf-pi-input[type="date"]::-webkit-calendar-picker-indicator { opacity: 0; width: 2rem; height: 100%; cursor: pointer; } .pf-pi-radio-row { display: flex; gap: 1.25rem; } .pf-pi-radio { display: flex; align-items: center; gap: .45rem; cursor: pointer; font-size: .9rem; color: var(--text); } .pf-pi-radio input[type="radio"] { display: none; } .pf-pi-radio-box { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--border); flex-shrink: 0; position: relative; transition: border-color var(--dur) var(--ease); } .pf-pi-radio input[type="radio"]:checked ~ .pf-pi-radio-box { border-color: var(--brand); } .pf-pi-radio input[type="radio"]:checked ~ .pf-pi-radio-box::after { content: ''; position: absolute; inset: 3px; border-radius: 50%; background: var(--brand); } .pf-pi-error { font-size: .83rem; color: #dc2626; background: #fef2f2; border: 1px solid #fecaca; border-radius: var(--r-sm); padding: .5rem .75rem; margin: 0; } .pf-pi-success { font-size: .83rem; color: #15803d; background: #f0fdf4; border: 1px solid #bbf7d0; border-radius: var(--r-sm); padding: .5rem .75rem; margin: 0; } .pf-pi-submit { width: 100%; padding: .75rem; background: var(--brand); color: var(--brand-secondary); border: none; border-radius: var(--r-sm); font-size: .95rem; font-weight: 700; cursor: pointer; transition: opacity var(--dur) var(--ease); } .pf-pi-submit:hover { opacity: .88; } .pf-pi-submit:disabled { opacity: .55; cursor: not-allowed; } /* ── Manage Addresses Sub-page (addr-page-* / addr-card-* / addr-form-card-*) */ /* NOTE: .addr-map-*, .co-addr-*, .addr-form-panel are checkout — untouched here */ .addr-page { min-height: 100vh; background: var(--surface-2); padding: 1.5rem 0 4rem; } .addr-page-header { display: flex; align-items: center; gap: .75rem; margin-bottom: 1.25rem; } .addr-back { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; color: var(--brand); background: var(--brand-soft); flex-shrink: 0; text-decoration: none; } .addr-page-title { font-size: 1.15rem; font-weight: 700; color: var(--text); margin: 0; } .addr-add-btn { margin-left: auto; display: flex; align-items: center; gap: .4rem; background: var(--brand); color: var(--brand-secondary); border: none; border-radius: var(--r-sm); padding: .5rem 1rem; font-size: .85rem; font-weight: 600; cursor: pointer; transition: opacity var(--dur) var(--ease); } .addr-add-btn:hover { opacity: .88; } .addr-loading { text-align: center; padding: 2.5rem 1rem; color: var(--text-3); font-size: .9rem; grid-column: 1 / -1; } .addr-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 5rem 1rem; gap: 1.25rem; grid-column: 1 / -1; width: 100%; } .addr-empty__icon { display: flex; } .addr-empty__text { color: var(--text-2); font-size: 1.25rem; font-weight: 700; margin: 0; } .addr-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: .75rem; margin-bottom: 1rem; } @media (max-width: 1199px) { .addr-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 900px) { .addr-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .addr-grid { grid-template-columns: 1fr; } } .addr-card { background: #fff; border: 1px solid var(--border); border-radius: var(--r-md); padding: 1rem 1.1rem; display: flex; flex-direction: column; gap: .5rem; } .addr-card-text { flex: 1; } .addr-card-tag { display: inline-flex; align-self: flex-start; align-items: center; gap: .35rem; font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--brand); background: var(--brand-soft); border-radius: var(--r-full); padding: .2rem .65rem; margin-bottom: .55rem; } .addr-card-text { font-size: .86rem; color: var(--text-2); margin: 0 0 .65rem; line-height: 1.5; } .addr-card-actions { display: flex; gap: .5rem; } .addr-edit-btn, .addr-del-btn { display: inline-flex; align-items: center; gap: .35rem; padding: .35rem .7rem; font-size: .78rem; font-weight: 600; border-radius: var(--r-sm); cursor: pointer; transition: all var(--dur) var(--ease); border: 1.5px solid var(--border); background: var(--surface-2); color: var(--text-2); } .addr-edit-btn:hover { border-color: var(--brand); color: var(--brand); background: var(--brand-soft); } .addr-del-btn:hover { border-color: #ef4444; color: #ef4444; background: #fef2f2; } .addr-form-title { font-size: 1rem; font-weight: 700; color: var(--text); margin: 0 0 1.1rem; } .addr-field { display: flex; flex-direction: column; gap: .35rem; margin-bottom: .9rem; } .addr-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; } .addr-label { font-size: .8rem; font-weight: 600; color: var(--text-2); } .addr-input { width: 100%; padding: .6rem .85rem; border: 1.5px solid var(--border); border-radius: var(--r-sm); font-size: .88rem; color: var(--text); background: var(--surface); outline: none; transition: border-color var(--dur) var(--ease); box-sizing: border-box; } .addr-input:focus { border-color: var(--brand); } .addr-type-row { display: flex; gap: .6rem; flex-wrap: wrap; } .addr-type-chip { display: inline-flex; align-items: center; gap: .35rem; padding: .38rem .9rem; font-size: .82rem; font-weight: 600; border: 1.5px solid var(--border); border-radius: var(--r-full); cursor: pointer; color: var(--text-2); transition: all var(--dur) var(--ease); } .addr-type-chip:has(input:checked) { border-color: var(--brand); background: var(--brand-soft); color: var(--brand); } .addr-type-chip input { display: none; } .addr-error { font-size: .83rem; color: #dc2626; background: #fef2f2; border: 1px solid #fecaca; border-radius: var(--r-sm); padding: .5rem .75rem; margin: 0 0 .75rem; } .addr-form-actions { display: flex; gap: .75rem; justify-content: flex-end; margin-top: .5rem; } .addr-cancel-btn { padding: .6rem 1.2rem; background: var(--surface-2); border: 1.5px solid var(--border); border-radius: var(--r-sm); font-size: .88rem; font-weight: 600; color: var(--text-2); cursor: pointer; transition: all var(--dur) var(--ease); } .addr-cancel-btn:hover { border-color: var(--text-2); color: var(--text); } .addr-save-btn { padding: .6rem 1.4rem; background: var(--brand); border: none; border-radius: var(--r-sm); font-size: .88rem; font-weight: 700; color: var(--brand-secondary); cursor: pointer; transition: opacity var(--dur) var(--ease); } .addr-save-btn:hover { opacity: .88; } .addr-save-btn:disabled { opacity: .55; cursor: not-allowed; } .pdet-similar-view-btn:hover { background: var(--brand); color: var(--brand-secondary); } /* ═══════════════════════════════════════════════════════════════════════════ SUBSCRIPTION PAGES ═══════════════════════════════════════════════════════════════════════════ */ .sub-page { padding: var(--space-4) var(--space-3); background: var(--bg-canvas); min-height: 60vh; } .sub-page { max-width: 1180px; margin: 0 auto; padding: 1rem 1rem 3rem; } .sub-page__layout { display: grid; grid-template-columns: 340px 1fr; gap: 1.5rem; align-items: flex-start; } .sub-page__sidebar { position: sticky; top: 90px; align-self: start; max-height: calc(100vh - 110px); overflow-y: auto; } .sub-page__banner { width: 100%; border-radius: var(--radius-lg); overflow: hidden; background: var(--bg-canvas); } .sub-page__banner img { width: 100%; height: auto; display: block; } .sub-page__main { min-width: 0; } @media (max-width: 900px) { .sub-page__layout { grid-template-columns: 1fr; } .sub-page__sidebar { position: static; max-height: none; overflow: visible; } .sub-page__banner img { max-height: 280px; object-fit: cover; } } .sub-tabs { display: flex; background: #F9F9F9; border-radius: 50px; padding: 0; margin-bottom: 1rem; box-shadow: 0 0 3px rgba(0,0,0,.1); width: 100%; gap: 0; } .sub-tabs__btn { flex: 1; padding: 8px 16px; background: transparent; border: 1px solid transparent; border-radius: 50px; font-size: .875rem; font-weight: 300; color: #7a7a7a; cursor: pointer; transition: all .2s; white-space: nowrap; text-align: center; } .sub-tabs__btn--active { background: #fff; color: #000; font-weight: 700; border: 1px solid var(--brand); } @media (max-width: 767px) { .sub-tabs { width: 100%; } .sub-tabs__btn { flex: 1; text-align: center; } .pdet-explore-card{ padding: .5rem; } .pdet-explore-label span{ font-size: .9rem; } .pdet-explore-label{ padding: .4rem 0; } } .sub-panel--hidden { display: none; } /* ── Subscription card grid ─────────────────────────────────── */ .sub-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-4); } @media (max-width: 480px) { .sub-grid { grid-template-columns: 1fr; gap: var(--space-3); } } .sub-card { background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); overflow: hidden; cursor: pointer; transition: box-shadow .2s, transform .15s; display: flex; flex-direction: row; align-items: stretch; } .sub-card:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); } .sub-card__img-wrap { position: relative; width: 110px; flex-shrink: 0; background: var(--bg-canvas); overflow: hidden; } .sub-card__img-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s; } .sub-card:hover .sub-card__img-wrap img { transform: scale(1.05); } .sub-card__no-img { width: 100%; height: 100%; min-height: 90px; display: flex; align-items: center; justify-content: center; color: var(--text-secondary); opacity: .3; } .sub-card__save-chip { position: absolute; top: var(--space-1); left: var(--space-1); background: #16a34a; color: #fff; font-size: .62rem; font-weight: 700; padding: 2px 6px; border-radius: 999px; letter-spacing: .02em; z-index: 1; pointer-events: none; } .sub-card__veg-pos { position: absolute; bottom: var(--space-1); left: var(--space-1); z-index: 1; pointer-events: none; } .sub-card__content { padding: var(--space-3); display: flex; flex-direction: column; flex: 1; min-width: 0; gap: var(--space-1); } .sub-card__name { font-size: .875rem; font-weight: 700; color: var(--text-primary); margin: 0; line-height: 1.3; } .sub-card__pricing { display: flex; align-items: baseline; gap: var(--space-2); flex-wrap: wrap; } .sub-card__price { font-size: .95rem; font-weight: 700; color: var(--text-primary); font-variant-numeric: tabular-nums; } .sub-card__mrp { font-size: .75rem; color: var(--text-secondary); text-decoration: line-through; font-variant-numeric: tabular-nums; } .sub-card__freq { font-size: .7rem; color: var(--text-secondary); } .sub-card__subscribe { margin-top: auto; align-self: flex-start; font-size: .8rem; padding: var(--space-1) var(--space-3); } .sub-active-card { background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); padding: var(--space-4); cursor: pointer; transition: box-shadow .2s; margin-bottom: var(--space-3); } .sub-active-card:hover,.sub-active-card:focus { box-shadow: var(--shadow-md); outline: 2px solid var(--brand); outline-offset: 2px; } .sub-active-card__header { display: flex; gap: var(--space-3); align-items: flex-start; margin-bottom: var(--space-3); } .sub-active-card__image { width: 56px; height: 56px; object-fit: cover; border-radius: var(--radius-md); flex-shrink: 0; } .sub-active-card__info { flex: 1; min-width: 0; } .sub-active-card__status { flex-shrink: 0; } .sub-active-card__pricing { margin-bottom: var(--space-2); } .sub-active-card__progress .caption { color: var(--text-secondary); } .sub-progress { height: 8px; background: var(--bg-canvas); border-radius: 999px; overflow: hidden; margin-bottom: var(--space-1); } .sub-progress__bar { height: 100%; background: var(--brand); border-radius: 999px; transition: width .3s; } .sub-saving { display: inline-block; padding: 2px 8px; background: #f0fff4; color: #15803d; border-radius: var(--radius-sm); font-size: .8rem; font-weight: 600; } .sub-empty { text-align: center; padding: var(--space-12) var(--space-4); color: var(--text-secondary); } .sub-empty svg { margin-bottom: var(--space-4); opacity: .45; } .sub-empty__title { font-size: 1.1rem; font-weight: 700; color: var(--text-primary); margin-bottom: var(--space-2); } .sub-empty__sub { font-size: .9rem; } .sub-loading { display: flex; flex-direction: column; align-items: center; padding: var(--space-8) var(--space-4); color: var(--text-secondary); gap: var(--space-3); } .sub-loading__spinner { width: 28px; height: 28px; border: 3px solid var(--border-subtle); border-top-color: var(--brand); border-radius: 50%; animation: sub-spin .7s linear infinite; flex-shrink: 0; } @keyframes sub-spin { to { transform: rotate(360deg); } } /* ── Subscribe config modal ─────────────────────────────────── */ .sub-modal__hero { margin: -.9rem -.9rem 0; } .sub-modal__hero img { width: 100%; height: 180px; object-fit: cover; display: block; } .sub-modal__body { display: flex; flex-direction: column; gap: var(--space-4); padding-top: var(--space-4); } .sub-modal__title-row { display: flex; align-items: center; gap: var(--space-2); } .sub-modal__name { font-size: 1.05rem; font-weight: 700; margin: 0; } .sub-modal__pricing { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; margin-top: var(--space-1); } .sub-modal__price { font-size: 1.1rem; font-weight: 700; color: var(--text-primary); font-variant-numeric: tabular-nums; } .sub-modal__mrp { font-size: .85rem; color: var(--text-secondary); text-decoration: line-through; font-variant-numeric: tabular-nums; } .sub-modal__save-badge { background: #dcfce7; color: #15803d; font-size: .72rem; font-weight: 700; padding: 2px 8px; border-radius: 999px; } .sub-modal__section-label { font-size: .72rem; font-weight: 700; color: var(--text-secondary); text-transform: uppercase; letter-spacing: .07em; margin: 0 0 var(--space-2); } .sub-modal__freq-grid { display: flex; flex-wrap: wrap; gap: var(--space-2); } .sub-modal__freq-opt { display: inline-flex; align-items: center; padding: var(--space-2) var(--space-4); border: 1.5px solid var(--border-subtle); border-radius: 999px; font-size: .85rem; font-weight: 500; cursor: pointer; transition: all .15s; user-select: none; } .sub-modal__freq-opt input { display: none; } .sub-modal__freq-opt--active,.sub-modal__freq-opt:has(input:checked) { border-color: var(--brand); background: var(--brand); color: var(--brand-secondary); font-weight: 600; } .sub-modal__days-grid { display: grid; grid-template-columns: repeat(7, 36px); gap: var(--space-2); } .sub-modal__day-opt { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border: 1.5px solid var(--border-subtle); border-radius: 50%; font-size: .8rem; font-weight: 500; cursor: pointer; transition: all .15s; user-select: none; } .sub-modal__day-opt input { display: none; } .sub-modal__day-opt--active,.sub-modal__day-opt:has(input:checked) { border-color: var(--brand); background: var(--brand); color: var(--brand-secondary); } .sub-modal__qty-row { display: flex; align-items: center; gap: var(--space-3); } .sub-modal__qty-btn { width: 36px; height: 36px; border: 1.5px solid var(--border-subtle); border-radius: 50%; background: none; color: var(--text-primary); font-size: 1.25rem; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all .15s; flex-shrink: 0; } .sub-modal__qty-btn:hover { border-color: var(--brand); color: var(--brand); } .sub-modal__qty-val { min-width: 32px; text-align: center; font-size: 1rem; font-weight: 700; } .sub-edit-card { display: flex; gap: var(--space-3); margin-bottom: var(--space-4); } .sub-edit-card__image { width: 72px; height: 72px; object-fit: cover; border-radius: var(--radius-md); flex-shrink: 0; } .sub-edit-card__info { flex: 1; } .sub-edit-card__title-row { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-1); } .sub-edit-card__pack { font-size: .85rem; color: var(--text-secondary); margin: 0 0 var(--space-1); } .sub-edit-card__pricing { display: flex; gap: var(--space-2); align-items: baseline; } .sub-edit-actions { display: flex; gap: var(--space-2); flex-wrap: wrap; margin-bottom: var(--space-4); } .sub-history__header { display: flex; justify-content: space-between; font-size: .85rem; font-weight: 700; margin-bottom: var(--space-3); } .sub-history__row { display: flex; justify-content: space-between; align-items: center; padding: var(--space-2) 0; border-bottom: 1px solid var(--border-subtle); gap: var(--space-2); } .sub-history__row:last-child { border-bottom: none; } .sub-history__row-left { flex: 1; min-width: 0; } .sub-history__row-left p { margin: 0; font-size: .85rem; } .sub-success-body { display: flex; flex-direction: column; align-items: center; gap: var(--space-4); text-align: center; padding: var(--space-4) 0; } .sub-detail-page { max-width: 600px; margin: 0 auto; padding: var(--space-4); } .sub-detail-page__back { margin-bottom: var(--space-4); } .sub-detail-page__card { overflow: hidden; } .sub-detail-page__image-wrap { width: 100%; max-height: 280px; overflow: hidden; } .sub-detail-page__image { width: 100%; height: 280px; object-fit: cover; display: block; } .sub-detail-page__content { padding: var(--space-5); } .sub-detail-page__desc { color: var(--text-secondary); margin: var(--space-3) 0; } .sub-detail-page__meta { display: flex; gap: var(--space-2); flex-wrap: wrap; margin: var(--space-3) 0; } .sub-detail-page__pricing { display: flex; align-items: baseline; gap: var(--space-3); flex-wrap: wrap; margin: var(--space-3) 0; } .sub-detail-page__terms { margin-top: var(--space-4); font-size: .875rem; } .sub-detail-page__terms summary { cursor: pointer; font-weight: 600; color: var(--text-secondary); } .sub-detail-page__terms p { margin-top: var(--space-2); color: var(--text-secondary); } .sub-checkout { max-width: 1000px; margin: 0 auto; padding: var(--space-4); } .sub-checkout__topnav { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-5); } .sub-checkout__back { display: inline-flex; align-items: center; color: var(--text-secondary); text-decoration: none; } .sub-checkout__title { font-size: 1.1rem; font-weight: 700; margin: 0; } .sub-checkout__layout { display: grid; grid-template-columns: 1fr 360px; gap: var(--space-6); align-items: flex-start; } @media (max-width: 767px) { .sub-checkout__layout { grid-template-columns: 1fr; } } .sub-checkout__section { padding: var(--space-4); margin-bottom: var(--space-4); } .sub-checkout__section-title { font-size: 1rem; font-weight: 700; margin: 0 0 var(--space-4); color: var(--text-primary); } .sub-checkout__addr-selected { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3); background: var(--bg-canvas); border-radius: var(--radius-md); font-size: .875rem; } .sub-checkout__addr-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); } .sub-checkout__addr-btn { display: flex; align-items: flex-start; gap: var(--space-2); width: 100%; padding: var(--space-3); background: var(--bg-canvas); border: 1.5px solid var(--border-subtle); border-radius: var(--radius-md); text-align: left; cursor: pointer; font-size: .875rem; color: var(--text-primary); transition: border-color .15s; } .sub-checkout__addr-btn[aria-pressed="true"],.sub-checkout__addr-btn--selected { border-color: var(--brand); background: #f0f9ff; } .sub-checkout__addr-btn:hover { border-color: var(--brand); } .sub-checkout__add-addr { margin-top: var(--space-3); } .sub-checkout__addr-types { display: flex; gap: var(--space-2); flex-wrap: wrap; } .sub-checkout__addr-type { display: inline-flex; align-items: center; gap: var(--space-1); padding: var(--space-2) var(--space-3); border: 1.5px solid var(--border-subtle); border-radius: 999px; font-size: .875rem; cursor: pointer; transition: all .15s; } .sub-checkout__addr-type:has(input:checked) { border-color: var(--brand); background: var(--brand); color: var(--brand-secondary); } .sub-checkout__addr-type input { display: none; } .sub-checkout__items { list-style: none; margin: 0 0 var(--space-3); padding: 0; } .sub-checkout__item { display: flex; justify-content: space-between; padding: var(--space-2) 0; font-size: .9rem; } .sub-checkout__totals { margin: 0; } .sub-checkout__total-row { display: flex; justify-content: space-between; padding: var(--space-2) 0; font-size: .9rem; color: var(--text-secondary); } .sub-checkout__total-row--grand { font-size: 1rem; font-weight: 700; color: var(--text-primary); border-top: 1px solid var(--border-subtle); padding-top: var(--space-3); margin-top: var(--space-2); } .sub-checkout__error { padding: var(--space-3); background: #fef2f2; border: 1px solid #fecaca; border-radius: var(--radius-sm); color: #dc2626; font-size: .875rem; margin-top: var(--space-3); } /* ── scard (subscription listing cards) ─────────────────────────────────────── */ .scard-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; } @media (max-width: 600px) { .scard-grid { grid-template-columns: 1fr; } } .scard { background: #fff; border: 1px solid #e6e6e6; border-radius: 15px; overflow: hidden; box-shadow: 0 3px 8px rgba(0,0,0,.08); transition: box-shadow .15s, transform .15s; } .scard:hover { box-shadow: 0 6px 16px rgba(0,0,0,.10); transform: translateY(-1px); } .scard__main { display: flex; gap: .75rem; padding: 12px; align-items: stretch; } .scard__left { flex: 0 0 60%; max-width: 60%; min-width: 0; display: flex; flex-direction: column; justify-content: space-between; gap: .65rem; } .scard__right { flex: 0 0 40%; display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative; flex-shrink: 0; } .scard__title-row { display: flex; align-items: center; gap: .4rem; } .scard__name { font-size: 15px; font-weight: 600; color: #1a1a1a; margin: 0; line-height: 1.3; } .scard__start-badge { display: inline-block; font-size: 13px; font-weight: 600; color: #333; padding: 2px 8px; border-radius: 10px; width: fit-content; position: relative; z-index: 0; } .scard__start-badge::before { content: ""; position: absolute; inset: 0; background-color: var(--brand); opacity: .2; border-radius: 10px; z-index: -1; } .scard__pricing { display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap; } .scard__mrp { font-size: 13px; color: #999; text-decoration: line-through; font-variant-numeric: tabular-nums; } .scard__sp { font-size: 14px; font-weight: 600; color: #333; font-variant-numeric: tabular-nums; } .scard__img { max-height: 120px; width: auto; max-width: 100%; object-fit: contain; border-radius: 20px; box-shadow: 0 0 4px rgba(0,0,0,.12); display: block; } .scard__img--placeholder { width: 110px; height: 110px; background: var(--bg-canvas); border-radius: 20px; display: flex; align-items: center; justify-content: center; color: var(--text-secondary); opacity: .35; } .scard__view-btn { position: absolute; bottom: -10px; left: 50%; transform: translateX(-50%); padding: 3px 14px; font-size: 12px; font-weight: 500; color: #333; background: #fff; border: 1px solid #333; border-radius: 8px; min-width: 72px; text-align: center; } .scard__footer { padding: 6px; font-size: .9rem; font-weight: 400; color: #3dbb4c; background: #F2FFE9; text-align: center; margin-top: 2px; } .scard--in-cart { border-color: var(--brand); } .scard--in-cart .scard__view-btn { display: none; } .scard__qty { position: absolute; bottom: -10px; left: 50%; transform: translateX(-50%); display: inline-flex; align-items: center; gap: .25rem; padding: 2px; border: 1.5px solid var(--brand); border-radius: 999px; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.1); } .scard__qty-btn { width: 24px; height: 24px; border: none; background: transparent; color: var(--brand); font-size: 1rem; line-height: 1; cursor: pointer; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; transition: background .15s; } .scard__qty-btn:hover { background: color-mix(in srgb, var(--brand) 12%, transparent); } .scard__qty-btn[disabled] { opacity: .4; cursor: not-allowed; } .scard__qty-val { min-width: 22px; text-align: center; font-size: .85rem; font-weight: 700; color: var(--text-primary); font-variant-numeric: tabular-nums; } /* ── sv-page (subscription view page) ───────────────────────────────────────── */ .sv-page { max-width: 960px; margin: 0 auto; padding: 1rem 1rem 3rem; } .sv-page__back { display: inline-flex; align-items: center; gap: .4rem; margin-bottom: 1rem; } .sv-page__layout { display: grid; grid-template-columns: 2fr 3fr; gap: 2rem; align-items: flex-start; } @media (max-width: 767px) { .sv-page__layout { grid-template-columns: 1fr; } } .sv-page__hero { width: 100%; aspect-ratio: 4/3; overflow: hidden; border-radius: var(--radius-lg); background: var(--bg-canvas); margin-bottom: 1rem; } .sv-page__hero img { width: 100%; height: 100%; object-fit: cover; display: block; } .sv-page__hero--placeholder { display: flex; align-items: center; justify-content: center; color: var(--text-secondary); opacity: .35; } .sv-page__title-row { display: flex; align-items: center; gap: .5rem; margin-bottom: .5rem; } .sv-page__name { font-size: 1.15rem; font-weight: 700; color: var(--text-primary); margin: 0; } .sv-page__desc { font-size: .875rem; color: var(--text-secondary); margin: .5rem 0 0; line-height: 1.6; } .sv-page__terms { margin-top: 1rem; font-size: .875rem; } .sv-page__terms summary { cursor: pointer; font-weight: 600; color: var(--text-secondary); } .sv-page__terms p { margin-top: .5rem; color: var(--text-secondary); } .sv-config { border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); background: var(--bg-surface); overflow: hidden; position: sticky; top: 1rem; } .sv-config__header { display: flex; align-items: center; justify-content: space-between; padding: .875rem 1rem; gap: .5rem; border-bottom: 1px solid var(--border-subtle); } .sv-config__name { font-size: .925rem; font-weight: 700; color: var(--text-primary); flex: 1; min-width: 0; } .sv-config__pricing { display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap; padding: .625rem 1rem; border-bottom: 1px solid var(--border-subtle); } .sv-config__mrp { font-size: .8rem; color: var(--text-secondary); font-variant-numeric: tabular-nums; } .sv-config__sp { font-size: 1.05rem; font-weight: 700; color: var(--text-primary); font-variant-numeric: tabular-nums; } .sv-config__save-badge { font-size: .7rem; font-weight: 700; background: #dcfce7; color: #15803d; padding: 2px 8px; border-radius: 999px; } .sv-config__cta { display: flex; align-items: center; justify-content: space-between; padding: .75rem 1rem; background: #1a1a2e; gap: .75rem; } .sv-config__cta-total { display: flex; flex-direction: column; } .sv-config__cta-label { font-size: .68rem; color: rgba(255,255,255,.6); text-transform: uppercase; letter-spacing: .06em; } .sv-config__cta-amount { font-size: 1.1rem; font-weight: 700; color: #fff; font-variant-numeric: tabular-nums; } /* ── Banner pair (viewType 1: 2-up side-by-side) ── */ .banner-pair { display: flex; gap: .75rem; } .banner-pair__item { flex: 1 1 0; min-width: 0; display: block; overflow: hidden; border-radius: var(--r-lg); } .banner-pair__item img { width: 100%; aspect-ratio: 16/9; object-fit: cover; display: block; } @media (max-width: 767px) { .banner-pair { flex-direction: column; } } /* ── Horizontal banners (viewType 23: stacked full-width) ── */ .hbanner-item { display: block; width: 100%; } .hbanner-item img { width: 100%; height: auto; display: block; } /* ── Full-width banner with title overlay (viewType 19) ── */ .fwb-wrap { position: relative; } .fwb-overlay { position: absolute; bottom: 2rem; left: 50%; transform: translateX(-50%); text-align: center; z-index: 5; width: 90%; max-width: 600px; } .fwb-overlay__title { color: #fff; font-size: var(--fs-2xl); font-weight: var(--fw-bold); text-shadow: 0 2px 8px rgba(0,0,0,.55); margin-bottom: .5rem; } .fwb-overlay__sub { color: rgba(255,255,255,.9); font-size: var(--fs-base); text-shadow: 0 1px 4px rgba(0,0,0,.5); margin-bottom: 1rem; } @media (max-width: 767px) { .fwb-overlay { bottom: 1rem; } .fwb-overlay__title { font-size: var(--fs-xl); } } .sv-config__add-btn { flex-shrink: 0; } .sv-config__body { padding: 1rem; display: flex; flex-direction: column; gap: .875rem; } .sv-field { display: flex; flex-direction: column; gap: .3rem; } .sv-field__label { font-size: .72rem; font-weight: 700; color: var(--text-secondary); text-transform: uppercase; letter-spacing: .07em; } .sv-select { width: 100%; } .sv-date-wrap { position: relative; display: flex; align-items: center; cursor: pointer; } .sv-date-wrap__display { flex: 1; padding: .5rem .875rem; background: var(--bg-canvas); border: 1.5px solid var(--border-subtle); border-radius: var(--radius-md); font-size: .9rem; font-weight: 500; color: var(--text-primary); padding-right: 2.5rem; } .sv-date-wrap__input { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; } .sv-date-wrap__icon { position: absolute; right: .875rem; color: var(--text-secondary); pointer-events: none; flex-shrink: 0; } .sv-days-grid { display: grid; grid-template-columns: repeat(7, 36px); gap: .4rem; } .sv-day-opt { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border: 1.5px solid var(--border-subtle); border-radius: 50%; font-size: .8rem; font-weight: 500; cursor: pointer; transition: all .15s; user-select: none; } .sv-day-opt input { display: none; } .sv-day-opt--active,.sv-day-opt:has(input:checked) { border-color: var(--brand); background: var(--brand); color: var(--brand-secondary); } .sv-qty-row { display: flex; align-items: center; gap: .5rem; flex-shrink: 0; } .sv-qty-btn { width: 30px; height: 30px; border: 1.5px solid var(--border-subtle); border-radius: 50%; background: none; color: var(--text-primary); font-size: 1.1rem; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all .15s; } .sv-qty-btn:hover { border-color: var(--brand); color: var(--brand); } .sv-qty-val { min-width: 24px; text-align: center; font-size: .95rem; font-weight: 700; } .sub-active-card--cancelled { opacity: .75; cursor: default; } .sub-active-card--cancelled:hover,.sub-active-card--cancelled:focus { box-shadow: none; outline: none; } /* .cloud-brand-pill rules live in public/assets/css/cloud-brand-pill.css */ /* Floating subscription cart (listing page pending-cart indicator) */ .sub-floating-cart { position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 80; display: inline-flex; align-items: center; gap: .75rem; padding: .65rem .9rem .65rem .75rem; background: var(--brand); color: var(--brand-secondary); text-decoration: none; border-radius: 999px; box-shadow: 0 6px 20px rgba(0,0,0,.18); transition: transform .15s, box-shadow .15s; } .sub-floating-cart:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(0,0,0,.22); } .sub-floating-cart__icon { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; background: rgba(255,255,255,.18); border-radius: 50%; color: #fff; } .sub-floating-cart__badge { position: absolute; top: -4px; right: -4px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: #fff; color: var(--brand); font-size: .7rem; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; } .sub-floating-cart__text { display: flex; flex-direction: column; line-height: 1.1; } .sub-floating-cart__label { font-size: .72rem; opacity: .85; text-transform: uppercase; letter-spacing: .04em; } .sub-floating-cart__total { font-size: .95rem; font-weight: 700; font-variant-numeric: tabular-nums; } .sub-floating-cart__arrow { color: #fff; flex-shrink: 0; } @media (max-width: 600px) { .sub-floating-cart { right: 1rem; bottom: 1rem; padding: .55rem .8rem .55rem .65rem; gap: .55rem; } .sub-floating-cart__icon { width: 28px; height: 28px; } .sub-floating-cart__total { font-size: .85rem; } } /* ── Subscription Checkout (CI3-style cart page) ─────────────────────────── */ .sub-checkout { max-width: 1120px; margin: 0 auto; padding: 1rem 1rem 3rem; } .sub-checkout__layout { display: grid; grid-template-columns: 1fr 360px; gap: 1.25rem; align-items: flex-start; } @media (max-width: 900px) { .sub-checkout__layout { grid-template-columns: 1fr; } } .sub-checkout__col-main { display: flex; flex-direction: column; gap: 1.25rem; } .sub-checkout__col-side { display: flex; flex-direction: column; gap: 1.25rem; position: sticky; top: 1rem; } @media (max-width: 900px) { .sub-checkout__col-side { position: static; } } /* Header card with back + brand name + address grid */ .sub-checkout__header-card { padding: 1.25rem 1.25rem 1rem; position: relative; } .sub-checkout__back-circle { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border: 1.5px solid var(--border-subtle); border-radius: 50%; color: var(--text-primary); margin-bottom: .75rem; text-decoration: none; transition: all .15s; } .sub-checkout__back-circle:hover { border-color: var(--brand); color: var(--brand); } .sub-checkout__brand-name { font-size: 1.15rem; font-weight: 700; color: var(--text-primary); margin: 0 0 1rem; } .sub-checkout__addr-grid { display: grid; grid-template-columns: 200px 1fr; gap: .75rem; align-items: stretch; } @media (max-width: 600px) { .sub-checkout__addr-grid { grid-template-columns: 1fr; } } .sub-checkout__add-tile { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .5rem; padding: 1.25rem .75rem; min-height: 90px; border: 1.5px dashed var(--border-subtle); border-radius: var(--radius-lg); background: var(--bg-surface); color: var(--text-secondary); font-size: .9rem; cursor: pointer; transition: all .15s; } .sub-checkout__add-tile:hover { border-color: var(--brand); color: var(--brand); } .sub-checkout__add-tile svg { color: var(--text-secondary); } .sub-checkout__addr-rail { display: flex; gap: .75rem; overflow-x: auto; align-items: stretch; padding-bottom: .25rem; } .sub-checkout__addr-loading { width: 100%; padding: 1rem; } .sub-checkout__addr-tile { flex-shrink: 0; width: 230px; padding: .75rem 1rem; border: 1.5px solid var(--border-subtle); border-radius: var(--radius-lg); background: var(--bg-surface); cursor: pointer; transition: all .15s; display: flex; flex-direction: column; gap: .35rem; } .sub-checkout__addr-tile:hover { border-color: var(--brand); } .sub-checkout__addr-tile--active { border-color: var(--brand); background: color-mix(in srgb, var(--brand) 6%, transparent); } .sub-checkout__addr-tile-head { display: flex; align-items: center; justify-content: space-between; } .sub-checkout__addr-type-tag { display: inline-flex; align-items: center; gap: .25rem; font-size: .72rem; font-weight: 600; color: var(--brand); padding: 2px 8px; border: 1px solid var(--brand); border-radius: 999px; line-height: 1.4; } .sub-checkout__addr-edit { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; background: var(--bg-canvas); color: var(--text-secondary); border: none; cursor: pointer; transition: all .15s; } .sub-checkout__addr-edit:hover { background: var(--brand); color: var(--brand-secondary); } .sub-checkout__addr-text { font-size: .8rem; color: var(--text-primary); margin: 0; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } /* Section heading */ .sub-checkout__section-heading { font-size: 1rem; font-weight: 700; color: var(--text-primary); margin: 0 0 .75rem; } /* Items section */ .sub-checkout__items-section { display: flex; flex-direction: column; } .sub-checkout__items-card { padding: 1rem 1.25rem; } .sub-checkout__items-loading { display: flex; flex-direction: column; align-items: center; padding: 1.5rem; gap: .75rem; color: var(--text-secondary); } .sub-checkout__items-empty { text-align: center; padding: 1.5rem; } .sub-checkout__items-empty p { color: var(--text-secondary); margin: 0 0 .75rem; } .sub-checkout__items-list { display: flex; flex-direction: column; gap: .75rem; } .sub-checkout__item { padding: .75rem 0; width: 100%; } .sub-checkout__item + .sub-checkout__item { border-top: 1px solid var(--border-subtle); } .sub-checkout__item-body { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; width: 100%; } .sub-checkout__item-info { flex: 1 1 auto; min-width: 0; } .sub-checkout__item-title { display: flex; align-items: center; gap: .4rem; font-size: .95rem; color: var(--text-primary); margin-bottom: .25rem; } .sub-checkout__item-meta { font-size: .8rem; color: var(--text-secondary); line-height: 1.5; } .sub-checkout__item-pricing { display: flex; flex-direction: column; align-items: flex-end; gap: .25rem; flex-shrink: 0; margin-left: auto; text-align: right; } .sub-checkout__item-mrp { font-size: .78rem; color: var(--text-secondary); text-decoration: line-through; font-variant-numeric: tabular-nums; } .sub-checkout__item-sp { font-size: .95rem; font-weight: 700; color: var(--text-primary); font-variant-numeric: tabular-nums; } .sub-checkout__item-del { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; border: none; background: none; color: #dc2626; cursor: pointer; transition: all .15s; margin-top: .25rem; } .sub-checkout__item-del:hover { background: #fef2f2; } .sub-checkout__items-footer { display: flex; gap: .5rem; flex-wrap: wrap; padding-top: .75rem; margin-top: .75rem; border-top: 1px dashed var(--border-subtle); } .sub-checkout__footer-btn { display: inline-flex; align-items: center; gap: .4rem; padding: .5rem .85rem; font-size: .78rem; font-weight: 500; color: var(--text-secondary); background: var(--bg-canvas); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); cursor: pointer; text-decoration: none; transition: all .15s; } .sub-checkout__footer-btn:hover { border-color: var(--brand); color: var(--brand); } /* Bill section (heading outside card) */ .sub-checkout__bill-section { display: flex; flex-direction: column; gap: .5rem; } .sub-checkout__bill-card { padding: 1.25rem; } .sub-checkout__bill { display: flex; flex-direction: column; gap: .5rem; margin: 0 0 1rem; } .sub-checkout__bill-row { display: flex; justify-content: space-between; align-items: baseline; font-size: .9rem; color: var(--text-primary); } .sub-checkout__bill-row dt, .sub-checkout__bill-row dd { margin: 0; } .sub-checkout__bill-row dd { font-variant-numeric: tabular-nums; color: var(--text-primary); } .sub-checkout__bill-divider { border-top: 1px dashed var(--border-subtle); margin: .5rem 0; } .sub-checkout__bill-row--grand { font-size: 1.02rem; font-weight: 700; color: var(--text-primary); padding-top: .25rem; } .sub-checkout__bill-row--grand dd { font-size: 1.08rem; font-weight: 700; color: var(--text-primary); } .sub-checkout__cta { width: 100%; padding: .85rem 1rem; font-size: .95rem; font-weight: 600; border: none; border-radius: var(--radius-md); cursor: pointer; transition: all .2s; text-align: center; } .sub-checkout__cta--disabled, .sub-checkout__cta[disabled] { background: #fde2e2; color: #d04646; cursor: not-allowed; } .sub-checkout__cta--topup { background: #ffc107; color: #8a5a00; } .sub-checkout__cta--topup:hover { background: #ffb300; } /* uMoney top-up alert (CI3 colors: #fff4e5 bg, #ffc107 border, #8a5a00 text) */ .sub-checkout__umoney-alert { display: flex; align-items: flex-start; gap: .5rem; padding: .75rem .875rem; margin-bottom: .875rem; background: #fff4e5; border: 1px solid #ffc107; border-radius: var(--radius-md); color: #8a5a00; font-size: .875rem; } .sub-checkout__umoney-icon { flex-shrink: 0; margin-top: 2px; color: #8a5a00; } .sub-checkout__umoney-body { flex: 1; min-width: 0; } .sub-checkout__umoney-body strong { display: block; font-size: .9rem; color: #8a5a00; margin-bottom: .25rem; } .sub-checkout__umoney-meta { display: flex; flex-wrap: wrap; gap: .4rem 1rem; font-size: .82rem; } .sub-checkout__umoney-meta b { font-variant-numeric: tabular-nums; } .sub-checkout__umoney-shortfall { font-weight: 600; } /* ── uMoney wallet page ─────────────────────────────────────────────────── */ .umoney-page { max-width: 480px; margin: 0 auto; padding: 1rem 1rem 6rem; } /* Available balance card */ .umoney-balance-card { padding: 1rem 1.25rem 1.25rem; } .umoney-balance-row { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: 1rem; } .umoney-balance-info { flex: 1; min-width: 0; } .umoney-balance-label { font-size: .95rem; font-weight: 700; color: var(--text-primary); margin: 0 0 .25rem; } .umoney-balance-amount { font-size: 1.5rem; font-weight: 700; color: var(--text-primary); margin: 0; font-variant-numeric: tabular-nums; } .umoney-balance-icon { flex-shrink: 0; } /* Add Money Securely CTA */ .umoney-add-btn { display: flex; align-items: center; justify-content: center; gap: .5rem; width: 100%; padding: .75rem 1rem; background: var(--brand); color: var(--brand-secondary); border: none; border-radius: var(--radius-md); font-size: .95rem; font-weight: 600; cursor: pointer; transition: background .15s; } .umoney-add-btn:hover { background: color-mix(in srgb, var(--brand) 90%, black); } .umoney-add-btn svg { color: #fff; } /* Payment history header */ .umoney-history-head { display: flex; align-items: center; justify-content: space-between; margin: 1.5rem 0 1rem; } .umoney-history-title { font-size: 1.05rem; font-weight: 700; color: var(--text-primary); margin: 0; } .umoney-filter-btn { display: inline-flex; align-items: center; gap: .35rem; padding: .35rem .75rem; background: transparent; border: 1px solid var(--border-subtle); border-radius: 999px; font-size: .8rem; color: var(--text-secondary); cursor: pointer; transition: all .15s; } .umoney-filter-btn:hover { border-color: var(--brand); color: var(--brand); } /* History list */ .umoney-history-wrap { min-height: 220px; } .umoney-loading { display: flex; justify-content: center; padding: 2rem; } .umoney-history-list { display: flex; flex-direction: column; gap: .5rem; } .umoney-tx { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding: .75rem 1rem; background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); } .umoney-tx__info { flex: 1; min-width: 0; } .umoney-tx__order { font-size: .9rem; font-weight: 600; color: var(--text-primary); margin-bottom: .15rem; } .umoney-tx__status { font-size: .78rem; font-weight: 500; margin-bottom: .15rem; } .umoney-tx__status--completed { color: #16a34a; } .umoney-tx__status--initiated { color: #ca8a04; } .umoney-tx__status--failed { color: #dc2626; } .umoney-tx__status--refund { color: #2563eb; } .umoney-tx__date { font-size: .75rem; color: var(--text-secondary); } .umoney-tx__amount { font-size: .95rem; font-weight: 700; font-variant-numeric: tabular-nums; flex-shrink: 0; } .umoney-tx__amount--positive { color: #16a34a; } .umoney-tx__amount--negative { color: #dc2626; } /* Empty state */ .umoney-empty { text-align: center; padding: 1.5rem 1rem; } .umoney-empty__art { margin: 0 auto .5rem; display: block; } .umoney-empty__title { font-size: .95rem; font-weight: 600; color: var(--text-primary); margin: 0; } /* Filter modal options */ .umoney-filter-list { display: flex; flex-direction: column; gap: .5rem; border: none; padding: 0; margin: 0 0 1rem; } .umoney-filter-opt { display: flex; align-items: center; gap: .5rem; padding: .65rem .75rem; border: 1.5px solid var(--border-subtle); border-radius: var(--radius-md); font-size: .9rem; cursor: pointer; transition: border-color .15s; } .umoney-filter-opt:has(input:checked) { border-color: var(--brand); background: color-mix(in srgb, var(--brand) 6%, transparent); } .umoney-filter-actions { display: flex; gap: .5rem; justify-content: flex-end; } /* Notes card */ .sub-checkout__notes-card { padding: 1rem 1.25rem; background: var(--bg-canvas); border: 1px solid var(--border-subtle); } .sub-checkout__notes-title { font-size: .9rem; font-weight: 700; color: var(--text-primary); margin: 0 0 .5rem; } .sub-checkout__notes-list { list-style: disc; margin: 0; padding-left: 1.25rem; } .sub-checkout__notes-list li { font-size: .82rem; color: var(--text-secondary); line-height: 1.5; margin-bottom: .35rem; } /* ══════════════════════════════════════════════════ HOME PAGE WIDGET COMPONENTS ══════════════════════════════════════════════════ */ /* ── Full-width banner sections: strip section padding + radius ── */ .section[data-widget="12"], .section[data-widget="15"], .section[data-widget="19"], .section[data-widget="22"] { padding: 0; } /* Collapse the gap between the location info bar and the first home widget. Home structure is: #main-content > .home-bg > .section:first-child, so the selector has to include .home-bg. When the location bar is visible (JS clears its inline display:none) its own padding+border already separates the banner from the header — kill any top space on the first section so they're flush. */ .location-info-bar:not([style*="display:none"]):not([style*="display: none"]) ~ #main-content > .home-bg > .section:first-child, .location-info-bar:not([style*="display:none"]):not([style*="display: none"]) ~ #main-content > .home-bg { margin-top: 0; padding-top: 0; } .section[data-widget="12"] .hero-carousel, .section[data-widget="15"] .hero-carousel, .section[data-widget="19"] .hero-carousel, .section[data-widget="22"] .hero-carousel { border-radius: 0; box-shadow: none; } /* viewType 19 (1200×300) uses 4:1 ratio */ .section[data-widget="19"] .hero-carousel .carousel-item img { aspect-ratio: 4; } /* ── Carousel prev/next controls ────────────────── */ .hero-carousel__control { position: absolute; top: 50%; transform: translateY(-50%); z-index: 10; width: 40px; height: 40px; border: none; border-radius: 50%; background: rgba(0,0,0,.35); color: #fff; font-size: 1.4rem; line-height: 1; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background var(--dur) var(--ease); } .hero-carousel__control:hover { background: rgba(0,0,0,.6); } .hero-carousel__control--prev { left: 1rem; } .hero-carousel__control--next { right: 1rem; } @media (max-width: 767px) { .hero-carousel__control { width: 32px; height: 32px; font-size: 1.1rem; } } /* ── Snap-scroll item width (best sellers, featured) ── */ .snap-scroll__item { width: 220px; } @media (max-width: 767px) { .snap-scroll__item { width: 185px; } } /* ── mc-veg-row / mc-footer (home snap-scroll vertical cards) ── */ .mc-veg-row { display: flex; align-items: center; gap: .3rem; margin: .35rem 0 .15rem; } .mc-veg-row .mc-name { margin: 0; } .mc-footer { display: flex; align-items: baseline; gap: .35rem; margin-top: auto; padding-top: .25rem; } .mc-footer__price { font-weight: 700; font-size: .9rem; color: var(--text); } .mc-footer__mrp { font-size: .74rem; color: var(--text-3); text-decoration: line-through; } /* ── section_header component ──────────────────── Centered variant ships with flanking horizontal lines (CI3 parity — `—— SECTION TITLE ——`). Lines are pseudo-elements on the inner `.section-header__text` span so they hug the heading text and grow to fill the remaining row width. Bumped font-size site-wide for stronger section anchoring; brands can override via their data-theme scoped rules in brand_themes.css if they need a different treatment. */ .section-header { text-align: center; padding: 0 0; } .section-header--start { text-align: left; padding: 0 0 1.5rem; } .section-header__eyebrow { font-size: .8rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--text-3); margin: 0 0 .5rem; } .section-header__title { font-size: clamp(1.6rem, 3.4vw, 2.25rem); font-weight: 700; letter-spacing: -.01em; line-height: 1.2; color: var(--fg-1); margin: 0 0 .5rem; display: flex; align-items: center; justify-content: center; gap: 0.5rem; } .section-header__text { display: inline-flex; align-items: center; gap: 1.25rem; max-width: 100%; } .section-header--center .section-header__text::before, .section-header--center .section-header__text::after { content: ""; flex: 1 1 0; min-width: 40px; max-width: 220px; height: 1px; background: var(--fg-1); } .section-header--start .section-header__title { justify-content: flex-start; } .section-header--start .section-header__text::before, .section-header--start .section-header__text::after { content: none; } .section-header__subtitle { color: var(--text-3); font-size: .98rem; margin: .25rem auto 0; max-width: 560px; } /* ── menu_item component ─────────────────────────── */ .menu-item { display: flex; justify-content: space-between; align-items: flex-start; gap: .75rem; padding: .9rem; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); transition: box-shadow var(--dur) var(--ease); } .menu-item--compact { padding: .65rem; } .menu-item--link { text-decoration: none; color: inherit; cursor: pointer; display: flex; } .menu-item:hover { box-shadow: var(--shadow); } .menu-item > div:first-child { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .3rem; } .menu-item__head { display: flex; align-items: flex-start; gap: .4rem; flex-wrap: wrap; } .menu-item__title { font-size: .92rem; font-weight: 600; margin: 0; line-height: 1.3; color: var(--text); } .menu-item__desc { font-size: .78rem; color: var(--text-3); margin: 0; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .menu-item__meta { display: flex; gap: .4rem; align-items: baseline; font-variant-numeric: tabular-nums; margin-top: auto; padding-top: .25rem; } .menu-item__price { font-size: .9rem; font-weight: 700; color: var(--text); } .menu-item__price--strike { font-size: .76rem; color: var(--text-3); text-decoration: line-through; font-weight: 400; } .menu-item__media { flex-shrink: 0; position: relative; display: flex; align-items: flex-end; justify-content: center; } .menu-item__media img { width: 96px; height: 96px; border-radius: var(--r-sm); object-fit: cover; display: block; } .menu-item--compact .menu-item__media img { width: 80px; height: 80px; } .menu-item__add { position: absolute; bottom: -6px; padding: .3rem .9rem; border-radius: 6px; background: #fff; border: 1.5px solid var(--brand); color: var(--brand); font-weight: 700; font-size: .8rem; letter-spacing: .04em; cursor: pointer; box-shadow: var(--shadow-sm); transition: all var(--dur) var(--ease); white-space: nowrap; } .menu-item__add:hover { background: var(--brand); color: var(--brand-secondary); } @media (max-width: 767px) { .menu-item__media img { width: 80px; height: 80px; } } /* category-tile / category-grid contracts live in home_widgets.css */ /* ── action-grid layout + BEM children ──────────── */ .action-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 1rem; } .action-card__icon { width: 52px; height: 52px; border-radius: 50%; background: var(--brand-soft); color: var(--brand); display: inline-flex; align-items: center; justify-content: center; font-size: 1.25rem; margin: 0 auto .6rem; transition: all var(--dur) var(--ease); } .action-card:hover .action-card__icon { background: var(--brand); color: var(--brand-secondary); } .action-card__label { font-weight: 700; font-size: .88rem; color: var(--text); margin-bottom: .1rem; } .action-card__count { color: var(--text-3); font-size: .74rem; } @media (max-width: 767px) { .action-grid { grid-template-columns: repeat(3, 1fr); gap: .6rem; } } /* ── promo-grid (legacy home page offers; kept for any non-carousel usage) ──── */ .promo-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; } @media (min-width: 560px) { .promo-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 860px) { .promo-grid { grid-template-columns: repeat(3, 1fr); } } /* ── promo-scroll (carousel-style offers) ─────────────────────────── */ .promo-scroll .snap-scroll__item { width: 300px; } .promo-scroll .snap-scroll__item > .promo-card { height: 100%; } @media (max-width: 767px) { .promo-scroll .snap-scroll__item { width: 260px; } } /* ── ac-widget (redesigned actions center) ───────── */ .ac-widget { background: var(--surface); border-radius: var(--r-lg); box-shadow: 0 2px 16px rgba(0,0,0,.08); padding: 1.75rem 2rem; } .ac-widget__header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.5rem; } .ac-widget__heading { font-size: clamp(1.1rem,2.5vw,1.5rem); font-weight: 600; margin: 0 0 .25rem; color: var(--text); } .ac-widget__sub { font-size: .95rem; font-weight: 400; color: var(--text-2); margin: 0; } .ac-widget__outlet-btn { background: var(--brand); color: var(--brand-secondary); border: none; border-radius: var(--r-full); padding: .55rem 1.25rem; font-size: .9rem; font-weight: 600; cursor: pointer; white-space: nowrap; transition: background var(--dur) var(--ease); display: inline-flex; align-items: center; gap: .4rem; } .ac-widget__outlet-btn:hover { background: var(--brand-hover); } .ac-widget__cards { display: flex; gap: 1rem; overflow-x: auto; scrollbar-width: none; padding: .25rem 0; } .ac-widget__cards::-webkit-scrollbar { display: none; } .ac-service-card { flex-shrink: 0; min-width: 130px; background: var(--surface-2); border-radius: var(--r); padding: 1rem .75rem; text-align: center; text-decoration: none; color: inherit; transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease); position: relative; display: flex; flex-direction: column; align-items: center; padding-top: 2.5rem; margin-top: 1.5rem; } .ac-service-card:hover { box-shadow: var(--shadow); transform: translateY(-2px); } .ac-service-card__icon { width: 56px; height: 56px; border-radius: 50%; background: var(--surface); box-shadow: 0 2px 8px rgba(0,0,0,.1); display: flex; align-items: center; justify-content: center; font-size: 1.4rem; color: var(--brand); position: absolute; top: -1.5rem; left: 50%; transform: translateX(-50%); } .ac-service-card__label { font-size: .9rem; font-weight: 700; color: var(--text); margin: .25rem 0 .1rem; } .ac-service-card__sub { font-size: .73rem; color: var(--text-3); } @media (max-width: 767px) { .ac-widget { padding: 1.25rem; } .ac-widget__header { flex-direction: column; align-items: flex-start; gap: .75rem; } .ac-service-card { min-width: 110px; } } /* ── Horizontal Banners Row (view_type 23) ── */ .h-banner-row { display: flex; gap: .75rem; } .h-banner-row__item { flex: 1 1 0; min-width: 0; border-radius: var(--r); overflow: hidden; display: block; } .h-banner-row__item img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; } @media (max-width: 767px) { .h-banner-row { gap: .5rem; } } /* ── Featured Categories Grid (view_type 3 / 36 / 50) ── */ .feat-cat-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1rem; } @media (max-width: 991px) { .feat-cat-grid { grid-template-columns: repeat(4, 1fr); } .container, .container-md, .container-sm { max-width: 100%!important; width: 100% !important; } .site-header .container, .site-footer > .container, .footer-copy > .container { padding-left: 15px; padding-right: 15px; } } @media (max-width: 767px) { .feat-cat-grid { grid-template-columns: repeat(3, 1fr); gap: .75rem; } } @media (max-width: 479px) { .feat-cat-grid { grid-template-columns: repeat(2, 1fr); } } .feat-cat-card { text-decoration: none; color: inherit; border-radius: var(--r); overflow: hidden; background: var(--surface); border: 1px solid var(--border); transition: all var(--dur) var(--ease); display: block; } .feat-cat-card:hover { box-shadow: var(--shadow); border-color: var(--brand); } .feat-cat-card--hidden { display: none; } .feat-cat-grid--expanded .feat-cat-card--hidden { display: block; } .feat-cat-card__img { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; } .feat-cat-card__img--placeholder { background: var(--surface-2); display: flex; align-items: center; justify-content: center; color: var(--text-3); font-size: 2rem; } .feat-cat-card__name { display: block; padding: .5rem .6rem; font-size: .82rem; font-weight: 600; text-align: center; line-height: 1.3; } .feat-cat-more { text-align: center; margin-top: 1.25rem; } /* ── Snap-scroll with prev/next arrows ── */ .snap-scroll-wrap { position: relative; } .snap-nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 5; width: 36px; height: 36px; border-radius: 50%; border: none; background: var(--surface); box-shadow: var(--shadow-md); color: var(--text); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all var(--dur) var(--ease); padding: 0; } .snap-nav:hover { background: var(--brand); color: var(--brand-secondary); } .snap-nav:disabled { opacity: .25; cursor: default; pointer-events: none; } .snap-nav--prev { left: -.9rem; } .snap-nav--next { right: -.9rem; } @media (max-width: 767px) { .snap-nav { display: none; } } /* ── Outlet picker dropdown (actions center) ── */ .ac-outlet-wrap { position: relative; } .ac-outlet-list { position: absolute; top: calc(100% + .4rem); right: 0; min-width: 200px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); box-shadow: var(--shadow-md); list-style: none; margin: 0; padding: .4rem 0; z-index: 50; } .ac-outlet-list li a { display: block; padding: .55rem 1rem; font-size: .88rem; color: var(--text); text-decoration: none; transition: background var(--dur) var(--ease); } .ac-outlet-list li a:hover { background: var(--surface-2); color: var(--brand); } /* ──────────────────────────────────────────────────────────────── Location flow — modal steps, info bar, order-type grid, saved addrs ──────────────────────────────────────────────────────────────── */ .location-flow-step { display: none; } .location-flow-step.active { display: block; } #locationFlowModal .modal-content { border-radius: 16px; overflow: hidden; } /* #locationFlowModal .modal-header { border-bottom: 1px solid var(--border-subtle); } */ /* Modal width — compact by default, expanded only when addressForm step is active (the map needs side-by-side layout). Uses :has() with a JS fallback class below. */ #locationFlowModal .modal-dialog { max-width: 500px; } @media (min-width: 768px) { #locationFlowModal:has(.location-flow-step[data-step="addressForm"].active) .modal-dialog, #locationFlowModal.is-wide .modal-dialog { max-width: 820px; } } /* Address form two-column layout (desktop) */ #locationFlowModal .homeAddressFormModal .addadress-starting { display: flex; } #locationFlowModal .homeAddressFormModal .address-left { width: 100%; max-width: 45%; } #locationFlowModal .homeAddressFormModal .address-right { width: 100%; max-width: 55%; } #locationFlowModal .homeAddressFormModal .address-right .modal-body { max-height: 400px; overflow-y: auto; } #locationFlowModal .homeAddressFormModal .address-right .modal-footer { position: sticky; bottom: 0; background: #fff; } #locationFlowModal .homeAddressFormModal #homeAddressMap { height: 400px; } @media (max-width: 767px) { #locationFlowModal .homeAddressFormModal .addadress-starting { flex-direction: column; } #locationFlowModal .homeAddressFormModal .address-left, #locationFlowModal .homeAddressFormModal .address-right { max-width: 100%; } /* Two-step mobile flow: map first, form after Confirm Location is tapped. The confirmed-location reference (#homeAddrMapInfo) now lives inside the form column under the "Enter Complete Address" header, so the whole map column collapses here. */ #locationFlowModal .homeAddressFormModal .address-right { display: none; } #locationFlowModal .homeAddressFormModal .addadress-starting.is-form-visible .address-left { display: none; } #locationFlowModal .homeAddressFormModal .addadress-starting.is-form-visible .address-right { display: block; } } /* Locality search dropdown */ .locality-results { position: absolute; top: 100%; left: 0; right: 0; z-index: 1050; background: #fff; max-height: 300px; overflow-y: auto; list-style: none; padding: 0; margin: 0; border: 1px solid var(--border-subtle); border-top: none; border-radius: 0 0 8px 8px; box-shadow: 0 4px 12px rgba(0, 0, 0, .1); } .locality-results li { padding: 10px 12px; cursor: pointer; font-size: 14px; display: flex; align-items: center; gap: 8px; } .locality-results li:hover { background: var(--bg-canvas, #f7f7f8); } /* Map outer (address form) */ #locationFlowModal .map-outer { position: relative; } #locationFlowModal .map-search { padding: 8px; width: 95%; margin: auto; } #locationFlowModal .map-search .map-button { position: absolute; right: 18px; top: 50%; transform: translateY(-50%); pointer-events: none; opacity: .6; } #locationFlowModal .map-outer-btn { position: absolute; bottom: 8px; right: 8px; background: #fff; border-radius: 8px; box-shadow: 0 2px 6px rgba(0,0,0,.15); font-size: 13px; } /* Address-type radio chips */ .addr-label { display: inline-flex; align-items: center; padding: 6px 14px; border: 1px solid var(--border-subtle); border-radius: 999px; font-size: 13px; cursor: pointer; user-select: none; background: #fff; } .addr-label.active { border-color: var(--brand); color: var(--brand); background: rgba(var(--brand-primary-rgb), .08); font-weight: 600; } /* Saved addresses list */ .saved--address { display: flex; align-items: center; gap: .75rem; padding: .75rem; border-bottom: 1px solid var(--border-subtle); cursor: pointer; } .saved--address:hover { background: var(--bg-canvas, #f7f7f8); } .saved--address__tag { display: inline-block; font-size: 10px; line-height: 1; font-weight: 600; color: var(--text-primary); border: 1px solid var(--border-subtle); border-radius: 4px; padding: 3px 8px; margin-bottom: 4px; } /* Order type grid */ #orderTypeButtonsContainer{grid-template-columns: 1fr 1fr; display: grid;} .order-type-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); gap: .75rem; } .order-type-card { display: none; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 14px 8px; border: 1px solid var(--border-subtle); border-radius: 10px; cursor: pointer; text-align: center; font-size: 13px; font-weight: 500; background: #fff; transition: border-color .15s, background .15s; } .order-type-card i { font-size: 22px; color: var(--text-primary); } .order-type-card:hover { border-color: var(--brand); } .order-type-card.selected { border-color: var(--brand); background: rgba(var(--brand-primary-rgb), .08); color: var(--brand); } .order-type-card.selected i { color: var(--brand); } /* Location info bar (home page) */ .location-info-bar { position: sticky; top: 0; z-index: 50; display: flex; gap: .75rem; padding: .6rem 1rem; background: var(--bg-surface, #fff); border-bottom: 1px solid var(--border-subtle); flex-wrap: wrap; } .location-info-bar.location-bar-scrolled { box-shadow: 0 1px 6px rgba(0,0,0,.08); } .location-info-bar__cell { display: flex; align-items: center; gap: .35rem; cursor: pointer; font-size: 13px; color: var(--text-primary); padding: 4px 8px; border-radius: 6px; transition: background .15s; } .location-info-bar__cell:hover { background: var(--bg-canvas, #f7f7f8); } .location-info-bar__cell i { font-size: 16px; color: var(--brand); flex-shrink: 0; } .location-info-bar__text { max-width: 200px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .leaflet-left { right: 15px; left: auto !important;} .leaflet-top { bottom: 25px; top: auto !important;} @media (max-width: 767px) { main .container, main .container-fluid, main .container-lg, main .container-md, main .container-sm, main .container-xl, main .container-xxl{ padding-right: 15px!important; padding-left: 15px!important; } .location-info-bar { padding: .5rem .75rem; gap: .4rem; } .location-info-bar__cell { font-size: 12px; padding: 3px 6px; } .location-info-bar__text { max-width: 110px; } } /* Leaflet map fallback in addressForm step */ #homeLeafletMap { height: 388px; width: 100%; } #homeLeafletMap.leaflet-container { background: #e8e8e8; } /* Buttons inside modal */ .btn-brand { background: var(--brand); color: var(--secondary-bg-color); border: none; } .btn-brand:hover { background: var(--brand-hover, var(--brand)); color: var(--secondary-bg-color); } .btn-brand:disabled { opacity: .55; cursor: not-allowed; } /* Step 1 (data-step="location") — CI3-matching visual polish */ #locationFlowModal .location-step-head { display: flex; align-items: flex-start; justify-content: space-between; padding: 1rem 1.25rem .75rem; gap: .75rem; } #locationFlowModal .location-step-title { font-size: 1.125rem; font-weight: 700; margin: 0 0 .15rem; color: var(--text-primary, #1a1a2e); line-height: 1.3; } #locationFlowModal .location-step-subtitle { font-size: .8125rem; color: var(--text-secondary, #6b6f76); margin: 0; line-height: 1.35; } #locationFlowModal .location-close-btn { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; border: none; background: var(--lightest-grey); color: var(--fg-1); font: 700 28px/1 Arial, sans-serif; cursor: pointer; padding: 0; transition: transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out); } #locationFlowModal .location-close-btn:hover { transform: rotate(90deg); box-shadow: var(--shadow-sm); } #locationFlowModal .location-close-btn:active { transform: rotate(90deg) scale(.92); } #locationFlowModal .location-step-body { padding: 0 1.25rem 1.25rem; } #locationFlowModal .location-cta-primary { width: 100%; display: flex; align-items: center; justify-content: center; gap: .5rem; padding: 12px 14px; border: none; border-radius: 10px; background: var(--brand); color: var(--brand-secondary); font-size: 14px; font-weight: 600; cursor: pointer; transition: background .15s; } #locationFlowModal .location-cta-primary i { font-size: 1.1rem; } #locationFlowModal .location-cta-primary:hover { background: var(--brand-primary-600, var(--brand)); } #locationFlowModal .location-or { text-align: center; margin: .75rem 0; font-weight: 700; font-size: 13px; letter-spacing: .5px; color: var(--text-primary, #1a1a2e); } #locationFlowModal .location-cta-secondary { width: 100%; display: flex; align-items: center; justify-content: center; gap: .5rem; padding: 12px 14px; border: none; border-radius: 10px; background: var(--bg-canvas, #f3f3f5); color: var(--text-primary, #1a1a2e); font-size: 14px; font-weight: 500; cursor: pointer; transition: background .15s; } #locationFlowModal .location-cta-secondary i { font-size: 1.05rem; } #locationFlowModal .location-cta-secondary:hover { background: #ebebee; } #locationFlowModal .location-saved-row { display: flex; align-items: center; justify-content: space-between; padding-top: 1rem; font-size: 14px; } #locationFlowModal .location-saved-row__label { display: inline-flex; align-items: center; gap: .4rem; color: var(--text-secondary, #6b6f76); } #locationFlowModal .location-login-btn { padding: .4rem 1.1rem; border: 1px solid var(--border-subtle, #d6d6dc); border-radius: 8px; background: #fff; color: var(--text-primary, #1a1a2e); font-size: 14px; font-weight: 500; cursor: pointer; transition: background .15s; } #locationFlowModal .location-login-btn:hover { background: var(--bg-canvas, #f6f6f8); } /* Step 2 (data-step="savedAddresses") — saved-address card + rows */ #locationFlowModal .saved-card { border: 1px solid var(--border-subtle, #e2e2e8); border-radius: 12px; padding: .9rem 1rem .35rem; } #locationFlowModal .saved-card__head { display: flex; align-items: center; justify-content: space-between; padding-bottom: .65rem; } #locationFlowModal .saved-card__title { margin: 0; font-weight: 700; font-size: 14px; color: var(--text-primary, #1a1a2e); } #locationFlowModal .saved-card__add-btn { display: inline-flex; align-items: center; gap: .35rem; padding: .35rem .75rem; border: 1px solid var(--border-subtle, #d6d6dc); border-radius: 999px; background: #fff; font-size: 13px; font-weight: 500; color: var(--text-primary, #1a1a2e); cursor: pointer; transition: background .15s; } #locationFlowModal .saved-card__add-btn:hover { background: var(--bg-canvas, #f6f6f8); } #locationFlowModal .saved-card__list { max-height: 200px; overflow-y: auto; } #locationFlowModal .saved-addr-row { display: flex; align-items: center; gap: .75rem; padding: .65rem 0; cursor: pointer; border-top: 1px dashed var(--border-subtle, #e2e2e8); } #locationFlowModal .saved-card__list > .saved-addr-row:first-child { border-top: none; } #locationFlowModal .saved-addr-row__icon { flex-shrink: 0; width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; background: var(--bg-canvas, #f3f3f5); border-radius: 8px; color: var(--text-primary, #1a1a2e); font-size: 1rem; } #locationFlowModal .saved-addr-row__body { flex: 1; min-width: 0; } #locationFlowModal .saved-addr-row__tag { display: inline-block; font-size: 10px; line-height: 1; font-weight: 600; color: var(--text-primary, #1a1a2e); border: 1px solid var(--border-subtle, #d6d6dc); border-radius: 4px; padding: 3px 8px; margin-bottom: 4px; } #locationFlowModal .saved-addr-row__text { margin: 0; font-size: 13.5px; color: var(--text-primary, #1a1a2e); line-height: 1.35; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #locationFlowModal .saved-addr-row__chevron { color: var(--text-secondary, #6b6f76); flex-shrink: 0; } #locationFlowModal .location-enter-link { display: inline-flex; align-items: center; gap: .35rem; color: var(--text-primary, #1a1a2e); text-decoration: underline; font-size: 14px; font-weight: 500; } #locationFlowModal .location-enter-link:hover { color: var(--brand); } /* Google Places Autocomplete dropdown — Google appends .pac-container directly to . Bootstrap modal z-index is 1055; pac-container default is 1000, so it lands BEHIND the modal backdrop and stays invisible. Bump it above the modal and restyle to match the CI3 reference (pin-icon left, hover bg, rounded corners). */ .pac-container { z-index: 10000 !important; border-radius: 8px; border: 1px solid var(--border-subtle, #e2e2e8); box-shadow: 0 6px 18px rgba(0, 0, 0, .08); margin-top: 4px; font-family: inherit; } .pac-container .pac-item { padding: .55rem .8rem; border-top: 1px solid var(--border-subtle, #f0f0f3); cursor: pointer; font-size: 13.5px; color: var(--text-primary, #1a1a2e); line-height: 1.4; } .pac-container .pac-item:first-child { border-top: none; } .pac-container .pac-item:hover { background: var(--bg-canvas, #f6f6f8); } .pac-container .pac-item-query { font-size: 13.5px; font-weight: 600; } .pac-container .pac-icon { margin-right: .5rem; } /* ============================================================ Loyalty page — CI3 parity rewrite Class names mirror CI3 so server-rendered + JS-rendered markup pull from the same stylesheet without duplication. ============================================================ */ /* CI3-compat aliases consumed by ported override CSS (.darkbg, .featured-card, etc). Defined on `body` so they inherit the runtime brand tokens set in base.php — defining on `:root` here would freeze them to theme.css's default `--brand: #007bff` and paint sections blue on every brand. */ body { --main-bg-color: var(--brand-primary, var(--brand)); --secondary-bg-color: var(--brand-secondary, #ffffff); } #topBackground { background-color: var(--main-bg-color); } /* POS OTP section grid */ #inlineOtpList { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; } .otp-card-item { flex: 0 0 calc(33.333% - 8px); max-width: calc(33.333% - 8px); } @media (max-width: 767px) { .otp-card-item { flex: 0 0 100%; max-width: 100%; } } .loyalty-page { background: var(--surface); } .loyalty-page .container { max-width: 1180px; margin: 0 auto; padding: 0 1rem; } /* Section shared utilities */ .loyalty-page .common-space { padding: 2rem 0; } .lp-section-head { text-align: center; margin-bottom: 1.25rem; } .loyalty-page .common-head { font-size: clamp(1.25rem, 2.6vw, 1.6rem); font-weight: 700; margin: 0; color: var(--text); letter-spacing: -.01em; } .loyalty-page .common-para { font-size: .92rem; color: var(--text-2); margin: .35rem 0 0; } /* ── Hero ─────────────────────────────────────────────── */ .lp-banner { background: var(--brand); color: var(--secondary-bg-color); padding: 1.5rem 0 1.75rem; } .lp-banner__row { display: flex; flex-direction: column; gap: 1.5rem; align-items: stretch; } .lp-banner__left { display: flex; flex-direction: column; gap: 1rem; } .lp-banner__right { width: 100%; } .lp-tagline { display: block; font-size: 1rem; font-weight: 500; } .lp-tagline b { font-weight: 700; } .lp-tagline--chip { display: inline-flex; align-items: center; gap: .35rem; background: rgba(0,0,0,.35); color: #fff; padding: .35rem .8rem; border-radius: var(--r-full); font-size: .82rem; width: auto; align-self: flex-start; } .lp-banner__heading { margin: .25rem 0 .15rem; font-size: clamp(1.6rem, 4vw, 2.1rem); font-weight: 800; color: #fff; letter-spacing: -.02em; line-height: 1.15; } .lp-banner__subheading { margin: 0 0 .25rem; font-size: .95rem; color: rgba(255,255,255,.85); } .ulctas { list-style: none; padding: 0; margin: 0; } /* ── Milestone card (built client-side by customer.js) ── */ .nw-div { background: var(--surface); color: var(--text); border-radius: var(--r); padding: 1rem 1.25rem; box-shadow: var(--shadow-md); } .nw-headibng { font-size: 1.05rem; font-weight: 700; margin: 0 0 .65rem; color: var(--text); } .nw-headibng > span { font-size: 1.5rem; color: var(--brand); margin-right: .25rem; } .nw-subheadibng { font-size: .82rem; color: var(--text-2); margin: 0 0 .75rem; } .coins-jurney-dv { display: flex; align-items: flex-start; justify-content: space-between; gap: .5rem; padding: .5rem 0 .75rem; position: relative; } .order-tracking { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; gap: .35rem; position: relative; min-width: 0; } .order-tracking .imgspannew { width: 32px; height: 32px; border-radius: var(--r-full); background: var(--surface-3); display: inline-flex; align-items: center; justify-content: center; border: 2px solid var(--border); position: relative; z-index: 2; overflow: hidden; } .order-tracking .imgspannew img { width: 22px; height: 22px; object-fit: contain; } .order-tracking p { margin: 0; font-size: .72rem; font-weight: 600; color: var(--text-2); text-align: center; } .order-tracking.completed .imgspannew { background: var(--brand); border-color: var(--brand); } .order-tracking.completed .imgspannew img { filter: brightness(0) invert(1); } .order-tracking.completed p { color: var(--brand); } .order-tracking.current .imgspannew { background: var(--brand); border-color: var(--brand); box-shadow: 0 0 0 4px var(--brand-soft); } .order-tracking.current .imgspannew img { filter: brightness(0) invert(1); } .order-tracking.current p { color: var(--brand); font-weight: 700; } .progress-dv { position: absolute; top: 16px; left: 50%; width: 100%; height: 3px; background: var(--border); z-index: 1; } .progress-dv::before { content: ''; display: block; height: 100%; width: var(--fill-width, 0%); background: var(--brand); transition: width .4s ease-out; } .order-tracking.completed .progress-dv::before { width: 100%; } .you-are-here { font-size: .7rem; color: var(--brand); font-weight: 600; } .nw-footer { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-top: .5rem; font-size: .82rem; } .nw-footer .txn { color: var(--brand); font-weight: 600; cursor: pointer; } .nw-footer .txn:hover { text-decoration: underline; } /* Single-milestone stats (CI3 single_milestone=1 brands like Harajuku) */ .nw-stats { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; padding: .25rem 0 .75rem; } .nw-stats__cell { background: var(--surface-2); border-radius: var(--r-sm); padding: .75rem 1rem; text-align: center; } .nw-stats__value { font-size: 1.35rem; font-weight: 700; color: var(--text); letter-spacing: -.01em; } .nw-stats__label { font-size: .78rem; color: var(--text-2); margin-top: .15rem; } /* ── Rewards (Upcoming) ───────────────────────────────── */ .rewardslocked { background: var(--surface-2); } .rewardsstarted { flex: 0 0 240px; } .wallet-reward-card { width: 100%; } .wallet-reward-container { background: var(--surface); border-radius: var(--r); padding: 1rem; box-shadow: var(--shadow-xs); display: flex; flex-direction: column; align-items: center; gap: .5rem; } .wallet-reward-image { width: 100%; aspect-ratio: 1/1; border-radius: var(--r-sm); overflow: hidden; background: var(--surface-2); } .wallet-reward-image img { width: 100%; height: 100%; object-fit: cover; display: block; } .wallet-reward-title { font-size: .9rem; color: var(--text-2); text-align: center; min-height: 2.4em; line-height: 1.2; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .wallet-reward-points { text-align: center; line-height: 1.05; } .wallet-reward-points .points-number { display: block; font-size: 1.9rem; font-weight: 800; color: var(--text); letter-spacing: -.02em; } .wallet-reward-points .points-label { display: block; font-size: .68rem; color: var(--text-3); letter-spacing: .14em; font-weight: 600; } .wallet-reward-button { display: inline-flex; align-items: center; justify-content: center; gap: .35rem; width: 100%; padding: .55rem .9rem; border-radius: var(--r-full); font-size: .82rem; font-weight: 600; background: var(--brand); color: var(--brand-secondary); border: none; cursor: pointer; } .wallet-reward-button img { width: 12px; height: 12px; filter: brightness(0) invert(1); } .wallet-reward-button-locked { background: var(--surface-3); color: var(--text-3); cursor: default; } .wallet-reward-button-locked img { filter: none; opacity: .55; } /* Locked state — desaturate image + dim card so it reads as "not yet unlocked". */ .wallet-reward-locked .wallet-reward-image { filter: grayscale(1); opacity: .55; } .wallet-reward-locked .wallet-reward-title { color: var(--text-3); } .wallet-reward-locked .points-number { color: var(--text-2); } .wallet-reward-locked .points-label { color: var(--text-3); } /* ── App download ────────────────────────────────────── */ .download-the-app-section { background: var(--brand-soft); padding: 2rem 0; } .download-the-app-section__row { display: flex; flex-direction: column; gap: 1.5rem; align-items: center; } .download-the-app-section__copy { flex: 1; } .download-the-app-section__title { font-size: 1.1rem; font-weight: 600; margin: 0 0 .75rem; color: var(--text); line-height: 1.4; } .download-the-app-section__label { font-size: .85rem; font-weight: 500; margin: 0; color: var(--text-2); } .download-the-app-links-icons { display: flex; flex-direction: column; gap: .65rem; } .download-icons { display: flex; gap: .65rem; flex-wrap: wrap; } .download-icons img { height: 44px; width: auto; display: block; } .download-the-app-section__mockup { position: relative; width: 200px; height: 240px; } .download-the-app-section__mockup .scan-code, .download-the-app-section__mockup .logo-scan-bg { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; } .download-the-app-section__mockup .scan-code__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; z-index: 1; } .download-the-app-section__mockup .qr-code { position: relative; z-index: 2; width: 60%; height: auto; border-radius: 6px; background: #fff; padding: 4px; } .download-the-app-section__mockup .scan-code__hint { position: absolute; bottom: -1.5rem; left: 0; right: 0; font-size: .72rem; color: var(--text-2); text-align: center; } .download-the-app-section__mockup .logo-scan-bg { z-index: 3; pointer-events: none; } .download-the-app-section__mockup .logo-scan { width: 36px; height: 36px; object-fit: contain; border-radius: 6px; background: #fff; } /* ── Offers / Promos ──────────────────────────────────── */ .offersSection { background: var(--surface-2); } .offersstarted { flex: 0 0 280px; } .couponxt { background: var(--surface); border: 1px dashed var(--border); border-radius: var(--r); padding: 1rem 1.1rem; display: flex; flex-direction: column; gap: .5rem; box-shadow: var(--shadow-xs); } .couponxt .head { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; } .couponxt .code { font-size: 1.05rem; font-weight: 700; color: var(--text); letter-spacing: .05em; } .couponxt .tag { background: color-mix(in srgb, var(--success, #0B8F3E) 14%, #fff); color: var(--success, #0B8F3E); font-size: .68rem; font-weight: 700; letter-spacing: .04em; padding: .15rem .45rem; border-radius: var(--r-sm); text-transform: capitalize; } .couponxt .tag.exclusive { background: var(--brand-soft); color: var(--brand); } .couponxt .desc { font-size: .82rem; color: var(--text-2); line-height: 1.45; } .couponxt__sub { display: block; color: var(--text-3); font-size: .76rem; margin-top: .15rem; } .couponxt .foot { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding-top: .5rem; border-top: 1px dashed var(--border); } .promo-details-toggle { background: none; border: none; padding: 0; cursor: pointer; display: inline-flex; align-items: center; gap: .35rem; color: var(--text-2); font-size: .8rem; font-weight: 500; } .promo-details-toggle img { width: 14px; height: 14px; } .promo-avail-now { color: var(--brand); font-weight: 700; font-size: .88rem; text-decoration: underline; } .promo-description { padding: .5rem 0 0; color: var(--text-2); font-size: .82rem; line-height: 1.5; border-top: 1px solid var(--border); margin-top: .25rem; } /* ── FAQ ──────────────────────────────────────────────── */ .faqSection { background: var(--surface); } .lp-faq { list-style: none; margin: 0; padding: 0; border: 1px solid var(--border); border-radius: var(--r); background: var(--surface); overflow: hidden; } .lp-faq__item + .lp-faq__item { border-top: 1px solid var(--border); } .lp-faq__q { width: 100%; background: none; border: none; text-align: left; padding: 1rem 1.1rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; font-weight: 600; color: var(--text); cursor: pointer; font-size: .96rem; } .lp-faq__q:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; } .lp-faq__chev { width: 26px; height: 26px; border-radius: var(--r-full); background: var(--surface-2); display: inline-flex; align-items: center; justify-content: center; font-weight: 700; color: var(--text-2); transition: transform var(--dur) var(--ease), background var(--dur) var(--ease); } .lp-faq__q[aria-expanded="true"] .lp-faq__chev { background: var(--brand-soft); color: var(--brand); transform: rotate(45deg); } .lp-faq__a { padding: 0 1.1rem 1rem; color: var(--text-2); font-size: .92rem; line-height: 1.55; } /* ── Banner / Static banner ──────────────────────────── */ .lp-banner-slide { flex: 0 0 86%; border-radius: var(--r); overflow: hidden; box-shadow: var(--shadow-xs); background: var(--surface-2); } .lp-banner-slide img { width: 100%; height: auto; display: block; } .lp-static-banner { display: block; border-radius: var(--r); overflow: hidden; box-shadow: var(--shadow-xs); } .lp-static-banner img { width: 100%; height: auto; display: block; } /* ── Tier card ────────────────────────────────────────── */ .lp-tier-card { flex: 0 0 220px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); padding: 1.25rem; text-align: center; box-shadow: var(--shadow-xs); } .lp-tier-card__icon { width: 60px; height: 60px; border-radius: var(--r-full); object-fit: cover; margin-bottom: .5rem; } .lp-tier-card__name { margin: 0 0 .25rem; font-size: 1.05rem; font-weight: 700; color: var(--text); } .lp-tier-card__threshold { margin: 0 0 .35rem; font-size: .82rem; color: var(--brand); font-weight: 600; } .lp-tier-card__desc { margin: 0; color: var(--text-2); font-size: .85rem; } /* ── POS OTP ──────────────────────────────────────────── */ .lp-otp-box { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); padding: 1.5rem; text-align: center; } .lp-otp-box__status { color: var(--text-2); font-size: .9rem; margin-bottom: .75rem; } .lp-otp-box__list { display: flex; flex-direction: column; gap: .75rem; align-items: center; } .lp-otp-card { width: 100%; max-width: 320px; border-radius: var(--r); padding: 1rem; border: 1px solid var(--border); background: var(--surface-2); } .lp-otp-card--active { background: color-mix(in srgb, var(--brand) 8%, #fff); border-color: color-mix(in srgb, var(--brand) 40%, var(--border)); } .lp-otp-card__status { font-size: .7rem; text-transform: uppercase; letter-spacing: .05em; font-weight: 700; color: var(--text-2); } .lp-otp-card--active .lp-otp-card__status { color: var(--brand); } .lp-otp-card__code { font-size: 2rem; font-weight: 800; letter-spacing: .35em; padding: .35rem 0; color: var(--text); } .lp-otp-card__meta { font-size: .78rem; color: var(--text-3); } .lp-otp-box__actions { margin-top: 1rem; } /* ── Horizontal rails (CSS scroll-snap, replaces Slick) ── */ .menu-scrolling-with-text { position: relative; } .menu-scrolling-with-text__track { display: flex; gap: 1rem; overflow-x: auto; scroll-snap-type: x mandatory; padding: .35rem .15rem 1.5rem; margin: 0 -.15rem; scrollbar-width: thin; } .menu-scrolling-with-text__track > * { scroll-snap-align: start; flex: 0 0 auto; } .menu-scrolling-with-text__track::-webkit-scrollbar { height: 6px; } .menu-scrolling-with-text__track::-webkit-scrollbar-thumb { background: var(--border); border-radius: 999px; } /* ── Empty state ─────────────────────────────────────── */ .lp-empty-section { background: var(--surface-2); } .lp-empty-section__msg { color: var(--text-3); text-align: center; margin: 0; font-size: .92rem; padding: 2rem; } /* ── Desktop layout ───────────────────────────────────── */ @media (min-width: 768px) { .loyalty-page .common-space { padding: 2.75rem 0; } .lp-banner { padding: 2.25rem 0 2.5rem; } .lp-banner__row { flex-direction: row; align-items: center; } .lp-banner__left { flex: 0 0 42%; } .lp-banner__right { flex: 1; } .download-the-app-section { padding: 3rem 0; } .download-the-app-section__row { flex-direction: row; justify-content: space-between; align-items: center; } .download-the-app-section__title { font-size: 1.25rem; max-width: 460px; } .download-the-app-section__mockup { width: 240px; height: 280px; } .rewardsstarted { flex: 0 0 calc((100% - 3rem) / 4); max-width: 260px; } .offersstarted { flex: 0 0 320px; } .lp-banner-slide { flex: 0 0 60%; } } @media (min-width: 1024px) { .lp-banner-slide { flex: 0 0 48%; } } /* ── Packages (prebuy) — CI3 ue_silver parity ─────────────────────────────── */ .pack-builder-page { background-color: #f1f0f5; } .pack-builder-page .common-space { padding: 30px 0; } .pack-builder-page .container { max-width: 1180px; margin: 0 auto; padding: 0 15px; } /* Restore Bootstrap 5 row+col behaviour inside this page (theme.css line 73 overrides .row globally with align-items:center + gap, missing flex-wrap). */ .pack-builder-page .row { --bs-gutter-x: 1.5rem; --bs-gutter-y: 0; display: flex; flex-wrap: wrap; align-items: stretch; gap: 0; margin-right: calc(-.5 * var(--bs-gutter-x)); margin-left: calc(-.5 * var(--bs-gutter-x)); } .pack-builder-page .row > * { box-sizing: border-box; flex-shrink: 0; width: 100%; max-width: 100%; padding-right: calc(var(--bs-gutter-x) * .5); padding-left: calc(var(--bs-gutter-x) * .5); } .pack-builder-page .row-gap-4 { row-gap: 1.5rem; } /* Active-membership view: left-aligned orange-pattern hero with a white validity pill (matches CI3 active-page screenshot) */ .mb-active-hero { background: var(--brand) url('/assets/img/membership/bg-vector1.png') center/cover no-repeat; border-radius: var(--r-lg); color: #fff; padding: 3rem 2rem; margin: 0 0 2.5rem; box-shadow: var(--shadow); } @media (min-width: 992px) { .mb-active-hero { padding: 3.5rem 3rem; } .location-info-bar .container{ padding: 0 ; } } .mb-active-hero__title { font-size: 2.25rem; font-weight: 800; color: #fff; margin: 0 0 .75rem; line-height: 1.15; } @media (min-width: 992px) { .mb-active-hero__title { font-size: 2.75rem; } } .mb-active-hero__desc { font-size: 1.05rem; line-height: 1.55; color: rgba(255,255,255,.92); margin: 0 0 2rem; max-width: 520px; } .mb-active-pill { display: inline-flex; align-items: center; justify-content: space-between; gap: 1.5rem; background: var(--surface); border-radius: var(--r-full); padding: .85rem 1.5rem; box-shadow: var(--shadow-sm); min-width: 320px; max-width: 100%; } .mb-active-pill__validity { color: var(--text); font-weight: 600; font-size: .95rem; } .mb-active-pill__status { color: #1f9c4f; font-weight: 700; font-size: .95rem; } /* Empty-state message rendered inside a section when its data is absent */ .mb-empty-msg { text-align: center; color: var(--text-2); margin: 0; padding: 1.5rem 0; } .pack-builder-page .promo-banner img { border-radius: 10px; width: 100%; height: auto; display: block; } /* 3 / 9 split on desktop, stacked on mobile */ @media (min-width: 768px) { .pack-builder-page .packsIntroduction .col-md-3 { width: 33%; flex: 0 0 33%; max-width: 33%; } .pack-builder-page .packsIntroduction .col-md-9 { width: 67%; flex: 0 0 67%; max-width: 67%; } .pack-builder-page .col-md-6 { width: 50%; flex: 0 0 50%; max-width: 50%; } } .pack-builder-page .tabRight .nav-tabs { background: #F9F9F9; border: none; border-radius: 50px !important; box-shadow: 0 0 3px rgba(0,0,0,.1); padding: 0; overflow: hidden; } .pack-builder-page .tabRight .nav-tabs .nav-item { width: 33.33%; margin: 0; } .pack-builder-page .tabRight .nav-tabs .nav-item .nav-link { width: 100%; border-radius: 50px !important; border: 1px solid transparent; font-weight: 400; color: #7a7a7a; padding: 10px 5px; font-size: 13px; line-height: normal; background: transparent; } .pack-builder-page .tabRight .nav-tabs .nav-item .nav-link.active { font-weight: 700; border-color: var(--brand, var(--brand-primary)); color: #000; background: #fff; } .pack-builder-page .tabRight .row-gap-4 { row-gap: 1.5rem !important; margin-bottom: 1rem; } .pack-builder-page .veg-flag { width: 16px; height: 16px; border: 1px solid #3DA66E; background: #fff; margin-top: 2px; position: relative; border-radius: 3px; flex-shrink: 0; } .pack-builder-page .veg-flag span { display: block; width: 8px; height: 8px; background: #3DA66E; border-radius: 50%; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); } .pack-builder-page .non-vegflag { width: 16px; height: 16px; border: 1px solid #fd1615; background: #fff; margin-top: 2px; position: relative; border-radius: 3px; flex-shrink: 0; } .pack-builder-page .non-vegflag span { display: block; width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-bottom: 7px solid #fd1615; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); } .pack-builder-page .milk-card { border-radius: 15px; box-shadow: 0 3px 8px rgba(0,0,0,.1); border: 1px solid #e6e6e6; overflow: hidden; background: #fff; height: 100%; cursor: pointer; transition: transform .2s ease, box-shadow .2s ease; } .pack-builder-page .milk-card:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0,0,0,.12); } .pack-builder-page .milk-card a.redirect-subscription-btn { display: block; color: inherit; text-decoration: none; } .pack-builder-page .milk-card-start { padding: 16px; } .pack-builder-page .milk-card-start h4 { font-size: 16px; font-weight: 600; line-height: 1.4; color: #222; margin: 0; } .pack-builder-page .milk-card-start .col-8 { flex: 0 0 60%; max-width: 60%; } .pack-builder-page .milk-card-start .col-4 { flex: 0 0 40%; max-width: 40%; } .pack-builder-page .cowmilk-info { display: flex; flex-direction: column; gap: 2px; } .pack-builder-page .pack-info { color: #333; border-radius: 10px; padding: 4px 10px; font-weight: 600; font-size: 12px; display: inline-block; width: fit-content; position: relative; } .pack-builder-page .pack-info::before { content: ""; position: absolute; inset: 0; background: var(--brand, var(--brand-primary)); opacity: .15; border-radius: 10px; } .pack-builder-page .pack-info { z-index: 0; } .pack-builder-page .milk-card--price { font-variant-numeric: tabular-nums; } .pack-builder-page .milk-card--price .price { font-size: 18px; font-weight: 700; color: var(--brand, var(--brand-primary)); } .pack-builder-page .milk-card--price .old-price { font-size: 14px; color: #999; text-decoration: line-through; margin-right: 8px; } .pack-builder-page .milk-card_imageBtn { position: relative; min-height: 120px; display: flex; align-items: center; justify-content: center; } .pack-builder-page .milk-card_imageBtn img { max-width: 100%; max-height: 120px; width: auto; object-fit: contain; border-radius: 20px; box-shadow: 0 0 3px rgba(0,0,0,.15); } .pack-builder-page .milk-card_imageBtn__placeholder { width: 110px; height: 110px; border-radius: 20px; background: #f4f4f4; } .pack-builder-page .subscribe-btn { box-sizing: border-box; position: absolute; background: #fff; border: 1px solid #333; border-radius: 8px; bottom: -10px; padding: 6px 16px; font-weight: 600; font-size: 12px; color: #333; min-width: 80px; text-align: center; transition: all .2s ease; } .pack-builder-page .milk-card:hover .subscribe-btn { background: var(--brand, var(--brand-primary)); color: #fff; border-color: var(--brand, var(--brand-primary)); } .pack-builder-page .card_subscription { background: linear-gradient(135deg, #F2FFE9 0%, #e8f5e0 100%); padding: 10px 15px; border-top: 1px solid rgba(75,173,80,.2); } .pack-builder-page .card_subscription__line { font-size: 13px; font-weight: 500; line-height: 1.3; color: #2a4f2a; margin-bottom: 5px; } .pack-builder-page .save-info-badge { display: inline-block; background: linear-gradient(135deg, #4BAD50 0%, #45a049 100%); color: #fff; font-size: 13px; font-weight: 600; padding: 5px 16px; border-radius: 20px; box-shadow: 0 2px 8px rgba(75,173,80,.3); line-height: 1.3; } .pack-builder-page .pl-2 { padding-left: .5rem !important; } .pack-builder-page .pr-2 { padding-right: .5rem !important; } .sub-page__intro { font-size: .9rem; color: var(--text-secondary); margin-top: 1rem; line-height: 1.5; } .scard__validity { font-size: .72rem; color: var(--text-secondary); margin: .25rem 0 0; } /* qty stepper used in package view + buy modal */ .qty-stepper { display: inline-flex; align-items: center; gap: .25rem; border: 1.5px solid var(--brand, var(--brand-primary)); border-radius: var(--radius-md, 8px); background: #fff; padding: 2px; } .qty-stepper__btn { width: 30px; height: 30px; border: none; background: transparent; color: var(--brand, var(--brand-primary)); font-size: 1.1rem; font-weight: 700; cursor: pointer; display: flex; align-items: center; justify-content: center; border-radius: 6px; } .qty-stepper__btn:hover { background: color-mix(in srgb, var(--brand, var(--brand-primary)) 10%, transparent); } .qty-stepper__count { min-width: 28px; text-align: center; font-weight: 700; color: var(--text-primary); font-variant-numeric: tabular-nums; } /* variant cards in pack buy modal + view page */ .pack-variants { display: flex; flex-direction: column; gap: .625rem; padding: .875rem 1rem; } .pack-variant { display: flex; align-items: stretch; gap: .75rem; padding: .75rem; border: 1.5px solid var(--border-subtle); border-radius: var(--radius-md, 8px); cursor: pointer; background: var(--bg-surface); transition: border-color .15s, background .15s; } .pack-variant:hover { border-color: var(--brand, var(--brand-primary)); } .pack-variant input[type="radio"] { margin-top: .15rem; accent-color: var(--brand, var(--brand-primary)); } .pack-variant--active { border-color: var(--brand, var(--brand-primary)); background: color-mix(in srgb, var(--brand, var(--brand-primary)) 5%, transparent); } .pack-variant__body { display: flex; flex-direction: column; gap: .25rem; flex: 1; min-width: 0; } .pack-variant__title { font-size: .9rem; font-weight: 700; color: var(--text-primary); } .pack-variant__qty { font-size: .75rem; color: var(--text-secondary); } .pack-variant__price { display: flex; align-items: baseline; gap: .4rem; flex-wrap: wrap; font-variant-numeric: tabular-nums; } .pack-variant__price del { color: var(--text-secondary); font-size: .8rem; } .pack-variant__price strong { color: var(--text-primary); font-size: .95rem; } .pack-variant__save { font-size: .7rem; font-weight: 700; background: #dcfce7; color: #15803d; padding: 2px 6px; border-radius: 999px; } /* footer rows inside sv-config used by package view + buy modal */ .sv-config__qty { display: flex; align-items: center; justify-content: space-between; padding: .75rem 1rem; border-top: 1px solid var(--border-subtle); font-size: .9rem; color: var(--text-primary); } .sv-config__total { display: flex; align-items: center; justify-content: space-between; padding: .75rem 1rem; border-top: 1px solid var(--border-subtle); font-size: 1rem; font-weight: 700; color: var(--text-primary); } .sv-config__total strong { font-size: 1.1rem; font-variant-numeric: tabular-nums; } .popup-sheet__footer { padding: .75rem 1rem 1rem; } /* cart-side: redemption items shown at ₹0 with a green badge */ .pack-redemption { margin: 1rem 0; padding: .875rem 1rem; border: 1px solid #d1fae5; background: #f0fff4; border-radius: var(--radius-md, 8px); } .pack-redemption__heading { font-size: .8rem; font-weight: 700; color: #15803d; margin: 0 0 .5rem; text-transform: uppercase; letter-spacing: .03em; } .pack-redemption__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .5rem; } .pack-redemption-item { display: flex; align-items: center; gap: .625rem; padding: .5rem .625rem; background: #fff; border-radius: var(--radius-sm, 6px); border: 1px solid #d1fae5; } .pack-redemption-badge { font-size: .65rem; font-weight: 700; color: #15803d; background: #dcfce7; padding: 2px 6px; border-radius: 999px; flex-shrink: 0; letter-spacing: .02em; } .pack-redemption-item__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .pack-redemption-item__body strong { font-size: .85rem; color: var(--text-primary); } .pack-redemption-item__qty { font-size: .75rem; color: var(--text-secondary); } .pack-redemption-item__price { font-weight: 700; color: #15803d; font-variant-numeric: tabular-nums; } /* Skeleton placeholder while plans load */ .mb-skeleton-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); height: 420px; animation: mb-pulse 1.4s ease-in-out infinite; } @keyframes mb-pulse { 0%,100% { opacity: 1; } 50% { opacity: .55; } } /* Location picker modal styles → public/assets/css/location_modal.css */ /* Header location info bar — 2-row card layout (row1: location + Delivery pill, row2: outlet) Scoped to mobile only (max-width: 768px); desktop uses default layout. */ @media (max-width: 768px) { .location-info-bar { position: sticky; top: 0; z-index: 50; background: transparent; padding: 8px 0; border-bottom: none; transition: box-shadow .2s ease; } .location-info-bar.location-bar-scrolled { box-shadow: 0 2px 8px rgba(0,0,0,.08); top: 58px; } .location-info-bar.location-bar-scrolled .location-info-bar-section.location-info-bar-divider { display: none !important; } .location-info-bar-inner { display: flex; flex-wrap: wrap; align-items: stretch; gap: 8px; ;row-gap: 10px; } .location-info-bar-section { display: flex; align-items: center; gap: 10px; flex: 1 1 0; min-width: 0; padding: 8px 14px; border-radius: 12px; order: 1; background: var(--header-bg); color: var(--header-text); } .location-info-bar-section.location-info-bar-divider { flex-basis: 100%; order: 3; border-radius: 0; padding: 10px 14px; background: var(--header-bg); color: var(--header-text); border-top: 1px solid var(--border); } .location-info-bar-section-fixed { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 6px 12px; flex: 0 0 auto; border-radius: 12px; background: #fff; color: #222; cursor: pointer; order: 2; margin-right: 15px; } .location-info-bar-content { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; overflow: hidden; width: 100%; } /* These sections sit on the brand-coloured --header-bg, so every child must follow --header-text (the header font colour). Hardcoded dark text/icons were invisible on dark/red headers. */ .location-info-bar-change { cursor: pointer; font-size: 14px; color: var(--header-text); line-height: normal; transition: opacity .15s; background: none; border: 0; padding: 0; font-family: inherit; -webkit-appearance: none; appearance: none; display: inline-flex; align-items: center; gap: 2px; } .location-info-bar-change:hover { opacity: .85; } /* Your Location carries both .change + .content — keep it left-aligned (the .change align-items:center otherwise centers it) */ .location-info-bar-change.location-info-bar-content { align-items: flex-start; } .location-info-bar-label { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--header-text); font-weight: 700; flex-shrink: 0; white-space: nowrap; } .location-info-bar-label svg { width: 18px; height: 18px; color: var(--header-text); flex-shrink: 0; } .location-info-bar-label-bold { background: rgba(255,255,255,.55); border-radius: 6px; padding: 2px 8px; margin-left: 4px; font-size: 12px; font-weight: 700; color: #222; line-height: 1.3; } .home--location-change { display: inline-flex; align-items: center; gap: 4px; line-height: 1.3; min-width: 0; max-width: 100%; padding-left: 24px; } .home--location-change svg { color: currentColor; opacity: .75; flex-shrink: 0; } .location-info-bar-text { padding: 0; margin: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 13px; color: var(--header-text); min-width: 0; } .location-info-bar-selected-outlet { flex-direction: row; align-items: center; gap: 8px; flex-wrap: nowrap; } .location-info-bar-selected-outlet .home--location-change { padding-left: 0; } .location-info-bar-ordertype { font-size: 14px; font-weight: 700; color: #222; line-height: 1.1; } .location-info-bar-ordertype-change { display: inline-flex; align-items: center; gap: 4px; color: #222; font-weight: 500; font-size: 12px; text-decoration: none; } .location-info-bar-ordertype-change:hover { color: #222; opacity: .8; } .lp-loc-pill { max-width: 140px; } } /* Desktop (≥769px) — single-row layout, CI3-parity */ @media (min-width: 769px) { /* Stick below the sticky .site-header (logo 52px + .5rem*2 padding = 68px) instead of at top:0, where it hid behind the taller, higher-z-index header. CI3 parity: the location bar stays pinned under the header on scroll. */ .location-info-bar { position: sticky; top: 68px; z-index: 50; background: #fff; padding: 10px 0; border-bottom: 1px solid #e6e6e6; } .location-info-bar-inner { display: flex; align-items: center; justify-content: space-between; flex-wrap: nowrap; gap: 16px; } .location-info-bar-section { display: flex; align-items: center; gap: 8px; flex: 1 1 auto; min-width: 0; padding: 0; background: transparent; color: inherit; border-radius: 0; } .location-info-bar-section.location-info-bar-divider { flex-basis: auto; border-left: 1px solid #e6e6e6; border-top: none; border-radius: 0; padding: 0 0 0 16px; background: transparent; color: inherit; } .location-info-bar-section-fixed { display: inline-flex; flex-direction: row; align-items: center; gap: 10px; padding: 8px 14px; flex: 0 0 auto; background: #f5f5f5; color: inherit; border-radius: 10px; } .location-info-bar-content { flex-direction: row; align-items: center; gap: 6px; flex-wrap: nowrap; overflow: hidden; min-width: 0; } .location-info-bar-label { font-size: 14px; font-weight: 700; color: #222; gap: 6px; } .location-info-bar-label svg { width: 18px; height: 18px; } .location-info-bar-label-bold { background: #f3f3f3; border-radius: 6px; padding: 2px 8px; margin-left: 4px; font-size: 12px; font-weight: 700; color: #222; } .home--location-change { display: inline-flex; align-items: center; gap: 4px; padding-left: 0; max-width: 240px; min-width: 0; cursor: pointer; } .home--location-change svg { color: initial; width:20px; height: 20px; opacity: 1; } .location-info-bar-text { font-size: 14px; color: #222; padding: 0; margin: 0; padding: 0 5px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; margin: 0; } .location-info-bar-ordertype { font-size: 14px; font-weight: 700; color: #222; } .location-info-bar-ordertype-change { display: inline-flex; align-items: center; gap: 3px; padding: 0 0 0 10px; border-left: 1px solid #dcdcdc; font-size: 13px; color: #000; font-weight: 600; text-decoration: none; cursor: pointer; background: none; border-top: 0; border-right: 0; border-bottom: 0; border-radius: 0; font-family: inherit; -webkit-appearance: none; appearance: none; line-height: 1.4; transition: opacity .15s; } .location-info-bar-ordertype-change span { text-decoration: underline; text-underline-offset: 2px; } .location-info-bar-ordertype-change:hover { opacity: .7; } .location-info-bar-ordertype-change svg { width: 11px; height: 11px; flex-shrink: 0; } } /* ── Profile sidebar (header-triggered drawer, CI3 visual parity) ────────── */ .profile-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.45); opacity: 0; pointer-events: none; transition: opacity .25s ease; z-index: 1080; } .profile-overlay.is-open { opacity: 1; pointer-events: auto; } .profile-sidebar { position: fixed; top: 0; right: 0; height: 100vh; /* fallback */ height: 100dvh; /* match the visible viewport on mobile (excludes browser chrome) */ width: 100%; max-width: 100vw; transform: translateX(100%); transition: transform .28s ease; z-index: 1090; display: flex; flex-direction: column; background: color-mix(in srgb, var(--brand) 22%, #fff); } /* Full-width on mobile; a narrower panel on tablet/desktop. */ @media (min-width: 768px) { .profile-sidebar { max-width: 400px; } } .profile-sidebar.is-open { transform: translateX(0); } /* CI3 mobile parity: the page header stays visible on top and the menu card drops below it. The sidebar sits UNDER the sticky header (z 1030) so the header's profile icon remains tappable to toggle the menu closed, and the card-level X is hidden (CI3 hides it on mobile, closing via the header). */ @media (max-width: 767px) { .profile-sidebar { z-index: 1020; } /* Higher specificity so this wins over the later `.profile-sidebar__body` padding shorthand — clears the sticky header so the card sits below it. */ .profile-sidebar .profile-sidebar__body { padding-top: 76px; } .profile-overlay { z-index: 1010; } .profile-sidebar__close { display: none; } } /* Brand top bar (close · logo · account) — mirrors the nav drawer bar */ .profile-sidebar__bar { background: var(--header-bg); padding: .55rem .9rem; flex-shrink: 0; } .profile-sidebar__bar .btn-icon { background: rgba(255, 255, 255, .92); color: #1a1a2e; width: 34px; height: 34px; } .profile-sidebar__bar .btn-icon:hover { background: #fff; color: var(--brand); } .profile-sidebar__bar-icon { pointer-events: none; } /* Scroll area holding the floating card + the powered-by footer below it */ .profile-sidebar__body { flex: 1 1 auto; overflow-y: auto; padding: 1.1rem .9rem; } .profile-sidebar__card { background: #fff; border-radius: 12px; box-shadow: 0 3px 24px rgba(82, 82, 82, .16); max-width: 500px; width: 100%; margin: 0 auto; overflow: hidden; } .profile-sidebar__header { display: flex; align-items: center; gap: .85rem; padding: 1rem 1.1rem; border-bottom: 1px solid #f0f0f0; } .profile-sidebar__avatar { width: 56px; height: 56px; flex-shrink: 0; border-radius: 50%; background: color-mix(in srgb, var(--brand) 14%, #fff); color: var(--brand); display: flex; align-items: center; justify-content: center; } .profile-sidebar__user { min-width: 0; flex: 1; } .profile-sidebar__name { margin: 0; font-size: 1rem; font-weight: 600; color: #11141a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .profile-sidebar__email { margin: 2px 0 0; font-size: .82rem; color: #676767; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .profile-sidebar__close { flex-shrink: 0; align-self: flex-start; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; padding: 0; border: 0; border-radius: 50%; background: transparent; color: #676767; cursor: pointer; } .profile-sidebar__close:hover { background: #f0f0f0; color: #11141a; } .profile-sidebar__close:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; } /* CI3 account menu: solid hairline dividers, icon + label, no chevron */ .profile-sidebar__menu { display: flex; flex-direction: column; padding: 0 1.1rem; } .profile-sidebar__item { display: flex; align-items: center; gap: .7rem; padding: .85rem 0; color: #11141a; text-decoration: none; border-bottom: 1px solid #f0f0f0; font-size: .92rem; transition: color .12s; } .profile-sidebar__item:last-child { border-bottom: none; } .profile-sidebar__item:hover { color: var(--brand); } .profile-sidebar__item:hover .profile-sidebar__icon { color: var(--brand); } .profile-sidebar__icon { width: 20px; flex-shrink: 0; color: #6b6b75; display: flex; align-items: center; justify-content: center; transition: color .12s; } .profile-sidebar__icon img { width: 18px; height: 20px; object-fit: contain; } .profile-sidebar__label { flex: 1; font-weight: 400; } .profile-sidebar__logout { width: calc(100% - 2.2rem); margin: .65rem 1.1rem 1.1rem; display: inline-flex; align-items: center; justify-content: center; gap: .5rem; padding: .85rem 1rem; background: #fff; color: #11141a; border: 1px solid #e4e4e4; border-radius: 8px; font-size: .95rem; font-weight: 600; cursor: pointer; transition: background .15s, color .15s, border-color .15s; } .profile-sidebar__logout:hover { background: #fafafa; color: var(--brand); border-color: var(--brand); } .profile-sidebar__powered { margin: 1rem 0 .25rem; padding: 0; text-align: center; font-size: .85rem; color: #555; font-weight: 500; display: flex; align-items: center; justify-content: center; gap: 6px; } .profile-sidebar__powered a { text-decoration: none; display: inline-flex; align-items: center; } .profile-sidebar__powered img { display: block; height: 20px; width: auto; } /* ─── Prepaid packages (/package) ─────────────────────────────────────────── */ .pkg-page { max-width: 1180px; margin: 0 auto; padding: 1rem 1rem 3rem; background: var(--bg-canvas); min-height: 60vh; } .pkg-page__layout { display: grid; grid-template-columns: 340px 1fr; gap: 1.5rem; align-items: flex-start; } .pkg-page__sidebar { position: sticky; top: 90px; align-self: start; } .pkg-page__banner { width: 100%; border-radius: var(--radius-lg); overflow: hidden; background: var(--bg-canvas); } .pkg-page__banner img { width: 100%; height: auto; display: block; } .pkg-page__main { min-width: 0; } @media (max-width: 768px) { .pkg-page__layout { grid-template-columns: 1fr; } .pkg-page__sidebar { position: static; } } .pkg-tabs { display: flex; background: #F9F9F9; border-radius: 50px; padding: 0; margin-bottom: 1rem; box-shadow: 0 0 3px rgba(0,0,0,.1); width: 100%; gap: 0; } .pkg-tabs__btn { flex: 1; padding: 8px 16px; background: transparent; border: 1px solid transparent; border-radius: 50px; font-size: .875rem; font-weight: 300; color: #7a7a7a; cursor: pointer; transition: all .2s; white-space: nowrap; text-align: center; } .pkg-tabs__btn--active { background: #fff; color: #000; font-weight: 700; border: 1px solid var(--brand); } .pkg-panel { display: block; } .pkg-panel--hidden { display: none; } .pkg-loading { display: flex; flex-direction: column; align-items: center; gap: var(--space-3); padding: var(--space-8); color: var(--text-secondary); } .pkg-loading__spinner { width: 28px; height: 28px; border-radius: 50%; border: 3px solid var(--border-subtle); border-top-color: var(--brand); animation: pkg-spin .8s linear infinite; } @keyframes pkg-spin { to { transform: rotate(360deg); } } .pkg-empty { text-align: center; padding: var(--space-12) var(--space-4); color: var(--text-secondary); } .pkg-empty svg { margin-bottom: var(--space-4); opacity: .45; } .pkg-empty__title { font-size: 1.1rem; font-weight: 700; color: var(--text-primary); margin-bottom: var(--space-2); } .pkg-empty__sub { font-size: .9rem; } .pkg-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-4); } @media (max-width: 640px) { .pkg-grid { grid-template-columns: 1fr; } } .pkg-card { background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: var(--space-4); transition: box-shadow .15s, transform .15s; } .pkg-card:hover { box-shadow: var(--shadow-md); } .pkg-card__main { display: flex; gap: var(--space-3); align-items: flex-start; } .pkg-card__left { flex: 1; min-width: 0; } .pkg-card__right { display: flex; flex-direction: column; align-items: flex-end; gap: var(--space-2); flex-shrink: 0; } .pkg-card__title-row { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-2); } .pkg-card__name { font-size: 1rem; font-weight: 700; color: var(--text-primary); margin: 0; } .pkg-card__start-badge { font-size: .8rem; color: var(--text-secondary); margin-bottom: var(--space-1); } .pkg-card__pricing { display: flex; align-items: baseline; gap: var(--space-2); font-variant-numeric: tabular-nums; } .pkg-card__mrp { font-size: .8rem; color: var(--text-secondary); text-decoration: line-through; } .pkg-card__sp { font-size: 1rem; font-weight: 700; color: var(--text-primary); } .pkg-card__img { width: 88px; height: 88px; object-fit: cover; border-radius: var(--radius-md); display: block; background: var(--bg-canvas); } .pkg-card__img--placeholder { display: flex; align-items: center; justify-content: center; color: var(--border-subtle); } .pkg-card__view-btn { white-space: nowrap; } .pkg-card__footer { margin-top: var(--space-3); padding-top: var(--space-3); border-top: 1px dashed var(--border-subtle); font-size: .8rem; color: #35AC46; font-weight: 600; } .pkg-progress { width: 100%; height: 6px; background: var(--bg-canvas); border-radius: 999px; overflow: hidden; margin: var(--space-2) 0 var(--space-1); } .pkg-progress__bar { height: 100%; background: var(--brand); transition: width .3s ease; } /* ─── Pack detail (/package/view) ──────────────────────────────────────── */ .pkg-detail { max-width: 1080px; margin: 0 auto; padding: var(--space-4); } .pkg-detail__nav { margin-bottom: var(--space-4); } .pkg-detail__back { display: inline-flex; align-items: center; gap: var(--space-1); color: var(--text-secondary); text-decoration: none; font-weight: 500; } .pkg-detail__back:hover { color: var(--brand); } .pkg-detail__loading, .pkg-detail__error { padding: var(--space-12); text-align: center; color: var(--text-secondary); } .pkg-detail__error p { margin-bottom: var(--space-3); } .pkg-detail__layout { display: grid; grid-template-columns: 5fr 7fr; gap: var(--space-6); align-items: flex-start; } @media (max-width: 768px) { .pkg-detail__layout { grid-template-columns: 1fr; } } .pkg-detail__media { background: var(--bg-surface); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); } .pkg-detail__image img { width: 100%; height: auto; display: block; aspect-ratio: 4/3; object-fit: cover; } .pkg-detail__image-placeholder { aspect-ratio: 4/3; background: var(--bg-canvas); } .pkg-detail__info { display: flex; flex-direction: column; gap: var(--space-3); } .pkg-detail .pkg-card { padding: var(--space-4); margin: 0; } .pkg-detail__title-row { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-2); } .pkg-detail__title { font-size: 1.25rem; font-weight: 700; margin: 0; color: var(--text-primary); } .pkg-detail__desc { font-size: .9rem; color: var(--text-secondary); line-height: 1.5; margin: 0; } .pkg-detail__desc--collapsed { display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .pkg-detail__readmore { background: none; border: none; color: var(--brand); font-size: .85rem; font-weight: 600; cursor: pointer; padding: var(--space-1) 0; margin-top: var(--space-1); } .pkg-section-label { font-size: .85rem; font-weight: 700; color: var(--text-primary); margin: 0 0 var(--space-2); display: block; } .pkg-variant-list { display: flex; flex-direction: column; gap: var(--space-2); } .pkg-variant { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3); border: 2px solid var(--border-subtle); border-radius: var(--radius-md); cursor: pointer; transition: border-color .15s, background .15s; } .pkg-variant input[type="radio"] { margin: 0; accent-color: var(--brand); } .pkg-variant--active { border-color: var(--brand); background: #f0f9ff; } .pkg-variant__left { flex: 1; min-width: 0; } .pkg-variant__name { font-size: .9rem; font-weight: 600; color: var(--text-primary); display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; } .pkg-variant__save { background: #35AC46; color: #fff; font-size: .7rem; padding: 1px 6px; border-radius: 3px; font-weight: 700; } .pkg-variant__validity { font-size: .75rem; color: var(--text-secondary); margin-top: 2px; } .pkg-variant__right { text-align: right; flex-shrink: 0; } .pkg-variant__price { font-size: 1rem; font-weight: 700; color: var(--text-primary); } .pkg-variant__mrp { font-size: .75rem; color: var(--text-secondary); margin-left: 4px; } .pkg-variant__per-item { font-size: .7rem; color: var(--text-secondary); margin-top: 2px; } .pkg-detail__tnc-body { white-space: pre-wrap; } .pkg-detail__add-error { background: #fde8e8; color: #9c1c1c; padding: var(--space-3); border-radius: var(--radius-md); font-size: .85rem; } .pkg-detail__cta-desktop { margin-top: var(--space-2); } .pkg-detail__sticky { position: fixed; bottom: 0; left: 0; right: 0; z-index: 30; display: none; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-3) var(--space-4); background: var(--bg-surface); border-top: 1px solid var(--border-subtle); box-shadow: var(--shadow-md); } .pkg-detail__sticky-price { display: flex; flex-direction: column; } .pkg-detail__sticky-sp { font-size: 1.1rem; font-weight: 700; color: var(--text-primary); } .pkg-detail__sticky-mrp { font-size: .8rem; color: var(--text-secondary); } .pkg-detail__sticky-cta { min-width: 160px; } @media (max-width: 768px) { .pkg-detail__sticky { display: flex; } .pkg-detail__cta-desktop { display: none; } .pkg-detail { padding-bottom: 88px; } } /* ─── Pack checkout (/package/checkout) ───────────────────────────────── */ .pkg-checkout { max-width: 1000px; margin: 0 auto; padding: var(--space-4); } .pkg-checkout__topnav { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-5); } .pkg-checkout__back { display: inline-flex; align-items: center; color: var(--text-secondary); text-decoration: none; } .pkg-checkout__title { font-size: 1.1rem; font-weight: 700; margin: 0; } .pkg-checkout__layout { display: grid; grid-template-columns: 1fr 360px; gap: var(--space-6); align-items: flex-start; } @media (max-width: 768px) { .pkg-checkout__layout { grid-template-columns: 1fr; } } .pkg-checkout__section { padding: var(--space-4); margin-bottom: var(--space-4); } .pkg-checkout__section-title { font-size: 1rem; font-weight: 700; margin: 0 0 var(--space-4); color: var(--text-primary); } .pkg-checkout__addr-selected { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3); background: var(--bg-canvas); border-radius: var(--radius-md); font-size: .875rem; } .pkg-checkout__addr-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-2); } .pkg-checkout__addr-row { padding: var(--space-3); border: 1.5px solid var(--border-subtle); border-radius: var(--radius-md); cursor: pointer; transition: border-color .15s, background .15s; } .pkg-checkout__addr-row--active { border-color: var(--brand); background: #f0f9ff; } .pkg-checkout__addr-row label { display: flex; align-items: center; gap: var(--space-2); cursor: pointer; width: 100%; } .pkg-checkout__addr-row input[type="radio"] { accent-color: var(--brand); margin: 0; } .pkg-checkout__addr-tag { background: var(--brand); color: var(--brand-secondary); font-size: .7rem; padding: 1px 6px; border-radius: 3px; font-weight: 700; } .pkg-checkout__addr-label { font-size: .875rem; color: var(--text-primary); } .pkg-checkout__add-addr { margin-top: var(--space-3); } .pkg-checkout__addr-empty { padding: var(--space-3); font-size: .85rem; } .pkg-checkout__addr-types { display: flex; gap: var(--space-2); flex-wrap: wrap; } .pkg-checkout__addr-type { display: inline-flex; align-items: center; gap: var(--space-1); padding: var(--space-2) var(--space-3); border: 1.5px solid var(--border-subtle); border-radius: 999px; font-size: .875rem; cursor: pointer; } .pkg-checkout__pay-options { display: flex; flex-direction: column; gap: var(--space-2); } .pkg-checkout__pay-option { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3); border: 1.5px solid var(--border-subtle); border-radius: var(--radius-md); cursor: pointer; } .pkg-checkout__pay-option--active { border-color: var(--brand); background: #f0f9ff; } .pkg-checkout__pay-option input[type="radio"] { accent-color: var(--brand); margin: 0; } .pkg-checkout__items { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--space-2); } .pkg-checkout__item { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-3); } .pkg-checkout__item-info { display: flex; flex-direction: column; } .pkg-checkout__item-price { font-weight: 600; font-variant-numeric: tabular-nums; } .pkg-checkout__totals { display: flex; flex-direction: column; gap: var(--space-1); margin: 0; } .pkg-checkout__total-row { display: flex; justify-content: space-between; font-size: .9rem; color: var(--text-secondary); } .pkg-checkout__total-row dt, .pkg-checkout__total-row dd { margin: 0; } .pkg-checkout__total-row--grand { font-size: 1rem; font-weight: 700; color: var(--text-primary); margin-top: var(--space-2); } .pkg-checkout__summary-loading { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); padding: var(--space-4); } .pkg-checkout__error { background: #fde8e8; color: #9c1c1c; padding: var(--space-3); border-radius: var(--radius-md); font-size: .85rem; margin-bottom: var(--space-3); } /* ──────────────────────────────────────────────── Articles / Blog /articles list + /article/{slug} detail ──────────────────────────────────────────────── */ .article-section { padding: var(--space-8) 0; } .article-heading { text-align: center; font-size: 1.6rem; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; color: var(--text); margin: 0 0 var(--space-8); position: relative; padding-bottom: var(--space-3); } .article-heading::after { content: ""; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); width: 56px; height: 2px; background: var(--brand); border-radius: 2px; } .article-empty { text-align: center; padding: var(--space-8) 0; } .article-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-6); } @media (min-width: 768px) { .article-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 992px) { .article-grid { grid-template-columns: repeat(3, 1fr); } } .article-card { display: flex; flex-direction: column; background: var(--bg-surface); border-radius: var(--r); box-shadow: var(--shadow); overflow: hidden; text-decoration: none; color: inherit; transition: transform .2s ease, box-shadow .2s ease; } .article-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); } .article-card:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; } .article-card__link { display: block; color: inherit; text-decoration: none; } .article-card__link:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; } .article-card__tag-row { padding: 0 var(--space-5) var(--space-5); text-align: center; display: flex; flex-direction: column; align-items: center; gap: var(--space-1); } .article-card__media { aspect-ratio: 4 / 3; background: var(--surface-2, #f5f5f7); overflow: hidden; } .article-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; } .article-card__media--empty { background: linear-gradient(135deg, var(--brand-soft), var(--surface-2, #f5f5f7)); } .article-card__body { padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-2); text-align: center; } .article-card__title { color: var(--brand); font-size: 1.05rem; font-weight: 700; line-height: 1.35; margin: 0 0 var(--space-2); display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .article-card__byline { font-size: .85rem; color: var(--text-2); } .article-card__byline strong { font-weight: 700; color: var(--text); } .article-card__meta { font-size: .85rem; color: var(--text-2); margin-top: var(--space-1); } .chip--tag { background: var(--brand-soft); color: var(--brand); border-color: transparent; padding: .35rem .7rem; font-size: .8rem; text-decoration: none; align-self: center; } a.chip--tag:hover { background: color-mix(in srgb, var(--brand) 20%, #fff); } /* Pagination */ .pagination { display: flex; justify-content: center; align-items: center; gap: var(--space-2); margin: var(--space-8) 0 0; flex-wrap: wrap; } .pagination__item { min-width: 36px; height: 36px; padding: 0 .6rem; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; border: 1px solid var(--border, #e5e7eb); background: var(--bg-surface); color: var(--text); font-weight: 600; font-size: .9rem; text-decoration: none; transition: background .15s ease, color .15s ease, border-color .15s ease; } .pagination__item:hover:not(.is-disabled):not(.is-active) { background: var(--brand-soft); border-color: var(--brand); color: var(--brand); } .pagination__item.is-active { background: var(--brand); border-color: var(--brand); color: var(--brand-secondary); } .pagination__item.is-disabled { opacity: .35; pointer-events: none; } .pagination__item--nav { font-size: 1.2rem; line-height: 1; } /* Browse by tags */ .article-tags { margin-top: var(--space-12); text-align: center; } .article-tags__heading { color: var(--brand); font-size: 1.25rem; font-weight: 700; margin: 0 0 var(--space-5); } .article-tags__list { display: flex; flex-wrap: wrap; gap: var(--space-2); justify-content: center; } .article-tags .chip--tag { background: var(--bg-surface); color: var(--text); border: 1px solid var(--border, #e5e7eb); } .article-tags a.chip--tag:hover { border-color: var(--brand); color: var(--brand); } .article-tags a.chip--tag.is-active { background: var(--brand); border-color: var(--brand); color: var(--brand-secondary); } /* Article detail */ .article-detail { padding: var(--space-8) 0; } .article-detail__container { max-width: 820px; } .article-detail__header { text-align: center; margin-bottom: var(--space-6); } .article-detail__title { font-size: 1.5rem; line-height: 1.3; font-weight: 700; color: var(--text); margin: 0 0 var(--space-3); } @media (min-width: 768px) { .article-detail__title { font-size: 1.85rem; } } .article-detail__byline { color: var(--text-2); font-size: .95rem; } .article-detail__byline strong { color: var(--text); } .article-hero { border-radius: var(--r); overflow: hidden; margin-bottom: var(--space-8); box-shadow: var(--shadow); } .article-hero img { width: 100%; height: auto; display: block; } .article-body__content { color: var(--text); line-height: 1.7; font-size: 1rem; } .article-body__content img { max-width: 100%; height: auto; border-radius: var(--r-sm); margin: var(--space-4) 0; } .article-body__content p { margin: 0 0 var(--space-4); } .article-body__content h2, .article-body__content h3 { margin: var(--space-6) 0 var(--space-3); color: var(--text); } .article-body__content a { color: var(--brand); text-decoration: underline; } .article-quote { border-left: 4px solid var(--brand); padding: var(--space-3) var(--space-5); margin: var(--space-6) 0; color: var(--text-2); font-style: italic; background: var(--brand-soft); border-radius: 0 var(--r-sm) var(--r-sm) 0; } .article-related { margin-top: var(--space-12); } .article-related__heading { font-size: 1.25rem; font-weight: 700; color: var(--brand); margin: 0 0 var(--space-6); text-align: center; } /* Trending card variant on detail page — date above title, no tag chip */ .article-card--trending .article-card__body { text-align: left; gap: var(--space-1); } .article-card__date { font-size: .8rem; color: var(--text-2); font-weight: 500; margin-bottom: var(--space-1); } .article-card--trending .article-card__title { text-align: left; margin: 0 0 var(--space-2); } .article-card--trending .article-card__byline { text-align: left; } /* Detail page chrome — breadcrumb, date, tags, share, prev/next */ .article-breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); font-size: .85rem; color: var(--text-2); margin-bottom: var(--space-5); } .article-breadcrumb a { color: var(--text-2); text-decoration: none; } .article-breadcrumb a:hover { color: var(--brand); } .article-breadcrumb__current { color: var(--text); max-width: 60%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .article-detail__date::before { content: '·'; margin: 0 var(--space-2); color: var(--text-2); } .article-detail__tags { margin-top: var(--space-3); display: flex; flex-wrap: wrap; gap: var(--space-2); justify-content: center; } .article-share { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-top: var(--space-8); padding-top: var(--space-5); border-top: 1px solid var(--border, #e5e7eb); } .article-share__label { font-size: .85rem; font-weight: 700; color: var(--text-2); margin-right: var(--space-1); } .article-share__btn { display: inline-flex; align-items: center; min-height: 36px; padding: var(--space-1) var(--space-4); border: 1px solid var(--border, #e5e7eb); border-radius: var(--r-pill, 999px); background: var(--bg-surface); color: var(--text); font-size: .85rem; font-weight: 600; text-decoration: none; cursor: pointer; transition: border-color .15s, color .15s; } .article-share__btn:hover { border-color: var(--brand); color: var(--brand); } .article-share__btn:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; } .article-share__copy.is-copied { border-color: var(--brand); color: var(--brand); } .article-nav { display: grid; grid-template-columns: 1fr; gap: var(--space-3); margin-top: var(--space-8); } @media (min-width: 768px) { .article-nav { grid-template-columns: 1fr 1fr; } } .article-nav__item { display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-4); border: 1px solid var(--border, #e5e7eb); border-radius: var(--r); text-decoration: none; color: inherit; transition: border-color .15s, box-shadow .15s; } .article-nav__item:hover { border-color: var(--brand); box-shadow: var(--shadow-md); } .article-nav__item:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; } .article-nav__item--next { text-align: right; } .article-nav__dir { font-size: .8rem; color: var(--text-2); font-weight: 600; } .article-nav__title { font-size: .95rem; color: var(--text); font-weight: 600; } /* FAQ accordion (migrated from blogs_faq_list) */ .article-faq { margin-top: var(--space-8); } .article-faq__heading { font-size: 1.25rem; font-weight: 700; color: var(--text); margin: 0 0 var(--space-4); } .article-faq__item { border: 1px solid var(--border, #e5e7eb); border-radius: var(--r); margin-bottom: var(--space-2); background: var(--bg-surface); } .article-faq__q { list-style: none; cursor: pointer; padding: var(--space-4); font-weight: 600; color: var(--text); display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); } .article-faq__q::-webkit-details-marker { display: none; } .article-faq__q::after { content: '+'; font-size: 1.3rem; color: var(--brand); line-height: 1; } .article-faq__item[open] .article-faq__q::after { content: '−'; } .article-faq__q:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; } .article-faq__a { padding: 0 var(--space-4) var(--space-4); color: var(--text-2); line-height: 1.6; } /* ───────────────────────────────────────────────────────────────────── uMoney wallet page (/umoney) ───────────────────────────────────────────────────────────────────── */ .um-page { background: #fff; min-height: 70vh; padding-bottom: 3rem; } .um-wrap { width: 100%; max-width: 600px; margin: 0 auto; padding: 0 15px; } /* Purple band that visually extends the site-header. Balance card straddles its bottom edge. */ .um-hero { background: var(--brand); height: 90px; } .um-balance-wrap { margin-top: -60px; position: relative; z-index: 2; } .um-balance-card { background: #fff; border-radius: var(--r-lg, 14px); padding: 1.25rem; box-shadow: 0 6px 18px rgba(0,0,0,.08); border: 1px solid var(--border-subtle, #ececec); } .um-balance-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; } .um-balance-info { flex: 1; min-width: 0; } .um-balance-label { margin: 0 0 .25rem; font-size: .92rem; font-weight: 600; color: var(--text-1, #1a1a1a); } .um-balance-amount { margin: 0; font-size: 1.75rem; font-weight: 800; color: var(--text-1, #1a1a1a); font-variant-numeric: tabular-nums; line-height: 1.1; } .um-balance-icon { flex-shrink: 0; } .um-add-btn { width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: .5rem; background: var(--brand); color: var(--brand-secondary); border: none; border-radius: var(--r-md, 10px); padding: .85rem 1rem; font-size: .98rem; font-weight: 600; cursor: pointer; transition: background var(--dur, .2s) var(--ease, ease); } .um-add-btn:hover { background: var(--brand-hover, var(--brand)); } .um-add-btn:active { transform: translateY(1px); } .um-add-btn:focus-visible { outline: 3px solid var(--brand-soft); outline-offset: 2px; } .um-history { padding-top: 1.5rem; } .um-history-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0 .25rem .75rem; } .um-history-title { margin: 0; font-size: 1rem; font-weight: 700; color: var(--text-1, #1a1a1a); } .um-filter-pill { display: inline-flex; align-items: center; gap: .35rem; background: #fff; border: 1px solid var(--border, #e0e0e0); border-radius: var(--r-full, 999px); padding: .4rem .85rem; font-size: .88rem; font-weight: 600; color: var(--text-1, #1a1a1a); cursor: pointer; transition: border-color var(--dur, .2s) var(--ease, ease); } .um-filter-pill:hover { border-color: var(--brand); color: var(--brand); } .um-filter-pill:focus-visible { outline: 3px solid var(--brand-soft); outline-offset: 2px; } .um-history-list { display: flex; flex-direction: column; gap: .75rem; } .um-empty { padding: 3rem 1rem; text-align: center; color: var(--text-2, #666); } .um-empty-illu { margin-bottom: .5rem; opacity: .9; } .um-empty-text { margin: 0; font-size: 1rem; font-weight: 600; color: var(--text-1, #1a1a1a); } /* History rows — each row is its own bordered card (CI3 parity) */ .um-tx { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.25rem; background: #fff; border: 1px solid var(--border, #e0e0e0); border-radius: var(--r-md, 10px); } .um-tx-body { display: flex; flex-direction: column; gap: .4rem; min-width: 0; } .um-tx-id { font-size: .95rem; font-weight: 700; color: var(--text-1, #1a1a1a); } .um-tx-status { display: inline-flex; align-items: center; gap: .4rem; font-size: .9rem; font-weight: 600; } .um-tx-status svg { flex-shrink: 0; } .um-tx-status--completed { color: #2e7d32; } .um-tx-status--initialted { color: #c08a00; } .um-tx-status--failed { color: #c62828; } .um-tx-status--refund { color: #1565c0; } .um-tx-date { display: inline-flex; align-items: center; gap: .35rem; font-size: .82rem; color: var(--text-2, #666); } .um-tx-date svg { flex-shrink: 0; opacity: .65; } .um-tx-amount { font-size: 1.05rem; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--text-1, #1a1a1a); } /* Filter modal */ .um-filter-modal { border: none; border-radius: var(--r-lg, 14px); overflow: hidden; position: relative; } .um-filter-close { position: absolute; top: -44px; left: 50%; transform: translateX(-50%); width: 36px; height: 36px; border-radius: 50%; border: none; background: #fff; color: var(--text-1, #1a1a1a); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 4px 12px rgba(0,0,0,.15); } .um-filter-close:focus-visible { outline: 3px solid var(--brand-soft); outline-offset: 2px; } .um-filter-title { margin: 0 0 1rem; font-size: 1rem; font-weight: 700; color: var(--text-2, #777); } .um-filter-list { list-style: none; padding: 0; margin: 0; display: grid; gap: .35rem; } .um-filter-list input[type="radio"] { position: absolute; opacity: 0; pointer-events: none; } .um-filter-list label { display: flex; align-items: center; gap: .75rem; padding: .65rem .25rem; cursor: pointer; border-radius: var(--r-sm, 6px); } .um-filter-list label:hover { background: var(--surface-2, #f5f5f7); } .um-filter-icon { width: 28px; display: inline-flex; align-items: center; justify-content: center; color: var(--text-1, #333); } .um-filter-name { flex: 1; font-size: .98rem; font-weight: 600; color: var(--text-1, #1a1a1a); } .um-filter-dot { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--border, #cfcfcf); position: relative; transition: border-color var(--dur, .2s) var(--ease, ease); } .um-filter-list input[type="radio"]:checked + label .um-filter-dot { border-color: var(--brand); } .um-filter-list input[type="radio"]:checked + label .um-filter-dot::after { content: ""; position: absolute; inset: 4px; border-radius: 50%; background: var(--brand); } .um-filter-list input[type="radio"]:focus-visible + label { outline: 3px solid var(--brand-soft); outline-offset: 2px; } .um-filter-actions { display: flex; gap: .75rem; padding: 1rem; border-top: 1px solid var(--border-subtle, #f0f0f0); } .um-filter-btn { flex: 1; border: none; border-radius: var(--r-md, 10px); padding: .8rem 1rem; font-size: .98rem; font-weight: 600; cursor: pointer; transition: background var(--dur, .2s) var(--ease, ease); } .um-filter-btn--clear { background: var(--surface-2, #eef0f3); color: var(--text-1, #1a1a1a); } .um-filter-btn--clear:hover { background: var(--border-subtle, #e3e6ea); } .um-filter-btn--apply { background: var(--brand); color: var(--brand-secondary); } .um-filter-btn--apply:hover { background: var(--brand-hover, var(--brand)); } .um-filter-btn:focus-visible { outline: 3px solid var(--brand-soft); outline-offset: 2px; } @media (min-width: 768px) { .um-hero { height: 110px; } .um-balance-wrap { margin-top: -70px; } .um-balance-card { padding: 1.5rem 1.75rem; } .um-balance-amount { font-size: 2.25rem; } .um-add-btn { padding: 1rem; font-size: 1.02rem; } .um-history-title { font-size: 1.1rem; } } /* Add-Money modal */ .um-add-modal { border: none; border-radius: var(--r-lg, 14px); overflow: hidden; } .um-add-modal .modal-body { padding: 1.25rem; } .um-add-head { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: 1.25rem; } .um-add-title { margin: 0; font-size: 1.1rem; font-weight: 700; color: var(--text-1, #1a1a1a); flex: 1 1 auto; min-width: 0; order: 1; text-align: left; } .um-add-head .um-add-back, .um-add-head .icon-btn-close { order: 2; } .um-add-balance { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .85rem 1rem; border: 1px solid var(--border, #e0e0e0); border-radius: var(--r-md, 10px); margin-bottom: 1rem; font-size: .98rem; } .um-add-balance span { color: var(--text-1, #1a1a1a); font-weight: 600; } .um-add-balance strong { font-size: 1.05rem; font-weight: 800; font-variant-numeric: tabular-nums; } .um-add-amount-box { border: 1px solid var(--border, #e0e0e0); border-radius: var(--r-md, 10px); padding: 1.25rem 1rem; margin-bottom: 1rem; background: #fff; } .um-add-custom { padding-top: .5rem; } .um-add-custom-hint { display: block; text-align: center; color: var(--text-2, #888); font-size: .82rem; margin-bottom: .75rem; } .um-amount-field { display: block; border: 1px solid var(--border, #d0d0d0); border-radius: var(--r-md, 10px); padding: .55rem .9rem .5rem; position: relative; } .um-amount-field:focus-within { border-color: var(--brand); } .um-amount-label { display: block; font-size: .82rem; color: var(--text-1, #1a1a1a); font-weight: 600; margin-bottom: .15rem; } .um-amount-input-row { display: flex; align-items: center; gap: .35rem; } .um-amount-prefix { font-size: 1.1rem; font-weight: 700; color: var(--text-1, #1a1a1a); } .um-amount-input { flex: 1; border: none; outline: none; background: transparent; font-size: 1.1rem; font-weight: 700; color: var(--text-1, #1a1a1a); padding: 0; min-width: 0; font-variant-numeric: tabular-nums; } .um-amount-input::-webkit-outer-spin-button, .um-amount-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .um-amount-input[type=number] { -moz-appearance: textfield; appearance: textfield; } .um-add-proceed { margin-top: .5rem; } .um-add-secure { margin-top: 1.25rem; text-align: center; color: var(--text-2, #888); } .um-add-secure p { display: inline-flex; align-items: center; gap: .35rem; margin: 0 0 .35rem; font-size: .8rem; } .um-add-secure img { max-height: 22px; opacity: .8; } .um-package-options { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; margin-bottom: 1rem; } /* ───────────────────────────────────────────────────────────── Canonical nav icons: back chevron (left of page) + close X (right of modal). Single source of truth for size, border, focus across the app. No hover bg. ───────────────────────────────────────────────────────────── */ .icon-btn-back, .icon-btn-close { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; border-radius: 50%; background: transparent; border: 1px solid var(--border-subtle, #e5e5e5); color: var(--text-1, #1a1a1a); text-decoration: none; cursor: pointer; flex-shrink: 0; } .icon-btn-back:focus-visible, .icon-btn-close:focus-visible { outline: 2px solid var(--brand-soft, color-mix(in srgb, var(--brand) 25%, transparent)); outline-offset: 2px; } /* Text+icon back link (chevron + label, e.g. "Packs", "All Subscriptions") */ .icon-link-back { display: inline-flex; align-items: center; gap: .4rem; background: transparent; border: none; padding: .25rem 0; color: var(--text-secondary, var(--text-2, #666)); text-decoration: none; font-weight: 500; cursor: pointer; transition: color .15s ease; } .icon-link-back:hover { color: var(--brand); } .icon-link-back:focus-visible { outline: 2px solid var(--brand-soft); outline-offset: 2px; border-radius: var(--r-sm, 6px); } /* Modal header: pin close icon to the RIGHT regardless of HTML order */ .popup-sheet__header { display: flex; align-items: flex-start; justify-content: space-between; gap: .75rem; } .popup-sheet__header .popup-sheet__title { order: 1; flex: 1 1 auto; min-width: 0; text-align: left; } .popup-sheet__header .popup-sheet__back, .popup-sheet__header .icon-btn-close { order: 2; }