/* =====================================================================
   sahand-auth.css  -  p449
   One design system for the three account pages: login, password reset,
   register. Everything lives under #shAuth so no older rule can reach in
   and no rule in here can leak out.
   ===================================================================== */

#shAuth{
  --sh-line:rgba(255,255,255,.13);
  --sh-line-hi:rgba(255,255,255,.45);
  --sh-ink:#fff;
  --sh-mute:rgba(255,255,255,.55);
  --sh-field:rgba(255,255,255,.03);
  --sh-radius:12px;
  display:block;width:100%;
}

/* ---------- card ---------- */
#shAuth .sh-card{
  max-width:540px;margin:1.5rem auto 2rem;
  border-radius:16px;overflow:hidden;
}
#shAuth.sh-wide .sh-card{max-width:760px}
#shAuth .sh-card-body{padding:3rem}
#shAuth .sh-foot{
  padding:1.1rem 1.5rem;text-align:center;font-size:.85rem;
  border-top:1px solid var(--sh-line);
}
#shAuth .sh-foot a{font-weight:700;margin-inline-start:.35rem}
@media (max-width:575.98px){
  #shAuth .sh-card{margin:1rem auto}
  #shAuth .sh-card-body{padding:2rem 1.25rem}
}

/* ---------- headings ---------- */
#shAuth .sh-head{margin-bottom:1.9rem}
#shAuth .sh-head h1{font-size:1.5rem;font-weight:700;line-height:1.5;margin:0 0 .45rem}
#shAuth .sh-head p{margin:0;font-size:.9rem;line-height:1.9;color:var(--sh-mute)}
#shAuth .sh-sec{margin-top:2.1rem;padding-top:2.1rem;border-top:1px solid var(--sh-line)}
#shAuth .sh-sec:first-child{margin-top:0;padding-top:0;border-top:0}
#shAuth .sh-sec-title{font-size:1.05rem;font-weight:700;margin:0 0 1.4rem}
#shAuth .sh-sec-note{display:block;font-size:.78rem;font-weight:400;color:var(--sh-mute);margin-top:.35rem}

/* ---------- grid ---------- */
#shAuth .sh-row{display:flex;flex-wrap:wrap;margin-inline:-.5rem}
#shAuth .sh-col{flex:0 0 100%;max-width:100%;padding-inline:.5rem}
@media (min-width:576px){#shAuth .sh-col-6{flex:0 0 50%;max-width:50%}}

/* ---------- field ---------- */
#shAuth .sh-field{margin-bottom:1.3rem}
#shAuth .sh-label{display:block;margin:0 0 .5rem;font-size:.82rem;font-weight:600;color:var(--sh-ink);opacity:.9}
#shAuth .sh-labelrow{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:.5rem}
#shAuth .sh-labelrow .sh-label{margin:0}
#shAuth .sh-labelrow a{font-size:.78rem;color:var(--sh-mute)}
#shAuth .sh-labelrow a:hover{color:var(--sh-ink)}
#shAuth .sh-help{display:block;margin-top:.4rem;font-size:.75rem;color:var(--sh-mute)}

#shAuth .sh-box{
  position:relative;display:flex;align-items:stretch;width:100%;
  background:var(--sh-field);
  border:1px solid var(--sh-line);border-radius:var(--sh-radius);
  transition:border-color .15s ease,box-shadow .15s ease;
}
#shAuth .sh-box:hover{border-color:rgba(255,255,255,.22)}
#shAuth .sh-box:focus-within{border-color:var(--sh-line-hi);box-shadow:0 0 0 3px rgba(255,255,255,.06)}

#shAuth .sh-ico{
  display:flex;align-items:center;justify-content:center;
  flex:0 0 40px;width:40px;font-size:.92rem;opacity:.45;
  background:transparent;border:0;pointer-events:none;
}

#shAuth .sh-box .sh-input,
#shAuth .sh-box input.form-control,
#shAuth .sh-box select.form-control,
#shAuth .sh-box textarea.form-control{
  flex:1 1 auto;width:1%;min-width:0;height:50px;line-height:50px;
  padding-inline-start:2px;padding-inline-end:16px;
  margin:0;background:transparent;border:0;outline:0;box-shadow:none;
  color:var(--sh-ink);font-size:.95rem;font-family:inherit;border-radius:var(--sh-radius);
}
#shAuth .sh-box textarea.form-control{height:auto;line-height:1.8;padding-block:12px}
#shAuth .sh-box .sh-input:focus,
#shAuth .sh-box .form-control:focus{background:transparent;box-shadow:none;outline:0}
#shAuth .sh-box .sh-input::placeholder,
#shAuth .sh-box .form-control::placeholder{color:var(--sh-mute);opacity:1}
#shAuth .sh-box .sh-input:-webkit-autofill{-webkit-text-fill-color:var(--sh-ink);transition:background-color 9999s}

