/*
 * DRTV UI Core 1.0.12
 * Canonical presentation contract for DRTV-owned frontend UI.
 *
 * Rules:
 * - Scoped to .drtv-ui / .drtv-prose. Never globally resets JNews.
 * - Mobile-first, fluid between breakpoints, readable on wide screens.
 * - Business logic and product data stay in their owning canonical systems.
 * - Consumer plugins may change --drtv-accent / --drtv-accent-* locally to keep
 *   their visual character without recreating the shared component system.
 */

:root {
  /* Brand + semantic colours */
  --drtv-red: #ed1b2f;
  --drtv-red-hover: #d91327;
  --drtv-red-active: #c81123;
  --drtv-live: #16a34a;
  --drtv-live-ink: #08783d;
  --drtv-live-soft: #e9f9ef;
  --drtv-gold: #f4c430;
  --drtv-gold-hover: #e2b11e;
  /* Stable Wallet Credit/value text gold. Feature accents must not recolour money values.
     Accent/border gold stays on --drtv-gold; financial figures use this darker readable gold. */
  --drtv-value-gold: #9a6400;
  --drtv-value-gold-label: #8a5a00;
  --drtv-value-gold-accent: var(--drtv-gold);

  --drtv-ink: #111827;
  --drtv-ink-2: #344054;
  --drtv-muted: #667085;
  --drtv-muted-soft: #98a2b3;
  --drtv-border: #e4e7ec;
  --drtv-border-strong: #cfd4dc;
  --drtv-canvas: #f5f7fa;
  --drtv-surface: #ffffff;
  --drtv-surface-muted: #f8fafc;

  --drtv-dark: #0d1724;
  --drtv-dark-2: #111d2b;
  --drtv-dark-3: #182432;
  --drtv-dark-border: rgba(255, 255, 255, .11);
  --drtv-dark-border-strong: rgba(255, 255, 255, .19);
  --drtv-dark-text: #f8fafc;
  --drtv-dark-muted: #cbd5e1;

  --drtv-warning: #b45309;
  --drtv-warning-soft: #fff7ed;
  --drtv-danger: #b42318;
  --drtv-danger-soft: #fef3f2;
  --drtv-info: #175cd3;
  --drtv-info-soft: #eff8ff;

  /* Local accent contract: red by default; a surface may safely override. */
  --drtv-accent: var(--drtv-red);
  --drtv-accent-hover: var(--drtv-red-hover);
  --drtv-accent-active: var(--drtv-red-active);
  --drtv-accent-contrast: #ffffff;
  --drtv-accent-soft: rgba(237, 27, 47, .08);
  --drtv-accent-focus: rgba(237, 27, 47, .30);

  /* Typography */
  --drtv-font-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --drtv-fw-regular: 400;
  --drtv-fw-medium: 600;
  --drtv-fw-bold: 750;
  --drtv-fw-heavy: 850;

  --drtv-fs-micro: clamp(.6875rem, .665rem + .06vw, .75rem);
  --drtv-fs-label: clamp(.75rem, .72rem + .08vw, .8125rem);
  --drtv-fs-compact: clamp(.8125rem, .78rem + .10vw, .9rem);
  --drtv-fs-compact-button: clamp(.8125rem, .78rem + .10vw, .9rem);
  --drtv-fs-eyebrow: clamp(.72rem, .70rem + .08vw, .79rem);
  --drtv-fs-caption: clamp(.85rem, .82rem + .09vw, .94rem);
  --drtv-fs-body: clamp(1rem, .985rem + .06vw, 1.0625rem);
  --drtv-fs-body-lg: clamp(1.075rem, 1.04rem + .12vw, 1.1875rem);
  --drtv-fs-button: clamp(.9375rem, .92rem + .06vw, 1rem);
  --drtv-fs-tab: clamp(.875rem, .85rem + .08vw, .975rem);
  --drtv-fs-card-title: clamp(1.125rem, 1.06rem + .22vw, 1.375rem);
  --drtv-fs-module-title: clamp(1.45rem, 1.32rem + .40vw, 1.85rem);
  --drtv-fs-section: clamp(1.55rem, 1.35rem + .65vw, 2.05rem);
  --drtv-fs-page: clamp(2rem, 1.68rem + 1vw, 2.875rem);
  --drtv-fs-hero: clamp(2.15rem, 1.74rem + 1.35vw, 3.4rem);

  --drtv-lh-tight: 1.08;
  --drtv-lh-title: 1.18;
  --drtv-lh-body: 1.56;
  --drtv-lh-prose: 1.72;
  --drtv-readable: 72ch;
  --drtv-readable-tight: 58ch;

  /* Canonical application edge spacing. JNews wrappers are collapsed to zero;
     every DRTV application then receives this one deliberate top gap. */
  --drtv-app-top-gap: 10px;

  /* Spacing */
  --drtv-space-1: 4px;
  --drtv-space-2: 8px;
  --drtv-space-3: 12px;
  --drtv-space-4: 16px;
  --drtv-space-5: 20px;
  --drtv-space-6: 24px;
  --drtv-space-7: 32px;
  --drtv-space-8: 40px;
  --drtv-space-9: 48px;
  --drtv-space-10: 64px;
  --drtv-space-11: 80px;

  --drtv-page-gutter: clamp(12px, 2.1vw, 32px);
  --drtv-page-gutter-left: max(var(--drtv-page-gutter), env(safe-area-inset-left, 0px));
  --drtv-page-gutter-right: max(var(--drtv-page-gutter), env(safe-area-inset-right, 0px));
  --drtv-section-gap: clamp(20px, 2vw, 32px);
  --drtv-card-pad: clamp(16px, 1.35vw, 24px);
  --drtv-control-gap: 10px;

  /* Layout widths */
  --drtv-shell-max: 1680px;
  --drtv-content-max: 1320px;
  --drtv-reading-max: 780px;

  /* Geometry */
  --drtv-radius-xs: 8px;
  --drtv-radius-sm: 10px;
  --drtv-radius-md: 14px;
  --drtv-radius-lg: 18px;
  --drtv-radius-xl: 22px;
  --drtv-radius-pill: 999px;
  --drtv-border-w: 1px;

  --drtv-control-h-sm: 40px;
  --drtv-control-h: 48px;
  --drtv-control-h-lg: 54px;
  --drtv-touch-min: 44px;
  --drtv-tab-h: 56px;
  --drtv-icon-sm: 16px;
  --drtv-icon-md: 20px;
  --drtv-icon-lg: 24px;

  /* Shadows deliberately restrained. */
  --drtv-shadow-sm: 0 1px 2px rgba(16, 24, 40, .05);
  --drtv-shadow-md: 0 8px 24px rgba(16, 24, 40, .08);
  --drtv-shadow-dark: 0 12px 34px rgba(0, 0, 0, .18);

  /* Layering contract for DRTV components only. */
  --drtv-z-base: 1;
  --drtv-z-sticky: 20;
  --drtv-z-dropdown: 40;
  --drtv-z-overlay: 80;
  --drtv-z-modal: 100;

  /* Motion */
  --drtv-ease: cubic-bezier(.2, .8, .2, 1);
  --drtv-speed-fast: 120ms;
  --drtv-speed: 180ms;
  --drtv-speed-slow: 260ms;
}

