﻿/* ===== НАЧАЛО СТИЛЕЙ ФАЙЛА modal-register.css ===== */

/* --- НАЧАЛО СТИЛЕЙ СЕКЦИИ [modal-register.css] Базовые переменные и shell --- */
/* ================================
   PG AUTH MODAL - WOW GLASS 2026
   ================================ */
/* FILE MAP:
   1) Theme vars
   2) Backdrop + modal shell
   3) Header/body/cards/tabs/form
   4) CTA/alt auth
   5) intl-tel-input dark skin
   6) Autofill/background fixes */

/* LEGACY/REVIEW NOTE:
   Selector below may be a typo/non-standard target (`dropdown ...`).
   Kept as-is intentionally (no deletion). */
dropdown .iti__dropdown-content {
    background: black!important;
}
:root{
  --pgA1: 255, 60, 60;
  --pgA2: 255, 0, 120;
  --pgA3: 120, 130, 255;
  --pgW: 255,255,255;
  --pgB: 0,0,0;
}


.pg-auth-backdrop{
  position: fixed;
  inset: 0;
  z-index: 1300;
  display: none;
  padding: 18px;
  background:
    radial-gradient(1200px 700px at 12% 8%, rgba(var(--pgA2), .20), transparent 60%),
    radial-gradient(1200px 700px at 88% 28%, rgba(var(--pgA3), .12), transparent 62%),
    radial-gradient(900px 520px at 45% 95%, rgba(var(--pgA1), .10), transparent 62%),
    rgba(0,0,0,.72);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.pg-auth-backdrop.is-open{
  display:flex;
  align-items:center;
  justify-content:center;
  animation: pgBackdropIn .22s ease-out;
}


.pg-auth-modal{
  width: min(1040px, calc(100vw - 32px));
  border-radius: 28px;
  color: rgba(var(--pgW), .92);
  position: relative;
  overflow: hidden;
  isolation: isolate;

  box-shadow:
    0 30px 120px rgba(var(--pgB), .70),
    0 10px 30px rgba(var(--pgB), .45);

  transform: translateY(14px) scale(.98);
  opacity: 0;
  animation: pgModalPop .28s cubic-bezier(.2,.9,.2,1) forwards;

  background: rgba(10,12,16,.78);
  border: 1px solid rgba(255,255,255,.10);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

/* macOS Safari: if transparency is reduced, make the auth modal readable */
@media (prefers-reduced-transparency: reduce) {
  .pg-auth-backdrop{
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: rgba(0,0,0,.82) !important;
  }

  .pg-auth-modal{
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: rgba(10,12,16,.92) !important;
  }
}


.pg-auth-modal::before{
  content:"";
  position:absolute;
  inset:0;
  padding: 1px;
  border-radius: 28px;
  background: linear-gradient(120deg,
    rgba(var(--pgA1), .75),
    rgba(var(--pgA2), .65),
    rgba(var(--pgA3), .35)
  );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events:none;
  opacity: .75;
  filter: saturate(1.06);
}

/* --- КОНЕЦ СТИЛЕЙ СЕКЦИИ [modal-register.css] Базовые переменные и shell --- */

/* --- НАЧАЛО СТИЛЕЙ СЕКЦИИ [modal-register.css] aura --- */
/* aura */
.pg-auth-modal::after{
  content:"";
  position:absolute;
  inset:-180px;
  background:
    radial-gradient(800px 520px at 18% 10%, rgba(var(--pgA2), .22), transparent 60%),
    radial-gradient(760px 480px at 84% 35%, rgba(var(--pgA3), .16), transparent 64%),
    radial-gradient(720px 520px at 45% 92%, rgba(var(--pgA1), .14), transparent 66%);
  filter: blur(2px) saturate(1.06);
  opacity: .92;
  animation: pgAura 7.5s ease-in-out infinite alternate;
  pointer-events:none;
  z-index: 1;
}

.pg-auth-modal > *{ position: relative; z-index: 2; }

/* --- КОНЕЦ СТИЛЕЙ СЕКЦИИ [modal-register.css] aura --- */

/* --- НАЧАЛО СТИЛЕЙ СЕКЦИИ [modal-register.css] noise --- */
/* noise */
.pg-auth-modal .pg-noise{
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity: .06;
  z-index: 3;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='260' height='260' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
}

/* --- КОНЕЦ СТИЛЕЙ СЕКЦИИ [modal-register.css] noise --- */

/* --- НАЧАЛО СТИЛЕЙ СЕКЦИИ [modal-register.css] Header --- */
/* Header */
.pg-auth-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 18px 18px 14px;
  border-bottom: 1px solid rgba(255,255,255,.10);
}

.pg-auth-title{
  font-size: 18px;
  font-weight: 1000;
  letter-spacing: -.2px;
  display:flex;
  align-items:center;
  gap: 10px;
}

.pg-auth-title .pg-auth-badge{
  font-size: 11px;
  font-weight: 1000;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.82);
  box-shadow: 0 10px 40px rgba(var(--pgA1), .10);
}

