/*
 * 1DollarTrip — brand article design system
 *
 * Styles the blog-content elements described in
 * sites/1dollartrip.com/context/style-guide.md and brand-voice.md:
 * verified-deal callouts, price highlights, TL;DR blocks, reader stories,
 * tool/resource cards, mistake warnings, FAQ accordions, and step lists.
 *
 * Deployed as a standalone <link rel="stylesheet"> in design/okay_shop/html/
 * head.tpl (after the Font Awesome CDN line) so it loads independently of
 * the theme's own css.php combiner.
 *
 * Icons: Tabler Icons webfont, loaded via CDN in head.tpl --
 *   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tabler/icons-webfont@latest/tabler-icons.min.css">
 * Use icons anywhere in article HTML as: <i class="ti ti-plane"></i>
 * (full name list: https://tabler.io/icons). Color follows surrounding
 * text color via `color`, size via `font-size` -- no separate sizing class
 * needed the way an SVG sprite would.
 *
 * Everything is scoped under .post_container__body .block__description so it only affects blog
 * article body content, never the rest of the OkayCMS shop theme.
 */

:root {
  --dt-navy: #0f2a3d;
  --dt-navy-soft: #e7eef2;
  --dt-coral: #ff6b4a;
  --dt-coral-dark: #e0502f;
  --dt-coral-soft: #ffe8e1;
  --dt-ink: #1a1a1a;
  --dt-muted: #6b7280;
  --dt-bg: #ffffff;
  --dt-border: #e5e7eb;
  --dt-good: #1f8a5f;
  --dt-good-soft: #e1f2e8;
  --dt-warn: #a86a0c;
  --dt-warn-soft: #faedd4;
  --dt-radius: 10px;
}

.post_container__body .block__description {
  color: var(--dt-ink);
  font-variant-numeric: tabular-nums;
  line-height: 1.65;
}

.post_container__body .block__description h2 {
  margin-top: 1.8em;
  color: var(--dt-navy);
  letter-spacing: -0.01em;
}

.post_container__body .block__description h3 {
  margin-top: 1.4em;
  color: var(--dt-navy);
}

/* ============================================================
   Verified-deal callout
   <blockquote class="dt-deal"><i class="ti ti-circle-check"></i> ...</blockquote>
   ============================================================ */
.post_container__body .block__description blockquote.dt-deal {
  margin: 1.5em 0;
  padding: 1.1em 1.25em;
  background: var(--dt-coral-soft);
  border-left: 4px solid var(--dt-coral);
  border-radius: 0 var(--dt-radius) var(--dt-radius) 0;
  font-size: 1.05em;
}

.post_container__body .block__description blockquote.dt-deal .ti {
  color: var(--dt-coral-dark);
  margin-right: 0.35em;
}

.post_container__body .block__description blockquote.dt-deal strong {
  color: var(--dt-coral-dark);
}

/* Generic blockquote fallback -- only top-level quotes (direct children of
   .post_container__body .block__description), so it never overrides blockquotes nested inside other
   components like .dt-story (specificity would otherwise let this win) */
.post_container__body .block__description > blockquote:not(.dt-deal) {
  margin: 1.5em 0;
  padding: 0.75em 1.25em;
  background: var(--dt-navy-soft);
  border-left: 4px solid var(--dt-navy);
  border-radius: 0 var(--dt-radius) var(--dt-radius) 0;
  color: var(--dt-navy);
}

/* ============================================================
   TL;DR / Key Takeaways block
   ============================================================ */
.post_container__body .block__description .dt-takeaways {
  background: var(--dt-navy-soft);
  border: 1px solid var(--dt-navy);
  border-radius: var(--dt-radius);
  padding: 1.25em 1.5em;
  margin: 1.5em 0 2em;
}

.post_container__body .block__description .dt-takeaways p:first-child {
  margin-top: 0;
  font-weight: 700;
  color: var(--dt-navy);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.85em;
}

.post_container__body .block__description .dt-takeaways ul {
  margin: 0.5em 0 0;
  padding-left: 0;
  list-style: none;
}

.post_container__body .block__description .dt-takeaways li {
  position: relative;
  padding-left: 1.6em;
  margin-bottom: 0.5em;
}

.post_container__body .block__description .dt-takeaways li .ti {
  position: absolute;
  left: 0;
  top: 0.15em;
  color: var(--dt-good);
}

/* ============================================================
   Reader story card (mini-story pull-quote)
   <div class="dt-story"><i class="ti ti-message-circle"></i>
     <blockquote>...</blockquote><cite>Name, context</cite></div>
   ============================================================ */