/* -----------------------------
   Foundation scope
   ----------------------------- */
.drtv-ui,
.drtv-prose {
  box-sizing: border-box;
  font-family: var(--drtv-font-ui);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.drtv-ui *,
.drtv-ui *::before,
.drtv-ui *::after,
.drtv-prose *,
.drtv-prose *::before,
.drtv-prose *::after {
  box-sizing: border-box;
}

.drtv-ui {
  color: var(--drtv-ink);
  font-size: var(--drtv-fs-body);
  line-height: var(--drtv-lh-body);
  overflow-wrap: break-word;
}

.drtv-ui img {
  max-width: 100%;
}

/* Editorial/prose images keep intrinsic height. Component-owned UI media is
   free to set an explicit height without fighting this base contract. */
.drtv-prose img {
  max-width: 100%;
  height: auto;
}

.drtv-ui svg {
  display: block;
  flex: 0 0 auto;
}

.drtv-ui :where(button, input, select, textarea) {
  font-family: inherit;
}

.drtv-responsive {
  min-width: 0;
  container-type: inline-size;
}

.drtv-ui[hidden],
.drtv-ui [hidden] {
  display: none !important;
}

/* Safe local personality: Instant Wins or another DRTV surface can opt into
   gold without cloning buttons/tabs/cards. */
.drtv-ui[data-drtv-accent="gold"] {
  --drtv-accent: var(--drtv-gold);
  --drtv-accent-hover: var(--drtv-gold-hover);
  --drtv-accent-active: #d6a514;
  --drtv-accent-contrast: #111827;
  --drtv-accent-soft: rgba(244, 196, 48, .14);
  --drtv-accent-focus: rgba(244, 196, 48, .34);
}

.drtv-ui[data-drtv-density="compact"] {
  --drtv-card-pad: clamp(12px, 1vw, 18px);
  --drtv-section-gap: clamp(14px, 1.35vw, 22px);
  --drtv-control-h: 44px;
  --drtv-control-h-lg: 48px;
  --drtv-tab-h: 50px;
}

/* -----------------------------
   Layout primitives
   ----------------------------- */
.drtv-shell,
.drtv-content-shell,
.drtv-reading-shell,
.drtv-page-rail {
  box-sizing: border-box;
  width: min(100%, var(--drtv-shell-max));
  margin-inline: auto;
  padding-left: var(--drtv-page-gutter-left);
  padding-right: var(--drtv-page-gutter-right);
}

.drtv-content-shell { max-width: var(--drtv-content-max); }
.drtv-reading-shell { max-width: var(--drtv-reading-max); }

/*
 * Canonical full-bleed contract.
 *
 * .drtv-page-bleed owns the edge-to-edge visual band/background.
 * .drtv-page-rail sits inside it and keeps useful content aligned to the same
 * DRTV grid/gutters used by normal page content. This is the lightweight UI
 * Core replacement for the old Shared Elementor Rail presentation contract.
 */
.drtv-page-bleed {
  display: block;
  box-sizing: border-box;
  width: 100vw !important;
  min-width: 0;
  max-width: none !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  padding-inline: 0 !important;
}

/*
 * A bleed band is an explicit opt-in primitive, so it must escape any centred
 * JNews/Elementor/content wrapper it is rendered inside. This keeps full-width
 * feature headers reliable without globally changing third-party containers.
 */

/*
 * Canonical JNews application-canvas contract.
 *
 * Dedicated DRTV application pages opt in by adding `drtv-app-canvas` to the
 * body. Only JNews content wrappers inside `.jeg_main` are released. Header,
 * footer, normal articles and unrelated third-party pages remain untouched.
 *
 * The application itself still decides where to use `.drtv-page-bleed` and
 * `.drtv-page-rail`; this contract only removes the editorial column/max-width
 * constraints that would otherwise trap those primitives.
 */
body.drtv-app-canvas .jeg_main,
body.drtv-app-canvas .jeg_main > .jeg_container,
body.drtv-app-canvas .jeg_main > .container,
body.drtv-app-canvas .jeg_main > .row,
body.drtv-app-canvas .jeg_main .jeg_main_content,
body.drtv-app-canvas .jeg_main .jeg_content,
body.drtv-app-canvas .jeg_main .jeg_inner_content,
body.drtv-app-canvas .jeg_main .content-inner,
body.drtv-app-canvas .jeg_main .site-content,
body.drtv-app-canvas .jeg_main .main-content,
body.drtv-app-canvas .jeg_main .entry-content,
body.drtv-app-canvas .jeg_main main#primary,
body.drtv-app-canvas .jeg_main .wp-block-post-content,
body.drtv-app-canvas .jeg_main .jeg_content > .container,
body.drtv-app-canvas .jeg_main .jeg_content > .row,
body.drtv-app-canvas .jeg_main .entry-content > .container,
body.drtv-app-canvas .jeg_main .entry-content > .row {
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  float: none !important;
  flex: 0 0 100% !important;
  transform: none !important;
  overflow: visible !important;
  box-sizing: border-box !important;
}

/* Dedicated DRTV app pages own their own side rails; never reserve JNews sidebar space. */
body.drtv-app-canvas .jeg_main .jeg_sidebar {
  display: none !important;
}

/* Release only Bootstrap/JNews ancestors that actually contain the app root. */
body.drtv-app-canvas .jeg_main :is(
  .jeg_vc_content,
  .container,
  .row,
  [class^="col-"],
  [class*=" col-"]
):has(.drtv-app-root) {
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  float: none !important;
  flex: 0 0 100% !important;
  transform: none !important;
  overflow: visible !important;
  box-sizing: border-box !important;
}

/* Keep shortcode/block wrappers transparent to the application canvas. */
body.drtv-app-canvas .jeg_main :is(
  .wp-block-shortcode,
  .wp-block-html
):has(> .drtv-app-root),
body.drtv-app-canvas .jeg_main :is(
  .wp-block-shortcode,
  .wp-block-html
):has(.drtv-app-root) {
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  overflow: visible !important;
  box-sizing: border-box !important;
}

/*
 * Canonical application boundary.
 *
 * `overflow-x: clip` contains stray horizontal paint without creating a scroll
 * container, so descendant sticky elements keep working. This absorbs the final
 * useful boundary behaviour previously supplied by Shared Elementor Rail.
 */
.drtv-page-boundary {
  min-width: 0;
  overflow-x: clip;
  overflow-y: visible;
}

.drtv-section-stack {
  display: grid;
  gap: var(--drtv-section-gap);
  min-width: 0;
}

.drtv-stack {
  display: flex;
  flex-direction: column;
  gap: var(--drtv-space-4);
  min-width: 0;
}

.drtv-stack--tight { gap: var(--drtv-space-2); }
.drtv-stack--loose { gap: var(--drtv-space-6); }

.drtv-cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--drtv-space-3);
  min-width: 0;
}

