/* =========================================================
   Kanz Login Theme V2
   Sky Blue Premium Identity
   Safe override layer
========================================================= */

:root{
  --login-primary:#2563eb;
  --login-primary-dark:#123a70;
  --login-indigo:#4f46e5;
  --login-cyan:#06b6d4;
  --login-sky:#38bdf8;
  --login-green:#10b981;
  --login-purple:#7c3aed;
  --login-orange:#f59e0b;
  --login-red:#ef476f;

  --login-bg:#edf9ff;
  --login-surface:#ffffff;
  --login-surface-soft:rgba(255,255,255,.88);

  --login-text:#102a4c;
  --login-text-soft:#425f7a;
  --login-muted:#667f97;

  --login-border:rgba(37,99,235,.13);
  --login-border-strong:rgba(37,99,235,.28);

  --login-shadow:
    0 24px 70px rgba(30,81,125,.14);

  --login-shadow-hover:
    0 30px 82px rgba(30,81,125,.20);
}

/* =========================
   Global
========================= */

html,
body,
button,
input{
  font-family:"Cairo", Tahoma, Arial, sans-serif !important;
}

html{
  background:#edf9ff;
}

body{
  color:var(--login-text);
  background:
    radial-gradient(circle at 8% 10%, rgba(56,189,248,.20), transparent 25%),
    radial-gradient(circle at 92% 14%, rgba(37,99,235,.14), transparent 24%),
    radial-gradient(circle at 14% 88%, rgba(6,182,212,.11), transparent 25%),
    radial-gradient(circle at 88% 84%, rgba(79,70,229,.09), transparent 23%),
    linear-gradient(135deg,#f9fdff 0%,#e9f7ff 50%,#f4faff 100%);
}

body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background-image:
    radial-gradient(circle, rgba(37,99,235,.10) 0 1px, transparent 1.5px),
    radial-gradient(circle, rgba(6,182,212,.09) 0 1px, transparent 1.5px);
  background-size:58px 58px, 86px 86px;
  opacity:.40;
}

.register-page,
.compact-auth-page{
  position:relative;
  z-index:1;
  padding:28px 18px;
}

/* =========================
   Main Layout
========================= */

.register-shell,
.compact-shell{
  max-width:1220px;
  grid-template-columns:minmax(0,1.12fr) minmax(380px,.88fr);
  gap:24px;
}

.register-brand-panel,
.register-card{
  color:var(--login-text);
  background:rgba(255,255,255,.93);
  border:1px solid var(--login-border);
  box-shadow:var(--login-shadow);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
}

.register-brand-panel{
  background:
    radial-gradient(circle at 8% 12%, rgba(56,189,248,.14), transparent 27%),
    radial-gradient(circle at 92% 86%, rgba(37,99,235,.11), transparent 28%),
    linear-gradient(145deg,rgba(255,255,255,.97),rgba(237,248,255,.96));
}

.register-brand-panel::before{
  width:280px;
  height:280px;
  inset:auto -100px -100px auto;
  background:radial-gradient(circle,rgba(37,99,235,.15),transparent 70%);
}

/* =========================
   Brand
========================= */

.brand-logo-wrap{
  width:100%;
  align-items:center;
  gap:16px;
}

.brand-logo{
  width:86px;
  height:86px;
  flex:0 0 86px;
  padding:4px;
  object-fit:cover;
  object-position:center;
  border-radius:22px;
  border:2px solid rgba(255,255,255,.96);
  background:#fff;
  box-shadow:
    0 14px 34px rgba(37,99,235,.17),
    0 0 0 1px rgba(37,99,235,.10);
}

.brand-kicker{
  color:var(--login-muted);
  font-weight:600;
}

.brand-text h1{
  color:var(--login-primary-dark);
  font-size:2.05rem;
  font-weight:900;
}

/* =========================
   Lifetime Offer
========================= */

.brand-copy{
  margin-top:24px;
}

