.auth-panel input:invalid:not(:placeholder-shown),.profile-panel input:invalid:not(:placeholder-shown){
border-color:rgb(var(--rgb-danger) / .48);
box-shadow:0 0 0 4px rgb(var(--rgb-danger) / .08);
}
@layer components{
.modal.claim .claim-intro,.modal.claim .claim-intro.div-text{
margin:0 0 2px!important;
padding:0!important;
background:transparent!important;
border:0!important;
}
.modal.claim .claim-intro p:not(.guide-note){
margin:0!important;
color:var(--c-text-muted);
font-size:var(--text-md);
font-weight:400;
line-height:1.62;
}
.modal.claim .claim-foot{
display:flex!important;
align-items:center!important;
justify-content:space-between!important;
gap:18px!important;
}
.modal.claim .claim-foot .modal-foot-left{
display:flex!important;
align-items:center!important;
min-width:0!important;
gap:12px!important;
}
.modal.claim .claim-foot output{
display:inline-flex;
align-items:center;
min-width:0;
min-height:20px;
overflow:hidden;
color:var(--c-text-faint);
font-size:var(--text-ui);
font-weight:700;
line-height:20px;
white-space:nowrap;
text-overflow:ellipsis;
}
}
@layer components{
.modal.claim .claim-main.div-main{
flex:1 1 auto!important;
min-height:0!important;
overflow:auto!important;
padding:28px var(--modal-pad-x,42px)!important;
scrollbar-gutter:stable;
}
.modal.claim .claim-form{
display:grid!important;
grid-auto-rows:max-content!important;
gap:16px!important;
min-height:0!important;
overflow:visible!important;
padding:0!important;
}
.modal-field.is-invalid>input:not([type="radio"]):not([type="checkbox"]),.modal-field.is-invalid>textarea,.modal-field.is-invalid>select,.modal-field>[aria-invalid="true"]{
border-color:var(--c-danger)!important;
outline:0!important;
box-shadow:none!important;
}
.modal-field.is-invalid>label,.modal-field>[aria-invalid="true"]+label{
color:var(--c-danger)!important;
}
.modal.claim .modal-head-actions{
gap:16px!important;
}
.modal.claim .modal-head-group .modal-head-btn{
margin:0!important;
}
}
@layer components{
.modal .grid2.claim-textarea-grid{
align-items:stretch;
}
.modal .claim-textarea-grid .modal-field{
height:100%;
}
.modal .claim-textarea-grid textarea{
height:100%;
min-height:118px!important;
}
.modal-field.is-phone-field>input:not([type="radio"]):not([type="checkbox"]){
padding-right:52px!important;
}
.modal-phone-flag{
position:absolute;
right:14px;
top:50%;
z-index:2;
display:inline-grid;
width:28px;
height:28px;
place-items:center;
border-radius:50%;
background:var(--c-surface-muted);
color:var(--c-ink);
font-size:var(--text-title-sm);
line-height:1;
opacity:0;
transform:translateY(-50%) scale(.94);
pointer-events:none;
transition:opacity .18s ease,transform .18s ease,background-color .18s ease;
}
.modal-field.has-country-flag .modal-phone-flag,.modal-field.is-phone-field:focus-within .modal-phone-flag:not([hidden]){
opacity:1;
transform:translateY(-50%) scale(1);
}
.modal-phone-flag[hidden]{
display:inline-grid!important;
opacity:0!important;
}
.auth-modal{
width:min(700px,calc(100vw - 34px));
}
.auth-modal .auth-main{
display:grid;
align-content:start;
gap:18px;
padding:28px var(--modal-pad-x,42px)!important;
overflow:auto;
scrollbar-gutter:stable;
}
.auth-modal .auth-tabs{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:4px;
padding:var(--space-1);
border:1px solid rgb(var(--rgb-line) / .16);
border-radius:var(--radius-control);
background:var(--c-surface-muted);
}
.auth-modal .auth-tabs button{
min-height:34px;
border:0;
border-radius:var(--radius-xs);
background:transparent;
color:var(--c-text-muted);
font-size:var(--text-ui);
font-weight:700;
}
.auth-modal .auth-tabs button.active,.auth-modal .auth-tabs button:hover{
background:var(--c-surface);
color:var(--c-primary);
box-shadow:0 8px 18px rgb(var(--rgb-ink) / .06);
}
.auth-modal .auth-panels{
padding:0!important;
overflow:visible!important;
scrollbar-gutter:auto;
}
.auth-modal .auth-panel.active{
display:grid;
gap:15px;
}
.auth-modal .auth-panel p{
margin:0;
color:var(--c-text-muted);
font-size:var(--text-md);
font-weight:400;
line-height:1.62;
}
.auth-modal .seg.compact{
justify-self:start;
margin:0;
border-radius:var(--radius-control);
}
.auth-modal .seg.compact label{
min-height:34px;
gap:8px;
color:var(--c-text-muted);
font-size:var(--text-ui);
font-weight:700;
}
}
@layer components{
.auth-modal .auth-foot output{
min-height:20px;
color:var(--c-text-faint);
font-size:var(--text-ui);
font-weight:700;
line-height:20px;
}
.auth-modal .auth-foot output.ok:not(:empty){
color:var(--c-primary);
}
.auth-modal .auth-foot output.err:not(:empty){
color:var(--c-danger);
}
.auth-modal [data-auth-submit]{
min-width:148px;
}
}
@layer components{
.modal-field.is-password-field>input:not([type="radio"]):not([type="checkbox"]){
padding-right:52px!important;
}
.modal-field.is-password-field.has-password-generator>input:not([type="radio"]):not([type="checkbox"]){
padding-right:92px!important;
}
.modal-field-action{
position:absolute;
top:50%;
right:10px;
z-index:3;
display:inline-flex;
align-items:center;
justify-content:center;
width:32px;
height:32px;
margin:0;
padding:0;
border:0;
border-radius:var(--radius-xs);
background:transparent;
color:var(--c-text-faint);
cursor:pointer;
transform:translateY(-50%);
transition:color .18s ease,background-color .18s ease;
}
.modal-field-action:hover,.modal-field-action:focus-visible{
background:var(--c-surface-muted);
color:var(--c-primary);
outline:0;
}
.modal-field-action svg{
width:18px!important;
height:18px!important;
fill:none!important;
stroke:currentColor!important;
stroke-width:1.15!important;
stroke-linecap:round!important;
stroke-linejoin:round!important;
pointer-events:none;
}
.modal-field.is-password-field.has-password-generator .modal-field-action.is-password-generate{
right:46px;
}
.modal-field.is-password-field.has-password-generator .modal-field-action.is-password-generate svg{
width:17px!important;
height:17px!important;
}
.modal-field.is-doc-field{
min-height:46px;
}
.modal-field.is-doc-field>select[data-auth-doc-type]{
position:absolute;
left:7px;
top:7px;
z-index:3;
width:108px!important;
min-height:32px!important;
height:32px!important;
padding:0 26px 0 10px!important;
border:1px solid rgb(var(--rgb-line) / .16)!important;
border-radius:var(--radius-compact-lg)!important;
background:linear-gradient(45deg,transparent 50%,var(--c-text-muted) 50%) calc(100% - 13px) 13px / 5px 5px no-repeat,linear-gradient(135deg,var(--c-text-muted) 50%,transparent 50%) calc(100% - 8px) 13px / 5px 5px no-repeat,var(--c-surface-muted)!important;
color:var(--c-ink)!important;
font-size:var(--text-ui-sm)!important;
font-weight:700!important;
line-height:18px!important;
appearance:none;
-webkit-appearance:none;
}
.modal-field.is-doc-field>select[data-auth-doc-type]:focus{
border-color:var(--c-primary)!important;
outline:0!important;
box-shadow:none!important;
}
.modal-field.is-doc-field>input:not([type="radio"]):not([type="checkbox"]){
padding-left:130px!important;
}
.modal-field.is-doc-field>label{
left:130px!important;
max-width:calc(100% - 145px)!important;
}
.modal-field.is-doc-field>input:focus+label,.modal-field.is-doc-field>input:not(:placeholder-shown)+label{
left:122px!important;
}
.auth-modal .seg.compact input{
accent-color:var(--c-primary);
}
}
@layer components{
.guide-note{
display:block;
margin:0;
padding:var(--space-3) var(--space-3-5);
border:0!important;
border-radius:var(--radius-xs);
background:rgb(var(--rgb-primary) / .08);
color:var(--n-54);
font-size:var(--text-ui-sm);
font-weight:400;
line-height:1.48;
}
.auth-panel>.guide-note,.claim-intro .guide-note{
margin-bottom:0;
}
.auth-login-grid{
align-items:start;
}
.modal-field-action svg *{
stroke-width:1.15!important;
}
.auth-modal [data-auth-submit] svg{
width:21px!important;
height:21px!important;
}
.auth-modal [data-auth-submit] :is(svg,svg *){
fill:currentColor!important;
stroke:none!important;
}
.modal-field input[type="email"][aria-invalid="true"]{
border-color:var(--c-danger)!important;
}
.guide-note.font-medium{
font-size:var(--text-ui);
}
.guide-note.font-large{
font-size:var(--text-md);
}
}
.alert-main .alert-note-field{
margin-top:14px;
}
.alert-main .alert-note-field textarea{
min-height:96px;
resize:vertical;
}
.seg{
display:inline-flex;
gap:6px;
padding:var(--space-1);
margin-bottom:var(--space-4);
border:.5px solid var(--line-08);
border-radius:var(--radius-pill);
background:var(--n-10);
}
.seg.compact{
margin:0 0 14px;
}
.seg label{
min-height:var(--control-h);
display:inline-flex;
align-items:center;
gap:7px;
padding:0 var(--space-3);
border-radius:var(--radius-pill);
color:var(--n-60);
font-size:var(--text-sm);
font-weight:var(--w-bold);
cursor:pointer;
}
.grid2{
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:var(--space-3);
}
.auth-panel .grid2 label,.profile-panel .grid2 label,.address-form .grid2 label{
display:grid;
gap:6px;
color:var(--n-50);
font-size:var(--text-xs);
font-weight:var(--w-bold);
}
.profile-panel output{
color:var(--n-50);
font-size:var(--text-sm);
font-weight:var(--w-medium);
}
output.ok{
color:var(--c-green);
}
output.err{
color:var(--c-red);
}
.product-add,.product-actions-line button,.product-actions-line a,.missing-card a{
display:inline-flex;
align-items:center;
justify-content:center;
gap:var(--space-2);
min-height:var(--control-h-lg);
padding:0 var(--space-5);
border-radius:var(--radius-pill);
border:.5px solid var(--line-08);
background:var(--n-00);
color:var(--n-70);
font-size:var(--text-sm);
font-weight:var(--w-bold);
transition:color var(--time-fast) ease,background var(--time-fast) ease,border-color var(--time-fast) ease,transform var(--time-fast) ease,box-shadow var(--time-fast) ease;
}
.product-add,.missing-card a{
border-color:transparent;
background:var(--c-blue);
color:var(--n-00);
box-shadow:var(--shadow-blue);
}
.product-actions-line button:hover,.product-actions-line a:hover{
color:var(--c-blue);
border-color:var(--c-blue-24);
background:var(--c-blue-04);
scale:var(--button-hover-scale);
}
.product-add:hover,.product-add.ok,.missing-card a:hover{
color:var(--n-00);
background:var(--c-blue);
scale:var(--button-hover-scale);
box-shadow:0 20px 42px rgb(var(--rgb-primary) / .22);
}
.check{
display:inline-flex!important;
align-items:center;
gap:var(--space-2);
color:var(--n-60);
font-size:var(--text-sm);
font-weight:var(--w-bold);
cursor:pointer;
}
.check input{
width:auto;
}