.post_container__body .block__description .dt-story {
  position: relative;
  margin: 1.75em 0;
  padding: 1.5em 1.5em 1.25em 3.25em;
  background: var(--dt-bg);
  border: 1px solid var(--dt-border);
  border-radius: var(--dt-radius);
  box-shadow: 0 1px 2px rgba(15, 42, 61, 0.06);
}

.post_container__body .block__description .dt-story .ti {
  position: absolute;
  left: 1.25em;
  top: 1.4em;
  font-size: 1.4em;
  color: var(--dt-coral);
}

.post_container__body .block__description .dt-story blockquote {
  margin: 0;
  padding: 0;
  border: none;
  background: none;
  font-style: italic;
  color: var(--dt-ink);
}

.post_container__body .block__description .dt-story cite {
  display: block;
  margin-top: 0.6em;
  font-style: normal;
  font-size: 0.85em;
  font-weight: 600;
  color: var(--dt-muted);
}

/* ============================================================
   Tools / resource card grid
   <div class="dt-tools-grid">
     <div class="dt-tool-card"><i class="ti ti-map-pin"></i>
       <strong>Name</strong><p>Description</p></div>
     ...
   </div>
   ============================================================ */
.post_container__body .block__description .dt-tools-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1em;
  margin: 1.75em 0;
}

.post_container__body .block__description .dt-tool-card {
  padding: 1.25em;
  background: var(--dt-bg);
  border: 1px solid var(--dt-border);
  border-radius: var(--dt-radius);
}

.post_container__body .block__description .dt-tool-card .ti {
  font-size: 1.5em;
  color: var(--dt-coral);
  margin-bottom: 0.4em;
  display: block;
}

.post_container__body .block__description .dt-tool-card strong {
  display: block;
  color: var(--dt-navy);
  margin-bottom: 0.3em;
}

.post_container__body .block__description .dt-tool-card p {
  margin: 0;
  font-size: 0.92em;
  color: var(--dt-muted);
}

/* ============================================================
   Common-mistake / warning item
   <p class="dt-mistake"><i class="ti ti-alert-triangle"></i>
     <strong>Mistake name.</strong> Explanation...</p>
   ============================================================ */
.post_container__body .block__description .dt-mistake {
  display: flex;
  gap: 0.6em;
  align-items: flex-start;
  margin: 1em 0;
  padding: 0.9em 1em;
  background: var(--dt-warn-soft);
  border-radius: var(--dt-radius);
}

.post_container__body .block__description .dt-mistake .ti {
  color: var(--dt-warn);
  font-size: 1.2em;
  flex: none;
  margin-top: 0.1em;
}

.post_container__body .block__description .dt-mistake p {
  margin: 0;
}

/* ============================================================
   Numbered step list
   <ol class="dt-steps"><li>...</li>...</ol>
   ============================================================ */
.post_container__body .block__description ol.dt-steps {
  list-style: none;
  counter-reset: dt-step;
  padding-left: 0;
  margin: 1.5em 0;
}

.post_container__body .block__description ol.dt-steps li {
  counter-increment: dt-step;
  position: relative;
  padding: 0 0 1.2em 2.6em;
}

.post_container__body .block__description ol.dt-steps li::before {
  content: counter(dt-step);
  position: absolute;
  left: 0;
  top: 0;
  width: 1.8em;
  height: 1.8em;
  border-radius: 50%;
  background: var(--dt-navy);
  color: #fff;
  font-weight: 700;
  font-size: 0.85em;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ============================================================
   FAQ accordion (native details/summary -- accessible, no JS needed)
   <div class="dt-faq">
     <details><summary>Question? <i class="ti ti-chevron-down"></i></summary>
       <p>Answer.</p>
     </details>
     ...
   </div>
   ============================================================ */
.post_container__body .block__description .dt-faq details {
  border-bottom: 1px solid var(--dt-border);
  padding: 0.9em 0;
}

.post_container__body .block__description .dt-faq summary {
  cursor: pointer;
  font-weight: 700;
  color: var(--dt-navy);
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1em;
}

.post_container__body .block__description .dt-faq summary::-webkit-details-marker {
  display: none;
}

.post_container__body .block__description .dt-faq summary .ti {
  color: var(--dt-muted);
  transition: transform 0.15s ease;
  flex: none;
}

.post_container__body .block__description .dt-faq details[open] summary .ti {
  transform: rotate(180deg);
}

.post_container__body .block__description .dt-faq details p {
  margin: 0.7em 0 0;
  color: var(--dt-muted);
}

/* ============================================================
   Price highlight, editorial note, tag chip, CTA button
   ============================================================ */
.post_container__body .block__description .dt-price {
  font-weight: 700;
  color: var(--dt-coral-dark);
}

.post_container__body .block__description .dt-editorial-note {
  background: var(--dt-warn-soft);
  border: 1px dashed var(--dt-warn);
  border-radius: var(--dt-radius);
  padding: 1em 1.25em;
  color: var(--dt-warn);
  font-style: italic;
  font-size: 0.95em;
}

.post_container__body .block__description .dt-tag,
.dt-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  padding: 0.2em 0.7em;
  border-radius: 999px;
  background: var(--dt-navy-soft);
  color: var(--dt-navy);
  font-size: 0.8em;
  font-weight: 600;
  text-decoration: none;
}

