/* -------------------------------------------------------------------------- */ /* Layer 1 — primitives (theme-independent) */ /* -------------------------------------------------------------------------- */ :root { --brand-50: #eff4ff; --brand-100: #dbe6fe; --brand-200: #bfdbfe; --brand-300: #93c5fd; --brand-400: #60a5fa; --brand-500: #3b82f6; --brand-600: #1a56db; --brand-700: #1e429f; --brand-800: #1e3a8a; --brand-900: #172554; --ink-navy: #0a2458; --vf-hue-navy: #1d4a8c; --vf-hue-navy-2: #5b8def; --vf-hue-navy-soft: #dbe6f8; --vf-hue-teal: #0f766e; --vf-hue-teal-2: #2dd4bf; --vf-hue-teal-soft: #d5f4ee; --vf-hue-gold: #b45309; --vf-hue-gold-2: #fbbf24; --vf-hue-gold-soft: #fde8c8; --vf-hue-rose: #be185d; --vf-hue-rose-2: #f472b6; --vf-hue-rose-soft: #fce4ef; --vf-hue-violet: #6d28d9; --vf-hue-violet-2: #c4b5fd; --vf-hue-violet-soft: #ece4fb; --vf-hue-sky: #0369a1; --vf-hue-sky-2: #38bdf8; --vf-hue-sky-soft: #d9effb; --slate-50: #f8fafc; --slate-100: #f1f5f9; --slate-200: #e2e8f0; --slate-300: #cbd5e1; --slate-400: #94a3b8; --slate-500: #64748b; --slate-600: #475569; --slate-700: #334155; --slate-800: #1e293b; --slate-900: #0f172a; --slate-950: #0b1220; --sky-500: #0ea5e9; --sky-600: #0284c7; --success-base: #059669; --success-soft-light: #d1fae5; --success-soft-dark: #064e3b; --success-text-light: #047857; --success-text-dark: #6ee7b7; --warning-base: #d97706; --warning-soft-light: #fef3c7; --warning-soft-dark: #78350f; --warning-text-light: #b45309; --warning-text-dark: #fcd34d; --danger-base: #dc2626; --danger-soft-light: #fee2e2; --danger-soft-dark: #7f1d1d; --danger-text-light: #b91c1c; --danger-text-dark: #fca5a5; --info-base: #0284c7; --info-soft-light: #e0f2fe; --info-soft-dark: #0c4a6e; --info-text-light: #0369a1; --info-text-dark: #7dd3fc; --neutral-soft-light: #ebe4d6; --neutral-soft-dark: #1e293b; --neutral-text-light: #3a4a63; --neutral-text-dark: #94a3b8; --muted-soft-light: #d5deec; --muted-soft-dark: #243049; --muted-text-light: #3a4a63; --muted-text-dark: #cbd5e1; /* Layout metrics */ --vf-navbar-h: 64px; --vf-footer-h: 44px; --vf-sidebar-expanded: 220px; --vf-sidebar-collapsed: 70px; --vf-sidebar-w: var(--vf-sidebar-expanded); --vf-shell-gap: 0.75rem; --vf-radius-sm: 0.5rem; --vf-radius-md: 0.75rem; --vf-radius-lg: 1rem; } /* -------------------------------------------------------------------------- */ /* Layer 2 — semantic tokens (light) */ /* Elevation: canvas (desk) < well (surface-2) < chrome / paper cards */ /* -------------------------------------------------------------------------- */ :root, [data-bs-theme="light"] { --vf-canvas: #cfd8ea; --vf-chrome: #eef2f8; --vf-surface-1: #f7f3eb; --vf-surface-2: #e6ecf6; --vf-surface-3: #dde5f2; --vf-paper: #ffffff; --vf-text: #152038; --vf-text-secondary: #3a4a63; --vf-text-muted: #546278; --vf-text-inverse: var(--vf-paper); --vf-border: #c3cedf; --vf-border-strong: #aeb9cd; --vf-shadow-sm: 0 1px 2px rgba(21, 32, 56, 0.07); --vf-shadow-md: 0 4px 16px rgba(21, 32, 56, 0.10); --vf-shadow-lg: 0 12px 32px rgba(21, 32, 56, 0.14); --vf-primary: var(--brand-600); --vf-primary-hover: var(--brand-700); --vf-primary-soft: #dce6fb; --vf-primary-rgb: 26, 86, 219; --vf-accent: var(--sky-500); --vf-focus-ring: rgba(26, 86, 219, 0.28); --vf-navy: var(--ink-navy); --vf-light-rgb: 238, 242, 248; --vf-section-cta: var(--ink-navy); --vf-public-bg: #dde6f4; --vf-card: #ffffff; --vf-card-muted: #e7eef9; --vf-card-tint-navy: var(--vf-hue-navy-soft); --vf-card-tint-teal: var(--vf-hue-teal-soft); --vf-card-tint-sky: var(--vf-hue-sky-soft); --vf-card-tint-gold: var(--vf-hue-gold-soft); --vf-card-tint-violet: var(--vf-hue-violet-soft); --vf-card-tint-rose: var(--vf-hue-rose-soft); --vf-success: var(--success-base); --vf-success-soft: var(--success-soft-light); --vf-success-text: var(--success-text-light); --vf-warning: var(--warning-base); --vf-warning-soft: var(--warning-soft-light); --vf-warning-text: var(--warning-text-light); --vf-danger: var(--danger-base); --vf-danger-soft: var(--danger-soft-light); --vf-danger-text: var(--danger-text-light); --vf-info: var(--info-base); --vf-info-soft: var(--info-soft-light); --vf-info-text: var(--info-text-light); --vf-neutral-soft: var(--neutral-soft-light); --vf-neutral-text: var(--neutral-text-light); --vf-muted-soft: var(--muted-soft-light); --vf-muted-text: var(--muted-text-light); --fa-secondary-opacity: 0.4; --vf-shell-bg: var(--vf-canvas); --vf-surface: var(--vf-surface-1); --vf-surface-muted: var(--vf-surface-2); --vf-shadow: var(--vf-shadow-sm); --vf-radius: var(--vf-radius-lg); --vf-primary-dark: var(--vf-primary-hover); color-scheme: light; } /* -------------------------------------------------------------------------- */ /* Layer 2 — semantic tokens (dark) */ /* Raised panels are lighter than the well; insets stay darker than cards. */ /* -------------------------------------------------------------------------- */ [data-bs-theme="dark"] { --vf-canvas: #080c14; --vf-surface-1: #151c2b; --vf-surface-2: #0e1420; --vf-surface-3: #1c2638; --vf-chrome: var(--vf-surface-1); --vf-paper: #ffffff; --vf-text: #e8eef7; --vf-text-secondary: #c5d0e0; --vf-text-muted: #8b9bb3; --vf-text-inverse: #0b1220; --vf-border: #273044; --vf-border-strong: #3a465c; --vf-shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.28); --vf-shadow-md: 0 8px 24px rgba(0, 0, 0, 0.38); --vf-shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.5); --vf-primary: var(--brand-500); --vf-primary-hover: var(--brand-400); --vf-primary-soft: rgba(59, 130, 246, 0.16); --vf-primary-rgb: 59, 130, 246; --vf-accent: var(--sky-500); --vf-focus-ring: rgba(59, 130, 246, 0.35); --vf-success: var(--success-text-dark); --vf-success-soft: var(--success-soft-dark); --vf-success-text: var(--success-text-dark); --vf-warning: var(--warning-text-dark); --vf-warning-soft: var(--warning-soft-dark); --vf-warning-text: var(--warning-text-dark); --vf-danger: var(--danger-text-dark); --vf-danger-soft: var(--danger-soft-dark); --vf-danger-text: var(--danger-text-dark); --vf-info: var(--info-text-dark); --vf-info-soft: var(--info-soft-dark); --vf-info-text: var(--info-text-dark); --vf-neutral-soft: var(--neutral-soft-dark); --vf-neutral-text: var(--neutral-text-dark); --vf-muted-soft: var(--muted-soft-dark); --vf-muted-text: var(--muted-text-dark); --fa-secondary-opacity: 0.55; --vf-shell-bg: var(--vf-canvas); --vf-surface: var(--vf-surface-1); --vf-surface-muted: var(--vf-surface-2); --vf-shadow: var(--vf-shadow-sm); --vf-radius: var(--vf-radius-lg); --vf-primary-dark: var(--vf-primary-hover); --vf-navy: var(--ink-navy); --vf-light-rgb: 28, 38, 56; --vf-section-cta: #071a40; --vf-public-bg: #0b1220; --vf-card: #1c2638; --vf-card-muted: #141c2b; --vf-card-tint-navy: var(--vf-hue-navy-soft); --vf-card-tint-teal: var(--vf-hue-teal-soft); --vf-card-tint-sky: var(--vf-hue-sky-soft); --vf-card-tint-gold: var(--vf-hue-gold-soft); --vf-card-tint-violet: var(--vf-hue-violet-soft); --vf-card-tint-rose: var(--vf-hue-rose-soft); --vf-hue-navy: #93c5fd; --vf-hue-navy-2: #3b82f6; --vf-hue-navy-soft: rgba(59, 130, 246, 0.18); --vf-hue-teal: #5eead4; --vf-hue-teal-2: #14b8a6; --vf-hue-teal-soft: rgba(45, 212, 191, 0.16); --vf-hue-gold: #fbbf24; --vf-hue-gold-2: #d97706; --vf-hue-gold-soft: rgba(251, 191, 36, 0.16); --vf-hue-rose: #f9a8d4; --vf-hue-rose-2: #db2777; --vf-hue-rose-soft: rgba(244, 114, 182, 0.16); --vf-hue-violet: #c4b5fd; --vf-hue-violet-2: #7c3aed; --vf-hue-violet-soft: rgba(167, 139, 250, 0.16); --vf-hue-sky: #7dd3fc; --vf-hue-sky-2: #0284c7; --vf-hue-sky-soft: rgba(56, 189, 248, 0.16); color-scheme: dark; } html[data-sidebar="collapsed"] { --vf-sidebar-w: var(--vf-sidebar-collapsed); } /* -------------------------------------------------------------------------- */ /* Layer 3 — Bootstrap bridge */ /* -------------------------------------------------------------------------- */ :root, [data-bs-theme="light"], [data-bs-theme="dark"] { --bs-body-bg: var(--vf-canvas); --bs-body-color: var(--vf-text); --bs-secondary-color: var(--vf-text-muted); --bs-tertiary-color: var(--vf-text-muted); --bs-emphasis-color: var(--vf-text); --bs-heading-color: var(--vf-text); --bs-border-color: var(--vf-border); --bs-border-color-translucent: var(--vf-border); --bs-primary: var(--vf-primary); --bs-primary-rgb: var(--vf-primary-rgb); --bs-primary-text-emphasis: var(--vf-primary); --bs-primary-bg-subtle: var(--vf-primary-soft); --bs-primary-border-subtle: var(--vf-primary-soft); --bs-success: var(--vf-success); --bs-success-rgb: 5, 150, 105; --bs-success-text-emphasis: var(--vf-success-text); --bs-success-bg-subtle: var(--vf-success-soft); --bs-success-border-subtle: var(--vf-success-soft); --bs-warning: var(--vf-warning); --bs-warning-rgb: 217, 119, 6; --bs-warning-text-emphasis: var(--vf-warning-text); --bs-warning-bg-subtle: var(--vf-warning-soft); --bs-warning-border-subtle: var(--vf-warning-soft); --bs-danger: var(--vf-danger); --bs-danger-rgb: 220, 38, 38; --bs-danger-text-emphasis: var(--vf-danger-text); --bs-danger-bg-subtle: var(--vf-danger-soft); --bs-danger-border-subtle: var(--vf-danger-soft); --bs-info: var(--vf-info); --bs-info-rgb: 2, 132, 199; --bs-info-text-emphasis: var(--vf-info-text); --bs-info-bg-subtle: var(--vf-info-soft); --bs-info-border-subtle: var(--vf-info-soft); --bs-secondary: var(--vf-text-muted); --bs-secondary-bg: var(--vf-surface-2); --bs-secondary-bg-subtle: var(--vf-neutral-soft); --bs-secondary-text-emphasis: var(--vf-neutral-text); --bs-tertiary-bg: var(--vf-surface-3); --bs-light-rgb: var(--vf-light-rgb); --bs-dark-rgb: 21, 32, 56; --bs-link-color: var(--vf-primary); --bs-link-color-rgb: var(--vf-primary-rgb); --bs-link-hover-color: var(--vf-primary-hover); --bs-link-hover-color-rgb: var(--vf-primary-rgb); --bs-focus-ring-color: var(--vf-focus-ring); --bs-card-bg: var(--vf-surface-1); --bs-card-color: var(--vf-text); --bs-card-border-color: var(--vf-border); --bs-card-cap-bg: transparent; --bs-card-border-radius: var(--vf-radius-md); --bs-table-bg: transparent; --bs-table-color: var(--vf-text); --bs-table-border-color: var(--vf-border); --bs-table-striped-bg: var(--vf-surface-2); --bs-table-hover-bg: var(--vf-surface-3); --bs-table-hover-color: var(--vf-text); --bs-dropdown-bg: var(--vf-surface-1); --bs-dropdown-color: var(--vf-text); --bs-dropdown-border-color: var(--vf-border); --bs-dropdown-link-color: var(--vf-text); --bs-dropdown-link-hover-bg: var(--vf-surface-3); --bs-dropdown-link-hover-color: var(--vf-text); --bs-dropdown-link-active-bg: var(--vf-primary-soft); --bs-dropdown-link-active-color: var(--vf-primary); --bs-dropdown-divider-bg: var(--vf-border); --bs-modal-bg: var(--vf-surface-1); --bs-modal-color: var(--vf-text); --bs-modal-border-color: var(--vf-border); --bs-list-group-bg: transparent; --bs-list-group-color: var(--vf-text); --bs-list-group-border-color: var(--vf-border); --bs-list-group-action-hover-bg: var(--vf-surface-3); --bs-list-group-action-active-bg: var(--vf-primary-soft); --bs-list-group-action-active-color: var(--vf-primary); --bs-body-font-family: 'Segoe UI', system-ui, sans-serif; } body { font-family: 'Segoe UI', system-ui, sans-serif; color: var(--vf-text); background: var(--vf-canvas); } ::selection { background: var(--vf-primary-soft); color: var(--vf-primary); } :focus-visible { outline: 2px solid var(--vf-primary); outline-offset: 2px; } a { color: var(--vf-primary); } a:hover { color: var(--vf-primary-hover); } hr, .dropdown-divider { border-color: var(--vf-border); opacity: 1; color: var(--vf-border); } /* Cards */ .card { background-color: var(--vf-surface-1); color: var(--vf-text); border: 1px solid var(--vf-border); border-radius: var(--vf-radius-md); box-shadow: var(--vf-shadow-sm); } .card-header { background: transparent; border-bottom: 1px solid var(--vf-border); color: var(--vf-text); font-weight: 600; } .card-body { color: var(--vf-text); } /* Tables */ .table { --bs-table-bg: transparent; --bs-table-color: var(--vf-text); --bs-table-border-color: var(--vf-border); --bs-table-hover-bg: var(--vf-surface-3); color: var(--vf-text); border-color: var(--vf-border); } .table > :not(caption) > * > * { background-color: transparent; color: inherit; border-bottom-color: var(--vf-border); } .table thead th { background: var(--vf-surface-2); color: var(--vf-text-muted); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; border-bottom: 1px solid var(--vf-border); } /* Forms */ .form-label { color: var(--vf-text-secondary); font-weight: 500; } .form-control, .form-select, .form-control:disabled, .form-select:disabled { background-color: var(--vf-surface-2); border-color: var(--vf-border); color: var(--vf-text); border-radius: var(--vf-radius-sm); } .form-control::placeholder { color: var(--vf-text-muted); opacity: 1; } .form-control:focus, .form-select:focus { background-color: var(--vf-surface-1); border-color: var(--vf-primary); color: var(--vf-text); box-shadow: 0 0 0 0.2rem var(--vf-focus-ring); } .form-check-input { background-color: var(--vf-surface-2); border-color: var(--vf-border-strong); } .form-check-input:checked { background-color: var(--vf-primary); border-color: var(--vf-primary); } .form-check-input:focus { border-color: var(--vf-primary); box-shadow: 0 0 0 0.2rem var(--vf-focus-ring); } .form-check-label { color: var(--vf-text); } .form-text, .text-muted { color: var(--vf-text-muted) !important; } code { color: var(--vf-primary); background: var(--vf-primary-soft); padding: 0.15em 0.4em; border-radius: 0.25rem; font-size: 0.875em; } /* Buttons */ .btn-primary { --bs-btn-color: var(--vf-text-inverse); --bs-btn-bg: var(--vf-primary); --bs-btn-border-color: var(--vf-primary); --bs-btn-hover-color: var(--vf-text-inverse); --bs-btn-hover-bg: var(--vf-primary-hover); --bs-btn-hover-border-color: var(--vf-primary-hover); --bs-btn-active-color: var(--vf-text-inverse); --bs-btn-active-bg: var(--vf-primary-hover); --bs-btn-active-border-color: var(--vf-primary-hover); --bs-btn-disabled-color: var(--vf-text-inverse); --bs-btn-disabled-bg: var(--vf-primary); --bs-btn-disabled-border-color: var(--vf-primary); --bs-btn-focus-shadow-rgb: var(--vf-primary-rgb); } .btn-outline-primary { --bs-btn-color: var(--vf-primary); --bs-btn-border-color: var(--vf-primary); --bs-btn-hover-color: var(--vf-text-inverse); --bs-btn-hover-bg: var(--vf-primary); --bs-btn-hover-border-color: var(--vf-primary); --bs-btn-active-color: var(--vf-text-inverse); --bs-btn-active-bg: var(--vf-primary); --bs-btn-active-border-color: var(--vf-primary); --bs-btn-focus-shadow-rgb: var(--vf-primary-rgb); } .btn-outline-secondary { --bs-btn-color: var(--vf-text-secondary); --bs-btn-border-color: var(--vf-border-strong); --bs-btn-hover-color: var(--vf-text); --bs-btn-hover-bg: var(--vf-surface-3); --bs-btn-hover-border-color: var(--vf-border-strong); --bs-btn-active-color: var(--vf-text); --bs-btn-active-bg: var(--vf-surface-3); } .btn-outline-danger { --bs-btn-color: var(--vf-danger-text); --bs-btn-border-color: var(--vf-danger); --bs-btn-hover-color: var(--vf-text-inverse); --bs-btn-hover-bg: var(--vf-danger); --bs-btn-hover-border-color: var(--vf-danger); --bs-btn-active-color: var(--vf-text-inverse); --bs-btn-active-bg: var(--vf-danger); } .btn-success { --bs-btn-color: var(--vf-text-inverse); --bs-btn-bg: var(--success-base); --bs-btn-border-color: var(--success-base); --bs-btn-hover-color: var(--vf-text-inverse); --bs-btn-hover-bg: var(--success-text-light); --bs-btn-hover-border-color: var(--success-text-light); --bs-btn-active-color: var(--vf-text-inverse); --bs-btn-active-bg: var(--success-text-light); } .btn-danger { --bs-btn-color: var(--vf-text-inverse); --bs-btn-bg: var(--vf-danger); --bs-btn-border-color: var(--vf-danger); --bs-btn-hover-color: var(--vf-text-inverse); --bs-btn-hover-bg: var(--danger-text-light); --bs-btn-hover-border-color: var(--danger-text-light); --bs-btn-active-color: var(--vf-text-inverse); --bs-btn-active-bg: var(--danger-text-light); --bs-btn-focus-shadow-rgb: 220, 38, 38; } .btn-warning { --bs-btn-color: #fff; --bs-btn-bg: #b45309; --bs-btn-border-color: #b45309; --bs-btn-hover-color: #fff; --bs-btn-hover-bg: #92400e; --bs-btn-hover-border-color: #92400e; --bs-btn-active-color: #fff; --bs-btn-active-bg: #92400e; --bs-btn-active-border-color: #92400e; --bs-btn-focus-shadow-rgb: 180, 83, 9; } [data-bs-theme="dark"] .btn-warning { --bs-btn-color: #1c1917; --bs-btn-bg: var(--vf-warning); --bs-btn-border-color: var(--vf-warning); --bs-btn-hover-color: #1c1917; --bs-btn-hover-bg: #fde68a; --bs-btn-hover-border-color: #fde68a; --bs-btn-active-color: #1c1917; --bs-btn-active-bg: #fde68a; --bs-btn-active-border-color: #fde68a; } .btn-link { color: var(--vf-primary); text-decoration: none; } .btn-link:hover { color: var(--vf-primary-hover); } /* Tonal badges */ .badge { font-weight: 600; letter-spacing: 0.02em; border: 1px solid transparent; padding: 0.4em 0.7em; border-radius: var(--vf-radius-sm); font-size: 0.75rem; } .badge-primary, .badge.bg-primary { background: var(--vf-primary-soft) !important; color: var(--vf-primary) !important; border-color: var(--vf-primary-soft); } .badge-success, .badge.bg-success { background: var(--vf-success-soft) !important; color: var(--vf-success-text) !important; border-color: var(--vf-success-soft); } .badge-warning, .badge.bg-warning { background: var(--vf-warning-soft) !important; color: var(--vf-warning-text) !important; border-color: var(--vf-warning-soft); } .badge-danger, .badge.bg-danger { background: var(--vf-danger-soft) !important; color: var(--vf-danger-text) !important; border-color: var(--vf-danger-soft); } .badge-info, .badge.bg-info { background: var(--vf-info-soft) !important; color: var(--vf-info-text) !important; border-color: var(--vf-info-soft); } .badge-neutral, .badge-secondary, .badge.bg-secondary { background: var(--vf-neutral-soft) !important; color: var(--vf-neutral-text) !important; border-color: var(--vf-neutral-soft); } .badge-muted, .badge.bg-dark { background: var(--vf-muted-soft) !important; color: var(--vf-muted-text) !important; border-color: var(--vf-muted-soft); } /* Alerts — tonal with left accent bar */ .alert { border: 1px solid transparent; border-left-width: 3px; border-radius: var(--vf-radius-md); } .alert-success { background: var(--vf-success-soft); color: var(--vf-success-text); border-color: var(--vf-success-soft); border-left-color: var(--vf-success); } .alert-warning { background: var(--vf-warning-soft); color: var(--vf-warning-text); border-color: var(--vf-warning-soft); border-left-color: var(--vf-warning); } .alert-danger { background: var(--vf-danger-soft); color: var(--vf-danger-text); border-color: var(--vf-danger-soft); border-left-color: var(--vf-danger); } .alert-info { background: var(--vf-info-soft); color: var(--vf-info-text); border-color: var(--vf-info-soft); border-left-color: var(--vf-info); } .alert-primary { background: var(--vf-primary-soft); color: var(--vf-primary); border-color: var(--vf-primary-soft); border-left-color: var(--vf-primary); } .alert-secondary, .alert-light { background: var(--vf-neutral-soft); color: var(--vf-text-secondary); border-color: var(--vf-border); border-left-color: var(--vf-text-muted); } /* Nav tabs / pills */ .nav-tabs { border-bottom-color: var(--vf-border); } .nav-tabs .nav-link { color: var(--vf-text-muted); border-color: transparent; } .nav-tabs .nav-link:hover { color: var(--vf-text); border-color: var(--vf-border) var(--vf-border) transparent; isolation: isolate; } .nav-tabs .nav-link.active { background: var(--vf-surface-1); color: var(--vf-primary); border-color: var(--vf-border) var(--vf-border) var(--vf-surface-1); } .nav-pills .nav-link { color: var(--vf-text-muted); } .nav-pills .nav-link:hover { color: var(--vf-text); background: var(--vf-surface-3); } .nav-pills .nav-link.active { background: var(--vf-primary); color: var(--vf-text-inverse); } /* Dropdowns */ .dropdown-menu { background-color: var(--vf-surface-1); color: var(--vf-text); border: 1px solid var(--vf-border); border-radius: var(--vf-radius-md); box-shadow: var(--vf-shadow-md); } .dropdown-item { color: var(--vf-text); } .dropdown-item:hover, .dropdown-item:focus { background: var(--vf-surface-3); color: var(--vf-text); } .dropdown-item.active, .dropdown-item:active { background: var(--vf-primary-soft); color: var(--vf-primary); } /* List groups */ .list-group-item { background-color: transparent; color: var(--vf-text); border-color: var(--vf-border); } /* -------------------------------------------------------------------------- */ /* Font Awesome Duotone — icon hues */ /* -------------------------------------------------------------------------- */ .fa-duotone, .fad { --vf-icon: var(--vf-primary); --vf-icon-2: var(--vf-accent); --vf-icon-soft: var(--vf-primary-soft); --fa-primary-color: var(--vf-icon); --fa-secondary-color: var(--vf-icon-2); --fa-secondary-opacity: 0.55; } .fa-passport, .fa-id-card, .fa-gauge-high, .fa-list-check, .fa-bars, .fa-moon, .fa-chevrons-left, .fa-chevrons-right { --vf-icon: var(--vf-hue-navy); --vf-icon-2: var(--vf-hue-navy-2); --vf-icon-soft: var(--vf-hue-navy-soft); } .fa-credit-card, .fa-qrcode, .fa-wallet, .fa-briefcase, .fa-money-check-dollar, .fa-coins, .fa-bangladeshi-taka-sign, .fa-store, .fa-chart-column, .fa-floppy-disk, .fa-download, .fa-phone { --vf-icon: var(--vf-hue-teal); --vf-icon-2: var(--vf-hue-teal-2); --vf-icon-soft: var(--vf-hue-teal-soft); } .fa-star, .fa-sun, .fa-key, .fa-hourglass-half, .fa-calendar-clock, .fa-calendar-check, .fa-bell, .fa-clone { --vf-icon: var(--vf-hue-gold); --vf-icon-2: var(--vf-hue-gold-2); --vf-icon-soft: var(--vf-hue-gold-soft); } .fa-arrow-rotate-left, .fa-right-from-bracket, .fa-trash, .fa-location-dot, .fa-flag, .fa-circle-exclamation, .fa-triangle-exclamation, .fa-file-circle-xmark { --vf-icon: var(--vf-hue-rose); --vf-icon-2: var(--vf-hue-rose-2); --vf-icon-soft: var(--vf-hue-rose-soft); } .fa-user, .fa-users, .fa-user-group, .fa-user-tie, .fa-graduation-cap, .fa-fingerprint, .fa-pen, .fa-layer-group, .fa-clipboard-list { --vf-icon: var(--vf-hue-violet); --vf-icon-2: var(--vf-hue-violet-2); --vf-icon-soft: var(--vf-hue-violet-soft); } .fa-globe, .fa-earth-asia, .fa-building, .fa-file-lines, .fa-file-pdf, .fa-file, .fa-folder-open, .fa-book, .fa-image, .fa-comments, .fa-paper-plane, .fa-cloud-arrow-up, .fa-plane-arrival, .fa-plane-departure, .fa-copy, .fa-bag-shopping { --vf-icon: var(--vf-hue-sky); --vf-icon-2: var(--vf-hue-sky-2); --vf-icon-soft: var(--vf-hue-sky-soft); } .fa-circle-plus, .fa-circle-check, .fa-arrows-rotate { --vf-icon: var(--vf-success); --vf-icon-2: var(--vf-success-text); --vf-icon-soft: var(--vf-success-soft); } .fa-gear, .fa-list, .fa-plus, .fa-sparkles, .fa-magnifying-glass, .fa-tag, .fa-circle-info, .fa-lock, .fa-arrow-right, .fa-up-right-from-square, .fa-expand, .fa-hand-pointer, .fa-spinner-third, .fa-chevron-down, .fa-check, .fa-xmark { --vf-icon: var(--vf-primary); --vf-icon-2: var(--vf-accent); --vf-icon-soft: var(--vf-primary-soft); } .fa-ban { --vf-icon: var(--vf-danger); --vf-icon-2: var(--vf-danger-text); --vf-icon-soft: var(--vf-danger-soft); } .btn-primary .fa-duotone, .btn-success .fa-duotone, .btn-danger .fa-duotone, .btn-dark .fa-duotone, .btn-outline-primary:hover .fa-duotone, .btn-outline-primary:focus .fa-duotone, .btn-outline-primary:active .fa-duotone, .btn-outline-danger:hover .fa-duotone, .btn-outline-danger:focus .fa-duotone, .btn-outline-danger:active .fa-duotone, .btn-outline-success:hover .fa-duotone, .btn-outline-success:focus .fa-duotone, .btn-outline-success:active .fa-duotone { --fa-primary-color: currentColor; --fa-secondary-color: currentColor; --fa-secondary-opacity: 0.65; } .vf-page-hero-icon, .vf-dash-stat-ico, .vf-upload-card-icon, .vf-pay-notice-ico, .vf-profile-pill-ico, .vf-profile-fact-ico, .vf-profile-head-ico, .vf-profile-place-ico, .vf-session-ico, .vf-activity-ico, .vf-role-avatar, .vf-role-group-ico, .vf-role-locked-ico, .vf-report-kpi-ico, .vf-report-head-ico, .vf-audit-ico { background: transparent; color: var(--vf-icon); box-shadow: none; } .vf-page-hero-icon > .fa-duotone, .vf-dash-stat-ico > .fa-duotone, .vf-upload-card-icon > .fa-duotone, .vf-pay-notice-ico > .fa-duotone, .vf-profile-pill-ico > .fa-duotone, .vf-profile-fact-ico > .fa-duotone, .vf-profile-head-ico > .fa-duotone, .vf-profile-place-ico > .fa-duotone, .vf-session-ico > .fa-duotone, .vf-activity-ico > .fa-duotone, .vf-role-avatar > .fa-duotone, .vf-role-group-ico > .fa-duotone, .vf-role-locked-ico > .fa-duotone, .vf-report-kpi-ico > .fa-duotone, .vf-report-head-ico > .fa-duotone, .vf-audit-ico > .fa-duotone { width: 100%; height: 100%; display: inline-flex; align-items: center; justify-content: center; border-radius: inherit; background: var(--vf-icon-soft); color: var(--vf-icon); --fa-primary-color: var(--vf-icon); --fa-secondary-color: var(--vf-icon-2); } .vf-meta-item > i { background: var(--vf-icon-soft); color: var(--vf-icon); } /* -------------------------------------------------------------------------- */ /* Public / marketing */ /* -------------------------------------------------------------------------- */ .public-body { min-height: 100vh; color: var(--vf-text); background-color: var(--vf-public-bg, #dde6f4); background-image: radial-gradient(circle at 1px 1px, rgba(29, 74, 140, 0.13) 1px, transparent 0); background-size: 22px 22px; } [data-bs-theme="dark"] .public-body { background-color: var(--vf-public-bg, #0b1220); background-image: radial-gradient(circle at 1px 1px, rgba(147, 197, 253, 0.11) 1px, transparent 0); background-size: 22px 22px; } .vf-pub-nav { --vf-pub-control-h: 2.35rem; background: transparent; border: 0; box-shadow: none; padding: 0.85rem 0 0; } .vf-pub-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.65rem; padding: 0.4rem 0.6rem; border: 1px solid color-mix(in srgb, var(--vf-border) 70%, transparent); border-radius: 1.15rem; background: color-mix(in srgb, var(--vf-card, #fff) 94%, transparent); box-shadow: none; backdrop-filter: blur(10px); } .vf-pub-nav .navbar-brand { display: inline-flex; align-items: center; gap: 0.5rem; min-height: var(--vf-pub-control-h); padding: 0.1rem 0.2rem; margin: 0 auto 0 0; color: var(--vf-navy); font-size: 1rem; font-weight: 800; line-height: 1.15; letter-spacing: -0.02em; text-decoration: none; } .vf-pub-nav .navbar-brand:hover { color: var(--vf-primary); } .vf-pub-nav .navbar-brand .vf-brand-text { display: inline-flex; align-items: center; line-height: 1.15; } .vf-pub-nav .navbar-brand .vf-brand-mark { --vf-mark-h: 2.35rem; } .vf-pub-nav .navbar-brand .vf-brand-mark i { font-size: 1rem; color: var(--vf-primary); line-height: 1; } .vf-pub-nav .navbar-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 0.2rem; } .vf-pub-nav .nav-item { display: flex; align-items: center; } .vf-pub-nav .navbar-nav .nav-link { display: inline-flex; align-items: center; justify-content: flex-start; gap: 0.42rem; box-sizing: border-box; min-height: var(--vf-pub-control-h); height: var(--vf-pub-control-h); margin: 0; padding: 0 0.72rem; border: 0; border-radius: 0.75rem; background: transparent; color: var(--vf-text-secondary); font-size: 0.86rem; font-weight: 700; line-height: 1; text-decoration: none; white-space: nowrap; } .vf-pub-nav .navbar-nav .nav-link span { display: inline-flex; align-items: center; line-height: 1; } .vf-pub-nav .navbar-nav .nav-link > i, .vf-pub-auth-btn > i { position: relative; display: inline-block; flex: 0 0 auto; width: 1.05em; height: 1.05em; margin: 0; font-size: 0.9rem; line-height: 1; text-align: center; vertical-align: middle; } .vf-pub-nav .navbar-nav .nav-link > i { color: var(--vf-primary); --fa-primary-color: currentColor; --fa-secondary-color: currentColor; --fa-secondary-opacity: 0.55; } .vf-pub-nav .navbar-nav .nav-link:hover, .vf-pub-nav .navbar-nav .nav-link:focus-visible { color: var(--vf-primary); background: color-mix(in srgb, var(--vf-primary-soft) 70%, transparent); } .navbar-expand-lg.vf-pub-nav .navbar-nav .nav-link { padding-right: 0.72rem; padding-left: 0.72rem; } .vf-pub-links { margin-right: auto; } .vf-pub-tools { margin-left: auto; align-items: center; gap: 0.3rem; } .vf-pub-tools .nav-item { display: flex; align-items: center; } .vf-pub-locale { padding-inline: 0.6rem; } .vf-pub-auth { display: none; width: 1px; height: 1.2rem; margin: 0 0.15rem; padding: 0; border: 0; background: color-mix(in srgb, var(--vf-border) 85%, transparent); list-style: none; align-self: center; } .vf-pub-auth-btn { appearance: none; -webkit-appearance: none; display: inline-flex; align-items: center; justify-content: center; gap: 0.42rem; box-sizing: border-box; min-height: var(--vf-pub-control-h); height: var(--vf-pub-control-h); margin: 0; padding: 0 0.9rem; border: 1px solid transparent; border-radius: 999px; font-family: inherit; font-size: 0.8rem; font-weight: 800; line-height: 1; text-decoration: none; white-space: nowrap; cursor: pointer; transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease; } .vf-pub-auth-btn span { display: inline-flex; align-items: center; line-height: 1; } .vf-pub-auth-btn i { --fa-primary-color: currentColor; --fa-secondary-color: currentColor; --fa-secondary-opacity: 0.8; color: currentColor; } .vf-pub-auth-btn.is-signup, .vf-pub-auth-btn.is-signup:link, .vf-pub-auth-btn.is-signup:visited { background: var(--vf-primary); color: #fff; box-shadow: 0 8px 18px rgba(26, 86, 219, 0.22); } .vf-pub-auth-btn.is-signup:hover, .vf-pub-auth-btn.is-signup:focus-visible { background: var(--vf-primary-hover); color: #fff; transform: translateY(-1px); } .vf-pub-auth-btn.is-logout { background: #fff; color: #b42318; border-color: color-mix(in srgb, #f04438 35%, var(--vf-border)); box-shadow: none; } .vf-pub-auth-btn.is-logout:hover, .vf-pub-auth-btn.is-logout:focus-visible { background: #fef3f2; color: #912018; border-color: #f04438; transform: translateY(-1px); } .vf-logout-form.is-public { display: inline-flex; align-items: center; margin: 0; } .vf-pub-nav .nav-item .app-icon-btn { display: inline-flex; align-items: center; justify-content: center; width: var(--vf-pub-control-h); height: var(--vf-pub-control-h); border: 1px solid var(--vf-border); border-radius: 999px; background: transparent; line-height: 1; } .vf-pub-nav .nav-item .app-icon-btn .fa-duotone { display: inline-block; width: 1.05em; height: 1.05em; font-size: 0.95rem; line-height: 1; } .vf-pub-nav .navbar-toggler { display: inline-flex; align-items: center; justify-content: center; width: var(--vf-pub-control-h); height: var(--vf-pub-control-h); margin-left: auto; padding: 0; border-color: var(--vf-border); border-radius: 0.75rem; } .vf-pub-nav .navbar-toggler:focus { box-shadow: 0 0 0 0.2rem var(--vf-focus-ring); } .vf-pub-nav .navbar-toggler-icon { width: 1.15rem; height: 1.15rem; background-image: none; background-color: var(--vf-text); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='black' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='black' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E") center / contain no-repeat; } .vf-pub-nav .navbar-collapse { flex-basis: 100%; } @media (min-width: 992px) { .vf-pub-nav .navbar-collapse { flex-basis: auto; display: flex !important; align-items: center; gap: 0.65rem; flex: 1 1 auto; min-width: 0; } .vf-pub-links { margin-right: 0; margin-left: 0.35rem; } .vf-pub-tools { margin-left: auto; } .vf-pub-auth { display: block; flex: 0 0 1px; } .vf-pub-nav .navbar-toggler { display: none; } } @media (max-width: 991.98px) { .vf-pub-nav { --vf-pub-control-h: 2.15rem; } .vf-pub-bar { flex-wrap: nowrap; gap: 0.35rem; width: 100%; min-width: 0; max-width: 100%; overflow: visible; } .vf-pub-nav .navbar-brand { flex: 1 1 auto; min-width: 0; margin: 0; } .vf-pub-nav .navbar-brand .vf-brand-mark { --vf-mark-h: 2.15rem; flex: 0 0 auto; } .vf-pub-nav .navbar-brand .vf-brand-text { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .vf-pub-nav .navbar-toggler, .vf-pub-nav .navbar-collapse, .vf-pub-links { display: none !important; } .vf-pub-nav .vf-pub-tools { display: flex; flex-direction: row; flex: 0 0 auto; flex-wrap: nowrap; align-items: center; width: auto; margin: 0 0 0 auto; padding: 0; border: 0; gap: 0.28rem; overflow: visible; } .vf-pub-nav .vf-pub-tools > .nav-item { width: auto; margin: 0; padding: 0; flex: 0 0 auto; } .vf-pub-nav .vf-pub-auth { display: none; width: 0; height: 0; margin: 0; padding: 0; border: 0; } .vf-pub-tools .vf-pub-locale span, .vf-pub-tools .vf-pub-login span, .vf-pub-tools .vf-pub-dash span, .vf-pub-auth-btn span { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .navbar-expand-lg.vf-pub-nav .vf-pub-tools .nav-link, .vf-pub-nav .vf-pub-tools .vf-pub-auth-btn, .vf-pub-nav .vf-pub-tools .vf-logout-form.is-public, .vf-pub-nav .vf-pub-tools .app-icon-btn { box-sizing: border-box; width: var(--vf-pub-control-h); min-width: var(--vf-pub-control-h); height: var(--vf-pub-control-h); min-height: var(--vf-pub-control-h); margin: 0; padding: 0; border-radius: 999px; justify-content: center; align-items: center; gap: 0; flex: 0 0 var(--vf-pub-control-h); line-height: 1; } .vf-pub-nav .vf-pub-tools .vf-pub-locale, .vf-pub-nav .vf-pub-tools .vf-pub-login, .vf-pub-nav .vf-pub-tools .vf-pub-dash, .vf-pub-nav .vf-pub-tools .app-icon-btn { border: 1px solid var(--vf-border); background: transparent; } .vf-pub-nav .vf-pub-auth-btn.is-signup { box-shadow: none; } .vf-pub-nav .vf-pub-tools .nav-link > i, .vf-pub-nav .vf-pub-tools .vf-pub-auth-btn > i, .vf-pub-nav .vf-pub-tools .app-icon-btn > .fa-duotone { display: inline-grid; place-items: center; width: 1.05em; height: 1.05em; margin: 0; font-size: 0.95rem; line-height: 1; flex: 0 0 auto; } .vf-pub-nav .vf-pub-tools .nav-link > i::before, .vf-pub-nav .vf-pub-tools .nav-link > i::after, .vf-pub-nav .vf-pub-tools .vf-pub-auth-btn > i::before, .vf-pub-nav .vf-pub-tools .vf-pub-auth-btn > i::after, .vf-pub-nav .vf-pub-tools .app-icon-btn > .fa-duotone::before, .vf-pub-nav .vf-pub-tools .app-icon-btn > .fa-duotone::after { grid-area: 1 / 1; position: static; width: auto; height: auto; margin: 0; line-height: 1; } .vf-pub-nav .vf-pub-tools .dropdown { position: relative; } .navbar-expand-lg.vf-pub-nav .vf-pub-tools .dropdown-menu { position: absolute; top: calc(100% + 0.35rem); right: 0; left: auto; z-index: 1080; width: max-content; min-width: 8.5rem; max-width: calc(100vw - 1.25rem); } } .public-footer { background: transparent; color: var(--vf-text-muted); border: 0; padding: 0 0 1.5rem; margin-top: 0; } .vf-public-foot { padding: 1.35rem 1.4rem 1.05rem; border: 1px solid color-mix(in srgb, var(--vf-border) 70%, transparent); border-radius: 1.25rem; background: var(--vf-card, #fff); box-shadow: var(--vf-shadow-sm); } .vf-public-foot-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(10rem, 0.8fr); gap: 1.35rem 2rem; align-items: start; } .vf-public-foot-grid:has(.vf-public-foot-col + .vf-public-foot-col) { grid-template-columns: minmax(0, 1.45fr) minmax(9rem, 0.7fr) minmax(12rem, 1fr); } .vf-public-foot-brand { display: grid; gap: 0.55rem; min-width: 0; align-content: start; } .vf-public-foot-logo { display: flex; align-items: center; gap: 0.7rem; max-width: 100%; color: var(--vf-navy); text-decoration: none; } .vf-public-foot-logo:hover .vf-public-foot-name { color: var(--vf-primary); } .vf-public-foot-logo .vf-brand-mark { --vf-mark-h: 2.75rem; } .vf-public-foot-id { display: grid; gap: 0.15rem; min-width: 0; } .vf-public-foot-name { min-width: 0; color: inherit; font-size: 1.05rem; font-weight: 800; line-height: 1.2; letter-spacing: -0.02em; overflow-wrap: anywhere; } .vf-public-foot-logo i { color: var(--vf-primary); } .vf-public-foot-tag { display: block; max-width: 18rem; color: var(--vf-text-muted); font-size: 0.8rem; font-weight: 600; line-height: 1.35; overflow-wrap: anywhere; } .vf-public-foot-social { display: grid; gap: 0.45rem; margin-top: 0.2rem; } .vf-public-foot-social h2, .vf-public-foot-col h2 { margin: 0 0 0.2rem; color: var(--vf-navy); font-size: 0.74rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; } .vf-public-foot-col { display: grid; gap: 0.45rem; min-width: 0; justify-items: start; align-content: start; } .vf-public-foot-col a, .vf-public-foot-col p { display: flex; align-items: flex-start; gap: 0.45rem; width: 100%; min-width: 0; margin: 0; color: var(--vf-text-secondary); font-size: 0.84rem; font-weight: 650; line-height: 1.4; overflow-wrap: anywhere; text-decoration: none; } .vf-public-foot-col a:hover { color: var(--vf-primary); } .vf-public-foot-logo:focus-visible, .vf-public-foot-col a:focus-visible, .vf-public-social a:focus-visible { outline: 2px solid var(--vf-primary); outline-offset: 3px; } .vf-public-foot-col i { flex-shrink: 0; width: 1rem; margin-top: 0.12rem; color: var(--vf-primary); font-size: 0.82rem; text-align: center; } .vf-public-social { display: flex; flex-wrap: wrap; gap: 0.5rem; } .vf-public-social a { width: 2.5rem; height: 2.5rem; display: inline-flex; align-items: center; justify-content: center; border: 1px solid color-mix(in srgb, var(--vf-primary) 18%, var(--vf-border)); border-radius: 50%; background: var(--vf-primary-soft); color: var(--vf-primary); font-size: 0.95rem; text-decoration: none; transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease, transform 0.18s ease; } .vf-public-social a:hover { color: #fff; border-color: transparent; transform: translateY(-2px); } .vf-public-social a[data-network="facebook"]:hover { background: #1877f2; } .vf-public-social a[data-network="instagram"]:hover { background: #e4405f; } .vf-public-social a[data-network="youtube"]:hover { background: #ff0000; } .vf-public-social a[data-network="whatsapp"]:hover { background: #25d366; } .vf-public-social a[data-network="tiktok"]:hover { background: #111111; } .vf-public-social a[data-network="linkedin"]:hover { background: #0a66c2; } .vf-public-foot-copy { display: flex; align-items: center; gap: 0.4rem; margin: 1.15rem 0 0; padding-top: 0.9rem; border-top: 1px solid var(--vf-border); color: var(--vf-text-muted); font-size: 0.78rem; font-weight: 600; } .vf-public-foot-copy i { flex-shrink: 0; color: var(--vf-primary); font-size: 0.9rem; } @media (max-width: 991.98px) { .vf-public-foot-grid, .vf-public-foot-grid:has(.vf-public-foot-col + .vf-public-foot-col) { grid-template-columns: 1fr 1fr; } .vf-public-foot-brand { grid-column: 1 / -1; } } @media (max-width: 575.98px) { .vf-public-foot { padding: 1.1rem 1rem 0.95rem; } .vf-public-foot-grid, .vf-public-foot-grid:has(.vf-public-foot-col + .vf-public-foot-col) { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1rem 0.85rem; } .vf-public-foot-brand { grid-column: 1 / -1; } .vf-public-foot-col a, .vf-public-foot-col p { gap: 0.3rem; font-size: 0.76rem; } } .vf-home-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.45rem; min-height: 3.15rem; padding: 0.6rem 1.5rem; border: 1px solid transparent; border-radius: 0.85rem; background: var(--vf-primary); color: #fff; font-size: 0.92rem; font-weight: 800; text-decoration: none; box-shadow: none; transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease, transform 0.18s ease; } .vf-home-btn, .vf-home-btn:link, .vf-home-btn:visited { color: #fff; text-decoration: none; } .vf-home-btn i, .vf-home-btn .fa-duotone { color: inherit; --fa-primary-color: currentColor; --fa-secondary-color: currentColor; --fa-secondary-opacity: 0.85; } .vf-home-btn:not(.is-order):hover, .vf-home-btn:not(.is-order):focus-visible { background: var(--vf-primary-hover); color: #fff; transform: translateY(-1px); } .vf-home-btn.is-ghost, .vf-home-btn.is-ghost:link, .vf-home-btn.is-ghost:visited { background: #fff; color: var(--vf-navy); border-color: var(--vf-border); box-shadow: none; } .vf-home-btn.is-ghost:hover, .vf-home-btn.is-ghost:focus-visible { background: var(--vf-primary-soft); color: var(--vf-primary); border-color: var(--vf-primary); } .vf-home-btn.is-sm { min-height: 2.15rem; padding: 0.28rem 0.85rem; font-size: 0.8rem; border-radius: 999px; box-shadow: none; } .vf-home-btn.is-on-dark, .vf-home-btn.is-on-dark:link, .vf-home-btn.is-on-dark:visited { background: #fff; color: var(--brand-700); box-shadow: none; } .vf-home-btn.is-order, .vf-home-btn.is-order:link, .vf-home-btn.is-order:visited, .vf-home-btn.is-order:hover, .vf-home-btn.is-order:focus-visible, .vf-home-btn.is-order:active { position: relative; border-color: transparent; box-shadow: none !important; filter: none !important; text-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; } .vf-home-btn.is-order { transition: transform 0.2s ease, background-color 0.35s ease, color 0.35s ease; } .vf-home-btn.is-order::before, .vf-home-btn.is-order::after { content: none !important; display: none !important; } .vf-home-btn.is-order:hover, .vf-home-btn.is-order:focus-visible { transform: translateY(-1px); } .vf-home-btn.is-order-a { animation: vf-order-btn-tone-a 8s ease-in-out infinite; } .vf-home-btn.is-order-b { animation: vf-order-btn-tone-b 8.5s ease-in-out infinite; animation-delay: -2.8s; } .vf-home-btn.is-order-c, .vf-home-btn.is-order-c:link, .vf-home-btn.is-order-c:visited { animation: vf-order-btn-tone-c 8.2s ease-in-out infinite; animation-delay: -4.2s; } .vf-home-btn.is-order-c:hover, .vf-home-btn.is-order-c:focus-visible { background-color: #fff; color: var(--brand-700); } @keyframes vf-order-btn-tone-a { 0%, 100% { background-color: var(--vf-primary); } 33% { background-color: var(--vf-hue-teal); } 66% { background-color: var(--vf-hue-sky); } } @keyframes vf-order-btn-tone-b { 0%, 100% { background-color: var(--vf-hue-teal); } 33% { background-color: var(--vf-hue-gold); } 66% { background-color: var(--vf-primary); } } @keyframes vf-order-btn-tone-c { 0%, 100% { background-color: #fff; color: var(--brand-700); } 33% { background-color: #ecfdf8; color: var(--vf-hue-teal); } 66% { background-color: #eff6ff; color: var(--vf-hue-sky); } } [data-bs-theme="dark"] .vf-home-btn.is-order-a { animation-name: vf-order-btn-tone-a-dark; } [data-bs-theme="dark"] .vf-home-btn.is-order-b { animation-name: vf-order-btn-tone-b-dark; } [data-bs-theme="dark"] .vf-home-btn.is-order-c, [data-bs-theme="dark"] .vf-home-btn.is-order-c:link, [data-bs-theme="dark"] .vf-home-btn.is-order-c:visited { animation-name: vf-order-btn-tone-c-dark; } [data-bs-theme="dark"] .vf-home-btn.is-order-c:hover, [data-bs-theme="dark"] .vf-home-btn.is-order-c:focus-visible { background-color: #fff; color: var(--brand-800); } @keyframes vf-order-btn-tone-a-dark { 0%, 100% { background-color: var(--brand-500); color: #fff; } 33% { background-color: #0f766e; color: #fff; } 66% { background-color: #0369a1; color: #fff; } } @keyframes vf-order-btn-tone-b-dark { 0%, 100% { background-color: #0f766e; color: #fff; } 33% { background-color: #b45309; color: #fff; } 66% { background-color: var(--brand-600); color: #fff; } } @keyframes vf-order-btn-tone-c-dark { 0%, 100% { background-color: #fff; color: var(--brand-800); } 33% { background-color: #d5f4ee; color: #0f766e; } 66% { background-color: #dbeafe; color: #1e429f; } } .vf-pub-nav .vf-pub-auth-btn.is-signup { color: #fff; } .vf-pub-nav .vf-pub-auth-btn.is-logout { color: #b42318; } .vf-home { background: transparent; } [data-bs-theme="dark"] .vf-home { background: transparent; } .vf-reveal { opacity: 0; transform: translateY(22px); transition: opacity 0.65s ease, transform 0.65s cubic-bezier(0.22, 1, 0.36, 1); } .vf-reveal.is-revealed { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .vf-reveal { opacity: 1; transform: none; transition: none; } #how.vf-reveal:not(.is-revealed) .vf-home-steps li { opacity: 1; transform: none; } } .vf-home-hero, .vf-home-block { scroll-margin-top: calc(var(--vf-navbar-h) + 1rem); } .vf-home-hero { position: relative; padding: 4.5rem 0 3rem; background: transparent; } [data-bs-theme="dark"] .vf-home-hero { background: transparent; } .vf-home-hero-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(18rem, 0.9fr); gap: 1.6rem 2rem; align-items: center; } .vf-home-kicker { margin: 0 0 0.45rem; color: var(--vf-primary); font-size: 0.76rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; } .vf-home-hero-copy h1, .vf-home-title { margin: 0; max-width: 18ch; color: var(--vf-navy); font-size: clamp(2rem, 4.4vw, 3.15rem); font-weight: 800; letter-spacing: -0.04em; line-height: 1.08; } .vf-home-flip { display: inline-block; vertical-align: bottom; background: transparent !important; box-shadow: none !important; filter: none !important; text-shadow: none !important; outline: none; } .vf-home-flip > span:not(.vf-home-letter) { display: inline-block; background: transparent !important; box-shadow: none !important; text-shadow: none !important; filter: none !important; animation: vf-home-flip-in 0.65s ease both; animation-delay: calc(0.06s + (var(--i, 0) * 0.05s)); } .vf-home-kicker .vf-home-flip > span { animation-duration: 0.5s; animation-delay: 0.02s; } .vf-home-flip.is-loop { display: inline-flex; align-items: baseline; gap: 0; color: var(--vf-flip-tone, var(--vf-primary)); white-space: nowrap; letter-spacing: -0.04em; vertical-align: baseline; background: transparent !important; box-shadow: none !important; filter: none !important; text-shadow: none !important; } .vf-home-letter { display: block; flex: 0 0 auto; margin: 0; padding: 0; line-height: inherit; letter-spacing: 0; background: transparent !important; box-shadow: none !important; filter: none !important; text-shadow: none !important; } .vf-home-letter + .vf-home-letter { margin-left: -0.04em; } .vf-home-letter > span { display: inline-block; margin: 0; padding: 0; line-height: inherit; letter-spacing: inherit; color: inherit; background: transparent !important; box-shadow: none !important; text-shadow: none !important; filter: none !important; outline: none; animation: vf-home-letter-in 0.55s ease both; animation-delay: calc(0.1s + (var(--i, 0) * 0.05s) + (var(--c, 0) * 0.035s)); } .vf-home-flip.is-loop.is-playing .vf-home-letter > span { animation-duration: 0.7s; animation-timing-function: ease-in-out; animation-fill-mode: both; } .vf-home-flip.is-loop.is-playing.is-flip-x .vf-home-letter > span { animation-name: vf-home-letter-flip-x; animation-delay: calc(var(--c, 0) * 0.055s); } .vf-home-flip.is-loop.is-playing.is-flip-x-rev .vf-home-letter > span { animation-name: vf-home-letter-flip-x; animation-delay: calc((var(--letter-count, 11) - 1 - var(--c, 0)) * 0.055s); } .vf-home-flip.is-loop.is-playing.is-flip-y .vf-home-letter > span { animation-name: vf-home-letter-flip-y; animation-delay: calc(var(--c, 0) * 0.055s); } .vf-home-flip.is-loop.is-playing.is-flip-y-rev .vf-home-letter > span { animation-name: vf-home-letter-flip-y; animation-delay: calc((var(--letter-count, 11) - 1 - var(--c, 0)) * 0.055s); } .vf-home-flip.is-loop.is-playing.is-flip-wave .vf-home-letter > span { animation-name: vf-home-letter-flip-wave; animation-delay: calc(var(--c, 0) * 0.055s); } .vf-home-lead { margin: 0.85rem 0 1.4rem; max-width: 36rem; color: var(--vf-text-secondary); font-size: 1.15rem; font-weight: 500; line-height: 1.6; animation: vf-home-rise 0.7s ease 0.08s both; } .vf-home-actions { display: flex; flex-wrap: wrap; gap: 0.55rem; animation: vf-home-rise 0.7s ease 0.16s both; } .vf-home-promises { display: grid; gap: 0.55rem; margin: 1.25rem 0 0; padding: 0; list-style: none; animation: vf-home-rise 0.7s ease 0.24s both; } .vf-home-promises li { display: flex; align-items: flex-start; gap: 0.55rem; color: var(--vf-text-secondary); font-size: 0.92rem; font-weight: 500; line-height: 1.45; } .vf-home-promises i { margin-top: 0.12rem; color: var(--vf-primary); } .vf-home-stage { animation: vf-home-rise 0.75s ease 0.12s both; } .vf-home-info { position: relative; padding: 1.15rem 1.1rem 1.05rem; border: 1px solid color-mix(in srgb, var(--vf-border) 65%, transparent); border-radius: 1.25rem; background: var(--vf-card, #fff); box-shadow: var(--vf-shadow-lg); } .vf-home-info-brand { display: flex; align-items: center; gap: 0.65rem; margin-bottom: 1rem; } .vf-home-info-brand .vf-brand-mark { --vf-mark-h: 3.15rem; } .vf-home-info-brand strong, .vf-home-info-brand > div span { display: block; } .vf-home-info-brand strong { color: var(--vf-navy); font-size: 0.95rem; } .vf-home-info-brand > div span { color: var(--vf-text-muted); font-size: 0.75rem; font-weight: 650; } .vf-home-flow { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.35rem; margin: 0 0 1rem; padding: 0.9rem 0.55rem 0.8rem; border-radius: 1.05rem; background: var(--vf-card-muted, #e7eef9); list-style: none; } .vf-home-flow li { position: relative; display: grid; justify-items: center; gap: 0.4rem; text-align: center; min-width: 0; z-index: 1; } .vf-home-flow li:not(:last-child)::after { content: ''; position: absolute; top: 1.25rem; left: calc(50% + 1.4rem); right: calc(-50% + 1.4rem); height: 2px; background: repeating-linear-gradient(90deg, var(--vf-primary) 0 7px, transparent 7px 12px); background-size: 12px 2px; animation: vf-home-dash 0.9s linear infinite; pointer-events: none; z-index: 0; } .vf-home-flow-ico { position: relative; z-index: 1; width: 2.55rem; height: 2.55rem; display: grid; place-items: center; border-radius: 50%; background: var(--vf-card, #fff); color: var(--vf-primary); overflow: hidden; box-shadow: 0 0 0 4px color-mix(in srgb, var(--vf-primary) 12%, transparent); animation: vf-home-pulse 4.2s ease-out infinite; } .vf-home-flow-ico > .fa-duotone { width: 1.1em; height: 1.1em; display: inline-flex; align-items: center; justify-content: center; font-size: 1rem; line-height: 1; } .vf-home-flow li:nth-child(2) .vf-home-flow-ico { animation-delay: 0.4s; } .vf-home-flow li:nth-child(3) .vf-home-flow-ico { animation-delay: 0.8s; } .vf-home-flow strong { color: var(--vf-navy); font-size: 0.72rem; font-weight: 800; line-height: 1.25; } .vf-home-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem; margin: 0; } .vf-home-metrics div { padding: 0.55rem 0.4rem 0.5rem; border-radius: 0.85rem; background: var(--vf-primary-soft); text-align: center; } .vf-home-metrics dd { margin: 0; color: var(--vf-primary); font-size: 1.2rem; font-weight: 800; letter-spacing: -0.03em; line-height: 1.1; } .vf-home-metrics dt { margin: 0.12rem 0 0; color: var(--vf-text-secondary); font-size: 0.75rem; font-weight: 600; } .vf-home-block { padding: 3.25rem 0; } #reviews.vf-home-block { background: transparent; } .vf-home-end { padding-bottom: 4rem; } .vf-home-panel, .vf-home-need { padding: 2rem 1.9rem 1.95rem; border: 1px solid color-mix(in srgb, var(--vf-border) 65%, transparent); border-radius: 1.25rem; background: var(--vf-card, #fff); box-shadow: var(--vf-shadow-md); } .vf-home-head { max-width: 40rem; margin: 0 0 1.6rem; } .vf-home-head h2, .vf-home-need-intro h2 { margin: 0; color: var(--vf-navy); font-size: clamp(1.45rem, 2.6vw, 1.95rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1.25; } .vf-home-steps { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.85rem; margin: 0; padding: 0; list-style: none; } .vf-home-steps li { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 0.9rem; min-height: 100%; padding: 1.55rem 1rem 1.25rem; border: 1px solid color-mix(in srgb, var(--vf-border) 55%, transparent); border-radius: 1.15rem; background: var(--vf-card, #fff); box-shadow: var(--vf-shadow-sm); text-align: center; transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease; } .vf-home-steps li:nth-child(1) { background: color-mix(in srgb, var(--vf-card-tint-navy) 70%, var(--vf-card)); } .vf-home-steps li:nth-child(2) { background: color-mix(in srgb, var(--vf-card-tint-teal) 70%, var(--vf-card)); } .vf-home-steps li:nth-child(3) { background: color-mix(in srgb, var(--vf-card-tint-sky) 70%, var(--vf-card)); } .vf-home-steps li:nth-child(4) { background: color-mix(in srgb, var(--vf-card-tint-gold) 70%, var(--vf-card)); } .vf-home-steps li:nth-child(5) { background: color-mix(in srgb, var(--vf-card-tint-violet) 70%, var(--vf-card)); } .vf-home-steps li:hover { transform: translateY(-3px); box-shadow: var(--vf-shadow-md); border-color: color-mix(in srgb, var(--vf-primary) 35%, var(--vf-border)); } #how.vf-reveal:not(.is-revealed) .vf-home-steps li { opacity: 0; transform: translateY(16px); } #how.is-revealed .vf-home-steps li { animation: vf-home-rise 0.7s ease both; } #how.is-revealed .vf-home-steps li:nth-child(1) { animation-delay: 0.04s; } #how.is-revealed .vf-home-steps li:nth-child(2) { animation-delay: 0.1s; } #how.is-revealed .vf-home-steps li:nth-child(3) { animation-delay: 0.16s; } #how.is-revealed .vf-home-steps li:nth-child(4) { animation-delay: 0.22s; } #how.is-revealed .vf-home-steps li:nth-child(5) { animation-delay: 0.28s; } .vf-home-steps li:not(:last-child)::after { content: ''; position: absolute; top: 3.05rem; left: calc(100% - 0.05rem); width: 0.95rem; height: 2px; background: repeating-linear-gradient(90deg, var(--vf-primary) 0 5px, transparent 5px 9px); background-size: 9px 2px; animation: vf-home-dash 0.9s linear infinite; z-index: 1; pointer-events: none; } .vf-home-step-no { position: absolute; top: 0.7rem; left: 0.75rem; z-index: 2; display: inline-flex; align-items: center; justify-content: center; min-width: 1.55rem; height: 1.35rem; padding: 0 0.35rem; border-radius: 999px; background: var(--vf-card, #fff); color: var(--vf-primary); font-size: 0.68rem; font-weight: 800; letter-spacing: 0.04em; line-height: 1; box-shadow: var(--vf-shadow-sm); } .vf-home-step-ico { display: grid; place-items: center; flex-shrink: 0; width: 4rem; height: 4rem; margin: 0.15rem auto 0; border-radius: 1.15rem; background: var(--vf-card, #fff); color: var(--vf-primary); font-size: 1.65rem; line-height: 1; box-shadow: 0 0 0 4px color-mix(in srgb, var(--vf-primary) 12%, transparent); animation: vf-home-pulse 4.2s ease-out infinite; } .vf-home-step-ico i { display: grid; place-items: center; width: 1em; height: 1em; line-height: 1; } .vf-home-steps p { margin: 0; color: var(--vf-text-secondary); font-size: 0.9rem; font-weight: 600; line-height: 1.45; } .vf-home-need { display: grid; grid-template-columns: minmax(15rem, 0.78fr) minmax(0, 1.22fr); gap: 1.4rem 1.6rem; align-items: start; } .vf-home-need-intro p:not(.vf-home-kicker) { margin: 0.55rem 0 1.25rem; color: var(--vf-text-secondary); font-size: 0.98rem; font-weight: 500; line-height: 1.55; } .vf-home-need-list { display: grid; gap: 1rem; } .vf-home-need-group h3 { margin: 0 0 0.45rem; color: var(--vf-navy); font-size: 0.78rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; } .vf-home-need-group ul { display: grid; gap: 0.4rem; margin: 0; padding: 0; list-style: none; } .vf-home-need-group li { display: grid; grid-template-columns: 2.15rem minmax(0, 1fr); gap: 0.6rem; align-items: center; padding: 0.55rem 0.65rem; border-radius: 0.85rem; background: var(--vf-card-muted, #e7eef9); transition: transform 0.18s ease, box-shadow 0.18s ease; } .vf-home-need-group li:hover { transform: translateX(3px); box-shadow: var(--vf-shadow-sm); } .vf-home-need-ico { width: 2.15rem; height: 2.15rem; display: grid; place-items: center; border-radius: 0.65rem; background: var(--vf-card, #fff); color: var(--vf-primary); font-size: 0.86rem; } .vf-home-need-group li span:last-child { color: var(--vf-text); font-size: 0.92rem; font-weight: 550; line-height: 1.4; } .vf-home-need-group[data-group="medical"] li { background: var(--vf-hue-sky-soft); } .vf-home-need-group[data-group="optional"] li { background: var(--vf-hue-gold-soft); } .vf-home-need-group[data-group="details"] li { background: var(--vf-hue-teal-soft); } .vf-visa-grid { display: grid; grid-template-columns: repeat(var(--vf-visa-count, 5), minmax(0, 1fr)); gap: 0.85rem; } .vf-visa-card { display: flex; flex-direction: column; min-width: 0; min-height: 100%; overflow: hidden; border: 1px solid color-mix(in srgb, var(--vf-border) 60%, transparent); border-radius: 1.1rem; background: var(--vf-card, #fff); box-shadow: var(--vf-shadow-sm); transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease; } .vf-visa-card:hover { transform: translateY(-3px); box-shadow: var(--vf-shadow-md); } .vf-visa-card[data-tone="sky"] { background: color-mix(in srgb, var(--vf-card-tint-sky) 42%, var(--vf-card)); border-color: color-mix(in srgb, var(--vf-hue-sky) 28%, var(--vf-border)); } .vf-visa-card[data-tone="teal"] { background: color-mix(in srgb, var(--vf-card-tint-teal) 42%, var(--vf-card)); border-color: color-mix(in srgb, var(--vf-hue-teal) 28%, var(--vf-border)); } .vf-visa-card[data-tone="rose"] { background: color-mix(in srgb, var(--vf-card-tint-rose) 42%, var(--vf-card)); border-color: color-mix(in srgb, var(--vf-hue-rose) 28%, var(--vf-border)); } .vf-visa-card[data-tone="navy"] { background: color-mix(in srgb, var(--vf-card-tint-navy) 42%, var(--vf-card)); border-color: color-mix(in srgb, var(--vf-primary) 28%, var(--vf-border)); } .vf-visa-card[data-tone="violet"] { background: color-mix(in srgb, var(--vf-card-tint-violet) 42%, var(--vf-card)); border-color: color-mix(in srgb, var(--vf-hue-violet) 28%, var(--vf-border)); } .vf-visa-card[data-tone="sky"]:hover { border-color: var(--vf-hue-sky); } .vf-visa-card[data-tone="teal"]:hover { border-color: var(--vf-hue-teal); } .vf-visa-card[data-tone="rose"]:hover { border-color: var(--vf-hue-rose); } .vf-visa-card[data-tone="navy"]:hover { border-color: var(--vf-primary); } .vf-visa-card[data-tone="violet"]:hover { border-color: var(--vf-hue-violet); } .vf-visa-art { display: flex; align-items: center; justify-content: center; height: auto; padding: 0.7rem 0.7rem 0; background: transparent; } .vf-visa-art img { display: block; width: 100%; height: auto; aspect-ratio: 8 / 5; object-fit: contain; object-position: center; } .vf-visa-body { display: grid; gap: 0.35rem; padding: 0.85rem 0.95rem 1rem; } .vf-visa-card h3 { margin: 0; color: var(--vf-navy); font-size: 0.98rem; font-weight: 800; letter-spacing: -0.02em; line-height: 1.25; } .vf-visa-card p { margin: 0; color: var(--vf-text-secondary); font-size: 0.8rem; font-weight: 550; line-height: 1.4; } [data-bs-theme="dark"] .vf-visa-card { background: color-mix(in srgb, var(--vf-card) 88%, #fff 4%); border-color: var(--vf-border); box-shadow: none; } [data-bs-theme="dark"] .vf-visa-card[data-tone="sky"] { background: color-mix(in srgb, var(--vf-card-tint-sky) 45%, var(--vf-card)); } [data-bs-theme="dark"] .vf-visa-card[data-tone="teal"] { background: color-mix(in srgb, var(--vf-card-tint-teal) 45%, var(--vf-card)); } [data-bs-theme="dark"] .vf-visa-card[data-tone="rose"] { background: color-mix(in srgb, var(--vf-card-tint-rose) 45%, var(--vf-card)); } [data-bs-theme="dark"] .vf-visa-card[data-tone="navy"] { background: color-mix(in srgb, var(--vf-card-tint-navy) 45%, var(--vf-card)); } [data-bs-theme="dark"] .vf-visa-card[data-tone="violet"] { background: color-mix(in srgb, var(--vf-card-tint-violet) 45%, var(--vf-card)); } @media (max-width: 991.98px) { .vf-visa-grid { grid-template-columns: repeat(var(--vf-visa-count, 5), minmax(11.5rem, 1fr)); overflow-x: auto; padding-bottom: 0.35rem; scroll-snap-type: x mandatory; scrollbar-width: thin; } .vf-visa-card { scroll-snap-align: start; } } @media (max-width: 575.98px) { .vf-visa-grid { grid-template-columns: repeat(var(--vf-visa-count, 5), minmax(10.5rem, 1fr)); gap: 0.7rem; } .vf-visa-art { padding: 0.55rem 0.55rem 0; } .vf-visa-body { padding: 0.75rem 0.8rem 0.9rem; } } .vf-home-centers { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0.95rem 0 0; padding: 0; list-style: none; } .vf-home-centers li { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.32rem 0.7rem; border-radius: 999px; background: var(--vf-primary-soft); color: var(--vf-navy); font-size: 0.8rem; font-weight: 750; } .vf-home-centers i { color: var(--vf-primary); } .vf-home-reviews { --vf-review-per: 4; --vf-review-gap: 0.75rem; } .vf-home-reviews-viewport { overflow: hidden; touch-action: pan-y; cursor: grab; user-select: none; } .vf-home-reviews.is-static .vf-home-reviews-viewport { cursor: default; } .vf-home-reviews.is-dragging .vf-home-reviews-viewport { cursor: grabbing; } .vf-home-reviews-track { display: flex; align-items: stretch; gap: var(--vf-review-gap); transition: transform 0.55s cubic-bezier(0.22, 0.8, 0.3, 1); } .vf-home-reviews.is-static .vf-home-reviews-track, .vf-home-reviews.is-instant .vf-home-reviews-track, .vf-home-reviews.is-dragging .vf-home-reviews-track { transition: none; } .vf-home-quote { display: flex; flex: 0 0 calc((100% - (var(--vf-review-gap) * (var(--vf-review-per) - 1))) / var(--vf-review-per)); flex-direction: column; gap: 0.8rem; min-width: 0; padding: 1.15rem 1.15rem 1.05rem; border-radius: 1.15rem; border: 1px solid color-mix(in srgb, var(--vf-border) 60%, transparent); background: var(--vf-card, #fff); box-shadow: var(--vf-shadow-sm); transition: box-shadow 0.2s ease, border-color 0.2s ease; } .vf-home-quote:hover { box-shadow: var(--vf-shadow-md); } .vf-home-quote[data-tone="sky"] { background: color-mix(in srgb, var(--vf-card-tint-sky) 42%, var(--vf-card)); border-color: color-mix(in srgb, var(--vf-hue-sky) 28%, var(--vf-border)); } .vf-home-quote[data-tone="teal"] { background: color-mix(in srgb, var(--vf-card-tint-teal) 42%, var(--vf-card)); border-color: color-mix(in srgb, var(--vf-hue-teal) 28%, var(--vf-border)); } .vf-home-quote[data-tone="gold"] { background: color-mix(in srgb, var(--vf-card-tint-gold) 42%, var(--vf-card)); border-color: color-mix(in srgb, var(--vf-hue-gold) 28%, var(--vf-border)); } .vf-home-quote[data-tone="violet"] { background: color-mix(in srgb, var(--vf-card-tint-violet) 42%, var(--vf-card)); border-color: color-mix(in srgb, var(--vf-hue-violet) 28%, var(--vf-border)); } .vf-home-quote[data-tone="navy"] { background: color-mix(in srgb, var(--vf-card-tint-navy) 42%, var(--vf-card)); border-color: color-mix(in srgb, var(--vf-primary) 28%, var(--vf-border)); } .vf-home-quote[data-tone="sky"]:hover { border-color: var(--vf-hue-sky); } .vf-home-quote[data-tone="teal"]:hover { border-color: var(--vf-hue-teal); } .vf-home-quote[data-tone="gold"]:hover { border-color: var(--vf-hue-gold); } .vf-home-quote[data-tone="violet"]:hover { border-color: var(--vf-hue-violet); } .vf-home-quote[data-tone="navy"]:hover { border-color: var(--vf-primary); } .vf-home-quote-top { display: flex; align-items: center; justify-content: space-between; gap: 0.65rem; min-width: 0; } .vf-home-quote-mark { display: grid; place-items: center; flex-shrink: 0; width: 2.2rem; height: 2.2rem; border-radius: 0.75rem; background: color-mix(in srgb, var(--vf-primary-soft) 80%, var(--vf-card)); color: var(--vf-primary); font-size: 0.95rem; } .vf-home-quote[data-tone="sky"] .vf-home-quote-mark { background: var(--vf-card-tint-sky); color: var(--vf-hue-sky); } .vf-home-quote[data-tone="teal"] .vf-home-quote-mark { background: var(--vf-card-tint-teal); color: var(--vf-hue-teal); } .vf-home-quote[data-tone="gold"] .vf-home-quote-mark { background: var(--vf-card-tint-gold); color: var(--vf-hue-gold); } .vf-home-quote[data-tone="violet"] .vf-home-quote-mark { background: var(--vf-card-tint-violet); color: var(--vf-hue-violet); } .vf-home-quote[data-tone="navy"] .vf-home-quote-mark { background: var(--vf-card-tint-navy); color: var(--vf-primary); } .vf-home-quote .vf-stars { flex: 0 1 auto; min-width: 0; max-width: 100%; margin: 0; gap: 0.1rem; color: color-mix(in srgb, var(--vf-border-strong) 72%, transparent); } .vf-home-quote .vf-stars.is-static .fa-duotone { font-size: 0.86rem; } .vf-home-quote .vf-stars .is-on { color: var(--vf-warning); } .vf-home-quote > p { display: -webkit-box; flex: 1 1 auto; margin: 0; overflow: hidden; color: var(--vf-text); font-size: 0.92rem; font-weight: 600; line-height: 1.55; -webkit-box-orient: vertical; -webkit-line-clamp: 4; } .vf-home-quote footer { display: flex; align-items: center; gap: 0.7rem; margin-top: 0.1rem; padding-top: 0.85rem; border-top: 1px solid color-mix(in srgb, var(--vf-border) 55%, transparent); } .vf-home-quote-av { display: grid; place-items: center; flex-shrink: 0; width: 2.4rem; height: 2.4rem; border-radius: 50%; background: var(--vf-primary); color: #fff; font-size: 0.82rem; font-weight: 800; line-height: 1; box-shadow: 0 0 0 3px color-mix(in srgb, var(--vf-primary) 14%, transparent); } .vf-home-quote[data-tone="sky"] .vf-home-quote-av { background: var(--vf-hue-sky); box-shadow: 0 0 0 3px color-mix(in srgb, var(--vf-hue-sky) 16%, transparent); } .vf-home-quote[data-tone="teal"] .vf-home-quote-av { background: var(--vf-hue-teal); box-shadow: 0 0 0 3px color-mix(in srgb, var(--vf-hue-teal) 16%, transparent); } .vf-home-quote[data-tone="gold"] .vf-home-quote-av { background: var(--vf-hue-gold); box-shadow: 0 0 0 3px color-mix(in srgb, var(--vf-hue-gold) 16%, transparent); } .vf-home-quote[data-tone="violet"] .vf-home-quote-av { background: var(--vf-hue-violet); box-shadow: 0 0 0 3px color-mix(in srgb, var(--vf-hue-violet) 16%, transparent); } .vf-home-quote[data-tone="navy"] .vf-home-quote-av { background: var(--vf-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--vf-primary) 16%, transparent); } .vf-home-quote-meta { min-width: 0; } .vf-home-quote-meta strong, .vf-home-quote-meta span, .vf-home-quote-meta time { display: block; } .vf-home-quote-meta strong { overflow: hidden; color: var(--vf-navy); font-size: 0.86rem; font-weight: 800; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; } .vf-home-quote-meta span, .vf-home-quote-meta time { margin-top: 0.12rem; overflow: hidden; color: var(--vf-text-muted); font-size: 0.74rem; font-weight: 650; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; } [data-bs-theme="dark"] .vf-home-quote { background: color-mix(in srgb, var(--vf-card) 88%, #fff 4%); border-color: var(--vf-border); box-shadow: none; } [data-bs-theme="dark"] .vf-home-quote[data-tone="sky"] { background: color-mix(in srgb, var(--vf-card-tint-sky) 45%, var(--vf-card)); } [data-bs-theme="dark"] .vf-home-quote[data-tone="teal"] { background: color-mix(in srgb, var(--vf-card-tint-teal) 45%, var(--vf-card)); } [data-bs-theme="dark"] .vf-home-quote[data-tone="gold"] { background: color-mix(in srgb, var(--vf-card-tint-gold) 45%, var(--vf-card)); } [data-bs-theme="dark"] .vf-home-quote[data-tone="violet"] { background: color-mix(in srgb, var(--vf-card-tint-violet) 45%, var(--vf-card)); } [data-bs-theme="dark"] .vf-home-quote[data-tone="navy"] { background: color-mix(in srgb, var(--vf-card-tint-navy) 45%, var(--vf-card)); } @media (max-width: 639.98px) { .vf-home-reviews { --vf-review-per: 1; --vf-review-gap: 0.65rem; } .vf-home-quote { gap: 0.65rem; padding: 0.95rem 0.9rem 0.85rem; border-radius: 0.95rem; } .vf-home-quote-mark { width: 1.85rem; height: 1.85rem; border-radius: 0.55rem; font-size: 0.78rem; } .vf-home-quote .vf-stars.is-static .fa-duotone { font-size: 0.78rem; } .vf-home-quote > p { font-size: 0.86rem; -webkit-line-clamp: 4; } .vf-home-quote footer { gap: 0.55rem; padding-top: 0.7rem; } .vf-home-quote-av { width: 2rem; height: 2rem; font-size: 0.72rem; } .vf-home-quote-meta strong { font-size: 0.8rem; } .vf-home-quote-meta span, .vf-home-quote-meta time { font-size: 0.7rem; } } @media (prefers-reduced-motion: reduce) { .vf-home-reviews-track { transition: none; } } .vf-home-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 1.5rem; padding: 2.5rem 2.4rem; border-radius: 1.35rem; background: radial-gradient(80% 120% at 100% 0%, color-mix(in srgb, var(--brand-400) 28%, transparent), transparent 55%), linear-gradient(135deg, var(--vf-navy) 0%, var(--brand-700) 100%); color: #fff; box-shadow: 0 18px 40px rgba(10, 36, 88, 0.22); } .vf-home-cta h2 { margin: 0; color: #fff; font-size: clamp(1.2rem, 2vw, 1.6rem); font-weight: 800; letter-spacing: -0.03em; } .vf-home-cta p { margin: 0.35rem 0 0; color: rgba(255, 255, 255, 0.82); font-size: 0.92rem; font-weight: 600; } .vf-home-cta-trust { display: inline-flex; align-items: center; gap: 0.4rem; margin-top: 0.7rem !important; color: rgba(255, 255, 255, 0.72); font-size: 0.82rem; font-weight: 500; } .vf-home-cta-trust .fa-duotone { color: var(--vf-warning, #f5b544); } [data-bs-theme="dark"] .vf-pub-bar, [data-bs-theme="dark"] .vf-public-foot, [data-bs-theme="dark"] .vf-brand-mark, [data-bs-theme="dark"] .vf-home-panel, [data-bs-theme="dark"] .vf-home-need, [data-bs-theme="dark"] .vf-home-info, [data-bs-theme="dark"] .vf-home-btn.is-ghost, [data-bs-theme="dark"] .vf-pub-auth-btn.is-logout, [data-bs-theme="dark"] .vf-home-flow-ico, [data-bs-theme="dark"] .vf-home-need-ico, [data-bs-theme="dark"] .vf-home-steps li { background: var(--vf-card); border-color: var(--vf-border); box-shadow: none; } [data-bs-theme="dark"] .vf-public-social a { background: color-mix(in srgb, var(--vf-primary) 18%, var(--vf-card)); border-color: color-mix(in srgb, var(--vf-primary) 28%, var(--vf-border)); color: var(--vf-text); box-shadow: none; } [data-bs-theme="dark"] .vf-home-step-ico, [data-bs-theme="dark"] .vf-home-step-no { background: var(--vf-card-muted); box-shadow: 0 0 0 4px color-mix(in srgb, var(--vf-primary) 16%, transparent); } [data-bs-theme="dark"] .vf-home-step-no { box-shadow: var(--vf-shadow-sm); } [data-bs-theme="dark"] .vf-home-steps li:nth-child(1) { background: color-mix(in srgb, var(--vf-card-tint-navy) 55%, var(--vf-card)); } [data-bs-theme="dark"] .vf-home-steps li:nth-child(2) { background: color-mix(in srgb, var(--vf-card-tint-teal) 55%, var(--vf-card)); } [data-bs-theme="dark"] .vf-home-steps li:nth-child(3) { background: color-mix(in srgb, var(--vf-card-tint-sky) 55%, var(--vf-card)); } [data-bs-theme="dark"] .vf-home-steps li:nth-child(4) { background: color-mix(in srgb, var(--vf-card-tint-gold) 55%, var(--vf-card)); } [data-bs-theme="dark"] .vf-home-steps li:nth-child(5) { background: color-mix(in srgb, var(--vf-card-tint-violet) 55%, var(--vf-card)); } [data-bs-theme="dark"] .vf-pub-nav .navbar-brand, [data-bs-theme="dark"] .vf-home-hero-copy h1, [data-bs-theme="dark"] .vf-home-head h2, [data-bs-theme="dark"] .vf-home-need-intro h2, [data-bs-theme="dark"] .vf-home-info-brand strong, [data-bs-theme="dark"] .vf-home-flow strong, [data-bs-theme="dark"] .vf-visa-card h3, [data-bs-theme="dark"] .vf-home-quote-meta strong, [data-bs-theme="dark"] .vf-home-need-group h3, [data-bs-theme="dark"] .vf-public-foot-logo, [data-bs-theme="dark"] .vf-public-foot-col h2, [data-bs-theme="dark"] .vf-home-btn.is-ghost, [data-bs-theme="dark"] .vf-pub-auth-btn.is-logout, [data-bs-theme="dark"] .vf-home-centers li { color: var(--vf-text); } [data-bs-theme="dark"] .vf-pub-auth-btn.is-logout { background: var(--vf-surface-1); border-color: color-mix(in srgb, #f04438 40%, var(--vf-border)); color: #f97066; } [data-bs-theme="dark"] .vf-pub-auth-btn.is-logout:hover, [data-bs-theme="dark"] .vf-pub-auth-btn.is-logout:focus-visible { background: color-mix(in srgb, #f04438 16%, var(--vf-surface-1)); color: #fda29b; } [data-bs-theme="dark"] .vf-home-flow, [data-bs-theme="dark"] .vf-home-need-group li, [data-bs-theme="dark"] .vf-home-metrics div { background: var(--vf-card-muted); } [data-bs-theme="dark"] .vf-home-need-group[data-group="medical"] li { background: color-mix(in srgb, var(--vf-card-tint-sky) 65%, var(--vf-card-muted)); } [data-bs-theme="dark"] .vf-home-need-group[data-group="optional"] li { background: color-mix(in srgb, var(--vf-card-tint-gold) 65%, var(--vf-card-muted)); } [data-bs-theme="dark"] .vf-home-need-group[data-group="details"] li { background: color-mix(in srgb, var(--vf-card-tint-teal) 65%, var(--vf-card-muted)); } @keyframes vf-home-rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } } @keyframes vf-home-flip-in { from { opacity: 0; transform: translateY(0.3em); } to { opacity: 1; transform: none; } } @keyframes vf-home-letter-in { from { opacity: 0; transform: translateY(0.22em); } to { opacity: 1; transform: none; } } @keyframes vf-home-letter-flip-x { 0%, 45% { color: var(--vf-flip-from, var(--vf-primary)); } 55%, 100% { color: var(--vf-flip-to, var(--vf-hue-teal)); } } @keyframes vf-home-letter-flip-y { 0%, 45% { color: var(--vf-flip-from, var(--vf-primary)); } 55%, 100% { color: var(--vf-flip-to, var(--vf-hue-teal)); } } @keyframes vf-home-letter-flip-wave { 0%, 45% { color: var(--vf-flip-from, var(--vf-primary)); } 55%, 100% { color: var(--vf-flip-to, var(--vf-hue-teal)); } } @keyframes vf-home-dash { to { background-position: 12px 0; } } @keyframes vf-home-pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--vf-primary) 28%, transparent); } 70% { box-shadow: 0 0 0 10px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } } @media (max-width: 991.98px) { .vf-home-hero-grid, .vf-home-need { grid-template-columns: 1fr; } .vf-home-steps { grid-template-columns: 1fr 1fr; } .vf-home-steps li:not(:last-child)::after { display: none; } .vf-home-hero-copy h1 { max-width: none; } .vf-home-reviews { --vf-review-per: 2; } } @media (max-width: 575.98px) { .vf-home-steps { grid-template-columns: 1fr 1fr; } .vf-home-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.35rem; } .vf-home-metrics div { padding: 0.45rem 0.22rem 0.4rem; } .vf-home-metrics dd { font-size: 1.05rem; } .vf-home-metrics dt { font-size: 0.64rem; line-height: 1.25; } .vf-home-hero { padding-top: 3rem; } .vf-home-actions { flex-wrap: nowrap; align-items: stretch; gap: 0.4rem; } .vf-home-actions > .vf-home-btn { flex: 1 1 0; width: auto; min-width: 0; max-width: none; min-height: 2.75rem; padding: 0.45rem 0.5rem; font-size: 0.8rem; line-height: 1.2; text-align: center; white-space: normal; } .vf-home-block { padding: 2.25rem 0; } .vf-home-cta { padding: 1.75rem 1.35rem; } .vf-pub-bar { padding: 0.4rem 0.55rem; } } @media (max-width: 420px) { .vf-pub-bar { padding-inline: 0.28rem; } .vf-pub-nav .navbar-brand { gap: 0.28rem; } .vf-pub-nav .vf-pub-tools { gap: 0.2rem; } .vf-home-actions > .vf-home-btn { min-height: 2.55rem; padding: 0.35rem 0.35rem; font-size: 0.74rem; gap: 0.28rem; } .vf-home-flow { padding-inline: 0.35rem; gap: 0.2rem; } .vf-home-flow li:not(:last-child)::after { display: none; } } @media (prefers-reduced-motion: reduce) { .vf-home-hero-copy h1, .vf-home-title, .vf-home-flip > span, .vf-home-flip.is-loop > span, .vf-home-letter > span, .vf-home-lead, .vf-home-actions, .vf-home-promises, .vf-home-stage, .vf-home-flow-ico, .vf-home-flow li:not(:last-child)::after, .vf-home-steps li, .vf-home-steps li:not(:last-child)::after, .vf-home-step-ico, .vf-home-btn, .vf-home-btn.is-order, .vf-home-btn.is-order::after, .vf-home-btn.is-order-a, .vf-home-btn.is-order-b, .vf-home-btn.is-order-c, .vf-public-social a, .vf-home-need-group li, .vf-visa-card { animation: none !important; transition: none; transform: none; color: inherit; } .vf-home-flip.is-loop { color: var(--vf-primary); } } .vf-stars { display: inline-flex; align-items: center; gap: 0.15rem; } .vf-stars button { display: inline-grid; place-items: center; width: 2rem; height: 2rem; padding: 0; border: 0; background: transparent; color: var(--vf-border-strong); cursor: pointer; line-height: 0; } .vf-stars button:hover, .vf-stars button.is-on, .vf-stars .is-on { color: var(--vf-warning); } .vf-stars .fa-duotone { --fa-primary-color: currentColor; --fa-secondary-color: currentColor; --fa-secondary-opacity: 0.55; font-size: 1.15rem; line-height: 1; } .vf-stars.is-static .fa-duotone { font-size: 0.95rem; } .vf-review-card .vf-stars { margin-bottom: 0.85rem; } .vf-review-card textarea { width: 100%; min-height: 5.5rem; margin-bottom: 0.85rem; padding: 0.7rem 0.9rem; border: 1px solid var(--vf-border); border-radius: var(--vf-radius-md); background: var(--vf-surface-1); color: var(--vf-text); resize: vertical; } .vf-review-card textarea:focus { outline: none; border-color: var(--vf-primary); box-shadow: 0 0 0 3px var(--vf-focus-ring); } .vf-review-public-note { display: flex; align-items: flex-start; gap: 0.4rem; margin-top: 0.75rem; color: var(--vf-text-muted); font-size: 0.8rem; font-weight: 650; line-height: 1.4; } .vf-rating-preview { display: flex; flex-direction: column; gap: 0.7rem; } .vf-rating-preview .vf-stars, .vf-rating-preview .vf-review-quote, .vf-rating-preview .vf-review-public-note, .vf-rating-preview .vf-pay-notice { margin: 0; } .vf-rating-actions { display: flex; gap: 0.55rem; flex-wrap: wrap; margin-bottom: 0.15rem; } .vf-rating-actions .btn { flex: 1 1 auto; } .vf-rating-moderate { display: flex; flex-direction: column; gap: 0.85rem; margin-top: 1rem; } .vf-order-aside .vf-review-card .vf-checkout-card-head h5 { font-size: 0.95rem; } .vf-order-aside .vf-review-quote { margin: 0.45rem 0 0.35rem; font-size: 0.88rem; line-height: 1.45; } .vf-order-aside .vf-review-card textarea { min-height: 4.25rem; margin-bottom: 0.55rem; } .vf-order-aside .vf-pay-notice { align-items: flex-start; } .vf-rating-table-actions { display: flex; justify-content: flex-end; gap: 0.4rem; flex-wrap: wrap; } .vf-reviews .vf-stars.is-static { margin-bottom: 0.25rem; } .vf-review-quote { margin: 0.7rem 0 0.45rem; white-space: pre-wrap; overflow-wrap: anywhere; } /* Auth */ .auth-body { min-height: 100vh; margin: 0; background-color: #d9e3f4; background-image: radial-gradient(circle at 1px 1px, rgba(29, 74, 140, 0.16) 1px, transparent 0), radial-gradient(58% 46% at 10% 12%, color-mix(in srgb, var(--vf-primary) 24%, transparent), transparent 72%), radial-gradient(48% 40% at 92% 88%, color-mix(in srgb, var(--vf-hue-violet) 18%, transparent), transparent 70%); background-size: 22px 22px, auto, auto; } [data-bs-theme="dark"] .auth-body { background-color: #0b1220; background-image: radial-gradient(circle at 1px 1px, rgba(147, 197, 253, 0.12) 1px, transparent 0), radial-gradient(58% 46% at 10% 12%, color-mix(in srgb, var(--vf-primary) 28%, transparent), transparent 72%), radial-gradient(48% 40% at 92% 88%, color-mix(in srgb, var(--vf-hue-violet) 22%, transparent), transparent 70%); background-size: 22px 22px, auto, auto; } .vf-auth-shell { display: flex; flex-direction: column; min-height: 100vh; } .vf-auth-topbar { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.85rem 1.25rem; } .vf-auth-brand { display: inline-flex; align-items: center; gap: 0.5rem; min-width: 0; color: var(--vf-navy); font-weight: 800; text-decoration: none; letter-spacing: -0.02em; } .vf-auth-brand:hover { color: var(--vf-primary); } .vf-auth-topbar-actions { display: flex; align-items: center; gap: 0.4rem; } .vf-auth-topbar-actions .app-icon-btn { width: 2.1rem; height: 2.1rem; border: 1px solid var(--vf-border); border-radius: 999px; background: color-mix(in srgb, var(--vf-card) 88%, transparent); color: var(--vf-text-secondary); } .vf-auth-locale, .vf-auth-home { display: inline-flex; align-items: center; gap: 0.35rem; min-height: 2.1rem; padding: 0 0.7rem; border: 1px solid var(--vf-border); border-radius: 999px; background: color-mix(in srgb, var(--vf-card) 88%, transparent); color: var(--vf-text-secondary); font-size: 0.78rem; font-weight: 750; text-decoration: none; } .vf-auth-locale:hover, .vf-auth-home:hover { color: var(--vf-primary); border-color: var(--vf-primary); } .vf-auth-home .fa-duotone { color: inherit; --fa-primary-color: currentColor; --fa-secondary-color: currentColor; --fa-secondary-opacity: 0.85; } .vf-auth-split { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(320px, 0.95fr); gap: 1.5rem; flex: 1 1 auto; align-items: center; width: min(1180px, calc(100% - 2rem)); margin: 0 auto 1.5rem; padding-bottom: 1.5rem; } .vf-auth-panel { display: flex; justify-content: center; } .vf-auth-simple { display: flex; flex: 1 1 auto; align-items: center; justify-content: center; padding: 0 1rem 2rem; } .vf-auth-card { width: min(440px, 100%); padding: 1.75rem 1.6rem 1.45rem; border-radius: 1.35rem; background: var(--vf-card); border: 1px solid color-mix(in srgb, var(--vf-border) 80%, transparent); box-shadow: var(--vf-shadow-lg); } .vf-auth-card-narrow { width: min(400px, 100%); } .vf-auth-title { margin: 0 0 0.3rem; color: var(--vf-navy); font-size: 1.55rem; font-weight: 800; letter-spacing: -0.03em; } .vf-auth-subtitle { margin: 0 0 1.25rem; color: var(--vf-text-muted); font-size: 0.9rem; font-weight: 600; } .vf-auth-form { display: flex; flex-direction: column; gap: 0.9rem; } .vf-auth-field { display: flex; flex-direction: column; gap: 0.35rem; } .vf-auth-label { color: var(--vf-text-secondary); font-size: 0.82rem; font-weight: 750; } .vf-auth-control { --vf-auth-field: color-mix(in srgb, var(--vf-surface-2) 72%, var(--vf-card)); display: flex; align-items: center; gap: 0.45rem; min-height: 3.05rem; padding: 0 0.55rem 0 0.85rem; border: 1px solid var(--vf-border); border-radius: 0.85rem; background: var(--vf-auth-field); } .vf-auth-control:focus-within { border-color: var(--vf-primary); box-shadow: 0 0 0 3px var(--vf-focus-ring); } .vf-auth-control.is-valid { border-color: var(--vf-success); box-shadow: 0 0 0 3px color-mix(in srgb, var(--vf-success) 22%, transparent); } .vf-auth-control.is-invalid { border-color: var(--vf-danger); box-shadow: 0 0 0 3px color-mix(in srgb, var(--vf-danger) 22%, transparent); } .vf-auth-control input { width: 100%; min-width: 0; margin: 0; padding: 0.55rem 0; border: 0; background: transparent; color: var(--vf-text); font-size: 0.95rem; font-weight: 650; outline: none; } .vf-auth-control input::placeholder { color: var(--vf-text-muted); font-weight: 550; } .vf-auth-control input:-webkit-autofill, .vf-auth-control input:-webkit-autofill:hover, .vf-auth-control input:-webkit-autofill:focus { -webkit-text-fill-color: var(--vf-text); caret-color: var(--vf-text); transition: background-color 9999s ease-out; box-shadow: 0 0 0 1000px var(--vf-auth-field) inset; } .vf-auth-control > i { flex-shrink: 0; color: var(--vf-primary); font-size: 0.95rem; } .vf-auth-check { display: inline-flex; align-items: center; gap: 0.5rem; margin: 0.1rem 0 0.15rem; color: var(--vf-text-secondary); font-size: 0.86rem; font-weight: 650; cursor: pointer; user-select: none; } .vf-auth-check input { width: 1.05rem; height: 1.05rem; margin: 0; accent-color: var(--vf-primary); } .vf-auth-submit { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; min-height: 3.05rem; margin-top: 0.15rem; border: 0; border-radius: 0.85rem; background: var(--vf-primary); color: #fff; font-size: 0.98rem; font-weight: 800; letter-spacing: 0.01em; cursor: pointer; box-shadow: 0 10px 22px rgba(26, 86, 219, 0.28); } .vf-auth-submit:hover { background: var(--vf-primary-hover); color: #fff; } .vf-auth-submit i, .vf-auth-submit .fa-duotone { color: inherit; font-size: 0.9rem; --fa-primary-color: currentColor; --fa-secondary-color: currentColor; --fa-secondary-opacity: 0.85; } .vf-turnstile { display: flex; justify-content: center; width: 100%; margin: 0.08rem 0 0; } .vf-turnstile .cf-turnstile { width: 300px; max-width: 100%; min-height: 65px; } .vf-auth-switch { margin: 1.05rem 0 0; text-align: center; color: var(--vf-text-muted); font-size: 0.88rem; font-weight: 600; } .vf-auth-switch a { color: var(--vf-primary); font-weight: 800; text-decoration: none; } .vf-auth-switch a:hover { text-decoration: underline; } .vf-auth-split.is-signup { align-items: center; gap: 1rem; width: min(1120px, calc(100% - 1.5rem)); margin: 0 auto; padding-bottom: 0.35rem; } .vf-auth-shell:has(.is-signup) .vf-auth-topbar { padding: 0.4rem 1rem; } .vf-auth-split.is-signup .vf-login-stage { gap: 0.85rem; width: 100%; padding-top: 0; } .vf-auth-split.is-signup .vf-login-art { width: 100%; max-width: 36rem; height: auto; } .vf-auth-split.is-signup .vf-login-points { gap: 0.45rem; } .vf-auth-split.is-signup .vf-login-points li { min-height: 4.1rem; padding: 0.45rem 0.35rem 0.4rem; font-size: 0.72rem; } .vf-auth-split.is-signup .vf-auth-card { width: min(420px, 100%); padding: 1.15rem 1.2rem 1rem; } .vf-auth-split.is-signup .vf-auth-title { margin-bottom: 0.7rem; font-size: 1.32rem; text-align: center; } .vf-auth-split.is-signup .vf-auth-form { position: relative; gap: 0.65rem; } .vf-signup-part { display: flex; flex-direction: column; gap: 0.42rem; margin: 0; padding: 0.6rem 0.65rem 0.55rem; border: 1px solid color-mix(in srgb, var(--vf-border) 78%, transparent); border-radius: 0.85rem; background: color-mix(in srgb, var(--vf-primary-soft) 46%, var(--vf-card)); } .vf-signup-part-title { margin: 0; color: var(--vf-navy); font-size: 0.74rem; font-weight: 800; letter-spacing: 0.05em; line-height: 1.2; text-transform: uppercase; } .vf-signup-part[hidden] { display: none !important; } .vf-signup-progress { display: grid; grid-template-columns: 1fr 1fr; gap: 0.35rem; margin: 0 0 0.55rem; } .vf-signup-progress span { display: block; height: 0.28rem; border-radius: 999px; background: color-mix(in srgb, var(--vf-border) 80%, var(--vf-card)); } .vf-signup-progress span.is-on, .vf-signup-progress span.is-done { background: var(--vf-primary); } .vf-signup-actions { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.45rem; align-items: center; } .vf-signup-back { display: inline-flex; align-items: center; justify-content: center; gap: 0.35rem; min-height: 2.35rem; padding: 0 0.75rem; border: 1px solid var(--vf-border); border-radius: 0.6rem; background: var(--vf-card); color: var(--vf-text); font-size: 0.8rem; font-weight: 800; cursor: pointer; } .vf-signup-back:hover, .vf-signup-back:focus-visible { border-color: var(--vf-primary); color: var(--vf-primary); } .vf-auth-split.is-signup .vf-signup-part .vf-auth-control { background: var(--vf-card); } .vf-auth-split.is-signup .vf-auth-field { gap: 0.22rem; } .vf-auth-split.is-signup .vf-auth-label { color: var(--vf-text-muted); font-family: inherit; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.02em; line-height: 1.25; text-transform: uppercase; } .vf-auth-split.is-signup .vf-auth-section { margin: 0; color: var(--vf-navy); font-family: "Segoe UI", system-ui, sans-serif; font-size: 0.8rem; font-weight: 600; letter-spacing: 0.01em; line-height: 1.25; } .vf-auth-split.is-signup .vf-auth-grid { gap: 0.4rem; } .vf-auth-split.is-signup .vf-auth-grid.is-pair { grid-template-columns: 1fr 1fr; gap: 0.45rem; } .vf-auth-split.is-signup .vf-auth-grid.is-pair .vf-auth-field { gap: 0.12rem; justify-content: flex-end; } .vf-auth-split.is-signup .vf-auth-grid.is-pair .vf-auth-label { display: flex; align-items: flex-end; min-height: 2.2em; margin: 0; } .vf-auth-split.is-signup .vf-auth-control { min-height: 2.15rem; padding: 0 0.45rem 0 0.6rem; border-radius: 0.65rem; gap: 0.4rem; } .vf-auth-split.is-signup .vf-auth-control > i { font-size: 0.82rem; } .vf-auth-split.is-signup .vf-auth-control input { padding: 0.12rem 0; font-family: "Segoe UI", system-ui, sans-serif; font-size: 0.88rem; font-weight: 500; line-height: 1.15; } .vf-auth-split.is-signup .vf-auth-control input[data-signup-check="phone"], .vf-auth-split.is-signup .vf-auth-control input[data-signup-check="passport"] { font-family: ui-monospace, "Cascadia Mono", "Segoe UI Mono", Consolas, monospace; font-size: 0.92rem; font-weight: 600; letter-spacing: 0.04em; } .vf-signup-match { display: flex; align-items: center; gap: 0.35rem; margin: 0; font-size: 0.72rem; font-weight: 700; line-height: 1.2; } .vf-signup-match[hidden] { display: none; } .vf-signup-match i { font-size: 0.75rem; } .vf-signup-match.is-match { color: var(--vf-success-text); } .vf-signup-match.is-mismatch { color: var(--vf-danger-text); } .vf-auth-split.is-signup .vf-auth-submit { min-height: 2.35rem; margin-top: 0; font-size: 0.92rem; border-radius: 0.75rem; } .vf-auth-split.is-signup .vf-signup-avatar { display: grid; grid-template-columns: 3.15rem minmax(0, 1fr); gap: 0.65rem; align-items: center; margin: 0; padding: 0.4rem 0.55rem 0.4rem 0.4rem; border: 1px dashed color-mix(in srgb, var(--vf-primary) 42%, var(--vf-border)); border-radius: 0.85rem; background: color-mix(in srgb, var(--vf-primary) 5%, var(--vf-card)); transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease; } .vf-auth-split.is-signup .vf-signup-avatar.is-dragover, .vf-auth-split.is-signup .vf-signup-avatar:focus-within { border-style: solid; border-color: var(--vf-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--vf-primary) 20%, transparent); background: color-mix(in srgb, var(--vf-primary) 9%, var(--vf-card)); } .vf-auth-split.is-signup .vf-signup-avatar-preview { width: 3.15rem; height: 3.15rem; display: grid; place-items: center; overflow: hidden; border-radius: 50%; background: var(--vf-primary-soft, color-mix(in srgb, var(--vf-primary) 14%, var(--vf-card))); color: var(--vf-primary); font-size: 1.05rem; } .vf-auth-split.is-signup .vf-signup-avatar-preview.has-photo img { width: 100%; height: 100%; object-fit: cover; } .vf-auth-split.is-signup .vf-signup-avatar-copy { min-width: 0; } .vf-auth-split.is-signup .vf-signup-avatar-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; margin-top: 0.2rem; } .vf-auth-split.is-signup .vf-signup-avatar-types { color: var(--vf-text-muted); font-size: 0.68rem; font-weight: 650; line-height: 1.2; white-space: nowrap; } .vf-auth-split.is-signup .vf-signup-avatar-pick { display: inline-flex; align-items: center; gap: 0.35rem; min-height: 1.7rem; max-width: 100%; margin: 0; padding: 0.15rem 0.7rem; border: 1px solid var(--vf-border); border-radius: 999px; background: var(--vf-card); color: var(--vf-text); font-size: 0.72rem; font-weight: 700; line-height: 1.2; cursor: pointer; } .vf-auth-split.is-signup .vf-signup-avatar-pick span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .vf-auth-split.is-signup .vf-signup-avatar-pick:hover, .vf-auth-split.is-signup .vf-signup-avatar.has-file .vf-signup-avatar-pick { border-color: var(--vf-primary); color: var(--vf-primary); } .vf-auth-split.is-signup .vf-signup-avatar-remove { border: 0; background: transparent; color: var(--vf-text-muted); font: inherit; font-size: 0.72rem; font-weight: 700; line-height: 1.2; padding: 0.2rem 0.35rem; border-radius: 0.45rem; cursor: pointer; } .vf-auth-split.is-signup .vf-signup-avatar-remove:hover, .vf-auth-split.is-signup .vf-signup-avatar-remove:focus-visible { color: var(--vf-danger); outline: 2px solid color-mix(in srgb, var(--vf-primary) 35%, transparent); outline-offset: 2px; } .vf-auth-split.is-signup .vf-signup-avatar.is-invalid { border-color: var(--vf-danger); } .vf-auth-split.is-signup .vf-turnstile { height: 54px; margin: 0; overflow: hidden; } .vf-auth-split.is-signup .vf-turnstile .cf-turnstile { min-height: 0; transform: scale(0.82); transform-origin: top center; } .vf-auth-split.is-signup .vf-auth-switch { margin-top: 0.28rem; font-size: 0.78rem; } .vf-auth-split.is-login { align-items: center; flex: 1 1 auto; grid-template-columns: minmax(0, 1fr) 360px; gap: 1.25rem; width: min(980px, calc(100% - 1.5rem)); min-height: 0; margin: 0 auto; padding-bottom: 0; } .auth-body:has(.is-login) { min-height: 100dvh; overflow: auto; } .vf-auth-shell:has(.is-login) { min-height: 100dvh; } .vf-auth-shell:has(.is-login) .vf-auth-topbar { flex: 0 0 auto; padding: 0.45rem 1rem; } .auth-body:has(.is-login), .auth-body:has(.is-signup) { background-color: #eef3fb; background-image: radial-gradient(circle at 1px 1px, rgba(26, 86, 219, 0.16) 1.1px, transparent 0); background-size: 22px 22px; } .vf-login-stage { display: flex; flex-direction: column; justify-content: center; gap: 1.35rem; min-width: 0; padding: 0.4rem 0.2rem 0.2rem; } .vf-login-art { display: block; width: min(100%, 34rem); height: auto; margin: 0 auto; } .vf-login-points { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.7rem; margin: 0; padding: 0; list-style: none; } .vf-login-points li { display: grid; justify-items: center; align-content: center; gap: 0.4rem; min-width: 0; min-height: 5.35rem; padding: 0.7rem 0.45rem 0.65rem; border: 1px solid color-mix(in srgb, var(--vf-border) 70%, transparent); border-radius: 0.95rem; background: var(--vf-card); box-shadow: var(--vf-shadow-sm); color: var(--vf-navy); font-size: 0.78rem; font-weight: 800; letter-spacing: -0.02em; line-height: 1.2; text-align: center; } .vf-login-points span { display: grid; place-items: center; width: 2.15rem; height: 2.15rem; border-radius: 0.65rem; background: var(--vf-primary-soft); color: var(--vf-primary); font-size: 0.95rem; } .vf-login-points li[data-tone="sky"] span { background: var(--vf-hue-sky-soft); color: var(--vf-hue-sky); } .vf-login-points li[data-tone="teal"] span { background: var(--vf-hue-teal-soft); color: var(--vf-hue-teal); } .vf-login-points li[data-tone="violet"] span { background: var(--vf-hue-violet-soft); color: var(--vf-hue-violet); } .vf-auth-split.is-login .vf-auth-card { width: min(360px, 100%); padding: 1.05rem 0.9rem 0.9rem; } .vf-login-secure { display: grid; justify-items: center; margin: 0 0 0.45rem; } .vf-login-secure-ico { position: relative; display: grid; place-items: center; width: 3.6rem; height: 3.6rem; overflow: visible; border-radius: 1.05rem; background: var(--vf-primary-soft); color: var(--vf-primary); font-size: 1.7rem; } .vf-login-secure-ico > .fa-duotone, .vf-login-secure-scan .fa-duotone { --fa-primary-color: currentColor; --fa-secondary-color: currentColor; --fa-secondary-opacity: 0.55; } .vf-login-secure-scan { position: absolute; left: 50%; top: 50%; width: 1.15rem; height: 1.15rem; margin: -0.575rem 0 0 -0.575rem; color: var(--vf-navy); pointer-events: none; animation: vf-login-orbit 2.4s linear infinite; } .vf-login-secure-scan .fa-duotone { position: absolute; left: 50%; top: 50%; font-size: 0.82rem; transform: translate(-50%, -50%) translateY(-1.28rem); animation: vf-login-orbit-face 2.4s linear infinite; } .vf-login-secure.is-clear .vf-login-secure-ico { background: var(--vf-success-soft); color: var(--vf-success); animation: vf-login-secure-pop 0.4s ease; } .vf-login-secure.is-clear .vf-login-secure-scan, .vf-auth-split.is-login:not(:has(.cf-turnstile)) .vf-login-secure-scan { display: none; } @keyframes vf-login-orbit { to { transform: rotate(360deg); } } @keyframes vf-login-orbit-face { to { transform: translate(-50%, -50%) translateY(-1.28rem) rotate(-360deg); } } @keyframes vf-login-secure-pop { 0% { transform: scale(0.92); } 60% { transform: scale(1.06); } 100% { transform: scale(1); } } @media (prefers-reduced-motion: reduce) { .vf-login-secure-scan, .vf-login-secure-scan .fa-duotone, .vf-login-secure.is-clear .vf-login-secure-ico { animation: none; } } .vf-auth-split.is-login .vf-auth-title { margin-bottom: 0.7rem; font-size: 1.2rem; line-height: 1.2; text-align: center; } .vf-auth-split.is-login .vf-auth-form { align-items: stretch; gap: 0; } .vf-auth-split.is-login .vf-login-sheet { --vf-login-col: min(100%, 16.5rem); display: flex; flex-direction: column; align-items: center; gap: 0.62rem; width: 100%; margin: 0; padding: 0.95rem 0.9rem 0.85rem; border: 1px solid color-mix(in srgb, var(--vf-border) 78%, transparent); border-radius: 1rem; background: color-mix(in srgb, var(--vf-primary-soft) 42%, var(--vf-card)); box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 65%, transparent); } .vf-auth-split.is-login .vf-login-sheet .vf-auth-field, .vf-auth-split.is-login .vf-login-sheet .vf-auth-check, .vf-auth-split.is-login .vf-login-sheet .vf-auth-submit, .vf-auth-split.is-login .vf-login-sheet .vf-turnstile { width: var(--vf-login-col); } .vf-auth-split.is-login .vf-login-sheet .vf-auth-control { background: var(--vf-card); } .vf-auth-split.is-login .vf-login-sheet .vf-turnstile { display: block; height: auto; margin: 0.1rem 0 0; overflow: visible; } .vf-auth-split.is-login .vf-login-sheet .cf-turnstile { display: block; position: static; width: 300px; max-width: none; height: auto; min-height: 65px; margin: 0; overflow: visible; transform: none; zoom: 0.88; zoom: calc(16.5rem / 300px); } .vf-auth-split.is-login .vf-auth-field { gap: 0.28rem; } .vf-auth-split.is-login .vf-auth-label { color: var(--vf-text-secondary); font-family: inherit; font-size: 0.78rem; font-weight: 700; letter-spacing: 0; line-height: 1.2; text-transform: none; } .vf-auth-split.is-login .vf-auth-control { min-height: 2.6rem; padding: 0 0.4rem 0 0.72rem; border-radius: 0.75rem; gap: 0.45rem; } .vf-auth-split.is-login .vf-auth-control > i { font-size: 0.88rem; } .vf-auth-split.is-login .vf-pass-toggle { width: 1.7rem; height: 1.7rem; } .vf-auth-split.is-login .vf-auth-control input { padding: 0.35rem 0; font-family: "Segoe UI", system-ui, sans-serif; font-size: 0.92rem; font-weight: 600; line-height: 1.2; } .vf-auth-split.is-login .vf-auth-submit { min-height: 2.6rem; margin-top: 0.1rem; border-radius: 0.75rem; font-size: 0.95rem; } .vf-auth-split.is-login .vf-auth-check { margin: 0; font-size: 0.8rem; } .vf-auth-split.is-login .vf-auth-switch { margin-top: 0.65rem; font-size: 0.8rem; } .vf-auth-simple .vf-auth-control, .vf-auth-simple .vf-auth-submit { min-height: 2.85rem; } .vf-auth-simple .vf-auth-card { padding: 1.45rem 1.4rem 1.25rem; } .vf-signup-card { position: relative; overflow: visible; perspective: 1400px; } .vf-signup-busy { position: absolute; inset: 0; z-index: 8; display: none; place-items: center; align-content: center; gap: 0.5rem; padding: 1rem 1.1rem; border-radius: inherit; background: color-mix(in srgb, #fff 90%, transparent); backdrop-filter: blur(10px); text-align: center; } .vf-signup-card.is-busy { overflow: hidden; } .vf-signup-card.is-busy .vf-signup-busy { display: grid; } .vf-signup-card.is-busy .vf-signup-flip { pointer-events: none; } [data-bs-theme="dark"] .vf-signup-busy { background: color-mix(in srgb, var(--vf-surface-1) 90%, transparent); } .vf-signup-busy-visual { position: relative; display: grid; place-items: center; width: 4.35rem; height: 4.35rem; } .vf-signup-busy-ring { position: absolute; inset: 0; border: 3px solid color-mix(in srgb, var(--vf-primary) 16%, transparent); border-top-color: var(--vf-primary); border-radius: 50%; animation: vfSignupSpin 0.75s linear infinite; } .vf-signup-card[data-busy="ok"] .vf-signup-busy-ring { display: none; } .vf-signup-busy-visual i { font-size: 1.42rem; color: var(--vf-primary); --fa-primary-color: currentColor; --fa-secondary-color: currentColor; --fa-secondary-opacity: 0.72; } .vf-signup-card[data-busy="send"] .vf-signup-busy-visual i { animation: vfSignupFly 1.05s ease-in-out infinite; } .vf-signup-card[data-busy="ok"] .vf-signup-busy-visual i { color: var(--vf-success); animation: vfSignupPop 0.45s ease; } .vf-signup-busy strong { color: var(--vf-navy); font-size: 0.98rem; font-weight: 800; } .vf-signup-busy p { margin: 0; max-width: 16rem; color: var(--vf-text-secondary); font-size: 0.78rem; font-weight: 600; line-height: 1.4; } .vf-signup-card.is-otp .vf-auth-title, .vf-signup-card.is-otp .vf-signup-progress { display: none; } .vf-signup-otp-form { gap: 0.62rem !important; } .vf-signup-otp-hero { display: grid; justify-items: center; gap: 0.32rem; text-align: center; } .vf-signup-otp-icon { display: grid; place-items: center; width: 3.15rem; height: 3.15rem; border-radius: 0.95rem; background: var(--vf-primary-soft); color: var(--vf-primary); font-size: 1.28rem; box-shadow: 0 8px 18px rgba(26, 86, 219, 0.12); } .vf-signup-otp-icon .fa-duotone { --fa-primary-color: currentColor; --fa-secondary-color: currentColor; --fa-secondary-opacity: 0.55; } .vf-signup-otp-hero h2 { margin: 0; color: var(--vf-navy); font-size: 1.08rem; font-weight: 800; letter-spacing: -0.03em; } .vf-signup-otp-copy { margin: 0; max-width: 18rem; color: var(--vf-text-secondary); font-size: 0.76rem; font-weight: 600; line-height: 1.45; text-align: center; } .vf-signup-otp-mail { display: inline-flex; align-items: center; gap: 0.32rem; padding: 0.22rem 0.62rem; border-radius: 999px; background: var(--vf-primary-soft); color: var(--vf-navy); font-size: 0.72rem; font-weight: 800; } .vf-signup-otp-mail i { color: var(--vf-primary); font-size: 0.72rem; } .vf-signup-otp-hint { display: inline-flex; align-items: center; justify-content: center; gap: 0.35rem; margin: 0; color: var(--vf-text-muted); font-size: 0.7rem; font-weight: 650; } .vf-signup-otp-hint i { color: var(--vf-success); font-size: 0.78rem; } .vf-signup-otp-foot { display: flex; align-items: center; justify-content: center; min-height: 1.35rem; gap: 0.45rem; } .vf-signup-otp-timer { display: inline-flex; align-items: center; gap: 0.35rem; color: var(--vf-text-secondary); font-size: 0.74rem; font-weight: 750; } .vf-signup-otp-timer i { color: var(--vf-primary); } .vf-signup-flip { position: relative; transform-style: preserve-3d; transition: transform 0.72s cubic-bezier(0.22, 0.9, 0.28, 1); } .vf-signup-card.is-flipped .vf-signup-flip { transform: rotateY(180deg); } .vf-signup-face { -webkit-backface-visibility: hidden; backface-visibility: hidden; } .vf-signup-face.is-back { position: absolute; inset: 0; display: grid; place-items: center; transform: rotateY(180deg); border-radius: inherit; background: #fff; } [data-bs-theme="dark"] .vf-signup-face.is-back { background: var(--vf-surface-1); } .vf-signup-otp { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0.38rem; } .vf-signup-otp input { width: 100%; min-height: 2.7rem; padding: 0; border: 1px solid #d5deec; border-radius: 0.7rem; background: #f7f9fd; color: var(--vf-navy); font-size: 1.18rem; font-weight: 800; text-align: center; outline: none; transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease; } .vf-signup-otp input:focus { border-color: var(--vf-primary); background: #fff; box-shadow: 0 0 0 3px var(--vf-focus-ring); } .vf-signup-resend { display: inline-flex; align-items: center; gap: 0.32rem; margin: 0; padding: 0; border: 0; background: transparent; color: var(--vf-primary); font-size: 0.76rem; font-weight: 800; cursor: pointer; } .vf-signup-resend i { font-size: 0.78rem; } .vf-signup-resend:disabled { color: var(--vf-text-muted); cursor: default; } .vf-signup-result { display: grid; justify-items: center; gap: 0.55rem; padding: 1.1rem 0.4rem; text-align: center; } .vf-signup-result strong { color: var(--vf-navy); font-size: 1.08rem; font-weight: 800; } .vf-signup-result p { margin: 0; max-width: 16rem; color: var(--vf-text-secondary); font-size: 0.8rem; font-weight: 600; line-height: 1.45; } .vf-signup-mark { display: grid; place-items: center; width: 4.1rem; height: 4.1rem; } .vf-signup-mark svg { width: 100%; height: 100%; fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; } .vf-signup-mark circle { stroke: currentColor; stroke-dasharray: 160; stroke-dashoffset: 160; } .vf-signup-mark path { stroke: currentColor; stroke-dasharray: 48; stroke-dashoffset: 48; } .vf-signup-mark .is-cross-a, .vf-signup-mark .is-cross-b { display: none; } .vf-signup-card.is-ok .vf-signup-mark { color: var(--vf-success); } .vf-signup-card.is-err .vf-signup-mark { color: var(--vf-danger); } .vf-signup-card.is-err .vf-signup-mark .is-tick { display: none; } .vf-signup-card.is-err .vf-signup-mark .is-cross-a, .vf-signup-card.is-err .vf-signup-mark .is-cross-b { display: block; } .vf-signup-card.is-flipped .vf-signup-mark circle, .vf-signup-card.is-flipped .vf-signup-mark path { animation: vfSignupStroke 0.55s 0.18s ease forwards; } @keyframes vfSignupStroke { to { stroke-dashoffset: 0; } } @keyframes vfSignupSpin { to { transform: rotate(360deg); } } @keyframes vfSignupFly { 0%, 100% { transform: translate(-2px, 4px) rotate(-14deg); opacity: 0.72; } 50% { transform: translate(7px, -9px) rotate(10deg); opacity: 1; } } @keyframes vfSignupPop { 0% { transform: scale(0.45); } 70% { transform: scale(1.14); } 100% { transform: scale(1); } } @media (prefers-reduced-motion: reduce) { .vf-signup-flip { transition: none; } .vf-signup-card.is-flipped .vf-signup-mark circle, .vf-signup-card.is-flipped .vf-signup-mark path { animation: none; stroke-dashoffset: 0; } .vf-signup-busy-ring, .vf-signup-card[data-busy="send"] .vf-signup-busy-visual i, .vf-signup-card[data-busy="ok"] .vf-signup-busy-visual i { animation: none; } } .vf-auth-honey { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; } .vf-auth-grid { display: grid; grid-template-columns: 1fr; gap: 0.55rem; } .vf-auth-section { margin: 0.15rem 0 0; color: var(--vf-navy); font-size: 0.72rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; } .vf-auth-strength { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.28rem; height: 0.32rem; } .vf-auth-strength[hidden] { display: none; } .vf-auth-strength span { display: block; height: 100%; border-radius: 999px; background: #d5deec; transform: scaleX(0.35); opacity: 0.4; transform-origin: left center; transition: transform 0.28s ease, background-color 0.28s ease, opacity 0.28s ease; } .vf-auth-strength[data-level="weak"] span:nth-child(-n+1), .vf-auth-strength[data-level="fair"] span:nth-child(-n+2), .vf-auth-strength[data-level="good"] span:nth-child(-n+3), .vf-auth-strength[data-level="strong"] span:nth-child(-n+4) { transform: scaleX(1); opacity: 1; } .vf-auth-strength[data-level="weak"] span:nth-child(-n+1) { background: var(--vf-danger); } .vf-auth-strength[data-level="fair"] span:nth-child(-n+2) { background: var(--vf-warning); } .vf-auth-strength[data-level="good"] span:nth-child(-n+3) { background: var(--vf-primary); } .vf-auth-strength[data-level="strong"] span:nth-child(-n+4) { background: var(--vf-success); } @media (prefers-reduced-motion: reduce) { .vf-auth-strength span, .vf-auth-split.is-signup .vf-auth-control, .vf-auth-split.is-signup .vf-signup-avatar { transition: none; } } [data-bs-theme="dark"] .vf-auth-section, [data-bs-theme="dark"] .vf-signup-part-title { color: var(--vf-text); } [data-bs-theme="dark"] .vf-signup-part { background: color-mix(in srgb, var(--vf-primary) 12%, var(--vf-card)); border-color: var(--vf-border); } [data-bs-theme="dark"] .vf-auth-split.is-signup .vf-signup-part .vf-auth-control { background: color-mix(in srgb, var(--vf-canvas) 58%, var(--vf-card)); } [data-bs-theme="dark"] .vf-auth-strength span { background: #33415c; } [data-bs-theme="dark"] .auth-body:has(.is-login), [data-bs-theme="dark"] .auth-body:has(.is-signup) { background-color: #10182a; background-image: radial-gradient(circle at 1px 1px, rgba(147, 197, 253, 0.16) 1.1px, transparent 0); background-size: 22px 22px; } [data-bs-theme="dark"] .vf-login-points li { background: var(--vf-card); border-color: var(--vf-border); color: var(--vf-text); } [data-bs-theme="dark"] .vf-auth-brand, [data-bs-theme="dark"] .vf-auth-title { color: var(--vf-text); } [data-bs-theme="dark"] .vf-login-secure-ico { background: color-mix(in srgb, var(--vf-primary) 18%, var(--vf-card)); color: var(--vf-hue-sky); } [data-bs-theme="dark"] .vf-login-secure-scan { color: #fff; } [data-bs-theme="dark"] .vf-login-secure.is-clear .vf-login-secure-ico { background: var(--vf-success-soft); color: var(--vf-success); } [data-bs-theme="dark"] .vf-auth-card { background: var(--vf-card); border-color: var(--vf-border); box-shadow: var(--vf-shadow-lg); } [data-bs-theme="dark"] .vf-auth-split.is-login .vf-login-sheet { background: color-mix(in srgb, var(--vf-primary) 16%, var(--vf-card)); border-color: var(--vf-border); box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 8%, transparent); } [data-bs-theme="dark"] .vf-auth-split.is-login .vf-login-sheet .vf-auth-control { background: color-mix(in srgb, var(--vf-canvas) 62%, var(--vf-card)); } [data-bs-theme="dark"] .vf-auth-control { --vf-auth-field: color-mix(in srgb, var(--vf-canvas) 72%, var(--vf-card)); background: var(--vf-auth-field); border-color: var(--vf-border); } [data-bs-theme="dark"] .vf-auth-topbar-actions .app-icon-btn, [data-bs-theme="dark"] .vf-auth-locale, [data-bs-theme="dark"] .vf-auth-home { background: var(--vf-surface-1); border-color: var(--vf-border); color: var(--vf-text-secondary); } @media (max-width: 991.98px) { .vf-login-art { width: min(100%, 28rem); } .vf-login-points { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.45rem; } .vf-login-points li { min-height: 4.8rem; padding: 0.55rem 0.3rem; font-size: 0.68rem; } .vf-auth-split { grid-template-columns: 1fr; width: min(480px, calc(100% - 1.5rem)); align-items: start; padding-top: 0.5rem; } .vf-auth-home span { display: none; } .vf-auth-split.is-signup { grid-template-columns: 1fr; width: min(430px, calc(100% - 1.5rem)); } .vf-auth-split.is-login { grid-template-columns: 1fr; align-items: center; width: min(640px, calc(100% - 1.25rem)); padding-top: 0; } .vf-auth-split.is-login .vf-login-art { width: min(100%, 28rem); } .vf-auth-split.is-signup .vf-login-art { width: min(100%, 22rem); max-width: 100%; } .vf-auth-split.is-signup .vf-auth-card { width: 100%; } .vf-auth-split.is-login .vf-auth-card { width: min(360px, 100%); } } @media (max-width: 575.98px) { .vf-login-art { width: 100%; } } @media (max-width: 380px) { .vf-auth-split.is-signup .vf-auth-grid.is-pair { grid-template-columns: 1fr; } } /* Order timeline & stats */ .order-timeline { position: relative; padding-left: 2rem; } .order-timeline::before { content: ''; position: absolute; left: 0.6rem; top: 0; bottom: 0; width: 2px; background: var(--vf-border); } .timeline-item { position: relative; padding-bottom: 1.5rem; } .timeline-item::before { content: ''; position: absolute; left: -1.65rem; top: 0.25rem; width: 12px; height: 12px; border-radius: 50%; background: var(--vf-border-strong); border: 2px solid var(--vf-surface-1); } .timeline-item.done::before { background: var(--vf-primary); } .timeline-item.active::before { background: var(--vf-accent); box-shadow: 0 0 0 4px var(--vf-focus-ring); } /* -------------------------------------------------------------------------- */ /* Layer 4 — App shell */ /* -------------------------------------------------------------------------- */ body.app-body { margin: 0; height: 100dvh; overflow: hidden; background: var(--vf-canvas); } .app-shell { height: 100dvh; display: grid; grid-template-columns: var(--vf-sidebar-w) minmax(0, 1fr); grid-template-rows: var(--vf-navbar-h) minmax(0, 1fr) var(--vf-footer-h); grid-template-areas: "navbar navbar" "sidebar main" "sidebar footer"; overflow: hidden; padding: var(--vf-shell-gap); gap: var(--vf-shell-gap); box-sizing: border-box; transition: grid-template-columns 0.22s ease; } .app-navbar, .app-footer { box-sizing: border-box; border-radius: var(--vf-radius); box-shadow: var(--vf-shadow-sm); border: 1px solid var(--vf-border); background: var(--vf-chrome); } .app-navbar { grid-area: navbar; display: flex; align-items: center; gap: 0.75rem; height: var(--vf-navbar-h); min-width: 0; padding: 0 1.1rem; background: var(--vf-chrome); overflow: visible; z-index: 30; } .app-sidebar { grid-area: sidebar; position: relative; display: flex; flex-direction: column; min-width: 0; min-height: 0; overflow: visible; z-index: 20; } .app-sidebar-inner { display: flex; flex-direction: column; flex: 1; min-width: 0; min-height: 0; background: var(--vf-chrome); border: 1px solid var(--vf-border); border-radius: var(--vf-radius); box-shadow: var(--vf-shadow-sm); overflow: hidden; } .app-main { grid-area: main; display: flex; flex-direction: column; min-width: 0; min-height: 0; overflow: hidden; background: var(--vf-surface-2); border: 1px solid var(--vf-border); border-radius: var(--vf-radius); box-shadow: var(--vf-shadow-sm); } .app-content { flex: 1; min-width: 0; min-height: 0; overflow-x: hidden; overflow-y: auto; padding: 1.25rem 1.5rem; background: var(--vf-surface-2); scrollbar-width: none; -ms-overflow-style: none; } .app-content::-webkit-scrollbar { width: 0; height: 0; } .app-footer { grid-area: footer; display: flex; align-items: center; justify-content: center; height: var(--vf-footer-h); padding: 0 1rem; background: var(--vf-chrome); color: var(--vf-text-muted); font-size: 0.8rem; z-index: 10; } .app-backdrop { display: none; } /* Navbar internals */ .app-nav-start { display: flex; align-items: center; gap: 0.65rem; min-width: 0; flex: 1; } .app-navbar .navbar-brand { display: flex; align-items: center; gap: 0.5rem; min-width: 0; margin: 0; padding: 0; font-weight: 700; color: var(--vf-primary); text-decoration: none; line-height: 1.2; } .app-navbar .navbar-brand:hover { color: var(--vf-primary-hover); } .app-navbar .navbar-brand .fa-duotone, .app-brand-badge { flex-shrink: 0; } .vf-brand-mark { --vf-mark-h: 2.65rem; position: relative; display: inline-grid; place-items: center; flex-shrink: 0; width: var(--vf-mark-h); height: var(--vf-mark-h); padding: 0; overflow: hidden; border-radius: 50%; background: #fff; border: 1px solid color-mix(in srgb, var(--vf-border) 70%, transparent); box-shadow: 0 1px 3px rgba(21, 32, 56, 0.06); } .vf-brand-mark:has(img) { background: #fff; } .vf-brand-mark img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: center; } .vf-brand-mark i { font-size: 1.05rem; color: var(--vf-primary); } .vf-pub-nav .vf-brand-mark { --vf-mark-h: 2.35rem; } .app-navbar .vf-brand-mark { --vf-mark-h: 2.85rem; } .vf-auth-brand .vf-brand-mark { --vf-mark-h: 2.7rem; } .app-brand-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .app-brand-badge { font-size: 0.65rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--vf-primary); background: var(--vf-primary-soft); border-radius: 999px; padding: 0.18rem 0.5rem; } .app-navbar .app-nav-actions { display: flex; align-items: center; gap: 0.45rem; margin-left: auto; flex-shrink: 0; } .app-icon-btn { appearance: none; -webkit-appearance: none; display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; width: 2.5rem; height: 2.5rem; margin: 0; padding: 0; border: 1px solid var(--vf-border); border-radius: 50%; background: transparent; color: var(--vf-text); text-decoration: none; line-height: 1; cursor: pointer; flex-shrink: 0; } .app-icon-btn:hover, .app-icon-btn:focus-visible { background: var(--vf-surface-3); color: var(--vf-primary); border-color: var(--vf-border-strong); } .app-icon-btn .fa-duotone { display: flex; align-items: center; justify-content: center; width: 1.15em; height: 1.15em; font-size: 1.05rem; line-height: 1; } .app-avatar-btn { overflow: hidden; background: var(--vf-primary-soft); color: var(--vf-primary); border-color: var(--vf-primary-soft); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.02em; } .app-avatar-btn:hover, .app-avatar-btn:focus-visible { background: var(--vf-primary); color: var(--vf-text-inverse); border-color: var(--vf-primary); } .app-avatar-btn.has-photo:hover, .app-avatar-btn.has-photo:focus-visible { background: var(--vf-surface-3); color: transparent; opacity: 0.92; } .app-avatar-initials { line-height: 1; } .app-navbar .dropdown-menu, .vf-pub-nav .dropdown-menu { --bs-dropdown-min-width: 0; min-width: 0; width: max-content; margin-top: 0.45rem; } .app-locale-menu { padding: 0.3rem; } .app-locale-menu .dropdown-item { padding: 0.4rem 0.8rem; white-space: nowrap; } .app-account-menu { max-width: min(14rem, calc(100vw - 1.5rem)); padding: 0.6rem; } .app-account-identity { display: flex; align-items: center; gap: 0.6rem; padding: 0.1rem 0.1rem 0.7rem; margin-bottom: 0.4rem; border-bottom: 1px solid var(--vf-border); } .app-account-avatar { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 2.35rem; height: 2.35rem; border-radius: 50%; background: var(--vf-primary-soft); color: var(--vf-primary); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.02em; overflow: hidden; } .app-avatar-btn img, .app-account-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; } .app-avatar-btn.has-photo, .app-account-avatar.has-photo { padding: 0; background: var(--vf-surface-3); color: transparent; } .app-account-copy { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; } .app-account-name { font-size: 0.85rem; font-weight: 600; color: var(--vf-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .app-account-role { margin-top: 0.12rem; font-size: 0.72rem; color: var(--vf-text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .app-account-link { display: flex; align-items: center; gap: 0.5rem; padding: 0.45rem 0.55rem; border-radius: 0.55rem; color: var(--vf-text); text-decoration: none; white-space: nowrap; } .app-account-link:hover, .app-account-link:focus-visible { background: var(--vf-surface-3); color: var(--vf-primary); } .app-account-link .fa-duotone { width: 1.1em; text-align: center; } .app-account-signout { display: flex; align-items: center; justify-content: center; width: 100%; margin-top: 0.4rem; white-space: nowrap; } .vf-logout-form { display: inline; margin: 0; } .app-sidebar .vf-logout-form, .app-account-menu .vf-logout-form { display: block; width: 100%; } .app-sidebar .vf-logout-form .nav-link { width: 100%; border: 0; background: transparent; text-align: left; cursor: pointer; } button.vf-home-btn { border: 0; cursor: pointer; font: inherit; } .app-nav-sidebar-toggle { display: none; } .app-sidebar-head { position: absolute; top: 1.05rem; right: 0; z-index: 40; width: 0; height: 0; padding: 0; overflow: visible; } .app-sidebar-toggle { position: absolute; top: 0; right: 0; display: inline-flex; align-items: center; justify-content: center; width: 1.75rem; height: 1.75rem; padding: 0; border: 1px solid var(--vf-border); border-radius: 50%; background: var(--vf-chrome); color: var(--vf-text); box-shadow: var(--vf-shadow-md); line-height: 0; transform: translateX(50%); } .app-sidebar-toggle .fa-duotone { display: flex; align-items: center; justify-content: center; width: 1em; height: 1em; font-size: 0.7rem; line-height: 1; } .app-sidebar-toggle:hover, .app-sidebar-toggle:focus-visible { background: var(--vf-primary); color: var(--vf-text-inverse); border-color: var(--vf-primary); } /* Sidebar nav */ .app-sidebar-nav { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 0.55rem 0.5rem 0.75rem; scrollbar-width: none; -ms-overflow-style: none; } .app-sidebar-nav::-webkit-scrollbar { width: 0; height: 0; } .app-nav-group { margin: 0; } .app-nav-group-toggle { width: 100%; border: 0; background: transparent; text-align: left; cursor: pointer; font: inherit; } .app-nav-group-toggle .app-nav-caret { margin-left: auto; width: 0.75rem; font-size: 0.68rem; opacity: 0.7; transition: transform 0.18s ease; } .app-nav-group.is-open > .app-nav-group-toggle .app-nav-caret, .app-nav-group-toggle.is-open .app-nav-caret { transform: rotate(180deg); } .app-nav-group.is-active > .app-nav-group-toggle, .app-nav-group-toggle.is-open { color: var(--vf-text); background: var(--vf-surface-3); } .app-nav-sub { display: flex; flex-direction: column; gap: 1px; margin: 0 0 0.2rem; padding: 0.1rem 0 0.15rem 0.55rem; border-left: 2px solid color-mix(in srgb, var(--vf-border) 85%, transparent); margin-left: 1.05rem; } .app-nav-sub[hidden] { display: none !important; } .app-sidebar .nav-link.is-sub { min-height: 2rem; margin: 1px 0; padding: 0.38rem 0.55rem; font-size: 0.86rem; } .app-sidebar .nav-link.is-sub .fa-duotone { font-size: 0.9rem; width: 1em; } .app-sidebar .app-nav-group-toggle .app-nav-count { margin-left: 0.15rem; margin-right: 0.15rem; } .app-sidebar-foot { flex-shrink: 0; display: flex; align-items: stretch; width: 100%; min-width: 0; height: var(--vf-footer-h); min-height: var(--vf-footer-h); max-height: var(--vf-footer-h); padding: 0; border-top: 1px solid var(--vf-border); box-sizing: border-box; } .app-sidebar .nav { gap: 2px; width: 100%; min-width: 0; } .app-sidebar .nav-item { width: 100%; min-width: 0; } .app-sidebar .nav-link { position: relative; display: flex; align-items: center; gap: 0.65rem; width: 100%; min-width: 0; max-width: 100%; box-sizing: border-box; color: var(--vf-text-secondary); text-decoration: none; border-radius: 8px; margin: 2px 0; padding: 0.55rem 0.7rem; white-space: nowrap; overflow: hidden; } .app-sidebar-foot .nav, .app-sidebar-foot .nav-item, .app-sidebar-foot .vf-logout-form { display: flex; align-items: stretch; width: 100%; height: 100%; margin: 0; } .app-sidebar-foot .nav-link { flex: 1 1 auto; height: auto; min-height: 100%; margin: 0; border-radius: 0; padding: 0 0.7rem 0 calc(0.5rem + 0.7rem); align-items: center; } .app-sidebar .nav-link .fa-duotone { flex-shrink: 0; width: 1.15em; font-size: 1rem; text-align: center; line-height: 1; } .app-sidebar .nav-link:hover { background: var(--vf-surface-3); color: var(--vf-text); } .app-sidebar .nav-link.active { background: var(--vf-primary-soft); color: var(--vf-primary); font-weight: 500; } .app-sidebar .nav-link.active::before { content: ''; position: absolute; left: 0; top: 18%; bottom: 18%; width: 3px; border-radius: 0 2px 2px 0; background: var(--vf-primary); } .app-sidebar .nav-link.active:hover { background: var(--vf-primary-soft); color: var(--vf-primary); } .app-sidebar .app-logout-link:hover { background: var(--vf-danger-soft); color: var(--vf-danger-text); } .app-sidebar .nav-label { min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .app-nav-count { margin-left: auto; min-width: 1.25rem; height: 1.15rem; padding: 0 0.35rem; border-radius: 999px; background: var(--vf-danger); color: var(--vf-text-inverse); font-size: 0.68rem; font-weight: 800; line-height: 1.15rem; text-align: center; flex-shrink: 0; } .app-nav-count.is-empty, .app-nav-count[hidden] { display: none !important; } .app-sidebar .nav-link:has(.app-nav-count:not([hidden])) { overflow: visible; } html[data-sidebar="collapsed"] .app-sidebar-inner { overflow: hidden; } html[data-sidebar="collapsed"] .app-sidebar-nav { padding: 0.5rem 0; overflow-x: hidden; overflow-y: auto; } html[data-sidebar="collapsed"] .app-nav-group { margin: 0; } html[data-sidebar="collapsed"] .app-nav-sub, html[data-sidebar="collapsed"] .app-nav-caret, html[data-sidebar="collapsed"] .app-nav-group-toggle .app-nav-count { display: none !important; } html[data-sidebar="collapsed"] .app-nav-group-toggle { flex: 0 0 2.5rem; width: 2.5rem; height: 2.5rem; min-width: 2.5rem; max-width: 2.5rem; margin: 0.2rem auto; padding: 0; gap: 0; justify-content: center; border-radius: 0.6rem; } html[data-sidebar="collapsed"] .app-sidebar-foot { overflow: hidden; padding: 0; } html[data-sidebar="collapsed"] .app-sidebar .nav, html[data-sidebar="collapsed"] .app-sidebar .nav-item { width: 100%; } html[data-sidebar="collapsed"] .app-sidebar .nav-item { display: flex; justify-content: center; } html[data-sidebar="collapsed"] .app-sidebar .nav-link { flex: 0 0 2.5rem; width: 2.5rem; height: 2.5rem; min-width: 2.5rem; max-width: 2.5rem; margin: 0.2rem auto; padding: 0; gap: 0; justify-content: center; align-items: center; border-radius: 0.6rem; overflow: hidden; } html[data-sidebar="collapsed"] .app-sidebar .nav-link:has(.app-nav-count:not([hidden])) { overflow: visible; } html[data-sidebar="collapsed"] .app-nav-count { position: absolute; top: -0.1rem; right: -0.1rem; margin: 0; min-width: 0.95rem; height: 0.95rem; line-height: 0.95rem; padding: 0 0.22rem; font-size: 0.58rem; } html[data-sidebar="collapsed"] .app-sidebar .nav-link .fa-duotone { width: 1.15em; font-size: 1rem; margin: 0; } html[data-sidebar="collapsed"] .app-sidebar .nav-label { display: none; } html[data-sidebar="collapsed"] .app-sidebar-foot .nav-link { flex: 1 1 auto; width: 100%; max-width: 100%; min-width: 0; height: 100%; min-height: 100%; margin: 0; padding: 0; gap: 0; justify-content: center; border-radius: 0; } /* Mobile: rounded floating chrome + drawer sidebar */ @media (max-width: 991.98px) { html[data-sidebar="collapsed"] { --vf-sidebar-w: var(--vf-sidebar-expanded); } .app-shell { grid-template-columns: minmax(0, 1fr); grid-template-rows: var(--vf-navbar-h) minmax(0, 1fr) var(--vf-footer-h); grid-template-areas: "navbar" "main" "footer"; } .app-nav-sidebar-toggle { display: inline-flex; } .app-sidebar-head { display: none; } .app-content { padding: 1rem; } .app-sidebar { position: fixed; top: calc(var(--vf-navbar-h) + (var(--vf-shell-gap) * 2)); bottom: calc(var(--vf-footer-h) + (var(--vf-shell-gap) * 2)); left: var(--vf-shell-gap); width: var(--vf-sidebar-expanded); max-width: calc(100vw - (var(--vf-shell-gap) * 2)); min-width: 0; box-sizing: border-box; overflow: hidden; transform: translateX(calc(-100% - var(--vf-shell-gap))); transition: transform 0.25s ease; z-index: 1040; } .app-sidebar-inner { width: 100%; max-width: 100%; height: 100%; min-width: 0; box-shadow: var(--vf-shadow-lg); } .app-sidebar .nav-link { min-width: 0; max-width: 100%; } html[data-sidebar="open"] .app-sidebar { transform: translateX(0); } html[data-sidebar="collapsed"] .app-sidebar-inner, html[data-sidebar="collapsed"] .app-sidebar-nav, html[data-sidebar="collapsed"] .app-sidebar-foot { overflow: hidden; } html[data-sidebar="collapsed"] .app-sidebar-nav { padding: 0.5rem; } html[data-sidebar="collapsed"] .app-sidebar .nav-link { flex: none; width: 100%; height: auto; min-width: 0; min-height: 0; max-width: 100%; margin: 2px 0; padding: 0.55rem 0.7rem; gap: 0.65rem; justify-content: flex-start; border-radius: 8px; overflow: hidden; } html[data-sidebar="collapsed"] .app-sidebar .nav-label { position: static; display: inline; transform: none; background: none; border: 0; padding: 0; box-shadow: none; font-size: inherit; } html[data-sidebar="collapsed"] .app-nav-section-label { display: block; } html[data-sidebar="collapsed"] .app-nav-sub { display: flex !important; } html[data-sidebar="collapsed"] .app-nav-sub[hidden] { display: none !important; } html[data-sidebar="collapsed"] .app-nav-caret, html[data-sidebar="collapsed"] .app-nav-group-toggle .app-nav-count { display: inline-flex !important; } .app-sidebar-foot .nav-link, html[data-sidebar="collapsed"] .app-sidebar-foot .nav-link { flex: 1 1 auto; width: 100%; height: 100%; min-width: 0; min-height: 0; max-width: 100%; margin: 0; padding: 0 0.7rem 0 calc(0.5rem + 0.7rem); gap: 0.65rem; justify-content: flex-start; border-radius: 0; } html[data-sidebar="collapsed"] .app-nav-group-toggle { flex: none; width: 100%; height: auto; min-width: 0; max-width: 100%; margin: 2px 0; padding: 0.55rem 0.7rem; gap: 0.65rem; justify-content: flex-start; border-radius: 8px; } .app-backdrop { display: block; position: fixed; inset: 0; background: rgba(11, 18, 32, 0.55); z-index: 1030; opacity: 0; pointer-events: none; transition: opacity 0.2s ease; } html[data-sidebar="open"] .app-backdrop { opacity: 1; pointer-events: auto; } .app-navbar { padding: 0 0.75rem; } } @media (min-width: 992px) { html[data-sidebar="open"] { --vf-sidebar-w: var(--vf-sidebar-expanded); } } /* Global confirm dialog */ .vf-confirm { position: fixed; inset: 0; z-index: 2000; display: flex; align-items: center; justify-content: center; padding: 1.25rem; } .vf-confirm[hidden] { display: none !important; } .vf-confirm-backdrop { position: absolute; inset: 0; background: rgba(15, 23, 42, 0.55); backdrop-filter: blur(6px); } .vf-confirm-panel { position: relative; width: min(100%, 26rem); background: var(--vf-surface-1); color: var(--vf-text); border: 1px solid var(--vf-border); border-top: 4px solid var(--vf-warning); border-radius: var(--vf-radius-lg); box-shadow: var(--vf-shadow-lg); padding: 1.5rem 1.35rem 1.2rem; text-align: center; } .vf-confirm-icon { width: 3.25rem; height: 3.25rem; margin: 0 auto 0.85rem; border-radius: 50%; display: grid; place-items: center; font-size: 1.35rem; background: var(--vf-warning-soft); color: var(--vf-warning-text); } .vf-confirm[data-variant="danger"] .vf-confirm-icon { background: var(--vf-danger-soft); color: var(--vf-danger-text); } .vf-confirm[data-variant="warning"] .vf-confirm-icon { background: var(--vf-warning-soft); color: var(--vf-warning-text); } .vf-confirm[data-variant="primary"] .vf-confirm-icon { background: var(--vf-success-soft); color: var(--vf-success-text); } .vf-confirm-title { font-size: 1.15rem; font-weight: 700; margin: 0 0 0.5rem; color: var(--vf-text); } .vf-confirm-message { margin: 0 0 1.2rem; color: var(--vf-text-muted); font-size: 0.95rem; line-height: 1.5; } .vf-confirm-actions { display: flex; gap: 0.65rem; align-items: stretch; justify-content: stretch; } .vf-confirm-actions .btn { flex: 1 1 0; min-width: 0; min-height: 2.65rem; padding: 0.45rem 0.8rem; white-space: normal; line-height: 1.25; font-weight: 700; } .vf-confirm[data-variant="danger"] .vf-confirm-panel { border-top-color: var(--danger-base); } .vf-confirm[data-variant="danger"] #vfConfirmOk { --bs-btn-color: #fff; --bs-btn-bg: var(--danger-base); --bs-btn-border-color: var(--danger-base); --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--danger-text-light); --bs-btn-hover-border-color: var(--danger-text-light); --bs-btn-active-color: #fff; --bs-btn-active-bg: var(--danger-text-light); --bs-btn-active-border-color: var(--danger-text-light); } .vf-confirm[data-variant="warning"] .vf-confirm-panel { border-top-color: #f59e0b; } .vf-confirm[data-variant="warning"] #vfConfirmOk { --bs-btn-color: #1c1917; --bs-btn-bg: #f59e0b; --bs-btn-border-color: #f59e0b; --bs-btn-hover-color: #1c1917; --bs-btn-hover-bg: #d97706; --bs-btn-hover-border-color: #d97706; --bs-btn-active-color: #1c1917; --bs-btn-active-bg: #d97706; --bs-btn-active-border-color: #d97706; } .vf-confirm[data-variant="primary"] .vf-confirm-panel { border-top-color: var(--success-base); } .vf-confirm[data-variant="primary"] #vfConfirmOk { --bs-btn-color: #fff; --bs-btn-bg: var(--success-base); --bs-btn-border-color: var(--success-base); --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--success-text-light); --bs-btn-hover-border-color: var(--success-text-light); --bs-btn-active-color: #fff; --bs-btn-active-bg: var(--success-text-light); --bs-btn-active-border-color: var(--success-text-light); } html.vf-confirm-open { overflow: hidden; } /* Global toasts */ .vf-toasts { position: fixed; top: 1rem; right: 1rem; z-index: 1900; display: flex; flex-direction: column; gap: 0.65rem; width: min(100% - 2rem, 380px); pointer-events: none; } .app-body .vf-toasts { top: calc(var(--vf-navbar-h) + var(--vf-shell-gap) + 0.35rem); right: calc(var(--vf-shell-gap) + 0.5rem); } .vf-toast { pointer-events: auto; display: flex; align-items: flex-start; gap: 0.75rem; padding: 0.85rem 0.9rem; background: var(--vf-surface-1); color: var(--vf-text); border: 1px solid var(--vf-border); border-left-width: 3px; border-radius: var(--vf-radius-md); box-shadow: var(--vf-shadow-lg); animation: vf-toast-in 0.22s ease; } .vf-toast.is-leaving { animation: vf-toast-out 0.18s ease forwards; } .vf-toast-icon { width: 1.85rem; height: 1.85rem; flex: 0 0 1.85rem; border-radius: 50%; display: grid; place-items: center; font-size: 0.85rem; } .vf-toast-body { flex: 1 1 auto; min-width: 0; font-size: 0.9rem; line-height: 1.45; padding-top: 0.12rem; overflow-wrap: anywhere; } .vf-toast-close { flex: 0 0 auto; width: 1.6rem; height: 1.6rem; border: 0; border-radius: 0.4rem; background: transparent; color: var(--vf-text-muted); display: grid; place-items: center; cursor: pointer; } .vf-toast-close:hover { background: var(--vf-surface-3); color: var(--vf-text); } .vf-toast[data-type="success"] { border-left-color: var(--vf-success); } .vf-toast[data-type="success"] .vf-toast-icon { background: var(--vf-success-soft); color: var(--vf-success-text); } .vf-toast[data-type="error"] { border-left-color: var(--vf-danger); } .vf-toast[data-type="error"] .vf-toast-icon { background: var(--vf-danger-soft); color: var(--vf-danger-text); } .vf-toast[data-type="warning"] { border-left-color: var(--vf-warning); } .vf-toast[data-type="warning"] .vf-toast-icon { background: var(--vf-warning-soft); color: var(--vf-warning-text); } .vf-toast[data-type="info"] { border-left-color: var(--vf-info); } .vf-toast[data-type="info"] .vf-toast-icon { background: var(--vf-info-soft); color: var(--vf-info-text); } @keyframes vf-toast-in { from { opacity: 0; transform: translateY(-8px) translateX(8px); } to { opacity: 1; transform: none; } } @keyframes vf-toast-out { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateX(12px); } } .public-body .vf-toasts { top: calc(var(--vf-navbar-h) + 0.75rem); } @media (max-width: 575.98px) { .vf-toasts, .app-body .vf-toasts, .public-body .vf-toasts { left: 0.75rem; right: 0.75rem; width: auto; } } @media (prefers-reduced-motion: reduce) { .vf-toast, .vf-toast.is-leaving { animation: none; } } .vf-pay-qr { display: block; max-width: 180px; width: 100%; height: auto; margin-top: 0.5rem; padding: 0.4rem; border: 1px solid var(--vf-border); border-radius: var(--vf-radius-md); background: var(--vf-paper); } .vf-pay-flow { margin-bottom: 0.25rem; } .vf-pay-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.65rem; margin-bottom: 1rem; } .vf-pay-tabs[hidden] { display: none; } .vf-pay-radio.btn-check { position: absolute; clip: rect(0, 0, 0, 0); pointer-events: none; } .vf-pay-tab { --pay-brand: #163a5f; display: inline-flex; align-items: center; gap: 0.55rem; min-height: 2.75rem; padding: 0.45rem 0.95rem; border: 1px solid var(--vf-border); border-radius: 0.8rem; background: var(--vf-surface-1); color: var(--vf-text); cursor: pointer; font-weight: 650; line-height: 1.2; transition: border-color 0.15s ease, box-shadow 0.15s ease, color 0.15s ease; } .vf-pay-tab.is-bkash { --pay-brand: #e2136e; } .vf-pay-tab.is-nagad { --pay-brand: #ed1c24; } .vf-pay-tab.is-rocket { --pay-brand: #8b2a8c; } .vf-pay-tab .vf-pay-brand-logo { height: 22px; width: auto; max-width: 86px; display: block; } .vf-pay-tab.is-nagad .vf-pay-brand-logo { height: 22px; max-width: 110px; } .vf-pay-tab.is-bkash .vf-pay-brand-logo { color: #e2136e; } .vf-pay-tab i { color: var(--pay-brand); } .vf-pay-radio:checked + .vf-pay-tab { border-color: var(--pay-brand); color: var(--pay-brand); box-shadow: 0 0 0 2px color-mix(in srgb, var(--pay-brand) 22%, transparent); background: var(--vf-surface-1); } .vf-pay-radio:focus-visible + .vf-pay-tab { outline: 2px solid var(--pay-brand); outline-offset: 2px; } .vf-pay-stage { display: flex; justify-content: center; } .vf-pay-empty { display: flex; align-items: center; justify-content: center; gap: 0.6rem; width: 100%; max-width: 22.5rem; min-height: 8.5rem; padding: 1.1rem; border: 1px dashed var(--vf-border-strong, var(--vf-border)); border-radius: 1rem; color: var(--vf-text-muted); text-align: center; background: var(--vf-surface-2, var(--vf-surface-1)); } .vf-pay-empty[hidden] { display: none; } .vf-pay-empty i { font-size: 1.15rem; color: var(--vf-primary); } .vf-pay-poster { --pay-brand: #163a5f; --pay-brand-2: #0f2944; position: relative; isolation: isolate; width: 100%; max-width: 22.5rem; overflow: hidden; border-radius: 1.15rem; color: var(--vf-paper); background: radial-gradient(120% 70% at 108% -10%, rgba(255, 255, 255, 0.28), transparent 52%), radial-gradient(90% 55% at -18% 110%, rgba(0, 0, 0, 0.22), transparent 58%), linear-gradient(165deg, var(--pay-brand) 0%, var(--pay-brand-2) 100%); box-shadow: 0 14px 32px color-mix(in srgb, var(--pay-brand) 34%, transparent); } .vf-pay-poster.is-bkash { --pay-brand: #f43e86; --pay-brand-2: #c10e5c; } .vf-pay-poster.is-nagad { --pay-brand: #ff4d4d; --pay-brand-2: #c4161c; } .vf-pay-poster.is-rocket { --pay-brand: #a63da8; --pay-brand-2: #6b1f6c; } .vf-pay-poster.is-bank { --pay-brand: #1e4d7a; --pay-brand-2: #0f2944; } .vf-pay-poster[hidden] { display: none; } .vf-pay-poster-mark { position: absolute; right: -0.35rem; bottom: -0.4rem; font-size: 8.5rem; line-height: 1; opacity: 0.1; pointer-events: none; z-index: 0; } .vf-pay-poster-head, .vf-pay-poster-body { position: relative; z-index: 1; } .vf-pay-poster-head { display: flex; align-items: center; justify-content: center; height: 5.15rem; padding: 0.85rem 1.1rem; background: var(--vf-paper); box-shadow: inset 0 -3px 0 var(--pay-brand); box-sizing: border-box; } .vf-pay-poster-logo { height: 52px; display: flex; align-items: center; justify-content: center; } .vf-pay-poster-logo .vf-pay-brand-logo { height: 100%; width: auto; max-width: 210px; display: block; } .vf-pay-poster.is-nagad .vf-pay-poster-logo .vf-pay-brand-logo { max-width: 240px; } .vf-pay-poster.is-bkash .vf-pay-poster-head .vf-pay-brand-logo { color: #e2136e; } .vf-pay-poster-title { display: inline-flex; align-items: center; gap: 0.5rem; color: var(--pay-brand-2); font-weight: 800; font-size: 1.2rem; } .vf-pay-poster-body { padding: 1.2rem 0.75rem 1.3rem; text-align: center; } .vf-pay-poster-qr { position: relative; width: 9.5rem; margin: 0 auto 1rem; padding: 0.5rem; background: var(--vf-paper); border-radius: 0.7rem; box-shadow: 0 8px 18px rgba(15, 23, 42, 0.16); } .vf-pay-poster-qr img { display: block; width: 100%; height: auto; border-radius: 0.28rem; } .vf-pay-qr-badge { position: absolute; right: -0.4rem; bottom: -0.4rem; width: 1.85rem; height: 1.85rem; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; background: var(--pay-brand-2); color: var(--vf-paper); box-shadow: 0 4px 10px rgba(15, 23, 42, 0.2); font-size: 0.78rem; } .vf-pay-poster-name { display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; margin: 0 auto 0.75rem; padding: 0.28rem 0.75rem; border-radius: 999px; background: rgba(255, 255, 255, 0.16); font-weight: 700; font-size: 0.95rem; } .vf-pay-poster-name i { font-size: 0.82rem; opacity: 0.95; } .vf-pay-digits { display: flex; flex-wrap: nowrap; align-items: center; justify-content: center; gap: 0.14rem; width: 100%; margin: 0 auto 0.95rem; } .vf-pay-digit { flex: 1 1 0; min-width: 0; max-width: 1.48rem; height: 1.9rem; display: inline-flex; align-items: center; justify-content: center; border-radius: 0.32rem; background: var(--vf-paper); color: #111827; font-weight: 800; font-size: 0.92rem; line-height: 1; font-variant-numeric: tabular-nums; box-shadow: 0 1px 2px rgba(15, 23, 42, 0.14); } .vf-pay-digits[data-count="12"] .vf-pay-digit, .vf-pay-digits[data-count="13"] .vf-pay-digit, .vf-pay-digits[data-count="14"] .vf-pay-digit { max-width: 1.22rem; height: 1.72rem; font-size: 0.8rem; } .vf-pay-digit-sep { flex: 0 0 0.18rem; width: 0.18rem; height: 0.18rem; border-radius: 999px; background: rgba(255, 255, 255, 0.55); } .vf-pay-poster-help { display: flex; align-items: flex-start; gap: 0.5rem; margin: 0; padding: 0.7rem 0.8rem; border-radius: 0.75rem; background: rgba(0, 0, 0, 0.16); text-align: left; } .vf-pay-poster-help i { margin-top: 0.12rem; font-size: 0.95rem; opacity: 0.95; } .vf-pay-poster-help p { margin: 0; font-size: 0.82rem; font-weight: 600; line-height: 1.45; opacity: 0.96; } .vf-pay-proof-fields { margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--vf-border); } .vf-pay-proof-help { display: flex; align-items: center; gap: 0.45rem; margin: 0 0 0.85rem; font-size: 0.86rem; color: var(--vf-text-muted); } .vf-pay-proof-help i { color: var(--vf-primary); } .vf-pay-bar { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1.15fr) auto; gap: 0.75rem; align-items: end; } .vf-pay-field .form-label { margin-bottom: 0.4rem; font-size: 0.78rem; font-weight: 650; color: var(--vf-text-muted); } .vf-pay-input, .vf-pay-file { display: flex; align-items: center; gap: 0.55rem; min-height: 3rem; padding: 0 0.9rem; border-radius: 0.8rem; background: var(--vf-surface-2, var(--vf-surface-1)); } .vf-pay-input { border: 1px solid var(--vf-border); } .vf-pay-input:focus-within { border-color: var(--vf-primary); box-shadow: 0 0 0 3px var(--vf-primary-soft); } .vf-pay-input i, .vf-pay-file i { color: var(--vf-primary); flex-shrink: 0; } .vf-pay-input input { width: 100%; min-width: 0; border: 0; background: transparent; color: inherit; outline: none; font-weight: 600; } .vf-pay-input input::placeholder { font-weight: 500; color: var(--vf-text-muted); opacity: 0.85; } .vf-pay-file { margin: 0; border: 1px dashed var(--vf-border-strong, var(--vf-border)); cursor: pointer; font-weight: 600; color: var(--vf-text-secondary, var(--vf-text)); overflow: hidden; } .vf-pay-file span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .vf-pay-file:hover, .vf-pay-file.has-file { border-color: var(--vf-primary); background: var(--vf-primary-soft); color: var(--vf-primary); } .vf-pay-submit { display: inline-flex; align-items: center; justify-content: center; gap: 0.45rem; min-height: 3rem; padding: 0 1.15rem; border-radius: 0.8rem; white-space: nowrap; font-weight: 700; } .vf-pay-notice { display: flex; align-items: flex-start; gap: 0.9rem; margin-bottom: 1.15rem; padding: 1rem 1.1rem; border: 1px solid var(--vf-border); border-radius: var(--vf-radius); background: var(--vf-surface-1); box-shadow: var(--vf-shadow-sm); color: var(--vf-text); } .vf-pay-notice-ico, .vf-pay-notice > i { width: 2.6rem; height: 2.6rem; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; margin: 0; border-radius: 0.75rem; font-size: 1.2rem; } .vf-pay-notice-body { flex: 1; min-width: 0; } .vf-pay-notice strong { display: block; font-size: 1.02rem; font-weight: 750; } .vf-pay-notice-help, .vf-pay-notice p { margin: 0.22rem 0 0; color: var(--vf-text-muted); font-size: 0.86rem; line-height: 1.45; } .vf-pay-notice.is-info { border-color: color-mix(in srgb, var(--vf-primary) 28%, var(--vf-border)); background: radial-gradient(420px 120px at 0% 0%, color-mix(in srgb, var(--vf-primary) 12%, transparent), transparent 70%), var(--vf-surface-1); } .vf-pay-notice.is-info .vf-pay-notice-ico, .vf-pay-notice.is-info > i { background: var(--vf-primary-soft); color: var(--vf-primary); } .vf-pay-notice.is-info .vf-pay-notice-ico > .fa-duotone, .vf-pay-notice.is-danger .vf-pay-notice-ico > .fa-duotone, .vf-pay-notice.is-warning .vf-pay-notice-ico > .fa-duotone { background: transparent; color: inherit; --fa-primary-color: currentColor; --fa-secondary-color: currentColor; } .vf-pay-notice.is-danger { border-color: color-mix(in srgb, var(--vf-danger) 38%, var(--vf-border)); background: radial-gradient(420px 120px at 0% 0%, color-mix(in srgb, var(--vf-danger) 14%, transparent), transparent 70%), var(--vf-surface-1); } .vf-pay-notice.is-danger .vf-pay-notice-ico, .vf-pay-notice.is-danger > i { background: var(--vf-danger-soft); color: var(--vf-danger-text); } .vf-pay-notice-reason { margin-top: 0.75rem; padding: 0.7rem 0.85rem; border-left: 3px solid var(--vf-danger); border-radius: 0 0.55rem 0.55rem 0; background: var(--vf-surface-2); } .vf-pay-notice-reason span { display: block; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--vf-danger-text); } .vf-pay-notice-reason p { margin: 0.2rem 0 0; color: var(--vf-text); font-size: 0.9rem; font-weight: 650; } .vf-pay-notice-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.9rem; margin-top: 0.75rem; color: var(--vf-text-muted); font-size: 0.78rem; font-weight: 650; } .vf-pay-notice-meta span, .vf-pay-notice-meta a { display: inline-flex; align-items: center; gap: 0.35rem; } .vf-pay-notice-meta a { color: var(--vf-primary); text-decoration: none; } .vf-pay-notice-meta a:hover { text-decoration: underline; } .vf-pay-attempts { display: grid; gap: 0.7rem; } .vf-pay-attempt { display: flex; gap: 0.8rem; padding: 0.85rem 0.9rem; border: 1px solid var(--vf-border); border-radius: var(--vf-radius-md); background: var(--vf-surface-2, var(--vf-surface-1)); } .vf-pay-attempt-icon { width: 2.15rem; height: 2.15rem; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; border-radius: 0.65rem; background: var(--vf-primary-soft); color: var(--vf-primary); } .vf-pay-attempt-icon.is-verified { background: var(--vf-success-soft); color: var(--vf-success-text); } .vf-pay-attempt-icon.is-rejected { background: var(--vf-danger-soft, #fee2e2); color: var(--vf-danger-text, #b91c1c); } .vf-pay-attempt-body { min-width: 0; flex: 1; } .vf-pay-attempt-top { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.55rem; margin-bottom: 0.2rem; } .vf-pay-attempt-note { margin: 0.4rem 0 0; font-size: 0.82rem; } .vf-pay-attempt-link { display: inline-flex; align-items: center; gap: 0.35rem; margin-top: 0.4rem; font-size: 0.82rem; font-weight: 650; text-decoration: none; } .vf-money { display: inline-flex; align-items: center; gap: 0.28rem; font-variant-numeric: tabular-nums; } .vf-money i { font-size: 0.82em; } @media (max-width: 767.98px) { .vf-pay-bar { grid-template-columns: 1fr; } .vf-pay-submit { width: 100%; } } @media (max-width: 575.98px) { .vf-pay-poster { max-width: 20.5rem; } .vf-pay-digit { height: 1.72rem; font-size: 0.82rem; } .vf-pay-digits[data-count="12"] .vf-pay-digit, .vf-pay-digits[data-count="13"] .vf-pay-digit, .vf-pay-digits[data-count="14"] .vf-pay-digit { max-width: 1.1rem; height: 1.58rem; font-size: 0.74rem; } } .vf-pay-notice.is-warning { border-color: color-mix(in srgb, var(--vf-warning) 38%, var(--vf-border)); background: radial-gradient(420px 120px at 0% 0%, color-mix(in srgb, var(--vf-warning) 14%, transparent), transparent 70%), var(--vf-surface-1); } .vf-pay-notice.is-warning .vf-pay-notice-ico, .vf-pay-notice.is-warning > i { background: var(--vf-warning-soft); color: var(--vf-warning-text); } .vf-proof-stage { position: relative; overflow: hidden; min-height: 18rem; max-height: 32rem; border: 1px solid var(--vf-border-strong); border-radius: var(--vf-radius-md); background: var(--vf-surface-2); } .vf-proof-stage.is-pdf { background: var(--vf-paper); } .vf-proof-stage img { display: block; width: 100%; max-height: 32rem; object-fit: contain; background: var(--vf-surface-2); } .vf-proof-stage iframe { display: block; width: 100%; height: 32rem; border: 0; background: var(--vf-paper); } .vf-proof-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.65rem; min-height: 18rem; color: var(--vf-text-muted); } .vf-proof-empty i { font-size: 1.8rem; color: var(--vf-primary); } .vf-fee-row.is-warn { border-color: color-mix(in srgb, var(--vf-danger) 40%, var(--vf-border)); background: var(--vf-danger-soft); } .vf-trx { display: inline-block; padding: 0.1rem 0.35rem; border-radius: 0.35rem; background: var(--vf-surface-1); color: var(--vf-text); font-size: 0.8rem; font-weight: 700; word-break: break-all; } body:has(.vf-pay-review) .app-content { display: flex; flex-direction: column; overflow: hidden; padding: 0.85rem 1.05rem 0.95rem; } .vf-pay-review { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 0.7rem; } .vf-pay-review .vf-page-hero { margin: 0; padding: 0.65rem 0.9rem; gap: 0; } .vf-pay-review .vf-page-hero-top { gap: 0.7rem; } .vf-pay-review .vf-page-hero-icon { width: 2.55rem; height: 2.55rem; font-size: 1.12rem; border-radius: 0.75rem; } .vf-pay-review .vf-page-hero-copy h1 { font-size: 1.12rem; } .vf-pay-review .vf-page-hero-copy p { margin-top: 0.12rem; font-size: 0.8rem; } .vf-pay-review .vf-page-hero-action { min-height: 2.15rem; padding: 0.3rem 0.8rem; font-size: 0.82rem; } .vf-pay-review-grid { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(20rem, 0.88fr); gap: 0.75rem; align-items: stretch; } .vf-pay-review-grid > * { min-width: 0; min-height: 0; } .vf-pay-review-card { display: flex; flex-direction: column; min-height: 0; margin: 0; padding: 0.8rem 0.9rem; } .vf-pay-review-head { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; margin: 0 0 0.65rem; } .vf-pay-review-head h5 { display: flex; align-items: center; gap: 0.4rem; margin: 0; font-size: 0.92rem; font-weight: 750; } .vf-pay-review-head h5 .fa-duotone { color: var(--vf-icon); } .vf-pay-review-head .btn { display: inline-flex; align-items: center; gap: 0.35rem; } .vf-pay-review-proof { overflow: hidden; } .vf-pay-review-proof-body { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(12.5rem, 15rem); gap: 0.65rem; align-items: stretch; } .vf-pay-review-ocr { display: flex; flex-direction: column; min-width: 0; min-height: 0; margin: 0; padding: 0.65rem 0.7rem; border: 1px solid var(--vf-border); border-radius: var(--vf-radius-md); background: var(--vf-surface-2); } .vf-pay-review-ocr-label { display: block; margin-bottom: 0.5rem; font-size: 0.62rem; font-weight: 750; letter-spacing: 0.04em; text-transform: uppercase; color: var(--vf-text-muted); } .vf-pay-review-ocr-empty { margin: 0; color: var(--vf-text-muted); font-size: 0.78rem; line-height: 1.4; } .vf-pay-review-ocr-grid { display: grid; grid-template-columns: 1fr; gap: 0.5rem; flex: 1; align-content: start; } .vf-pay-review-ocr-item { min-width: 0; padding: 0.7rem 0.75rem; border: 1px solid var(--vf-border); border-radius: 0.55rem; background: var(--vf-surface-1); } .vf-pay-review-ocr-item.is-match { border-color: color-mix(in srgb, var(--vf-success) 40%, var(--vf-border)); background: var(--vf-success-soft); } .vf-pay-review-ocr-item.is-diff { border-color: color-mix(in srgb, var(--vf-danger) 40%, var(--vf-border)); background: var(--vf-danger-soft); } .vf-pay-review-ocr-item span { display: block; font-size: 0.6rem; font-weight: 750; letter-spacing: 0.04em; text-transform: uppercase; color: var(--vf-text-muted); } .vf-pay-review-ocr-item strong { display: block; margin-top: 0.18rem; font-size: 1.02rem; font-weight: 800; overflow-wrap: anywhere; } .vf-pay-review-ocr-item .vf-money { display: flex; align-items: center; gap: 0.22rem; } .vf-pay-review-ocr-item em { display: block; margin-top: 0.22rem; font-style: normal; font-size: 0.7rem; font-weight: 700; } .vf-pay-review-ocr-item.is-match em { color: var(--vf-success-text); } .vf-pay-review-ocr-item.is-diff em { color: var(--vf-danger-text); } .vf-pay-review-link { display: inline-flex; align-items: center; gap: 0.32rem; color: var(--vf-primary); font-size: 0.78rem; font-weight: 700; text-decoration: none; white-space: nowrap; } .vf-pay-review-link:hover { text-decoration: underline; } .vf-pay-review-proof .vf-proof-stage { min-width: 0; min-height: 0; max-height: none; overflow: auto; overscroll-behavior: contain; scrollbar-width: thin; } .vf-pay-review-proof-body .vf-proof-stage { height: 100%; } .vf-pay-review-proof .vf-proof-stage.is-image img { display: block; width: 100%; height: auto; max-width: 100%; max-height: none; object-fit: unset; background: var(--vf-surface-2); } .vf-pay-review-proof .vf-proof-stage.is-pdf { overflow: hidden; } .vf-pay-review-proof .vf-proof-stage iframe { display: block; width: 100%; height: 100%; min-height: 100%; border: 0; } .vf-pay-review-proof .vf-proof-empty, .vf-pay-review-proof .vf-doc-empty { min-height: 12rem; height: 100%; } .vf-pay-review-history { display: flex; align-items: center; gap: 0.55rem; margin-top: 0.65rem; min-width: 0; } .vf-pay-review-history > span { flex-shrink: 0; font-size: 0.68rem; font-weight: 750; letter-spacing: 0.04em; text-transform: uppercase; color: var(--vf-text-muted); } .vf-pay-review-chips { display: flex; flex-wrap: wrap; gap: 0.35rem; min-width: 0; } .vf-pay-review-chip { display: inline-flex; align-items: center; padding: 0.22rem 0.5rem; border: 1px solid var(--vf-border); border-radius: 999px; background: var(--vf-surface-2); color: var(--vf-text); font-size: 0.72rem; font-weight: 700; text-decoration: none; line-height: 1.2; } a.vf-pay-review-chip:hover { border-color: var(--vf-primary); color: var(--vf-primary); } .vf-pay-review-chip.is-current { border-color: color-mix(in srgb, var(--vf-primary) 40%, var(--vf-border)); background: var(--vf-primary-soft); color: var(--vf-primary); } .vf-pay-review-chip.is-verified { border-color: color-mix(in srgb, var(--vf-success) 40%, var(--vf-border)); } .vf-pay-review-chip.is-rejected { border-color: color-mix(in srgb, var(--vf-danger) 40%, var(--vf-border)); } .vf-pay-review-side { display: flex; flex-direction: column; min-height: 0; overflow: auto; scrollbar-width: thin; } .vf-pay-review-side > .vf-pay-review-card { flex: 1 1 auto; min-height: 0; overflow: auto; } .vf-pay-review-alert { display: flex; align-items: flex-start; gap: 0.45rem; margin: 0 0 0.55rem; padding: 0.42rem 0.55rem; border: 1px solid var(--vf-border); border-radius: var(--vf-radius-md); font-size: 0.75rem; font-weight: 650; line-height: 1.35; } .vf-pay-review-alert > i { margin-top: 0.08rem; flex-shrink: 0; color: var(--vf-icon); } .vf-pay-review-alert a { margin-left: 0.25rem; font-weight: 750; white-space: nowrap; } .vf-pay-review-alert.is-warning { border-color: color-mix(in srgb, var(--vf-warning) 40%, var(--vf-border)); background: var(--vf-warning-soft); color: var(--vf-warning-text); } .vf-pay-review-alert.is-danger { border-color: color-mix(in srgb, var(--vf-danger) 40%, var(--vf-border)); background: var(--vf-danger-soft); color: var(--vf-danger-text); } .vf-pay-review-alert.is-info { border-color: color-mix(in srgb, var(--vf-primary) 32%, var(--vf-border)); background: var(--vf-primary-soft); color: var(--vf-primary); } .vf-pay-review-facts-wrap { display: flex; flex-direction: column; gap: 0.4rem; margin: 0 0 0.6rem; } .vf-pay-review-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 0.4rem; margin: 0; } .vf-pay-review-facts.is-triple { grid-template-columns: repeat(3, minmax(0, 1fr)); } .vf-pay-review-fact { min-width: 0; padding: 0.45rem 0.55rem; border: 1px solid var(--vf-border); border-radius: var(--vf-radius-md); background: var(--vf-surface-2); } .vf-pay-review-fact span { display: block; color: var(--vf-text-muted); font-size: 0.62rem; font-weight: 750; letter-spacing: 0.04em; text-transform: uppercase; } .vf-pay-review-fact strong { display: block; margin-top: 0.12rem; font-size: 0.82rem; font-weight: 750; line-height: 1.3; overflow-wrap: anywhere; word-break: break-word; } .vf-pay-review-fact small { display: block; margin-top: 0.12rem; color: var(--vf-text-muted); font-size: 0.72rem; font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; word-break: break-word; } .vf-pay-review-fact .vf-trx { display: block; width: 100%; margin-top: 0.12rem; padding: 0; background: transparent; font-size: 0.8rem; } .vf-pay-review-money { display: grid; grid-template-columns: 1fr 1fr; gap: 0.45rem; margin: 0 0 0.7rem; } .vf-pay-review-amt { padding: 0.5rem 0.6rem; border: 1px solid var(--vf-border); border-radius: var(--vf-radius-md); background: var(--vf-surface-2); } .vf-pay-review-amt.is-warn { border-color: color-mix(in srgb, var(--vf-danger) 42%, var(--vf-border)); background: var(--vf-danger-soft); } .vf-pay-review-amt span { display: block; font-size: 0.62rem; font-weight: 750; letter-spacing: 0.04em; text-transform: uppercase; color: var(--vf-text-muted); } .vf-pay-review-amt .vf-money { display: flex; align-items: center; flex-wrap: wrap; gap: 0.2rem; margin-top: 0.12rem; min-width: 0; font-size: 0.95rem; font-weight: 800; } .vf-pay-review-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 0.55rem; align-items: stretch; min-width: 0; } .vf-pay-review-form { display: flex; flex-direction: column; gap: 0.4rem; min-width: 0; min-height: 0; margin: 0; padding: 0.55rem; border: 1px solid var(--vf-border); border-radius: var(--vf-radius-md); background: var(--vf-surface-2); } .vf-pay-review-form h6 { margin: 0; font-size: 0.72rem; font-weight: 750; letter-spacing: 0.04em; text-transform: uppercase; color: var(--vf-text-muted); } .vf-pay-review-form.is-approve { border-color: color-mix(in srgb, var(--vf-success) 32%, var(--vf-border)); background: color-mix(in srgb, var(--vf-success-soft) 55%, var(--vf-surface-2)); } .vf-pay-review-form.is-reject { margin: 0; padding: 0.55rem; border-color: color-mix(in srgb, var(--vf-danger) 32%, var(--vf-border)); background: color-mix(in srgb, var(--vf-danger-soft) 45%, var(--vf-surface-2)); } .vf-pay-review-form .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.35rem; margin-top: auto; } .vf-pay-review-form textarea.form-control { min-height: 2.4rem; padding: 0.4rem 0.5rem; font-size: 0.78rem; resize: vertical; } .vf-pay-review-form.is-reject textarea.form-control { flex: 1; min-height: 4.5rem; } .vf-pay-review-actions .vf-check-list { grid-template-columns: 1fr; } .vf-pay-review .vf-check-list { display: grid; grid-template-columns: 1fr 1fr; gap: 0.35rem; margin: 0; } .vf-pay-review .vf-check-item { display: flex; align-items: center; gap: 0.4rem; margin: 0; padding: 0.38rem 0.5rem; border: 1px solid var(--vf-border); border-radius: var(--vf-radius-md); background: var(--vf-surface-2); cursor: pointer; font-size: 0.74rem; font-weight: 650; line-height: 1.25; } .vf-pay-review .vf-check-item .form-check-input { margin: 0; flex-shrink: 0; } .vf-pay-review .vf-check-item:has(.form-check-input:checked) { border-color: color-mix(in srgb, var(--vf-success) 45%, var(--vf-border)); background: var(--vf-success-soft); } .vf-pay-review-result { display: flex; align-items: flex-start; gap: 0.55rem; padding: 0.55rem 0.65rem; border: 1px solid var(--vf-border); border-radius: var(--vf-radius-md); background: var(--vf-surface-2); } .vf-pay-review-result > i { margin-top: 0.1rem; color: var(--vf-icon); } .vf-pay-review-result.is-verified { border-color: color-mix(in srgb, var(--vf-success) 38%, var(--vf-border)); background: var(--vf-success-soft); } .vf-pay-review-result.is-rejected { border-color: color-mix(in srgb, var(--vf-danger) 38%, var(--vf-border)); background: var(--vf-danger-soft); } .vf-pay-review-result strong { display: block; font-size: 0.84rem; } .vf-pay-review-result small { color: var(--vf-text-muted); font-size: 0.72rem; } .vf-pay-review-result p { margin: 0.3rem 0 0; font-size: 0.78rem; line-height: 1.4; } @media (max-width: 991.98px) { body:has(.vf-pay-review) .app-content { overflow-y: auto; padding: 0.85rem 0.9rem 1rem; } .vf-pay-review { flex: none; } .vf-pay-review-grid { grid-template-columns: 1fr; flex: none; } .vf-pay-review-proof-body { grid-template-columns: 1fr; flex: none; } .vf-pay-review-proof .vf-proof-stage { height: min(52vh, 28rem); min-height: 16rem; flex: none; } .vf-pay-review-proof .vf-proof-stage.is-image img { height: auto; } .vf-pay-review-proof .vf-proof-stage iframe { height: 100%; min-height: 100%; } .vf-refund-desk-proof .vf-proof-stage { flex: none; height: min(42vh, 16rem); min-height: 12rem; } .vf-pay-review-ocr { flex: none; } .vf-pay-review-ocr-grid { grid-template-columns: 1fr 1fr; } .vf-pay-review-side { overflow: visible; } .vf-pay-review-side > .vf-pay-review-card { overflow: visible; } } @media (max-width: 575.98px) { .vf-pay-review .vf-check-list, .vf-pay-review-money, .vf-pay-review-facts, .vf-pay-review-facts.is-triple, .vf-pay-review-actions, .vf-pay-review-ocr-grid { grid-template-columns: 1fr; } } .vf-pay-attempt.is-current { border-color: color-mix(in srgb, var(--vf-primary) 40%, var(--vf-border)); box-shadow: inset 3px 0 0 var(--vf-primary); } body:has(.vf-order-desk) .app-content { display: flex; flex-direction: column; overflow: hidden; padding: 0.6rem 0.8rem 0.65rem; } .vf-order-desk { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 0.35rem; overflow: hidden; } .vf-order-desk .vf-page-hero { flex-shrink: 0; margin: 0; padding: 0.42rem 0.7rem; gap: 0.35rem; } .vf-order-desk .vf-page-hero-top { flex-wrap: nowrap; gap: 0.4rem; } .vf-order-desk .vf-page-hero-icon { width: 2.1rem; height: 2.1rem; font-size: 0.95rem; border-radius: 0.55rem; } .vf-order-desk .vf-page-hero-copy { display: flex; flex-direction: column; justify-content: center; gap: 0.15rem; min-width: 0; flex: 1; } .vf-order-desk .vf-page-hero-heading { display: flex; align-items: center; flex-wrap: wrap; gap: 0.3rem 0.4rem; min-width: 0; } .vf-order-desk .vf-page-hero-copy h1 { margin: 0; font-size: 1rem; overflow-wrap: anywhere; } .vf-order-desk .vf-page-hero-badge { padding: 0.14rem 0.42rem; font-size: 0.64rem; } .vf-order-desk .vf-page-hero-copy p, .vf-order-desk .vf-page-hero-meta > p { margin: 0; font-size: 0.72rem; overflow-wrap: anywhere; } .vf-order-desk .vf-page-hero-meta { display: flex; flex-direction: row; align-items: center; gap: 0.4rem 0.55rem; min-width: 0; width: 100%; margin-top: 0; } .vf-order-desk .vf-page-hero-meta > p { flex: 0 1 auto; max-width: min(14rem, 40%); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .vf-order-desk .vf-page-hero-actions { flex-shrink: 0; gap: 0.35rem; } .vf-order-desk .vf-page-hero-action { min-height: 1.7rem; padding: 0.16rem 0.55rem; font-size: 0.72rem; } .vf-order-desk .vf-page-hero-meta .vf-flow-steps { flex: 1 1 auto; flex-wrap: nowrap; justify-content: center; min-width: 0; width: auto; margin: 0; padding: 0; border: 0; overflow-x: auto; scrollbar-width: thin; } .vf-order-desk .vf-page-hero-meta .vf-flow-step { flex-shrink: 0; } .vf-order-desk .vf-page-hero-meta .vf-flow-step span { padding: 0.12rem 0.42rem; font-size: 0.64rem; background: var(--vf-surface-2); white-space: nowrap; } .vf-order-desk .vf-page-hero-meta .vf-flow-step i { font-size: 0.66rem; } .vf-order-desk .vf-page-hero-meta .vf-flow-step + .vf-flow-step::before { width: 0.7rem; margin-right: 0.28rem; } .vf-order-desk-grid { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(18.5rem, 20.25rem); gap: 0.28rem; align-items: stretch; } .vf-order-desk-grid > * { min-width: 0; min-height: 0; } .vf-order-desk-work { display: flex; flex-direction: column; min-height: 0; overflow: hidden; } .vf-order-desk-board { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 0; overflow: hidden; margin: 0; padding: 0; border: 1px solid var(--vf-border); border-radius: var(--vf-radius); background: var(--vf-surface-1); box-shadow: var(--vf-shadow-sm); } .vf-order-desk-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.28rem 0.4rem; flex-shrink: 0; padding: 0.28rem 0.45rem; border-bottom: 1px solid var(--vf-border); background: color-mix(in srgb, var(--vf-surface-2, var(--vf-bg)) 72%, var(--vf-surface-1)); } .vf-order-desk-pills { display: flex; flex-wrap: wrap; gap: 0.28rem; flex-shrink: 0; } .vf-order-desk-pill { display: inline-flex; align-items: center; justify-content: center; margin: 0; padding: 0.2rem 0.55rem; border: 1px solid var(--vf-border); border-radius: 999px; background: var(--vf-surface-1); color: var(--vf-text); appearance: none; font: inherit; font-size: 0.72rem; font-weight: 750; line-height: 1.2; cursor: pointer; white-space: nowrap; gap: 0.22rem; } .vf-order-desk-pill .vf-order-docs-count { font-size: 0.64rem; } .vf-order-desk-pill:focus-visible { outline: 2px solid var(--vf-primary); outline-offset: 2px; } .vf-order-desk-pill:hover { border-color: var(--vf-primary); } .vf-order-desk-pill.is-active { border-color: var(--vf-primary); background: var(--vf-primary-soft); color: var(--vf-primary); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--vf-primary) 22%, transparent); } .vf-order-desk-pill.is-complete:not(.is-active) { border-color: color-mix(in srgb, var(--vf-success) 40%, var(--vf-border)); color: var(--vf-success); background: var(--vf-success-soft); } .vf-order-desk-pill.is-warn:not(.is-active) { border-color: color-mix(in srgb, var(--vf-warning) 45%, var(--vf-border)); color: var(--vf-warning-text); background: var(--vf-warning-soft); } .vf-order-desk-slot { display: none; flex: 1 1 auto; min-height: 0; overflow: hidden; margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; } .vf-order-desk-slot.is-active { display: flex; flex-direction: column; } .vf-order-desk-slot.is-pending_review { padding-left: 0.4rem; border-left: 3px solid var(--vf-warning); } .vf-order-desk-slot.is-correction_requested { padding-left: 0.4rem; border-left: 3px solid var(--vf-danger); } .vf-order-desk-slot.is-confirmed { padding-left: 0.4rem; border-left: 3px solid var(--vf-success); } .vf-order-desk-slot-grid { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(11.25rem, 13.75rem); grid-template-rows: minmax(0, 1fr); gap: 0.45rem; align-items: stretch; padding: 0.4rem 0.45rem 0.45rem; } .vf-order-desk-files, .vf-order-desk-webfile { display: flex; flex-direction: column; min-width: 0; min-height: 0; } .vf-order-desk-files { overflow: auto; scrollbar-width: thin; padding-right: 0.15rem; } .vf-order-desk-webfile { overflow: hidden; } .vf-order-desk-head { display: flex; align-items: center; justify-content: space-between; gap: 0.4rem; margin: 0 0 0.32rem; flex-shrink: 0; } .vf-order-desk-head h5 { display: flex; align-items: center; gap: 0.3rem; margin: 0; min-width: 0; font-size: 0.76rem; font-weight: 750; } .vf-order-desk-head h5 .vf-order-docs-count { margin-left: 0.1rem; } .vf-order-desk-files .vf-appl-read, .vf-order-desk-files .vf-appl-read.is-icons { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(7.5rem, 0.48fr); gap: 0.3rem; align-items: stretch; margin: 0 0 0.4rem; } .vf-order-desk-files .vf-appl-read.is-icons .vf-appl-facts { display: flex; flex-wrap: wrap; gap: 0.28rem; min-width: 0; } .vf-order-desk-files .vf-appl-read.is-icons .vf-appl-fact, .vf-order-desk-files .vf-appl-read.is-icons .vf-appl-addr { align-items: center; min-width: 0; min-height: 1.85rem; padding: 0.22rem 0.32rem; gap: 0.26rem; overflow: hidden; } .vf-order-desk-files .vf-appl-read.is-icons .vf-appl-fact.is-edu, .vf-order-desk-files .vf-appl-read.is-icons .vf-appl-fact.is-visa { flex: 1 1 auto; min-width: 0; } .vf-order-desk-files .vf-appl-read.is-icons .vf-appl-fact.is-entry, .vf-order-desk-files .vf-appl-read.is-icons .vf-appl-fact.is-exit, .vf-order-desk-files .vf-appl-read.is-icons .vf-appl-fact.is-hospital, .vf-order-desk-files .vf-appl-read.is-icons .vf-appl-fact.is-dept { flex: 1 1 calc(50% - 0.14rem); } .vf-order-desk-files .vf-appl-read.is-icons .vf-appl-fact > i, .vf-order-desk-files .vf-appl-read.is-icons .vf-appl-addr > i { width: 1.2rem; height: 1.2rem; font-size: 0.58rem; border-radius: 0.28rem; } .vf-order-desk-files .vf-appl-read.is-icons .vf-appl-fact > div, .vf-order-desk-files .vf-appl-read.is-icons .vf-appl-addr > div { min-width: 0; overflow: hidden; } .vf-order-desk-files .vf-appl-read.is-icons .vf-appl-fact strong { margin: 0; font-size: 0.68rem; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .vf-order-desk-files .vf-appl-read.is-icons .vf-appl-addr { height: auto; align-items: flex-start; } .vf-order-desk-files .vf-appl-read.is-icons .vf-appl-addr strong { margin: 0; font-size: 0.68rem; line-height: 1.2; white-space: normal; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; } .vf-order-desk-files .vf-appl-empty { grid-column: 1 / -1; margin: 0; font-size: 0.7rem; } .vf-order-desk-files .vf-doc-grid, .vf-order-desk-files .vf-doc-grid.is-row { display: flex; flex-wrap: nowrap; align-items: stretch; gap: 0.32rem; overflow-x: auto; overflow-y: hidden; padding-bottom: 0.12rem; scrollbar-width: thin; } .vf-order-desk-files .vf-doc-tile, .vf-order-desk-files .vf-doc-grid.is-row .vf-doc-tile { flex: 0 0 5.7rem; width: 5.7rem; min-width: 5.7rem; max-width: 5.7rem; padding: 0.2rem; } .vf-order-desk-files .vf-doc-tile-meta { padding: 0.18rem 0.08rem 0.06rem; } .vf-order-desk-files .vf-doc-tile-name { font-size: 0.58rem; line-height: 1.2; } .vf-order-desk-files .vf-doc-empty { gap: 0.32rem; margin: 0; padding: 0.45rem 0.5rem; font-size: 0.72rem; } .vf-order-desk-files .vf-doc-grid.is-row .vf-doc-tile-preview, .vf-order-desk-files .vf-doc-grid.is-row .vf-doc-tile-preview.is-pdf, .vf-order-desk-files .vf-doc-grid.is-row .vf-doc-tile-preview.is-image, .vf-order-desk-files .vf-doc-grid.is-row .vf-doc-tile-preview.is-file { flex: 0 0 4.6rem; height: 4.6rem; min-height: 4.6rem; } .vf-order-desk-ok, .vf-order-desk-warn, .vf-webfile-ok, .vf-webfile-wait { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 1.45rem; height: 1.45rem; font-size: 1rem; line-height: 1; } .vf-order-desk-ok, .vf-webfile-ok { color: var(--vf-success); } .vf-order-desk-warn, .vf-webfile-wait { color: var(--vf-warning-text); } .vf-webfile-frame { flex: 1 1 auto; min-width: 0; min-height: 0; display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--vf-border); border-radius: var(--vf-radius-md); background: var(--vf-paper); } .vf-webfile-frame .vf-upload-card.is-panel, .vf-webfile-frame .vf-upload-card.is-panel.is-done { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; min-height: 0; width: 100%; max-width: 100%; margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; animation: none; overflow: hidden; } .vf-webfile-frame .vf-upload-card.is-panel:hover { transform: none; box-shadow: none; border-color: transparent; background: transparent; } .vf-webfile-frame .vf-upload-card-head, .vf-webfile-frame .vf-upload-card-foot { display: none; } .vf-webfile-frame .vf-upload-card > form, .vf-webfile-frame .vf-upload-drop { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; min-height: 0; width: 100%; max-width: 100%; overflow: hidden; } .vf-webfile-frame > .vf-upload-preview, .vf-webfile-frame > .vf-upload-preview.is-pdf, .vf-webfile-frame .vf-upload-preview, .vf-webfile-frame .vf-upload-preview.is-pdf { position: relative; flex: 1 1 auto; flex-basis: auto; width: 100%; max-width: 100%; height: auto; min-width: 0; min-height: 0; overflow: hidden; border: 0; border-radius: 0; background: var(--vf-paper); } .vf-webfile-frame .vf-upload-preview iframe, .vf-webfile-frame > .vf-upload-preview iframe { position: absolute; inset: 0; display: block; width: 100%; height: 100%; max-width: 100%; border: 0; background: var(--vf-paper); pointer-events: auto; } .vf-webfile-note[hidden] { display: none !important; } .vf-webfile-note { display: flex; align-items: flex-start; gap: 0.4rem; flex: 0 1 auto; max-height: 4.6rem; overflow: auto; margin: 0; padding: 0.4rem 0.5rem; border: 0; border-top: 1px solid color-mix(in srgb, var(--vf-warning) 40%, var(--vf-border)); background: color-mix(in srgb, var(--vf-warning-soft) 70%, var(--vf-surface-1)); color: var(--vf-warning-text); font-size: 0.74rem; font-weight: 650; line-height: 1.35; scrollbar-width: thin; } .vf-webfile-note > i { margin-top: 0.08rem; flex-shrink: 0; color: var(--vf-warning-text); } .vf-webfile-note p { margin: 0; min-width: 0; overflow-wrap: anywhere; } .vf-webfile-bar { display: flex; align-items: center; justify-content: space-between; gap: 0.35rem; flex-shrink: 0; margin: 0; padding: 0.28rem 0.4rem; border-top: 1px solid var(--vf-border); background: var(--vf-surface-2); } .vf-file-icos { display: flex; align-items: center; gap: 0.28rem; } .vf-file-ico { box-sizing: border-box; flex: 0 0 1.85rem; width: 1.85rem; height: 1.85rem; min-width: 1.85rem; padding: 0; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--vf-border); border-radius: 0.45rem; background: var(--vf-surface-1); color: var(--vf-text); text-decoration: none; line-height: 1; } .vf-file-ico i { font-size: 0.82rem; } .vf-file-ico:hover { border-color: var(--vf-primary); color: var(--vf-primary); text-decoration: none; } label.vf-file-ico { margin: 0; cursor: pointer; } button.vf-file-ico { margin: 0; cursor: pointer; font: inherit; } .vf-webfile-frame .vf-upload-card.is-done .vf-upload-drop { cursor: default; } .vf-order-desk-block-head .vf-file-icos { flex-shrink: 0; } .vf-webfile-ok, .vf-webfile-wait { margin-left: auto; } .vf-order-desk-webfile .vf-upload-card.is-panel, .vf-order-desk-webfile .vf-upload-card.is-panel.is-done { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; overflow: hidden; } .vf-order-desk-webfile .vf-upload-card.is-panel > form, .vf-order-desk-webfile .vf-upload-card.is-panel .vf-upload-drop { min-height: 0; } .vf-order-desk-webfile .vf-upload-card.is-panel .vf-upload-preview, .vf-order-desk-webfile .vf-upload-card.is-panel .vf-upload-preview.is-pdf { flex: 1 1 auto; flex-basis: auto; height: auto; min-height: 0; } .vf-order-desk-rail { display: flex; flex-direction: column; min-height: 0; overflow: hidden; } .vf-order-desk-panel { flex: 1 1 auto; min-width: 0; min-height: 0; display: flex; flex-direction: column; gap: 0.28rem; overflow: auto; scrollbar-width: thin; margin: 0; padding: 0.35rem 0.4rem; border: 1px solid var(--vf-border); border-radius: var(--vf-radius); background: var(--vf-surface-1); box-shadow: var(--vf-shadow-sm); } .vf-order-desk:has(.vf-chat-dock) .vf-order-desk-panel { padding-bottom: 4.25rem; } .vf-order-desk-block-head { display: flex; align-items: center; justify-content: space-between; gap: 0.35rem; margin: 0 0 0.22rem; } .vf-order-desk-block-head h6 { display: flex; align-items: center; gap: 0.3rem; margin: 0; min-width: 0; font-size: 0.68rem; font-weight: 750; letter-spacing: 0.03em; text-transform: uppercase; color: var(--vf-text-muted); } .vf-order-desk-block-head h6 .fa-duotone { color: var(--vf-icon); } .vf-order-desk-block-help { margin: 0 0 0.4rem; color: var(--vf-text-muted); font-size: 0.72rem; line-height: 1.35; } .vf-order-desk-block-help[hidden] { display: none; } .vf-order-desk-block { min-width: 0; padding-top: 0.35rem; border-top: 1px solid var(--vf-border); } .vf-order-desk-now { flex-shrink: 0; min-width: 0; margin: 0; padding: 0.38rem 0.42rem; border: 1px solid var(--vf-border); border-radius: var(--vf-radius-md); } .vf-order-desk-now .vf-order-desk-block-head { margin-bottom: 0.18rem; } .vf-order-desk-now-title { display: block; margin-bottom: 0.12rem; font-size: 0.8rem; font-weight: 750; line-height: 1.25; overflow-wrap: anywhere; } .vf-order-desk-now p { margin: 0 0 0.32rem; color: var(--vf-text-muted); font-size: 0.7rem; line-height: 1.35; } .vf-order-desk-now p[hidden] { display: none; } .vf-order-desk .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; } .vf-order-desk-now .btn, .vf-rail-assign .btn { width: 100%; min-height: 1.9rem; padding: 0.22rem 0.55rem; font-size: 0.74rem; } .vf-order-desk-now.is-primary { border-color: color-mix(in srgb, var(--vf-primary) 36%, var(--vf-border)); background: radial-gradient(80% 70% at 0% 0%, color-mix(in srgb, var(--vf-primary) 12%, transparent), transparent 70%), var(--vf-surface-2); } .vf-order-desk-now.is-info { border-color: color-mix(in srgb, var(--vf-primary) 28%, var(--vf-border)); background: color-mix(in srgb, var(--vf-primary-soft) 42%, var(--vf-surface-1)); } .vf-order-desk-now.is-warning { border-color: color-mix(in srgb, var(--vf-warning) 40%, var(--vf-border)); background: color-mix(in srgb, var(--vf-warning-soft) 55%, var(--vf-surface-1)); } .vf-order-desk-now.is-danger { border-color: color-mix(in srgb, var(--vf-danger) 40%, var(--vf-border)); background: color-mix(in srgb, var(--vf-danger-soft) 50%, var(--vf-surface-1)); } .vf-order-desk-now.is-success { border-color: color-mix(in srgb, var(--vf-success) 40%, var(--vf-border)); background: color-mix(in srgb, var(--vf-success-soft) 50%, var(--vf-surface-1)); } .vf-order-desk-now.is-muted { background: var(--vf-surface-2); } .vf-rail-assign { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.3rem; align-items: stretch; } .vf-rail-assign .form-select { min-width: 0; height: 1.9rem; padding: 0.18rem 1.55rem 0.18rem 0.45rem; font-size: 0.74rem; } .vf-rail-assign .btn { width: 1.9rem; min-width: 1.9rem; padding: 0; } .vf-rail-alert { display: flex; align-items: flex-start; gap: 0.32rem; margin: 0; padding: 0.32rem 0.42rem; border: 1px solid var(--vf-border); border-radius: var(--vf-radius-md); font-size: 0.7rem; font-weight: 650; line-height: 1.3; } .vf-rail-alert > i { margin-top: 0.08rem; flex-shrink: 0; color: var(--vf-icon); } .vf-rail-alert.is-info { border-color: color-mix(in srgb, var(--vf-primary) 32%, var(--vf-border)); background: var(--vf-primary-soft); color: var(--vf-primary); } .vf-rail-facts { display: flex; flex-direction: column; gap: 0.28rem; margin: 0 0 0.4rem; } .vf-rail-fact { display: flex; align-items: baseline; justify-content: space-between; gap: 0.5rem; min-width: 0; padding: 0.28rem 0.4rem; border: 1px solid var(--vf-border); border-radius: var(--vf-radius-md); background: var(--vf-surface-2); } .vf-rail-fact span { display: block; flex-shrink: 0; color: var(--vf-text-muted); font-size: 0.62rem; font-weight: 750; letter-spacing: 0.04em; text-transform: uppercase; } .vf-rail-fact strong { display: block; margin: 0; min-width: 0; font-size: 0.76rem; font-weight: 750; line-height: 1.3; text-align: right; overflow-wrap: anywhere; } .vf-rail-links { display: flex; flex-wrap: wrap; gap: 0.35rem 0.75rem; margin: 0 0 0.55rem; } .vf-rail-links a { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.76rem; font-weight: 700; color: var(--vf-primary); text-decoration: none; } .vf-rail-links a:hover { text-decoration: underline; } .vf-order-desk-appt.is-locked { background: transparent; } .vf-order-desk .vf-pay-notice { gap: 0.55rem; margin-bottom: 0.65rem; padding: 0.55rem 0.7rem; } .vf-order-desk .vf-pay-notice-ico, .vf-order-desk .vf-pay-notice > i { width: 1.85rem; height: 1.85rem; font-size: 0.9rem; border-radius: 0.5rem; } .vf-order-desk .vf-pay-notice strong { font-size: 0.82rem; } .vf-order-desk .vf-pay-notice-help, .vf-order-desk .vf-pay-notice p { font-size: 0.76rem; } #appointment { scroll-margin-top: 0.75rem; } .vf-order-desk-file { min-width: 0; } .vf-order-desk-fold { border-top: 1px solid var(--vf-border); padding: 0.1rem 0 0.3rem; } .vf-order-desk-fold:first-of-type { border-top: 0; padding-top: 0; } .vf-order-desk-fold > summary { display: flex; align-items: center; gap: 0.32rem; margin: 0; padding: 0.28rem 0; list-style: none; cursor: pointer; appearance: none; font-size: 0.72rem; font-weight: 750; min-width: 0; overflow-wrap: anywhere; } .vf-order-desk-fold > summary::-webkit-details-marker { display: none; } .vf-order-desk-fold > summary .fa-duotone { flex-shrink: 0; color: var(--vf-icon); } .vf-order-desk-fold > summary .badge { margin-left: auto; flex-shrink: 0; } .vf-order-desk-fold > summary::before { content: ""; width: 0.35rem; height: 0.35rem; border-right: 1.5px solid var(--vf-text-muted); border-bottom: 1.5px solid var(--vf-text-muted); transform: rotate(-45deg); flex-shrink: 0; } .vf-order-desk-fold[open] > summary::before { transform: rotate(45deg); } .vf-order-desk-fold .vf-fee-list { display: grid; gap: 0.28rem; margin-bottom: 0.32rem; } .vf-order-desk-fold .vf-fee-total { margin-bottom: 0.32rem; padding: 0.35rem 0.45rem; font-size: 0.74rem; } .vf-order-desk-fold .vf-fee-row { display: grid; grid-template-columns: 1.4rem minmax(0, 1fr) auto; gap: 0.3rem; align-items: center; padding: 0.3rem 0.38rem; font-size: 0.72rem; } .vf-order-desk-fold .vf-fee-ico { width: 1.4rem; height: 1.4rem; font-size: 0.64rem; } .vf-order-desk-fold .vf-fee-row .vf-money, .vf-order-desk-fold .vf-fee-total .vf-money { font-size: 0.72rem; white-space: nowrap; } .vf-desk-pay { display: flex; flex-direction: column; gap: 0.4rem; padding: 0 0 0.15rem; } .vf-desk-pay-item + .vf-desk-pay-item { padding-top: 0.4rem; border-top: 1px solid var(--vf-border); } .vf-desk-pay-row { display: flex; flex-wrap: nowrap; align-items: center; gap: 0.35rem; min-width: 0; } .vf-desk-pay-row .badge { flex-shrink: 0; font-size: 0.62rem; } .vf-desk-pay-method { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.74rem; font-weight: 750; } .vf-desk-pay-row strong { flex-shrink: 0; font-size: 0.78rem; font-weight: 800; white-space: nowrap; } .vf-desk-pay-trx { min-width: 0; max-width: 7rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--vf-text-muted); font-size: 0.7rem; font-weight: 650; } .vf-desk-pay-row .vf-file-icos { margin-left: auto; flex-shrink: 0; } .vf-desk-pay-row .vf-file-ico { width: 1.7rem; height: 1.7rem; min-width: 1.7rem; flex-basis: 1.7rem; border-radius: 0.4rem; } .vf-order-desk-fold .vf-note-composer { flex-direction: column; align-items: stretch; flex-wrap: nowrap; margin-top: 0.55rem; padding-top: 0.55rem; } .vf-order-desk-fold .vf-note-composer input { flex: none; width: 100%; height: 2.2rem; font-size: 0.8rem; } .vf-order-desk-fold .vf-note-composer .btn { width: 100%; height: 2.2rem; min-height: 2.2rem; padding: 0 0.8rem; } .vf-desk-auth, .vf-desk-refund { display: flex; flex-direction: column; gap: 0.4rem; padding: 0 0 0.15rem; } .vf-desk-auth-vals { display: flex; flex-wrap: wrap; gap: 0.3rem; } .vf-desk-auth-vals > span { display: inline-flex; align-items: center; min-height: 1.45rem; padding: 0.08rem 0.45rem; border: 1px solid var(--vf-border); border-radius: 99px; background: var(--vf-surface-2); font-size: 0.72rem; font-weight: 700; line-height: 1.2; } .vf-desk-auth-addr { margin: 0; color: var(--vf-text-secondary); font-size: 0.74rem; line-height: 1.35; overflow-wrap: anywhere; } .vf-desk-auth-sign { display: flex; align-items: center; gap: 0.5rem; } .vf-desk-auth-sign img { max-width: 6.5rem; max-height: 2.2rem; object-fit: contain; background: #fff; border: 1px solid var(--vf-border); border-radius: 0.35rem; padding: 0.12rem 0.3rem; } .vf-desk-auth-sign small { color: var(--vf-text-muted); font-size: 0.7rem; } .vf-desk-refund-line { display: flex; align-items: baseline; gap: 0.35rem; margin: 0; font-size: 0.8rem; line-height: 1.3; } .vf-desk-refund-line span { color: var(--vf-text-muted); font-weight: 650; } .vf-desk-refund-line strong { font-weight: 800; } .vf-desk-refund-copy { margin: 0; color: var(--vf-text-secondary); font-size: 0.74rem; line-height: 1.35; overflow-wrap: anywhere; } .vf-desk-refund-copy.is-danger { color: var(--vf-danger); } .vf-desk-refund-links, .vf-desk-auth-links { display: flex; flex-wrap: wrap; gap: 0.55rem 0.85rem; } .vf-desk-refund-links a, .vf-desk-auth-links a { display: inline-flex; align-items: center; gap: 0.28rem; color: var(--vf-primary); font-size: 0.74rem; font-weight: 700; text-decoration: none; } .vf-desk-refund-links a:hover, .vf-desk-auth-links a:hover { text-decoration: underline; } .vf-order-desk-fold .vf-rating-moderate { display: grid; gap: 0.55rem; margin-top: 0.7rem; } .vf-order-desk-fold .vf-review-quote { margin: 0.4rem 0 0.25rem; font-size: 0.8rem; overflow-wrap: anywhere; } .vf-order-desk .vf-review-public-note { display: flex; align-items: flex-start; gap: 0.4rem; margin-top: 0.55rem; color: var(--vf-text-muted); font-size: 0.78rem; } .vf-appl-empty { grid-column: 1 / -1; margin: 0; color: var(--vf-text-muted); font-size: 0.78rem; font-weight: 650; } @media (min-width: 1400px) { .vf-order-desk-files .vf-appl-read, .vf-order-desk-files .vf-appl-read.is-icons { grid-template-columns: minmax(0, 1.45fr) minmax(8rem, 0.5fr); } .vf-order-desk-slot-grid { grid-template-columns: minmax(0, 1fr) minmax(12.25rem, 15rem); } } @media (max-width: 1199.98px) { .vf-order-desk-grid { grid-template-columns: minmax(0, 1fr) minmax(18.5rem, 20.5rem); } .vf-order-desk-slot-grid { grid-template-columns: 1fr; grid-template-rows: none; } .vf-order-desk-webfile { overflow: visible; min-height: 16rem; } .vf-webfile-frame { min-height: 16rem; } .vf-order-desk-webfile .vf-upload-card.is-panel, .vf-order-desk-webfile .vf-upload-card.is-panel.is-done { min-height: 16rem; } .vf-webfile-frame > .vf-upload-preview, .vf-webfile-frame > .vf-upload-preview.is-pdf, .vf-order-desk-webfile .vf-upload-card.is-panel .vf-upload-preview, .vf-order-desk-webfile .vf-upload-card.is-panel .vf-upload-preview.is-pdf { min-height: 14rem; height: 14rem; flex: 0 0 14rem; } } @media (max-width: 991.98px) { body:has(.vf-order-desk) .app-content { overflow-y: auto; padding: 0.85rem 0.9rem 1rem; } .vf-order-desk { flex: none; overflow: visible; } .vf-order-desk-grid { grid-template-columns: 1fr; flex: none; } .vf-order-desk-work, .vf-order-desk-board, .vf-order-desk-slot, .vf-order-desk-rail, .vf-order-desk-panel, .vf-order-desk-files, .vf-order-desk-webfile { overflow: visible; min-height: 0; } .vf-order-desk-slot.is-active { flex: none; overflow: visible; } .vf-order-desk-slot-grid { flex: none; grid-template-rows: none; } .vf-order-desk-board { flex: none; overflow: visible; } .vf-order-desk-panel { flex: none; padding-bottom: 0.75rem; } .vf-order-desk:has(.vf-chat-dock) { padding-bottom: 4.5rem; } .vf-order-desk:has(.vf-chat-dock) .vf-order-desk-panel { padding-bottom: 0.75rem; } } @media (max-width: 575.98px) { .vf-order-desk .vf-page-hero-top { flex-wrap: wrap; align-items: flex-start; } .vf-order-desk .vf-page-hero-meta > p { max-width: none; } .vf-order-desk .vf-page-hero-meta .vf-flow-steps { justify-content: flex-start; } .vf-order-desk .vf-page-hero-meta .vf-flow-step + .vf-flow-step::before { width: 0.55rem; } .vf-rail-facts { grid-template-columns: 1fr; } .vf-rail-assign { grid-template-columns: 1fr; } .vf-rail-assign .btn { width: 100%; } } .vf-order-case { display: flex; flex-direction: column; gap: 0.7rem; } .vf-order-case .vf-page-hero { margin: 0; padding: 0.55rem 0.85rem; gap: 0; } .vf-order-case .vf-page-hero-top { flex-wrap: nowrap; gap: 0.6rem; } .vf-order-case .vf-page-hero-icon { width: 2.35rem; height: 2.35rem; font-size: 1.05rem; border-radius: 0.65rem; } .vf-order-case .vf-page-hero-copy { display: flex; flex-direction: column; justify-content: center; gap: 0.2rem; min-width: 0; flex: 1; } .vf-order-case .vf-page-hero-heading { display: flex; align-items: center; flex-wrap: wrap; gap: 0.35rem 0.5rem; min-width: 0; } .vf-order-case .vf-page-hero-copy h1 { font-size: 1.08rem; margin: 0; overflow-wrap: anywhere; } .vf-order-case .vf-page-hero-badge { flex-shrink: 0; padding: 0.18rem 0.48rem; border-radius: 999px; font-size: 0.68rem; font-weight: 750; line-height: 1.2; } .vf-order-case .vf-page-hero-copy p, .vf-order-case .vf-page-hero-meta > p { margin: 0; color: var(--vf-text-muted); font-size: 0.78rem; line-height: 1.35; } .vf-order-case .vf-page-hero-meta { display: flex; flex-direction: row; align-items: center; gap: 0.55rem 0.7rem; min-width: 0; width: 100%; margin-top: 0; } .vf-order-case .vf-page-hero-meta > p { flex: 0 1 auto; max-width: min(18rem, 42%); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .vf-order-case .vf-page-hero-actions { display: flex; align-items: center; gap: 0.45rem; flex-shrink: 0; } .vf-order-case .vf-page-hero-action { min-height: 2.1rem; padding: 0.28rem 0.7rem; font-size: 0.78rem; } .vf-order-case .vf-page-hero-meta .vf-flow-steps { flex: 1 1 auto; flex-wrap: nowrap; justify-content: flex-start; min-width: 0; width: auto; margin: 0; padding: 0; border: 0; overflow-x: auto; scrollbar-width: thin; } .vf-order-case .vf-page-hero-meta .vf-flow-step { flex-shrink: 0; font-size: 0.68rem; } .vf-order-case .vf-page-hero-meta .vf-flow-step span, .vf-order-case .vf-page-hero-meta .vf-flow-step a { gap: 0.28rem; padding: 0.18rem 0.5rem; font-size: 0.68rem; background: var(--vf-surface-2); white-space: nowrap; } .vf-order-case .vf-page-hero-meta .vf-flow-step i { font-size: 0.72rem; } .vf-order-case .vf-page-hero-meta .vf-flow-step + .vf-flow-step::before { width: 0.85rem; margin-right: 0.35rem; } .vf-order-case-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(19rem, 22.5rem); gap: 0.7rem; align-items: start; } .vf-order-case-main, .vf-order-case-rail { display: flex; flex-direction: column; gap: 0.7rem; min-width: 0; } .vf-order-case-rail { position: sticky; top: 0.75rem; } .vf-order-case-card, .vf-order-case-board, .vf-order-case-slot, .vf-order-case-fold { margin: 0; padding: 0.8rem 0.9rem; border: 1px solid var(--vf-border); border-radius: var(--vf-radius); background: var(--vf-surface-1); box-shadow: var(--vf-shadow-sm); } .vf-order-case-board { display: flex; flex-direction: column; gap: 0.55rem; padding: 0.7rem; } .vf-order-case-pills { display: flex; flex-wrap: wrap; gap: 0.35rem; } .vf-order-case-pill { appearance: none; margin: 0; padding: 0.32rem 0.7rem; display: inline-flex; align-items: center; gap: 0.28rem; border: 1px solid var(--vf-border); border-radius: 99px; background: var(--vf-surface-2); color: var(--vf-text); font-size: 0.75rem; font-weight: 700; line-height: 1.2; text-decoration: none; cursor: pointer; } .vf-order-case-pill:hover { border-color: color-mix(in srgb, var(--vf-primary) 40%, var(--vf-border)); } .vf-order-case-pill.is-active { border-color: var(--vf-primary); background: var(--vf-primary-soft); color: var(--vf-primary); } .vf-order-case-slot { display: none; flex-direction: column; gap: 0.55rem; padding: 0.65rem 0.7rem 0.75rem; scroll-margin-top: 5.5rem; } .vf-order-case-slot.is-active { display: flex; } .vf-order-case-slot.is-pending_review { border-color: color-mix(in srgb, var(--vf-warning) 42%, var(--vf-border)); } .vf-order-case-slot.is-correction_requested { border-color: color-mix(in srgb, var(--vf-warning) 36%, var(--vf-border)); } .vf-order-case-slot.is-confirmed { border-color: color-mix(in srgb, var(--vf-success) 36%, var(--vf-border)); } .vf-order-case-head { display: flex; align-items: center; justify-content: space-between; gap: 0.55rem; min-width: 0; } .vf-order-case-head h5, .vf-order-case-head h6 { display: inline-flex; align-items: center; gap: 0.4rem; margin: 0; min-width: 0; font-size: 0.9rem; font-weight: 750; line-height: 1.25; } .vf-order-case-head h6 { font-size: 0.8rem; } .vf-order-case-head .fa-duotone { color: var(--vf-icon); } .vf-order-case-hint { margin: 0 0 0.45rem; color: var(--vf-text-muted); font-size: 0.78rem; line-height: 1.4; } .vf-order-case .vf-webfile-frame { display: flex; flex-direction: column; flex: none; overflow: hidden; height: min(58vh, 36rem); min-height: 22rem; } .vf-order-case .vf-webfile-frame > .vf-upload-preview, .vf-order-case .vf-webfile-frame > .vf-upload-preview.is-pdf { position: relative; flex: 1 1 auto; flex-basis: auto; min-height: 0; height: auto; border: 0; border-radius: 0; } .vf-order-case .vf-webfile-frame iframe { pointer-events: auto; } .vf-order-case-receipt { height: min(28vh, 16rem); min-height: 12rem; } .vf-order-case-review { display: flex; flex-direction: column; gap: 0.45rem; } .vf-order-case-review .btn { width: 100%; } .vf-order-case-correct { border: 1px solid var(--vf-border); border-radius: var(--vf-radius-md); background: var(--vf-surface-2); } .vf-order-case-correct summary { display: flex; align-items: center; gap: 0.4rem; padding: 0.5rem 0.7rem; cursor: pointer; font-size: 0.8rem; font-weight: 700; color: var(--vf-danger); list-style: none; } .vf-order-case-correct summary::-webkit-details-marker { display: none; } .vf-order-case-correct[open] summary { border-bottom: 1px solid var(--vf-border); } .vf-order-case-correct form { padding: 0.65rem 0.7rem 0.75rem; } .vf-order-case-docs.has-divider { margin-bottom: 0.75rem; padding-bottom: 0.75rem; border-bottom: 1px solid var(--vf-border); } .vf-order-case .vf-order-desk-now { padding: 0.7rem 0.8rem; } .vf-order-case .vf-chat-card { margin: 0; padding: 0.75rem 0.85rem 0.85rem; max-height: min(38rem, calc(100vh - 9rem)); overflow: hidden; } .vf-order-case .vf-checkout-card-head { margin-bottom: 0.45rem; padding-bottom: 0.45rem; } .vf-order-case .vf-checkout-card-head h5 { font-size: 0.9rem; } .vf-order-case .vf-chat-pay { margin-bottom: 0.5rem; padding-bottom: 0.5rem; font-size: 0.78rem; } .vf-order-case .vf-chat-thread { flex: 1 1 auto; min-height: 10rem; max-height: none; } .vf-order-case .vf-fee-row { padding: 0.55rem 0.65rem; } .vf-order-case .vf-fee-total { margin-bottom: 0.55rem; padding: 0.65rem 0.75rem; font-size: 0.9rem; } .vf-order-case .vf-appl-read { grid-template-columns: 1fr; gap: 0.45rem; margin: 0; } .vf-order-case .vf-appl-facts { grid-template-columns: 1fr 1fr; gap: 0.4rem; } .vf-order-case .vf-appl-fact, .vf-order-case .vf-appl-addr { padding: 0.45rem 0.5rem; gap: 0.4rem; } .vf-order-case .vf-doc-grid { flex-wrap: nowrap; } .vf-order-case-fold { padding: 0; } .vf-order-case-fold summary { display: flex; align-items: center; gap: 0.4rem; padding: 0.7rem 0.85rem; cursor: pointer; font-size: 0.82rem; font-weight: 750; color: var(--vf-danger); list-style: none; } .vf-order-case-fold summary::-webkit-details-marker { display: none; } .vf-order-case-fold[open] summary { border-bottom: 1px solid var(--vf-border); } .vf-order-case-fold form, .vf-order-case-fold .vf-order-case-hint, .vf-order-case-fold .vf-fee-note { margin: 0.65rem 0.85rem 0.85rem; } .vf-order-case.is-refund-mode .vf-refund-card { border-color: color-mix(in srgb, var(--vf-warning) 42%, var(--vf-border)); } .vf-order-case #appointment, .vf-order-case #refund, .vf-order-case #chat { scroll-margin-top: 5.5rem; } @media (max-width: 991.98px) { .vf-order-case .vf-page-hero-top { flex-wrap: wrap; } .vf-order-case .vf-page-hero-meta .vf-flow-steps { justify-content: flex-start; } .vf-order-case-grid { grid-template-columns: 1fr; } .vf-order-case-rail { position: static; } .vf-order-case .vf-webfile-frame { height: min(70vh, 28rem); min-height: 18rem; } .vf-order-case .vf-appl-facts { grid-template-columns: 1fr; } } @media (max-width: 575.98px) { .vf-order-case .vf-page-hero-top { flex-wrap: wrap; align-items: flex-start; } .vf-order-case .vf-page-hero-meta .vf-flow-steps { flex: 1 1 100%; } .vf-order-case .vf-webfile-frame { height: 22rem; min-height: 16rem; } } .vf-order-docs, .vf-order-checkout, .vf-order-pay, .vf-order-view, .vf-order-create { gap: 0.4rem; } .vf-order-docs .vf-page-hero, .vf-order-checkout .vf-page-hero, .vf-order-pay .vf-page-hero, .vf-order-view .vf-page-hero, .vf-order-create .vf-page-hero { margin: 0; padding: 0.4rem 0.7rem; } .vf-order-docs-card { display: flex; flex-direction: column; min-width: 0; overflow: hidden; border: 1px solid var(--vf-border); border-radius: var(--vf-radius); background: var(--vf-surface-1); box-shadow: var(--vf-shadow-sm); } .vf-order-docs-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.5rem; min-width: 0; padding: 0.4rem 0.65rem; border-bottom: 1px solid var(--vf-border); background: color-mix(in srgb, var(--vf-surface-2, var(--vf-bg)) 72%, var(--vf-surface-1)); } .vf-order-docs-toolbar-slots { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem; min-width: 0; } .vf-order-docs-toolbar form { margin: 0; } .vf-order-docs-req { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.45rem; min-width: 0; flex: 1 1 11rem; margin-left: auto; } .vf-order-docs-req-track { flex: 1 1 4.5rem; max-width: 6.5rem; height: 0.32rem; overflow: hidden; border-radius: 99px; background: var(--vf-surface-3, var(--vf-border)); } .vf-order-docs-req-track span { display: block; width: var(--req-pct, 0%); height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--vf-hue-sky), var(--vf-hue-teal)); transition: width 0.4s ease; } .vf-order-docs-req-files { display: flex; flex-wrap: wrap; align-items: center; gap: 0.28rem; margin: 0; padding: 0; list-style: none; } .vf-order-docs-req-file { width: 1.7rem; height: 1.7rem; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--vf-border); border-radius: 0.42rem; background: var(--vf-surface-1); color: var(--vf-icon); font-size: 0.72rem; animation: vf-docs-req-in 0.38s ease both; animation-delay: var(--req-delay, 0ms); } .vf-order-docs-req-file.is-wait { border-color: color-mix(in srgb, var(--vf-warning) 45%, var(--vf-border)); color: var(--vf-warning); animation: vf-docs-req-in 0.38s ease both, vf-docs-req-pulse 1.85s ease-in-out infinite; animation-delay: var(--req-delay, 0ms), calc(var(--req-delay, 0ms) + 0.4s); } .vf-order-docs-req-file.is-wait i { animation: vf-upload-float 2.2s ease-in-out infinite; } .vf-order-docs-req-file.is-done { border-color: color-mix(in srgb, var(--vf-success) 50%, var(--vf-border)); background: var(--vf-success-soft); color: var(--vf-success); } .vf-order-docs:not(.is-visited) [data-visit-gated] { display: none !important; } .vf-order-docs-req.is-refreshing .vf-order-docs-req-track span { animation: vf-docs-req-pulse 0.7s ease-in-out; } .vf-order-docs.is-visited [data-visit-gated].vf-upload-card { animation: vf-docs-req-in 0.38s ease both; } .vf-order-docs-need { width: 0.38rem; height: 0.38rem; flex-shrink: 0; border-radius: 99px; background: var(--vf-danger); } .vf-order-case-pill.is-complete:not(.is-active) { border-color: color-mix(in srgb, var(--vf-success) 40%, var(--vf-border)); color: var(--vf-success); background: var(--vf-success-soft); } .vf-order-case-pill.is-warn:not(.is-active) { border-color: color-mix(in srgb, var(--vf-warning) 45%, var(--vf-border)); color: var(--vf-warning-text); background: var(--vf-warning-soft); } .vf-order-case-pill.is-add { border-style: dashed; color: var(--vf-primary); background: var(--vf-surface-1); } .vf-order-case-pill.is-remove { color: var(--vf-danger); padding-inline: 0.5rem; } .vf-order-docs-split { display: grid; grid-template-columns: minmax(0, 0.86fr) minmax(24rem, 1.24fr); grid-template-areas: "details files"; gap: 0.75rem; align-items: stretch; padding: 0.6rem 0.7rem 0.7rem; } .vf-order-docs-count { color: var(--vf-text-muted); font-size: 0.72rem; font-weight: 750; } .vf-order-docs-files { display: flex; flex-direction: column; grid-area: files; align-self: stretch; gap: 0.4rem; min-width: 0; height: 100%; min-height: 0; padding: 0; } .vf-order-docs-files .vf-upload-meter { flex: none; width: 100%; margin: 0.25rem 0 0.4rem; height: 0.3rem; } .vf-order-docs .vf-upload-grid { display: grid; flex: 1 1 auto; grid-auto-flow: column; grid-auto-columns: minmax(8.5rem, 1fr); grid-template-columns: none; gap: 0.45rem; overflow-x: auto; padding: 0; min-height: 0; height: 100%; align-items: stretch; scrollbar-width: thin; } .vf-order-docs .vf-upload-card, .vf-order-docs .vf-upload-card.is-done { min-width: 8.5rem; max-width: none; height: 100%; min-height: 0; padding: 0.45rem; border-color: var(--vf-border); background: var(--vf-surface-1); box-shadow: none; animation: vf-upload-in 0.4s ease both; } .vf-order-docs .vf-upload-card.is-done { border-color: color-mix(in srgb, var(--vf-success) 45%, var(--vf-border)); } .vf-order-docs .vf-upload-card > form, .vf-order-docs .vf-upload-drop { flex: 1 1 auto; min-height: 0; } .vf-order-docs .vf-upload-card:hover { transform: none; } .vf-order-docs .vf-upload-card-head { margin-bottom: 0.35rem; gap: 0.35rem; min-height: 1.45rem; } .vf-order-docs .vf-upload-card-icon { width: 1.5rem; height: 1.5rem; font-size: 0.72rem; border-radius: 0.4rem; background: color-mix(in srgb, var(--vf-hue-sky) 16%, transparent); } .vf-order-docs .vf-upload-card-title { display: flex; align-items: center; gap: 0.22rem; min-width: 0; } .vf-order-docs .vf-upload-card-title h6 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.74rem; font-weight: 750; line-height: 1.25; } .vf-order-docs .vf-file-ico { flex-basis: 1.15rem; width: 1.15rem; height: 1.15rem; min-width: 1.15rem; border-radius: 0.28rem; } .vf-order-docs .vf-file-ico i { font-size: 0.58rem; } .vf-order-docs .vf-upload-card .vf-upload-preview, .vf-order-docs .vf-upload-card .vf-upload-preview.is-pdf { flex: 1 1 auto; width: 100%; height: auto; min-height: 0; } .vf-order-docs .vf-upload-empty { min-height: 0; gap: 0; padding: 0; } .vf-order-docs .vf-upload-empty span { display: none; } .vf-order-docs .vf-appl-form.is-compact { display: flex; flex-direction: column; grid-area: details; min-width: 0; height: 100%; border: 0; background: transparent; box-shadow: none; } .vf-order-docs .vf-appl-form.is-compact > form { display: flex; flex: 1 1 auto; flex-direction: column; gap: 0.4rem; min-width: 0; min-height: 0; } .vf-order-docs .vf-appl-previews { display: grid; flex: 1 1 auto; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "travel work" "address address"; gap: 0.45rem; align-items: stretch; min-height: 0; } .vf-order-docs .vf-appl-form.is-compact .vf-order-case-head { margin: 0; } .vf-appl-head-tools { display: flex; align-items: center; gap: 0.45rem; margin-left: auto; } .vf-order-docs .vf-appl-form.is-compact input[type="hidden"] { display: none; } .vf-order-docs .vf-appl-address.is-travel { grid-area: travel; --vf-appl-accent: var(--vf-hue-violet); --vf-appl-tint: color-mix(in srgb, var(--vf-hue-violet) 16%, transparent); } .vf-order-docs .vf-appl-address.is-work { grid-area: work; --vf-appl-accent: var(--vf-hue-sky); --vf-appl-tint: color-mix(in srgb, var(--vf-hue-sky) 16%, transparent); } .vf-order-docs .vf-appl-address.is-address { position: relative; grid-area: address; --vf-appl-accent: var(--vf-hue-teal); --vf-appl-tint: color-mix(in srgb, var(--vf-hue-teal) 16%, transparent); } .vf-order-docs .vf-appl-address.is-travel .vf-appl-address-open, .vf-order-docs .vf-appl-address.is-work .vf-appl-address-open { flex: 1 1 auto; height: 100%; } .vf-order-docs .vf-appl-address-row { position: relative; display: block; min-width: 0; border: 1px solid var(--vf-border); border-radius: var(--vf-radius-md); background: var(--vf-surface-1); } .vf-order-docs .vf-appl-address.is-address .vf-appl-address-open { display: flex; flex-direction: column; align-items: stretch; gap: 0.45rem; width: 100%; height: auto; min-width: 0; min-height: 0; margin: 0; padding: 0.55rem 0.7rem 0.6rem; overflow: hidden; border: 0; border-radius: 0; background: transparent; box-shadow: none; } .vf-order-docs .vf-appl-address.is-address .vf-appl-address-open:hover, .vf-order-docs .vf-appl-address.is-address .vf-appl-address-open:focus-visible { border-color: transparent; background: transparent; box-shadow: none; } .vf-order-docs .vf-appl-address-row:hover { border-color: var(--vf-appl-accent, var(--vf-primary)); } .vf-order-docs .vf-appl-address.is-address .vf-appl-preview-head { flex: none; width: 100%; min-width: 0; padding: 0 0 0.4rem; border-bottom: 1px solid var(--vf-border); } .vf-order-docs .vf-appl-address.is-address.has-share .vf-appl-preview-head { padding-right: 6.6rem; } .vf-order-docs .vf-appl-address.is-address .vf-appl-preview-ico { width: 1.5rem; height: 1.5rem; font-size: 0.72rem; } .vf-order-docs .vf-appl-address.is-address .vf-appl-preview-name { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; line-height: 1.25; } .vf-order-docs .vf-appl-address.is-address .vf-appl-share { position: absolute; z-index: 2; top: 0.42rem; right: 0.55rem; left: auto; min-height: 1.4rem; padding: 0.05rem 0.45rem; transform: none; } .vf-order-docs .vf-appl-address.is-address .vf-appl-share .form-check-label { font-size: 0.68rem; white-space: nowrap; } .vf-order-docs .vf-appl-address.is-address .vf-appl-preview-lines { display: grid; flex: none; width: 100%; min-width: 0; grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: start; gap: 0.35rem 0.85rem; padding: 0.05rem 0 0; } .vf-order-docs .vf-appl-address.is-address .vf-appl-preview-lines li { flex-direction: column; align-items: flex-start; gap: 0.08rem; } .vf-order-docs .vf-appl-address.is-address .vf-appl-preview-lines em, .vf-order-docs .vf-appl-address.is-address .vf-appl-preview-lines strong { display: block; width: 100%; max-width: 100%; } .vf-order-docs .vf-appl-address.is-address .vf-appl-preview-lines em { font-size: 0.62rem; } .vf-order-docs .vf-appl-address.is-address .vf-appl-preview-lines strong { font-size: 0.8rem; line-height: 1.25; } .vf-order-docs .vf-appl-address.is-address .vf-appl-shared-note { margin: 0.35rem 0 0; } .vf-order-docs .vf-appl-address { display: flex; flex-direction: column; min-width: 0; height: auto; padding: 0; border: 0; border-radius: 0; background: transparent; } .vf-order-docs-files > .vf-order-case-head { margin: 0; } .vf-order-docs .vf-order-case-head { flex: none; min-height: 1.7rem; margin-bottom: 0; } .vf-order-docs .vf-appl-form .form-label:not(.visually-hidden) { margin-bottom: 0.15rem; font-size: 0.68rem; } .vf-order-docs .vf-appl-form.is-compact .form-label:not(.visually-hidden) { display: none; } .vf-order-docs .vf-appl-form .form-control, .vf-order-docs .vf-appl-form .form-select { min-height: 2.05rem; padding: 0.22rem 0.55rem; border-radius: var(--vf-radius-md); font-size: 0.8rem; } .vf-order-docs .vf-field { min-height: 2.05rem; padding: 0.18rem 0.5rem 0.18rem 0.35rem; gap: 0.35rem; } .vf-order-docs .vf-field-ico { width: 1.45rem; height: 1.45rem; font-size: 0.68rem; } .vf-order-docs .vf-field .form-control { min-height: 0; padding: 0; font-size: 0.8rem; } .vf-order-docs .vf-select-btn { min-height: 2.05rem; padding: 0.18rem 0.5rem 0.18rem 0.35rem; border-radius: var(--vf-radius-md); font-size: 0.8rem; gap: 0.35rem; } .vf-order-docs .vf-select-ico { width: 1.45rem; height: 1.45rem; font-size: 0.68rem; } .vf-order-docs .vf-appl-selects { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.4rem 0.45rem; margin-bottom: 0.45rem; } .vf-order-docs .vf-appl-medical { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.4rem 0.45rem; margin-bottom: 0.45rem; } .vf-order-docs .vf-appl-address { padding: 0; } .vf-order-docs .vf-appl-address-head { margin-bottom: 0.35rem; gap: 0.35rem; } .vf-order-docs .vf-appl-group { margin: 0; font-size: 0.72rem; } .vf-order-docs .vf-appl-address-fields { grid-template-columns: 1fr; gap: 0.4rem; } .vf-order-docs .vf-appl-share { padding: 0.08rem 0.4rem; } .vf-order-docs .vf-pay-notice { margin: 0 0 0.35rem; padding: 0.35rem 0.45rem; font-size: 0.72rem; } .vf-order-docs-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 0.5rem; padding: 0.55rem 0.8rem; border-top: 1px solid var(--vf-border); background: color-mix(in srgb, var(--vf-surface-2, var(--vf-bg)) 68%, var(--vf-surface-1)); } .vf-order-docs-actions.is-toolbar { flex: 0 0 auto; padding: 0; border: 0; background: transparent; gap: 0.35rem; } .vf-order-docs-actions.is-toolbar .vf-order-docs-btn { min-width: 6.4rem; min-height: 2.05rem; padding: 0.28rem 0.8rem; font-size: 0.78rem; } .vf-order-docs-actions form { margin: 0; display: flex; } .vf-order-docs-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; min-width: 7.75rem; min-height: 2.4rem; padding: 0.42rem 1.15rem; border-radius: var(--vf-radius-md); font-size: 0.84rem; font-weight: 700; } .vf-order-docs-btn i { font-size: 0.92rem; } .vf-order-docs .vf-appl-address-open { border-color: var(--vf-border); background: var(--vf-surface-1); box-shadow: none; } @media (max-width: 991.98px) { .vf-order-docs-split { grid-template-columns: 1fr; grid-template-areas: "details" "files"; } .vf-order-docs-files, .vf-order-docs .vf-appl-form.is-compact { height: auto; } .vf-order-docs .vf-upload-grid { flex: none; height: auto; } .vf-order-docs .vf-upload-card, .vf-order-docs .vf-upload-card.is-done { height: auto; } .vf-order-docs .vf-upload-card .vf-upload-preview, .vf-order-docs .vf-upload-card .vf-upload-preview.is-pdf { flex: none; height: 6.25rem; min-height: 6.25rem; } } @media (max-width: 767.98px) { .vf-order-docs .vf-appl-selects, .vf-order-docs .vf-appl-medical, .vf-order-docs .vf-appl-address-fields { grid-template-columns: 1fr; } .vf-order-docs .vf-appl-previews { grid-template-columns: 1fr; grid-template-areas: "travel" "work" "address"; } .vf-order-docs .vf-appl-address.is-address .vf-appl-preview-lines, .vf-order-docs .vf-appl-preview-lines { grid-template-columns: repeat(auto-fit, minmax(6.5rem, 1fr)); } .vf-order-docs .vf-upload-grid { grid-auto-flow: column; grid-auto-columns: minmax(8.5rem, 1fr); } .vf-order-docs-actions { flex-direction: column-reverse; align-items: stretch; } .vf-order-docs-actions.is-toolbar { flex-direction: row; width: 100%; } .vf-order-docs-actions.is-toolbar .vf-order-docs-btn { flex: 1 1 0; width: auto; } .vf-order-docs-req { flex: 1 1 100%; margin-left: 0; } .vf-order-docs-actions form { width: 100%; } .vf-order-docs-btn { width: 100%; min-width: 0; } } .vf-order-docs-card .vf-order-case-slot { border: 0; border-radius: 0; box-shadow: none; background: transparent; padding: 0.7rem 0.8rem 0.85rem; } .vf-order-checkout-split { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr) minmax(12.5rem, 14.25rem); align-items: stretch; } .vf-order-checkout .vf-order-docs-actions.is-toolbar { margin-left: auto; } .vf-order-checkout-stage { display: grid; grid-column: 1 / 3; grid-template-columns: subgrid; min-width: 0; } .vf-order-checkout-stage .vf-order-case-slot { gap: 0; padding: 0; } .vf-order-checkout-stage .vf-order-case-slot.is-active { display: grid; grid-column: 1 / -1; grid-template-columns: subgrid; } .vf-order-checkout-body { display: grid; grid-column: 1 / -1; grid-template-columns: subgrid; min-width: 0; } .vf-order-checkout-appl, .vf-order-checkout-files, .vf-order-checkout-fees { min-width: 0; } .vf-order-checkout-appl { grid-column: 1; padding: 0.55rem 0.6rem 0.65rem; border-right: 1px solid var(--vf-border); } .vf-order-checkout-files { display: flex; flex-direction: column; grid-column: 2; padding: 0.55rem 0.6rem 0.65rem; border-right: 1px solid var(--vf-border); } .vf-order-checkout-appl .vf-order-case-head, .vf-order-checkout-files .vf-order-case-head, .vf-order-checkout-fees .vf-order-case-head { margin-bottom: 0.3rem; } .vf-order-checkout .vf-appl-previews { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "travel work" "address address"; gap: 0.45rem; align-items: stretch; } .vf-order-checkout .vf-appl-address { display: flex; flex-direction: column; min-width: 0; padding: 0; border: 0; background: transparent; } .vf-order-checkout .vf-appl-address.is-travel { grid-area: travel; --vf-appl-accent: var(--vf-hue-violet); --vf-appl-tint: color-mix(in srgb, var(--vf-hue-violet) 16%, transparent); } .vf-order-checkout .vf-appl-address.is-work { grid-area: work; --vf-appl-accent: var(--vf-hue-sky); --vf-appl-tint: color-mix(in srgb, var(--vf-hue-sky) 16%, transparent); } .vf-order-checkout .vf-appl-address.is-address { grid-area: address; --vf-appl-accent: var(--vf-hue-teal); --vf-appl-tint: color-mix(in srgb, var(--vf-hue-teal) 16%, transparent); } .vf-order-checkout .vf-appl-address-open.is-static { height: 100%; cursor: default; } .vf-order-checkout .vf-appl-address-open.is-static:hover, .vf-order-checkout .vf-appl-address-open.is-static:focus-visible { border-color: color-mix(in srgb, var(--vf-appl-accent, var(--vf-border)) 28%, var(--vf-border)); box-shadow: var(--vf-shadow-sm); outline: 0; } .vf-order-checkout .vf-appl-address.is-travel .vf-appl-preview-lines { grid-template-columns: repeat(2, minmax(0, 1fr)); } .vf-order-checkout .vf-appl-address.is-travel .vf-appl-preview-lines + .vf-appl-preview-lines { margin-top: 0.35rem; grid-template-columns: repeat(2, minmax(0, 1fr)); } .vf-order-checkout .vf-appl-address.is-travel .vf-appl-preview-lines strong { white-space: nowrap; line-height: 1.25; } .vf-order-checkout .vf-appl-preview-lines.is-rows { grid-template-columns: minmax(0, 1fr); gap: 0.28rem; } .vf-order-checkout .vf-appl-preview-lines.is-rows li { flex-direction: row; align-items: baseline; justify-content: space-between; gap: 0.65rem; } .vf-order-checkout .vf-appl-preview-lines.is-rows em, .vf-order-checkout .vf-appl-preview-lines.is-rows strong { width: auto; } .vf-order-checkout .vf-appl-preview-lines.is-rows em { flex: 0 1 auto; max-width: 46%; } .vf-order-checkout .vf-appl-preview-lines.is-rows strong { flex: 1 1 auto; min-width: 0; max-width: none; text-align: right; white-space: nowrap; } .vf-order-checkout .vf-appl-shared-note { display: flex; align-items: center; gap: 0.4rem; margin: 0; padding: 0.35rem 0.45rem; font-size: 0.72rem; } .vf-order-checkout .vf-appl-shared-note > i { width: 1.35rem; height: 1.35rem; border-radius: 0.35rem; font-size: 0.72rem; } .vf-order-checkout-files .vf-doc-grid.is-row { display: grid; flex: 0 0 auto; grid-template-columns: repeat(auto-fit, minmax(6.75rem, 1fr)); grid-auto-rows: auto; align-items: start; gap: 0.4rem; overflow: visible; min-height: 0; } .vf-order-checkout-files .vf-doc-tile { min-width: 0; max-width: none; height: auto; padding: 0.28rem; } .vf-order-checkout-files .vf-doc-tile-preview, .vf-order-checkout-files .vf-doc-tile-preview.is-pdf, .vf-order-checkout-files .vf-doc-tile-preview.is-image, .vf-order-checkout-files .vf-doc-tile-preview.is-file { flex: none; width: 100%; height: 6.5rem; min-height: 6.5rem; max-height: 6.5rem; overflow: hidden; } .vf-order-checkout-files .vf-doc-tile-preview img { object-fit: cover; object-position: center top; } .vf-order-checkout-files .vf-doc-tile-preview iframe { width: 170%; height: 170%; transform: scale(0.59); transform-origin: top left; } .vf-order-checkout-files .vf-doc-tile-meta { padding: 0.22rem 0.08rem 0; } .vf-order-checkout-files .vf-doc-tile-name { font-size: 0.62rem; line-height: 1.2; } .vf-order-checkout-files .vf-doc-tile-file { display: none; } .vf-order-checkout-files .vf-doc-empty { margin: 0; padding: 0.65rem; font-size: 0.76rem; } .vf-order-checkout-fees { display: flex; flex-direction: column; grid-column: 3; grid-row: 1; padding: 0.55rem 0.6rem 0.65rem; background: var(--vf-surface-2); } .vf-checkout-ledger { display: flex; flex-direction: column; gap: 0.32rem; margin: 0 0 0.45rem; } .vf-checkout-ledger-row { display: grid; grid-template-columns: 1.35rem minmax(0, 1fr) auto; align-items: center; gap: 0.38rem; padding: 0.4rem 0.45rem; border: 1px solid var(--vf-border); border-left-width: 3px; border-radius: 0.45rem; background: var(--vf-surface-1); } .vf-checkout-ledger-row.is-service { border-color: var(--vf-border); border-left-color: var(--vf-primary); } .vf-checkout-ledger-row.is-working { border-color: var(--vf-border); border-left-color: var(--vf-hue-teal); } .vf-checkout-ledger-row.is-total { grid-template-columns: minmax(0, 1fr) auto; margin-top: 0.1rem; padding: 0.48rem 0.5rem; border-color: var(--vf-primary); border-left-color: var(--vf-primary); background: var(--vf-primary-soft); color: var(--vf-primary); } .vf-checkout-ledger-ico { width: 1.35rem; height: 1.35rem; display: inline-flex; align-items: center; justify-content: center; border-radius: 0.35rem; background: var(--vf-surface-2); color: var(--vf-icon); font-size: 0.72rem; } .vf-checkout-ledger-row.is-service .vf-checkout-ledger-ico { background: var(--vf-primary-soft); color: var(--vf-primary); } .vf-checkout-ledger-row.is-working .vf-checkout-ledger-ico { background: var(--vf-hue-teal-soft); color: var(--vf-hue-teal); } .vf-checkout-ledger-copy { min-width: 0; } .vf-checkout-ledger-copy strong, .vf-checkout-ledger-row.is-total .vf-checkout-ledger-copy { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.7rem; font-weight: 750; line-height: 1.2; } .vf-checkout-ledger-copy small { display: block; margin-top: 0.06rem; color: var(--vf-text); font-size: 0.72rem; font-weight: 750; line-height: 1.2; } .vf-checkout-ledger-row .vf-money { display: inline-flex; align-items: center; gap: 0.18rem; font-size: 0.78rem; font-weight: 800; white-space: nowrap; } .vf-checkout-ledger-row.is-total .vf-money { font-size: 0.86rem; } .vf-checkout-ledger-eq { margin-right: 0.08rem; font-weight: 800; opacity: 0.85; } .vf-checkout-ledger-hints { display: flex; flex-direction: column; gap: 0.32rem; } .vf-checkout-ledger-note { display: flex; align-items: center; gap: 0.35rem; margin: 0; padding: 0.34rem 0.42rem; border: 1px solid var(--vf-border); border-left-width: 3px; border-left-color: var(--vf-hue-sky); border-radius: 0.42rem; background: var(--vf-surface-1); color: var(--vf-text); font-size: 0.68rem; font-weight: 650; line-height: 1.3; } .vf-checkout-ledger-note i { flex-shrink: 0; color: var(--vf-hue-sky); font-size: 0.74rem; } .vf-checkout-ledger-note.is-refund { border-left-color: var(--vf-hue-teal); } .vf-checkout-ledger-note.is-refund i { color: var(--vf-hue-teal); } .vf-order-pay .vf-order-docs-actions.is-toolbar { margin-left: auto; } .vf-order-pay-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(15rem, 18rem); align-items: stretch; min-width: 0; } .vf-order-pay-stage { display: flex; flex-direction: column; min-width: 0; max-width: 100%; padding: 0.7rem 0.85rem 0.85rem; } .vf-order-pay-form { margin: 0; min-width: 0; max-width: 100%; } .vf-order-pay-board { display: grid; grid-template-columns: minmax(0, 1fr) minmax(12rem, 14rem); gap: 0.85rem; align-items: stretch; min-width: 0; max-width: 100%; } .vf-order-pay .vf-pay-flow { display: grid; grid-template-columns: minmax(7.5rem, 9.75rem) minmax(0, 1fr); gap: 0.65rem; align-items: stretch; margin: 0; min-width: 0; max-width: 100%; height: 100%; } .vf-order-pay .vf-pay-flow.is-single { grid-template-columns: minmax(0, 1fr); } .vf-order-pay .vf-pay-tabs { flex-direction: column; flex-wrap: nowrap; justify-content: flex-start; align-items: stretch; gap: 0.4rem; margin: 0; min-width: 0; } .vf-order-pay .vf-pay-tab { width: 100%; justify-content: flex-start; min-width: 0; } .vf-order-pay .vf-pay-tab.is-mark { justify-content: center; min-height: 2.55rem; padding: 0.35rem 0.5rem; } .vf-order-pay .vf-pay-tab.is-mark .vf-pay-brand-logo { height: 26px; max-width: 100%; } .vf-order-pay .vf-pay-tab span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .vf-order-pay .vf-pay-stage { display: flex; justify-content: center; align-items: center; width: 100%; max-width: 100%; min-width: 0; min-height: 0; align-self: stretch; } .vf-order-pay .vf-pay-empty { width: 100%; max-width: 22.5rem; min-height: 11rem; box-sizing: border-box; } .vf-order-pay .vf-pay-poster { width: 100%; max-width: 22.5rem; box-sizing: border-box; margin: 0 auto; } .vf-order-pay .vf-pay-notice { margin: 0 0 0.65rem; padding: 0.55rem 0.65rem; gap: 0.55rem; border-radius: var(--vf-radius-md); box-shadow: none; min-width: 0; } .vf-order-pay .vf-pay-notice-ico, .vf-order-pay .vf-pay-notice > i { width: 1.7rem; height: 1.7rem; font-size: 0.78rem; } .vf-order-pay .vf-pay-notice strong { font-size: 0.82rem; } .vf-order-pay .vf-pay-notice-help, .vf-order-pay .vf-pay-notice p { margin: 0.15rem 0 0; font-size: 0.74rem; } .vf-order-pay .vf-pay-notice-reason { margin-top: 0.35rem; padding: 0.35rem 0.45rem; } .vf-order-pay .vf-pay-notice-meta { margin-top: 0.35rem; gap: 0.35rem 0.65rem; font-size: 0.72rem; } .vf-order-pay .vf-pay-proof-fields { display: flex; flex-direction: column; justify-content: flex-start; min-width: 0; max-width: 100%; margin: 0; padding: 0.75rem 0.8rem; border: 1px solid var(--vf-border); border-radius: var(--vf-radius-md); background: var(--vf-surface-2); } .vf-order-pay .vf-pay-proof-help { margin: 0 0 0.65rem; font-size: 0.74rem; line-height: 1.2; white-space: nowrap; } .vf-order-pay .vf-pay-bar { display: flex; flex-direction: column; grid-template-columns: none; gap: 0.65rem; align-items: stretch; } .vf-order-pay .vf-pay-field { min-width: 0; } .vf-order-pay .vf-pay-field .form-label { display: block; min-height: 0; margin-bottom: 0.28rem; font-size: 0.7rem; line-height: 1.2; } .vf-order-pay .vf-pay-input, .vf-order-pay .vf-pay-file { min-height: 2.35rem; min-width: 0; max-width: 100%; padding: 0 0.7rem; gap: 0.45rem; border-radius: var(--vf-radius-md); background: var(--vf-surface-1); } .vf-order-pay .vf-pay-input input { min-width: 0; width: 100%; font-size: 0.82rem; } .vf-order-pay .vf-pay-file span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.8rem; } .vf-order-pay .vf-pay-field-action { margin-top: 0.15rem; } .vf-order-pay .vf-pay-submit { width: 100%; min-height: 2.35rem; padding: 0 0.9rem; border-radius: var(--vf-radius-md); font-size: 0.82rem; } .vf-order-pay-history { margin-top: 0.75rem; padding-top: 0.55rem; border-top: 1px solid var(--vf-border); min-width: 0; } .vf-order-pay-history .vf-order-case-head, .vf-order-pay-fees .vf-order-case-head { margin-bottom: 0.45rem; } .vf-order-pay .vf-pay-attempts { gap: 0.35rem; } .vf-order-pay .vf-pay-attempt { align-items: center; gap: 0.5rem; padding: 0.4rem 0.5rem; border-radius: var(--vf-radius-md); min-width: 0; } .vf-order-pay .vf-pay-attempt-icon { width: 1.45rem; height: 1.45rem; border-radius: 0.38rem; font-size: 0.7rem; } .vf-order-pay .vf-pay-attempt-body { min-width: 0; } .vf-order-pay .vf-pay-attempt-top { margin: 0; gap: 0.28rem 0.4rem; } .vf-order-pay .vf-pay-attempt-top strong, .vf-order-pay .vf-pay-attempt-top code, .vf-order-pay .vf-pay-attempt-top small { font-size: 0.74rem; } .vf-order-pay .vf-pay-attempt-note { margin: 0.15rem 0 0; font-size: 0.72rem; } .vf-order-pay .vf-pay-attempt-link { margin: 0; flex-shrink: 0; font-size: 0.72rem; } .vf-order-pay-fees { display: flex; flex-direction: column; gap: 0; min-width: 0; max-width: 100%; padding: 0.75rem 0.8rem 0.85rem; border-left: 1px solid var(--vf-border); background: var(--vf-surface-2); } .vf-order-pay-fees .vf-fee-list { margin-bottom: 0.45rem; gap: 0.4rem; } .vf-order-pay-fees .vf-fee-row { gap: 0.45rem; padding: 0.5rem 0.55rem; min-width: 0; } .vf-order-pay-fees .vf-fee-ico { width: 1.7rem; height: 1.7rem; border-radius: 0.45rem; font-size: 0.72rem; } .vf-order-pay-fees .vf-fee-copy strong { overflow: hidden; text-overflow: ellipsis; white-space: normal; font-size: 0.76rem; line-height: 1.25; } .vf-order-pay-fees .vf-fee-copy small, .vf-order-pay-fees .vf-fee-row small { font-size: 0.68rem; } .vf-order-pay-fees .vf-fee-row .vf-money { font-size: 0.82rem; } .vf-order-pay-fees .vf-fee-total { margin-bottom: 0.45rem; padding: 0.55rem 0.65rem; font-size: 0.84rem; } .vf-order-pay-fees .vf-fee-total .vf-money { font-size: 0.95rem; } .vf-order-pay-fees .vf-fee-refund { display: flex; align-items: center; gap: 0.5rem; margin: 0; padding: 0.5rem 0.55rem; min-width: 0; border: 1px solid color-mix(in srgb, var(--vf-hue-teal) 32%, var(--vf-border)); border-left: 3px solid var(--vf-hue-teal); border-radius: var(--vf-radius-md); background: color-mix(in srgb, var(--vf-hue-teal-soft) 82%, var(--vf-surface-1)); } .vf-order-pay-fees .vf-fee-refund .vf-fee-ico { width: 1.7rem; height: 1.7rem; border-radius: 0.45rem; background: var(--vf-hue-teal-soft); color: var(--vf-hue-teal); font-size: 0.72rem; } .vf-order-pay-fees .vf-fee-refund .vf-fee-copy { min-width: 0; } .vf-order-pay-fees .vf-fee-refund .vf-fee-copy strong { color: var(--vf-hue-teal); font-size: 0.74rem; white-space: normal; } .vf-order-pay-fees .vf-fee-refund .vf-money { color: var(--vf-hue-teal); font-size: 0.82rem; font-weight: 800; white-space: nowrap; } @media (max-width: 1199.98px) { .vf-order-pay-split { grid-template-columns: 1fr; } .vf-order-pay-fees { border-left: 0; border-top: 1px solid var(--vf-border); } .vf-order-pay-board { grid-template-columns: minmax(0, 1fr) minmax(12rem, 13.5rem); } .vf-order-pay .vf-pay-flow { grid-template-columns: minmax(7.5rem, 9.75rem) minmax(0, 1fr); } .vf-order-pay .vf-pay-flow.is-single { grid-template-columns: minmax(0, 1fr); } .vf-order-pay .vf-pay-stage { width: 100%; max-width: 100%; } .vf-order-pay .vf-pay-empty, .vf-order-pay .vf-pay-poster { width: 100%; max-width: 22.5rem; } } @media (max-width: 991.98px) { .vf-order-pay-board { grid-template-columns: 1fr; } .vf-order-pay .vf-pay-flow, .vf-order-pay .vf-pay-flow.is-single { grid-template-columns: 1fr; justify-items: center; } .vf-order-pay .vf-pay-tabs { flex-direction: row; flex-wrap: wrap; justify-content: center; width: 100%; } .vf-order-pay .vf-pay-tab { width: auto; } .vf-order-pay .vf-pay-stage { width: 100%; justify-content: center; } } @media (max-width: 767.98px) { .vf-order-pay-stage { padding: 0.6rem 0.7rem 0.75rem; } .vf-order-pay .vf-pay-proof-fields { padding: 0.7rem 0.75rem; } .vf-order-pay-fees { padding: 0.7rem 0.75rem 0.8rem; } } .vf-order-view:has(.vf-chat-dock) { padding-bottom: 4.5rem; } .vf-order-view-sum { display: flex; flex-direction: column; gap: 0.45rem; padding: 0.7rem 0.85rem 0.8rem; } .vf-order-view-sum-vals { display: flex; flex-wrap: wrap; gap: 0.35rem; } .vf-order-view-sum-vals > span { display: inline-flex; align-items: center; min-height: 1.55rem; padding: 0.12rem 0.5rem; border: 1px solid var(--vf-border); border-radius: 99px; background: var(--vf-surface-2); font-size: 0.74rem; font-weight: 700; line-height: 1.2; } .vf-order-view-sum-vals .badge { min-height: 1.55rem; padding: 0.12rem 0.5rem; font-size: 0.72rem; } .vf-order-view-sum-line { display: flex; align-items: baseline; justify-content: flex-start; gap: 0.4rem; margin: 0; font-size: 0.88rem; line-height: 1.3; } .vf-order-view-sum-line span { color: var(--vf-text-muted); font-weight: 650; } .vf-order-view-sum-line strong { font-weight: 800; letter-spacing: -0.01em; } .vf-order-view-card .vf-order-case-slot { flex-direction: column; padding: 0; gap: 0; } .vf-order-view-card .vf-order-case-slot:not(.is-active) { display: none; } .vf-order-view-card .vf-order-case-slot.is-active { display: flex; } .vf-order-view-block { display: flex; flex-direction: column; gap: 0.55rem; padding: 0.7rem 0.85rem 0.85rem; border-bottom: 1px solid var(--vf-border); } .vf-order-view-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(16.5rem, 18.75rem); align-items: stretch; min-height: 0; } .vf-order-view-appl { display: flex; flex-direction: column; min-width: 0; padding: 0.65rem 0.75rem 0.8rem; } .vf-order-view-appl .vf-order-case-head { margin-bottom: 0.4rem; } .vf-appl-view { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "travel work" "address address"; gap: 0.4rem; margin: 0 0 0.55rem; } .vf-appl-view .vf-appl-address { display: flex; flex-direction: column; min-width: 0; padding: 0; border: 0; background: transparent; } .vf-appl-view .vf-appl-address.is-travel { grid-area: travel; --vf-appl-accent: var(--vf-hue-violet); --vf-appl-tint: color-mix(in srgb, var(--vf-hue-violet) 16%, transparent); } .vf-appl-view .vf-appl-address.is-work { grid-area: work; --vf-appl-accent: var(--vf-hue-sky); --vf-appl-tint: color-mix(in srgb, var(--vf-hue-sky) 16%, transparent); } .vf-appl-view .vf-appl-address.is-address { grid-area: address; --vf-appl-accent: var(--vf-hue-teal); --vf-appl-tint: color-mix(in srgb, var(--vf-hue-teal) 16%, transparent); } .vf-appl-view .vf-appl-address.is-work .vf-appl-preview-lines { grid-template-columns: minmax(0, 1fr); gap: 0.28rem; } .vf-appl-view .vf-appl-address.is-work .vf-appl-preview-lines li { flex-direction: row; align-items: baseline; justify-content: space-between; gap: 0.5rem; } .vf-appl-view .vf-appl-preview-lines em, .vf-appl-view .vf-appl-preview-lines strong { width: auto; max-width: 100%; } .vf-appl-view .vf-appl-preview-lines strong { white-space: nowrap; } .vf-order-desk .vf-appl-view { margin-bottom: 0.4rem; } .vf-order-desk .vf-appl-address-open { padding: 0.4rem 0.48rem 0.38rem; gap: 0.28rem; } .vf-appl-view-list { display: flex; flex-direction: column; gap: 0.55rem; margin: 0; } .vf-appl-view-list > div { display: grid; gap: 0.08rem; min-width: 0; } .vf-appl-view-list dt { margin: 0; color: var(--vf-text-muted); font-size: 0.66rem; font-weight: 750; letter-spacing: 0.02em; text-transform: uppercase; } .vf-appl-view-list dd { margin: 0; font-size: 0.86rem; font-weight: 700; line-height: 1.35; } .vf-appl-view-list dd.is-empty { color: var(--vf-text-muted); font-weight: 650; } .vf-appl-view-note { display: flex; align-items: center; gap: 0.4rem; margin: 0 0 0.7rem; padding: 0.4rem 0.5rem; font-size: 0.75rem; } .vf-appl-view-note > i { width: 1.35rem; height: 1.35rem; border-radius: 0.35rem; font-size: 0.72rem; } .vf-order-view-appl .vf-appl-read.is-icons { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(7.75rem, 0.48fr); gap: 0.35rem; align-items: stretch; margin: 0 0 0.55rem; } .vf-order-view-appl .vf-appl-read.is-icons .vf-appl-facts { display: flex; flex-wrap: wrap; gap: 0.35rem; min-width: 0; } .vf-order-view-appl .vf-appl-read.is-icons .vf-appl-fact, .vf-order-view-appl .vf-appl-read.is-icons .vf-appl-addr { align-items: center; min-width: 0; min-height: 2.15rem; padding: 0.32rem 0.4rem; gap: 0.3rem; overflow: hidden; } .vf-order-view-appl .vf-appl-read.is-icons .vf-appl-fact.is-edu, .vf-order-view-appl .vf-appl-read.is-icons .vf-appl-fact.is-visa { flex: 1 1 auto; min-width: 0; } .vf-order-view-appl .vf-appl-read.is-icons .vf-appl-fact.is-entry, .vf-order-view-appl .vf-appl-read.is-icons .vf-appl-fact.is-exit, .vf-order-view-appl .vf-appl-read.is-icons .vf-appl-fact.is-hospital, .vf-order-view-appl .vf-appl-read.is-icons .vf-appl-fact.is-dept { flex: 1 1 calc(50% - 0.18rem); } .vf-order-view-appl .vf-appl-read.is-icons .vf-appl-fact > i, .vf-order-view-appl .vf-appl-read.is-icons .vf-appl-addr > i { width: 1.3rem; height: 1.3rem; font-size: 0.64rem; border-radius: 0.32rem; } .vf-order-view-appl .vf-appl-read.is-icons .vf-appl-fact > div, .vf-order-view-appl .vf-appl-read.is-icons .vf-appl-addr > div { min-width: 0; overflow: hidden; } .vf-order-view-appl .vf-appl-read.is-icons .vf-appl-fact strong { margin: 0; font-size: 0.7rem; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .vf-order-view-appl .vf-appl-read.is-icons .vf-appl-addr { height: auto; align-items: flex-start; } .vf-order-view-appl .vf-appl-read.is-icons .vf-appl-addr strong { margin: 0; font-size: 0.7rem; line-height: 1.2; white-space: normal; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; } .vf-order-view-appl .vf-appl-empty { grid-column: 1 / -1; margin: 0; font-size: 0.72rem; } .vf-order-view-appl .vf-doc-grid.is-row, .vf-order-view-docs .vf-doc-grid.is-row { display: flex; flex-wrap: nowrap; gap: 0.4rem; overflow-x: auto; scrollbar-width: thin; } .vf-order-view-appl .vf-doc-grid.is-row .vf-doc-tile, .vf-order-view-docs .vf-doc-grid.is-row .vf-doc-tile { flex: 1 1 0; min-width: 6.4rem; max-width: 8.5rem; } .vf-order-view-appl .vf-doc-grid.is-row .vf-doc-tile-preview, .vf-order-view-appl .vf-doc-grid.is-row .vf-doc-tile-preview.is-pdf, .vf-order-view-appl .vf-doc-grid.is-row .vf-doc-tile-preview.is-image, .vf-order-view-appl .vf-doc-grid.is-row .vf-doc-tile-preview.is-file, .vf-order-view-docs .vf-doc-grid.is-row .vf-doc-tile-preview, .vf-order-view-docs .vf-doc-grid.is-row .vf-doc-tile-preview.is-pdf, .vf-order-view-docs .vf-doc-grid.is-row .vf-doc-tile-preview.is-image, .vf-order-view-docs .vf-doc-grid.is-row .vf-doc-tile-preview.is-file { flex: 0 0 5.6rem; height: 5.6rem; min-height: 5.6rem; } .vf-order-view-webfile { display: flex; flex-direction: column; gap: 0.4rem; min-width: 0; min-height: 0; align-self: stretch; padding: 0.65rem 0.75rem 0.8rem; border-left: 1px solid var(--vf-border); background: color-mix(in srgb, var(--vf-surface-2) 45%, var(--vf-surface-1)); } .vf-order-view-webfile .vf-order-case-head { flex: 0 0 auto; gap: 0.35rem; margin-bottom: 0; } .vf-order-view-webfile .vf-order-case-head h5 { min-width: 0; margin-right: auto; } .vf-order-view-webfile-links { display: flex; align-items: center; gap: 0.28rem; flex-shrink: 0; margin-left: 0.15rem; } .vf-order-view-webfile-links[hidden] { display: none !important; } .vf-order-view-webfile [data-webfile-stage] { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; } .vf-order-view-webfile [data-slot-review-actions]:empty { display: none; } .vf-order-case.vf-order-view .vf-order-view-webfile .vf-webfile-frame { display: flex; flex-direction: column; flex: 1 1 auto; height: auto; min-height: 0; overflow: hidden; } .vf-order-case.vf-order-view .vf-order-view-webfile .vf-webfile-frame > .vf-upload-preview, .vf-order-case.vf-order-view .vf-order-view-webfile .vf-webfile-frame > .vf-upload-preview.is-pdf { flex: 1 1 auto; min-height: 0; height: auto; } .vf-order-view-webfile .vf-webfile-note { flex: 0 0 auto; max-height: 3.2rem; border: 1px solid color-mix(in srgb, var(--vf-warning) 35%, var(--vf-border)); border-radius: var(--vf-radius-md); } .vf-order-view-webfile .vf-doc-empty { flex: 1 1 auto; min-height: 0; margin: 0; } .vf-order-view-webfile .vf-order-docs-btn { width: 100%; min-width: 0; min-height: 2.2rem; padding: 0.32rem 0.4rem; font-size: 0.72rem; line-height: 1.2; white-space: normal; text-align: center; } .vf-order-view-webfile .vf-order-case-review { display: grid; grid-template-columns: 1fr 1fr; align-items: start; gap: 0.4rem; flex: 0 0 auto; } .vf-order-view-webfile .vf-order-case-review-confirm { grid-column: 1; grid-row: 1; min-width: 0; } .vf-order-view-webfile .vf-order-case-correct-btn { grid-column: 2; grid-row: 1; display: flex; align-items: center; justify-content: center; gap: 0.4rem; min-width: 0; min-height: 2.2rem; margin: 0; padding: 0.32rem 0.4rem; border: 1px solid var(--vf-border); border-radius: var(--vf-radius-md); background: var(--vf-surface-2); color: var(--vf-danger); font-size: 0.72rem; font-weight: 700; line-height: 1.2; text-align: center; cursor: pointer; } .vf-order-view-webfile .vf-order-case-correct-toggle:checked + .vf-order-case-correct-btn { border-color: color-mix(in srgb, var(--vf-danger) 45%, var(--vf-border)); background: color-mix(in srgb, var(--vf-danger) 8%, var(--vf-surface-2)); } .vf-order-view-webfile .vf-order-case-correct-form { display: none; grid-column: 1 / -1; grid-row: 2; min-width: 0; width: 100%; margin: 0; padding: 0.5rem 0.55rem 0.6rem; border: 1px solid var(--vf-border); border-radius: var(--vf-radius-md); background: var(--vf-surface-2); } .vf-order-view-webfile .vf-order-case-correct-toggle:checked ~ .vf-order-case-correct-form { display: block; } .vf-order-view-links { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; } .vf-order-view-links > span { color: var(--vf-text-muted); font-size: 0.72rem; font-weight: 750; margin-right: 0.2rem; } .vf-order-view-fold { margin: 0; border-top: 1px solid var(--vf-border); } .vf-order-view-block + .vf-order-view-fold { border-top: 0; } .vf-order-view-fold summary { display: flex; align-items: center; gap: 0.4rem; padding: 0.65rem 0.85rem; cursor: pointer; font-size: 0.82rem; font-weight: 750; color: var(--vf-text); list-style: none; } .vf-order-view-fold summary::-webkit-details-marker { display: none; } .vf-order-view-fold[open] summary { border-bottom: 1px solid var(--vf-border); } .vf-order-view-docs { padding: 0.65rem 0.85rem 0.8rem; } .vf-order-view-docs.has-divider { border-bottom: 1px solid var(--vf-border); } @media (max-width: 1199.98px) { .vf-order-checkout-split { grid-template-columns: 1fr; } .vf-order-checkout-stage, .vf-order-checkout-stage .vf-order-case-slot.is-active, .vf-order-checkout-body { display: flex; flex-direction: column; grid-column: auto; grid-template-columns: none; } .vf-order-checkout-appl, .vf-order-checkout-files, .vf-order-checkout-fees { grid-column: auto; grid-row: auto; } .vf-order-checkout-appl, .vf-order-checkout-files { border-right: 0; border-bottom: 1px solid var(--vf-border); } } @media (max-width: 991.98px) { .vf-order-checkout-split, .vf-order-view-split { grid-template-columns: 1fr; min-height: 0; } .vf-order-checkout-fees, .vf-order-view-webfile { min-width: 0; height: auto; border-left: 0; } .vf-order-view-webfile { border-top: 1px solid var(--vf-border); } .vf-order-case.vf-order-view .vf-order-view-webfile .vf-webfile-frame { flex: none; height: min(50vh, 22rem); min-height: 16rem; } } @media (max-width: 767.98px) { .vf-appl-view { grid-template-columns: 1fr; grid-template-areas: "travel" "work" "address"; } .vf-order-checkout .vf-appl-previews { grid-template-columns: 1fr; grid-template-areas: "travel" "work" "address"; } .vf-order-checkout .vf-appl-address.is-travel .vf-appl-preview-lines { grid-template-columns: repeat(2, minmax(0, 1fr)); } .vf-order-view-appl .vf-appl-read.is-icons { grid-template-columns: 1fr; } .vf-order-checkout-files .vf-doc-grid.is-row { display: flex; overflow-x: auto; } .vf-order-checkout-files .vf-doc-tile { flex: 0 0 7.25rem; min-width: 7.25rem; max-width: 7.25rem; height: auto; } } .vf-chat-dock { position: fixed; right: 1.05rem; bottom: 1.05rem; z-index: 60; width: 3.15rem; height: 3.15rem; } .vf-chat-dock.is-open { width: min(21rem, calc(100vw - 1.4rem)); height: min(27rem, calc(100dvh - 5.25rem)); } .vf-chat-dock-toggle { position: relative; width: 3.15rem; height: 3.15rem; display: inline-flex; align-items: center; justify-content: center; margin: 0; padding: 0; border: 1px solid color-mix(in srgb, var(--vf-primary) 35%, var(--vf-border)); border-radius: 50%; background: var(--vf-primary); color: var(--vf-text-inverse); appearance: none; box-shadow: var(--vf-shadow-lg); cursor: pointer; } .vf-chat-dock-toggle .fa-duotone { font-size: 1.15rem; --fa-primary-color: currentColor; --fa-secondary-color: currentColor; --fa-secondary-opacity: 0.55; } .vf-chat-dock-toggle:focus-visible { outline: 2px solid var(--vf-primary); outline-offset: 3px; } .vf-chat-dock.is-open .vf-chat-dock-toggle { display: none; } .vf-chat-dock-badge { position: absolute; top: -0.15rem; right: -0.15rem; min-width: 1.15rem; height: 1.15rem; display: inline-flex; align-items: center; justify-content: center; padding: 0 0.25rem; border: 2px solid var(--vf-surface-1); border-radius: 999px; background: var(--vf-danger); color: var(--vf-text-inverse); font-size: 0.64rem; font-weight: 800; line-height: 1; } .vf-chat-dock-panel { position: absolute; inset: 0; display: none; width: 100%; height: 100%; overflow: hidden; border: 1px solid var(--vf-border); border-radius: 1rem; background: var(--vf-surface-1); box-shadow: var(--vf-shadow-lg); } .vf-chat-dock.is-open .vf-chat-dock-panel { display: flex; flex-direction: column; animation: vf-chat-dock-in 0.16s ease-out; } .vf-chat-card.is-dock { display: flex; flex-direction: column; flex: 1; min-width: 0; min-height: 0; height: 100%; margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; overflow: hidden; } .vf-chat-head { display: flex; align-items: center; gap: 0.45rem; flex-shrink: 0; padding: 0.5rem 0.55rem 0.5rem 0.6rem; border-bottom: 1px solid var(--vf-border); background: var(--vf-surface-2); } .vf-chat-head-ico { width: 1.8rem; height: 1.8rem; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; border-radius: 0.5rem; background: var(--vf-primary-soft); color: var(--vf-primary); font-size: 0.82rem; } .vf-chat-head-copy { min-width: 0; flex: 1; } .vf-chat-head-copy strong { display: block; font-size: 0.82rem; font-weight: 750; line-height: 1.2; } .vf-chat-head-copy small { display: block; overflow: hidden; color: var(--vf-text-muted); font-size: 0.66rem; font-weight: 650; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; } .vf-chat-card.is-dock .vf-chat-live { width: 0.5rem; height: 0.5rem; flex-shrink: 0; overflow: hidden; color: transparent; font-size: 0; } .vf-chat-card.is-dock .vf-chat-live::before { width: 0.5rem; height: 0.5rem; } .vf-chat-card.is-dock .vf-chat-thread { flex: 1; max-height: none; min-height: 0; gap: 0.4rem; margin: 0; padding: 0.55rem 0.6rem; } .vf-chat-card.is-dock .vf-chat-empty { flex: 1; min-height: 0; padding: 0.6rem; font-size: 0.76rem; } .vf-chat-card.is-dock .vf-chat-empty i { font-size: 1.15rem; } .vf-chat-card.is-dock .vf-chat-bubble { max-width: 92%; padding: 0.38rem 0.55rem; border-radius: 0.7rem; } .vf-chat-card.is-dock .vf-chat-bubble header { margin-bottom: 0.06rem; gap: 0.4rem; } .vf-chat-card.is-dock .vf-chat-bubble header strong { font-size: 0.68rem; } .vf-chat-card.is-dock .vf-chat-bubble header time { font-size: 0.64rem; } .vf-chat-card.is-dock .vf-chat-bubble p { font-size: 0.8rem; line-height: 1.35; } .vf-chat-card.is-dock .vf-chat-composer { margin: 0; padding: 0.45rem 0.55rem 0.55rem; gap: 0.35rem; } .vf-chat-card.is-dock .vf-chat-composer textarea { min-height: 2.3rem; padding: 0.42rem 0.7rem; font-size: 0.8rem; } .vf-chat-card.is-dock .vf-chat-composer .btn, .vf-chat-dock .vf-chat-composer .btn { display: inline-grid; flex: 0 0 2.3rem; width: 2.3rem; min-width: 2.3rem; height: 2.3rem; min-height: 2.3rem; padding: 0; } .vf-chat-card.is-dock .vf-chat-error { margin: 0; padding: 0 0.6rem 0.45rem; font-size: 0.72rem; } .vf-chat-dock-x { width: 1.7rem; height: 1.7rem; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; margin: 0; padding: 0; border: 1px solid var(--vf-border); border-radius: 0.45rem; background: var(--vf-surface-1); color: var(--vf-text-muted); appearance: none; cursor: pointer; } .vf-chat-dock-x:hover { color: var(--vf-text); border-color: var(--vf-border-strong); } @keyframes vf-chat-dock-in { from { opacity: 0; transform: translateY(6px) scale(0.98); } to { opacity: 1; transform: none; } } @media (max-width: 575.98px) { .vf-chat-dock { right: 0.75rem; bottom: 0.75rem; } .vf-chat-dock.is-open { width: calc(100vw - 1.1rem); height: min(28rem, calc(100dvh - 5rem)); } } .vf-flow-steps { display: flex; flex-wrap: wrap; gap: 0.5rem; list-style: none; padding: 0; margin: 0 0 1.5rem; } .vf-flow-step { display: flex; align-items: center; } .vf-flow-step + .vf-flow-step::before { content: ''; width: 1.25rem; height: 1px; margin-right: 0.5rem; background: var(--vf-border-strong); } .vf-flow-step a, .vf-flow-step span { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.4rem 0.85rem; border-radius: 999px; font-size: 0.8rem; font-weight: 600; border: 1px solid var(--vf-border); background: var(--vf-surface-1); color: var(--vf-text-muted); text-decoration: none; } .vf-flow-step i { font-size: 0.9rem; } .vf-flow-step.is-active a, .vf-flow-step.is-active span { border-color: var(--vf-primary); background: var(--vf-primary-soft); color: var(--vf-primary); } .vf-flow-step.is-done a, .vf-flow-step.is-done span { border-color: var(--vf-success-soft); color: var(--vf-success-text); background: var(--vf-success-soft); } .vf-flow-step.is-warn a, .vf-flow-step.is-warn span { border-color: color-mix(in srgb, var(--vf-warning) 40%, var(--vf-border)); background: color-mix(in srgb, var(--vf-warning) 12%, var(--vf-surface-1)); color: var(--vf-warning-text); } .vf-flow-step a:hover { border-color: var(--vf-primary); color: var(--vf-primary); } .vf-page-hero { display: flex; flex-direction: column; align-items: stretch; gap: 1.15rem; margin: 0 0 1.25rem; padding: 1.35rem 1.5rem 1.2rem; border: 1px solid var(--vf-border); border-radius: var(--vf-radius); background: radial-gradient(380px 150px at 0% 0%, color-mix(in srgb, var(--vf-primary) 18%, transparent), color-mix(in srgb, var(--vf-hue-teal) 10%, transparent) 42%, transparent 72%), var(--vf-surface-1); box-shadow: var(--vf-shadow-sm); } .vf-order-docs.vf-order-case, .vf-order-checkout.vf-order-case, .vf-order-pay.vf-order-case, .vf-order-view.vf-order-case, .vf-order-create.vf-order-case { gap: 0.4rem; } .vf-order-docs.vf-order-case .vf-page-hero, .vf-order-checkout.vf-order-case .vf-page-hero, .vf-order-pay.vf-order-case .vf-page-hero, .vf-order-view.vf-order-case .vf-page-hero, .vf-order-create.vf-order-case .vf-page-hero { margin: 0; padding: 0.4rem 0.7rem; gap: 0; } .vf-page-hero-top { display: flex; align-items: center; justify-content: flex-start; flex-wrap: wrap; gap: 1.1rem; width: 100%; } .vf-page-hero-icon { width: 4.35rem; height: 4.35rem; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; border-radius: 1.2rem; background: transparent; color: var(--vf-icon); font-size: 1.9rem; } .vf-page-hero-copy { flex: 1; min-width: 0; } .vf-page-hero-copy h1 { margin: 0; font-size: 1.35rem; font-weight: 750; letter-spacing: -0.02em; line-height: 1.25; } .vf-page-hero-heading { display: flex; align-items: center; flex-wrap: wrap; gap: 0.4rem 0.55rem; min-width: 0; } .vf-page-hero-heading h1 { margin: 0; } .vf-page-hero-badge { flex-shrink: 0; padding: 0.22rem 0.55rem; border-radius: 999px; font-size: 0.72rem; font-weight: 750; line-height: 1.2; } .vf-page-hero-copy p { margin: 0.3rem 0 0; color: var(--vf-text-muted); font-size: 0.88rem; line-height: 1.45; } .vf-page-hero-action { display: inline-flex; align-items: center; gap: 0.4rem; flex-shrink: 0; min-height: 2.55rem; padding: 0.5rem 1.15rem; border-radius: 0.7rem; font-weight: 700; } .vf-page-hero-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 0.65rem; margin-left: auto; } .vf-page-hero-facts { width: 100%; padding-top: 0.85rem; border-top: 1px solid var(--vf-border); } .vf-page-hero .vf-flow-steps { justify-content: center; width: 100%; margin: 0; padding-top: 0.15rem; } .vf-page-hero .vf-flow-step + .vf-flow-step::before { width: 2.4rem; } .vf-page-hero .vf-flow-step a, .vf-page-hero .vf-flow-step span { background: var(--vf-surface-2); padding: 0.48rem 1rem; } .vf-order-case .vf-page-hero-meta .vf-flow-steps { width: auto; justify-content: flex-start; padding: 0; } .vf-order-case .vf-page-hero-meta .vf-flow-step span, .vf-order-case .vf-page-hero-meta .vf-flow-step a { padding: 0.18rem 0.5rem; font-size: 0.68rem; } .vf-order-case .vf-page-hero-meta .vf-flow-step + .vf-flow-step::before { width: 0.85rem; margin-right: 0.35rem; } @media (max-width: 575.98px) { .vf-page-hero { padding: 1.1rem 1rem 1rem; } .vf-page-hero-icon { width: 3.6rem; height: 3.6rem; font-size: 1.55rem; border-radius: 1rem; } .vf-page-hero .vf-flow-step + .vf-flow-step::before { width: 1.1rem; } } .vf-checkout-card-head { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; margin-bottom: 1rem; } .vf-checkout-card-head .fa-duotone { margin-right: 0.15rem; } .vf-checkout-card { padding: 1.25rem 1.35rem; } .vf-checkout-section-head { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; margin: 0 0 0.85rem; } .vf-checkout-section-head h5 { display: flex; align-items: center; margin: 0; font-size: 1.05rem; font-weight: 750; } .vf-checkout .vf-applicant-card { border-left: 3px solid var(--vf-hue-navy); padding: 1.05rem 1.2rem 1.15rem; } .vf-checkout .vf-applicant-card .vf-slot-block-head { margin-bottom: 0.7rem; } .vf-checkout .vf-applicant-card .vf-appl-read { margin-bottom: 0.85rem; } .vf-checkout .vf-applicant-card .vf-section-label { margin-top: 0.1rem; } .vf-meta-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 0.7rem; align-items: stretch; } .vf-meta-item { display: flex; gap: 0.65rem; align-items: center; min-width: 0; height: 100%; padding: 0.75rem 0.8rem; border: 1px solid var(--vf-border); border-radius: var(--vf-radius-md); background: color-mix(in srgb, var(--vf-icon-soft) 70%, var(--vf-surface-2)); } .vf-meta-item > i { width: 2.15rem; height: 2.15rem; display: inline-flex; align-items: center; justify-content: center; border-radius: 0.6rem; background: var(--vf-icon-soft); color: var(--vf-icon); flex-shrink: 0; } .vf-meta-item > div { min-width: 0; flex: 1; } .vf-meta-item span { display: block; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--vf-text-muted); } .vf-meta-item strong { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-top: 0.12rem; font-size: 0.88rem; line-height: 1.3; word-break: break-word; } @media (max-width: 767.98px) { .vf-checkout .vf-meta-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .vf-doc-grid.is-row .vf-doc-tile { flex: 0 0 7.5rem; min-width: 7.5rem; max-width: 7.5rem; } .vf-page-hero-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } .vf-page-hero-actions { width: 100%; margin-left: 0; } } .vf-slot-block.has-divider { margin-bottom: 1.25rem; padding-bottom: 1.25rem; border-bottom: 1px solid var(--vf-border); } .vf-slot-block-head { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; margin-bottom: 0.85rem; } .vf-slot-count { font-size: 0.75rem; color: var(--vf-text-muted); } .vf-order-aside { display: flex; flex-direction: column; gap: 1rem; } .vf-summary-card { position: sticky; top: 1rem; padding: 1.25rem 1.35rem; } .vf-fee-list { display: flex; flex-direction: column; gap: 0.55rem; margin-bottom: 0.75rem; } .vf-fee-row { display: flex; align-items: center; gap: 0.7rem; margin: 0; padding: 0.75rem 0.8rem; border: 1px solid var(--vf-border); border-radius: var(--vf-radius-md); background: var(--vf-surface-2); font-size: 0.9rem; } .vf-fee-row.is-service { border-color: color-mix(in srgb, var(--vf-primary) 26%, var(--vf-border)); background: color-mix(in srgb, var(--vf-primary-soft) 70%, var(--vf-surface-2)); } .vf-fee-row.is-working { border-color: color-mix(in srgb, var(--vf-hue-teal) 30%, var(--vf-border)); background: color-mix(in srgb, var(--vf-hue-teal-soft) 75%, var(--vf-surface-2)); } .vf-fee-row.is-working .vf-fee-ico { background: var(--vf-hue-teal-soft); color: var(--vf-hue-teal); } .vf-fee-ico { width: 2.05rem; height: 2.05rem; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; border-radius: 0.55rem; background: var(--vf-primary-soft); color: var(--vf-primary); } .vf-fee-copy { flex: 1; min-width: 0; } .vf-fee-copy strong { display: block; font-size: 0.84rem; font-weight: 700; line-height: 1.25; } .vf-fee-copy small, .vf-fee-row small { display: block; width: auto; padding: 0; margin-top: 0.12rem; color: var(--vf-text-muted); font-size: 0.72rem; } .vf-fee-row .vf-money { flex-shrink: 0; font-weight: 750; font-size: 0.92rem; } .vf-fee-total { display: flex; justify-content: space-between; align-items: center; gap: 0.75rem; margin: 0 0 0.9rem; padding: 0.9rem 1rem; border: 1px solid color-mix(in srgb, var(--vf-primary) 28%, var(--vf-border)); border-radius: var(--vf-radius-md); background: var(--vf-primary-soft); color: var(--vf-primary); font-size: 1.02rem; font-weight: 650; } .vf-fee-total .vf-money { font-size: 1.12rem; font-weight: 800; } .vf-fee-note { display: flex; align-items: flex-start; gap: 0.45rem; margin: 0 0 0.55rem; color: var(--vf-text-muted); font-size: 0.78rem; line-height: 1.45; } .vf-fee-note i { margin-top: 0.12rem; color: var(--vf-primary); } .vf-fee-note.is-refund { margin-bottom: 1rem; } .vf-fee-note.is-refund i { color: var(--vf-success-text); } .vf-doc-grid { display: flex; align-items: stretch; gap: 0.65rem; overflow-x: auto; padding-bottom: 0.15rem; scrollbar-width: thin; } .vf-doc-grid.is-row { display: flex; flex-wrap: nowrap; align-items: stretch; gap: 0.5rem; overflow-x: auto; overflow-y: hidden; } .vf-doc-grid.is-row .vf-doc-tile { flex: 1 1 0; min-width: 0; max-width: none; padding: 0.3rem; background: var(--vf-surface-2); box-shadow: none; } .vf-doc-grid.is-row .vf-doc-tile:hover { box-shadow: none; } .vf-doc-grid.is-row .vf-doc-tile-preview, .vf-doc-grid.is-row .vf-doc-tile-preview.is-pdf, .vf-doc-grid.is-row .vf-doc-tile-preview.is-image, .vf-doc-grid.is-row .vf-doc-tile-preview.is-file { flex: 0 0 6.5rem; width: 100%; height: 6.5rem; min-height: 6.5rem; aspect-ratio: auto; border-radius: var(--vf-radius-sm); } .vf-doc-grid.is-row .vf-doc-tile-preview img { object-fit: cover; } .vf-doc-grid.is-row .vf-doc-tile-preview iframe { inset: auto; top: 0; left: 0; width: 170%; height: 170%; transform: scale(0.59); transform-origin: top left; } .vf-doc-grid.is-row .vf-doc-tile-badge { top: 0.3rem; left: 0.3rem; padding: 0.16rem 0.34rem; font-size: 0; gap: 0; } .vf-doc-grid.is-row .vf-doc-tile-badge i { font-size: 0.68rem; } .vf-doc-grid.is-row .vf-doc-tile-meta { min-height: 0; padding: 0.35rem 0.15rem 0.05rem; gap: 0.05rem; } .vf-doc-grid.is-row .vf-doc-tile-name { font-size: 0.74rem; line-height: 1.25; } .vf-doc-grid.is-row .vf-doc-tile-open { display: none; } .vf-doc-grid.is-board { display: grid; grid-template-columns: repeat(var(--docs-cols, 2), minmax(0, 1fr)); overflow: visible; } .vf-order-case .vf-doc-grid.is-board { display: grid; flex-wrap: unset; } .vf-doc-empty { display: flex; align-items: center; gap: 0.5rem; padding: 1rem; border: 1px dashed var(--vf-border); border-radius: var(--vf-radius-md); color: var(--vf-text-muted); } .vf-doc-tile { display: flex; flex-direction: column; flex: 1 1 0; min-width: 8rem; max-width: 100%; padding: 0.4rem; overflow: hidden; border: 1px solid var(--vf-border); border-radius: var(--vf-radius-md); background: var(--vf-surface-1); color: inherit; text-decoration: none; transition: border-color 0.15s ease, box-shadow 0.15s ease; } .vf-doc-tile:hover { border-color: var(--vf-primary); box-shadow: var(--vf-shadow-sm); color: inherit; } .vf-doc-tile-preview, .vf-doc-tile-preview.is-pdf, .vf-doc-tile-preview.is-image, .vf-doc-tile-preview.is-file { position: relative; flex: 0 0 7.5rem; height: 7.5rem; min-height: 7.5rem; aspect-ratio: auto; overflow: hidden; border: 1px solid var(--vf-border-strong); border-radius: 0.55rem; background: var(--vf-surface-2); color: var(--vf-text-muted); } .vf-doc-tile-preview.is-pdf { background: var(--vf-paper); } .vf-doc-tile-preview img, .vf-doc-tile-preview iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; pointer-events: none; } .vf-doc-tile-preview img { object-fit: cover; } .vf-doc-tile-preview iframe { height: 100%; transform: none; transform-origin: top center; background: var(--vf-paper); object-fit: cover; } .vf-doc-tile-fallback { position: absolute; inset: 0; z-index: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.35rem; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--vf-danger-text); background: var(--vf-danger-soft); } .vf-doc-tile-fallback i { font-size: 1.45rem; } .vf-doc-tile-preview.is-pdf .vf-doc-tile-fallback, .vf-doc-tile-preview.is-file .vf-doc-tile-fallback { color: var(--vf-text-muted); background: var(--vf-surface-2); } .vf-doc-tile-badge { position: absolute; top: 0.45rem; left: 0.45rem; z-index: 2; display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.15rem 0.4rem; border-radius: 999px; background: rgba(21, 32, 56, 0.72); color: var(--vf-paper); font-size: 0.65rem; font-weight: 700; letter-spacing: 0.03em; } .vf-doc-tile-hit { position: absolute; inset: 0; z-index: 3; overflow: hidden; text-indent: -999px; } button.vf-doc-tile-hit, button.vf-doc-tile-open { border: 0; background: transparent; cursor: pointer; font: inherit; } button.vf-doc-tile-hit { padding: 0; color: transparent; } button.vf-doc-tile-open { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0; text-align: left; } .vf-doc-tile-meta { display: flex; flex-direction: column; gap: 0.12rem; padding: 0.5rem 0.2rem 0.2rem; min-height: 4.1rem; } .vf-doc-tile-name, .vf-doc-tile-file { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .vf-doc-tile-name { font-size: 0.82rem; font-weight: 600; } .vf-doc-tile-file { font-size: 0.7rem; color: var(--vf-text-muted); } .vf-doc-tile-open { margin-top: 0.25rem; font-size: 0.72rem; font-weight: 600; color: var(--vf-primary); text-decoration: none; } .vf-doc-tile-open:hover { text-decoration: underline; color: var(--vf-primary-hover); } .vf-upload-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem; margin-bottom: 1rem; } .vf-upload-slots { display: flex; flex-wrap: wrap; gap: 0.5rem; } .vf-upload-slot { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.4rem 0.85rem; border-radius: 999px; border: 1px solid var(--vf-border); background: var(--vf-surface-1); color: var(--vf-text-muted); font-size: 0.82rem; font-weight: 650; text-decoration: none; transition: border-color 0.18s ease, color 0.18s ease, background 0.18s ease, transform 0.18s ease; } .vf-upload-slot:hover { border-color: var(--vf-hue-sky); color: var(--vf-hue-sky); background: var(--vf-hue-sky-soft); transform: translateY(-1px); } .vf-upload-slot.is-active { border-color: var(--vf-hue-navy); background: var(--vf-hue-navy-soft); color: var(--vf-hue-navy); } .vf-upload-slot.is-complete:not(.is-active) { border-color: color-mix(in srgb, var(--vf-success) 40%, var(--vf-border)); color: var(--vf-success-text); background: var(--vf-success-soft); } .vf-upload-active { display: flex; flex-wrap: wrap; align-items: center; gap: 0.85rem 1rem; margin-bottom: 1.15rem; padding: 0.95rem 1.05rem; border: 1px solid color-mix(in srgb, var(--vf-hue-sky) 28%, var(--vf-border)); border-radius: var(--vf-radius-md); background: radial-gradient(360px 120px at 0% 0%, color-mix(in srgb, var(--vf-hue-sky) 16%, transparent), transparent 70%), var(--vf-surface-1); } .vf-upload-active-copy { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.35rem 0.65rem; flex: 1; min-width: 0; } .vf-upload-active-copy span { color: var(--vf-text-muted); font-size: 0.86rem; } .vf-upload-count { font-weight: 700; color: var(--vf-hue-sky) !important; } .vf-upload-meter { flex: 1 1 10rem; height: 0.45rem; overflow: hidden; border-radius: 999px; background: var(--vf-surface-3); } .vf-upload-meter span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--vf-hue-sky), var(--vf-hue-teal)); transition: width 0.35s ease; } .vf-upload-grid { display: flex; align-items: stretch; gap: 0.65rem; overflow-x: auto; padding-bottom: 0.15rem; scrollbar-width: thin; } .vf-upload-card { display: flex; flex-direction: column; flex: 1 1 0; min-width: 9.25rem; max-width: 100%; padding: 0.6rem; border: 1px solid color-mix(in srgb, var(--vf-hue-sky) 22%, var(--vf-border)); border-radius: var(--vf-radius-md); background: radial-gradient(80% 60% at 0% 0%, color-mix(in srgb, var(--vf-hue-sky) 12%, transparent), transparent 70%), var(--vf-surface-1); box-shadow: var(--vf-shadow-sm); animation: vf-upload-in 0.45s ease both; animation-delay: var(--upload-delay, 0ms); transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease; } .vf-upload-card:hover { border-color: var(--vf-primary); box-shadow: var(--vf-shadow-md); transform: translateY(-2px); } .vf-upload-card.is-dragover { border-color: var(--vf-primary); background: var(--vf-primary-soft); transform: scale(1.01); } .vf-upload-card.is-done { border-color: color-mix(in srgb, var(--vf-success) 45%, var(--vf-border)); background: radial-gradient(80% 60% at 0% 0%, color-mix(in srgb, var(--vf-success) 14%, transparent), transparent 70%), var(--vf-surface-1); } .vf-upload-card.is-panel { min-width: 0; max-width: none; flex: none; width: 100%; } .vf-upload-card.is-panel:hover { transform: none; } .vf-upload-card.is-panel .vf-upload-preview, .vf-upload-card.is-panel .vf-upload-preview.is-pdf { flex-basis: 14rem; height: 14rem; min-height: 14rem; } .vf-webfile-frame > .vf-upload-preview, .vf-webfile-frame > .vf-upload-preview.is-pdf, .vf-webfile-frame .vf-upload-preview, .vf-webfile-frame .vf-upload-preview.is-pdf, .vf-order-desk-webfile .vf-upload-card.is-panel .vf-upload-preview, .vf-order-desk-webfile .vf-upload-card.is-panel .vf-upload-preview.is-pdf { flex: 1 1 auto; flex-basis: auto; height: auto; min-width: 0; max-width: 100%; min-height: 0; overflow: hidden; } .vf-upload-card.is-panel.is-compact { padding: 0; border: 0; background: transparent; box-shadow: none; animation: none; min-width: 0; } .vf-upload-card.is-panel.is-compact:hover { transform: none; box-shadow: none; border-color: transparent; background: transparent; } .vf-upload-card.is-panel.is-compact .vf-upload-card-head, .vf-upload-card.is-panel.is-compact .vf-upload-card-foot { display: none; } .vf-upload-card.is-panel.is-compact .vf-upload-preview, .vf-upload-card.is-panel.is-compact .vf-upload-preview.is-pdf, .vf-order-desk-appt .vf-upload-card.is-panel.is-compact .vf-upload-preview, .vf-order-desk-appt .vf-upload-card.is-panel.is-compact .vf-upload-preview.is-pdf { position: relative; display: flex; align-items: center; flex: none; flex-basis: auto; height: auto; min-height: 0; border-style: dashed; } .vf-upload-card.is-panel.is-compact .vf-upload-empty { position: static; inset: auto; flex-direction: row; justify-content: flex-start; gap: 0.4rem; padding: 0.4rem 0.5rem; font-size: 0.74rem; font-weight: 700; } @media (max-width: 1199.98px) { .vf-webfile-frame > .vf-upload-preview, .vf-webfile-frame > .vf-upload-preview.is-pdf, .vf-order-desk-webfile .vf-upload-card.is-panel .vf-upload-preview, .vf-order-desk-webfile .vf-upload-card.is-panel .vf-upload-preview.is-pdf { flex: 0 0 14rem; flex-basis: 14rem; height: 14rem; min-height: 14rem; } .vf-order-case .vf-webfile-frame > .vf-upload-preview, .vf-order-case .vf-webfile-frame > .vf-upload-preview.is-pdf { flex: 1 1 auto; flex-basis: auto; height: auto; min-height: 0; } } .vf-section-label { display: flex; align-items: center; gap: 0.45rem; margin: 0 0 0.75rem; color: var(--vf-text-muted); font-size: 0.78rem; font-weight: 750; letter-spacing: 0.04em; text-transform: uppercase; } .vf-applicant-card.is-pending_review { border-left: 3px solid var(--vf-warning); } .vf-applicant-card.is-correction_requested { border-left: 3px solid var(--vf-danger); } .vf-applicant-card.is-confirmed { border-left: 3px solid var(--vf-success); } .vf-checkout-card.is-locked { background: var(--vf-surface-2); } .vf-upload-card-head { display: flex; align-items: center; gap: 0.45rem; margin-bottom: 0.4rem; min-width: 0; } .vf-upload-card-icon { width: 1.7rem; height: 1.7rem; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; border-radius: 0.45rem; background: transparent; color: var(--vf-icon); font-size: 0.8rem; } .vf-upload-card-title { display: flex; align-items: center; gap: 0.35rem; min-width: 0; flex: 1; } .vf-upload-card-title h6 { margin: 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.8rem; line-height: 1.25; } .vf-upload-card-title .badge { flex-shrink: 0; font-size: 0.58rem; padding: 0.18em 0.45em; } .vf-upload-card-help { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; margin: 0 0 0.45rem; font-size: 0.72rem; color: var(--vf-text-muted); line-height: 1.35; } .vf-upload-drop { position: relative; display: flex; flex-direction: column; flex: 1; margin: 0; min-height: 0; cursor: pointer; } .vf-upload-card > form { display: flex; flex-direction: column; flex: 1; min-height: 0; } .vf-upload-preview, .vf-upload-preview.is-pdf { position: relative; flex: 1 0 7.25rem; overflow: hidden; height: 7.25rem; min-height: 7.25rem; aspect-ratio: auto; border: 1px solid var(--vf-border-strong); border-radius: 0.55rem; background: var(--vf-surface-2); transition: border-color 0.2s ease, background 0.2s ease; } .vf-upload-preview.is-pdf { background: var(--vf-paper); } .vf-upload-card:not(.is-done) .vf-upload-preview { border-style: dashed; } .vf-upload-preview img, .vf-upload-preview iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; object-fit: cover; } .vf-upload-preview iframe { background: var(--vf-paper); pointer-events: none; } .vf-webfile-frame > .vf-upload-preview, .vf-webfile-frame > .vf-upload-preview.is-pdf, .vf-webfile-frame .vf-upload-preview, .vf-webfile-frame .vf-upload-preview.is-pdf { flex: 1 1 auto; flex-basis: auto; height: auto; min-height: 0; border: 0; border-radius: 0; background: var(--vf-paper); } .vf-webfile-frame .vf-upload-preview iframe, .vf-webfile-frame > .vf-upload-preview iframe { pointer-events: auto; object-fit: contain; } .vf-order-case .vf-webfile-frame { display: flex; flex-direction: column; flex: none; overflow: hidden; height: min(58vh, 36rem); min-height: 22rem; } .vf-order-case .vf-order-case-receipt { height: min(28vh, 16rem); min-height: 12rem; } .vf-upload-empty { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.3rem; padding: 0.45rem; color: var(--vf-text-muted); text-align: center; font-size: 0.68rem; font-weight: 650; line-height: 1.25; } .vf-upload-empty span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .vf-upload-empty i { font-size: 1.25rem; color: var(--vf-primary); animation: vf-upload-float 2.4s ease-in-out infinite; } .vf-upload-busy { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; gap: 0.45rem; border-radius: var(--vf-radius-md); background: color-mix(in srgb, var(--vf-surface-1) 72%, transparent); color: var(--vf-primary); font-weight: 700; font-size: 0.86rem; z-index: 2; } .vf-upload-card.is-uploading .vf-upload-busy { display: flex; } .vf-upload-card-foot { display: flex; flex-direction: column; gap: 0.2rem; margin-top: 0.4rem; font-size: 0.64rem; color: var(--vf-text-muted); } .vf-upload-card-foot > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .vf-upload-file { color: var(--vf-success-text); font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .vf-upload-file a { color: var(--vf-primary); text-decoration: none; } .vf-upload-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 0.6rem; margin-top: 1.15rem; padding-top: 1rem; border-top: 1px solid var(--vf-border); } .vf-upload-actions .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.45rem; min-height: 2.55rem; padding: 0.5rem 1.15rem; border-radius: 0.7rem; font-size: 0.88rem; font-weight: 700; line-height: 1.2; } .vf-upload-actions .btn i { font-size: 0.92rem; } .vf-upload-actions .btn-primary { padding-inline: 1.25rem; box-shadow: var(--vf-shadow-sm); } .vf-upload-actions .btn-primary:hover { box-shadow: var(--vf-shadow-md); } .vf-upload-actions .btn-outline-secondary { background: var(--vf-surface-1); } .vf-appl-form { overflow: visible; border-color: color-mix(in srgb, var(--vf-hue-navy) 22%, var(--vf-border)); background: radial-gradient(420px 160px at 0% 0%, color-mix(in srgb, var(--vf-hue-navy) 14%, transparent), transparent 70%), var(--vf-surface-1); } .vf-appl-form .vf-create-hint { margin: 0 0 1.1rem; color: var(--vf-text-muted); } .vf-appl-form .form-label { font-weight: 700; color: var(--vf-text); } .vf-appl-form .form-control { min-height: 3rem; border-radius: 0.75rem; font-weight: 650; } .vf-appl-selects { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.75rem 0.85rem; margin-bottom: 1.15rem; } .vf-appl-selects .vf-select { width: 100%; } .vf-appl-medical { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 0.75rem 0.85rem; margin-bottom: 1.15rem; } .vf-appl-medical .vf-appl-group { grid-column: 1 / -1; margin: 0; } .vf-appl-medical-note { grid-column: 1 / -1; margin: -0.35rem 0 0; color: var(--vf-text-muted); font-size: 0.8rem; line-height: 1.35; } .vf-appl-medical .vf-select { width: 100%; } .vf-appl-group { display: inline-flex; align-items: center; gap: 0.4rem; margin: 0.15rem 0 -0.15rem; color: var(--vf-hue-sky); font-size: 0.78rem; font-weight: 750; letter-spacing: 0.04em; text-transform: uppercase; } .vf-appl-group i { font-size: 0.85rem; } .vf-appl-address-open { display: flex; flex-direction: column; align-items: stretch; gap: 0.4rem; width: 100%; min-width: 0; height: 100%; min-height: 0; overflow: hidden; margin: 0; padding: 0.55rem 0.6rem 0.5rem; border: 1px solid color-mix(in srgb, var(--vf-appl-accent, var(--vf-border)) 28%, var(--vf-border)); border-radius: var(--vf-radius-md); background: radial-gradient(120% 80% at 0% 0%, var(--vf-appl-tint, transparent), transparent 68%), var(--vf-surface-1); box-shadow: var(--vf-shadow-sm); color: var(--vf-text); font-size: 0.82rem; font-weight: 700; text-align: left; cursor: pointer; transition: border-color 0.2s ease, box-shadow 0.2s ease; } .vf-appl-preview-head { display: flex; align-items: center; gap: 0.4rem; min-width: 0; padding-bottom: 0.4rem; border-bottom: 1px solid var(--vf-border); font-size: 0.76rem; font-weight: 800; line-height: 1.25; } .vf-appl-preview-ico { width: 1.6rem; height: 1.6rem; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; border-radius: 0.42rem; background: color-mix(in srgb, var(--vf-appl-accent, var(--vf-primary)) 16%, transparent); color: var(--vf-appl-accent, var(--vf-primary)); font-size: 0.74rem; } .vf-appl-preview-name { flex: 1 1 auto; min-width: 0; } .vf-appl-preview-go { flex-shrink: 0; color: var(--vf-text-muted); font-size: 0.62rem; } .vf-appl-preview-lines { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0.4rem 0.55rem; margin: 0; padding: 0.05rem 0 0; list-style: none; width: 100%; min-width: 0; } .vf-appl-preview-lines li { display: flex; flex-direction: column; align-items: stretch; gap: 0.08rem; min-width: 0; max-width: 100%; overflow: hidden; padding: 0; font-size: 0.72rem; font-weight: 650; line-height: 1.3; } .vf-appl-preview-lines em, .vf-appl-preview-lines strong { display: block; width: 100%; max-width: 100%; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .vf-appl-preview-lines em { color: var(--vf-text-muted); font-style: normal; font-size: 0.62rem; font-weight: 750; letter-spacing: 0.02em; text-transform: uppercase; } .vf-appl-preview-lines strong { font-weight: 750; } .vf-appl-preview-lines strong.is-empty { color: var(--vf-text-muted); font-weight: 650; } .vf-appl-address-open:hover { border-color: var(--vf-appl-accent, var(--vf-primary)); box-shadow: var(--vf-shadow-md); } .vf-appl-address-open:focus-visible { outline: 2px solid var(--vf-appl-accent, var(--vf-primary)); outline-offset: 2px; border-color: var(--vf-appl-accent, var(--vf-primary)); } .vf-appl-modal .modal-dialog { width: min(22rem, calc(100vw - 1.5rem)); max-width: 22rem; max-height: calc(100dvh - 1.5rem); margin: 0.55rem auto; } .vf-appl-modal .modal-content { border: 1px solid var(--vf-border); border-radius: var(--vf-radius); background: var(--vf-surface-1); color: var(--vf-text); } .vf-appl-modal .modal-header, .vf-appl-modal .modal-footer { padding: 0.4rem 0.7rem; border-color: var(--vf-border); } .vf-appl-modal .modal-body { padding: 0.55rem 0.7rem 0.35rem; } .vf-appl-modal .modal-title { display: inline-flex; align-items: center; gap: 0.35rem; margin: 0; font-size: 0.86rem; font-weight: 800; } .vf-appl-modal .modal-title i { color: var(--vf-primary); } .vf-appl-modal .btn-close { width: 0.65rem; height: 0.65rem; padding: 0.35rem; box-shadow: none; } .vf-appl-modal .btn-close:focus-visible, .vf-appl-modal .form-control:focus, .vf-appl-modal .form-select:focus { box-shadow: 0 0 0 0.15rem var(--vf-focus-ring); } html[data-bs-theme="dark"] .vf-appl-modal .btn-close { filter: invert(1) grayscale(100%) brightness(180%); } .vf-appl-modal .modal-footer .btn { min-height: 1.9rem; padding: 0.2rem 0.8rem; font-size: 0.78rem; font-weight: 750; } .vf-appl-modal-set { margin: 0 0 0.5rem; padding: 0.45rem 0.5rem 0.5rem; border: 1px solid var(--vf-border); border-radius: var(--vf-radius-md); background: var(--vf-surface-2); } .vf-appl-modal-set legend { float: none; width: auto; margin: 0 0 0.35rem; padding: 0; color: var(--vf-primary); font-size: 0.68rem; font-weight: 800; letter-spacing: 0.03em; text-transform: uppercase; } .vf-appl-modal-grid, .vf-appl-modal-grid.is-pair { display: grid; grid-template-columns: 1fr; gap: 0.45rem; } .vf-appl-modal-set .form-label { display: block; margin: 0 0 0.2rem; font-size: 0.72rem; font-weight: 700; line-height: 1.3; } .vf-appl-modal-set > .form-label, .vf-appl-modal-set > .vf-select, .vf-appl-modal-set > .form-control, .vf-appl-modal-set > div { margin-top: 0.45rem; } .vf-appl-modal-set > legend + .form-label { margin-top: 0; } .vf-appl-modal .form-control, .vf-appl-modal .form-select, .vf-appl-modal .vf-select-btn { min-height: 2rem; padding: 0.2rem 0.5rem; font-size: 0.8rem; } .vf-appl-modal .vf-select-btn { padding: 0.15rem 0.45rem 0.15rem 0.28rem; } #spouseBirthWrap { margin-top: 0.5rem; } .vf-appl-modal-note { margin: 0.3rem 0 0; color: var(--vf-text-muted); font-size: 0.72rem; font-weight: 650; line-height: 1.35; } .vf-appl-same { display: flex; align-items: center; gap: 0.45rem; margin: 0 0 0.5rem; font-size: 0.76rem; font-weight: 650; } .vf-appl-address { padding: 0.9rem 1rem 1rem; border: 1px solid color-mix(in srgb, var(--vf-hue-sky) 28%, var(--vf-border)); border-radius: var(--vf-radius-md); background: radial-gradient(280px 120px at 100% 0%, color-mix(in srgb, var(--vf-hue-sky) 14%, transparent), transparent 70%), var(--vf-surface-2); } .vf-appl-address-head { display: flex; align-items: center; justify-content: space-between; gap: 0.85rem; flex-wrap: wrap; margin-bottom: 0.75rem; } .vf-appl-share { display: flex; align-items: center; gap: 0.45rem; min-height: 1.75rem; margin: 0; padding: 0.2rem 0.55rem; border: 1px solid var(--vf-border); border-radius: 999px; background: var(--vf-surface-1); } .vf-appl-share:has(:checked) { background: var(--vf-hue-teal-soft); border-color: color-mix(in srgb, var(--vf-hue-teal) 42%, var(--vf-border)); color: var(--vf-hue-teal); } .vf-appl-share .form-check-input { margin: 0; float: none; } .vf-appl-share .form-check-label { font-size: 0.8rem; font-weight: 650; cursor: pointer; } .vf-appl-address .vf-appl-shared-note { margin: 0 0 0.75rem; } .vf-appl-address-fields { display: grid; grid-template-columns: 1fr; gap: 0.75rem 0.85rem; } .vf-appl-read { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(12rem, 0.85fr); gap: 0.6rem; margin: 0 0 1.25rem; align-items: stretch; } .vf-appl-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; min-width: 0; } .vf-appl-fact, .vf-appl-addr { display: flex; gap: 0.55rem; align-items: flex-start; min-width: 0; padding: 0.62rem 0.7rem; border: 1px solid var(--vf-border); border-radius: var(--vf-radius-md); background: color-mix(in srgb, var(--vf-icon-soft) 70%, var(--vf-surface-2)); } .vf-appl-fact > i, .vf-appl-addr > i { width: 1.85rem; height: 1.85rem; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; border-radius: 0.5rem; background: var(--vf-icon-soft); color: var(--vf-icon); font-size: 0.82rem; } .vf-appl-fact > div, .vf-appl-addr > div { min-width: 0; flex: 1; } .vf-appl-fact span, .vf-appl-addr span { display: block; font-size: 0.64rem; font-weight: 750; letter-spacing: 0.04em; text-transform: uppercase; color: var(--vf-text-muted); } .vf-appl-fact strong, .vf-appl-addr strong { display: block; margin-top: 0.1rem; font-size: 0.84rem; line-height: 1.3; word-break: break-word; } .vf-appl-fact.is-edu, .vf-appl-fact.is-edu > i { --vf-icon: var(--vf-hue-violet); --vf-icon-2: var(--vf-hue-violet-2); --vf-icon-soft: var(--vf-hue-violet-soft); } .vf-appl-fact.is-visa, .vf-appl-fact.is-visa > i { --vf-icon: var(--vf-hue-gold); --vf-icon-2: var(--vf-hue-gold-2); --vf-icon-soft: var(--vf-hue-gold-soft); } .vf-appl-fact.is-entry, .vf-appl-fact.is-entry > i { --vf-icon: var(--vf-hue-sky); --vf-icon-2: var(--vf-hue-sky-2); --vf-icon-soft: var(--vf-hue-sky-soft); } .vf-appl-fact.is-exit, .vf-appl-fact.is-exit > i { --vf-icon: var(--vf-hue-navy); --vf-icon-2: var(--vf-hue-navy-2); --vf-icon-soft: var(--vf-hue-navy-soft); } .vf-appl-addr, .vf-appl-addr > i { --vf-icon: var(--vf-hue-teal); --vf-icon-2: var(--vf-hue-teal-2); --vf-icon-soft: var(--vf-hue-teal-soft); } .vf-appl-addr { height: 100%; } .vf-appl-addr-lines { list-style: none; margin: 0.18rem 0 0; padding: 0; } .vf-appl-addr-lines li { margin: 0 0 0.18rem; font-size: 0.82rem; line-height: 1.35; font-weight: 650; word-break: break-word; } .vf-appl-addr-lines li:last-child { margin-bottom: 0; } .vf-appl-addr-lines em { display: block; font-style: normal; font-size: 0.62rem; font-weight: 750; letter-spacing: 0.03em; text-transform: uppercase; color: var(--vf-text-muted); } @media (max-width: 1199.98px) { .vf-appl-selects, .vf-appl-medical { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 767.98px) { .vf-appl-selects, .vf-appl-medical, .vf-appl-address-fields { grid-template-columns: 1fr; } .vf-appl-read { grid-template-columns: 1fr; } } .vf-create-card { padding: 0; overflow: hidden; } .vf-create-board { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(17.5rem, 20.5rem); align-items: stretch; overflow: visible; border: 1px solid var(--vf-border); border-radius: var(--vf-radius); background: var(--vf-surface-1); box-shadow: var(--vf-shadow-sm); } .vf-create-picks { display: flex; flex-direction: column; gap: 0.75rem; min-width: 0; padding: 0.85rem 0.95rem 1rem; } .vf-create-draft { display: flex; flex-wrap: wrap; align-items: center; gap: 0.45rem 0.55rem; padding: 0.5rem 0.7rem; border: 1px solid color-mix(in srgb, var(--vf-warning) 35%, var(--vf-border)); border-radius: var(--vf-radius-md); background: color-mix(in srgb, var(--vf-warning) 8%, var(--vf-surface-2)); } .vf-create-draft i { flex-shrink: 0; color: var(--vf-warning); } .vf-create-draft p { flex: 1; min-width: 0; margin: 0; color: var(--vf-text); font-size: 0.78rem; font-weight: 650; line-height: 1.35; } .vf-create-draft a { flex-shrink: 0; font-size: 0.76rem; font-weight: 750; white-space: nowrap; } .vf-create-grid { display: grid; grid-template-columns: 1fr 1fr; grid-template-areas: "service center" "visa count"; gap: 0.9rem 0.75rem; align-items: start; } .vf-create-field.is-service { grid-area: service; } .vf-create-field.is-center { grid-area: center; } .vf-create-field.is-visa { grid-area: visa; } .vf-create-field.is-count { grid-area: count; } .vf-create-grid:has(.is-center.d-none) { grid-template-areas: "service service" "visa count"; } .vf-create-field .vf-select-btn { min-height: 2.55rem; } .vf-create-field { position: relative; min-width: 0; margin: 0; } .vf-create-field .form-label { display: block; margin-bottom: 0.4rem; font-size: 0.8rem; font-weight: 750; color: var(--vf-text); } .vf-create-hint { margin: 0.4rem 0 0; color: var(--vf-text-muted); font-size: 0.72rem; font-weight: 600; line-height: 1.35; } .vf-select { position: relative; min-width: 0; } .vf-select.is-open { z-index: 50; } .vf-select-native { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; opacity: 0; pointer-events: none; } .vf-select-btn { display: flex; align-items: center; gap: 0.45rem; width: 100%; min-height: 2.35rem; padding: 0.28rem 0.55rem 0.28rem 0.35rem; border: 1px solid var(--vf-border); border-radius: var(--vf-radius-md); background: var(--vf-surface-2); color: var(--vf-text); font-size: 0.8rem; font-weight: 650; line-height: 1.3; text-align: left; cursor: pointer; transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease; } .vf-select-btn:hover { border-color: color-mix(in srgb, var(--vf-icon, var(--vf-primary)) 55%, var(--vf-border)); background: color-mix(in srgb, var(--vf-icon-soft, var(--vf-primary-soft)) 55%, var(--vf-surface-2)); } .vf-select-btn:focus-visible, .vf-select.is-open .vf-select-btn { outline: 0; border-color: var(--vf-icon, var(--vf-primary)); background: var(--vf-surface-1); box-shadow: 0 0 0 0.2rem var(--vf-focus-ring); } .vf-select-ico { width: 1.55rem; height: 1.55rem; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; border-radius: 0.4rem; background: transparent; color: var(--vf-icon, var(--vf-primary)); font-size: 0.72rem; } .vf-select-ico > .fa-duotone { width: 100%; height: 100%; display: inline-flex; align-items: center; justify-content: center; border-radius: inherit; background: var(--vf-icon-soft, var(--vf-primary-soft)); color: var(--vf-icon, var(--vf-primary)); } .vf-select-value { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .vf-select-value.is-placeholder { color: var(--vf-text-muted); font-weight: 600; } .vf-select-caret { margin-left: auto; color: var(--vf-text-muted); font-size: 0.68rem; transition: transform 0.18s ease; } .vf-select.is-open .vf-select-caret { transform: rotate(180deg); color: var(--vf-icon, var(--vf-primary)); } .vf-select-menu { position: absolute; z-index: 40; top: calc(100% + 0.22rem); left: 0; right: 0; margin: 0; padding: 0.22rem; list-style: none; border: 1px solid var(--vf-border); border-radius: var(--vf-radius-md); background: var(--vf-surface-1); box-shadow: var(--vf-shadow-md); max-height: 14rem; overflow-y: auto; } .vf-select-menu.is-floating { position: fixed; right: auto; z-index: 1080; } .vf-select-menu.is-floating .vf-select-option span { white-space: normal; line-height: 1.3; } .vf-select-option { display: flex; align-items: center; justify-content: space-between; gap: 0.45rem; padding: 0.38rem 0.5rem; border-radius: 0.42rem; color: var(--vf-text); font-size: 0.8rem; font-weight: 650; cursor: pointer; } .vf-select-option i { color: var(--vf-icon, var(--vf-primary)); font-size: 0.68rem; opacity: 0; } .vf-select-option:hover, .vf-select-option.is-active { background: var(--vf-icon-soft, var(--vf-primary-soft)); color: var(--vf-icon, var(--vf-primary)); } .vf-select-option.is-selected { background: var(--vf-icon-soft, var(--vf-primary-soft)); color: var(--vf-icon, var(--vf-primary)); } .vf-select-option.is-selected i { opacity: 1; } .vf-select.is-disabled .vf-select-btn { opacity: 0.58; cursor: not-allowed; box-shadow: none; } .vf-select.is-sm .vf-select-btn { min-height: 2.05rem; padding: 0.18rem 0.45rem 0.18rem 0.28rem; border-radius: 0.5rem; font-size: 0.75rem; } .vf-select.is-sm .vf-select-ico { width: 1.35rem; height: 1.35rem; border-radius: 0.35rem; font-size: 0.66rem; } .vf-field { display: flex; align-items: center; gap: 0.45rem; min-width: 0; min-height: 2.35rem; padding: 0.28rem 0.55rem 0.28rem 0.35rem; border: 1px solid var(--vf-border); border-radius: var(--vf-radius-md); background: var(--vf-surface-2); transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease; } .vf-field-ico { width: 1.55rem; height: 1.55rem; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; border-radius: 0.4rem; color: var(--vf-icon, var(--vf-primary)); font-size: 0.72rem; } .vf-field-ico > .fa-duotone { width: 100%; height: 100%; display: inline-flex; align-items: center; justify-content: center; border-radius: inherit; background: var(--vf-icon-soft, var(--vf-primary-soft)); color: var(--vf-icon, var(--vf-primary)); } .vf-field .form-control { flex: 1; min-width: 0; min-height: 0; padding: 0; border: 0; background: transparent; box-shadow: none; font-size: 0.8rem; font-weight: 650; } .vf-field .form-control:focus { box-shadow: none; background: transparent; } .vf-field:focus-within { border-color: var(--vf-primary); background: var(--vf-surface-1); box-shadow: 0 0 0 0.2rem var(--vf-focus-ring); } .vf-create-fees { display: flex; flex-direction: column; gap: 0.65rem; min-width: 0; padding: 0.9rem; border-left: 1px solid var(--vf-border); border-radius: 0 var(--vf-radius) var(--vf-radius) 0; background: linear-gradient(180deg, color-mix(in srgb, var(--vf-primary-soft) 55%, var(--vf-surface-2)), var(--vf-surface-2) 4.5rem); } .vf-create-fees-head { display: flex; align-items: center; gap: 0.65rem; } .vf-create-fees-mark { display: inline-flex; align-items: center; justify-content: center; width: 2.15rem; height: 2.15rem; flex-shrink: 0; border-radius: 0.55rem; background: var(--vf-primary-soft); color: var(--vf-primary); font-size: 0.95rem; } .vf-create-fees-head h6 { margin: 0; font-size: 0.92rem; font-weight: 800; } .vf-create-fees-head p { margin: 0.12rem 0 0; color: var(--vf-text-muted); font-size: 0.74rem; font-weight: 650; line-height: 1.35; } .vf-create-fees.is-ready .vf-create-fees-head p { display: none; } .vf-create-fees .vf-fee-list { gap: 0.4rem; margin: 0; } .vf-create-fees .vf-fee-row { gap: 0.55rem; margin: 0; padding: 0.55rem 0.65rem; background: var(--vf-surface-1); } .vf-create-fees .vf-fee-total { margin: 0; padding: 0.75rem 0.8rem; font-size: 0.95rem; } .vf-create-fees .vf-fee-total .vf-money { font-size: 1.15rem; } .vf-create-actions { display: flex; margin-top: auto; padding-top: 0.2rem; } .vf-create-actions .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; width: 100%; min-height: 2.35rem; padding: 0.45rem 0.9rem; font-size: 0.84rem; font-weight: 750; } .vf-create-actions .btn:disabled { opacity: 0.55; cursor: not-allowed; } body:has(.vf-order-create) .app-content { overflow-x: hidden; overflow-y: auto; padding: 0.75rem 0.9rem 1rem; } .vf-order-create { overflow: visible; } .vf-order-create .vf-page-hero { flex-shrink: 0; } .vf-terms-agree { display: flex; align-items: flex-start; gap: 0.65rem; margin: 1.25rem 0 1rem; font-weight: 650; line-height: 1.45; } .vf-terms-agree input { margin-top: 0.3rem; flex-shrink: 0; } .vf-sign-pad { padding: 0.85rem; border: 1px solid var(--vf-border); border-radius: var(--vf-radius-md); background: var(--vf-surface-2); } .vf-sign-pad.is-invalid { border-color: var(--vf-danger); box-shadow: 0 0 0 3px color-mix(in srgb, var(--vf-danger) 18%, transparent); } .vf-sign-pad-head { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; margin-bottom: 0.65rem; } .vf-sign-pad-head strong { font-size: 0.88rem; } .vf-sign-pad canvas { display: block; width: 100%; height: 180px; border: 1px dashed var(--vf-border-strong); border-radius: 0.65rem; background: var(--vf-paper); cursor: crosshair; touch-action: none; } .vf-sign-error { margin: 0.55rem 0 0; color: var(--vf-danger); font-size: 0.8rem; font-weight: 700; } .vf-sign-preview { margin: 0.85rem 0; padding: 0.65rem; border: 1px solid var(--vf-border); border-radius: var(--vf-radius-md); background: var(--vf-paper); } .vf-sign-preview img { display: block; width: 100%; max-height: 10rem; object-fit: contain; } .vf-order-aside .vf-sign-preview { margin-bottom: 0.45rem; } .vf-terms { width: 100%; max-width: 46rem; min-width: 0; margin: 0 auto; container-type: inline-size; container-name: terms; } .vf-terms-page { min-width: 0; } .vf-letter { --letter-navy: var(--ink-navy); --letter-gold: #f0b429; --letter-ink: #243044; --letter-paper: var(--vf-paper); --letter-pad: #f3f0e8; --letter-line: #d4cfc4; --deco-scale: 1; position: relative; width: 100%; max-width: none; min-width: 0; box-sizing: border-box; margin: 0 auto 1rem; padding: 2.55rem 2.35rem 3.35rem; overflow: hidden; color: var(--letter-ink); background: var(--letter-paper); border: 1px solid var(--letter-line); box-shadow: 0 22px 48px -28px rgba(10, 36, 88, 0.45); } .vf-letter-deco, .vf-letter-bar, .vf-letter-watermark { position: absolute; pointer-events: none; } .vf-letter-watermark { inset: 8% 4% 10%; z-index: 0; display: flex; align-items: center; justify-content: center; } .vf-letter-watermark img { width: min(38rem, 88%); max-height: 38rem; object-fit: contain; opacity: 0.09; } .vf-letter-deco-tl, .vf-letter-deco-tr, .vf-letter-deco-bl, .vf-letter-deco-br { width: 4.6rem; height: 4.6rem; transform: scale(var(--deco-scale)); } .vf-letter-deco-tl, .vf-letter-deco-tr, .vf-letter-deco-bl, .vf-letter-deco-br, .vf-letter-deco-tl::before, .vf-letter-deco-tr::before { border-radius: 50%; } .vf-letter-deco-tl { top: 0; left: 0; transform-origin: 0 0; background: radial-gradient(circle at 0 0, var(--letter-navy) 0 2.15rem, transparent 2.18rem); } .vf-letter-deco-tl::before { content: ""; position: absolute; top: 2.35rem; left: 0.42rem; width: 0.62rem; height: 0.62rem; background: var(--letter-gold); } .vf-letter-deco-tr { top: 0; right: 0; transform-origin: 100% 0; background: radial-gradient(circle at 100% 0, var(--letter-gold) 0 1.85rem, transparent 1.88rem); } .vf-letter-deco-tr::before { content: ""; position: absolute; top: 2.05rem; right: 0.38rem; width: 0.55rem; height: 0.55rem; border: 2px solid var(--letter-navy); } .vf-letter-deco-bl { left: 0; bottom: 0.55rem; transform-origin: 0 100%; background: radial-gradient(circle at 0 100%, var(--letter-gold) 0 1.55rem, transparent 1.58rem); } .vf-letter-deco-br { right: 0; bottom: 0.55rem; transform-origin: 100% 100%; background: radial-gradient(circle at 100% 100%, var(--letter-navy) 0 2.05rem, transparent 2.08rem); } .vf-letter-bar { left: 0; right: 0; bottom: 0; height: 0.55rem; background: var(--letter-navy); } .vf-letter-head { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 0.85rem; margin: 0 0 1.35rem; padding: 0.35rem 2.4rem 1rem; text-align: center; border-bottom: 1.5px solid var(--letter-navy); } .vf-letter-head::after { content: ""; position: absolute; left: 18%; right: 18%; bottom: -1px; height: 3px; background: var(--letter-gold); } .vf-letter-logo { display: flex; justify-content: center; } .vf-letter-logo img { width: 7.25rem; height: 7.25rem; object-fit: contain; } .vf-letter-head h1 { margin: 0; width: 100%; color: var(--letter-navy); font-size: clamp(0.78rem, 3.2cqi, 1.12rem); font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; line-height: 1.35; text-wrap: balance; } .vf-letter-body { position: relative; z-index: 1; font-size: 0.94rem; line-height: 1.72; } .vf-letter-lang { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 0.4rem; margin: 0 0 0.95rem; } .vf-letter-lang span { margin-right: auto; color: var(--letter-navy); font-size: 0.75rem; font-weight: 700; } .vf-letter-lang a { display: inline-flex; align-items: center; justify-content: center; min-height: 1.85rem; padding: 0.15rem 0.7rem; border: 1px solid var(--letter-line); border-radius: 999px; background: var(--letter-paper); color: var(--letter-navy); font-size: 0.75rem; font-weight: 750; text-decoration: none; } .vf-letter-lang a:hover { border-color: var(--letter-navy); } .vf-letter-lang a.is-active { border-color: var(--letter-navy); background: var(--letter-navy); color: var(--vf-paper); } .vf-letter-copy[lang="bn"] { font-size: 0.98rem; line-height: 1.85; } .vf-letter-meta { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0.85rem 2rem; width: 100%; min-width: 0; margin: 0 0 1.15rem; } .vf-letter-col { display: grid; gap: 0.65rem; min-width: 0; align-content: start; } .vf-letter-row { display: flex; align-items: baseline; gap: 0.55rem; min-width: 0; } .vf-letter-row.is-multiline { align-items: flex-start; } .vf-letter-label { flex: 0 0 7.1rem; color: var(--letter-navy); font-size: 0.78rem; font-weight: 750; letter-spacing: 0.02em; } .vf-letter-label::after { content: ":"; } .vf-letter-line { flex: 1; min-width: 0; min-height: 1.35rem; padding: 0 0 0.18rem; border-bottom: 1px solid #9aa7bd; font-weight: 600; line-height: 1.35; word-break: break-word; } .vf-letter-line input, .vf-letter-line textarea { display: block; width: 100%; margin: 0; padding: 0; border: 0; border-radius: 0; background: transparent; color: inherit; font: inherit; font-weight: 600; box-shadow: none; resize: none; } .vf-letter-line textarea { min-height: 2.5rem; line-height: 1.4; } .vf-letter-line input:focus, .vf-letter-line textarea:focus { outline: none; box-shadow: none; color: var(--letter-navy); } .vf-letter-signoff { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 0.85rem 2rem; width: 100%; min-width: 0; margin: 1.35rem 0 0; padding: 1.15rem 0 0.15rem; border-top: 1.5px solid var(--letter-navy); } .vf-letter-signoff .vf-letter-row { align-self: start; flex-direction: column; align-items: stretch; gap: 0.2rem; } .vf-letter-signoff .vf-letter-label { flex: 0 0 auto; } .vf-letter-sign-label { margin: 0 0 0.35rem; color: var(--letter-navy); font-size: 0.78rem; font-weight: 750; } .vf-letter-sign-label::after { content: ":"; } .vf-letter-sign-help { margin: 0.4rem 0 0; font-size: 0.72rem; line-height: 1.35; } .vf-letter .vf-sign-pad { padding: 0.4rem 0.45rem 0.45rem; background: var(--letter-pad); border: 1px solid var(--letter-line); border-radius: 0.55rem; } .vf-letter .vf-sign-pad-head { margin-bottom: 0.35rem; } .vf-letter .vf-sign-pad-head span { font-size: 0.75rem; font-weight: 650; color: var(--letter-navy); } .vf-letter .vf-sign-pad-head .btn { min-height: 1.7rem; padding: 0.15rem 0.55rem; font-size: 0.72rem; } .vf-letter .vf-sign-surface { height: 5.75rem; border: 1px dashed var(--letter-line); border-radius: 0.4rem; background: var(--letter-paper); overflow: hidden; } .vf-letter .vf-sign-surface canvas { display: block; width: 100%; height: 100%; border: 0; border-radius: 0; background: var(--vf-paper); cursor: crosshair; touch-action: none; } .vf-letter-sign-image { height: 5.75rem; margin: 0; padding: 0.25rem 0.4rem; border: 1px dashed var(--letter-line); border-radius: 0.4rem; background: var(--letter-paper); } .vf-letter-sign-image img { width: 100%; height: 100%; max-height: none; object-fit: contain; } .vf-letter-signed-at { margin: 0.35rem 0 0; color: var(--letter-navy); font-size: 0.75rem; font-weight: 650; } .vf-letter .vf-sign-error { margin: 0.35rem 0 0; } .vf-letter-intro { margin: 0 0 1.15rem; color: var(--letter-navy); font-weight: 700; } .vf-letter-article + .vf-letter-article { margin-top: 1rem; } .vf-letter-article h2 { margin: 0 0 0.28rem; color: var(--letter-navy); font-size: 0.98rem; font-weight: 800; } .vf-letter-article p, .vf-letter-article li { margin: 0; color: #3b4758; } .vf-letter-article ul, .vf-letter-article ol { margin: 0.35rem 0 0; padding-left: 1.15rem; } .vf-letter-full { margin: 1.35rem 0 1.6rem; font-weight: 700; } .vf-letter-full a { color: var(--letter-navy); text-decoration: underline; text-underline-offset: 0.18em; } .vf-letter-foot { position: relative; z-index: 1; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0.55rem 1.35rem; margin-top: 1.6rem; padding: 0.95rem 2.2rem 0.7rem; border-top: 1.5px solid var(--letter-navy); color: var(--letter-navy); font-size: 0.78rem; font-weight: 650; line-height: 1.4; text-align: center; } .vf-letter-foot::before { content: ""; position: absolute; left: 18%; right: 18%; top: -1px; height: 3px; background: var(--letter-gold); } .vf-letter-foot > div { display: flex; align-items: center; justify-content: center; gap: 0.45rem; min-width: 0; max-width: 100%; } .vf-letter-foot-ico { display: inline-flex; align-items: center; justify-content: center; width: 1.7rem; height: 1.7rem; flex-shrink: 0; color: var(--vf-paper); background: var(--letter-navy); border-radius: 50%; font-size: 0.72rem; } @container terms (max-width: 42rem) { .vf-letter { --deco-scale: 0.82; padding: 2.15rem 1.65rem 2.85rem; } .vf-letter-logo img { width: 6.4rem; height: 6.4rem; } .vf-letter-head h1 { font-size: clamp(0.72rem, 3.1cqi, 1.02rem); letter-spacing: 0.03em; } } @container terms (max-width: 34rem) { .vf-letter { --deco-scale: 0.64; padding: 1.7rem 1.1rem 2.45rem; } .vf-letter-head { gap: 0.7rem; padding: 0.1rem 0.35rem 0.9rem; margin-bottom: 1.1rem; } .vf-letter-logo img { width: 5.6rem; height: 5.6rem; } .vf-letter-head h1 { font-size: clamp(0.68rem, 3cqi, 0.92rem); letter-spacing: 0.02em; } .vf-letter-body { font-size: 0.88rem; } .vf-letter-meta, .vf-letter-signoff { grid-template-columns: 1fr; gap: 0.65rem; } .vf-letter-row { flex-direction: column; align-items: stretch; gap: 0.18rem; } .vf-letter-label { flex: 0 0 auto; } .vf-letter-foot { flex-direction: column; gap: 0.55rem; padding-inline: 1.2rem; font-size: 0.74rem; } .vf-letter .vf-sign-surface, .vf-letter-sign-image { height: 5.1rem; } } @container terms (max-width: 26rem) { .vf-letter { --deco-scale: 0.5; padding: 1.4rem 0.85rem 2.15rem; } .vf-letter-head h1 { font-size: clamp(0.64rem, 3.2cqi, 0.86rem); } } .vf-settings .vf-page-hero { margin: 0 0 0.55rem; padding: 0.45rem 0.75rem; gap: 0; } .vf-settings .vf-page-hero-top { gap: 0.55rem; } .vf-settings .vf-page-hero-icon { width: 2.1rem; height: 2.1rem; border-radius: 0.5rem; font-size: 0.95rem; } .vf-settings .vf-page-hero-copy h1 { font-size: 1.02rem; } .vf-settings .vf-page-hero-copy p { margin: 0.05rem 0 0; font-size: 0.76rem; line-height: 1.3; } .vf-settings .vf-status-tabs { margin: 0 0 0.55rem; gap: 0.3rem; } .vf-settings .vf-status-tab { min-height: 2rem; padding: 0.2rem 0.6rem; border-radius: 0.55rem; font-size: 0.76rem; } .vf-settings .vf-status-tab strong { min-width: 1.1rem; padding: 0.02rem 0.28rem; font-size: 0.68rem; } .vf-settings .vf-svc-card { margin: 0; padding: 0.65rem 0.75rem 0.7rem; } .vf-settings-pane { display: none; } .vf-settings-pane.is-active { display: block; } .vf-settings-bar { display: flex; align-items: center; justify-content: space-between; gap: 0.65rem; margin: 0 0 0.55rem; } .vf-settings-bar p { margin: 0; color: var(--vf-text-muted); font-size: 0.74rem; line-height: 1.35; } .vf-settings-bar .btn { display: inline-flex; align-items: center; gap: 0.3rem; flex-shrink: 0; min-height: 1.9rem; padding: 0.2rem 0.7rem; } .vf-settings-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.45rem 0.55rem; } .vf-settings-logo { display: flex; align-items: center; gap: 0.45rem; } .vf-settings-logo img, .vf-settings-logo-empty { width: 2.15rem; height: 2.15rem; object-fit: contain; background: var(--vf-paper); border: 1px solid var(--vf-border); border-radius: 0.45rem; padding: 0.1rem; flex-shrink: 0; } .vf-settings-logo-empty { display: inline-flex; align-items: center; justify-content: center; color: var(--vf-text-muted); background: var(--vf-surface-2); font-size: 0.8rem; } .vf-settings-logo-fields { flex: 1; min-width: 0; display: grid; gap: 0.2rem; } .vf-settings-logo-fields .form-check { font-size: 0.72rem; } .vf-settings-social { display: grid; grid-template-columns: 1fr 1fr; gap: 0.4rem; } .vf-settings-social-row { display: flex; align-items: center; gap: 0.4rem; margin: 0; min-height: 2.15rem; padding: 0.15rem 0.35rem 0.15rem 0.2rem; border: 1px solid var(--vf-border); border-radius: 0.55rem; background: var(--vf-surface-2); } .vf-settings-social-ico { width: 1.7rem; height: 1.7rem; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; border-radius: 0.4rem; font-size: 0.88rem; } .vf-settings-social-ico.is-facebook { color: #1877f2; } .vf-settings-social-ico.is-instagram { color: #e4405f; } .vf-settings-social-ico.is-youtube { color: #ff0000; } .vf-settings-social-ico.is-whatsapp { color: #25d366; } .vf-settings-social-ico.is-tiktok { color: #111111; } .vf-settings-social-ico.is-linkedin { color: #0a66c2; } .vf-settings-social-row .form-control { border: 0; background: transparent; box-shadow: none; padding: 0; min-height: 0; font-size: 0.78rem; } .vf-settings-social-row .form-control:focus { box-shadow: none; } .vf-settings-social-row:focus-within { border-color: var(--vf-primary); box-shadow: 0 0 0 0.15rem var(--vf-focus-ring); } .vf-settings-switch-list { display: grid; gap: 0.4rem; } .vf-settings-switch { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; margin: 0; padding: 0.4rem 0.55rem; border: 1px solid var(--vf-border); border-radius: 0.55rem; background: var(--vf-surface-2); } .vf-settings-switch > span:first-child { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem 0.45rem; min-width: 0; } .vf-settings-switch strong { font-size: 0.8rem; } .vf-settings-switch small { flex-basis: 100%; color: var(--vf-text-muted); font-size: 0.7rem; line-height: 1.3; } .vf-settings-note { margin: 0.4rem 0 0; color: var(--vf-text-muted); font-size: 0.7rem; line-height: 1.35; } .vf-telegram-webhook { margin-top: 0.85rem; display: grid; gap: 0.45rem; } .vf-telegram-actions { display: flex; flex-wrap: wrap; gap: 0.4rem; } .vf-telegram-h { margin: 1rem 0 0.45rem; font-size: 0.82rem; font-weight: 800; } .vf-telegram-links, .vf-telegram-cmds { display: grid; gap: 0.4rem; margin: 0; padding: 0; list-style: none; } .vf-telegram-link { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.4rem 0.55rem; border: 1px solid var(--vf-border); border-radius: 0.55rem; background: var(--vf-surface-2); } .vf-telegram-link span { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.45rem; min-width: 0; } .vf-telegram-link small { flex-basis: 100%; color: var(--vf-text-muted); font-size: 0.7rem; } .vf-telegram-warn { margin: 0 0 0.75rem; padding: 0.55rem 0.7rem; border: 1px solid color-mix(in srgb, var(--vf-danger, #c0392b) 35%, var(--vf-border)); border-radius: 0.55rem; background: color-mix(in srgb, var(--vf-danger, #c0392b) 8%, var(--vf-surface)); color: var(--vf-text); font-size: 0.78rem; line-height: 1.4; } .vf-telegram-linked, .vf-telegram-connect { display: grid; gap: 0.55rem; justify-items: start; } .vf-telegram-linked p, .vf-telegram-connect p { margin: 0; } .vf-telegram-code { display: grid; gap: 0.15rem; padding: 0.55rem 0.7rem; border: 1px dashed var(--vf-border); border-radius: 0.55rem; background: var(--vf-surface-2); } .vf-telegram-code span, .vf-telegram-code small { color: var(--vf-text-muted); font-size: 0.7rem; } .vf-telegram-code strong { font-size: 1.15rem; letter-spacing: 0.12em; } .vf-telegram-cmds li { font-size: 0.8rem; } .vf-telegram-cmds code { margin-right: 0.35rem; font-weight: 700; } .vf-settings-tpls { display: grid; gap: 0.4rem; } .vf-settings-tpl { display: grid; grid-template-columns: 8.5rem minmax(0, 1.1fr) minmax(0, 1.2fr) minmax(0, 0.9fr); gap: 0.4rem; align-items: start; padding: 0.4rem; border: 1px solid var(--vf-border); border-radius: 0.55rem; background: var(--vf-surface-2); } .vf-settings-tpl strong { padding-top: 0.35rem; font-size: 0.72rem; font-weight: 800; word-break: break-word; } .vf-settings-tpl textarea { min-height: 2.4rem; resize: vertical; } @media (max-width: 991.98px) { .vf-settings-grid, .vf-settings-social { grid-template-columns: 1fr 1fr; } .vf-settings-logo-field { grid-column: 1 / -1; } .vf-settings-tpl { grid-template-columns: 1fr 1fr; } .vf-settings-tpl strong { grid-column: 1 / -1; padding-top: 0; } } @media (max-width: 575.98px) { .vf-settings-bar { flex-wrap: wrap; } .vf-settings-grid, .vf-settings-social, .vf-settings-tpl { grid-template-columns: 1fr; } } .vf-staff .vf-page-hero { margin: 0 0 0.55rem; padding: 0.45rem 0.75rem; gap: 0.45rem; } .vf-staff .vf-page-hero-top { gap: 0.55rem; } .vf-staff .vf-page-hero-icon { width: 2.1rem; height: 2.1rem; border-radius: 0.5rem; font-size: 0.95rem; } .vf-staff .vf-page-hero-copy h1 { font-size: 1.02rem; } .vf-staff .vf-page-hero-copy p { margin: 0.05rem 0 0; font-size: 0.76rem; line-height: 1.3; } .vf-staff .vf-page-hero-facts { padding-top: 0.45rem; } .vf-staff .vf-status-tabs { margin: 0 0 0.55rem; gap: 0.3rem; } .vf-staff .vf-status-tab { min-height: 2rem; padding: 0.2rem 0.6rem; border-radius: 0.55rem; font-size: 0.76rem; } .vf-staff .vf-svc-card { padding: 0.7rem 0.8rem; } .vf-staff-avatar { width: 2.2rem; height: 2.2rem; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; border-radius: 50%; background: var(--vf-primary-soft); color: var(--vf-primary); font-size: 0.68rem; font-weight: 800; letter-spacing: 0.02em; } .vf-staff .vf-svc-card-badges { gap: 0.3rem; } .vf-staff .vf-svc-card-badges .badge { display: inline-flex; align-items: center; gap: 0.28rem; } .vf-staff-grid { grid-template-columns: 1fr 1fr; align-items: end; } .vf-staff-grid .is-submit { grid-column: 1 / -1; justify-content: flex-end; } /* Roles & permissions */ .vf-roles-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.7rem; align-items: start; } .vf-role-card { display: flex; flex-direction: column; gap: 0.7rem; min-width: 0; } .vf-role-card.is-locked { background: radial-gradient(180px 90px at 100% 0%, color-mix(in srgb, var(--vf-hue-navy) 12%, transparent), transparent 70%), var(--vf-surface-1); } .vf-role-avatar, .vf-role-group-ico, .vf-role-locked-ico { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; line-height: 1; } .vf-role-avatar { width: 2.2rem; height: 2.2rem; border-radius: 0.65rem; font-size: 0.92rem; } .vf-role-group-ico, .vf-role-locked-ico { width: 1.45rem; height: 1.45rem; border-radius: 0.4rem; font-size: 0.72rem; } .vf-role-locked { display: flex; align-items: flex-start; gap: 0.65rem; padding: 0.7rem 0.75rem; border: 1px dashed color-mix(in srgb, var(--vf-hue-navy) 35%, var(--vf-border)); border-radius: var(--vf-radius-md); background: color-mix(in srgb, var(--vf-hue-navy-soft) 55%, var(--vf-surface-2)); } .vf-role-locked strong { display: block; font-size: 0.82rem; font-weight: 750; } .vf-role-locked p { margin: 0.2rem 0 0; color: var(--vf-text-muted); font-size: 0.74rem; font-weight: 600; line-height: 1.4; } .vf-role-form { display: flex; flex-direction: column; gap: 0.65rem; } .vf-role-groups { display: flex; flex-direction: column; gap: 0.55rem; } .vf-role-group { padding: 0.5rem 0.55rem 0.55rem; border: 1px solid var(--vf-border); border-radius: var(--vf-radius-md); background: var(--vf-surface-2); } .vf-role-group-head { display: flex; align-items: center; gap: 0.4rem; margin: 0 0 0.4rem; } .vf-role-group-head strong { flex: 1; min-width: 0; font-size: 0.74rem; font-weight: 780; letter-spacing: 0.02em; } .vf-role-group-head em { flex-shrink: 0; margin: 0; color: var(--vf-text-muted); font-size: 0.66rem; font-style: normal; font-weight: 750; } .vf-role-perms { display: flex; flex-wrap: wrap; gap: 0.3rem; } .vf-role-perm { display: inline-flex; align-items: center; gap: 0.28rem; max-width: 100%; min-height: 1.7rem; padding: 0.18rem 0.5rem 0.18rem 0.35rem; border: 1px solid var(--vf-border); border-radius: 999px; background: var(--vf-surface-1); color: var(--vf-text-muted); cursor: pointer; user-select: none; transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease; } .vf-role-perm input { position: absolute; opacity: 0; pointer-events: none; } .vf-role-perm > i { display: inline-flex; align-items: center; justify-content: center; width: 0.95rem; height: 0.95rem; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--vf-border) 80%, transparent); background: var(--vf-surface-2); color: transparent; font-size: 0.55rem; line-height: 1; flex-shrink: 0; } .vf-role-perm span { font-size: 0.7rem; font-weight: 650; line-height: 1.2; white-space: nowrap; } .vf-role-perm:hover { border-color: color-mix(in srgb, var(--vf-primary) 35%, var(--vf-border)); color: var(--vf-text); } .vf-role-perm.is-on, .vf-role-perm:has(:checked) { border-color: color-mix(in srgb, var(--vf-primary) 45%, var(--vf-border)); background: color-mix(in srgb, var(--vf-primary-soft) 70%, var(--vf-surface-1)); color: var(--vf-primary); } .vf-role-perm.is-on > i, .vf-role-perm:has(:checked) > i { border-color: var(--vf-primary); background: var(--vf-primary); color: #fff; } .vf-role-actions { display: flex; justify-content: flex-end; padding-top: 0.15rem; } .vf-role-actions .btn { display: inline-flex; align-items: center; gap: 0.35rem; } @media (max-width: 1100px) { .vf-roles-grid { grid-template-columns: 1fr; } } @media (min-width: 1101px) and (max-width: 1280px) { .vf-roles-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .vf-role-card.is-locked { grid-column: 1 / -1; } } /* Reports */ .vf-reports .vf-page-hero { margin: 0 0 0.55rem; padding: 0.45rem 0.75rem; gap: 0.45rem; } .vf-reports .vf-page-hero-top { gap: 0.55rem; } .vf-reports .vf-page-hero-icon { width: 2.1rem; height: 2.1rem; border-radius: 0.5rem; font-size: 0.95rem; } .vf-reports .vf-page-hero-copy h1 { font-size: 1.02rem; } .vf-reports .vf-page-hero-copy p { margin: 0.05rem 0 0; font-size: 0.76rem; line-height: 1.3; } .vf-reports .vf-page-hero-facts { padding-top: 0.45rem; } .vf-reports .vf-status-tabs { margin: 0 0 0.7rem; gap: 0.3rem; } .vf-reports .vf-status-tab { min-height: 2rem; padding: 0.2rem 0.6rem; border-radius: 0.55rem; font-size: 0.76rem; } .vf-report-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.55rem; margin: 0 0 0.7rem; } .vf-report-kpi { display: flex; align-items: center; gap: 0.65rem; min-width: 0; padding: 0.7rem 0.75rem; border: 1px solid var(--vf-border); border-radius: var(--vf-radius); background: var(--vf-surface-1); box-shadow: var(--vf-shadow-sm); } .vf-report-kpi-ico, .vf-report-head-ico { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; line-height: 1; } .vf-report-kpi-ico { width: 2.15rem; height: 2.15rem; border-radius: 0.65rem; font-size: 0.92rem; } .vf-report-kpi span { display: block; color: var(--vf-text-muted); font-size: 0.66rem; font-weight: 750; letter-spacing: 0.04em; text-transform: uppercase; } .vf-report-kpi strong { display: block; margin-top: 0.12rem; font-size: 1.05rem; font-weight: 800; letter-spacing: -0.02em; line-height: 1.15; overflow-wrap: anywhere; } .vf-report-kpi small { display: block; margin-top: 0.15rem; color: var(--vf-text-muted); font-size: 0.7rem; font-weight: 600; } .vf-report-kpi.is-orders { --vf-icon: var(--vf-hue-sky); --vf-icon-2: var(--vf-hue-sky-2); --vf-icon-soft: var(--vf-hue-sky-soft); } .vf-report-kpi.is-revenue { --vf-icon: var(--vf-hue-gold); --vf-icon-2: var(--vf-hue-gold-2); --vf-icon-soft: var(--vf-hue-gold-soft); } .vf-report-kpi.is-done { --vf-icon: var(--vf-success); --vf-icon-2: var(--vf-success-text); --vf-icon-soft: var(--vf-success-soft); } .vf-report-kpi.is-refund { --vf-icon: var(--vf-hue-rose); --vf-icon-2: var(--vf-hue-rose-2); --vf-icon-soft: var(--vf-hue-rose-soft); } .vf-report-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.7rem; align-items: start; } .vf-report-panel { display: flex; flex-direction: column; gap: 0.65rem; min-width: 0; padding: 0.75rem 0.85rem; } .vf-report-panel.is-wide { grid-column: 1 / -1; } .vf-report-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; } .vf-report-panel-head h2 { display: inline-flex; align-items: center; gap: 0.45rem; margin: 0; font-size: 0.88rem; font-weight: 780; } .vf-report-head-ico { width: 1.5rem; height: 1.5rem; border-radius: 0.45rem; font-size: 0.75rem; } .vf-report-panel-head > span { color: var(--vf-text-muted); font-size: 0.74rem; font-weight: 750; } .vf-report-empty, .vf-report-foot { margin: 0; color: var(--vf-text-muted); font-size: 0.78rem; font-weight: 600; line-height: 1.4; } .vf-report-foot { padding-top: 0.35rem; border-top: 1px dashed var(--vf-border); } .vf-report-bars, .vf-report-list, .vf-report-rank { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.45rem; } .vf-report-bars > li { display: flex; flex-direction: column; gap: 0; } .vf-report-bar-meta, .vf-report-list li, .vf-report-rank li { display: flex; align-items: center; justify-content: space-between; gap: 0.55rem; } .vf-report-bar-meta strong, .vf-report-list strong { font-size: 0.82rem; font-weight: 780; } .vf-report-bar-track { height: 0.35rem; margin-top: 0.28rem; border-radius: 999px; background: var(--vf-surface-3); overflow: hidden; } .vf-report-bar-track > span { display: block; height: 100%; border-radius: inherit; background: var(--vf-primary); } .vf-report-bar-track > .is-success { background: var(--vf-success); } .vf-report-bar-track > .is-warning { background: var(--vf-warning, #d97706); } .vf-report-bar-track > .is-danger { background: var(--vf-danger); } .vf-report-bar-track > .is-info { background: var(--vf-hue-sky); } .vf-report-bar-track > .is-primary { background: var(--vf-primary); } .vf-report-bar-track > .is-muted, .vf-report-bar-track > .is-neutral { background: var(--vf-text-muted); } .vf-report-list li { padding: 0.4rem 0.5rem; border: 1px solid var(--vf-border); border-radius: var(--vf-radius-md); background: var(--vf-surface-2); } .vf-report-list li > div { text-align: right; } .vf-report-list small { display: block; margin-top: 0.08rem; color: var(--vf-text-muted); font-size: 0.68rem; font-weight: 650; } .vf-report-rank li { justify-content: flex-start; padding: 0.4rem 0.45rem; border: 1px solid var(--vf-border); border-radius: var(--vf-radius-md); background: var(--vf-surface-2); } .vf-report-rank em { display: inline-flex; align-items: center; justify-content: center; width: 1.35rem; height: 1.35rem; flex-shrink: 0; margin: 0; border-radius: 0.4rem; background: var(--vf-primary-soft); color: var(--vf-primary); font-size: 0.68rem; font-style: normal; font-weight: 800; } .vf-report-rank strong { display: block; font-size: 0.8rem; font-weight: 750; line-height: 1.25; } .vf-report-rank span { display: block; margin-top: 0.08rem; color: var(--vf-text-muted); font-size: 0.68rem; font-weight: 600; } .vf-report-chart { display: flex; align-items: flex-end; gap: 0.28rem; min-height: 7.5rem; padding: 0.35rem 0.15rem 0; overflow-x: auto; } .vf-report-chart-col { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; flex: 1 0 1.35rem; min-width: 1.35rem; height: 7rem; gap: 0.28rem; } .vf-report-chart-bar { width: 100%; max-width: 1.1rem; border-radius: 0.35rem 0.35rem 0.15rem 0.15rem; background: linear-gradient(180deg, color-mix(in srgb, var(--vf-primary) 85%, #fff), var(--vf-primary)); } .vf-report-chart-label { color: var(--vf-text-muted); font-size: 0.58rem; font-weight: 700; letter-spacing: -0.02em; white-space: nowrap; } .vf-report-table-wrap { max-height: 14rem; overflow: auto; border: 1px solid var(--vf-border); border-radius: var(--vf-radius-md); } .vf-report-table { font-size: 0.8rem; } .vf-report-table th, .vf-report-table td { padding: 0.4rem 0.65rem; white-space: nowrap; } @media (max-width: 1100px) { .vf-report-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 720px) { .vf-report-kpis, .vf-report-grid { grid-template-columns: 1fr; } } /* Audit log */ .vf-audit .vf-page-hero { margin: 0 0 0.55rem; padding: 0.45rem 0.75rem; gap: 0.45rem; } .vf-audit .vf-page-hero-top { gap: 0.55rem; } .vf-audit .vf-page-hero-icon { width: 2.1rem; height: 2.1rem; border-radius: 0.5rem; font-size: 0.95rem; } .vf-audit .vf-page-hero-copy h1 { font-size: 1.02rem; } .vf-audit .vf-page-hero-copy p { margin: 0.05rem 0 0; font-size: 0.76rem; line-height: 1.3; } .vf-audit .vf-page-hero-facts { padding-top: 0.45rem; } .vf-audit .vf-status-tabs { margin: 0 0 0.65rem; gap: 0.3rem; } .vf-audit .vf-status-tab { min-height: 2rem; padding: 0.2rem 0.6rem; border-radius: 0.55rem; font-size: 0.76rem; } .vf-audit-toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem 0.65rem; margin: 0 0 0.75rem; padding: 0.55rem 0.7rem; border: 1px solid var(--vf-border); border-radius: var(--vf-radius); background: var(--vf-surface-1); box-shadow: var(--vf-shadow-sm); } .vf-audit-search { position: relative; display: flex; align-items: center; flex: 1 1 16rem; min-width: 0; max-width: 28rem; } .vf-audit-search > i { position: absolute; left: 0.7rem; z-index: 1; color: var(--vf-text-muted); font-size: 0.78rem; line-height: 1; pointer-events: none; } .vf-audit-search input[type="search"] { box-sizing: border-box; width: 100%; height: 2.15rem; margin: 0; padding: 0.35rem 0.75rem 0.35rem 2.05rem; border: 1px solid var(--vf-border); border-radius: 0.65rem; background: var(--vf-surface-2); color: var(--vf-text); font-size: 0.82rem; font-weight: 600; line-height: 1.2; outline: none; appearance: none; -webkit-appearance: none; } .vf-audit-search input[type="search"]::-webkit-search-decoration, .vf-audit-search input[type="search"]::-webkit-search-cancel-button, .vf-audit-search input[type="search"]::-webkit-search-results-button, .vf-audit-search input[type="search"]::-webkit-search-results-decoration { display: none; -webkit-appearance: none; } .vf-audit-search input[type="search"]::placeholder { color: var(--vf-text-muted); opacity: 1; font-weight: 550; } .vf-audit-search input[type="search"]:focus { border-color: var(--vf-primary); background: var(--vf-surface-1); box-shadow: 0 0 0 3px var(--vf-focus-ring); } .vf-audit-periods { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0.28rem; } .vf-audit-period { position: relative; display: inline-flex; align-items: center; justify-content: center; min-height: 2rem; padding: 0.2rem 0.65rem; border: 1px solid var(--vf-border); border-radius: 999px; background: var(--vf-surface-2); color: var(--vf-text-muted); cursor: pointer; font-size: 0.7rem; font-weight: 700; line-height: 1; user-select: none; } .vf-audit-period input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; } .vf-audit-period span { pointer-events: none; } .vf-audit-period.is-on, .vf-audit-period:has(:checked) { border-color: color-mix(in srgb, var(--vf-primary) 40%, var(--vf-border)); background: color-mix(in srgb, var(--vf-primary-soft) 70%, var(--vf-surface-1)); color: var(--vf-primary); } .vf-audit-toolbar .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.35rem; flex-shrink: 0; min-height: 2.15rem; } .vf-audit-feed { position: relative; list-style: none; margin: 0; padding: 0 0 0 0.2rem; display: flex; flex-direction: column; gap: 0.45rem; } .vf-audit-feed::before { content: ""; position: absolute; left: 1.15rem; top: 0.6rem; bottom: 0.6rem; width: 2px; background: var(--vf-border); } .vf-audit-item { position: relative; display: flex; align-items: flex-start; gap: 0.7rem; padding: 0.65rem 0.75rem; border: 1px solid var(--vf-border); border-radius: var(--vf-radius); background: var(--vf-surface-1); box-shadow: var(--vf-shadow-sm); } .vf-audit-ico { position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 2.1rem; height: 2.1rem; border-radius: 0.65rem; font-size: 0.88rem; line-height: 1; } .vf-audit-item.is-success { --vf-icon: var(--vf-success); --vf-icon-2: var(--vf-success-text); --vf-icon-soft: var(--vf-success-soft); } .vf-audit-item.is-danger { --vf-icon: var(--vf-danger); --vf-icon-2: var(--vf-danger-text); --vf-icon-soft: var(--vf-danger-soft); } .vf-audit-item.is-warning { --vf-icon: var(--vf-hue-gold); --vf-icon-2: var(--vf-hue-gold-2); --vf-icon-soft: var(--vf-hue-gold-soft); } .vf-audit-item.is-info { --vf-icon: var(--vf-hue-sky); --vf-icon-2: var(--vf-hue-sky-2); --vf-icon-soft: var(--vf-hue-sky-soft); } .vf-audit-item.is-neutral { --vf-icon: var(--vf-primary); --vf-icon-2: var(--vf-accent); --vf-icon-soft: var(--vf-primary-soft); } .vf-audit-body { flex: 1; min-width: 0; } .vf-audit-top { display: flex; align-items: baseline; justify-content: space-between; gap: 0.6rem; margin-bottom: 0.3rem; } .vf-audit-top strong { font-size: 0.86rem; font-weight: 780; line-height: 1.25; } .vf-audit-top time { flex-shrink: 0; color: var(--vf-text-muted); font-size: 0.7rem; font-weight: 650; white-space: nowrap; } .vf-audit-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.5rem; } .vf-audit-meta .badge { font-size: 0.62rem; } .vf-audit-actor, .vf-audit-entity, .vf-audit-ip { display: inline-flex; align-items: center; gap: 0.25rem; color: var(--vf-text-muted); font-size: 0.72rem; font-weight: 650; } .vf-audit-entity { color: var(--vf-primary); text-decoration: none; font-weight: 700; } .vf-audit-entity:hover { text-decoration: underline; } .vf-audit-entity.is-plain { color: var(--vf-text-muted); font-weight: 650; } .vf-audit-details { margin: 0.4rem 0 0; padding: 0.4rem 0.55rem; border-radius: 0.5rem; background: var(--vf-surface-2); color: var(--vf-text); font-size: 0.76rem; font-weight: 600; line-height: 1.4; overflow-wrap: anywhere; } .vf-audit-foot { margin: 0.7rem 0 0; color: var(--vf-text-muted); font-size: 0.74rem; font-weight: 600; } @media (max-width: 720px) { .vf-audit-toolbar { align-items: stretch; } .vf-audit-search { flex: 1 1 100%; max-width: none; } .vf-audit-periods { width: 100%; } .vf-audit-toolbar .btn { width: 100%; } .vf-audit-top { flex-direction: column; align-items: flex-start; gap: 0.15rem; } .vf-audit-feed::before { left: 1.05rem; } } @media print { body:has(.vf-letter) { background: #fff !important; } body:has(.vf-letter) .app-navbar, body:has(.vf-letter) .app-sidebar, body:has(.vf-letter) .app-footer, body:has(.vf-letter) .app-backdrop, body:has(.vf-letter) .vf-toasts, body:has(.vf-letter) .vf-confirm, .vf-page-hero, .vf-letter-lang, .vf-letter-full, .vf-pay-notice, .vf-terms-agree, .vf-create-actions, .vf-letter-sign-help { display: none !important; } body:has(.vf-letter) .app-shell, body:has(.vf-letter) .app-main, body:has(.vf-letter) .app-content { display: block !important; height: auto !important; max-height: none !important; min-height: 0 !important; overflow: visible !important; margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; background: #fff !important; } body:has(.vf-letter) .vf-terms { max-width: none; margin: 0; } .vf-letter { max-width: none; margin: 0; box-shadow: none; border-color: #bbb; --deco-scale: 1 !important; padding: 1.1rem 0.4rem 1.4rem !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; } .vf-letter-head h1 { font-size: 1.05rem !important; } .vf-letter-meta, .vf-letter-signoff { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; } .vf-letter-meta .vf-letter-row { flex-direction: row !important; align-items: baseline !important; } .vf-letter-meta .vf-letter-row.is-multiline { align-items: flex-start !important; } .vf-letter-article, .vf-letter-head, .vf-letter-signoff { break-inside: avoid; } @page { margin: 12mm; } } .vf-dash-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.85rem; margin: 0 0 1.25rem; } .vf-dash-stat { --stat-i: 0; --stat-accent: var(--vf-hue-navy); display: flex; flex-direction: column; justify-content: space-between; gap: 0.75rem; min-width: 0; min-height: 6.35rem; padding: 1.05rem 1.15rem 1rem; border: 1px solid color-mix(in srgb, var(--stat-accent) 28%, var(--vf-border)); border-radius: var(--vf-radius); background: radial-gradient(120% 90% at 100% 0%, color-mix(in srgb, var(--stat-accent) 18%, transparent), transparent 58%), var(--vf-surface-1); box-shadow: var(--vf-shadow-sm); opacity: 0; transform: translateY(0.5rem); animation: vf-track-in 0.45s cubic-bezier(0.22, 1, 0.36, 1) both; animation-delay: calc(var(--stat-i) * 70ms); } .vf-dash-stat-top { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; } .vf-dash-stat-ico { width: 2.55rem; height: 2.55rem; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; border-radius: 0.8rem; background: transparent; color: var(--vf-icon); font-size: 1.05rem; line-height: 1; } .vf-dash-stat-ico i { display: inline-flex; line-height: 1; } .vf-dash-stat-value { margin: 0; font-size: 1.7rem; font-weight: 800; letter-spacing: -0.04em; line-height: 1; color: var(--stat-accent, var(--vf-text)); } .vf-dash-stat-label { display: block; color: var(--vf-text-muted); font-size: 0.8rem; font-weight: 700; line-height: 1.3; overflow-wrap: anywhere; } .vf-dash-stat.is-total { --stat-accent: var(--vf-hue-sky); } .vf-dash-stat.is-action { --stat-accent: var(--vf-hue-gold); } .vf-dash-stat.is-progress { --stat-accent: var(--vf-primary); } .vf-dash-stat.is-done { --stat-accent: var(--vf-success); } a.vf-dash-stat { color: inherit; text-decoration: none; } a.vf-dash-stat:hover { border-color: color-mix(in srgb, var(--vf-primary) 40%, var(--vf-border)); box-shadow: var(--vf-shadow-sm); } .vf-dash-stat.is-quiet .vf-dash-stat-value { color: var(--vf-text-muted); } .vf-admin-dash .vf-dash-stats { grid-template-columns: repeat(auto-fit, minmax(11.5rem, 1fr)); } .vf-admin-dash .vf-dash-stats > :nth-child(1) { --stat-accent: var(--vf-hue-teal); } .vf-admin-dash .vf-dash-stats > :nth-child(2) { --stat-accent: var(--vf-hue-rose); } .vf-admin-dash .vf-dash-stats > :nth-child(3) { --stat-accent: var(--vf-hue-gold); } .vf-admin-dash .vf-dash-stats > :nth-child(4) { --stat-accent: var(--vf-hue-sky); } .vf-admin-dash .vf-dash-layout.is-single { grid-template-columns: 1fr; } .vf-dash-links { display: flex; flex-direction: column; gap: 0.45rem; } .vf-dash-link { display: flex; align-items: flex-start; gap: 0.7rem; min-width: 0; padding: 0.75rem 0.85rem; border: 1px solid var(--vf-border); border-radius: var(--vf-radius); background: var(--vf-surface-1); box-shadow: var(--vf-shadow-sm); color: inherit; text-decoration: none; } .vf-dash-link:hover { border-color: color-mix(in srgb, var(--vf-primary) 40%, var(--vf-border)); background: var(--vf-primary-soft); } .vf-dash-link-ico { width: 2.2rem; height: 2.2rem; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; border-radius: 0.7rem; background: var(--vf-primary-soft); color: var(--vf-primary); font-size: 0.95rem; } .vf-dash-link span { min-width: 0; } .vf-dash-link strong { display: block; font-size: 0.88rem; font-weight: 750; } .vf-dash-link small { display: block; margin-top: 0.15rem; color: var(--vf-text-muted); font-size: 0.72rem; font-weight: 600; line-height: 1.35; } .vf-dash-layout { display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(16.5rem, 0.9fr); gap: 1rem; align-items: start; } .vf-dash-head { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; margin: 0 0 0.85rem; } .vf-dash-head h2 { margin: 0; font-size: 1.05rem; font-weight: 750; } .vf-dash-head a { display: inline-flex; align-items: center; gap: 0.35rem; color: var(--vf-primary); font-size: 0.84rem; font-weight: 700; text-decoration: none; } .vf-dash-head a:hover { text-decoration: underline; } .vf-dash-empty { margin: 0; color: var(--vf-text-muted); font-size: 0.88rem; } .vf-dash-updates { display: flex; flex-direction: column; } .vf-dash-update { padding: 0.8rem 0; border-bottom: 1px solid var(--vf-border); } .vf-dash-update:first-child { padding-top: 0; } .vf-dash-update:last-child { padding-bottom: 0; border-bottom: 0; } .vf-dash-update small { display: block; color: var(--vf-text-muted); font-size: 0.72rem; font-weight: 650; } .vf-dash-update strong { display: block; margin-top: 0.2rem; font-size: 0.88rem; font-weight: 750; line-height: 1.35; } .vf-dash-update p { margin: 0.25rem 0 0; color: var(--vf-text-muted); font-size: 0.8rem; line-height: 1.4; } @media (max-width: 991.98px) { .vf-dash-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } .vf-dash-layout { grid-template-columns: 1fr; } } @media (max-width: 575.98px) { .vf-dash-stats { grid-template-columns: 1fr; } } .vf-orders { display: flex; flex-direction: column; gap: 0.5rem; min-height: 0; } .vf-orders .vf-page-hero { margin: 0; padding: 0.45rem 0.75rem; } .vf-orders-card, .vf-dash .vf-order-list { border: 1px solid var(--vf-border); border-radius: var(--vf-radius); background: var(--vf-surface-1); box-shadow: var(--vf-shadow-sm); overflow: hidden; } .vf-order-list { display: flex; flex-direction: column; } .vf-order-row { position: relative; display: grid; grid-template-columns: 7.8rem minmax(0, 1.3fr) minmax(7.25rem, 0.95fr) auto 6.4rem 1.1rem; align-items: center; gap: 0.45rem 0.7rem; min-height: 3.15rem; padding: 0.45rem 0.7rem 0.45rem 0.85rem; border-bottom: 1px solid var(--vf-border); color: inherit; text-decoration: none; } .vf-order-row::before { content: ""; position: absolute; left: 0; top: 0.45rem; bottom: 0.45rem; width: 3px; border-radius: 99px; background: var(--vf-primary); } .vf-order-row.is-success::before { background: var(--vf-success); } .vf-order-row.is-warning::before { background: var(--vf-warning); } .vf-order-row.is-danger::before { background: var(--vf-danger); } .vf-order-row.is-muted::before, .vf-order-row.is-neutral::before { background: var(--vf-text-muted); } .vf-order-row.is-info::before { background: var(--vf-info); } .vf-order-row.is-primary::before { background: var(--vf-primary); } .vf-order-row:hover { background: color-mix(in srgb, var(--vf-primary-soft) 42%, var(--vf-surface-1)); color: inherit; text-decoration: none; } .vf-order-row:last-child { border-bottom: 0; } .vf-order-row-id, .vf-order-row-copy, .vf-order-row-cue { min-width: 0; } .vf-order-row-id strong, .vf-order-row-copy strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.8rem; font-weight: 750; line-height: 1.25; } .vf-order-row-id small, .vf-order-row-copy small { display: block; margin-top: 0.06rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--vf-text-muted); font-size: 0.66rem; font-weight: 650; line-height: 1.25; } .vf-order-row-cue { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--vf-text-muted); font-size: 0.74rem; font-weight: 650; line-height: 1.3; } .vf-order-row-cue.is-primary { color: var(--vf-primary); font-weight: 700; } .vf-order-row-cue.is-warning { color: var(--vf-warning-text); font-weight: 700; } .vf-order-row-cue.is-danger { color: var(--vf-danger); font-weight: 700; } .vf-order-row-cue.is-success { color: var(--vf-success-text); font-weight: 700; } .vf-order-row-status { display: flex; flex-wrap: wrap; align-items: center; gap: 0.22rem; min-width: 0; } .vf-order-row .badge { font-size: 0.6rem; padding: 0.12rem 0.38rem; } .vf-order-row-total { justify-self: end; font-size: 0.8rem; font-weight: 800; white-space: nowrap; } .vf-order-row .vf-inbox-open { justify-self: end; } .vf-filter-bar { display: flex; flex-wrap: wrap; align-items: stretch; gap: 0.65rem; margin: 0 0 1rem; padding: 0.9rem 1rem; border: 1px solid var(--vf-border); border-radius: var(--vf-radius); background: var(--vf-surface-1); box-shadow: var(--vf-shadow-sm); } .vf-search { position: relative; flex: 1 1 16rem; min-width: 0; } .vf-search > i { position: absolute; left: 0.9rem; top: 50%; transform: translateY(-50%); color: var(--vf-primary); pointer-events: none; } .vf-search input { width: 100%; min-height: 3rem; padding: 0.5rem 0.9rem 0.5rem 2.55rem; border: 1px solid var(--vf-border); border-radius: 0.75rem; background: var(--vf-surface-2); color: var(--vf-text); font-weight: 650; } .vf-search input:focus { outline: 0; border-color: var(--vf-primary); background: var(--vf-surface-1); box-shadow: 0 0 0 0.2rem var(--vf-focus-ring); } .vf-filter-bar .vf-select { flex: 0 1 13.5rem; min-width: 11.5rem; } .vf-filter-actions { display: flex; flex-wrap: wrap; align-items: stretch; gap: 0.5rem; margin-left: auto; } .vf-filter-actions .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; min-height: 3rem; padding: 0.5rem 1.05rem; border-radius: 0.75rem; font-weight: 700; } .vf-table-card { overflow: hidden; border: 1px solid var(--vf-border); border-radius: var(--vf-radius); background: var(--vf-surface-1); box-shadow: var(--vf-shadow-sm); } .vf-table-card .table { margin: 0; } .vf-table-card .table thead th { padding: 0.75rem 1rem; white-space: nowrap; } .vf-table-card .table td { padding: 0.9rem 1rem; vertical-align: middle; } .vf-table-card .table tbody tr:last-child > * { border-bottom: 0; } .vf-table-id { display: block; color: inherit; text-decoration: none; } .vf-table-id:hover strong { color: var(--vf-primary); } .vf-table-id strong, .vf-table-name { display: block; font-size: 0.9rem; font-weight: 750; line-height: 1.3; } .vf-table-id small, .vf-table-sub { display: block; margin-top: 0.18rem; color: var(--vf-text-muted); font-size: 0.75rem; font-weight: 600; line-height: 1.35; } .vf-table-stack { display: flex; flex-direction: column; align-items: flex-start; gap: 0.35rem; } .vf-table-amount { font-size: 0.86rem; font-weight: 750; } .vf-table-agent { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.86rem; font-weight: 650; } .vf-table-agent i { color: var(--vf-primary); } .vf-table-actions { text-align: right; white-space: nowrap; } .vf-table-actions .btn { display: inline-flex; align-items: center; gap: 0.35rem; min-height: 2.25rem; padding: 0.35rem 0.85rem; border-radius: 0.65rem; font-weight: 700; } .vf-status-tabs { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0 0 1rem; } .vf-status-tab { display: inline-flex; align-items: center; gap: 0.45rem; min-height: 2.55rem; padding: 0.4rem 0.85rem; border: 1px solid var(--vf-border); border-radius: 0.75rem; background: var(--vf-surface-1); color: var(--vf-text); font-size: 0.86rem; font-weight: 700; text-decoration: none; box-shadow: var(--vf-shadow-sm); } .vf-status-tab i { color: var(--vf-primary); } .vf-status-tab strong { min-width: 1.35rem; padding: 0.08rem 0.4rem; border-radius: 999px; background: var(--vf-surface-2); color: var(--vf-text-muted); font-size: 0.75rem; text-align: center; } .vf-status-tab:hover { border-color: var(--vf-primary); color: inherit; } .vf-status-tab.is-active { border-color: color-mix(in srgb, var(--vf-primary) 45%, var(--vf-border)); background: var(--vf-primary-soft); color: var(--vf-primary); } .vf-status-tab.is-active i, .vf-status-tab.is-active strong { color: var(--vf-primary); } .vf-status-tab.is-active strong { background: var(--vf-surface-1); } body:has(.vf-order-inbox) .app-content { display: flex; flex-direction: column; overflow: hidden; padding: 0.7rem 0.85rem 0.75rem; } .vf-order-inbox { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 0.45rem; overflow: hidden; } .vf-order-inbox .vf-page-hero { flex-shrink: 0; margin: 0; padding: 0.55rem 0.8rem 0.5rem; gap: 0.45rem; } .vf-order-inbox .vf-page-hero-top { flex-wrap: nowrap; gap: 0.55rem; } .vf-order-inbox .vf-page-hero-icon { width: 2.35rem; height: 2.35rem; font-size: 1.05rem; border-radius: 0.65rem; } .vf-order-inbox .vf-page-hero-copy { min-width: 0; flex: 1; } .vf-order-inbox .vf-page-hero-copy h1 { font-size: 1.08rem; } .vf-order-inbox .vf-page-hero-copy p { margin-top: 0.12rem; font-size: 0.78rem; } .vf-order-inbox .vf-page-hero-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.4rem; width: 100%; margin: 0; padding: 0.45rem 0 0; border-top: 1px solid var(--vf-border); } .vf-order-inbox .vf-page-hero-facts .vf-meta-item { min-width: 0; padding: 0.35rem 0.5rem; gap: 0.4rem; } .vf-order-inbox .vf-page-hero-facts .vf-meta-item i { width: 1.55rem; height: 1.55rem; font-size: 0.72rem; } .vf-order-inbox .vf-page-hero-facts .vf-meta-item span { font-size: 0.62rem; } .vf-order-inbox .vf-page-hero-facts .vf-meta-item strong { font-size: 0.92rem; } .vf-order-inbox-card { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--vf-border); border-radius: var(--vf-radius); background: var(--vf-surface-1); box-shadow: var(--vf-shadow-sm); } .vf-order-inbox-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 0.45rem 0.7rem; flex-shrink: 0; padding: 0.35rem 0.45rem 0.35rem 0.4rem; border-bottom: 1px solid var(--vf-border); background: color-mix(in srgb, var(--vf-surface-2, var(--vf-bg)) 72%, var(--vf-surface-1)); } .vf-order-inbox-search { position: relative; display: flex; align-items: center; flex: 0 1 18rem; max-width: 20rem; min-width: 0; margin-left: auto; } .vf-order-inbox-search > i { position: absolute; left: 0.55rem; color: var(--vf-icon); font-size: 0.72rem; pointer-events: none; } .vf-order-inbox-search input[type="search"] { width: 100%; height: 1.9rem; margin: 0; padding: 0.2rem 3.4rem 0.2rem 1.7rem; border: 1px solid var(--vf-border); border-radius: 0.55rem; background: var(--vf-surface-2); color: var(--vf-text); font-size: 0.76rem; font-weight: 650; } .vf-order-inbox-search input[type="search"]:focus { outline: 0; border-color: var(--vf-primary); background: var(--vf-surface-1); box-shadow: 0 0 0 0.15rem var(--vf-focus-ring); } .vf-order-inbox-clear, .vf-order-inbox-go { position: absolute; top: 50%; transform: translateY(-50%); width: 1.45rem; height: 1.45rem; display: inline-flex; align-items: center; justify-content: center; margin: 0; padding: 0; border: 0; border-radius: 0.38rem; background: transparent; color: var(--vf-text-muted); font-size: 0.7rem; text-decoration: none; cursor: pointer; } .vf-order-inbox-clear { right: 1.7rem; } .vf-order-inbox-go { right: 0.18rem; background: var(--vf-primary-soft); color: var(--vf-primary); } .vf-order-inbox-clear:hover, .vf-order-inbox-go:hover { color: var(--vf-primary); text-decoration: none; } .vf-order-inbox-tabs { display: flex; flex-wrap: nowrap; gap: 0.18rem; flex: 1 1 auto; min-width: 0; overflow-x: auto; padding: 0; scrollbar-width: thin; } .vf-order-inbox-tab { display: inline-flex; align-items: center; gap: 0.28rem; min-height: 1.7rem; padding: 0.14rem 0.5rem; border: 1px solid transparent; border-radius: 999px; background: transparent; color: var(--vf-text-muted); font-size: 0.72rem; font-weight: 750; text-decoration: none; white-space: nowrap; } .vf-order-inbox-tab i { font-size: 0.68rem; } .vf-order-inbox-tab strong { min-width: 1.05rem; padding: 0.02rem 0.28rem; border-radius: 999px; background: var(--vf-surface-2); color: var(--vf-text-muted); font-size: 0.64rem; text-align: center; } .vf-order-inbox-tab.has-work strong { background: var(--vf-primary-soft); color: var(--vf-primary); } .vf-order-inbox-tab:hover { color: var(--vf-text); background: var(--vf-surface-2); text-decoration: none; } .vf-order-inbox-tab.is-active { border-color: color-mix(in srgb, var(--vf-primary) 36%, var(--vf-border)); background: var(--vf-primary-soft); color: var(--vf-primary); } .vf-order-inbox-tab.is-active i, .vf-order-inbox-tab.is-active strong { color: var(--vf-primary); } .vf-order-inbox-tab.is-active strong { background: var(--vf-surface-1); } .vf-order-inbox-list { flex: 1; min-height: 0; overflow: auto; scrollbar-width: thin; } .vf-order-inbox-empty { display: flex; align-items: center; justify-content: center; gap: 0.45rem; flex: 1; min-height: 8rem; padding: 1.25rem; color: var(--vf-text-muted); font-size: 0.8rem; font-weight: 650; } .vf-order-inbox-empty i { color: var(--vf-icon); } .vf-inbox-row { position: relative; display: grid; grid-template-columns: 7.6rem minmax(8.5rem, 1fr) minmax(9rem, 1.15fr) minmax(8.25rem, auto) 6.4rem minmax(6.4rem, 7.4rem) 1.15rem; align-items: center; gap: 0.45rem 0.7rem; min-height: 3.05rem; padding: 0.4rem 0.7rem 0.4rem 0.85rem; border-bottom: 1px solid var(--vf-border); color: inherit; text-decoration: none; } .vf-inbox-row::before { content: ""; position: absolute; left: 0; top: 0.45rem; bottom: 0.45rem; width: 3px; border-radius: 99px; background: var(--vf-primary); } .vf-inbox-row.is-success::before { background: var(--vf-success); } .vf-inbox-row.is-warning::before { background: var(--vf-warning); } .vf-inbox-row.is-danger::before { background: var(--vf-danger); } .vf-inbox-row.is-muted::before, .vf-inbox-row.is-neutral::before { background: var(--vf-text-muted); } .vf-inbox-row.is-info::before { background: var(--vf-info); } .vf-inbox-row.is-primary::before { background: var(--vf-primary); } .vf-inbox-row:hover { background: color-mix(in srgb, var(--vf-primary-soft) 42%, var(--vf-surface-1)); color: inherit; text-decoration: none; } .vf-inbox-row:last-child { border-bottom: 0; } .vf-inbox-id, .vf-inbox-who, .vf-inbox-job, .vf-inbox-agent { min-width: 0; } .vf-inbox-id strong, .vf-inbox-who strong, .vf-inbox-job strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.78rem; font-weight: 750; line-height: 1.25; } .vf-inbox-id small, .vf-inbox-who small { display: block; margin-top: 0.06rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--vf-text-muted); font-size: 0.66rem; font-weight: 650; line-height: 1.25; } .vf-inbox-state { display: flex; flex-wrap: wrap; align-items: center; gap: 0.22rem; min-width: 0; } .vf-inbox-row .badge { font-size: 0.6rem; padding: 0.12rem 0.38rem; } .vf-inbox-flag { display: inline-flex; align-items: center; justify-content: center; gap: 0.12rem; min-width: 1.25rem; height: 1.25rem; padding: 0 0.28rem; border-radius: 999px; font-size: 0.62rem; font-weight: 800; line-height: 1; } .vf-inbox-flag.is-warn { background: var(--vf-warning-soft); color: var(--vf-warning-text); } .vf-inbox-flag.is-wait { background: var(--vf-warning-soft); color: var(--vf-warning-text); } .vf-inbox-flag.is-ok { background: var(--vf-success-soft); color: var(--vf-success); } .vf-inbox-flag.is-chat { background: var(--vf-primary-soft); color: var(--vf-primary); } .vf-inbox-money { justify-self: end; font-size: 0.76rem; font-weight: 800; white-space: nowrap; } .vf-inbox-agent { display: inline-flex; align-items: center; gap: 0.28rem; overflow: hidden; color: var(--vf-text); font-size: 0.72rem; font-weight: 650; white-space: nowrap; text-overflow: ellipsis; } .vf-inbox-agent i { flex-shrink: 0; color: var(--vf-icon); font-size: 0.7rem; } .vf-inbox-agent.is-empty { color: var(--vf-text-muted); } .vf-inbox-open { display: inline-flex; align-items: center; justify-content: center; color: var(--vf-text-muted); font-size: 0.68rem; } .vf-inbox-row:hover .vf-inbox-open { color: var(--vf-primary); } @media (max-width: 1199.98px) { .vf-inbox-row { grid-template-columns: 7.2rem minmax(8rem, 1fr) minmax(8rem, 1.1fr) minmax(7.5rem, auto) 6rem 1.15rem; } .vf-inbox-agent { display: none; } } @media (max-width: 991.98px) { body:has(.vf-order-inbox) .app-content { overflow-y: auto; padding: 0.7rem 0.75rem 0.85rem; } .vf-order-inbox { flex: none; overflow: visible; } .vf-order-inbox-card { flex: none; overflow: visible; } .vf-order-inbox-list { overflow: visible; } .vf-order-inbox-toolbar { flex-wrap: wrap; } .vf-order-inbox-search { flex: 1 1 100%; max-width: none; margin-left: 0; } .vf-order-inbox .vf-page-hero-top { flex-wrap: wrap; } .vf-order-inbox .vf-page-hero-facts { grid-template-columns: 1fr; } .vf-inbox-row { grid-template-columns: minmax(0, 1fr) auto 1.15rem; grid-template-areas: "id money open" "who money open" "job state open"; gap: 0.18rem 0.55rem; min-height: 0; padding: 0.55rem 0.7rem 0.55rem 0.85rem; } .vf-inbox-id { grid-area: id; } .vf-inbox-who { grid-area: who; } .vf-inbox-job { grid-area: job; } .vf-inbox-state { grid-area: state; justify-self: end; } .vf-inbox-money { grid-area: money; } .vf-inbox-open { grid-area: open; } } .vf-money.is-warn { color: var(--vf-danger-text); } .vf-trx-inline { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-weight: 650; } .vf-method-card { margin-bottom: 0.75rem; padding: 0.85rem 1rem; } .vf-method-card.is-inactive { background: var(--vf-surface-2); opacity: 0.88; } .vf-method-head { display: flex; align-items: center; gap: 0.7rem; margin-bottom: 0.75rem; } .vf-method-head h6 { display: flex; align-items: center; gap: 0.4rem; margin: 0; font-size: 0.95rem; font-weight: 750; } .vf-method-head .vf-pay-brand-logo { height: 1.15rem; width: auto; } .vf-method-head-copy { display: flex; align-items: center; flex-wrap: wrap; gap: 0.45rem 0.65rem; min-width: 0; flex: 1; } .vf-method-head-title { min-width: 0; flex: 1 1 8rem; } .vf-method-account { display: block; margin-top: 0.12rem; font-size: 0.74rem; font-weight: 600; color: var(--vf-text-muted); line-height: 1.35; } .vf-method-badges { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem; } .vf-method-head-actions { display: flex; align-items: center; gap: 0.35rem; margin-left: auto; } .vf-method-head-actions .btn:disabled { opacity: 0.45; } .vf-method-qr { width: 3.35rem; height: 3.35rem; display: flex; align-items: center; justify-content: center; flex-shrink: 0; overflow: hidden; border: 1px solid var(--vf-border); border-radius: 0.45rem; background: var(--vf-paper); color: var(--vf-text-muted); } .vf-method-qr a { display: block; width: 100%; height: 100%; } .vf-method-qr img { display: block; width: 100%; height: 100%; object-fit: contain; } .vf-method-qr.is-empty { background: var(--vf-surface-2); border-style: dashed; } .vf-method-qr.is-warn { color: var(--vf-warning-text); border-color: var(--vf-warning); } .vf-method-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0.55rem 0.65rem; margin-bottom: 0.7rem; } .vf-method-field { grid-column: span 2; } .vf-method-field.is-note, .vf-method-field.is-note-bn { grid-column: span 3; } .vf-method-field .form-label, .vf-method-field > .form-label { margin-bottom: 0.2rem; font-size: 0.72rem; font-weight: 700; } .vf-method-field .form-check-label { font-size: 0.75rem; } .vf-method-hint { margin: 0.2rem 0 0; font-size: 0.68rem; color: var(--vf-text-muted); line-height: 1.3; } .vf-method-file-row { display: flex; align-items: stretch; gap: 0.35rem; } .vf-method-file-row .vf-method-file { flex: 1; min-width: 0; } .vf-method-file-remove { display: inline-flex; align-items: center; justify-content: center; width: calc(1.5em + 0.5rem + 2px); padding: 0; flex-shrink: 0; } .vf-method-file { display: flex; align-items: center; gap: 0.4rem; min-height: calc(1.5em + 0.5rem + 2px); margin: 0; padding: 0 0.55rem; border: 1px dashed var(--vf-border); border-radius: var(--vf-radius-sm); background: var(--vf-surface-2); cursor: pointer; font-size: 0.78rem; font-weight: 650; overflow: hidden; } .vf-method-file i { color: var(--vf-primary); flex-shrink: 0; } .vf-method-file span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .vf-method-file:hover, .vf-method-file.has-file { border-color: var(--vf-primary); background: var(--vf-primary-soft); color: var(--vf-primary); } .vf-method-actions { display: flex; justify-content: flex-end; margin-top: 0.15rem; } .vf-method-create { border-style: dashed; } .vf-method-create .vf-method-head { margin-bottom: 0.65rem; align-items: flex-start; } .vf-method-create .vf-method-grid { grid-template-columns: 1fr 1fr; grid-template-areas: "name namebn" "account number" "sort qr" "note notebn"; } .vf-method-create .vf-method-field, .vf-method-create .vf-method-field.is-note, .vf-method-create .vf-method-field.is-note-bn { grid-column: auto; } .vf-method-create .is-name { grid-area: name; } .vf-method-create .is-name-bn { grid-area: namebn; } .vf-method-create .is-account { grid-area: account; } .vf-method-create .is-number { grid-area: number; } .vf-method-create .is-sort { grid-area: sort; } .vf-method-create .is-qr { grid-area: qr; } .vf-method-create .is-note { grid-area: note; } .vf-method-create .is-note-bn { grid-area: notebn; } @media (max-width: 767.98px) { .vf-method-grid, .vf-method-create .vf-method-grid { grid-template-columns: 1fr; grid-template-areas: none; } .vf-method-field, .vf-method-field.is-note, .vf-method-field.is-note-bn, .vf-method-create .vf-method-field { grid-column: auto; grid-area: auto; } .vf-method-head { flex-wrap: wrap; } .vf-method-head-actions { width: 100%; margin-left: 0; } } .vf-svc-back { display: inline-flex; align-items: center; gap: 0.4rem; margin: 0 0 0.75rem; color: var(--vf-text-muted); font-size: 0.82rem; font-weight: 700; text-decoration: none; } .vf-svc-back:hover { color: var(--vf-primary); } .vf-svc-links { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: -0.35rem 0 1rem; } .vf-svc-toolbar { display: flex; flex-wrap: wrap; gap: 0.45rem; margin: -0.35rem 0 1rem; } .vf-svc-card { margin-bottom: 0.75rem; padding: 0.95rem 1rem; } .vf-svc-card.is-inactive, .vf-svc-variant.is-inactive { background: var(--vf-surface-2); opacity: 0.9; } .vf-svc-card-head { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; } .vf-svc-icon { width: 2.7rem; height: 2.7rem; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; border-radius: 0.85rem; background: var(--vf-primary-soft); color: var(--vf-primary); font-size: 1.15rem; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--vf-primary) 18%, transparent); } .vf-svc-icon.is-sm { width: 2.1rem; height: 2.1rem; border-radius: 0.65rem; font-size: 0.92rem; } .vf-svc-card-copy { min-width: 0; flex: 1 1 10rem; } .vf-svc-card-copy h6, .vf-svc-section-head h6, .vf-svc-variant-title, .vf-svc-panel h6 { display: flex; align-items: center; flex-wrap: wrap; gap: 0.4rem; margin: 0; font-size: 0.95rem; font-weight: 750; } .vf-svc-section-head h6 i, .vf-svc-card-copy h6 i { color: var(--vf-primary); } .vf-svc-card-sub, .vf-svc-variant-meta { display: block; margin-top: 0.12rem; color: var(--vf-text-muted); font-size: 0.75rem; font-weight: 600; line-height: 1.4; } .vf-svc-card-badges { display: flex; flex-wrap: wrap; gap: 0.3rem; } .vf-svc-card-actions { display: flex; align-items: center; gap: 0.35rem; margin-left: auto; } .vf-svc-card-meta { display: flex; flex-wrap: wrap; gap: 0.75rem 1.1rem; margin-top: 0.75rem; color: var(--vf-text-muted); font-size: 0.78rem; font-weight: 650; } .vf-svc-card-meta span { display: inline-flex; align-items: center; gap: 0.35rem; } .vf-svc-card-meta i { color: var(--vf-primary); } .vf-svc-chips { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.7rem; } .vf-svc-chip { display: inline-flex; align-items: center; min-height: 1.55rem; padding: 0.12rem 0.55rem; border: 1px solid var(--vf-border); border-radius: 999px; background: var(--vf-surface-2); font-size: 0.72rem; font-weight: 700; } .vf-svc-chip.is-off { opacity: 0.55; } .vf-svc-create { border-style: dashed; } .vf-svc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.55rem 0.65rem; margin-top: 0.75rem; } .vf-svc-grid.is-wide { grid-template-columns: repeat(4, minmax(0, 1fr)); } .vf-svc-grid.is-wide .vf-svc-field:nth-child(-n+4), .vf-svc-grid.is-add .vf-svc-field, .vf-svc-grid.is-fees .vf-svc-field { grid-column: span 1; } .vf-svc-grid.is-add { grid-template-columns: repeat(6, minmax(0, 1fr)); align-items: end; } .vf-svc-grid.is-fees { grid-template-columns: repeat(6, minmax(0, 1fr)); align-items: end; } .vf-svc-grid.is-center { grid-template-columns: minmax(6.5rem, 1.1fr) minmax(5.5rem, 0.85fr) minmax(7rem, 1.6fr) 4.6rem auto; align-items: end; } .vf-svc-grid.is-docs { grid-template-columns: minmax(7rem, 1.2fr) minmax(7rem, 1.2fr) 6.2rem 4.6rem auto; align-items: end; } .vf-svc-field { min-width: 0; } .vf-svc-field.is-full { grid-column: 1 / -1; } .vf-svc-field.is-mimes { margin-top: 0.7rem; } .vf-svc-field.is-mimes .form-label { display: block; } .vf-svc-mimes { display: flex; flex-wrap: wrap; gap: 0.35rem; } .vf-svc-mime { display: inline-flex; align-items: center; gap: 0.3rem; min-height: 1.7rem; margin: 0; padding: 0.12rem 0.55rem; border: 1px solid var(--vf-border); border-radius: 999px; background: var(--vf-surface-2); cursor: pointer; font-size: 0.72rem; font-weight: 750; user-select: none; } .vf-svc-mime:has(input:checked) { border-color: color-mix(in srgb, var(--vf-primary) 45%, var(--vf-border)); background: var(--vf-primary-soft); color: var(--vf-primary); } .vf-svc-mime .form-check-input { margin: 0; width: 0.85rem; height: 0.85rem; } .vf-svc-field.is-check, .vf-svc-field.is-submit { display: flex; align-items: end; min-height: 2.4rem; } .vf-svc-grid.is-wide .vf-svc-field:nth-child(1), .vf-svc-grid.is-wide .vf-svc-field:nth-child(2), .vf-svc-grid.is-wide .vf-svc-field:nth-child(3), .vf-svc-grid.is-wide .vf-svc-field:nth-child(4) { grid-column: span 2; } .vf-svc-field .form-label { margin-bottom: 0.2rem; font-size: 0.72rem; font-weight: 700; } .vf-svc-hint { margin: 0.25rem 0 0; color: var(--vf-text-muted); font-size: 0.72rem; line-height: 1.4; } .vf-svc-icon-field { display: flex; align-items: center; gap: 0.4rem; } .vf-svc-icon-field .form-control { flex: 1; min-width: 0; } .vf-svc-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.45rem; margin-top: 0.85rem; } .vf-svc-create .vf-svc-actions { margin-top: 0.7rem; } .vf-svc-section-head { display: flex; align-items: center; gap: 0.5rem; margin: 0 0 0.15rem; } .vf-svc-count { min-width: 1.35rem; padding: 0.08rem 0.4rem; border-radius: 999px; background: var(--vf-surface-2); color: var(--vf-text-muted); font-size: 0.75rem; font-weight: 750; text-align: center; } .vf-svc-variants { margin-top: 1.15rem; } .vf-svc-variant { margin-bottom: 0.75rem; padding: 0; overflow: hidden; scroll-margin-top: 1rem; } .vf-svc-variant-head { display: flex; align-items: center; gap: 0.65rem; padding: 0.85rem 1rem; } .vf-svc-fold { display: flex; align-items: center; gap: 0.65rem; min-width: 0; flex: 1; margin: 0; padding: 0; border: 0; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; } .vf-svc-fold:hover .vf-svc-variant-title { color: var(--vf-primary); } .vf-svc-fold:focus-visible { outline: 2px solid var(--vf-primary); outline-offset: 2px; border-radius: 0.5rem; } .vf-svc-caret { color: var(--vf-text-muted); transition: transform 0.2s ease; } .vf-svc-variant:not(.is-collapsed) > .vf-svc-variant-head .vf-svc-caret { transform: rotate(180deg); color: var(--vf-primary); } .vf-svc-variant.is-collapsed .vf-svc-variant-body { display: none; } .vf-svc-variant-copy { min-width: 0; flex: 1; } .vf-svc-variant-actions { display: flex; align-items: center; gap: 0.35rem; margin-left: auto; } .vf-svc-variant-body { padding: 0 1rem 1rem; border-top: 1px solid var(--vf-border); } .vf-svc-panel { margin-top: 0.9rem; } .vf-svc-panel h6 { margin-bottom: 0.45rem; font-size: 0.82rem; color: var(--vf-text-muted); text-transform: uppercase; letter-spacing: 0.04em; } .vf-svc-table th { font-size: 0.72rem; font-weight: 750; color: var(--vf-text-muted); } .vf-svc-table td .vf-table-sub { display: inline; margin-left: 0.25rem; } .vf-svc-table tr.is-muted { color: var(--vf-text-muted); } .vf-svc-docs { display: flex; flex-wrap: nowrap; gap: 0.4rem; } .vf-svc-doc { position: relative; display: flex; flex: 1 1 0; flex-direction: row; align-items: center; gap: 0.4rem; min-width: 0; min-height: 2.7rem; padding: 0.4rem 0.5rem; border: 1px solid var(--vf-border); border-radius: 0.7rem; background: var(--vf-surface-2); } .vf-svc-doc.is-on { border-color: color-mix(in srgb, var(--vf-primary) 40%, var(--vf-border)); background: var(--vf-primary-soft); } .vf-svc-doc.is-off { opacity: 0.6; } .vf-svc-doc-main { display: flex; align-items: center; gap: 0.4rem; min-width: 0; flex: 1; margin: 0; cursor: pointer; font-size: 0.8rem; font-weight: 700; } .vf-svc-doc-main i { flex-shrink: 0; color: var(--vf-primary); } .vf-svc-doc-main span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .vf-svc-doc-req-input { position: absolute; width: 0; height: 0; opacity: 0; pointer-events: none; } .vf-svc-switch { position: relative; flex-shrink: 0; width: 2.35rem; height: 1.35rem; margin: 0; padding: 0; border: 0; border-radius: 999px; background: color-mix(in srgb, var(--vf-text-muted) 28%, var(--vf-surface-1)); cursor: pointer; transition: background 0.18s ease; } .vf-svc-switch-knob { position: absolute; top: 0.15rem; left: 0.15rem; width: 1.05rem; height: 1.05rem; border-radius: 50%; background: var(--vf-paper); box-shadow: 0 1px 3px rgba(15, 23, 42, 0.28); transition: transform 0.18s ease; } .vf-svc-switch.is-on { background: var(--vf-primary); } .vf-svc-switch.is-on .vf-svc-switch-knob { transform: translateX(1rem); } .vf-svc-switch:focus-visible { outline: 2px solid var(--vf-primary); outline-offset: 2px; } .vf-svc-doc:not(.is-on) .vf-svc-switch { opacity: 0.45; } .vf-svc-manage .vf-svc-back { margin: 0; font-size: 0.75rem; } .vf-svc-manage-head { display: flex; align-items: center; flex-wrap: wrap; gap: 0.45rem 0.85rem; margin: 0 0 0.7rem; padding: 0.7rem 0.85rem 0.75rem; border: 1px solid var(--vf-border); border-radius: var(--vf-radius); background: radial-gradient(280px 120px at 0% 0%, color-mix(in srgb, var(--vf-primary) 12%, transparent), transparent 70%), var(--vf-surface-1); box-shadow: var(--vf-shadow-sm); } .vf-svc-manage-head .vf-svc-back { flex: 1 0 100%; } .vf-svc-manage-title { display: flex; align-items: center; gap: 0.6rem; min-width: 0; flex: 1; } .vf-svc-manage-title h1 { display: flex; align-items: center; flex-wrap: wrap; gap: 0.4rem; margin: 0; font-size: 1.08rem; font-weight: 750; line-height: 1.25; } .vf-svc-manage-title p { display: flex; flex-wrap: wrap; gap: 0.2rem 0.7rem; margin: 0.1rem 0 0; color: var(--vf-text-muted); font-size: 0.74rem; font-weight: 650; } .vf-svc-manage-actions { display: flex; align-items: center; gap: 0.3rem; margin-left: auto; } .vf-svc-manage-actions .btn { display: inline-flex; align-items: center; gap: 0.3rem; } .vf-svc-details { padding: 0; } .vf-svc-details summary { display: flex; align-items: center; gap: 0.45rem; padding: 0.55rem 0.8rem; cursor: pointer; list-style: none; } .vf-svc-details summary::-webkit-details-marker { display: none; } .vf-svc-details summary i { color: var(--vf-primary); } .vf-svc-details summary strong { font-size: 0.86rem; } .vf-svc-details summary span { color: var(--vf-text-muted); font-size: 0.74rem; font-weight: 600; } .vf-svc-details summary .vf-svc-caret { margin-left: auto; } .vf-svc-details[open] summary .vf-svc-caret { transform: rotate(180deg); color: var(--vf-primary); } .vf-svc-details[open] summary { border-bottom: 1px solid var(--vf-border); } .vf-svc-details form { padding: 0.65rem 0.8rem 0.7rem; } .vf-svc-details .vf-svc-grid { margin-top: 0; } .vf-svc-manage .vf-svc-grid.is-wide .vf-svc-field, .vf-svc-manage .vf-svc-grid.is-wide .vf-svc-field:nth-child(1), .vf-svc-manage .vf-svc-grid.is-wide .vf-svc-field:nth-child(2), .vf-svc-manage .vf-svc-grid.is-wide .vf-svc-field:nth-child(3), .vf-svc-manage .vf-svc-grid.is-wide .vf-svc-field:nth-child(4) { grid-column: span 1; } .vf-svc-manage .vf-svc-grid.is-wide .vf-svc-field:nth-child(9), .vf-svc-manage .vf-svc-grid.is-wide .vf-svc-field:nth-child(10) { grid-column: span 2; } .vf-svc-manage .vf-svc-variants { margin-top: 0.7rem; } .vf-svc-manage .vf-svc-card, .vf-svc-manage .vf-svc-variant { margin-bottom: 0.5rem; } .vf-svc-add-wrap { margin: 0.45rem 0 0.65rem; padding: 0.55rem 0.65rem 0.6rem; border: 1px dashed var(--vf-border); border-radius: var(--vf-radius); background: var(--vf-surface-1); } .vf-svc-add-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.35rem 0.75rem; margin-bottom: 0.45rem; } .vf-svc-add-head h6 { margin: 0; font-size: 0.82rem; } .vf-svc-add-head h6 i { margin-right: 0.3rem; color: var(--vf-primary); } .vf-svc-add-head span { color: var(--vf-text-muted); font-size: 0.72rem; font-weight: 600; line-height: 1.35; } .vf-svc-add { display: grid; grid-template-columns: minmax(8rem, 1.4fr) minmax(7rem, 1.2fr) 6rem 6rem auto auto; gap: 0.45rem 0.5rem; align-items: end; } .vf-svc-add .vf-svc-field { min-width: 0; } .vf-svc-add-check { display: flex; align-items: center; gap: 0.3rem; min-height: calc(1.5em + 0.5rem + 2px); margin: 0; font-size: 0.74rem; font-weight: 650; white-space: nowrap; } .vf-svc-manage .vf-svc-variant-head { padding: 0.5rem 0.7rem; } .vf-svc-manage .vf-svc-variant-body { padding: 0.55rem 0.7rem 0.65rem; } .vf-svc-manage .vf-svc-actions { margin-top: 0.5rem; } .vf-svc-manage .vf-svc-panel { margin-top: 0.65rem; } .vf-svc-rates { display: flex; flex-wrap: nowrap; gap: 0.4rem; } .vf-svc-rate { display: flex; flex: 1 1 0; flex-direction: column; gap: 0.35rem; min-width: 0; padding: 0.45rem 0.5rem 0.5rem; border: 1px solid var(--vf-border); border-radius: 0.55rem; background: var(--vf-surface-2); } .vf-svc-rate.is-muted { opacity: 0.65; } .vf-svc-rate-name { display: flex; align-items: center; gap: 0.4rem; min-width: 0; margin: 0; font-size: 0.8rem; font-weight: 750; cursor: pointer; } .vf-svc-rate-name span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .vf-svc-rate-fees { display: grid; grid-template-columns: 1fr 1fr; gap: 0.3rem; } .vf-svc-rate-fees label { display: flex; flex-direction: column; gap: 0.12rem; margin: 0; color: var(--vf-text-muted); font-size: 0.64rem; font-weight: 750; } @media (max-width: 991.98px) { .vf-svc-grid.is-wide, .vf-svc-grid.is-add, .vf-svc-grid.is-fees, .vf-svc-add { grid-template-columns: 1fr 1fr; } .vf-svc-grid.is-wide .vf-svc-field:nth-child(1), .vf-svc-grid.is-wide .vf-svc-field:nth-child(2), .vf-svc-grid.is-wide .vf-svc-field:nth-child(3), .vf-svc-grid.is-wide .vf-svc-field:nth-child(4), .vf-svc-manage .vf-svc-grid.is-wide .vf-svc-field:nth-child(9), .vf-svc-manage .vf-svc-grid.is-wide .vf-svc-field:nth-child(10) { grid-column: auto; } .vf-svc-add-check, .vf-svc-add .btn { grid-column: span 1; } } @media (max-width: 767.98px) { .vf-svc-card-head > .btn { width: 100%; } .vf-svc-card-actions { width: 100%; margin-left: 0; } .vf-svc-card-actions .btn span { display: none; } .vf-svc-variant-head, .vf-svc-manage-head { flex-wrap: wrap; } .vf-svc-variant-actions, .vf-svc-manage-actions { width: 100%; margin-left: 0; } .vf-svc-details summary span, .vf-svc-add-head span { display: none; } .vf-svc-manage-actions .btn span { display: none; } .vf-svc-grid, .vf-svc-grid.is-wide, .vf-svc-grid.is-add, .vf-svc-grid.is-fees, .vf-svc-grid.is-center, .vf-svc-grid.is-docs, .vf-svc-add { grid-template-columns: 1fr; } .vf-svc-rates, .vf-svc-docs { flex-wrap: wrap; } .vf-svc-rate, .vf-svc-doc { flex: 1 1 calc(50% - 0.35rem); } .vf-svc-field.is-check, .vf-svc-field.is-submit { min-height: 0; } } @media (max-width: 767.98px) { .vf-filter-bar .vf-select, .vf-filter-actions { flex: 1 1 100%; min-width: 0; margin-left: 0; } .vf-filter-actions .btn { flex: 1; } } .vf-track { display: flex; align-items: flex-start; margin: 0; padding: 0.55rem 0.15rem 0.1rem; list-style: none; overflow-x: auto; scrollbar-width: thin; } .vf-track-step { --track-i: 0; position: relative; flex: 1 1 0; min-width: 5.4rem; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 0 0.2rem; opacity: 0; transform: translateY(0.55rem); animation: vf-track-in 0.48s cubic-bezier(0.22, 1, 0.36, 1) both; animation-delay: calc(var(--track-i) * 90ms); } .vf-track-step::before { content: ""; position: absolute; top: 1.05rem; left: calc(50% + 1.15rem); right: calc(-50% + 1.15rem); height: 3px; border-radius: 99px; background: var(--vf-border-strong); transform: scaleX(0); transform-origin: left; animation: vf-track-line 0.45s ease both; animation-delay: calc(var(--track-i) * 90ms + 180ms); } .vf-track-step:last-child::before { content: none; } .vf-track-step.is-done::before { background: var(--vf-success-text); } .vf-track-step.is-active::before { background: linear-gradient(to right, var(--vf-primary) 0%, var(--vf-border-strong) 100%); } .vf-track-dot { position: relative; z-index: 1; width: 2.1rem; height: 2.1rem; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; border-radius: 999px; border: 2px solid var(--vf-border-strong); background: var(--vf-surface-1); color: var(--vf-text-muted); font-size: 0.76rem; } .vf-track-step.is-done .vf-track-dot { border-color: var(--vf-success-text); background: var(--vf-success-soft); color: var(--vf-success-text); } .vf-track-step.is-active .vf-track-dot { border-color: var(--vf-primary); background: var(--vf-primary-soft); color: var(--vf-primary); box-shadow: 0 0 0 4px var(--vf-focus-ring); } .vf-track-step.is-active .vf-track-dot::after { content: ""; position: absolute; inset: -6px; border-radius: 999px; border: 2px solid var(--vf-primary); animation: vf-track-pulse 1.85s ease-out infinite; } .vf-track-label { margin-top: 0.55rem; max-width: 7.2rem; font-size: 0.74rem; font-weight: 700; line-height: 1.3; color: var(--vf-text-muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .vf-track-step.is-done .vf-track-label { color: var(--vf-text); } .vf-track-step.is-active .vf-track-label { color: var(--vf-primary); font-weight: 800; } @keyframes vf-track-in { to { opacity: 1; transform: none; } } @keyframes vf-track-line { from { transform: scaleX(0); } to { transform: scaleX(1); } } @keyframes vf-track-pulse { 0% { opacity: 0.55; transform: scale(0.9); } 70% { opacity: 0; transform: scale(1.28); } 100% { opacity: 0; transform: scale(1.28); } } .vf-appt-actions { display: flex; flex-wrap: wrap; gap: 0.55rem; margin-top: 1rem; } .vf-appt-actions .btn { display: inline-flex; align-items: center; min-height: 2.4rem; padding: 0.4rem 0.95rem; border-radius: 0.65rem; font-weight: 700; } .vf-note-list { display: grid; gap: 0.75rem; } .vf-note-item { padding: 0.8rem 0.9rem; border: 1px solid var(--vf-border); border-radius: var(--vf-radius-md); background: var(--vf-surface-2); } .vf-note-item small { display: block; color: var(--vf-text-muted); font-weight: 650; } .vf-note-item p { margin: 0.3rem 0 0; white-space: pre-wrap; overflow-wrap: anywhere; } .vf-note-composer { display: flex; flex-direction: row; align-items: center; gap: 0.55rem; margin-top: 0.85rem; padding-top: 0.85rem; border-top: 1px solid var(--vf-border); } .vf-note-composer input { flex: 1 1 auto; min-width: 0; height: 2.65rem; padding: 0 1rem; border: 1px solid var(--vf-border); border-radius: 1.4rem; background: var(--vf-surface-1); color: var(--vf-text); line-height: 1.4; } .vf-note-composer input:focus { outline: none; border-color: var(--vf-primary); box-shadow: 0 0 0 3px var(--vf-focus-ring); } .vf-note-composer .btn { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; height: 2.65rem; min-height: 2.65rem; padding: 0 1.05rem; border-radius: 1.4rem; white-space: nowrap; line-height: 1; } .vf-note-composer .btn .fa-duotone { --fa-primary-color: currentColor; --fa-secondary-color: currentColor; --fa-secondary-opacity: 0.7; font-size: 0.85rem; line-height: 1; } .vf-order-pay-status { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; margin: 0.85rem 0 1rem; padding-top: 0.85rem; border-top: 1px solid var(--vf-border); font-size: 0.86rem; font-weight: 650; } @media (max-width: 767.98px) { .vf-order-row { grid-template-columns: minmax(0, 1fr) auto 1.1rem; grid-template-areas: "id money open" "copy copy open" "cue cue open" "state state open"; } .vf-order-row-cue:empty { display: none; } .vf-order-row-id { grid-area: id; } .vf-order-row-copy { grid-area: copy; } .vf-order-row-cue { grid-area: cue; } .vf-order-row-status { grid-area: state; } .vf-order-row-total { grid-area: money; } .vf-order-row .vf-inbox-open { grid-area: open; } } @keyframes vf-upload-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } } @keyframes vf-upload-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } } @keyframes vf-docs-req-in { from { opacity: 0; transform: scale(0.72); } to { opacity: 1; transform: none; } } @keyframes vf-docs-req-pulse { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--vf-warning) 42%, transparent); } 70% { box-shadow: 0 0 0 0.35rem color-mix(in srgb, var(--vf-warning) 0%, transparent); } } @media (prefers-reduced-motion: reduce) { .vf-upload-card, .vf-upload-empty i, .vf-upload-slot, .vf-upload-meter span, .vf-order-docs-req-file, .vf-order-docs-req-file i, .vf-track-step, .vf-track-step::before, .vf-track-step.is-active .vf-track-dot::after, .vf-dash-stat { animation: none; transition: none; } .vf-track-step, .vf-dash-stat { opacity: 1; transform: none; } .vf-track-step::before { transform: none; } } .vf-review-actions { margin-top: 1rem; } .vf-order-view.is-refund-mode .vf-refund-card { border-color: var(--vf-warning-soft); } .vf-refund-card .vf-proof-stage { margin-top: 0.35rem; } .vf-refund-review .vf-pay-file { width: 100%; } .vf-cancel-panel { margin: 0 0 1rem; padding: 0.95rem 1.05rem; border: 1px solid color-mix(in srgb, var(--vf-warning) 35%, var(--vf-border)); border-radius: var(--vf-radius); background: radial-gradient(280px 120px at 100% 0%, color-mix(in srgb, var(--vf-warning) 12%, transparent), transparent 70%), var(--vf-surface-1); } .vf-cancel-panel-head { display: flex; align-items: flex-start; gap: 0.75rem; } .vf-cancel-panel-ico { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 2.3rem; height: 2.3rem; border-radius: 0.7rem; background: var(--vf-warning-soft, color-mix(in srgb, var(--vf-warning) 18%, transparent)); color: var(--vf-warning); } .vf-cancel-panel-ico.is-danger { background: color-mix(in srgb, var(--vf-danger) 14%, transparent); color: var(--vf-danger); } .vf-cancel-panel.is-danger { border-color: color-mix(in srgb, var(--vf-danger) 35%, var(--vf-border)); background: radial-gradient(280px 120px at 100% 0%, color-mix(in srgb, var(--vf-danger) 12%, transparent), transparent 70%), var(--vf-surface-1); } .vf-cancel-panel-head h5 { margin: 0; font-size: 0.98rem; font-weight: 780; } .vf-cancel-panel-head p { margin: 0.25rem 0 0; color: var(--vf-text-secondary); font-size: 0.82rem; line-height: 1.45; } .vf-cancel-panel-head .badge { margin-left: auto; flex-shrink: 0; } .vf-cancel-panel.is-compact { margin: 0 0 0.7rem; padding: 0.5rem 0.7rem; } .vf-cancel-panel.is-compact .vf-cancel-panel-head { align-items: center; gap: 0.55rem; } .vf-cancel-panel.is-compact .vf-cancel-panel-ico { width: 1.7rem; height: 1.7rem; border-radius: 0.45rem; font-size: 0.78rem; } .vf-cancel-panel.is-compact h5 { font-size: 0.82rem; } .vf-cancel-panel.is-compact p { margin: 0.12rem 0 0; font-size: 0.76rem; line-height: 1.35; } .vf-cancel-panel-reason { margin-top: 0.75rem; padding-top: 0.75rem; border-top: 1px solid var(--vf-border); } .vf-cancel-panel-reason span { display: block; color: var(--vf-text-muted); font-size: 0.68rem; font-weight: 750; letter-spacing: 0.04em; text-transform: uppercase; } .vf-cancel-panel-reason strong { display: block; margin-top: 0.2rem; font-size: 0.88rem; font-weight: 650; line-height: 1.4; } .vf-cancel-card { padding: 0; border: 0; border-radius: var(--vf-radius); background: transparent; box-shadow: none; } .vf-cancel-card.is-open { padding: 0.85rem 0.9rem 0.95rem; border: 1px solid color-mix(in srgb, var(--vf-danger) 28%, var(--vf-border)); background: var(--vf-surface-1); box-shadow: var(--vf-shadow-sm); } .vf-cancel-card .form-label { margin-bottom: 0; font-size: 0.72rem; font-weight: 750; } .vf-cancel-wait { display: flex; align-items: center; gap: 0.45rem; min-height: 2.4rem; padding: 0.45rem 0.75rem; border: 1px solid color-mix(in srgb, var(--vf-warning) 32%, var(--vf-border)); border-radius: var(--vf-radius); background: color-mix(in srgb, var(--vf-warning) 8%, var(--vf-surface-1)); color: var(--vf-text); font-size: 0.8rem; font-weight: 750; } .vf-cancel-wait i { color: var(--vf-warning); } .vf-cancel-form { display: flex; flex-direction: column; gap: 0.55rem; } .vf-cancel-form[hidden] { display: none !important; } .vf-cancel-form-hint { display: flex; align-items: flex-start; gap: 0.35rem; margin: 0; color: var(--vf-text-muted); font-size: 0.74rem; line-height: 1.4; } .vf-cancel-form-hint i { margin-top: 0.12rem; color: var(--vf-success, #198754); } .vf-cancel-card textarea.form-control { min-height: 5.4rem; resize: vertical; } .vf-cancel-request-actions { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.35fr); gap: 0.45rem; } .vf-cancel-wait-card { display: flex; align-items: center; gap: 0.75rem; padding: 0.7rem 0.75rem; border: 1px solid color-mix(in srgb, var(--vf-warning) 38%, var(--vf-border)); border-radius: var(--vf-radius); background: radial-gradient(140px 90px at 0% 50%, color-mix(in srgb, var(--vf-warning) 16%, transparent), transparent 70%), var(--vf-surface-1); animation: vf-cancel-wait-in 0.45s cubic-bezier(0.22, 1, 0.36, 1) both; } .vf-cancel-ring { position: relative; width: 4.35rem; height: 4.35rem; flex-shrink: 0; animation: vf-cancel-ring-pulse 2.6s ease-in-out 1.1s infinite; } .vf-cancel-ring svg { display: block; width: 100%; height: 100%; transform: rotate(-90deg); } .vf-cancel-ring-track, .vf-cancel-ring-value { fill: none; stroke-width: 2.6; } .vf-cancel-ring-track { stroke: color-mix(in srgb, var(--vf-warning) 22%, var(--vf-border)); } .vf-cancel-ring-value { stroke: var(--vf-warning); stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: calc(100 - (var(--wait-progress, 0) * 100)); animation: vf-cancel-ring-draw 1.05s cubic-bezier(0.22, 1, 0.36, 1) both; } .vf-cancel-ring-label { position: absolute; inset: 0.45rem; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; line-height: 1; } .vf-cancel-ring-label strong { font-size: 1.15rem; font-weight: 800; font-variant-numeric: tabular-nums; } .vf-cancel-ring-label small { margin-top: 0.12rem; color: var(--vf-text-muted); font-size: 0.52rem; font-weight: 750; letter-spacing: 0.02em; text-transform: uppercase; } .vf-cancel-wait-copy { min-width: 0; } .vf-cancel-wait-copy h5 { margin: 0; font-size: 0.82rem; font-weight: 780; line-height: 1.3; } .vf-cancel-wait-copy p { margin: 0.2rem 0 0; color: var(--vf-text-secondary); font-size: 0.74rem; line-height: 1.35; } .vf-order-desk-cancel .vf-cancel-form { margin-top: 0.55rem; } @keyframes vf-cancel-wait-in { from { opacity: 0; transform: translateY(0.4rem); } to { opacity: 1; transform: none; } } @keyframes vf-cancel-ring-draw { from { stroke-dashoffset: 100; } } @keyframes vf-cancel-ring-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.045); } } @media (prefers-reduced-motion: reduce) { .vf-cancel-wait-card, .vf-cancel-ring, .vf-cancel-ring-value { animation: none; } } .vf-refund-board { display: flex; flex-direction: column; gap: 0; margin: 0; padding: 0.55rem 0.65rem 0.6rem; min-height: 0; border: 1px solid color-mix(in srgb, var(--vf-primary) 28%, var(--vf-border)); border-radius: var(--vf-radius); background: radial-gradient(280px 120px at 100% 0%, color-mix(in srgb, var(--vf-primary) 12%, transparent), transparent 70%), var(--vf-surface-1); } .vf-refund-board.is-danger { border-color: color-mix(in srgb, var(--vf-danger) 35%, var(--vf-border)); background: radial-gradient(280px 120px at 100% 0%, color-mix(in srgb, var(--vf-danger) 12%, transparent), transparent 70%), var(--vf-surface-1); } .vf-refund-board.is-success { border-color: color-mix(in srgb, var(--vf-success) 35%, var(--vf-border)); background: radial-gradient(280px 120px at 100% 0%, color-mix(in srgb, var(--vf-success) 12%, transparent), transparent 70%), var(--vf-surface-1); } .vf-refund-board.is-review { border-color: color-mix(in srgb, var(--vf-warning) 40%, var(--vf-border)); } .vf-refund-board-head { display: flex; align-items: center; gap: 0.5rem; flex-wrap: nowrap; } .vf-refund-board-head h5 { margin: 0; min-width: 0; font-size: 0.88rem; font-weight: 780; } .vf-refund-board-ico { display: inline-flex; align-items: center; justify-content: center; width: 1.7rem; height: 1.7rem; flex-shrink: 0; border-radius: 0.45rem; background: var(--vf-primary-soft); color: var(--vf-primary); font-size: 0.78rem; } .vf-refund-board.is-danger .vf-refund-board-ico { background: color-mix(in srgb, var(--vf-danger) 14%, transparent); color: var(--vf-danger); } .vf-refund-board.is-success .vf-refund-board-ico { background: color-mix(in srgb, var(--vf-success) 14%, transparent); color: var(--vf-success); } .vf-refund-board-head .badge { margin-left: auto; flex-shrink: 0; } .vf-refund-board-meta { display: flex; flex-direction: column; gap: 0.4rem; flex-shrink: 0; } .vf-refund-board-amt { display: flex; align-items: baseline; justify-content: space-between; gap: 0.55rem; padding: 0.45rem 0.6rem; border-radius: var(--vf-radius-md); background: var(--vf-surface-2); } .vf-refund-board-amt span { color: var(--vf-text-muted); font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; } .vf-refund-board-amt strong { font-size: 1.05rem; font-weight: 800; } .vf-refund-board-note { display: flex; align-items: center; gap: 0.35rem; margin: 0; padding: 0.38rem 0.55rem; border-radius: var(--vf-radius-md); background: color-mix(in srgb, var(--vf-warning) 8%, var(--vf-surface-2)); color: var(--vf-text); font-size: 0.74rem; font-weight: 650; line-height: 1.3; } .vf-refund-board-note i { flex-shrink: 0; color: var(--vf-warning); } .vf-refund-board-split { display: grid; grid-template-columns: minmax(15.5rem, 0.78fr) minmax(0, 1.32fr); gap: 0.65rem; min-height: 0; flex: 1 1 auto; height: 100%; align-items: stretch; } .vf-refund-board-split:not(:has(.vf-refund-board-proof)) { grid-template-columns: minmax(0, 1fr); } .vf-refund-board-copy { display: flex; flex-direction: column; gap: 0.5rem; min-width: 0; min-height: 0; height: 100%; overflow: hidden; } .vf-refund-board.is-danger .vf-refund-board-copy, .vf-refund-board-copy:has(.vf-refund-board-dispute[open]) { overflow: auto; scrollbar-width: thin; } .vf-refund-board-head, .vf-refund-board-meta, .vf-refund-board > .vf-refund-board-note { flex-shrink: 0; } .vf-refund-board-proof { position: relative; display: flex; flex-direction: column; min-width: 0; min-height: 0; } .vf-refund-board-proof-open { position: absolute; top: 0.4rem; right: 0.4rem; z-index: 2; width: 1.85rem; height: 1.85rem; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--vf-border); border-radius: 0.45rem; background: color-mix(in srgb, var(--vf-surface-1) 88%, transparent); color: var(--vf-text); box-shadow: var(--vf-shadow-sm); } .vf-refund-board-proof-open:hover { border-color: color-mix(in srgb, var(--vf-primary) 40%, var(--vf-border)); color: var(--vf-primary); } .vf-refund-board-proof .vf-proof-stage { flex: 1 1 auto; min-height: 0; max-height: none; height: 100%; overflow: hidden; display: flex; align-items: center; justify-content: center; } .vf-refund-board-proof .vf-proof-stage.is-pdf { overflow: hidden; align-items: stretch; } .vf-refund-board-proof .vf-proof-stage img { width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain; } .vf-refund-board-proof .vf-proof-stage iframe { width: 100%; height: 100%; min-height: 0; } .vf-refund-board-actions { display: flex; flex-direction: column; gap: 0.4rem; min-width: 0; margin-top: auto; } .vf-refund-board-actions .form-label { margin-bottom: 0.25rem; font-size: 0.72rem; font-weight: 700; } .vf-refund-board-actions .btn { min-height: 2.15rem; } .vf-refund-board-actions textarea.form-control { min-height: 3.2rem; resize: none; } .vf-refund-board-dispute { border: 1px solid var(--vf-border); border-radius: var(--vf-radius-md); background: var(--vf-surface-2); } .vf-refund-board-dispute summary { display: flex; align-items: center; justify-content: center; gap: 0.35rem; cursor: pointer; list-style: none; padding: 0.42rem 0.6rem; color: var(--vf-danger); font-size: 0.78rem; font-weight: 750; } .vf-refund-board-dispute summary::-webkit-details-marker { display: none; } .vf-refund-board-dispute form { display: flex; flex-direction: column; gap: 0.35rem; padding: 0 0.6rem 0.55rem; } .vf-refund-desk .vf-pay-review-proof { overflow: hidden; } .vf-refund-desk.is-proof .vf-pay-review-grid { grid-template-columns: minmax(17.5rem, 0.82fr) minmax(0, 1.35fr); } .vf-refund-desk.is-proof .vf-pay-review-side > .vf-pay-review-card { flex: 0 0 auto; overflow: visible; } .vf-refund-desk-proof { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; } .vf-refund-desk-proof .vf-proof-stage, .vf-refund-desk-proof .vf-doc-empty, .vf-refund-desk-proof .vf-proof-empty { flex: 1 1 auto; min-height: 0; max-height: none; height: auto; } .vf-refund-desk-proof .vf-proof-stage { overflow: hidden; display: flex; align-items: center; justify-content: center; } .vf-refund-desk-proof .vf-proof-stage.is-pdf { align-items: stretch; } .vf-refund-desk-proof .vf-proof-stage.is-image img { width: auto; height: auto; max-width: 100%; max-height: 100%; object-fit: contain; } .vf-refund-desk-proof .vf-proof-stage iframe { width: 100%; height: 100%; min-height: 0; } .vf-refund-desk-proof .vf-doc-empty, .vf-refund-desk-proof .vf-proof-empty { min-height: 8rem; } body:has(.vf-order-view.is-refund) .app-content { display: flex; flex-direction: column; overflow: hidden; padding: 0.4rem 0.7rem 0.5rem; } .vf-order-view.is-refund { flex: 1 1 auto; min-height: 0; overflow: hidden; gap: 0.35rem; } .vf-order-view.is-refund:has(.vf-chat-dock) { padding-bottom: 0; } .vf-order-view.is-refund .vf-page-hero { flex-shrink: 0; padding: 0.32rem 0.6rem; } .vf-order-view.is-refund .vf-page-hero-copy p { display: none; } .vf-order-view.is-refund .vf-page-hero-icon { width: 2rem; height: 2rem; font-size: 0.9rem; } .vf-order-view.is-refund .vf-order-case-grid { flex: 1 1 auto; min-height: 0; align-items: stretch; overflow: hidden; gap: 0.5rem; grid-template-columns: minmax(0, 1fr) minmax(16.25rem, 18.25rem); } .vf-order-view.is-refund .vf-order-case-main, .vf-order-view.is-refund .vf-order-docs-card, .vf-order-view.is-refund .vf-refund-board, .vf-order-view.is-refund .vf-review-lock { min-height: 0; flex: 1 1 auto; overflow: hidden; } .vf-order-view.is-refund .vf-order-case-main { gap: 0; } .vf-order-view.is-refund .vf-review-lock { align-items: center; margin: 0; padding: 0.75rem 0.9rem; } .vf-order-view.is-refund .vf-review-lock p { margin-top: 0.15rem; font-size: 0.78rem; line-height: 1.35; } .vf-order-view.is-refund .vf-order-case-rail { gap: 0.4rem; overflow: hidden; position: static; } .vf-order-view.is-refund .vf-order-desk-now { padding: 0.42rem 0.55rem; } .vf-order-view.is-refund .vf-order-desk-now p, .vf-order-view.is-refund .vf-review-public-note { display: none; } .vf-order-view.is-refund .vf-order-view-sum { gap: 0.28rem; padding: 0.5rem 0.6rem 0.55rem; } .vf-order-view.is-refund .vf-order-view-sum-line { font-size: 0.8rem; } .vf-order-view.is-refund .vf-complete-review { gap: 0.28rem; padding: 0.5rem 0.6rem 0.55rem; } .vf-order-view.is-refund .vf-complete-review .vf-review-quote { -webkit-line-clamp: 2; font-size: 0.76rem; } .vf-order-view.is-refund .vf-complete-review .btn { min-height: 1.85rem; padding: 0.18rem 0.5rem; font-size: 0.74rem; } .vf-order-view.is-refund .vf-refund-board-proof { height: 100%; } .vf-order-view.is-refund .vf-refund-board-proof .vf-proof-stage { max-height: none; height: 100%; min-height: 0; } .vf-review-lock { display: flex; align-items: flex-start; gap: 0.75rem; padding: 0.95rem 1.05rem 1.05rem; border: 1px solid color-mix(in srgb, var(--vf-warning) 35%, var(--vf-border)); border-radius: var(--vf-radius); background: radial-gradient(280px 140px at 100% 0%, color-mix(in srgb, var(--vf-warning) 14%, transparent), transparent 70%), var(--vf-surface-1); } .vf-review-lock-ico { display: inline-flex; align-items: center; justify-content: center; width: 2.2rem; height: 2.2rem; flex-shrink: 0; border-radius: 0.6rem; background: color-mix(in srgb, var(--vf-warning) 16%, transparent); color: var(--vf-warning); font-size: 1rem; } .vf-review-lock h5 { margin: 0; font-size: 1rem; font-weight: 800; } .vf-review-lock p { margin: 0.25rem 0 0; color: var(--vf-text-secondary); font-size: 0.82rem; line-height: 1.45; } .vf-review-lock .btn { margin-left: auto; flex-shrink: 0; align-self: center; } .vf-refund-inbox .vf-inbox-row { grid-template-columns: 7.6rem minmax(8.5rem, 1.1fr) minmax(8.25rem, auto) 6.6rem 1.15rem; } .vf-refund-desk .vf-page-hero { flex-shrink: 0; } .vf-refund-desk-quote { margin: 0 0 0.75rem; padding: 0.85rem 0.95rem; border-radius: var(--vf-radius-md); background: var(--vf-surface-2); font-size: 0.92rem; line-height: 1.5; } .vf-refund-desk .vf-pay-review-alert { margin-bottom: 0.55rem; flex-shrink: 0; } .vf-refund-desk .vf-pay-review-head { flex-shrink: 0; } @media (max-width: 560px) { .vf-create-grid { grid-template-columns: 1fr; grid-template-areas: "service" "center" "visa" "count"; } .vf-create-grid:has(.is-center.d-none) { grid-template-areas: "service" "visa" "count"; } } @media (max-width: 900px) { .vf-create-board { grid-template-columns: 1fr; overflow: visible; } .vf-create-fees { border-radius: 0 0 var(--vf-radius) var(--vf-radius); border-left: 0; border-top: 1px solid var(--vf-border); } body:has(.vf-order-create) .app-content { overflow-y: auto; } .vf-order-create, .vf-create-board { flex: none; overflow: visible; } .vf-cancel-panel-head, .vf-refund-board-head { flex-wrap: wrap; } .vf-cancel-panel-head .badge, .vf-refund-board-head .badge { margin-left: 0; } .vf-cancel-request-actions { grid-template-columns: 1fr; } .vf-refund-inbox .vf-inbox-row { grid-template-columns: minmax(0, 1fr) auto 1.15rem; grid-template-areas: "id money open" "who money open" "state state open"; } .vf-refund-inbox .vf-inbox-state { grid-area: state; justify-self: start; } .vf-review-lock { flex-wrap: wrap; } .vf-review-lock .btn { margin-left: 0; width: 100%; } .vf-refund-board-split, .vf-refund-desk.is-proof .vf-pay-review-grid { grid-template-columns: 1fr; } .vf-refund-board-proof .vf-proof-stage { flex: none; height: min(42vh, 18rem); max-height: min(42vh, 18rem); } body:has(.vf-order-view.is-refund) .app-content { overflow-y: auto; } .vf-order-view.is-refund, .vf-order-view.is-refund .vf-order-case-grid, .vf-order-view.is-refund .vf-order-case-main, .vf-order-view.is-refund .vf-order-docs-card, .vf-order-view.is-refund .vf-refund-board, .vf-order-view.is-refund .vf-review-lock { flex: none; overflow: visible; } .vf-order-view.is-refund .vf-order-case-rail { overflow: visible; } .vf-order-view.is-refund .vf-page-hero-copy p, .vf-order-view.is-refund .vf-order-desk-now p { display: block; } } .vf-chat-card { display: flex; flex-direction: column; min-height: 0; scroll-margin-top: 5.5rem; } .vf-chat-live { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--vf-success-text); } .vf-chat-live::before { content: ""; width: 0.45rem; height: 0.45rem; border-radius: 50%; background: var(--vf-success); box-shadow: 0 0 0 0 rgba(var(--vf-primary-rgb), 0.35); animation: vf-chat-pulse 1.6s ease-out infinite; } .vf-chat-pay { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem 0.75rem; margin-bottom: 0.75rem; padding-bottom: 0.75rem; border-bottom: 1px solid var(--vf-border); font-size: 0.86rem; font-weight: 650; } .vf-chat-pay .vf-money { margin-left: auto; } .vf-chat-thread { display: flex; flex-direction: column; gap: 0.55rem; max-height: 18.5rem; overflow: auto; padding: 0.2rem 0.2rem 0.45rem; margin: 0 -0.2rem; } .vf-order-case .vf-chat-card { display: flex; flex-direction: column; margin: 0; padding: 0.75rem 0.85rem 0.85rem; max-height: min(38rem, calc(100vh - 9rem)); overflow: hidden; } .vf-order-case .vf-chat-thread { flex: 1 1 auto; min-height: 10rem; max-height: none; } .vf-chat-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.4rem; min-height: 7rem; padding: 0.85rem; color: var(--vf-text-muted); text-align: center; font-size: 0.84rem; font-weight: 650; } .vf-chat-empty i { font-size: 1.45rem; color: var(--vf-primary); } .vf-chat-bubble { max-width: 88%; padding: 0.55rem 0.7rem; border-radius: 0.8rem; border: 1px solid var(--vf-border); background: var(--vf-surface-2); animation: vf-chat-in 0.22s ease-out; } .vf-chat-bubble.is-mine { align-self: flex-end; background: var(--vf-primary-soft); border-color: transparent; border-bottom-right-radius: 0.3rem; } .vf-chat-bubble.is-theirs { align-self: flex-start; border-bottom-left-radius: 0.3rem; } .vf-chat-bubble.is-system { align-self: center; max-width: 100%; padding: 0.45rem 0.65rem; border-color: color-mix(in srgb, var(--vf-primary) 22%, var(--vf-border)); background: color-mix(in srgb, var(--vf-primary-soft) 55%, var(--vf-surface-1)); border-radius: 0.7rem; text-align: center; } .vf-chat-bubble.is-system header { justify-content: center; gap: 0.45rem; } .vf-chat-bubble.is-system header strong { color: var(--vf-primary); letter-spacing: 0.04em; text-transform: uppercase; font-size: 0.64rem; } .vf-chat-bubble.is-system p { font-size: 0.8rem; color: var(--vf-text); } .vf-chat-bubble header { display: flex; align-items: baseline; justify-content: space-between; gap: 0.6rem; margin-bottom: 0.15rem; } .vf-chat-bubble header strong { font-size: 0.75rem; } .vf-chat-bubble header time { font-size: 0.7rem; color: var(--vf-text-muted); font-weight: 650; white-space: nowrap; } .vf-chat-bubble p { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word; font-size: 0.88rem; line-height: 1.45; } .vf-chat-composer { display: flex; flex-direction: row; align-items: flex-end; gap: 0.5rem; margin-top: 0.85rem; padding-top: 0.85rem; border-top: 1px solid var(--vf-border); } .vf-chat-composer textarea { flex: 1 1 auto; width: auto; min-height: 2.65rem; max-height: 6.5rem; resize: none; overflow-y: auto; padding: 0.55rem 0.8rem; border: 1px solid var(--vf-border); border-radius: 1.4rem; background: var(--vf-surface-1); color: var(--vf-text); line-height: 1.4; } .vf-chat-composer textarea:focus { outline: none; border-color: var(--vf-primary); box-shadow: 0 0 0 3px var(--vf-focus-ring); } .vf-chat-composer .btn { box-sizing: border-box; flex: 0 0 2.65rem; align-self: flex-end; width: 2.65rem; height: 2.65rem; min-width: 2.65rem; min-height: 2.65rem; margin: 0; padding: 0; border-radius: 50%; display: inline-grid; place-items: center; line-height: 0; color: var(--vf-text-inverse); } .vf-chat-composer .btn .fa-duotone { --fa-primary-color: currentColor; --fa-secondary-color: currentColor; --fa-secondary-opacity: 0.75; --fa-width: 1em; display: block; position: relative; width: 1em; height: 1em; margin: 0; font-size: 0.95rem; line-height: 1; transform: translate(-0.06em, 0.05em); } .vf-chat-composer .btn .fa-duotone::before, .vf-chat-composer .btn .fa-duotone::after { display: block; width: 1em; height: 1em; line-height: 1; text-align: center; } .vf-chat-composer .btn .fa-duotone::before { inset: 0; } .vf-chat-composer .btn:disabled { opacity: 0.65; } .vf-chat-error { margin: 0.45rem 0 0; color: var(--vf-danger-text); font-size: 0.8rem; font-weight: 650; } @keyframes vf-chat-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } @keyframes vf-chat-pulse { 0% { box-shadow: 0 0 0 0 rgba(22, 163, 74, 0.45); } 70% { box-shadow: 0 0 0 6px rgba(22, 163, 74, 0); } 100% { box-shadow: 0 0 0 0 rgba(22, 163, 74, 0); } } /* Customer profile */ .vf-profile { display: flex; flex-direction: column; gap: 1.1rem; } .vf-profile-cover { position: relative; overflow: hidden; padding: 1.35rem 1.4rem 1.15rem; border: 1px solid var(--vf-border); border-radius: var(--vf-radius); background: radial-gradient(420px 180px at 0% -10%, color-mix(in srgb, var(--vf-primary) 22%, transparent), transparent 70%), radial-gradient(280px 140px at 100% 120%, color-mix(in srgb, var(--vf-accent) 16%, transparent), transparent 68%), var(--vf-surface-1); box-shadow: var(--vf-shadow-sm); } .vf-profile-cover::after { content: ""; position: absolute; right: -1.4rem; top: -1.6rem; width: 8.5rem; height: 8.5rem; border: 1.15rem solid color-mix(in srgb, var(--vf-primary) 12%, transparent); border-radius: 50%; pointer-events: none; } .vf-profile-cover-row { display: grid; grid-template-columns: minmax(0, 1.15fr) auto minmax(8.5rem, 0.75fr); align-items: center; gap: 1rem 1.25rem; } .vf-profile-identity { display: flex; align-items: center; gap: 1rem; min-width: 0; } .vf-profile-cover-stats { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 0.55rem; } .vf-profile-cover-actions { display: flex; align-items: center; justify-content: flex-end; } .vf-profile-avatar, .vf-profile-avatar-preview, .vf-customer-avatar { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; overflow: hidden; border-radius: 50%; background: var(--vf-primary-soft); color: var(--vf-primary); font-weight: 750; letter-spacing: 0.02em; } .vf-profile-avatar { width: 5.4rem; height: 5.4rem; font-size: 1.35rem; box-shadow: 0 0 0 3px var(--vf-surface-1), 0 0 0 5px color-mix(in srgb, var(--vf-primary) 45%, transparent); } .vf-profile-avatar img, .vf-profile-avatar-preview img, .vf-customer-avatar img { width: 100%; height: 100%; object-fit: cover; display: block; } .vf-profile-kicker { margin: 0 0 0.2rem; color: var(--vf-primary); font-size: 0.72rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; } .vf-profile-copy h1 { margin: 0; font-size: 1.55rem; font-weight: 780; letter-spacing: -0.03em; line-height: 1.15; } .vf-profile-copy p { margin: 0.28rem 0 0; color: var(--vf-text-muted); font-size: 0.9rem; } .vf-profile-cover .btn, .vf-profile-modal .btn, .vf-profile-delete-row .btn, .vf-profile-vacant .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; } .vf-profile-pill { display: inline-flex; align-items: center; gap: 0.55rem; min-height: 2.7rem; padding: 0.4rem 0.85rem 0.4rem 0.5rem; border: 1px solid color-mix(in srgb, var(--vf-primary) 16%, var(--vf-border)); border-radius: 0.9rem; background: color-mix(in srgb, var(--vf-paper) 78%, transparent); color: var(--vf-text); } [data-bs-theme="dark"] .vf-profile-cover { background: radial-gradient(420px 180px at 0% -10%, color-mix(in srgb, var(--vf-primary) 12%, transparent), transparent 72%), radial-gradient(280px 140px at 100% 120%, color-mix(in srgb, var(--vf-hue-sky-2) 14%, transparent), transparent 70%), var(--vf-surface-1); } [data-bs-theme="dark"] .vf-profile-cover::after { border-color: color-mix(in srgb, var(--vf-primary) 16%, transparent); } [data-bs-theme="dark"] .vf-profile-pill { border-color: color-mix(in srgb, var(--vf-primary) 28%, var(--vf-border)); background: color-mix(in srgb, var(--vf-surface-3) 90%, transparent); } .vf-profile-pill-ico, .vf-profile-fact-ico, .vf-profile-head-ico, .vf-profile-place-ico, .vf-session-ico, .vf-activity-ico { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; line-height: 1; } .vf-profile-pill-ico { width: 1.85rem; height: 1.85rem; border-radius: 0.55rem; font-size: 0.82rem; } .vf-profile-pill span { display: block; color: var(--vf-text-muted); font-size: 0.64rem; font-weight: 750; letter-spacing: 0.04em; text-transform: uppercase; } .vf-profile-pill strong { display: block; margin-top: 0.08rem; font-size: 0.82rem; font-weight: 750; line-height: 1.2; } .vf-profile-desk { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(17.5rem, 0.85fr); grid-template-areas: "details sessions" "address activity"; gap: 1.1rem; align-items: stretch; } .vf-profile-main, .vf-profile-rail { display: contents; } .vf-profile-main > .vf-profile-panel:first-child { grid-area: details; } .vf-profile-main > .vf-profile-panel:last-child { grid-area: address; } .vf-profile-rail > .vf-profile-panel:first-child { grid-area: sessions; } .vf-profile-rail > .vf-profile-panel:last-child { grid-area: activity; height: 0; min-height: 100%; display: flex; flex-direction: column; overflow: hidden; } .vf-profile-rail > .vf-profile-panel:last-child .vf-activity { flex: 1 1 auto; min-height: 0; max-height: none; } .vf-profile-panel { padding: 1.05rem 1.15rem 1.15rem; border: 1px solid var(--vf-border); border-radius: var(--vf-radius); background: var(--vf-surface-1); box-shadow: var(--vf-shadow-sm); } .vf-profile-panel-head { margin: 0 0 0.9rem; } .vf-profile-panel-head h2 { display: flex; align-items: center; gap: 0.5rem; margin: 0; font-size: 0.98rem; font-weight: 780; } .vf-profile-head-ico { width: 1.55rem; height: 1.55rem; border-radius: 0.45rem; font-size: 0.78rem; } .vf-profile-panel-head p { margin: 0.28rem 0 0; color: var(--vf-text-muted); font-size: 0.78rem; font-weight: 600; line-height: 1.4; } .vf-profile-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.7rem; } .vf-profile-fact { display: flex; align-items: center; gap: 0.7rem; min-height: 4.4rem; padding: 0.8rem 0.85rem; border: 1px solid var(--vf-border); border-radius: var(--vf-radius-md); background: var(--vf-surface-2); } .vf-profile-fact > div { flex: 1; min-width: 0; } .vf-profile-fact-ico { width: 2.3rem; height: 2.3rem; border-radius: 0.7rem; font-size: 0.95rem; } .vf-profile-fact span, .vf-profile-place span { display: block; color: var(--vf-text-muted); font-size: 0.7rem; font-weight: 750; letter-spacing: 0.03em; text-transform: uppercase; } .vf-profile-fact strong, .vf-profile-place strong { display: block; margin-top: 0.18rem; font-size: 0.92rem; font-weight: 750; line-height: 1.3; word-break: break-word; } .vf-profile-fact small { display: block; margin-top: 0.22rem; color: var(--vf-text-muted); font-size: 0.72rem; font-weight: 600; line-height: 1.35; } .vf-profile-fact em { flex-shrink: 0; margin: 0; padding: 0.12rem 0.4rem; border-radius: 999px; background: var(--vf-surface-3); color: var(--vf-text-muted); font-size: 0.64rem; font-style: normal; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; } .vf-profile-fact.is-empty { border-style: dashed; } .vf-profile-place { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.7rem; } .vf-profile-place > div { display: flex; align-items: center; gap: 0.65rem; padding: 0.75rem 0.8rem; border: 1px solid var(--vf-border); border-radius: var(--vf-radius-md); background: var(--vf-surface-2); } .vf-profile-place-ico { width: 2rem; height: 2rem; border-radius: 0.6rem; font-size: 0.88rem; } .vf-profile-vacant { display: flex; flex-direction: column; align-items: flex-start; gap: 0.7rem; padding: 1.15rem 1rem; border: 1px dashed var(--vf-border); border-radius: var(--vf-radius-md); background: var(--vf-surface-2); } .vf-profile-vacant > i { font-size: 1.3rem; color: var(--vf-primary); } .vf-profile-vacant p, .vf-profile-empty { margin: 0; color: var(--vf-text-muted); font-size: 0.86rem; font-weight: 600; line-height: 1.45; } .vf-session-list, .vf-activity { list-style: none; margin: 0; padding: 0; } .vf-session-list { display: flex; flex-direction: column; gap: 0.55rem; max-height: 18rem; overflow: auto; } .vf-session { display: flex; align-items: center; gap: 0.7rem; padding: 0.65rem 0.7rem; border: 1px solid var(--vf-border); border-radius: var(--vf-radius-md); background: var(--vf-surface-2); } .vf-session.is-current { border-color: color-mix(in srgb, var(--vf-success) 42%, var(--vf-border)); background: color-mix(in srgb, var(--vf-success) 8%, var(--vf-surface-2)); } [data-bs-theme="dark"] .vf-session.is-current { border-color: color-mix(in srgb, var(--success-base) 48%, var(--vf-border)); background: color-mix(in srgb, var(--success-base) 16%, var(--vf-surface-2)); } .vf-session-ico, .vf-activity-ico { width: 2.05rem; height: 2.05rem; border-radius: 0.65rem; font-size: 0.9rem; } .vf-session-body { flex: 1; min-width: 0; } .vf-session form, .vf-session .badge { flex-shrink: 0; } .vf-session-body strong, .vf-activity strong { display: block; font-size: 0.84rem; font-weight: 750; line-height: 1.3; } .vf-session-body span, .vf-activity span { display: block; margin-top: 0.12rem; color: var(--vf-text-muted); font-size: 0.73rem; font-weight: 600; } .vf-activity { position: relative; max-height: 22rem; overflow: auto; } .vf-activity::before { content: ""; position: absolute; left: 1rem; top: 0.4rem; bottom: 0.4rem; width: 2px; background: var(--vf-border); } .vf-activity li { position: relative; display: flex; align-items: center; gap: 0.7rem; padding: 0.55rem 0; } .vf-activity-ico { position: relative; z-index: 1; } .vf-profile-danger { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(16rem, 0.8fr); gap: 1rem 1.4rem; padding: 1.1rem 1.2rem; border: 1px solid color-mix(in srgb, var(--vf-danger) 35%, var(--vf-border)); border-radius: var(--vf-radius); background: radial-gradient(280px 120px at 100% 0%, color-mix(in srgb, var(--vf-danger) 10%, transparent), transparent 70%), var(--vf-surface-1); } [data-bs-theme="dark"] .vf-profile-danger { border-color: color-mix(in srgb, var(--danger-base) 42%, var(--vf-border)); background: radial-gradient(280px 120px at 100% 0%, color-mix(in srgb, var(--danger-base) 18%, transparent), transparent 72%), var(--vf-surface-1); } .vf-profile-danger-copy h2 { display: flex; align-items: center; gap: 0.5rem; margin: 0 0 0.4rem; font-size: 0.98rem; font-weight: 780; } .vf-profile-danger-copy h2 i { color: var(--vf-danger); } .vf-profile-danger-copy p { margin: 0; color: var(--vf-text-secondary); font-size: 0.84rem; line-height: 1.5; } .vf-profile-delete-row { display: flex; flex-wrap: wrap; gap: 0.55rem; } .vf-profile-delete-row .vf-profile-control { flex: 1 1 12rem; } .vf-profile-modal .modal-dialog { max-width: 30rem; margin: 0.6rem auto; } .vf-profile-modal .modal-content { border: 1px solid var(--vf-border); border-radius: var(--vf-radius); background: var(--vf-surface-1); color: var(--vf-text); overflow: hidden; } .vf-profile-modal .modal-header, .vf-profile-modal .modal-footer { padding: 0.55rem 0.85rem; border-color: var(--vf-border); } .vf-profile-modal .modal-body { padding: 0.7rem 0.85rem 0.35rem; } .vf-profile-modal .modal-title { display: inline-flex; align-items: center; gap: 0.4rem; margin: 0; font-size: 0.92rem; font-weight: 750; } .vf-profile-modal .modal-title i { color: var(--vf-primary); } .vf-profile-modal .btn-close { box-shadow: none; } html[data-bs-theme="dark"] .vf-profile-modal .btn-close { filter: invert(1) grayscale(100%) brightness(180%); } .vf-file-modal .modal-dialog { width: max-content; max-width: calc(100vw - 1.5rem); height: auto; margin: 0.75rem auto; } .vf-file-modal .modal-content { width: 100%; max-width: calc(100vw - 1.5rem); height: auto; border: 1px solid var(--vf-border); border-radius: var(--vf-radius); background: var(--vf-surface-1); color: var(--vf-text); overflow: hidden; } .vf-file-modal .modal-header { display: flex; align-items: center; gap: 0.55rem; padding: 0.5rem 0.7rem; border-color: var(--vf-border); } .vf-file-modal .modal-title { flex: 1 1 auto; min-width: 0; margin: 0; overflow: hidden; font-size: 0.92rem; font-weight: 750; text-overflow: ellipsis; white-space: nowrap; } .vf-file-modal .modal-body { padding: 0.55rem; background: var(--vf-surface-2); } .vf-file-modal .btn-close { flex: 0 0 auto; margin: 0; box-shadow: none; } html[data-bs-theme="dark"] .vf-file-modal .btn-close { filter: invert(1) grayscale(100%) brightness(180%); } .vf-file-download { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 0.32rem; min-height: 1.7rem; padding: 0 0.65rem; border: 1px solid var(--vf-border); border-radius: 999px; background: var(--vf-surface-2); color: var(--vf-text); font-size: 0.74rem; font-weight: 750; line-height: 1; text-decoration: none; white-space: nowrap; } .vf-file-download[hidden] { display: none; } label.vf-file-download { margin: 0; cursor: pointer; } .vf-file-download:hover, .vf-file-download:focus-visible { border-color: var(--vf-primary); color: var(--vf-primary); text-decoration: none; } .vf-file-zoom { display: inline-flex; flex: 0 0 auto; align-items: center; overflow: hidden; border: 1px solid var(--vf-border); border-radius: 999px; background: var(--vf-surface-2); } .vf-file-zoom button { display: inline-flex; align-items: center; justify-content: center; width: 1.85rem; height: 1.7rem; padding: 0; border: 0; background: transparent; color: var(--vf-text); cursor: pointer; } .vf-file-zoom button:hover, .vf-file-zoom button:focus-visible { background: var(--vf-surface-3); color: var(--vf-primary); } .vf-file-zoom button:disabled { opacity: 0.35; cursor: default; } .vf-file-zoom button.vf-file-zoom-level { width: auto; min-width: 3.1rem; padding: 0 0.35rem; border-left: 1px solid var(--vf-border); border-right: 1px solid var(--vf-border); font-size: 0.75rem; font-weight: 700; } .vf-file-modal-stage { position: relative; width: 18rem; max-width: calc(100vw - 2.6rem); height: 12rem; overflow: hidden; border: 1px solid var(--vf-border); border-radius: 0.55rem; background: var(--vf-paper); touch-action: none; user-select: none; } .vf-file-modal-stage.is-zoomed { cursor: grab; } .vf-file-modal-stage.is-dragging { cursor: grabbing; } .vf-file-modal-sheet { position: absolute; top: 0; left: 0; transform-origin: 0 0; } .vf-file-modal-stage img, .vf-file-modal-stage iframe { display: block; width: 100%; height: 100%; max-width: none; border: 0; pointer-events: none; user-select: none; } .vf-file-modal-stage img { background: var(--vf-surface-2); } .vf-file-modal-stage iframe { background: var(--vf-paper); } .vf-file-modal-fallback { margin: 0; padding: 1.25rem; color: var(--vf-text-muted); text-align: center; } .vf-profile-modal .modal-footer .btn { min-height: 2.1rem; padding: 0.3rem 0.75rem; font-size: 0.8rem; font-weight: 700; } .vf-profile-edit { display: flex; flex-direction: column; gap: 0.55rem; } .vf-profile-edit-photo { display: grid; grid-template-columns: 3.2rem minmax(0, 1fr); gap: 0.6rem; align-items: center; padding: 0.45rem 0.55rem; border: 1px solid var(--vf-border); border-radius: var(--vf-radius-md); background: var(--vf-surface-2); } .vf-profile-avatar-preview { width: 3.2rem; height: 3.2rem; font-size: 0.9rem; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--vf-primary) 20%, transparent); } .vf-profile-photo-copy { min-width: 0; } .vf-profile-photo-copy strong { display: block; margin-bottom: 0.28rem; font-size: 0.75rem; font-weight: 750; } .vf-profile-field { min-width: 0; } .vf-profile-field.is-wide { grid-column: 1 / -1; } .vf-profile-field-label { display: block; margin: 0 0 0.18rem; color: var(--vf-text-muted); font-size: 0.66rem; font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; } .vf-profile-control, .vf-profile-file, .vf-profile-remove { display: flex; align-items: center; gap: 0.4rem; min-height: 2.1rem; padding: 0 0.55rem; border: 1px solid var(--vf-border); border-radius: 0.6rem; background: var(--vf-paper); } [data-bs-theme="dark"] .vf-profile-control, [data-bs-theme="dark"] .vf-profile-file, [data-bs-theme="dark"] .vf-profile-remove { background: var(--vf-surface-2); color: var(--vf-text); } .vf-profile-control:focus-within, .vf-profile-file:hover, .vf-profile-file.has-file { border-color: var(--vf-primary); box-shadow: 0 0 0 2px var(--vf-primary-soft); } .vf-profile-control > i, .vf-profile-file i, .vf-profile-remove i { color: var(--vf-primary); flex-shrink: 0; font-size: 0.8rem; } .vf-profile-control input, .vf-profile-control textarea { width: 100%; min-width: 0; margin: 0; padding: 0.28rem 0; border: 0; background: transparent; color: inherit; outline: none; font-size: 0.84rem; font-weight: 650; line-height: 1.25; resize: none; } .vf-profile-control input::placeholder, .vf-profile-control textarea::placeholder { color: var(--vf-text-muted); font-weight: 550; opacity: 0.9; } .vf-profile-photo-row { display: flex; align-items: center; gap: 0.45rem; } .vf-profile-file { flex: 1 1 auto; min-width: 0; margin: 0; cursor: pointer; font-size: 0.76rem; font-weight: 700; color: var(--vf-text-secondary); } .vf-profile-file span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .vf-profile-remove { flex: 0 0 2.1rem; width: 2.1rem; justify-content: center; padding: 0; margin: 0; cursor: pointer; color: var(--vf-danger-text); } .vf-profile-remove i { color: var(--vf-danger-text); } .vf-profile-remove:hover, .vf-profile-remove.is-on { border-color: var(--vf-danger); background: color-mix(in srgb, var(--vf-danger) 12%, var(--vf-paper)); } [data-bs-theme="dark"] .vf-profile-remove:hover, [data-bs-theme="dark"] .vf-profile-remove.is-on { background: color-mix(in srgb, var(--danger-base) 22%, var(--vf-surface-2)); } .vf-profile-avatar-preview.is-removed { filter: grayscale(1); opacity: 0.55; } .vf-profile-pass { padding-top: 0.5rem; border-top: 1px solid var(--vf-border); } .vf-profile-pass-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.25rem 0.4rem; margin: 0 0 0.4rem; } .vf-profile-pass-head i { color: var(--vf-primary); font-size: 0.78rem; } .vf-profile-pass-head strong { font-size: 0.76rem; font-weight: 750; } .vf-profile-pass-head span { color: var(--vf-text-muted); font-size: 0.7rem; font-weight: 600; } .vf-profile-pass-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.4rem 0.4rem; } .vf-profile-pass-grid .vf-profile-control { padding-inline: 0.5rem 0.3rem; } .vf-profile-pass-grid input { font-size: 0.8rem; } .vf-pass-toggle { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 1.55rem; height: 1.55rem; margin: 0; padding: 0; border: 0; border-radius: 0.4rem; background: transparent; color: var(--vf-text-muted); cursor: pointer; line-height: 1; } .vf-pass-toggle i, .vf-pass-toggle .fa-duotone { font-size: 0.82rem; color: inherit; --fa-primary-color: currentColor; --fa-secondary-color: currentColor; --fa-secondary-opacity: 0.75; } .vf-pass-toggle:hover, .vf-pass-toggle:focus-visible, .vf-pass-toggle[aria-pressed="true"] { color: var(--vf-primary); background: var(--vf-primary-soft); } .vf-profile-addr { display: flex; flex-direction: column; gap: 0.4rem; } .vf-profile-addr-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0.4rem 0.4rem; } .vf-profile-strength { margin-top: 0.4rem; } .vf-profile-strength-top { display: flex; align-items: center; gap: 0.65rem; } .vf-profile-strength-bar { flex: 1 1 auto; height: 0.38rem; overflow: hidden; border-radius: 999px; background: var(--vf-surface-3); } .vf-profile-strength-bar span { display: block; width: 0; height: 100%; border-radius: inherit; background: var(--vf-danger); transition: width 0.35s ease, background-color 0.35s ease; } .vf-profile-strength[data-level="weak"] .vf-profile-strength-bar span { width: 22%; background: var(--vf-danger); } .vf-profile-strength[data-level="fair"] .vf-profile-strength-bar span { width: 48%; background: var(--vf-warning); } .vf-profile-strength[data-level="good"] .vf-profile-strength-bar span { width: 74%; background: var(--vf-primary); } .vf-profile-strength[data-level="strong"] .vf-profile-strength-bar span { width: 100%; background: var(--vf-success, #16a34a); } .vf-profile-strength-top strong { flex: 0 0 auto; min-width: 3.6rem; color: var(--vf-text-muted); font-size: 0.75rem; font-weight: 750; text-align: right; transition: color 0.25s ease; } .vf-profile-strength[data-level="weak"] .vf-profile-strength-top strong { color: var(--vf-danger); } .vf-profile-strength[data-level="fair"] .vf-profile-strength-top strong { color: var(--vf-warning); } .vf-profile-strength[data-level="good"] .vf-profile-strength-top strong { color: var(--vf-primary); } .vf-profile-strength[data-level="strong"] .vf-profile-strength-top strong { color: var(--vf-success, #16a34a); } .vf-profile-strength-rules { display: flex; flex-wrap: nowrap; align-items: stretch; justify-content: space-between; gap: 0.15rem; margin: 0.35rem 0 0; padding: 0; list-style: none; } .vf-profile-strength-rules li { display: flex; flex: 1 1 0; flex-direction: column; align-items: center; justify-content: center; gap: 0.12rem; min-width: 0; color: var(--vf-text-muted); font-size: 0.64rem; font-weight: 700; line-height: 1.15; text-align: center; transition: color 0.2s ease; } .vf-profile-strength-rules li span { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .vf-profile-strength-rules li i { font-size: 0.68rem; transition: transform 0.2s ease, color 0.2s ease; } .vf-profile-strength-rules li.is-ok { color: var(--vf-success, #16a34a); } .vf-profile-strength-rules li.is-ok i { color: var(--vf-success, #16a34a); transform: scale(1.12); } @media (max-width: 1080px) { .vf-profile-desk, .vf-profile-danger { grid-template-columns: 1fr; grid-template-areas: none; } .vf-profile-main, .vf-profile-rail { display: flex; flex-direction: column; gap: 1.1rem; min-width: 0; } .vf-profile-rail > .vf-profile-panel:last-child { display: block; height: auto; min-height: 0; overflow: visible; } .vf-profile-rail > .vf-profile-panel:last-child .vf-activity { flex: none; max-height: 16rem; } } @media (max-width: 900px) { .vf-profile-cover-row { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "identity actions" "stats stats"; } .vf-profile-identity { grid-area: identity; } .vf-profile-cover-actions { grid-area: actions; } .vf-profile-cover-stats { grid-area: stats; justify-content: flex-start; } } @media (max-width: 720px) { .vf-profile-facts, .vf-profile-place { grid-template-columns: 1fr; } .vf-profile-cover { padding: 1.1rem 1rem 1rem; } .vf-profile-cover-row { grid-template-columns: 1fr; grid-template-areas: "identity" "stats" "actions"; } .vf-profile-avatar { width: 4.4rem; height: 4.4rem; font-size: 1.15rem; } .vf-profile-copy h1 { font-size: 1.28rem; } .vf-profile-cover-stats, .vf-profile-cover-actions { justify-content: stretch; } .vf-profile-cover-stats { flex-direction: column; align-items: stretch; } .vf-profile-cover-actions .btn, .vf-profile-pill { width: 100%; justify-content: center; } .vf-session { flex-wrap: wrap; } .vf-profile-fact em { display: none; } } @media (max-width: 520px) { .vf-profile-modal .modal-dialog { max-width: calc(100% - 1rem); margin: 0.45rem auto; } .vf-profile-pass-grid, .vf-profile-addr-grid { grid-template-columns: 1fr; } } @media (max-height: 700px) { .vf-profile-modal .modal-header, .vf-profile-modal .modal-footer { padding: 0.45rem 0.75rem; } .vf-profile-modal .modal-body { padding: 0.5rem 0.75rem 0.2rem; } .vf-profile-edit { gap: 0.4rem; } .vf-profile-pass { padding-top: 0.4rem; } } .vf-customer-cell { display: flex; align-items: center; gap: 0.7rem; } .vf-customer-avatar { width: 2.25rem; height: 2.25rem; font-size: 0.72rem; } /* -------------------------------------------------------------------------- */ /* Completed order — IVAC visit kit */ /* -------------------------------------------------------------------------- */ .vf-complete:has(.vf-chat-dock) { padding-bottom: 4.5rem; } .vf-complete .vf-checkout-card { padding: 0.75rem 0.85rem; } .vf-complete .vf-checkout-card-head { margin-bottom: 0.4rem; } .vf-complete .vf-checkout-card-head h5 { font-size: 0.92rem; } .vf-complete .vf-create-hint { margin-bottom: 0.55rem; font-size: 0.8rem; line-height: 1.4; } .vf-complete-aside { display: flex; flex-direction: column; gap: 0.7rem; } .vf-complete .vf-page-hero { margin: 0 0 0.75rem; padding: 0.85rem 1rem 0.8rem; gap: 0.75rem; border-color: color-mix(in srgb, var(--vf-success) 28%, var(--vf-border)); background: radial-gradient(280px 110px at 0% 0%, color-mix(in srgb, var(--vf-success) 14%, transparent), transparent 72%), var(--vf-surface-1); } .vf-complete .vf-page-hero-top { gap: 0.75rem; } .vf-complete .vf-page-hero-icon { width: 3.15rem; height: 3.15rem; font-size: 1.35rem; border-radius: 0.9rem; } .vf-complete .vf-page-hero-copy h1 { font-size: 1.18rem; } .vf-complete .vf-page-hero-copy p { margin-top: 0.2rem; font-size: 0.82rem; } .vf-complete .vf-page-hero-actions { gap: 0.4rem; } .vf-complete .vf-page-hero-action { min-height: 2.15rem; padding: 0.32rem 0.8rem; font-size: 0.82rem; } .vf-complete .vf-page-hero-facts { padding-top: 0.65rem; gap: 0.55rem; } .vf-complete-arrive { display: flex; align-items: flex-start; gap: 0.55rem; margin: 0 0 0.85rem; padding: 0.55rem 0.7rem; border: 1px solid color-mix(in srgb, var(--vf-warning) 40%, var(--vf-border)); border-radius: var(--vf-radius-md); background: var(--vf-warning-soft); } .vf-complete-arrive > i { margin-top: 0.12rem; color: var(--vf-warning); } .vf-complete-arrive p { margin: 0; color: var(--vf-text-secondary); font-size: 0.8rem; line-height: 1.4; } .vf-complete-arrive strong { color: var(--vf-warning-text); } .vf-complete-files-count { display: inline-flex; align-items: center; justify-content: center; min-width: 1.5rem; height: 1.5rem; padding: 0 0.4rem; border-radius: 999px; background: var(--vf-primary-soft); color: var(--vf-primary); font-size: 0.72rem; font-weight: 800; } .vf-complete-files .vf-doc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(11.25rem, 1fr)); gap: 0.65rem; overflow: visible; } .vf-complete-files .vf-doc-tile { min-width: 0; max-width: none; background: var(--vf-surface-2); } .vf-complete-files .vf-doc-tile.is-missing { opacity: 0.78; } .vf-complete-files .vf-doc-tile-preview, .vf-complete-files .vf-doc-tile-preview.is-pdf, .vf-complete-files .vf-doc-tile-preview.is-file { flex: 0 0 12.25rem; height: 12.25rem; min-height: 12.25rem; } .vf-complete-files .vf-doc-tile-preview iframe { inset: auto; top: 0; left: 0; width: 170%; height: 170%; transform: scale(0.59); transform-origin: top left; } .vf-complete-files .vf-doc-tile.is-missing .vf-doc-tile-fallback { background: var(--vf-surface-1); color: var(--vf-text-muted); text-transform: none; letter-spacing: 0; font-size: 0.72rem; font-weight: 650; padding: 0.7rem; text-align: center; } .vf-complete-files .vf-doc-tile-meta { padding: 0.45rem 0.15rem 0.1rem; } .vf-complete-files .vf-doc-tile-open { display: inline-flex; align-items: center; gap: 0.3rem; } .vf-complete-pack { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 0.35rem; } .vf-complete-pack-item { display: flex; gap: 0.6rem; align-items: flex-start; padding: 0.5rem 0.6rem; border: 1px solid var(--vf-border); border-radius: var(--vf-radius-md); background: var(--vf-surface-2); } .vf-complete-pack-item.is-first { border-color: color-mix(in srgb, var(--vf-primary) 35%, var(--vf-border)); background: color-mix(in srgb, var(--vf-primary-soft) 55%, var(--vf-surface-2)); } .vf-complete-pack-num { width: 1.7rem; height: 1.7rem; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; border-radius: 999px; background: var(--vf-primary); color: var(--vf-text-inverse); font-size: 0.72rem; font-weight: 800; line-height: 1; -webkit-print-color-adjust: exact; print-color-adjust: exact; } .vf-complete-pack-body { min-width: 0; flex: 1; } .vf-complete-pack-top { display: flex; align-items: center; flex-wrap: wrap; gap: 0.25rem 0.5rem; } .vf-complete-pack-top strong { font-size: 0.84rem; font-weight: 750; line-height: 1.3; } .vf-complete-pack-body p { margin: 0.12rem 0 0; color: var(--vf-text-secondary); font-size: 0.76rem; line-height: 1.4; } .vf-complete-pack-or { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.35rem; } .vf-complete-pack-or span { display: inline-flex; align-items: center; padding: 0.04rem 0.4rem; border-radius: 999px; background: var(--vf-neutral-soft); color: var(--vf-neutral-text); font-size: 0.64rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; } .vf-complete-chip { display: inline-flex; align-items: center; padding: 0.08rem 0.42rem; border-radius: 999px; background: var(--vf-info-soft); color: var(--vf-info-text); font-size: 0.64rem; font-weight: 750; letter-spacing: 0.02em; } .vf-complete-notes { display: grid; gap: 0.4rem; margin-top: 0.7rem; } .vf-complete-note { display: flex; align-items: flex-start; gap: 0.5rem; padding: 0.55rem 0.65rem; border: 1px solid var(--vf-border); border-radius: var(--vf-radius-md); background: var(--vf-surface-1); } .vf-complete-note > i { margin-top: 0.08rem; color: var(--vf-primary); } .vf-complete-note.is-warning { border-color: color-mix(in srgb, var(--vf-warning) 38%, var(--vf-border)); background: var(--vf-warning-soft); } .vf-complete-note.is-warning > i { color: var(--vf-warning); } .vf-complete-note p { margin: 0; color: var(--vf-text-secondary); font-size: 0.78rem; line-height: 1.45; } .vf-complete-review { display: flex; flex-direction: column; gap: 0.4rem; } .vf-complete-review-top { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; } .vf-complete-review .vf-review-quote { margin: 0; font-size: 0.82rem; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .vf-complete-review .vf-review-public-note { margin: 0; font-size: 0.74rem; } .vf-complete-review .btn { align-self: stretch; } .vf-review-modal .modal-dialog { max-width: 26.5rem; margin: 0.6rem auto; } .vf-review-modal .modal-content { border: 1px solid var(--vf-border); border-radius: var(--vf-radius); background: var(--vf-surface-1); color: var(--vf-text); overflow: hidden; box-shadow: var(--vf-shadow-lg); } .vf-review-modal .modal-header, .vf-review-modal .modal-footer { padding: 0.7rem 1rem; border-color: var(--vf-border); } .vf-review-modal .modal-body { padding: 0.85rem 1rem 0.7rem; } .vf-review-modal .modal-title { display: inline-flex; align-items: center; gap: 0.45rem; margin: 0; font-size: 1rem; font-weight: 750; } .vf-review-modal .modal-title i { color: var(--vf-warning); } .vf-review-modal .btn-close { box-shadow: none; } html[data-bs-theme="dark"] .vf-review-modal .btn-close { filter: invert(1) grayscale(100%) brightness(180%); } .vf-review-lead { margin: 0 0 0.75rem; color: var(--vf-text-muted); font-size: 0.82rem; line-height: 1.45; } .vf-review-modal .vf-pay-notice { margin-bottom: 0.75rem; } .vf-review-rate { display: flex; flex-direction: column; align-items: center; gap: 0.3rem; margin: 0 0 0.8rem; padding: 0.85rem 0.7rem 0.7rem; border: 1px solid var(--vf-border); border-radius: var(--vf-radius-md); background: var(--vf-surface-2); } .vf-review-modal .vf-stars { margin: 0; gap: 0.2rem; } .vf-review-modal .vf-stars button { width: 2.55rem; height: 2.55rem; color: color-mix(in srgb, var(--vf-warning) 28%, var(--vf-border-strong)); border-radius: 0.55rem; transition: transform 0.12s ease, color 0.12s ease, background 0.12s ease; } .vf-review-modal .vf-stars button:hover, .vf-review-modal .vf-stars button:focus-visible { background: color-mix(in srgb, var(--vf-warning) 12%, transparent); transform: translateY(-1px); } .vf-review-modal .vf-stars button.is-on { color: var(--vf-warning); } .vf-review-modal .vf-stars .fa-duotone { font-size: 1.55rem; } .vf-review-rate-label { min-height: 1.2rem; color: var(--vf-text-muted); font-size: 0.8rem; font-weight: 750; } .vf-review-rate.is-picked .vf-review-rate-label { color: var(--vf-warning-text); } .vf-review-field { display: flex; flex-direction: column; gap: 0.35rem; margin-bottom: 0.7rem; } .vf-review-field-top { display: flex; align-items: baseline; justify-content: space-between; gap: 0.5rem; } .vf-review-field-top label { margin: 0; font-size: 0.78rem; font-weight: 750; } .vf-review-count { color: var(--vf-text-muted); font-size: 0.72rem; font-weight: 700; font-variant-numeric: tabular-nums; } .vf-review-count.is-over { color: var(--vf-danger); } .vf-review-modal textarea { width: 100%; min-height: 6rem; margin: 0; padding: 0.7rem 0.8rem; border: 1px solid var(--vf-border); border-radius: var(--vf-radius-md); background: var(--vf-surface-2); color: var(--vf-text); font-size: 0.9rem; line-height: 1.45; resize: vertical; } .vf-review-modal textarea:focus { outline: none; border-color: var(--vf-primary); box-shadow: 0 0 0 3px var(--vf-focus-ring); } .vf-review-modal-error { margin: 0 0 0.65rem; padding: 0.45rem 0.6rem; border: 1px solid color-mix(in srgb, var(--vf-danger) 35%, var(--vf-border)); border-radius: var(--vf-radius-md); background: var(--vf-danger-soft); color: var(--vf-danger); font-size: 0.78rem; font-weight: 700; line-height: 1.35; } .vf-review-modal .vf-review-public-note { margin: 0; font-size: 0.76rem; } .vf-review-modal .modal-footer .btn { min-height: 2.2rem; padding: 0.32rem 0.9rem; font-size: 0.84rem; font-weight: 700; } @media (max-width: 575.98px) { .vf-complete .vf-page-hero-actions { width: 100%; } .vf-complete .vf-page-hero-action { flex: 1 1 auto; justify-content: center; } .vf-complete-files .vf-doc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media print { body:has(.vf-complete) .app-navbar, body:has(.vf-complete) .app-sidebar, body:has(.vf-complete) .app-footer, body:has(.vf-complete) .app-backdrop, body:has(.vf-complete) .vf-toasts, body:has(.vf-complete) .vf-confirm, body:has(.vf-complete) .modal-backdrop, body:has(.vf-complete) .vf-page-hero-actions, .vf-complete-print-hide { display: none !important; } body:has(.vf-complete) .app-shell, body:has(.vf-complete) .app-main, body:has(.vf-complete) .app-content { display: block; width: 100%; max-width: none; margin: 0; padding: 0; background: var(--vf-paper); box-shadow: none; } .vf-complete .vf-page-hero, .vf-complete-pack-card { box-shadow: none; break-inside: avoid; } body:has(.vf-complete) .col-lg-8 { width: 100%; max-width: 100%; flex: 0 0 100%; } .vf-complete-pack-item, .vf-complete-note { break-inside: avoid; } } /* ---- Visa tracking (Passtrack proxy) ---- */ .vf-track-page { display: grid; gap: 0.65rem; } .vf-track-grid { display: grid; grid-template-columns: minmax(17rem, 0.95fr) minmax(0, 1.15fr); gap: 0.7rem; align-items: start; } .vf-track-card { margin: 0; padding: 0.75rem 0.85rem 0.8rem; border: 1px solid var(--vf-border); border-radius: var(--vf-radius-md, 0.85rem); background: var(--vf-surface-1); box-shadow: none; } .vf-track-card-head { display: grid; gap: 0.18rem; } .vf-track-card-head h2 { display: inline-flex; align-items: center; gap: 0.35rem; margin: 0; color: var(--vf-navy); font-size: 0.9rem; font-weight: 800; line-height: 1.2; } .vf-track-card-head h2 i { color: var(--vf-primary); font-size: 0.85rem; } .vf-track-card-head p { margin: 0; color: var(--vf-text-muted); font-size: 0.74rem; font-weight: 600; line-height: 1.35; } .vf-track-form { display: grid; gap: 0.55rem; margin-top: 0.7rem; } .vf-track-field { display: grid; gap: 0.22rem; min-width: 0; } .vf-track-field .form-label { display: block; margin: 0; color: var(--vf-text-muted); font-size: 0.7rem; font-weight: 750; line-height: 1; } .vf-track-input { display: flex; align-items: center; gap: 0.4rem; min-height: 2.3rem; padding: 0 0.65rem; border: 1px solid var(--vf-border); border-radius: 0.65rem; background: var(--vf-surface-2, var(--vf-surface-1)); } .vf-track-input i { flex-shrink: 0; color: var(--vf-primary); font-size: 0.78rem; } .vf-track-input input { width: 100%; min-width: 0; border: 0; background: transparent; color: var(--vf-text); font-size: 0.84rem; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; } .vf-track-input input:focus { outline: none; } #trackCaptcha { text-transform: none; letter-spacing: 0.02em; font-weight: 650; } .vf-track-captcha-line { display: grid; grid-template-columns: auto auto minmax(0, 1fr); gap: 0.4rem; align-items: center; } .vf-track-captcha-frame { display: grid; place-items: center; width: 7.5rem; height: 2.3rem; padding: 0.12rem; border: 1px solid var(--vf-border); border-radius: 0.55rem; background: #fff; overflow: hidden; } .vf-track-captcha-frame img { display: block; width: 100%; height: 100%; object-fit: contain; } .vf-track-refresh { display: inline-grid; place-items: center; width: 2.3rem; height: 2.3rem; padding: 0; border: 1px solid var(--vf-border); border-radius: 0.65rem; background: var(--vf-surface-2, #fff); color: var(--vf-primary); cursor: pointer; } .vf-track-refresh:hover, .vf-track-refresh:focus-visible { background: var(--vf-primary-soft); border-color: var(--vf-primary); } .vf-track-actions { display: flex; } .vf-track-submit { display: inline-flex; align-items: center; justify-content: center; gap: 0.35rem; min-height: 2.3rem; padding: 0 0.95rem; width: 100%; font-size: 0.82rem; font-weight: 800; } .vf-track-submit.is-busy { opacity: 0.78; pointer-events: none; } .vf-track-note { margin: 0; color: var(--vf-text-muted); font-size: 0.7rem; line-height: 1.4; } .vf-track-summary { display: grid; grid-template-columns: 1fr 1fr; gap: 0.4rem; margin: 0.65rem 0 0.55rem; } .vf-track-summary-item { display: grid; gap: 0.12rem; min-width: 0; padding: 0.4rem 0.5rem; border: 1px solid var(--vf-border); border-radius: 0.55rem; background: var(--vf-surface-2, var(--vf-surface-1)); } .vf-track-summary-item span { color: var(--vf-text-muted); font-size: 0.66rem; font-weight: 750; text-transform: uppercase; letter-spacing: 0.04em; } .vf-track-summary-item strong { color: var(--vf-navy); font-size: 0.82rem; font-weight: 800; line-height: 1.25; overflow-wrap: anywhere; } .vf-track-steps-wrap { margin: 0; border: 1px solid var(--vf-border); border-radius: 0.6rem; overflow: hidden; background: var(--vf-surface-1); } .vf-track-steps-head, .vf-track-steps li { display: grid; grid-template-columns: 4.2rem minmax(0, 1fr) 5.5rem; gap: 0.4rem; align-items: center; } .vf-track-steps-head { padding: 0.35rem 0.55rem; background: var(--vf-surface-2, var(--vf-primary-soft)); color: var(--vf-text-muted); font-size: 0.66rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; } .vf-track-steps { margin: 0; padding: 0; list-style: none; } .vf-track-steps li { padding: 0.42rem 0.55rem; border-top: 1px solid var(--vf-border); font-size: 0.78rem; } .vf-track-steps .vf-track-step-no { color: var(--vf-primary); font-weight: 800; } .vf-track-steps .vf-track-step-process { color: var(--vf-text); font-weight: 650; line-height: 1.3; overflow-wrap: anywhere; } .vf-track-steps .vf-track-step-status { display: inline-flex; justify-content: flex-end; align-items: center; min-width: 0; } .vf-track-badge { display: inline-flex; align-items: center; justify-content: center; max-width: 100%; min-height: 1.35rem; padding: 0.12rem 0.45rem; border-radius: 999px; background: var(--vf-success-soft, #dcfce7); color: var(--vf-success-text, #166534); font-size: 0.68rem; font-weight: 800; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .vf-track-badge.is-pending { background: var(--vf-warning-soft, #ffedd5); color: var(--vf-warning-text, #9a3412); } .vf-track-facts { display: grid; gap: 0.35rem; margin: 0.55rem 0 0; } .vf-track-facts div { display: grid; grid-template-columns: minmax(6rem, 0.85fr) minmax(0, 1.4fr); gap: 0.3rem 0.55rem; padding: 0.4rem 0.55rem; border: 1px solid var(--vf-border); border-radius: 0.55rem; background: var(--vf-surface-2, var(--vf-surface-1)); } .vf-track-facts dt { margin: 0; color: var(--vf-text-muted); font-size: 0.7rem; font-weight: 750; } .vf-track-facts dd { margin: 0; color: var(--vf-text); font-size: 0.82rem; font-weight: 700; line-height: 1.3; overflow-wrap: anywhere; } .vf-track-empty { margin: 0.4rem 0 0; color: var(--vf-text-muted); font-size: 0.78rem; } .vf-track-raw { margin-top: 0.5rem; padding: 0.5rem 0.6rem; border: 1px dashed var(--vf-border); border-radius: 0.55rem; color: var(--vf-text-secondary); font-size: 0.78rem; overflow: auto; } .vf-track-result.is-error .vf-track-card-head h2 i { color: #b42318; } .vf-track-result.is-empty-state { display: grid; place-items: center; min-height: 12rem; color: var(--vf-text-muted); text-align: center; } @media (max-width: 991.98px) { .vf-track-grid { grid-template-columns: 1fr; } } @media (max-width: 575.98px) { .vf-track-captcha-line { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "captcha refresh" "input input"; } .vf-track-captcha-frame { grid-area: captcha; width: 100%; max-width: 10rem; } .vf-track-refresh { grid-area: refresh; } .vf-track-captcha-line .vf-track-input { grid-area: input; } .vf-track-summary { grid-template-columns: 1fr; } .vf-track-steps-head, .vf-track-steps li { grid-template-columns: 3.6rem minmax(0, 1fr) 4.8rem; gap: 0.3rem; } }