/*
 * Components: buttons, forms, cards, badges, accordion, tabs, check lists,
 * pagination, modal, alerts, tables. Bootstrap components are restyled through
 * their own CSS variables wherever Bootstrap exposes them.
 */

/* =====================================================================
   Buttons
   ===================================================================== */
.btn-pm {
  --btn-bg: var(--color-primary-strong);
  --btn-fg: #fff;
  --btn-border: transparent;
  --btn-bg-hover: var(--color-primary-dark);
  --btn-fg-hover: #fff;
  --btn-shadow: var(--shadow-brand);

  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 22px;
  border: 1px solid var(--btn-border);
  border-radius: var(--radius-pill);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-family: var(--font-sans);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.005em;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  user-select: none;
  box-shadow: var(--btn-shadow);
  transition:
    background-color var(--duration-fast) ease,
    color var(--duration-fast) ease,
    border-color var(--duration-fast) ease,
    box-shadow var(--duration-base) ease,
    transform var(--duration-base) var(--ease-out);
}

.btn-pm:hover {
  background: var(--btn-bg-hover);
  color: var(--btn-fg-hover);
  transform: translateY(-1px);
}

.btn-pm:active { transform: translateY(0) scale(0.985); }

.btn-pm:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* Disabled buttons stay hoverable (so a title tooltip explaining why can
   show — see enrollment step 1) but never react as if clickable. */
.btn-pm:disabled,
.btn-pm[aria-disabled='true'],
.btn-pm:disabled:hover,
.btn-pm[aria-disabled='true']:hover {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
  background: var(--btn-bg);
  color: var(--btn-fg);
}

.btn-pm:disabled .bi,
.btn-pm[aria-disabled='true'] .bi { transform: none !important; }

/* Text-only secondary action, e.g. "Resend code", "Skip for now" */
.btn-pm-text {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  padding: 0;
  border: 0;
  background: none;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text-muted);
  cursor: pointer;
  text-align: left;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 3px;
  transition: color var(--duration-fast) ease, text-decoration-color var(--duration-fast) ease;
}

.btn-pm-text:hover { color: var(--color-primary-strong); text-decoration-color: currentColor; }
.btn-pm-text:focus-visible { outline: 2px solid var(--color-primary-strong); outline-offset: 3px; border-radius: 4px; }
.btn-pm-text[aria-busy='true'] { opacity: 0.6; pointer-events: none; }

/* Trailing icon nudges forward on hover */
.btn-pm .bi { font-size: 1.05em; line-height: 1; transition: transform var(--duration-base) var(--ease-out); }
.btn-pm:hover .bi-arrow-right,
.btn-pm:hover .bi-arrow-up-right { transform: translateX(3px); }

/* Loading state: set aria-busy="true" while a request is in flight */
.btn-pm[aria-busy='true'] {
  color: transparent !important;
  pointer-events: none;
}

.btn-pm[aria-busy='true']::after {
  content: '';
  position: absolute;
  inset: 0;
  margin: auto;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid var(--btn-fg);
  border-right-color: transparent;
  animation: pm-spin 0.7s linear infinite;
}

.btn-pm-secondary {
  --btn-bg: var(--ink-900);
  --btn-bg-hover: var(--ink-700);
  --btn-shadow: var(--shadow-sm);
}

.btn-pm-outline {
  --btn-bg: #fff;
  --btn-fg: var(--ink-900);
  --btn-border: var(--color-border-strong);
  --btn-bg-hover: var(--ink-50);
  --btn-fg-hover: var(--ink-900);
  --btn-shadow: var(--shadow-xs);
}

.btn-pm-outline:hover { border-color: var(--ink-400); }

.btn-pm-ghost {
  --btn-bg: transparent;
  --btn-fg: var(--ink-700);
  --btn-bg-hover: var(--ink-100);
  --btn-fg-hover: var(--ink-900);
  --btn-shadow: none;
}

/* For dark surfaces */
.btn-pm-inverse {
  --btn-bg: rgba(255, 255, 255, 0.06);
  --btn-fg: #fff;
  --btn-border: rgba(255, 255, 255, 0.22);
  --btn-bg-hover: rgba(255, 255, 255, 0.12);
  --btn-fg-hover: #fff;
  --btn-shadow: none;
}

.btn-pm-inverse:hover { border-color: rgba(255, 255, 255, 0.4); }

.btn-pm-sm { min-height: 40px; padding: 0 16px; font-size: 0.875rem; }
.btn-pm-lg { min-height: 54px; padding: 0 28px; font-size: 1rem; }
.btn-pm-block { width: 100%; }

/* Text link with an animated arrow */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  color: var(--color-primary-strong);
}