.pg-auth-close{
  width: 46px;
  height: 40px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.22);
  color: rgba(255,255,255,.92);
  cursor:pointer;
  font-size: 22px;
  display:flex;
  align-items:center;
  justify-content:center;
  transition: transform .18s ease, background .18s ease, border-color .18s ease;
}
.pg-auth-close:hover{
  transform: translateY(-1px) rotate(-2deg);
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.22);
}

/* --- КОНЕЦ СТИЛЕЙ СЕКЦИИ [modal-register.css] Header --- */

/* --- НАЧАЛО СТИЛЕЙ СЕКЦИИ [modal-register.css] Body grid --- */
/* Body grid */
.pg-auth-body{
  padding: 18px;
  display:grid;
  grid-template-columns: 1.1fr 1px .9fr;
  gap: 16px;
}

.pg-vline{
  background: linear-gradient(to bottom,
    transparent,
    rgba(255,255,255,.12),
    transparent
  );
  opacity: .8;
}

/* --- КОНЕЦ СТИЛЕЙ СЕКЦИИ [modal-register.css] Body grid --- */

/* --- НАЧАЛО СТИЛЕЙ СЕКЦИИ [modal-register.css] cards --- */
/* cards */
.pg-auth-col{
  border-radius: 24px;
  background: rgba(0,0,0,.18);
  border: 1px solid rgba(255,255,255,.08);
  padding: 16px;
  position: relative;
  overflow: hidden;
}

.pg-auth-col::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(420px 220px at 20% 0%, rgba(255,255,255,.08), transparent 65%),
    radial-gradient(520px 260px at 90% 10%, rgba(255,255,255,.05), transparent 62%);
  pointer-events:none;
}
.pg-auth-col > *{ position: relative; z-index: 2; }

/* --- КОНЕЦ СТИЛЕЙ СЕКЦИИ [modal-register.css] cards --- */

/* --- НАЧАЛО СТИЛЕЙ СЕКЦИИ [modal-register.css] Tabs --- */
/* Tabs */
.pg-auth-switch{
  display:flex;
  gap: 10px;
  padding: 8px;
  border-radius: 18px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.10);
  margin: 0 0 12px;
}

.pg-auth-tab{
  flex:1;
  height: 42px;
  border-radius: 14px;
  border: 1px solid transparent;
  background: transparent;
  color: rgba(255,255,255,.78);
  font-weight: 1000;
  cursor:pointer;
  transition: background .18s ease, transform .18s ease, border-color .18s ease;
}

.pg-auth-tab.is-active{
  background: linear-gradient(90deg, rgba(var(--pgA1), .95), rgba(var(--pgA2), .72));
  color: rgba(255,255,255,.95);
  box-shadow: 0 18px 70px rgba(var(--pgA1), .14);
}
.pg-auth-tab:hover{ transform: translateY(-1px); }

/* --- КОНЕЦ СТИЛЕЙ СЕКЦИИ [modal-register.css] Tabs --- */

