/* Relay Radio Store Build 0040 — Porto FAQ / Help Center.
 * Presentation only. Nothing here changes filtering, FAQ data, collapse state,
 * Elementor/Porto scripts or WooCommerce operations.
 */
body.relay-store-theme.relay-faq-page .main-content {
  min-width: 0;
  padding-bottom: clamp(50px, 6vw, 92px);
}
body.relay-store-theme.relay-faq-page .main-content > .container {
  min-width: 0;
}

/* Store-specific help banner; Porto FAQ content is still rendered below. */
body.relay-faq-page .relay-faq-intro {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  width: 100%;
  margin: 26px 0 35px;
  padding: clamp(21px, 3.6vw, 32px);
  overflow: hidden;
  border: 1px solid rgba(54, 145, 186, .44);
  border-radius: 17px;
  background: radial-gradient(ellipse at 0 0, rgba(11,191,238,.14), transparent 60%),
              radial-gradient(ellipse at 93% 22%, rgba(121,70,207,.12), transparent 58%),
              linear-gradient(115deg, #112a40, #101629 78%);
  box-shadow: 0 14px 34px rgba(0,0,0,.20);
}
body.relay-faq-page .relay-faq-intro::before {
  content: '';
  position: absolute;
  left: 0; top: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, #00c2e8, #6875ee 55%, #fa922e);
}
body.relay-faq-page .relay-faq-intro__copy { min-width: 0; }
body.relay-faq-page .relay-faq-intro__kicker {
  display: block;
  margin-bottom: 9px;
  color: #86e4fb;
  font-size: .71rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: 850;
}
body.relay-faq-page .relay-faq-intro h1 {
  margin: 0 0 7px !important;
  color: #f6faff !important;
  font-size: clamp(1.6rem, 3.2vw, 2.15rem) !important;
  line-height: 1.13;
  letter-spacing: -.035em;
  font-weight: 850;
}
body.relay-faq-page .relay-faq-intro p {
  margin: 0 !important;
  max-width: 525px;
  color: #b1c9dc;
  font-size: .9rem;
  line-height: 1.65;
}
body.relay-faq-page .relay-faq-intro__actions {
  display: flex;
  flex: 0 0 auto;
  gap: 9px;
  align-items: center;
  flex-wrap: wrap;
}
body.relay-faq-page .relay-faq-intro__actions a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 10px 15px;
  font-size: .79rem;
  line-height: 1.35;
  font-weight: 800;
  white-space: normal;
  text-align: center;
  text-decoration: none;
  border-radius: 10px;
  transition: filter .18s ease, border-color .18s ease, background-color .18s ease;
}
body.relay-faq-page .relay-faq-intro__track {
  color: #fff !important;
  background: linear-gradient(110deg,#077eae,#4e6be1 62%,#744cdc);
  border: 1px solid rgba(117,188,232,.33);
  box-shadow: 0 6px 18px rgba(23,94,188,.18);
  gap: 8px;
}
body.relay-faq-page .relay-faq-intro__contact {
  color: #d4eaf9 !important;
  background: rgba(6,18,33,.62);
  border: 1px solid rgba(69,141,184,.44);
}
body.relay-faq-page .relay-faq-intro__actions a:hover { filter: brightness(1.12); }
body.relay-faq-page .relay-faq-intro__actions a:focus-visible,
body.relay-faq-page .relay-faq-filter-track a:focus-visible,
body.relay-faq-page .relay-faq-filter-track button:focus-visible {
  outline: 3px solid #93eaff;
  outline-offset: 3px;
}

/* Keep Porto's actual editable FAQ heading. */
body.relay-faq-page .relay-faq-native-title {
  margin: 0 0 18px !important;
  padding-bottom: 12px;
  color: #f3f9ff !important;
  font-size: clamp(1.1rem, 2vw, 1.4rem) !important;
  font-weight: 850 !important;
  letter-spacing: -.012em;
  border-bottom: 1px solid rgba(64,125,168,.22);
}

/* The filter bar is built by Porto. Support both recent and classic markup.
 * Target the real anchors, not a new UI, so existing filter JS keeps working. */
body.relay-faq-page .main-content :is(
  .relay-faq-filter-track, ul.faq-filter, .faq-filters, .faq-nav,
  .faq-categories, .porto-faqs .portfolio-filter, .porto-faqs .sort-source,
  .porto-faqs .nav-pills, .faq .nav-pills
) {
  display: flex !important;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  min-height: 0;
  padding: 8px !important;
  margin: 0 0 22px !important;
  background: #0d192b !important;
  border: 1px solid rgba(53,108,153,.32) !important;
  border-radius: 13px !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.02);
  list-style: none;
}
body.relay-faq-page .main-content :is(
  .relay-faq-filter-track, ul.faq-filter, .faq-filters, .faq-nav,
  .faq-categories, .porto-faqs .portfolio-filter, .porto-faqs .sort-source,
  .porto-faqs .nav-pills, .faq .nav-pills
) > li { margin: 0 !important; padding: 0 !important; list-style: none; }
body.relay-faq-page .main-content :is(
  .relay-faq-filter-link, .faq-filter a, .faq-filters a,
  .faq-nav a, .faq-categories a, .porto-faqs .portfolio-filter a,
  .porto-faqs .sort-source a, .porto-faqs .nav-pills a
) {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 38px;
  padding: 8px 15px !important;
  margin: 0 !important;
  border: 1px solid rgba(56,113,155,.26) !important;
  border-radius: 9px !important;
  background: rgba(11,28,46,.86) !important;
  color: #c9dfef !important;
  font-weight: 740 !important;
  font-size: .84rem !important;
  line-height: 1.3;
  text-decoration: none !important;
  box-shadow: none !important;
  transition: background-color .17s ease, color .17s ease, border-color .17s ease;
}
body.relay-faq-page .main-content :is(.relay-faq-filter-link,.faq-filter a,.faq-filters a,.faq-nav a,.faq-categories a):hover {
  background: rgba(12,82,118,.35) !important;
  border-color: rgba(52,188,234,.48) !important;
  color: #fff !important;
}
body.relay-faq-page .main-content :is(
  .relay-faq-filter-link.active, .relay-faq-filter-link.current,
  li.active > .relay-faq-filter-link, li.current > .relay-faq-filter-link,
  .faq-filter .active > a, .faq-filters .active > a, .faq-nav .active > a,
  .portfolio-filter .active > a, .sort-source .active > a,
  .nav-pills .active > a, a[aria-current="page"].relay-faq-filter-link
) {
  color: #fff !important;
  background: linear-gradient(116deg, #075e8a, #354e9e 75%, #473f9b) !important;
  border-color: rgba(44,196,238,.56) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.055), 0 4px 15px rgba(9,80,166,.19) !important;
}