.post_container__body .block__description .dt-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.7em 1.4em;
  background: var(--dt-coral);
  color: #fff;
  font-weight: 700;
  border-radius: var(--dt-radius);
  text-decoration: none;
}

.post_container__body .block__description .dt-cta:hover {
  background: var(--dt-coral-dark);
}

/* ============================================================
   HOMEPAGE BLOG REDESIGN
   Hero, article grid, section headers, CTA banner.
   Header shop-element cleanup via display:none.
   ============================================================ */

/* ── Hide e-commerce header elements ─────────────────────────── */
#wishlist,
#comparison,
#cart_informer,
.fn_search_toggle,
#fn_search,
.catalog_button,
.header-contact,
.fn_callback.callback,
.fn_catalog_menu { display: none !important; }

.header__top { background: var(--dt-navy); }
.header__top .f_row { justify-content: flex-end; }

.switcher { margin-left: auto; }

/* ── Hero ────────────────────────────────────────────────────── */
.bl-hero {
  background: linear-gradient(140deg, #0a1f2e 0%, var(--dt-navy) 55%, #1a3d5c 100%);
  padding: 72px 0 80px;
  position: relative;
  overflow: hidden;
}

.bl-hero .container {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}

.bl-hero__inner { max-width: 600px; }

.bl-hero__deco {
  font-family: 'tabler-icons', sans-serif;
  font-size: 220px;
  color: rgba(255,107,74,.07);
  line-height: 1;
  flex-shrink: 0;
  pointer-events: none;
  user-select: none;
}

.bl-hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255,107,74,.15);
  color: var(--dt-coral);
  border: 1px solid rgba(255,107,74,.3);
  border-radius: 100px;
  padding: 6px 16px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .6px;
  text-transform: uppercase;
  margin-bottom: 24px;
}

.bl-hero__title {
  font-size: clamp(34px, 4.5vw, 60px);
  font-weight: 800;
  color: #fff;
  line-height: 1.15;
  margin: 0 0 20px;
  letter-spacing: -1.5px;
}

.bl-hero__sub {
  font-size: 18px;
  color: rgba(255,255,255,.65);
  line-height: 1.65;
  margin: 0 0 36px;
}

.bl-hero__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--dt-coral);
  color: #fff !important;
  font-weight: 700;
  font-size: 16px;
  padding: 14px 28px;
  border-radius: 8px;
  text-decoration: none !important;
  transition: background .2s, transform .15s, box-shadow .2s;
  box-shadow: 0 4px 16px rgba(255,107,74,.35);
}

.bl-hero__cta:hover {
  background: var(--dt-coral-dark);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(255,107,74,.45);
}

/* ── Section header ──────────────────────────────────────────── */
.bl-section {
  padding: 56px 0 8px;
}

.bl-section__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 28px;
  gap: 16px;
}

.bl-section__title {
  font-size: 24px;
  font-weight: 800;
  color: var(--dt-navy);
  margin: 0;
  letter-spacing: -.5px;
}

.bl-section__more {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--dt-coral);
  font-weight: 600;
  font-size: 14px;
  text-decoration: none !important;
  white-space: nowrap;
  flex-shrink: 0;
  transition: color .15s;
}

.bl-section__more:hover { color: var(--dt-coral-dark); }

/* ── Article grid ────────────────────────────────────────────── */
.bl-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  align-items: start;
}

.bl-grid__item--featured { grid-column: span 2; }

/* ── Article card ────────────────────────────────────────────── */
.bl-grid__item .article__preview {
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid #e5eaf0;
  box-shadow: 0 2px 8px rgba(15,42,61,.05);
  transition: box-shadow .2s, transform .2s;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.bl-grid__item .article__preview:hover {
  box-shadow: 0 10px 28px rgba(15,42,61,.12);
  transform: translateY(-3px);
}

.bl-grid__item .article__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 0;
}