.login-lifetime-offer{
  position:relative;
  overflow:hidden;
  padding:26px 24px;
  border:1px solid rgba(37,99,235,.14);
  border-radius:22px;
  background:
    radial-gradient(circle at top left, rgba(56,189,248,.16), transparent 30%),
    linear-gradient(135deg,#fff,#edf8ff);
  box-shadow:0 16px 42px rgba(31,78,121,.10);
}

.login-lifetime-offer::before{
  content:"";
  position:absolute;
  top:-54px;
  left:-54px;
  width:150px;
  height:150px;
  border-radius:50%;
  background:rgba(79,70,229,.08);
}

.login-offer-label{
  position:relative;
  display:inline-flex;
  margin-bottom:13px;
  padding:7px 13px;
  border-radius:999px;
  color:#fff;
  background:linear-gradient(100deg,var(--login-primary),var(--login-indigo));
  font-size:.85rem;
  font-weight:800;
  box-shadow:0 9px 22px rgba(37,99,235,.19);
}

.login-lifetime-offer p{
  position:relative;
  margin:0;
  color:#274864;
  font-size:1.05rem;
  font-weight:700;
  line-height:2;
}

.login-lifetime-offer strong{
  color:var(--login-purple);
  font-size:1.13em;
  font-weight:900;
}

.login-offer-action{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin-top:18px;
  min-height:48px;
  padding:11px 22px;
  border-radius:13px;
  color:#fff;
  background:
    linear-gradient(
      100deg,
      var(--login-primary),
      var(--login-indigo) 55%,
      var(--login-cyan)
    );
  font-weight:800;
  box-shadow:0 13px 30px rgba(37,99,235,.22);
}

.login-offer-action:hover{
  transform:translateY(-2px);
  box-shadow:0 17px 38px rgba(37,99,235,.28);
}

/* =========================
   Benefits
========================= */

.brand-points,
.compact-points,
.login-benefits-list{
  margin-top:20px;
  gap:12px;
}

.brand-points li,
.login-benefits-list li{
  display:grid;
  grid-template-columns:48px minmax(0,1fr);
  align-items:start;
  gap:14px;
  padding:16px;
  padding-right:16px;
  color:var(--login-text);
  border:1px solid var(--benefit-border);
  border-right:5px solid var(--benefit-color);
  border-radius:17px;
  background:rgba(255,255,255,.92);
  box-shadow:0 11px 30px rgba(31,78,121,.08);
}

.brand-points li::before{
  display:none;
}

.login-benefit-certificate{
  --benefit-color:#7c3aed;
  --benefit-border:rgba(124,58,237,.16);
}

.login-benefit-support{
  --benefit-color:#10b981;
  --benefit-border:rgba(16,185,129,.17);
}

.login-benefit-marketing{
  --benefit-color:#f59e0b;
  --benefit-border:rgba(245,158,11,.18);
}

.login-benefit-icon{
  width:46px;
  height:46px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:14px;
  color:#fff;
  font-size:23px;
  background:color-mix(in srgb,var(--benefit-color) 14%,white);
  box-shadow:0 8px 22px color-mix(in srgb,var(--benefit-color) 20%,transparent);
}

.login-benefits-list strong{
  display:block;
  margin-bottom:4px;
  color:var(--benefit-color);
  font-size:1rem;
  font-weight:900;
}

.login-benefits-list p{
  margin:0;
  color:var(--login-text-soft);
  font-size:.90rem;
  font-weight:500;
  line-height:1.8;
}

/* =========================
   Login Card
========================= */

.register-card,
.compact-card{
  padding:30px 28px;
  background:
    radial-gradient(circle at 88% 8%, rgba(56,189,248,.10), transparent 25%),
    rgba(255,255,255,.96);
}

.eyebrow{
  color:var(--login-primary);
  font-weight:800;
}

.card-head h3{
  color:var(--login-primary-dark);
  font-size:2rem;
  font-weight:900;
}

.card-head p{
  color:var(--login-text-soft);
  font-weight:500;
}

/* =========================
   Form
========================= */

.form-group label{
  color:var(--login-text);
  font-weight:800;
}

.form-group input{
  color:var(--login-text);
  border:1px solid rgba(37,99,235,.14);
  background:#f6fbff;
  box-shadow:inset 0 1px 2px rgba(31,78,121,.03);
}

.form-group input::placeholder{
  color:#8195a9;
}

.form-group input:focus{
  color:var(--login-text);
  border-color:rgba(37,99,235,.48);
  background:#fff;
  box-shadow:0 0 0 4px rgba(37,99,235,.09);
}

.toggle-password{
  color:var(--login-primary);
  background:rgba(37,99,235,.09);
}

.toggle-password:hover{
  background:rgba(37,99,235,.15);
}

.remember-box{
  color:var(--login-text-soft);
}

.remember-box input{
  accent-color:var(--login-primary);
}

.text-link{
  color:var(--login-primary);
}

.submit-btn{
  height:54px;
  color:#fff;
  border-radius:14px;
  background:
    linear-gradient(
      100deg,
      var(--login-primary),
      var(--login-indigo) 58%,
      var(--login-cyan)
    );
  box-shadow:0 14px 32px rgba(37,99,235,.22);
}

.submit-btn:hover{
  filter:none;
  box-shadow:0 19px 40px rgba(37,99,235,.28);
}

.btn-loader{
  border-color:rgba(255,255,255,.35);
  border-top-color:#fff;
}

/* =========================
   Register and Footer
========================= */

.card-footer,
.compact-footer{
  margin-top:20px;
  padding-top:18px;
  border-top:1px solid var(--login-border);
}

.register-invitation{
  margin:0 0 10px !important;
  color:var(--login-text-soft) !important;
  font-weight:600;
}

.create-account-btn{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  min-height:48px;
  margin-bottom:14px;
  color:var(--login-primary) !important;
  border:1px solid rgba(37,99,235,.22);
  border-radius:13px;
  background:rgba(37,99,235,.06);
  font-weight:900 !important;
}

.create-account-btn:hover{
  color:#fff !important;
  text-decoration:none !important;
  border-color:transparent;
  background:linear-gradient(100deg,var(--login-primary),var(--login-indigo));
}

.back-home{
  color:var(--login-primary);
  font-weight:800;
}

/* =========================
   Responsive
========================= */

@media(max-width:991px){

  .register-shell,
  .compact-shell{
    max-width:760px;
    grid-template-columns:1fr;
  }

  .register-brand-panel{
    order:1;
  }

  .register-card-wrap{
    order:2;
  }

}

@media(max-width:575px){

  .register-page,
  .compact-auth-page{
    padding:12px 10px 24px;
  }

  .register-brand-panel,
  .register-card{
    border-radius:21px;
  }

  .brand-logo{
    width:66px;
    height:66px;
    flex-basis:66px;
    border-radius:18px;
  }

  .brand-text h1{
    font-size:1.55rem;
  }

  .login-lifetime-offer{
    padding:20px 17px;
  }

  .login-lifetime-offer p{
    font-size:.94rem;
    line-height:1.9;
  }

  .login-offer-action{
    width:100%;
    text-align:center;
  }

  .brand-points li,
  .login-benefits-list li{
    grid-template-columns:42px minmax(0,1fr);
    gap:11px;
    padding:14px;
  }

  .login-benefit-icon{
    width:40px;
    height:40px;
    font-size:20px;
  }

  .register-card,
  .compact-card{
    padding:23px 17px;
  }

  .card-head h3{
    font-size:1.65rem;
  }

}

@media(max-height:760px) and (min-width:992px){

  .register-page,
  .compact-auth-page{
    align-items:flex-start;
    padding:14px;
  }

  .register-brand-panel,
  .register-card{
    padding:20px;
  }

  .brand-logo{
    width:64px;
    height:64px;
    flex-basis:64px;
  }

  .brand-copy{
    margin-top:14px;
  }

  .login-lifetime-offer{
    padding:18px;
  }

  .login-lifetime-offer p{
    font-size:.90rem;
    line-height:1.7;
  }

  .login-offer-action{
    margin-top:12px;
    min-height:42px;
  }

  .brand-points,
  .compact-points{
    margin-top:12px;
    gap:8px;
  }

  .brand-points li,
  .login-benefits-list li{
    padding:10px 12px;
    grid-template-columns:36px minmax(0,1fr);
  }

  .login-benefit-icon{
    width:34px;
    height:34px;
    font-size:17px;
  }

  .login-benefits-list strong{
    font-size:.88rem;
  }

  .login-benefits-list p{
    font-size:.78rem;
    line-height:1.55;
  }

}

/* Stronger benefit descriptions */

.login-benefits-list p{
  color:#183b5b !important;
  font-size:.96rem !important;
  font-weight:700 !important;
  line-height:1.9 !important;
}

.login-benefits-list strong{
  font-size:1.05rem !important;
  font-weight:900 !important;
  line-height:1.55 !important;
}

@media(max-width:575px){

  .login-benefits-list p{
    font-size:.90rem !important;
    line-height:1.8 !important;
  }

  .login-benefits-list strong{
    font-size:.98rem !important;
  }

}

@media(max-height:760px) and (min-width:992px){

  .login-benefits-list p{
    font-size:.86rem !important;
    font-weight:700 !important;
    line-height:1.65 !important;
  }

  .login-benefits-list strong{
    font-size:.94rem !important;
  }

}


/* =========================================================
   Register Specific V2
========================================================= */

.register-shell,
.compact-shell{
  grid-template-columns:minmax(0,1.12fr) minmax(440px,.95fr);
}

.register-card,
.compact-card{
  padding:28px 26px;
}

.form-grid,
.compact-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
}

