/* ============================================================ AUCTION HUB GROUP — style.css Single unified stylesheet — all pages Brand: #005BA1 primary blue · #00AEEF cyan accent ============================================================ */ /* ── 1. RESET & BASE ──────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; font-size: 16px; -webkit-text-size-adjust: 100%; overflow-x: hidden; } body { font-family: 'Barlow', 'Segoe UI', sans-serif; background: #f4f8ff; color: var(--text-body); line-height: 1.6; min-height: 100vh; display: flex; flex-direction: column; overflow-x: hidden; max-width: 100vw; } *, *::before, *::after { box-sizing: border-box; } img { max-width: 100%; height: auto; display: block; } a { color: var(--blue-primary); text-decoration: none; transition: var(--transition); } a:hover { color: var(--cyan-accent); } ul, ol { list-style: none; } button { cursor: pointer; border: none; background: none; font-family: inherit; } input, select, textarea, button { font-family: inherit; font-size: inherit; } /* ── 2. CSS VARIABLES ────────────────────────────────────── */ :root { /* ── AUCTION HUB GROUP brand palette ── */ --auction-dark: #001F5C; --auction-navy: #002B7F; --auction-blue: #005DDB; --auction-light: #1E90FF; --auction-highlight: #4DA3FF; --auction-white: #FFFFFF; /* Brand colours — mapped to new palette */ --blue-primary: #005DDB; --blue-dark: #002B7F; --blue-deeper: #001F5C; --blue-light: rgba(0,93,219,0.14); --blue-mid: rgba(30,144,255,0.25); --cyan-accent: #1E90FF; --cyan-dark: #005DDB; --cyan-light: rgba(30,144,255,0.08); /* Neutrals — light theme */ --white: #ffffff; --off-white: #f8fafc; --gray-100: #f1f5f9; --gray-200: #e2eaf4; --gray-300: #c8d8ea; --gray-400: #94a3b8; --text-dark: #001F5C; --text-body: #2d4a6a; --text-muted: #6a7f96; --border-color: #dce6f0; /* Semantic colours */ --success: #22c55e; --success-light: rgba(34,197,94,0.15); --warning: #f59e0b; --warning-light: rgba(245,158,11,0.15); --danger: #ef4444; --danger-light: rgba(239,68,68,0.15); --info: #38bdf8; --info-light: rgba(56,189,248,0.12); --gold: #fbbf24; --gold-light: rgba(251,191,36,0.15); /* Shadows */ --shadow-xs: 0 1px 3px rgba(0,31,92,0.07); --shadow-sm: 0 2px 10px rgba(0,31,92,0.10); --shadow-md: 0 4px 24px rgba(0,93,219,0.14); --shadow-lg: 0 8px 40px rgba(0,93,219,0.18); --shadow-xl: 0 16px 64px rgba(0,31,92,0.16); /* Border radius */ --radius-xs: 4px; --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px; --radius-xl: 24px; --radius-full: 9999px; /* Transitions */ --transition: all .22s ease; --transition-slow: all .4s ease; /* Layout */ --nav-height: 84px; --sidebar-width: 260px; --container-max: 1280px; } /* ── 3. TYPOGRAPHY ───────────────────────────────────────── */ /* Import at top of : Barlow 400/500/600/700 + Barlow Condensed 700 */ h1, h2, h3, h4, h5, h6 { font-family: 'Barlow Condensed', 'Barlow', sans-serif; font-weight: 700; line-height: 1.15; color: var(--text-dark); letter-spacing: 0.01em; } h1 { font-size: clamp(2rem, 5vw, 3.5rem); } h2 { font-size: clamp(1.5rem, 3.5vw, 2.4rem); } h3 { font-size: clamp(1.2rem, 2.5vw, 1.8rem); } h4 { font-size: 1.2rem; } h5 { font-size: 1rem; font-weight: 600; } h6 { font-size: .875rem; font-weight: 600; } p { margin-bottom: .75rem; color: var(--text-body); } p:last-child { margin-bottom: 0; } strong, b { font-weight: 700; color: var(--text-dark); } small { font-size: .8rem; } .text-muted { color: var(--text-muted); } .text-white { color: var(--white); } .text-blue { color: var(--blue-primary); } .text-cyan { color: var(--cyan-accent); } .text-success { color: var(--success); } .text-danger { color: var(--danger); } .text-warning { color: var(--warning); } .text-gold { color: var(--gold); } .text-center { text-align: center; } .text-right { text-align: right; } .text-upper { text-transform: uppercase; letter-spacing: .08em; } .text-sm { font-size: .875rem; } .text-xs { font-size: .75rem; } .text-lg { font-size: 1.125rem; } .font-600 { font-weight: 600; } .font-700 { font-weight: 700; } /* ── 4. LAYOUT UTILITIES ─────────────────────────────────── */ .container { width: 100%; max-width: var(--container-max); margin: 0 auto; padding: 0 1.5rem; } .section { padding: 4rem 0; } .section-sm { padding: 2rem 0; } .section-lg { padding: 6rem 0; } .section-header { margin-bottom: 2.5rem; text-align: center; } .section-header h2 { color: var(--blue-primary); position: relative; display: inline-block; } .section-header h2::after { content: ''; display: block; width: 60px; height: 4px; background: var(--cyan-accent); margin: .5rem auto 0; border-radius: var(--radius-full); } .section-header p { color: var(--text-muted); font-size: 1.05rem; margin-top: .5rem; } /* Grid */ .grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; } .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; } .grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; } .grid-auto { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.5rem; } /* Flex */ .flex { display: flex; } .flex-center { display: flex; align-items: center; justify-content: center; } .flex-between { display: flex; align-items: center; justify-content: space-between; } .flex-start { display: flex; align-items: center; justify-content: flex-start; } .flex-end { display: flex; align-items: center; justify-content: flex-end; } .flex-col { display: flex; flex-direction: column; } .flex-wrap { flex-wrap: wrap; } .gap-1 { gap: .5rem; } .gap-2 { gap: 1rem; } .gap-3 { gap: 1.5rem; } /* Spacing */ .mt-1 { margin-top: .5rem; } .mb-1 { margin-bottom: .5rem; } .mt-2 { margin-top: 1rem; } .mb-2 { margin-bottom: 1rem; } .mt-3 { margin-top: 1.5rem; } .mb-3 { margin-bottom: 1.5rem; } .mt-4 { margin-top: 2rem; } .mb-4 { margin-bottom: 2rem; } .mt-5 { margin-top: 3rem; } .mb-5 { margin-bottom: 3rem; } .mx-auto { margin-left: auto; margin-right: auto; } .p-1 { padding: .5rem; } .p-2 { padding: 1rem; } .p-3 { padding: 1.5rem; } .p-4 { padding: 2rem; } /* Sizing */ .w-100 { width: 100%; } .w-50 { width: 50%; } .mw-400 { max-width: 400px; } .mw-600 { max-width: 600px; } .mw-800 { max-width: 800px; } /* Visibility */ .hidden { display: none !important; } .d-none { display: none; } .d-block { display: block; } .d-flex { display: flex; } .invisible { visibility: hidden; } /* Rounded */ .rounded { border-radius: var(--radius-md); } .rounded-sm { border-radius: var(--radius-sm); } .rounded-lg { border-radius: var(--radius-lg); } .rounded-full { border-radius: var(--radius-full); } /* ── 5. NAVBAR ───────────────────────────────────────────── */ .navbar { position: sticky; top: 0; z-index: 1100; background: linear-gradient(90deg, #000A20 0%, #001432 35%, #002060 65%, #001432 100%); height: var(--nav-height); display: flex; align-items: center; box-shadow: 0 2px 24px rgba(0,93,219,.35); border-bottom: 1px solid rgba(30,144,255,0.22); transition: box-shadow .3s; overflow: visible; } .navbar.scrolled { box-shadow: 0 4px 24px rgba(0,30,60,.30); } .navbar-inner { width: 100%; max-width: var(--container-max); margin: 0 auto; padding: 0 1.5rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; } /* Logo */ .navbar-logo { display: flex; align-items: center; gap: .75rem; flex-shrink: 0; text-decoration: none; } .navbar-logo img { height: 172px; width: auto; max-width: 520px; object-fit: contain; filter: brightness(1.05); } .navbar-logo-text { display: flex; flex-direction: column; line-height: 1.1; } .navbar-logo-text .brand-name { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 1.2rem; color: var(--white); letter-spacing: .04em; text-transform: uppercase; } .navbar-logo-text .brand-tagline { font-size: .65rem; color: var(--cyan-accent); letter-spacing: .06em; text-transform: uppercase; font-weight: 500; } /* Nav links */ .navbar-nav { display: flex; align-items: center; gap: .25rem; } .nav-link { color: rgba(255,255,255,.85); font-weight: 500; font-size: .78rem; padding: .45rem .65rem; border-radius: var(--radius-sm); letter-spacing: .02em; text-transform: uppercase; transition: var(--transition); position: relative; white-space: nowrap; } .nav-link:hover, .nav-link.active { color: var(--white); background: rgba(255,255,255,.12); } .nav-link.active::after { content: ''; position: absolute; bottom: -2px; left: 50%; transform: translateX(-50%); width: 20px; height: 2px; background: var(--cyan-accent); border-radius: var(--radius-full); } /* Nav right — auth buttons + status */ .navbar-right { display: flex; align-items: center; gap: .75rem; flex-shrink: 0; } .navbar-right .btn-nav-login { color: rgba(255,255,255,.85); font-weight: 500; font-size: .85rem; padding: .4rem .9rem; border-radius: var(--radius-sm); border: 1px solid rgba(255,255,255,.3); transition: var(--transition); text-transform: uppercase; letter-spacing: .04em; } .navbar-right .btn-nav-login:hover { background: rgba(255,255,255,.1); color: var(--white); border-color: rgba(255,255,255,.5); } .navbar-right .btn-nav-register { background: linear-gradient(135deg, #005DDB, #1E90FF); color: var(--white); font-weight: 600; font-size: .85rem; padding: .45rem 1.1rem; border-radius: var(--radius-sm); transition: var(--transition); text-transform: uppercase; letter-spacing: .04em; box-shadow: 0 2px 12px rgba(30,144,255,0.35); } .navbar-right .btn-nav-register:hover { background: linear-gradient(135deg, #004db8, #005DDB); transform: translateY(-1px); box-shadow: 0 4px 20px rgba(30,144,255,0.55); } /* Bidder status dot */ .bidder-status-dot { display: inline-flex; align-items: center; gap: .35rem; font-size: .75rem; font-weight: 600; color: var(--white); opacity: .85; } .status-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; } .status-dot.verified { background: #2ecc71; box-shadow: 0 0 6px rgba(46,204,113,.7); } .status-dot.pending { background: #f39c12; box-shadow: 0 0 6px rgba(243,156,18,.7); } .status-dot.suspended { background: #e74c3c; } .status-dot.registered{ background: rgba(255,255,255,.4); } /* Hamburger */ .navbar-hamburger { display: none; align-items: center; gap: 8px; cursor: pointer; padding: .5rem .75rem; border-radius: var(--radius-sm); transition: var(--transition); background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.25); margin-left: auto; } .navbar-hamburger:hover { background: rgba(255,255,255,.2); } .hamburger-lines { display: flex; flex-direction: column; gap: 5px; } .hamburger-label { font-size: .75rem; font-weight: 700; color: var(--white); letter-spacing: .08em; text-transform: uppercase; } .hamburger-line { width: 22px; height: 2px; background: var(--white); border-radius: var(--radius-full); transition: var(--transition); display: block; } .navbar-hamburger.open { background: rgba(255,255,255,.2); } .navbar-hamburger.open .hamburger-label { display: none; } .navbar-hamburger.open .hamburger-line:nth-child(1) { transform: translateY(7px) rotate(45deg); } .navbar-hamburger.open .hamburger-line:nth-child(2) { opacity: 0; } .navbar-hamburger.open .hamburger-line:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* Mobile menu */ .navbar-mobile { display: none; position: fixed; top: var(--nav-height); left: 0; right: 0; bottom: 0; background: #004080; /* slightly lighter than blue-dark for readability */ padding: 1rem 1rem 2rem; z-index: 1099; box-shadow: 0 8px 40px rgba(0,0,0,.5); flex-direction: column; gap: .15rem; border-top: 2px solid rgba(255,255,255,.2); overflow-y: auto; -webkit-overflow-scrolling: touch; } .navbar-mobile.open { display: flex; animation: mobileMenuIn .2s ease forwards; } @keyframes mobileMenuIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } } .navbar-mobile-divider { height: 1px; background: rgba(255,255,255,.15); margin: .6rem 0; } /* ── 6. ANNOUNCEMENT TICKER ──────────────────────────────── */ .ticker-bar { background: linear-gradient(90deg, #001F5C 0%, #005DDB 50%, #001F5C 100%); color: var(--white); font-size: .82rem; font-weight: 600; padding: .45rem 0; overflow: hidden; position: relative; z-index: 500; letter-spacing: .02em; border-bottom: 1px solid rgba(30,144,255,0.3); } .ticker-label { background: rgba(0,5,30,0.75); color: #1E90FF; font-weight: 700; font-size: .75rem; text-transform: uppercase; letter-spacing: .1em; padding: .25rem .75rem; position: absolute; left: 0; top: 0; height: 100%; display: flex; align-items: center; z-index: 2; border-right: 1px solid rgba(30,144,255,0.3); } .ticker-scroll { display: flex; white-space: nowrap; animation: tickerScroll 40s linear infinite; padding-left: 120px; } .ticker-scroll:hover { animation-play-state: paused; } .ticker-item { padding: 0 3rem; display: inline-flex; align-items: center; gap: .5rem; } .ticker-item::before { content: '●'; font-size: .4rem; opacity: .6; } @keyframes tickerScroll { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } /* ── 7. HERO BANNER ──────────────────────────────────────── */ .hero { position: relative; z-index: 0; min-height: 520px; display: flex; align-items: center; overflow: hidden; background: linear-gradient(135deg, #000E2E 0%, #001F5C 40%, #005DDB 80%, #1E90FF 100%); } .hero-bg { position: absolute; inset: 0; background-image: url('assets/hero-bg.jpg'); background-size: cover; background-position: center; opacity: .18; transition: opacity .5s; } .hero-overlay { position: absolute; inset: 0; background: linear-gradient( 120deg, rgba(0,30,70,.92) 0%, rgba(0,91,161,.78) 60%, rgba(0,174,239,.30) 100% ); } .hero-content { position: relative; z-index: 1; padding: 4rem 0; } .hero-content .hero-label { display: inline-block; background: var(--cyan-accent); color: var(--white); font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; padding: .3rem .85rem; border-radius: var(--radius-full); margin-bottom: 1.25rem; } .hero-content h1 { color: var(--white); max-width: 680px; margin-bottom: .75rem; text-shadow: 0 2px 12px rgba(0,0,0,.3); } .hero-content h1 span { color: var(--cyan-accent); } .hero-content p { color: rgba(255,255,255,.82); font-size: 1.1rem; max-width: 540px; margin-bottom: 2rem; } .hero-actions { display: flex; gap: 1rem; flex-wrap: wrap; } .hero-stats { display: flex; gap: 2.5rem; margin-top: 3rem; padding-top: 2rem; border-top: 1px solid rgba(255,255,255,.15); flex-wrap: wrap; } .hero-stat-item { text-align: left; } .hero-stat-value { font-family: 'Barlow Condensed', sans-serif; font-size: 2rem; font-weight: 700; color: var(--cyan-accent); line-height: 1; } .hero-stat-label { font-size: .78rem; color: rgba(255,255,255,.65); text-transform: uppercase; letter-spacing: .06em; margin-top: .2rem; } /* ── 8. BUTTONS ──────────────────────────────────────────── */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; font-family: 'Barlow', sans-serif; font-weight: 600; font-size: .9rem; padding: .6rem 1.4rem; border-radius: var(--radius-sm); border: 2px solid transparent; transition: var(--transition); cursor: pointer; text-decoration: none; line-height: 1.3; letter-spacing: .02em; white-space: nowrap; } .btn:disabled, .btn.disabled { opacity: .55; cursor: not-allowed; pointer-events: none; } .btn i, .btn svg { font-size: .95em; flex-shrink: 0; } /* Sizes */ .btn-sm { font-size: .8rem; padding: .4rem 1rem; } .btn-lg { font-size: 1rem; padding: .8rem 1.8rem; } .btn-xl { font-size: 1.1rem; padding: 1rem 2.2rem; border-radius: var(--radius-md); } .btn-block { width: 100%; } /* Variants */ .btn-primary { background: var(--blue-primary); color: var(--white); border-color: var(--blue-primary); } .btn-primary:hover { background: var(--blue-dark); border-color: var(--blue-dark); transform: translateY(-1px); box-shadow: 0 4px 16px rgba(0,91,161,.35); color: var(--white); } .btn-cyan { background: var(--cyan-accent); color: var(--white); border-color: var(--cyan-accent); } .btn-cyan:hover { background: var(--cyan-dark); border-color: var(--cyan-dark); transform: translateY(-1px); box-shadow: 0 4px 16px rgba(0,174,239,.4); color: var(--white); } .btn-outline { background: transparent; color: var(--blue-primary); border-color: var(--blue-primary); } .btn-outline:hover { background: var(--blue-primary); color: var(--white); } .btn-outline-white { background: transparent; color: var(--white); border-color: rgba(255,255,255,.6); } .btn-outline-white:hover { background: rgba(255,255,255,.12); border-color: var(--white); color: var(--white); } .btn-outline-cyan { background: transparent; color: var(--cyan-accent); border-color: var(--cyan-accent); } .btn-outline-cyan:hover { background: var(--cyan-accent); color: var(--white); } .btn-success { background: var(--success); color: var(--white); border-color: var(--success); } .btn-success:hover { background: #158a40; border-color: #158a40; transform: translateY(-1px); box-shadow: 0 4px 14px rgba(26,158,78,.35); color: var(--white); } .btn-danger { background: var(--danger); color: var(--white); border-color: var(--danger); } .btn-danger:hover { background: #a93226; border-color: #a93226; transform: translateY(-1px); box-shadow: 0 4px 14px rgba(192,57,43,.35); color: var(--white); } .btn-warning { background: var(--warning); color: var(--white); border-color: var(--warning); } .btn-warning:hover { background: #c46c00; transform: translateY(-1px); color: var(--white); } .btn-ghost { background: transparent; color: var(--text-muted); border-color: var(--border-color); } .btn-ghost:hover { background: var(--gray-100); color: var(--text-dark); border-color: var(--gray-300); } .btn-white { background: var(--white); color: var(--blue-primary); border-color: var(--white); } .btn-white:hover { background: var(--blue-light); color: var(--blue-dark); border-color: var(--blue-mid); } /* Loading state */ .btn.loading { pointer-events: none; opacity: .75; } .btn.loading::before { content: ''; display: inline-block; width: 14px; height: 14px; border: 2px solid currentColor; border-top-color: transparent; border-radius: 50%; animation: spin .6s linear infinite; margin-right: .4rem; } /* ── 9. CARDS ────────────────────────────────────────────── */ .card { background: var(--white); border-radius: var(--radius-md); border: 1px solid var(--border-color); box-shadow: var(--shadow-sm); overflow: hidden; transition: var(--transition); } .card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); } .card-body { padding: 1.5rem; } .card-header { padding: 1rem 1.5rem; background: var(--gray-100); border-bottom: 1px solid var(--border-color); display: flex; align-items: center; justify-content: space-between; gap: 1rem; } .card-header h3, .card-header h4 { font-size: 1rem; color: var(--blue-primary); margin: 0; } .card-footer { padding: 1rem 1.5rem; background: var(--gray-100); border-top: 1px solid var(--border-color); } /* Auction card */ .auction-card { background: var(--white); border-radius: var(--radius-md); border: 1px solid var(--border-color); box-shadow: var(--shadow-sm); overflow: hidden; transition: var(--transition); display: flex; flex-direction: column; position: relative; } .auction-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-4px); border-color: var(--blue-mid); } .auction-card-image { position: relative; height: 200px; overflow: hidden; background: var(--gray-100); flex-shrink: 0; } .auction-card-image img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; } .auction-card:hover .auction-card-image img { transform: scale(1.05); } .auction-card-image .card-status-badge { position: absolute; top: .75rem; left: .75rem; z-index: 1; } .auction-card-image .card-bid-count { position: absolute; bottom: .75rem; right: .75rem; background: rgba(0,0,0,.65); color: var(--white); font-size: .72rem; font-weight: 600; padding: .2rem .5rem; border-radius: var(--radius-full); backdrop-filter: blur(4px); } .auction-card-body { padding: 1.1rem; flex: 1; display: flex; flex-direction: column; gap: .5rem; } .auction-card-title { font-family: 'Barlow Condensed', sans-serif; font-size: 1.05rem; font-weight: 700; color: var(--text-dark); line-height: 1.2; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .auction-card-specs { display: flex; gap: .5rem; flex-wrap: wrap; font-size: .72rem; color: var(--text-muted); } .auction-card-specs span { display: flex; align-items: center; gap: .25rem; } .auction-card-specs span i { font-size: .7rem; } .auction-card-pricing { display: flex; align-items: flex-end; justify-content: space-between; padding-top: .5rem; border-top: 1px solid var(--border-color); margin-top: auto; } .auction-card-current-bid { display: flex; flex-direction: column; } .auction-card-current-bid .bid-label { font-size: .68rem; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); font-weight: 600; } .auction-card-current-bid .bid-amount { font-family: 'Barlow Condensed', sans-serif; font-size: 1.4rem; font-weight: 700; color: var(--blue-primary); line-height: 1; } .auction-card-countdown { text-align: right; } .auction-card-countdown .time-label { font-size: .68rem; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); font-weight: 600; } .auction-card-countdown .time-value { font-family: 'Barlow Condensed', sans-serif; font-size: .95rem; font-weight: 700; color: var(--danger); } .auction-card-countdown .time-value.upcoming { color: var(--success); } .auction-card-footer { padding: .75rem 1.1rem; background: var(--gray-100); border-top: 1px solid var(--border-color); display: flex; gap: .5rem; } .auction-card-footer .btn { flex: 1; font-size: .82rem; padding: .5rem .75rem; } .auction-card-footer .btn.btn-primary { background: var(--blue-primary); color: var(--white); border-color: var(--blue-primary); font-weight: 600; } .auction-card-footer .btn.btn-primary:hover { background: var(--blue-dark); color: var(--white); } /* Stat card */ .stat-card { background: var(--white); border-radius: var(--radius-md); border: 1px solid var(--border-color); padding: 1.5rem; display: flex; align-items: center; gap: 1.25rem; box-shadow: var(--shadow-sm); transition: var(--transition); } .stat-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); } .stat-card-icon { width: 52px; height: 52px; border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; font-size: 1.4rem; flex-shrink: 0; } .stat-card-icon.blue { background: var(--blue-light); color: var(--blue-primary); } .stat-card-icon.cyan { background: var(--cyan-light); color: var(--cyan-dark); } .stat-card-icon.green { background: var(--success-light); color: var(--success); } .stat-card-icon.gold { background: var(--gold-light); color: var(--gold); } .stat-card-icon.red { background: var(--danger-light); color: var(--danger); } .stat-card-icon.warn { background: var(--warning-light); color: var(--warning); } .stat-card-info {} .stat-card-value { font-family: 'Barlow Condensed', sans-serif; font-size: 1.8rem; font-weight: 700; color: var(--text-dark); line-height: 1; } .stat-card-label { font-size: .78rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: .06em; font-weight: 600; margin-top: .2rem; } /* Info card */ .info-card { background: var(--white); border-radius: var(--radius-md); border: 1px solid var(--border-color); padding: 2rem 1.5rem; text-align: center; box-shadow: var(--shadow-sm); transition: var(--transition); } .info-card:hover { box-shadow: var(--shadow-md); border-color: var(--blue-mid); transform: translateY(-3px); } .info-card-icon { width: 64px; height: 64px; background: var(--blue-light); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.6rem; color: var(--blue-primary); margin: 0 auto 1.25rem; } .info-card h3 { font-size: 1.1rem; color: var(--blue-primary); margin-bottom: .5rem; } .info-card p { font-size: .9rem; color: var(--text-muted); } /* ── 10. BADGES & STATUS PILLS ───────────────────────────── */ .badge { display: inline-flex; align-items: center; gap: .3rem; font-size: .72rem; font-weight: 700; padding: .28rem .65rem; border-radius: var(--radius-full); text-transform: uppercase; letter-spacing: .06em; line-height: 1; white-space: nowrap; } .badge i { font-size: .65rem; } .badge-active { background: var(--success-light); color: var(--success); } .badge-closed { background: var(--gray-200); color: var(--text-muted); } .badge-upcoming { background: var(--info-light); color: var(--info); } .badge-cancelled { background: var(--danger-light); color: var(--danger); } .badge-live { background: var(--danger); color: var(--white); animation: pulseBadge 1.5s ease-in-out infinite; } .badge-winning { background: var(--success-light); color: var(--success); } .badge-outbid { background: var(--danger-light); color: var(--danger); } .badge-pending { background: var(--warning-light); color: var(--warning); } .badge-approved { background: var(--success-light); color: var(--success); } .badge-rejected { background: var(--danger-light); color: var(--danger); } .badge-verified { background: var(--blue-light); color: var(--blue-primary); } .badge-suspended { background: var(--danger-light); color: var(--danger); } .badge-registered { background: var(--gray-200); color: var(--text-muted); } .badge-admin { background: var(--blue-primary); color: var(--white); } .badge-cyan { background: var(--cyan-light); color: var(--cyan-dark); } .badge-gold { background: var(--gold-light); color: var(--gold); } @keyframes pulseBadge { 0%, 100% { box-shadow: 0 0 0 0 rgba(192,57,43,.5); } 50% { box-shadow: 0 0 0 5px rgba(192,57,43,0); } } /* ── 11. FORMS ───────────────────────────────────────────── */ .form-group { margin-bottom: 1.25rem; } .form-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; } .form-row.cols-3 { grid-template-columns: repeat(3, 1fr); } label, .form-label { display: block; font-size: .83rem; font-weight: 600; color: var(--text-dark); margin-bottom: .4rem; letter-spacing: .01em; } label .required { color: var(--danger); margin-left: .2rem; } .form-control { width: 100%; padding: .6rem .9rem; font-size: .9rem; color: var(--text-dark); background: var(--white); border: 1.5px solid var(--border-color); border-radius: var(--radius-sm); transition: var(--transition); appearance: none; line-height: 1.5; } .form-control:focus { outline: none; border-color: var(--blue-primary); box-shadow: 0 0 0 3px rgba(0,91,161,.12); } .form-control::placeholder { color: var(--gray-400); } .form-control:disabled { background: var(--gray-100); color: var(--text-muted); cursor: not-allowed; } select.form-control { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236c8a9f' d='M6 8L1 3h10z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right .75rem center; padding-right: 2.5rem; cursor: pointer; } textarea.form-control { resize: vertical; min-height: 120px; } /* Validation states */ .form-control.is-valid { border-color: var(--success); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%231a9e4e' viewBox='0 0 16 16'%3E%3Cpath d='M10.97 4.97a.75.75 0 011.07 1.05l-3.99 4.99a.75.75 0 01-1.08.02L4.324 8.384a.75.75 0 111.06-1.06l2.094 2.093 3.473-4.425a.267.267 0 01.02-.022z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right .75rem center; padding-right: 2.5rem; } .form-control.is-invalid { border-color: var(--danger); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23c0392b' viewBox='0 0 16 16'%3E%3Cpath d='M16 8A8 8 0 110 8a8 8 0 0116 0zM8 4a.905.905 0 00-.9.995l.35 3.507a.552.552 0 001.1 0l.35-3.507A.905.905 0 008 4zm.002 6a1 1 0 100 2 1 1 0 000-2z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right .75rem center; padding-right: 2.5rem; } .form-error { font-size: .78rem; color: var(--danger); margin-top: .3rem; display: flex; align-items: center; gap: .25rem; } .form-hint { font-size: .78rem; color: var(--text-muted); margin-top: .3rem; } /* Search/filter bar */ .filter-bar { background: var(--white); border: 1px solid var(--border-color); border-radius: var(--radius-md); padding: 1.25rem; margin-bottom: 2rem; box-shadow: var(--shadow-sm); display: flex; gap: .75rem; flex-wrap: wrap; align-items: flex-end; } .filter-bar .form-group { margin-bottom: 0; flex: 1; min-width: 140px; } .filter-bar label { font-size: .72rem; margin-bottom: .3rem; } .filter-bar .form-control { padding: .5rem .8rem; font-size: .85rem; } /* File upload zone */ .upload-zone { border: 2px dashed var(--blue-mid); border-radius: var(--radius-md); padding: 2.5rem 1.5rem; text-align: center; cursor: pointer; transition: var(--transition); background: var(--blue-light); position: relative; } .upload-zone:hover, .upload-zone.drag-over { border-color: var(--blue-primary); background: var(--blue-mid); } .upload-zone input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; } .upload-zone-icon { font-size: 2.5rem; color: var(--blue-primary); margin-bottom: .75rem; opacity: .7; } .upload-zone-text { font-size: .9rem; color: var(--text-muted); } .upload-zone-text strong { color: var(--blue-primary); } .upload-zone-hint { font-size: .75rem; color: var(--text-muted); margin-top: .4rem; } .upload-preview { display: flex; gap: .75rem; flex-wrap: wrap; margin-top: 1rem; } .upload-preview-item { position: relative; width: 80px; height: 80px; border-radius: var(--radius-sm); overflow: hidden; border: 2px solid var(--border-color); } .upload-preview-item img { width: 100%; height: 100%; object-fit: cover; } .upload-preview-item .remove-preview { position: absolute; top: 2px; right: 2px; width: 18px; height: 18px; background: var(--danger); color: var(--white); border-radius: 50%; font-size: .6rem; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: var(--transition); } /* ── 12. TABLES ──────────────────────────────────────────── */ .table-responsive { overflow-x: auto; border-radius: var(--radius-md); border: 1px solid var(--border-color); box-shadow: var(--shadow-sm); } .table { width: 100%; border-collapse: collapse; font-size: .88rem; background: var(--white); } .table thead tr { background: var(--blue-primary); } .table thead th { padding: .85rem 1rem; text-align: left; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: rgba(255,255,255,.9); white-space: nowrap; border-bottom: none; } .table tbody tr { border-bottom: 1px solid var(--border-color); transition: background .15s; } .table tbody tr:last-child { border-bottom: none; } .table tbody tr:hover { background: var(--blue-light); } .table td { padding: .8rem 1rem; color: var(--text-body); vertical-align: middle; } .table-actions { display: flex; gap: .35rem; align-items: center; flex-wrap: wrap; } .table-actions .btn { padding: .3rem .55rem; font-size: .75rem; } .table .col-id { width: 60px; } .table .col-actions{ min-width: 220px; } .table .col-status { width: 120px; } .table .col-price { width: 120px; } /* ── 13. TABS ────────────────────────────────────────────── */ .tab-nav { display: flex; gap: 0; border-bottom: 2px solid var(--border-color); margin-bottom: 1.5rem; overflow-x: auto; scrollbar-width: none; } .tab-nav::-webkit-scrollbar { display: none; } .tab-btn { padding: .75rem 1.25rem; font-size: .85rem; font-weight: 600; color: var(--text-muted); border: none; background: none; border-bottom: 2px solid transparent; margin-bottom: -2px; transition: var(--transition); cursor: pointer; white-space: nowrap; display: flex; align-items: center; gap: .4rem; letter-spacing: .02em; } .tab-btn:hover { color: var(--blue-primary); } .tab-btn.active { color: var(--blue-primary); border-bottom-color: var(--blue-primary); background: none; } .tab-btn .tab-count { background: var(--blue-light); color: var(--blue-primary); font-size: .68rem; padding: .1rem .4rem; border-radius: var(--radius-full); font-weight: 700; } .tab-btn.active .tab-count { background: var(--blue-primary); color: var(--white); } .tab-content { display: none; } .tab-content.active { display: block; } /* Pill tabs (alternate style) */ .tab-nav-pills { display: flex; gap: .4rem; margin-bottom: 1.5rem; flex-wrap: wrap; } .tab-nav-pills .tab-btn { border-radius: var(--radius-full); border: 1.5px solid var(--border-color); padding: .45rem 1rem; margin-bottom: 0; background: var(--white); } .tab-nav-pills .tab-btn:hover { border-color: var(--blue-primary); background: var(--blue-light); } .tab-nav-pills .tab-btn.active { background: var(--blue-primary); color: var(--white); border-color: var(--blue-primary); box-shadow: 0 2px 8px rgba(0,91,161,.25); } /* ── 14. MODALS ──────────────────────────────────────────── */ .modal-overlay { position: fixed; inset: 0; background: rgba(0,15,40,.6); z-index: 2000; display: flex; align-items: center; justify-content: center; padding: 1.5rem; opacity: 0; pointer-events: none; transition: opacity .25s ease; backdrop-filter: blur(3px); } .modal-overlay.open { opacity: 1; pointer-events: all; } .modal-box { background: var(--white); border-radius: var(--radius-lg); box-shadow: var(--shadow-xl); width: 100%; max-width: 540px; max-height: 90vh; overflow-y: auto; transform: translateY(20px) scale(.97); transition: transform .25s ease; position: relative; } .modal-overlay.open .modal-box { transform: translateY(0) scale(1); } .modal-box.modal-lg { max-width: 720px; } .modal-box.modal-xl { max-width: 900px; } .modal-header { padding: 1.25rem 1.5rem; border-bottom: 1px solid var(--border-color); display: flex; align-items: center; justify-content: space-between; background: var(--blue-primary); border-radius: var(--radius-lg) var(--radius-lg) 0 0; } .modal-header h3, .modal-header h4 { color: var(--white); font-size: 1.1rem; margin: 0; } .modal-close { width: 32px; height: 32px; background: rgba(255,255,255,.15); border: none; border-radius: 50%; color: var(--white); font-size: 1rem; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: var(--transition); flex-shrink: 0; } .modal-close:hover { background: rgba(255,255,255,.25); } .modal-body { padding: 1.5rem; } .modal-footer { padding: 1rem 1.5rem; border-top: 1px solid var(--border-color); background: var(--gray-100); display: flex; gap: .75rem; justify-content: flex-end; border-radius: 0 0 var(--radius-lg) var(--radius-lg); } /* ── 15. BID SECTION ─────────────────────────────────────── */ .bid-panel { background: var(--white); border-radius: var(--radius-md); border: 2px solid var(--border-color); overflow: hidden; box-shadow: var(--shadow-md); position: sticky; top: calc(var(--nav-height) + 1rem); } .bid-panel-header { background: var(--blue-primary); padding: 1rem 1.25rem; text-align: center; } .bid-panel-header h3 { color: var(--white); font-size: .85rem; text-transform: uppercase; letter-spacing: .1em; font-weight: 700; margin: 0; } .bid-current-price { padding: 1.25rem; text-align: center; border-bottom: 1px solid var(--border-color); background: var(--blue-light); } .bid-current-price .price-label { font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--text-muted); font-weight: 600; } .bid-current-price .price-amount { font-family: 'Barlow Condensed', sans-serif; font-size: 2.4rem; font-weight: 700; color: var(--blue-primary); line-height: 1.1; letter-spacing: -.01em; } .bid-current-price .price-reserve { font-size: .78rem; color: var(--text-muted); margin-top: .25rem; } .bid-current-price .price-reserve.met { color: var(--success); font-weight: 600; } .bid-timer { padding: .75rem 1.25rem; text-align: center; background: var(--white); border-bottom: 1px solid var(--border-color); } .bid-timer .timer-label { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); font-weight: 600; } .bid-timer .timer-value { font-family: 'Barlow Condensed', sans-serif; font-size: 1.8rem; font-weight: 700; color: var(--danger); letter-spacing: .05em; } .bid-timer .timer-value.upcoming { color: var(--success); font-size: 1.2rem; } .bid-timer .timer-value.closed { color: var(--text-muted); font-size: 1.3rem; } .bid-input-section { padding: 1.25rem; } .bid-input-wrapper { position: relative; margin-bottom: .75rem; } .bid-input-wrapper .currency-prefix { position: absolute; left: .9rem; top: 50%; transform: translateY(-50%); font-weight: 700; color: var(--blue-primary); font-size: 1rem; pointer-events: none; } .bid-input-wrapper input { padding-left: 2rem; font-size: 1.1rem; font-weight: 700; color: var(--blue-primary); } .bid-increment-hint { font-size: .78rem; color: var(--text-muted); text-align: center; margin-bottom: .75rem; } .bid-locked { padding: 1.25rem; text-align: center; background: var(--warning-light); border-top: 1px solid var(--border-color); } .bid-locked-icon { font-size: 2rem; color: var(--warning); margin-bottom: .75rem; } .bid-locked p { font-size: .88rem; color: var(--text-muted); margin-bottom: 1rem; } /* Live bid feed */ .bid-feed { border-top: 1px solid var(--border-color); } .bid-feed-header { padding: .75rem 1.25rem; display: flex; align-items: center; justify-content: space-between; background: var(--gray-100); } .bid-feed-header h4 { font-size: .82rem; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); font-weight: 700; } .live-dot { width: 8px; height: 8px; background: var(--danger); border-radius: 50%; animation: pulseDot 1.4s ease infinite; flex-shrink: 0; } @keyframes pulseDot { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .5; transform: scale(.8); } } .bid-feed-list { max-height: 280px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--border-color) transparent; } .bid-feed-item { display: flex; align-items: center; justify-content: space-between; padding: .65rem 1.25rem; border-bottom: 1px solid var(--border-color); font-size: .82rem; animation: feedSlideIn .3s ease; transition: background .2s; } .bid-feed-item:last-child { border-bottom: none; } .bid-feed-item:hover { background: var(--blue-light); } .bid-feed-item.winning { background: var(--success-light); } .bid-feed-bidder { display: flex; align-items: center; gap: .5rem; font-weight: 600; color: var(--text-dark); } .bid-feed-bidder .bidder-avatar { width: 28px; height: 28px; border-radius: 50%; background: var(--blue-primary); color: var(--white); font-size: .7rem; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .bid-feed-amount { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 1rem; color: var(--blue-primary); } .bid-feed-time { font-size: .7rem; color: var(--text-muted); } @keyframes feedSlideIn { from { transform: translateX(-10px); opacity: 0; } to { transform: translateX(0); opacity: 1; } } /* ── 16. AUCTION GALLERY ─────────────────────────────────── */ .auction-gallery { display: flex; flex-direction: column; gap: .75rem; } .gallery-main { position: relative; border-radius: var(--radius-md); overflow: hidden; background: var(--gray-200); aspect-ratio: 16/10; cursor: zoom-in; } .gallery-main img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; } .gallery-main:hover img { transform: scale(1.02); } .gallery-main .gallery-overlay { position: absolute; inset: 0; background: rgba(0,0,0,0); display: flex; align-items: center; justify-content: center; transition: var(--transition); } .gallery-main:hover .gallery-overlay { background: rgba(0,0,0,.15); } .gallery-main .gallery-zoom-icon { color: var(--white); font-size: 2rem; opacity: 0; transition: var(--transition); } .gallery-main:hover .gallery-zoom-icon { opacity: 1; } .gallery-thumbs { display: flex; gap: .5rem; overflow-x: auto; scrollbar-width: thin; scrollbar-color: var(--border-color) transparent; padding: .5rem 0 .25rem; margin-top: .25rem; } .gallery-thumb { width: 80px; height: 60px; border-radius: var(--radius-sm); overflow: hidden; border: 2px solid var(--border-color); cursor: pointer; transition: var(--transition); flex-shrink: 0; background: var(--gray-100); padding: 0; } .gallery-thumb img { width: 100%; height: 100%; object-fit: cover; } .gallery-thumb:hover, .gallery-thumb.active { border-color: var(--blue-primary); box-shadow: 0 0 0 2px var(--blue-primary); } /* Lightbox */ .lightbox-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.92); z-index: 3000; display: flex; align-items: center; justify-content: center; } .lightbox-overlay[hidden] { display: none; } .lightbox-img { max-width: 90vw; max-height: 85vh; object-fit: contain; border-radius: var(--radius-md); box-shadow: var(--shadow-xl); } .lightbox-close { position: absolute; top: 1.5rem; right: 1.5rem; width: 40px; height: 40px; background: rgba(255,255,255,.15); border: none; border-radius: 50%; color: var(--white); font-size: 1.2rem; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: var(--transition); } .lightbox-close:hover { background: rgba(255,255,255,.25); } .lightbox-prev, .lightbox-next { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; background: rgba(255,255,255,.15); border: none; border-radius: 50%; color: var(--white); font-size: 1.2rem; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: var(--transition); } .lightbox-prev { left: 1.5rem; } .lightbox-next { right: 1.5rem; } .lightbox-prev:hover, .lightbox-next:hover { background: rgba(255,255,255,.25); } .lightbox-counter { position: absolute; bottom: 1.5rem; left: 50%; transform: translateX(-50%); color: rgba(255,255,255,.7); font-size: .85rem; background: rgba(0,0,0,.4); padding: .3rem .8rem; border-radius: var(--radius-full); } /* ── 17. DASHBOARD LAYOUT ────────────────────────────────── */ .dashboard-wrap { display: flex; min-height: calc(100vh - var(--nav-height)); background: var(--off-white); } .dashboard-sidebar { width: var(--sidebar-width); background: var(--blue-primary); flex-shrink: 0; display: flex; flex-direction: column; position: sticky; top: var(--nav-height); height: calc(100vh - var(--nav-height)); overflow-y: auto; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.15) transparent; } .sidebar-user-info { padding: 1.5rem; border-bottom: 1px solid rgba(255,255,255,.12); text-align: center; } .sidebar-avatar { width: 56px; height: 56px; border-radius: 50%; background: rgba(255,255,255,.15); color: var(--white); font-size: 1.4rem; font-weight: 700; display: flex; align-items: center; justify-content: center; margin: 0 auto .75rem; font-family: 'Barlow Condensed', sans-serif; border: 2px solid rgba(255,255,255,.2); } .sidebar-user-name { color: var(--white); font-size: .95rem; font-weight: 600; margin-bottom: .2rem; } .sidebar-user-email { color: rgba(255,255,255,.55); font-size: .75rem; } .sidebar-nav { padding: 1rem 0; flex: 1; } .sidebar-nav-item { display: flex; align-items: center; gap: .75rem; padding: .75rem 1.5rem; color: rgba(255,255,255,.75); font-size: .875rem; font-weight: 500; transition: var(--transition); cursor: pointer; border-left: 3px solid transparent; text-decoration: none; } .sidebar-nav-item i { width: 18px; text-align: center; font-size: .95rem; flex-shrink: 0; } .sidebar-nav-item:hover, .sidebar-nav-item.active { color: var(--white); background: rgba(255,255,255,.08); border-left-color: var(--cyan-accent); } .sidebar-nav-item.active { background: rgba(255,255,255,.12); } .sidebar-section-label { padding: .5rem 1.5rem .25rem; font-size: .65rem; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; color: rgba(255,255,255,.35); } .dashboard-main { flex: 1; padding: 2rem; overflow-x: hidden; min-width: 0; } .dashboard-header { background: linear-gradient(120deg, var(--blue-primary) 0%, var(--blue-dark) 100%); border-radius: var(--radius-md); padding: 1.75rem 2rem; margin-bottom: 2rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; box-shadow: var(--shadow-md); overflow: hidden; position: relative; } .dashboard-header > * { position: relative; z-index: 1; } .dashboard-header-text h2 { color: var(--white); font-size: 1.5rem; margin-bottom: .25rem; } .dashboard-header-text p { color: rgba(255,255,255,.7); font-size: .88rem; margin: 0; } /* ── 18. POP UPLOAD SECTION ──────────────────────────────── */ .bank-details-box { background: var(--gold-light); border: 2px solid var(--gold); border-radius: var(--radius-md); padding: 1.5rem; margin-bottom: 1.5rem; } .bank-details-box h4 { color: var(--gold); font-size: .85rem; text-transform: uppercase; letter-spacing: .08em; margin-bottom: 1rem; display: flex; align-items: center; gap: .5rem; } .bank-detail-row { display: flex; justify-content: space-between; align-items: center; padding: .4rem 0; border-bottom: 1px solid rgba(201,150,10,.15); font-size: .88rem; } .bank-detail-row:last-child { border-bottom: none; } .bank-detail-label { color: var(--text-muted); font-weight: 500; font-size: .82rem; } .bank-detail-value { font-weight: 700; color: var(--text-dark); display: flex; align-items: center; gap: .4rem; } .bank-detail-value .copy-btn { background: none; border: none; color: var(--gold); cursor: pointer; font-size: .75rem; padding: .1rem .3rem; border-radius: var(--radius-xs); transition: var(--transition); } .bank-detail-value .copy-btn:hover { background: rgba(201,150,10,.15); } .eft-reference-box { background: var(--blue-light); border: 2px solid var(--blue-primary); border-radius: var(--radius-sm); padding: .75rem 1rem; margin: 1rem 0; display: flex; align-items: center; justify-content: space-between; gap: .75rem; } .eft-reference-label { font-size: .75rem; color: var(--text-muted); font-weight: 600; text-transform: uppercase; letter-spacing: .06em; } .eft-reference-value { font-family: 'Barlow Condensed', sans-serif; font-size: 1.3rem; font-weight: 700; color: var(--blue-primary); letter-spacing: .05em; } /* Status timeline */ .status-timeline { display: flex; justify-content: space-between; align-items: flex-start; position: relative; margin: 1.5rem 0; padding: 0 .5rem; } .status-timeline::before { content: ''; position: absolute; top: 22px; left: calc(.5rem + 22px); right: calc(.5rem + 22px); height: 2px; background: var(--border-color); z-index: 0; } .timeline-step { display: flex; flex-direction: column; align-items: center; gap: .5rem; position: relative; z-index: 1; flex: 1; text-align: center; } .timeline-dot { width: 44px; height: 44px; border-radius: 50%; background: var(--white); border: 2px solid var(--border-color); display: flex; align-items: center; justify-content: center; font-size: .85rem; color: var(--text-muted); transition: var(--transition); flex-shrink: 0; } .timeline-step.completed .timeline-dot { background: var(--success); border-color: var(--success); color: var(--white); } .timeline-step.active .timeline-dot { background: var(--blue-primary); border-color: var(--blue-primary); color: var(--white); box-shadow: 0 0 0 4px var(--blue-light); } .timeline-step.pending .timeline-dot { background: var(--warning-light); border-color: var(--warning); color: var(--warning); } .timeline-label { font-size: .72rem; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; max-width: 80px; line-height: 1.3; } .timeline-step.completed .timeline-label, .timeline-step.active .timeline-label { color: var(--text-dark); } /* ── 19. ADMIN PANEL ─────────────────────────────────────── */ .admin-page-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 2rem; padding-bottom: 1rem; border-bottom: 2px solid var(--border-color); gap: 1rem; flex-wrap: wrap; } .admin-page-header h2 { color: var(--blue-primary); font-size: 1.6rem; } .pop-approval-card { background: var(--white); border: 1px solid var(--border-color); border-radius: var(--radius-md); overflow: hidden; margin-bottom: 1rem; transition: var(--transition); } .pop-approval-card:hover { box-shadow: var(--shadow-md); border-color: var(--blue-mid); } .pop-approval-header { background: var(--gray-100); padding: .85rem 1.25rem; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--border-color); gap: 1rem; flex-wrap: wrap; } .pop-user-info { display: flex; align-items: center; gap: .75rem; } .pop-user-avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--blue-primary); color: var(--white); display: flex; align-items: center; justify-content: center; font-weight: 700; font-family: 'Barlow Condensed', sans-serif; font-size: 1rem; flex-shrink: 0; } .pop-approval-body { padding: 1.25rem; display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; align-items: start; } .pop-doc-preview { border-radius: var(--radius-sm); overflow: hidden; border: 1px solid var(--border-color); aspect-ratio: 4/3; background: var(--gray-100); display: flex; align-items: center; justify-content: center; } .pop-doc-preview img { width: 100%; height: 100%; object-fit: cover; } .pop-doc-preview.pdf-preview { flex-direction: column; gap: .5rem; color: var(--danger); font-size: 2rem; } .pop-doc-preview.pdf-preview span { font-size: .78rem; color: var(--text-muted); } /* CSV Import */ .csv-guide-table { font-size: .78rem; width: 100%; border-collapse: collapse; margin: 1rem 0; } .csv-guide-table th, .csv-guide-table td { padding: .4rem .65rem; text-align: left; border-bottom: 1px solid var(--border-color); } .csv-guide-table th { background: var(--gray-100); font-weight: 700; color: var(--blue-primary); } .import-progress { background: var(--gray-100); border-radius: var(--radius-full); overflow: hidden; height: 12px; margin: .75rem 0; } .import-progress-bar { height: 100%; background: linear-gradient(90deg, var(--blue-primary), var(--cyan-accent)); border-radius: var(--radius-full); transition: width .4s ease; position: relative; } .import-progress-bar::after { content: ''; position: absolute; top: 0; right: 0; bottom: 0; width: 20px; background: rgba(255,255,255,.25); border-radius: var(--radius-full); animation: progressShimmer 1s ease infinite; } @keyframes progressShimmer { 0% { opacity: 0; } 50% { opacity: 1; } 100% { opacity: 0; } } /* Gallery manager (drag-drop reorder) */ .gallery-manager-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: .75rem; padding: 1rem; background: var(--gray-100); border-radius: var(--radius-md); border: 2px dashed var(--border-color); min-height: 120px; } .gallery-manager-item { position: relative; aspect-ratio: 4/3; border-radius: var(--radius-sm); overflow: hidden; border: 2px solid var(--border-color); cursor: grab; transition: var(--transition); } .gallery-manager-item:active { cursor: grabbing; } .gallery-manager-item img { width: 100%; height: 100%; object-fit: cover; } .gallery-manager-item.is-primary { border-color: var(--cyan-accent); box-shadow: 0 0 0 2px var(--cyan-accent); } .gallery-item-actions { position: absolute; inset: 0; background: rgba(0,0,0,.55); display: flex; align-items: center; justify-content: center; gap: .4rem; opacity: 0; transition: var(--transition); } .gallery-manager-item:hover .gallery-item-actions { opacity: 1; } .gallery-item-actions .btn { width: 28px; height: 28px; padding: 0; border-radius: 50%; font-size: .7rem; } .gallery-primary-badge { position: absolute; top: .3rem; left: .3rem; background: var(--cyan-accent); color: var(--white); font-size: .55rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; padding: .15rem .35rem; border-radius: var(--radius-full); } /* ── 20. CTA SECTIONS ────────────────────────────────────── */ .cta-banner { background: linear-gradient(120deg, var(--blue-deeper) 0%, var(--blue-primary) 60%, #007bc5 100%); padding: 4rem 0; text-align: center; position: relative; overflow: hidden; } .cta-banner::before { content: ''; position: absolute; inset: 0; background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"); } .cta-banner h2 { color: var(--white); margin-bottom: 1rem; position: relative; } .cta-banner p { color: rgba(255,255,255,.8); font-size: 1.1rem; margin-bottom: 2rem; position: relative; } .cta-banner .btn { position: relative; } /* Stats strip */ .stats-strip { background: var(--blue-primary); padding: 2rem 0; } .stats-strip-inner { display: flex; justify-content: space-around; align-items: center; flex-wrap: wrap; gap: 1.5rem; } .stats-strip-item { text-align: center; } .stats-strip-value { font-family: 'Barlow Condensed', sans-serif; font-size: 2.4rem; font-weight: 700; color: var(--cyan-accent); line-height: 1; letter-spacing: -.01em; } .stats-strip-label { font-size: .78rem; color: rgba(255,255,255,.65); text-transform: uppercase; letter-spacing: .08em; margin-top: .3rem; } /* How it works steps */ .steps-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; position: relative; } .steps-grid::before { content: ''; position: absolute; top: 38px; left: 10%; right: 10%; height: 2px; background: repeating-linear-gradient(90deg, var(--blue-mid) 0, var(--blue-mid) 8px, transparent 8px, transparent 16px); z-index: 0; } .step-card { text-align: center; position: relative; z-index: 1; } .step-number { width: 56px; height: 56px; border-radius: 50%; background: var(--blue-primary); color: var(--white); font-family: 'Barlow Condensed', sans-serif; font-size: 1.5rem; font-weight: 700; display: flex; align-items: center; justify-content: center; margin: 0 auto 1rem; border: 3px solid var(--white); box-shadow: 0 0 0 3px var(--blue-mid); } .step-card h4 { font-size: 1rem; color: var(--blue-primary); margin-bottom: .4rem; } .step-card p { font-size: .85rem; color: var(--text-muted); } /* ── 21. FOOTER ──────────────────────────────────────────── */ .footer { background: var(--blue-deeper); padding: 3.5rem 0 0; margin-top: auto; } .footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 3rem; padding-bottom: 3rem; border-bottom: 1px solid rgba(255,255,255,.08); } .footer-brand {} .footer-brand .footer-logo { margin-bottom: 1rem; } .footer-brand .footer-logo img { height: 48px; } .footer-brand p { color: rgba(255,255,255,.55); font-size: .875rem; line-height: 1.7; max-width: 300px; } .footer-contact { margin-top: 1.25rem; display: flex; flex-direction: column; gap: .5rem; } .footer-contact-item { display: flex; align-items: center; gap: .6rem; color: rgba(255,255,255,.65); font-size: .82rem; text-decoration: none; transition: var(--transition); } .footer-contact-item:hover { color: var(--cyan-accent); } .footer-contact-item i { color: var(--cyan-accent); width: 16px; flex-shrink: 0; } .footer-col h5 { color: var(--white); font-size: .8rem; text-transform: uppercase; letter-spacing: .1em; margin-bottom: 1.25rem; display: flex; align-items: center; gap: .5rem; } .footer-col h5::after { content: ''; flex: 1; height: 1px; background: rgba(255,255,255,.1); } .footer-links { display: flex; flex-direction: column; gap: .5rem; } .footer-link { color: rgba(255,255,255,.55); font-size: .875rem; text-decoration: none; transition: var(--transition); display: flex; align-items: center; gap: .4rem; } .footer-link:hover { color: var(--cyan-accent); padding-left: .3rem; } .footer-link i { font-size: .7rem; color: var(--cyan-accent); opacity: .6; } .footer-whatsapp-links { display: flex; flex-direction: column; gap: .6rem; } .footer-wa-link { display: flex; align-items: center; gap: .65rem; background: rgba(37,211,102,.1); color: #25d366; padding: .55rem .9rem; border-radius: var(--radius-sm); font-size: .82rem; font-weight: 600; text-decoration: none; transition: var(--transition); border: 1px solid rgba(37,211,102,.15); } .footer-wa-link:hover { background: rgba(37,211,102,.2); border-color: rgba(37,211,102,.3); color: #25d366; } .footer-wa-link i { font-size: 1rem; } .footer-bottom { padding: 1.25rem 0; display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; } .footer-copyright { color: rgba(255,255,255,.35); font-size: .78rem; } .footer-bottom-links { display: flex; gap: 1.5rem; } .footer-bottom-links a { color: rgba(255,255,255,.35); font-size: .78rem; text-decoration: none; transition: var(--transition); } .footer-bottom-links a:hover { color: var(--cyan-accent); } /* ── FOOTER SCAM ALERT ────────────────────────────────────── */ .footer-scam-alert { background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%); border-top: 3px solid #e74c3c; padding: 2rem 0; text-align: center; } .scam-alert-title { color: #e74c3c; font-size: 1.15rem; font-weight: 700; margin-bottom: .75rem; text-transform: uppercase; letter-spacing: .04em; } .scam-alert-title i { margin-right: .4rem; } .scam-alert-text { color: rgba(255,255,255,.7); font-size: .88rem; max-width: 700px; margin: 0 auto 1.25rem; line-height: 1.6; } .scam-alert-images { display: flex; justify-content: center; gap: 1rem; flex-wrap: wrap; } .scam-alert-img { width: 180px; height: auto; border-radius: 8px; cursor: pointer; transition: transform .2s, box-shadow .2s; border: 2px solid rgba(255,255,255,.1); } .scam-alert-img:hover { transform: scale(1.05); box-shadow: 0 4px 20px rgba(231,76,60,.3); border-color: #e74c3c; } /* Scam Alert Lightbox */ .scam-alert-overlay { position: fixed; inset: 0; z-index: 10000; background: rgba(0,0,0,.92); display: flex; align-items: center; justify-content: center; } .scam-alert-overlay[hidden] { display: none; } .scam-alert-close { position: absolute; top: 1rem; right: 1.5rem; background: rgba(255,255,255,.15); border: none; color: #fff; font-size: 2rem; width: 48px; height: 48px; border-radius: 50%; cursor: pointer; z-index: 2; transition: background .2s; } .scam-alert-close:hover { background: rgba(255,255,255,.25); } .scam-alert-nav { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(255,255,255,.15); border: none; color: #fff; font-size: 1.3rem; width: 48px; height: 48px; border-radius: 50%; cursor: pointer; z-index: 2; transition: background .2s; } .scam-alert-nav:hover { background: rgba(255,255,255,.25); } .scam-alert-prev { left: 1.5rem; } .scam-alert-next { right: 1.5rem; } .scam-alert-full-img { max-width: 90vw; max-height: 85vh; border-radius: 8px; object-fit: contain; } .scam-alert-counter { position: absolute; bottom: 1.5rem; left: 50%; transform: translateX(-50%); color: rgba(255,255,255,.6); font-size: .85rem; } @media (max-width: 600px) { .scam-alert-img { width: 140px; } .scam-alert-nav { width: 36px; height: 36px; font-size: 1rem; } .scam-alert-prev { left: .5rem; } .scam-alert-next { right: .5rem; } } /* ── 22. WHATSAPP FLOAT BUTTONS ──────────────────────────── */ .whatsapp-float { position: fixed; bottom: 2rem; left: 2rem; right: auto; z-index: 1500; display: flex; flex-direction: column-reverse; align-items: flex-start; gap: .6rem; } .wa-float-main { width: 56px; height: 56px; border-radius: 50%; background: #25d366; color: var(--white); font-size: 1.6rem; display: flex; align-items: center; justify-content: center; text-decoration: none; box-shadow: 0 4px 20px rgba(37,211,102,.5); transition: var(--transition); animation: waFloat 2s ease-in-out infinite; border: none; cursor: pointer; } .wa-float-main:hover { transform: scale(1.1); box-shadow: 0 6px 28px rgba(37,211,102,.6); color: var(--white); } /* Agent selector popup */ .wa-agent-popup { position: absolute; bottom: 70px; left: 0; right: auto; width: 290px; background: #ffffff; border-radius: 12px; box-shadow: 0 8px 32px rgba(0,0,0,.22), 0 0 0 1px rgba(0,0,0,.05); overflow: hidden; opacity: 0; pointer-events: none; transform: translateY(10px) scale(.95); transition: all .25s ease; z-index: 1600; } .wa-agent-popup.wa-popup-open { opacity: 1; pointer-events: all; transform: translateY(0) scale(1); } .wa-agent-header { background: #25d366; color: #ffffff; padding: .9rem 1.1rem; font-weight: 700; font-size: .95rem; display: flex; align-items: center; gap: .5rem; } .wa-agent-header i { font-size: 1.15rem; } .wa-agent-close { margin-left: auto; background: none; border: none; color: #ffffff; font-size: 1.4rem; cursor: pointer; line-height: 1; padding: 0; opacity: .8; } .wa-agent-close:hover { opacity: 1; } .wa-agent-item { display: flex; align-items: center; gap: .75rem; padding: .85rem 1.1rem; text-decoration: none; color: #0d1e2e; border-bottom: 1px solid #eaeef2; transition: background .15s ease; background: #ffffff; } .wa-agent-item:last-child { border-bottom: none; } .wa-agent-item:hover { background: #eafaf0; } .wa-agent-avatar { width: 40px; height: 40px; border-radius: 50%; background: #25d366; color: #ffffff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 1rem; flex-shrink: 0; } .wa-agent-info { display: flex; flex-direction: column; flex: 1; min-width: 0; } .wa-agent-info strong { font-size: .9rem; color: #0d1e2e; } .wa-agent-info span { font-size: .78rem; color: #6b7c8d; } .wa-agent-icon { color: #25d366; font-size: 1.3rem; flex-shrink: 0; } @keyframes waFloat { 0%, 100% { box-shadow: 0 4px 20px rgba(37,211,102,.5); } 50% { box-shadow: 0 6px 30px rgba(37,211,102,.7); } } /* ── 23. ALERTS & TOASTS ─────────────────────────────────── */ .alert { display: flex; align-items: flex-start; gap: .85rem; padding: 1rem 1.25rem; border-radius: var(--radius-md); margin-bottom: 1rem; font-size: .9rem; border: 1px solid transparent; } .alert i { font-size: 1rem; flex-shrink: 0; margin-top: .1rem; } .alert-success { background: var(--success-light); border-color: rgba(26,158,78,.25); color: #145a32; } .alert-success i { color: var(--success); } .alert-error, .alert-danger { background: var(--danger-light); border-color: rgba(192,57,43,.25); color: #7b241c; } .alert-error i, .alert-danger i { color: var(--danger); } .alert-warning { background: var(--warning-light); border-color: rgba(224,123,0,.25); color: #784212; } .alert-warning i { color: var(--warning); } .alert-info { background: var(--info-light); border-color: rgba(2,132,199,.25); color: #0c4a6e; } .alert-info i { color: var(--info); } .alert-close { margin-left: auto; background: none; border: none; cursor: pointer; opacity: .5; font-size: 1rem; color: inherit; padding: 0 .25rem; flex-shrink: 0; transition: opacity .2s; } .alert-close:hover { opacity: 1; } /* Toast container */ .toast-container { position: fixed; bottom: 2rem; left: 50%; transform: translateX(-50%); z-index: 4000; display: flex; flex-direction: column-reverse; gap: .6rem; pointer-events: none; width: max-content; max-width: calc(100vw - 2rem); } .toast { background: var(--white); border-radius: var(--radius-md); padding: .85rem 1.25rem; box-shadow: var(--shadow-xl); display: flex; align-items: center; gap: .75rem; font-size: .88rem; font-weight: 500; pointer-events: all; animation: toastIn .3s ease forwards; border-left: 4px solid var(--border-color); min-width: 280px; } .toast.toast-success { border-left-color: var(--success); } .toast.toast-success i { color: var(--success); } .toast.toast-error { border-left-color: var(--danger); } .toast.toast-error i { color: var(--danger); } .toast.toast-info { border-left-color: var(--info); } .toast.toast-info i { color: var(--info); } .toast.toast-warning { border-left-color: var(--warning); } .toast.toast-warning i { color: var(--warning); } .toast.hiding { animation: toastOut .3s ease forwards; } @keyframes toastIn { from { opacity: 0; transform: translateY(10px) scale(.96); } to { opacity: 1; transform: translateY(0) scale(1); } } @keyframes toastOut { from { opacity: 1; transform: translateY(0) scale(1); } to { opacity: 0; transform: translateY(-10px) scale(.96); } } /* ── 24. SCROLL TO TOP ───────────────────────────────────── */ .scroll-top-btn { position: fixed; bottom: 92px; /* above the Botpress chatbot button on the left */ left: 22px; width: 42px; height: 42px; border-radius: 50%; background: var(--blue-primary); color: var(--white); font-size: .95rem; display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: var(--shadow-md); transition: var(--transition); z-index: 1400; opacity: 0; pointer-events: none; border: none; transform: translateY(10px); } .scroll-top-btn.visible { opacity: 1; pointer-events: all; transform: translateY(0); } .scroll-top-btn:hover { background: var(--blue-dark); transform: translateY(-2px); } /* ── 25. VEHICLE SPECS TABLE ─────────────────────────────── */ .specs-table { width: 100%; border-collapse: collapse; font-size: .875rem; } .specs-table tr { border-bottom: 1px solid var(--border-color); } .specs-table tr:last-child { border-bottom: none; } .specs-table td { padding: .7rem .5rem; vertical-align: top; } .specs-table td:first-child { font-weight: 600; color: var(--text-muted); font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; width: 45%; } .specs-table td:last-child { color: var(--text-dark); font-weight: 600; text-transform: uppercase; letter-spacing: .03em; } /* Pagination */ .pagination { display: flex; align-items: center; justify-content: center; gap: .35rem; margin-top: 2rem; flex-wrap: wrap; } .page-btn { min-width: 38px; height: 38px; padding: 0 .75rem; border-radius: var(--radius-sm); border: 1.5px solid var(--border-color); background: var(--white); color: var(--text-body); font-size: .875rem; font-weight: 600; cursor: pointer; transition: var(--transition); display: flex; align-items: center; justify-content: center; } .page-btn:hover { border-color: var(--blue-primary); color: var(--blue-primary); background: var(--blue-light); } .page-btn.active { background: var(--blue-primary); border-color: var(--blue-primary); color: var(--white); } .page-btn:disabled { opacity: .4; cursor: not-allowed; } /* Empty state */ .empty-state { text-align: center; padding: 4rem 2rem; } .empty-state-icon { font-size: 3.5rem; color: var(--gray-300); margin-bottom: 1.25rem; } .empty-state h3 { color: var(--text-muted); font-size: 1.2rem; margin-bottom: .5rem; } .empty-state p { color: var(--text-muted); font-size: .9rem; max-width: 360px; margin: 0 auto 1.5rem; } /* ── 26. UTILITY CLASSES ─────────────────────────────────── */ .divider { height: 1px; background: var(--border-color); margin: 1.5rem 0; } .divider-v { width: 1px; height: 100%; background: var(--border-color); } .bg-blue { background: var(--blue-primary); } .bg-blue-light{ background: var(--blue-light); } .bg-cyan { background: var(--cyan-accent); } .bg-white { background: var(--white); } .bg-off-white { background: var(--off-white); } .bg-dark { background: var(--text-dark); } .shadow-sm { box-shadow: var(--shadow-sm); } .shadow-md { box-shadow: var(--shadow-md); } .shadow-lg { box-shadow: var(--shadow-lg); } .border { border: 1px solid var(--border-color); } .border-top { border-top: 1px solid var(--border-color); } .border-blue{ border: 1.5px solid var(--blue-mid); } .overflow-hidden { overflow: hidden; } .position-relative { position: relative; } /* ── 27. ANIMATIONS ──────────────────────────────────────── */ @keyframes spin { to { transform: rotate(360deg); } } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes slideDown { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } } @keyframes slideUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } @keyframes countUp { from { opacity: 0; transform: scale(.8); } to { opacity: 1; transform: scale(1); } } .animate-fade-in { animation: fadeIn .4s ease; } .animate-slide-up { animation: slideUp .4s ease; } .animate-count-up { animation: countUp .5s ease; } /* ── 28. PRINT STYLES ────────────────────────────────────── */ @media print { .navbar, .ticker-bar, .footer, .whatsapp-float, .scroll-top-btn, .toast-container, .tab-nav, .btn, .sidebar { display: none !important; } .dashboard-main { padding: 0; } .dashboard-wrap { display: block; } .card, .stat-card, .info-card { box-shadow: none; border: 1px solid #ccc; break-inside: avoid; } body { font-size: 12pt; background: white; color: black; } a { color: black; text-decoration: none; } .container { max-width: 100%; padding: 0; } } /* ── 29. RESPONSIVE ──────────────────────────────────────── */ /* 1280px — Container max */ @media (max-width: 1280px) { .steps-grid { grid-template-columns: repeat(2, 1fr); } .steps-grid::before { display: none; } } /* 1024px — Nav collapse */ @media (max-width: 1024px) { :root { --sidebar-width: 220px; } .navbar-nav { display: none; } .navbar-hamburger { display: flex; } .navbar-right { display: none; } .grid-4 { grid-template-columns: repeat(2, 1fr); } .footer-grid { grid-template-columns: 1fr 1fr; } .footer-brand { grid-column: 1 / -1; } } /* 900px — Dashboard */ @media (max-width: 900px) { .dashboard-wrap { flex-direction: column; } .dashboard-sidebar { width: 100%; height: auto; position: static; flex-direction: row; overflow-x: auto; } .sidebar-user-info { display: none; } .sidebar-nav { display: flex; padding: 0; flex-direction: row; } .sidebar-section-label { display: none; } .sidebar-nav-item { padding: .75rem 1rem; white-space: nowrap; border-left: none; border-bottom: 3px solid transparent; font-size: .8rem; } .sidebar-nav-item.active, .sidebar-nav-item:hover { border-left-color: transparent; border-bottom-color: var(--cyan-accent); } .dashboard-main { padding: 1rem; } } /* 768px — 2 columns */ @media (max-width: 768px) { :root { --nav-height: 68px; } .navbar-logo img { height: 222px; max-width: 280px; } .grid-3 { grid-template-columns: repeat(2, 1fr); } .grid-2 { grid-template-columns: 1fr; } .hero { min-height: auto; } .hero-content { padding: 2.5rem 0; } .hero-stats { gap: 1.5rem; } .hero-stat-value { font-size: 1.5rem; } .form-row { grid-template-columns: 1fr; } .form-row.cols-3 { grid-template-columns: 1fr; } .filter-bar { flex-direction: column; } .filter-bar .form-group { min-width: 100%; } .section { padding: 2.5rem 0; } .footer-grid { grid-template-columns: 1fr; gap: 2rem; } .pop-approval-body { grid-template-columns: 1fr; } .steps-grid { grid-template-columns: 1fr; } .status-timeline { flex-direction: column; align-items: flex-start; gap: 1rem; } .status-timeline::before { display: none; } .timeline-step { flex-direction: row; gap: 1rem; } .timeline-label { max-width: 100%; text-align: left; } .stats-strip-value { font-size: 1.8rem; } .tab-nav { gap: 0; } .tab-btn { padding: .65rem .9rem; font-size: .8rem; } .modal-box { margin: .75rem; max-width: calc(100% - 1.5rem); } .admin-page-header { flex-direction: column; align-items: flex-start; } .bid-panel { position: static; } .auction-gallery { } .gallery-thumb { width: 65px; height: 50px; } } /* 480px — Mobile single column */ @media (max-width: 480px) { .container { padding: 0 1rem; } .grid-3, .grid-4 { grid-template-columns: 1fr; } .hero-actions { flex-direction: column; } .hero-actions .btn { width: 100%; } h1 { font-size: 1.9rem; } h2 { font-size: 1.5rem; } .dashboard-header { padding: 1.25rem; } .stats-strip-inner { gap: 1.5rem; } .footer-bottom { flex-direction: column; text-align: center; } .whatsapp-float { bottom: 1rem; left: 1rem; right: auto; } .scroll-top-btn { bottom: 82px; left: 14px; } .table-responsive { font-size: .82rem; } .table td, .table th { padding: .55rem .65rem; } .toast-container { width: calc(100vw - 1.5rem); left: .75rem; transform: none; } .gallery-manager-grid { grid-template-columns: repeat(3, 1fr); } } /* Touch targets */ @media (hover: none) { .btn { min-height: 44px; } .nav-link { min-height: 44px; display: flex; align-items: center; } .tab-btn { min-height: 44px; } .page-btn { min-height: 44px; } } /* ============================================================ AUCTION HUB GROUP — style.css ADDITIONS Implements Developer Guide §1 (missing classes), §2 (APP_URL path-safe selectors), §3 (Font Awesome compatibility layer) All classes referenced by PHP pages but absent from original ============================================================ */ /* ── §3 FONT AWESOME COMPATIBILITY ────────────────────────── Dev Guide §3: Remove SRI integrity= to prevent silent block. These aliases ensure icons render correctly regardless of whether FA loads from CDN or a local fallback. */ .fa, .fas, .fab, .far, .fal, .fad { display: inline-block; } .fa-spin { animation: spin .8s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } .fa-2x { font-size: 2em; } .fa-3x { font-size: 3em; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } /* ── §1 MISSING: FORM COMPONENTS ─────────────────────────── */ /* form-input: used by login.php, register form, filter bars */ .form-input { width: 100%; padding: .6rem .9rem; font-size: .9rem; color: var(--text-dark); background: var(--white); border: 1.5px solid var(--border-color); border-radius: var(--radius-sm); transition: var(--transition); appearance: none; line-height: 1.5; font-family: inherit; } .form-input:focus { outline: none; border-color: var(--blue-primary); box-shadow: 0 0 0 3px rgba(0,91,161,.12); } .form-input::placeholder { color: var(--gray-400); } .form-input:disabled { background: var(--gray-100); color: var(--text-muted); cursor: not-allowed; } .form-select { width: 100%; padding: .6rem .9rem; font-size: .9rem; color: var(--text-dark); background: var(--white); border: 1.5px solid var(--border-color); border-radius: var(--radius-sm); transition: var(--transition); cursor: pointer; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236c8a9f' d='M6 8L1 3h10z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right .75rem center; padding-right: 2.5rem; font-family: inherit; } .form-select:focus { outline: none; border-color: var(--blue-primary); box-shadow: 0 0 0 3px rgba(0,91,161,.12); } .form-control-sm { padding: .4rem .75rem; font-size: .82rem; } /* form-row-2: two-column form layout in register form */ .form-row-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; } /* form-label-row: label + forgot-password link row */ .form-label-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: .4rem; } /* form-check (checkboxes / terms agreement) */ .form-check-group { margin-bottom: 1rem; } .form-check-label { display: flex; align-items: flex-start; gap: .65rem; font-size: .88rem; color: var(--text-body); cursor: pointer; line-height: 1.5; } .form-check-input { width: 16px; height: 16px; margin-top: .18rem; flex-shrink: 0; accent-color: var(--blue-primary); cursor: pointer; } .form-hint { font-size: .78rem; color: var(--text-muted); margin-top: .25rem; } .req { color: var(--danger); margin-left: .15rem; } /* Input icon wrappers */ .input-icon-wrap { position: relative; } .input-icon { position: absolute; left: .9rem; top: 50%; transform: translateY(-50%); color: var(--gray-400); pointer-events: none; font-size: .85rem; } .input-with-icon { padding-left: 2.6rem; } .input-icon-btn { position: absolute; top: 50%; transform: translateY(-50%); background: none; border: none; cursor: pointer; color: var(--gray-400); padding: .2rem .4rem; transition: var(--transition); font-size: .85rem; } .input-icon-right { right: .5rem; } .toggle-password:hover, .toggle-pwd:hover { color: var(--blue-primary); } /* btn-text / btn-spinner: loading state helpers */ .btn-text { display: inline-flex; align-items: center; gap: .4rem; } .btn-spinner{ display: inline-flex; align-items: center; gap: .5rem; } /* Ensure HTML hidden attribute always wins — prevents spinner showing on load */ [hidden] { display: none !important; } /* btn-icon: icon-only button */ .btn-icon { width: 36px; height: 36px; padding: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-sm); } /* checkbox-label alias */ .checkbox-label { display: flex; align-items: flex-start; gap: .65rem; cursor: pointer; } /* Password strength meter */ .pw-strength-wrap { margin-bottom: .75rem; display: flex; align-items: center; gap: .75rem; } .pw-strength-bar { flex: 1; height: 6px; background: var(--gray-200); border-radius: var(--radius-full); overflow: hidden; } .pw-strength-fill { height: 100%; width: 0; border-radius: var(--radius-full); transition: width .3s ease, background .3s ease; background: var(--danger); } .pw-strength-fill.weak { width: 25%; background: var(--danger); } .pw-strength-fill.fair { width: 50%; background: var(--warning); } .pw-strength-fill.good { width: 75%; background: var(--info); } .pw-strength-fill.strong { width: 100%; background: var(--success); } .pw-strength-label { font-size: .72rem; font-weight: 600; color: var(--text-muted); white-space: nowrap; } .pw-match-hint { font-size: .76rem; font-weight: 600; } /* ── §1 MISSING: AUTH PAGE ────────────────────────────────── The login.php left panel, card, tabs, alerts — all absent */ .auth-page { display: grid; grid-template-columns: 1fr 1fr; flex: 1; /* fills body flex column */ min-height: calc(100vh - var(--nav-height) - 38px); } .auth-left { background: linear-gradient(150deg, var(--blue-deeper) 0%, var(--blue-primary) 55%, #0070c0 100%); padding: 3.5rem 3rem; display: flex; align-items: center; position: relative; overflow: hidden; } .auth-left::before { content: ''; position: absolute; width: 420px; height: 420px; border-radius: 50%; background: rgba(0,174,239,.10); right: -140px; top: -140px; pointer-events: none; } .auth-left::after { content: ''; position: absolute; width: 280px; height: 280px; border-radius: 50%; background: rgba(0,174,239,.07); left: -80px; bottom: -80px; pointer-events: none; } .auth-left-inner { max-width: 440px; position: relative; z-index: 1; } .auth-logo-link { display: inline-block; margin-bottom: 2rem; } .auth-logo { height: 52px; width: auto; } .auth-left-heading { font-size: clamp(1.6rem, 3vw, 2.2rem); font-weight: 800; color: var(--white); line-height: 1.2; margin-bottom: .75rem; font-family: 'Barlow Condensed', sans-serif; } .auth-left-sub { color: rgba(255,255,255,.72); margin-bottom: 2rem; font-size: .95rem; line-height: 1.7; } .auth-trust-list { list-style: none; padding: 0; margin-bottom: 2rem; } .auth-trust-list li { color: rgba(255,255,255,.85); padding: .4rem 0; display: flex; align-items: center; gap: .7rem; font-size: .9rem; } .auth-trust-list .fa-circle-check { color: var(--cyan-accent); } .auth-stats { display: flex; gap: .75rem; flex-wrap: wrap; } .auth-stat-badge { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.18); color: var(--white); padding: .5rem .9rem; border-radius: var(--radius-md); font-size: .82rem; font-weight: 600; display: flex; align-items: center; gap: .5rem; } .auth-right { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 2.5rem 2rem; background: var(--off-white); overflow-y: auto; } .auth-card { background: var(--white); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: 2.5rem; width: 100%; max-width: 500px; } /* Auth tabs (Login / Register) */ .auth-tabs { display: flex; border-radius: var(--radius-sm); overflow: hidden; border: 1.5px solid var(--border-color); margin-bottom: 2rem; } .auth-tab-btn { flex: 1; padding: .7rem 1rem; background: var(--gray-100); border: none; cursor: pointer; font-size: .88rem; font-weight: 600; color: var(--text-muted); transition: var(--transition); display: flex; align-items: center; justify-content: center; gap: .4rem; letter-spacing: .02em; font-family: inherit; } .auth-tab-btn:hover { background: var(--blue-light); color: var(--blue-primary); } .auth-tab-btn.active { background: var(--blue-primary); color: var(--white); box-shadow: inset 0 -2px 0 rgba(0,0,0,.15); } .auth-tab-content { display: none; } .auth-tab-content.active { display: block; animation: fadeIn .2s ease; } .auth-tab-header { margin-bottom: 1.5rem; } /* Password match hint colours */ .hint-success { color: var(--success) !important; } .hint-error { color: var(--danger) !important; } .auth-heading { font-size: 1.7rem; font-weight: 800; color: var(--blue-dark); margin-bottom: .25rem; font-family: 'Barlow Condensed', sans-serif; position: relative; display: inline-block; } .auth-heading::after { content: ''; position: absolute; left: 0; bottom: -4px; width: 40px; height: 3px; background: var(--cyan-accent); border-radius: 2px; } .auth-subheading { color: var(--text-muted); font-size: .9rem; margin: .35rem 0 0; } /* Auth alert (inline form feedback) */ .auth-alert { padding: .85rem 1rem; border-radius: var(--radius-sm); font-size: .88rem; margin-bottom: 1.1rem; display: flex; align-items: flex-start; gap: .65rem; border: 1px solid transparent; } .auth-alert-success { background: var(--success-light); color: #145a32; border-color: rgba(26,158,78,.25); } .auth-alert-error { background: var(--danger-light); color: #7b241c; border-color: rgba(192,57,43,.25); } .auth-alert-info { background: var(--info-light); color: #0c4a6e; border-color: rgba(2,132,199,.25); } /* Forgot / switch links */ .auth-forgot-link { font-size: .82rem; color: var(--blue-primary); transition: var(--transition); } .auth-forgot-link:hover { color: var(--cyan-accent); } .auth-switch-text { text-align: center; color: var(--text-muted); font-size: .88rem; margin-top: 1.25rem; } .auth-switch-btn { background: none; border: none; color: var(--blue-primary); font-weight: 600; cursor: pointer; font-size: .88rem; text-decoration: underline; font-family: inherit; } /* Auth info note (forgot password hint) */ .auth-info-note { background: var(--info-light); border: 1px solid rgba(2,132,199,.25); border-radius: var(--radius-sm); padding: .85rem 1rem; margin-top: 1rem; font-size: .85rem; color: #0c4a6e; display: flex; align-items: flex-start; gap: .6rem; } .wa-inline-link { color: #25d366; font-weight: 600; display: inline-flex; align-items: center; gap: .25rem; } /* Auth EFT note (visible after register) */ .auth-eft-note { background: var(--gold-light); border: 1.5px solid rgba(201,150,10,.35); border-radius: var(--radius-md); padding: 1.25rem 1.5rem; margin-top: 1.25rem; font-size: .88rem; width: 100%; max-width: 500px; } .auth-eft-header { display: flex; align-items: center; gap: .6rem; font-weight: 700; color: var(--gold); margin-bottom: .85rem; font-size: .9rem; text-transform: uppercase; letter-spacing: .06em; } .auth-eft-steps { list-style: none; padding: 0; margin: 0 0 .85rem; display: flex; flex-direction: column; gap: .55rem; } .auth-eft-steps li { display: flex; align-items: flex-start; gap: .65rem; color: var(--text-body); font-size: .88rem; line-height: 1.5; } .eft-step-num { width: 22px; height: 22px; border-radius: 50%; background: var(--gold); color: var(--white); font-size: .72rem; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: .1rem; } .eft-bank-inline { background: rgba(201,150,10,.12); border-radius: var(--radius-xs); padding: .05rem .4rem; font-weight: 700; color: var(--text-dark); font-size: .85rem; } .auth-eft-refund { font-size: .8rem; color: var(--text-muted); display: flex; align-items: center; gap: .4rem; margin: 0; } /* ── AUTH PAGE: VISUAL POLISH ADDITIONS ───────────────────── These rules enhance the login/register page appearance and fix issues visible in the rendered screenshot. ────────────────────────────────────────────────────────── */ .auth-tab-header { margin-bottom: 1.75rem; } /* Auth stat badge: live dot alignment fix */ .auth-stat-badge .live-dot { width: 8px; height: 8px; background: #ff4d4f; border-radius: 50%; animation: pulseDot 1.4s ease infinite; flex-shrink: 0; display: inline-block; } /* Auth left panel: trust list item hover */ .auth-trust-list li { transition: color .2s; } .auth-trust-list li:hover { color: rgba(255,255,255,1); } /* Auth card: subtle top border accent */ .auth-card { border-top: 3px solid var(--cyan-accent); } /* Auth tabs: improved */ .auth-tabs { background: var(--gray-100); margin-bottom: 1.75rem; gap: 0; } /* Better form input sizing for auth page */ .auth-card .form-input { padding: .7rem 1rem .7rem 2.6rem; font-size: .92rem; } .auth-card .form-input:not(.input-with-icon) { padding-left: 1rem; } .auth-card .form-group { margin-bottom: 1.1rem; } /* Submit button full width with icon */ .auth-card .btn-lg { padding: .85rem 1.5rem; font-size: .95rem; font-weight: 700; letter-spacing: .03em; margin-top: .25rem; } /* EFT note highlight state (after successful register) */ .auth-eft-note.highlight { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(201,150,10,.18); animation: pulseGold .6s ease 2; } @keyframes pulseGold { 0%, 100% { box-shadow: 0 0 0 3px rgba(201,150,10,.18); } 50% { box-shadow: 0 0 0 6px rgba(201,150,10,.08); } } /* Auth right: subtle dot pattern background */ .auth-right { background-image: radial-gradient(circle, rgba(0,91,161,.04) 1px, transparent 1px); background-size: 24px 24px; } /* ── §1 MISSING: PAGE HERO (auctions.php, auction.php) ────── */ .page-hero { background: linear-gradient(135deg, var(--blue-deeper) 0%, var(--blue-primary) 100%); position: relative; overflow: hidden; } .page-hero::after { content: ''; position: absolute; inset: 0; background: url("data:image/svg+xml,%3Csvg width='60' height='60' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='30' cy='30' r='1' fill='rgba(255,255,255,.04)'/%3E%3C/svg%3E") repeat; pointer-events: none; } .page-hero-sm { padding: 2rem 0; } .page-hero-inner { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; position: relative; z-index: 1; flex-wrap: wrap; } .page-hero-title { font-family: 'Barlow Condensed', sans-serif; font-size: clamp(1.4rem, 3vw, 2rem); font-weight: 700; color: var(--white); margin: 0; display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; } .page-hero-sub { color: rgba(255,255,255,.7); font-size: .9rem; margin: .35rem 0 0; } .page-hero-badge { background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.2); color: var(--white); padding: .4rem .9rem; border-radius: var(--radius-full); font-size: .8rem; font-weight: 600; display: flex; align-items: center; gap: .4rem; white-space: nowrap; } /* Breadcrumb */ .breadcrumb { display: flex; align-items: center; gap: .4rem; font-size: .8rem; color: rgba(255,255,255,.6); list-style: none; padding: 0; margin: 0 0 .5rem; flex-wrap: wrap; } .breadcrumb a { color: rgba(255,255,255,.75); transition: var(--transition); } .breadcrumb a:hover { color: var(--cyan-accent); } .breadcrumb-bar { padding: .75rem 0; } .breadcrumb-status { margin-left: .5rem; } /* ── §1 MISSING: HERO (index.php) ─────────────────────────── */ .hero-badge { display: inline-flex; align-items: center; gap: .5rem; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.25); color: var(--white); padding: .35rem .9rem; border-radius: var(--radius-full); font-size: .78rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; margin-bottom: 1.25rem; } .hero-title { font-family: 'Barlow Condensed', sans-serif; font-size: clamp(2.2rem, 6vw, 4rem); font-weight: 800; color: var(--white); line-height: 1.05; margin-bottom: .85rem; } .hero-title-accent { color: var(--cyan-accent); } .hero-subtitle { color: rgba(255,255,255,.8); font-size: 1.05rem; max-width: 560px; line-height: 1.7; margin-bottom: 2rem; } .hero-br-desktop { display: none; } @media (min-width: 768px) { .hero-br-desktop { display: inline; } } .hero-ctas { display: flex; gap: 1rem; flex-wrap: wrap; margin-bottom: 2.5rem; } .hero-cta-secondary { } /* inherits .btn .btn-outline-white */ .hero-scroll-indicator { position: absolute; bottom: 1.5rem; left: 50%; transform: translateX(-50%); color: rgba(255,255,255,.5); animation: bounce 2s ease infinite; font-size: 1.1rem; z-index: 1; } @keyframes bounce { 0%, 100% { transform: translateX(-50%) translateY(0); } 50% { transform: translateX(-50%) translateY(5px); } } .hero-trust { display: flex; gap: 2rem; flex-wrap: wrap; padding-top: 1.75rem; border-top: 1px solid rgba(255,255,255,.12); } .hero-trust-item { display: flex; align-items: center; gap: .5rem; color: rgba(255,255,255,.75); font-size: .82rem; font-weight: 500; } .hero-trust-item i { color: var(--cyan-accent); font-size: .9rem; } /* ── §1 MISSING: STATS STRIP (index.php) ──────────────────── */ .stats-strip { background: var(--white); border-bottom: 1px solid var(--border-color); padding: 1.5rem 0; box-shadow: var(--shadow-sm); } .stats-strip-inner { display: flex; align-items: center; justify-content: center; gap: 0; flex-wrap: wrap; } .stat-card-icon { font-size: 1.4rem; color: var(--cyan-accent); } .stat-card-body { display: flex; flex-direction: column; } .stat-card-number { font-family: 'Barlow Condensed', sans-serif; font-size: 2rem; font-weight: 700; color: var(--blue-primary); line-height: 1; } .stat-card-label { font-size: .72rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: .06em; font-weight: 600; margin-top: .15rem; } .stat-divider { width: 1px; height: 40px; background: var(--border-color); margin: 0 2rem; } .stat-card-link { text-decoration: none; } .stat-card-blue { color: var(--blue-primary); } .stat-card-cyan { color: var(--cyan-dark); } .stat-card-green { color: var(--success); } .stat-card-grey { color: var(--text-muted); } .stat-icon { font-size: 1.6rem; } .stat-value { font-family: 'Barlow Condensed', sans-serif; font-size: 2rem; font-weight: 700; line-height: 1; } .stat-label { font-size: .72rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: .06em; font-weight: 600; } /* ── §1 MISSING: AUCTION CARD EXTENSIONS ──────────────────── */ .auction-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1.5rem; } .auction-card-img-wrap { position: relative; height: 210px; overflow: hidden; background: var(--gray-100); flex-shrink: 0; } .auction-card-img-link { display: block; height: 100%; } .auction-card-img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; } .auction-card:hover .auction-card-img { transform: scale(1.05); } .auction-card-status-badge { position: absolute; top: .75rem; left: .75rem; z-index: 1; } .auction-card-badges { position: absolute; bottom: .75rem; left: .75rem; display: flex; gap: .3rem; flex-wrap: wrap; z-index: 1; } .auction-card-bid-chip { background: rgba(0,0,0,.62); color: var(--white); font-size: .68rem; font-weight: 600; padding: .15rem .5rem; border-radius: var(--radius-full); backdrop-filter: blur(4px); display: flex; align-items: center; gap: .25rem; } .auction-card-meta { display: flex; gap: .5rem; flex-wrap: wrap; font-size: .72rem; color: var(--text-muted); margin-bottom: .25rem; } .auction-card-meta span { display: flex; align-items: center; gap: .2rem; } .auction-card-price { display: flex; flex-direction: column; gap: .05rem; } .auction-card-price-main { font-family: 'Barlow Condensed', sans-serif; font-size: 1.5rem; font-weight: 700; color: var(--blue-primary); line-height: 1; } .auction-card-reserve { font-size: .7rem; color: var(--text-muted); } .auction-card-reserve-badge { font-size: .65rem; font-weight: 700; padding: .1rem .4rem; border-radius: var(--radius-full); } .badge-reserve-met { background: var(--success-light); color: var(--success); } .badge-no-reserve { background: var(--gray-200); color: var(--text-muted); } .auction-card-timer { text-align: right; flex-shrink: 0; } .auction-card-title-link { text-decoration: none; color: inherit; } .auction-card-title-link:hover { color: var(--blue-primary); } .auction-card-btn { flex: 1; font-size: .82rem; padding: .5rem .75rem; } .auction-card-cta { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; flex: 1; font-size: .85rem; padding: .55rem .75rem; } .auction-card-cta.btn-primary { background: var(--blue-primary); color: var(--white); border-color: var(--blue-primary); } .auction-card-cta.btn-primary:hover { background: var(--blue-dark); color: var(--white); } .auction-card-closed-label { text-align: center; padding: .5rem; background: var(--gray-100); color: var(--text-muted); font-size: .78rem; font-weight: 600; border-top: 1px solid var(--border-color); } .auction-card-live { border-color: var(--danger); } .auction-card-closed { opacity: .8; } /* ── §1 MISSING: FILTER BAR (auctions.php) ────────────────── */ .filter-bar-wrap { background: var(--white); border-bottom: 1px solid var(--border-color); box-shadow: var(--shadow-xs); position: sticky; top: var(--nav-height); z-index: 800; transition: var(--transition); } .filter-group { display: flex; flex-direction: column; gap: .3rem; min-width: 120px; flex: 1; } .filter-group-search { flex: 2; min-width: 180px; } .filter-group-range { min-width: 200px; } .filter-group-actions{ flex: 0; min-width: auto; justify-content: flex-end; } .filter-label { font-size: .72rem; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: .06em; } .filter-select { /* uses .form-select styles */ } .filter-range-pair { display: flex; align-items: center; gap: .35rem; } .filter-range-input { flex: 1; min-width: 0; } .filter-range-sep { color: var(--text-muted); font-size: .8rem; flex-shrink: 0; } .filter-btn-apply { } /* inherits .btn .btn-primary */ .filter-btn-clear { } /* inherits .btn .btn-ghost */ /* Active filter chips */ .active-filters-bar { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; padding: .6rem 0; } .active-filters-label { font-size: .78rem; font-weight: 600; color: var(--text-muted); white-space: nowrap; } .active-filters-chips { display: flex; gap: .4rem; flex-wrap: wrap; flex: 1; } .active-filters-clear { margin-left: auto; } .filter-chip { display: inline-flex; align-items: center; gap: .35rem; background: var(--blue-light); color: var(--blue-primary); border: 1px solid var(--blue-mid); border-radius: var(--radius-full); font-size: .78rem; font-weight: 600; padding: .2rem .65rem; } .chip-remove { cursor: pointer; font-size: .65rem; opacity: .6; transition: opacity .15s; background: none; border: none; color: inherit; padding: 0; font-family: inherit; line-height: 1; } .chip-remove:hover { opacity: 1; } /* Results header */ .results-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.25rem; flex-wrap: wrap; gap: .75rem; } .results-count { font-size: .88rem; color: var(--text-muted); font-weight: 500; } .results-view-toggle { display: flex; gap: .3rem; } .view-toggle-btn { width: 34px; height: 34px; border-radius: var(--radius-sm); border: 1.5px solid var(--border-color); background: var(--white); color: var(--text-muted); cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: .85rem; transition: var(--transition); } .view-toggle-btn.active, .view-toggle-btn:hover { background: var(--blue-primary); color: var(--white); border-color: var(--blue-primary); } /* Auction list section */ .auction-list-section { padding: 2rem 0 4rem; } .auction-page-wrap { display: flex; flex-direction: column; min-height: 60vh; } /* Pagination */ .pagination-list { display: flex; align-items: center; gap: .3rem; list-style: none; padding: 0; flex-wrap: wrap; justify-content: center; } .pagination-item { } .pagination-link { min-width: 36px; height: 36px; padding: 0 .65rem; border-radius: var(--radius-sm); border: 1.5px solid var(--border-color); background: var(--white); color: var(--text-body); font-size: .85rem; font-weight: 600; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: var(--transition); text-decoration: none; } .pagination-link:hover { border-color: var(--blue-primary); color: var(--blue-primary); background: var(--blue-light); } .pagination-active .pagination-link { background: var(--blue-primary); border-color: var(--blue-primary); color: var(--white); } .pagination-disabled .pagination-link { opacity: .4; cursor: not-allowed; pointer-events: none; } .pagination-ellipsis { padding: 0 .35rem; color: var(--text-muted); } .pagination-summary { font-size: .82rem; color: var(--text-muted); text-align: center; margin-top: .5rem; } /* ── Prev/Next vehicle navigation ─────────────────────────── */ .vehicle-nav { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .75rem 0; margin-bottom: .5rem; border-bottom: 1px solid var(--border-color); } .vehicle-nav-btn { display: flex; align-items: center; gap: .6rem; padding: .5rem .85rem; border-radius: var(--radius-sm); text-decoration: none; color: var(--text-dark); background: var(--white); border: 1px solid var(--border-color); transition: var(--transition); max-width: 40%; } .vehicle-nav-btn:hover { background: var(--blue-light); border-color: var(--blue-primary); color: var(--blue-primary); } .vehicle-nav-btn span { display: flex; flex-direction: column; min-width: 0; } .vehicle-nav-btn small { font-size: .7rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: .5px; } .vehicle-nav-btn strong { font-size: .85rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .vehicle-nav-btn i { font-size: .85rem; color: var(--blue-primary); flex-shrink: 0; } .vehicle-nav-next { text-align: right; } .vehicle-nav-center { font-size: .82rem; font-weight: 600; color: var(--text-muted); text-decoration: none; display: flex; align-items: center; gap: .4rem; flex-shrink: 0; } .vehicle-nav-center:hover { color: var(--blue-primary); } /* ── §1 MISSING: AUCTION DETAIL PAGE ──────────────────────── */ .auction-layout { display: grid; grid-template-columns: 1fr 360px; gap: 2rem; align-items: start; } .auction-left-col { min-width: 0; } .auction-right-col { position: sticky; top: calc(var(--nav-height) + 1rem); } /* Gallery extensions */ .gallery-main-wrap { position: relative; border-radius: var(--radius-md); overflow: hidden; background: var(--gray-200); aspect-ratio: 16/10; cursor: zoom-in; } .gallery-main-img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; } .gallery-nav-btn { position: absolute; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; border-radius: 50%; background: rgba(0,0,0,.45); border: none; color: var(--white); font-size: 1rem; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: var(--transition); z-index: 2; backdrop-filter: blur(4px); } .gallery-nav-btn:hover { background: rgba(0,0,0,.7); } .gallery-nav-prev { left: .75rem; } .gallery-nav-next { right: .75rem; } .gallery-expand-btn { position: absolute; top: .75rem; right: .75rem; width: 36px; height: 36px; border-radius: var(--radius-sm); background: rgba(0,0,0,.45); border: none; color: var(--white); font-size: .9rem; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: var(--transition); z-index: 2; backdrop-filter: blur(4px); } .gallery-expand-btn:hover { background: rgba(0,0,0,.7); } .gallery-sold-overlay { position: absolute; inset: 0; background: rgba(0,0,0,.5); display: flex; align-items: center; justify-content: center; font-size: 2rem; font-weight: 700; color: var(--white); font-family: 'Barlow Condensed', sans-serif; text-transform: uppercase; letter-spacing: .1em; backdrop-filter: blur(2px); } .gallery-thumb-active { border-color: var(--blue-primary) !important; } .lightbox-img-wrap { position: relative; display: flex; align-items: center; justify-content: center; } .lightbox-nav { position: absolute; top: 50%; transform: translateY(-50%); } /* Vehicle specs / details */ .vehicle-details { padding: 0; } .vehicle-details-tabs { margin-bottom: 1.5rem; } .vehicle-description { line-height: 1.8; color: var(--text-body); } .specs-row { display: flex; justify-content: space-between; align-items: center; padding: .5rem 0; border-bottom: 1px solid var(--border-color); font-size: .88rem; } .specs-row:last-child { border-bottom: none; } .specs-label { color: var(--text-muted); font-weight: 500; font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; } .specs-value { color: var(--text-dark); font-weight: 600; text-transform: uppercase; letter-spacing: .03em; } /* ── Vehicle Finance Calculator ──────────────────────────────── */ .finance-calculator { margin-top: 2rem; border: 1px solid var(--border-color); border-radius: var(--radius-md); background: var(--white); overflow: hidden; } .finance-header { background: linear-gradient(135deg, var(--blue-primary) 0%, #003d6b 100%); color: var(--white); padding: 1.25rem 1.5rem; } .finance-title { font-family: 'Barlow Condensed', sans-serif; font-size: 1.2rem; font-weight: 700; margin: 0; display: flex; align-items: center; gap: .5rem; color: #fff; } .finance-subtitle { margin: .3rem 0 0; font-size: .82rem; color: rgba(255,255,255,0.92); opacity: 1; } .finance-body { padding: 1.25rem 1.5rem; } .finance-row { margin-bottom: 1rem; } .finance-row-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1.25rem; } .finance-label { display: block; font-size: .82rem; font-weight: 600; color: var(--text-dark); margin-bottom: .35rem; } .finance-min { font-weight: 400; color: var(--text-muted); font-size: .75rem; } .finance-input { width: 100%; padding: .55rem .75rem; border: 1px solid var(--border-color); border-radius: var(--radius-sm); font-size: .9rem; font-family: inherit; color: var(--text-dark); background: var(--gray-100); transition: border-color .2s; } .finance-input:focus { outline: none; border-color: var(--blue-primary); background: var(--white); } .finance-slider { width: 100%; margin-top: .5rem; accent-color: var(--blue-primary); cursor: pointer; } .finance-range-labels { display: flex; justify-content: space-between; font-size: .72rem; color: var(--text-muted); margin-top: .2rem; } .finance-result { background: var(--gray-100); border: 1px solid var(--border-color); border-radius: var(--radius-sm); padding: 1rem 1.25rem; margin-bottom: 1rem; text-align: center; transition: all .3s ease; } .finance-result-visible { background: #eef6ff; border-color: var(--blue-primary); } .finance-result-label { font-size: .78rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; font-weight: 600; } .finance-result-amount { font-family: 'Barlow Condensed', sans-serif; font-size: 2rem; font-weight: 800; color: var(--blue-primary); margin: .25rem 0 .75rem; } .finance-result-details { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: .5rem; font-size: .78rem; color: var(--text-body); } .finance-result-details span { color: var(--text-muted); } .finance-result-details strong { display: block; color: var(--text-dark); margin-top: .15rem; } .finance-calc-btn { width: 100%; padding: .7rem; background: var(--blue-primary); color: var(--white); border: none; border-radius: var(--radius-sm); font-size: .95rem; font-weight: 600; font-family: inherit; cursor: pointer; transition: background .2s; display: flex; align-items: center; justify-content: center; gap: .5rem; } .finance-calc-btn:hover { background: var(--blue-dark); } .finance-disclaimer { margin-top: 1rem; font-size: .72rem; color: var(--text-muted); line-height: 1.5; } .finance-disclaimer i { color: var(--blue-primary); } @media (max-width: 600px) { .finance-row-grid { grid-template-columns: 1fr; } .finance-result-details { grid-template-columns: 1fr; text-align: left; } .finance-result-amount { font-size: 1.6rem; } } .spec-pill { display: inline-flex; align-items: center; gap: .3rem; background: var(--blue-light); color: var(--blue-primary); border-radius: var(--radius-full); padding: .2rem .65rem; font-size: .78rem; font-weight: 600; } .spec-pill-grade { background: var(--gold-light); color: var(--gold); } /* Bid panel extensions */ .bid-panel-sticky { position: sticky; top: calc(var(--nav-height) + 1rem); } .bid-panel-title { font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: rgba(255,255,255,.8); } .bid-panel-price-block { padding: 1.25rem; background: var(--blue-light); } .bid-panel-price { font-family: 'Barlow Condensed', sans-serif; font-size: 2.4rem; font-weight: 700; color: var(--blue-primary); line-height: 1; } .bid-panel-price-label { font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--text-muted); font-weight: 600; } .bid-panel-timer { padding: .7rem 1.25rem; border-bottom: 1px solid var(--border-color); text-align: center; } .bid-panel-increment { font-size: .78rem; color: var(--text-muted); text-align: center; margin-bottom: .75rem; } .bid-panel-reserve { display: flex; justify-content: space-between; align-items: center; padding: .5rem 1.25rem; border-top: 1px solid var(--border-color); font-size: .82rem; } .bid-panel-reserve-label { color: var(--text-muted); font-weight: 500; } .bid-panel-reserve-price { font-weight: 700; color: var(--text-dark); } .bid-panel-reserve-status { font-size: .78rem; font-weight: 600; } .reserve-status-met { color: var(--success); } .reserve-status-not-met { color: var(--warning); } .bid-panel-status-row { padding: .5rem 1.25rem; display: flex; align-items: center; justify-content: space-between; font-size: .82rem; border-top: 1px solid var(--border-color); } .bid-panel-my-bid { font-weight: 600; color: var(--blue-primary); } .bid-panel-bid-count { font-size: .78rem; color: var(--text-muted); } .bid-panel-closed-date { font-size: .78rem; color: var(--text-muted); text-align: center; padding: .5rem; } .bid-result { padding: 1rem 1.25rem; text-align: center; font-size: .88rem; border-top: 1px solid var(--border-color); } .bid-result.my-bid-winning { background: var(--success-light); color: var(--success); } .bid-result.my-bid-outbid { background: var(--danger-light); color: var(--danger); } .bid-count-chip { display: inline-flex; align-items: center; gap: .3rem; background: var(--gray-100); color: var(--text-muted); border-radius: var(--radius-full); font-size: .72rem; font-weight: 600; padding: .15rem .55rem; } .bid-input-area { padding: 1.25rem; } .bid-input-group { position: relative; margin-bottom: .65rem; } .bid-input-label { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); margin-bottom: .4rem; } .bid-input-prefix { position: absolute; left: .9rem; top: 50%; transform: translateY(-50%); font-weight: 700; color: var(--blue-primary); font-size: 1rem; pointer-events: none; } .bid-input-wrap input { padding-left: 2rem; font-size: 1.1rem; font-weight: 700; color: var(--blue-primary); } .bid-amount-input { padding-left: 2rem; font-size: 1.1rem; font-weight: 700; color: var(--blue-primary); } .bid-input-hint { font-size: .76rem; color: var(--text-muted); text-align: center; margin-bottom: .6rem; } .bid-terms-note { font-size: .76rem; color: var(--text-muted); text-align: center; margin-top: .6rem; } .btn-place-bid { width: 100%; font-size: 1rem; padding: .75rem; } .quick-bid-row { display: flex; gap: .4rem; margin-bottom: .75rem; } .quick-bid-btn { flex: 1; font-size: .78rem; padding: .4rem .5rem; background: var(--blue-light); color: var(--blue-primary); border: 1.5px solid var(--blue-mid); border-radius: var(--radius-sm); cursor: pointer; font-weight: 600; font-family: inherit; transition: var(--transition); } .quick-bid-btn:hover { background: var(--blue-primary); color: var(--white); border-color: var(--blue-primary); } .quick-bid-total { font-size: .8rem; color: var(--text-muted); text-align: center; margin-bottom: .6rem; } /* Bid locked states */ .bid-locked-auth, .bid-locked-payment, .bid-locked-bank, .bid-locked-closed { padding: 1.5rem 1.25rem; text-align: center; } .bid-locked-title { font-weight: 700; color: var(--text-dark); margin-bottom: .35rem; font-size: .95rem; } .bid-locked-text { font-size: .85rem; color: var(--text-muted); margin-bottom: 1rem; } .bid-locked-btn { } .bid-locked-btn-sec { margin-top: .5rem; font-size: .82rem; } /* Reserve amount display */ .reserve-amount { } .reserve-label { font-size: .72rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: .05em; font-weight: 600; } .reserve-value { font-family: 'Barlow Condensed', sans-serif; font-size: 1.2rem; font-weight: 700; color: var(--text-dark); } .price-value { font-family: 'Barlow Condensed', sans-serif; font-size: 1.4rem; font-weight: 700; color: var(--blue-primary); } .bid-row { display: flex; justify-content: space-between; align-items: center; padding: .5rem 0; font-size: .85rem; } .bid-thumb { width: 50px; height: 40px; object-fit: cover; border-radius: var(--radius-xs); border: 1px solid var(--border-color); } .bid-thumb-placeholder { width: 50px; height: 40px; background: var(--gray-200); border-radius: var(--radius-xs); display: flex; align-items: center; justify-content: center; color: var(--gray-400); font-size: .8rem; } /* Countdown chip */ .countdown-chip { display: inline-flex; align-items: center; gap: .4rem; background: var(--danger-light); color: var(--danger); border-radius: var(--radius-full); padding: .25rem .7rem; font-size: .78rem; font-weight: 700; font-family: 'Barlow Condensed', sans-serif; letter-spacing: .04em; } .countdown-display { font-family: 'Barlow Condensed', sans-serif; font-size: 1.8rem; font-weight: 700; color: var(--danger); letter-spacing: .04em; } /* Live feed panel (bid history) */ .live-feed-panel { background: var(--white); border-radius: var(--radius-md); border: 1px solid var(--border-color); overflow: hidden; } .live-feed-header { background: var(--blue-primary); padding: .75rem 1.25rem; display: flex; align-items: center; justify-content: space-between; } .live-feed-title { color: var(--white); font-size: .82rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; display: flex; align-items: center; gap: .5rem; } .live-feed-badge { font-size: .68rem; background: var(--cyan-accent); color: var(--white); padding: .1rem .45rem; border-radius: var(--radius-full); font-weight: 700; } .live-feed-list { max-height: 300px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--border-color) transparent; } .live-feed-empty { padding: 2rem; text-align: center; color: var(--text-muted); font-size: .88rem; } .live-feed-footer { padding: .65rem 1.25rem; background: var(--gray-100); border-top: 1px solid var(--border-color); text-align: center; } .live-dot-sm { width: 6px; height: 6px; border-radius: 50%; background: var(--danger); animation: pulseDot 1.4s ease infinite; display: inline-block; } .feed-item { display: flex; align-items: center; justify-content: space-between; padding: .65rem 1.25rem; border-bottom: 1px solid var(--border-color); font-size: .82rem; animation: feedSlideIn .3s ease; } .feed-item:last-child { border-bottom: none; } .feed-item:hover { background: var(--blue-light); } .feed-item.feed-item-winning { background: var(--success-light); } .feed-item-avatar { width: 28px; height: 28px; border-radius: 50%; background: var(--blue-primary); color: var(--white); font-size: .68rem; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .feed-item-bidder { display: flex; align-items: center; gap: .4rem; font-weight: 600; color: var(--text-dark); } .feed-item-amount { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 1rem; color: var(--blue-primary); } .feed-item-time { font-size: .7rem; color: var(--text-muted); } .feed-winning-chip{ font-size: .68rem; font-weight: 700; background: var(--success-light); color: var(--success); padding: .1rem .4rem; border-radius: var(--radius-full); } /* Related auctions */ .related-auctions { margin-top: 3rem; padding-top: 2rem; border-top: 1px solid var(--border-color); } .related-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1.25rem; margin-top: 1.25rem; } .related-card { background: var(--white); border-radius: var(--radius-md); border: 1px solid var(--border-color); overflow: hidden; transition: var(--transition); } .related-card:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); } .related-card-img-wrap { height: 150px; overflow: hidden; background: var(--gray-100); position: relative; } .related-card-body { padding: .85rem; } .related-card-title { font-size: .9rem; font-weight: 700; color: var(--text-dark); margin-bottom: .3rem; } .related-card-price { font-family: 'Barlow Condensed', sans-serif; font-size: 1.2rem; font-weight: 700; color: var(--blue-primary); } .related-card-timer { font-size: .75rem; color: var(--danger); font-weight: 600; } .related-badge { position: absolute; top: .5rem; left: .5rem; } /* ── §1 MISSING: HOW IT WORKS (index.php) ─────────────────── */ .how-it-works { padding: 4rem 0; background: var(--off-white); } .section-title { font-family: 'Barlow Condensed', sans-serif; font-size: clamp(1.6rem, 3.5vw, 2.4rem); font-weight: 700; color: var(--blue-primary); margin-bottom: .4rem; } .section-subtitle { color: var(--text-muted); font-size: .95rem; max-width: 560px; } .section-footer { text-align: center; margin-top: 2rem; } .section-link { font-weight: 600; color: var(--blue-primary); display: inline-flex; align-items: center; gap: .4rem; } .section-link:hover { color: var(--cyan-accent); } /* Step cards */ .step-icon { font-size: 2rem; color: var(--blue-primary); margin-bottom: .75rem; } .step-title { font-size: 1.05rem; font-weight: 700; color: var(--text-dark); margin-bottom: .4rem; } .step-desc { font-size: .88rem; color: var(--text-muted); line-height: 1.65; } .step-link { font-size: .85rem; color: var(--blue-primary); font-weight: 600; display: inline-flex; align-items: center; gap: .3rem; margin-top: .5rem; } /* HIW bank callout */ .hiw-bank-callout { background: var(--gold-light); border: 1.5px solid rgba(201,150,10,.3); border-radius: var(--radius-md); padding: 1.5rem; margin-top: 2rem; } .hiw-bank-icon { font-size: 1.5rem; color: var(--gold); margin-bottom: .5rem; } .hiw-bank-details { margin-top: .75rem; } .hiw-bank-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; margin: .75rem 0; } .hiw-bank-row { display: flex; justify-content: space-between; padding: .3rem 0; font-size: .85rem; border-bottom: 1px solid rgba(201,150,10,.12); } .hiw-bank-row:last-child { border-bottom: none; } .hiw-bank-amount { font-family: 'Barlow Condensed', sans-serif; font-size: 1.6rem; font-weight: 700; color: var(--gold); } .hiw-bank-amount-row { display: flex; justify-content: center; margin: .5rem 0; } .hiw-bank-action { margin-top: 1rem; } .hiw-verified-badge { display: inline-flex; align-items: center; gap: .4rem; background: var(--success-light); color: var(--success); padding: .3rem .75rem; border-radius: var(--radius-full); font-size: .78rem; font-weight: 700; } /* CTA strip / banner */ .cta-strip { background: linear-gradient(135deg, var(--blue-deeper) 0%, var(--blue-primary) 100%); padding: 3rem 0; } .cta-strip-inner { display: flex; align-items: center; justify-content: space-between; gap: 2rem; flex-wrap: wrap; } .cta-strip-icon { font-size: 3rem; color: var(--cyan-accent); opacity: .7; } .cta-strip-text { flex: 1; } .cta-banner-eyebrow { font-size: .78rem; text-transform: uppercase; letter-spacing: .1em; color: var(--cyan-accent); font-weight: 700; margin-bottom: .35rem; } .cta-banner-title { font-family: 'Barlow Condensed', sans-serif; font-size: clamp(1.5rem, 3vw, 2.2rem); font-weight: 700; color: var(--white); margin-bottom: .4rem; } .cta-banner-subtitle{ color: rgba(255,255,255,.72); font-size: .9rem; max-width: 500px; } .cta-banner-text { } .cta-banner-inner { } .cta-banner-actions { display: flex; gap: .85rem; flex-wrap: wrap; } .cta-countdown { display: flex; align-items: center; gap: 1rem; } /* Why PVA */ .why-pva { padding: 4rem 0; } .why-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1.25rem; } .why-card { background: var(--white); border-radius: var(--radius-md); border: 1px solid var(--border-color); padding: 1.75rem 1.5rem; text-align: center; transition: var(--transition); box-shadow: var(--shadow-sm); } .why-card:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); border-color: var(--blue-mid); } .why-card-icon { font-size: 1.8rem; margin-bottom: .75rem; } .why-icon-blue { color: var(--blue-primary); } .why-icon-cyan { color: var(--cyan-accent); } /* Featured auctions */ .featured-auctions { padding: 4rem 0; } /* Contact section (index.php) */ .contact-section { padding: 4rem 0; background: var(--off-white); } .contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem; align-items: start; } .contact-info-col { } .contact-map-col { } .contact-info-heading { font-family: 'Barlow Condensed', sans-serif; font-size: 1.8rem; font-weight: 700; color: var(--blue-primary); margin-bottom: 1.25rem; } .contact-info-card { background: var(--white); border-radius: var(--radius-md); border: 1px solid var(--border-color); padding: 1.75rem; margin-bottom: 1rem; display: flex; flex-direction: column; gap: 1.25rem; box-shadow: var(--shadow-sm); } .contact-info-row { display: flex; align-items: flex-start; gap: .75rem; } .contact-map-wrap { border-radius: var(--radius-md); overflow: hidden; height: 300px; border: 1px solid var(--border-color); background: var(--gray-200); } .contact-wa-heading { font-weight: 700; color: var(--text-dark); margin-bottom: .75rem; font-size: .95rem; } .contact-wa-buttons { display: flex; flex-direction: column; gap: .6rem; } .contact-wa-btn { display: flex; align-items: center; gap: .65rem; background: rgba(37,211,102,.1); color: #25d366; padding: .6rem 1rem; border-radius: var(--radius-sm); font-weight: 600; font-size: .9rem; text-decoration: none; transition: var(--transition); border: 1px solid rgba(37,211,102,.2); } .contact-wa-btn:hover { background: rgba(37,211,102,.2); color: #25d366; } .contact-whatsapp-group { margin-top: 1.25rem; } /* ── §1 MISSING: ADMIN PANEL (admin_dashboard.php) ────────── */ .admin-wrapper { display: flex; min-height: calc(100vh - var(--nav-height)); } .admin-sidebar-wrap { width: 240px; flex-shrink: 0; position: sticky; top: var(--nav-height); height: calc(100vh - var(--nav-height)); /* On desktop the wrap is just a pass-through container */ } /* ── Admin mobile nav — fixed bar, nothing can block it ─────── */ .admin-mobile-nav { display: none; /* hidden on desktop */ position: fixed; left: 0; right: 0; top: 0; /* pinned to the very top on mobile */ z-index: 9100; /* above everything */ pointer-events: all; } .admin-mnav-toggle { display: flex; align-items: center; gap: .75rem; width: 100%; min-height: 54px; /* big tap target */ padding: 0 1.1rem; background: #001F5C; border: none; border-bottom: 2px solid #1E90FF; color: #fff; font-family: inherit; font-size: 1rem; font-weight: 700; cursor: pointer; text-align: left; touch-action: manipulation; -webkit-tap-highlight-color: rgba(30,144,255,.3); user-select: none; pointer-events: all; } .admin-mnav-toggle:active { background: #002a7a; } .admin-mnav-current { flex: 1; } .admin-mnav-badge-wrap { line-height: 1; } .admin-mnav-badge { display: inline-block; background: #e53935; color: #fff; font-size: .7rem; font-weight: 700; border-radius: 10px; padding: .15rem .45rem; min-width: 18px; text-align: center; } .admin-mnav-arrow { transition: transform .25s; flex-shrink: 0; opacity: .7; } .admin-mnav-toggle[aria-expanded="true"] .admin-mnav-arrow { transform: rotate(180deg); } .admin-mnav-panel { position: fixed; left: 0; right: 0; top: 54px; /* right below the top-pinned toggle bar */ z-index: 9099; background: #091428; border-bottom: 2px solid #1E90FF; display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; padding: .5rem; max-height: calc(100vh - 54px); overflow-y: auto; box-shadow: 0 8px 24px rgba(0,0,0,.6); pointer-events: all; } .admin-mnav-panel[hidden] { display: none !important; } .admin-mnav-link { display: flex; align-items: center; gap: .6rem; padding: .85rem 1rem; color: rgba(255,255,255,.85); text-decoration: none; font-size: .88rem; font-weight: 500; border-radius: 6px; transition: background .12s, color .12s; min-height: 48px; touch-action: manipulation; -webkit-tap-highlight-color: rgba(30,144,255,.2); user-select: none; pointer-events: all; } .admin-mnav-link i { width: 1.1rem; text-align: center; flex-shrink: 0; color: rgba(255,255,255,.4); font-size: .88rem; } .admin-mnav-link:hover, .admin-mnav-link:focus { background: rgba(255,255,255,.1); color: #fff; text-decoration: none; } .admin-mnav-link:hover i, .admin-mnav-link:focus i { color: #fff; } .admin-mnav-link:active { background: rgba(30,144,255,.25); } .admin-mnav-link.active { background: rgba(30,144,255,.22); color: #00d4ff; font-weight: 700; } .admin-mnav-link.active i { color: #00d4ff; } .admin-mnav-logout { color: #ff7070 !important; } .admin-mnav-logout:hover { background: rgba(255,80,80,.15) !important; } .admin-mnav-logout i { color: #ff7070 !important; } .admin-sidebar { width: 100%; height: 100%; background: var(--blue-deeper); display: flex; flex-direction: column; overflow-y: auto; } .admin-sidebar-brand { padding: 1.5rem; border-bottom: 1px solid rgba(255,255,255,.1); font-size: .85rem; font-weight: 700; color: var(--cyan-accent); text-transform: uppercase; letter-spacing: .08em; display: flex; align-items: center; gap: .5rem; } .admin-section-label { padding: .85rem 1.25rem .3rem; font-size: .65rem; text-transform: uppercase; letter-spacing: .12em; color: rgba(255,255,255,.35); font-weight: 700; } .admin-main { flex: 1; padding: 2rem; overflow-x: hidden; min-width: 0; } .admin-stats-section { margin-bottom: 2rem; } .admin-filter-bar { display: flex; gap: .75rem; flex-wrap: wrap; margin-bottom: 1.25rem; align-items: flex-end; } .admin-thumb { width: 44px; height: 36px; object-fit: cover; border-radius: var(--radius-xs); border: 1px solid var(--border-color); flex-shrink: 0; } .admin-thumb-placeholder { width: 44px; height: 36px; background: var(--gray-200); border-radius: var(--radius-xs); display: flex; align-items: center; justify-content: center; color: var(--gray-400); font-size: .75rem; flex-shrink: 0; } .admin-time-cell { font-size: .8rem; color: var(--text-muted); } .status-select { font-size: .8rem; padding: .25rem .5rem; border-radius: var(--radius-xs); border: 1px solid var(--border-color); background: var(--white); cursor: pointer; font-family: inherit; } .table-sm { font-size: .82rem; } .table-sm td, .table-sm th { padding: .55rem .75rem; } /* Admin sidebar nav (uses dashboard sidebar classes + extras) */ .sidebar-link { display: flex; align-items: center; gap: .65rem; padding: .7rem 1.25rem; color: rgba(255,255,255,.72); font-size: .85rem; font-weight: 500; transition: var(--transition); cursor: pointer; border-left: 3px solid transparent; text-decoration: none; border-radius: 0; } .sidebar-link i { width: 16px; text-align: center; font-size: .9rem; flex-shrink: 0; } .sidebar-link:hover, .sidebar-link.active { color: var(--white); background: rgba(255,255,255,.08); border-left-color: var(--cyan-accent); } .sidebar-link-logout { color: rgba(255,100,100,.8) !important; } .sidebar-link-logout:hover { background: rgba(192,57,43,.15) !important; border-left-color: var(--danger) !important; } .sidebar-link-highlight { } .sidebar-badge { margin-left: auto; font-size: .68rem; font-weight: 700; padding: .1rem .4rem; border-radius: var(--radius-full); background: var(--cyan-accent); color: var(--white); flex-shrink: 0; } .sidebar-badge-amber { background: var(--warning); } .sidebar-badge-blue { background: var(--blue-primary); } .sidebar-badge-danger { background: var(--danger); } .sidebar-divider { height: 1px; background: rgba(255,255,255,.08); margin: .5rem 0; } .sidebar-user { padding: 1.25rem 1.5rem; border-bottom: 1px solid rgba(255,255,255,.1); display: flex; align-items: center; gap: .75rem; } .sidebar-bidder-badge { display: inline-flex; align-items: center; gap: .3rem; background: var(--success-light); color: var(--success); border-radius: var(--radius-full); font-size: .68rem; font-weight: 700; padding: .15rem .5rem; text-transform: uppercase; letter-spacing: .04em; } /* POP approval (admin_dashboard.php) */ .pop-approvals-grid { display: flex; flex-direction: column; gap: 1rem; } .pop-card { background: var(--white); border: 1px solid var(--border-color); border-radius: var(--radius-md); overflow: hidden; transition: var(--transition); } .pop-card:hover { box-shadow: var(--shadow-md); border-color: var(--blue-mid); } .pop-card-header { background: var(--gray-100); padding: .85rem 1.25rem; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--border-color); gap: 1rem; flex-wrap: wrap; } .pop-card-details { padding: 1.25rem; display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; align-items: start; } .pop-card-actions { padding: .75rem 1.25rem; background: var(--gray-100); border-top: 1px solid var(--border-color); display: flex; gap: .5rem; justify-content: flex-end; } .pop-detail-row { font-size: .85rem; display: flex; flex-direction: column; gap: .15rem; } .pop-file-preview { border-radius: var(--radius-sm); overflow: hidden; border: 1px solid var(--border-color); aspect-ratio: 4/3; background: var(--gray-100); display: flex; align-items: center; justify-content: center; } .pop-file-preview img { width: 100%; height: 100%; object-fit: cover; } .pop-pdf-link { display: flex; flex-direction: column; align-items: center; gap: .4rem; color: var(--danger); font-size: 2rem; text-decoration: none; } .pop-file-missing { color: var(--text-muted); font-size: .85rem; display: flex; flex-direction: column; align-items: center; gap: .3rem; } .pop-approve-form { display: flex; flex-direction: column; gap: .75rem; } .pop-bidder-input-row { display: flex; gap: .5rem; align-items: flex-end; } /* ── §1 MISSING: DASHBOARD (user_dashboard.php) ───────────── */ .dashboard-wrapper { display: flex; min-height: calc(100vh - var(--nav-height)); } .dashboard-stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 1rem; margin-bottom: 2rem; } .bidder-number-display { display: inline-flex; align-items: center; gap: .5rem; background: var(--blue-light); border: 1.5px solid var(--blue-mid); color: var(--blue-primary); padding: .35rem .85rem; border-radius: var(--radius-full); font-family: 'Barlow Condensed', sans-serif; font-size: 1.1rem; font-weight: 700; letter-spacing: .08em; } .profile-info-rows { display: flex; flex-direction: column; gap: .75rem; } .profile-info-row { display: flex; justify-content: space-between; align-items: center; padding: .65rem 0; border-bottom: 1px solid var(--border-color); font-size: .9rem; } .profile-info-row:last-child { border-bottom: none; } .status-banner { border-radius: var(--radius-md); padding: 1.25rem 1.5rem; display: flex; align-items: flex-start; gap: 1rem; margin-bottom: 1.5rem; border: 1px solid transparent; } .status-banner-registered { background: var(--gray-100); border-color: var(--border-color); } .status-banner-pending_payment { background: var(--warning-light); border-color: rgba(224,123,0,.25); } .status-banner-pending_approval { background: var(--info-light); border-color: rgba(2,132,199,.25); } .status-banner-verified_bidder { background: var(--success-light); border-color: rgba(26,158,78,.25); } .status-banner-suspended { background: var(--danger-light); border-color: rgba(192,57,43,.25); } .status-banner-icon { font-size: 1.5rem; flex-shrink: 0; margin-top: .1rem; } .status-banner-content{ flex: 1; } /* Quick actions */ .quick-actions-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: .75rem; } .quick-action-btn { display: flex; flex-direction: column; align-items: center; gap: .5rem; padding: 1rem; background: var(--white); border: 1.5px solid var(--border-color); border-radius: var(--radius-md); cursor: pointer; transition: var(--transition); text-align: center; font-size: .82rem; font-weight: 600; color: var(--text-dark); font-family: inherit; } .quick-action-btn:hover { border-color: var(--blue-primary); background: var(--blue-light); color: var(--blue-primary); } .quick-action-btn i { font-size: 1.3rem; color: var(--blue-primary); } .quick-action-urgent { border-color: var(--warning); background: var(--warning-light); } /* Recent bids (user dashboard) */ .recent-bids-list { display: flex; flex-direction: column; gap: .6rem; } .recent-bid-item { display: flex; align-items: center; gap: 1rem; padding: .75rem; background: var(--white); border: 1px solid var(--border-color); border-radius: var(--radius-sm); transition: var(--transition); } .recent-bid-item:hover { box-shadow: var(--shadow-sm); border-color: var(--blue-mid); } .recent-bid-meta { font-size: .75rem; color: var(--text-muted); margin-top: .15rem; } .recent-bid-detail { font-size: .88rem; flex: 1; } /* Activity feed */ .activity-feed { display: flex; flex-direction: column; } .activity-item { display: flex; align-items: flex-start; gap: .85rem; padding: .75rem 0; border-bottom: 1px solid var(--border-color); } .activity-item:last-child { border-bottom: none; } .activity-avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--blue-light); color: var(--blue-primary); display: flex; align-items: center; justify-content: center; font-size: .85rem; flex-shrink: 0; } .activity-content { flex: 1; } .activity-bidder { font-weight: 600; color: var(--text-dark); font-size: .88rem; } .activity-vehicle{ color: var(--text-muted); font-size: .82rem; } .activity-action { font-size: .8rem; color: var(--text-muted); } .activity-amount { font-family: 'Barlow Condensed', sans-serif; font-weight: 700; color: var(--blue-primary); font-size: 1rem; } .activity-time { font-size: .72rem; color: var(--text-muted); white-space: nowrap; } .activity-on { font-size: .78rem; color: var(--text-muted); } .live-activity { } /* Mini auction card (dashboard sidebar) */ .mini-auction-card { display: flex; align-items: center; gap: .75rem; padding: .6rem 0; border-bottom: 1px solid var(--border-color); } .mini-auction-card:last-child { border-bottom: none; } .mini-auction-title { font-size: .85rem; font-weight: 600; color: var(--text-dark); line-height: 1.3; } .mini-auction-price { font-family: 'Barlow Condensed', sans-serif; font-size: 1rem; font-weight: 700; color: var(--blue-primary); } .mini-auction-timer { font-size: .72rem; color: var(--danger); font-weight: 600; } .mini-auction-placeholder { padding: 1.5rem; text-align: center; color: var(--text-muted); font-size: .85rem; } /* VD tabs (vehicle details tabs inside auction page) */ .vd-tab-panel { display: none; } .vd-tab-panel.active { display: block; animation: fadeIn .2s ease; } .vd-tab { } /* uses .tab-btn styles */ /* Alert dismissible */ .alert-dismissible { padding-right: 2.5rem; position: relative; } /* Selected user chip (admin) */ .selected-user-chip { display: inline-flex; align-items: center; gap: .4rem; background: var(--blue-light); border: 1.5px solid var(--blue-mid); color: var(--blue-primary); padding: .25rem .65rem; border-radius: var(--radius-full); font-size: .82rem; font-weight: 600; } /* Upload / import */ .upload-drop-zone { border: 2px dashed var(--blue-mid); border-radius: var(--radius-md); padding: 2.5rem 1.5rem; text-align: center; cursor: pointer; transition: var(--transition); background: var(--blue-light); position: relative; } .upload-drop-zone:hover, .upload-drop-zone.drag-over { border-color: var(--blue-primary); background: var(--blue-mid); } .upload-drop-zone input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; } .upload-drop-icon { font-size: 2.5rem; color: var(--blue-primary); opacity: .65; margin-bottom: .75rem; } .upload-drop-text { font-size: .9rem; color: var(--text-muted); } .upload-drop-text strong { color: var(--blue-primary); } .upload-drop-hint { font-size: .75rem; color: var(--text-muted); margin-top: .35rem; } .import-errors-list { list-style: none; padding: 0; display: flex; flex-direction: column; gap: .3rem; } .import-error-item { font-size: .82rem; color: var(--danger); display: flex; align-items: flex-start; gap: .5rem; padding: .3rem 0; border-bottom: 1px solid var(--danger-light); } /* Bank details card (user dashboard) */ .bank-details-card { background: var(--gold-light); border: 1.5px solid rgba(201,150,10,.3); border-radius: var(--radius-md); padding: 1.5rem; } .bank-details-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; margin: .75rem 0; } .bank-label { font-size: .72rem; font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: .05em; } .bank-value { font-size: .95rem; font-weight: 700; color: var(--text-dark); } .bank-value-ref { font-family: 'Barlow Condensed', sans-serif; font-size: 1.2rem; font-weight: 700; color: var(--blue-primary); letter-spacing: .08em; } .bank-detail-highlight { background: rgba(201,150,10,.12); border-radius: var(--radius-xs); padding: .05rem .35rem; } /* Timeline connector (bidder status wizard) */ .timeline-connector { flex: 1; height: 2px; background: var(--border-color); } .timeline-icon { font-size: .9rem; } .timeline-content { } /* Progress bar */ .progress-bar-wrap { background: var(--gray-200); border-radius: var(--radius-full); overflow: hidden; height: 10px; } .progress-bar-fill { height: 100%; background: linear-gradient(90deg, var(--blue-primary), var(--cyan-accent)); border-radius: var(--radius-full); transition: width .4s ease; } /* Search dropdown (live search) */ .search-dropdown { position: absolute; top: 100%; left: 0; right: 0; background: var(--white); border: 1.5px solid var(--border-color); border-top: none; border-radius: 0 0 var(--radius-sm) var(--radius-sm); box-shadow: var(--shadow-md); z-index: 500; max-height: 320px; overflow-y: auto; } .search-dropdown-item { display: flex; align-items: center; gap: .75rem; padding: .75rem 1rem; font-size: .88rem; cursor: pointer; border-bottom: 1px solid var(--border-color); transition: background .15s; text-decoration: none; color: inherit; } .search-dropdown-item:last-child { border-bottom: none; } .search-dropdown-item:hover { background: var(--blue-light); } /* ── §2 RESPONSIVE ADDITIONS ──────────────────────────────── Dev Guide §2: Ensure the auth-page collapses correctly when APP_URL path is local; left panel hides on small screens. */ @media (max-width: 900px) { .auth-page { grid-template-columns: 1fr; } .auth-left { display: none; } .auth-right { padding: 2rem 1.25rem; justify-content: flex-start; padding-top: 2rem; } .auth-card { max-width: 540px; } .auth-eft-note { max-width: 540px; } .form-row-2 { grid-template-columns: 1fr; } .auction-layout { grid-template-columns: 1fr; } .auction-right-col { position: static; } /* Admin: fixed mobile nav replaces sidebar */ .admin-mobile-nav { display: block; } /* show the fixed bar */ .admin-wrapper { flex-direction: column; } .admin-sidebar-wrap { display: none; } /* hide desktop sidebar entirely */ /* On admin, the admin bar IS the top nav — hide the redundant site nav/ticker so the admin bar can pin to 0,0 without overlap. */ .page-admin .navbar, .page-admin .ticker-bar { display: none; } /* push content below the fixed toggle bar (54px) */ .admin-main { padding: calc(54px + 1rem) 1rem 1rem; } .contact-grid { grid-template-columns: 1fr; } .hiw-bank-grid { grid-template-columns: 1fr; } .bank-details-grid { grid-template-columns: 1fr; } .pop-card-details { grid-template-columns: 1fr; } .cta-strip-inner { flex-direction: column; text-align: center; } .hero-trust { gap: 1rem; } .stats-strip-inner { gap: 0; flex-wrap: wrap; } .stat-divider { display: none; } .stats-strip-inner .stat-card { flex: 1; min-width: 140px; padding: 1rem; } } @media (max-width: 600px) { .stats-strip { padding: 1.25rem 0; } .stats-strip-inner { display: grid; grid-template-columns: 1fr 1fr; gap: 0; } .stats-strip-inner .stat-card { min-width: 0; border-radius: 0; border: none; border-bottom: 1px solid var(--border-color); border-right: 1px solid var(--border-color); padding: .85rem 1rem; } .stats-strip-inner .stat-card:nth-child(even) { border-right: none; } .stats-strip-inner .stat-card:nth-last-child(-n+2) { border-bottom: none; } .stat-card-number { font-size: 1.65rem !important; } } @media (max-width: 640px) { .auth-card { padding: 1.75rem 1.25rem; max-width: 100%; } .auth-eft-note { max-width: 100%; } .page-hero-inner { flex-direction: column; align-items: flex-start; gap: .75rem; } .filter-bar-wrap .filter-bar { flex-direction: column; } .filter-group { min-width: 100%; } .filter-range-pair { flex-direction: row; } .auction-grid { grid-template-columns: 1fr; } .related-grid { grid-template-columns: 1fr; } .why-grid { grid-template-columns: 1fr 1fr; } .quick-actions-grid { grid-template-columns: repeat(2, 1fr); } .hero-ctas { flex-direction: column; } .hero-ctas .btn { width: 100%; } } /* ── Analytics & Manual Bid Tab Styles ─────────────────────── */ .stat-card-blue { border-left: 3px solid #1565c0; } .stat-card-green { border-left: 3px solid #2e7d32; } .stat-card-cyan { border-left: 3px solid #0097a7; } .stat-card-grey { border-left: 3px solid #546e7a; } .autocomplete-dropdown { position: absolute; left: 0; right: 0; top: 100%; background: #fff; border: 1px solid var(--border-color, #ddd); border-radius: 6px; box-shadow: 0 4px 12px rgba(0,0,0,.12); max-height: 240px; overflow-y: auto; z-index: 200; } .autocomplete-item { padding: .65rem 1rem; cursor: pointer; font-size: .9rem; border-bottom: 1px solid #f0f0f0; transition: background .15s; } .autocomplete-item:last-child { border-bottom: none; } .autocomplete-item:hover { background: var(--blue-light, #e3f2fd); } .selected-item-preview { margin-top: .5rem; padding: .6rem .9rem; background: #f1f8e9; border: 1px solid #aed581; border-radius: 6px; font-size: .88rem; } /* Make autocomplete parent a positioned container */ .form-group { position: relative; } /* ============================================================ EVENTS LISTING — banner-card grid (events.php) ============================================================ */ .events-list-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 1.5rem; } .event-list-card { display: flex; flex-direction: column; background: #fff; border: 1px solid #e5eaf0; border-radius: 14px; overflow: hidden; text-decoration: none; color: inherit; box-shadow: 0 2px 10px rgba(0,0,0,.05); transition: transform .2s, box-shadow .2s, border-color .2s; } .event-list-card:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(0,63,115,.15); border-color: #005BA1; } .event-list-card.event-list-live { border-color: #25D366; box-shadow: 0 2px 14px rgba(37,211,102,.2); } .event-list-banner { position: relative; width: 100%; aspect-ratio: 16/9; background: linear-gradient(135deg, #003f73, #005BA1); overflow: hidden; } .event-list-banner img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s; } .event-list-card:hover .event-list-banner img { transform: scale(1.05); } .event-list-banner-fallback::before { content: "\f073"; /* calendar icon */ font-family: "Font Awesome 6 Free"; font-weight: 900; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 4rem; color: rgba(255,255,255,.35); } .event-list-banner-overlay { position: absolute; top: .75rem; left: .75rem; right: .75rem; display: flex; justify-content: space-between; gap: .5rem; z-index: 2; } .event-list-banner-overlay .badge { backdrop-filter: blur(8px); box-shadow: 0 2px 8px rgba(0,0,0,.25); } .event-list-hot { background: rgba(226,88,34,.95); color: #fff; font-size: .7rem; font-weight: 700; padding: .3rem .65rem; border-radius: 50px; text-transform: uppercase; letter-spacing: .03em; box-shadow: 0 2px 8px rgba(226,88,34,.4); } .event-list-date { position: absolute; bottom: .75rem; left: .75rem; background: rgba(255,255,255,.95); border-radius: 10px; padding: .5rem .85rem; text-align: center; box-shadow: 0 2px 10px rgba(0,0,0,.2); z-index: 2; line-height: 1; } .event-list-date .eld-day { display: block; font-size: 1.6rem; font-weight: 800; color: #003f73; font-family: 'Barlow Condensed', sans-serif; } .event-list-date .eld-month { display: block; font-size: .7rem; font-weight: 700; color: #e25822; text-transform: uppercase; letter-spacing: .08em; margin-top: .15rem; } .event-list-date .eld-year { display: block; font-size: .65rem; color: #888; margin-top: .1rem; } .event-list-body { padding: 1.25rem 1.25rem 1.1rem; display: flex; flex-direction: column; flex: 1; } .event-list-top { display: flex; gap: .5rem; margin-bottom: .6rem; } .event-list-bank { background: #eef4fa; color: #005BA1; font-size: .72rem; font-weight: 700; padding: .25rem .6rem; border-radius: 6px; text-transform: uppercase; letter-spacing: .03em; } .event-list-title { color: #003f73; font-size: 1.1rem; line-height: 1.3; margin: 0 0 .6rem; font-weight: 700; } .event-list-meta { display: flex; flex-wrap: wrap; gap: .75rem; font-size: .82rem; color: #666; margin-bottom: .6rem; } .event-list-meta i { color: #005BA1; margin-right: .2rem; } .event-list-venue { font-size: .82rem; color: #666; margin: 0 0 .75rem; } .event-list-venue i { color: #e25822; margin-right: .25rem; } .event-list-desc { font-size: .85rem; color: #555; line-height: 1.55; margin: 0 0 .9rem; } .event-list-cta { margin-top: auto; align-self: flex-start; color: #005BA1; font-weight: 700; font-size: .88rem; display: inline-flex; align-items: center; gap: .4rem; padding-top: .3rem; border-top: 1px dashed #e0e6ee; width: 100%; padding: .6rem 0 0; transition: gap .2s; } .event-list-card:hover .event-list-cta { gap: .65rem; } @media (max-width: 600px) { .events-list-grid { grid-template-columns: 1fr; gap: 1rem; } .event-list-title { font-size: 1rem; } .event-list-date .eld-day { font-size: 1.3rem; } .event-list-banner { aspect-ratio: 16/10; } } /* Admin mobile nav: single-column grid on very small phones */ @media (max-width: 375px) { .admin-mnav-panel { grid-template-columns: 1fr; } } /* ============================================================ ADMIN DASHBOARD — MOBILE POLISH Improves admin_dashboard.php on phones: stacked headers, wrapped bulk bars, readable tables, full-width inline panels. ============================================================ */ @media (max-width: 768px) { /* Dashboard header stacks on mobile */ .dashboard-header { flex-direction: column; align-items: stretch !important; gap: .75rem; } .dashboard-header > * { width: 100%; } .dashboard-header .btn { width: 100%; justify-content: center; } /* Filter bars stack */ .admin-filter-bar { flex-direction: column; gap: .6rem; } .admin-filter-bar > * { width: 100% !important; min-width: 0 !important; } /* Stats grid */ .admin-stats-grid, .dashboard-stats { grid-template-columns: repeat(2, 1fr) !important; } /* Auction bulk bar wraps */ #auctionBulkBar { flex-direction: column; align-items: stretch !important; } #auctionBulkBar .btn { width: 100%; justify-content: center; } /* Invoice builder 1-col on phones */ .invoice-builder-grid { grid-template-columns: 1fr !important; } /* Tables scroll horizontally instead of squishing */ .table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; } .table-responsive .table { min-width: 640px; } /* Table action buttons wrap neatly */ .table-actions { display: flex; flex-wrap: wrap; gap: .3rem; } /* Inline per-user expandable rows: full-width, less padding */ #user-email-row-[id] td, #user-reset-row-[id] td { padding: .75rem !important; } .inline-user-email-form, .inline-user-reset-form { width: 100%; } /* Email tab grid-2 becomes 1-col (already handled) — but make sure card padding is comfortable */ .card { padding: 1rem; } /* Email format toggle wraps cleanly */ .email-format-toggle { display: flex; flex-wrap: wrap; gap: .3rem; } /* Bigger tap targets for icon-only action buttons */ .btn-sm { min-height: 40px; } } /* ── User dashboard sidebar → horizontal tab bar on mobile ─── */ @media (max-width: 768px) { .dashboard-wrapper { flex-direction: column; } .dashboard-sidebar { width: 100% !important; height: auto !important; position: sticky !important; top: var(--nav-height, 72px); z-index: 200; flex-direction: row; overflow-x: auto; overflow-y: hidden; padding: 0; scrollbar-width: none; /* right-edge fade hint that content is scrollable */ -webkit-mask-image: linear-gradient(to right, #000 90%, transparent 100%); mask-image: linear-gradient(to right, #000 90%, transparent 100%); } .dashboard-sidebar::-webkit-scrollbar { display: none; } .sidebar-user { display: none; } .sidebar-bidder-badge { display: none; } .sidebar-nav { display: flex; flex-direction: row; padding: 0; flex: 1; width: max-content; } .sidebar-link { flex-direction: column; padding: .7rem .9rem; font-size: .72rem; white-space: nowrap; border-left: none !important; border-bottom: 3px solid transparent; gap: .25rem; min-width: 68px; min-height: 56px; text-align: center; justify-content: center; align-items: center; touch-action: manipulation; -webkit-tap-highlight-color: rgba(0,212,255,.15); user-select: none; } .sidebar-link i { width: auto; font-size: 1rem; } .sidebar-link.active { border-left-color: transparent !important; border-bottom-color: #00d4ff; background: rgba(255,255,255,.1); color: #fff; } .sidebar-link:hover { border-left-color: transparent !important; background: rgba(255,255,255,.07); } .sidebar-badge { margin-left: 0; } .sidebar-divider { display: none; } .dashboard-main { padding: 1rem !important; } } @media (max-width: 480px) { .dashboard-main { padding: .75rem !important; } .card { padding: .85rem; border-radius: 10px; } .dashboard-header h1 { font-size: 1.3rem; } .dashboard-header p { font-size: .85rem; } /* Inline forms breathing room */ .inline-user-email-form .form-group, .inline-user-reset-form .form-group { margin-bottom: .5rem; } /* Forms inside cards */ .form-control, .btn { font-size: .92rem; } /* Invoice builder total box */ #invTotalPreview { font-size: 1rem !important; } /* Public pages — better contact buttons on phones */ .footer-grid { gap: 1.5rem; } /* Refund table horizontal scroll */ .rf-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; } .rf-table { min-width: 640px; } /* Stats grid 2 cols on small phones */ .admin-stats-grid, .dashboard-stats { grid-template-columns: repeat(2, 1fr) !important; } /* Touch-friendly form inputs */ .form-control, select.form-control { min-height: 44px; } .btn { min-height: 44px; } } /* ═══════════════════════════════════════════════════════════ EVENT BANNER HERO — clean image at native 820×360, no overlay ═══════════════════════════════════════════════════════════ */ .event-banner-hero { width: 100%; background: #eef3f8; overflow: hidden; line-height: 0; display: flex; justify-content: center; padding: 1rem 0; } .event-banner-hero img { display: block; width: 100%; max-width: 820px; height: auto; aspect-ratio: 820 / 360; object-fit: contain; object-position: center; border-radius: 12px; box-shadow: 0 6px 20px rgba(0, 63, 115, .12); } @media (max-width: 860px) { .event-banner-hero { padding: .5rem; } .event-banner-hero img { border-radius: 10px; } } @media (max-width: 480px) { .event-banner-hero { padding: .25rem; } .event-banner-hero img { border-radius: 8px; } } /* Event-list banner reuses same 820x360 ratio inside the card */ .event-list-banner { aspect-ratio: 820 / 360 !important; } /* ═══════════════════════════════════════════════════════════ EMAIL TEMPLATES CARD — tile grid ═══════════════════════════════════════════════════════════ */ .email-templates-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: .9rem; } .email-template-tile { display: flex; align-items: center; gap: .9rem; padding: 1rem 1.1rem; background: #fff; border: 1px solid #dde7f1; border-radius: 12px; cursor: pointer; text-align: left; transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; font: inherit; color: inherit; width: 100%; } .email-template-tile:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0, 63, 115, .1); border-color: #005BA1; } .email-template-tile .etpl-icon { width: 46px; height: 46px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; font-size: 1.15rem; flex-shrink: 0; } .email-template-tile .etpl-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .email-template-tile .etpl-text strong { color: #003f73; font-size: .95rem; } .email-template-tile .etpl-text small { color: #6a7683; font-size: .78rem; line-height: 1.35; } @media (max-width: 480px) { .email-template-tile { padding: .85rem; gap: .7rem; } .email-template-tile .etpl-icon { width: 40px; height: 40px; font-size: 1rem; } } /* ════════════════════════════════════════════════════════════ AUCTION HUB GROUP — LIGHT THEME COMPONENT STYLES Bright, professional, high-readability palette. Navy navbar/hero/footer for brand; white content areas. ════════════════════════════════════════════════════════════ */ /* ── Cards ──────────────────────────────────────────────── */ .card { background: #fff; border-color: var(--border-color); box-shadow: var(--shadow-sm); } .card:hover { border-color: #b0c8e8; box-shadow: var(--shadow-md); } .card-header { background: var(--gray-100); border-bottom-color: var(--border-color); } .card-header h3, .card-header h4 { color: var(--blue-primary); } .card-footer { background: var(--gray-100); border-top-color: var(--border-color); } /* ── Auction cards ───────────────────────────────────────── */ .auction-card { background: #fff; border-color: var(--border-color); box-shadow: var(--shadow-sm); } .auction-card:hover { border-color: var(--blue-primary); box-shadow: var(--shadow-lg); } .auction-card-title { color: var(--text-dark); } .auction-card-specs { color: var(--text-muted); } .auction-card-pricing { border-top-color: var(--border-color); } .auction-card-current-bid .bid-label { color: var(--text-muted); } .auction-card-current-bid .bid-amount { color: var(--blue-primary); } .auction-card-countdown .time-label { color: var(--text-muted); } .auction-card-footer { background: var(--gray-100); border-top-color: var(--border-color); } /* ── Stat & info cards ───────────────────────────────────── */ .stat-card { background: #fff; border-color: var(--border-color); box-shadow: var(--shadow-sm); } .stat-card-value { color: var(--text-dark); } .stat-card-label { color: var(--text-muted); } .stat-card-icon.blue { background: rgba(0,93,219,0.10); color: var(--blue-primary); } .stat-card-icon.cyan { background: rgba(30,144,255,0.10); color: #1E90FF; } .stat-card-icon.green { background: rgba(34,197,94,0.12); } .stat-card-icon.gold { background: rgba(251,191,36,0.12); } .stat-card-icon.red { background: rgba(239,68,68,0.12); } .stat-card-icon.warn { background: rgba(245,158,11,0.12); } .info-card { background: #fff; border-color: var(--border-color); box-shadow: var(--shadow-sm); } .info-card:hover { border-color: var(--blue-primary); box-shadow: var(--shadow-md); } .info-card-icon { background: rgba(0,93,219,0.10); color: var(--blue-primary); } .info-card h3 { color: var(--text-dark); } .info-card p { color: var(--text-body); } /* ── Section headers ─────────────────────────────────────── */ .section-header h2 { color: var(--blue-deeper); } .section-header p { color: var(--text-muted); } .section-header h2::after { background: var(--blue-primary); } /* ── Forms ───────────────────────────────────────────────── */ label, .form-label { color: var(--text-dark); } .form-control { background: #fff; color: var(--text-dark); border-color: var(--gray-300); } .form-control:focus { border-color: var(--blue-primary); box-shadow: 0 0 0 3px rgba(0,93,219,0.12); background: #fff; } .form-control::placeholder { color: var(--text-muted); } .form-control:disabled { background: var(--gray-100); color: var(--text-muted); } select.form-control { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23005DDB' d='M6 8L1 3h10z'/%3E%3C/svg%3E"); } .form-hint { color: var(--text-muted); } /* ── Filter bar — white ──────────────────────────────────── */ .filter-bar-wrap { background: #fff; border-bottom: 1px solid var(--border-color); box-shadow: 0 2px 12px rgba(0,31,92,0.07); } .filter-bar { background: #fff; border-color: var(--border-color); } .filter-label { color: var(--text-muted); } .form-input, .form-select { background: var(--gray-100); color: var(--text-dark); border-color: var(--gray-300); } .form-input:focus, .form-select:focus { background: #fff; border-color: var(--blue-primary); box-shadow: 0 0 0 3px rgba(0,93,219,0.10); color: var(--text-dark); } .form-input::placeholder { color: var(--text-muted); } /* ── Upload zone ─────────────────────────────────────────── */ .upload-zone { background: #f4f8ff; border-color: var(--gray-300); } .upload-zone:hover, .upload-zone.drag-over { background: rgba(0,93,219,0.06); border-color: var(--blue-primary); } .upload-zone-icon { color: var(--blue-primary); } .upload-zone-text { color: var(--text-body); } .upload-zone-text strong { color: var(--blue-primary); } /* ── Auth pages ──────────────────────────────────────────── */ .auth-right { background: #fff; } .auth-card { background: #fff; border: 1px solid var(--border-color); box-shadow: var(--shadow-md); } .auth-heading { color: var(--text-dark); } .auth-subheading { color: var(--text-muted); } .auth-tab-btn { background: var(--gray-100); color: var(--text-muted); } .auth-tab-btn:hover { background: rgba(0,93,219,0.08); color: var(--blue-primary); } .auth-tab-btn.active { background: var(--blue-primary); color: #fff; } .auth-tabs { border-color: var(--border-color); } .auth-switch-text { color: var(--text-muted); } .auth-switch-btn { color: var(--blue-primary); } .auth-heading::after { background: var(--blue-primary); } /* ── Tables ──────────────────────────────────────────────── */ .table th { background: var(--gray-100); color: var(--text-dark); border-color: var(--border-color); } .table td { color: var(--text-body); border-color: var(--border-color); } .table tbody tr:hover td { background: rgba(0,93,219,0.04); } .table-striped tbody tr:nth-child(even) td { background: var(--gray-100); } /* ── Badges ──────────────────────────────────────────────── */ .badge-active { background: rgba(34,197,94,0.12); color: #16a34a; } .badge-upcoming { background: rgba(30,144,255,0.12); color: #1E90FF; } .badge-closed { background: var(--gray-100); color: var(--text-muted); } .badge-verified { background: rgba(0,93,219,0.10); color: var(--blue-primary); } .badge-registered { background: var(--gray-100); color: var(--text-muted); } .badge-cyan { background: rgba(30,144,255,0.10); color: #1E90FF; } .badge-gold { background: rgba(251,191,36,0.14); color: #b45309; } .badge-pending { background: rgba(245,158,11,0.12); color: #d97706; } .badge-approved { background: rgba(34,197,94,0.12); color: #16a34a; } /* ── Event list cards ────────────────────────────────────── */ .event-list-card { background: #fff !important; border-color: var(--border-color) !important; box-shadow: var(--shadow-sm) !important; } .event-list-card:hover { border-color: var(--blue-primary) !important; box-shadow: var(--shadow-md) !important; } .event-list-title { color: var(--text-dark) !important; } .event-list-desc { color: var(--text-body) !important; } .event-list-meta { color: var(--text-muted) !important; } .event-list-meta i { color: var(--blue-primary) !important; } .event-list-venue { color: var(--text-muted) !important; } .event-list-venue i { color: #e25822 !important; } .event-list-bank { background: rgba(0,93,219,0.08) !important; color: var(--blue-primary) !important; } .event-list-date .eld-day { color: var(--text-dark) !important; } .event-list-date .eld-month { color: var(--blue-primary) !important; } .event-list-date .eld-year { color: var(--text-muted) !important; } .event-list-cta { color: var(--blue-primary) !important; border-top-color: var(--border-color) !important; } /* ── EMAIL TEMPLATE TILES ─────────────────────────────────── */ .email-template-tile { background: #fff; border-color: var(--border-color); } .email-template-tile:hover { border-color: var(--blue-primary); box-shadow: var(--shadow-md); } .email-template-tile .etpl-text strong { color: var(--text-dark); } .email-template-tile .etpl-text small { color: var(--text-muted); } /* ── EVENT VEHICLE CARDS (inside event detail page) ─────── */ .event-vehicles-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1.5rem; } .event-vehicle-card { background: #fff; border-radius: var(--radius-md); border: 1px solid var(--border-color); box-shadow: var(--shadow-sm); overflow: hidden; display: flex; flex-direction: column; text-decoration: none; color: inherit; transition: var(--transition); position: relative; } .event-vehicle-card:hover { border-color: var(--blue-primary); box-shadow: var(--shadow-lg); transform: translateY(-4px); color: inherit; } .event-vehicle-hot { border-color: rgba(226,88,34,0.45); box-shadow: 0 0 18px rgba(226,88,34,0.14); } .event-vehicle-hot:hover { border-color: rgba(226,88,34,0.75); box-shadow: 0 8px 36px rgba(226,88,34,0.28); } .ev-card-img { position: relative; height: 210px; overflow: hidden; background: var(--gray-100); flex-shrink: 0; } .ev-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; } .event-vehicle-card:hover .ev-card-img img { transform: scale(1.06); } .ev-card-hot-badge { position: absolute; top: .75rem; left: .75rem; background: #e25822; color: #fff; font-size: .72rem; font-weight: 700; padding: .25rem .65rem; border-radius: var(--radius-full); display: inline-flex; align-items: center; gap: .3rem; z-index: 1; box-shadow: 0 2px 8px rgba(226,88,34,0.45); } .ev-card-status { position: absolute; top: .75rem; right: .75rem; z-index: 1; } .ev-card-body { padding: 1.1rem; flex: 1; display: flex; flex-direction: column; gap: .4rem; } .ev-card-title { font-family: 'Barlow Condensed', sans-serif; font-size: 1.05rem; font-weight: 700; color: var(--text-dark); line-height: 1.2; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .ev-card-price { font-family: 'Barlow Condensed', sans-serif; font-size: 1.5rem; font-weight: 700; color: var(--blue-primary); line-height: 1; margin-top: auto; padding-top: .5rem; } .ev-card-meta { display: flex; gap: .5rem; flex-wrap: wrap; font-size: .72rem; color: rgba(255,255,255,0.50); padding-top: .5rem; border-top: 1px solid rgba(30,144,255,0.12); margin-top: .4rem; } .ev-card-meta span { display: inline-flex; align-items: center; gap: .25rem; } .ev-card-footer-btn { display: block; padding: .7rem 1.1rem; background: linear-gradient(135deg, #002B7F, #005DDB); color: var(--white); font-size: .82rem; font-weight: 600; text-align: center; text-decoration: none; letter-spacing: .03em; border-top: 1px solid rgba(30,144,255,0.20); transition: var(--transition); } .event-vehicle-card:hover .ev-card-footer-btn { background: linear-gradient(135deg, #005DDB, #1E90FF); } /* ── Mobile responsive for event cards ──────────────────── */ @media (max-width: 640px) { .event-vehicles-grid { grid-template-columns: 1fr; gap: 1rem; } .ev-card-img { height: 180px; } } /* ════════════════════════════════════════════════════════════ LIGHT THEME — COMPONENT REFINEMENTS ════════════════════════════════════════════════════════════ */ /* ── Pagination ──────────────────────────────────────────── */ .page-btn { background: #fff; border-color: var(--border-color); color: var(--text-dark); } .page-btn:hover { background: var(--blue-primary); border-color: var(--blue-primary); color: #fff; } .page-btn.active { background: var(--blue-primary); border-color: var(--blue-primary); color: #fff; box-shadow: 0 2px 10px rgba(0,93,219,0.30); } .page-btn:disabled { background: var(--gray-100); border-color: var(--border-color); color: var(--text-muted); } .pagination-link { background: #fff; border-color: var(--border-color); color: var(--text-dark); } .pagination-link:hover { background: var(--blue-primary); border-color: var(--blue-primary); color: #fff; } .pagination-active .pagination-link { background: var(--blue-primary); border-color: var(--blue-primary); color: #fff; box-shadow: 0 2px 10px rgba(0,93,219,0.30); } .pagination-disabled .pagination-link { background: var(--gray-100); color: var(--text-muted); } .pagination-ellipsis { color: var(--text-muted); } .pagination-summary { color: var(--text-muted); } /* ── Bid panel ───────────────────────────────────────────── */ .bid-panel { background: #fff; border-color: var(--border-color); box-shadow: var(--shadow-md); } .bid-panel-header { background: linear-gradient(90deg, #001F5C, #005DDB); } .bid-panel-price { color: var(--blue-primary); } .bid-panel-price-label { color: var(--text-muted); } .bid-panel-timer, .bid-panel-status-row, .bid-panel-reserve { border-color: var(--border-color); } .bid-panel-bid-count { color: var(--text-muted); } .bid-panel-reserve-label { color: var(--text-muted); } .bid-panel-reserve-price { color: var(--text-dark); } .bid-panel-increment { color: var(--text-muted); } .bid-current-price { background: #f0f6ff; } .bid-panel-my-bid { color: var(--blue-primary); } .bid-input-hint { color: var(--text-muted); } /* ── Bid locked ──────────────────────────────────────────── */ .bid-locked { background: var(--gray-100); border-color: var(--border-color); } .bid-locked-title { color: var(--text-dark); } .bid-locked-text { color: var(--text-muted); } /* ── Vehicle specs ───────────────────────────────────────── */ .vd-tab-panel, .vehicle-details { background: #fff; border-radius: 8px; padding: 1rem; } .specs-table td:last-child { color: var(--text-dark); } .specs-label { color: var(--text-muted); } .specs-table tr { border-color: var(--border-color); } .vehicle-details-tabs { border-color: var(--border-color); } .vd-tab { color: var(--text-muted); border-color: transparent; } .vd-tab:hover { color: var(--blue-primary); } .vd-tab.active { color: var(--blue-primary); border-bottom-color: var(--blue-primary); } /* ── Why-trust cards ─────────────────────────────────────── */ .why-card { background: #fff; border-color: var(--border-color); box-shadow: var(--shadow-sm); } .why-card:hover { border-color: var(--blue-primary); box-shadow: var(--shadow-md); } .why-card h3 { color: var(--text-dark); } .why-card p { color: var(--text-body); } .why-icon-blue { color: var(--blue-primary); } .why-icon-cyan { color: #1E90FF; } /* ── Related auction cards ───────────────────────────────── */ .related-card { background: #fff; border-color: var(--border-color); box-shadow: var(--shadow-sm); } .related-card:hover { border-color: var(--blue-primary); box-shadow: var(--shadow-md); } .related-card-title { color: var(--text-dark); } .related-card-price { color: var(--blue-primary); } /* ── Contact info card ───────────────────────────────────── */ .contact-info-card { background: #fff; border-color: var(--border-color); box-shadow: var(--shadow-sm); } /* ── Section backgrounds ─────────────────────────────────── */ .why-pva { background: #f4f8ff; } .contact-section { background: #f4f8ff; } /* ── Tab nav ─────────────────────────────────────────────── */ .tab-nav { border-color: var(--border-color); } .tab-btn { color: var(--text-muted); } .tab-btn:hover { color: var(--blue-primary); } .tab-btn.active { color: var(--blue-primary); border-bottom-color: var(--blue-primary); } /* ── Event-banner hero ───────────────────────────────────── */ .event-banner-hero { background: rgba(0,10,40,0.55); } /* ════════════════════════════════════════════════════════════ ADMIN PANEL — MOBILE RESPONSIVE IMPROVEMENTS ════════════════════════════════════════════════════════════ */ /* All admin data tables get a scroll wrapper */ .admin-table-wrap, .data-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; } /* Minimum widths so tables don't crush */ .data-table { min-width: 600px; width: 100%; border-collapse: collapse; } /* Dashboard header row flex-wrap */ .dashboard-header { display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: 1rem; } /* Admin stats cards grid */ .admin-stats-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 1rem; } /* Quick action cards wrap */ .quick-actions-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: .75rem; } @media (max-width: 900px) { /* Dashboard header stacks */ .dashboard-header { flex-direction: column; align-items: flex-start; } /* Full-width buttons in header */ .dashboard-header .btn { width: 100%; text-align: center; } } @media (max-width: 768px) { /* Admin data tables: scroll container */ .admin-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--border-color, #e8edf2); border-radius: 10px; } /* Inline action button groups stack */ .action-btns { flex-wrap: wrap; } /* Overview stat cards: 2 per row */ .admin-stats-grid { grid-template-columns: repeat(2, 1fr); } /* Forms inside modals go single column */ .modal-grid-2 { grid-template-columns: 1fr !important; } /* Text truncation in table cells */ .td-truncate { max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Admin tab subtabs horizontal scroll */ .admin-subtabs { overflow-x: auto; white-space: nowrap; display: flex; } /* POP approval body single column */ .pop-approval-body { grid-template-columns: 1fr !important; } } @media (max-width: 480px) { /* Overview stat cards: still 2 per row (don't go to 1) */ .admin-stats-grid { grid-template-columns: repeat(2, 1fr); gap: .6rem; } /* Dashboard header actions fill width */ .dashboard-header > div:last-child { width: 100%; } .dashboard-header > div:last-child .btn { width: 100%; } /* Table action buttons: icon only */ .action-btn-label { display: none; } /* Sidebar link labels shorten */ .sidebar-link span { font-size: .65rem; } /* Form inside admin card: padding reduce */ .admin-form-card { padding: 1rem; } /* News post grid: single column */ .news-admin-grid { grid-template-columns: 1fr !important; } .team-admin-grid { grid-template-columns: 1fr !important; } /* Newsletter campaign card: stack */ .campaign-card-row { flex-direction: column; } .campaign-card-row .campaign-actions { width: 100%; display: flex; gap: .5rem; } } /* ================================================================ §ADMIN-MOBILE — Comprehensive Admin Panel Mobile Fixes Applies to admin_dashboard.php, manage_auction.php, and any page using .admin-wrapper / .admin-main / modal overlays. ================================================================ */ /* ── Stat card grid: keep 2-col inside admin on small phones ──── */ @media (max-width: 480px) { /* Override global grid-4→1col; admin stat cards look better 2-col */ .admin-main .grid-4 { grid-template-columns: repeat(2, 1fr) !important; gap: .6rem; } /* But let manage_auction.php form rows collapse to 1-col */ .admin-main .form-row { grid-template-columns: 1fr !important; } } /* ── Modals: full-width bottom-sheet on small phones ─────────── */ @media (max-width: 600px) { /* Anchor overlay to bottom, not center */ .modal-overlay { align-items: flex-end; padding: 0; } /* Modal slides up from bottom */ .modal-box, .modal-box.modal-lg, .modal-box.modal-xl { max-width: 100% !important; width: 100% !important; margin: 0 !important; border-radius: 18px 18px 0 0 !important; max-height: 92vh; transform: translateY(100%); } .modal-overlay.open .modal-box, .modal-overlay.open .modal-box.modal-lg, .modal-overlay.open .modal-box.modal-xl { transform: translateY(0); } /* Reduce header/body/footer padding inside modal */ .modal-header { padding: 1rem 1.1rem .85rem; } .modal-body { padding: 1rem 1.1rem; } .modal-footer { padding: .85rem 1.1rem; flex-direction: column; gap: .5rem; } .modal-footer .btn { width: 100%; text-align: center; justify-content: center; } /* Drag handle hint at top of bottom-sheet */ .modal-box::before { content: ''; display: block; width: 40px; height: 4px; background: #d0d8e4; border-radius: 2px; margin: .6rem auto -.2rem; } } /* ── Admin form cards: comfortable padding on phones ─────────── */ @media (max-width: 600px) { .admin-form-card { padding: 1.1rem; } /* Section headings inside form cards */ .admin-form-card h3, .admin-form-card .form-section-title { font-size: 1rem; } /* Upload zones: shorter on phones */ .upload-drop-zone { min-height: 90px; padding: 1rem; } /* Submit bar at bottom of manage form */ .admin-form-submit-bar { flex-direction: column; gap: .65rem; } .admin-form-submit-bar .btn { width: 100%; text-align: center; } /* Dashboard header button row */ .dashboard-header { gap: .75rem; } .dashboard-header .btn { font-size: .82rem; padding: .5rem .9rem; } } /* ── Bulk action bar: wrap on small screens ───────────────────── */ @media (max-width: 640px) { #auctionBulkBar, .bulk-action-bar { flex-wrap: wrap; gap: .5rem; padding: .6rem .8rem; } #auctionBulkBar .btn, .bulk-action-bar .btn { font-size: .78rem; padding: .42rem .75rem; } #auctionBulkBar span, .bulk-action-bar .bulk-count { width: 100%; font-size: .8rem; } } /* ── Admin tabs: horizontally scrollable on phones ───────────── */ @media (max-width: 640px) { .admin-tabs, .tab-nav { overflow-x: auto; -webkit-overflow-scrolling: touch; flex-wrap: nowrap; scrollbar-width: none; } .admin-tabs::-webkit-scrollbar, .tab-nav::-webkit-scrollbar { display: none; } .tab-btn { flex-shrink: 0; font-size: .78rem; padding: .55rem .8rem; } } /* ── Data tables: ensure horizontal scroll on all screen sizes ── */ @media (max-width: 900px) { .admin-main table:not(.no-scroll) { min-width: 580px; } .admin-main .table-outer, .admin-main [style*="overflow-x"] { overflow-x: auto; -webkit-overflow-scrolling: touch; } } /* ── Inline action buttons: smaller but always visible ───────── */ @media (max-width: 480px) { .action-btn { padding: .3rem .45rem; font-size: .72rem; } /* Keep edit/delete labels on the most critical tables */ .action-btn .action-btn-label { display: none; } } /* ── POP approval card: better mobile layout ─────────────────── */ @media (max-width: 600px) { .pop-card { padding: 1rem; } .pop-card-header { flex-direction: column; align-items: flex-start; gap: .5rem; } .pop-card-actions { width: 100%; display: flex; gap: .5rem; } .pop-card-actions .btn { flex: 1; text-align: center; justify-content: center; } } /* ── Quick-actions grid: 2 columns (not 1) on phones ─────────── */ @media (max-width: 480px) { .quick-actions-grid { grid-template-columns: repeat(2, 1fr) !important; gap: .65rem; } .quick-action-card { padding: .9rem .7rem; } .quick-action-card i { font-size: 1.4rem; } .quick-action-card span { font-size: .75rem; } } /* ── manage_auction.php: gallery grid responsive ─────────────── */ @media (max-width: 480px) { /* Gallery thumbnails: 3 per row */ #galleryCurrentGrid, #galleryNewPreviews { grid-template-columns: repeat(3, 1fr) !important; gap: .4rem; } } /* ── Admin mobile nav panel: ensure good spacing ─────────────── */ @media (max-width: 360px) { .admin-mnav-panel { grid-template-columns: 1fr; } .admin-mnav-link { font-size: .78rem; padding: .65rem .8rem; } }