/* ===== TOC ===== */
.guide-toc {
background: #f0f9f8;
border: 4px solid #000;
border-radius: 16px;
padding: 2rem;
margin: 2rem 0;
box-shadow: 6px 6px 0 0 #000;
}

.guide-toc h2 {
font-size: 1.3rem;
color: #2C3E50;
margin-bottom: 1rem;
}

.toc-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 0.6rem;
}

.toc-link {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.6rem 1rem;
background: #fff;
border: 2px solid #000;
border-radius: 10px;
color: #00615A;
font-weight: bold;
text-decoration: none;
font-size: 0.9rem;
transition: all .2s;
}

.toc-link:hover {
background: #00A99D;
color: #fff;
transform: translateY(-2px);
box-shadow: 3px 3px 0 #000;
}

/* ===== Summary Box ===== */
.summary-box {
background: #e8f8f7;
border: 4px solid #00A99D;
border-radius: 16px;
padding: 2rem 2.5rem;
margin: 2.5rem 0;
box-shadow: 6px 6px 0 0 #00A99D;
}

.summary-box .summary-label {
display: inline-block;
background: #00A99D;
color: #fff;
font-weight: bold;
font-size: 0.85rem;
padding: 0.3rem 1rem;
border-radius: 20px;
border: 2px solid #000;
margin-bottom: 1rem;
}

.summary-box p {
font-size: 1.1rem;
line-height: 1.8;
color: #2C3E50;
margin-bottom: 1rem;
}

.summary-chips {
display: flex;
flex-wrap: wrap;
gap: 0.7rem;
margin-top: 1rem;
}

.chip {
background: #00A99D;
color: #fff;
border: 2px solid #000;
border-radius: 20px;
padding: 0.4rem 1rem;
font-size: 0.9rem;
font-weight: bold;
}

/* ===== Guide Sections ===== */
.guide-section {
padding: 4rem 0;
}

.guide-section:nth-child(even) {
background: #f8fffe;
}

.guide-section-header {
margin-bottom: 2rem;
}

.guide-section-title {
font-size: clamp(1.6rem, 3vw, 2rem);
font-weight: bold;
color: #2C3E50;
margin-bottom: 0.5rem;
padding-bottom: 0.7rem;
border-bottom: 4px solid #00A99D;
display: inline-block;
}

.guide-section-subtitle {
color: #4b5563;
font-size: 1.05rem;
margin-top: 0.5rem;
}

/* ===== Steps ===== */
.steps-list {
  list-style: none;
  padding: 0;
  counter-reset: step-counter;
  /* Override cluster-pages.css which sets display:flex on .steps-list */
  display: block !important;
  flex-direction: unset !important;
  gap: unset !important;
}

.step-item {
  counter-increment: step-counter;
  background: #fff;
  border: 4px solid #000;
  border-radius: 16px;
  padding: 2.5rem 2rem 2rem;
  margin-bottom: 2rem;
  box-shadow: 6px 6px 0 0 #000;
  position: relative;
  /* Override cluster-pages.css which sets display:flex on .step-item
     causing tables and alert-grids to appear side-by-side */
  display: block !important;
  align-items: unset !important;
}

/* Ensure every direct child of step-item stacks vertically */
.step-item > * {
  display: block;
  width: 100%;
  box-sizing: border-box;
}

/* table-wrapper must always take full width and sit on its own row */
.step-item > .table-wrapper {
  display: block !important;
  width: 100% !important;
  margin-top: 1rem;
  margin-bottom: 1.5rem;
}

/* emgs-alerts-grid sits below the table, not beside it */
.step-item > .emgs-alerts-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-top: 0;
  width: 100%;
}

.step-item::before {
content: counter(step-counter);
position: absolute;
top: -18px;
right: 2rem;
width: 44px;
height: 44px;
background: #00A99D;
color: #fff;
font-weight: bold;
font-size: 1.3rem;
border: 3px solid #000;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
}

html[dir="ltr"] .step-item::before {
right: auto;
left: 2rem;
}

.step-title {
font-size: 1.4rem;
color: #00615A;
margin-bottom: 1rem;
font-weight: bold;
}

.step-item ul {
padding-right: 1.2rem;
margin-top: 0.5rem;
}

html[dir="ltr"] .step-item ul {
padding-right: 0;
padding-left: 1.2rem;
}

.step-item li {
line-height: 1.8;
margin-bottom: 0.4rem;
color: #374151;
}

/* ===== Alert Boxes ===== */
.alert-box {
border-radius: 12px;
padding: 1.2rem 1.5rem;
margin: 1.2rem 0;
border: 3px solid;
}

.alert-warning {
background: #fff8e1;
border-color: #f59e0b;
}

.alert-info {
background: #e8f8f7;
border-color: #00A99D;
}

.alert-danger {
background: #fee2e2;
border-color: #ef4444;
}

.alert-box strong {
display: block;
margin-bottom: 0.5rem;
font-size: 1rem;
}

