@font-face {
  font-family:Vazirmatn;
  src:url('../fonts/Vazirmatn-Regular.ttf') format('truetype');
  font-weight:400;
  font-display:swap
}
@font-face {
  font-family:Vazirmatn;
  src:url('../fonts/Vazirmatn-Medium.ttf') format('truetype');
  font-weight:500 600;
  font-display:swap
}
@font-face {
  font-family:Vazirmatn;
  src:url('../fonts/Vazirmatn-Bold.ttf') format('truetype');
  font-weight:700 800;
  font-display:swap
}
@font-face {
  font-family:Vazirmatn;
  src:url('../fonts/Vazirmatn-Black.ttf') format('truetype');
  font-weight:900;
  font-display:swap
}
/* Customer portal theme. The administration interface keeps its existing theme. */
.vy-portal {
  --primary:#245ee5;
  --primary-dark:#142d54;
  --accent-teal:#245ee5;
  --text-main:#20334e;
  --text-muted:#586b83;
  --border:#dce4ef;
  --page-bg:#f4f7fc;
  --card-bg:#fff;
  --d-surface:#fff;
  --d-surface-2:#edf3fc;
  --d-hairline:#dce4ef;
  --d-teal:#245ee5;
  --input-placeholder:#65768e;
  --vy-blue:#245ee5;
  --vy-navy:#142d54;
  --vy-white:#fff;
  --vy-soft:#edf3fc;
  --vy-green:#147653;
  --shadow-sm:0 3px 12px #142d5405;
  --shadow-md:0 12px 40px #142d540a;
  background:var(--page-bg);
  color:var(--text-main);
  font-family:Vazirmatn,Tahoma,sans-serif;
  font-size:16px;
  line-height:1.8
}
.vy-portal :is(h1,h2,h3,p,span,a,button,label) {
  letter-spacing:normal
}
.vy-portal :is(button,input,select,textarea) {
  font-family:inherit
}
.vy-portal :is(a,button,input,summary):focus-visible {
  outline:3px solid var(--vy-blue);
  outline-offset:4px
}
.vy-portal button,.vy-portal a {
  touch-action:manipulation
}
.vy-portal button:disabled {
  opacity:.55;
  cursor:wait
}
.vy-skip {
  position:fixed;
  inset-block-start:-100px;
  inset-inline-start:20px;
  z-index:20000;
  padding:12px 22px;
  background:var(--vy-white);
  color:var(--vy-blue);
  border:2px solid
}
.vy-skip:focus {
  inset-block-start:10px
}
.vy-portal .lx {
  background:radial-gradient(ellipse at 0% 15%,#e4edff 0,transparent 55%),var(--page-bg);
  color:var(--text-main);
  padding:0 clamp(20px,5vw,80px)
}
.vy-portal .lx-top {
  direction:rtl;
  max-width:1280px;
  width:100%;
  margin:0 auto 48px;
  min-height:94px;
  border-bottom:1px solid var(--border)
}
.vy-portal .lx-logo-text {
  color:var(--vy-navy);
  font-size:28px
}
.vy-portal .lx-logo-icon {
  background:var(--vy-blue);
  box-shadow:none
}
.vy-portal .lx-pill {
  background:var(--vy-white);
  border-color:var(--border);
  color:var(--text-muted)
}
.vy-portal .lx-pill i {
  color:var(--vy-blue)
}
.vy-top-link {
  padding:10px 14px;
  font-size:14px;
  color:var(--text-main);
  border-radius:10px
}
.vy-top-link:hover {
  background:var(--vy-soft);
  color:var(--vy-blue)
}
.vy-portal .lx-main {
  grid-template-columns:1fr 1fr;
  gap:clamp(36px,6vw,90px);
  max-width:1200px;
  padding-block:20px 56px;
  align-items:center
}
.vy-eyebrow {
  display:block;
  color:var(--vy-blue);
  font-size:13px;
  font-weight:700;
  margin-bottom:12px
}
.vy-portal .lx-h1 {
  font-size:clamp(30px,3.5vw,48px);
  line-height:1.55;
  color:var(--vy-navy);
  font-weight:900;
  margin-bottom:16px
}
.vy-portal .lx-h1 .t {
  color:var(--vy-blue)
}
.vy-portal .lx-lead {
  font-size:16px;
  color:var(--text-muted);
  line-height:2;
  max-width:490px
}
.vy-portal .lx-form {
  padding:24px;
  background:var(--vy-white);
  border:1px solid var(--border);
  border-radius:20px;
  box-shadow:var(--shadow-md);
  max-width:500px
}
.vy-portal .lx-flabel {
  color:var(--text-main);
  font-size:14px
}
.vy-portal :is(.lx-input,.lx-otp-input,.sub-discount-input) {
  background:var(--page-bg);
  color:var(--vy-navy);
  border:1px solid #bccbe0
}
.vy-portal .lx-input {
  padding-inline:46px 16px
}
.vy-portal :is(.lx-input,.lx-otp-input):focus {
  background:var(--vy-white);
  border-color:var(--vy-blue);
  box-shadow:0 0 0 4px #245ee514
}
.vy-portal :is(.lx-btn,.sub-pay-btn,.sub-locked-cta-btn) {
  background:var(--vy-blue);
  color:var(--vy-white);
  box-shadow:0 6px 16px #245ee51c;
  min-height:48px;
  border-radius:12px
}
.vy-portal :is(.lx-btn,.sub-pay-btn):hover {
  background:var(--vy-navy);
  color:var(--vy-white);
  box-shadow:var(--shadow-md);
  transform:none
}
.vy-portal .lx-error {
  color:#a72532;
  background:#fff0f1;
  border-color:#efc4c9
}
.vy-portal :is(.lx-otp-iphone-note,.lx-otp-iphone-note span,.lx-otp-support-text,.lx-secure,.lx-trust-sub) {
  color:var(--text-muted)
}
.vy-form-note {
  font-size:12px;
  color:var(--text-muted);
  margin:14px 0 0;
  text-align:center
}
.vy-portal .lx-trust {
  gap:20px;
  margin-top:24px
}
.vy-portal .lx-trust-title {
  color:var(--text-main)
}
.vy-portal .lx-trust-ico {
  color:var(--vy-blue);
  background:var(--vy-soft);
  border:0
}
.vy-portal .lx-text-btn {
  color:var(--vy-blue);
  background:var(--vy-soft);
  border-color:var(--border);
  min-height:44px
}
.vy-portal .lx-divider:before,.vy-portal .lx-divider:after {
  background:var(--border)
}
.vy-portal .lx-otp-container {
  gap:8px
}
.vy-portal .lx-otp-input+.lx-otp-input {
  margin:0
}
.vy-portal .lx-loading-box {
  background:var(--vy-white);
  border-color:var(--border)
}
.vy-portal .lx-loading-text {
  color:var(--text-main)
}
.vy-showcase {
  position:relative;
  padding:34px;
  border:1px solid #d5e1f4;
  background:linear-gradient(145deg,#e8f0ff,#f9fbff);
  border-radius:32px;
  overflow:hidden
}
.vy-showcase:before {
  content:'';
  position:absolute;
  width:360px;
  height:360px;
  border:1px solid #c5d6f2;
  border-radius:50%;
  inset-inline-start:-70px;
  top:25px;
  pointer-events:none
}
.vy-showcase>* {
  position:relative
}
.vy-showcase-label {
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:13px;
  color:var(--text-muted)
}
.vy-showcase-label span:last-child {
  border:1px solid #c5d6f2;
  border-radius:30px;
  padding:3px 12px;
  font-size:12px
}
.vy-showcase h2 {
  font-size:30px;
  font-weight:900;
  color:var(--vy-navy);
  margin:22px 0 2px
}
.vy-showcase>p {
  color:var(--text-muted);
  font-size:14px
}
.vy-car-art {
  width:100%;
  height:220px;
  object-fit:contain;
  mix-blend-mode:multiply;
  margin:8px 0 22px
}
.vy-feature-stack {
  background:var(--vy-white);
  padding:8px 20px;
  border-radius:18px;
  box-shadow:var(--shadow-md)
}
.vy-feature {
  display:flex;
  align-items:center;
  gap:14px;
  padding:15px 0
}
.vy-feature+.vy-feature {
  border-top:1px solid var(--border)
}
.vy-feature>i {
  font-size:23px;
  color:var(--vy-blue);
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  background:var(--vy-soft);
  border-radius:12px
}
.vy-feature strong {
  display:block;
  font-size:14px
}
.vy-feature small {
  display:block;
  color:var(--text-muted);
  font-size:12px
}
.vy-steps {
  max-width:1200px;
  width:100%;
  margin:0 auto 40px;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:28px;
  padding-block:30px;
  border-block:1px solid var(--border)
}
.vy-step {
  display:flex;
  gap:14px;
  align-items:flex-start
}
.vy-step>b {
  border:1px solid var(--border);
  background:var(--vy-white);
  border-radius:50%;
  width:38px;
  height:38px;
  flex-shrink:0;
  display:grid;
  place-items:center;
  color:var(--vy-blue)
}
.vy-step strong {
  font-size:15px
}
.vy-step p {
  font-size:13px;
  color:var(--text-muted);
  margin:5px 0 0
}
.vy-portal .app-wrapper {
  max-width:1800px;
  margin:auto;
  min-height:100dvh
}
.vy-portal .sidebar {
  background:var(--vy-white);
  color:var(--text-main);
  border-inline-end:1px solid var(--border);
  width:280px;
  min-width:280px;
  padding:28px 20px;
  box-shadow:none
}
.vy-portal .sidebar-logo-text {
  color:var(--vy-navy)
}
.vy-portal .sidebar-logo-icon {
  background:var(--vy-blue);
  box-shadow:none
}
.vy-portal .sidebar-tagline {
  color:var(--text-muted);
  font-size:12px;
  margin-block:10px 26px
}
.vy-portal .vehicle-card {
  background:var(--page-bg);
  border:1px solid var(--border);
  box-shadow:none
}
.vy-portal .vehicle-card-name {
  color:var(--vy-navy)
}
.vy-portal .sidebar-info-row {
  border-color:var(--border)
}
.vy-portal :is(.sidebar-info-value,.sidebar-info-rtl,.sidebar-mobile-title) {
  color:var(--text-main)
}
.vy-portal :is(.sidebar-info-label,.sidebar-info-hint) {
  color:var(--text-muted)
}
.vy-portal .sidebar-info-icon {
  background:var(--vy-soft);
  color:var(--vy-blue)
}
.vy-portal .sidebar-sub-btn {
  background:var(--vy-blue);
  color:var(--vy-white);
  box-shadow:none
}
.vy-portal .sidebar-sub-btn.renew {
  background:var(--vy-white);
  color:var(--vy-green);
  border-color:var(--border)
}
.vy-portal .sidebar-sub-top {
  color:var(--vy-green)
}
.vy-portal .sidebar-logout {
  color:#a72532;
  background:#fff1f2;
  min-height:44px
}
.vy-portal .sidebar-close-btn {
  color:var(--text-main);
  background:var(--vy-soft)
}
.vy-portal .main-content {
  min-width:0;
  background:var(--page-bg)
}
.vy-portal .scroll-area {
  padding:32px clamp(20px,3vw,48px);
  max-width:1280px;
  width:100%;
  margin-inline:auto
}
.vy-page-head {
  display:flex;
  justify-content:space-between;
  gap:20px;
  align-items:center;
  margin-bottom:28px
}
.vy-page-head h1 {
  font-size:26px;
  font-weight:900;
  margin:0;
  color:var(--vy-navy)
}
.vy-page-head p {
  font-size:14px;
  color:var(--text-muted);
  margin:6px 0 0
}
.vy-passport {
  display:grid;
  grid-template-columns:1fr 220px;
  align-items:center;
  gap:24px;
  background:var(--vy-navy);
  color:var(--vy-white);
  padding:28px 32px;
  border-radius:22px;
  margin-bottom:24px;
  position:relative;
  overflow:hidden
}
.vy-passport .vy-eyebrow {
  color:#aecaff;
  margin-bottom:8px
}
.vy-passport h2 {
  font-size:24px;
  font-weight:800;
  margin-bottom:18px
}
.vy-passport dl {
  display:flex;
  flex-wrap:wrap;
  gap:18px 32px;
  margin:0
}
.vy-passport dt {
  font-size:12px;
  color:#b7c8e0;
  font-weight:400
}
.vy-passport dd {
  font-size:14px;
  margin:4px 0 0;
  overflow-wrap:anywhere
}
.vy-passport img {
  width:100%;
  height:145px;
  object-fit:contain;
  background:var(--vy-white);
  border-radius:16px;
  padding:12px
}
.vy-portal :is(.g-card,.info-card,.tip-list,.desc-card,.detail-item,.warranty-hero,.sub-card,.pay-result) {
  background:var(--vy-white);
  border:1px solid var(--border);
  box-shadow:var(--shadow-sm)
}
.vy-portal :is(.section-label,.g-card-title,.info-card-value,.tip-list-title,.desc-card-title,.warranty-hero-title,.sub-card-title,.sub-price-row.total,.pay-result-title,.sub-locked-cta-title) {
  color:var(--vy-navy)
}
.vy-portal .section-label {
  font-size:17px;
  margin-block:26px 16px
}
.vy-portal .g-card {
  padding:24px 18px;
  border-radius:18px;
  transition:border-color .18s,transform .18s
}
.vy-portal .g-card:hover {
  border-color:var(--vy-blue);
  box-shadow:var(--shadow-md);
  transform:translateY(-2px)
}
.vy-portal .g-card-icon-wrap {
  background:var(--vy-soft)!important;
  color:var(--vy-blue)
}
.vy-portal .g-card-status {
  background:var(--vy-soft);
  color:var(--vy-blue);
  font-size:12px
}
.vy-portal .g-card-lock {
  background:var(--vy-soft);
  color:var(--text-muted)
}
.vy-portal .tip-item {
  font-size:14px;
  line-height:2;
  padding-block:16px
}
.vy-portal .sub-locked-cta {
  background:#eaf1ff;
  border-color:#cbdcfb;
  box-shadow:none;
  flex-wrap:wrap;
  padding:20px
}
.vy-portal .sub-locked-cta-icon {
  color:var(--vy-blue);
  background:var(--vy-white)
}
.vy-portal .sub-locked-cta:hover {
  box-shadow:var(--shadow-sm);
  transform:none
}
.vy-portal .sub-card {
  max-width:700px;
  padding:32px;
  margin-inline:auto
}
.vy-portal .sub-card-title {
  font-size:23px
}
.vy-portal .sub-card-sub {
  font-size:14px;
  line-height:1.9
}
.vy-portal .sub-card-icon {
  background:var(--vy-soft);
  color:var(--vy-blue)
}
.vy-portal .sub-feature-list li {
  font-size:15px;
  padding-block:10px
}
.vy-portal :is(.sub-feature-list li i,.sub-discount-msg.ok,.sub-price-row.discount span) {
  color:var(--vy-green)
}
.vy-portal .sub-discount-msg.err {
  color:#a72532
}
.vy-portal .sub-discount-input {
  min-width:0
}
.vy-portal .sub-discount-btn {
  background:var(--vy-soft);
  color:var(--vy-blue)
}
.vy-portal .sub-price-row {
  font-size:15px;
  padding-block:12px;
  gap:16px;
  flex-wrap:wrap
}
.vy-portal .sub-price-row.total {
  font-size:20px
}
.vy-portal .mobile-topbar {
  background:var(--vy-white);
  border-bottom:1px solid var(--border);
  color:var(--text-main);
  box-shadow:none
}
.vy-portal .mobile-menu-btn {
  background:var(--vy-soft);
  color:var(--vy-blue)
}
.vy-portal .mobile-topbar-sub {
  color:var(--text-muted)
}
.vy-portal .site-footer {
  background:transparent;
  border-top:1px solid var(--border);
  box-shadow:none;
  margin-top:48px;
  color:var(--text-muted)
}
.vy-portal :is(.site-footer-logo-text,.site-footer-heading,.site-footer-channel-value,.site-footer-phone) {
  color:var(--vy-navy)
}
.vy-portal :is(.site-footer-desc,.site-footer-item,.site-footer-channel-label,.site-footer-bottom) {
  color:var(--text-muted)
}
.vy-portal .site-footer-channel {
  background:var(--vy-white);
  border-color:var(--border);
  color:var(--vy-blue);
  box-shadow:none
}
.vy-portal :is(.site-footer-logo-icon,.site-footer-item-icon) {
  background:var(--vy-soft);
  color:var(--vy-blue)
}
.vy-portal .site-footer-bottom {
  border-color:var(--border)
}
@media(min-width:768px) {
  .vy-portal .sidebar {
  position:sticky;
  top:0;
  height:100dvh
}
.vy-portal .main-content {
  height:auto
}
.vy-portal .scroll-area {
  overflow:visible
}
}
@media(max-width:1050px) {
  .vy-portal .lx-main {
  gap:30px
}
.vy-showcase {
  padding:24px
}
.vy-passport {
  grid-template-columns:1fr 150px;
  padding:24px
}
.vy-portal .sidebar {
  width:250px;
  min-width:250px
}
}
@media(max-width:900px) {
  .vy-portal .lx-main {
  grid-template-columns:1fr
}
.vy-portal .lx-left {
  max-width:620px;
  width:100%;
  margin:auto
}
.vy-portal .lx-form,.vy-portal .lx-lead {
  max-width:none
}
.vy-showcase {
  max-width:620px;
  margin:auto
}
.vy-portal .lx-top {
  margin-bottom:22px
}
.vy-steps {
  gap:16px
}
}
@media(max-width:767px) {
  .vy-portal .sidebar {
  width:min(320px,88vw);
  min-width:0
}
.vy-portal .scroll-area {
  padding:24px 16px
}
.vy-page-head h1 {
  font-size:23px
}
.vy-page-head {
  margin-bottom:20px
}
.vy-passport {
  grid-template-columns:1fr 110px;
  gap:16px;
  padding:22px
}
.vy-passport h2 {
  font-size:21px
}
.vy-passport img {
  height:105px
}
.vy-passport dl {
  gap:12px
}
.vy-passport dd {
  font-size:12px
}
.vy-portal .sub-card {
  padding:22px
}
.vy-steps {
  grid-template-columns:1fr;
  gap:24px
}
.vy-portal .lx-trust-item {
  width:auto
}
.vy-portal .lx-trust {
  gap:16px
}
.vy-portal .lx-main {
  padding-bottom:30px
}
.vy-portal .lx-form {
  padding:20px
}
.vy-portal .sub-locked-cta-btn {
  width:100%;
  justify-content:center
}
.vy-portal .site-footer {
  margin-top:32px
}
.vy-portal .lx-otp-input {
  width:40px;
  min-width:0
}
}
@media(max-width:380px) {
  .vy-passport {
  grid-template-columns:1fr
}
.vy-passport img {
  display:none
}
.vy-portal .lx {
  padding-inline:16px
}
.vy-top-link {
  padding-inline:4px
}
}
@media(prefers-reduced-motion:reduce) {
  .vy-portal *,.vy-portal *:before,.vy-portal *:after {
  animation:none!important;
  transition:none!important;
  scroll-behavior:auto!important
}
}
.vy-portal .warranty-pill {
  color:var(--text-muted);
  background:var(--vy-soft);
  border-color:var(--border)
}
.vy-portal .warranty-pill.is-active {
  color:var(--vy-green);
  background:#e5f5ec;
  border-color:#b5ddc8
}
.vy-portal .mileage-hero {
  background:var(--vy-white);
  color:var(--text-main);
  box-shadow:var(--shadow-sm);
  padding:24px
}
.vy-portal .mileage-hero:after {
  color:#245ee508
}
.vy-portal :is(.mileage-hero-top,.mileage-meta,.mileage-meta-note,.mileage-hint,.mileage-input-label,.mileage-stepper-label,.mileage-floor-hint,.mileage-empty-sub) {
  color:var(--text-muted);
  font-size:13px
}
.vy-portal .mileage-hero-value {
  color:var(--vy-navy)
}
.vy-portal .mileage-hero-value small {
  color:var(--text-muted)
}
.vy-portal :is(.mileage-edit-chip,.mileage-step-btn,.mileage-cancel-btn) {
  background:var(--vy-soft);
  color:var(--vy-blue);
  border-color:var(--border);
  min-height:44px
}
.vy-portal .mileage-input {
  background:var(--page-bg);
  color:var(--text-main);
  border-color:#bccbe0
}
.vy-portal .mileage-input:focus {
  background:var(--vy-white);
  border-color:var(--vy-blue)
}
.vy-portal .vy-car-art {
  border-radius:16px;
  mix-blend-mode:normal
}