/* first child is the icon, so a box without one still starts flush */
#shAuth .sh-box > .sh-input:first-child,
#shAuth .sh-box > .form-control:first-child{padding-inline-start:16px}

/* ---------- select ---------- */
#shAuth .sh-box.is-select{position:relative}
#shAuth .sh-box select.sh-input,
#shAuth .sh-box select.form-control{
  appearance:none;-webkit-appearance:none;-moz-appearance:none;
  padding-inline-end:34px;cursor:pointer;
}
#shAuth .sh-box.is-select::after{
  content:"";position:absolute;inset-inline-end:14px;top:50%;
  width:8px;height:8px;margin-top:-6px;pointer-events:none;
  border-inline-end:2px solid var(--sh-mute);border-bottom:2px solid var(--sh-mute);
  transform:rotate(45deg);
}
#shAuth .sh-box select option{background:#141414;color:#fff}

/* ---------- reveal button ---------- */
#shAuth .sh-eye{
  flex:0 0 44px;width:44px;display:flex;align-items:center;justify-content:center;
  background:transparent;border:0;padding:0;margin:0;cursor:pointer;
  color:var(--sh-ink);opacity:.4;transition:opacity .15s ease;
}
#shAuth .sh-eye:hover,#shAuth .sh-eye:focus{opacity:.9;outline:0;box-shadow:none}

/* ---------- phone: the flag is that field's icon, on the start side ---------- */
#shAuth .sh-box{overflow:visible}
#shAuth .sh-box .intl-tel-input,
#shAuth .sh-box .iti{
  display:flex!important;align-items:stretch;flex:1 1 auto;width:1%;min-width:0;position:static;
}
#shAuth .sh-box .intl-tel-input .flag-container,
#shAuth .sh-box .iti .iti__flag-container{
  position:static;display:flex;align-items:center;flex:0 0 auto;
  padding:0;inset:auto;right:auto;left:auto;
}
#shAuth .sh-box .intl-tel-input .selected-flag,
#shAuth .sh-box .iti .iti__selected-flag{
  position:static;display:flex;align-items:center;gap:6px;
  width:auto;height:auto;padding:0 14px;direction:ltr;background:transparent;
}
#shAuth .sh-box .intl-tel-input .selected-dial-code,
#shAuth .sh-box .iti .iti__selected-dial-code{font-size:.9rem;opacity:.75;padding:0}
#shAuth .sh-box .intl-tel-input input,
#shAuth .sh-box .iti input{
  flex:1 1 auto;width:1%;min-width:0;height:50px;
  padding-inline-start:4px!important;padding-inline-end:16px!important;
  margin:0!important;background:transparent;border:0;outline:0;box-shadow:none;
  color:var(--sh-ink);font-size:.95rem;direction:ltr;text-align:start;
}
#shAuth .sh-box .country-list,
#shAuth .sh-box .iti__country-list{
  inset-inline-start:0;inset-inline-end:auto;
  max-height:230px;z-index:60;direction:ltr;text-align:left;
  background:#141414;border:1px solid var(--sh-line);border-radius:10px;
}

/* ---------- checkboxes ---------- */
#shAuth .sh-check{
  display:flex;align-items:center;gap:.55rem;margin:0 0 .4rem;
  font-size:.86rem;font-weight:400;color:var(--sh-ink);cursor:pointer;
}
#shAuth .sh-check input{flex:0 0 auto;width:16px;height:16px;margin:0;cursor:pointer}
#shAuth .sh-check a{text-decoration:underline}

/* ---------- buttons ---------- */
#shAuth .sh-submit{margin-top:1.9rem}
#shAuth .sh-submit + .sh-submit{margin-top:.7rem}
#shAuth .sh-btn{
  display:flex;align-items:center;justify-content:center;width:100%;
  height:52px;padding:0 1.25rem;border:1px solid transparent;border-radius:var(--sh-radius);
  background:#fff;color:#111;font-size:1rem;font-weight:700;font-family:inherit;
  cursor:pointer;transition:opacity .15s ease,background .15s ease;
}
#shAuth .sh-btn:hover{background:#fff;color:#111;opacity:.88}
#shAuth .sh-btn:focus{outline:0;box-shadow:0 0 0 3px rgba(255,255,255,.18)}
#shAuth .sh-btn-ghost{background:transparent;color:var(--sh-ink);border-color:var(--sh-line)}
#shAuth .sh-btn-ghost:hover{background:rgba(255,255,255,.06);color:var(--sh-ink);opacity:1}

