/* ==========================================================================
   Gold Academy — Components
   Buttons, cards, forms, chips, badges, avatars, progress, accordion, menus.
   Shared by the public site and every dashboard.
   ========================================================================== */

/* ---------- Buttons ---------- */
.btn {
  --bs-btn-font-weight: 600;
  --bs-btn-padding-y: .625rem;
  --bs-btn-padding-x: 1.25rem;
  --bs-btn-border-radius: var(--r-md);
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  white-space: nowrap;
  transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease),
              box-shadow var(--dur-fast) var(--ease);
}
.btn:active { transform: translateY(1px); }
.btn-lg { --bs-btn-padding-y: .8rem; --bs-btn-padding-x: 1.6rem; --bs-btn-font-size: var(--fs-base); }
.btn-sm { --bs-btn-padding-y: .4rem; --bs-btn-padding-x: .85rem; --bs-btn-font-size: var(--fs-sm); }

/* Gold: the main call to action */
.btn-gold {
  --bs-btn-color: var(--navy-900);
  --bs-btn-bg: var(--gold-400);
  --bs-btn-border-color: var(--gold-400);
  --bs-btn-hover-color: var(--navy-900);
  --bs-btn-hover-bg: var(--gold-300);
  --bs-btn-hover-border-color: var(--gold-300);
  --bs-btn-active-color: var(--navy-900);
  --bs-btn-active-bg: var(--gold-500);
  --bs-btn-active-border-color: var(--gold-500);
}
.btn-gold:hover { box-shadow: 0 8px 20px -10px rgba(179, 134, 43, .8); }

/* Navy: secondary solid (turns gold-outlined in dark mode) */
.btn-navy {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--navy-800);
  --bs-btn-border-color: var(--navy-800);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--navy-700);
  --bs-btn-hover-border-color: var(--navy-700);
  --bs-btn-active-bg: var(--navy-900);
  --bs-btn-active-color: #fff;
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: var(--navy-800);
  --bs-btn-disabled-border-color: var(--navy-800);
  --bs-btn-disabled-opacity: .45;
}
[data-bs-theme="dark"] .btn-navy {
  --bs-btn-color: var(--navy-900);
  --bs-btn-bg: var(--c-text);
  --bs-btn-border-color: var(--c-text);
  --bs-btn-hover-color: var(--navy-900);
  --bs-btn-hover-bg: #fff;
  --bs-btn-hover-border-color: #fff;
  --bs-btn-disabled-color: var(--navy-900);
  --bs-btn-disabled-bg: var(--c-text);
  --bs-btn-disabled-border-color: var(--c-text);
}

.btn-outline {
  --bs-btn-color: var(--c-heading);
  --bs-btn-bg: transparent;
  --bs-btn-border-color: var(--c-line-strong);
  --bs-btn-hover-color: var(--c-heading);
  --bs-btn-hover-bg: var(--c-surface-2);
  --bs-btn-hover-border-color: var(--c-line-strong);
  --bs-btn-active-bg: var(--c-surface-2);
  --bs-btn-active-color: var(--c-heading);
}
/* Outline on dark (navy) sections */
.btn-outline-light-ga {
  --bs-btn-color: var(--c-text-inv);
  --bs-btn-bg: transparent;
  --bs-btn-border-color: rgba(244, 239, 228, .35);
  --bs-btn-hover-color: var(--navy-900);
  --bs-btn-hover-bg: var(--c-text-inv);
  --bs-btn-hover-border-color: var(--c-text-inv);
  --bs-btn-active-bg: #fff;
  --bs-btn-active-color: var(--navy-900);
}
.btn-ghost {
  --bs-btn-color: var(--c-text);
  --bs-btn-bg: transparent;
  --bs-btn-border-color: transparent;
  --bs-btn-hover-bg: var(--c-surface-2);
  --bs-btn-hover-color: var(--c-heading);
  --bs-btn-active-bg: var(--c-surface-2);
}
.btn-icon { --bs-btn-padding-x: .6rem; --bs-btn-padding-y: .6rem; }

/* Text link with arrow */
.link-arrow {
  display: inline-flex; align-items: center; gap: var(--sp-1);
  font-weight: 600; color: var(--c-accent-ink); text-decoration: none;
}
.link-arrow .icon { transition: transform var(--dur-fast) var(--ease); }
.link-arrow:hover { color: var(--c-heading); }
.link-arrow:hover .icon { transform: translateX(-4px); }