/* --- НАЧАЛО СТИЛЕЙ СЕКЦИИ [modal-register.css] form --- */
/* form */
.pg-auth-form .pg-row{
  display:grid;
  gap: 8px;
  margin: 12px 0;
}

.pg-auth-form label{
  font-size: 13px;
  font-weight: 900;
  color: rgba(255,255,255,.72);
}


.pg-auth-form input:focus{
  background: rgba(0,0,0,.30);
  border-color: rgba(255,255,255,.24);
  box-shadow:
    0 0 0 4px rgba(var(--pgA1), .11),
    0 18px 80px rgba(var(--pgA2), .08);
  transform: translateY(-1px);
}

.pg-forgot{
  display:flex;
  justify-content:flex-end;
  margin: 6px 0 10px;
}
.pg-forgot a{
  color: rgba(255,255,255,.78);
  text-decoration:none;
  font-weight: 900;
  font-size: 13px;
}
.pg-forgot a:hover{ color: rgba(255,255,255,.95); }

/* --- КОНЕЦ СТИЛЕЙ СЕКЦИИ [modal-register.css] form --- */

/* --- НАЧАЛО СТИЛЕЙ СЕКЦИИ [modal-register.css] CTA --- */
/* CTA */
.pg-btn{
  width:100%;
  height: 50px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.92);
  font-weight: 1000;
  cursor:pointer;
  position: relative;
  overflow:hidden;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, filter .18s ease;
}

.pg-btn.pg-btn-green{
  background: linear-gradient(90deg, rgba(var(--pgA1), .95), rgba(var(--pgA2), .74));
  border-color: rgba(255,255,255,.18);
  box-shadow:
    0 24px 90px rgba(var(--pgA1), .16),
    0 10px 26px rgba(0,0,0,.45);
}

.pg-btn::before{
  content:"";
  position:absolute;
  inset:-2px;
  background: linear-gradient(120deg, transparent 0%, rgba(255,255,255,.22) 25%, transparent 50%);
  transform: translateX(-120%);
  opacity: 0;
  transition: transform .7s ease, opacity .25s ease;
  pointer-events:none;
}

.pg-btn:hover{
  transform: translateY(-1px) scale(1.01);
  border-color: rgba(255,255,255,.22);
  filter: saturate(1.04);
}

.pg-btn:hover::before{
  opacity: .9;
  transform: translateX(120%);
}

.pg-btn:active{ transform: translateY(0) scale(.995); }

/* --- КОНЕЦ СТИЛЕЙ СЕКЦИИ [modal-register.css] CTA --- */

/* --- НАЧАЛО СТИЛЕЙ СЕКЦИИ [modal-register.css] OR --- */
/* OR */
.pg-or{
  display:flex;
  align-items:center;
  gap: 12px;
  margin: 14px 0 10px;
  color: rgba(255,255,255,.58);
  font-weight: 900;
  font-size: 12px;
  letter-spacing: .4px;
}
.pg-or:before,
.pg-or:after{
  content:"";
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(255,255,255,.12), transparent);
  flex:1;
}

.pg-sub{
  margin: 10px 0 10px;
  color: rgba(255,255,255,.72);
  font-weight: 700;
  text-align:center;
}

/* --- КОНЕЦ СТИЛЕЙ СЕКЦИИ [modal-register.css] OR --- */

/* --- НАЧАЛО СТИЛЕЙ СЕКЦИИ [modal-register.css] switches --- */
/* switches */
.pg-switch-row{ display:flex; gap: 12px; }
.pg-switch{
  flex:1;
  height: 46px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.05);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color: rgba(255,255,255,.92);
  text-decoration:none;
  font-weight: 1000;
  transition: transform .18s ease, background .18s ease, border-color .18s ease;
}
.pg-switch:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.20);
}

/* --- КОНЕЦ СТИЛЕЙ СЕКЦИИ [modal-register.css] switches --- */

