.iti { width:100%; }
.iti__tel-input {
  width:100%; border:1px solid #ced4da; border-radius:.25rem;
  padding:.375rem .75rem .375rem 3.5rem; font-size:1rem; line-height:1.5;
  color:#212529; background:#fff; outline:none; transition:border-color .15s,box-shadow .15s;
}
.iti__tel-input:focus { border-color:#86b7fe; box-shadow:0 0 0 .25rem rgba(13,110,253,.25); }
.iti__tel-input.is-invalid { border-color:#dc3545; }
/* OTP boxes */
.otp-wrap { display:flex; gap:.75rem; justify-content:center; margin:1.25rem 0; }
.otp-box  {
  width:56px; height:64px; text-align:center; font-size:1.6rem; font-weight:800;
  border:2px solid #dee2e6; border-radius:10px; outline:none; transition:border-color .15s;
}
.otp-box:focus { border-color:#1b6055; box-shadow:0 0 0 3px rgba(27,96,85,.15); }
.otp-box.filled { border-color:#1b6055; background:#f0faf8; }
/* Resend countdown */
.resend-link { font-size:.83rem; cursor:pointer; color:#1b6055; font-weight:600; text-decoration:underline; }
.resend-link:disabled,
.resend-link[disabled] { color:#aaa; text-decoration:none; cursor:default; }

/* Avatar upload */
.avatar-upload-wrap {
  width:88px; height:88px; border-radius:50%; cursor:pointer;
  border:2.5px dashed #ced4da; background:#f8f9fa;
  display:flex; align-items:center; justify-content:center;
  margin:0 auto; overflow:hidden; transition:border-color .2s;
  position:relative;
}
.avatar-upload-wrap:hover { border-color:#1b6055; }
.avatar-upload-wrap img { width:100%; height:100%; object-fit:cover; border-radius:50%; }
.avatar-placeholder {
  display:flex; flex-direction:column; align-items:center;
  gap:.25rem; color:#aaa; font-size:.7rem; font-weight:600; text-align:center;
  pointer-events:none;
}
.avatar-placeholder i { font-size:1.2rem; }
.avatar-upload-wrap .avatar-overlay {
  position:absolute; inset:0; border-radius:50%;
  background:rgba(27,96,85,.55); color:#fff;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:.2rem; font-size:.68rem; font-weight:700; opacity:0; transition:opacity .2s;
}
.avatar-upload-wrap:hover .avatar-overlay { opacity:1; }

/* Username input prefix */
.username-wrap { position:relative; }
.username-wrap .username-prefix {
  position:absolute; left:.75rem; top:50%; transform:translateY(-50%);
  color:#aaa; font-size:.9rem; pointer-events:none; font-weight:600;
}

@media (min-width: 768px) {
  .register-grid {
    display:grid;
    grid-template-columns:minmax(0, 1fr) minmax(0, 1fr);
    column-gap:1rem;
    align-items:start;
  }
  .register-grid > h2,
  .register-grid > p,
  .register-grid > .alert,
  .register-grid > .register-profile-photo,
  .register-grid > .form-group.mb-3,
  .register-grid > button,
  .register-grid > .mt-3,
  .register-grid > .mt-4 {
    grid-column:1 / -1;
  }
  .register-username,
  .register-password,
  .register-confirm-password {
    grid-column:1;
  }
  .register-full-name,
  .register-email,
  .register-phone {
    grid-column:2;
  }
  .register-username,
  .register-full-name {
    grid-row:5;
  }
  .register-password,
  .register-email {
    grid-row:6;
  }
  .register-confirm-password,
  .register-phone {
    grid-row:7;
  }
}

.register-auth-page {
  min-height:calc(100vh - 28px);
  background:linear-gradient(180deg, #f7fbfa 0%, #eef6f4 100%);
  padding:3rem 1rem;
}
.register-auth-shell {
  min-height:inherit;
  align-items:flex-start;
  justify-content:center;
}
.register-auth-card {
  min-height:auto !important;
  display:flex;
  justify-content:center;
  align-items:flex-start;
  background:transparent !important;
  padding:0 !important;
}
.register-panel {
  width:min(100%, 960px);
  background:#fff;
  border:1px solid #dfe9e6;
  border-top:4px solid #1b6055;
  border-radius:8px;
  box-shadow:0 18px 42px rgba(15, 23, 42, .10);
  padding:2rem;
}
.register-form {
  max-width:none !important;
  width:100%;
  margin:0;
  padding:0 !important;
  background:transparent !important;
}
.register-title {
  margin:0;
  font-size:1.8rem;
  font-weight:800;
  color:#10201d;
}
.auth-title-with-logo {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:.65rem;
}
.auth-title-with-logo img {
  width:42px;
  height:42px;
  object-fit:contain;
  flex-shrink:0;
}
.register-subtitle {
  margin:.35rem 0 1.35rem;
  color:#60716d;
  font-size:.95rem;
}
.register-profile-photo {
  margin-bottom:1.45rem !important;
}
.register-profile-photo .text-muted {
  color:#60716d !important;
  font-weight:600;
}
.register-field {
  margin-bottom:1rem;
}
.register-field .col-form-label {
  padding:0 0 .4rem;
  font-size:.86rem;
  font-weight:700;
  color:#12231f;
}
.register-field .form-control,
.register-field .iti__tel-input {
  min-height:44px;
  border:1px solid #d9e3e0;
  border-radius:7px;
  color:#12231f;
  box-shadow:none;
}
.register-field .form-control:focus,
.register-field .iti__tel-input:focus {
  border-color:#1b6055;
  box-shadow:0 0 0 3px rgba(27, 96, 85, .12);
}
.register-field .form-control::placeholder,
.register-field .iti__tel-input::placeholder {
  color:#a4afad;
}
.register-field small.text-muted {
  display:block;
  margin-top:.4rem;
  color:#7b8b87 !important;
  font-size:.74rem;
}
.register-field .show-hide {
  position:absolute;
  top:50%;
  right:.5rem;
  transform:translateY(-50%);
  color:#1b6055;
  width:32px;
  height:32px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:.95rem;
  font-weight:700;
  cursor:pointer;
  z-index:2;
  border-radius:50%;
}
.register-field .show-hide:hover {
  background:#eaf7f4;
}
.register-field .show-hide i {
  color:#1b6055;
}
.register-password .form-control,
.register-confirm-password .form-control {
  padding-right:3.2rem;
}
.register-terms {
  margin:.45rem 0 1rem !important;
  padding:.75rem .9rem;
  border:1px solid #e1e9e7;
  border-radius:7px;
  background:#f8fbfa;
}
.register-terms .checkbox {
  display:flex;
  align-items:center;
  gap:.5rem;
}
.register-terms input {
  width:16px;
  height:16px;
  accent-color:#1b6055;
}
.register-terms label {
  margin:0;
  font-size:.86rem;
}
.register-terms .link {
  color:#1b6055;
  font-weight:700;
  text-decoration:none;
}
.register-submit {
  min-height:44px;
  border:0;
  border-radius:7px;
  background:#1b6055 !important;
  font-weight:800;
  box-shadow:0 10px 22px rgba(27, 96, 85, .22);
}
.register-submit:hover {
  background:#144d44 !important;
}

@media (min-width: 768px) {
  .register-grid {
    grid-template-areas:
      "title title"
      "subtitle subtitle"
      "error error"
      "photo photo"
      "username fullname"
      "password email"
      "confirm phone"
      "terms terms"
      "submit submit"
      "social social"
      "google google"
      "signin signin";
    column-gap:1.25rem;
  }
  .register-title { grid-area:title; }
  .register-subtitle { grid-area:subtitle; }
  .register-grid > .alert { grid-area:error; }
  .register-profile-photo { grid-area:photo; }
  .register-username { grid-area:username; }
  .register-password { grid-area:password; }
  .register-confirm-password { grid-area:confirm; }
  .register-full-name { grid-area:fullname; }
  .register-email { grid-area:email; }
  .register-phone { grid-area:phone; }
  .register-terms { grid-area:terms; }
  .register-submit { grid-area:submit; }
  .register-grid > .mt-3 { grid-column:1 / -1; }
  .register-grid > .mt-4 { grid-column:1 / -1; }
  .register-social-divider { grid-area:social; }
  .register-google-action { grid-area:google; }
  .register-signin { grid-area:signin; }
}

@media (max-width: 767.98px) {
  .register-auth-page {
    padding:1rem;
  }
  .register-panel {
    padding:1.4rem;
  }
  .register-title {
    font-size:1.55rem;
  }
}

.login-auth-page {
  align-items:center;
}
.login-panel {
  width:min(100%, 460px);
  padding:2rem;
}
.login-logo-wrap {
  width:min(100%, 460px);
  margin:0 auto .9rem;
  text-align:center;
}
.login-logo-wrap .logo {
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
.login-logo-wrap img {
  max-height:54px;
}
.login-form {
  max-width:none !important;
  width:100%;
  margin:0;
  padding:0 !important;
  background:transparent !important;
}
.login-form .alert {
  border-radius:7px;
  font-size:.85rem;
}
.login-password-field .form-control {
  padding-right:3.2rem;
}
.login-options {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  flex-wrap:wrap;
  margin:.2rem 0 1rem !important;
}
.login-options .checkbox {
  display:flex;
  align-items:center;
  gap:.45rem;
}
.login-options input {
  width:16px;
  height:16px;
  accent-color:#1b6055;
}
.login-options label {
  margin:0;
  font-size:.86rem;
}
.login-options .link {
  color:#1b6055;
  font-size:.86rem;
  font-weight:700;
  text-decoration:none;
  white-space:nowrap;
}
.login-options .text-end {
  width:100%;
  margin-top:.4rem !important;
}
.register-social-divider {
  color:#6c7d79;
}
.register-google-action .btn {
  border-radius:7px;
  border-color:#d9e3e0;
  min-height:42px;
}
.register-signin {
  color:#60716d;
  font-size:.9rem;
}
.register-signin a {
  color:#1b6055;
  font-weight:800;
  text-decoration:none;
}