/* styles.css — mobile-first, RTL Arabic, clean & trustworthy small-business look */ :root { --brand: #1b3a5c; /* deep navy — matches the Lima Shop crest wordmark */ --brand-dark: #0f2740; --brand-light: #35608f; --accent: #c9962e; /* crown/ring gold accent — matches the emblem */ --accent-dark: #a67a1e; --bg: #faf8f4; --surface: #ffffff; --text: #2b2b28; --text-muted: #7a766e; --border: #e7e2d8; --danger: #b8483d; --success: #2f8a52; --radius: 18px; --radius-lg: 26px; --shadow: 0 2px 10px rgba(0, 0, 0, 0.06); --shadow-lift: 0 10px 26px rgba(9, 63, 99, 0.16); --ease: cubic-bezier(0.22, 1, 0.36, 1); --spring: cubic-bezier(0.34, 1.56, 0.64, 1); } /* Dark mode — a per-account choice (see js/auth.js Auth.setTheme), applied via . Redefines the same variable names so every component built on them (cards, buttons, inputs...) picks it up for free; a handful of components below also hardcode a light color directly (glass tints, placeholders, skeletons) and get their own dark override. */ :root[data-theme="dark"] { --brand: #4a8ac2; --brand-dark: #2c5a86; --brand-light: #6ba6d8; --accent: #e2b04a; --accent-dark: #c9962e; --bg: #14171c; --surface: #1e222a; --text: #ecebe7; --text-muted: #9b9a94; --border: #33373f; --danger: #e07665; --success: #4caf7d; --shadow: 0 2px 10px rgba(0, 0, 0, 0.45); --shadow-lift: 0 10px 26px rgba(0, 0, 0, 0.55); } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; background: var(--bg); color: var(--text); font-family: "Tajawal", "Cairo", "Segoe UI", Tahoma, "Noto Sans Arabic", Geneva, Verdana, sans-serif; /* No hardcoded direction here on purpose — it follows the attribute, which js/i18n.js's setLang() flips between "rtl" (Arabic) and "ltr" (French) so the whole layout mirrors correctly when the language is switched. */ min-height: 100%; -webkit-font-smoothing: antialiased; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } } #app { max-width: 560px; margin: 0 auto; min-height: 100vh; display: flex; flex-direction: column; } a { color: var(--brand); text-decoration: none; transition: color 0.15s var(--ease); } a:active { color: var(--brand-dark); } /* Header — frosted glass over the brand gradient so content behind it (when it exists) softly shows through instead of a flat opaque bar. */ .topbar { background: linear-gradient(135deg, rgba(27,58,92,0.92) 0%, rgba(15,39,64,0.92) 100%); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); color: #fff; padding: 14px 16px; display: flex; align-items: center; justify-content: space-between; position: sticky; top: 0; z-index: 20; box-shadow: var(--shadow); } .topbar .brand-row { display: flex; align-items: center; gap: 10px; } .topbar .brand-logo { width: 34px; height: 34px; border-radius: 9px; box-shadow: 0 2px 6px rgba(0,0,0,0.2); } .topbar .brand { display: flex; flex-direction: column; } .topbar .brand h1 { font-size: 1.05rem; margin: 0; font-weight: 800; letter-spacing: 0.2px; } .topbar .brand small { font-size: 0.7rem; opacity: 0.85; direction: ltr; text-align: right; } .topbar-actions { display: flex; align-items: center; gap: 6px; } .topbar button.icon-btn { background: rgba(255,255,255,0.15); border: none; color: #fff; padding: 8px 10px; border-radius: 10px; font-size: 0.85rem; transition: background 0.15s var(--ease), transform 0.15s var(--ease); } .topbar button.icon-btn:active { transform: scale(0.94); background: rgba(255,255,255,0.28); } .offline-banner { background: #fff3cd; color: #7a5b00; text-align: center; padding: 6px 10px; font-size: 0.8rem; } main { flex: 1; padding: 14px 14px 90px; position: relative; } /* ---------- Motion ---------- */ @keyframes pageEnter { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } @keyframes fadeInUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } } @keyframes popIn { from { opacity: 0; transform: scale(0.94); } to { opacity: 1; transform: scale(1); } } @keyframes shimmer { 0% { background-position: -200px 0; } 100% { background-position: 200px 0; } } @keyframes bounceDot { 0%, 80%, 100% { transform: scale(0.6); opacity: 0.5; } 40% { transform: scale(1); opacity: 1; } } @keyframes toastIn { from { opacity: 0; transform: translate(-50%, 12px); } to { opacity: 1; transform: translate(-50%, 0); } } #app-content.page-anim { animation: pageEnter 0.32s var(--ease); } .fade-in-up { animation: fadeInUp 0.4s var(--ease) both; } .product-card, .card, .request-card { animation: popIn 0.32s var(--ease) both; } .page-loader { display: flex; gap: 6px; justify-content: center; padding: 60px 0; } .page-loader .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--brand); animation: bounceDot 1.1s ease-in-out infinite; } .page-loader .dot:nth-child(2) { animation-delay: 0.15s; } .page-loader .dot:nth-child(3) { animation-delay: 0.3s; } /* Bottom nav */ /* Floating "island" tab bar, detached from the screen edge — the iOS26 liquid-glass tab bar pattern, rather than a flat edge-to-edge strip. */ .bottom-nav { position: fixed; bottom: 14px; left: 10px; right: 10px; max-width: 540px; margin: 0 auto; background: rgba(255,255,255,0.72); -webkit-backdrop-filter: blur(20px) saturate(1.6); backdrop-filter: blur(20px) saturate(1.6); border: 1px solid rgba(255,255,255,0.5); border-radius: 999px; box-shadow: 0 10px 30px rgba(9, 63, 99, 0.18), inset 0 1px 0 rgba(255,255,255,0.6); display: flex; z-index: 20; padding: 4px; } .bottom-nav button { flex: 1; background: none; border: none; padding: 8px 4px 7px; border-radius: 999px; color: var(--text-muted); font-size: 0.62rem; display: flex; flex-direction: column; align-items: center; gap: 2px; transition: color 0.15s var(--ease), transform 0.25s var(--spring), background 0.2s var(--ease); } .bottom-nav button .ic { font-size: 1.15rem; transition: transform 0.25s var(--spring); } .bottom-nav button:active { transform: scale(0.9); } .bottom-nav button.active { color: var(--brand); font-weight: 700; background: rgba(27,58,92,0.1); } .bottom-nav button.active .ic { transform: translateY(-1px); } main { padding-bottom: 110px; } /* Auth hero (login/signup logo lockup) */ .auth-hero { text-align: center; padding: 18px 0 4px; animation: fadeInUp 0.5s var(--ease); } .auth-hero img { max-width: 230px; width: 78%; height: auto; margin: 0 auto; display: block; } /* Cards */ .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,0.8); padding: 14px; margin-bottom: 12px; transition: box-shadow 0.2s var(--ease), transform 0.2s var(--ease); } .page-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 6px; } .page-head .section-title { margin: 0; } .special-request-link { font-size: 0.78rem; font-weight: 700; background: #fff3e6; color: var(--accent); padding: 7px 12px; border-radius: 999px; white-space: nowrap; transition: transform 0.15s var(--ease); } .special-request-link:active { transform: scale(0.95); } /* Product grid */ .product-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .product-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); display: flex; flex-direction: column; cursor: pointer; transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease); } .product-card:active { transform: scale(0.97); box-shadow: var(--shadow-lift); } .product-card img, .product-photo-ph { width: 100%; aspect-ratio: 1/1; object-fit: cover; background: #f0ede5; transition: transform 0.3s var(--ease); } .product-card:active img { transform: scale(1.04); } .product-photo-ph { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; color: var(--text-muted); font-size: 1.7rem; text-align: center; } .product-photo-ph .ph-txt { font-size: 0.62rem; } .stock-badge { position: absolute; top: 8px; inset-inline-start: 8px; z-index: 2; } .product-card.out-of-stock img, .product-card.out-of-stock .product-photo-ph { opacity: 0.45; filter: grayscale(0.6); } /* ---------- Promotions ---------- */ .promo-ribbon { position: absolute; top: 8px; inset-inline-start: 8px; z-index: 2; background: linear-gradient(135deg, var(--danger), #d6604f); color: #fff; font-size: 0.7rem; font-weight: 800; padding: 3px 9px; border-radius: 999px; box-shadow: 0 2px 6px rgba(184,72,61,0.35); } .promo-ribbon.detail { top: 12px; inset-inline-start: 12px; font-size: 0.8rem; padding: 5px 12px; } .pc-price-old { font-size: 0.7rem; color: var(--text-muted); text-decoration: line-through; } .pc-price.promo { color: var(--danger); } .pb-old { font-size: 0.78rem; color: var(--text-muted); text-decoration: line-through; } .val.promo { color: var(--danger); } .promo-pill { background: #fbe9e7; color: var(--danger); } /* ---------- Promo themes — each campaign gets its own professional look, not just a generic red ribbon. ---------- */ @keyframes bfPulse { 0%, 100% { box-shadow: 0 2px 10px rgba(255,209,0,0.35); } 50% { box-shadow: 0 2px 18px rgba(255,209,0,0.75); } } .promo-card.theme-blackfriday { border-color: #111; } .promo-ribbon.theme-blackfriday { background: linear-gradient(135deg, #111, #2c2c2c); color: #ffd100; font-weight: 900; letter-spacing: 0.3px; box-shadow: 0 2px 10px rgba(0,0,0,0.5); animation: bfPulse 1.8s ease-in-out infinite; position: relative; overflow: hidden; } /* Light-sweep across the Black Friday ribbon — the "flash sale" shine. */ .promo-ribbon.theme-blackfriday::after { content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; background: linear-gradient(120deg, transparent, rgba(255,209,0,0.6), transparent); animation: bfShine 2.4s ease-in-out infinite; } @keyframes bfShine { 0% { left: -60%; } 55%, 100% { left: 130%; } } .promo-pill.theme-blackfriday { background: #111; color: #ffd100; } .promo-card.theme-noel { border-color: #1b6b3a; } .promo-ribbon.theme-noel { background: linear-gradient(135deg, #1b6b3a 0%, #b8272c 100%); color: #fff; } .promo-pill.theme-noel { background: #eafaf0; color: #1b6b3a; } .promo-card.theme-eid { border-color: #00843d; } .promo-ribbon.theme-eid { background: linear-gradient(135deg, #00843d 0%, #ffcc00 100%); color: #073a1b; text-shadow: 0 1px 0 rgba(255,255,255,0.3); } .promo-pill.theme-eid { background: #fff8df; color: #00843d; } /* ---------- Promo theme decorations — small animated flourishes layered over the (already overflow:hidden) card/gallery, one look per campaign. ---------- */ .promo-deco { position: absolute; top: -10%; inset-inline-start: var(--x, 20%); z-index: 2; font-size: 0.85rem; pointer-events: none; opacity: 0; } .promo-deco.snow { color: #eaf6ff; text-shadow: 0 0 4px rgba(255,255,255,0.85); animation: promoSnowFall 3.6s linear var(--d, 0s) infinite; } @keyframes promoSnowFall { 0% { transform: translateY(0) rotate(0deg); opacity: 0; } 8% { opacity: 0.95; } 85% { opacity: 0.85; } 100% { transform: translateY(340%) rotate(200deg); opacity: 0; } } .promo-deco.spark { color: #ffd100; font-size: 1rem; text-shadow: 0 0 6px rgba(255,209,0,0.7); animation: promoSparkFlicker 1.3s ease-in-out var(--d, 0s) infinite; } @keyframes promoSparkFlicker { 0%, 100% { opacity: 0; transform: scale(0.6) translateY(0); } 50% { opacity: 1; transform: scale(1.2) translateY(-3px); } } .promo-deco.twinkle { color: #ffe58a; text-shadow: 0 0 5px rgba(255,229,138,0.7); animation: promoTwinkle 2.4s ease-in-out var(--d, 0s) infinite; } @keyframes promoTwinkle { 0%, 100% { opacity: 0.15; transform: scale(0.75); } 50% { opacity: 1; transform: scale(1.2); } } @media (prefers-reduced-motion: reduce) { .promo-deco, .promo-ribbon.theme-blackfriday, .promo-ribbon.theme-blackfriday::after { animation: none !important; } } /* Quick promo panel — a compact inline editor toggled from the admin list, so an already-published product can go on sale without the full edit form. */ .admin-prow { margin-bottom: 12px; } .admin-prow .card { margin-bottom: 8px; } .promo-quick-panel { background: #fafaf6; border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 14px 14px; margin: -4px 0 14px; animation: fadeInUp 0.22s var(--ease); } .product-card .pc-body { padding: 8px 10px 12px; display: flex; flex-direction: column; gap: 3px; flex: 1; } .product-card .pc-name { font-weight: 700; font-size: 0.9rem; } .product-card .pc-price { font-size: 0.8rem; color: var(--brand-dark); font-weight: 700; } .product-card .pc-price-eur { font-size: 0.72rem; color: var(--text-muted); } /* Catalog toolbar (search + sort + favorites + category tabs) sticks just below the topbar while scrolling, over a frosted panel so it never looks like it's floating over content with no separation. */ .catalog-sticky { position: sticky; z-index: 15; background: rgba(250,248,244,0.86); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); margin: 0 -14px; padding: 10px 14px 8px; } /* ---------- Skeleton loading (replaces the dot-loader on the catalog, which reads as "modern" faster than a spinner) ---------- */ .skeleton-img, .skeleton-line { background: linear-gradient(90deg, #ece8df 25%, #f6f4ee 50%, #ece8df 75%); background-size: 400px 100%; animation: shimmer 1.4s ease-in-out infinite; border-radius: 6px; } .skeleton-img { width: 100%; aspect-ratio: 1/1; border-radius: 0; } .skeleton-line { height: 10px; margin: 6px 10px; } .skeleton-card { pointer-events: none; } .search-input { width: 100%; padding: 11px 14px; border-radius: 999px; border: 1px solid var(--border); font-size: 0.9rem; background: #fff; margin-bottom: 10px; } .catalog-toolbar { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; } .catalog-toolbar select { flex: 1; width: auto; padding: 8px 10px; border-radius: 10px; border: 1px solid var(--border); font-size: 0.82rem; background: #fff; } .chip-toggle { white-space: nowrap; border: 1px solid var(--border); background: #fff; color: var(--text); padding: 8px 14px; border-radius: 999px; font-size: 0.8rem; transition: all 0.15s var(--ease); } .chip-toggle.active { background: #fde8e8; border-color: #f3c6c6; color: var(--danger); } .fav-btn { position: absolute; top: 8px; inset-inline-end: 8px; z-index: 2; background: rgba(255,255,255,0.85); border: none; border-radius: 50%; width: 30px; height: 30px; font-size: 0.95rem; line-height: 1; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 6px rgba(0,0,0,0.15); transition: transform 0.15s var(--ease); } .fav-btn:active { transform: scale(0.85); } .fav-btn.static { position: static; width: 40px; height: 40px; font-size: 1.2rem; } .product-card { position: relative; } .photo-count { position: absolute; bottom: 68px; inset-inline-start: 8px; background: rgba(0,0,0,0.55); color: #fff; font-size: 0.68rem; padding: 2px 7px; border-radius: 999px; } /* ---------- Product gallery: one structured carousel for photos + video, swipeable, with glass nav arrows + dot indicator (modern, not a plain stacked list of s). Forced LTR internally so swipe direction reads naturally regardless of the app's RTL text direction. ---------- */ .gallery { position: relative; border-radius: var(--radius); overflow: hidden; background: #f0ede5; } .gallery-track { direction: ltr; display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -ms-overflow-style: none; } .gallery-track::-webkit-scrollbar { display: none; } .gallery-slide { flex: 0 0 100%; scroll-snap-align: start; aspect-ratio: 1/1; background: #f0ede5; display: flex; align-items: center; justify-content: center; } .gallery-slide img, .gallery-slide video { width: 100%; height: 100%; object-fit: cover; } .gallery-nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; width: 34px; height: 34px; border-radius: 50%; border: none; cursor: pointer; background: rgba(255,255,255,0.35); color: #fff; font-size: 1.1rem; line-height: 1; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 8px rgba(0,0,0,0.15); transition: background 0.15s var(--ease), transform 0.15s var(--ease); } .gallery-nav:active { transform: translateY(-50%) scale(0.9); background: rgba(255,255,255,0.55); } .gallery-nav.prev { inset-inline-start: 8px; } .gallery-nav.next { inset-inline-end: 8px; } .gallery-dots { position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%); z-index: 3; display: flex; gap: 5px; background: rgba(0,0,0,0.28); padding: 5px 9px; border-radius: 999px; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); } .gallery-dot { width: 6px; height: 6px; border-radius: 999px; background: rgba(255,255,255,0.55); transition: all 0.2s var(--ease); } .gallery-dot.active { width: 16px; background: #fff; } .gallery-thumbs { display: flex; gap: 6px; margin-top: 8px; overflow-x: auto; direction: ltr; } .gallery-thumb { position: relative; width: 56px; height: 56px; flex: 0 0 56px; border-radius: 8px; border: 2px solid transparent; opacity: 0.65; cursor: pointer; transition: all 0.15s var(--ease); overflow: hidden; background: #f0ede5; } .gallery-thumb img, .gallery-thumb video { width: 100%; height: 100%; object-fit: cover; } .gallery-thumb .thumb-play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 1rem; background: rgba(0,0,0,0.25); } .gallery-thumb.active { border-color: var(--brand); opacity: 1; } .detail-video { width: 100%; border-radius: var(--radius); margin: 10px 0; background: #000; max-height: 320px; } /* Admin product form: existing-photo management (remove/undo before saving) */ .photo-manage-grid { display: flex; flex-wrap: wrap; gap: 10px; margin: 8px 0 4px; } .photo-manage-item { position: relative; width: 72px; height: 72px; } .photo-manage-item img { width: 100%; height: 100%; object-fit: cover; border-radius: 8px; border: 1px solid var(--border); transition: opacity 0.15s var(--ease), filter 0.15s var(--ease); } .photo-manage-item.marked-remove img { opacity: 0.35; filter: grayscale(1); } .photo-remove-btn { position: absolute; top: -6px; inset-inline-end: -6px; width: 24px; height: 24px; border-radius: 50%; border: none; background: var(--danger); color: #fff; font-size: 0.8rem; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 1px 4px rgba(0,0,0,0.25); } .photo-manage-item.marked-remove .photo-remove-btn { background: var(--success); } .photo-manage-hint { display: block; color: var(--text-muted); margin: 2px 0 10px; font-size: 0.78rem; } .size-tags { display: flex; gap: 6px; flex-wrap: wrap; margin: 8px 0; } .size-tag { border: 1px solid var(--border); border-radius: 8px; padding: 5px 12px; font-size: 0.82rem; font-weight: 700; } .payment-options { display: flex; gap: 10px; margin-top: 8px; } .payment-option { flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px; border: 2px solid var(--border); border-radius: 12px; padding: 12px 8px; cursor: pointer; font-size: 0; transition: all 0.15s var(--ease); margin: 0; } .payment-option:has(input:checked) { border-color: var(--brand); background: #eaf3fa; } .payment-option input { position: absolute; opacity: 0; width: 0; height: 0; } .payment-badge { display: inline-flex; align-items: center; gap: 6px; font-size: 0.85rem; font-weight: 700; } .payment-badge.bankily { color: #1b8a5a; } .payment-badge.seddad { color: #b8860b; } .payment-badge-icon { width: 24px; height: 24px; object-fit: contain; border-radius: 4px; } .payment-option .payment-badge-icon { width: 40px; height: 40px; } .payment-option .payment-badge { flex-direction: column; font-size: 0.78rem; } .payment-number { font-size: 1.4rem; font-weight: 800; letter-spacing: 1px; direction: ltr; background: #fff; border-radius: 10px; padding: 10px; margin: 10px 0; color: var(--brand-dark); } .lang-toggle { display: flex; gap: 8px; margin-top: 6px; } .lang-btn { flex: 1; padding: 11px; border-radius: 999px; border: 1px solid var(--border); background: #fff; color: var(--text); font-weight: 700; font-size: 0.85rem; cursor: pointer; transition: all 0.2s var(--spring); } .lang-btn.active { background: var(--brand); color: #fff; border-color: var(--brand); } .lang-btn:active { transform: scale(0.95); } .profile-card { text-align: center; } .profile-avatar { width: 66px; height: 66px; border-radius: 50%; background: linear-gradient(135deg, var(--brand), var(--brand-dark)); color: #fff; font-size: 1.6rem; font-weight: 800; display: flex; align-items: center; justify-content: center; margin: 0 auto 10px; } .category-tabs { display: flex; gap: 8px; overflow-x: auto; margin-bottom: 12px; padding-bottom: 2px; } .category-tabs button { white-space: nowrap; border: 1px solid var(--border); background: var(--surface); padding: 7px 14px; border-radius: 999px; font-size: 0.82rem; color: var(--text); transition: background 0.2s var(--ease), color 0.2s var(--ease), border-color 0.2s var(--ease), transform 0.15s var(--ease); } .category-tabs button:active { transform: scale(0.95); } .category-tabs button.active { background: var(--brand); color: #fff; border-color: var(--brand); } /* Product detail */ .detail-photo { width: 100%; border-radius: var(--radius); aspect-ratio: 1/1; object-fit: cover; background: #f0ede5; margin-bottom: 12px; } .price-box { display: flex; gap: 14px; margin: 10px 0; } .price-box .pb { flex: 1; background: #f2f0e9; border-radius: 10px; padding: 10px; text-align: center; } .price-box .pb .lbl { font-size: 0.72rem; color: var(--text-muted); } .price-box .pb .val { font-size: 1.1rem; font-weight: 800; color: var(--brand-dark); } /* Forms */ label { display: block; font-size: 0.85rem; margin: 12px 0 5px; font-weight: 600; } input[type=text], input[type=tel], input[type=password], input[type=number], input[type=url], input[type=email], select, textarea { width: 100%; padding: 12px 14px; border-radius: 14px; border: 1px solid var(--border); font-size: 0.95rem; background: #fff; color: var(--text); font-family: inherit; } input:focus, select:focus, textarea:focus { outline: 2px solid var(--brand); border-color: var(--brand); } input, select, textarea { transition: border-color 0.15s var(--ease), box-shadow 0.15s var(--ease); } textarea { min-height: 80px; resize: vertical; } .field-error { color: var(--danger); font-size: 0.78rem; margin-top: 4px; animation: fadeInUp 0.25s var(--ease); } .checkbox-row { display: flex; align-items: center; gap: 8px; margin-top: 12px; } .checkbox-row input { width: auto; } .code-input { text-align: center; font-size: 1.6rem; letter-spacing: 0.5em; font-weight: 800; direction: ltr; padding-inline-start: 0.6em; } .verify-icon { text-align: center; font-size: 2.6rem; margin-bottom: 4px; } .verify-banner { display: block; background: #fff3e6; color: var(--accent); border: 1px solid #f2d6b0; padding: 10px 14px; border-radius: 12px; font-size: 0.82rem; font-weight: 700; margin-bottom: 12px; text-align: center; animation: fadeInUp 0.35s var(--ease); } /* iOS-style pill buttons: fully rounded, a soft inner top highlight (the "glass sheen"), and a springy press instead of a flat linear scale. */ .btn { display: inline-block; width: 100%; text-align: center; padding: 14px; border-radius: 999px; border: none; background: var(--brand); color: #fff; font-weight: 700; font-size: 0.95rem; margin-top: 14px; cursor: pointer; transition: transform 0.25s var(--spring), box-shadow 0.2s var(--ease), background 0.15s var(--ease), opacity 0.15s var(--ease); box-shadow: 0 2px 8px rgba(27, 58, 92, 0.28), inset 0 1px 0 rgba(255,255,255,0.25); } .btn:hover { box-shadow: 0 4px 14px rgba(27, 58, 92, 0.34), inset 0 1px 0 rgba(255,255,255,0.25); } .btn:active { background: var(--brand-dark); transform: scale(0.95); } .btn:disabled { opacity: 0.6; cursor: default; transform: none; } .btn.secondary { background: rgba(255,255,255,0.6); color: var(--brand); border: 1px solid rgba(27,58,92,0.18); box-shadow: inset 0 1px 0 rgba(255,255,255,0.7); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); } .btn.danger { background: var(--danger); box-shadow: 0 2px 8px rgba(184, 72, 61, 0.28), inset 0 1px 0 rgba(255,255,255,0.25); } .btn.whatsapp { background: #25D366; box-shadow: 0 2px 8px rgba(37, 211, 102, 0.3), inset 0 1px 0 rgba(255,255,255,0.25); } .btn.small { width: auto; padding: 9px 16px; font-size: 0.82rem; margin-top: 0; } .link-row { text-align: center; margin-top: 14px; font-size: 0.85rem; } /* Status pills & timeline */ .status-pill { display: inline-block; padding: 4px 12px; border-radius: 999px; font-size: 0.75rem; font-weight: 700; background: #eaf3fa; color: var(--brand-dark); } .status-pill.delivered { background: #e3f5e9; color: var(--success); } .status-pill.declined { background: #fbe9e7; color: var(--danger); } .status-pill.draft-pill { background: #fff3cd; color: #7a5b00; margin-inline-start: 6px; vertical-align: middle; } .section-subtitle { font-size: 0.85rem; font-weight: 700; color: var(--text-muted); margin: 16px 0 6px; text-transform: uppercase; letter-spacing: 0.3px; } .timeline { list-style: none; margin: 10px 0 0; padding: 0; border-inline-start: 2px solid var(--border); padding-inline-start: 14px; } .timeline li { position: relative; padding-bottom: 14px; font-size: 0.85rem; } .timeline li::before { content: ""; position: absolute; inset-inline-start: -19px; top: 3px; width: 10px; height: 10px; border-radius: 50%; background: var(--brand); } .timeline li .ts { color: var(--text-muted); font-size: 0.72rem; } .order-card .oc-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; } .order-card .oc-code { font-weight: 800; color: var(--brand-dark); } .order-card .oc-row { display: flex; justify-content: space-between; font-size: 0.85rem; margin-top: 3px; color: var(--text-muted); } .empty-state { text-align: center; color: var(--text-muted); padding: 40px 10px; } .empty-state .ic { font-size: 2.2rem; display: block; margin-bottom: 8px; } .section-title { font-size: 1.05rem; font-weight: 800; margin: 4px 0 12px; } .fab { position: fixed; bottom: 100px; inset-inline-end: 20px; max-width: 560px; background: linear-gradient(135deg, var(--accent), var(--accent-dark)); color: #fff; border: none; border-radius: 27%; width: 56px; height: 56px; font-size: 1.6rem; z-index: 21; box-shadow: 0 8px 20px rgba(166,122,30,0.4), inset 0 1px 0 rgba(255,255,255,0.4); transition: transform 0.25s var(--spring); } .fab:active { transform: scale(0.9); } /* Admin dashboard stat tiles */ .stats-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 16px; } .stat-tile { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 14px; text-align: center; } .stat-tile.wide { grid-column: 1 / -1; } .stat-tile .stat-num { font-size: 1.4rem; font-weight: 800; color: var(--brand-dark); } .stat-tile .stat-lbl { font-size: 0.72rem; color: var(--text-muted); margin-top: 2px; } /* Admin-managed categories (settings page) */ .category-manage-list { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 14px; } .category-manage-chip { display: flex; align-items: center; gap: 6px; background: #fff; border: 1px solid var(--border); border-radius: 999px; padding: 6px 8px 6px 12px; font-size: 0.8rem; } .category-manage-chip button { border: none; background: var(--danger); color: #fff; width: 18px; height: 18px; border-radius: 50%; font-size: 0.65rem; line-height: 1; display: flex; align-items: center; justify-content: center; cursor: pointer; } .category-manage-chip.builtin { color: var(--text-muted); } .category-manage-chip.builtin button { display: none; } .add-category-row { display: flex; gap: 8px; } .add-category-row input { flex: 1; } .add-category-row button { width: auto; margin-top: 0; padding: 11px 16px; } .admin-tabs { display: flex; gap: 8px; margin-bottom: 14px; } .admin-tabs button { flex: 1; padding: 10px; border-radius: 10px; border: 1px solid var(--border); background: #fff; font-size: 0.85rem; font-weight: 700; } .admin-tabs button.active { background: var(--brand); color: #fff; border-color: var(--brand); } .thumb { width: 46px; height: 46px; border-radius: 8px; object-fit: cover; background: #f0ede5; } .toast { position: fixed; bottom: 90px; left: 50%; transform: translateX(-50%); background: #2b2b28; color: #fff; padding: 10px 18px; border-radius: 10px; font-size: 0.85rem; z-index: 50; animation: toastIn 0.3s var(--ease); box-shadow: 0 6px 20px rgba(0,0,0,0.25); } .request-card .thumb { width: 54px; height: 54px; border-radius: 10px; } .request-respond { border-top: 1px dashed var(--border); margin-top: 12px; padding-top: 12px; } .spinner { text-align: center; padding: 30px; color: var(--text-muted); } .install-banner { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); padding: 12px; display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 12px; box-shadow: var(--shadow); } .install-banner span { font-size: 0.85rem; } /* ---------- Pull-to-refresh indicator ---------- */ .ptr-indicator { position: fixed; top: 8px; left: 50%; transform: translate(-50%, -60px); width: 40px; height: 40px; border-radius: 50%; z-index: 30; background: rgba(255,255,255,0.75); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 4px 14px rgba(0,0,0,0.15), inset 0 1px 0 rgba(255,255,255,0.7); display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: transform 0.25s var(--ease), opacity 0.2s var(--ease); } .ptr-indicator .ptr-spinner { width: 18px; height: 18px; border-radius: 50%; border: 2.5px solid rgba(27,58,92,0.2); border-top-color: var(--brand); transition: transform 0.2s var(--ease); } .ptr-indicator.ready .ptr-spinner { border-top-color: var(--accent); } .ptr-indicator.spinning { transform: translate(-50%, 16px); opacity: 1; } .ptr-indicator.spinning .ptr-spinner { animation: ptrSpin 0.7s linear infinite; } @keyframes ptrSpin { to { transform: rotate(360deg); } } /* ---------- Dark mode: targeted fixes for components that hardcode a light color directly instead of a --variable (glass tints, placeholders, skeletons, native form fields) — the --variable redefinitions above already cover everything else. ---------- */ :root[data-theme="dark"] .topbar { background: linear-gradient(135deg, rgba(20,32,48,0.94) 0%, rgba(10,16,24,0.94) 100%); } :root[data-theme="dark"] .bottom-nav { background: rgba(24,27,33,0.75); border-color: rgba(255,255,255,0.08); box-shadow: 0 10px 30px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.06); } :root[data-theme="dark"] .bottom-nav button.active { background: rgba(74,138,194,0.22); } :root[data-theme="dark"] .catalog-sticky { background: rgba(20,23,28,0.88); } :root[data-theme="dark"] input[type=text], :root[data-theme="dark"] input[type=tel], :root[data-theme="dark"] input[type=password], :root[data-theme="dark"] input[type=number], :root[data-theme="dark"] input[type=url], :root[data-theme="dark"] input[type=email], :root[data-theme="dark"] select, :root[data-theme="dark"] textarea, :root[data-theme="dark"] .search-input { background: #262b33; color: var(--text); border-color: var(--border); } :root[data-theme="dark"] .btn.secondary { background: rgba(38,43,51,0.7); color: var(--text); border-color: rgba(255,255,255,0.15); box-shadow: inset 0 1px 0 rgba(255,255,255,0.06); } :root[data-theme="dark"] .chip-toggle, :root[data-theme="dark"] .admin-tabs button, :root[data-theme="dark"] .category-manage-chip, :root[data-theme="dark"] .payment-number, :root[data-theme="dark"] .price-box .pb, :root[data-theme="dark"] .promo-quick-panel { background: #262b33; border-color: var(--border); color: var(--text); } :root[data-theme="dark"] .payment-number { color: #ecebe7; } :root[data-theme="dark"] .product-photo-ph, :root[data-theme="dark"] .gallery, :root[data-theme="dark"] .gallery-slide, :root[data-theme="dark"] .gallery-thumb, :root[data-theme="dark"] .detail-photo, :root[data-theme="dark"] .thumb, :root[data-theme="dark"] .product-card img, :root[data-theme="dark"] .skeleton-card { background: #232830; } :root[data-theme="dark"] .skeleton-img, :root[data-theme="dark"] .skeleton-line { background: linear-gradient(90deg, #222731 25%, #2b3039 50%, #222731 75%); background-size: 400px 100%; } :root[data-theme="dark"] .lang-btn { background: #262b33; color: var(--text); border-color: var(--border); } :root[data-theme="dark"] .ptr-indicator { background: rgba(30,34,41,0.82); } :root[data-theme="dark"] .verify-banner { background: rgba(226,176,74,0.15); border-color: rgba(226,176,74,0.35); } :root[data-theme="dark"] .offline-banner { background: rgba(226,176,74,0.18); color: #f0d999; } :root[data-theme="dark"] .status-pill { background: rgba(74,138,194,0.18); } :root[data-theme="dark"] .status-pill.delivered { background: rgba(76,175,125,0.18); } :root[data-theme="dark"] .status-pill.declined { background: rgba(224,118,101,0.18); } :root[data-theme="dark"] .status-pill.draft-pill { background: rgba(226,176,74,0.18); color: #f0d999; } :root[data-theme="dark"] .toast { background: #2a2e36; } /* ---------- Site-wide campaign mode ---------- */ /* Chrome (topbar/accent) shift for whichever campaign is active app-wide — set via , see js/app.js applyCampaignFx(). This is separate from a single product's own promo theme classes above, and placed after the dark-mode block so a campaign's own colors still win over the generic dark topbar when both are active together. */ :root[data-campaign="blackfriday"] { --accent: #ffd100; --accent-dark: #c9a100; } :root[data-campaign="blackfriday"] .topbar { background: linear-gradient(135deg, #141414 0%, #000000 100%); } :root[data-campaign="blackfriday"] .bottom-nav { border-color: rgba(255,209,0,0.3); } :root[data-campaign="blackfriday"] .fab { background: linear-gradient(135deg, #ffd100, #c9a100); color: #111; } :root[data-campaign="noel"] { --accent: #e2b04a; } :root[data-campaign="noel"] .topbar { background: linear-gradient(135deg, #1b6b3a 0%, #7a1620 100%); } :root[data-campaign="noel"] .bottom-nav { border-color: rgba(184,39,44,0.25); } :root[data-campaign="eid"] { --accent: #ffcc00; } :root[data-campaign="eid"] .topbar { background: linear-gradient(135deg, #00843d 0%, #056b32 100%); } :root[data-campaign="eid"] .bottom-nav { border-color: rgba(0,132,61,0.25); } /* Full-viewport, click-through animated layer — one look per campaign, visible everywhere in the app (including the login screen). */ .campaign-fx { position: fixed; inset: 0; pointer-events: none; z-index: 6; overflow: hidden; } .campaign-deco { position: absolute; inset-inline-start: var(--x, 10%); opacity: 0; will-change: transform, opacity; } .campaign-deco.cfx-snow { top: -6%; font-size: 1.2rem; color: rgba(255,255,255,0.92); text-shadow: 0 0 6px rgba(255,255,255,0.6); animation: cfxSnowFall var(--dur, 6s) linear var(--d, 0s) infinite; } @keyframes cfxSnowFall { 0% { transform: translateY(0) rotate(0deg); opacity: 0; } 6% { opacity: 0.85; } 92% { opacity: 0.7; } 100% { transform: translateY(112vh) rotate(220deg); opacity: 0; } } .campaign-deco.cfx-spark { top: var(--y, 20%); font-size: 1.35rem; color: #ffd100; text-shadow: 0 0 8px rgba(255,209,0,0.85); animation: cfxSparkFlicker var(--dur, 2s) ease-in-out var(--d, 0s) infinite; } @keyframes cfxSparkFlicker { 0%, 100% { opacity: 0; transform: scale(0.5); } 50% { opacity: 0.9; transform: scale(1.2); } } .campaign-deco.cfx-twinkle { top: var(--y, 20%); font-size: 1.15rem; color: #ffe58a; text-shadow: 0 0 6px rgba(255,229,138,0.7); animation: cfxTwinkle var(--dur, 3s) ease-in-out var(--d, 0s) infinite; } @keyframes cfxTwinkle { 0%, 100% { opacity: 0.1; transform: scale(0.7); } 50% { opacity: 0.9; transform: scale(1.15); } } @media (prefers-reduced-motion: reduce) { .campaign-fx { display: none; } }