.drtv-cluster--between { justify-content: space-between; }
.drtv-cluster--end { justify-content: flex-end; }

.drtv-grid {
  display: grid;
  gap: var(--drtv-space-5);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
  min-width: 0;
}

.drtv-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.drtv-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.drtv-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.drtv-divider {
  width: 100%;
  height: 1px;
  margin: 0;
  border: 0;
  background: var(--drtv-border);
}

/* -----------------------------
   Typography primitives
   ----------------------------- */
.drtv-page-title,
.drtv-hero-title,
.drtv-section-title,
.drtv-module-title,
.drtv-card-title {
  margin: 0;
  color: inherit;
  letter-spacing: -.025em;
  text-wrap: balance;
}

.drtv-hero-title {
  font-size: var(--drtv-fs-hero);
  line-height: var(--drtv-lh-tight);
  font-weight: var(--drtv-fw-heavy);
}

.drtv-page-title {
  font-size: var(--drtv-fs-page);
  line-height: var(--drtv-lh-tight);
  font-weight: var(--drtv-fw-heavy);
}

.drtv-section-title {
  font-size: var(--drtv-fs-section);
  line-height: var(--drtv-lh-title);
  font-weight: var(--drtv-fw-bold);
}

.drtv-module-title {
  font-size: var(--drtv-fs-module-title);
  line-height: var(--drtv-lh-title);
  font-weight: var(--drtv-fw-bold);
}

.drtv-card-title {
  font-size: var(--drtv-fs-card-title);
  line-height: var(--drtv-lh-title);
  font-weight: var(--drtv-fw-bold);
}

