/* ===================================================================== VD PUBLIC THEME — premium/enterprise polish for the public & vendor facing pages (registration, status, thank-you, edit). Mirrors the admin theme's design language (Inter font + navy/slate palette) on top of Bootstrap 4. Loaded LAST in each page so it layers over the page's own inline styles. PRESENTATION ONLY — colours, radii, shadows, spacing, typography. No layout/positioning/display changes, no markup or script changes. Reuses each page's existing --vms-* variables where present, with navy fallbacks so it is consistent even if a variable is missing. ===================================================================== */ :root { --vmsx-primary: #1B3A6B; --vmsx-primary-dk: #0F1E3D; --vmsx-ink: #1E293B; --vmsx-slate: #334155; --vmsx-muted: #64748B; --vmsx-line: #E2E8F0; --vmsx-line-2: #CBD5E1; --vmsx-bg: #F4F6FA; } body { font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif !important; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; color: var(--vmsx-ink); } /* ── Buttons ──────────────────────────────────────────────────────── */ .btn { border-radius: .6rem; font-weight: 600; letter-spacing: .1px; padding: .55rem 1.15rem; transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease, transform .06s ease; } .btn:active { transform: translateY(1px); } .btn-sm { border-radius: .5rem; padding: .35rem .75rem; } .btn-primary { background-color: var(--vms-primary, var(--vmsx-primary)) !important; border-color: var(--vms-primary, var(--vmsx-primary)) !important; box-shadow: 0 8px 20px rgba(27,58,107,.22); } .btn-primary:hover, .btn-primary:focus { background-color: var(--vms-primary-dk, var(--vmsx-primary-dk)) !important; border-color: var(--vms-primary-dk, var(--vmsx-primary-dk)) !important; } .btn-primary:focus { box-shadow: 0 0 0 .2rem rgba(27,58,107,.3) !important; } .btn-outline-primary { color: var(--vms-primary, var(--vmsx-primary)) !important; border-color: var(--vms-primary, var(--vmsx-primary)) !important; } .btn-outline-primary:hover { background-color: var(--vms-primary, var(--vmsx-primary)) !important; color:#fff !important; } /* ── Cards & surfaces ─────────────────────────────────────────────── */ .card { border: 1px solid var(--vmsx-line); border-radius: .85rem; box-shadow: 0 1px 2px rgba(15,30,61,.04), 0 10px 28px rgba(15,30,61,.06); } .card .card-header { background: #fff; border-bottom: 1px solid var(--vmsx-line); font-weight: 700; color: var(--vmsx-ink); } .shadow, .shadow-sm { box-shadow: 0 1px 2px rgba(15,30,61,.04), 0 10px 28px rgba(15,30,61,.06) !important; } /* ── Forms ────────────────────────────────────────────────────────── */ label { color: var(--vmsx-slate); font-weight: 600; } .form-control, .custom-select { border-radius: .6rem; border: 1px solid var(--vmsx-line-2); padding: .6rem .9rem; color: var(--vmsx-ink); transition: border-color .15s ease, box-shadow .15s ease; } .form-control::placeholder { color: #94a3b8; } .form-control:focus, .custom-select:focus { border-color: var(--vms-primary, var(--vmsx-primary)); box-shadow: 0 0 0 .2rem rgba(27,58,107,.15); } .input-group-text { background: #f1f5f9; border-color: var(--vmsx-line-2); color: var(--vmsx-slate); } /* ── Headings & text ──────────────────────────────────────────────── */ h1,h2,h3,h4,h5,h6 { color: var(--vmsx-ink); font-weight: 700; letter-spacing: -.01em; } .text-primary { color: var(--vms-primary, var(--vmsx-primary)) !important; } a { color: var(--vms-primary, var(--vmsx-primary)); } a:hover { color: var(--vms-primary-dk, var(--vmsx-primary-dk)); } /* ── Tables ───────────────────────────────────────────────────────── */ .table thead th { text-transform: uppercase; font-size: .72rem; letter-spacing: .5px; font-weight: 700; color: var(--vmsx-muted); border-top: none; border-bottom: 2px solid var(--vmsx-line); background: #f8fafc; } .table td { vertical-align: middle; border-color: var(--vmsx-line); } .table-hover tbody tr:hover { background: #f8fafc; } /* ── Badges ───────────────────────────────────────────────────────── */ .badge { font-weight: 600; padding: .4em .65em; border-radius: 999px; } .badge-success { background:#dcfce7 !important; color:#166534 !important; } .badge-danger { background:#fee2e2 !important; color:#991b1b !important; } .badge-warning { background:#fef3c7 !important; color:#92400e !important; } .badge-info { background:#e0f2fe !important; color:#075985 !important; } /* ── Alerts ───────────────────────────────────────────────────────── */ .alert { border: 1px solid transparent; border-left-width: 4px; border-radius: .6rem; } .alert-success { background:#f0fdf4; border-color:#bbf7d0; border-left-color:#16a34a; color:#166534; } .alert-danger { background:#fef2f2; border-color:#fecaca; border-left-color:#dc2626; color:#991b1b; } .alert-warning { background:#fffbeb; border-color:#fde68a; border-left-color:#f59e0b; color:#92400e; } .alert-info { background:#f0f9ff; border-color:#bae6fd; border-left-color:#0ea5e9; color:#075985; } /* ── Modals ───────────────────────────────────────────────────────── */ .modal-content { border:0; border-radius:.9rem; overflow:hidden; box-shadow:0 24px 60px rgba(15,30,61,.22); } .modal-header { border-bottom:1px solid var(--vmsx-line); } .modal-header .modal-title { font-weight:700; } /* ── Scrollbars ───────────────────────────────────────────────────── */ * { scrollbar-width: thin; scrollbar-color: #cbd5e1 transparent; } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-thumb { background:#cbd5e1; border-radius:8px; border:2px solid transparent; background-clip:content-box; } ::-webkit-scrollbar-thumb:hover { background:#94a3b8; background-clip:content-box; } /* ── Responsiveness ───────────────────────────────────────────────── */ @media (max-width: 575px) { .btn { padding: .5rem 1rem; } .card { border-radius: .7rem; } .card-body { padding: 1rem; } } /* ===================================================================== RESPONSIVE FOUNDATION — public pages, mobile-first Presentation only. Standardises spacing/type on phones/tablets and makes tables/modals/forms behave predictably at narrow widths. Breakpoints match Bootstrap 4 (576/768/992) for consistency with the admin theme's foundation in vd-theme.css. No markup/JS changes. ===================================================================== */ :root { --vmsx-sp-1: .25rem; --vmsx-sp-2: .5rem; --vmsx-sp-3: .75rem; --vmsx-sp-4: 1rem; --vmsx-sp-5: 1.5rem; --vmsx-sp-6: 2rem; } /* Any table not already wrapped gets a horizontal-scroll container instead of overflowing/breaking the page layout on narrow screens. */ .table:not(.table-responsive):not(.no-vd-scroll) { display: block; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; } @media (min-width: 992px) { .table:not(.table-responsive):not(.no-vd-scroll) { display: table; overflow-x: visible; } } /* Modals: comfortable full-bleed sheet on phones instead of a cramped fixed-width box. */ @media (max-width: 575.98px) { .modal-dialog { margin: .5rem; max-width: calc(100% - 1rem); } .modal-content { border-radius: .7rem; } .modal-header, .modal-body, .modal-footer { padding: .9rem 1rem; } } /* Forms: full-width, comfortably-tappable controls on phones/tablets */ @media (max-width: 767.98px) { .form-control, .custom-select, .btn { font-size: .95rem; } .form-group, .vms-field { margin-bottom: 1rem; } /* Buttons that sit in an action row stack cleanly instead of overflowing side by side. */ .vms-form-actions, .cs-action-row { flex-wrap: wrap; } } /* Cards/panels: tighter padding on phones so content isn't cramped against the edge of small screens. */ @media (max-width: 575.98px) { .card-header { padding: .75rem .9rem; } .vms-page-wrapper, .vms-form-panel { padding: .9rem; } } /* ── Full-screen loader (OTP verify / final submit) ────────────────── Branded card + tri-dot spinner, replacing the previous plain dark overlay + generic Bootstrap spinner-border. Markup/JS API unchanged (showFullScreenLoader()/hideFullScreenLoader() in common.js) — this only restyles what was already there. ──────────────────────────── */ .vms-loader-overlay { position: fixed; inset: 0; width: 100%; height: 100%; background: rgba(15, 30, 61, .55); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); z-index: 20000; display: flex; align-items: center; justify-content: center; animation: vmsx-loader-fade .18s ease-out; } @keyframes vmsx-loader-fade { from { opacity: 0; } to { opacity: 1; } } .vms-loader-card { background: #fff; border-radius: 14px; padding: 2rem 2.25rem; box-shadow: 0 20px 50px rgba(15, 30, 61, .35); text-align: center; max-width: 360px; margin: 0 1rem; } .vms-loader-spinner { display: flex; gap: 7px; justify-content: center; margin-bottom: 1.1rem; } .vms-loader-spinner span { width: 11px; height: 11px; border-radius: 50%; background: var(--vms-primary, var(--vmsx-primary)); animation: vmsx-loader-bounce 1s infinite ease-in-out both; } .vms-loader-spinner span:nth-child(2) { animation-delay: .15s; background: #C22D29; } .vms-loader-spinner span:nth-child(3) { animation-delay: .3s; background: var(--vms-primary, var(--vmsx-primary)); } @keyframes vmsx-loader-bounce { 0%, 80%, 100% { transform: scale(.6); opacity: .5; } 40% { transform: scale(1); opacity: 1; } } .vms-loader-msg { color: var(--vms-text, var(--vmsx-ink)); font-size: .92rem; font-weight: 600; line-height: 1.45; } /* ── Top progress bar (mirrors the admin theme's .natural-loader) ──── The public pages already include an empty `

` toggled by vd-form-ai.js's initLoader() via the "loading" class, but had no matching CSS on this side, so it was never visible. This gives it the same on-brand slide animation as the admin panel — purely additive. */ .natural-loader { position: fixed; top: 0; left: 0; width: 100%; height: 3px; background: linear-gradient(90deg, var(--vms-primary, var(--vmsx-primary)), #C22D29, var(--vms-primary, var(--vmsx-primary))); background-size: 200% 100%; animation: vmsx-loader-slide 1.8s infinite ease-in-out; z-index: 9999; opacity: 0; transition: opacity .2s; box-shadow: 0 1px 6px rgba(27, 58, 107, .35); pointer-events: none; } .natural-loader.loading { opacity: 1; } @keyframes vmsx-loader-slide { 0% { background-position: 200% 0; } 100% { background-position: 0% 0; } } /* ===================================================================== CROSS-PAGE MOBILE HARDENING — shared by index/edit/status/thank-you. Each page already has its own inline @media rules down to 414px (the registration/edit wizard) or 768px only (status/thank-you); this fills the gap at very narrow phone widths (≤380px) and standardizes a few components (detection badges, reference-number box, timeline, action buttons) that only status.php/thankyou.php use, so they hold up as consistently as the wizard pages already do. Presentation only. ===================================================================== */ /* Header banner (logo + title + "Already Registered?"/"New Vendor Registration" pill): index.php/edit.php already wrap this correctly below 768px (their inline