/* ═══════════════════════════════════════════════════════ VoucherHub — Design System Font: Syne (display) + DM Sans (body) Theme: Clean modern with deep indigo accents ═══════════════════════════════════════════════════════ */ /* ── Variables ─────────────────────────────────────── */ :root { --color-primary: #4f46e5; --color-primary-dark: #3730a3; --color-primary-light:#e0e7ff; --color-secondary: #06b6d4; --color-accent: #f59e0b; --color-success: #10b981; --color-danger: #ef4444; --color-warning: #f59e0b; --bg: #f8f9fc; --bg-card: #ffffff; --text: #0f172a; --text-muted: #64748b; --border: #e2e8f0; --radius-sm: 6px; --radius: 12px; --radius-lg: 20px; --radius-xl: 28px; --shadow-sm: 0 1px 3px rgba(0,0,0,.08); --shadow: 0 4px 16px rgba(0,0,0,.08); --shadow-lg: 0 12px 40px rgba(0,0,0,.12); --font-display: 'Syne', sans-serif; --font-body: 'DM Sans', sans-serif; --font-numeric: 'Outfit', 'DM Sans', sans-serif; color-scheme: light; } /* ── Dark theme ─────────────────────────────────────── Toggled by setting data-theme="dark" on (see theme.js). Because nearly every surface in this file is built from the variables below, swapping them re-themes the whole site. ── */ [data-theme="dark"] { color-scheme: dark; --color-primary: #818cf8; --color-primary-dark: #6366f1; --color-primary-light:#312e81; --color-secondary: #22d3ee; --color-accent: #fbbf24; --color-success: #34d399; --color-danger: #f87171; --color-warning: #fbbf24; --bg: #0b1120; --bg-card: #151c2e; --text: #f1f5f9; --text-muted: #94a3b8; --border: #283248; --shadow-sm: 0 1px 3px rgba(0,0,0,.35); --shadow: 0 4px 16px rgba(0,0,0,.4); --shadow-lg: 0 12px 40px rgba(0,0,0,.55); } [data-theme="dark"] body { background: var(--bg); } [data-theme="dark"] .hero-section, [data-theme="dark"] .auth-page { background: linear-gradient(135deg, #0f1729 0%, #1a1530 50%, #0d1f1a 100%); } [data-theme="dark"] .hero-bg-shape { background: radial-gradient(circle, rgba(129,140,248,.14) 0%, transparent 70%); } [data-theme="dark"] .voucher-img-wrap img, [data-theme="dark"] .provider-card-img img, [data-theme="dark"] .hero-img { filter: brightness(.92); } [data-theme="dark"] .form-control, [data-theme="dark"] .form-select { background-color: var(--bg-card); color: var(--text); border-color: var(--border); } [data-theme="dark"] .form-control:focus, [data-theme="dark"] .form-select:focus { background-color: var(--bg-card); color: var(--text); } [data-theme="dark"] .form-control::placeholder { color: var(--text-muted); opacity: .7; } [data-theme="dark"] .dropdown-menu { background-color: #1e293b; border-color: #475569; box-shadow: 0 10px 28px rgba(0,0,0,.5); } [data-theme="dark"] .dropdown-item { color: #f1f5f9; } [data-theme="dark"] .dropdown-item:hover, [data-theme="dark"] .dropdown-item:focus { background: #334155; color: #fff; } [data-theme="dark"] .dropdown-item.active { background: var(--color-primary-dark); color: #fff; } [data-theme="dark"] .dropdown-divider { border-color: #475569; } [data-theme="dark"] .breadcrumb-item.active, [data-theme="dark"] .text-muted { color: var(--text-muted) !important; } [data-theme="dark"] .quick-btn { color: var(--text); } [data-theme="dark"] .voucher-code, [data-theme="dark"] .wallet-summary { background: var(--bg); } [data-theme="dark"] .empty-state > i { color: var(--border); } [data-theme="dark"] .badge.bg-light { background-color: var(--bg) !important; color: var(--text) !important; } [data-theme="dark"] .badge.border { border-color: var(--border) !important; } [data-theme="dark"] .toast-vms.success { background: #052e1f; color: #6ee7b7; } [data-theme="dark"] .toast-vms.error { background: #3f1212; color: #fca5a5; } [data-theme="dark"] .toast-vms.info { background: #0c2340; color: #93c5fd; } [data-theme="dark"] .table { color: var(--text); } /* ── Theme toggle button ──────────────────────────────── */ .theme-toggle-btn, .lang-toggle-btn { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 999px; border: 1px solid var(--border); background: var(--bg-card); color: var(--text-muted); font-size: 1rem; cursor: pointer; transition: all .15s; } .theme-toggle-btn:hover, .lang-toggle-btn:hover { color: var(--color-primary); border-color: var(--color-primary); } .lang-toggle-btn { width: auto; padding: 0 .7rem; font-weight: 700; font-size: .8rem; letter-spacing: .03em; gap: .3rem; } .theme-toggle-btn .bi-moon-stars { display: none; } [data-theme="dark"] .theme-toggle-btn .bi-sun { display: none; } [data-theme="dark"] .theme-toggle-btn .bi-moon-stars { display: inline-block; } /* ── Reset / Base ─────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } body { font-family: var(--font-body); background: var(--bg); color: var(--text); line-height: 1.6; margin: 0; transition: background-color .2s ease, color .2s ease; } h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); font-weight: 700; line-height: 1.25; margin-bottom: .5rem; } a { color: var(--color-primary); text-decoration: none; } a:hover { color: var(--color-primary-dark); } img { max-width: 100%; } /* ── Bootstrap Overrides ──────────────────────────── */ .btn-primary { background: var(--color-primary); border-color: var(--color-primary); font-family: var(--font-display); font-weight: 600; border-radius: var(--radius-sm); transition: all .18s ease; } .btn-primary:hover { background: var(--color-primary-dark); border-color: var(--color-primary-dark); transform: translateY(-1px); box-shadow: 0 4px 14px rgba(79,70,229,.35); } .btn-outline-primary { border-color: var(--color-primary); color: var(--color-primary); border-radius: var(--radius-sm); font-weight: 500; } .btn-outline-primary:hover { background: var(--color-primary); border-color: var(--color-primary); } .btn-outline-secondary { border-radius: var(--radius-sm); } .btn-xs { font-size: .75rem; padding: .2rem .5rem; } .form-control, .form-select { border-radius: var(--radius-sm); border-color: var(--border); font-family: var(--font-body); transition: border-color .15s, box-shadow .15s; } .form-control:focus, .form-select:focus { border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(79,70,229,.12); } .breadcrumb { font-size: .875rem; } .breadcrumb-item + .breadcrumb-item::before { color: var(--text-muted); } .breadcrumb-item a { color: var(--color-primary); } .breadcrumb-item.active { color: var(--text-muted); } .breadcrumb-light .breadcrumb-item, .breadcrumb-light .breadcrumb-item a { color: rgba(255,255,255,.8); } .breadcrumb-light .breadcrumb-item.active { color: white; } .breadcrumb-light .breadcrumb-item + .breadcrumb-item::before { color: rgba(255,255,255,.5); } /* ── Navbar ───────────────────────────────────────── */ .vms-navbar { background: var(--bg-card); border-bottom: 1px solid var(--border); padding: .75rem 0; position: sticky; top: 0; z-index: 1000; box-shadow: var(--shadow-sm); } .navbar-brand { font-family: var(--font-display); font-weight: 800; font-size: 1.3rem; color: var(--text) !important; display: flex; align-items: center; gap: .4rem; } .brand-icon { color: var(--color-primary); font-size: 1.4rem; } .brand-text { color: var(--text); } .navbar-nav .nav-link { font-weight: 500; color: var(--text-muted) !important; border-radius: var(--radius-sm); padding: .4rem .75rem !important; transition: all .15s; } .navbar-nav .nav-link:hover { color: var(--text) !important; background: var(--bg); } .admin-link { color: var(--color-accent) !important; font-weight: 600 !important; } .nav-badge { font-size: .85rem; } .wallet-balance-nav { font-weight: 600; color: var(--color-primary); } .cart-count-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 1.25rem; height: 1.25rem; padding: 0 .35rem; margin-left: .25rem; font-size: .7rem; font-weight: 700; line-height: 1; color: white; background: var(--color-primary); border-radius: 999px; vertical-align: middle; } .user-avatar-nav { color: var(--text) !important; font-weight: 600 !important; } .dropdown-menu { border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); } .dropdown-item { font-size: .9rem; border-radius: var(--radius-sm); margin: 1px 4px; padding: .45rem .75rem; } .dropdown-item:hover { background: var(--bg); } .dropdown-item.active { background: var(--color-primary-light); color: var(--color-primary-dark); font-weight: 600; } /* Numeric / price typography */ .font-numeric, .voucher-price, .voucher-value, .detail-price .amount, .detail-value .amount, .cart-item-price span, .conf-item-price, .conf-total, .order-amount, .order-detail-price, .txn-amount, .wallet-balance-display .amount { font-family: var(--font-numeric); font-variant-numeric: tabular-nums lining-nums; letter-spacing: -0.02em; } /* ── Toast ─────────────────────────────────────────── */ .toast-vms { border: none; border-radius: var(--radius); min-width: 280px; font-weight: 500; box-shadow: var(--shadow-lg); animation: slideInUp .3s ease; } .toast-vms.success { background: #ecfdf5; color: #065f46; border-left: 4px solid var(--color-success); } .toast-vms.error { background: #fef2f2; color: #991b1b; border-left: 4px solid var(--color-danger); } .toast-vms.info { background: #eff6ff; color: #1e40af; border-left: 4px solid #3b82f6; } @keyframes slideInUp { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } /* ── Hero ──────────────────────────────────────────── */ .hero-section { background: linear-gradient(135deg, #f0f4ff 0%, #faf5ff 50%, #f0fdf4 100%); padding: 80px 0 60px; position: relative; overflow: hidden; } .hero-bg-shape { position: absolute; top: -100px; right: -100px; width: 500px; height: 500px; border-radius: 50%; background: radial-gradient(circle, rgba(79,70,229,.08) 0%, transparent 70%); pointer-events: none; } .min-vh-80 { min-height: 70vh; } .hero-badge { display: inline-flex; align-items: center; gap: .4rem; background: var(--bg-card); border: 1px solid var(--border); border-radius: 100px; padding: .35rem .9rem; font-size: .85rem; font-weight: 600; color: var(--text-muted); box-shadow: var(--shadow-sm); margin-bottom: 1.5rem; } .hero-title { font-family: var(--font-display); font-size: clamp(2.4rem, 5vw, 3.6rem); font-weight: 800; line-height: 1.1; color: var(--text); margin-bottom: 1.2rem; } .gradient-text { background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .hero-subtitle { font-size: 1.15rem; color: var(--text-muted); margin-bottom: 2rem; max-width: 480px; } .hero-actions { display: flex; gap: 1rem; flex-wrap: wrap; margin-bottom: 2.5rem; } .hero-stats { display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; } .stat-item { display: flex; flex-direction: column; gap: .1rem; } .stat-number { font-family: var(--font-numeric); font-weight: 700; font-size: 1.65rem; color: var(--text); font-variant-numeric: tabular-nums lining-nums; letter-spacing: -0.03em; line-height: 1.15; } .stat-label { font-size: .72rem; color: var(--text-muted); font-weight: 600; text-transform: uppercase; letter-spacing: .08em; line-height: 1.3; } .stat-divider { width: 1px; height: 36px; background: var(--border); flex-shrink: 0; } .hero-visual { position: relative; padding: 20px; isolation: isolate; } .hero-img { width: 100%; border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); object-fit: cover; position: relative; z-index: 1; } .floating-card { position: absolute; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: .6rem 1rem; box-shadow: var(--shadow-lg); display: flex; align-items: center; gap: .5rem; font-size: .85rem; font-weight: 600; animation: float 3s ease-in-out infinite; z-index: 2; } [data-theme="dark"] .floating-card { background: var(--bg-card); border-color: var(--border); box-shadow: 0 12px 32px rgba(0,0,0,.45); } .floating-card i { font-size: 1.1rem; } .floating-card.card-1 { top: 20px; left: -10px; color: var(--color-success); } .floating-card.card-1 i { color: var(--color-success); } .floating-card.card-2 { bottom: 40px; right: -10px; color: var(--color-primary); } .floating-card.card-2 i { color: var(--color-primary); } @keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } } /* ── Sections ─────────────────────────────────────── */ .how-it-works, .featured-providers, .featured-vouchers, .cta-section { padding: 80px 0; } .how-it-works { background: var(--bg-card); } .featured-providers { background: var(--bg); } .featured-vouchers { background: var(--bg-card); } .section-header { margin-bottom: 2.5rem; } .section-tag { display: inline-block; font-size: .8rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--color-primary); background: var(--color-primary-light); padding: .25rem .75rem; border-radius: 100px; margin-bottom: .6rem; } .section-header h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); color: var(--text); } .section-header p { color: var(--text-muted); margin-bottom: 0; } /* ── Steps ─────────────────────────────────────────── */ .step-card { background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 2rem; text-align: center; transition: transform .2s, box-shadow .2s; } .step-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); } .step-number { font-family: var(--font-display); font-weight: 800; font-size: 2.5rem; color: var(--color-primary-light); line-height: 1; margin-bottom: .75rem; } .step-icon { font-size: 2rem; color: var(--color-primary); margin-bottom: 1rem; } .step-card h4 { font-size: 1.1rem; margin-bottom: .5rem; } .step-card p { color: var(--text-muted); font-size: .9rem; margin-bottom: 0; } /* ── Provider Chip (homepage) ─────────────────────── */ .provider-chip { display: flex; flex-direction: column; align-items: center; gap: .6rem; padding: 1.25rem .75rem; background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); text-align: center; color: var(--text); font-size: .85rem; font-weight: 600; transition: all .2s; text-decoration: none; } .provider-chip:hover { border-color: var(--color-primary); box-shadow: var(--shadow); color: var(--color-primary); transform: translateY(-2px); } .provider-chip img { width: 48px; height: 48px; border-radius: 10px; object-fit: cover; } /* ── Voucher Card ─────────────────────────────────── */ .voucher-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; transition: transform .2s, box-shadow .2s; height: 100%; display: flex; flex-direction: column; } .voucher-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); } .voucher-img-wrap { position: relative; overflow: hidden; } .voucher-img-wrap img { width: 100%; height: 170px; object-fit: cover; transition: transform .4s; } .voucher-card:hover .voucher-img-wrap img { transform: scale(1.04); } .voucher-category-badge { position: absolute; top: 10px; left: 10px; background: rgba(0,0,0,.55); color: white; font-size: .72rem; font-weight: 600; letter-spacing: .04em; padding: .25rem .6rem; border-radius: 100px; backdrop-filter: blur(4px); } .voucher-expiry-badge { position: absolute; top: 10px; right: 10px; background: var(--color-danger); color: white; font-size: .72rem; font-weight: 700; padding: .25rem .6rem; border-radius: 100px; } .voucher-body { padding: 1rem; display: flex; flex-direction: column; flex: 1; } .voucher-provider { font-size: .78rem; font-weight: 700; color: var(--color-primary); text-transform: uppercase; letter-spacing: .05em; margin-bottom: .3rem; } .voucher-title { font-family: var(--font-display); font-size: .95rem; font-weight: 700; margin-bottom: .4rem; color: var(--text); } .voucher-desc { font-size: .82rem; color: var(--text-muted); margin-bottom: .5rem; flex: 1; } .voucher-expiry-info { font-size: .78rem; color: var(--text-muted); margin-bottom: .6rem; } .voucher-pricing { display: flex; justify-content: space-between; align-items: center; margin-bottom: .75rem; } .voucher-value { font-size: .82rem; color: var(--text-muted); text-decoration: line-through; font-family: var(--font-numeric); font-variant-numeric: tabular-nums; } .voucher-price { font-family: var(--font-numeric); font-size: 1.15rem; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums lining-nums; letter-spacing: -0.02em; } .voucher-actions { display: flex; gap: .5rem; } .voucher-actions .btn { flex: 1; font-size: .83rem; } /* ── CTA ──────────────────────────────────────────── */ .cta-section { padding: 60px 0 80px; } .cta-card { background: linear-gradient(135deg, var(--color-primary) 0%, #7c3aed 100%); border-radius: var(--radius-xl); padding: 3rem 2.5rem; color: white; } .cta-card h2 { color: white; font-size: 1.8rem; } .cta-card p { color: rgba(255,255,255,.85); margin-bottom: 0; } .cta-card .btn-light { font-weight: 700; color: var(--color-primary); } /* ── Page Header ──────────────────────────────────── */ .page-header { background: linear-gradient(135deg, var(--color-primary) 0%, #7c3aed 100%); color: white; padding: 2.5rem 0; } .page-header h1 { color: white; font-size: 2rem; margin-bottom: .4rem; } .page-header p { color: rgba(255,255,255,.8); margin-bottom: 0; } .page-title { font-family: var(--font-display); font-weight: 800; font-size: 1.8rem; } /* ── Filter Sidebar ───────────────────────────────── */ .filter-sidebar { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 1.5rem; position: sticky; top: 80px; } .filter-section-title { font-family: var(--font-display); font-weight: 700; font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); margin-bottom: .6rem; } /* ── Filter Bar ───────────────────────────────────── */ .filter-bar { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.25rem; } /* ── Category Pills ───────────────────────────────── */ .category-pills { display: flex; flex-wrap: wrap; gap: .5rem; } .pill { display: inline-block; padding: .35rem .9rem; background: var(--bg-card); border: 1px solid var(--border); border-radius: 100px; font-size: .85rem; font-weight: 500; color: var(--text-muted); transition: all .15s; text-decoration: none; } .pill:hover, .pill.active { background: var(--color-primary); border-color: var(--color-primary); color: white; } /* ── Provider Cards ───────────────────────────────── */ .provider-card-link { text-decoration: none; display: block; } .provider-card-full { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; transition: transform .2s, box-shadow .2s; height: 100%; } .provider-card-link:hover .provider-card-full { transform: translateY(-4px); box-shadow: var(--shadow-lg); } .provider-card-img img { width: 100%; height: 130px; object-fit: cover; } .provider-card-body { padding: 1rem; } .provider-category-tag { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--color-primary); margin-bottom: .4rem; } .provider-card-body h5 { font-size: 1rem; font-weight: 700; margin-bottom: .4rem; color: var(--text); } .provider-card-body p { font-size: .83rem; color: var(--text-muted); margin-bottom: .75rem; } .provider-meta { display: flex; justify-content: space-between; align-items: center; font-size: .82rem; } .voucher-count { color: var(--text-muted); } .view-link { color: var(--color-primary); font-weight: 600; } /* ── Provider Detail Header ───────────────────────── */ .provider-detail-header { background-size: cover; background-position: center; position: relative; } .provider-detail-overlay { background: linear-gradient(to right, rgba(15,23,42,.85) 0%, rgba(15,23,42,.5) 100%); padding: 3rem 0; } .provider-logo-lg { width: 72px; height: 72px; border-radius: var(--radius); object-fit: cover; border: 3px solid white; } .provider-cat-badge { display: inline-block; background: rgba(255,255,255,.2); color: white; font-size: .75rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; padding: .2rem .7rem; border-radius: 100px; margin-bottom: .5rem; } .provider-detail-name { color: white; font-size: 1.8rem; font-weight: 800; margin-bottom: .3rem; } .provider-detail-desc { color: rgba(255,255,255,.75); margin-bottom: 0; font-size: .95rem; max-width: 600px; } /* ── Voucher Detail ───────────────────────────────── */ .voucher-detail-img-wrap { position: relative; border-radius: var(--radius-xl); overflow: hidden; } .voucher-detail-img { width: 100%; height: 380px; object-fit: cover; } .voucher-detail-badge { position: absolute; bottom: 16px; left: 16px; background: rgba(0,0,0,.6); color: white; backdrop-filter: blur(6px); padding: .4rem 1rem; border-radius: 100px; font-size: .82rem; font-weight: 600; } .voucher-detail-provider { color: var(--color-primary); font-weight: 700; font-size: .85rem; text-transform: uppercase; letter-spacing: .06em; margin-bottom: .75rem; display: inline-block; } .voucher-detail-title { font-size: 2rem; font-weight: 800; margin-bottom: 1rem; } .voucher-detail-desc { color: var(--text-muted); font-size: 1rem; margin-bottom: 1.5rem; } .voucher-detail-pricing { display: flex; gap: 2rem; align-items: center; margin-bottom: 1.5rem; flex-wrap: wrap; } .detail-price, .detail-value { display: flex; flex-direction: column; } .detail-price .label, .detail-value .label { font-size: .78rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: .05em; margin-bottom: .2rem; } .detail-price .amount { font-family: var(--font-numeric); font-size: 1.8rem; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; } .detail-value .amount { font-family: var(--font-numeric); font-size: 1.8rem; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; } .save-badge { background: #dcfce7; color: #166534; font-weight: 700; font-size: .9rem; padding: .4rem 1rem; border-radius: 100px; } .voucher-detail-expiry { background: #fffbeb; border: 1px solid #fde68a; border-radius: var(--radius); padding: .75rem 1rem; margin-bottom: 1rem; font-size: .9rem; color: #92400e; } .voucher-detail-state { font-size: .9rem; } .voucher-detail-features { display: flex; flex-direction: column; gap: .5rem; } .feature-item { display: flex; align-items: center; gap: .6rem; font-size: .9rem; color: var(--text-muted); } /* ── Cart ─────────────────────────────────────────── */ .cart-items { display: flex; flex-direction: column; gap: 1rem; } .cart-item-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 1rem; display: flex; align-items: center; gap: 1rem; } .cart-item-img { width: 80px; height: 60px; object-fit: cover; border-radius: var(--radius-sm); flex-shrink: 0; } .cart-item-info { flex: 1; } .cart-item-provider { font-size: .75rem; font-weight: 700; color: var(--color-primary); text-transform: uppercase; } .cart-item-title { font-weight: 600; font-size: .95rem; margin-bottom: .2rem; } .cart-item-price { text-align: right; flex-shrink: 0; } .cart-item-price span { font-weight: 700; font-size: 1.1rem; display: block; } .order-summary-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 1.5rem; position: sticky; top: 80px; } .wallet-summary { background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); padding: 1rem; font-size: .9rem; } .wallet-summary.insufficient { border-color: var(--color-danger); background: #fef2f2; } .secure-badge { display: flex; align-items: center; font-size: .82rem; color: var(--text-muted); } /* ── Order Confirmation ───────────────────────────── */ .order-confirmation { max-width: 600px; margin: 0 auto; text-align: center; padding: 2rem 0; } .confirmation-icon { font-size: 4rem; color: var(--color-success); margin-bottom: 1rem; } .confirmation-icon i { animation: popIn .4s cubic-bezier(.34,1.56,.64,1); } @keyframes popIn { from { transform: scale(0); } to { transform: scale(1); } } .confirmation-meta { display: flex; justify-content: center; gap: 1.5rem; color: var(--text-muted); font-size: .9rem; margin: 1rem 0 2rem; flex-wrap: wrap; align-items: center; } .confirmation-items { text-align: left; border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; margin-bottom: 1rem; } .conf-item { display: flex; align-items: center; gap: 1rem; padding: 1rem 1.25rem; border-bottom: 1px solid var(--border); } .conf-item:last-child { border-bottom: none; } .conf-item img { width: 64px; height: 48px; object-fit: cover; border-radius: var(--radius-sm); flex-shrink: 0; } .conf-item-info { flex: 1; } .conf-item-provider { font-size: .75rem; color: var(--color-primary); font-weight: 700; text-transform: uppercase; } .conf-item-title { font-weight: 600; } .conf-item-code { font-size: .85rem; color: var(--text-muted); margin-top: .2rem; } .code-value { font-size: 1rem; color: var(--color-primary); letter-spacing: .05em; } .conf-item-price { font-weight: 700; flex-shrink: 0; } .conf-total { display: flex; justify-content: space-between; font-size: 1.2rem; font-weight: 700; padding: 1rem 1.25rem; border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: 1.5rem; } .confirmation-actions { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; } /* ── Wallet ───────────────────────────────────────── */ .wallet-card-display { background: linear-gradient(135deg, var(--color-primary) 0%, #7c3aed 100%); border-radius: var(--radius-xl); padding: 2px; } .wallet-card-inner { background: linear-gradient(135deg, #4f46e5 0%, #6d28d9 100%); border-radius: calc(var(--radius-xl) - 2px); padding: 1.75rem; color: white; position: relative; overflow: hidden; } .wallet-card-inner::before { content: ''; position: absolute; top: -60px; right: -60px; width: 200px; height: 200px; border-radius: 50%; background: rgba(255,255,255,.08); } .wallet-card-top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 1.5rem; } .wallet-label { font-size: .8rem; font-weight: 600; opacity: .7; letter-spacing: .06em; text-transform: uppercase; } .wallet-icon { font-size: 1.6rem; opacity: .6; } .wallet-balance-display { display: flex; align-items: flex-start; gap: .3rem; margin-bottom: 1.5rem; } .wallet-balance-display .currency { font-size: 1.4rem; font-weight: 700; margin-top: .3rem; opacity: .8; } .wallet-balance-display .amount { font-size: 3rem; font-weight: 700; line-height: 1; } .wallet-card-bottom { display: flex; justify-content: space-between; font-size: .82rem; opacity: .7; } .topup-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 1.5rem; } .quick-amounts { display: flex; gap: .5rem; flex-wrap: wrap; } .quick-btn { flex: 1; min-width: 55px; padding: .4rem; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg-card); font-weight: 600; font-size: .85rem; cursor: pointer; transition: all .15s; } .quick-btn:hover { border-color: var(--color-primary); background: var(--color-primary-light); color: var(--color-primary); } .transactions-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 1.5rem; } .transaction-list { display: flex; flex-direction: column; } .transaction-item { display: flex; align-items: center; gap: 1rem; padding: .85rem 0; border-bottom: 1px solid var(--border); } .transaction-item:last-child { border-bottom: none; } .txn-icon { width: 38px; height: 38px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 1.1rem; flex-shrink: 0; } .txn-icon.topup { background: #d1fae5; color: var(--color-success); } .txn-icon.purchase { background: #e0e7ff; color: var(--color-primary); } .txn-icon.refund { background: #fef3c7; color: var(--color-accent); } .txn-info { flex: 1; } .txn-desc { font-weight: 500; font-size: .9rem; } .txn-meta { display: flex; gap: 1rem; font-size: .78rem; color: var(--text-muted); margin-top: .15rem; flex-wrap: wrap; } .txn-amount { font-weight: 700; font-size: 1rem; flex-shrink: 0; } .txn-amount.positive { color: var(--color-success); } .txn-amount.negative { color: var(--color-danger); } /* ── Orders ───────────────────────────────────────── */ .orders-list { display: flex; flex-direction: column; gap: 1rem; } .order-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; } .order-card-header { padding: 1rem 1.25rem; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: .5rem; background: var(--bg); } .order-number { font-family: var(--font-display); font-weight: 700; } .order-date { font-size: .85rem; } .order-card-body { padding: 1rem 1.25rem; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; } .order-items-preview { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; } .order-item-mini { display: flex; align-items: center; gap: .5rem; font-size: .85rem; } .order-item-mini img { width: 36px; height: 27px; object-fit: cover; border-radius: 4px; } .order-item-more { font-size: .8rem; color: var(--text-muted); } .order-total { display: flex; flex-direction: column; align-items: flex-end; } .order-amount { font-weight: 700; font-size: 1.1rem; } .status-badge { display: inline-block; padding: .25rem .7rem; border-radius: 100px; font-size: .78rem; font-weight: 700; } .status-badge.completed { background: #d1fae5; color: #065f46; } .status-badge.pending { background: #fef3c7; color: #92400e; } .status-badge.processing { background: #e0e7ff; color: #3730a3; } .status-badge.cancelled { background: #fee2e2; color: #991b1b; } .status-badge.refunded { background: #f3e8ff; color: #6b21a8; } /* ── Order Detail ─────────────────────────────────── */ .order-detail-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 1.5rem; } .order-detail-item { display: flex; align-items: flex-start; gap: 1rem; padding: 1rem 0; border-bottom: 1px solid var(--border); } .order-detail-item:last-child { border-bottom: none; } .order-detail-img { width: 80px; height: 60px; object-fit: cover; border-radius: var(--radius-sm); flex-shrink: 0; } .order-detail-info { flex: 1; } .order-detail-provider { font-size: .75rem; font-weight: 700; color: var(--color-primary); text-transform: uppercase; margin-bottom: .2rem; } .order-detail-title { font-weight: 700; font-size: 1rem; margin-bottom: .4rem; } .voucher-code-display { font-size: .85rem; display: flex; align-items: center; flex-wrap: wrap; gap: .3rem; } .voucher-code { background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: .2rem .5rem; font-size: .9rem; letter-spacing: .05em; color: var(--color-primary); } .order-detail-price { font-weight: 700; font-size: 1rem; flex-shrink: 0; } .summary-row { display: flex; justify-content: space-between; padding: .4rem 0; font-size: .9rem; } /* ── Auth Pages ───────────────────────────────────── */ .auth-page { min-height: calc(100vh - 70px); display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #f0f4ff 0%, #faf5ff 50%, #f0fdf4 100%); padding: 2rem 1rem; } .auth-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-xl); padding: 2.5rem; width: 100%; max-width: 440px; box-shadow: var(--shadow-lg); } .auth-header { text-align: center; margin-bottom: 2rem; } .auth-brand { font-family: var(--font-display); font-weight: 800; font-size: 1.4rem; color: var(--text); text-decoration: none; display: inline-flex; align-items: center; gap: .4rem; margin-bottom: 1.5rem; } .auth-header h2 { font-size: 1.6rem; margin-bottom: .4rem; } .auth-header p { color: var(--text-muted); margin-bottom: 0; } .welcome-bonus-badge { display: inline-block; background: #fef3c7; color: #92400e; font-size: .85rem; font-weight: 600; border-radius: 100px; padding: .35rem 1rem; margin-top: .75rem; } .auth-divider { text-align: center; position: relative; margin: 1.5rem 0; } .auth-divider::before { content: ''; position: absolute; top: 50%; left: 0; right: 0; height: 1px; background: var(--border); } .auth-divider span { background: var(--bg-card); padding: 0 .75rem; font-size: .8rem; color: var(--text-muted); position: relative; } .auth-link { color: var(--color-primary); font-weight: 600; } .demo-accounts { display: flex; flex-direction: column; gap: .5rem; } .demo-account { display: flex; align-items: center; gap: .75rem; padding: .75rem 1rem; border: 1px solid var(--border); border-radius: var(--radius); cursor: pointer; transition: all .15s; font-size: .9rem; } .demo-account:hover { border-color: var(--color-primary); background: var(--color-primary-light); } .demo-account i { font-size: 1.3rem; } .demo-account > div { flex: 1; } /* ── Profile ──────────────────────────────────────── */ .profile-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 2rem; text-align: center; } .profile-avatar { width: 80px; height: 80px; border-radius: 50%; background: linear-gradient(135deg, var(--color-primary) 0%, #7c3aed 100%); color: white; font-family: var(--font-display); font-size: 2rem; font-weight: 800; display: flex; align-items: center; justify-content: center; margin: 0 auto 1rem; } .profile-roles { display: flex; gap: .4rem; justify-content: center; flex-wrap: wrap; } /* ── Empty State ──────────────────────────────────── */ .empty-state { text-align: center; padding: 4rem 2rem; color: var(--text-muted); } .empty-state > i { font-size: 3.5rem; color: var(--border); display: block; margin-bottom: 1rem; } .empty-state h4 { font-size: 1.2rem; color: var(--text); margin-bottom: .5rem; } .empty-state p { margin-bottom: 1.5rem; } /* ── Footer ───────────────────────────────────────── */ .vms-footer { background: #0f172a; color: #94a3b8; padding: 4rem 0 2rem; margin-top: 5rem; } .footer-brand { font-family: var(--font-display); font-weight: 800; font-size: 1.3rem; color: white; display: flex; align-items: center; gap: .4rem; margin-bottom: 1rem; } .footer-brand .brand-icon { color: var(--color-primary); } .footer-tagline { font-size: .9rem; color: #64748b; } .vms-footer h6 { color: white; font-weight: 700; margin-bottom: .75rem; font-size: .9rem; text-transform: uppercase; letter-spacing: .06em; } .vms-footer ul { list-style: none; padding: 0; margin: 0; } .vms-footer ul li { margin-bottom: .4rem; } .vms-footer ul li a { color: #64748b; font-size: .9rem; transition: color .15s; } .vms-footer ul li a:hover { color: white; } .vms-footer hr { border-color: #1e293b; margin: 2rem 0 1rem; } .footer-socials { display: flex; flex-wrap: wrap; gap: .5rem; } .footer-social-link { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 999px; background: rgba(255,255,255,.06); color: #cbd5e1; font-size: 1rem; transition: all .15s; } .footer-social-link:hover { background: var(--color-primary); color: white; transform: translateY(-2px); } .footer-contact { list-style: none; padding: 0; margin: .5rem 0 0; } .footer-contact li { margin-bottom: .4rem; } .footer-contact-link { display: inline-flex; align-items: center; gap: .5rem; color: #94a3b8; font-size: .88rem; text-decoration: none; } .footer-contact-link:hover { color: white; } .footer-contact-icon { flex-shrink: 0; font-size: .95rem; line-height: 1; } .footer-contact-value { unicode-bidi: isolate; } /* ── Utility ──────────────────────────────────────── */ .card { border: 1px solid var(--border); border-radius: var(--radius-lg); } /* ── Mobile filter toggle (Marketplace / Providers) ──────── */ .filter-toggle-btn { display: none; } @media (max-width: 991.98px) { .filter-toggle-btn { display: flex; align-items: center; justify-content: center; gap: .5rem; width: 100%; margin-bottom: 1rem; } .filter-sidebar { position: static; } } /* Filters always render on desktop regardless of Bootstrap's collapse state */ @media (min-width: 992px) { .collapse.collapse-lg { display: block !important; } } /* ── Responsive overhaul ────────────────────────────────── Mobile-first refinements layered on top of Bootstrap's grid so the storefront feels native on phones, not just "shrunk". */ @media (max-width: 991.98px) { .hero-section { padding: 56px 0 40px; } .hero-stats { flex-wrap: wrap; row-gap: .75rem; } .order-summary-card, .filter-sidebar { position: static; top: auto; } /* Mobile nav: align links to trailing edge (right in EN, left in AR) */ .vms-navbar .navbar-collapse { padding-top: .75rem; border-top: 1px solid var(--border); margin-top: .75rem; } .vms-navbar .navbar-collapse .navbar-nav { align-items: flex-end; text-align: end; width: 100%; margin-inline: 0 !important; } .vms-navbar .navbar-collapse .nav-item { width: auto; max-width: 100%; } .vms-navbar .navbar-collapse .nav-link, .vms-navbar .navbar-collapse .btn { text-align: end; } .vms-navbar .navbar-collapse .dropdown { position: relative; } .vms-navbar .navbar-collapse .dropdown-menu { position: absolute !important; top: 100% !important; inset-inline-end: 0 !important; inset-inline-start: auto !important; transform: none !important; margin-top: .25rem !important; } /* Keep language / theme dropdowns inside the viewport */ .vms-navbar .nav-utils { position: relative; flex-shrink: 0; } .vms-navbar .nav-utils .dropdown { position: relative; } .vms-navbar .nav-utils .dropdown-menu { position: absolute !important; top: calc(100% + 0.35rem) !important; inset-inline-end: 0 !important; inset-inline-start: auto !important; transform: none !important; margin: 0 !important; min-width: 9.5rem; } [data-theme="dark"] .vms-navbar .dropdown-menu { background: #243044; border-color: #64748b; box-shadow: 0 14px 36px rgba(0,0,0,.7); } [data-theme="dark"] .vms-navbar .dropdown-item { color: #f8fafc; } [data-theme="dark"] .vms-navbar .dropdown-item:hover, [data-theme="dark"] .vms-navbar .dropdown-item:focus { background: #3d4f6a; color: #fff; } } @media (max-width: 767.98px) { .navbar-brand { font-size: 1.1rem; } .hero-badge { font-size: .78rem; padding: .3rem .75rem; } .hero-actions { flex-direction: column; align-items: stretch; } .hero-actions .btn { width: 100%; } .how-it-works, .featured-providers, .featured-vouchers, .cta-section { padding: 48px 0; } .section-header.d-flex { flex-direction: column; align-items: flex-start !important; gap: .75rem; } .section-header.d-flex .btn { align-self: stretch; text-align: center; } .cta-card { padding: 2rem 1.5rem; text-align: center; } .cta-card .col-md-4.text-md-end { text-align: center !important; margin-top: 1rem; } .cta-card .col-md-4.text-md-end .btn { width: 100%; } .page-header { padding: 1.75rem 0; } .page-header h1 { font-size: 1.5rem; } .voucher-detail-title { font-size: 1.5rem; } .voucher-detail-pricing { gap: 1.25rem; } .voucher-detail-img { height: 240px; } .provider-detail-overlay { padding: 2rem 0; } .provider-detail-name { font-size: 1.3rem; } .provider-logo-lg { width: 56px; height: 56px; } .cart-item-card { flex-wrap: wrap; } .cart-item-img { width: 64px; height: 48px; } .cart-item-price { width: 100%; display: flex; align-items: center; justify-content: space-between; text-align: left; margin-top: .5rem; } .order-card-header { flex-direction: column; align-items: flex-start !important; } .order-card-body { flex-direction: column; align-items: flex-start !important; } .order-total { align-items: flex-start; margin-top: .5rem; } .confirmation-meta { gap: .75rem; } .confirmation-actions { flex-direction: column; } .confirmation-actions .btn { width: 100%; } .auth-card { padding: 1.75rem 1.25rem; } .demo-account { flex-wrap: wrap; } .wallet-balance-display .amount { font-size: 2.2rem; } .quick-amounts { justify-content: space-between; } .quick-btn { min-width: 0; } .vms-footer { padding: 3rem 0 1.5rem; margin-top: 3rem; } } @media (max-width: 575.98px) { .container { padding-left: 1rem; padding-right: 1rem; } .voucher-actions { flex-direction: column; } .voucher-pricing { flex-wrap: wrap; gap: .35rem; } .auth-card { border-radius: var(--radius-lg); } .stat-card { padding: 1.1rem; } } /* Larger, easier-to-tap controls on touch devices */ @media (hover: none) and (pointer: coarse) { .btn { min-height: 40px; } .lang-toggle-btn, .theme-toggle-btn { min-height: 38px; min-width: 38px; } }