/* The Sender ID Register fees page (pages/sender-id-register-fees/), generated from /sender-id-register/.
   Everything is scoped to .sidfee, so the shared header and footer are untouched. Colours and type come from
   the site's Elementor kit variables, and the sizes match the guide's own sections: 1300px content width,
   50px light section headings with a bold lime word, 16px body text, cards with a 1px 10% white border. */
.sidfee {
  --sf-accent: var(--e-global-color-accent, #BFF747);
  --sf-text: var(--e-global-color-text, #F5F5F4);
  --sf-muted: #a9aea2;
  --sf-line: rgba(255, 255, 255, .1);
  --sf-card: #0c0f0c;
  --sf-card-line: #1f261c;
  max-width: 1300px;
  margin: 0 auto;
  padding: 40px 20px 100px;
  color: var(--sf-text);
  font-family: var(--e-global-typography-text-font-family), sans-serif;
  font-size: 16px;
  line-height: 1.7;
}
.sidfee a { color: var(--sf-accent); text-decoration: underline; text-underline-offset: 3px; }
.sidfee a:hover, .sidfee a:focus-visible { color: #fff; }
.sidfee :focus-visible { outline: 2px solid var(--sf-accent); outline-offset: 3px; }

.sidfee-crumbs { font-size: 14px; color: var(--sf-muted); margin: 0 0 24px; }
.sidfee .sidfee-crumbs a { color: var(--sf-muted); }
.sidfee .sidfee-crumbs a:hover { color: #fff; }

.sidfee-k {
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 13px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--sf-accent); margin: 0 0 10px;
}

.sidfee-status {
  border: 1px solid rgba(191, 247, 71, .45);
  background: rgba(191, 247, 71, .06);
  border-radius: 20px; padding: 24px 28px; margin: 0 0 32px;
}
.sidfee-status p { margin: 0 0 8px; }
.sidfee-status strong { color: #fff; }
.sidfee .sidfee-meta { font-size: 14px; color: var(--sf-muted); margin: 12px 0 0; }

.sidfee-summary { font-size: 20px; line-height: 1.6; color: #fff; max-width: 920px; margin: 0 0 40px; }
.sidfee-summary strong { color: var(--sf-accent); }

.sidfee-facts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin: 0 0 40px; }
.sidfee-fact { background: var(--sf-card); border: 1px solid var(--sf-card-line); border-radius: 16px; padding: 24px; }
.sidfee-fact p { margin: 0; color: var(--sf-muted); font-size: 15px; line-height: 1.5; }
.sidfee .sidfee-fact-v { color: var(--sf-accent); font-size: 28px; font-weight: 800; line-height: 1.15; letter-spacing: -.01em; margin: 0 0 8px; }

.sidfee-toc { border: 1px solid var(--sf-line); border-radius: 20px; padding: 24px 28px; }
.sidfee-toc ol { margin: 0; padding-left: 22px; columns: 2; column-gap: 40px; }
.sidfee-toc li { margin: 4px 0; break-inside: avoid; }

.sidfee-section { padding-top: 80px; scroll-margin-top: 100px; }
.sidfee-section p { margin: 0 0 16px; max-width: 920px; }
/* Two classes: the Elementor kit styles headings as ".elementor-kit-7783 h2", which beats one class. */
.sidfee .sidfee-h2 {
  font-family: var(--e-global-typography-primary-font-family), sans-serif;
  font-size: 50px; font-weight: 300; line-height: 1.2; color: #fff; margin: 0 0 24px;
}
.sidfee .sidfee-h2 span { color: var(--sf-accent); font-weight: 700; }
.sidfee .sidfee-section h3, .sidfee .sidfee-h3 {
  font-family: var(--e-global-typography-secondary-font-family), sans-serif;
  color: #fff; font-size: 22px; font-weight: 700; line-height: 1.3; margin: 36px 0 12px;
}

.sidfee-list { margin: 0 0 20px; padding-left: 22px; max-width: 920px; }
.sidfee-list li { margin: 6px 0; }
.sidfee-list li::marker { color: var(--sf-accent); }

.sidfee-table-wrap { overflow-x: auto; margin: 8px 0 24px; border: 1px solid var(--sf-line); border-radius: 16px; }
.sidfee-table { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.5; margin: 0; }
.sidfee-table caption { caption-side: top; text-align: left; padding: 16px 20px 6px; color: var(--sf-muted); font-size: 14px; }
.sidfee-table th, .sidfee-table td { padding: 12px 20px; text-align: left; vertical-align: top; border: 0; border-top: 1px solid var(--sf-line); color: var(--sf-text); background: transparent; }
.sidfee-table thead th { color: #fff; font-weight: 700; }

.sidfee-calc {
  display: grid; gap: 12px; max-width: 600px; margin: 8px 0 24px;
  background: var(--sf-card); border: 1px solid var(--sf-card-line); border-radius: 16px; padding: 24px;
}
.sidfee-calc label { font-weight: 700; color: #fff; }
.sidfee-calc input {
  width: 140px; padding: 10px 14px; font: inherit; font-size: 18px; color: #fff;
  background: #000; border: 1px solid rgba(191, 247, 71, .5); border-radius: 10px;
}
.sidfee-calc-out { font-size: 20px; color: #fff; }
.sidfee-calc-out strong { color: var(--sf-accent); }
.sidfee .sidfee-calc-note { font-size: 14px; color: var(--sf-muted); margin: 0; }

.sidfee-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin: 8px 0 24px; }
.sidfee-cards-3 { grid-template-columns: repeat(3, 1fr); }
.sidfee-card { border: 1px solid var(--sf-line); border-radius: 30px; padding: 30px; }
.sidfee .sidfee-card h3 { margin: 0 0 12px; }
.sidfee .sidfee-card p { margin: 0; }

.sidfee-timeline { list-style: none; margin: 8px 0 16px 8px; padding: 0; border-left: 2px solid var(--sf-card-line); max-width: 920px; }
.sidfee-timeline li { position: relative; padding: 0 0 24px 28px; }
.sidfee-timeline li::before {
  content: ""; position: absolute; left: -9px; top: 6px; width: 16px; height: 16px; border-radius: 50%;
  background: #000; border: 2px solid #3a4434;
}
.sidfee-timeline li.is-done::before { background: var(--sf-accent); border-color: var(--sf-accent); }
.sidfee-timeline li.is-now::before { border-color: var(--sf-accent); box-shadow: 0 0 0 4px rgba(191, 247, 71, .2); }
.sidfee-timeline p { margin: 0; }
.sidfee .sidfee-when { color: #fff; font-weight: 700; margin: 0 0 4px; }
.sidfee-tag {
  display: inline-block; margin-left: 8px; padding: 1px 8px; border-radius: 6px; vertical-align: 2px;
  font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--sf-muted); border: 1px solid var(--sf-line);
}
.is-done .sidfee-tag { color: var(--sf-accent); border-color: rgba(191, 247, 71, .5); }
.is-now .sidfee-tag { color: #1B1B1B; background: var(--sf-accent); border-color: var(--sf-accent); }
.sidfee .sidfee-note { font-size: 14px; color: var(--sf-muted); }

.sidfee-q { border-top: 1px solid var(--sf-line); padding: 20px 0 4px; max-width: 920px; }
.sidfee .sidfee-q h3 { margin: 0 0 8px; }
.sidfee .sidfee-ours { border-left: 3px solid var(--sf-accent); padding-left: 14px; }

.sidfee-steps { margin: 0 0 20px; padding-left: 22px; max-width: 920px; }
.sidfee-steps li { margin: 8px 0; }
.sidfee-steps li::marker { color: var(--sf-accent); font-weight: 700; }

.sidfee-btns { display: flex; flex-wrap: wrap; gap: 12px; }
.sidfee .sidfee-btn {
  display: inline-block; padding: 12px 22px; border-radius: 8px; border: 1px solid var(--sf-accent);
  background: var(--sf-accent); color: #1B1B1B; font-weight: 700; line-height: 1.4; text-decoration: none;
}
.sidfee .sidfee-btn:hover, .sidfee .sidfee-btn:focus-visible { background: #fff; border-color: #fff; color: #1B1B1B; }
.sidfee .sidfee-btn-alt { background: transparent; color: var(--sf-accent); }
.sidfee .sidfee-btn-alt:hover, .sidfee .sidfee-btn-alt:focus-visible { background: rgba(191, 247, 71, .1); border-color: var(--sf-accent); color: var(--sf-accent); }

.page-faq { max-width: 920px; }
.page-faq-item { border-top: 1px solid var(--sf-line); }
.page-faq-item:last-child { border-bottom: 1px solid var(--sf-line); }
.page-faq-item summary { cursor: pointer; list-style: none; position: relative; padding: 18px 44px 18px 0; }
.page-faq-item summary::-webkit-details-marker { display: none; }
.page-faq-item summary::after { content: "+"; position: absolute; right: 6px; top: 10px; font-size: 28px; line-height: 1.2; color: var(--sf-accent); }
.page-faq-item[open] summary::after { content: "\2212"; }
.sidfee .page-faq-item summary h3 { display: inline; margin: 0; font-size: 18px; color: #fff; }
.page-faq-a { padding: 0 0 18px; }

.sidfee-sources ul { margin: 0; padding-left: 22px; font-size: 14px; color: var(--sf-muted); }
.sidfee-sources li { margin: 4px 0; }

.sidfee-author { margin-top: 64px; border: 1px solid var(--sf-line); border-radius: 20px; padding: 24px 28px; font-size: 15px; }
.sidfee-author p { margin: 0 0 6px; }
.sidfee-author strong { color: #fff; }

@media (max-width: 1024px) {
  .sidfee-facts, .sidfee-cards-3 { grid-template-columns: repeat(2, 1fr); }
  .sidfee .sidfee-h2 { font-size: 40px; }
}
@media (max-width: 767px) {
  .sidfee { padding: 24px 10px 60px; }
  .sidfee-section { padding-top: 56px; }
  .sidfee .sidfee-h2 { font-size: 30px; }
  .sidfee .sidfee-section h3, .sidfee .sidfee-h3 { font-size: 18px; }
  .sidfee-summary { font-size: 18px; }
  .sidfee-facts, .sidfee-cards, .sidfee-cards-3 { grid-template-columns: 1fr; }
  .sidfee-toc ol { columns: 1; }
  .sidfee-status, .sidfee-toc, .sidfee-author { padding: 20px; }
  .sidfee-card { padding: 20px; border-radius: 20px; }
  .sidfee .sidfee-fact-v { font-size: 24px; }
  .sidfee-table th, .sidfee-table td { padding: 10px 12px; }
  /* A wide table becomes one card per row, each cell under its column's name. */
  .sidfee-table-stack thead { display: none; }
  .sidfee-table-stack tr { display: block; border-top: 1px solid var(--sf-line); padding: 12px 16px; }
  .sidfee-table-stack td { display: block; border: 0; padding: 4px 0; }
  .sidfee-table-stack td:first-child { color: #fff; font-weight: 700; font-size: 16px; }
  .sidfee-table-stack td:not(:first-child)::before {
    content: attr(data-label); display: block; color: var(--sf-muted); font-size: 12px; letter-spacing: .04em; text-transform: uppercase;
  }
}