/* ============================================================
   5MA Fashions — Login & Register visual redesign
   Scoped to .authx so the rest of the site is untouched.
   Presentation only — every form hook/plugin is preserved.
   ============================================================ */
/* Auth pages: tint the whole body so the mobile browser-chrome gap below
   the .authx block is pink, not white (fixes the mobile white strip). */
body.page-login, body.page-register, body.page-reset, body.page-forgot{
  background:linear-gradient(135deg,#fff9f6 0%,#fff2ed 45%,#fce7eb 100%);
}
.authx{
  font-family:'Outfit',Arial,Helvetica,sans-serif;
  min-height:100vh; min-height:100dvh; box-sizing:border-box;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:28px 16px;
  background:transparent;
  color:#2B2030; -webkit-font-smoothing:antialiased;
}
.authx *{box-sizing:border-box;}

.authx__logo{display:block;margin:0 auto 14px;}
.authx__logo img{display:block;width:54px;height:54px;object-fit:contain;margin:0 auto;}

.authx__card{
  width:100%; background:#ffffff;
  border:1px solid rgba(0,0,0,.06); border-radius:18px;
  box-shadow:0 18px 50px rgba(53,33,41,.08);
  padding:30px 32px 26px;
}
.authx--login .authx__card{max-width:420px;}
.authx--register .authx__card{max-width:600px;}

.authx__head{text-align:center;margin-bottom:20px;}
.authx__title{margin:0 0 6px;font-size:28px;font-weight:600;line-height:1.2;color:#2B2030;letter-spacing:-.2px;}
.authx__lead{margin:0;font-size:14px;font-weight:400;line-height:1.6;color:#8A7F84;}

/* two-column grid (register) */
.authx__grid{display:grid;grid-template-columns:1fr 1fr;gap:0 16px;}
.authx__grid > .field{margin-bottom:14px;}
.authx .field{margin-bottom:14px;}
.authx .field__label{display:block;font-size:13px;font-weight:500;color:#4A3F45;margin-bottom:6px;}

/* inputs */
.authx .field__control{
  width:100%; height:44px; border:1px solid #e8dad7; border-radius:10px;
  padding:0 14px; background:#fff; font-family:inherit; font-size:14px; color:#2B2030;
  transition:border-color .15s ease, box-shadow .15s ease;
}
.authx .field__control::placeholder{color:#BDB1B5;}
.authx .field__control:focus{outline:none;border-color:#75174E;box-shadow:0 0 0 3px rgba(117,23,78,.10);}

/* password reveal button */
.authx .field__withbtn{position:relative;display:block;}
.authx .field__withbtn .field__control{padding-right:44px;}
.authx .field__reveal{
  position:absolute;top:50%;right:6px;transform:translateY(-50%);
  width:34px;height:34px;border:0;background:none;color:#9A8F94;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;border-radius:8px;transition:.15s;
}
.authx .field__reveal:hover{color:#75174E;background:#FBF3F1;}
.authx .field__reveal{z-index:2;padding:0;margin:0;-webkit-appearance:none;appearance:none;touch-action:manipulation;-webkit-tap-highlight-color:transparent;}
.authx .field__reveal.is-on{color:#75174E;}

/* label row (password + forgot/suggest) */
.authx .authcard__row{display:flex;align-items:center;justify-content:space-between;gap:10px;}
.authx .authcard__row > a,.authx .passlink{font-size:12px;font-weight:500;color:#75174E;text-decoration:none;}
.authx .authcard__row > a:hover,.authx .passlink:hover{text-decoration:underline;}
.authx .passlink{background:none;border:0;cursor:pointer;padding:0;}

/* compact password requirements (two columns) */
.authx .passrules{list-style:none;padding:0;margin:8px 0 2px;font-size:12px;color:#9A8F94;
  display:grid;grid-template-columns:1fr 1fr;gap:1px 16px;}
.authx .passrules li{padding:1px 0;}
.authx .passrules li.is-met{color:#2E7D48;}
.authx .passrules [data-rule-ico]{display:inline-block;width:14px;font-weight:600;}
.authx .passsuggest{display:none;background:#FBF3F1;border:1px solid #F0E1DD;border-radius:8px;padding:10px 12px;margin:8px 0;font-size:13px;color:#4A3F45;}
.authx .passsuggest code{font-size:14px;font-weight:600;letter-spacing:.5px;}

/* checkbox */
.authx .checkline{display:flex;align-items:flex-start;gap:9px;font-size:13px;color:#4A3F45;cursor:pointer;position:relative;margin:2px 0 16px;}
.authx .checkline input{position:absolute;opacity:0;width:0;height:0;}
.authx .checkline__box{flex:0 0 auto;width:18px;height:18px;border:1px solid #d9c7c2;border-radius:5px;background:#fff;display:inline-flex;align-items:center;justify-content:center;color:#fff;font-size:10px;transition:.15s;}
.authx .checkline input:checked + .checkline__box{background:#75174E;border-color:#75174E;}
.authx .checkline input:not(:checked) + .checkline__box i{opacity:0;}
.authx .checkline__text a{color:#75174E;text-decoration:none;}
.authx .checkline__text a:hover{text-decoration:underline;}

/* login: remember + forgot on one row */
.authx__inline{display:flex;align-items:center;justify-content:space-between;margin:2px 0 16px;gap:10px;}
.authx__inline .checkline{margin:0;}
.authx__inline > a{font-size:13px;font-weight:500;color:#75174E;text-decoration:none;white-space:nowrap;}
.authx__inline > a:hover{text-decoration:underline;}

/* primary button */
.authx .btn5--accent{
  display:flex;align-items:center;justify-content:center;width:100%;
  height:46px;border:0;border-radius:10px;background:#75174E;color:#fff;
  font-family:inherit;font-size:14px;font-weight:500;letter-spacing:.3px;cursor:pointer;text-decoration:none;
  transition:background .15s ease, transform .15s ease, box-shadow .15s ease;
  box-shadow:0 8px 18px rgba(117,23,78,.22);
}
.authx .btn5--accent:hover{background:#94215F;transform:translateY(-1px);box-shadow:0 12px 22px rgba(117,23,78,.26);color:#fff;}
.authx .btn5--sm{height:auto;display:inline-flex;padding:8px 14px;font-size:13px;box-shadow:none;border-radius:8px;width:auto;}
.authx .btn5--soft{background:#F7ECE9;color:#75174E;box-shadow:none;}
.authx .btn5--soft:hover{background:#F1E1DC;color:#94215F;transform:none;}

/* divider */
.authx__rule{display:flex;align-items:center;text-align:center;color:#B8ACB0;font-size:12px;margin:18px 0;text-transform:none;}
.authx__rule::before,.authx__rule::after{content:"";flex:1;height:1px;background:#EEE0DC;}
.authx__rule::before{margin-right:12px;} .authx__rule::after{margin-left:12px;}

/* google button */
.authx .btn-google{
  display:flex;align-items:center;justify-content:center;gap:10px;width:100%;
  height:46px;border:1px solid #E3D4CF;border-radius:10px;background:#fff;color:#2B2030;
  font-family:inherit;font-size:14px;font-weight:500;cursor:pointer;text-decoration:none;
  transition:background .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.authx .btn-google:hover{background:#FFFBFA;border-color:#D6C3BD;box-shadow:0 4px 12px rgba(53,33,41,.06);}
.authx .btn-google__mark{flex:0 0 auto;}

/* alt link + back */
.authx__alt{text-align:center;font-size:13px;color:#8A7F84;margin:18px 0 0;}
.authx__alt a{color:#75174E;font-weight:500;text-decoration:none;}
.authx__alt a:hover{text-decoration:underline;}
.authx__back{text-align:center;margin:16px 0 0;}
.authx__back a{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:#9A8F94;text-decoration:none;transition:color .15s;}
.authx__back a:hover{color:#75174E;}

/* messages */
.authx__msg{border-radius:10px;padding:12px 14px;margin-bottom:14px;font-size:14px;line-height:1.5;}
.authx__msg--ok{background:#EEF7F0;border:1px solid #CDE7D3;color:#2E7D48;}
.authx__msg--ok strong{display:block;margin-bottom:2px;font-weight:600;}
.authx__msg--note{background:#FDF6EA;border:1px solid #EAD9B4;color:#8A6212;}
.authx__msg--err{background:#FCEDEE;border:1px solid #EED2D5;color:#B24450;}
.authx__msg a.btn5{margin-top:8px;}
/* field errors use the global .field-error style in style.css */

/* intl-tel-input: match the redesigned inputs */
.authx .iti{width:100%;display:block;}
.authx .iti .field__control{padding-left:52px;}

/* responsive */
@media (max-width:600px){
  .authx__grid{grid-template-columns:1fr;gap:0;}
  .authx__card{padding:24px 20px;}
  .authx__title{font-size:24px;}
  .authx--register .authx__card,.authx--login .authx__card{max-width:100%;}
}
@media (max-width:360px){
  .authx{padding:18px 12px;}
  .authx__card{padding:20px 16px;border-radius:14px;}
  .authx__title{font-size:22px;}
}