/* Porto FAQ accordion cards (classic toggles, Bootstrap panels and element widgets). */
body.relay-faq-page .main-content :is(
  .relay-faq-card, .faq-item, .porto-faqs .toggle,
  .porto-faqs .accordion-item, .faqs .toggle, .toggle.toggle-simple,
  .faq .toggle, .faq-accordion .card, .porto-faqs .card
) {
  overflow: hidden;
  margin: 0 0 12px !important;
  color: #d1e3f3 !important;
  background: linear-gradient(160deg, #112237, #0b1727 96%) !important;
  border: 1px solid rgba(54,121,164,.39) !important;
  border-radius: 13px !important;
  box-shadow: 0 9px 24px rgba(0,0,0,.17), inset 0 1px 0 rgba(255,255,255,.024);
}
body.relay-faq-page .main-content :is(
  .toggle > label, .toggle > .toggle-title, .toggle > .toggle-heading,
  .toggle .toggle-title, .accordion .card-header, .accordion .card-header button,
  .accordion .card-header a, .faq-item .faq-question,
  .faq-item .faq-title, .faq-accordion .accordion-button,
  .porto-faqs .toggle-title, .relay-faq-card .card-header,
  .relay-faq-card .toggle-title, .relay-faq-card > label,
  .relay-faq-card .accordion-header button
) {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 56px;
  margin: 0 !important;
  padding: 16px 18px !important;
  color: #f0f8ff !important;
  background: linear-gradient(105deg, rgba(17,40,65,.99), rgba(16,28,49,.98)) !important;
  border: 0 !important;
  border-left: 3px solid #1ac6ed !important;
  border-radius: 0 !important;
  font-size: .95rem !important;
  font-weight: 820 !important;
  line-height: 1.5 !important;
  text-align: left;
  text-decoration: none !important;
  box-shadow: none !important;
  cursor: pointer;
}
body.relay-faq-page .main-content :is(
  .toggle.active > label, .toggle.active > .toggle-title,
  .toggle.active .toggle-title, .relay-faq-card.active .toggle-title,
  .relay-faq-card .card-header:has([aria-expanded="true"]),
  .faq-accordion .accordion-button:not(.collapsed)
) {
  color: #fff !important;
  background: linear-gradient(112deg, #13324c, #18213b) !important;
  border-left-color: #aa6df0 !important;
}
/* Porto's triangle / chevron inherits the current text color. */
body.relay-faq-page .main-content :is(
  .toggle > label::before, .toggle > label::after,
  .toggle-title::before, .toggle-title::after,
  .card-header .toggle::before, .accordion-button::after
) { color: #81dcfc !important; border-color: #81dcfc !important; }
body.relay-faq-page .main-content :is(
  .toggle .toggle-content, .toggle-content, .faq-answer,
  .faq-item .faq-content, .accordion .card-body,
  .accordion .collapse, .faq-accordion .accordion-body,
  .relay-faq-card .card-body, .relay-faq-card .card-content,
  .relay-faq-card .toggle-content
) {
  color: #c7dbea !important;
  background: #0d1b2c !important;
  border-color: rgba(58,117,164,.24) !important;
  padding: 17px 21px !important;
  font-size: .91rem !important;
  line-height: 1.75 !important;
}
body.relay-faq-page .main-content :is(
  .toggle .toggle-content p, .faq-answer p, .faq-item .faq-content p,
  .accordion .card-body p, .accordion-body p
) { color: #c7dbea !important; line-height: 1.75 !important; margin-bottom: .85em; }
body.relay-faq-page .main-content :is(
  .toggle .toggle-content a, .faq-answer a, .faq-item .faq-content a,
  .accordion .card-body a, .accordion-body a
) { color: #72d7f9 !important; text-decoration: underline; text-underline-offset: 3px; }
body.relay-faq-page .main-content :is(
  .toggle .toggle-content a, .faq-answer a, .faq-item .faq-content a,
  .accordion .card-body a, .accordion-body a
):hover { color: #fff !important; }

@media (max-width: 900px) {
  body.relay-faq-page .relay-faq-intro { flex-wrap: wrap; }
  body.relay-faq-page .relay-faq-intro__actions { flex: 1 1 100%; }
}
@media (max-width: 575px) {
  body.relay-faq-page .relay-faq-intro { margin-top: 15px; margin-bottom: 25px; padding: 20px 17px; }
  body.relay-faq-page .relay-faq-intro__actions { display: grid; grid-template-columns: 1fr; width: 100%; }
  body.relay-faq-page .relay-faq-intro__actions a { width: 100%; }
  body.relay-faq-page .main-content :is(.relay-faq-filter-track,.faq-filter,.faq-filters,.faq-nav) {
    gap: 6px;
    padding: 7px !important;
  }
  body.relay-faq-page .main-content :is(.toggle > label,.toggle-title,.accordion .card-header,.faq-item .faq-question) {
    padding: 14px 15px !important;
    font-size: .87rem !important;
  }
  body.relay-faq-page .main-content :is(.toggle .toggle-content,.faq-answer,.faq-item .faq-content,.accordion .card-body) {
    padding: 16px 15px !important;
    font-size: .87rem !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  body.relay-faq-page .relay-faq-intro__actions a,
  body.relay-faq-page .relay-faq-filter-link { transition: none !important; }
}


/* Build 0040: explicit hooks for FAQ controls identified in the live Porto
 * document. High specificity wins against Porto's red/white demo skin. */
body.relay-store-theme.relay-faq-page .main-content .relay-faq-filter-track {
  background: #0c1a2d !important;
  border: 1px solid rgba(60,145,195,.36) !important;
  border-radius: 13px !important;
  padding: 8px !important;
}
body.relay-store-theme.relay-faq-page .main-content .relay-faq-filter-link {
  background: #11243a !important;
  color: #d9eafd !important;
  border: 1px solid rgba(64,141,186,.3) !important;
  border-radius: 9px !important;
  padding: 10px 16px !important;
  box-shadow: none !important;
}
body.relay-store-theme.relay-faq-page .main-content .relay-faq-filter-link:is(.active,.current),
body.relay-store-theme.relay-faq-page .main-content .active > .relay-faq-filter-link,
body.relay-store-theme.relay-faq-page .main-content .relay-faq-filter-link[aria-current="page"] {
  background: linear-gradient(115deg,#096f9f,#4b55bd) !important;
  color: #fff !important;
  border-color: rgba(65,203,250,.64) !important;
}
body.relay-store-theme.relay-faq-page .main-content .relay-faq-card {
  background: #0c1c30 !important;
  border: 1px solid rgba(55,143,185,.4) !important;
  border-radius: 13px !important;
  overflow: hidden;
}
body.relay-store-theme.relay-faq-page .main-content .relay-faq-card .relay-faq-question,
body.relay-store-theme.relay-faq-page .main-content .relay-faq-card > label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 54px;
  padding: 16px 20px !important;
  background: linear-gradient(105deg,#133249,#17223d) !important;
  color: #f6faff !important;
  border: 0 !important;
  border-left: 3px solid #17c2e6 !important;
  font-weight: 800 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
body.relay-store-theme.relay-faq-page .main-content .relay-faq-card:is(.active,.show) .relay-faq-question,
body.relay-store-theme.relay-faq-page .main-content .relay-faq-card .relay-faq-question[aria-expanded="true"] {
  border-left-color: #a76cf0 !important;
}
body.relay-store-theme.relay-faq-page .main-content .relay-faq-card .relay-faq-answer,
body.relay-store-theme.relay-faq-page .main-content .relay-faq-card .toggle-content,
body.relay-store-theme.relay-faq-page .main-content .relay-faq-card .card-body {
  background: #0d1c2e !important;
  color: #c8dff0 !important;
  padding: 19px 22px !important;
  line-height: 1.7 !important;
  border: 0 !important;
}
body.relay-store-theme.relay-faq-page .main-content .relay-faq-card :is(.relay-faq-answer,.toggle-content,.card-body) p {
  color: #c8dff0 !important;
}