/* ---------- captcha / meter / alerts ---------- */
#shAuth .sh-captcha{margin:1.3rem 0;display:flex;justify-content:center}
#shAuth .sh-captcha > *{max-width:100%}
#shAuth .sh-meter{margin-top:.2rem}
#shAuth .sh-meter .progress{height:6px;border-radius:99px;background:rgba(255,255,255,.08);overflow:hidden}
#shAuth .sh-meter .progress-bar{height:6px}
#shAuth .sh-meter p{margin:.5rem 0 0;font-size:.75rem;color:var(--sh-mute);text-align:start}
#shAuth .alert{border-radius:var(--sh-radius);font-size:.87rem;margin-bottom:1.3rem}
#shAuth #passwdFeedback{margin-bottom:1.3rem}
#shAuth .sh-note{font-size:.87rem;line-height:2;color:var(--sh-mute)}


/* ===================================================================== */
/* SH_P450                                                               */
/* The old theme marks .form-control with !important, so every input was */
/* still painting its own border and padding inside our box - a frame    */
/* inside a frame, with the icon pushed outside it. Nothing here is new  */
/* design, it is the same p449 rules restated so they actually win.      */
/* ===================================================================== */

#shAuth .sh-box{
  background:var(--sh-field)!important;
  border:1px solid var(--sh-line)!important;
  border-radius:var(--sh-radius)!important;
  box-shadow:none!important;
}
#shAuth .sh-box:focus-within{
  border-color:var(--sh-line-hi)!important;
  box-shadow:0 0 0 3px rgba(255,255,255,.06)!important;
}

#shAuth .sh-box .sh-input,
#shAuth .sh-box input.form-control,
#shAuth .sh-box select.form-control,
#shAuth .sh-box textarea.form-control,
#shAuth .sh-box .intl-tel-input input,
#shAuth .sh-box .iti input{
  height:50px!important;min-height:0!important;
  background:transparent!important;background-image:none!important;
  border:0!important;border-radius:0!important;
  box-shadow:none!important;outline:0!important;
  color:var(--sh-ink)!important;
  font-size:.95rem!important;font-family:inherit!important;
  margin:0!important;
  padding-block:0!important;
  padding-inline-start:2px!important;padding-inline-end:16px!important;
}
#shAuth .sh-box textarea.form-control{height:auto!important;padding-block:12px!important}
#shAuth .sh-box select.form-control,
#shAuth .sh-box select.sh-input{padding-inline-end:34px!important}
#shAuth .sh-box > .sh-input:first-child,
#shAuth .sh-box > .form-control:first-child{padding-inline-start:16px!important}
#shAuth .sh-box .sh-input:focus,
#shAuth .sh-box .form-control:focus{background:transparent!important;box-shadow:none!important}

#shAuth .sh-ico{
  background:transparent!important;border:0!important;box-shadow:none!important;
  flex:0 0 40px!important;width:40px!important;padding:0!important;
}
#shAuth .sh-eye{background:transparent!important;border:0!important;box-shadow:none!important;padding:0!important}

/* phone: keep the dial code reading left to right next to its flag */
#shAuth .sh-box .intl-tel-input input,
#shAuth .sh-box .iti input{padding-inline-start:4px!important}
#shAuth .sh-box .selected-dial-code,
#shAuth .sh-box .iti__selected-dial-code{direction:ltr!important;unicode-bidi:isolate}
#shAuth .sh-box .selected-flag,
#shAuth .sh-box .iti__selected-flag{direction:ltr!important;padding:0 14px!important}

/* strength meter */
#shAuth .sh-meter .progress{
  height:6px!important;min-height:0!important;border-radius:99px!important;
  background:rgba(255,255,255,.08)!important;box-shadow:none!important;margin:0!important;
}
#shAuth .sh-meter .progress-bar{height:6px!important;box-shadow:none!important}
/* ===== /SH_P450 ===== */