/* ---------- Cards ---------- */
.card-ga {
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.card-ga.is-link:hover, .card-ga.is-link:focus-within {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: var(--c-line-strong);
}
/* Whole-card click target while keeping one real link inside */
.stretched-link::after { border-radius: var(--r-lg); }

/* ---------- Icon tile ---------- */
.icon-tile {
  width: 48px; height: 48px; border-radius: var(--r-md);
  display: inline-grid; place-items: center;
  background: var(--c-accent-soft); color: var(--c-accent-ink);
}
.icon-tile .icon { width: 24px; height: 24px; }

/* ---------- Chips (filters) ---------- */
.chips { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.chip {
  border: 1px solid var(--c-line-strong); background: var(--c-surface);
  color: var(--c-text); font-size: var(--fs-sm); font-weight: 500;
  padding: .4rem 1rem; border-radius: var(--r-pill); cursor: pointer;
  transition: all var(--dur-fast) var(--ease);
}
.chip:hover { border-color: var(--c-heading); color: var(--c-heading); }
.chip[aria-pressed="true"] {
  background: var(--navy-800); border-color: var(--navy-800); color: #fff;
}
[data-bs-theme="dark"] .chip[aria-pressed="true"] { background: var(--gold-400); border-color: var(--gold-400); color: var(--navy-900); }

/* ---------- Badges ---------- */
.badge-ga {
  display: inline-flex; align-items: center; gap: .3rem;
  font-size: var(--fs-xs); font-weight: 600; line-height: 1.4;
  padding: .2rem .6rem; border-radius: var(--r-pill);
  background: var(--c-surface-2); color: var(--c-text-muted);
}
.badge-ga.gold    { background: var(--c-accent-soft); color: var(--c-accent-ink); }
.badge-ga.success { background: var(--c-success-soft); color: var(--c-success); }
.badge-ga.danger  { background: var(--c-danger-soft);  color: var(--c-danger); }
.badge-ga.warning { background: var(--c-warning-soft); color: var(--c-warning); }

/* ---------- Avatar (monogram until a real photo is uploaded) ---------- */
.avatar {
  --size: 56px;
  width: var(--size); height: var(--size); border-radius: 50%;
  display: inline-grid; place-items: center; flex-shrink: 0;
  font-weight: 700; font-size: calc(var(--size) * .36);
  color: var(--navy-800); background: var(--gold-100);
  box-shadow: 0 0 0 3px var(--c-surface), 0 0 0 4px var(--gold-300);
  overflow: hidden;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar-sm { --size: 44px; }
.avatar-md { --size: 52px; }
.avatar-lg { --size: 72px; }
.avatar.navy { background: var(--navy-100); color: var(--navy-800); }
[data-bs-theme="dark"] .avatar { background: rgba(220, 175, 90, .16); color: var(--gold-300); }
[data-bs-theme="dark"] .avatar.navy { background: rgba(130, 160, 210, .16); color: #c7d4ea; }

/* ---------- Progress ---------- */
.progress-ga {
  height: 8px; border-radius: var(--r-pill);
  background: var(--c-surface-2); overflow: hidden;
}
.progress-ga > span {
  display: block; height: 100%; border-radius: inherit;
  background: linear-gradient(90deg, var(--gold-500), var(--gold-400));
  width: 0; transition: width var(--dur-slow) var(--ease);
}

/* ---------- Forms ---------- */
.form-label { font-weight: 600; font-size: var(--fs-sm); color: var(--c-heading); margin-bottom: var(--sp-2); }
.form-control, .form-select {
  border-radius: var(--r-md);
  border-color: var(--c-line-strong);
  background-color: var(--c-surface);
  color: var(--c-text);
  padding: .65rem .9rem;
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
}
.form-select { padding-inline-start: .9rem; }
.form-control::placeholder { color: var(--c-text-soft); }
.form-control:focus, .form-select:focus {
  border-color: var(--gold-500);
  box-shadow: 0 0 0 4px rgba(220, 175, 90, .22);
  background-color: var(--c-surface);
  color: var(--c-text);
}
.form-select:disabled { background-color: var(--c-surface-2); color: var(--c-text-soft); cursor: not-allowed; }
.form-hint { font-size: var(--fs-xs); color: var(--c-text-soft); margin-top: var(--sp-1); }

/* ---------- Dropdown ---------- */
.dropdown-menu {
  --bs-dropdown-bg: var(--c-surface);
  --bs-dropdown-border-color: var(--c-line);
  --bs-dropdown-border-radius: var(--r-md);
  --bs-dropdown-link-color: var(--c-text);
  --bs-dropdown-link-hover-bg: var(--c-surface-2);
  --bs-dropdown-link-hover-color: var(--c-heading);
  --bs-dropdown-link-active-bg: var(--c-accent-soft);
  --bs-dropdown-link-active-color: var(--c-accent-ink);
  --bs-dropdown-item-padding-y: .55rem;
  --bs-dropdown-padding-y: .4rem;
  box-shadow: var(--shadow-lg);
  min-width: 15rem;
}
.dropdown-item { display: flex; align-items: center; gap: var(--sp-3); font-weight: 500; border-radius: var(--r-sm); }
.dropdown-menu { padding-inline: .4rem; }
.dropdown-item small { display: block; font-weight: 400; color: var(--c-text-soft); font-size: var(--fs-xs); }
.dropdown-item .icon { color: var(--c-accent-ink); }

/* ---------- Accordion (FAQ) ---------- */
.accordion-ga .accordion-item {
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md) !important;
  margin-bottom: var(--sp-3);
  overflow: hidden;
}
.accordion-ga .accordion-button {
  font-weight: 600; color: var(--c-heading); background: transparent;
  padding: var(--sp-5) var(--sp-6); box-shadow: none; gap: var(--sp-3);
}
.accordion-ga .accordion-button::after {
  margin-inline-start: auto; margin-inline-end: 0;
  --bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b3862b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M6 9l6 6 6-6'/%3e%3c/svg%3e");
  --bs-accordion-btn-active-icon: var(--bs-accordion-btn-icon);
}
.accordion-ga .accordion-button:not(.collapsed) { color: var(--c-accent-ink); }
/* Bootstrap removes the outline on :focus; restore a brand ring for keyboard users only */
.accordion-ga .accordion-button:focus-visible { outline: 3px solid var(--c-focus); outline-offset: -3px; border-radius: var(--r-md); }
.accordion-ga .accordion-body { padding: 0 var(--sp-6) var(--sp-6); color: var(--c-text-muted); }

/* ---------- Offcanvas ---------- */
.offcanvas { --bs-offcanvas-bg: var(--c-surface); --bs-offcanvas-color: var(--c-text); --bs-offcanvas-width: min(340px, 86vw); }
.offcanvas.offcanvas-end { transition-duration: .4s; }

/* ---------- Toast-like inline status ---------- */
.status-line { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-sm); color: var(--c-text-muted); }
.status-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--c-success); box-shadow: 0 0 0 3px var(--c-success-soft); }