/* ============================================================================
   Airbnb-style content pages — shared skin.
   Loaded on: Help Center, FAQ, What is eSIM, eSIM Setup, Compatible Phones.
   Loads AFTER simyak-core and the per-section CSS, so these rules win.

   Design language:
     · flat white surfaces, 1px #ddd hairlines, 12–16px radii, no gradients
     · shadows only on hover, and subtle
     · pill tabs that fill solid dark when active
     · inputs with Airbnb's dark focus ring (not a coloured glow)
     · #222 headings / #717171 secondary text, generous whitespace
   ============================================================================ */

/* ---------- Section rhythm ---------- */
.smyk-qn, .smyk-kb, .smyk-pa,
.sfq-main, .smyk-ex, .smyk-bn,
.esvs, .smyk-my, .smyk-efaq,
.smyk-setup, .htc {
  background: #fff;
}

/* ---------- Shared card treatment ---------- */
.smyk-qn__card,
.smyk-pa__card,
.smyk-bn__card,
.htc__card,
.sfq-hiw__card {
  background: #fff !important;
  border: 1px solid var(--smyk-border-soft, #ddd) !important;
  border-radius: 16px !important;
  box-shadow: none !important;
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.smyk-qn__card:hover,
.smyk-pa__card:hover,
.smyk-bn__card:hover,
.htc__card:hover,
.sfq-hiw__card:hover {
  border-color: #c9c9c9 !important;
  box-shadow: 0 6px 16px rgba(0, 0, 0, .06) !important;
  transform: translateY(-2px);
}

/* Card titles / body text */
.smyk-qn__card-title,
.smyk-pa__card-title,
.smyk-bn__card-title,
.sfq-hiw__card-title,
.htc__card-device {
  color: var(--smyk-hof, #222) !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em;
}
.smyk-bn__card-desc,
.sfq-hiw__card-desc,
.htc__card-meta {
  color: var(--smyk-foggy, #717171) !important;
}

/* Circular icon badges (Airbnb pattern) */
.smyk-qn__card-icon,
.smyk-bn__card-icon,
.smyk-bn__card-emoji {
  background: var(--smyk-surface, #f7f7f7) !important;
  border-radius: 50% !important;
  color: var(--smyk-primary, #e41d56) !important;
}

/* ---------- Pill tabs (FAQ categories, phone categories) ---------- */
.sfq-tab,
.scp-cat-btn {
  background: #fff !important;
  border: 1px solid var(--smyk-border-soft, #ddd) !important;
  border-radius: 100px !important;
  padding: 9px 18px !important;
  font-family: var(--smyk-font);
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--smyk-hof, #222) !important;
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.sfq-tab:hover,
.scp-cat-btn:hover { border-color: var(--smyk-hof, #222) !important; }

.sfq-tab.is-active,
.sfq-tab[aria-selected="true"],
.scp-cat-btn.is-active,
.scp-cat-btn[aria-selected="true"] {
  background: var(--smyk-hof, #222) !important;
  border-color: var(--smyk-hof, #222) !important;
  color: #fff !important;
}

/* These are PILLS here — kill the leftover underline-tab rail + the crimson
   active underline coming from simyak-faq-page.css, so they read cleanly (esp.
   on mobile). Tighten the row gap and let the pills wrap. */
.sfq-tabs {
  border-bottom: 0 !important;
  gap: 8px !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  margin-bottom: 22px !important;
}
.sfq-tab::after,
.sfq-tab.is-active::after { content: none !important; display: none !important; }

/* ---------- Accordions: hairline rows, not boxes ---------- */
.sfq-item,
.smyk-kb__item,
.smyk-efaq__item,
.smyk-my__item {
  background: #fff !important;
  border: 0 !important;
  border-bottom: 1px solid var(--smyk-border-soft, #ddd) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
.sfq-item__toggle,
.smyk-kb__trigger,
.smyk-efaq__q {
  padding: 20px 0 !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  color: var(--smyk-hof, #222) !important;
  background: none !important;
}
.sfq-item__body,
.smyk-kb__links,
.smyk-efaq__a {
  color: var(--smyk-foggy, #717171) !important;
  font-size: 15px;
  line-height: 1.7;
}

/* ---------- Inputs / search ---------- */
.sfq-search input,
#scp-search,
.scp-search input,
.smyk-kb input[type="search"],
.smyk-qn input[type="search"] {
  border: 1px solid var(--smyk-border-soft, #ddd) !important;
  border-radius: 12px !important;
  padding: 14px 16px !important;
  font-family: var(--smyk-font);
  font-size: 15px !important;
  background: #fff !important;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.sfq-search input:focus,
#scp-search:focus,
.scp-search input:focus {
  outline: none !important;
  border-color: var(--smyk-hof, #222) !important;
  box-shadow: 0 0 0 2px rgba(34, 34, 34, .08) !important;
}

/* Compatible-phones overrides — brand crimson tab + room for the search icon. */
.scp-cat-btn.is-active,
.scp-cat-btn[aria-selected="true"] {
  background: #e41d56 !important;
  border-color: #e41d56 !important;
  color: #fff !important;
}
#scp-search { padding-left: 48px !important; }
#scp-search:focus {
  border-color: #e41d56 !important;
  box-shadow: 0 0 0 2px rgba(228, 29, 86, .12) !important;
}

/* eSIM setup — intro lead + spacing between the added sections. */
.smyk-setup__intro {
  max-width: 760px; margin: 0 auto 26px;
  color: #4b5563; font-size: 1.04rem; line-height: 1.7; text-align: center;
}
.smyk-setup__section { margin-top: 44px; }

/* ---------- Comparison table (eSIM vs SIM) ---------- */
.esvs__table {
  border: 1px solid var(--smyk-border-soft, #ddd) !important;
  border-radius: 16px !important;
  overflow: hidden;
  box-shadow: none !important;
}
.esvs__table th {
  background: var(--smyk-surface, #f7f7f7) !important;
  color: var(--smyk-hof, #222) !important;
  font-weight: 700 !important;
}
.esvs__table td { border-color: var(--smyk-border-soft, #ddd) !important; }

/* ---------- Compatible-phones brand rows ---------- */
.scp-brand {
  border: 1px solid var(--smyk-border-soft, #ddd) !important;
  border-radius: 14px !important;
  box-shadow: none !important;
  overflow: hidden;
  margin-bottom: 10px;
}
.scp-brand-btn {
  background: #fff !important;
  padding: 16px 18px !important;
  font-weight: 600 !important;
  color: var(--smyk-hof, #222) !important;
}
.scp-brand-btn:hover { background: var(--smyk-surface, #f7f7f7) !important; }
.scp-device-item {
  color: var(--smyk-foggy, #717171) !important;
  border-bottom: 1px solid #f0f0f0;
}

/* ---------- Setup guide steps ---------- */
.smyk-setup__tab {
  border-radius: 100px !important;
  border: 1px solid var(--smyk-border-soft, #ddd) !important;
  background: #fff !important;
  color: var(--smyk-hof, #222) !important;
  font-weight: 600 !important;
}
.smyk-setup__tab.is-active,
.smyk-setup__tab[aria-selected="true"] {
  background: var(--smyk-hof, #222) !important;
  border-color: var(--smyk-hof, #222) !important;
  color: #fff !important;
}

/* ---------- Headings ---------- */
.smyk-qn__heading, .smyk-kb__heading, .smyk-pa__heading,
.smyk-ex__heading, .smyk-bn__heading, .esvs__heading,
.smyk-my__heading, .smyk-efaq__heading, .smyk-setup__heading,
.htc__heading, .sfq-main h2 {
  color: var(--smyk-hof, #222) !important;
  letter-spacing: -0.02em;
}

/* ---------- Links ---------- */
.smyk-kb__links a,
.smyk-pa__card,
.htc__card-link {
  color: var(--smyk-hof, #222);
}
.smyk-kb__links a:hover,
.htc__card-link:hover { color: var(--smyk-primary, #e41d56); }

/* ════════════════════════════════════════════════════════════
   COMPANY PAGES — About Us · Blog · Become an Affiliate
   ════════════════════════════════════════════════════════════ */

.smyk-mission, .smyk-diff, .smyk-story,
.smyk-afb, .smyk-afst, .smyk-afw, .smyk-affaq, .smyk-afc,
.smyk-blog-cat-hero, .smyk-blog-list { background: #fff; }

/* ---------- Cards: About reason cards, affiliate benefits, blog posts ---------- */
.smyk-diff__card,
.smyk-afb__card,
.smyk-afst__step,
.smyk-bl-card {
  background: #fff !important;
  border: 1px solid var(--smyk-border-soft, #ddd) !important;
  border-radius: 16px !important;
  box-shadow: none !important;
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.smyk-diff__card:hover,
.smyk-afb__card:hover,
.smyk-afst__step:hover,
.smyk-bl-card:hover {
  border-color: #c9c9c9 !important;
  box-shadow: 0 6px 16px rgba(0, 0, 0, .06) !important;
  transform: translateY(-2px);
}

.smyk-diff__card-title,
.smyk-afb__card-title,
.smyk-afst__step-title,
.smyk-bl-card__title {
  color: var(--smyk-hof, #222) !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em;
}
.smyk-diff__card-desc,
.smyk-afb__card-desc,
.smyk-afst__step-desc,
.smyk-bl-card__meta {
  color: var(--smyk-foggy, #717171) !important;
}

/* Circular icon/emoji badges */
.smyk-diff__card-icon,
.smyk-diff__card-emoji,
.smyk-afb__card-icon {
  background: var(--smyk-surface, #f7f7f7) !important;
  border-radius: 50% !important;
  color: var(--smyk-primary, #e41d56) !important;
}

/* ---------- Affiliate "who can join" chips ---------- */
.smyk-afw__chip {
  background: #fff !important;
  border: 1px solid var(--smyk-border-soft, #ddd) !important;
  border-radius: 100px !important;
  padding: 9px 16px !important;
  font-weight: 600 !important;
  color: var(--smyk-hof, #222) !important;
  box-shadow: none !important;
  transition: border-color .15s ease;
}
.smyk-afw__chip:hover { border-color: var(--smyk-hof, #222) !important; }

/* ---------- Affiliate FAQ: hairline rows ---------- */
.smyk-affaq__item {
  background: #fff !important;
  border: 0 !important;
  border-bottom: 1px solid var(--smyk-border-soft, #ddd) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
.smyk-affaq__item summary {
  padding: 20px 0 !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  color: var(--smyk-hof, #222) !important;
}

/* ---------- Buttons ---------- */
.smyk-afst__btn,
.smyk-afc__btn {
  background: var(--smyk-primary, #e41d56) !important;
  border: 0 !important;
  border-radius: 12px !important;
  color: #fff !important;
  font-weight: 700 !important;
  box-shadow: none !important;
  transition: background .15s ease;
}
.smyk-afst__btn:hover,
.smyk-afc__btn:hover { background: var(--smyk-primary-hover, #c2164a) !important; }

/* ---------- Blog ---------- */
.smyk-blog-cat-hero {
  border-bottom: 1px solid var(--smyk-border-soft, #ddd);
  padding-block: 48px 32px;
}
.smyk-blog-cat-hero__search-input {
  border: 1px solid var(--smyk-border-soft, #ddd) !important;
  border-radius: 12px !important;
  padding: 14px 16px !important;
  font-family: var(--smyk-font);
  font-size: 15px !important;
  background: #fff !important;
}
.smyk-blog-cat-hero__search-input:focus {
  outline: none !important;
  border-color: var(--smyk-hof, #222) !important;
  box-shadow: 0 0 0 2px rgba(34, 34, 34, .08) !important;
}
.smyk-blog-cat-hero__search-btn {
  background: var(--smyk-primary, #e41d56) !important;
  border: 0 !important;
  border-radius: 12px !important;
  color: #fff !important;
  font-weight: 700 !important;
}

/* Post cards: image on top, flat body */
.smyk-bl-card__img,
.smyk-bl-card__img-link { border-radius: 16px 16px 0 0 !important; overflow: hidden; }
.smyk-bl-card__body { padding: 18px 20px 22px !important; }
.smyk-bl-card__accent { background: var(--smyk-primary, #e41d56) !important; }

/* Featured article */
.smyk-bl-hero { border-bottom: 1px solid var(--smyk-border-soft, #ddd); }
.smyk-bl-hero__avatar { border-radius: 50% !important; }
.smyk-bl-hero__author { color: var(--smyk-foggy, #717171) !important; }

/* WP pagination -> Airbnb pills */
.smyk-bl-pagination .page-numbers,
.smyk-blog-list .page-numbers {
  display: inline-grid; place-items: center;
  min-width: 38px; height: 38px; padding: 0 12px;
  border: 1px solid var(--smyk-border-soft, #ddd);
  border-radius: 100px;
  font-family: var(--smyk-font); font-size: 14px; font-weight: 600;
  color: var(--smyk-hof, #222); text-decoration: none;
  transition: border-color .15s ease, background .15s ease;
}
.smyk-bl-pagination .page-numbers:hover,
.smyk-blog-list .page-numbers:hover { border-color: var(--smyk-hof, #222); }
.smyk-bl-pagination .page-numbers.current,
.smyk-blog-list .page-numbers.current {
  background: var(--smyk-hof, #222); border-color: var(--smyk-hof, #222); color: #fff;
}

/* ---------- Headings ---------- */
.smyk-mission__heading, .smyk-diff__heading, .smyk-story__heading,
.smyk-afb__heading, .smyk-afst__heading, .smyk-afw__heading,
.smyk-affaq__heading, .smyk-afc__heading {
  color: var(--smyk-hof, #222) !important;
  letter-spacing: -0.02em;
}

/* eSIM-vs-SIM lead sentence. */
.esvs__sub {
  max-width: 680px; margin: 10px auto 0; text-align: center;
  color: #6b7280; font-size: 1.02rem; line-height: 1.65;
}

/* Help Center knowledge base — question + answer layout. */
.smyk-kb__sub { color: var(--smyk-foggy, #717171); font-size: 1rem; margin: 8px 0 0; max-width: 60ch; }
.smyk-kb__subtopics { grid-template-columns: 1fr !important; gap: 20px !important; }
.smyk-kb__answer { color: #4b5563 !important; font-size: 15px; line-height: 1.7; margin: 6px 0 0; }
.smyk-kb__answer a { color: #e41d56; text-decoration: underline; }

/* eSIM Setup — breathing room between the "Before you start" card and the device tabs. */
.smyk-setup__tabs { margin-top: clamp(28px, 4vw, 44px) !important; }
/* FAQ "Why book" cards — guarantee the icons render solid crimson. */
.sfq-hiw__icon-wrap { color: #e41d56 !important; }
.sfq-hiw__icon-wrap svg { width: 26px !important; height: 26px !important; display: block; }