/* ===================================================================== */
/* SH_P451  - measured on the live pages, not guessed                    */
/*  - #inputEmail computes direction:ltr, so logical padding lands on    */
/*    the wrong side and the text drifts away from its icon. Physical    */
/*    padding from here on; this layout is always RTL anyway.            */
/*  - the country flag was still position:absolute and printed itself    */
/*    on top of the +98 dial code.                                       */
/*  - the captcha slot renders as an empty div that still carries its    */
/*    margins and leaves a whole empty section with a divider line.      */
/* ===================================================================== */

#shAuth .sh-box{align-items:stretch!important}
#shAuth .sh-ico{align-self:stretch!important;height:auto!important}

#shAuth .sh-box .sh-input,
#shAuth .sh-box input.form-control,
#shAuth .sh-box select.form-control,
#shAuth .sh-box textarea.form-control{
  padding-top:0!important;padding-bottom:0!important;
  padding-right:2px!important;padding-left:16px!important;
  text-align:right!important;
}
#shAuth .sh-box > .sh-input:first-child,
#shAuth .sh-box > .form-control:first-child{padding-right:16px!important}
#shAuth .sh-box.is-select select.sh-input,
#shAuth .sh-box.is-select select.form-control{padding-left:34px!important}
#shAuth .sh-box textarea.form-control{padding-top:12px!important;padding-bottom:12px!important}

#shAuth .sh-box .intl-tel-input input,
#shAuth .sh-box .iti input{padding-right:6px!important;padding-left:16px!important}
#shAuth .sh-box .selected-flag,
#shAuth .sh-box .iti__selected-flag{
  position:relative!important;align-self:stretch!important;height:auto!important;
  display:flex!important;align-items:center!important;gap:7px!important;
  padding:0 14px!important;direction:ltr!important;background:transparent!important}
#shAuth .sh-box .iti-flag,#shAuth .sh-box .iti__flag{
  position:static!important;top:auto!important;left:auto!important;right:auto!important;
  margin:0!important;flex:0 0 auto!important}
#shAuth .sh-box .iti-arrow,#shAuth .sh-box .iti__arrow{
  position:static!important;top:auto!important;left:auto!important;right:auto!important;
  margin:0!important;flex:0 0 auto!important;opacity:.5}

#shAuth .sh-captcha:empty{display:none!important;margin:0!important}
#shAuth .sh-sec:not(:has(.sh-sec-title)):not(:has(.sh-check)):not(:has(.sh-field)){display:none!important}

#shAuth .sh-card-body{padding:2.6rem!important}
@media (max-width:575.98px){#shAuth .sh-card-body{padding:1.9rem 1.15rem!important}}
#shAuth .sh-sec{margin-top:1.8rem;padding-top:1.8rem}
#shAuth .sh-submit{margin-top:1.6rem}
#shAuth .sh-check{margin-top:.2rem}
#shAuth .sh-meter p{margin-top:.55rem!important}
/* ===== /SH_P451 ===== */


/* ===================================================================== */
/* SH_P452                                                               */
/* The phone input was computing direction:rtl, so the browser laid the  */
/* three digit groups out right to left and 912 345 6789 was printed as  */
/* 6789 345 912. A phone number is an LTR run; it keeps hugging the flag */
/* because the text stays right aligned.                                 */
/* ===================================================================== */
#shAuth .sh-box .intl-tel-input input,
#shAuth .sh-box .iti input{direction:ltr!important;text-align:right!important}

#shAuth .sh-meter{margin-bottom:.2rem}
#shAuth .sh-meter p{margin-top:.5rem!important}
/* ===== /SH_P452 ===== */

/* ===================================================================== */
/* SH_P454                                                               */
/* One text per field: the label moved inside the box, so the only new   */
/* pieces here are the small link that used to sit next to the password  */
/* label, and the phone group order - flag, dial code, then the number,  */
/* all reading from the right like every other field on the page.        */
/* ===================================================================== */

#shAuth .sh-aside{
  display:block;margin-top:.55rem;text-align:left;
  font-size:.78rem;color:var(--sh-mute);
}
#shAuth .sh-aside:hover{color:var(--sh-ink)}

#shAuth .sh-box .selected-flag,
#shAuth .sh-box .iti__selected-flag{direction:rtl!important}
#shAuth .sh-box .selected-dial-code,
#shAuth .sh-box .iti__selected-dial-code{direction:ltr!important;unicode-bidi:isolate}

#shAuth .sh-field{margin-bottom:1.1rem}
#shAuth .sh-label{margin-bottom:.45rem}
/* ===== /SH_P454 ===== */