.alert-box p,
.alert-box li {
  color: #374151;
  line-height: 1.7;
  margin: 0.2rem 0;
}

/* ===== EMGS Step: 3-col alert grid ===== */
.emgs-alerts-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-top: 1.25rem;
  align-items: stretch;   /* equal height */
}

/* each child alert-box inside the grid */
.emgs-alerts-grid .alert-box {
  margin: 0;              /* remove default vertical margin */
  height: 100%;
  box-sizing: border-box;
}

@media (max-width: 900px) {
  .emgs-alerts-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .emgs-alerts-grid {
    grid-template-columns: 1fr;
  }
}

/* ===== Guide Tables ===== */
.table-wrapper {
  /* ─── Critical: clip overflow BEFORE border-radius ─── */
  overflow: hidden;           /* outer clip for border-radius */
  margin: 1.5rem 0;
  border-radius: 12px;
  border: 3px solid #000;
  box-shadow: 4px 4px 0 0 #000;
  /* width must never exceed its parent */
  max-width: 100%;
  width: 100%;
  box-sizing: border-box;
}

/* inner scroll container — sits INSIDE the rounded wrapper */
.table-wrapper-inner {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  width: 100%;
}

/* If .table-wrapper-inner is absent, allow direct overflow on wrapper */
.table-wrapper > table {
  overflow-x: auto;
}

.guide-table {
  width: 100%;
  border-collapse: collapse;
  /* min-width forces horizontal scroll on small screens */
  min-width: 480px;
  table-layout: auto;
}

.guide-table th {
  background: #2C3E50;
  color: #fff;
  padding: 0.85rem 1rem;
  text-align: right;
  font-weight: bold;
  font-size: 0.9rem;
  /* allow wrapping so long headers don't force huge widths */
  white-space: normal;
  word-break: break-word;
}

html[dir="ltr"] .guide-table th {
  text-align: left;
}

.guide-table td {
  padding: 0.7rem 1rem;
  border-bottom: 2px solid #e5e7eb;
  text-align: right;
  color: #374151;
  line-height: 1.6;
  font-size: 0.92rem;
  /* prevent extremely long words from breaking layout */
  word-break: break-word;
  overflow-wrap: break-word;
}

html[dir="ltr"] .guide-table td {
  text-align: left;
}

.guide-table tr:last-child td {
  border-bottom: none;
}

.guide-table tr:nth-child(even) td {
  background: #f0f9f8;
}

.guide-table tr:hover td {
  background: #e0f5f3;
  transition: background 0.15s;
}

/* ── Large comparison table (5+ cols) gets a scroll hint ── */
.table-wrapper::after {
  content: '';
  display: block;
  height: 0;
}

/* Scroll indicator shown only when table overflows */
@supports (overflow-x: auto) {
  .table-wrapper {
    position: relative;
  }
}

.badge-primary {
display: inline-block;
background: #00A99D;
color: #fff;
border-radius: 6px;
padding: 0.15rem 0.6rem;
font-size: 0.8rem;
font-weight: bold;
}

/* ===== Payment Breakdown ===== */
.payment-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 1rem;
margin: 1.5rem 0;
}

.payment-card {
background: #fff;
border: 3px solid #000;
border-radius: 12px;
padding: 1.2rem;
box-shadow: 4px 4px 0 0 #000;
text-align: center;
}

.payment-card .amount {
font-size: 1.5rem;
font-weight: bold;
color: #00615A;
}

.payment-card .label {
font-size: 0.85rem;
color: #6b7280;
margin-top: 0.3rem;
}

.payment-total {
background: #00A99D;
color: #fff;
border: 4px solid #000;
border-radius: 16px;
padding: 1.5rem 2rem;
text-align: center;
margin: 1.5rem 0;
box-shadow: 6px 6px 0 0 #000;
}

.payment-total .total-amount {
font-size: 2.5rem;
font-weight: bold;
display: block;
}

.payment-total .total-label {
font-size: 1rem;
opacity: 0.9;
}

/* ===== FAQ Accordion ===== */
.faq-list {
margin: 1.5rem 0;
}

.faq-item {
border: 3px solid #000;
border-radius: 12px;
margin-bottom: 1rem;
overflow: hidden;
box-shadow: 3px 3px 0 0 #000;
}

.faq-item summary {
padding: 1.2rem 1.5rem;
font-weight: bold;
cursor: pointer;
background: #fff;
list-style: none;
display: flex;
justify-content: space-between;
align-items: center;
font-size: 1.05rem;
color: #2C3E50;
transition: background .2s;
}

.faq-item summary:hover {
background: #f0f9f8;
}

.faq-item summary::-webkit-details-marker {
display: none;
}

.faq-item summary::after {
content: '+';
font-size: 1.5rem;
color: #00A99D;
font-weight: bold;
flex-shrink: 0;
margin-right: 0.5rem;
}

html[dir="ltr"] .faq-item summary::after {
margin-right: 0;
margin-left: 0.5rem;
}

.faq-item[open] summary {
background: #f0f9f8;
}

