/* Enjaz V15.7 — registration UI refresh. Visual only: current fields + current validation logic. */
.app-auth-register {
  --reg-navy:#0a4f78;
  --reg-navy-deep:#073e61;
  --reg-teal:#11a89e;
  --reg-teal-soft:#eaf9f7;
  --reg-ink:#17394a;
  --reg-muted:#667f8c;
  --reg-line:#d8e6ea;
  --reg-bg:#f5fafb;
  --reg-danger:#d74650;
  --reg-success:#128066;
  background:
    radial-gradient(circle at 9% 12%, rgba(17,168,158,.10), transparent 24rem),
    radial-gradient(circle at 92% 88%, rgba(10,79,120,.08), transparent 28rem),
    linear-gradient(145deg,#f9fcfd 0%,#f3f9fa 48%,#eef7f8 100%);
  min-height:100vh;
}

.app-auth-register .auth-shell-register{
  width:min(1180px,calc(100% - 32px));
  margin:0 auto;
  min-height:100vh;
  padding:32px 0;
  display:grid;
  grid-template-columns:minmax(280px,.78fr) minmax(0,1.35fr);
  align-items:center;
  gap:28px;
}

.app-auth-register .auth-panel{
  min-width:0;
}

.app-auth-register .auth-panel-hero{
  position:relative;
  min-height:640px;
  border-radius:34px;
  overflow:hidden;
  padding:48px 34px;
  color:#fff;
  background:
    linear-gradient(155deg,rgba(6,68,105,.98),rgba(9,96,120,.96) 55%,rgba(15,154,145,.93));
  box-shadow:0 24px 55px rgba(8,61,83,.17);
  isolation:isolate;
}

.app-auth-register .auth-panel-hero::before,
.app-auth-register .auth-panel-hero::after{
  content:"";
  position:absolute;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.15);
  z-index:-1;
}
.app-auth-register .auth-panel-hero::before{width:420px;height:420px;left:-210px;top:-120px}
.app-auth-register .auth-panel-hero::after{width:330px;height:330px;right:-185px;bottom:-100px}
.app-auth-register .auth-wave{display:none!important}

.app-auth-register .auth-hero-content{
  height:100%;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:flex-start;
  text-align:right;
  position:relative;
  z-index:1;
}

.app-auth-register .auth-hero-logo-ring{
  width:112px;
  height:112px;
  display:grid;
  place-items:center;
  border-radius:30px;
  background:rgba(255,255,255,.96);
  box-shadow:0 16px 30px rgba(0,0,0,.14);
  margin-bottom:28px;
}
.app-auth-register .auth-hero-logo{max-width:82px;max-height:82px;object-fit:contain}
.app-auth-register .auth-hero-copy h1{
  margin:0 0 12px;
  color:#fff;
  font-size:clamp(2rem,3vw,2.65rem);
  line-height:1.25;
}
.app-auth-register .auth-hero-copy p{
  margin:0;
  max-width:430px;
  color:rgba(255,255,255,.86);
  font-size:1rem;
  line-height:1.9;
}
.app-auth-register .auth-hero-points{
  margin-top:34px;
  width:100%;
  display:grid;
  gap:12px;
}
.app-auth-register .auth-hero-points span{
  display:flex;
  align-items:center;
  gap:12px;
  min-height:54px;
  padding:11px 14px;
  border:1px solid rgba(255,255,255,.14);
  border-radius:16px;
  background:rgba(255,255,255,.08);
  backdrop-filter:blur(8px);
  color:#fff;
  font-weight:800;
}
.app-auth-register .auth-hero-points i{
  width:34px;
  height:34px;
  border-radius:11px;
  display:grid;
  place-items:center;
  background:rgba(255,255,255,.14);
  color:#aaf1e9;
}

