/** * Pickup storefront — dark theme (Uber Eats–inspired), Bootstrap 5 companion styles. * Use with . */ :root { /* Match front site orange (public/assets/front/style.css — #ff6600) */ --pickup-accent: #ff6600; --pickup-accent-rgb: 255, 102, 0; --pickup-accent-hover: #e65c00; --pickup-surface: #121212; --pickup-surface-elevated: #1c1c1c; --pickup-surface-card: #1a1a1a; --pickup-border: #2d2d2d; --pickup-text-muted: #a8a8a8; --pickup-radius: 12px; --pickup-radius-sm: 10px; --pickup-shadow: 0 4px 24px rgba(0, 0, 0, 0.45); --pickup-font: "DM Sans", system-ui, -apple-system, sans-serif; } .pickup-page { font-family: var(--pickup-font); background-color: var(--pickup-surface); color: #f3f3f3; min-height: 100vh; } .pickup-navbar { background: rgba(18, 18, 18, 0.92) !important; backdrop-filter: blur(12px); border-bottom: 1px solid var(--pickup-border); } .pickup-navbar .navbar-brand { font-weight: 700; letter-spacing: -0.02em; } .pickup-cart-nav-item { display: flex; align-items: center; } .pickup-cart-trigger { position: relative; width: 50px; height: 50px; border: 1px solid rgba(var(--pickup-accent-rgb), 0.45); border-radius: 15px; background: rgba(var(--pickup-accent-rgb), 0.12); color: var(--pickup-accent); display: inline-flex; align-items: center; justify-content: center; padding: 0; margin-right: 0.35rem; } .pickup-cart-trigger:hover, .pickup-cart-trigger:focus-visible { background: rgba(var(--pickup-accent-rgb), 0.2); border-color: rgba(var(--pickup-accent-rgb), 0.7); color: var(--pickup-accent); } .pickup-cart-trigger:active { transform: translateY(0); box-shadow: 0 4px 10px rgba(var(--pickup-accent-rgb), 0.2); } .pickup-cart-trigger__icon i { font-size: 1.03rem; font-weight: 700; } .pickup-cart-trigger__count { position: absolute; top: -6px; right: -6px; min-width: 19px; height: 19px; border-radius: 999px; background: var(--pickup-accent); color: #fff; font-size: 0.7rem; font-weight: 700; line-height: 1; display: inline-flex; align-items: center; justify-content: center; } .pickup-btn-primary { --bs-btn-bg: var(--pickup-accent); --bs-btn-border-color: var(--pickup-accent); --bs-btn-hover-bg: var(--pickup-accent-hover); --bs-btn-hover-border-color: var(--pickup-accent-hover); --bs-btn-active-bg: var(--pickup-accent-hover); --bs-btn-active-border-color: var(--pickup-accent-hover); font-weight: 600; border-radius: 999px; padding: 0.5rem 1.25rem; } .pickup-btn-outline { --bs-btn-color: #fff; --bs-btn-border-color: var(--pickup-border); --bs-btn-hover-bg: rgba(255, 255, 255, 0.06); --bs-btn-hover-border-color: #444; border-radius: 999px; font-weight: 500; } .pickup-user-nav-item { display: flex; align-items: center; } .pickup-user-trigger-mobile { width: 50px; height: 50px; border: 1px solid rgba(var(--pickup-accent-rgb), 0.45); border-radius: 15px; background: rgba(var(--pickup-accent-rgb), 0.12); color: var(--pickup-accent); display: inline-flex; align-items: center; justify-content: center; padding: 0; transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease; } .pickup-user-trigger-mobile:hover, .pickup-user-trigger-mobile:focus-visible { background: rgba(var(--pickup-accent-rgb), 0.2); border-color: rgba(var(--pickup-accent-rgb), 0.7); color: var(--pickup-accent); } .pickup-user-trigger-mobile i { font-size: 1rem; } .pickup-user-trigger { min-height: 50px; border: 1px solid rgba(var(--pickup-accent-rgb), 0.45); border-radius: 15px; background: rgba(var(--pickup-accent-rgb), 0.12); color: var(--pickup-accent); display: inline-flex; align-items: center; gap: 0.55rem; font-size: 1.02rem; font-weight: 600; line-height: 1; padding: 0.35rem 0.9rem; transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease; } .pickup-user-trigger:hover, .pickup-user-trigger:focus-visible { background: rgba(var(--pickup-accent-rgb), 0.2); border-color: rgba(var(--pickup-accent-rgb), 0.7); color: var(--pickup-accent); box-shadow: 0 8px 20px rgba(var(--pickup-accent-rgb), 0.22); } .pickup-user-trigger::after { margin-left: 0.2rem; } .pickup-user-trigger__icon { font-size: 1.18rem; } .pickup-user-trigger__name { max-width: 170px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pickup-guest-user-trigger { width: 50px; height: 50px; border: 1px solid rgba(var(--pickup-accent-rgb), 0.45); border-radius: 15px; background: rgba(var(--pickup-accent-rgb), 0.12); color: var(--pickup-accent); display: inline-flex; align-items: center; justify-content: center; padding: 0; transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease; } .pickup-guest-user-trigger:hover, .pickup-guest-user-trigger:focus-visible { background: rgba(var(--pickup-accent-rgb), 0.2); border-color: rgba(var(--pickup-accent-rgb), 0.7); color: var(--pickup-accent); } .pickup-guest-user-trigger i { font-size: 1.25rem; } .pickup-user-dropdown { --bs-dropdown-min-width: 210px; background: var(--pickup-surface-elevated); border: 1px solid var(--pickup-border); border-radius: 14px; padding: 0.45rem; box-shadow: var(--pickup-shadow); margin-top: 0.7rem !important; } .pickup-user-dropdown .dropdown-divider { border-top-color: var(--pickup-border); margin: 0.35rem 0; } .pickup-user-dropdown__item { display: flex; align-items: center; gap: 0.7rem; color: #ececec; font-size: 0.94rem; font-weight: 500; border-radius: 10px; padding: 0.65rem 0.75rem; } .pickup-user-dropdown__icon { width: 1rem; text-align: center; color: #9ca3af; flex-shrink: 0; } .pickup-user-dropdown__item:hover, .pickup-user-dropdown__item:focus { background: rgba(var(--pickup-accent-rgb), 0.16); color: #fff; } .pickup-user-dropdown__item:hover .pickup-user-dropdown__icon, .pickup-user-dropdown__item:focus .pickup-user-dropdown__icon { color: var(--pickup-accent); } .pickup-user-dropdown__item--signout { width: 100%; border: none; background: transparent; } @media (max-width: 991.98px) { .pickup-user-dropdown { margin-top: 0.55rem !important; } } .pickup-card-food { background: var(--pickup-surface-card); border: 1px solid var(--pickup-border); border-radius: var(--pickup-radius); overflow: hidden; transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease; } .pickup-card-food:hover { transform: translateY(-3px); box-shadow: var(--pickup-shadow); border-color: rgba(var(--pickup-accent-rgb), 0.35); } .pickup-card-food .ratio img { object-fit: cover; transition: transform 0.35s ease; } .pickup-card-food:hover .ratio img { transform: scale(1.04); } /* —— Menu toolbar & search (reference layout) —— */ .pickup-menu-toolbar { gap: 1rem; } .pickup-menu-title { font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; } .pickup-menu-hours { font-size: 0.875rem; color: var(--pickup-text-muted); } .pickup-search-wrap { position: relative; flex: 1; min-width: 0; max-width: 420px; } .pickup-search-wrap .fa-magnifying-glass { position: absolute; left: 1rem; top: 50%; transform: translateY(-50%); color: var(--pickup-text-muted); font-size: 0.9rem; pointer-events: none; } .pickup-search-input { width: 100%; padding: 0.65rem 1rem 0.65rem 2.65rem; border-radius: 999px; border: 1px solid var(--pickup-border); background: var(--pickup-surface-elevated); color: #fafafa; font-size: 0.9rem; transition: border-color 0.2s ease, box-shadow 0.2s ease; } .pickup-search-input::placeholder { color: #777; } .pickup-search-input:focus { outline: none; border-color: var(--pickup-accent); box-shadow: 0 0 0 0.2rem rgba(var(--pickup-accent-rgb), 0.2); } /* Category bar: text + underline active */ .pickup-cat-bar { display: flex; align-items: center; gap: 0.35rem; border-bottom: 1px solid var(--pickup-border); padding-bottom: 0.15rem; } .pickup-cat-bar-scroll { flex: 1; min-width: 0; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; } .pickup-cat-bar-scroll::-webkit-scrollbar { display: none; } .pickup-cat-bar-inner { display: flex; align-items: center; gap: 0.25rem; flex-wrap: nowrap; padding: 0.25rem 0; } .pickup-cat-list-btn { flex-shrink: 0; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--pickup-border); background: var(--pickup-surface-elevated); color: #ccc; display: inline-flex; align-items: center; justify-content: center; transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease; } .pickup-cat-list-btn:hover { border-color: #555; color: #fff; } .pickup-cat-link { flex-shrink: 0; border: none; background: none; color: var(--pickup-text-muted); font-size: 0.95rem; font-weight: 500; padding: 0.5rem 0.65rem 0.65rem; margin: 0 0.15rem; white-space: nowrap; border-bottom: 3px solid transparent; margin-bottom: -2px; transition: color 0.2s ease, border-color 0.2s ease; } .pickup-cat-link:hover { color: #e8e8e8; } .pickup-cat-link.active { color: #fff; font-weight: 700; border-bottom-color: var(--pickup-accent); } .pickup-cat-arrow { flex-shrink: 0; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--pickup-border); background: var(--pickup-surface-elevated); color: #ccc; display: inline-flex; align-items: center; justify-content: center; padding: 0; transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease; } .pickup-cat-arrow:hover { border-color: var(--pickup-accent); color: var(--pickup-accent); } /* Menu: banner matches main container width (same as menu grid) */ .pickup-menu-banner-shell { width: 100%; max-width: none; } .pickup-menu-hero { border-radius: var(--pickup-radius); overflow: hidden; border: 1px solid var(--pickup-border); box-shadow: var(--pickup-shadow); } /* Slightly shorter banner than default 21×9 (~43%) / 16×9 (~56%) */ .pickup-menu-hero .pickup-menu-banner-ratio { --bs-aspect-ratio: 34%; } .pickup-menu-hero .pickup-menu-banner-ratio-mobile { --bs-aspect-ratio: 48%; } @media (min-width: 992px) { .pickup-menu-hero .pickup-menu-banner-ratio { --bs-aspect-ratio: 32%; } } /* Single-page category blocks + scroll offset for sticky nav */ .pickup-menu-section { scroll-margin-top: 130px; } @media (min-width: 992px) { .pickup-menu-section { scroll-margin-top: 145px; } } .pickup-menu-section-title { font-size: 1.25rem; font-weight: 700; letter-spacing: -0.02em; margin-bottom: 0.75rem; margin-top: 0.25rem; color: #fafafa; } /* Horizontal menu row card — uniform height */ .pickup-menu-item-col { display: flex; } .pickup-menu-row-card { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: stretch; width: 100%; background: var(--pickup-surface-card); border: 1px solid var(--pickup-border); border-radius: 14px; overflow: hidden; min-height: 158px; height: 100%; transition: box-shadow 0.2s ease, border-color 0.2s ease, transform 0.2s ease; } .pickup-menu-row-card:hover { border-color: rgba(var(--pickup-accent-rgb), 0.35); box-shadow: var(--pickup-shadow); transform: translateY(-1px); } .pickup-menu-row-card-clickable { cursor: pointer; } .pickup-menu-row-body { flex: 1 1 0; min-width: 0; min-height: 0; padding: 1rem 0.75rem 1rem 1.15rem; display: flex; flex-direction: column; overflow: hidden; } .pickup-menu-row-name { font-size: 1.05rem; font-weight: 700; letter-spacing: -0.02em; margin-bottom: 0.25rem; color: #fafafa; } .pickup-menu-row-price { font-size: 0.95rem; font-weight: 600; color: #e0e0e0; margin-bottom: 0; flex-shrink: 0; } .pickup-menu-row-desc { font-size: 0.8125rem; line-height: 1.45; color: var(--pickup-text-muted); margin-top: 0.35rem; margin-bottom: 0; flex: 0 1 auto; min-height: 0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; word-break: break-word; } .pickup-menu-row-media { position: relative; flex: 0 0 132px; width: 132px; max-width: 132px; align-self: stretch; min-height: 158px; background: #0a0a0a; } @media (min-width: 576px) { .pickup-menu-row-media { flex: 0 0 148px; width: 148px; max-width: 148px; } } .pickup-menu-row-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .pickup-menu-row-card--shimmer { background: #1d1d1d; } .pickup-menu-row-media--shimmer { background: #242424; } .pickup-menu-fab-add { position: absolute; bottom: 10px; right: 10px; width: 40px; height: 40px; border-radius: 50%; border: none; background: #2a2a2a; color: #fff; font-size: 1.25rem; font-weight: 600; line-height: 1; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.45); transition: background 0.2s ease, transform 0.15s ease, color 0.2s ease; } .pickup-menu-fab-add:hover { background: var(--pickup-accent); color: #111; transform: scale(1.05); } .pickup-menu-fab-add.has-qty { font-size: 0.95rem; background: var(--pickup-accent); color: #111; } .pickup-menu-fab-qty { position: absolute; bottom: 10px; right: 10px; display: inline-flex; align-items: center; border-radius: 999px; background: var(--pickup-surface-elevated); border: 1px solid var(--pickup-border); padding: 0.28rem 0.34rem; gap: 0.4rem; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.45); } .pickup-menu-fab-qty-btn { width: 24px; height: 24px; border-radius: 50%; border: none; background: #252525; color: #f3f3f3; display: inline-flex; align-items: center; justify-content: center; font-size: 0.95rem; font-weight: 700; line-height: 1; } .pickup-menu-fab-qty-btn:hover { background: #2f2f2f; color: #fff; } .pickup-menu-fab-qty-dec.is-delete { font-size: 0.78rem; } .pickup-menu-fab-qty-count { min-width: 0.95rem; text-align: center; font-size: 0.9rem; color: #f3f3f3; font-weight: 700; } .pickup-menu-item-col.is-filtered-out { display: none !important; } .pickup-menu-empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; } .pickup-menu-empty-state__icon { width: 78px; height: 78px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: rgba(var(--pickup-accent-rgb), 0.16); border: 1px solid rgba(var(--pickup-accent-rgb), 0.38); color: var(--pickup-accent); font-size: 1.75rem; margin-bottom: 0.95rem; } .pickup-menu-empty-state__title { color: #f2f2f2; font-size: 1.08rem; font-weight: 600; max-width: 32rem; line-height: 1.4; } .pickup-menu-empty-state__keyword { color: #fff; font-weight: 700; } .pickup-menu-empty-state__reset { margin-top: 0.9rem; border-color: rgba(var(--pickup-accent-rgb), 0.5); color: var(--pickup-accent); background: rgba(var(--pickup-accent-rgb), 0.12); font-weight: 700; padding: 0.5rem 1.1rem; } .pickup-menu-empty-state__reset:hover, .pickup-menu-empty-state__reset:focus-visible { border-color: rgba(var(--pickup-accent-rgb), 0.75); color: #fff; background: rgba(var(--pickup-accent-rgb), 0.24); } /* Checkout order summary — unit × qty = subtotal (aligned with cart drawer) */ .pickup-checkout-line-formula { font-size: 0.875rem; line-height: 1.35; font-weight: 600; } /* Checkout payment panel (aligned with front payment fields) */ .pickup-checkout-payment-panel { background: var(--pickup-surface-elevated); border: 1px solid var(--pickup-border); border-radius: var(--pickup-radius); padding: 1.25rem 1.35rem; } .pickup-checkout-payment-panel .pickup-form-control.is-invalid { border-color: rgba(255, 110, 110, 0.85) !important; } .pickup-checkout-payment-panel .invalid-feedback { color: #ff9a9a; } .pickup-category-wrap { position: sticky; top: 75px; z-index: 1010; background: linear-gradient(to bottom, var(--pickup-surface) 70%, transparent); padding-bottom: 0.5rem; margin-left: -0.75rem; margin-right: -0.75rem; padding-left: 0.75rem; padding-right: 0.75rem; } @media (min-width: 992px) { .pickup-category-wrap { top: 90px; } } .pickup-category-scroll { overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: none; -ms-overflow-style: none; } .pickup-category-scroll::-webkit-scrollbar { display: none; } .pickup-pill { white-space: nowrap; border-radius: 999px; padding: 0.45rem 1rem; font-size: 0.875rem; font-weight: 500; border: 1px solid var(--pickup-border); background: var(--pickup-surface-elevated); color: #e5e5e5; transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease; } .pickup-pill:hover, .pickup-pill.active { background: rgba(var(--pickup-accent-rgb), 0.15); border-color: var(--pickup-accent); color: #fff; } .pickup-form-control, .pickup-form-select { background-color: #141414 !important; border: 1px solid var(--pickup-border) !important; color: #fafafa !important; border-radius: var(--pickup-radius-sm) !important; padding: 0.65rem 0.9rem; } .pickup-form-control:focus, .pickup-form-select:focus { border-color: var(--pickup-accent) !important; box-shadow: 0 0 0 0.2rem rgba(var(--pickup-accent-rgb), 0.25) !important; } .pickup-form-label { font-size: 0.8125rem; font-weight: 600; color: var(--pickup-text-muted); margin-bottom: 0.35rem; } .pickup-banner { border-radius: var(--pickup-radius); overflow: hidden; border: 1px solid var(--pickup-border); box-shadow: var(--pickup-shadow); } .pickup-rating-badge { background: rgba(0, 0, 0, 0.55); backdrop-filter: blur(8px); border-radius: 8px; padding: 0.25rem 0.5rem; font-size: 0.8125rem; } .pickup-badge-status { font-weight: 600; font-size: 0.75rem; padding: 0.35em 0.65em; border-radius: 6px; } .pickup-badge-done { background: rgba(var(--pickup-accent-rgb), 0.2); color: #ffb380; } .pickup-offcanvas-cart { --bs-offcanvas-width: min(420px, 100vw); background: var(--pickup-surface) !important; color: #f3f3f3 !important; border-left: 1px solid var(--pickup-border) !important; } .pickup-offcanvas-cart .offcanvas-header { border-bottom: none; } .pickup-cart-header { padding: 1.15rem 1rem 0.65rem; } .pickup-cart-title { margin-left: 0.5rem; } .pickup-cart-actions { margin-left: auto; } .pickup-cart-icon-btn { width: 36px; height: 36px; border-radius: 50%; border: none; background: var(--pickup-surface-elevated); color: #f3f3f3; display: inline-flex; align-items: center; justify-content: center; font-size: 1.1rem; } .pickup-cart-icon-btn:hover { background: #2b2b2b; color: #fff; } .pickup-cart-dropdown { --bs-dropdown-min-width: 9.5rem; background: var(--pickup-surface-elevated); border: 1px solid var(--pickup-border); border-radius: 10px; padding: 0.35rem; } .pickup-cart-clear-btn { color: #ff6b6b; font-size: 0.9rem; font-weight: 600; border-radius: 8px; } .pickup-cart-clear-btn:hover, .pickup-cart-clear-btn:focus { color: #ff7d7d; background: rgba(255, 77, 77, 0.12); } .pickup-cart-scroll { padding: 0 1rem 1rem; } /* Empty cart — centered utensils + caption (muted; dark offcanvas) */ .pickup-cart-empty-state { flex: 1 1 auto; min-height: clamp(200px, 38vh, 360px); } .pickup-cart-empty-state__symbol { display: inline-flex; align-items: center; justify-content: center; font-size: clamp(2.75rem, 8vw, 3.75rem); line-height: 1; color: #6e6e6e; } .pickup-cart-empty-state__caption { font-size: 0.9375rem; font-weight: 500; letter-spacing: 0.01em; color: var(--pickup-text-muted); max-width: 16rem; } @media (min-width: 576px) { .pickup-cart-empty-state__caption { font-size: 1rem; } } .pickup-cart-store { display: flex; align-items: center; gap: 0.75rem; padding: 0.35rem 0 1rem; } .pickup-cart-store-media { width: 52px; height: 52px; border-radius: 50%; overflow: hidden; background: #242424; flex-shrink: 0; } .pickup-cart-store-media img { width: 100%; height: 100%; object-fit: cover; } .pickup-cart-store-name { font-size: 1.15rem; line-height: 1.2; font-weight: 700; letter-spacing: -0.03em; color: #fafafa; } .pickup-cart-store-address { font-size: 0.875rem; color: var(--pickup-text-muted); } .pickup-cart-items { margin-top: 0.4rem; } .pickup-cart-item { display: flex; align-items: flex-start; gap: 0.85rem; padding: 0.7rem 0; } .pickup-cart-item-media { width: 56px; height: 56px; border-radius: 50%; overflow: hidden; flex-shrink: 0; background: #242424; } .pickup-cart-item-media img { width: 100%; height: 100%; object-fit: cover; } .pickup-cart-item-main { flex: 1; min-width: 0; } .pickup-cart-item-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.75rem; } .pickup-cart-item-qty-block { display: flex; flex-direction: column; align-items: flex-end; flex-shrink: 0; max-width: min(100%, 200px); } .pickup-cart-item-name { font-size: 1rem; font-weight: 700; color: #fafafa; line-height: 1.25; } .pickup-cart-item-price { font-size: 0.875rem; font-weight: 600; color: #e0e0e0; line-height: 1.35; margin-top: 0.25rem; white-space: normal; } .pickup-cart-qty-control { display: inline-flex; align-items: center; border-radius: 999px; background: var(--pickup-surface-elevated); border: 1px solid var(--pickup-border); padding: 0.3rem 0.38rem; gap: 0.45rem; flex-shrink: 0; } .pickup-cart-qty-btn { width: 26px; height: 26px; border-radius: 50%; border: none; background: #252525; color: #f3f3f3; display: inline-flex; align-items: center; justify-content: center; font-size: 1rem; font-weight: 700; line-height: 1; opacity: 1 !important; } .pickup-cart-qty-delete { font-size: 0.8rem; } .pickup-cart-qty-btn:disabled { color: #f3f3f3; cursor: default; } .pickup-cart-qty-count { min-width: 1rem; text-align: center; font-size: 0.95rem; color: #f3f3f3; font-weight: 700; } .pickup-cart-footer { border-top: none; padding: 0.95rem 1rem 1.15rem; background: var(--pickup-surface); } .pickup-cart-subtotal-row { display: flex; align-items: center; justify-content: space-between; font-size: 1.125rem; font-weight: 700; letter-spacing: -0.02em; color: #fafafa; margin-bottom: 0.8rem; } .pickup-cart-checkout-btn { border: 1px solid var(--pickup-accent); border-radius: 999px; background: var(--pickup-accent); color: #111; font-size: 1rem; font-weight: 700; letter-spacing: 0; padding: 0.68rem 1rem; } .pickup-cart-checkout-btn:hover, .pickup-cart-checkout-btn:focus-visible { background: var(--pickup-accent-hover); border-color: var(--pickup-accent-hover); color: #111; } @media (max-width: 767.98px) { .pickup-cart-store-name { font-size: 1.1rem; } } .pickup-modal-dark .modal-content { background: #161616; border: 1px solid var(--pickup-border); border-radius: var(--pickup-radius); } .pickup-modal-dark .modal-header { border-bottom-color: var(--pickup-border); } .pickup-modal-dark .modal-footer { border-top-color: var(--pickup-border); } .pickup-modal-img-col { min-height: 220px; } .pickup-modal-img-frame { position: relative; width: 100%; aspect-ratio: 1 / 1; min-height: 200px; max-height: min(100vw, 420px); } .pickup-modal-img-el { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; } .pickup-item-modal-close-mobile { position: absolute; top: 0.75rem; right: 0.75rem; z-index: 4; opacity: 0.9; } @media (max-width: 767.98px) { .pickup-modal-dark:not(.pickup-auth-modal) .modal-dialog { margin: 0; } .pickup-modal-dark:not(.pickup-auth-modal) .modal-content { min-height: 100dvh; border-radius: 0; } .pickup-modal-dark:not(.pickup-auth-modal) .modal-content > .row.g-0 { min-height: 100dvh; display: flex; flex-direction: column; } .pickup-modal-dark:not(.pickup-auth-modal) .modal-content > .row.g-0 > .col-md-7 { min-height: 0; flex: 1 1 auto; } .pickup-modal-dark:not(.pickup-auth-modal) .modal-content > .row.g-0 > .col-md-7 .modal-body { overflow-y: auto; } .pickup-modal-dark:not(.pickup-auth-modal) .modal-content > .row.g-0 > .col-md-7 .modal-footer { margin-top: auto; background: #161616; padding-bottom: calc(0.75rem + env(safe-area-inset-bottom)); } } .pickup-stepper { display: flex; align-items: flex-start; justify-content: space-between; position: relative; gap: 0.5rem; } .pickup-stepper::before { content: ""; position: absolute; top: 18px; left: 12%; right: 12%; height: 3px; background: var(--pickup-border); border-radius: 2px; z-index: 0; } .pickup-stepper-progress { position: absolute; top: 18px; left: 12%; width: 50%; height: 3px; background: var(--pickup-accent); border-radius: 2px; z-index: 0; transition: width 0.4s ease; } /* Five-step lifecycle (pending → completed); tighter track so icons align. */ .pickup-stepper.pickup-stepper--five::before { left: 6%; right: 6%; } .pickup-stepper.pickup-stepper--five .pickup-stepper-progress { left: 6%; /* Track matches ::before (inset 6% each side); width is fraction of that span only — avoids overflow at 100%. */ width: calc((100% - 12%) * var(--pickup-progress, 0)); max-width: calc(100% - 12%); } .pickup-stepper.pickup-stepper--five .pickup-step-label { max-width: 4.5rem; font-size: 0.65rem; } @media (min-width: 576px) { .pickup-stepper.pickup-stepper--five .pickup-step-label { max-width: 5.5rem; font-size: 0.7rem; } } .pickup-step { flex: 1; text-align: center; position: relative; z-index: 1; } .pickup-step-icon { width: 38px; height: 38px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--pickup-surface-elevated); border: 2px solid var(--pickup-border); margin-bottom: 0.5rem; font-size: 0.9rem; transition: border-color 0.2s ease, background 0.2s ease; } .pickup-step.done .pickup-step-icon, .pickup-step.active .pickup-step-icon { border-color: var(--pickup-accent); background: rgba(var(--pickup-accent-rgb), 0.2); color: var(--pickup-accent); } .pickup-step-label { font-size: 0.75rem; color: var(--pickup-text-muted); max-width: 100px; margin: 0 auto; line-height: 1.25; } .pickup-step.done .pickup-step-label, .pickup-step.active .pickup-step-label { color: #e5e5e5; font-weight: 600; } .pickup-sticky-cart-mobile { position: fixed; bottom: calc(0.8rem + env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%); width: min(calc(100% - 1.25rem), 380px); z-index: 1040; padding: 0; background: transparent; border-top: 0; } .pickup-sticky-cart-mobile__btn { width: 100%; margin: 0; border: none; border-radius: 13px; background: var(--pickup-accent); color: #fff; padding: 0.38rem 0.4rem 0.38rem 0.62rem; display: flex; align-items: center; justify-content: space-between; gap: 0.45rem; box-shadow: 0 8px 18px rgba(var(--pickup-accent-rgb), 0.32); transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease; padding: 12px 16px; } .pickup-sticky-cart-mobile__btn:hover, .pickup-sticky-cart-mobile__btn:focus-visible { transform: translateY(-1px); filter: brightness(1.02); box-shadow: 0 12px 28px rgba(var(--pickup-accent-rgb), 0.4); } .pickup-sticky-cart-mobile__summary { display: inline-flex; align-items: center; gap: 0.45rem; min-width: 0; } .pickup-sticky-cart-mobile__icon-wrap { position: relative; width: 17px; height: 17px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; } .pickup-sticky-cart-mobile__icon-wrap i { font-size: 0.8rem; } .pickup-sticky-cart-mobile__badge { position: absolute; top: -5px; right: -6px; min-width: 13px; height: 13px; border-radius: 999px; background: #fff; color: var(--pickup-accent); border: 1px solid rgba(var(--pickup-accent-rgb), 0.18); font-size: 0.56rem; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; line-height: 1; } .pickup-sticky-cart-mobile__total { font-size: 1rem; font-weight: 700; letter-spacing: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pickup-sticky-cart-mobile__cta { border-radius: 9px; padding: 0.42rem 0.75rem; background: rgba(255, 255, 255, 0.2); font-size: 0.75rem; font-weight: 700; display: inline-flex; align-items: center; gap: 0.4rem; flex-shrink: 0; } @media (max-width: 767.98px) { .pickup-sticky-cart-mobile { width: min(calc(100% - 1rem), 360px); } .pickup-sticky-cart-mobile__btn { border-radius: 12px; padding: 12px 16px; /* padding: 0.34rem 0.36rem 0.34rem 0.56rem; */ } .pickup-sticky-cart-mobile__total { font-size: 1rem; } .pickup-sticky-cart-mobile__cta { font-size: 0.72rem; padding: 0.38rem 0.65rem; } } .pickup-skeleton { background: linear-gradient( 90deg, #222 0%, #2a2a2a 40%, #222 80% ); background-size: 200% 100%; animation: pickup-shimmer 1.2s ease-in-out infinite; border-radius: 8px; } @keyframes pickup-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } /* Centered dashboard column: max width + side gutters (profile & orders). */ .pickup-dashboard-shell { width: 100%; max-width: 1040px; margin-left: auto; margin-right: auto; padding-left: clamp(1rem, 4vw, 2rem); padding-right: clamp(1rem, 4vw, 2rem); padding-bottom: 1.5rem; } @media (min-width: 1200px) { .pickup-dashboard-shell { max-width: 1080px; } } @media (min-width: 1400px) { .pickup-dashboard-shell { max-width: 1120px; } } .pickup-dashboard-wrap { margin: 0; } .pickup-dashboard-aside { padding-left: 0; padding-right: 0.75rem; } @media (min-width: 992px) { .pickup-dashboard-aside { padding-right: 0.5rem; } } .pickup-dashboard-main { padding-left: 0; padding-right: 0; } @media (max-width: 991.98px) { .pickup-dashboard-main { padding-left: 0.125rem; padding-right: 0.125rem; padding-bottom: calc(5rem + env(safe-area-inset-bottom)); } } .pickup-dashboard-sidebar-card { background: var(--pickup-surface-card); border: 1px solid var(--pickup-border); border-radius: 16px; overflow: hidden; } .pickup-dashboard-userbox { display: flex; align-items: center; gap: 0.8rem; padding: 1rem; border-bottom: 1px solid var(--pickup-border); min-width: 0; } .pickup-dashboard-avatar { width: 44px; height: 44px; border-radius: 50%; background: var(--pickup-accent); color: #111; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; flex-shrink: 0; } .pickup-dashboard-usermeta { min-width: 0; flex: 1 1 auto; } .pickup-dashboard-username { font-size: 1rem; font-weight: 700; color: #f3f3f3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pickup-dashboard-userphone { font-size: 0.8125rem; color: var(--pickup-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pickup-dashboard-nav { padding: 0.4rem 0; } .pickup-dashboard-nav-link { display: flex; align-items: center; gap: 0.65rem; padding: 0.82rem 1rem; color: #dbdbdb; text-decoration: none; font-weight: 600; font-size: 0.95rem; border-left: 3px solid transparent; transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease; } .pickup-dashboard-nav-link i { width: 1rem; text-align: center; color: #a6a6a6; } .pickup-dashboard-nav-link:hover, .pickup-dashboard-nav-link.active { background: rgba(var(--pickup-accent-rgb), 0.14); border-left-color: var(--pickup-accent); color: #fff; } .pickup-dashboard-nav-link:hover i, .pickup-dashboard-nav-link.active i { color: var(--pickup-accent); } .pickup-dashboard-nav-link.is-static { color: #8f8f8f; } .pickup-dashboard-mobile-nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1055; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.45rem; padding: 0.62rem 0.7rem calc(0.62rem + env(safe-area-inset-bottom)); background: rgba(14, 14, 14, 0.96); border-top: 1px solid #2e2e2e; } .pickup-dashboard-mobile-nav__item { border: 1px solid #303030; border-radius: 12px; min-height: 48px; color: #9ca3af; background: #171717; text-decoration: none; font-size: 0.74rem; font-weight: 700; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.28rem; transition: color 0.2s ease, border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease; } .pickup-dashboard-mobile-nav__item i { font-size: 0.92rem; color: #9ca3af; transition: color 0.2s ease; } .pickup-dashboard-mobile-nav__item:hover, .pickup-dashboard-mobile-nav__item:focus-visible { color: #fff; border-color: #3a3a3a; background: #171717; box-shadow: none; } .pickup-dashboard-mobile-nav__item.active { color: #fff; border-color: rgba(var(--pickup-accent-rgb), 0.55); background: rgba(var(--pickup-accent-rgb), 0.14); box-shadow: 0 6px 16px rgba(var(--pickup-accent-rgb), 0.16); } .pickup-dashboard-mobile-nav__item:hover i, .pickup-dashboard-mobile-nav__item:focus-visible i { color: var(--pickup-accent); } .pickup-dashboard-mobile-nav__item.active i { color: var(--pickup-accent); } .pickup-profile-title { letter-spacing: -0.02em; color: #f8f8f8; } .pickup-profile-subtitle { color: #9ca3af !important; font-size: 0.84rem !important; } .pickup-profile-card { background: linear-gradient(160deg, #171717 0%, #141414 100%) !important; border-color: #313131 !important; border-radius: 14px !important; box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.03) !important; transition: box-shadow 0.2s ease, border-color 0.2s ease, transform 0.2s ease; } .pickup-profile-card:hover { border-color: #3a3a3a !important; box-shadow: 0 16px 34px rgba(0, 0, 0, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.035) !important; transform: translateY(-1px); } .pickup-profile-card-body { padding: 1.5rem !important; } .pickup-profile-form .pickup-form-label { display: inline-block; margin-bottom: 0.48rem; color: #d1d5db; font-size: 0.8rem; font-weight: 600; letter-spacing: 0.02em; text-transform: uppercase; } .pickup-profile-form .pickup-profile-field { margin-bottom: 1rem !important; } .pickup-profile-form .pickup-form-control { background-color: #141414 !important; border: 1px solid #343434 !important; color: #f5f5f5 !important; border-radius: 11px !important; padding: 0.72rem 0.9rem; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.02); transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease, transform 0.2s ease; } .pickup-profile-form .pickup-form-control:hover { border-color: #454545 !important; background-color: #171717 !important; } .pickup-profile-form .pickup-form-control:focus { border-color: rgba(var(--pickup-accent-rgb), 0.75) !important; box-shadow: 0 0 0 0.18rem rgba(var(--pickup-accent-rgb), 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.03) !important; transform: translateY(-1px); } .pickup-profile-form .pickup-form-control:disabled { background-color: #101010 !important; border-color: #2d2d2d !important; color: #9ca3af !important; opacity: 1; } .pickup-profile-save-btn { margin-top: 0.25rem; min-width: 140px; padding: 0.58rem 1.2rem; border-radius: 10px !important; font-weight: 700; letter-spacing: 0.01em; box-shadow: 0 8px 18px rgba(var(--pickup-accent-rgb), 0.26); transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease; } .pickup-profile-save-btn:hover, .pickup-profile-save-btn:focus-visible { transform: translateY(-1px); box-shadow: 0 12px 22px rgba(var(--pickup-accent-rgb), 0.32); filter: brightness(1.02); } .pickup-orders-panel { background: var(--pickup-surface-card); border: 1px solid var(--pickup-border); border-radius: 16px; overflow: hidden; } .pickup-orders-panel-head { padding: 1rem 1.15rem; border-bottom: 1px solid var(--pickup-border); } .pickup-orders-title { font-size: 1.35rem; font-weight: 700; letter-spacing: -0.01em; color: #fafafa; } .pickup-orders-list { padding: 1rem; display: flex; flex-direction: column; gap: 0.85rem; } .pickup-order-card { background: #151515; border: 1px solid var(--pickup-border); border-radius: 12px; padding: 1rem; } .pickup-order-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.75rem; margin-bottom: 0.5rem; } .pickup-order-id { color: #f5f5f5; font-weight: 700; font-size: 1.02rem; } .pickup-order-date { color: var(--pickup-text-muted); font-size: 0.825rem; white-space: nowrap; } .pickup-order-meta { display: flex; align-items: center; gap: 0.4rem; margin-bottom: 0.75rem; } .pickup-order-status { display: inline-flex; align-items: center; border-radius: 6px; padding: 0.22rem 0.45rem; font-size: 0.76rem; font-weight: 700; } .pickup-order-status.is-delivered { color: #102f20; background: #33cf7c; } .pickup-order-status.is-accepted { color: #0d2a3b; background: #57b8ff; } .pickup-order-status.is-preparing { color: #332300; background: #ffc247; } .pickup-order-status.is-cancelled { color: #5c1a1a; background: #ffb3b3; } .pickup-order-status.pickup-order-status--tracking { border-radius: 999px; padding: 0.32rem 0.82rem; font-size: 0.8125rem; letter-spacing: 0.02em; } .pickup-order-line { color: #bdbdbd; font-size: 0.92rem; margin-bottom: 0.4rem; } .pickup-order-line span { color: #ececec; } .pickup-order-bottom { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; border-top: 1px solid #262626; padding-top: 0.75rem; margin-top: 0.6rem; } .pickup-order-actions { display: inline-flex; align-items: center; gap: 0.5rem; } .pickup-order-btn { border-radius: 999px; border: 1px solid var(--pickup-border); background: #1d1d1d; color: #e6e6e6; padding: 0.35rem 0.8rem; text-decoration: none; font-size: 0.8125rem; font-weight: 700; line-height: 1.2; transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease; } .pickup-order-btn:hover { background: #252525; color: #fff; } .pickup-order-btn.is-track { border-color: rgba(var(--pickup-accent-rgb), 0.5); color: #ffb380; } .pickup-order-btn.is-details { border-color: #434343; } .pickup-order-details-modal .modal-content { background: #141414; border: 1px solid var(--pickup-border); border-radius: 14px; } .pickup-order-details-modal .modal-title { font-size: 1.65rem; font-weight: 700; color: #fafafa; } .pickup-order-details-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.75rem; margin-bottom: 0.9rem; } .pickup-order-details-order { color: #ececec; font-size: 1rem; font-weight: 600; } .pickup-order-details-status-wrap { margin-top: 0.4rem; } .pickup-order-details-date { color: #b9b9b9; font-size: 0.9rem; } .pickup-order-details-items { border: 1px solid var(--pickup-border); border-radius: 12px; background: #191919; overflow: hidden; } .pickup-order-details-item { display: flex; justify-content: space-between; gap: 0.7rem; padding: 0.8rem 0.9rem; border-top: 1px solid #262626; } .pickup-order-details-item:first-child { border-top: none; } .pickup-order-details-item-qty { color: #ececec; font-size: 0.95rem; font-weight: 600; } .pickup-order-details-item-name { color: #f5f5f5; font-size: 0.97rem; font-weight: 600; } .pickup-order-details-item-price { color: #f3f3f3; font-size: 1rem; font-weight: 700; } .pickup-order-details-totals { margin-top: 0.9rem; } .pickup-order-details-row { display: flex; justify-content: space-between; align-items: center; color: #cbcbcb; font-size: 1rem; margin-bottom: 0.4rem; } .pickup-order-details-row.is-total { margin-top: 0.25rem; margin-bottom: 0; color: #fff; font-size: 1.4rem; font-weight: 700; } @media (max-width: 991.98px) { .pickup-orders-panel { margin: 0 0.2rem; } .pickup-order-top, .pickup-order-bottom { flex-direction: column; align-items: flex-start; } .pickup-order-date { white-space: normal; } } @media (max-width: 767.98px) { .pickup-order-actions { width: 100%; } .pickup-order-btn { flex: 1; text-align: center; } .pickup-order-details-modal .modal-title { font-size: 1.35rem; } .pickup-order-details-row.is-total { font-size: 1.2rem; } } .pickup-auth-split-img { min-height: 100vh; background-size: cover; background-position: center; } @media (max-width: 991.98px) { .pickup-auth-split-img { min-height: 220px; } } .pickup-footer { border-top: 1px solid var(--pickup-border); margin-top: auto; background: #141414; } .pickup-footer-inner { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 1.25rem 2.2rem; align-items: start; padding-bottom: 50px; padding-top: 50px; } .pickup-footer-left { display: grid; gap: 0.8rem; } .pickup-footer-brand { display: flex; align-items: flex-start; gap: 0.9rem; } .pickup-footer-logo { width: 84px; height: 84px; object-fit: contain; border-radius: 12px; border: 1px solid #2f2f2f; background: #101010; padding: 0.45rem; flex-shrink: 0; } .pickup-footer-brand-name { color: #f7f7f7; font-size: 1.2rem; font-weight: 700; letter-spacing: -0.01em; } .pickup-footer-heading { color: #f4f4f4; font-size: 1rem; font-weight: 700; } .pickup-footer-line { color: #b7b7b7; font-size: 0.9rem; line-height: 1.45; } .pickup-footer-line strong { color: #ececec; font-weight: 600; } .pickup-footer-meta { display: grid; gap: 0.65rem; align-content: start; justify-self: end; width: 100%; max-width: 360px; } .pickup-footer-socials { display: inline-flex; align-items: center; gap: 0.45rem; } .pickup-footer-socials a { width: 34px; height: 34px; border-radius: 50%; border: 1px solid #333; background: #1c1c1c; color: #d1d5db; display: inline-flex; align-items: center; justify-content: center; text-decoration: none; transition: color 0.2s ease, border-color 0.2s ease, background-color 0.2s ease; } .pickup-footer-socials a:hover, .pickup-footer-socials a:focus-visible { color: var(--pickup-accent); border-color: rgba(var(--pickup-accent-rgb), 0.55); background: rgba(var(--pickup-accent-rgb), 0.14); } .pickup-footer-apps { display: flex; flex-wrap: wrap; gap: 0.55rem; margin-top: 0.35rem; } .pickup-store-badge { display: inline-flex; align-items: center; gap: 0.55rem; border: 1px solid #3b3b3b; border-radius: 11px; background: #0f0f0f; color: #f1f1f1; text-decoration: none; font-size: 0.76rem; font-weight: 600; padding: 0.45rem 0.75rem; min-width: 160px; transition: color 0.2s ease, border-color 0.2s ease, background-color 0.2s ease; } .pickup-store-badge i { font-size: 1.12rem; } .pickup-store-badge__text { display: inline-flex; flex-direction: column; line-height: 1.15; } .pickup-store-badge__text small { font-size: 0.58rem; letter-spacing: 0.04em; color: #d1d5db; } .pickup-store-badge__text strong { font-size: 0.88rem; color: #fff; font-weight: 700; } .pickup-store-badge:hover, .pickup-store-badge:focus-visible { color: #fff; border-color: rgba(var(--pickup-accent-rgb), 0.55); background: #151515; } .pickup-footer-timing-row { display: grid; grid-template-columns: minmax(120px, auto) 1fr; align-items: center; gap: 0.85rem; font-size: 0.9rem; color: #c4c4c4; } .pickup-footer-timing-row span:first-child { color: #ececec; font-weight: 600; } @media (max-width: 991.98px) { .pickup-footer-inner { grid-template-columns: 1fr; gap: 1rem; } .pickup-footer-meta { justify-self: start; max-width: none; } .pickup-footer-logo { width: 74px; height: 74px; } .pickup-footer-apps { gap: 0.45rem; margin-top: 0.7rem; } .pickup-footer-timing-row { grid-template-columns: minmax(104px, auto) 1fr; gap: 0.65rem; } } @media (max-width: 575.98px) { .pickup-footer { padding-bottom: calc(0.8rem + env(safe-area-inset-bottom)); } .pickup-footer-brand { gap: 0.75rem; } .pickup-footer-brand-name { font-size: 1.05rem; } .pickup-footer-line { font-size: 0.84rem; } .pickup-footer-heading { font-size: 0.95rem; } .pickup-footer-timing-row { font-size: 0.84rem; } } .text-pickup-accent { color: var(--pickup-accent) !important; } .bg-pickup-accent { background-color: var(--pickup-accent) !important; } .pickup-main-pad { padding-bottom: 4.25rem; } /* —— Auth modal (email + OTP) —— */ .pickup-auth-modal .modal-dialog { max-width: 420px; } .pickup-auth-modal-content { background: var(--pickup-surface-elevated) !important; border-radius: var(--pickup-radius) !important; } .pickup-auth-close { width: 36px; height: 36px; border-radius: 50%; padding: 0; display: inline-flex; align-items: center; justify-content: center; background: #2a2a2a; border: 1px solid var(--pickup-border); color: #ccc; } .pickup-auth-close:hover { background: #333; border-color: #444; color: #fff; } .pickup-auth-input { border-radius: var(--pickup-radius-sm) !important; } .pickup-auth-otp-input { font-size: 1.35rem; letter-spacing: 0.35em; font-variant-numeric: tabular-nums; } .pickup-auth-help { display: inline-block; margin-top: 0.25rem; } body.modal-open .modal-backdrop.show { backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); background-color: rgba(0, 0, 0, 0.72); } button.pickup-dashboard-nav-link--btn { width: 100%; border: none; background: transparent; cursor: pointer; text-align: left; font: inherit; color: inherit; } /* —— Full-page loader (menu, checkout, dashboard, etc.) —— */ .pickup-page-loader { position: fixed; inset: 0; z-index: 10050; display: flex; align-items: center; justify-content: center; background: rgba(12, 12, 12, 0.5); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); transition: opacity 0.3s ease, visibility 0.3s ease; opacity: 1; visibility: visible; } .pickup-page-loader.pickup-page-loader--hidden { opacity: 0; visibility: hidden; pointer-events: none; } .pickup-page-loader__inner { display: flex; flex-direction: column; align-items: center; gap: 0.9rem; text-align: center; padding: 1.5rem; } /* Arc spinner (theme orange #ff6600) */ .pickup-page-loader__spinner { width: 40px; height: 40px; border: 3px solid rgba(var(--pickup-accent-rgb), 0.25); border-top-color: var(--pickup-accent); border-radius: 50%; animation: pickup-page-loader-spin 0.75s linear infinite; } @keyframes pickup-page-loader-spin { to { transform: rotate(360deg); } } .pickup-page-loader__text { font-family: var(--pickup-font); font-size: 0.95rem; font-weight: 500; color: #e8e8e8; letter-spacing: 0.01em; } @media (prefers-reduced-motion: reduce) { .pickup-page-loader__spinner { animation: none; border-color: rgba(var(--pickup-accent-rgb), 0.4); border-top-color: var(--pickup-accent); } }