.bl-grid__item .article__image {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background: #e8edf3;
  flex-shrink: 0;
}

.bl-grid__item .article__image_link { display: block; height: 100%; }

.bl-grid__item .article__image picture { height: 100%; display: block; }

.bl-grid__item .article__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .4s ease;
  display: block;
}

.bl-grid__item .article__preview:hover .article__image img {
  transform: scale(1.05);
}

.bl-grid__item .article__no_image {
  height: 100%;
  min-height: 160px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #e0e8f0, #ccd6e0);
  color: #a0adb8;
}

.bl-grid__item .article__labels {
  position: absolute;
  bottom: 10px;
  left: 10px;
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}

.bl-grid__item .article__label {
  display: inline-block;
  background: var(--dt-coral);
  color: #fff !important;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  padding: 3px 9px;
  border-radius: 4px;
  text-decoration: none !important;
  transition: background .15s;
}

.bl-grid__item .article__label:hover { background: var(--dt-coral-dark); }

.bl-grid__item .article__title {
  display: block;
  font-size: 17px;
  font-weight: 700;
  color: var(--dt-navy) !important;
  line-height: 1.4;
  margin: 16px 16px 10px;
  text-decoration: none !important;
  transition: color .15s;
}

.bl-grid__item .article__title:hover { color: var(--dt-coral) !important; }

.bl-grid__item--featured .article__title {
  font-size: 22px !important;
}

.bl-grid__item .article__info {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 16px 10px;
  color: #8a9aaa;
  font-size: 12px;
}

.bl-grid__item .article__info_item {
  display: flex;
  align-items: center;
  gap: 4px;
}

.bl-grid__item .article__info svg { width: 13px; height: 13px; }

.bl-grid__item .article__annotation {
  font-size: 14px;
  color: #4e5e6e;
  line-height: 1.6;
  padding: 0 16px 16px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.bl-grid__item--featured .article__annotation {
  -webkit-line-clamp: 4;
  font-size: 15px;
}

.bl-grid__item .article__footer {
  padding: 12px 16px;
  border-top: 1px solid #edf0f3;
  margin-top: auto;
}

.bl-grid__item .article__info_item--author {
  font-size: 13px;
  color: #6a7a88;
  font-weight: 500;
}

.bl-grid__item .article__avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
}

.bl-grid__item .article__author { color: #6a7a88; text-decoration: none; }
.bl-grid__item .article__author--link:hover { color: var(--dt-coral); }

/* ── CTA banner ──────────────────────────────────────────────── */
.bl-cta {
  padding: 40px 0 64px;
}

.bl-cta__inner {
  background: linear-gradient(140deg, #0a1f2e, var(--dt-navy));
  border-radius: 16px;
  padding: 40px 48px;
  display: flex;
  align-items: center;
  gap: 28px;
}

.bl-cta__icon {
  font-size: 48px;
  color: var(--dt-coral);
  flex-shrink: 0;
  opacity: .85;
}

.bl-cta__text { flex: 1; }

.bl-cta__text h2 {
  font-size: 22px;
  font-weight: 700;
  color: #fff;
  margin: 0 0 8px;
}

.bl-cta__text p {
  font-size: 15px;
  color: rgba(255,255,255,.6);
  margin: 0;
}

.bl-cta__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--dt-coral);
  color: #fff !important;
  font-weight: 700;
  font-size: 15px;
  padding: 13px 24px;
  border-radius: 8px;
  text-decoration: none !important;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background .2s, transform .15s;
  box-shadow: 0 4px 12px rgba(255,107,74,.3);
}

.bl-cta__btn:hover {
  background: var(--dt-coral-dark);
  transform: translateY(-1px);
}

/* ── Blog listing page card improvements ─────────────────────── */
.article_list .article__preview {
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid #e5eaf0;
  box-shadow: 0 2px 8px rgba(15,42,61,.05);
  transition: box-shadow .2s, transform .2s;
}

.article_list .article__preview:hover {
  box-shadow: 0 8px 24px rgba(15,42,61,.11);
  transform: translateY(-2px);
}

.article_list .article__label {
  background: var(--dt-coral);
  color: #fff !important;
  text-decoration: none !important;
}

.article_list .article__title {
  font-weight: 700;
  color: var(--dt-navy) !important;
}

.article_list .article__title:hover { color: var(--dt-coral) !important; }

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 1199px) {
  .bl-hero__deco { font-size: 160px; }
}