.drtv-product-name {
  margin: 0;
  color: inherit;
  font-size: var(--drtv-fs-card-title);
  font-weight: var(--drtv-fw-bold);
  line-height: 1.24;
  overflow-wrap: anywhere;
}

.drtv-body {
  font-size: var(--drtv-fs-body);
  line-height: var(--drtv-lh-body);
}

.drtv-body--large {
  font-size: var(--drtv-fs-body-lg);
  line-height: 1.55;
}

.drtv-caption,
.drtv-meta {
  margin: 0;
  font-size: var(--drtv-fs-caption);
  line-height: 1.45;
  color: var(--drtv-muted);
}

.drtv-label-text {
  font-size: var(--drtv-fs-label);
  line-height: 1.3;
  font-weight: var(--drtv-fw-bold);
  letter-spacing: .025em;
}

.drtv-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 0;
  color: var(--drtv-accent);
  font-size: var(--drtv-fs-eyebrow);
  line-height: 1.25;
  font-weight: var(--drtv-fw-heavy);
  letter-spacing: .12em;
  text-transform: uppercase;
}

.drtv-readable { max-width: var(--drtv-readable); }
.drtv-readable--tight { max-width: var(--drtv-readable-tight); }

.drtv-on-dark { color: var(--drtv-dark-text); }

.drtv-on-dark .drtv-caption,
.drtv-on-dark .drtv-meta { color: var(--drtv-dark-muted); }

/* Tiny coloured text on black is avoided; use the accent as a mark instead. */
.drtv-on-dark .drtv-eyebrow { color: var(--drtv-dark-text); }

.drtv-on-dark .drtv-eyebrow::before {
  content: "";
  width: 7px;
  height: 7px;
  flex: 0 0 7px;
  border-radius: 50%;
  background: var(--drtv-accent);
}

/* -----------------------------
   Gutenberg / editor prose bridge
   ----------------------------- */
.drtv-prose {
  max-width: var(--drtv-readable);
  color: var(--drtv-ink-2);
  font-size: var(--drtv-fs-body);
  line-height: var(--drtv-lh-prose);
  overflow-wrap: break-word;
}

.drtv-prose > :first-child { margin-top: 0; }
.drtv-prose > :last-child { margin-bottom: 0; }

.drtv-prose :where(p, ul, ol, blockquote, figure, table) {
  margin: 0 0 1.15em;
}

.drtv-prose :where(h2, h3, h4) {
  color: var(--drtv-ink);
  line-height: var(--drtv-lh-title);
  letter-spacing: -.02em;
  margin: 1.5em 0 .62em;
  text-wrap: balance;
}

.drtv-prose h2 { font-size: var(--drtv-fs-section); }
.drtv-prose h3 { font-size: var(--drtv-fs-card-title); }
.drtv-prose h4 { font-size: var(--drtv-fs-body-lg); }

.drtv-prose a {
  color: var(--drtv-red);
  text-decoration-thickness: .08em;
  text-underline-offset: .16em;
}

.drtv-prose strong { color: var(--drtv-ink); }
.drtv-prose li + li { margin-top: .4em; }
.drtv-prose :where(ul, ol) { padding-left: 1.35em; }

.drtv-prose blockquote {
  padding: 2px 0 2px var(--drtv-space-5);
  border-left: 3px solid var(--drtv-accent);
}

.drtv-prose--dark { color: var(--drtv-dark-muted); }

.drtv-prose--dark :where(h2, h3, h4, strong) { color: var(--drtv-dark-text); }
.drtv-prose--dark a { color: #fff; }

/* -----------------------------
   Buttons / actions
   ----------------------------- */
.drtv-button,
.drtv-icon-button {
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid transparent;
  font: inherit;
  text-decoration: none;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition:
    background-color var(--drtv-speed) var(--drtv-ease),
    border-color var(--drtv-speed) var(--drtv-ease),
    color var(--drtv-speed) var(--drtv-ease),
    box-shadow var(--drtv-speed) var(--drtv-ease),
    transform var(--drtv-speed-fast) var(--drtv-ease);
}

.drtv-button {
  min-height: var(--drtv-control-h);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--drtv-control-gap);
  padding: 0 18px;
  border-radius: var(--drtv-radius-md);
  font-size: var(--drtv-fs-button);
  font-weight: var(--drtv-fw-bold);
  line-height: 1.08;
  text-align: center;
}

.drtv-button--primary {
  background: var(--drtv-accent);
  color: var(--drtv-accent-contrast);
}

.drtv-button--brand {
  background: var(--drtv-red);
  color: #fff;
}

.drtv-button--dark {
  background: var(--drtv-dark);
  color: #fff;
}

.drtv-button--success {
  background: var(--drtv-live);
  color: #fff;
}

.drtv-button--secondary {
  border-color: var(--drtv-border-strong);
  background: var(--drtv-surface);
  color: var(--drtv-ink);
}

.drtv-button--ghost {
  border-color: currentColor;
  background: transparent;
  color: inherit;
}

.drtv-button--quiet {
  border-color: transparent;
  background: transparent;
  color: var(--drtv-ink-2);
}

