/* ========== AEOS Hub Core Styles ========== */
/* --- Tabbar --- */
.ae-tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 35;
  display: grid; grid-template-columns: repeat(4, 1fr);
  background: rgba(17,24,39,.85); backdrop-filter: blur(10px);
  border-top: 1px solid var(--border);
  height: var(--tabbar-h, 72px);
  padding-bottom: env(safe-area-inset-bottom);
}
.ae-tab {
  display: grid; place-items: center; gap: 4px; height: 100%;
  color: var(--muted); text-decoration: none; font-weight: 600;
  background: transparent; border: 0; appearance: none; cursor: pointer;
}
.ae-tab .ae-icon { width: 18px; height: 18px; fill: currentColor; opacity: .9 }
.ae-tab.is-active { color: #fff; border-top: 2px solid var(--primary) }
.ae-tab:focus-visible { outline: 2px dashed #60a5fa; outline-offset: 3px }

/* --- Dropdown (base) --- */
/* NOTE: base does NOT position the dropdown; variants do */
.ae-dropdown {
  min-width: 220px;
  max-width: 280px;
  background: rgba(17,24,39,.95);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 16px;
  backdrop-filter: blur(12px);
  box-shadow: 0 12px 28px rgba(0,0,0,.42);
  padding: 8px 0;
  animation: fadeIn .22s ease;
  z-index: 1000;
}

/* Positioning variants */
/* Notification dropdown: perfectly under bell icon */
.ae-dropdown--notif {
  position: fixed;
  top: 58px;                 /* adjust based on your topnav height */
  right: 18px;               /* visually aligns with bell icon */
  transform-origin: top right;
  max-width: 320px;
  width: 90vw;               /* responsive width, capped by max */
  background: rgba(17,24,39,.95);
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.08);
  backdrop-filter: blur(12px);
  box-shadow: 0 8px 24px rgba(0,0,0,.45);
  animation: fadeIn .22s ease;
  z-index: 1000;
}

.ae-dropdown--notif::before {
  content: "";
  position: absolute;
  top: -6px;
  right: 20px;
  width: 12px;
  height: 12px;
  transform: rotate(45deg);
  background: inherit;
  border-left: 1px solid rgba(255,255,255,.08);
  border-top: 1px solid rgba(255,255,255,.08);
  filter: blur(.25px);
}

.ae-dropdown--profile {            /* above the tabbar (bottom right) */
  position: fixed;
  right: 12px;
  bottom: calc(var(--tabbar-h, 72px) + 10px);
}
.ae-dropdown--profile::after {
  content: "";
  position: absolute; right: 24px; bottom: -8px;
  width: 12px; height: 12px; transform: rotate(45deg);
  background: inherit;
  border-right: 1px solid rgba(255,255,255,.08);
  border-bottom: 1px solid rgba(255,255,255,.08);
  filter: blur(.25px);
}

/* Dropdown contents */
.ae-dropdown__header {
  font-weight: 600; padding: 8px 14px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.ae-dropdown__list { list-style: none; margin: 0; padding: 4px 14px; max-height: 320px; overflow-y: auto; }
.ae-dropdown__list li { padding: 0; }
.ae-dropdown__list a,
.ae-link-btn {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px;
  color: #e2e8f0; text-decoration: none; background: none; border: 0; width: 100%; text-align: left;
}
.ae-dropdown__list a:hover, .ae-link-btn:hover { background: rgba(255,255,255,.06); color: #fff; }
.ae-dd-icon { width: 16px; height: 16px; fill: currentColor; opacity: .9 }

/* Animations */
@keyframes fadeIn { from { opacity: 0; transform: translateY(-8px) } to { opacity: 1; transform: none } }


/* === Profile Page Enhancements === */
.ae-section__card {
  background: rgba(255,255,255,0.04);
  border-radius: 12px;
  padding: 20px 22px;
  margin-bottom: 24px;
  box-shadow: 0 0 10px rgba(0,0,0,0.3);
}
.ae-section__card h3 {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.ae-section__card h3 svg {
  width: 18px; height: 18px;
  opacity: .7;
}
.ae-form-group {
  display: flex;
  flex-direction: column;
  margin-bottom: 16px;
}
.ae-form-group label {
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 6px;
  opacity: .8;
}
.ae-form-group input,
.ae-form-group textarea {
  background: rgba(255,255,255,0.08);
  border: none;
  border-radius: 8px;
  padding: 10px 12px;
  color: #fff;
  font-size: 14px;
  outline: none;
}
.ae-form-group input:focus,
.ae-form-group textarea:focus {
  background: rgba(255,255,255,0.12);
  box-shadow: 0 0 0 1px #4185ff;
}
.ae-btn-wrap {
  text-align: right;
  margin-top: 8px;
}
.ae-btn--primary {
  background: #4185ff;
  border: none;
  color: #fff;
  font-weight: 600;
  padding: 10px 20px;
  border-radius: 8px;
  cursor: pointer;
  transition: background .25s;
}
.ae-btn--primary:hover {
  background: #5a96ff;
}

/* Profile two-column grid on wider screens */
.ae-form-grid { display: grid; gap: 14px; }
@media (min-width: 720px) {
  .ae-form-grid { grid-template-columns: 1fr 1fr; }
  .ae-form-span-2 { grid-column: span 2; }
}

.fade-in { opacity:1; transition:opacity .6s ease; }
.ae-msg-placeholder { opacity:0; }


/* Courses grid */
.ae-course-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr;
}
@media (min-width: 640px){ .ae-course-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px){ .ae-course-grid { grid-template-columns: 1fr 1fr 1fr; } }

.ae-course-card {
  background: rgba(255,255,255,0.04);
  border-radius: 12px;
  padding: 16px;
  display: flex; flex-direction: column; justify-content: space-between;
  min-height: 160px;
  box-shadow: 0 0 10px rgba(0,0,0,.25);
}
.ae-course-card__body .ae-h3 { margin: 0 0 6px 0; }
.ae-course-card__footer { margin-top: 14px; display:flex; align-items:center; justify-content:space-between; gap:10px; }
.ae-price { font-weight: 700; opacity:.95; }

/* Modal */
.ae-modal { position: fixed; inset: 0; z-index: 5000; } /* higher than backgrounds/nav */
.ae-modal__backdrop { position:absolute; inset:0; background: rgba(0,0,0,.6); }
.ae-modal__dialog {
  position: relative; margin: 8vh auto 0; width: min(640px, 92vw);
  background: rgba(18,23,33,.98); border-radius: 12px; padding: 20px;
  box-shadow: 0 10px 30px rgba(0,0,0,.4);
}
.ae-modal__close { position:absolute; top:10px; right:12px; background:transparent; border:0; color:#fff; font-size:22px; cursor:pointer; }
.ae-modal__actions { margin-top:16px; display:flex; justify-content:flex-end; gap:10px; }
.ae-modal__scroll { max-height: 65vh; overflow-y: auto; padding-right: 4px; margin-top: 10px; }

/* Terms row alignment (tidy one-line layout) */
.row.terms { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.row.terms .checkbox { display:inline-flex; align-items:center; gap:8px; margin:0; }
.row.terms .checkbox input { width:16px; height:16px; }
.row.terms .terms-links { display:inline-flex; align-items:baseline; gap:6px; white-space:nowrap; }

/* === Global Alert Modal === */
#aeAlert .ae-modal__dialog { width: min(520px, 92vw); }
#aeAlert .ae-modal__actions { display:flex; justify-content:flex-end; gap:10px; }
#aeAlert .ae-modal__close { position:absolute; top:10px; right:12px; background:transparent; border:0; color:#fff; font-size:22px; cursor:pointer; }

.ae-modal__scroll {
  max-height: 65vh;
  overflow-y: auto;
  padding-right: 4px;
  margin-top: 10px;
}
.ae-modal__scroll::-webkit-scrollbar {
  width: 6px;
}
.ae-modal__scroll::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.15);
  border-radius: 3px;
}


/* Align checkbox + text + links tightly on one line */
/* Clean, sentence-like layout for the agreement line */
.terms-line{
  display:flex;
  align-items:center;     /* aligns checkbox and baseline of text */
  gap:10px;               /* space between box and text */
  margin:10px 0 0;
  line-height:1.3;
}

.terms-line input[type="checkbox"]{
  width:18px; height:18px;
  margin:0;
  vertical-align:middle;  /* extra safety on older Android */
}

.terms-line label{
  margin:0;
  display:inline;         /* keep it truly inline with the sentence */
  font-size:0.95rem;
}

.terms-line label .link{
  text-underline-offset:2px;
  padding:0 2px;          /* tiny hit area without shifting baseline */
}

/* If the links feel 1px low or high on some devices, nudge here */
@supports (transform: translateY(1px)) {
  .terms-line label { transform: translateY(0.5px); }  /* subtle optical align */
}