.faq-item[open] summary::after {
content: '−';
}

.faq-answer {
padding: 1.2rem 1.5rem;
background: #fafafa;
border-top: 2px solid #e5e7eb;
line-height: 1.9;
color: #374151;
}

.faq-answer ul {
padding-right: 1.2rem;
margin-top: 0.5rem;
}

html[dir="ltr"] .faq-answer ul {
padding-right: 0;
padding-left: 1.2rem;
}

.faq-answer li {
margin-bottom: 0.4rem;
}

/* ===== Author Box ===== */
.author-box {
display: flex;
gap: 1.5rem;
align-items: center;
background: #fff;
border: 4px solid #000;
border-radius: 16px;
padding: 1.5rem 2rem;
margin: 3rem 0;
box-shadow: 6px 6px 0 0 #00A99D;
}

.author-avatar {
width: 70px;
height: 70px;
background: #00A99D;
border: 3px solid #000;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 2rem;
color: #fff;
flex-shrink: 0;
}

.author-info strong {
display: block;
font-size: 1.1rem;
margin-bottom: 0.3rem;
color: #2C3E50;
}

.author-info p {
color: #4b5563;
font-size: 0.92rem;
margin: 0;
line-height: 1.6;
}

/* ===== NOC Flag List ===== */
.noc-list {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
  margin-top: 0.75rem;
}

.noc-list li {
  background: #fff;
  border: 3px solid #000;
  border-radius: 12px;
  padding: 0.75rem 1rem;
  font-weight: bold;
  font-size: 0.9rem;
  text-align: center;
  box-shadow: 3px 3px 0 #000;
  line-height: 1.4;
}

/* ===== Scholarship Cards ===== */
.scholarship-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 1rem;
margin: 1.5rem 0;
}

.scholarship-card {
background: #fff;
border: 3px solid #000;
border-radius: 12px;
padding: 1.2rem 1.5rem;
box-shadow: 4px 4px 0 0 #000;
}

.scholarship-card .sc-title {
font-weight: bold;
color: #00615A;
font-size: 1rem;
margin-bottom: 0.3rem;
}

.scholarship-card .sc-amount {
font-size: 1.5rem;
font-weight: bold;
color: #2C3E50;
}

.scholarship-card .sc-desc {
font-size: 0.85rem;
color: #6b7280;
margin-top: 0.3rem;
}

/* ===== Certificate List ===== */
.cert-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 1.2rem;
margin: 1.5rem 0;
}

.cert-card {
background: #fff;
border: 3px solid #000;
border-radius: 12px;
padding: 1.5rem;
box-shadow: 4px 4px 0 0 #000;
}

.cert-card .cert-name {
font-size: 1.1rem;
font-weight: bold;
color: #2C3E50;
margin-bottom: 0.7rem;
display: flex;
align-items: center;
gap: 0.5rem;
}

.cert-card ul {
padding-right: 1.2rem;
}

html[dir="ltr"] .cert-card ul {
padding-right: 0;
padding-left: 1.2rem;
}

.cert-card li {
line-height: 1.8;
color: #374151;
font-size: 0.95rem;
}

/* ===== Responsive ===== */
@media (max-width: 768px) {
  .payment-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .author-box {
    flex-direction: column;
    text-align: center;
  }

  .toc-grid {
    grid-template-columns: 1fr 1fr;
  }

  /* ── Table responsive on tablet ── */
  .table-wrapper {
    margin: 1rem 0;
    /* slightly smaller shadow on mobile */
    box-shadow: 3px 3px 0 0 #000;
  }

  .table-wrapper-inner {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    /* scroll hint: fades right edge when content overflows */
    background:
      linear-gradient(to right, white 30%, rgba(255,255,255,0)),
      linear-gradient(to right, rgba(255,255,255,0), white 70%) 0 100%,
      radial-gradient(farthest-side at 0% 50%, rgba(0,0,0,.12), rgba(0,0,0,0)),
      radial-gradient(farthest-side at 100% 50%, rgba(0,0,0,.12), rgba(0,0,0,0)) 0 100%;
    background-repeat: no-repeat;
    background-size:
      40px 100%, 40px 100%,
      14px 100%, 14px 100%;
    background-attachment: local, local, scroll, scroll;
  }

  .guide-table th {
    font-size: 0.82rem;
    padding: 0.7rem 0.75rem;
  }

  .guide-table td {
    font-size: 0.85rem;
    padding: 0.6rem 0.75rem;
  }
}

@media (max-width: 480px) {
  .toc-grid {
    grid-template-columns: 1fr;
  }

  .payment-grid {
    grid-template-columns: 1fr;
  }

  /* ── Table on small mobile ── */
  .guide-table {
    /* allow slightly smaller min-width on tiny screens */
    min-width: 380px;
  }

  .guide-table th {
    font-size: 0.78rem;
    padding: 0.6rem 0.6rem;
  }

  .guide-table td {
    font-size: 0.8rem;
    padding: 0.55rem 0.6rem;
  }
}