:root { --color-surface: #0f172a; --color-bg: #080d1b; --color-border: #1e293b; --color-border-light: rgba(255, 255, 255, 0.08); --color-text: #f8fafc; --color-text-muted: #94a3b8; } /* ========================================================================== MamaSell GH — Premium Dark Navy Theme Loaded after style.css to override the light theme. All template class names are preserved; only visual values change. ========================================================================== */ /* ─── Google Fonts ─────────────────────────────────────────────────── */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap'); /* ─── Dark Design Tokens ────────────────────────────────────────────── */ :root { /* Backgrounds */ --ds-bg: #080D1B; --ds-bg-2: #10182B; --ds-card: #151F35; --ds-card-2: #1A2640; --ds-card-3: #1F2D4A; /* Brand */ --ds-orange: #FF6B0B; --ds-orange-dim: rgba(255, 107, 11, 0.18); --ds-orange-glow: rgba(255, 107, 11, 0.35); --ds-purple: #A855F7; --ds-purple-dim: rgba(168, 85, 247, 0.18); /* Text */ --ds-text: #F8FAFC; --ds-text-2: #A7B2C8; --ds-text-3: #6B7A96; /* Borders */ --ds-border: rgba(255, 255, 255, 0.08); --ds-border-2: rgba(255, 255, 255, 0.05); /* Shadows */ --ds-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.35); --ds-shadow-md: 0 6px 20px rgba(0, 0, 0, 0.45); --ds-shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.55); --ds-shadow-orange: 0 4px 20px rgba(255, 107, 11, 0.3); /* Radii */ --ds-r-sm: 6px; --ds-r-md: 12px; --ds-r-lg: 16px; --ds-r-xl: 20px; --ds-r-pill: 9999px; } /* ─── Global Reset Override ─────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; background-color: var(--ds-bg); color: var(--ds-text); -webkit-font-smoothing: antialiased; } a { color: inherit; text-decoration: none; transition: color .15s; } a:hover { color: var(--ds-orange); } img { max-width: 100%; display: block; } /* ─── Top Announcement Bar ──────────────────────────────────────────── */ .top-bar { background: #040810; border-bottom: 1px solid var(--ds-border); } .top-bar-pill { background: rgba(255, 107, 11, 0.18); color: var(--ds-orange); border: 1px solid rgba(255, 107, 11, 0.3); } .top-bar-item { color: var(--ds-text-2); } .top-link { color: var(--ds-text-2); } .top-link:hover { color: var(--ds-text); } .top-link.highlight { background: var(--ds-orange-dim); color: var(--ds-orange); border-color: rgba(255, 107, 11, 0.35); } .top-link.highlight:hover { background: var(--ds-orange); color: #fff; } .top-link.hotline { color: var(--ds-text); } /* ─── Main Site Header ──────────────────────────────────────────────── */ .site-header { background: rgba(8, 13, 27, 0.95); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-bottom: 1px solid var(--ds-border); box-shadow: 0 4px 24px rgba(0,0,0,0.4); } .site-header.scrolled { background: rgba(8, 13, 27, 0.98); box-shadow: 0 8px 32px rgba(0,0,0,0.5); } .header-inner { max-width: 1280px; margin: 0 auto; padding: 10px 16px; } /* Logo */ .brand-mama { color: var(--ds-text); } .brand-sell { color: var(--ds-orange); } .brand-badge { background: var(--ds-orange); color: #fff; font-size: 9px; font-weight: 800; padding: 2px 6px; border-radius: 5px; margin-left: 5px; } .brand-icon-box { background: linear-gradient(135deg, var(--ds-orange), #e05500); box-shadow: var(--ds-shadow-orange); } /* Quick nav */ .hq-link { color: var(--ds-text-2); } .hq-link:hover { color: var(--ds-text); background: var(--ds-card); } .hq-link--deals { color: var(--ds-orange); } /* Search bar */ .search-input-wrap { background: var(--ds-card); border-color: var(--ds-border); } .search-form:focus-within .search-input-wrap { border-color: var(--ds-orange); background: var(--ds-card-2); box-shadow: 0 0 0 3px var(--ds-orange-dim); } .search-input-wrap input { color: var(--ds-text); background: transparent; } .search-input-wrap input::placeholder { color: var(--ds-text-3); } .search-icon { color: var(--ds-text-3); } .search-btn { background: linear-gradient(135deg, var(--ds-orange), #e05500); box-shadow: var(--ds-shadow-orange); } /* Nav buttons */ .nav-btn { color: var(--ds-text); } .nav-btn:hover { background: var(--ds-card); border-color: var(--ds-border); } .nav-sub { color: var(--ds-text-3); } .nav-main { color: var(--ds-text); } .nav-icon-badge-wrap { background: var(--ds-card); color: var(--ds-text-2); } .nav-btn:hover .nav-icon-badge-wrap { background: var(--ds-card-2); color: var(--ds-orange); } /* Cart button */ .cart-btn { background: linear-gradient(135deg, rgba(255,107,11,0.15), rgba(255,107,11,0.08)); border: 1px solid rgba(255,107,11,0.3); } .cart-btn:hover { background: linear-gradient(135deg, rgba(255,107,11,0.25), rgba(255,107,11,0.15)); border-color: var(--ds-orange); box-shadow: var(--ds-shadow-orange); } .cart-icon-wrap { color: var(--ds-orange); } .cart-sub { color: rgba(255,107,11,0.7); } .cart-label { color: var(--ds-orange); } /* Dropdown */ .dropdown-menu { background: var(--ds-card-2); border: 1px solid var(--ds-border); box-shadow: var(--ds-shadow-lg); } .dropdown-header { border-bottom-color: var(--ds-border); } .dropdown-header strong { color: var(--ds-text); } .dropdown-header small { color: var(--ds-text-2); } .role-pill { background: var(--ds-orange-dim); color: var(--ds-orange); border-color: rgba(255,107,11,0.25); } .dropdown-item { color: var(--ds-text-2); } .dropdown-item:hover { background: var(--ds-card-3); color: var(--ds-orange); } .dropdown-item svg { color: var(--ds-text-3); } .dropdown-item:hover svg { color: var(--ds-orange); } .dropdown-divider { background: var(--ds-border); } .dropdown-item.seller-link { color: var(--ds-orange); } .dropdown-item.admin-link { color: #60a5fa; } .dropdown-item.logout-link { color: #f87171; } .auth-dropdown-cta p { color: var(--ds-text-2); } .auth-dropdown-cta a { color: var(--ds-orange); } .btn-primary-sm { background: linear-gradient(135deg, var(--ds-orange), #e05500); } /* Category Strip */ .category-strip { background: var(--ds-bg-2); border-top: 1px solid var(--ds-border); border-bottom: 1px solid var(--ds-border); } .category-inner { max-width: 1280px; margin: 0 auto; } .all-cat-btn { background: var(--ds-card); border-color: var(--ds-border); color: var(--ds-text); } .all-cat-btn:hover { background: var(--ds-orange-dim); border-color: var(--ds-orange); color: var(--ds-orange); } .cat-link { color: var(--ds-text-2); } .cat-link:hover { color: var(--ds-orange); background: var(--ds-orange-dim); } .cat-link.deals-link { color: #f87171; background: rgba(248, 113, 113, 0.1); } .cat-link.deals-link:hover { background: rgba(248, 113, 113, 0.15); color: #fca5a5; } .cat-strip-perk { background: rgba(34, 197, 94, 0.1); border-color: rgba(34, 197, 94, 0.2); color: #4ade80; } /* Hamburger */ .hamburger-btn { color: var(--ds-text); } .ham-line { background: var(--ds-text); } /* Flash Messages */ .flash-alert { border-radius: var(--ds-r-md); } .flash-success { background: rgba(34,197,94,0.12); color: #4ade80; border-color: rgba(34,197,94,0.25); } .flash-error { background: rgba(239,68,68,0.12); color: #f87171; border-color: rgba(239,68,68,0.25); } .flash-info { background: rgba(59,130,246,0.12); color: #93c5fd; border-color: rgba(59,130,246,0.25); } .flash-warning { background: rgba(234,179,8,0.12); color: #fde047; border-color: rgba(234,179,8,0.25); } /* Main */ .site-main { max-width: 1280px; margin: 24px auto 100px; padding: 0 16px; min-height: 60vh; } /* ─── HERO SECTION ──────────────────────────────────────────────────── */ .ms-hero { background: linear-gradient(135deg, #080D1B 0%, #0D1628 50%, #0F1A32 100%); position: relative; overflow: hidden; padding: 60px 0 0; border-bottom: 1px solid var(--ds-border); } .ms-hero::before { content: ''; position: absolute; top: -80px; left: -80px; width: 400px; height: 400px; background: radial-gradient(circle, rgba(255,107,11,0.12) 0%, transparent 70%); pointer-events: none; } .ms-hero::after { content: ''; position: absolute; bottom: 0; right: -80px; width: 350px; height: 350px; background: radial-gradient(circle, rgba(168,85,247,0.1) 0%, transparent 70%); pointer-events: none; } .ms-hero__inner { max-width: 1280px; margin: 0 auto; padding: 0 24px 60px; display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; } .ms-hero__eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--ds-orange); background: var(--ds-orange-dim); border: 1px solid rgba(255,107,11,0.3); padding: 5px 14px; border-radius: var(--ds-r-pill); margin-bottom: 20px; } .ms-hero__heading { font-size: clamp(2.2rem, 4vw, 3.6rem); font-weight: 900; line-height: 1.1; color: var(--ds-text); margin-bottom: 20px; letter-spacing: -1.5px; } .ms-hero__accent { background: linear-gradient(135deg, var(--ds-orange), #FF9A5C); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .ms-hero__sub { font-size: 16px; color: var(--ds-text-2); line-height: 1.65; margin-bottom: 32px; max-width: 480px; } .ms-hero__cta-row { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 28px; } .ms-hero__badges { display: flex; gap: 10px; flex-wrap: wrap; } /* Trust badges in hero */ .ms-trust-badge { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--ds-text-2); background: var(--ds-card); border: 1px solid var(--ds-border); padding: 6px 12px; border-radius: var(--ds-r-pill); } /* Hero visual */ .ms-hero__visual { position: relative; display: flex; align-items: center; justify-content: center; min-height: 320px; } .ms-hero__blob { width: 320px; height: 320px; background: radial-gradient(circle, rgba(255,107,11,0.15) 0%, rgba(168,85,247,0.08) 50%, transparent 75%); border-radius: 50%; position: absolute; animation: heroPulse 4s ease-in-out infinite; } @keyframes heroPulse { 0%, 100% { transform: scale(1); opacity: 0.8; } 50% { transform: scale(1.08); opacity: 1; } } .ms-hero__product-showcase { position: relative; width: 200px; height: 200px; display: flex; align-items: center; justify-content: center; } .ms-showcase-ring { position: absolute; border-radius: 50%; border: 2px solid rgba(255,107,11,0.25); animation: spin 12s linear infinite; } .ms-ring--outer { width: 200px; height: 200px; border-color: rgba(255,107,11,0.15); } .ms-ring--inner { width: 130px; height: 130px; animation-direction: reverse; animation-duration: 8s; } @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .ms-showcase-center { width: 90px; height: 90px; background: linear-gradient(135deg, var(--ds-card-2), var(--ds-card-3)); border: 2px solid var(--ds-orange-dim); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 2.5rem; box-shadow: 0 0 40px rgba(255,107,11,0.2); } .ms-showcase-emoji { font-size: 2rem; } /* Float Cards */ .ms-float-card { position: absolute; background: var(--ds-card-2); border: 1px solid var(--ds-border); border-radius: var(--ds-r-lg); padding: 10px 14px; display: flex; align-items: center; gap: 10px; box-shadow: var(--ds-shadow-md); min-width: 160px; backdrop-filter: blur(10px); } .ms-float-card--1 { top: 10%; left: 0; animation: floatUp 3s ease-in-out infinite; } .ms-float-card--2 { top: 45%; right: -10px; animation: floatUp 3s ease-in-out 1s infinite; } .ms-float-card--3 { bottom: 10%; left: 5%; animation: floatUp 3s ease-in-out 2s infinite; } @keyframes floatUp { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } } .ms-float-card strong { display: block; font-size: 12px; font-weight: 700; color: var(--ds-text); } .ms-float-card small { display: block; font-size: 11px; color: var(--ds-text-2); } .ms-float-icon { font-size: 1.5rem; } /* Hero wave override — hide the white wave meant for light theme */ .ms-hero__wave { display: none; } /* ─── Buttons ───────────────────────────────────────────────────────── */ .ms-btn { display: inline-flex; align-items: center; gap: 8px; font-family: inherit; font-weight: 700; border-radius: var(--ds-r-md); border: none; cursor: pointer; transition: all .2s ease; font-size: 14px; text-decoration: none; padding: 11px 22px; } .ms-btn--primary { background: linear-gradient(135deg, var(--ds-orange), #e05500); color: #fff; box-shadow: var(--ds-shadow-orange); } .ms-btn--primary:hover { filter: brightness(1.1); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(255,107,11,0.45); color: #fff; } .ms-btn--outline { background: transparent; color: var(--ds-text); border: 1.5px solid var(--ds-border); } .ms-btn--outline:hover { border-color: var(--ds-orange); color: var(--ds-orange); background: var(--ds-orange-dim); } .ms-btn--white { background: var(--ds-card-2); color: var(--ds-text); border: 1px solid var(--ds-border); } .ms-btn--white:hover { background: var(--ds-card-3); border-color: var(--ds-orange); color: var(--ds-orange); } .ms-btn--lg { padding: 14px 28px; font-size: 15px; border-radius: var(--ds-r-lg); } .ms-btn--cart { background: linear-gradient(135deg, var(--ds-orange), #e05500); color: #fff; width: 100%; justify-content: center; padding: 10px 16px; border-radius: var(--ds-r-md); font-size: 13px; box-shadow: var(--ds-shadow-orange); } .ms-btn--cart:hover { filter: brightness(1.1); transform: translateY(-1px); color: #fff; } .ms-btn--disabled { background: var(--ds-card-3); color: var(--ds-text-3); cursor: not-allowed; width: 100%; justify-content: center; padding: 10px 16px; border-radius: var(--ds-r-md); font-size: 13px; } /* ─── Trust Strip ───────────────────────────────────────────────────── */ .ms-trust-strip { background: var(--ds-bg-2); border-bottom: 1px solid var(--ds-border); } .ms-trust-strip__inner { max-width: 1280px; margin: 0 auto; padding: 16px 24px; display: flex; justify-content: space-around; flex-wrap: wrap; gap: 16px; } .ms-ts-item { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 160px; } .ms-ts-item svg { color: var(--ds-orange); flex-shrink: 0; } .ms-ts-item strong { display: block; font-size: 13px; font-weight: 700; color: var(--ds-text); } .ms-ts-item small { display: block; font-size: 11px; color: var(--ds-text-2); } /* ─── Section Layout ────────────────────────────────────────────────── */ .ms-section { max-width: 1280px; margin: 0 auto; padding: 56px 24px; } .ms-section--alt { background: var(--ds-bg-2); max-width: 100%; padding: 56px 0; } .ms-section--alt > .ms-section__head, .ms-section--alt > .ms-products-row, .ms-section--alt > .ms-products-grid, .ms-section--alt > .ms-reviews-grid, .ms-section--alt > .ms-cats-grid { max-width: 1280px; margin-left: auto; margin-right: auto; padding-left: 24px; padding-right: 24px; } .ms-section__head { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 28px; } .ms-section__head--center { flex-direction: column; align-items: center; text-align: center; } .ms-section__label { display: block; font-size: 11px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--ds-orange); margin-bottom: 6px; } .ms-section__title { font-size: clamp(1.4rem, 2.5vw, 1.9rem); font-weight: 800; color: var(--ds-text); letter-spacing: -0.5px; margin: 0; } .ms-see-all { color: var(--ds-orange); font-size: 13px; font-weight: 700; text-decoration: none; display: flex; align-items: center; gap: 4px; transition: gap .15s; } .ms-see-all:hover { color: var(--ds-text); gap: 8px; } /* ─── Category Cards ────────────────────────────────────────────────── */ .ms-cats-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 14px; max-width: 1280px; margin: 0 auto; padding: 0 24px; } .ms-cat-card { background: var(--ds-card); border: 1px solid var(--ds-border); border-radius: var(--ds-r-lg); padding: 20px 12px 16px; display: flex; flex-direction: column; align-items: center; gap: 10px; text-decoration: none; transition: all .2s ease; position: relative; overflow: hidden; } .ms-cat-card::before { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, var(--cat-brand, #FF6B0B) 0%, transparent 80%); opacity: 0; transition: opacity .2s; } .ms-cat-card:hover { border-color: var(--cat-brand, var(--ds-orange)); transform: translateY(-4px); box-shadow: 0 12px 30px rgba(0,0,0,0.4); } .ms-cat-card:hover::before { opacity: 0.06; } .ms-cat-card__img-wrap { width: 60px; height: 60px; border-radius: 50%; overflow: hidden; background: var(--ds-card-2); display: flex; align-items: center; justify-content: center; flex-shrink: 0; border: 2px solid var(--ds-border); } .ms-cat-card__img { width: 100%; height: 100%; object-fit: cover; } .ms-cat-card__ph { font-size: 18px; font-weight: 800; color: var(--ds-orange); } .ms-cat-card__name { font-size: 12px; font-weight: 700; color: var(--ds-text); text-align: center; line-height: 1.3; } .ms-cat-card__count { font-size: 10px; color: var(--ds-text-3); font-weight: 500; } .ms-empty-notice { color: var(--ds-text-2); font-size: 14px; } /* ─── Product Cards ─────────────────────────────────────────────────── */ .ms-products-row { display: flex; gap: 16px; overflow-x: auto; scrollbar-width: none; padding-bottom: 8px; max-width: 1280px; margin: 0 auto; padding-left: 24px; padding-right: 24px; } .ms-products-row::-webkit-scrollbar { display: none; } .ms-products-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 18px; } .ms-product-card { background: var(--ds-card); border: 1px solid var(--ds-border); border-radius: var(--ds-r-lg); overflow: hidden; transition: all .22s ease; position: relative; flex-shrink: 0; width: 220px; } .ms-products-grid .ms-product-card { width: auto; } .ms-product-card:hover { border-color: rgba(255,107,11,0.4); transform: translateY(-5px); box-shadow: 0 16px 40px rgba(0,0,0,0.5); } /* Product badge */ .ms-product-card__badge { position: absolute; top: 10px; left: 10px; z-index: 2; background: linear-gradient(135deg, var(--ds-orange), #e05500); color: #fff; font-size: 10px; font-weight: 800; padding: 3px 8px; border-radius: var(--ds-r-pill); letter-spacing: 0.3px; } .ms-product-card__badge--sold { background: rgba(239,68,68,0.85); } /* Product image */ .ms-product-card__img-wrap { display: block; width: 100%; height: 180px; overflow: hidden; background: var(--ds-card-2); position: relative; } .ms-product-card__img-wrap img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; } .ms-product-card:hover .ms-product-card__img-wrap img { transform: scale(1.06); } .ms-product-card__img-ph { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 3rem; font-weight: 900; color: var(--ds-orange); background: linear-gradient(135deg, var(--ds-card-2), var(--ds-card-3)); } .ms-product-card__overlay { position: absolute; inset: 0; background: rgba(0,0,0,0.4); display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity .2s; } .ms-product-card:hover .ms-product-card__overlay { opacity: 1; } .ms-product-card__overlay span { color: #fff; font-size: 13px; font-weight: 700; background: rgba(255,107,11,0.85); padding: 7px 16px; border-radius: var(--ds-r-pill); } /* Product body */ .ms-product-card__body { padding: 14px; } .ms-product-card__store { display: block; font-size: 10px; font-weight: 600; color: var(--ds-text-3); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 4px; } .ms-product-card__name { font-size: 13px; font-weight: 700; color: var(--ds-text); line-height: 1.35; margin-bottom: 6px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .ms-product-card__name a { color: inherit; } .ms-product-card__name a:hover { color: var(--ds-orange); } .ms-product-card__stars { display: flex; align-items: center; gap: 4px; margin-bottom: 8px; } .ms-stars { color: #FBBF24; font-size: 11px; } .ms-stars__count { font-size: 11px; color: var(--ds-text-2); } .ms-product-card__prices { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; } .ms-price--current { font-size: 15px; font-weight: 800; color: var(--ds-orange); } .ms-price--old { font-size: 12px; color: var(--ds-text-3); text-decoration: line-through; } .ms-product-card__cart-form { margin: 0; } .ms-empty-catalog { text-align: center; padding: 60px 20px; color: var(--ds-text-2); grid-column: 1 / -1; } /* ─── Offer Banner ──────────────────────────────────────────────────── */ .ms-offer-banner { background: linear-gradient(135deg, #0D1628 0%, #1A0E2E 50%, #0D1628 100%); border: 1px solid var(--ds-border); border-radius: var(--ds-r-xl); margin: 0 24px; max-width: calc(1280px - 48px); margin-left: auto; margin-right: auto; overflow: hidden; position: relative; } .ms-offer-banner::before { content: ''; position: absolute; top: -60px; left: -60px; width: 300px; height: 300px; background: radial-gradient(circle, rgba(168,85,247,0.2) 0%, transparent 70%); pointer-events: none; } .ms-offer-banner::after { content: ''; position: absolute; bottom: -40px; right: -40px; width: 250px; height: 250px; background: radial-gradient(circle, rgba(255,107,11,0.2) 0%, transparent 70%); pointer-events: none; } .ms-offer-banner__inner { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 32px; padding: 48px; position: relative; } .ms-offer-banner__eyebrow { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--ds-purple); margin-bottom: 14px; } .ms-offer-banner__heading { font-size: clamp(1.8rem, 3vw, 2.8rem); font-weight: 900; color: var(--ds-text); letter-spacing: -1px; margin-bottom: 12px; line-height: 1.1; } .ms-offer-banner__heading span { background: linear-gradient(135deg, var(--ds-orange), var(--ds-purple)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .ms-offer-banner__copy p { color: var(--ds-text-2); margin-bottom: 24px; font-size: 15px; } /* Countdown timer */ .ms-offer-banner__timer { text-align: center; } .ms-timer-label { font-size: 12px; font-weight: 600; color: var(--ds-text-2); letter-spacing: 1px; text-transform: uppercase; margin-bottom: 12px; } .ms-timer-boxes { display: flex; align-items: center; gap: 8px; } .ms-timer-box { background: var(--ds-card-2); border: 1px solid var(--ds-border); border-radius: var(--ds-r-md); padding: 12px 16px; min-width: 64px; text-align: center; } .ms-timer-box span { display: block; font-size: 28px; font-weight: 900; color: var(--ds-orange); line-height: 1; } .ms-timer-box small { display: block; font-size: 10px; color: var(--ds-text-3); font-weight: 600; letter-spacing: 0.5px; text-transform: uppercase; margin-top: 4px; } .ms-timer-sep { font-size: 24px; font-weight: 900; color: var(--ds-orange); } /* Deal chips */ .ms-offer-banner__deals { display: flex; flex-direction: column; gap: 10px; } .ms-deal-chip { background: var(--ds-card-2); border: 1px solid var(--ds-border); border-radius: var(--ds-r-md); padding: 10px 14px; display: flex; align-items: center; gap: 12px; text-decoration: none; transition: all .15s; min-width: 220px; } .ms-deal-chip:hover { border-color: var(--ds-orange); background: var(--ds-card-3); } .ms-deal-chip img { width: 40px; height: 40px; object-fit: cover; border-radius: var(--ds-r-sm); flex-shrink: 0; } .ms-deal-chip__ph { width: 40px; height: 40px; background: var(--ds-card-3); border-radius: var(--ds-r-sm); display: flex; align-items: center; justify-content: center; font-size: 1.2rem; flex-shrink: 0; } .ms-deal-chip strong { display: block; font-size: 12px; font-weight: 700; color: var(--ds-text); } .ms-deal-chip small { display: block; font-size: 11px; color: var(--ds-orange); font-weight: 600; } .ms-deal-chip__pct { margin-left: auto; font-size: 11px; font-weight: 800; color: #4ade80; background: rgba(74,222,128,0.12); padding: 2px 8px; border-radius: var(--ds-r-pill); } /* ─── Stats Section ─────────────────────────────────────────────────── */ .ms-stats-section { background: linear-gradient(135deg, #0D1628, #101828); border-top: 1px solid var(--ds-border); border-bottom: 1px solid var(--ds-border); } .ms-stats-section__inner { max-width: 1280px; margin: 0 auto; padding: 56px 24px; } .ms-stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; } .ms-stat-card { background: var(--ds-card); border: 1px solid var(--ds-border); border-radius: var(--ds-r-xl); padding: 32px 24px; text-align: center; transition: all .2s; } .ms-stat-card:hover { border-color: rgba(255,107,11,0.3); transform: translateY(-3px); } .ms-stat-card__top { display: flex; align-items: baseline; justify-content: center; gap: 2px; margin-bottom: 8px; } .ms-stat-card__num { font-size: 2.8rem; font-weight: 900; color: var(--ds-orange); letter-spacing: -1px; } .ms-stat-card__suffix { font-size: 1.2rem; font-weight: 800; color: var(--ds-orange); } .ms-stat-card__label { font-size: 14px; color: var(--ds-text-2); font-weight: 500; } /* ─── Reviews ───────────────────────────────────────────────────────── */ .ms-reviews-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 18px; max-width: 1280px; margin: 0 auto; padding: 0 24px; } .ms-review-card { background: var(--ds-card); border: 1px solid var(--ds-border); border-radius: var(--ds-r-xl); padding: 24px; transition: all .2s; } .ms-review-card:hover { border-color: rgba(255,107,11,0.25); } .ms-review-card__top { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; } .ms-review-card__avatar { width: 44px; height: 44px; border-radius: 50%; background: linear-gradient(135deg, var(--ds-orange), #e05500); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 18px; font-weight: 800; flex-shrink: 0; } .ms-review-card__top strong { display: block; font-size: 13px; color: var(--ds-text); } .ms-review-stars { color: #FBBF24; font-size: 13px; } .ms-review-verified { margin-left: auto; font-size: 11px; color: #4ade80; font-weight: 600; } .ms-review-card__body { font-size: 14px; color: var(--ds-text-2); line-height: 1.6; font-style: italic; } .ms-review-card__product { display: block; margin-top: 10px; font-size: 11px; color: var(--ds-text-3); } /* ─── CTA Split ─────────────────────────────────────────────────────── */ .ms-cta-split { display: grid; grid-template-columns: 1fr 1fr; max-width: 1280px; margin: 0 auto; overflow: hidden; border-radius: var(--ds-r-xl); border: 1px solid var(--ds-border); } .ms-cta-split__panel { padding: 56px 48px; display: flex; flex-direction: column; gap: 16px; } .ms-cta-split__panel--buy { background: linear-gradient(135deg, rgba(255,107,11,0.1), rgba(255,107,11,0.05)); border-right: 1px solid var(--ds-border); } .ms-cta-split__panel--sell { background: linear-gradient(135deg, rgba(168,85,247,0.1), rgba(168,85,247,0.05)); } .ms-cta-split__icon { font-size: 2.5rem; } .ms-cta-split__panel h3 { font-size: 1.5rem; font-weight: 800; color: var(--ds-text); } .ms-cta-split__panel p { color: var(--ds-text-2); line-height: 1.6; font-size: 15px; } /* ─── Newsletter ────────────────────────────────────────────────────── */ .ms-newsletter { background: var(--ds-bg-2); border-top: 1px solid var(--ds-border); border-bottom: 1px solid var(--ds-border); } .ms-newsletter__inner { max-width: 1280px; margin: 0 auto; padding: 56px 24px; display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; } .ms-newsletter__copy h3 { font-size: 1.5rem; font-weight: 800; color: var(--ds-text); margin-bottom: 8px; } .ms-newsletter__copy p { color: var(--ds-text-2); font-size: 14px; } .ms-newsletter__form { display: flex; gap: 10px; } .ms-newsletter__form input { flex: 1; background: var(--ds-card); border: 1px solid var(--ds-border); border-radius: var(--ds-r-md); padding: 12px 16px; color: var(--ds-text); font-family: inherit; font-size: 14px; outline: none; transition: border-color .15s; } .ms-newsletter__form input:focus { border-color: var(--ds-orange); } .ms-newsletter__form input::placeholder { color: var(--ds-text-3); } .ms-newsletter__note { margin-top: 10px; font-size: 12px; color: var(--ds-text-3); } /* ─── FAQ ───────────────────────────────────────────────────────────── */ .ms-faq { max-width: 800px; margin: 0 auto; display: flex; flex-direction: column; gap: 10px; } .ms-faq-item { background: var(--ds-card); border: 1px solid var(--ds-border); border-radius: var(--ds-r-md); overflow: hidden; transition: border-color .15s; } .ms-faq-item.open { border-color: rgba(255,107,11,0.3); } .ms-faq-q { width: 100%; display: flex; justify-content: space-between; align-items: center; padding: 18px 20px; background: none; border: none; color: var(--ds-text); font-size: 14px; font-weight: 600; font-family: inherit; cursor: pointer; text-align: left; gap: 10px; transition: color .15s; } .ms-faq-q:hover { color: var(--ds-orange); } .ms-faq-chevron { flex-shrink: 0; color: var(--ds-text-3); transition: transform .2s; } .ms-faq-item.open .ms-faq-chevron { transform: rotate(180deg); color: var(--ds-orange); } .ms-faq-a { padding: 0 20px; max-height: 0; overflow: hidden; font-size: 14px; color: var(--ds-text-2); line-height: 1.65; transition: max-height .25s ease, padding .25s ease; } .ms-faq-item.open .ms-faq-a { max-height: 300px; padding: 0 20px 18px; } /* ─── Trust Pillars (base.html section below main) ──────────────────── */ .trust-pillars { background: var(--ds-bg-2); border-top: 1px solid var(--ds-border); } .trust-grid { max-width: 1280px; margin: 0 auto; padding: 40px 24px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; } .trust-item { display: flex; align-items: flex-start; gap: 14px; } .trust-icon-box { width: 44px; height: 44px; border-radius: var(--ds-r-md); background: var(--ds-card-2); border: 1px solid var(--ds-border); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .trust-icon--delivery svg { color: #60a5fa; } .trust-icon--shield svg { color: #4ade80; } .trust-icon--returns svg { color: var(--ds-orange); } .trust-icon--payment svg { color: var(--ds-purple); } .trust-icon-box svg { color: var(--ds-orange); } .trust-body h4 { font-size: 13px; font-weight: 700; color: var(--ds-text); margin-bottom: 4px; } .trust-body p { font-size: 12px; color: var(--ds-text-2); line-height: 1.55; } /* ─── Newsletter Strip (base.html) ──────────────────────────────────── */ .footer-newsletter { background: linear-gradient(135deg, rgba(255,107,11,0.08), rgba(168,85,247,0.06)); border-top: 1px solid var(--ds-border); } .newsletter-inner { max-width: 1280px; margin: 0 auto; padding: 40px 24px; display: flex; align-items: center; justify-content: space-between; gap: 32px; } .newsletter-badge { display: inline-block; font-size: 10px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; color: var(--ds-orange); background: var(--ds-orange-dim); border: 1px solid rgba(255,107,11,0.3); padding: 3px 12px; border-radius: var(--ds-r-pill); margin-bottom: 6px; } .newsletter-title { font-size: 1.4rem; font-weight: 800; color: var(--ds-text); margin-bottom: 4px; } .newsletter-desc { font-size: 13px; color: var(--ds-text-2); } .newsletter-form { display: flex; gap: 10px; flex: 1; max-width: 480px; } .newsletter-input-wrap { flex: 1; display: flex; align-items: center; gap: 10px; background: var(--ds-card); border: 1px solid var(--ds-border); border-radius: var(--ds-r-md); padding: 0 14px; } .newsletter-icon { color: var(--ds-text-3); flex-shrink: 0; } .newsletter-input-wrap input { flex: 1; background: none; border: none; outline: none; color: var(--ds-text); font-family: inherit; font-size: 13px; padding: 12px 0; } .newsletter-input-wrap input::placeholder { color: var(--ds-text-3); } .newsletter-btn { background: linear-gradient(135deg, var(--ds-orange), #e05500); color: #fff; border: none; border-radius: var(--ds-r-md); padding: 12px 20px; font-size: 13px; font-weight: 700; font-family: inherit; cursor: pointer; display: flex; align-items: center; gap: 6px; transition: all .2s; } .newsletter-btn:hover { filter: brightness(1.1); transform: translateY(-1px); } /* ─── Footer ────────────────────────────────────────────────────────── */ .site-footer { background: #040810; border-top: 1px solid var(--ds-border); } .footer-inner { max-width: 1280px; margin: 0 auto; padding: 56px 24px 40px; display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 40px; } .footer-tagline { font-size: 13px; color: var(--ds-text-2); line-height: 1.7; margin: 14px 0 20px; } .footer-col h5 { font-size: 12px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; color: var(--ds-text-3); margin-bottom: 16px; } .footer-col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; } .footer-col ul li a { font-size: 13px; color: var(--ds-text-2); transition: color .15s; display: inline-flex; align-items: center; gap: 6px; } .footer-col ul li a:hover { color: var(--ds-orange); } .footer-deals-link { color: var(--ds-orange) !important; font-weight: 700; } .footer-bottom { background: rgba(0,0,0,0.3); border-top: 1px solid var(--ds-border); } .footer-bottom-inner { max-width: 1280px; margin: 0 auto; padding: 18px 24px; display: flex; align-items: center; justify-content: space-between; gap: 20px; } .footer-copy { font-size: 12px; color: var(--ds-text-3); } .footer-ssl-badge { display: flex; align-items: center; gap: 6px; font-size: 12px; color: #4ade80; } .footer-ssl-badge svg { color: #4ade80; } .footer-bottom-links { display: flex; gap: 16px; } .footer-bottom-links a { font-size: 12px; color: var(--ds-text-3); } .footer-bottom-links a:hover { color: var(--ds-text); } /* Footer social */ .footer-social-row { display: flex; gap: 10px; margin-bottom: 20px; } .social-circle { width: 36px; height: 36px; border-radius: 50%; background: var(--ds-card); border: 1px solid var(--ds-border); display: flex; align-items: center; justify-content: center; color: var(--ds-text-2); transition: all .15s; } .social-circle:hover { background: var(--ds-orange-dim); border-color: var(--ds-orange); color: var(--ds-orange); } /* Footer MoMo chips */ .momo-chips-wrap { display: flex; flex-direction: column; gap: 8px; } .momo-label { font-size: 11px; font-weight: 600; color: var(--ds-text-3); text-transform: uppercase; letter-spacing: 0.5px; } .momo-chips { display: flex; gap: 8px; flex-wrap: wrap; } .momo-chip { font-size: 11px; font-weight: 700; padding: 4px 12px; border-radius: var(--ds-r-pill); border: 1px solid var(--ds-border); } .momo-mtn { background: rgba(255,187,0,0.12); color: #FFBB00; border-color: rgba(255,187,0,0.25); } .momo-card { background: var(--ds-card-2); color: var(--ds-text-2); } .momo-mamapay { background: rgba(37,99,235,0.15) !important; color: #60a5fa !important; border-color: rgba(37,99,235,0.3) !important; } /* Footer contact */ .footer-contact-item { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 12px; font-size: 13px; color: var(--ds-text-2); } .footer-contact-item strong { color: var(--ds-text); } .footer-contact-item a { color: var(--ds-orange); } .f-contact-icon { width: 32px; height: 32px; border-radius: var(--ds-r-sm); background: var(--ds-card-2); border: 1px solid var(--ds-border); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .f-contact-icon svg { color: var(--ds-orange); } .f-contact-icon--whatsapp svg { color: #4ade80; } .footer-hours { font-size: 12px; color: var(--ds-text-3); margin-top: 4px; } /* Brand footer */ .footer-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; font-size: 22px; font-weight: 900; } .brand-icon-box--footer { background: linear-gradient(135deg, var(--ds-orange), #e05500); width: 34px; height: 34px; border-radius: 9px; display: flex; align-items: center; justify-content: center; color: #fff; } /* ─── Mobile Overlay ────────────────────────────────────────────────── */ .mobile-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.6); z-index: 999; backdrop-filter: blur(4px); } .mobile-overlay.active { display: block; } /* ─── Common page: forms, inputs ────────────────────────────────────── */ input, select, textarea { background: var(--ds-card); border: 1px solid var(--ds-border); color: var(--ds-text); border-radius: var(--ds-r-md); padding: 10px 14px; font-family: inherit; font-size: 14px; outline: none; width: 100%; transition: border-color .15s; } input:focus, select:focus, textarea:focus { border-color: var(--ds-orange); } input::placeholder, textarea::placeholder { color: var(--ds-text-3); } label { color: var(--ds-text-2); font-size: 13px; font-weight: 600; display: block; margin-bottom: 6px; } /* Generic buttons */ .button, .pill { background: linear-gradient(135deg, var(--ds-orange), #e05500); color: #fff; border: none; border-radius: var(--ds-r-md); padding: 11px 22px; font-size: 14px; font-weight: 700; font-family: inherit; cursor: pointer; transition: all .2s; } .button:hover, .pill:hover { filter: brightness(1.1); transform: translateY(-1px); } .small { background: linear-gradient(135deg, var(--ds-orange), #e05500); color: #fff; border: none; border-radius: var(--ds-r-sm); padding: 6px 12px; font-size: 12px; font-weight: 700; font-family: inherit; cursor: pointer; } /* Cards */ .card, .formbox, .order { background: var(--ds-card); border: 1px solid var(--ds-border); border-radius: var(--ds-r-lg); box-shadow: var(--ds-shadow-sm); } /* ─── Cart Page ─────────────────────────────────────────────────────── */ .cart-page-layout { padding: 0 0 40px; } .cart-header-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 28px; padding-top: 8px; } .cart-title { font-size: 1.8rem; font-weight: 800; color: var(--ds-text); } .continue-shopping-link { color: var(--ds-orange); font-size: 13px; font-weight: 600; } .cart-content-grid { display: grid; grid-template-columns: 1fr 340px; gap: 24px; } .cart-item-card { background: var(--ds-card); border: 1px solid var(--ds-border); border-radius: var(--ds-r-lg); padding: 18px; display: flex; gap: 18px; margin-bottom: 14px; transition: border-color .15s; } .cart-item-card:hover { border-color: rgba(255,107,11,0.3); } .cart-item-img { width: 90px; height: 90px; border-radius: var(--ds-r-md); overflow: hidden; background: var(--ds-card-2); flex-shrink: 0; } .cart-item-img img { width: 100%; height: 100%; object-fit: cover; } .img-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 1.8rem; font-weight: 800; color: var(--ds-orange); background: var(--ds-card-2); } .cart-product-title a { color: var(--ds-text); font-size: 14px; font-weight: 700; } .cart-product-title a:hover { color: var(--ds-orange); } .cart-item-price { font-size: 16px; font-weight: 800; color: var(--ds-orange); } .cart-old-price { font-size: 12px; color: var(--ds-text-3); text-decoration: line-through; } .cart-disc-pill { font-size: 11px; font-weight: 700; background: var(--ds-orange-dim); color: var(--ds-orange); padding: 2px 7px; border-radius: var(--ds-r-pill); } .cart-seller-meta { font-size: 12px; color: var(--ds-text-2); margin: 6px 0; display: flex; gap: 10px; flex-wrap: wrap; } .stock-alert { color: #f87171; font-weight: 600; } .stock-ok { color: #4ade80; font-weight: 600; } .cart-qty-select { background: var(--ds-card-2); border: 1px solid var(--ds-border); border-radius: var(--ds-r-sm); padding: 5px 10px; color: var(--ds-text); font-size: 13px; font-weight: 600; width: auto; } .qty-select-label { color: var(--ds-text-2); font-size: 12px; font-weight: 600; margin-bottom: 0; margin-right: 6px; } .cart-item-actions { display: flex; align-items: center; gap: 10px; margin-top: 8px; } .btn-cart-remove { display: flex; align-items: center; gap: 5px; background: none; border: none; color: #f87171; font-size: 11px; font-weight: 700; font-family: inherit; cursor: pointer; padding: 4px 8px; border-radius: var(--ds-r-sm); transition: background .15s; } .btn-cart-remove:hover { background: rgba(239,68,68,0.1); } .action-divider { color: var(--ds-border); font-size: 16px; } .cart-summary-card { background: var(--ds-card); border: 1px solid var(--ds-border); border-radius: var(--ds-r-xl); padding: 24px; position: sticky; top: 90px; } .summary-title { font-size: 12px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; color: var(--ds-text-3); margin-bottom: 20px; } .summary-line { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--ds-border); font-size: 14px; color: var(--ds-text-2); } .summary-price { color: var(--ds-text); font-weight: 700; } .summary-delivery-note { display: flex; gap: 8px; font-size: 12px; color: var(--ds-text-3); margin: 14px 0; align-items: flex-start; line-height: 1.5; } .summary-delivery-note svg { color: var(--ds-orange); flex-shrink: 0; margin-top: 1px; } .btn-checkout-now { display: block; width: 100%; text-align: center; background: linear-gradient(135deg, var(--ds-orange), #e05500); color: #fff; padding: 14px; border-radius: var(--ds-r-md); font-size: 14px; font-weight: 800; letter-spacing: 0.5px; box-shadow: var(--ds-shadow-orange); transition: all .2s; } .btn-checkout-now:hover { filter: brightness(1.1); transform: translateY(-2px); color: #fff; box-shadow: 0 8px 24px rgba(255,107,11,0.45); } .cart-guarantee-card { background: var(--ds-card-2); border: 1px solid var(--ds-border); border-radius: var(--ds-r-lg); padding: 18px; margin-top: 14px; } .cart-guarantee-card h4 { font-size: 12px; font-weight: 800; color: var(--ds-text-2); margin-bottom: 10px; letter-spacing: 0.5px; text-transform: uppercase; } .cart-guarantee-card ul { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 8px; } .cart-guarantee-card ul li { font-size: 12px; color: var(--ds-text-2); display: flex; gap: 6px; align-items: center; } .cart-empty-state { text-align: center; padding: 80px 24px; } .cart-empty-icon { font-size: 4rem; margin-bottom: 16px; } .cart-empty-state h2 { font-size: 1.5rem; font-weight: 800; color: var(--ds-text); margin-bottom: 10px; } .cart-empty-state p { color: var(--ds-text-2); margin-bottom: 24px; font-size: 15px; } .btn-start-shopping { display: inline-flex; align-items: center; gap: 8px; background: linear-gradient(135deg, var(--ds-orange), #e05500); color: #fff; padding: 14px 28px; border-radius: var(--ds-r-lg); font-size: 14px; font-weight: 800; letter-spacing: 0.5px; } .btn-start-shopping:hover { filter: brightness(1.1); color: #fff; } /* ─── Product Detail Page ────────────────────────────────────────────── */ .product-page-layout { max-width: 1280px; margin: 0 auto; padding: 24px; } .breadcrumb { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ds-text-3); margin-bottom: 24px; flex-wrap: wrap; } .breadcrumb a { color: var(--ds-text-2); } .breadcrumb a:hover { color: var(--ds-orange); } .breadcrumb-separator { color: var(--ds-border); } .breadcrumb-current { color: var(--ds-text); font-weight: 600; } .product-detail-card { display: grid; grid-template-columns: 480px 1fr auto; gap: 32px; background: var(--ds-card); border: 1px solid var(--ds-border); border-radius: var(--ds-r-xl); padding: 32px; margin-bottom: 32px; } .main-preview-wrap { background: var(--ds-card-2); border-radius: var(--ds-r-lg); position: relative; overflow: hidden; aspect-ratio: 1; display: flex; align-items: center; justify-content: center; } .main-product-image { width: 100%; height: 100%; object-fit: cover; } .img-placeholder.big { width: 100%; height: 320px; background: var(--ds-card-2); display: flex; align-items: center; justify-content: center; font-size: 5rem; font-weight: 900; color: var(--ds-orange); border-radius: var(--ds-r-lg); } .badge-express-corner { position: absolute; top: 12px; right: 12px; background: linear-gradient(135deg, var(--ds-orange), #e05500); color: #fff; font-size: 11px; font-weight: 800; padding: 4px 10px; border-radius: var(--ds-r-pill); } .gallery-thumbs-row { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; } .thumb-btn { width: 64px; height: 64px; border-radius: var(--ds-r-sm); overflow: hidden; border: 2px solid var(--ds-border); cursor: pointer; background: none; padding: 0; transition: border-color .15s; } .thumb-btn:hover, .thumb-btn.active { border-color: var(--ds-orange); } .thumb-btn img { width: 100%; height: 100%; object-fit: cover; } .share-box { margin-top: 16px; } .share-label { font-size: 11px; font-weight: 700; color: var(--ds-text-3); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 8px; display: block; } .share-icons { display: flex; gap: 8px; } .share-btn { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; padding: 7px 14px; border-radius: var(--ds-r-md); border: 1px solid var(--ds-border); background: var(--ds-card-2); color: var(--ds-text-2); cursor: pointer; transition: all .15s; font-family: inherit; } .share-btn:hover { border-color: var(--ds-orange); color: var(--ds-orange); } .share-btn.whatsapp:hover { border-color: #4ade80; color: #4ade80; } .product-brand-tag, .product-sku-tag { font-size: 11px; font-weight: 600; color: var(--ds-text-3); background: var(--ds-card-2); border: 1px solid var(--ds-border); padding: 3px 10px; border-radius: var(--ds-r-pill); display: inline-block; margin-right: 6px; margin-bottom: 10px; } .product-title { font-size: 1.8rem; font-weight: 800; color: var(--ds-text); margin-bottom: 12px; letter-spacing: -0.5px; line-height: 1.2; } .product-rating-row { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; } .stars { color: #FBBF24; font-size: 16px; } .rating-link { font-size: 13px; color: var(--ds-text-2); text-decoration: underline; } .verified-pill { font-size: 11px; font-weight: 700; color: #4ade80; background: rgba(74,222,128,0.1); border: 1px solid rgba(74,222,128,0.2); padding: 3px 10px; border-radius: var(--ds-r-pill); } .product-price-box { background: var(--ds-card-2); border: 1px solid var(--ds-border); border-radius: var(--ds-r-lg); padding: 20px; margin-bottom: 20px; } .price-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .product-price-current { font-size: 2rem; font-weight: 900; color: var(--ds-orange); } .product-price-old { font-size: 1.1rem; color: var(--ds-text-3); text-decoration: line-through; } .product-discount-pill { background: linear-gradient(135deg, var(--ds-orange), #e05500); color: #fff; font-size: 12px; font-weight: 800; padding: 4px 12px; border-radius: var(--ds-r-pill); } .product-savings-row { margin-top: 10px; } .savings-text { font-size: 13px; color: #4ade80; font-weight: 600; } .tax-inclusive-text { display: block; margin-top: 8px; font-size: 11px; color: var(--ds-text-3); } .stock-status-wrap { margin-bottom: 16px; } .stock-badge { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; padding: 5px 12px; border-radius: var(--ds-r-pill); } .stock-badge.in-stock { background: rgba(74,222,128,0.1); color: #4ade80; border: 1px solid rgba(74,222,128,0.2); } .stock-badge.low-stock { background: rgba(234,179,8,0.1); color: #fde047; border: 1px solid rgba(234,179,8,0.2); } .stock-badge.out-stock { background: rgba(239,68,68,0.1); color: #f87171; border: 1px solid rgba(239,68,68,0.2); } /* ─── Auth Pages ────────────────────────────────────────────────────── */ .auth-split-layout { display: grid; grid-template-columns: 1fr 1fr; min-height: calc(100vh - 70px); } .auth-brand-panel { background: linear-gradient(135deg, #080D1B 0%, #0D1628 100%); padding: 60px 48px; display: flex; flex-direction: column; justify-content: center; position: relative; overflow: hidden; border-right: 1px solid var(--ds-border); } .auth-brand-panel::before { content: ''; position: absolute; top: -100px; right: -100px; width: 400px; height: 400px; background: radial-gradient(circle, rgba(255,107,11,0.15) 0%, transparent 70%); pointer-events: none; } .auth-brand-inner { position: relative; z-index: 1; } .auth-logo-link { display: flex; align-items: center; gap: 10px; margin-bottom: 40px; } .auth-logo-icon { width: 50px; height: 50px; background: linear-gradient(135deg, var(--ds-orange), #e05500); border-radius: 14px; display: flex; align-items: center; justify-content: center; color: #fff; box-shadow: var(--ds-shadow-orange); } .auth-logo-text { font-size: 26px; font-weight: 900; color: var(--ds-text); letter-spacing: -1px; } .auth-logo-text span { color: var(--ds-orange); } .auth-logo-text sup { font-size: 11px; font-weight: 800; color: var(--ds-text-3); margin-left: 2px; } .auth-brand-tagline h2 { font-size: 2rem; font-weight: 900; color: var(--ds-text); margin-bottom: 14px; line-height: 1.2; } .auth-brand-tagline p { font-size: 15px; color: var(--ds-text-2); line-height: 1.65; margin-bottom: 32px; } .auth-trust-list { display: flex; flex-direction: column; gap: 14px; margin-bottom: 36px; } .auth-trust-item { display: flex; align-items: center; gap: 12px; font-size: 14px; color: var(--ds-text-2); } .auth-trust-icon { font-size: 1.3rem; } .auth-brand-stats { display: flex; gap: 24px; align-items: center; } .auth-stat { text-align: center; } .auth-stat strong { display: block; font-size: 1.4rem; font-weight: 900; color: var(--ds-orange); } .auth-stat span { font-size: 12px; color: var(--ds-text-3); font-weight: 500; } .auth-stat-divider { width: 1px; height: 36px; background: var(--ds-border); } .auth-brand-blobs { position: absolute; inset: 0; pointer-events: none; } .auth-blob { position: absolute; border-radius: 50%; background: linear-gradient(135deg, rgba(255,107,11,0.08), rgba(168,85,247,0.06)); } .auth-blob--1 { width: 300px; height: 300px; bottom: -100px; left: -100px; } .auth-blob--2 { width: 200px; height: 200px; top: 20%; right: -60px; } .auth-form-panel { background: var(--ds-bg-2); padding: 60px 48px; display: flex; align-items: center; justify-content: center; } .auth-form-card { width: 100%; max-width: 440px; background: var(--ds-card); border: 1px solid var(--ds-border); border-radius: var(--ds-r-xl); padding: 36px; box-shadow: var(--ds-shadow-lg); } .auth-alert { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-radius: var(--ds-r-md); font-size: 13px; font-weight: 600; margin-bottom: 16px; } .auth-alert--error { background: rgba(239,68,68,0.1); color: #f87171; border: 1px solid rgba(239,68,68,0.2); } .auth-alert--success { background: rgba(74,222,128,0.1); color: #4ade80; border: 1px solid rgba(74,222,128,0.2); } .alert-icon { font-size: 1rem; } /* ─── Shop / Product Listing ────────────────────────────────────────── */ .shop-layout { display: grid; grid-template-columns: 240px 1fr; gap: 28px; } .shop-sidebar { background: var(--ds-card); border: 1px solid var(--ds-border); border-radius: var(--ds-r-lg); padding: 20px; height: fit-content; position: sticky; top: 90px; } .shop-filter-title { font-size: 13px; font-weight: 800; color: var(--ds-text-2); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 14px; } .shop-main { min-width: 0; } .shop-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; flex-wrap: wrap; gap: 10px; } .shop-page-heading { font-size: 1.5rem; font-weight: 800; color: var(--ds-text); } .shop-sort select { background: var(--ds-card); border: 1px solid var(--ds-border); color: var(--ds-text); } .product-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 18px; } .product-card-dark { background: var(--ds-card); border: 1px solid var(--ds-border); border-radius: var(--ds-r-lg); overflow: hidden; transition: all .2s; position: relative; } .product-card-dark:hover { border-color: rgba(255,107,11,0.35); transform: translateY(-4px); box-shadow: 0 16px 40px rgba(0,0,0,0.5); } /* ─── Seller Dashboard ──────────────────────────────────────────────── */ .seller-dash { max-width: 1280px; margin: 0 auto; padding: 24px; } .dash-stat-card { background: var(--ds-card); border: 1px solid var(--ds-border); border-radius: var(--ds-r-lg); padding: 20px; transition: all .2s; } .dash-stat-card:hover { border-color: rgba(255,107,11,0.3); } /* ─── Admin Dashboard ───────────────────────────────────────────────── */ .admin-panel { background: var(--ds-card); border: 1px solid var(--ds-border); border-radius: var(--ds-r-lg); } /* ─── Checkout ──────────────────────────────────────────────────────── */ .checkout-layout { max-width: 1100px; margin: 0 auto; } .checkout-form-card { background: var(--ds-card); border: 1px solid var(--ds-border); border-radius: var(--ds-r-xl); padding: 32px; } .checkout-section-title { font-size: 14px; font-weight: 800; color: var(--ds-text-2); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 20px; padding-bottom: 10px; border-bottom: 1px solid var(--ds-border); } .order-summary-card { background: var(--ds-card-2); border: 1px solid var(--ds-border); border-radius: var(--ds-r-xl); padding: 24px; position: sticky; top: 90px; } /* ─── Order Pages ───────────────────────────────────────────────────── */ .orders-container { max-width: 900px; margin: 0 auto; } .order-card { background: var(--ds-card); border: 1px solid var(--ds-border); border-radius: var(--ds-r-lg); padding: 20px; margin-bottom: 14px; display: flex; justify-content: space-between; align-items: center; transition: border-color .15s; } .order-card:hover { border-color: rgba(255,107,11,0.3); } .order-status { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 800; padding: 4px 12px; border-radius: var(--ds-r-pill); text-transform: uppercase; letter-spacing: 0.5px; } .order-status--pending { background: rgba(234,179,8,0.12); color: #fde047; } .order-status--paid, .order-status--processing { background: rgba(59,130,246,0.12); color: #93c5fd; } .order-status--shipped { background: rgba(168,85,247,0.12); color: #c4b5fd; } .order-status--delivered, .order-status--completed { background: rgba(74,222,128,0.12); color: #4ade80; } .order-status--cancelled, .order-status--failed { background: rgba(239,68,68,0.12); color: #f87171; } /* ─── Profile / Account ─────────────────────────────────────────────── */ .profile-layout { max-width: 1000px; margin: 0 auto; } .profile-card { background: var(--ds-card); border: 1px solid var(--ds-border); border-radius: var(--ds-r-xl); padding: 32px; margin-bottom: 20px; } /* ─── Error Page ────────────────────────────────────────────────────── */ .error-page { text-align: center; padding: 100px 24px; } .error-code { font-size: 8rem; font-weight: 900; color: var(--ds-orange); line-height: 1; opacity: 0.4; } .error-title { font-size: 1.5rem; font-weight: 800; color: var(--ds-text); margin-bottom: 12px; } .error-msg { color: var(--ds-text-2); margin-bottom: 28px; font-size: 15px; } /* ─── Pagination ────────────────────────────────────────────────────── */ .pagination { display: flex; gap: 6px; justify-content: center; margin-top: 32px; flex-wrap: wrap; } .page-link { display: inline-flex; align-items: center; justify-content: center; min-width: 36px; height: 36px; background: var(--ds-card); border: 1px solid var(--ds-border); border-radius: var(--ds-r-sm); color: var(--ds-text-2); font-size: 13px; font-weight: 600; text-decoration: none; transition: all .15s; } .page-link:hover { border-color: var(--ds-orange); color: var(--ds-orange); } .page-link.active { background: var(--ds-orange); border-color: var(--ds-orange); color: #fff; } .page-link.disabled { opacity: 0.4; pointer-events: none; } /* ─── Mobile Bottom Navigation ──────────────────────────────────────── */ .mobile-bottom-nav { display: none; position: fixed; bottom: 0; left: 0; right: 0; background: rgba(8, 13, 27, 0.97); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-top: 1px solid var(--ds-border); z-index: 1100; padding: 6px 0 env(safe-area-inset-bottom, 8px); box-shadow: 0 -8px 24px rgba(0,0,0,0.5); } .mobile-bottom-nav__inner { display: flex; align-items: stretch; justify-content: space-around; max-width: 500px; margin: 0 auto; } .mbn-item { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 6px 12px; color: var(--ds-text-3); text-decoration: none; font-size: 10px; font-weight: 600; border-radius: var(--ds-r-md); transition: all .15s; flex: 1; min-width: 0; position: relative; } .mbn-item:hover, .mbn-item--active { color: var(--ds-orange); } .mbn-item--active .mbn-icon { color: var(--ds-orange); } .mbn-icon { width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; position: relative; } .mbn-icon svg { width: 22px; height: 22px; } .mbn-badge { position: absolute; top: -4px; right: -6px; min-width: 16px; height: 16px; background: var(--ds-orange); color: #fff; font-size: 9px; font-weight: 800; border-radius: var(--ds-r-pill); display: flex; align-items: center; justify-content: center; padding: 0 3px; border: 2px solid var(--ds-bg); } .mbn-label { font-size: 10px; font-weight: 600; } /* Center CTA button */ .mbn-item--cta { background: linear-gradient(135deg, var(--ds-orange), #e05500); color: #fff !important; border-radius: var(--ds-r-lg); margin: -8px 4px 0; padding: 6px 8px 4px; box-shadow: var(--ds-shadow-orange); min-width: 52px; } .mbn-item--cta .mbn-icon { color: #fff; } .mbn-item--cta .mbn-label { color: rgba(255,255,255,0.9); } .mbn-item--cta:hover { color: #fff !important; } /* ─── Responsive ────────────────────────────────────────────────────── */ @media (max-width: 1200px) { .footer-inner { grid-template-columns: repeat(3, 1fr); } .footer-col--contact { grid-column: 1 / -1; } } @media (max-width: 1024px) { .product-detail-card { grid-template-columns: 380px 1fr; } .ms-stats-grid { grid-template-columns: repeat(2, 1fr); } .ms-offer-banner__inner { grid-template-columns: 1fr; } .shop-layout { grid-template-columns: 200px 1fr; } } @media (max-width: 900px) { .ms-hero__inner { grid-template-columns: 1fr; } .ms-hero__visual { display: none; } .ms-cta-split { grid-template-columns: 1fr; } .ms-cta-split__panel--buy { border-right: none; border-bottom: 1px solid var(--ds-border); } .ms-newsletter__inner { grid-template-columns: 1fr; } .footer-inner { grid-template-columns: repeat(2, 1fr); } .trust-grid { grid-template-columns: repeat(2, 1fr); } .cart-content-grid { grid-template-columns: 1fr; } .auth-split-layout { grid-template-columns: 1fr; } .auth-brand-panel { display: none; } .product-detail-card { grid-template-columns: 1fr; } .auth-form-panel { padding: 40px 24px; } } @media (max-width: 768px) { .site-main { margin-bottom: 80px; } .mobile-bottom-nav { display: block; } .ms-section { padding: 40px 16px; } .ms-offer-banner { margin: 0 16px; border-radius: var(--ds-r-lg); } .ms-offer-banner__inner { padding: 32px 24px; grid-template-columns: 1fr; } .ms-products-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; } .ms-products-row { padding-left: 16px; padding-right: 16px; } .ms-cats-grid { grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); gap: 10px; padding: 0 16px; } .ms-hero__inner { padding: 0 16px 40px; } .ms-hero__heading { font-size: 2rem; } .newsletter-inner { flex-direction: column; gap: 16px; } .newsletter-form { max-width: 100%; } .footer-inner { grid-template-columns: 1fr; } .footer-bottom-inner { flex-direction: column; text-align: center; gap: 10px; } .trust-grid { grid-template-columns: 1fr; } .ms-stats-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; } .top-bar { display: none; } .header-inner { flex-wrap: wrap; gap: 10px; } .header-quick-nav { display: none; } .search-form { order: 3; max-width: 100%; width: 100%; } .brand { order: 1; } .nav-actions { order: 2; margin-left: auto; } .hide-mobile { display: none !important; } .shop-layout { grid-template-columns: 1fr; } .shop-sidebar { display: none; } .ms-reviews-grid { grid-template-columns: 1fr; } .cart-content-grid { grid-template-columns: 1fr; } .ms-section__head { flex-direction: column; align-items: flex-start; gap: 8px; } } @media (max-width: 480px) { .ms-product-card { width: 180px; } .ms-hero__cta-row { flex-direction: column; } .ms-btn--lg { padding: 12px 20px; font-size: 14px; } .ms-stats-grid { grid-template-columns: repeat(2, 1fr); } .ms-offer-banner__inner { padding: 24px 16px; } .auth-form-card { padding: 24px 20px; } .cart-summary-card { position: static; } } /* ─── Scrollbar (webkit) ────────────────────────────────────────────── */ ::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-track { background: var(--ds-bg-2); } ::-webkit-scrollbar-thumb { background: var(--ds-card-3); border-radius: 3px; } ::-webkit-scrollbar-thumb:hover { background: var(--ds-text-3); } /* ─── Focus accessibility ───────────────────────────────────────────── */ *:focus-visible { outline: 2px solid var(--ds-orange); outline-offset: 2px; } /* ─── Selection ─────────────────────────────────────────────────────── */ ::selection { background: var(--ds-orange-dim); color: var(--ds-orange); } /* ═══════════════════════════════════════════════════════════════════════ SHOP / CATALOG PAGE ═══════════════════════════════════════════════════════════════════════ */ .shop-catalog-layout { /* wrapper in shop.html */ } .catalog-grid-wrapper { display: grid; grid-template-columns: 230px 1fr; gap: 24px; } /* Sidebar */ .catalog-sidebar { /* sticky left */ } .filter-card { background: var(--ds-card); border: 1px solid var(--ds-border); border-radius: var(--ds-r-lg); padding: 20px; position: sticky; top: 90px; margin-bottom: 14px; } .filter-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; padding-bottom: 12px; border-bottom: 1px solid var(--ds-border); } .filter-header h3 { font-size: 14px; font-weight: 800; color: var(--ds-text); } .clear-filters-link { font-size: 12px; color: var(--ds-orange); font-weight: 600; } .filter-group { margin-bottom: 20px; } .filter-title { font-size: 11px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; color: var(--ds-text-3); margin-bottom: 10px; } .filter-cat-list { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 4px; } .filter-cat-item { display: flex; align-items: center; justify-content: space-between; padding: 8px 12px; border-radius: var(--ds-r-sm); font-size: 13px; color: var(--ds-text-2); text-decoration: none; transition: all .15s; } .filter-cat-item:hover { background: var(--ds-card-2); color: var(--ds-text); } .filter-cat-item.active { background: var(--ds-orange-dim); color: var(--ds-orange); font-weight: 700; } .filter-checkbox-label { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ds-text-2); cursor: pointer; } .filter-checkbox-label input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--ds-orange); cursor: pointer; } .price-inputs-row { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; } .price-input { font-size: 13px; padding: 8px 10px; } .price-sep { color: var(--ds-text-3); font-size: 13px; } .btn-apply-filter { width: 100%; background: linear-gradient(135deg, var(--ds-orange), #e05500); color: #fff; border: none; border-radius: var(--ds-r-md); padding: 9px 14px; font-size: 13px; font-weight: 700; font-family: inherit; cursor: pointer; transition: filter .15s; } .btn-apply-filter:hover { filter: brightness(1.1); } .sort-select { background: var(--ds-card); border: 1px solid var(--ds-border); color: var(--ds-text); border-radius: var(--ds-r-md); padding: 8px 12px; font-size: 13px; font-family: inherit; } /* Sidebar Express card */ .sidebar-express-card { background: linear-gradient(135deg, rgba(255,107,11,0.1), rgba(255,107,11,0.05)); border: 1px solid rgba(255,107,11,0.25); border-radius: var(--ds-r-lg); padding: 16px; margin-top: 14px; } .badge-express-big { display: inline-block; font-size: 12px; font-weight: 800; color: var(--ds-orange); margin-bottom: 6px; } .sidebar-express-card p { font-size: 12px; color: var(--ds-text-2); line-height: 1.6; } /* Catalog main */ .catalog-main { min-width: 0; } .catalog-top-bar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; flex-wrap: wrap; gap: 12px; padding-bottom: 16px; border-bottom: 1px solid var(--ds-border); } .catalog-count-wrap { display: flex; flex-direction: column; gap: 4px; } .catalog-query-title { font-size: 1.3rem; font-weight: 800; color: var(--ds-text); } .catalog-count-badge { display: inline-block; font-size: 12px; color: var(--ds-text-3); font-weight: 500; } .sort-dropdown-wrap { display: flex; align-items: center; gap: 8px; } .sort-dropdown-wrap label { font-size: 12px; color: var(--ds-text-3); font-weight: 600; margin: 0; white-space: nowrap; } .sort-form { display: flex; gap: 8px; align-items: center; } /* Product grid in catalog */ .catalog-product-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 16px; } .catalog-product-card { background: var(--ds-card); border: 1px solid var(--ds-border); border-radius: var(--ds-r-lg); overflow: hidden; position: relative; transition: all .22s ease; } .catalog-product-card:hover { border-color: rgba(255,107,11,0.4); transform: translateY(-4px); box-shadow: 0 16px 36px rgba(0,0,0,0.5); } /* Product card inside catalog (reusing ms-product-card styles) */ .catalog-product-card .product-img-wrap { height: 180px; background: var(--ds-card-2); display: flex; align-items: center; justify-content: center; overflow: hidden; position: relative; } .catalog-product-card .product-img-wrap img { width: 100%; height: 100%; object-fit: cover; transition: transform .3s; } .catalog-product-card:hover .product-img-wrap img { transform: scale(1.05); } .catalog-product-card .product-badge { position: absolute; top: 10px; left: 10px; background: linear-gradient(135deg, var(--ds-orange), #e05500); color: #fff; font-size: 10px; font-weight: 800; padding: 3px 8px; border-radius: var(--ds-r-pill); } .catalog-product-card .product-badge--sold { background: rgba(239,68,68,0.85); } .catalog-product-card .product-body { padding: 14px; } .catalog-product-card .product-store-name { font-size: 10px; color: var(--ds-text-3); text-transform: uppercase; letter-spacing: 0.5px; font-weight: 600; margin-bottom: 4px; } .catalog-product-card .product-name { font-size: 13px; font-weight: 700; color: var(--ds-text); line-height: 1.35; margin-bottom: 8px; } .catalog-product-card .product-name a { color: inherit; } .catalog-product-card .product-name a:hover { color: var(--ds-orange); } .catalog-product-card .product-price-row { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; } .catalog-product-card .product-price-current { font-size: 15px; font-weight: 800; color: var(--ds-orange); } .catalog-product-card .product-price-old { font-size: 12px; color: var(--ds-text-3); text-decoration: line-through; } /* Catalog pagination */ .catalog-pagination { margin-top: 32px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; } .catalog-pagination-info { font-size: 12px; color: var(--ds-text-3); } /* Empty catalog state */ .empty-catalog-state { text-align: center; padding: 80px 24px; background: var(--ds-card); border: 1px solid var(--ds-border); border-radius: var(--ds-r-xl); grid-column: 1 / -1; } .empty-catalog-state p { color: var(--ds-text-2); margin-bottom: 20px; } /* ═══════════════════════════════════════════════════════════════════════ CHECKOUT PAGE ═══════════════════════════════════════════════════════════════════════ */ .checkout-page-layout { max-width: 1100px; margin: 0 auto; } .checkout-header-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; flex-wrap: wrap; gap: 10px; } .checkout-title { font-size: 1.8rem; font-weight: 800; color: var(--ds-text); } .back-to-cart-link { font-size: 13px; color: var(--ds-orange); font-weight: 600; } .checkout-form-grid { display: grid; grid-template-columns: 1fr 380px; gap: 24px; align-items: start; } .checkout-steps-column { display: flex; flex-direction: column; gap: 20px; } .checkout-step-card { background: var(--ds-card); border: 1px solid var(--ds-border); border-radius: var(--ds-r-xl); padding: 28px; } .step-header { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; padding-bottom: 16px; border-bottom: 1px solid var(--ds-border); } .step-num { width: 32px; height: 32px; border-radius: 50%; background: linear-gradient(135deg, var(--ds-orange), #e05500); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 800; flex-shrink: 0; } .step-header h3 { font-size: 15px; font-weight: 800; color: var(--ds-text); } .step-body { display: flex; flex-direction: column; gap: 14px; } .section-label { font-size: 12px; font-weight: 700; color: var(--ds-text-2); text-transform: uppercase; letter-spacing: 0.5px; } .saved-address-section { display: flex; flex-direction: column; gap: 10px; margin-bottom: 4px; } .saved-address-options { display: flex; flex-direction: column; gap: 8px; } .address-radio-box { display: flex; align-items: center; gap: 12px; background: var(--ds-card-2); border: 1px solid var(--ds-border); border-radius: var(--ds-r-md); padding: 12px 16px; cursor: pointer; transition: border-color .15s; } .address-radio-box:hover { border-color: var(--ds-orange); } .address-radio-box input[type="radio"] { accent-color: var(--ds-orange); flex-shrink: 0; } .address-radio-content strong { display: block; font-size: 13px; color: var(--ds-text); } .address-radio-content p { font-size: 12px; color: var(--ds-text-2); margin-top: 2px; } .new-address-radio { border-style: dashed; } .new-address-fields { display: flex; flex-direction: column; gap: 14px; } .sub-step-title { font-size: 13px; font-weight: 700; color: var(--ds-text-2); margin-bottom: 4px; } .form-row { display: flex; flex-direction: column; gap: 14px; } .form-row.two-col { flex-direction: row; gap: 14px; } .form-row.two-col .form-group { flex: 1; min-width: 0; } .form-group { display: flex; flex-direction: column; gap: 6px; } .form-group label { margin-bottom: 0; } .country-select { background: var(--ds-card); border: 1px solid var(--ds-border); color: var(--ds-text); border-radius: var(--ds-r-md); } /* Payment method cards */ .payment-method-options { display: flex; flex-direction: column; gap: 10px; } .payment-method-card { display: flex; align-items: center; gap: 14px; background: var(--ds-card-2); border: 1.5px solid var(--ds-border); border-radius: var(--ds-r-md); padding: 16px; cursor: pointer; transition: all .15s; } .payment-method-card:hover { border-color: var(--ds-orange); } .payment-method-card input[type="radio"] { accent-color: var(--ds-orange); flex-shrink: 0; } .payment-method-card.selected-payment { border-color: var(--ds-orange); background: var(--ds-orange-dim); } .payment-method-icon { font-size: 1.5rem; flex-shrink: 0; } .payment-method-info strong { display: block; font-size: 13px; font-weight: 700; color: var(--ds-text); } .payment-method-info small { font-size: 11px; color: var(--ds-text-2); } .momo-fields { background: var(--ds-card-2); border: 1px solid var(--ds-border); border-radius: var(--ds-r-md); padding: 16px; margin-top: 8px; display: none; flex-direction: column; gap: 12px; } .momo-fields.active { display: flex; } /* Checkout summary sidebar */ /* .checkout-summary-column */ .checkout-summary-card { background: var(--ds-card); border: 1px solid var(--ds-border); border-radius: var(--ds-r-xl); padding: 24px; position: sticky; top: 90px; } .summary-heading { font-size: 12px; font-weight: 800; color: var(--ds-text-3); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 18px; } .summary-item-list { display: flex; flex-direction: column; gap: 12px; margin-bottom: 16px; } .summary-item { display: flex; align-items: center; gap: 10px; padding-bottom: 12px; border-bottom: 1px solid var(--ds-border); } .summary-item:last-child { border-bottom: none; } .summary-item-img { width: 48px; height: 48px; border-radius: var(--ds-r-sm); background: var(--ds-card-2); overflow: hidden; flex-shrink: 0; } .summary-item-img img { width: 100%; height: 100%; object-fit: cover; } .summary-item-name { flex: 1; font-size: 12px; color: var(--ds-text); line-height: 1.4; } .summary-item-price { font-size: 13px; font-weight: 700; color: var(--ds-orange); white-space: nowrap; } .summary-totals { border-top: 1px solid var(--ds-border); padding-top: 14px; margin-bottom: 16px; } .summary-total-row { display: flex; justify-content: space-between; align-items: center; padding: 6px 0; font-size: 13px; color: var(--ds-text-2); } .summary-total-row.final { font-size: 16px; font-weight: 800; color: var(--ds-text); border-top: 1px solid var(--ds-border); margin-top: 8px; padding-top: 12px; } .summary-total-row.final span:last-child { color: var(--ds-orange); } .coupon-section { margin-bottom: 16px; } .coupon-input-row { display: flex; gap: 8px; } .coupon-input-row input { flex: 1; font-size: 13px; padding: 9px 12px; } .btn-apply-coupon { background: var(--ds-card-2); border: 1px solid var(--ds-border); color: var(--ds-text-2); border-radius: var(--ds-r-md); padding: 9px 14px; font-size: 12px; font-weight: 700; font-family: inherit; cursor: pointer; white-space: nowrap; transition: all .15s; } .btn-apply-coupon:hover { border-color: var(--ds-orange); color: var(--ds-orange); } .btn-place-order { display: block; width: 100%; background: linear-gradient(135deg, var(--ds-orange), #e05500); color: #fff; text-align: center; padding: 16px; border-radius: var(--ds-r-md); font-size: 15px; font-weight: 800; letter-spacing: 0.5px; border: none; cursor: pointer; font-family: inherit; box-shadow: var(--ds-shadow-orange); transition: all .2s; } .btn-place-order:hover { filter: brightness(1.1); transform: translateY(-2px); } .checkout-security-note { margin-top: 12px; display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--ds-text-3); justify-content: center; } .checkout-security-note svg { color: #4ade80; } @media (max-width: 768px) { .checkout-form-grid { grid-template-columns: 1fr; } .checkout-summary-card { position: static; } .catalog-grid-wrapper { grid-template-columns: 1fr; } .catalog-sidebar { display: none; } .form-row.two-col { flex-direction: column; } } /* ═══════════════════════════════════════════════════════════════════════ ORDERS PAGE ═══════════════════════════════════════════════════════════════════════ */ .orders-page { max-width: 900px; margin: 0 auto; } .orders-page-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 28px; } .orders-page-title { font-size: 1.8rem; font-weight: 800; color: var(--ds-text); } .order-list-card { background: var(--ds-card); border: 1px solid var(--ds-border); border-radius: var(--ds-r-lg); padding: 20px 24px; margin-bottom: 12px; transition: border-color .15s; display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; } .order-list-card:hover { border-color: rgba(255,107,11,0.3); } .order-info { display: flex; flex-direction: column; gap: 4px; } .order-number { font-size: 15px; font-weight: 800; color: var(--ds-text); } .order-date { font-size: 12px; color: var(--ds-text-3); } .order-items-preview { font-size: 12px; color: var(--ds-text-2); } .order-total-price { font-size: 18px; font-weight: 900; color: var(--ds-orange); } .order-actions { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; } .btn-order-detail { display: inline-flex; align-items: center; gap: 6px; background: var(--ds-card-2); border: 1px solid var(--ds-border); color: var(--ds-text-2); border-radius: var(--ds-r-md); padding: 7px 14px; font-size: 12px; font-weight: 700; font-family: inherit; cursor: pointer; transition: all .15s; text-decoration: none; } .btn-order-detail:hover { border-color: var(--ds-orange); color: var(--ds-orange); } /* Order detail page */ .order-detail-layout { max-width: 860px; margin: 0 auto; } .order-detail-header { margin-bottom: 28px; } .order-detail-number { font-size: 1.5rem; font-weight: 800; color: var(--ds-text); margin-bottom: 6px; } .order-timeline { display: flex; align-items: center; gap: 0; margin: 24px 0; flex-wrap: wrap; } .timeline-step { display: flex; flex-direction: column; align-items: center; flex: 1; min-width: 80px; } .timeline-dot { width: 32px; height: 32px; border-radius: 50%; background: var(--ds-card-2); border: 2px solid var(--ds-border); display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 800; color: var(--ds-text-3); z-index: 1; } .timeline-dot.done { background: var(--ds-orange); border-color: var(--ds-orange); color: #fff; } .timeline-dot.active { background: var(--ds-card-2); border-color: var(--ds-orange); color: var(--ds-orange); } .timeline-label { font-size: 10px; font-weight: 600; color: var(--ds-text-3); text-align: center; margin-top: 6px; } .timeline-line { flex: 1; height: 2px; background: var(--ds-border); margin: 0 -2px; align-self: flex-start; margin-top: 15px; } .timeline-line.done { background: var(--ds-orange); } .order-items-table { width: 100%; border-collapse: collapse; } .order-items-table th { font-size: 11px; font-weight: 700; color: var(--ds-text-3); text-transform: uppercase; letter-spacing: 0.5px; padding: 10px 14px; border-bottom: 1px solid var(--ds-border); text-align: left; } .order-items-table td { padding: 14px; border-bottom: 1px solid var(--ds-border); font-size: 13px; color: var(--ds-text-2); vertical-align: middle; } .order-items-table tr:last-child td { border-bottom: none; } .order-item-img { width: 48px; height: 48px; border-radius: var(--ds-r-sm); background: var(--ds-card-2); overflow: hidden; } .order-item-img img { width: 100%; height: 100%; object-fit: cover; } /* ═══════════════════════════════════════════════════════════════════════ WISHLIST PAGE ═══════════════════════════════════════════════════════════════════════ */ .wishlist-page { max-width: 1000px; margin: 0 auto; } .wishlist-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 28px; } .wishlist-title { font-size: 1.8rem; font-weight: 800; color: var(--ds-text); } .wishlist-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; } .wishlist-item-card { background: var(--ds-card); border: 1px solid var(--ds-border); border-radius: var(--ds-r-lg); overflow: hidden; transition: all .2s; position: relative; } .wishlist-item-card:hover { border-color: rgba(255,107,11,0.35); transform: translateY(-3px); } .wishlist-empty { text-align: center; padding: 80px 24px; background: var(--ds-card); border: 1px solid var(--ds-border); border-radius: var(--ds-r-xl); } .wishlist-empty p { color: var(--ds-text-2); font-size: 15px; margin: 12px 0 24px; } /* ═══════════════════════════════════════════════════════════════════════ PROFILE / ACCOUNT PAGE ═══════════════════════════════════════════════════════════════════════ */ .profile-page { max-width: 860px; margin: 0 auto; } .profile-header-card { background: linear-gradient(135deg, var(--ds-card), var(--ds-card-2)); border: 1px solid var(--ds-border); border-radius: var(--ds-r-xl); padding: 32px; display: flex; align-items: center; gap: 24px; margin-bottom: 24px; position: relative; overflow: hidden; } .profile-header-card::before { content: ''; position: absolute; top: -50px; right: -50px; width: 200px; height: 200px; background: radial-gradient(circle, rgba(255,107,11,0.12) 0%, transparent 70%); pointer-events: none; } .profile-avatar-wrap { width: 80px; height: 80px; border-radius: 50%; background: linear-gradient(135deg, var(--ds-orange), #e05500); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 2rem; font-weight: 900; flex-shrink: 0; box-shadow: var(--ds-shadow-orange); overflow: hidden; } .profile-avatar-wrap img { width: 100%; height: 100%; object-fit: cover; } .profile-name { font-size: 1.3rem; font-weight: 800; color: var(--ds-text); margin-bottom: 4px; } .profile-email { font-size: 13px; color: var(--ds-text-2); margin-bottom: 8px; } .profile-role-badge { display: inline-block; font-size: 11px; font-weight: 800; background: var(--ds-orange-dim); color: var(--ds-orange); border: 1px solid rgba(255,107,11,0.3); padding: 3px 12px; border-radius: var(--ds-r-pill); } .profile-section-card { background: var(--ds-card); border: 1px solid var(--ds-border); border-radius: var(--ds-r-xl); padding: 28px; margin-bottom: 20px; } .profile-section-title { font-size: 13px; font-weight: 800; color: var(--ds-text-2); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 20px; padding-bottom: 12px; border-bottom: 1px solid var(--ds-border); } .profile-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .profile-form-grid .form-group { display: flex; flex-direction: column; gap: 6px; } .btn-save-profile { background: linear-gradient(135deg, var(--ds-orange), #e05500); color: #fff; border: none; border-radius: var(--ds-r-md); padding: 11px 24px; font-size: 14px; font-weight: 700; font-family: inherit; cursor: pointer; transition: all .2s; margin-top: 8px; } .btn-save-profile:hover { filter: brightness(1.1); transform: translateY(-1px); } @media (max-width: 600px) { .profile-form-grid { grid-template-columns: 1fr; } .profile-header-card { flex-direction: column; text-align: center; } } /* ═══════════════════════════════════════════════════════════════════════ SELLER APPLY PAGE ═══════════════════════════════════════════════════════════════════════ */ .seller-apply-page { max-width: 680px; margin: 0 auto; } .seller-apply-card { background: var(--ds-card); border: 1px solid var(--ds-border); border-radius: var(--ds-r-xl); padding: 40px; } .seller-apply-eyebrow { display: inline-block; font-size: 11px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; color: var(--ds-orange); background: var(--ds-orange-dim); border: 1px solid rgba(255,107,11,0.3); padding: 4px 14px; border-radius: var(--ds-r-pill); margin-bottom: 16px; } .seller-apply-card h1 { font-size: 1.8rem; font-weight: 900; color: var(--ds-text); margin-bottom: 8px; } .seller-apply-card .subtitle { font-size: 15px; color: var(--ds-text-2); margin-bottom: 28px; line-height: 1.6; } /* ═══════════════════════════════════════════════════════════════════════ SELLER DASHBOARD ═══════════════════════════════════════════════════════════════════════ */ .seller-dashboard-layout { max-width: 1280px; margin: 0 auto; } .seller-dash-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 28px; flex-wrap: wrap; gap: 14px; } .seller-dash-title { font-size: 1.8rem; font-weight: 800; color: var(--ds-text); } .seller-stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 28px; } .seller-stat-card { background: var(--ds-card); border: 1px solid var(--ds-border); border-radius: var(--ds-r-lg); padding: 22px 20px; transition: all .2s; } .seller-stat-card:hover { border-color: rgba(255,107,11,0.3); transform: translateY(-2px); } .seller-stat-label { font-size: 11px; font-weight: 700; color: var(--ds-text-3); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 8px; } .seller-stat-value { font-size: 2rem; font-weight: 900; color: var(--ds-orange); letter-spacing: -1px; } .seller-stat-sub { font-size: 12px; color: var(--ds-text-2); margin-top: 4px; } .seller-stat-card.revenue .seller-stat-value { color: #4ade80; } .seller-stat-card.orders .seller-stat-value { color: #60a5fa; } .seller-content-grid { display: grid; grid-template-columns: 1fr 300px; gap: 24px; } .seller-panel { background: var(--ds-card); border: 1px solid var(--ds-border); border-radius: var(--ds-r-lg); padding: 24px; margin-bottom: 20px; } .seller-panel-title { font-size: 14px; font-weight: 800; color: var(--ds-text); margin-bottom: 18px; padding-bottom: 12px; border-bottom: 1px solid var(--ds-border); display: flex; align-items: center; justify-content: space-between; } .seller-product-table { width: 100%; border-collapse: collapse; } .seller-product-table th { font-size: 11px; font-weight: 700; color: var(--ds-text-3); text-transform: uppercase; letter-spacing: 0.5px; padding: 10px 12px; border-bottom: 1px solid var(--ds-border); text-align: left; } .seller-product-table td { padding: 14px 12px; border-bottom: 1px solid var(--ds-border); font-size: 13px; color: var(--ds-text-2); vertical-align: middle; } .seller-product-table tr:last-child td { border-bottom: none; } .seller-product-table tr:hover td { background: var(--ds-card-2); } .product-table-name { font-size: 13px; font-weight: 600; color: var(--ds-text); } .product-table-price { font-weight: 700; color: var(--ds-orange); } /* .product-table-stock */ .stock-low { color: #fde047; } .stock-out { color: #f87171; } .stock-good { color: #4ade80; } .product-table-actions { display: flex; gap: 6px; } .btn-edit-product, .btn-delete-product { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 700; font-family: inherit; padding: 5px 10px; border-radius: var(--ds-r-sm); border: 1px solid; cursor: pointer; transition: all .15s; } .btn-edit-product { background: var(--ds-card-2); border-color: var(--ds-border); color: var(--ds-text-2); } .btn-edit-product:hover { border-color: var(--ds-orange); color: var(--ds-orange); } .btn-delete-product { background: rgba(239,68,68,0.08); border-color: rgba(239,68,68,0.2); color: #f87171; } .btn-delete-product:hover { background: rgba(239,68,68,0.15); } .btn-add-product { display: inline-flex; align-items: center; gap: 8px; background: linear-gradient(135deg, var(--ds-orange), #e05500); color: #fff; border: none; border-radius: var(--ds-r-md); padding: 10px 18px; font-size: 13px; font-weight: 700; font-family: inherit; cursor: pointer; transition: all .2s; text-decoration: none; box-shadow: var(--ds-shadow-orange); } .btn-add-product:hover { filter: brightness(1.1); color: #fff; } @media (max-width: 900px) { .seller-stats-grid { grid-template-columns: repeat(2, 1fr); } .seller-content-grid { grid-template-columns: 1fr; } } @media (max-width: 600px) { .seller-stats-grid { grid-template-columns: repeat(2, 1fr); } .seller-apply-card { padding: 24px 20px; } } /* ═══════════════════════════════════════════════════════════════════════ ADMIN DASHBOARD ═══════════════════════════════════════════════════════════════════════ */ .admin-dashboard-layout { max-width: 1280px; margin: 0 auto; } .admin-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 28px; flex-wrap: wrap; gap: 14px; } .admin-title { font-size: 1.8rem; font-weight: 800; color: var(--ds-text); } .admin-badge { display: inline-flex; align-items: center; gap: 6px; background: rgba(37,99,235,0.15); color: #60a5fa; border: 1px solid rgba(37,99,235,0.3); padding: 4px 14px; border-radius: var(--ds-r-pill); font-size: 12px; font-weight: 800; } .admin-stats-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; margin-bottom: 28px; } .admin-stat-card { background: var(--ds-card); border: 1px solid var(--ds-border); border-radius: var(--ds-r-lg); padding: 22px 20px; transition: all .2s; } .admin-stat-card:hover { border-color: rgba(37,99,235,0.3); } .admin-stat-label { font-size: 11px; font-weight: 700; color: var(--ds-text-3); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 8px; } .admin-stat-value { font-size: 2rem; font-weight: 900; color: #60a5fa; } .admin-panel { background: var(--ds-card); border: 1px solid var(--ds-border); border-radius: var(--ds-r-lg); padding: 24px; margin-bottom: 20px; } .admin-panel-title { font-size: 14px; font-weight: 800; color: var(--ds-text); margin-bottom: 18px; padding-bottom: 12px; border-bottom: 1px solid var(--ds-border); } .admin-table { width: 100%; border-collapse: collapse; } .admin-table th { font-size: 11px; font-weight: 700; color: var(--ds-text-3); text-transform: uppercase; letter-spacing: 0.5px; padding: 10px 12px; border-bottom: 1px solid var(--ds-border); text-align: left; } .admin-table td { padding: 12px; border-bottom: 1px solid var(--ds-border); font-size: 13px; color: var(--ds-text-2); vertical-align: middle; } .admin-table tr:last-child td { border-bottom: none; } .admin-table tr:hover td { background: var(--ds-card-2); } /* ═══════════════════════════════════════════════════════════════════════ STORE PAGE ═══════════════════════════════════════════════════════════════════════ */ .store-page { max-width: 1100px; margin: 0 auto; } .store-banner { background: linear-gradient(135deg, var(--ds-card), var(--ds-card-2)); border: 1px solid var(--ds-border); border-radius: var(--ds-r-xl); padding: 36px; display: flex; align-items: center; gap: 24px; margin-bottom: 28px; position: relative; overflow: hidden; } .store-banner::before { content: ''; position: absolute; top: -60px; right: -60px; width: 250px; height: 250px; background: radial-gradient(circle, rgba(255,107,11,0.1) 0%, transparent 70%); pointer-events: none; } .store-logo { width: 80px; height: 80px; border-radius: var(--ds-r-lg); background: linear-gradient(135deg, var(--ds-orange), #e05500); display: flex; align-items: center; justify-content: center; font-size: 2rem; font-weight: 900; color: #fff; overflow: hidden; flex-shrink: 0; box-shadow: var(--ds-shadow-orange); } .store-logo img { width: 100%; height: 100%; object-fit: cover; } .store-name { font-size: 1.5rem; font-weight: 800; color: var(--ds-text); margin-bottom: 6px; } .store-meta { font-size: 13px; color: var(--ds-text-2); } .store-rating { color: #FBBF24; font-weight: 700; } /* ═══════════════════════════════════════════════════════════════════════ ADDRESSES PAGE ═══════════════════════════════════════════════════════════════════════ */ .addresses-page { max-width: 720px; margin: 0 auto; } .address-card { background: var(--ds-card); border: 1px solid var(--ds-border); border-radius: var(--ds-r-lg); padding: 20px 24px; margin-bottom: 12px; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; transition: border-color .15s; } .address-card:hover { border-color: rgba(255,107,11,0.3); } .address-label-badge { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 800; background: var(--ds-orange-dim); color: var(--ds-orange); border: 1px solid rgba(255,107,11,0.3); padding: 3px 10px; border-radius: var(--ds-r-pill); margin-bottom: 4px; } .address-text { font-size: 13px; color: var(--ds-text-2); line-height: 1.6; } .address-card-actions { display: flex; gap: 8px; flex-shrink: 0; } /* ═══════════════════════════════════════════════════════════════════════ NOTIFICATIONS / BELL DROPDOWN (dark overrides) ═══════════════════════════════════════════════════════════════════════ */ .notif-menu { min-width: 320px; right: 0; background: var(--ds-card-2) !important; border: 1px solid var(--ds-border) !important; } .notif-header { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid var(--ds-border); } .notif-header strong { font-size: 14px; color: var(--ds-text); } .notif-mark-read { background: none; border: none; color: var(--ds-orange); font-size: 12px; font-weight: 700; cursor: pointer; font-family: inherit; transition: color .15s; } .notif-mark-read:hover { color: var(--ds-text); } .notif-list { max-height: 320px; overflow-y: auto; } .notif-item { padding: 12px 18px; border-bottom: 1px solid var(--ds-border); transition: background .15s; cursor: pointer; } .notif-item:hover { background: var(--ds-card-3); } .notif-item:last-child { border-bottom: none; } .notif-unread { border-left: 3px solid var(--ds-orange); } .notif-msg { display: block; font-size: 13px; color: var(--ds-text); line-height: 1.45; margin-bottom: 4px; } .notif-time { font-size: 11px; color: var(--ds-text-3); } .notif-empty { padding: 24px 18px; text-align: center; font-size: 13px; color: var(--ds-text-3); } /* ═══════════════════════════════════════════════════════════════════════ MAMAPAY / PAYMENT GATEWAY TEMPLATES ═══════════════════════════════════════════════════════════════════════ */ .mamapay-page { max-width: 520px; margin: 0 auto; } .mamapay-card { background: var(--ds-card); border: 1px solid var(--ds-border); border-radius: var(--ds-r-xl); padding: 40px; text-align: center; } .mamapay-icon { font-size: 3rem; margin-bottom: 16px; } .mamapay-title { font-size: 1.5rem; font-weight: 800; color: var(--ds-text); margin-bottom: 8px; } .mamapay-subtitle { font-size: 14px; color: var(--ds-text-2); margin-bottom: 28px; line-height: 1.65; } .mamapay-amount { font-size: 2.5rem; font-weight: 900; color: var(--ds-orange); margin: 16px 0 28px; } .mamapay-form { display: flex; flex-direction: column; gap: 14px; text-align: left; } .mamapay-input-label { font-size: 12px; font-weight: 700; color: var(--ds-text-2); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 6px; } .btn-mamapay-pay { width: 100%; background: linear-gradient(135deg, var(--ds-orange), #e05500); color: #fff; border: none; border-radius: var(--ds-r-md); padding: 16px; font-size: 15px; font-weight: 800; font-family: inherit; cursor: pointer; transition: all .2s; box-shadow: var(--ds-shadow-orange); margin-top: 8px; } .btn-mamapay-pay:hover { filter: brightness(1.1); transform: translateY(-2px); } .mamapay-security { margin-top: 16px; font-size: 12px; color: var(--ds-text-3); display: flex; align-items: center; gap: 6px; justify-content: center; } .mamapay-security svg { color: #4ade80; } /* ═══════════════════════════════════════════════════════════════════════ PRODUCT EDIT PAGE ═══════════════════════════════════════════════════════════════════════ */ .product-edit-page { max-width: 720px; margin: 0 auto; } .product-edit-card { background: var(--ds-card); border: 1px solid var(--ds-border); border-radius: var(--ds-r-xl); padding: 36px; } .product-edit-title { font-size: 1.5rem; font-weight: 800; color: var(--ds-text); margin-bottom: 28px; } .product-edit-form { display: flex; flex-direction: column; gap: 20px; } .form-section { background: var(--ds-card-2); border: 1px solid var(--ds-border); border-radius: var(--ds-r-lg); padding: 20px; } .form-section-title { font-size: 12px; font-weight: 800; color: var(--ds-text-3); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 14px; } .form-two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } textarea { min-height: 100px; resize: vertical; } .file-upload-label { display: flex; flex-direction: column; align-items: center; gap: 10px; border: 2px dashed var(--ds-border); border-radius: var(--ds-r-md); padding: 24px; cursor: pointer; transition: border-color .15s; background: var(--ds-bg-2); } .file-upload-label:hover { border-color: var(--ds-orange); } .file-upload-label input[type="file"] { display: none; } .file-upload-icon { font-size: 2rem; } .file-upload-text { font-size: 13px; color: var(--ds-text-2); text-align: center; line-height: 1.5; } .btn-save { background: linear-gradient(135deg, var(--ds-orange), #e05500); color: #fff; border: none; border-radius: var(--ds-r-md); padding: 13px 28px; font-size: 14px; font-weight: 800; font-family: inherit; cursor: pointer; transition: all .2s; box-shadow: var(--ds-shadow-orange); } .btn-save:hover { filter: brightness(1.1); transform: translateY(-1px); } @media (max-width: 600px) { .form-two-col { grid-template-columns: 1fr; } .product-edit-card { padding: 24px 16px; } } /* ═══════════════════════════════════════════════════════════════════════ ERROR PAGE ═══════════════════════════════════════════════════════════════════════ */ .error-container { min-height: 60vh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 60px 24px; } .error-code-big { font-size: 8rem; font-weight: 900; color: var(--ds-orange); line-height: 1; opacity: 0.3; } .error-heading { font-size: 2rem; font-weight: 800; color: var(--ds-text); margin-bottom: 12px; } .error-body { font-size: 15px; color: var(--ds-text-2); margin-bottom: 28px; } .btn-go-home { display: inline-flex; align-items: center; gap: 8px; background: linear-gradient(135deg, var(--ds-orange), #e05500); color: #fff; padding: 13px 28px; border-radius: var(--ds-r-lg); font-size: 14px; font-weight: 800; transition: all .2s; } .btn-go-home:hover { filter: brightness(1.1); color: #fff; } /* Misc utilities */ .text-muted { color: var(--ds-text-2) !important; } .text-orange { color: var(--ds-orange) !important; } .text-green { color: #4ade80 !important; } .text-red { color: #f87171 !important; } .bg-card { background: var(--ds-card) !important; } .border-card { border: 1px solid var(--ds-border) !important; } .hide-desktop { display: none !important; } @media (max-width: 768px) { .hide-desktop { display: block !important; } } /* ══════════════════════════════════════════════════════════ HOMEPAGE ms-* COMPONENT DARK OVERRIDES ══════════════════════════════════════════════════════════ */ /* Override light-theme ms- CSS variables */ :root { --ms-primary: var(--ds-orange); --ms-primary-dark: #e05500; --ms-primary-light: var(--ds-orange-dim); --ms-secondary: var(--ds-card); --ms-accent: var(--ds-purple); --ms-bg: var(--ds-bg-2); --ms-white: var(--ds-text); --ms-border: var(--ds-border); --ms-text: var(--ds-text); --ms-muted: var(--ds-text-2); --ms-shadow: var(--ds-shadow-sm); --ms-shadow-lg: var(--ds-shadow-lg); } /* ── Hero wave fix ────────────────────────────────────────── */ .hero-wave-path { fill: var(--ds-bg); } /* ── Hero section ─────────────────────────────────────────── */ .ms-hero { background: linear-gradient(135deg, #050A17 0%, #0D1630 50%, #12183A 100%); position: relative; overflow: hidden; } .ms-hero::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 70% 60% at 75% 50%, rgba(255,107,11,0.08) 0%, transparent 70%), radial-gradient(ellipse 50% 50% at 25% 30%, rgba(168,85,247,0.06) 0%, transparent 60%); pointer-events: none; } .ms-hero__eyebrow { background: var(--ds-orange-dim); color: var(--ds-orange); border: 1px solid rgba(255,107,11,0.3); } .ms-hero__heading { color: var(--ds-text); } .ms-hero__accent { background: linear-gradient(90deg, var(--ds-orange), #f9a343); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .ms-hero__sub { color: var(--ds-text-2); } .ms-trust-badge { background: rgba(255,255,255,0.06); color: var(--ds-text-2); border: 1px solid var(--ds-border); } .ms-float-card { background: rgba(21,31,53,0.85); backdrop-filter: blur(12px); border: 1px solid var(--ds-border); box-shadow: var(--ds-shadow-md); } .ms-float-card strong { color: var(--ds-text); } .ms-float-card small { color: var(--ds-text-2); } .ms-hero__blob { background: radial-gradient(circle, rgba(255,107,11,0.2) 0%, rgba(168,85,247,0.1) 60%, transparent 100%); } .ms-showcase-center { background: linear-gradient(135deg, var(--ds-card), var(--ds-card-2)); border: 2px solid var(--ds-orange); box-shadow: 0 0 40px rgba(255,107,11,0.35); } .ms-showcase-ring { border-color: rgba(255,107,11,0.2); } .ms-showcase-ring.ms-ring--inner { border-color: rgba(168,85,247,0.15); } /* ── Trust strip ──────────────────────────────────────────── */ .ms-trust-strip { background: var(--ds-card); border-top: 1px solid var(--ds-border); border-bottom: 1px solid var(--ds-border); } .ms-ts-item strong { color: var(--ds-text); } .ms-ts-item small { color: var(--ds-text-2); } .ms-ts-item svg { color: var(--ds-orange); } /* ── Section wrappers ─────────────────────────────────────── */ .ms-section { background: var(--ds-bg); } .ms-section--alt { background: var(--ds-bg-2); } .ms-section__label { background: var(--ds-orange-dim); color: var(--ds-orange); border: 1px solid rgba(255,107,11,0.25); } .ms-section__title { color: var(--ds-text); } .ms-see-all { color: var(--ds-orange); border-bottom-color: rgba(255,107,11,0.3); } .ms-see-all:hover { border-bottom-color: var(--ds-orange); color: var(--ds-orange); } /* ── Category cards ───────────────────────────────────────── */ .ms-cat-card { background: var(--ds-card); border: 1px solid var(--ds-border); box-shadow: var(--ds-shadow-sm); } .ms-cat-card:hover { border-color: var(--ds-orange); box-shadow: 0 8px 30px rgba(255,107,11,0.2); transform: translateY(-4px); } .ms-cat-card__ph { background: linear-gradient(135deg, var(--ds-card-2), var(--ds-card-3)); color: var(--ds-orange); } .ms-cat-card__name { color: var(--ds-text); } .ms-cat-card__count { color: var(--ds-text-3); } /* ── Product cards ────────────────────────────────────────── */ .ms-product-card { background: var(--ds-card); border: 1px solid var(--ds-border); box-shadow: var(--ds-shadow-sm); } .ms-product-card:hover { border-color: rgba(255,107,11,0.4); box-shadow: 0 12px 36px rgba(0,0,0,0.5); transform: translateY(-5px); } .ms-product-card__badge { background: linear-gradient(135deg, var(--ds-orange), #e05500); color: #fff; } .ms-product-card__badge--sold { background: rgba(100,116,139,0.25); color: var(--ds-text-2); } .ms-product-card__img-ph { background: linear-gradient(135deg, var(--ds-card-2), var(--ds-card-3)); color: var(--ds-orange); } .ms-product-card__overlay { background: rgba(255,107,11,0.85); color: #fff; } .ms-product-card__store { color: var(--ds-text-3); } .ms-product-card__name a { color: var(--ds-text); } .ms-product-card__name a:hover { color: var(--ds-orange); } .ms-stars { color: #f59e0b; } .ms-stars__count { color: var(--ds-text-3); } .ms-price--current { color: var(--ds-orange); } .ms-price--old { color: var(--ds-text-3); } .ms-empty-notice, .ms-empty-catalog { color: var(--ds-text-2); } .ms-empty-catalog code { background: var(--ds-card-2); color: var(--ds-orange); } /* ms-btn dark overrides */ .ms-btn--primary { background: linear-gradient(135deg, var(--ds-orange), #e05500); color: #fff; border: none; box-shadow: var(--ds-shadow-orange); } .ms-btn--primary:hover { filter: brightness(1.12); transform: translateY(-2px); color: #fff; } .ms-btn--outline { background: transparent; color: var(--ds-orange); border: 2px solid var(--ds-orange); } .ms-btn--outline:hover { background: var(--ds-orange); color: #fff; transform: translateY(-2px); } .ms-btn--white { background: var(--ds-text); color: #080D1B; } .ms-btn--white:hover { background: #fff; color: #080D1B; } .ms-btn--cart { background: linear-gradient(135deg, var(--ds-orange), #e05500); color: #fff; border: none; } .ms-btn--cart:hover { filter: brightness(1.1); transform: translateY(-1px); } .ms-btn--disabled { background: var(--ds-card-2); color: var(--ds-text-3); border: none; } /* ── Offer banner ─────────────────────────────────────────── */ .ms-offer-banner { background: linear-gradient(135deg, #2D0D00 0%, #1A1036 50%, #0D0D2B 100%); border-top: 1px solid rgba(255,107,11,0.2); border-bottom: 1px solid rgba(168,85,247,0.15); position: relative; overflow: hidden; } .ms-offer-banner::before { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(255,107,11,0.15) 0%, rgba(168,85,247,0.12) 100%); pointer-events: none; } .ms-offer-banner__eyebrow { background: rgba(255,107,11,0.2); color: var(--ds-orange); border: 1px solid rgba(255,107,11,0.4); } .ms-offer-banner__heading { color: var(--ds-text); } .ms-offer-banner__heading span { background: linear-gradient(90deg, var(--ds-orange), var(--ds-purple)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .ms-offer-banner p { color: rgba(248,250,252,0.8); } .ms-timer-label { color: rgba(248,250,252,0.7); } .ms-timer-box { background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.12); color: var(--ds-text); } .ms-timer-box small { color: var(--ds-text-2); } .ms-timer-sep { color: var(--ds-orange); } .ms-deal-chip { background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.1); color: var(--ds-text); } .ms-deal-chip:hover { border-color: var(--ds-orange); background: rgba(255,107,11,0.1); } .ms-deal-chip__ph { background: var(--ds-orange-dim); color: var(--ds-orange); } .ms-deal-chip__pct { background: linear-gradient(135deg, var(--ds-orange), #e05500); color: #fff; } /* ── Stats section ────────────────────────────────────────── */ .ms-stats-section { background: var(--ds-bg); } .ms-stat-card { background: var(--ds-card); border: 1px solid var(--ds-border); box-shadow: var(--ds-shadow-sm); } .ms-stat-card:hover { border-color: var(--ds-orange); } .ms-stat-card__num { background: linear-gradient(90deg, var(--ds-orange), #f9a343); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .ms-stat-card__suffix { color: var(--ds-orange); } .ms-stat-card__label { color: var(--ds-text-2); } /* ── Reviews ──────────────────────────────────────────────── */ .ms-review-card { background: var(--ds-card); border: 1px solid var(--ds-border); box-shadow: var(--ds-shadow-sm); } .ms-review-card:hover { border-color: rgba(255,107,11,0.3); } .ms-review-card__avatar { background: linear-gradient(135deg, var(--ds-orange), var(--ds-purple)); color: #fff; } .ms-review-card strong { color: var(--ds-text); } .ms-review-stars { color: #f59e0b; } .ms-review-verified { background: rgba(74,222,128,0.15); color: #4ade80; } .ms-review-card__body { color: var(--ds-text-2); } .ms-review-card__product { color: var(--ds-text-3); } /* ── CTA split ────────────────────────────────────────────── */ .ms-cta-split { border-top: 1px solid var(--ds-border); border-bottom: 1px solid var(--ds-border); } .ms-cta-split__panel--buy { background: linear-gradient(135deg, #1A0D2E, #0D0A20); } .ms-cta-split__panel--sell { background: linear-gradient(135deg, #1A0900, #0D0500); } .ms-cta-split__panel { border-color: var(--ds-border); } .ms-cta-split__panel h3 { color: var(--ds-text); } .ms-cta-split__panel p { color: var(--ds-text-2); } .ms-cta-split__icon { filter: drop-shadow(0 0 12px rgba(255,107,11,0.4)); } /* ── Newsletter ───────────────────────────────────────────── */ .ms-newsletter { background: linear-gradient(135deg, var(--ds-card-2), var(--ds-card)); border-top: 1px solid var(--ds-border); } .ms-newsletter h3 { color: var(--ds-text); } .ms-newsletter p { color: var(--ds-text-2); } .ms-newsletter__form input { background: rgba(255,255,255,0.06); border: 1.5px solid var(--ds-border); color: var(--ds-text); } .ms-newsletter__form input:focus { border-color: var(--ds-orange); background: rgba(255,107,11,0.06); } .ms-newsletter__note { color: var(--ds-text-3); } /* ── FAQ ──────────────────────────────────────────────────── */ .ms-faq-item { background: var(--ds-card); border: 1px solid var(--ds-border); } .ms-faq-item:hover { border-color: rgba(255,107,11,0.3); } .ms-faq-q { color: var(--ds-text); } .ms-faq-q:hover { color: var(--ds-orange); } .ms-faq-chevron { color: var(--ds-orange); } .ms-faq-a { color: var(--ds-text-2); } .ms-faq-item.open .ms-faq-q { color: var(--ds-orange); } .ms-faq-item.open { border-color: var(--ds-orange); background: var(--ds-card-2); } /* ========================================================================== MamaPay Portal & Payment Results Design System ========================================================================== */ .mamapay-portal-container, .mamapay-result-container, .mamapay-receipt-wrapper { max-width: 600px; margin: 48px auto; padding: 0 16px; } .mamapay-portal-card, .mamapay-status-card { background: var(--ds-card); border: 1px solid var(--ds-border); border-radius: var(--ds-r-lg); box-shadow: var(--ds-shadow-lg); overflow: hidden; } .mamapay-portal-header { background: var(--ds-card-2); border-bottom: 1px solid var(--ds-border); color: var(--ds-text); padding: 24px 28px; display: flex; align-items: center; justify-content: space-between; gap: 16px; } .portal-badge-label { font-size: 11px; text-transform: uppercase; letter-spacing: 1.2px; color: var(--ds-orange); font-weight: 700; display: block; } .portal-title { font-size: 18px; font-weight: 800; margin: 4px 0 0 0; color: var(--ds-text); } .portal-sandbox-tag { background: rgba(245, 158, 11, 0.2); color: #FBBF24; border: 1px solid rgba(245, 158, 11, 0.4); font-size: 11px; font-weight: 800; padding: 5px 10px; border-radius: var(--ds-r-pill); letter-spacing: 0.5px; white-space: nowrap; } .mamapay-portal-body, .mamapay-status-body { padding: 28px 30px; } .mamapay-summary-box, .mamapay-info-panel { background: var(--ds-bg-2); border: 1px solid var(--ds-border); border-radius: var(--ds-r-md); padding: 18px 20px; margin-bottom: 22px; } .summary-line, .info-row { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; font-size: 14px; } .summary-line:not(:last-child), .info-row:not(:last-child) { border-bottom: 1px solid var(--ds-border-2); } .summary-label, .info-label { color: var(--ds-text-2); } .summary-value, .info-val { color: var(--ds-text); font-weight: 600; } .summary-ref, .info-code { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; color: var(--ds-orange); font-weight: 700; } .summary-total, .total-highlight { margin-top: 4px; padding-top: 12px; border-top: 1px solid var(--ds-border) !important; } .summary-amount, .info-amount-paid { color: #10B981; font-size: 20px; font-weight: 800; } .failure-hint-text { color: var(--ds-text-3); font-size: 12px; display: block; margin-top: 8px; line-height: 1.5; } .failure-hint-text { font-size: 13px; color: var(--ds-text-2); margin-bottom: 22px; } .portal-actions-row { display: flex; gap: 12px; } .btn-authorize { flex: 1; background: #10B981; color: #FFFFFF; border: none; padding: 14px; border-radius: var(--ds-r-sm); font-size: 15px; font-weight: 700; cursor: pointer; transition: opacity 0.2s, transform 0.15s; } .btn-authorize:hover { opacity: 0.92; transform: translateY(-1px); } .btn-cancel-pay { background: rgba(239, 68, 68, 0.15); color: #F87171; border: 1px solid rgba(239, 68, 68, 0.3); padding: 14px 20px; border-radius: var(--ds-r-sm); font-size: 14px; font-weight: 600; cursor: pointer; transition: background 0.2s; } .btn-cancel-pay:hover { background: rgba(239, 68, 68, 0.25); } /* ── Status Banners (Pending / Success / Failure) ────────── */ .mamapay-banner { padding: 36px 24px; text-align: center; color: #FFFFFF; } .mamapay-banner.pending { background: linear-gradient(135deg, #1D4ED8 0%, #0F172A 100%); } .mamapay-banner.success { background: linear-gradient(135deg, #059669 0%, #064E3B 100%); } .mamapay-banner.failure { background: linear-gradient(135deg, #DC2626 0%, #7F1D1D 100%); } .status-icon-bubble { width: 64px; height: 64px; background: rgba(255, 255, 255, 0.18); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin: 0 auto 16px auto; box-shadow: 0 4px 16px rgba(0,0,0,0.2); } .status-banner-title { font-size: 24px; font-weight: 800; margin: 0 0 6px 0; color: #FFFFFF; } .status-banner-sub { font-size: 14px; color: rgba(255, 255, 255, 0.85); margin: 0; } .mamapay-spinner { width: 58px; height: 58px; border: 4px solid rgba(255,255,255,0.25); border-top-color: #FFFFFF; border-radius: 50%; animation: spin 1s linear infinite; margin: 0 auto 16px auto; } @keyframes spin { to { transform: rotate(360deg); } } .mamapay-notice-box.warning { background: rgba(245, 158, 11, 0.12); border: 1px solid rgba(245, 158, 11, 0.3); border-radius: var(--ds-r-sm); padding: 12px 16px; margin-bottom: 22px; display: flex; align-items: center; gap: 12px; color: #FBBF24; font-size: 13px; font-weight: 500; } .info-failure-reason { margin-top: 10px; padding-top: 10px; border-top: 1px dashed rgba(239, 68, 68, 0.3); font-size: 13px; color: #F87171; } .mamapay-actions-stack { display: flex; flex-direction: column; gap: 12px; } .btn-mamapay-primary { width: 100%; display: block; text-align: center; background: var(--ds-orange); color: #FFFFFF; border: none; padding: 14px; border-radius: var(--ds-r-sm); font-size: 15px; font-weight: 700; cursor: pointer; text-decoration: none; box-shadow: var(--ds-shadow-orange); transition: opacity 0.2s, transform 0.15s; } .btn-mamapay-primary:hover { opacity: 0.94; transform: translateY(-1px); } .btn-mamapay-secondary { width: 100%; display: block; text-align: center; background: var(--ds-card-2); color: var(--ds-text); border: 1px solid var(--ds-border); padding: 12px; border-radius: var(--ds-r-sm); font-size: 14px; font-weight: 600; cursor: pointer; text-decoration: none; transition: background 0.2s, border-color 0.2s; } .btn-mamapay-secondary:hover { background: var(--ds-card-3); border-color: rgba(255, 255, 255, 0.2); } .btn-mamapay-ghost { display: block; text-align: center; color: var(--ds-text-3); text-decoration: none; padding: 8px; font-size: 13px; transition: color 0.2s; } .btn-mamapay-ghost:hover { color: var(--ds-text); } .btn-mamapay-link { display: block; text-align: center; color: var(--ds-orange); text-decoration: none; padding: 8px; font-size: 14px; font-weight: 600; } .btn-mamapay-link:hover { text-decoration: underline; } .mamapay-card-footer { background: var(--ds-bg-2); border-top: 1px solid var(--ds-border); padding: 16px; font-size: 12px; color: var(--ds-text-3); text-align: center; } /* ── Printable Official Receipt ─────────────────────────── */ #printable-receipt { background: var(--ds-card); border: 1px solid var(--ds-border); border-radius: var(--ds-r-lg); box-shadow: var(--ds-shadow-lg); padding: 36px; color: var(--ds-text); } #printable-receipt table tr td, #printable-receipt table tr th { border-color: var(--ds-border-2) !important; } @media print { body * { visibility: hidden; } #printable-receipt, #printable-receipt * { visibility: visible; } #printable-receipt { position: absolute; left: 0; top: 0; width: 100%; border: none !important; box-shadow: none !important; background: #FFFFFF !important; color: #0F172A !important; } .receipt-actions { display: none !important; } } /* ---- Header and Footer Redesign Dark Theme Additions ---- */ .hq-link.hq-link--active { color: var(--ds-orange); font-weight: 700; } .theme-toggle-btn { background: rgba(255, 255, 255, 0.08); border: 1px solid var(--ds-border); color: var(--ds-text-2); } .theme-toggle-btn:hover { background: rgba(255, 255, 255, 0.15); color: var(--ds-text); border-color: rgba(255, 107, 11, 0.4); } .search-autocomplete-box { background: var(--ds-card); border-color: var(--ds-border); box-shadow: var(--ds-shadow-lg); } .momo-telecel { background: rgba(239, 68, 68, 0.15) !important; color: #f87171 !important; border-color: rgba(239, 68, 68, 0.3) !important; } .momo-at { background: rgba(99, 102, 241, 0.15) !important; color: #818cf8 !important; border-color: rgba(99, 102, 241, 0.3) !important; } .momo-cod { background: rgba(16, 185, 129, 0.15) !important; color: #34d399 !important; border-color: rgba(16, 185, 129, 0.3) !important; } /* ---- Official Contact & Legal Pages Dark Theme Overrides ---- */ .contact-subtitle, .legal-subtitle { color: var(--ds-text-2); } .channel-card, .contact-form-card, .legal-card { background: var(--ds-card); border-color: var(--ds-border); box-shadow: var(--ds-shadow-md); } .channel-name, .legal-section h2, .form-card-title { color: var(--ds-text); } .channel-desc, .channel-label, .form-card-subtitle, .legal-section p, .legal-section ul { color: var(--ds-text-2); } .channel-number { color: var(--ds-text); } .contact-form label { color: var(--ds-text-2); } .contact-form input, .contact-form select, .contact-form textarea { background: var(--ds-bg-2); border-color: var(--ds-border); color: var(--ds-text); } .contact-form input:focus, .contact-form select:focus, .contact-form textarea:focus { background: var(--ds-card); border-color: var(--ds-orange); } .legal-section { border-bottom-color: var(--ds-border); } .legal-notice-box { background: rgba(239, 68, 68, 0.12); border-left-color: #ef4444; color: #fca5a5; } .legal-contact-box, .step-card { background: var(--ds-card-2); border-color: var(--ds-border); } .step-card h4 { color: var(--ds-text); } .step-card p { color: var(--ds-text-2); } .floating-whatsapp-btn { box-shadow: 0 4px 18px rgba(37, 211, 102, 0.35); } .footer-contact-pill { background: rgba(255, 107, 11, 0.18); color: var(--ds-orange); } .footer-contact-pill:hover { background: rgba(255, 107, 11, 0.28); } /* Payment Methods Showcase in Dark Theme */ .footer-payments-section { background: #f8fafc; border-top: 1px solid #e2e8f0; border-bottom: 1px solid #e2e8f0; color: #080d1b; } .payments-main-heading { color: #080d1b; } .payments-subtext { color: #475569; } .payment-card { background: #ffffff; border: 1.5px solid #e2e8f0; color: #080d1b; } .payment-card:hover { border-color: #ff5722; box-shadow: 0 12px 28px -6px rgba(255, 87, 34, 0.2), 0 4px 12px rgba(15, 23, 42, 0.08); } .payment-brand-title { color: #080d1b; } .payment-card-tagline { color: #475569; }