.link-arrow .bi {
  font-size: 0.95em;
  line-height: 1;
  transition: transform var(--duration-base) var(--ease-out);
}

/* Cards with a stretched link animate the arrow on card hover too.
   (Bootstrap's .stretched-link owns ::after, so the arrow is a real <i>.) */
.link-arrow:hover .bi,
.card-pm:hover .link-arrow .bi { transform: translateX(4px); }

/* =====================================================================
   Forms
   ===================================================================== */
.form-label,
.field > label {
  display: block;
  margin-bottom: 6px;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text-primary);
}

.form-control,
.form-select {
  min-height: 48px;
  padding: 11px 14px;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  background-color: #fff;
  color: var(--color-text-primary);
  font-size: 0.9375rem;
  line-height: 1.5;
  box-shadow: var(--shadow-xs);
  transition: border-color var(--duration-fast) ease, box-shadow var(--duration-base) ease, background-color var(--duration-fast) ease;
}

.form-control:hover,
.form-select:hover { border-color: var(--ink-400); }

.form-control:focus,
.form-select:focus {
  border-color: var(--rose-500);
  box-shadow: 0 0 0 4px rgba(var(--glow-primary-rgb), 0.16);
  color: var(--color-text-primary);
  outline: none;
}

.form-control::placeholder { color: var(--ink-400); opacity: 1; }

textarea.form-control { min-height: 140px; resize: vertical; }

/* A <select> that carries .form-control gets the same chevron as .form-select */
select.form-control {
  appearance: none;
  padding-right: 42px;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%235d6574' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.75' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 14px 14px;
}

.form-control.is-invalid,
.form-control:user-invalid,
.was-validated .form-control:invalid {
  border-color: var(--color-danger);
  background-image: none;
}

.form-control.is-invalid:focus,
.form-control:user-invalid:focus { box-shadow: 0 0 0 4px rgba(196, 43, 28, 0.14); }

.form-check-input {
  width: 1.15em;
  height: 1.15em;
  border-color: var(--color-border-strong);
}

.form-check-input:checked {
  background-color: var(--color-primary-strong);
  border-color: var(--color-primary-strong);
}

.form-check-input:focus { border-color: var(--rose-400); box-shadow: 0 0 0 4px rgba(var(--glow-primary-rgb), 0.16); }

.form-text,
.helptext { color: var(--color-text-muted); font-size: 0.8125rem; }

.errorlist {
  list-style: none;
  margin: 6px 0 0;
  padding: 0;
  color: var(--color-danger);
  font-size: 0.8125rem;
  font-weight: 500;
}

/* intl-tel-input phone field */
.iti { display: block; width: 100%; }
.iti__country-list { border-radius: var(--radius-md); border-color: var(--color-border); box-shadow: var(--shadow-lg); }
.iti__selected-flag { border-radius: var(--radius-md) 0 0 var(--radius-md); }

/* Form status messages (success / error) */
.form-alert,
.sent-message {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: var(--space-4) 0 0;
  padding: 12px 14px;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: 500;
  line-height: 1.5;
  text-align: left;
  animation: pm-rise var(--duration-base) var(--ease-out) both;
}

.form-alert::before,
.sent-message::before {
  font-family: 'bootstrap-icons';
  font-size: 1.05rem;
  line-height: 1.3;
}

.form-alert-success,
.sent-message {
  background: var(--color-success-subtle);
  border-color: #c6e9d2;
  color: var(--color-success);
}

.form-alert-success::before,
.sent-message::before { content: '\f26a'; }

.form-alert-error {
  background: var(--color-danger-subtle);
  border-color: #f6cfc9;
  color: var(--color-danger);
}

.form-alert-error::before { content: '\f333'; }

/* =====================================================================
   Cards
   ===================================================================== */
.card-pm {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
  transition:
    transform var(--duration-base) var(--ease-out),
    box-shadow var(--duration-base) ease,
    border-color var(--duration-base) ease;
}

.card-pm:hover {
  transform: translateY(-4px);
  border-color: var(--rose-200);
  box-shadow: var(--shadow-lg);
}

/* =====================================================================
   Badges / chips
   ===================================================================== */
.badge {
  --bs-badge-font-weight: 600;
  --bs-badge-padding-x: 0.65em;
  --bs-badge-padding-y: 0.4em;
  letter-spacing: 0.01em;
}

.badge.text-bg-light {
  color: var(--ink-700) !important;
  background-color: var(--ink-100) !important;
  border: 1px solid var(--color-border);
  font-weight: 600;
}

.badge.bg-light {
  background-color: var(--ink-50) !important;
  border-color: var(--color-border) !important;
  color: var(--ink-700) !important;
  font-weight: 500;
  border-radius: var(--radius-pill);
}

