/* Page-specific styles copied from main-elde2.php and its exam schedule includes. */

.elde-scholarships {
  background: #f4f5f7;
  padding: 64px 0 48px;
}
.elde-scholarships .section-title {
  padding-bottom: 40px;
}
.elde-scholarships .section-title h2 {
  color: #292d32;
}
.elde-scholarships-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 26px;
  align-items: stretch;
}
.elde-scholarship-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 36px 28px 30px;
  border: 1px solid #e8ebef;
  border-radius: 26px;
  background: #fff;
  box-shadow: 0 14px 34px rgba(23, 45, 68, 0.06);
  color: #444950;
}
.elde-scholarship-card.is-featured {
  overflow: hidden;
  isolation: isolate;
  border: 2px solid #eec53d;
  background: radial-gradient(circle at 100% 0%, rgba(255, 255, 255, 0.14), transparent 55%), linear-gradient(145deg, #049987 0%, #087f70 100%);
  color: #fff;
  box-shadow: 0 16px 36px rgba(4, 130, 112, 0.2);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.elde-scholarship-card.is-featured::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(115deg, transparent 25%, rgba(255, 255, 255, 0.12) 48%, transparent 70%);
  transform: translateX(-120%);
  transition: transform 0.8s ease;
}
.elde-scholarship-card.is-featured .elde-scholarship-header h3,
.elde-scholarship-card.is-featured .elde-scholarship-amount strong,
.elde-scholarship-card.is-featured .elde-scholarship-body h4 {
  color: #fff;
}
.elde-scholarship-card.is-featured .elde-scholarship-amount > span,
.elde-scholarship-card.is-featured .elde-scholarship-amount small,
.elde-scholarship-card.is-featured .elde-scholarship-note {
  color: #edf9f6;
}
.elde-scholarship-card.is-featured .elde-scholarship-amount,
.elde-scholarship-card.is-featured .elde-scholarship-note {
  border-color: rgba(255, 255, 255, 0.25);
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .elde-scholarship-card.is-featured:hover {
    transform: translateY(-6px);
    box-shadow: 0 24px 46px rgba(4, 130, 112, 0.28);
  }
  .elde-scholarship-card.is-featured:hover::before { transform: translateX(120%); }
  .elde-scholarship-card.is-featured:hover .elde-scholarship-icon { transform: rotate(-8deg) scale(1.08); }
}
@media (prefers-reduced-motion: reduce) {
  .elde-scholarship-card.is-featured,
  .elde-scholarship-card.is-featured::before { transition: none; }
}
.elde-scholarship-badge {
  position: absolute;
  top: -1px;
  right: -1px;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 8px 20px;
  border-radius: 0 24px 0 22px;
  background: #eac344;
  color: #59430a;
  font-size: 14px;
  font-weight: 700;
}
.elde-scholarship-header {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 60px;
  margin-bottom: 26px;
}
.elde-scholarship-icon {
  display: grid;
  place-items: center;
  flex: 0 0 48px;
  height: 48px;
  border-radius: 50%;
  background: #d8f7f5;
  color: #00878c;
  font-size: 25px;
}
.is-featured .elde-scholarship-icon {
  background: #fff1cb;
  color: #93700b;
  transition: transform 0.25s ease;
}
.elde-scholarship-header h3 {
  margin: 0;
  color: #292d32;
  font-size: 21px;
  font-weight: 700;
  line-height: 1.5;
}
.elde-scholarship-amount {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0 0 25px;
  padding-bottom: 23px;
  border-bottom: 1px solid #edf0f3;
}
.elde-scholarship-amount > span {
  color: #73777d;
  font-size: 15px;
}
.elde-scholarship-amount strong {
  color: #292d32;
  font-size: clamp(23px, 2.15vw, 30px);
  font-weight: 700;
  line-height: 1.5;
}
.elde-scholarship-amount small {
  color: #60656c;
  font-size: 14px;
  font-weight: 500;
}
.elde-scholarship-body {
  flex: 1;
}
.elde-scholarship-logo {
  display: block;
  width: 128px;
  height: 84px;
  object-fit: contain;
  margin: 0 0 16px;
}
.elde-scholarship-body h4 {
  margin: 0 0 10px;
  color: #292d32;
  font-size: 21px;
  font-weight: 700;
  line-height: 1.5;
}
.elde-scholarship-body p {
  margin: 0;
  font-size: 18px;
  line-height: 1.85;
}
.elde-scholarship-note {
  margin: 24px 0 0;
  padding-top: 19px;
  border-top: 1px solid #edf0f3;
  color: #73777d;
  font-size: 15px;
  line-height: 1.8;
}
.elde-scholarships-footnote {
  display: flex;
  justify-content: center;
  align-items: baseline;
  gap: 8px;
  margin: 28px 0 0;
  color: #73777d;
  font-size: 15px;
  line-height: 1.8;
  text-align: center;
}
@media (max-width: 991.98px) {
  .elde-scholarships-grid { grid-template-columns: 1fr; gap: 20px; }
  .elde-scholarship-card { padding: 32px; }
  .elde-scholarship-amount { flex-direction: row; align-items: baseline; justify-content: space-between; gap: 12px; }
  .elde-scholarship-amount strong { font-size: 28px; }
}
@media (max-width: 575.98px) {
  .elde-scholarships { padding: 44px 0 36px; }
  .elde-scholarship-card { padding: 34px 22px 26px; border-radius: 22px; }
  .elde-scholarship-header { margin-bottom: 18px; }
  .elde-scholarship-header h3 { font-size: 19px; }
  .elde-scholarship-amount { flex-direction: column; gap: 4px; }
  .elde-scholarship-amount strong { font-size: 27px; }
  .elde-scholarship-body p { font-size: 17px; }
  .elde-scholarships-footnote { text-align: left; }
}

.client-logo.elde-online-partner-logos {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(0.25rem, 0.5vw, 0.6rem);
  overflow: visible;
}

.client-logo.elde-online-partner-logos img.elde-partner-logo {
  display: block;
  flex: 0 1 auto;
  padding: 0;
  max-width: none;
  height: auto;
  opacity: 1;
  filter: none;
  object-fit: contain;
}

.client-logo.elde-online-partner-logos img.elde-partner-logo-tu {
  width: clamp(6.5rem, 10vw, 8rem);
}

.hero .elde-hero-description { max-width: 760px; line-height: 1.8; }
.hero .elde-hero-exam-body { color: #c41230; }
.hero .elde-hero-sponsor { color: #ed1651; }

.client-logo.elde-online-partner-logos img.elde-partner-logo-bewise {
  width: clamp(12rem, 16vw, 14rem);
}

@media (max-width: 575.98px) {
  .client-logo.elde-online-partner-logos {
    gap: 0.35rem;
  }

  .client-logo.elde-online-partner-logos img.elde-partner-logo-tu {
    width: 6rem;
  }

  .client-logo.elde-online-partner-logos img.elde-partner-logo-bewise {
    width: 8rem;
  }
}

.exam-detail-card {
  background: color-mix(in srgb, var(--accent-color), transparent 96%);
  border-radius: 1.2rem;
  padding: 2rem 1.5rem;
  margin-bottom: 1.5rem;
}

.exam-detail-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  margin-bottom: 1.1rem;
  font-size: 1.08rem;
}

.exam-detail-list li:last-child {
  margin-bottom: 0;
}

.exam-detail-list i {
  font-size: 1.5rem;
  color: var(--accent-color);
  flex-shrink: 0;
}

.video-wrapper {
  position: relative;
  padding-bottom: 56.25%;
  /* 16:9 */
  height: 0;
  overflow: hidden;
}

.video-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* Former inline styles are classes so this page can be customized here. */

.elde2-inline-01 {
  color: #9857a7 !important;
}

.elde2-inline-02 {
  color: #ed1651 !important;
  font-weight: 700 !important;
}

.elde2-inline-03 {
  background: color-mix(
    in srgb,
    var(--accent-color),
    transparent 96%
  ) !important;
  border-radius: 1.2rem !important;
  padding: 2rem 1.5rem !important;
  margin-bottom: 1.5rem !important;
}

.elde2-inline-04 {
  color: var(--accent-color) !important;
  font-weight: 700 !important;
}

.elde2-inline-05 {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

.elde2-inline-06 {
  display: flex !important;
  align-items: flex-start !important;
  gap: 0.7rem !important;
  margin-bottom: 1.1rem !important;
}

.elde2-inline-07 {
  font-size: 1.5rem !important;
  color: var(--accent-color) !important;
}

.elde2-inline-08 {
  font-size: 1.08rem !important;
}

.elde2-inline-09 {
  display: flex !important;
  align-items: flex-start !important;
  gap: 0.7rem !important;
}

.elde2-inline-10 {
  width: 100% !important;
}

.elde2-inline-11 {
  white-space: pre-line !important;
  text-align: center !important;
}

.elde2-inline-12 {
  white-space: pre-line !important;
}

.elde2-inline-13 {
  color: red !important;
  font-weight: bold !important;
}

.elde2-inline-14 {
  color: #049987 !important;
}

.elde2-inline-15 {
  color: red !important;
}

.elde2-inline-16 {
  font-size: 18px !important;
}

/* Application, exam and payment cards. */
.online-application-cards {
  --online-card-accent: var(--accent-color, #049987);
  --online-card-ink: #173b37;
  --online-card-muted: #71817d;
  padding-block: clamp(2rem, 4vw, 3.5rem);
  background: linear-gradient(180deg, #f5faf8 0%, #fff 45%, #f6faf9 100%);
}

.online-info-card,
.online-payment-group,
.online-registration-card {
  border: 1px solid #dfebe7;
  border-radius: 1.25rem;
  background: #fff;
  box-shadow: 0 1rem 2.8rem rgba(20, 74, 64, 0.07);
}

.online-exam-fee-banner {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
  padding: clamp(2.4rem, 5vw, 3.5rem) clamp(1.25rem, 3vw, 2rem);
  border-radius: 1.25rem;
  text-align: center;
}
.online-exam-fee-banner h2 {
  margin: 0;
  color: #292637;
  font-size: clamp(1.7rem, 3.2vw, 2.25rem);
  font-weight: 750;
  line-height: 1.28;
}
.online-exam-fee-banner h2 span {
  display: inline-block;
  margin-top: 0.1rem;
}
.online-exam-fee-banner p {
  max-width: 58rem;
  margin: 0.1rem 0 0.75rem;
  color: #5e5960;
  font-size: 0.95rem;
  line-height: 1.65;
}
.online-exam-fee-cta {
  display: inline-flex;
  min-height: 3.2rem;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  padding: 0.85rem 1.55rem;
  border: 1px solid #049987;
  border-radius: 0.85rem;
  background: #049987;
  box-shadow: 0 0.55rem 1.35rem rgba(4, 153, 135, 0.18);
  color: #fff;
  font-weight: 750;
  text-decoration: none;
  transition:
    background-color 0.2s ease,
    box-shadow 0.2s ease,
    transform 0.2s ease;
}
.online-exam-fee-cta:hover {
  transform: translateY(-2px);
  border-color: #087e73;
  background: #087e73;
  box-shadow: 0 0.75rem 1.5rem rgba(4, 125, 112, 0.24);
  color: #fff;
}
.online-exam-fee-cta:focus-visible {
  outline: 3px solid rgba(4, 153, 135, 0.3);
  outline-offset: 3px;
}
.online-registration-card {
  display: block;
  overflow: hidden;
  margin-bottom: 0.75rem;
}
.online-registration-details {
  min-width: 0;
  padding: clamp(1.25rem, 2.5vw, 2rem);
}

.online-card-heading,
.online-payment-title {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin-bottom: 1.15rem;
}
.online-card-heading h3,
.online-payment-title h3 {
  margin: 0 0 0.25rem;
  color: var(--online-card-ink);
  font-size: 1.2rem;
  font-weight: 750;
}
.online-card-heading p,
.online-payment-title p {
  margin: 0;
  color: var(--online-card-muted);
  font-size: 0.9rem;
}
.online-card-icon {
  display: inline-flex;
  flex: 0 0 2.8rem;
  align-items: center;
  justify-content: center;
  width: 2.8rem;
  height: 2.8rem;
  border: 1px solid #d8eee8;
  border-radius: 0.9rem;
  background: #eaf7f3;
  color: var(--online-card-accent);
  font-size: 1.2rem;
}

.online-event-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.65rem;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: online-phase;
}
.online-event-item {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  min-width: 0;
  padding: 0.8rem;
  border: 1px solid #e8efec;
  border-radius: 0.85rem;
  background: linear-gradient(135deg, #fff, #f9fcfb);
  counter-increment: online-phase;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    transform 0.2s ease;
}
.online-event-item:hover {
  border-color: #c7e5db;
  box-shadow: 0 0.45rem 1.1rem rgba(20, 74, 64, 0.06);
  transform: translateY(-1px);
}
.online-event-index {
  display: grid;
  flex: 0 0 2rem;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border: 1px solid #d8eee8;
  border-radius: 0.65rem;
  background: #eaf7f3;
  color: #078b7b;
  font-size: 0.72rem;
  font-weight: 800;
}
.online-event-index i {
  font-size: 0.82rem;
}
.online-event-copy {
  min-width: 0;
}
.online-event-date {
  display: block;
  margin-bottom: 0.22rem;
  color: #078b7b;
  font-size: 0.73rem;
  font-weight: 750;
  line-height: 1.4;
}
.online-event-item strong {
  display: block;
  color: #344c47;
  font-size: 0.88rem;
  line-height: 1.45;
}
.online-event-item strong i {
  margin-right: 0.18rem;
  color: #438858;
}
.online-event-item small {
  display: block;
  margin-top: 0.15rem;
  color: var(--online-card-muted);
  font-size: 0.77rem;
  line-height: 1.5;
}
.online-event-travel {
  grid-column: 1 / -1;
  border-color: #cfe8df;
  background: linear-gradient(110deg, #eff9f4, #f9fcfb);
}
.online-event-travel .online-event-index {
  border-color: #c9e6d8;
  background: #e0f2e8;
  color: #438858;
}
.online-event-copy sup {
  display: inline-grid;
  place-items: center;
  width: 1rem;
  height: 1rem;
  margin-left: 0.12rem;
  border-radius: 50%;
  background: #eef0f1;
  color: #596663;
  font-size: 0.65rem;
  font-weight: 800;
  vertical-align: middle;
}
.online-timeline-notes {
  margin: 0 0 clamp(2.25rem, 5vw, 4rem);
  color: #c62828;
}
.online-timeline-notes > strong {
  display: block;
  color: #ed1748;
  font-size: 0.82rem;
  font-weight: 700;
}
.online-timeline-notes ul {
  display: grid;
  gap: 0.2rem;
  margin: 0.45rem 0 0;
  padding: 0;
  color: #ed1748;
  font-size: 0.79rem;
  line-height: 1.55;
  list-style: none;
}
.online-timeline-notes li {
  position: relative;
  padding-left: 0.85rem;
  color: #ed1748;
  font-weight: 600;
}
.online-timeline-notes li::before {
  position: absolute;
  left: 0;
  color: #ed1748;
  content: "-";
}
.online-timeline-notes li:last-child {
  color: #697378;
  font-weight: 400;
}
.online-timeline-notes li:last-child::before {
  content: none;
}
.online-timeline-notes li sup {
  display: inline-grid;
  place-items: center;
  width: 0.95rem;
  height: 0.95rem;
  margin-right: 0.15rem;
  border-radius: 50%;
  background: #eceff1;
  color: #687278;
  font-size: 0.62rem;
  font-weight: 800;
  vertical-align: middle;
}
.online-card-note,
.online-payment-footnote {
  margin: 0.9rem 0 0;
  color: var(--online-card-muted);
  font-size: 0.85rem;
  line-height: 1.65;
}
.online-card-note i,
.online-payment-footnote i {
  margin-right: 0.25rem;
  color: var(--online-card-accent);
}

.online-detail-row {
  margin-bottom: clamp(2.25rem, 5vw, 4rem);
}
.online-schedule-card,
.online-qualification-card {
  height: 100%;
  padding: clamp(1.25rem, 2.5vw, 1.8rem);
}
.online-schedule-card {
  position: relative;
  overflow: hidden;
  padding: 0;
  border: 1px solid #d5e8e2;
  border-radius: 1.5rem;
  background: #fff;
  box-shadow: 0 0.9rem 2.2rem rgba(17, 73, 62, 0.09);
  transition: transform 0.28s ease, box-shadow 0.28s ease;
}
.online-schedule-title {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin: 0;
  padding: 1.05rem clamp(1.15rem, 2.5vw, 1.55rem);
  border-bottom: 1px solid #d9eae4;
  background: linear-gradient(110deg, #edf8f4 0%, #f8fbfa 68%, #fff 100%);
  color: #173b37;
  font-size: 1.2rem;
  font-weight: 700;
}
.online-schedule-title::before {
  position: absolute;
  inset: 0 auto 0 0;
  width: 5px;
  background: linear-gradient(180deg, #06a28e, #087b70);
  content: "";
}
.online-schedule-title-icon {
  display: grid;
  flex: 0 0 2.8rem;
  place-items: center;
  width: 2.8rem;
  height: 2.8rem;
  border: 1px solid #d1e9e1;
  border-radius: 1rem;
  background: linear-gradient(145deg, #e2f4ee, #f1faf7);
  color: #087f73;
  font-size: 1.15rem;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
}
.online-schedule-title-copy {
  display: grid;
  gap: 0.15rem;
  color: #173b37;
  line-height: 1.35;
}
.online-schedule-title-copy small {
  color: #526b65;
  font-size: 0.88rem;
  font-weight: 400;
}
.online-exam-date-mobile {
  display: none;
}
.online-exam-table-wrap {
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
}
.online-exam-table {
  width: 100%;
  margin: 0;
  border-collapse: separate;
  border-spacing: 0;
  color: #243b36;
  table-layout: fixed;
}
.online-exam-table th,
.online-exam-table td {
  padding: 0.78rem 0.9rem;
  border-right: 1px solid #e8e1d9;
  border-bottom: 1px solid #e8e1d9;
  vertical-align: middle;
}
.online-exam-table tr > :first-child {
  border-left: 0;
}
.online-exam-table tr > :last-child {
  border-right: 0;
}
.online-exam-table-head th {
  background: #edf5f2;
  color: #173b37;
  font-size: 0.95rem;
  font-weight: 750;
  text-align: left;
}
.online-exam-date-cell {
  width: 23%;
  min-width: 14rem;
  background: linear-gradient(145deg, #e7f5f0 0%, #f3faf7 100%) !important;
  color: #173b37;
  font-size: 1.08rem;
  font-weight: 750;
  text-align: center;
}
.online-exam-table-head .online-exam-date-cell {
  text-align: center;
  color: #173b37;
}
.online-exam-date-cell span {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.85rem;
  max-width: 17rem;
  margin-inline: auto;
  line-height: 1.6;
}
.online-exam-date-cell i {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border: 1px solid #d1e9e1;
  border-radius: 1rem;
  background: #fff;
  color: #087f73;
  font-size: 1.2rem;
  box-shadow: 0 0.3rem 0.8rem rgba(8, 127, 115, 0.08);
}
.online-exam-time-heading,
.online-exam-table td:first-child {
  width: 24%;
}
.online-exam-table td {
  background: #fff;
  font-size: 0.94rem;
  line-height: 1.55;
}
.online-exam-time-cell {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  min-width: 0;
}
.online-exam-step-index {
  display: grid;
  flex: 0 0 1.8rem;
  place-items: center;
  width: 1.8rem;
  height: 1.8rem;
  border: 1px solid #e1ebe7;
  border-radius: 50%;
  background: #f2f6f4;
  color: #45645d;
  font-size: 0.68rem;
  font-weight: 800;
}
.online-exam-table td time {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 7.7rem;
  min-height: 2.25rem;
  padding: 0.38rem 0.55rem;
  border: 1px solid #d3e9e2;
  border-radius: 0.75rem;
  background: #eaf5f1;
  color: #076f64;
  font-size: 0.88rem;
  font-weight: 800;
  white-space: nowrap;
}
.online-exam-table tr:nth-child(2) td {
  background: #f5faf8;
}
.online-exam-table tr:nth-child(2) td time {
  border-color: #087f73;
  background: linear-gradient(135deg, #078778, #0b9e8b);
  color: #fff;
  box-shadow: 0 0.3rem 0.8rem rgba(8, 127, 115, 0.18);
}
.online-exam-table tr:nth-child(2) .online-exam-step-index {
  border-color: #087f73;
  background: #087f73;
  color: #fff;
}
.online-exam-table td strong {
  display: block;
  color: #173b37;
  font-size: 0.95rem;
  line-height: 1.4;
}
.online-exam-table td small {
  display: block;
  margin-top: 0.18rem;
  color: #536660;
  font-size: 0.86rem;
  line-height: 1.45;
}
@media (hover: hover) and (min-width: 768px) {
  .online-schedule-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 1.2rem 2.8rem rgba(17, 73, 62, 0.14);
  }
  .online-exam-table tbody tr:not(.online-exam-table-head):hover td {
    background: #f3faf7;
  }
}
@media (prefers-reduced-motion: reduce) {
  .online-schedule-card {
    transition: none;
  }
}
@media (max-width: 767.98px) {
  .online-schedule-title {
    gap: 0.7rem;
    padding: 0.9rem 1rem;
    font-size: 1.05rem;
  }
  .online-schedule-title-icon {
    flex-basis: 2.55rem;
    width: 2.55rem;
    height: 2.55rem;
    font-size: 1.05rem;
  }
  .online-schedule-title-copy small {
    font-size: 0.8rem;
  }
  .online-exam-date-mobile {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    margin: 0;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid #e8efec;
    background: #f8fbfa;
    color: #35534c;
    font-size: 0.88rem;
    font-weight: 700;
  }
  .online-exam-date-mobile i {
    color: #087f73;
  }
  .online-exam-table-wrap {
    overflow: visible;
  }
  .online-exam-table,
  .online-exam-table tbody {
    display: block;
    width: 100%;
  }
  .online-exam-table-head {
    display: grid;
    grid-template-columns: minmax(7rem, 0.8fr) minmax(0, 2fr);
    margin: 0 0.75rem;
  }
  .online-exam-table-head .online-exam-date-cell {
    display: none;
  }
  .online-exam-table-head .online-exam-time-heading,
  .online-exam-table-head th:last-child {
    display: block;
    width: auto;
    min-width: 0;
    padding: 0.6rem 0.7rem;
    border-top: 0;
    border-bottom: 1px solid #dfe9e5;
  }
  .online-exam-table-head .online-exam-time-heading {
    border-left: 1px solid #e8e1d9;
  }
  .online-exam-table tr:not(.online-exam-table-head) {
    display: grid;
    grid-template-columns: minmax(7rem, 0.8fr) minmax(0, 2fr);
    margin: 0.55rem 0.75rem;
    overflow: hidden;
    border: 1px solid #e5eeeb;
    border-radius: 0.65rem;
    background: #fff;
  }
  .online-exam-table tr:not(.online-exam-table-head) td {
    display: block;
    min-width: 0;
    padding: 0.65rem 0.7rem;
    border: 0;
    background: transparent;
    font-size: 0.82rem;
  }
  .online-exam-table tr:not(.online-exam-table-head) td:first-child {
    border-right: 1px solid #e8efec;
  }
  .online-exam-table td time {
    min-width: 0;
    width: 100%;
    padding-inline: 0.35rem;
    font-size: 0.76rem;
  }
  .online-exam-step-index {
    display: none;
  }
  .online-exam-table td strong {
    font-size: 0.84rem;
  }
  .online-exam-table td small {
    font-size: 0.76rem;
  }
}

.online-check-list {
  display: grid;
  gap: 0.68rem;
  margin: 0 0 1.1rem;
  padding: 0;
  list-style: none;
}
.online-check-list li {
  position: relative;
  padding-left: 1.65rem;
  color: #40524f;
  font-size: 0.9rem;
  line-height: 1.6;
}
.online-check-list li::before {
  position: absolute;
  top: 0.08rem;
  left: 0;
  display: grid;
  place-items: center;
  width: 1.15rem;
  height: 1.15rem;
  border-radius: 50%;
  background: #e6f5f0;
  color: var(--online-card-accent);
  content: "✓";
  font-size: 0.7rem;
  font-weight: 800;
}
.online-document-note {
  display: grid;
  gap: 0.25rem;
  padding: 0.9rem 1rem;
  border: 1px solid #f0e9dc;
  border-radius: 0.8rem;
  background: #fcf9f3;
  color: #46534f;
  font-size: 0.88rem;
}
.online-document-note i {
  margin-right: 0.35rem;
  color: #a87627;
}
.online-document-note span {
  padding-left: 1.45rem;
  color: var(--online-card-muted);
}

.online-payment-section {
  scroll-margin-top: 6rem;
}
.online-payment-title {
  margin-bottom: 1.25rem;
}
.online-payment-groups {
  display: grid;
  gap: 1.25rem;
}
.online-payment-group {
  padding: clamp(1rem, 2.2vw, 1.6rem);
}
.online-payment-group-heading {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin-bottom: 1rem;
}
.online-group-icon {
  display: grid;
  flex: 0 0 2.65rem;
  place-items: center;
  width: 2.65rem;
  height: 2.65rem;
  border-radius: 0.85rem;
  background: #eaf7f3;
  color: var(--online-card-accent);
  font-size: 1.1rem;
}
.online-payment-group-heading h4 {
  margin: 0 0 0.18rem;
  color: var(--online-card-ink);
  font-size: 1.08rem;
  font-weight: 750;
}
.online-payment-group-heading p {
  margin: 0;
  color: var(--online-card-muted);
  font-size: 0.86rem;
}
.online-full-scholarship {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin-bottom: 0.9rem;
  padding: 0.9rem 1rem;
  border: 1px solid #d6ecdf;
  border-radius: 0.85rem;
  background: #f2faf5;
}
.online-full-icon {
  display: grid;
  flex: 0 0 2.5rem;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 0.75rem;
  background: #e0f1e5;
  color: #438858;
}
.online-full-scholarship strong,
.online-full-scholarship span:not(.online-full-icon) {
  display: block;
}
.online-full-scholarship strong {
  color: #315f40;
  font-size: 0.92rem;
}
.online-full-scholarship div span {
  margin-top: 0.12rem;
  color: #647c6b;
  font-size: 0.83rem;
  line-height: 1.5;
}
.online-plan-card {
  height: 100%;
  padding: clamp(1rem, 1.8vw, 1.3rem);
  border: 1px solid #e4ece9;
  border-radius: 1rem;
  background: #fff;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    transform 0.2s ease;
}
.online-plan-card:hover {
  border-color: #b9ded3;
  box-shadow: 0 0.6rem 1.6rem rgba(20, 74, 64, 0.07);
  transform: translateY(-2px);
}
.online-plan-card h5 {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0 0 0.85rem;
  color: #23453f;
  font-size: 0.98rem;
  font-weight: 750;
}
.online-plan-card h5 span {
  display: grid;
  flex: 0 0 2rem;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 0.65rem;
  background: #fff6df;
  color: #c08b20;
}
.online-plan-card h5 small {
  display: block;
  margin-top: 0.1rem;
  color: var(--online-card-muted);
  font-size: 0.78rem;
  font-weight: 500;
}
.online-plan-card.is-featured {
  border-color: #9fd8c6;
  background: linear-gradient(180deg, #effaf6 0%, #fff 38%);
  box-shadow: 0 0.6rem 1.6rem rgba(4, 153, 135, 0.1);
}
.online-plan-card.is-featured h5 span {
  background: #049987;
  color: #fff;
}
.online-plan-card.is-featured .online-plan-totals > div {
  background: #e6f6f0;
}
.online-plan-totals {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.6rem;
  margin-bottom: 0.85rem;
}
.online-plan-totals > div {
  min-width: 0;
  padding: 0.7rem;
  border-radius: 0.7rem;
  background: #f4f8f6;
}
.online-plan-totals span {
  display: block;
  margin-bottom: 0.2rem;
  color: var(--online-card-muted);
  font-size: 0.75rem;
}
.online-plan-totals strong {
  display: block;
  color: var(--online-card-ink);
  font-size: clamp(1.02rem, 1.5vw, 1.28rem);
  line-height: 1.25;
}
.online-plan-totals small {
  margin-left: 0.2rem;
  color: #6c7e79;
  font-size: 0.7rem;
  font-weight: 500;
}
.online-installment-list {
  display: grid;
  gap: 0.4rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.online-installment-list li {
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.55rem;
  padding: 0.52rem 0.6rem;
  border: 1px solid #edf2f0;
  border-radius: 0.65rem;
}
.online-installment-number {
  display: grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 0.55rem;
  background: #eaf7f3;
  color: #087e73;
  font-size: 0.73rem;
  font-weight: 800;
}
.online-installment-date {
  color: #52645f;
  font-size: 0.8rem;
}
.online-installment-list li strong {
  color: #23453f;
  font-size: 0.8rem;
  white-space: nowrap;
}

@media (max-width: 767.98px) {
  .online-event-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 575.98px) {
  .online-application-cards {
    padding-block: 3rem;
  }
  .online-exam-fee-banner {
    gap: 0.65rem;
    padding: 2rem 1rem;
    background-position: center;
  }
  .online-exam-fee-banner p {
    margin-bottom: 0.9rem;
    font-size: 0.88rem;
  }
  .online-exam-fee-cta {
    min-height: 2.9rem;
    padding: 0.75rem 1.1rem;
    font-size: 0.9rem;
  }
  .online-registration-card,
  .online-info-card,
  .online-payment-group {
    border-radius: 1rem;
  }
  .online-registration-details {
    padding: 1rem;
  }
  .online-event-grid {
    gap: 0.45rem;
  }
  .online-event-item {
    gap: 0.5rem;
    padding: 0.62rem;
  }
  .online-event-date {
    font-size: 0.7rem;
  }
  .online-event-item strong {
    font-size: 0.82rem;
  }
  .online-card-heading,
  .online-payment-title {
    align-items: flex-start;
    gap: 0.65rem;
  }
  .online-card-heading {
    flex-wrap: wrap;
  }
  .online-card-icon {
    flex-basis: 2.45rem;
    width: 2.45rem;
    height: 2.45rem;
  }
  .online-payment-group {
    padding: 0.9rem;
  }
  .online-plan-totals {
    gap: 0.45rem;
  }
  .online-plan-totals > div {
    padding: 0.6rem;
  }
  .online-installment-list li {
    grid-template-columns: 1.75rem minmax(0, 1fr);
  }
  .online-installment-list li strong {
    grid-column: 2;
  }
}

@media (prefers-reduced-motion: reduce) {
  .online-plan-card,
  .online-event-item {
    transform: none;
    transition: none;
  }
}

/* Desktop layout follows the featured-card treatment from index-v2. */
@media (min-width: 992px) {
  .online-exam-fee-banner {
    gap: 0.5rem;
    margin-bottom: 0.9rem;
    padding: clamp(1.75rem, 3.5vw, 2.5rem) clamp(1.25rem, 3vw, 2rem) 1rem;
  }
  .online-exam-fee-banner p {
    margin-bottom: 0.55rem;
  }
  .online-registration-card {
    overflow: hidden;
    border-color: #cbe5da;
    border-radius: 1.5rem;
    background: #edf8f4;
    box-shadow: 0 13px 35px rgba(23, 76, 55, 0.09);
    transition:
      box-shadow 0.25s ease,
      transform 0.25s ease;
  }
  .online-registration-card:hover {
    box-shadow: 0 18px 42px rgba(23, 76, 55, 0.14);
    transform: translateY(-3px);
  }
  .online-registration-details {
    padding: 1.7rem clamp(1.5rem, 2.8vw, 2.6rem) 1.6rem;
    background: #fff;
  }
  .online-event-grid {
    position: relative;
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    padding-left: 4.25rem;
  }
  .online-event-grid::before {
    position: absolute;
    top: 2.05rem;
    bottom: 2.05rem;
    left: 1.05rem;
    width: 3px;
    border-radius: 3px;
    background: linear-gradient(180deg, #049987, #54c3a5 78%, #dcefe7);
    content: "";
  }
  .online-event-item {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    min-height: 4.15rem;
    gap: 0;
    overflow: visible;
    padding: 0.7rem 1rem 0.7rem 0;
    border: 0;
    border-bottom: 1px solid #e8efec;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    transition:
      background 0.22s ease,
      transform 0.22s ease;
  }
  .online-event-item::before {
    position: absolute;
    top: 50%;
    left: -3.2rem;
    width: 3.2rem;
    height: 2px;
    background: linear-gradient(90deg, #75cbb5, #d4e9e1);
    content: "";
    transition:
      background 0.22s ease,
      height 0.22s ease;
  }
  .online-event-item:hover {
    border-color: #d7e9e2;
    border-radius: 0.75rem;
    background: linear-gradient(90deg, #f5fbf8, rgba(245, 251, 248, 0));
    box-shadow: none;
    transform: translateX(4px);
  }
  .online-event-item:hover::before {
    height: 3px;
    background: linear-gradient(90deg, #049987, #5cc6a6);
  }
  .online-event-index {
    position: absolute;
    z-index: 1;
    top: 50%;
    left: -4.25rem;
    width: 2.1rem;
    height: 2.1rem;
    flex-basis: 2.1rem;
    transform: translateY(-50%);
    border: 3px solid #fff;
    border-radius: 50%;
    background: #049987;
    color: #fff;
    font-size: 0.68rem;
    box-shadow:
      0 0 0 2px #8ed3be,
      0 3px 9px rgba(0, 94, 79, 0.18);
    transition:
      background 0.22s ease,
      box-shadow 0.22s ease,
      transform 0.22s ease;
  }
  .online-event-item:hover .online-event-index {
    transform: translateY(-50%) scale(1.08);
    background: #007965;
    box-shadow:
      0 0 0 3px #b1e4d3,
      0 5px 12px rgba(0, 94, 79, 0.23);
  }
  .online-event-copy {
    display: grid;
    grid-template-columns: minmax(15rem, 0.38fr) minmax(0, 1fr);
    align-items: center;
    column-gap: 1.35rem;
  }
  .online-event-date {
    grid-row: 1 / span 2;
    grid-column: 1;
    justify-self: start;
    margin: 0;
    padding: 0.38rem 0.72rem;
    border: 1px solid #d9efe7;
    border-radius: 999px;
    background: #eff9f5;
    color: #087e73;
    font-size: 0.78rem;
  }
  .online-event-item strong {
    grid-row: 1;
    grid-column: 2;
    font-size: 0.96rem;
  }
  .online-event-item small {
    grid-row: 2;
    grid-column: 2;
    margin-top: 0.08rem;
    font-size: 0.81rem;
  }
  .online-event-travel {
    min-height: 4.35rem;
    grid-column: auto;
    align-items: center;
    margin-top: 0.35rem;
    padding: 0.7rem 1rem 0.7rem 0;
    border: 1px solid #c7e5d7;
    border-radius: 0.9rem;
    background: linear-gradient(100deg, #eff9f4, #f8fcfa);
  }
  .online-event-travel .online-event-copy {
    flex: initial;
  }
  .online-event-travel .online-event-index {
    background: #087e73;
  }
  .online-timeline-notes ul {
    grid-template-columns: 1fr;
    gap: 0.2rem;
    font-size: 0.79rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .online-registration-card,
  .online-exam-fee-cta,
  .online-event-item,
  .online-event-item::before,
  .online-event-index {
    animation: none !important;
    transition: none !important;
  }
}

/* Header: solid white at the top of the page, frosted glass once scrolled.
   The blur sits on a pseudo-element so the fixed mobile nav keeps the viewport
   as its containing block. */
.index-page .header,
.index-page.scrolled .header {
  --background-color: transparent;
  background-color: transparent;
  box-shadow: none;
}
.index-page .header::before {
  position: absolute;
  z-index: -1;
  inset: 0;
  border-bottom: 1px solid #e6efec;
  background: #ffffff;
  content: "";
  transition:
    background-color 0.35s ease,
    border-color 0.35s ease,
    box-shadow 0.35s ease;
}
.index-page.scrolled .header::before {
  border-bottom-color: rgba(255, 255, 255, 0.6);
  background: rgba(255, 255, 255, 0.55);
  box-shadow: 0 8px 24px rgba(20, 74, 64, 0.08);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  backdrop-filter: blur(14px) saturate(160%);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .index-page.scrolled .header::before {
    background: rgba(255, 255, 255, 0.92);
  }
}

/* Objectives */
.elde-objectives {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
}
.elde-objectives-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 1rem;
  padding: 0.35rem 0.9rem;
  border: 1px solid #cdeae0;
  border-radius: 999px;
  background: #eaf7f3;
  color: #087e73;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.elde-objectives-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  width: 100%;
  max-width: 64rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.elde-objectives-list li {
  position: relative;
  display: flex;
  align-items: center;
  gap: 1rem;
  overflow: hidden;
  padding: 1.15rem 1.35rem;
  border: 1px solid #dfebe7;
  border-radius: 1.1rem;
  background: #fff;
  box-shadow: 0 0.75rem 2rem rgba(20, 74, 64, 0.06);
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    transform 0.2s ease;
}
.elde-objectives-list li::before {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 4px;
  background: linear-gradient(180deg, #049987, #5cc6a6);
  content: "";
}
.elde-objectives-list li:hover {
  border-color: #b9ded3;
  box-shadow: 0 1rem 2.4rem rgba(20, 74, 64, 0.1);
  transform: translateY(-2px);
}
.elde-objectives-icon {
  display: grid;
  flex: 0 0 3rem;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border-radius: 0.9rem;
  background: #eaf7f3;
  color: #049987;
  font-size: 1.35rem;
}
.elde-objectives-list p {
  margin: 0;
  color: #3d4f4b;
  font-size: 0.98rem;
  line-height: 1.6;
}
.elde-objectives-list strong {
  color: #087e73;
}

/* Destination cities grouped by programme length */
.elde-city-groups {
  display: grid;
  gap: 1.5rem;
}
.elde-city-group {
  padding: clamp(1rem, 2.4vw, 1.75rem);
  border: 1px solid #dfebe7;
  border-radius: 1.25rem;
  background: #fff;
  box-shadow: 0 1rem 2.8rem rgba(20, 74, 64, 0.06);
}
.elde-city-group-heading {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.25rem;
  padding-bottom: 1rem;
  border-bottom: 1px dashed #d6e7e1;
}
.elde-city-weeks {
  display: flex;
  flex: 0 0 4.2rem;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 4.2rem;
  height: 4.2rem;
  border-radius: 1rem;
  background: linear-gradient(135deg, #049987, #3fb99a);
  box-shadow: 0 0.5rem 1.2rem rgba(4, 153, 135, 0.22);
  color: #fff;
  font-size: 0.72rem;
  line-height: 1.1;
}
.elde-city-weeks strong {
  font-size: 1.6rem;
  font-weight: 800;
}
.elde-city-group-4w .elde-city-weeks {
  background: linear-gradient(135deg, #0b6f8f, #2fa3c2);
  box-shadow: 0 0.5rem 1.2rem rgba(11, 111, 143, 0.22);
}
.elde-city-group-heading h3 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 0.2rem;
  color: #173b37;
  font-size: 1.2rem;
  font-weight: 750;
}
.elde-city-group-heading h3 span {
  padding: 0.15rem 0.6rem;
  border-radius: 999px;
  background: #eaf7f3;
  color: #087e73;
  font-size: 0.78rem;
  font-weight: 700;
}
.elde-city-group-4w .elde-city-group-heading h3 span {
  background: #e6f3f8;
  color: #0b6f8f;
}
.elde-city-group-heading p {
  margin: 0;
  color: #71817d;
  font-size: 0.88rem;
}
.elde-city-card {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  height: 100%;
  padding: 0.85rem 1rem;
  border: 1px solid #e4ece9;
  border-radius: 1rem;
  background: #fbfdfc;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    transform 0.2s ease;
}
.elde-city-card:hover {
  border-color: #b9ded3;
  background: #fff;
  box-shadow: 0 0.6rem 1.6rem rgba(20, 74, 64, 0.08);
  transform: translateY(-2px);
}
.elde-city-flag {
  display: grid;
  flex: 0 0 3.5rem;
  place-items: center;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 0.9rem;
  background: color-mix(in srgb, var(--accent-color, #049987), transparent 82%);
}
.elde-city-flag img {
  width: 2.6rem;
  height: 2.6rem;
  object-fit: contain;
}
.elde-city-copy {
  min-width: 0;
}
.elde-city-copy h4 {
  margin: 0 0 0.3rem;
  color: #173b37;
  font-size: 1.05rem;
  font-weight: 750;
}
.elde-city-copy h4 small {
  color: #71817d;
  font-size: 0.8rem;
  font-weight: 500;
}
.elde-city-date {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  background: #eff9f5;
  color: #087e73;
  font-size: 0.78rem;
  font-weight: 600;
}
.elde-city-group-4w .elde-city-date {
  background: #eef7fa;
  color: #0b6f8f;
}
.elde-city-footnote {
  margin: 1rem 0 0;
  color: #71817d;
  font-size: 0.82rem;
  text-align: center;
}

@media (max-width: 767.98px) {
  .elde-objectives-list {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .elde-objectives-list li,
  .elde-city-card {
    transform: none !important;
    transition: none !important;
  }
}

/* Exam overview (fee, key dates, exam-day schedule, eligibility) placed
   directly after the "2 opportunities" section. */
.online-exam-overview {
  padding-block: clamp(2.5rem, 5vw, 4rem);
  background: linear-gradient(180deg, #fff 0%, #f6faf9 100%);
  scroll-margin-top: 5rem;
}

.online-exam-overview .online-exam-fee-banner {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(1rem, 3vw, 2.25rem);
  margin-bottom: 1.5rem;
  padding: clamp(1.4rem, 3vw, 2rem) clamp(1.25rem, 3.5vw, 2.5rem);
  background:
    radial-gradient(circle at 92% -20%, rgba(255, 255, 255, 0.18) 0 7rem, transparent 7rem),
    radial-gradient(circle at 4% 130%, rgba(255, 255, 255, 0.12) 0 6rem, transparent 6rem),
    linear-gradient(120deg, #049987 0%, #078a7d 55%, #0b6f8f 100%);
  box-shadow: 0 1.2rem 2.6rem rgba(4, 120, 108, 0.22);
  color: #fff;
  text-align: left;
}
.online-exam-fee-price {
  display: flex;
  align-items: center;
  gap: 0.9rem;
}
.online-exam-fee-icon {
  display: grid;
  flex: 0 0 3.4rem;
  place-items: center;
  width: 3.4rem;
  height: 3.4rem;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 1rem;
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
  font-size: 1.5rem;
}
.online-exam-overview .online-exam-fee-banner h2 {
  display: grid;
  margin: 0;
  color: rgba(255, 255, 255, 0.88);
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.3;
}
.online-exam-overview .online-exam-fee-banner h2 span {
  margin: 0;
  color: #fff;
  font-size: clamp(2rem, 3.4vw, 2.6rem);
  font-weight: 800;
  line-height: 1.1;
}
.online-exam-overview .online-exam-fee-banner h2 small {
  font-size: 1rem;
  font-weight: 600;
}
.online-exam-overview .online-exam-fee-banner p {
  max-width: none;
  margin: 0;
  padding-left: clamp(1rem, 2.5vw, 2rem);
  border-left: 1px solid rgba(255, 255, 255, 0.3);
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.95rem;
}
.online-exam-overview .online-exam-fee-banner p strong {
  color: #fff;
}
.online-exam-overview .online-exam-fee-cta {
  border-color: #fff;
  background: #fff;
  box-shadow: 0 0.55rem 1.35rem rgba(0, 60, 52, 0.2);
  color: #077a6e;
  white-space: nowrap;
}
.online-exam-overview .online-exam-fee-cta:hover {
  border-color: #fff;
  background: #f0fbf7;
  color: #055f56;
}
.online-exam-overview .online-exam-fee-cta:focus-visible {
  outline-color: rgba(255, 255, 255, 0.6);
}

.online-exam-overview .online-registration-card {
  border-color: #d5e8e2;
  border-radius: 1.5rem;
}
.online-registration-heading,
.online-exam-overview .online-qualification-card .online-card-heading {
  position: relative;
  margin: 0;
  padding: 1.05rem clamp(1.15rem, 2.5vw, 1.55rem);
  border-bottom: 1px solid #d9eae4;
  background: linear-gradient(110deg, #edf8f4 0%, #f8fbfa 68%, #fff 100%);
}
.online-registration-heading::before,
.online-exam-overview .online-qualification-card .online-card-heading::before {
  position: absolute;
  inset: 0 auto 0 0;
  width: 5px;
  background: linear-gradient(180deg, #06a28e, #087b70);
  content: "";
}

.online-exam-overview .online-timeline-notes {
  margin: 0 0 1.5rem;
  padding: 0.9rem 1.1rem;
  border: 1px solid #f7d4db;
  border-radius: 1rem;
  background: #fff7f8;
}
.online-exam-overview .online-timeline-notes > strong {
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.online-exam-overview .online-detail-row {
  margin-bottom: 0;
}
.online-exam-overview .online-qualification-card {
  overflow: hidden;
  padding: 0;
  border-color: #d5e8e2;
  border-radius: 1.5rem;
  box-shadow: 0 0.9rem 2.2rem rgba(17, 73, 62, 0.09);
}
.online-exam-overview .online-check-list {
  margin: 0;
  padding: 1.25rem clamp(1.15rem, 2.5vw, 1.55rem) 1rem;
}
.online-exam-overview .online-document-note {
  margin: 0 clamp(1.15rem, 2.5vw, 1.55rem) 1.4rem;
}

@media (min-width: 1200px) {
  .online-exam-overview .online-exam-date-cell {
    min-width: 11rem;
  }
}

@media (max-width: 991.98px) {
  .online-exam-overview .online-exam-fee-banner {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
  }
  .online-exam-overview .online-exam-fee-banner p {
    padding: 0.9rem 0 0;
    border-top: 1px solid rgba(255, 255, 255, 0.3);
    border-left: 0;
  }
}

/* Exam-day schedule: plain time text, no step numbers or pill backgrounds. */
.online-exam-table td time,
.online-exam-table tr:nth-child(2) td time {
  min-width: 0;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  color: #076f64;
  font-size: 0.95rem;
  font-weight: 750;
}
.online-exam-table tr:nth-child(2) td {
  background: #fff;
}
@media (max-width: 767.98px) {
  .online-exam-table td time {
    width: auto;
    font-size: 0.82rem;
  }
}
/* The site-wide stacked-table rule prints each data-label before the cell;
   this table already has its own header row on mobile. */
@media (max-width: 767.98px) {
  .online-exam-table td::before {
    content: none;
  }
}
@media (max-width: 767.98px) {
  .online-exam-table tr:not(.online-exam-table-head) td:first-child {
    width: auto;
  }
  .online-exam-table td time {
    justify-content: flex-start;
    white-space: normal;
  }
}

/* Project payment: one section per city group so each table reveals on its own. */
.online-application-cards.online-payment-block {
  padding-block: 0 1.25rem;
  background: #f6faf9;
}
.online-application-cards.online-payment-block.is-first {
  padding-top: clamp(2.5rem, 5vw, 4rem);
}
.online-application-cards.online-payment-block.is-last {
  padding-bottom: clamp(2.5rem, 5vw, 4rem);
}
.online-payment-block .online-payment-title {
  margin-bottom: 1.25rem;
}

.online-payment-block .online-full-scholarship {
  margin-bottom: 1rem;
  padding: 1rem 1.25rem;
  border-color: #b9e2d4;
  background: linear-gradient(110deg, #e9f7f1 0%, #f5fbf8 70%, #fff 100%);
}
.online-payment-block .online-full-icon {
  background: #049987;
  color: #fff;
}
.online-payment-block .online-full-scholarship > div {
  flex: 1 1 auto;
  min-width: 0;
}
.online-payment-block .online-full-scholarship strong {
  color: #0f5b4f;
  font-size: 1rem;
}
.online-full-amount {
  flex: 0 0 auto;
  margin: 0;
  color: #0f5b4f;
  font-size: 0.85rem;
  font-weight: 600;
  text-align: right;
}
.online-full-amount small {
  display: block;
  color: #5c7d73;
  font-size: 0.75rem;
  font-weight: 500;
}
.online-full-amount b {
  margin-right: 0.2rem;
  color: #077a6e;
  font-size: clamp(1.3rem, 2.2vw, 1.6rem);
  font-weight: 800;
}

.online-installment-date em {
  color: #087e73;
  font-style: normal;
  font-weight: 600;
}

@media (max-width: 575.98px) {
  .online-payment-block .online-full-scholarship {
    flex-wrap: wrap;
  }
  .online-full-amount {
    width: 100%;
    padding-top: 0.6rem;
    border-top: 1px dashed #c9e6da;
    text-align: left;
  }
  .online-full-amount small {
    display: inline;
    margin-right: 0.4rem;
  }
}
@media (max-width: 575.98px) {
  .online-payment-block .online-full-scholarship > div {
    flex: 1 1 0;
  }
}

/* Hero register button */
.hero .btn.elde-hero-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  min-height: 3.6rem;
  padding: 0.95rem 2.4rem;
  border-radius: 1rem;
  box-shadow: 0 0.8rem 1.8rem rgba(4, 153, 135, 0.28);
  font-size: 1.2rem;
  font-weight: 700;
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}
.hero .btn.elde-hero-cta i {
  font-size: 1.3rem;
}
.hero .btn.elde-hero-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 1rem 2.2rem rgba(4, 153, 135, 0.34);
}
@media (max-width: 575.98px) {
  .hero .btn.elde-hero-cta {
    min-height: 3.2rem;
    padding: 0.85rem 1.8rem;
    font-size: 1.05rem;
  }
}
@media (prefers-reduced-motion: reduce) {
  .hero .btn.elde-hero-cta {
    transition: none;
  }
}

/* Scroll reveal for the payment tables (see the script in main-elde-online.php). */
.elde-reveal-ready .elde-reveal {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity 0.5s ease,
    transform 0.5s ease;
  transition-delay: var(--reveal-delay, 0s);
}
.elde-reveal-ready .elde-reveal.is-visible {
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .elde-reveal-ready .elde-reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* 130,000 contribution (top scorer below 90 points): full-width card. */
.online-plan-card.is-wide {
  border-color: #f0dca8;
  background: linear-gradient(180deg, #fffaf0 0%, #fff 45%);
}
.online-plan-card.is-wide h5 span {
  background: #f5b82e;
  color: #fff;
}
.online-plan-card.is-wide .online-plan-totals > div {
  background: #fdf5e3;
}
.online-plan-condition {
  display: flex;
  align-items: flex-start;
  gap: 0.45rem;
  margin: 0 0 0.85rem;
  padding: 0.65rem 0.8rem;
  border: 1px solid #f3e2b6;
  border-radius: 0.7rem;
  background: #fffbf1;
  color: #7a5a14;
  font-size: 0.84rem;
  line-height: 1.55;
}
.online-plan-condition i {
  margin-top: 0.15rem;
  color: #d39b1c;
}
@media (min-width: 992px) {
  .online-plan-card.is-wide {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas:
      "title list"
      "condition list"
      "totals list";
    grid-template-rows: auto auto 1fr;
    column-gap: 1.25rem;
  }
  .online-plan-card.is-wide h5 {
    grid-area: title;
  }
  .online-plan-card.is-wide .online-plan-condition {
    grid-area: condition;
  }
  .online-plan-card.is-wide .online-plan-totals {
    grid-area: totals;
    align-self: end;
    margin-bottom: 0;
  }
  .online-plan-card.is-wide .online-installment-list {
    grid-area: list;
    align-self: center;
  }
}

/* Installment rows: number | date + "ชำระค่าธรรมเนียมโครงการ ครั้งที่ N ..." */
.online-installment-list li {
  grid-template-columns: 2rem minmax(0, 1fr);
  grid-template-areas:
    "number date"
    "number detail";
  row-gap: 0.1rem;
  align-items: center;
  padding: 0.6rem 0.75rem;
}
.online-installment-number {
  grid-area: number;
}
.online-installment-date {
  grid-area: date;
  color: #173b37;
  font-size: 0.86rem;
  font-weight: 700;
}
.online-installment-detail {
  grid-area: detail;
  color: #52645f;
  font-size: 0.82rem;
  line-height: 1.5;
}
.online-installment-detail strong {
  color: #173b37;
  font-size: inherit;
  white-space: nowrap;
}
.online-installment-detail em {
  color: #087e73;
  font-style: normal;
  font-weight: 600;
}
.online-plan-card h5 small {
  font-size: 0.8rem;
  line-height: 1.45;
}
.online-plan-note {
  margin: 0.8rem 0 0;
  color: #e0193f;
  font-size: 0.78rem;
  line-height: 1.55;
}
.online-plan-refund {
  margin-top: 1rem;
}
@media (max-width: 575.98px) {
  .online-installment-list li {
    grid-template-columns: 1.75rem minmax(0, 1fr);
  }
}

/* Payment schedules: dates and per-installment amounts, without summary boxes. */
.online-payment-block .online-payment-group {
  padding: clamp(20px, 2.5vw, 32px);
}
.online-payment-block .online-plan-card {
  overflow: hidden;
  padding: 0;
  border-color: #e3e8e7;
  border-radius: 18px;
  box-shadow: none;
}
.online-payment-block .online-plan-card:hover {
  transform: none;
  border-color: #c9d9d4;
}
.online-plan-heading {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 24px 22px 20px;
  background: #f7f9f8;
  border-bottom: 1px solid #e8edeb;
}
.online-plan-heading-icon {
  display: grid;
  place-items: center;
  flex: 0 0 38px;
  height: 38px;
  border-radius: 12px;
  background: #fff0ca;
  color: #a9811e;
  font-size: 20px;
}
.online-payment-block .online-plan-heading h5 {
  display: block;
  margin: 0 0 6px;
  color: #292d32;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.6;
}
.online-plan-heading p {
  margin: 0;
  color: #73777d;
  font-size: 13px;
  line-height: 1.8;
}
.online-plan-heading p strong { color: #50565c; font-weight: 600; }
.online-installment-columns {
  display: flex;
  justify-content: space-between;
  padding: 18px 22px 10px;
  color: #73777d;
  font-size: 12px;
}
.online-payment-block .online-installment-list {
  display: grid;
  gap: 0;
  margin: 0 22px;
  padding: 0;
}
.online-payment-block .online-installment-list li {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) auto;
  grid-template-areas: 'number date amount' 'number detail amount';
  column-gap: 12px;
  row-gap: 4px;
  align-items: center;
  padding: 18px 0;
  border: 0;
  border-bottom: 1px solid #edf0ee;
  border-radius: 0;
  background: transparent;
}
.online-payment-block .online-installment-list li:last-child { border-bottom: 0; }
.online-payment-block .online-installment-number {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #f1f4f3;
  color: #626b67;
  font-size: 12px;
}
.online-payment-block .online-installment-date {
  color: #353b3f;
  font-size: 14px;
  line-height: 1.7;
}
.online-payment-block .online-installment-detail {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  color: #80858a;
  font-size: 12px;
}
.online-payment-block .online-installment-detail em {
  padding: 2px 7px;
  border-radius: 5px;
  background: #e7f5ef;
  color: #16745d;
  font-size: 11px;
  font-style: normal;
}
.online-installment-amount {
  grid-area: amount;
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: 5px;
  white-space: nowrap;
}
.online-payment-block .online-installment-amount strong {
  color: #292d32;
  font-size: 21px;
  font-weight: 700;
}
.online-installment-amount small { color: #80858a; font-size: 12px; }
.online-payment-block .online-plan-card > .online-plan-note {
  margin: 4px 22px 22px;
  padding-top: 16px;
  border-top: 1px solid #e8edeb;
  color: #d32940;
  font-size: 12px;
  line-height: 1.8;
}
.online-payment-block .online-plan-refund {
  margin: 20px 0 0;
  padding: 14px 18px;
  border-radius: 10px;
  background: #f7f8f7;
  color: #d32940;
  font-size: 12px;
  line-height: 1.9;
}
.online-payment-block .online-plan-card.is-wide { display: block; }
.online-payment-block .online-plan-condition { margin: 18px 22px 0; }
@media (max-width: 575.98px) {
  .online-plan-heading { padding: 20px 16px 16px; gap: 10px; }
  .online-payment-block .online-plan-heading h5 { font-size: 16px; }
  .online-installment-columns { padding-right: 16px; padding-left: 16px; }
  .online-payment-block .online-installment-list { margin: 0 16px; }
  .online-payment-block .online-installment-list li { grid-template-columns: 25px minmax(0, 1fr) auto; column-gap: 8px; }
  .online-payment-block .online-installment-number { width: 25px; height: 25px; font-size: 10px; }
  .online-payment-block .online-installment-date { font-size: 12px; }
  .online-installment-amount { flex-direction: column; align-items: flex-end; gap: 0; }
  .online-payment-block .online-installment-amount strong { font-size: 18px; }
  .online-payment-block .online-plan-card > .online-plan-note { margin-right: 16px; margin-left: 16px; }
}