@media (max-width: 991px) {
  .bl-hero { padding: 52px 0 60px; }
  .bl-hero__deco { display: none; }
  .bl-hero__title { font-size: 40px; letter-spacing: -1px; }
  .bl-grid { grid-template-columns: repeat(2, 1fr); }
  .bl-grid__item--featured { grid-column: span 2; }
  .bl-cta__inner { flex-direction: column; align-items: flex-start; padding: 32px; }
  .bl-cta__icon { display: none; }
}

@media (max-width: 575px) {
  .bl-hero { padding: 36px 0 44px; }
  .bl-hero__title { font-size: 30px; letter-spacing: -.5px; }
  .bl-hero__sub { font-size: 16px; }
  .bl-hero__cta { font-size: 15px; padding: 12px 22px; }
  .bl-grid { grid-template-columns: 1fr; }
  .bl-grid__item--featured { grid-column: span 1; }
  .bl-section__header { flex-direction: column; align-items: flex-start; gap: 6px; }
  .bl-cta__inner { padding: 24px 20px; }
  .bl-cta__text h2 { font-size: 18px; }
}

/* ============================================================
   HEADER — Aviation gradient redesign
   Deep navy gradient + dot-grid flight-map texture + coral accent
   ============================================================ */

.header {
  background: linear-gradient(160deg, #060f1a 0%, #0c2235 45%, #0f2a3d 75%, #163552 100%);
  position: relative;
  overflow: hidden;
}

/* Dot-grid texture — suggests a flight route map */
.header::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(255,255,255,.055) 1px, transparent 1px);
  background-size: 26px 26px;
  pointer-events: none;
  z-index: 0;
}

/* Coral gradient accent line at the bottom of the header */
.header::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(255,107,74,.4) 15%,
    #ff6b4a 40%,
    #ff6b4a 60%,
    rgba(255,107,74,.4) 85%,
    transparent 100%);
  z-index: 1;
}

/* All child sections sit above the pseudo-elements */
.header__top,
.header__center,
.header__bottom { position: relative; z-index: 2; }

/* Remove section backgrounds/borders — one unified header.
   !important required: OkayCMS theme sets these with !important on inner pages */
.header__top {
  background: transparent !important;
  border-bottom: 1px solid rgba(255,255,255,.07) !important;
}

