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);
} @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);
}   .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; }   .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;
}   .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);
}   .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;
}   .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; }   .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); }   .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); }   .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); }   .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;
}   .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);
}   .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;
}   .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; }
}   @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); }
}   .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;
}  .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;
}   .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);
} @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;
}   .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;
}
}