/* =====================================================================
   Accordion (course syllabus, course FAQs, site FAQ)
   ===================================================================== */
.accordion {
  --bs-accordion-color: var(--color-text-secondary);
  --bs-accordion-bg: #fff;
  --bs-accordion-border-color: var(--color-border);
  --bs-accordion-border-radius: var(--radius-md);
  --bs-accordion-inner-border-radius: calc(var(--radius-md) - 1px);
  --bs-accordion-btn-padding-x: 1.25rem;
  --bs-accordion-btn-padding-y: 1.05rem;
  --bs-accordion-btn-color: var(--color-text-primary);
  --bs-accordion-btn-bg: #fff;
  --bs-accordion-btn-focus-box-shadow: inset 0 0 0 2px rgba(var(--primary-strong-rgb), 0.45);
  --bs-accordion-btn-icon-width: 0.9rem;
  --bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23444b59' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
  --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%239d3a4e' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
  --bs-accordion-body-padding-x: 1.25rem;
  --bs-accordion-body-padding-y: 0.25rem;
  --bs-accordion-active-color: var(--ink-900);
  --bs-accordion-active-bg: var(--rose-50);
  display: grid;
  gap: 10px;
}

.accordion .accordion-item {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: #fff;
  transition: border-color var(--duration-base) ease, box-shadow var(--duration-base) ease;
}

.accordion .accordion-item:hover { border-color: var(--color-border-strong); }

.accordion .accordion-item:has(.accordion-collapse.show),
.accordion .accordion-item:has(.accordion-collapse.collapsing) {
  border-color: var(--rose-200);
  box-shadow: var(--shadow-sm);
}

.accordion .accordion-item > .accordion-header .accordion-button {
  border-radius: 0;
  gap: 12px;
  font-family: var(--font-sans);
  font-size: 0.96875rem;
  font-weight: 600;
  line-height: 1.45;
  transition: background-color var(--duration-base) ease, color var(--duration-fast) ease;
}

.accordion-button strong { font-weight: 600; }
.accordion-button .badge { margin-left: auto; flex-shrink: 0; }
.accordion-button .badge + * { margin-left: 0; }
.accordion-button::after { margin-left: 8px; transition: transform var(--duration-base) var(--ease-out); }
.accordion-button:hover { background-color: var(--ink-50); }
.accordion-button:not(.collapsed):hover { background-color: var(--rose-50); }
.accordion-button:not(.collapsed) { box-shadow: none; }

.accordion-body {
  padding-top: 1rem;
  padding-bottom: 1.25rem;
  font-size: 0.9375rem;
  line-height: var(--leading-relaxed);
}

.accordion-body > :last-child { margin-bottom: 0; }

/* =====================================================================
   Tabs — segmented control (course pages: About / Curriculum / FAQ)
   ===================================================================== */
.nav-pills#pills-tab,
.nav-pills.nav-segmented {
  display: inline-flex;
  flex-wrap: nowrap;
  gap: 4px;
  max-width: 100%;
  margin-bottom: var(--space-8) !important;
  padding: 4px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background: var(--ink-50);
  overflow-x: auto;
  scrollbar-width: none;
}

.nav-pills#pills-tab::-webkit-scrollbar { display: none; }

.btn.btn-custom {
  --bs-btn-padding-x: 1.15rem;
  --bs-btn-padding-y: 0.5rem;
  --bs-btn-font-weight: 600;
  --bs-btn-font-size: 0.9rem;
  --bs-btn-color: var(--ink-600);
  --bs-btn-bg: transparent;
  --bs-btn-border-color: transparent;
  --bs-btn-hover-color: var(--ink-900);
  --bs-btn-hover-bg: rgba(17, 20, 27, 0.04);
  --bs-btn-hover-border-color: transparent;
  --bs-btn-active-color: var(--ink-900);
  --bs-btn-active-bg: #fff;
  --bs-btn-active-border-color: transparent;
  --bs-btn-focus-box-shadow: 0 0 0 3px rgba(var(--primary-strong-rgb), 0.3);
  border-radius: var(--radius-pill);
  white-space: nowrap;
  transition: background-color var(--duration-base) ease, color var(--duration-fast) ease, box-shadow var(--duration-base) ease;
}

.btn.btn-custom.active {
  background: #fff;
  color: var(--ink-900);
  box-shadow: var(--shadow-sm);
}

.tab-content > .tab-pane.fade { transition: opacity var(--duration-base) ease; }

/* =====================================================================
   Check lists (course highlights, outcomes, roles, tools ...)
   Markup: <ul class="list-group"><li class="list-group-item"><i class="bi bi-asterisk"></i> text
   ===================================================================== */