.app-auth-register .auth-panel-form{
  display:flex;
  justify-content:center;
}
.app-auth-register .auth-form-card-register{
  width:100%;
  max-width:760px;
  padding:30px 32px 28px;
  border-radius:30px;
  background:rgba(255,255,255,.97);
  border:1px solid rgba(199,219,225,.78);
  box-shadow:0 24px 65px rgba(24,67,85,.12);
}
.app-auth-register .auth-form-brand{
  display:flex;
  justify-content:center;
  margin-bottom:8px;
}
.app-auth-register .app-auth-logo{
  width:78px;
  height:78px;
  object-fit:contain;
  filter:drop-shadow(0 9px 16px rgba(10,79,120,.10));
}
.app-auth-register .auth-form-head{text-align:center;margin-bottom:24px}
.app-auth-register .auth-title{
  margin:0 0 7px;
  color:var(--reg-ink);
  font-size:clamp(1.7rem,3vw,2.15rem);
  line-height:1.3;
}
.app-auth-register .auth-sub{margin:0;color:var(--reg-muted);font-size:.94rem;line-height:1.7}

.app-auth-register .auth-form-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:19px 16px;
}
.app-auth-register .auth-form-grid > .form-group:nth-of-type(5),
.app-auth-register .auth-form-grid > .form-group:nth-of-type(6),
.app-auth-register .auth-form-grid > .auth-submit-btn{
  grid-column:1/-1;
}
.app-auth-register .form-group{margin:0;min-width:0}
.app-auth-register .form-group > label{
  display:flex;
  align-items:center;
  gap:5px;
  margin-bottom:8px;
  color:var(--reg-ink);
  font-size:.92rem;
  font-weight:850;
}
.app-auth-register .required-star{color:#ef3e47}

.app-auth-register .auth-input-wrap,
.app-auth-register .auth-phone-grid{
  position:relative;
}
.app-auth-register .auth-input-wrap{
  display:flex;
  align-items:center;
}
.app-auth-register .auth-input-icon{
  position:absolute;
  right:14px;
  z-index:2;
  width:38px;
  height:38px;
  display:grid;
  place-items:center;
  border-radius:12px;
  background:#f1f7f8;
  color:#607b88;
  pointer-events:none;
}
.app-auth-register .auth-input,
.app-auth-register .auth-phone-grid .form-input{
  width:100%;
  min-height:54px;
  border:1.5px solid #cfdee3;
  border-radius:16px;
  background:#fff;
  color:var(--reg-ink);
  font-size:.94rem;
  transition:border-color .18s ease,box-shadow .18s ease,background .18s ease,transform .18s ease;
}
.app-auth-register .auth-input-wrap .auth-input{padding-right:62px;padding-left:50px}
.app-auth-register .auth-input::placeholder{color:#9cadb5}
.app-auth-register .auth-input:focus,
.app-auth-register .auth-phone-grid .form-input:focus{
  outline:none;
  border-color:var(--reg-teal);
  box-shadow:0 0 0 4px rgba(17,168,158,.11);
  background:#fff;
}
.app-auth-register .auth-input-wrap:focus-within .auth-input-icon{
  color:var(--reg-teal);
  background:#e7f8f5;
}
.app-auth-register .auth-toggle-password{
  position:absolute;
  left:11px;
  top:50%;
  transform:translateY(-50%);
  z-index:3;
  width:38px;
  height:38px;
  border:0;
  border-radius:11px;
  background:transparent;
  color:#718995;
  cursor:pointer;
}
.app-auth-register .auth-toggle-password:hover{background:#eef7f7;color:var(--reg-teal)}

.app-auth-register .auth-phone-grid{
  display:grid;
  grid-template-columns:minmax(185px,.78fr) minmax(0,1.22fr);
  gap:9px;
}
.app-auth-register .auth-phone-grid select{padding-inline:13px}
.app-auth-register .auth-phone-grid input{padding-inline:14px}

.app-auth-register .auth-field-help,
.app-auth-register .auth-live-error,
.app-auth-register .auth-live-status{
  margin-top:6px;
  padding-inline:4px;
  line-height:1.55;
}
.app-auth-register .auth-field-help{color:#748a94;font-size:.76rem}
.app-auth-register .auth-live-error{color:var(--reg-danger);font-size:.78rem;font-weight:800}
.app-auth-register .auth-live-status{font-size:.77rem}
.app-auth-register .auth-live-status.is-ok{color:var(--reg-success)}
.app-auth-register .auth-live-status.is-checking{color:#927100}

.app-auth-register .auth-password-guidance{
  margin-top:11px;
  padding:14px 15px;
  border:1px solid #d7ebe7;
  border-radius:17px;
  background:linear-gradient(135deg,#f4fbfa,#edf8fa);
}
.app-auth-register .auth-password-guidance-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:10px;
}
.app-auth-register .auth-password-guidance-head > span{
  display:flex;
  align-items:center;
  gap:7px;
  color:#225866;
  font-size:.85rem;
  font-weight:900;
}
.app-auth-register .auth-password-guidance-head i{color:var(--reg-teal)}
.app-auth-register .auth-password-guidance-head small{color:#748d96;font-size:.71rem}
.app-auth-register .auth-password-rules{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
  margin:0;
}
.app-auth-register .auth-password-rule{
  display:flex;
  align-items:center;
  gap:7px;
  min-height:39px;
  padding:7px 10px;
  border-radius:11px;
  background:#fff;
  border:1px solid #e0ecee;
  color:#607985;
  font-size:.76rem;
  font-weight:750;
}
.app-auth-register .auth-password-rule i{font-size:.62rem;color:#9aadB4}
.app-auth-register .auth-password-rule.is-ok{
  background:#e9f8f1;
  border-color:#bfe9d8;
  color:#126f55;
}
.app-auth-register .auth-password-rule.is-ok i{color:#149069}
.app-auth-register .auth-password-rule.is-ok i::before{content:"\f00c"}
.app-auth-register .auth-password-safety-note{
  display:flex;
  align-items:flex-start;
  gap:6px;
  margin-top:10px;
  color:#68818b;
}
.app-auth-register .auth-password-safety-note i{margin-top:3px;color:#6c9ca1}

.app-auth-register .app-field-invalid{
  border-color:#df535c!important;
  background:#fffafa!important;
  box-shadow:0 0 0 4px rgba(223,83,92,.09)!important;
}
.app-auth-register .app-field-valid{
  border-color:#5fb897!important;
  box-shadow:0 0 0 3px rgba(95,184,151,.07)!important;
}

.app-auth-register .auth-submit-btn{
  min-height:58px;
  margin-top:3px;
  border:0;
  border-radius:17px;
  background:linear-gradient(110deg,var(--reg-navy),#0b6792 57%,var(--reg-teal));
  color:#fff!important;
  -webkit-text-fill-color:#fff!important;
  font-size:1rem;
  font-weight:900;
  box-shadow:0 13px 25px rgba(10,79,120,.19);
  cursor:pointer;
  transition:transform .18s ease,box-shadow .18s ease,filter .18s ease;
}
.app-auth-register .auth-submit-btn:hover{transform:translateY(-1px);box-shadow:0 16px 30px rgba(10,79,120,.23);filter:saturate(1.04)}
.app-auth-register .auth-submit-btn:active{transform:translateY(0)}

.app-auth-register .auth-links-inline{
  margin-top:21px;
  padding-top:18px;
  border-top:1px solid #e2ecef;
  display:flex;
  justify-content:center;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  color:#728893;
  font-size:.88rem;
}
.app-auth-register .auth-links-inline a{
  display:inline-flex;
  align-items:center;
  gap:7px;
  color:var(--reg-navy);
  font-weight:900;
  text-decoration:none;
}
.app-auth-register .auth-links-inline a:hover{color:var(--reg-teal)}

.app-auth-register .auth-server-errors{
  margin:0 0 18px;
  border-radius:16px;
}

@media(max-width:900px){
  .app-auth-register .auth-shell-register{
    width:min(720px,calc(100% - 24px));
    grid-template-columns:1fr;
    gap:14px;
    padding:18px 0 28px;
  }
  .app-auth-register .auth-panel-hero{
    min-height:0;
    padding:22px;
    border-radius:26px;
  }
  .app-auth-register .auth-hero-content{
    display:grid;
    grid-template-columns:auto 1fr;
    column-gap:16px;
    align-items:center;
  }
  .app-auth-register .auth-hero-logo-ring{width:76px;height:76px;border-radius:22px;margin:0}
  .app-auth-register .auth-hero-logo{max-width:58px;max-height:58px}
  .app-auth-register .auth-hero-copy h1{font-size:1.5rem;margin-bottom:4px}
  .app-auth-register .auth-hero-copy p{font-size:.84rem;line-height:1.65}
  .app-auth-register .auth-hero-points{grid-column:1/-1;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:18px;gap:8px}
  .app-auth-register .auth-hero-points span{justify-content:center;min-height:44px;padding:8px;font-size:.76rem;text-align:center}
  .app-auth-register .auth-hero-points i{display:none}
}

@media(max-width:640px){
  .app-auth-register .auth-shell-register{width:100%;padding:0;gap:0}
  .app-auth-register .auth-panel-hero{
    border-radius:0 0 28px 28px;
    padding:20px 18px 19px;
    box-shadow:none;
  }
  .app-auth-register .auth-hero-content{grid-template-columns:66px 1fr;column-gap:12px}
  .app-auth-register .auth-hero-logo-ring{width:66px;height:66px;border-radius:19px}
  .app-auth-register .auth-hero-logo{max-width:50px;max-height:50px}
  .app-auth-register .auth-hero-copy h1{font-size:1.25rem}
  .app-auth-register .auth-hero-copy p{font-size:.76rem}
  .app-auth-register .auth-hero-points{display:none}

  .app-auth-register .auth-panel-form{padding:12px}
  .app-auth-register .auth-form-card-register{
    padding:22px 16px 20px;
    border-radius:24px;
    box-shadow:0 15px 35px rgba(24,67,85,.10);
  }
  .app-auth-register .auth-form-brand{margin-bottom:2px}
  .app-auth-register .app-auth-logo{width:62px;height:62px}
  .app-auth-register .auth-title{font-size:1.55rem}
  .app-auth-register .auth-sub{font-size:.82rem}
  .app-auth-register .auth-form-head{margin-bottom:20px}

  .app-auth-register .auth-form-grid{grid-template-columns:1fr;gap:17px}
  .app-auth-register .auth-form-grid > *{grid-column:auto!important}
  .app-auth-register .form-group > label{font-size:.88rem}
  .app-auth-register .auth-input,
  .app-auth-register .auth-phone-grid .form-input{min-height:53px;font-size:16px}
  .app-auth-register .auth-phone-grid{grid-template-columns:130px minmax(0,1fr);gap:7px}
  .app-auth-register .auth-phone-grid select{font-size:.82rem;padding-inline:8px}
  .app-auth-register .auth-phone-grid input{min-width:0}

  .app-auth-register .auth-password-guidance-head{align-items:flex-start;flex-direction:column;gap:3px}
  .app-auth-register .auth-password-rules{grid-template-columns:1fr}
  .app-auth-register .auth-submit-btn{min-height:56px}
  .app-auth-register .auth-links-inline{margin-top:18px}
}

@media(max-width:390px){
  .app-auth-register .auth-panel-form{padding:9px}
  .app-auth-register .auth-form-card-register{padding-inline:13px}
  .app-auth-register .auth-phone-grid{grid-template-columns:115px minmax(0,1fr)}
}

@media(prefers-reduced-motion:reduce){
  .app-auth-register *{scroll-behavior:auto!important;transition:none!important}
}


/* V15.8 — register hero contrast/readability fix.
   Some global typography rules were overriding the hero's intended light colors. */
body.app-auth-register .auth-panel-hero,
body.app-auth-register .auth-panel-hero .auth-hero-content {
    color: #ffffff !important;
    -webkit-text-fill-color: initial !important;
}

body.app-auth-register .auth-panel-hero .auth-hero-copy h1 {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    text-shadow: 0 2px 10px rgba(0, 40, 62, .24);
}

body.app-auth-register .auth-panel-hero .auth-hero-copy p {
    color: #eaf9f8 !important;
    -webkit-text-fill-color: #eaf9f8 !important;
    opacity: 1 !important;
    text-shadow: 0 1px 5px rgba(0, 42, 60, .18);
}

body.app-auth-register .auth-panel-hero .auth-hero-points span {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    background: rgba(255, 255, 255, .105) !important;
    border-color: rgba(205, 249, 242, .25) !important;
    text-shadow: 0 1px 4px rgba(0, 39, 54, .18);
}

body.app-auth-register .auth-panel-hero .auth-hero-points i {
    color: #b8fff4 !important;
    -webkit-text-fill-color: #b8fff4 !important;
    background: rgba(190, 255, 246, .13) !important;
}

@media (max-width: 900px) {
    body.app-auth-register .auth-panel-hero .auth-hero-copy h1 {
        color: #ffffff !important;
        -webkit-text-fill-color: #ffffff !important;
    }
    body.app-auth-register .auth-panel-hero .auth-hero-copy p {
        color: #eaf9f8 !important;
        -webkit-text-fill-color: #eaf9f8 !important;
    }
}


/* ============================================================
   Enjaz V15.9 — Mobile registration hero layout
   Mobile only. Desktop/tablet design remains unchanged.
   Order on phone: logo -> title -> description -> benefit cards.
   ============================================================ */
@media (max-width: 640px) {
    body.app-auth-register .auth-panel-hero {
        min-height: 0 !important;
        height: auto !important;
        padding: 28px 18px 30px !important;
        border-radius: 0 0 30px 30px !important;
        overflow: hidden !important;
    }

    body.app-auth-register .auth-panel-hero .auth-hero-content {
        width: 100% !important;
        height: auto !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 0 !important;
        text-align: center !important;
        position: relative !important;
    }

    body.app-auth-register .auth-panel-hero .auth-hero-logo-ring {
        position: relative !important;
        inset: auto !important;
        width: 148px !important;
        height: 148px !important;
        min-width: 148px !important;
        min-height: 148px !important;
        margin: 0 auto 22px !important;
        border-radius: 34px !important;
        display: grid !important;
        place-items: center !important;
        background: rgba(255,255,255,.97) !important;
        box-shadow: 0 18px 38px rgba(1,42,61,.22) !important;
        transform: none !important;
    }

    body.app-auth-register .auth-panel-hero .auth-hero-logo {
        position: static !important;
        width: 118px !important;
        height: 118px !important;
        max-width: 118px !important;
        max-height: 118px !important;
        object-fit: contain !important;
        transform: none !important;
        margin: 0 !important;
    }

    body.app-auth-register .auth-panel-hero .auth-hero-copy {
        width: 100% !important;
        position: static !important;
        display: block !important;
        margin: 0 !important;
        padding: 0 4px !important;
        transform: none !important;
        text-align: center !important;
    }

    body.app-auth-register .auth-panel-hero .auth-hero-copy h1 {
        position: static !important;
        margin: 0 0 10px !important;
        padding: 0 !important;
        color: #ffffff !important;
        -webkit-text-fill-color: #ffffff !important;
        font-size: clamp(1.8rem, 8.6vw, 2.25rem) !important;
        line-height: 1.3 !important;
        font-weight: 900 !important;
        text-align: center !important;
        transform: none !important;
        text-shadow: 0 3px 14px rgba(0,37,61,.24) !important;
    }

    body.app-auth-register .auth-panel-hero .auth-hero-copy p {
        position: static !important;
        max-width: 330px !important;
        margin: 0 auto !important;
        padding: 0 !important;
        color: #eafffc !important;
        -webkit-text-fill-color: #eafffc !important;
        font-size: 1rem !important;
        line-height: 1.9 !important;
        font-weight: 600 !important;
        text-align: center !important;
        opacity: 1 !important;
        transform: none !important;
    }

    body.app-auth-register .auth-panel-hero .auth-hero-points {
        position: static !important;
        width: 100% !important;
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 10px !important;
        margin: 24px 0 0 !important;
        padding: 0 !important;
        transform: none !important;
    }

    body.app-auth-register .auth-panel-hero .auth-hero-points span {
        width: 100% !important;
        min-height: 58px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 11px !important;
        padding: 11px 14px !important;
        border-radius: 18px !important;
        background: rgba(255,255,255,.10) !important;
        border: 1px solid rgba(211,255,248,.24) !important;
        color: #ffffff !important;
        -webkit-text-fill-color: #ffffff !important;
        font-size: .92rem !important;
        font-weight: 850 !important;
        line-height: 1.5 !important;
        text-align: center !important;
        backdrop-filter: blur(8px) !important;
    }

    body.app-auth-register .auth-panel-hero .auth-hero-points i {
        flex: 0 0 36px !important;
        width: 36px !important;
        height: 36px !important;
        display: grid !important;
        place-items: center !important;
        border-radius: 12px !important;
        background: rgba(199,255,246,.15) !important;
        color: #bafff5 !important;
        -webkit-text-fill-color: #bafff5 !important;
        font-size: 1rem !important;
    }

    /* Keep the form visually separated from the hero without a large blank gap. */
    body.app-auth-register .auth-panel-form {
        padding: 12px !important;
        margin-top: 0 !important;
    }
}

/* Slightly tighter phones without reducing readability. */
@media (max-width: 390px) {
    body.app-auth-register .auth-panel-hero {
        padding-inline: 14px !important;
    }

    body.app-auth-register .auth-panel-hero .auth-hero-logo-ring {
        width: 132px !important;
        height: 132px !important;
        min-width: 132px !important;
        min-height: 132px !important;
    }

    body.app-auth-register .auth-panel-hero .auth-hero-logo {
        width: 104px !important;
        height: 104px !important;
        max-width: 104px !important;
        max-height: 104px !important;
    }

    body.app-auth-register .auth-panel-hero .auth-hero-copy h1 {
        font-size: 1.75rem !important;
    }

    body.app-auth-register .auth-panel-hero .auth-hero-copy p {
        font-size: .93rem !important;
    }
}


/* ============================================================
   Enjaz V16.7 — registration field icon collision fix
   Global responsive CSS applies !important padding to .form-input.
   Reserve explicit space for the decorative icon and password toggle.
   ============================================================ */
body.app-auth-register .auth-input-wrap > .auth-input-icon{
  right:12px !important;
  left:auto !important;
  width:34px !important;
  height:34px !important;
  min-width:34px !important;
  border-radius:10px !important;
  pointer-events:none !important;
}

body.app-auth-register .auth-input-wrap > input.auth-input{
  padding-right:58px !important;
  padding-left:16px !important;
  text-indent:0 !important;
  box-sizing:border-box !important;
}

body.app-auth-register .auth-input-wrap > input.auth-input[type="password"],
body.app-auth-register .auth-input-wrap > input.auth-input[data-password-visible="1"]{
  padding-right:58px !important;
  padding-left:54px !important;
}

body.app-auth-register .auth-input-wrap > .auth-toggle-password{
  left:10px !important;
  right:auto !important;
  inset-inline-start:auto !important;
  inset-inline-end:auto !important;
  width:38px !important;
  min-width:38px !important;
  padding:0 !important;
}

/* Password toggles usually change type=password to type=text. Keep the
   left-hand eye-button clearance even after that type switch. */
body.app-auth-register .auth-input-wrap.auth-password-wrap > input.auth-input{
  padding-right:58px !important;
  padding-left:54px !important;
}

@media (max-width:640px){
  body.app-auth-register .auth-input-wrap > .auth-input-icon{
    right:11px !important;
    width:32px !important;
    height:32px !important;
    min-width:32px !important;
  }
  body.app-auth-register .auth-input-wrap > input.auth-input{
    padding-right:54px !important;
    padding-left:14px !important;
  }
  body.app-auth-register .auth-input-wrap.auth-password-wrap > input.auth-input{
    padding-right:54px !important;
    padding-left:52px !important;
  }
}