/* --- НАЧАЛО СТИЛЕЙ СЕКЦИИ [modal-register.css] right --- */
/* right */
.popap-logo{
  display:block;
  width: 190px;
  max-width: 72%;
  margin: 8px auto 10px;
  filter: drop-shadow(0 26px 70px rgba(0,0,0,.65));
}

.pg-alt{
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 18px;
  padding: 12px 14px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap: 10px;
  background: rgba(0,0,0,.20);
  cursor:pointer;
  transition: transform .18s ease, background .18s ease, border-color .18s ease;
  text-decoration: none;
  color: white;
}
.pg-alt:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.20);
}

.pg-alt--disabled{
  opacity: .65;
  cursor: default;
  pointer-events: none;
}

.pg-google-proxy,
.pg-google-proxy-retail{
  position: relative;
  overflow: hidden;
  pointer-events: auto;
}

.pg-google-proxy .pg-g,
.pg-google-proxy .pg-google,
.pg-google-proxy-retail .pg-g,
.pg-google-proxy-retail .pg-google{
  position: relative;
  z-index: 1;
  pointer-events: none;
}

.pg-google-proxy__native{
  position: absolute;
  inset: 0;
  z-index: 6;
  display: block;
  opacity: .01;
  overflow: hidden;
  pointer-events: auto;
}

.pg-google-proxy__native .googlesitekit-sign-in-with-google__frontend-output-button{
  position: absolute;
  inset: 0;
  display: block;
}

.pg-google-proxy__native .googlesitekit-sign-in-with-google__frontend-output-button > div,
.pg-google-proxy__native .googlesitekit-sign-in-with-google__frontend-output-button iframe{
  width: 100% !important;
  min-width: 100% !important;
  max-width: 100% !important;
  height: 100% !important;
  min-height: 100% !important;
}

.pg-google-proxy--direct,
.pg-google-proxy-retail--direct{
  display:flex;
  align-items:center;
  justify-content:center;
}

.pg-google-proxy--direct .googlesitekit-sign-in-with-google__frontend-output-button,
.pg-google-proxy-retail--direct .googlesitekit-sign-in-with-google__frontend-output-button{
  width:100%;
  max-width:360px;
}

.pg-google-proxy--direct .googlesitekit-sign-in-with-google__frontend-output-button > div,
.pg-google-proxy--direct .googlesitekit-sign-in-with-google__frontend-output-button iframe,
.pg-google-proxy-retail--direct .googlesitekit-sign-in-with-google__frontend-output-button > div,
.pg-google-proxy-retail--direct .googlesitekit-sign-in-with-google__frontend-output-button iframe{
  width:100% !important;
  min-width:100% !important;
}

/* --- КОНЕЦ СТИЛЕЙ СЕКЦИИ [modal-register.css] right --- */

/* --- НАЧАЛО СТИЛЕЙ СЕКЦИИ [modal-register.css] intl-tel-input dark --- */
/* intl-tel-input dark */
.pg-auth-form .iti{ width:100%; position:relative; }
.pg-auth-form .iti input.pg-phone-intl{ width:100%; padding-left: 140px !important; }
.pg-auth-form .iti__selected-flag{
  background: rgba(255,255,255,.06);
  border-right: 1px solid rgba(255,255,255,.10);
  border-radius: 18px 0 0 18px;
  padding: 0 12px;
  display:flex;
  align-items:center;
  gap: 8px;
  height:100%;
}
.pg-auth-form .iti__arrow{ border-top-color: rgba(255,255,255,.75); }

@media (max-width: 900px){
  .pg-auth-body{ grid-template-columns: 1fr; }
  .pg-vline{ display:none; }
}

/* --- КОНЕЦ СТИЛЕЙ СЕКЦИИ [modal-register.css] intl-tel-input dark --- */

