/*==============================================================================
REGISTER PAGE — statSCALAR Enterprise Design System
Scope   : resources/views/front/register.blade.php
Depends : root.css (site-wide :root variables, reset, .ss-logo, typography)
          — already loaded globally, so it is NOT duplicated here.
Note    : Page-scoped extract of sections 124–129 from the master custom.css
          ("Enterprise Register Layout" through "Micro Interactions &
          Accessibility"), plus the standalone "Auth Page Text Logo" rules
          found later in the master file. Cleaned up and extended with a
          small number of new rules (clearly marked) for the password
          visibility toggle and strength meter now in the improved blade.
==============================================================================*/

/* NEW — accessible label helper for placeholder-only fields (kept local to
   this page in case the global stylesheet doesn't already ship one) */
.visually-hidden{
  position:absolute !important;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

/*==================================================
124. ENTERPRISE REGISTER LAYOUT
==================================================*/
.ss-register-page{
  position:relative;
  padding:90px 0;
  background:
    radial-gradient(circle at top left,rgba(0,168,107,.08),transparent 45%),
    radial-gradient(circle at bottom right,rgba(0,168,107,.06),transparent 40%),
    var(--ss-bg);
  min-height:calc(100vh - 84px);
  display:flex;
  align-items:center;
}
.ss-register-page::before{
  content:"";
  position:absolute;
  inset:0;
  background-image:
    linear-gradient(rgba(0,168,107,.03) 1px,transparent 1px),
    linear-gradient(90deg,rgba(0,168,107,.03) 1px,transparent 1px);
  background-size:48px 48px;
  pointer-events:none;
}
.ss-register-wrapper{
  position:relative;
  z-index:2;
}
.ss-auth-card{
  overflow:hidden;
  border-radius:30px;
  background:#fff;
  border:1px solid rgba(226,232,240,.9);
  box-shadow:0 30px 70px rgba(15,23,42,.08);
}
.ss-auth-left{
  height:100%;
  position:relative;
  overflow:hidden;
}
.ss-auth-right{
  height:100%;
  background:#fff;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:64px;
}
.ss-auth-right h2{
  font-size:38px;
  font-weight:800;
  color:var(--ss-heading);
  margin-bottom:10px;
  letter-spacing:1px;
}
.ss-auth-right>p{
  margin-bottom:4px;
  color:var(--ss-muted);
  font-size:15px;
}
.ss-auth-right>p a{
  color:var(--ss-primary);
  font-weight:700;
}
.ss-auth-right form{
  width:100%;
}
.ss-auth-right .row{
  margin-bottom:6px;
}
.ss-auth-card .alert{
  border:none;
  border-radius:16px;
  padding:16px 20px;
  margin-bottom:28px;
  box-shadow:0 8px 20px rgba(15,23,42,.05);
}
.ss-auth-card .alert-info{
  background:#eaf8f2;
  color:#067647;
}
@media(max-width:991px){
  .ss-register-page{padding:50px 0;}
  .ss-auth-right{padding:40px 32px;}
}
@media(max-width:576px){
  .ss-auth-card{border-radius:22px;}
  .ss-auth-right{padding:28px;}
  .ss-auth-right h2{font-size:30px;}
}

/*==================================================
125. PREMIUM LEFT BRAND & BENEFITS PANEL
==================================================*/
.ss-register-info{
  position:relative;
  height:100%;
  padding:70px 56px;
  color:#fff;
  background:linear-gradient(145deg,#009966 0%,#00A86B 55%,#067647 100%);
  overflow:hidden;
}
.ss-register-pattern{
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.18;
  background-image:
    radial-gradient(circle at 15% 20%,rgba(255,255,255,.35) 2px,transparent 2px),
    radial-gradient(circle at 80% 70%,rgba(255,255,255,.28) 2px,transparent 2px);
  background-size:80px 80px;
}
.ss-register-info .ss-logo{
  width:210px;
  margin-bottom:30px;
  position:relative;
  z-index:2;
}
.ss-auth-badge{
  display:inline-flex;
  align-items:center;
  padding:10px 18px;
  border-radius:999px;
  background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.18);
  font-size:12px;
  font-weight:700;
  letter-spacing:1px;
  margin-bottom:46px;
  position:relative;
  z-index:2;
}
.ss-register-info h1{
  color:#fff;
  font-size:36px;
  line-height:1.15;
  margin-bottom:30px;
  position:relative;
  z-index:2;
  letter-spacing:1px;
}
.ss-auth-description{
  color:rgba(255,255,255,.88);
  font-size:17px;
  line-height:1.8;
  margin-bottom:42px;
  position:relative;
  z-index:2;
}
.ss-benefits{
  display:flex;
  flex-direction:column;
  gap:18px;
  position:relative;
  z-index:2;
}
.ss-benefit-item{
  display:flex;
  gap:18px;
  align-items:flex-start;
  padding:18px;
  border-radius:18px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.10);
  backdrop-filter:blur(10px);
  transition:all .30s ease;
}
.ss-benefit-item:hover{
  transform:translateX(8px);
  background:rgba(255,255,255,.14);
}
.ss-benefit-icon{
  width:58px;
  height:58px;
  border-radius:16px;
  background:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
}
.ss-benefit-icon i{
  font-size:22px;
  color:var(--ss-primary);
}
.ss-benefit-item h4{
  color:#fff;
  font-size:18px;
  margin-bottom:6px;
}
.ss-benefit-item p{
  color:rgba(255,255,255,.80);
  font-size:14px;
  line-height:1.6;
  margin:0;
}
@media(max-width:991px){
  .ss-register-info{padding:50px 36px;}
  .ss-register-info h1{font-size:38px;}
}
@media(max-width:576px){
  .ss-register-info{padding:34px 24px;}
  .ss-register-info h1{font-size:30px;}
  .ss-register-info .ss-logo{width:170px;}
  .ss-benefit-item{padding:16px;}
}

