.afma-glass{
  max-width: 560px;
  margin: 18px auto;
  padding: 18px 18px 16px;
  border-radius: 16px;
  border: var(--afma-glass-border, 1px solid rgba(255,255,255,.16));
  box-shadow: 0 10px 30px rgba(0,0,0,.18);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.afma-theme-auto{ background: rgba(20,20,24,.62); color: rgba(255,255,255,.92); }
.afma-theme-dark{ background: rgba(20,20,24,.68); color: rgba(255,255,255,.92); }

/* Fix <select> vertical text clipping in some themes/browsers */
select.afma-input{
  height: 44px;
  line-height: 44px;
  padding-top: 0;
  padding-bottom: 0;
  /* keep side padding for readability */
  padding-left: 12px;
  padding-right: 12px;
}
.afma-theme-light{ background: rgba(255,255,255,.62); color: rgba(10,10,10,.88); border-color: rgba(0,0,0,.08); }

.afma-title{ font-size: 22px; font-weight: 700; line-height: 1.2; margin-bottom: 6px; }
.afma-sub{ font-size: 13px; opacity: .82; margin-bottom: 14px; }

.afma-form{ display:flex; flex-direction: column; gap: 10px; }
.afma-label{ font-size: 12px; font-weight: 600; opacity: .88; color: var(--afma-label-color, inherit); }
.afma-input{
    box-sizing: border-box;
width: 100%;
  padding: 10px 12px;
  border-radius: 12px;
  border: var(--afma-glass-border, 1px solid rgba(255,255,255,.16));
  background: rgba(0,0,0,.18);
  color: inherit;
  outline: none;
}
.afma-theme-light .afma-input{
  background: rgba(255,255,255,.72);
  border-color: rgba(0,0,0,.10);
}
.afma-input:focus{
  border-color: rgba(255,255,255,.28);
  box-shadow: 0 0 0 3px rgba(255,255,255,.08);
}
.afma-theme-light .afma-input:focus{
  border-color: rgba(0,0,0,.18);
  box-shadow: 0 0 0 3px rgba(0,0,0,.06);
}

.afma-grid{ display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 560px){
  .afma-grid{ grid-template-columns: 1fr; }
}

.afma-btn{
  padding: 11px 14px;
  border-radius: 12px;
  border: 0;
  cursor: pointer;
  font-weight: 700;
  background: rgba(255,255,255,.92);
  color: rgba(10,10,10,.92);
}
.afma-theme-light .afma-btn{
  background: rgba(10,10,10,.90);
  color: rgba(255,255,255,.96);
}
.afma-btn:hover{ transform: translateY(-1px); }
.afma-btn:active{ transform: translateY(0px); }

.afma-check{ display:flex; align-items:center; gap: 8px; font-size: 12px; opacity: .9; color: var(--afma-label-color, inherit) !important; }
.afma-help{ font-size: 12px; opacity: .78; margin-top: -4px; color: var(--afma-label-color, inherit); }

/* Remember me + Forgot password row */
.afma-remember-row{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.afma-forgot-link{
  font-size: 12px;
  font-weight: 600;
  color: var(--afma-auth-link-color, inherit);
  opacity: .88;
  text-decoration: none;
  white-space: nowrap;
  margin-left: auto;
}
.afma-forgot-link:hover,
.afma-forgot-link:focus{
  opacity: 1;
  text-decoration: underline;
}
.afma-theme-light .afma-forgot-link{
  color: var(--afma-auth-link-color, rgba(10,10,10,.80));
}

.afma-alert{
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, .16);
  background: rgba(255, 80, 80, .18);
  color: inherit;
  font-size: 13px;
  margin: 8px 0 10px;
}

.afma-password-row{ display:flex; gap: 8px; align-items: center; }
.afma-input-password{ flex: 1; }
.afma-ghost{
  padding: 10px 12px;
  border-radius: 12px;
  border: var(--afma-glass-border, 1px solid rgba(255,255,255,.16));
  background: rgba(0,0,0,.10);
  color: inherit;
  cursor: pointer;
  font-weight: 600;
}
.afma-theme-light .afma-ghost{
  border-color: rgba(0,0,0,.10);
  background: rgba(255,255,255,.58);
}

select.afma-input{
  box-sizing: border-box;
  width: 100%;
  padding: 12px 12px;
  line-height: 1.4;
  min-height: 48px;
  -webkit-appearance: menulist;
  appearance: menulist;
}


.afma-form .afma-btn{ margin-top: 6px; }

.afma-role-toggle{
  display:flex;
  gap: 10px;
}
.afma-role-btn{
  flex: 1;
  padding: 11px 12px;
  border-radius: 12px;
  border: var(--afma-glass-border, 1px solid rgba(255,255,255,.16));
  background: rgba(0,0,0,.10);
  color: inherit;
  cursor: pointer;
  font-weight: 700;
}
.afma-theme-light .afma-role-btn{
  border-color: rgba(0,0,0,.12);
  background: rgba(255,255,255,.58);
}
.afma-role-btn.is-active[data-role="public"]{
  background: var(--afma-public-color, rgba(255,255,255,.92));
  border-color: transparent;
  color: rgba(255,255,255,.96);
}
.afma-role-btn.is-active[data-role="student"]{
  background: var(--afma-student-color, rgba(255,255,255,.92));
  border-color: transparent;
  color: rgba(255,255,255,.96);
}
.afma-theme-light .afma-role-btn.is-active[data-role="public"],
.afma-theme-light .afma-role-btn.is-active[data-role="student"]{
  color: rgba(255,255,255,.96);
}

.afma-check *{ color: var(--afma-label-color, inherit) !important; }

.afma-role-btn.is-active[data-role="trainer"]{
  background: var(--afma-trainer-color, rgba(255,255,255,.92));
  border-color: transparent;
  color: rgba(255,255,255,.96);
}

.afma-authlink{
  margin-top: 10px;
  font-size: 13px;
  color: var(--afma-auth-link-color, inherit);
  text-align: center;
}
.afma-authlink a{
  color: var(--afma-auth-link-color, inherit);
  font-weight: 700;
  text-decoration: underline;
}


/* Logout link styling */
.afma-logout-box{
  display: flex;
  flex-wrap: nowrap;
  align-items: baseline;
  gap: 8px;
  justify-content: var(--afma-logout-align, flex-start);
  text-align: var(--afma-logout-align, left);
}
.afma-logout-welcome{
  font-weight: 800;
  white-space: nowrap;
  color: var(--afma-welcome-color, var(--afma-label-color, #ffffff));
  font-size: var(--afma-welcome-size, 18px);
}
.afma-logout-form{
  display: contents;
  margin: 0;
}
.afma-logout-link{
  /* Force text-only appearance even if the active theme styles <button> elements */
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  min-height: 0 !important;
  height: auto !important;
  line-height: 1.2;
  display: inline;
  color: var(--afma-logout-color, var(--afma-auth-link-color, inherit));
  font-size: var(--afma-logout-size, 16px);
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
}
.afma-logout-link:hover,
.afma-logout-link:focus{
  text-decoration: underline;
}

.afma-logout-link:active{ background: transparent !important; background-color: transparent !important; }