/* --- НАЧАЛО СТИЛЕЙ СЕКЦИИ [modal-register.css] animations --- */
/* animations */
@keyframes pgBackdropIn{
  from{ opacity: 0; }
  to{ opacity: 1; }
}
@keyframes pgModalPop{
  to{ opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes pgAura{
  0%{ transform: translate3d(0,0,0) scale(1); }
  50%{ transform: translate3d(18px,-10px,0) scale(1.03); }
  100%{ transform: translate3d(-14px,12px,0) scale(1.02); }
}

/* --- КОНЕЦ СТИЛЕЙ СЕКЦИИ [modal-register.css] animations --- */

/* --- НАЧАЛО СТИЛЕЙ СЕКЦИИ [modal-register.css] AUTH INPUTS: keep dark bg after fill/autofill --- */
/* ===== AUTH INPUTS: keep dark bg after fill/autofill ===== */
.pg-auth-form input,
.pg-auth-form textarea,
.pg-auth-form .iti input.pg-phone-intl {
  background: rgba(0,0,0,.25) !important;
}

.pg-auth-form input:focus,
.pg-auth-form textarea:focus,
.pg-auth-form .iti input.pg-phone-intl:focus {
  background: rgba(0,0,0,.30) !important;
}

/* --- КОНЕЦ СТИЛЕЙ СЕКЦИИ [modal-register.css] AUTH INPUTS: keep dark bg after fill/autofill --- */

/* --- НАЧАЛО СТИЛЕЙ СЕКЦИИ [modal-register.css] Autofill fix --- */
.pg-auth-form input:-webkit-autofill,
.pg-auth-form input:-webkit-autofill:hover,
.pg-auth-form input:-webkit-autofill:focus,
.pg-auth-form textarea:-webkit-autofill,
.pg-auth-form textarea:-webkit-autofill:hover,
.pg-auth-form textarea:-webkit-autofill:focus {
  -webkit-text-fill-color: rgba(255,255,255,.92) !important;
  caret-color: rgba(255,255,255,.92);
  -webkit-box-shadow: 0 0 0 1000px rgba(0,0,0,.25) inset !important;
  box-shadow: 0 0 0 1000px rgba(0,0,0,.25) inset !important;
  transition: background-color 9999s ease-out 0s;
}
/* --- КОНЕЦ СТИЛЕЙ СЕКЦИИ [modal-register.css] Autofill fix --- */


/* --- НАЧАЛО СТИЛЕЙ СЕКЦИИ [modal-register.css] intl-tel-input: same dark bg for country code/dropdown --- */
/* ===== intl-tel-input: same dark bg for country code/dropdown ===== */
.pg-auth-form .iti__selected-flag,
.pg-auth-form .iti__selected-country {
  background: rgba(0,0,0,.25) !important;
}

.pg-auth-form .iti__country-list,
.pg-auth-form .iti__dropdown-content {
  background: rgba(0,0,0,.25) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  backdrop-filter: blur(8px);
}

/* AUTH MOBILE FIX ROUND 2 */
@media (max-width: 992px) {
  .pg-auth-modal .pg-auth-body {
    gap: 10px !important;
  }

  .pg-auth-modal .pg-auth-col {
    padding: 12px !important;
  }

  .pg-auth-modal .pg-auth-form .iti {
    position: relative !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  .pg-auth-modal .pg-auth-form .iti__country-container {
    position: absolute !important;
    top: 6px !important;
    bottom: 6px !important;
    left: 6px !important;
    width: 108px !important;
    max-width: 108px !important;
  }

  .pg-auth-modal .pg-auth-form .iti__selected-country,
  .pg-auth-modal .pg-auth-form .iti__selected-flag {
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 0 10px !important;
    border-radius: 14px !important;
    background: rgba(255,255,255,.05) !important;
    border-right: 1px solid rgba(255,255,255,.08) !important;
    overflow: hidden !important;
  }

  .pg-auth-modal .pg-auth-form .iti__selected-country-primary {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    min-width: 0 !important;
  }

  .pg-auth-modal .pg-auth-form .pg-dial,
  .pg-auth-modal .pg-auth-form .iti__selected-dial-code {
    margin: 0 !important;
    color: rgba(255,255,255,.92) !important;
    font-size: 15px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
  }

  .pg-auth-modal .pg-auth-form .iti__arrow {
    margin-left: auto !important;
  }

  .pg-auth-modal .pg-auth-form input.pg-phone-intl,
  .pg-auth-modal .pg-auth-form .iti input.pg-phone-intl {
    width: 100% !important;
    padding-left: 124px !important;
    padding-right: 16px !important;
  }

  .pg-auth-modal .pg-auth-form .pg-switch-row {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 519.98px) {
  .pg-auth-modal .pg-auth-form .iti__country-container {
    width: 100px !important;
    max-width: 100px !important;
  }

  .pg-auth-modal .pg-auth-form input.pg-phone-intl,
  .pg-auth-modal .pg-auth-form .iti input.pg-phone-intl {
    padding-left: 116px !important;
  }

  .pg-auth-modal .pg-auth-form .pg-switch-row {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 399.98px) {
  .pg-auth-modal .pg-auth-col {
    padding: 10px !important;
  }

  .pg-auth-modal .pg-auth-form .iti__country-container {
    width: 94px !important;
    max-width: 94px !important;
  }

  .pg-auth-modal .pg-auth-form .iti__selected-country,
  .pg-auth-modal .pg-auth-form .iti__selected-flag {
    padding: 0 8px !important;
    gap: 6px !important;
  }

  .pg-auth-modal .pg-auth-form .pg-dial,
  .pg-auth-modal .pg-auth-form .iti__selected-dial-code {
    font-size: 14px !important;
  }

  .pg-auth-modal .pg-auth-form input.pg-phone-intl,
  .pg-auth-modal .pg-auth-form .iti input.pg-phone-intl {
    padding-left: 108px !important;
  }
}

.pg-auth-form .iti__country {
  background: transparent !important;
}

.pg-auth-form .iti__country:hover,
.pg-auth-form .iti__country.iti__highlight {
  background: rgba(255,255,255,.08) !important;
}
/* --- КОНЕЦ СТИЛЕЙ СЕКЦИИ [modal-register.css] intl-tel-input: same dark bg for country code/dropdown --- */
/* ===== КОНЕЦ СТИЛЕЙ ФАЙЛА modal-register.css ===== */

/* REGISTER PAGES POLISH */
.register-retail .pg-auth-body{
  align-items: stretch;
}

.register-retail .pg-auth-body > .pg-auth-col:last-child{
  display: grid;
  align-content: center;
  gap: 18px;
  padding: 28px;
  background:
    radial-gradient(140% 120% at 0% 0%, rgba(var(--pgA2), .14), transparent 56%),
    radial-gradient(140% 120% at 100% 0%, rgba(var(--pgA3), .12), transparent 58%),
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.01)),
    rgba(10,12,16,.24);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.02),
    0 24px 70px rgba(0,0,0,.18);
}

.register-retail .pg-sub-retail{
  margin: 0;
  color: rgba(255,255,255,.96);
  font-size: clamp(24px, 1vw, 32px);
  line-height: 1.08;
  font-weight: 1000;
  letter-spacing: -.02em;
  text-align: center;
}

.register-retail .pg-sub-text-retail{
  margin: 0;
  color: rgba(255,255,255,.70);
  font-size: 15px;
  line-height: 1.45;
  font-weight: 700;
}

.register-retail .pg-alt-retail{
  min-height: 35px;
  padding: 10px 20px;
  border-radius: 22px;
  border: 1px solid rgba(255,255,255,.12);
  background:
    radial-gradient(140% 120% at 0% 0%, rgba(var(--pgA1), .12), transparent 58%),
    radial-gradient(140% 120% at 100% 0%, rgba(var(--pgA3), .10), transparent 60%),
    rgba(255,255,255,.04);
  display: grid;
  place-items: center;
  gap: 8px;
  text-align: center;
  text-decoration: none;
  box-shadow: 0 18px 60px rgba(0,0,0,.14);
   text-decoration: none;
  color: white;
}

.register-retail .pg-alt-retail .pg-g{
  color: rgba(255,255,255,.82);
  font-size: 18px;
}

.register-retail .pg-alt-retail .pg-google{
  color: rgba(255,255,255,.96);
  font-size: 18px;
  font-weight: 1000;
  text-decoration: none;
}

.register-retail .pg-google-proxy-retail{
  min-height: 35px;
}

.register-retail .pg-google-proxy-retail .pg-google-proxy__native{
  border-radius: 22px;
}

.register-retail .pg-switch-link-retail{
  width: 93%;
  min-height: 58px;
  padding: 0 18px;
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,.14);
  background:
    linear-gradient(135deg, rgba(var(--pgA1), .22), rgba(var(--pgA2), .18) 42%, rgba(var(--pgA3), .18));
  color: rgba(255,255,255,.96);
  text-decoration: none;
  font-size: 16px;
  font-weight: 1000;
  box-shadow: 0 18px 60px rgba(var(--pgA1), .10);
}

.register-retail .pg-switch-link-retail:hover{
  background:
    linear-gradient(135deg, rgba(var(--pgA1), .30), rgba(var(--pgA2), .24) 42%, rgba(var(--pgA3), .24));
}

.register-retail .pg-auth-form input:not([type="checkbox"]):not([type="hidden"]),
.register-retail .pg-auth-form textarea,
.register-retail .pg-auth-form .iti input.pg-phone-intl,
.register-wholesale .pg-auth-form input:not([type="checkbox"]):not([type="hidden"]),
.register-wholesale .pg-auth-form textarea,
.register-wholesale .pg-auth-form .iti input.pg-phone-intl{
  background: rgba(8,10,16,.92) !important;
  color: rgba(255,255,255,.94) !important;
  -webkit-text-fill-color: rgba(255,255,255,.94) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.02) !important;
}