.list-group {
  --bs-list-group-bg: transparent;
  --bs-list-group-border-width: 0;
  --bs-list-group-item-padding-x: 0;
  --bs-list-group-item-padding-y: 0.5rem;
  --bs-list-group-color: var(--color-text-secondary);
  border-radius: 0;
}

.list-group-item {
  position: relative;
  padding-left: 34px !important;
  border: 0 !important;
  background: transparent;
  line-height: 1.6;
}

.list-group-item > .bi-asterisk {
  position: absolute;
  left: 0;
  top: 0.62rem;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: var(--radius-pill);
  background: var(--rose-50);
  border: 1px solid var(--rose-100);
  color: var(--rose-600);
  font-size: 0.8rem;
  line-height: 1;
}

/* Swap the asterisk glyph for a check (same icon font, no markup change) */
.list-group-item > .bi-asterisk::before { content: '\f272'; font-weight: 700 !important; }

/* =====================================================================
   Pagination
   ===================================================================== */
.pagination {
  --bs-pagination-padding-x: 0.95rem;
  --bs-pagination-padding-y: 0.55rem;
  --bs-pagination-color: var(--ink-700);
  --bs-pagination-bg: #fff;
  --bs-pagination-border-color: var(--color-border);
  --bs-pagination-border-radius: var(--radius-pill);
  --bs-pagination-hover-color: var(--ink-900);
  --bs-pagination-hover-bg: var(--ink-50);
  --bs-pagination-hover-border-color: var(--color-border-strong);
  --bs-pagination-focus-box-shadow: 0 0 0 3px rgba(var(--primary-strong-rgb), 0.3);
  --bs-pagination-active-color: #fff;
  --bs-pagination-active-bg: var(--ink-900);
  --bs-pagination-active-border-color: var(--ink-900);
  gap: 6px;
  flex-wrap: wrap;
}

.pagination .page-link {
  min-width: 42px;
  text-align: center;
  border-radius: var(--radius-pill) !important;
  font-weight: 600;
  font-size: var(--text-sm);
  transition: background-color var(--duration-fast) ease, border-color var(--duration-fast) ease, color var(--duration-fast) ease;
}

/* =====================================================================
   Modal (Book Free Demo)
   ===================================================================== */
.modal {
  --bs-modal-width: 520px;
  --bs-modal-border-radius: var(--radius-xl);
  --bs-modal-inner-border-radius: calc(var(--radius-xl) - 1px);
  --bs-modal-border-color: transparent;
  --bs-modal-box-shadow: var(--shadow-lg);
  --bs-modal-padding: 0 1.75rem 1.5rem;
  --bs-modal-header-padding: 1.75rem 1.75rem 0.75rem;
  --bs-modal-header-border-width: 0;
  --bs-modal-footer-border-width: 0;
  --bs-modal-margin: 1rem;
}

.modal-backdrop { --bs-backdrop-bg: var(--ink-950); --bs-backdrop-opacity: 0.55; }

.modal-content { overflow: hidden; box-shadow: var(--shadow-lg); }

/* Brand hairline across the top of the dialog */
.modal-content::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: linear-gradient(90deg, var(--rose-500), var(--accent-2));
}

.modal-title { font-size: var(--text-xl); letter-spacing: var(--tracking-tight); }
.modal-title strong { font-weight: 750; }
.modal-footer { padding: 0 1.75rem 1.75rem; gap: 10px; }
.modal-footer > * { margin: 0; }

.modal.fade .modal-dialog {
  transform: translateY(12px) scale(0.98);
  transition: transform var(--duration-base) var(--ease-out), opacity var(--duration-base) ease;
}

.modal.show .modal-dialog { transform: none; }

.btn-close { border-radius: var(--radius-pill); padding: 0.6rem; transition: background-color var(--duration-fast) ease; }
.btn-close:hover { background-color: var(--ink-100); }

/* =====================================================================
   Tables (blog posts, legal pages, course pages)
   ===================================================================== */
.table-pm,
.post-body table,
.legal table {
  width: 100%;
  margin: var(--space-6) 0;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  font-size: 0.9375rem;
}

.post-body th,
.post-body td,
.legal th,
.legal td {
  padding: 12px 14px;
  border: 0;
  border-bottom: 1px solid var(--color-border);
  text-align: left;
  vertical-align: top;
}

.post-body tr:last-child td,
.legal tr:last-child td { border-bottom: 0; }

.post-body th + th, .post-body td + td,
.legal th + th, .legal td + td { border-left: 1px solid var(--color-border); }

.post-body th,
.legal th {
  background: var(--ink-50);
  color: var(--color-text-primary);
  font-weight: 600;
  font-size: var(--text-sm);
}

.post-body tbody tr:hover td,
.legal tbody tr:hover td { background: var(--color-surface-subtle); }