.header__center {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

.header__bottom,
.header__bottom .fn_header__sticky {
  background: transparent !important;
  border-top: 1px solid rgba(255,255,255,.06) !important;
}

/* Sticky state: keep the gradient */
.header__bottom .fn_header__sticky.is-sticky {
  background: linear-gradient(160deg, #060f1a 0%, #0c2235 50%, #163552 100%) !important;
  box-shadow: 0 4px 28px rgba(0,0,0,.45) !important;
}

/* ── Text & links inside the header ──────────────────────────── */

/* Account / personal cabinet */
.user_informer,
.user_informer a,
.user_informer span { color: rgba(255,255,255,.7) !important; }
.user_informer a:hover { color: #ff6b4a !important; }

/* Callback link (hidden but just in case) */
.callback.fn_callback span { color: rgba(255,255,255,.65) !important; }

/* Language switcher — always-visible pill buttons, no dropdown */

/* Hide the "current language" trigger */
.switcher__visible { display: none !important; }

/* Show all language links inline as a flex row */
.switcher__hidden {
  display: flex !important;
  position: static !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  gap: 4px !important;
}

/* Each language link = compact pill: flag only */
.switcher__hidden .switcher__link {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  padding: 3px 8px !important;
  border-radius: 4px !important;
  color: rgba(255,255,255,.65) !important;
  text-decoration: none !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: .5px !important;
  text-transform: uppercase !important;
  border: 1px solid rgba(255,255,255,.15) !important;
  background: transparent !important;
  transition: background .15s, color .15s, border-color .15s !important;
}

.switcher__hidden .switcher__link:hover {
  background: rgba(255,255,255,.1) !important;
  color: #fff !important;
  border-color: rgba(255,255,255,.3) !important;
}

/* Active = current language highlighted coral */
.switcher__hidden .switcher__link.active {
  background: rgba(255,107,74,.15) !important;
  border-color: rgba(255,107,74,.45) !important;
  color: #ff6b4a !important;
}

/* Keep language name text short — hide full word, show only flag */
.switcher__hidden .switcher__name { display: none !important; }

/* Legacy dropdown overrides no longer needed — kept as dead-selectors */
.switcher__delimiter { color: rgba(255,255,255,.3) !important; }

/* Logo — invert if the logo image is dark */
.header__logo .logo__link img {
  filter: brightness(0) invert(1);
  opacity: .92;
}

/* Site name text fallback */
.header__logo .logo__link { color: #fff !important; }

/* Main navigation */
.header__menu,
.header__menu ul { background: transparent !important; }

.header__menu a,
.header__menu li > a,
.header__menu .menu__link {
  color: rgba(255,255,255,.82) !important;
  font-weight: 500;
}

.header__menu a:hover,
.header__menu li > a:hover { color: #ff6b4a !important; }

.header__menu .menu__item--active > a,
.header__menu li.active > a,
.header__menu .current > a { color: #ff6b4a !important; }

/* Dropdown submenus */
.header__menu .sub-menu,
.header__menu .dropdown-menu {
  background: #0c2235 !important;
  border: 1px solid rgba(255,255,255,.1) !important;
  box-shadow: 0 8px 24px rgba(0,0,0,.4) !important;
}

.header__menu .sub-menu a,
.header__menu .dropdown-menu a { color: rgba(255,255,255,.8) !important; }
.header__menu .sub-menu a:hover { color: #ff6b4a !important; }

/* Mobile menu button */
.menu_switcher .menu_switcher__heading span,
.menu_switcher .catalog_icon,
.fn_menu_switch .menu_switcher__heading span { color: rgba(255,255,255,.85) !important; }

/* Phone / email in header (we've hidden .header-contact but just in case) */
.header-contact__section span,
.header-contact__section { color: rgba(255,255,255,.7) !important; }

/* ── Responsive header ───────────────────────────────────────── */
@media (max-width: 991px) {
  .header::before { background-size: 20px 20px; }
}

/* ============================================================
   CANVAS — HTML5 animated header (flight route map)
   ============================================================ */

#hdr-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

/* Push ::after coral line above canvas */
.header::after { z-index: 2; }

/* Push header content above canvas */
.header__top,
.header__center,
.header__bottom { z-index: 3; }

/* ============================================================
   INFINITE FLIGHT STYLE — Dark main page + horizontal cards
   ============================================================ */

/* Dark body on homepage only */
body.main_page { background: #1b1d24; }
body.main_page .main { background: #1b1d24; }

/* Footer dark adaptation */
body.main_page .footer {
  background: #13151b;
  border-top: 1px solid rgba(255,255,255,.06);
}
body.main_page .footer .footer__title span { color: rgba(255,255,255,.85) !important; }
body.main_page .footer .footer__content a,
body.main_page .footer .footer__menu_link { color: rgba(255,255,255,.55) !important; }
body.main_page .footer .footer__content a:hover,
body.main_page .footer .footer__menu_link:hover { color: #ff6b4a !important; }
body.main_page .footer .footer__title_arrow svg { fill: rgba(255,255,255,.4); }

body.main_page .footer__copyright {
  background: #0e1014;
  border-top: 1px solid rgba(255,255,255,.05);
}
body.main_page .footer__copyright span,
body.main_page .footer__copyright a { color: rgba(255,255,255,.3) !important; }

/* Section title on dark bg */
body.main_page .bl-section__title { color: #f0f2f5; }
body.main_page .bl-section__more { color: #ff6b4a; }

/* ── Single-column horizontal card feed (Infinite Flight style) ── */

body.main_page .bl-grid {
  grid-template-columns: 1fr;
  gap: 20px;
}

body.main_page .bl-grid__item--featured { grid-column: span 1; }

/* Card dark styling */
body.main_page .bl-grid__item .article__preview {
  background: #22252d;
  border: 1px solid rgba(255,255,255,.07);
  box-shadow: 0 8px 25px rgb(19 48 72);
  min-height: 220px;
  border-radius: 12px;
}

/* Horizontal layout: image grid-row spans all rows in column 1 */
body.main_page .bl-grid__item .article__body {
  display: grid;
  grid-template-columns: 300px 1fr;
  flex: 1;
}

body.main_page .bl-grid__item .article__image {
  grid-column: 1;
  grid-row: 1 / 5;
  aspect-ratio: unset;
  height: 100%;
  min-height: 220px;
  border-radius: 12px 0 0 12px;
}

body.main_page .bl-grid__item .article__image img { height: 100%; object-fit: cover; transition: none; }

/* Content in column 2 */
body.main_page .bl-grid__item .article__title {
  grid-column: 2;
  grid-row: 1;
  color: #f0f2f5 !important;
  font-size: 20px;
  font-weight: 700;
  margin: 24px 24px 10px;
  line-height: 1.35;
}
body.main_page .bl-grid__item .article__title:hover { color: #ff6b4a !important; }

body.main_page .bl-grid__item--featured .article__title {
  font-size: 22px !important;
  margin: 28px 28px 12px;
}

body.main_page .bl-grid__item .article__info {
  grid-column: 2;
  grid-row: 2;
  padding: 0 24px 10px;
  color: rgba(255,255,255,.38);
}

body.main_page .bl-grid__item .article__info svg { fill: rgba(255,255,255,.3); }

body.main_page .bl-grid__item .article__annotation {
  grid-column: 2;
  grid-row: 3;
  color: rgba(255,255,255,.55);
  padding: 0 24px 16px;
}

/* Footer bar at bottom spans both columns */
body.main_page .bl-grid__item .article__footer {
  border-top: 1px solid rgba(255,255,255,.07);
  padding: 12px 16px;
}

body.main_page .bl-grid__item .article__author { color: rgba(255,255,255,.42) !important; }
body.main_page .bl-grid__item .article__author--link:hover { color: #ff6b4a !important; }

body.main_page .bl-grid__item .article__label {
  background: var(--dt-coral);
  color: #fff !important;
}

/* ── Footer dark — полное перекрытие всех светлых элементов ────── */

body.main_page .footer {
  background: #13151b !important;
  border-top: 1px solid rgba(255,255,255,.06) !important;
}

/* Все потомки футера по умолчанию светлый текст */
body.main_page .footer,
body.main_page .footer span,
body.main_page .footer p,
body.main_page .footer div,
body.main_page .footer li { color: rgba(255,255,255,.65); }

body.main_page .footer a { color: rgba(255,255,255,.55) !important; }
body.main_page .footer a:hover { color: #ff6b4a !important; }

body.main_page .footer__title span { color: rgba(255,255,255,.88) !important; font-weight: 600; }
body.main_page .footer__title_arrow svg path { stroke: rgba(255,255,255,.4) !important; }

body.main_page .footer__content,
body.main_page .footer__hidden { background: transparent !important; }

/* Subscribe form */
body.main_page .subscribe__title,
body.main_page .subscribe__title span { color: rgba(255,255,255,.55) !important; }

body.main_page .form__group--subscribe { background: transparent !important; }

body.main_page .form__input,
body.main_page .form__input_subscribe {
  background: rgba(255,255,255,.08) !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  color: rgba(255,255,255,.9) !important;
  border-radius: 6px;
}

body.main_page .form__input::placeholder,
body.main_page .form__input_subscribe::placeholder { color: rgba(255,255,255,.35) !important; }

body.main_page .form__button--subscribe {
  background: var(--dt-coral) !important;
  color: #fff !important;
  border: none !important;
}

/* Copyright bar */
body.main_page .footer__copyright {
  background: #0e1014 !important;
  border-top: 1px solid rgba(255,255,255,.05) !important;
}
body.main_page .footer__copyright span,
body.main_page .footer__copyright a { color: rgba(255,255,255,.28) !important; }

/* Social icons */
body.main_page .footer .social__link { color: rgba(255,255,255,.5) !important; }
body.main_page .footer .social__link:hover { color: #ff6b4a !important; }

/* ── Header — принудительный прозрачный фон (OkayCMS перебивает) ─ */

body.main_page .header__center {
  background: transparent !important;
  border: none !important;
}

/* Switcher dropdown */
body.main_page .switcher__hidden {
  background: #0c2235 !important;
  border: 1px solid rgba(255,255,255,.12) !important;
}
body.main_page .switcher__hidden a,
body.main_page .switcher__hidden span { color: rgba(255,255,255,.8) !important; }

/* Mobile menu */
body.main_page .fn_mobile_menu {
  background: #1b1d24 !important;
  border-right: 1px solid rgba(255,255,255,.08) !important;
}
body.main_page .fn_mobile_menu * { color: rgba(255,255,255,.8) !important; }

/* Scroll-to-top button */
body.main_page .fn_to_top {
  background: var(--dt-coral) !important;
  border: none !important;
}

/* Скрыть магазинные блоки (advantages, shortcode banners) */
body.main_page .banner_advantages,
body.main_page .banner_advantages__preview,
body.main_page [class*="advantage"] { display: none !important; }

/* Скрыть hero-баннер и CTA */
body.main_page .bl-hero,
body.main_page .bl-cta { display: none !important; }

/* ── Card inner element backgrounds — force transparent (OkayCMS sets #fff on links) ── */

body.main_page .article__title,
body.main_page .bl-grid__item .article__title { background: transparent !important; }

body.main_page .article__footer,
body.main_page .bl-grid__item .article__footer {
  background: #2b2e35;
  grid-column: 2;
  grid-row: 4;
  border-top: 1px solid rgba(255,255,255,.07) !important;
}

/* block--boxed wrapper around hidden advantages banners — still renders as white strip */
body.main_page .block--boxed:has(.banner_advantages) { display: none !important; }

/* Popups (callback / fast-order) — dark when opened */
body.main_page .popup.fn_validate_callback,
body.main_page .popup.fn_validate_fast_order {
  background: #22252d !important;
  border: 1px solid rgba(255,255,255,.1) !important;
}
body.main_page .popup .form__title { background: transparent !important; color: #f0f2f5 !important; }
body.main_page .popup textarea,
body.main_page .popup input:not([type=submit]):not([type=button]) {
  background: rgba(255,255,255,.08) !important;
  border-color: rgba(255,255,255,.18) !important;
  color: rgba(255,255,255,.9) !important;
}

/* ============================================================
   3-COLUMN CATEGORY FEED (homepage)
   ============================================================ */

.bl-3col {
  padding: 32px 0 56px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  align-items: start;
}

.bl-3col__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 2px solid rgba(255,107,74,.35);
}

.bl-3col__title {
  font-size: 17px;
  font-weight: 800;
  color: #f0f2f5;
  margin: 0;
  letter-spacing: -.2px;
  text-transform: uppercase;
}

.bl-3col__more {
  font-size: 12px;
  font-weight: 600;
  color: #ff6b4a;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  white-space: nowrap;
  flex-shrink: 0;
}
.bl-3col__more:hover { color: #e0502f; }

.bl-3col__col { min-width: 0; overflow: hidden; }
.bl-3col__item { margin-bottom: 12px; }
.bl-3col__item:last-child { margin-bottom: 0; }

.bl-3col__empty {
  color: rgba(255,255,255,.3);
  font-size: 14px;
  padding: 16px 0;
  margin: 0;
}

/* Vertical card layout inside 3-col — overrides the horizontal grid */
body.main_page .bl-3col__item .article__body {
  display: flex !important;
  flex-direction: column !important;
  grid-template-columns: unset !important;
}

body.main_page .bl-3col__item .article__image {
  grid-column: unset !important;
  grid-row: unset !important;
  aspect-ratio: 16 / 9 !important;
  height: auto !important;
  min-height: unset !important;
  border-radius: 8px 8px 0 0 !important;
}

body.main_page .bl-3col__item .article__title {
  grid-column: unset !important;
  grid-row: unset !important;
  font-size: 14px !important;
  margin: 12px 14px 6px !important;
  line-height: 1.4 !important;
  display: block !important;
  max-width: 100% !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

body.main_page .bl-3col__item .article__info {
  grid-column: unset !important;
  grid-row: unset !important;
  padding: 0 14px 6px !important;
}

body.main_page .bl-3col__item .article__annotation {
  grid-column: unset !important;
  grid-row: unset !important;
  padding: 0 14px 10px !important;
  font-size: 13px !important;
  -webkit-line-clamp: 2 !important;
}

body.main_page .bl-3col__item .article__footer {
  grid-column: unset !important;
  grid-row: unset !important;
}

body.main_page .bl-3col__item .article__preview {
  min-height: unset !important;
  border-radius: 8px !important;
}

@media (max-width: 991px) {
  .bl-3col { grid-template-columns: 1fr 1fr; gap: 24px; }
}

@media (max-width: 575px) {
  .bl-3col { grid-template-columns: 1fr; gap: 28px; padding: 20px 0 36px; }
}

/* ── Responsive dark-mode adjustments ─────────────────────────── */

@media (max-width: 991px) {
  body.main_page .bl-grid__item .article__body {
    grid-template-columns: 240px 1fr;
  }
  body.main_page .bl-grid__item .article__image {
    min-height: 190px;
  }
}

@media (max-width: 575px) {
  body.main_page .bl-grid__item .article__body {
    grid-template-columns: 1fr;
  }
  body.main_page .bl-grid__item .article__image {
    grid-column: 1;
    grid-row: 1;
    aspect-ratio: 16 / 9;
    height: auto;
    min-height: auto;
    border-radius: 12px 12px 0 0;
  }
  body.main_page .bl-grid__item .article__title {
    grid-column: 1; grid-row: 2;
    margin: 16px 16px 8px;
  }
  body.main_page .bl-grid__item .article__info {
    grid-column: 1; grid-row: 3;
    padding: 0 16px 8px;
  }
  body.main_page .bl-grid__item .article__annotation {
    grid-column: 1; grid-row: 4;
    padding: 0 16px 12px;
  }
}