.register-retail .pg-auth-form input:not([type="checkbox"]):not([type="hidden"]):focus,
.register-retail .pg-auth-form textarea:focus,
.register-retail .pg-auth-form .iti input.pg-phone-intl:focus,
.register-wholesale .pg-auth-form input:not([type="checkbox"]):not([type="hidden"]):focus,
.register-wholesale .pg-auth-form textarea:focus,
.register-wholesale .pg-auth-form .iti input.pg-phone-intl:focus{
  background: rgba(10,12,18,.98) !important;
  -webkit-text-fill-color: rgba(255,255,255,.98) !important;
}

.register-retail .pg-auth-form input:-webkit-autofill,
.register-retail .pg-auth-form input:-webkit-autofill:hover,
.register-retail .pg-auth-form input:-webkit-autofill:focus,
.register-retail .pg-auth-form textarea:-webkit-autofill,
.register-retail .pg-auth-form textarea:-webkit-autofill:hover,
.register-retail .pg-auth-form textarea:-webkit-autofill:focus,
.register-wholesale .pg-auth-form input:-webkit-autofill,
.register-wholesale .pg-auth-form input:-webkit-autofill:hover,
.register-wholesale .pg-auth-form input:-webkit-autofill:focus,
.register-wholesale .pg-auth-form textarea:-webkit-autofill,
.register-wholesale .pg-auth-form textarea:-webkit-autofill:hover,
.register-wholesale .pg-auth-form textarea:-webkit-autofill:focus{
  -webkit-text-fill-color: rgba(255,255,255,.94) !important;
  caret-color: rgba(255,255,255,.94) !important;
  -webkit-box-shadow: 0 0 0 1000px rgba(8,10,16,.92) inset !important;
  box-shadow: 0 0 0 1000px rgba(8,10,16,.92) inset !important;
  transition: background-color 9999s ease-out 0s;
}

@media (max-width: 1023px){
  .register-retail .pg-auth-body{
    grid-template-columns: 1fr !important;
  }

  .register-retail .pg-vline{
    display: none;
  }
}

@media (max-width: 767px){
  .register-retail .pg-auth-body > .pg-auth-col:last-child{
    padding: 20px;
  }

  .register-retail .pg-sub-retail{
    font-size: 24px;
  }

  .register-retail .pg-alt-retail{
    min-height: 76px;
    padding: 16px;
  }
}
