/*
Theme Name: AMI
Theme URI: https://a-m-institution.eu/
Author: Arabic Management Institution OÜ
Author URI: https://a-m-institution.eu/
Description: Custom WordPress theme with native Gutenberg blocks and Tailwind CSS for Arabic Management Institution (AMI).
Version: 1.0.0
Text Domain: ami
*/

/* ========================================================
   FORMS & REGISTRATION (Exact AMI Design)
   ======================================================== */
.form {
  border-radius: 22px;
  border-width: 1px;
  border-color: var(--line, #e4e0d9);
  background-color: var(--paper, #ffffff);
  padding: 34px;
  box-shadow: var(--shadow, 0 20px 50px rgba(10, 18, 32, 0.12));
}
@media (max-width: 640px) {
  .form {
    padding: 22px 18px;
  }
}
.form h3 {
  margin-bottom: 0.375rem;
  font-size: 1.5rem;
  line-height: 2rem;
  color: var(--text, #141a24);
  font-weight: 800;
}
.form .hint {
  margin-bottom: 22px;
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: var(--mut, #5b6472);
}
.fgrid {
  display: grid;
  gap: 0.875rem;
}
@media (min-width: 640px) {
  .fgrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .fgrid .full {
    grid-column: 1 / -1;
  }
}
.consent {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  font-size: 13px;
  color: var(--mut, #5b6472);
}
.consent input {
  margin-top: 3px;
  width: auto;
}
.member {
  position: relative;
  overflow: hidden;
  border-radius: 22px;
  padding: 30px;
  color: #ffffff;
  background: linear-gradient(135deg, var(--ink, #0a1220), #2a1408);
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.35);
}
.member::before {
  content: "";
  pointer-events: none;
  position: absolute;
  left: -20%;
  right: -20%;
  top: -40%;
  bottom: -40%;
  background: radial-gradient(
    40% 40% at 80% 20%,
    rgba(239, 135, 22, 0.45),
    transparent 60%
  );
}
.member .mk {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.member .mk img {
  height: 48px;
  max-height: 52px;
  width: auto;
}
.member .mk span {
  font-family: var(--lat, 'Sora', sans-serif);
  font-size: 11px;
  letter-spacing: .16em;
  color: #d9a98a;
  font-weight: 700;
}
.member .nm {
  position: relative;
  margin-top: 1.75rem;
  margin-bottom: 0.25rem;
  font-size: 22px;
  font-weight: 800;
  color: #ffffff;
}
.member .rl {
  position: relative;
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: #c9d2df;
}
.member .sn {
  position: relative;
  margin-top: 1.5rem;
}
.member .sn small {
  display: block;
  font-family: var(--lat, 'Sora', sans-serif);
  font-size: 11px;
  letter-spacing: .14em;
  color: #d9a98a;
}
.member .sn b {
  margin-top: 0.25rem;
  display: block;
  font-family: var(--lat, 'Sora', sans-serif);
  font-size: 1.5rem;
  line-height: 2rem;
  letter-spacing: .06em;
  color: #ffe3b8;
  direction: ltr;
  text-align: left;
}
html[dir="rtl"] .member .sn b {
  text-align: right;
}
.member .foot {
  position: relative;
  margin-top: 22px;
  display: flex;
  justify-content: space-between;
  font-family: var(--lat, 'Sora', sans-serif);
  font-size: 0.75rem;
  line-height: 1rem;
  color: #aeb9c8;
  direction: ltr;
}
.notice {
  margin-top: 0.875rem;
  border-radius: 0.75rem;
  border-width: 1px;
  border-color: #f3dfae;
  background-color: #fff8e8;
  padding: 0.75rem 0.875rem;
  font-size: 13px;
  color: #6b5a2a;
  line-height: 1.5;
}

/* Authentication Tabs */
.auth-tab-btn {
  transition: all 0.2s ease;
  font-size: 14.5px;
  cursor: pointer;
}
.auth-tab-btn.active {
  background-color: #ffffff !important;
  color: var(--text, #141a24) !important;
  box-shadow: 0 4px 14px rgba(10, 18, 32, 0.08) !important;
  font-weight: 800 !important;
}
.auth-tab-btn:not(.active) {
  color: var(--mut, #5b6472) !important;
  background-color: transparent !important;
}
.auth-tab-btn:not(.active):hover {
  color: var(--text, #141a24) !important;
}

/* Password Strength & Generator */
.pw-strength-meter {
  height: 6px;
  border-radius: 9999px;
  background-color: #e2e8f0;
  overflow: hidden;
  position: relative;
}
.pw-strength-bar {
  height: 100%;
  width: 0%;
  border-radius: 9999px;
  transition: width 0.3s ease, background-color 0.3s ease;
}
.pw-toggle-btn {
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0 10px;
  color: #64748b;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pw-toggle-btn:hover {
  color: var(--rust, #ba3e00);
}