/*==================================================
126. ENTERPRISE REGISTRATION FORM
==================================================*/
.ss-register-enterprise-form{
  margin-top:28px;
}
.ss-register-enterprise-form .row{
  --bs-gutter-x:20px;
  margin-bottom:8px;
}
.ss-register-enterprise-form .row:last-of-type{
  margin-bottom:0;
}
.ss-register-enterprise-form .col-md-6,
.ss-register-enterprise-form .col-md-12{
  display:flex;
  flex-direction:column;
}
.ss-register-enterprise-form .form-control{
  width:100%;
  height:46px;
  border:1px solid #d9e4ef;
  border-radius:14px;
  background:#fff;
  padding:0 20px;
  font-size:16px;
  color:#102542;
  box-shadow:none;
  transition:.3s ease;
}
.ss-register-enterprise-form .form-control::placeholder{
  color:#7f8fa8;
  font-weight:500;
}
.ss-register-enterprise-form .form-control:hover{
  border-color:#00a86b;
}
.ss-register-enterprise-form .form-control:focus{
  border-color:#00a86b;
  box-shadow:0 0 0 4px rgba(0,168,107,.10);
}
.ss-register-enterprise-form .error{
  display:block;
  margin-top:8px;
  font-size:13px;
  color:#dc3545;
}
/* NEW — valid-state icon slot (label wrapper for inline validation) */
.ss-field{
  position:relative;
  width:100%;
}
.ss-field .form-control{
  padding-right:44px;
}
/* Phone */
.phone-input{
  width:100%;
}
.iti{
  width:100%;
}
.iti__selected-flag{
  padding:0 14px;
}
.iti input{
  height:56px !important;
  padding-left:92px !important;
  border-radius:14px !important;
}
/* NEW — password field + visibility toggle */
.ss-password-field{
  position:relative;
  width:100%;
}
.ss-password-field .form-control{
  padding-right:46px;
}
.ss-password-toggle{
  position:absolute;
  top:50%;
  right:16px;
  transform:translateY(-50%);
  border:none;
  background:none;
  padding:4px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#7f8fa8;
  cursor:pointer;
  transition:color .25s ease;
}
.ss-password-toggle:hover,
.ss-password-toggle:focus-visible{
  color:var(--ss-primary);
}
.ss-password-toggle:focus-visible{
  outline:2px solid var(--ss-primary);
  outline-offset:2px;
  border-radius:6px;
}
/* NEW — lightweight password strength meter */
.ss-password-strength{
  display:flex;
  gap:6px;
  margin-top:10px;
}
.ss-password-strength span{
  height:4px;
  flex:1;
  border-radius:999px;
  background:#e2e8f0;
  transition:background-color .25s ease;
}
.ss-password-strength[data-strength="1"] span:nth-child(1){background:#dc3545;}
.ss-password-strength[data-strength="2"] span:nth-child(-n+2){background:#f59e0b;}
.ss-password-strength[data-strength="3"] span:nth-child(-n+3){background:#00a86b;}
.ss-password-strength[data-strength="4"] span{background:#067647;}
.ss-password-hint{
  margin-top:6px;
  font-size:12px;
  color:#7f8fa8;
}
/* Button */
.ss-register-submit{
  width:100%;
  height:50px;
  margin-top:12px;
  border:none;
  border-radius:16px;
  background:linear-gradient(135deg,#0ea86b 0%,#088f5a 100%);
  color:#fff;
  font-size:17px;
  font-weight:700;
  letter-spacing:.2px;
  cursor:pointer;
  transition:all .3s ease;
  box-shadow:0 12px 28px rgba(14,168,107,.22);
}
.ss-register-submit:hover{
  background:linear-gradient(135deg,#10b976 0%,#0a9b61 100%);
  transform:translateY(-2px);
  box-shadow:0 18px 36px rgba(14,168,107,.28);
}
.ss-register-submit:active{
  transform:translateY(0);
  box-shadow:0 8px 18px rgba(14,168,107,.20);
}
.ss-register-submit:focus{
  outline:none;
  box-shadow:0 0 0 4px rgba(14,168,107,.15);
}
/* Terms */
.ss-register-terms{
  margin-top:10px;
  text-align:center;
  font-size:15px;
  color:#667085;
}
.ss-register-terms a{
  font-weight:600;
}

/*==================================================
127. AUTH PAGE TEXT LOGO
==================================================*/
.ss-auth-logo{
  display:inline-block;
  margin-bottom:30px;
  text-decoration:none;
  line-height:1;
  letter-spacing:1px;
  color:#ffffff;
  font-size:42px;
  font-weight:800;
}
.ss-auth-logo span{
  color:var(--ss-heading);
}
.ss-auth-logo:hover{
  color:#fff;
  text-decoration:none;
}
.ss-auth-logo:hover span{
  color:#fff;
}

/*==================================================
128. RESPONSIVE & MOBILE OPTIMIZATION
==================================================*/
@media (max-width:1199px){
  .ss-register-page{padding:70px 0;}
  .ss-auth-card{border-radius:26px;}
  .ss-register-info{padding:60px 42px;}
  .ss-auth-right{padding:56px 42px;}
  .ss-register-info h1{font-size:40px;}
  .ss-auth-description{font-size:16px;}
}
@media (max-width:991px){
  .ss-register-page{
    min-height:auto;
    align-items:flex-start;
    padding:45px 0;
  }
  .ss-auth-card{border-radius:24px;}
  .ss-register-info{border-radius:24px 24px 0 0;}
  .ss-auth-right{border-radius:0 0 24px 24px;}
  .ss-benefits{margin-top:32px;}
  .ss-benefit-item{padding:18px;}
  .ss-auth-right h2{text-align:center;}
  .ss-auth-right>p{text-align:center;}
}
@media (max-width:767px){
  .ss-register-page{padding:30px 0;}
  .ss-auth-card{border-radius:20px;overflow:hidden;}
  .ss-register-info{padding:32px 24px;}
  .ss-register-info .ss-logo{margin:0 auto 24px;}
  .ss-auth-badge{display:flex;justify-content:center;margin:0 auto 22px;}
  .ss-register-info h1{font-size:30px;text-align:center;}
  .ss-auth-description{text-align:center;margin-bottom:30px;}
  .ss-benefits{gap:14px;}
  .ss-benefit-item{gap:14px;padding:16px;}
  .ss-benefit-icon{width:50px;height:50px;}
  .ss-benefit-icon i{font-size:18px;}
  .ss-benefit-item h4{font-size:16px;}
  .ss-benefit-item p{font-size:13px;}
  .ss-auth-right{padding:30px 22px;}
  .ss-register-enterprise-form .row{margin-left:0;margin-right:0;}
  .ss-register-enterprise-form .row>[class*="col-"]{
    padding-left:0;
    padding-right:0;
    margin-bottom:12px;
  }
  .ss-register-submit{height:56px;font-size:15px;}
  .ss-register-terms{font-size:13px;line-height:1.6;}
}
@media (max-width:480px){
  .ss-register-page{padding:20px 0;}
  .ss-register-info{padding:26px 18px;}
  .ss-auth-right{padding:24px 18px;}
  .ss-register-info h1{font-size:26px;}
  .ss-auth-right h2{font-size:26px;}
  .ss-auth-description{font-size:15px;}
  .ss-benefit-item{padding:14px;}
  .ss-benefit-icon{width:46px;height:46px;}
  .ss-benefit-icon i{font-size:16px;}
  .ss-register-input,
  .phone-input{height:54px;font-size:14px;}
  .ss-register-submit{height:54px;}
}
@media (max-height:700px) and (orientation:landscape){
  .ss-register-page{padding:30px 0;min-height:auto;}
  .ss-register-info{padding:36px;}
  .ss-auth-right{padding:36px;}
}

/*==================================================
129. MICRO INTERACTIONS & ACCESSIBILITY
==================================================*/
.ss-register-page *,
.ss-register-page *::before,
.ss-register-page *::after{
  transition:
    background-color .30s ease,
    color .30s ease,
    border-color .30s ease,
    box-shadow .30s ease,
    transform .30s ease,
    opacity .30s ease;
}
.ss-register-input:hover{
  border-color:#B8C5D3;
  background:#FCFDFD;
}
.ss-register-input:focus,
.ss-create-btn:focus,
.ss-auth-right a:focus,
.iti__selected-flag:focus{
  outline:none;
  box-shadow:0 0 0 4px rgba(0,168,107,.14);
}
.ss-register-submit{
  position:relative;
  overflow:hidden;
}
.ss-register-submit::after{
  content:"";
  position:absolute;
  left:-120%;
  top:0;
  width:100%;
  height:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.35),transparent);
  transition:left .8s ease;
}
.ss-register-submit:hover::after{
  left:120%;
}
.ss-benefit-item{
  cursor:default;
}
.ss-benefit-item:hover{
  transform:translateX(8px) translateY(-2px);
  box-shadow:0 14px 34px rgba(0,0,0,.08);
}
.ss-benefit-icon{
  transition:transform .30s ease,box-shadow .30s ease;
}
.ss-benefit-item:hover .ss-benefit-icon{
  transform:scale(1.08);
  box-shadow:0 10px 26px rgba(255,255,255,.20);
}
.ss-register-info .ss-logo{
  transition:transform .40s ease;
}
.ss-register-info .ss-logo:hover{
  transform:scale(1.03);
}
.ss-register-terms a,
.ss-auth-right>p a{
  position:relative;
}
.ss-register-terms a::after,
.ss-auth-right>p a::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-2px;
  width:0;
  height:2px;
  background:var(--ss-primary);
  transition:.30s;
}
.ss-register-terms a:hover::after,
.ss-auth-right>p a:hover::after{
  width:100%;
}
.ss-register-form .alert{
  animation:ssRegisterFade .45s ease;
}
.ss-selected-plan{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:20px;
  padding:12px 16px;
  border-radius:var(--ss-radius-sm, 12px);
  background:var(--ss-primary-light, #EAF8F2);
  color:var(--ss-primary-dark, #008C5A);
  font-size:14px;
  font-weight:600;
  animation:ssRegisterFade .45s ease;
}
.ss-selected-plan i{
  color:var(--ss-primary, #00A86B);
  font-size:16px;
}
@media(prefers-reduced-motion:reduce){
  .ss-register-page *,
  .ss-register-page *::before,
  .ss-register-page *::after{
    animation:none !important;
    transition:none !important;
    scroll-behavior:auto !important;
  }
}
.ss-register-input::placeholder{
  opacity:1;
}
.ss-register-submit:disabled{
  opacity:.65;
  cursor:not-allowed;
  transform:none;
  box-shadow:none;
}
@keyframes ssRegisterFade{
  from{opacity:0;transform:translateY(16px);}
  to{opacity:1;transform:none;}
}