@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&display=swap');

.vpauth-page,
.vpauth-page * { box-sizing: border-box; font-family: "DM Sans", Arial, sans-serif; }
.vimpromo-auth-template #primary { width: 100%; max-width: none; margin: 0 !important; padding: 0 !important; }
.vpauth-page { min-height: 100vh; background: #f7f7f8; color: #111; }
.vpauth-card { width: min(430px, calc(100% - 40px)); margin: 0 auto; padding: 48px 58px; border-radius: 4px; background: #fff; box-shadow: 0 18px 38px rgba(17, 24, 39, .18); }
.vpauth-page--login { display: grid; min-height: 100vh; place-items: center; padding: 48px 20px; }
.vpauth-brand { display: block; width: 170px; margin: 0 auto 34px; }
.vpauth-brand img,
.vpauth-card--signed-in > img { display: block; width: 100%; }
.vpauth-card h1 { margin: 0 0 28px; color: #111; font-size: 28px; font-weight: 700; line-height: 1.1; text-align: center; }
.vpauth-form { margin: 0; }
.vpauth-field { position: relative; margin: 0 0 16px; }
.vpauth-field label { display: block; position: absolute; z-index: 1; top: 18px; left: 16px; color: #2e3138; font-size: 15px; line-height: 1.2; pointer-events: none; transition: top .16s ease, font-size .16s ease, color .16s ease; }
.vpauth-field input { width: 100%; height: 58px; padding: 25px 16px 8px; border: 1px solid #dfe2e7; border-radius: 5px; background: #fff; color: #111; font-size: 15px; line-height: 1.2; outline: none; }
.vpauth-field select { width: 100%; height: 58px; padding: 20px 16px 8px; border: 1px solid #dfe2e7; border-radius: 5px; background: #fff; color: #111; font-size: 15px; line-height: 1.2; outline: none; }
.vpauth-field input::placeholder { color: transparent; }
.vpauth-field:focus-within label,
.vpauth-field:has(input:not(:placeholder-shown)) label { top: 8px; font-size: 11px; color: #526173; }
.vpauth-field input:focus { border-color: #1268ff; box-shadow: 0 0 0 2px rgba(18, 104, 255, .12); }
.vpauth-field--password input { padding-right: 52px; }
.vpauth-password-toggle,
.vpauth-password-toggle:hover,
.vpauth-password-toggle:focus,
.vpauth-password-toggle:active { position: absolute; right: 10px; top: 13px; width: 34px; height: 32px; padding: 0; border: 0!important; background: transparent!important; box-shadow: none!important; color: #20242b!important; cursor: pointer; outline: 0!important; }
.vpauth-password-toggle svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
.vpauth-password-toggle .vpauth-eye-off { display: none; }
.vpauth-password-toggle.is-visible .vpauth-eye-on { display: none; }
.vpauth-password-toggle.is-visible .vpauth-eye-off { display: block; }
.vpauth-forgot { margin: -3px 0 18px; font-size: 14px; }
.vpauth-page a { color: #1268ff; text-decoration: none; }
.vpauth-submit { display: flex; width: 100%; min-height: 58px; align-items: center; justify-content: center; border: 0; border-radius: 4px; background: #000; color: #fff !important; font-size: 16px; font-weight: 700; text-decoration: none; cursor: pointer; }
.vpauth-switch { margin: 18px 0 0; color: #5e636d; font-size: 14px; text-align: center; }
.vpauth-legal { margin: 16px 0 0; color: #858991; font-size: 12px; line-height: 1.45; text-align: center; }
.vpauth-check { display: flex; gap: 8px; margin: 12px 0; color: #5e636d; font-size: 12px; line-height: 1.45; }
.vpauth-check input { width: 14px; height: 14px; flex: 0 0 auto; margin: 2px 0 0; }
.vpauth-check--reseller { margin-top: 20px; color: #20242b; font-weight: 600; }
.vpauth-reseller-fields { margin: 16px 0 4px; padding: 18px; border: 1px solid #dfe2e7; border-radius: 5px; background: #f7faff; }
.vpauth-reseller-fields[hidden] { display: none; }
.vpauth-reseller-fields .vpauth-field:last-child { margin-bottom: 0; }
.vpauth-reseller-fields .vpauth-field:has(select) label { top: 8px; font-size: 11px; color: #526173; }
.vpauth-field--upload label { position: static; display: block; margin: 0 0 8px; color: #2e3138; font-size: 13px; pointer-events: auto; }
.vpauth-field--upload input { height: auto; padding: 10px 0 0; border: 0; border-radius: 0; background: transparent; font-size: 13px; }
.vpauth-info { display: inline-flex; width: 16px; height: 16px; align-items: center; justify-content: center; border: 1px solid #526173; border-radius: 50%; color: #526173; font-size: 11px; font-weight: 700; font-style: normal; line-height: 1; cursor: help; }
.vpauth-register-layout { display: grid; min-height: 100vh; grid-template-columns: 1fr 1fr; }
.vpauth-panel { display: flex; align-items: center; justify-content: center; padding: 48px 32px; }
.vpauth-panel--form { background: #f7f7f8; }
.vpauth-panel--form .vpauth-card { width: min(430px, 100%); }
.vpauth-panel--brand { position: relative; overflow: hidden; background: #1261e8; color: #fff; }
.vpauth-brand-content { display: flex; width: min(520px, 100%); flex-direction: column; gap: 40px; }
.vpauth-brand-copy { width: min(520px, 100%); }
.vpauth-brand-copy h2 { max-width: 500px; margin: 0; color: #fff; font-size: clamp(36px, 4vw, 56px); font-weight: 700; line-height: 1.12; }
.vpauth-brand-copy ul { margin: 28px 0 0; padding: 0; list-style: none; }
.vpauth-brand-copy li { display: flex; align-items: center; gap: 15px; margin: 16px 0; color: #fff; font-size: 19px; line-height: 1.4; }
.vpauth-brand-copy li:before { width: 14px; height: 8px; flex: 0 0 auto; border-bottom: 2px solid #fff; border-left: 2px solid #fff; content: ''; transform: rotate(-45deg) translateY(-2px); }
.vpauth-brand-content > img { width: min(510px, 76%); border-radius: 20px; box-shadow: 0 24px 50px rgba(0, 0, 0, .2); object-fit: cover; }
@media (min-width: 861px) {
  .vpauth-register-layout { height: 100dvh; min-height: 0; overflow: hidden; }
  .vpauth-register-layout .vpauth-panel { min-height: 0; padding: 32px; }
  .vpauth-panel--form { align-items: flex-start; overflow-y: hidden; }
  .vpauth-panel--form:has(.vpauth-check--reseller input:checked) { overflow-y: auto; }
  .vpauth-panel--form .vpauth-brand { margin-bottom: 14px; }
  .vpauth-panel--form .vpauth-card h1 { margin-bottom: 22px; }
  .vpauth-brand-content { width: min(700px, 100%); gap: 28px; }
  .vpauth-brand-copy { width: 100%; }
  .vpauth-brand-copy h2 { max-width: 700px; font-size: clamp(38px, 3.4vw, 56px); }
  .vpauth-brand-copy ul { margin-top: 20px; }
  .vpauth-brand-copy li { margin: 12px 0; font-size: 18px; }
  .vpauth-brand-content > img { width: min(500px, 80%); max-height: 48vh; }
}
.vpauth-page--register .b2bking_registration_roles_dropdown_section select:not(.select2-hidden-accessible) { appearance: none; background-image: linear-gradient(45deg, transparent 50%, #526173 50%), linear-gradient(135deg, #526173 50%, transparent 50%); background-position: calc(100% - 19px) 50%, calc(100% - 13px) 50%; background-repeat: no-repeat; background-size: 6px 6px, 6px 6px; padding-right: 40px; }
.vpauth-page--register .b2bking_country_or_state select:not(.select2-hidden-accessible) { appearance: none; background-image: linear-gradient(45deg, transparent 50%, #526173 50%), linear-gradient(135deg, #526173 50%, transparent 50%); background-position: calc(100% - 19px) 50%, calc(100% - 13px) 50%; background-repeat: no-repeat; background-size: 6px 6px, 6px 6px; padding-right: 40px; }
.vpauth-card .woocommerce-error,
.vpauth-card .woocommerce-message { margin: 0 0 18px; padding: 12px 14px; border: 1px solid #f0b8b8; border-radius: 4px; background: #fff5f5; color: #8a1717; font-size: 13px; line-height: 1.4; list-style: none; }
.vpauth-card--signed-in { text-align: center; }
.vpauth-card--signed-in > img { width: 170px; margin: 0 auto 34px; }
.vpauth-terms { padding: 48px 24px; background: #fff; color: #20242b; font-family: "DM Sans", Arial, sans-serif; }
#primary:has(.vpauth-terms) { margin-top: 0 !important; }
.vpauth-terms__inner { width: min(760px, 100%); margin: 0 auto; }
.vpauth-terms__eyebrow { margin: 0 0 12px; color: #1268ff; font-size: 13px; font-weight: 700; letter-spacing: .08em; }
.vpauth-terms h1 { margin: 0; color: #111; font-size: 48px; line-height: 1.1; }
.vpauth-terms__date { margin: 16px 0 40px !important; color: #6f7682 !important; font-size: 14px !important; }
.vpauth-terms h2 { margin: 38px 0 10px; color: #111; font-size: 23px; line-height: 1.25; }
.vpauth-terms p { margin: 0; color: #49515d; font-size: 16px; line-height: 1.7; }
.vpauth-terms a, .vpauth-terms a:hover, .vpauth-terms a:focus { color: #1268ff; text-decoration: none!important; }

@media (max-width: 860px) {
  .vpauth-register-layout { grid-template-columns: 1fr; }
  .vpauth-panel--brand { display: none; }
  .vpauth-panel { min-height: 100vh; padding: 40px 20px; }
  .vpauth-terms { padding: 40px 20px; }
  .vpauth-terms h1 { font-size: 38px; }
}

@media (max-width: 460px) {
  .vpauth-card { width: 100%; padding: 36px 24px; box-shadow: none; }
  .vpauth-page--login { padding: 0; }
  .vpauth-brand { width: 148px; margin-bottom: 28px; }
}