.drtv-button--wide { width: 100%; }
.drtv-button--small { min-height: var(--drtv-control-h-sm); padding-inline: 14px; font-size: var(--drtv-fs-compact-button); }
.drtv-button--large { min-height: var(--drtv-control-h-lg); padding-inline: 22px; }

.drtv-button svg,
.drtv-icon-button svg {
  width: 1em;
  height: 1em;
}

.drtv-icon-button {
  width: var(--drtv-control-h);
  min-width: var(--drtv-touch-min);
  height: var(--drtv-control-h);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border-radius: var(--drtv-radius-md);
  background: var(--drtv-surface);
  border-color: var(--drtv-border);
  color: var(--drtv-ink);
}

.drtv-icon-button--dark {
  background: var(--drtv-dark-2);
  border-color: var(--drtv-dark-border);
  color: #fff;
}

.drtv-button:disabled,
.drtv-icon-button:disabled,
.drtv-button[aria-disabled="true"],
.drtv-icon-button[aria-disabled="true"] {
  opacity: .48;
  cursor: not-allowed;
  pointer-events: none;
}

@media (hover: hover) and (pointer: fine) {
  .drtv-button--primary:hover { background: var(--drtv-accent-hover); color: var(--drtv-accent-contrast); }
  .drtv-button--brand:hover { background: var(--drtv-red-hover); color: #fff; }
  .drtv-button--dark:hover { background: var(--drtv-dark-2); color: #fff; }
  .drtv-button--secondary:hover { border-color: var(--drtv-ink); color: var(--drtv-ink); }
  .drtv-button--quiet:hover { background: var(--drtv-surface-muted); color: var(--drtv-ink); }
  .drtv-icon-button:hover { border-color: var(--drtv-border-strong); }
  .drtv-button:not(:disabled):active,
  .drtv-icon-button:not(:disabled):active { transform: translateY(1px); }
}

/* -----------------------------
   Forms
   ----------------------------- */
.drtv-field {
  display: grid;
  gap: 7px;
  min-width: 0;
}

.drtv-field-label {
  color: var(--drtv-ink);
  font-size: var(--drtv-fs-compact);
  font-weight: var(--drtv-fw-bold);
  line-height: 1.35;
}

.drtv-field-help,
.drtv-field-error {
  margin: 0;
  font-size: var(--drtv-fs-caption);
  line-height: 1.4;
}

.drtv-field-help { color: var(--drtv-muted); }
.drtv-field-error { color: var(--drtv-danger); }

.drtv-input,
.drtv-select,
.drtv-textarea {
  width: 100%;
  min-width: 0;
  border: 1px solid var(--drtv-border-strong);
  border-radius: var(--drtv-radius-md);
  background: var(--drtv-surface);
  color: var(--drtv-ink);
  font-size: 16px; /* prevents unwanted iOS form zoom */
  line-height: 1.35;
  box-shadow: var(--drtv-shadow-sm);
  transition: border-color var(--drtv-speed) var(--drtv-ease), box-shadow var(--drtv-speed) var(--drtv-ease);
}

.drtv-input,
.drtv-select {
  min-height: var(--drtv-control-h);
  padding: 0 14px;
}

.drtv-textarea {
  min-height: 120px;
  padding: 12px 14px;
  resize: vertical;
}

.drtv-input::placeholder,
.drtv-textarea::placeholder { color: var(--drtv-muted-soft); }

.drtv-input:disabled,
.drtv-select:disabled,
.drtv-textarea:disabled {
  background: var(--drtv-surface-muted);
  color: var(--drtv-muted);
  cursor: not-allowed;
}

.drtv-input[aria-invalid="true"],
.drtv-select[aria-invalid="true"],
.drtv-textarea[aria-invalid="true"] { border-color: var(--drtv-danger); }

/* -----------------------------
   Tabs / segmented navigation
   ----------------------------- */
.drtv-tabs {
  display: flex;
  width: 100%;
  min-width: 0;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  border-radius: var(--drtv-radius-lg) var(--drtv-radius-lg) 0 0;
  background: var(--drtv-dark);
}

.drtv-tabs::-webkit-scrollbar { display: none; }

.drtv-tab {
  min-height: var(--drtv-tab-h);
  min-width: max-content;
  flex: 1 1 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 0 18px;
  border: 0;
  border-right: 1px solid var(--drtv-dark-border);
  border-bottom: 3px solid transparent;
  background: transparent;
  color: var(--drtv-dark-muted);
  font: inherit;
  font-size: var(--drtv-fs-tab);
  font-weight: var(--drtv-fw-bold);
  line-height: 1.15;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.drtv-tab:last-child { border-right: 0; }

.drtv-tab[aria-selected="true"],
.drtv-tab[aria-current="page"],
.drtv-tab.is-active {
  color: #fff;
  border-bottom-color: var(--drtv-accent);
  background: rgba(255, 255, 255, .025);
}

.drtv-tab svg { width: var(--drtv-icon-md); height: var(--drtv-icon-md); }

.drtv-tabs--flat { border-radius: 0; }
.drtv-tabs--contained { border-radius: var(--drtv-radius-lg); }

@media (hover: hover) and (pointer: fine) {
  .drtv-tab:hover { color: #fff; }
}

/* -----------------------------
   Cards / surfaces
   ----------------------------- */
.drtv-card {
  min-width: 0;
  border: 1px solid var(--drtv-border);
  border-radius: var(--drtv-radius-xl);
  background: var(--drtv-surface);
  padding: var(--drtv-card-pad);
}

.drtv-card--muted { background: var(--drtv-surface-muted); }

.drtv-card--dark {
  border-color: var(--drtv-dark-border);
  background: var(--drtv-dark);
  color: var(--drtv-dark-text);
}

.drtv-card--flush { padding: 0; overflow: hidden; }
.drtv-card--shadow { box-shadow: var(--drtv-shadow-md); }

.drtv-card__header,
.drtv-card__body,
.drtv-card__footer { min-width: 0; }

/* Structured padding is only imposed by the flush-card composition. Standard
   cards keep their single outer padding and do not accidentally double-space. */
.drtv-card--flush > .drtv-card__header,
.drtv-card--flush > .drtv-card__footer { padding: var(--drtv-card-pad); }

.drtv-card--flush > .drtv-card__body { padding: 0 var(--drtv-card-pad) var(--drtv-card-pad); }

.drtv-card--flush > .drtv-card__footer {
  border-top: 1px solid var(--drtv-border);
}

.drtv-card--dark.drtv-card--flush > .drtv-card__footer { border-top-color: var(--drtv-dark-border); }

.drtv-card--interactive {
  transition: transform var(--drtv-speed) var(--drtv-ease), border-color var(--drtv-speed) var(--drtv-ease), box-shadow var(--drtv-speed) var(--drtv-ease);
}

@media (hover: hover) and (pointer: fine) {
  .drtv-card--interactive:hover {
    border-color: var(--drtv-border-strong);
    box-shadow: var(--drtv-shadow-md);
    transform: translateY(-2px);
  }
}

/* -----------------------------
   Product / media primitives
   ----------------------------- */
.drtv-media {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  min-width: 0;
  overflow: hidden;
  background: transparent;
}

.drtv-media--square { aspect-ratio: 1 / 1; }
.drtv-media--hero { aspect-ratio: 4 / 3; }
.drtv-media--video { aspect-ratio: 16 / 9; }

.drtv-media > :where(img, picture, video) {
  display: block;
  width: 100%;
  height: 100%;
}

/* Canonical product-image behaviour: preserve the whole product unless a
   consumer explicitly requests a crop. This prevents darts/boxes being cut off. */
.drtv-media--contain > img,
.drtv-media--contain > video,
.drtv-media--contain > picture > img,
.drtv-product-image {
  object-fit: contain;
  object-position: center;
}

.drtv-media--cover > img,
.drtv-media--cover > video,
.drtv-media--cover > picture > img { object-fit: cover; }

/* -----------------------------
   Pills / status
   ----------------------------- */
.drtv-pill {
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  max-width: 100%;
  padding: 5px 11px;
  border-radius: var(--drtv-radius-pill);
  border: 1px solid var(--drtv-border);
  background: #fff;
  color: var(--drtv-ink-2);
  font-size: var(--drtv-fs-caption);
  font-weight: var(--drtv-fw-bold);
  line-height: 1.1;
  white-space: normal;
}

.drtv-pill--compact {
  min-height: 26px;
  padding: 4px 9px;
  font-size: var(--drtv-fs-label);
}

.drtv-pill--live,
.drtv-status--live {
  color: var(--drtv-live-ink);
  background: var(--drtv-live-soft);
  border-color: #d6f2e0;
}

.drtv-pill--accent {
  color: var(--drtv-accent-contrast);
  background: var(--drtv-accent);
  border-color: var(--drtv-accent);
}

.drtv-pill--muted {
  color: var(--drtv-muted);
  background: var(--drtv-surface-muted);
}

.drtv-pill--dark {
  color: #fff;
  background: var(--drtv-dark-2);
  border-color: var(--drtv-dark-border);
}

.drtv-pill--warning {
  color: var(--drtv-warning);
  background: var(--drtv-warning-soft);
  border-color: #fed7aa;
}

.drtv-status-dot {
  width: 8px;
  height: 8px;
  flex: 0 0 8px;
  border-radius: 50%;
  background: currentColor;
}

/* -----------------------------
   Notices / empty states
   ----------------------------- */
.drtv-notice {
  display: flex;
  align-items: flex-start;
  gap: var(--drtv-space-3);
  padding: 14px 16px;
  border: 1px solid var(--drtv-border);
  border-radius: var(--drtv-radius-md);
  background: var(--drtv-surface-muted);
  color: var(--drtv-ink-2);
  font-size: var(--drtv-fs-caption);
  line-height: 1.5;
}

.drtv-notice--success { border-color: #d6f2e0; background: var(--drtv-live-soft); color: var(--drtv-live-ink); }
.drtv-notice--warning { border-color: #fed7aa; background: var(--drtv-warning-soft); color: var(--drtv-warning); }
.drtv-notice--danger { border-color: #fecdca; background: var(--drtv-danger-soft); color: var(--drtv-danger); }
.drtv-notice--info { border-color: #b2ddff; background: var(--drtv-info-soft); color: var(--drtv-info); }

.drtv-empty-state {
  display: grid;
  place-items: center;
  gap: var(--drtv-space-3);
  min-height: 180px;
  padding: var(--drtv-space-7) var(--drtv-card-pad);
  text-align: center;
}

/* -----------------------------
   Accessibility / interaction
   ----------------------------- */
.drtv-ui :where(a, button, input, select, textarea, [tabindex]):focus-visible,
.drtv-prose a:focus-visible {
  outline: 3px solid var(--drtv-accent-focus);
  outline-offset: 3px;
}

.drtv-input:focus,
.drtv-select:focus,
.drtv-textarea:focus {
  outline: 0;
  border-color: var(--drtv-accent);
  box-shadow: 0 0 0 3px var(--drtv-accent-soft);
}

.drtv-ui :where(a, button, [role="button"], .drtv-tab) {
  touch-action: manipulation;
}

.drtv-sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* -----------------------------
   Canonical responsive behaviour
   Breakpoint intent:
   <=479 compact phone
   480-767 large phone
   768-1023 tablet portrait
   1024-1366 tablet landscape / compact desktop
   1367-1919 desktop
   >=1920 wide desktop
   ----------------------------- */
@media (max-width: 479px) {
  :root {
    --drtv-page-gutter: 12px;
    --drtv-card-pad: 14px;
    --drtv-section-gap: 16px;
    --drtv-radius-xl: 18px;
    --drtv-tab-h: 52px;
  }

  .drtv-button { padding-inline: 15px; }
  .drtv-tab { padding-inline: 13px; }
  .drtv-grid--2,
  .drtv-grid--3,
  .drtv-grid--4 { grid-template-columns: 1fr; }
}

@media (min-width: 480px) and (max-width: 767px) {
  :root {
    --drtv-page-gutter: 16px;
    --drtv-card-pad: 16px;
    --drtv-section-gap: 18px;
    --drtv-radius-xl: 20px;
    --drtv-tab-h: 54px;
  }

  .drtv-grid--3,
  .drtv-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 768px) and (max-width: 1023px) {
  :root {
    --drtv-page-gutter: 20px;
    --drtv-card-pad: 18px;
    --drtv-section-gap: 22px;
  }

  .drtv-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1024px) and (max-width: 1366px) {
  :root {
    --drtv-page-gutter: 24px;
    --drtv-card-pad: 20px;
    --drtv-section-gap: 24px;
  }
}

@media (min-width: 1920px) {
  :root {
    --drtv-page-gutter: 32px;
    --drtv-card-pad: 24px;
    --drtv-section-gap: 32px;
  }

  /* Width caps do the work on 32-inch displays; text does not balloon simply
     because the viewport is enormous. */
  .drtv-shell { max-width: var(--drtv-shell-max); }
}

@container (max-width: 760px) {
  .drtv-ui .drtv-grid--3,
  .drtv-ui .drtv-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@container (max-width: 520px) {
  .drtv-ui .drtv-grid,
  .drtv-ui .drtv-grid--2,
  .drtv-ui .drtv-grid--3,
  .drtv-ui .drtv-grid--4 { grid-template-columns: 1fr; }

  .drtv-ui .drtv-button--container-wide { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .drtv-ui *,
  .drtv-ui *::before,
  .drtv-ui *::after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}

@media (forced-colors: active) {
  .drtv-button,
  .drtv-icon-button,
  .drtv-card,
  .drtv-pill,
  .drtv-notice,
  .drtv-tab { border-color: CanvasText; }
}


/* ==========================================================
   DRTV UI Core 1.0.6 — canonical JNews default-template app canvas
   ========================================================== */
body.drtv-jnews-app-canvas .jeg_main:has(.drtv-app-root),
body.drtv-jnews-app-canvas .jeg_main :is(
  .jeg_container,
  .jeg_main_content,
  .jeg_content,
  .jeg_inner_content,
  .jeg_vc_content,
  .content-inner,
  .site-content,
  .main-content,
  .entry-content,
  .wp-block-post-content,
  .wp-block-shortcode,
  .wp-block-html,
  main#primary,
  .container,
  .row,
  [class^="col-"],
  [class*=" col-"]
):has(.drtv-app-root) {
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  float: none !important;
  flex: 0 0 100% !important;
  transform: none !important;
  overflow: visible !important;
  box-sizing: border-box !important;
}

body.drtv-jnews-app-canvas .jeg_main:has(.drtv-app-root),
body.drtv-jnews-app-canvas .jeg_main :is(
  .jeg_container,
  .jeg_main_content,
  .jeg_content,
  .jeg_inner_content,
  .jeg_vc_content,
  .content-inner,
  .site-content,
  .main-content,
  .entry-content,
  .wp-block-post-content,
  main#primary
):has(.drtv-app-root) {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

body.drtv-jnews-app-canvas .drtv-app-root.drtv-page-bleed {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

body.drtv-jnews-app-canvas .jeg_main .jeg_sidebar {
  display: none !important;
}


/* ==========================================================
   DRTV UI Core 1.0.7 — one app canvas, one editorial boundary
   ========================================================== */
/* Dedicated application pages render their own hero/title/navigation. */
body.drtv-jnews-app-canvas .jeg_main :is(
  .entry-header,
  .jeg_breadcrumbs,
  .breadcrumb,
  .jeg_breadcrumb_container,
  .jeg_post_title
):has(~ .entry-content .drtv-app-root),
body.drtv-jnews-app-canvas .jeg_main :is(
  .entry-header,
  .jeg_breadcrumbs,
  .breadcrumb,
  .jeg_breadcrumb_container,
  .jeg_post_title
) {
  display:none !important;
}


/* ==========================================================
   DRTV UI Core 1.0.8 — dedicated app chrome lock
   ========================================================== */
/*
 * A DRTV application page owns its own title, navigation and actions. JNews
 * may still emit normal editorial furniture around a shortcode when the page
 * uses Default Template. Remove that furniture once, here, rather than making
 * IQ/Battle/Instant Wins/other apps each carry theme-specific suppression.
 */
body.drtv-jnews-app-canvas .jeg_main :is(
  .jeg_share_top_container,
  .jeg_share_top,
  .jeg_sharelist,
  .jeg_socialshare,
  .jeg_share_button,
  .jeg_share_stats,
  .jeg_post_meta,
  .jeg_meta_container,
  .jeg_post_subtitle,
  .jeg_post_excerpt,
  .jeg_post_tags,
  .entry-header,
  .entry-footer,
  .jeg_breadcrumbs,
  .breadcrumb,
  .jeg_breadcrumb_container,
  .jeg_post_title
) {
  display: none !important;
}

/*
 * Collapse the complete JNews ancestor chain that contains the application.
 * :has() only selects ancestors of .drtv-app-root; it does not touch the app's
 * own internal spacing. This removes leftover editorial top/bottom gutters on
 * Default Template pages while keeping the JNews header and footer intact.
 */
body.drtv-jnews-app-canvas .jeg_main :is(
  article,
  .post,
  .page,
  .type-page,
  .jeg_post,
  .jeg_postblock,
  .jeg_post_wrapper,
  .post-wrapper,
  .jeg_single_tpl_wrapper,
  .jeg_content,
  .jeg_main_content,
  .jeg_inner_content,
  .jeg_vc_content,
  .entry-content,
  .content-inner,
  .site-content,
  .main-content,
  .wp-block-post-content,
  .wp-block-shortcode,
  .wp-block-html,
  .container,
  .row,
  [class^="col-"],
  [class*=" col-"]
):has(.drtv-app-root) {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* Some JNews builds place share furniture as a direct sibling of content. */
body.drtv-jnews-app-canvas .jeg_main :is(
  .jeg_share_top_container,
  .jeg_sharelist,
  .jeg_socialshare,
  .jeg_share_button
) + :is(.entry-content,.jeg_content,.jeg_main_content) {
  margin-top: 0 !important;
  padding-top: 0 !important;
}


/* ==========================================================
   DRTV UI Core 1.0.9 — one canonical application top edge
   ========================================================== */
/*
 * JNews can wrap a normal Page in different intermediate elements depending on
 * page metabox settings and theme modules. On a dedicated DRTV app route, every
 * ancestor between .jeg_main and .drtv-app-root is presentation plumbing only.
 * Collapse that whole ancestor chain instead of maintaining a brittle list of
 * JNews wrapper class names. This is scoped by both the app body contract and
 * :has(.drtv-app-root), so normal editorial pages are untouched.
 */
body.drtv-jnews-app-canvas .jeg_main:has(.drtv-app-root),
body.drtv-jnews-app-canvas .jeg_main *:has(.drtv-app-root) {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/*
 * After all theme plumbing is neutralised, add one intentional shared breathing
 * space. Feature plugins must not recreate their own page-top gutter.
 */
body.drtv-jnews-app-canvas .jeg_main .drtv-app-root.drtv-page-bleed {
  margin-top: var(--drtv-app-top-gap) !important;
}


/* ==========================================================
   DRTV UI Core 1.0.10 — canonical host-chain top edge
   ========================================================== */
/*
 * Some JNews page routes place the actual post/content host one level outside
 * `.jeg_main` (the static front page is the main example). The app itself is
 * still canonical, but a theme-owned host can retain top padding before the
 * `.drtv-app-root` is reached. Normalise that host chain once here instead of
 * adding a Homepage/Account/feature-specific offset.
 *
 * The rule is intentionally restricted to DRTV application requests and to
 * containers that actually contain the canonical app root. Header, navigation,
 * footer and normal editorial pages are untouched.
 */
body.drtv-jnews-app-canvas :is(
  #content,
  #primary,
  main,
  article,
  .site-content,
  .site-main,
  .page-content,
  .post-wrapper,
  .jeg_wrapper,
  .jeg_content,
  .jeg_main,
  .jeg_main_content,
  .jeg_inner_content,
  .jeg_vc_content,
  .content-inner,
  .entry-content,
  .wp-block-post-content,
  .wp-block-shortcode,
  .wp-block-html,
  .container,
  .row
):has(.drtv-app-root) {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/*
 * If JNews inserts an otherwise anonymous block directly around the app, that
 * direct host is layout plumbing too. This closes the final gap without
 * reaching into the application's own descendants.
 */
body.drtv-jnews-app-canvas :is(div, section, main, article):has(> .drtv-app-root) {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* The only intentional app/header breathing room is the shared token. */
body.drtv-jnews-app-canvas .drtv-app-root.drtv-page-bleed {
  margin-top: var(--drtv-app-top-gap) !important;
}