.terms-box,
.compact-terms-box{
  display:flex;
  align-items:flex-start;
  gap:10px;
  color:var(--login-text-soft);
  font-size:.94rem;
  font-weight:600;
  line-height:1.75;
  cursor:pointer;
}

.terms-box input{
  margin-top:5px;
  accent-color:var(--login-primary);
  flex:0 0 auto;
}

.terms-box a{
  color:var(--login-primary);
  font-weight:800;
}

.terms-box a:hover{
  text-decoration:underline;
}

.register-card .submit-btn{
  margin-top:2px;
}

.register-card .card-footer{
  margin-top:18px;
}

.register-card .register-invitation{
  color:var(--login-text-soft) !important;
  font-weight:600;
}

.register-card .create-account-btn{
  color:var(--login-primary) !important;
}

@media(max-width:991px){

  .register-shell,
  .compact-shell{
    grid-template-columns:1fr;
    max-width:760px;
  }

  .register-brand-panel{
    order:1;
  }

  .register-card-wrap{
    order:2;
  }

}

@media(max-width:700px){

  .form-grid,
  .compact-grid{
    grid-template-columns:1fr;
    gap:12px;
  }

}

@media(max-width:575px){

  .register-page,
  .compact-auth-page{
    padding:12px 10px 24px;
  }

  .register-card,
  .compact-card{
    padding:23px 17px;
  }

  .terms-box,
  .compact-terms-box{
    font-size:.88rem;
  }

}

@media(max-height:760px) and (min-width:992px){

  .register-page,
  .compact-auth-page{
    align-items:flex-start;
    padding:14px;
  }

  .register-card,
  .compact-card{
    padding:18px;
  }

  .form-grid,
  .compact-grid{
    gap:10px;
  }

  .terms-box,
  .compact-terms-box{
    font-size:.82rem;
    line-height:1.5;
  }

}

/* Strong benefit typography */

.login-benefits-list p{
  color:#183b5b !important;
  font-size:.96rem !important;
  font-weight:700 !important;
  line-height:1.9 !important;
}

.login-benefits-list strong{
  font-size:1.05rem !important;
  font-weight:900 !important;
  line-height:1.55 !important;
}

@media(max-width:575px){

  .login-benefits-list p{
    font-size:.90rem !important;
    line-height:1.8 !important;
  }

  .login-benefits-list strong{
    font-size:.98rem !important;
  }

}