/* ===================================================================== */
/* SH_P457                                                               */
/*  - intl-tel-input rewrites the phone markup after the page has        */
/*    painted, so the raw input flashed full width and then jumped.      */
/*    Before init the input is a direct child of .sh-telbox, after init  */
/*    it is a grandchild, so the pre-init selector hides just the flash. */
/*  - the dial-code group used to sit on the right and pushed the typed  */
/*    number away from the edge; every other field starts flush right,   */
/*    so the number now starts flush right and +98 moved to the left.    */
/* ===================================================================== */

#shAuth .sh-telbox{min-height:52px}
@keyframes shTelWait{0%{opacity:0}98%{opacity:0}100%{opacity:1}}
@keyframes shTelIn{from{opacity:0}to{opacity:1}}
#shAuth .sh-telbox > input{animation:shTelWait 1.4s steps(1,end) both}
#shAuth .sh-telbox .intl-tel-input,
#shAuth .sh-telbox .iti{animation:shTelIn .18s ease both}

#shAuth .sh-box .intl-tel-input,
#shAuth .sh-box .iti{flex-direction:row!important}
#shAuth .sh-box .intl-tel-input > .flag-container,
#shAuth .sh-box .iti > .iti__flag-container{order:2!important}
#shAuth .sh-box .intl-tel-input > input,
#shAuth .sh-box .iti > input{order:1!important}
#shAuth .sh-box .intl-tel-input input,
#shAuth .sh-box .iti input{padding-right:16px!important;padding-left:6px!important}
#shAuth .sh-box .selected-flag,
#shAuth .sh-box .iti__selected-flag{
  padding:0 16px 0 12px!important;
  border-right:1px solid rgba(255,255,255,.08)!important}
/* ===== /SH_P457 ===== */

/* ===================================================================== */
/* SH_P458                                                               */
/*  - intl-tel-input only runs at DOM ready (measured: ~1.4s), so the    */
/*    phone box was visibly empty and then popped in. The template now   */
/*    ships a static skeleton of the flag + dial code styled exactly     */
/*    like the real one, and the plugin wrapper hides it with a sibling  */
/*    selector the moment it exists. No flash, no jump.                  */
/*  - the number itself is now left aligned, next to +98.                */
/* ===================================================================== */

#shAuth .sh-telbox{min-height:52px}
#shAuth .sh-telbox > input{animation:none!important;opacity:1!important;order:1!important}
#shAuth .sh-telbox .intl-tel-input,
#shAuth .sh-telbox .iti{animation:none!important}

#shAuth .sh-telskel{
  order:2!important;flex:0 0 92px;display:flex;align-items:center;justify-content:center;
  gap:7px;padding:0 16px 0 12px;direction:ltr;pointer-events:none;
  border-right:1px solid rgba(255,255,255,.08)}
#shAuth .sh-telskel .iti-flag{position:static!important;margin:0!important;flex:0 0 auto}
#shAuth .sh-telskel-code{font-size:.9rem;opacity:.75;color:var(--sh-ink)}
#shAuth .sh-telbox .intl-tel-input ~ .sh-telskel,
#shAuth .sh-telbox .iti ~ .sh-telskel{display:none!important}

#shAuth .sh-box .intl-tel-input input,
#shAuth .sh-box .iti input,
#shAuth .sh-telbox > input{
  text-align:left!important;padding-left:12px!important;padding-right:16px!important}
/* ===== /SH_P458 ===== */

/* ===================================================================== */
/* SH_P459                                                               */
/*  - fields the user fills in latin (email, password, phone) now type   */
/*    from the left, fields filled in persian keep typing from the       */
/*    right. The empty form is untouched: :placeholder-shown puts the    */
/*    persian placeholder back on the right exactly as it is today.      */
/* ===================================================================== */

#shAuth .sh-box input[type=email],
#shAuth .sh-box input[type=password]{
  direction:ltr!important;text-align:left!important;
  padding-left:14px!important;padding-right:2px!important}
#shAuth .sh-box:has(.sh-eye) input[type=password]{padding-left:8px!important}
#shAuth .sh-box input[type=email]:placeholder-shown,
#shAuth .sh-box input[type=password]:placeholder-shown{
  text-align:right!important;padding-right:2px!important;padding-left:16px!important}
#shAuth .sh-box input[type=text],
#shAuth .sh-box textarea.form-control,
#shAuth .sh-box select.form-control{direction:rtl!important;text-align:right!important}
/* ===== /SH_P459 ===== */