/*
  Quantum Sport Lab — "Modernist" redesign tokens + shared components.
  Ported from the Claude Design project "Quantum Sports Lab restyling".

  Classes are namespaced with a `qsl-` prefix (rather than the design's bare
  `.btn`/`.tag`/`.card`/`.hero` names) because this stylesheet is loaded
  globally alongside Bootstrap and the legacy main.css theme, both of which
  already own those exact class names on other pages (admin panel, pricing,
  legal pages). Prefixing avoids clobbering them while keeping the same look.

  Fonts: the design specifies "Archivo" via Google Fonts. This site otherwise
  self-hosts fonts only (see main.css @font-face) with no external font
  requests, so we reuse the already-vendored variable-weight Roboto instead —
  visually both are grotesque sans-serifs, and it keeps that convention.
*/

:root {
  --color-bg: #f3f2f2;
  --color-surface: #eae9e9;
  --color-text: #201e1d;
  --color-accent: #ec3013;
  --color-accent-2: #e15b47;
  --color-divider: color-mix(in srgb, #201e1d 40%, transparent);

  --color-neutral-100: #f8f4f4;
  --color-neutral-200: #eae7e7;
  --color-neutral-300: #d7d3d3;
  --color-neutral-400: #bab6b6;
  --color-neutral-500: #9b9797;
  --color-neutral-600: #7d7979;
  --color-neutral-700: #605d5d;
  --color-neutral-800: #444141;
  --color-neutral-900: #2d2b2b;

  --color-accent-100: #fff2ef;
  --color-accent-200: #ffe0d9;
  --color-accent-300: #ffc4b8;
  --color-accent-400: #ff9783;
  --color-accent-500: #ff563c;
  --color-accent-600: #dd2b0f;
  --color-accent-700: #ae1800;
  --color-accent-800: #7c1405;
  --color-accent-900: #4d170e;

  --font-heading: "Roboto", system-ui, sans-serif;
  --font-heading-weight: 800;
  --font-body: "Roboto", system-ui, sans-serif;

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;

  --shadow-sm: 0 1px 2px color-mix(in srgb, #2d2b2b 14%, transparent);
  --shadow-md: 0 3px 10px color-mix(in srgb, #2d2b2b 16%, transparent);
  --shadow-lg: 0 12px 32px color-mix(in srgb, #2d2b2b 22%, transparent);
}

/* — layout helpers — */
/* Page width uses Bootstrap's .container (already loaded) instead of a
   custom wrapper — see qcalc-/qh-/qa-/qbl- components below for the same
   reasoning applied to multi-column layout: Bootstrap's row/col-* grid for
   structure, these classes only for the visual identity on top of it. */
.qsl-grayscale { filter: grayscale(0.8) contrast(1.08); }
/* Named deliberately (not "row") to avoid Bootstrap's grid `.row > *` rule,
   which forces width:100% on every direct child and stretches buttons full-width. */
.qsl-actions { display: flex; gap: 14px; flex-wrap: wrap; }

.qsl-kicker {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--color-accent-700); margin-bottom: 20px;
  font-family: var(--font-heading); font-weight: 700;
}
.qsl-kicker::before { content: ''; width: 8px; height: 8px; background: var(--color-accent); flex: none; }
.qsl-kicker--center { justify-content: center; }
.qsl-kicker--on-accent { color: var(--color-bg); }

/* — buttons — */
.qsl-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  cursor: pointer; text-decoration: none;
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 14px; line-height: 1.2; color: var(--color-text);
  background: transparent; border: 1px solid transparent;
  padding: var(--space-2) calc(var(--space-3) * 1.2);
  border-radius: 0;
}
.qsl-btn:disabled { opacity: 0.45; cursor: not-allowed; }
.qsl-btn-primary { background: var(--color-accent); color: var(--color-bg); }
.qsl-btn-primary:hover { background: var(--color-accent-600); color: var(--color-bg); text-decoration: none; }
.qsl-btn-primary:active { background: var(--color-accent-700); }
.qsl-btn-secondary { border-color: var(--color-divider); color: var(--color-text); }
.qsl-btn-secondary:hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); color: var(--color-text); text-decoration: none; }
.qsl-btn-secondary:active { background: color-mix(in srgb, var(--color-text) 14%, transparent); }
.qsl-btn-ghost { color: var(--color-accent); padding-inline: var(--space-1); }
.qsl-btn-ghost:hover { background: color-mix(in srgb, var(--color-accent) 10%, transparent); color: var(--color-accent); text-decoration: none; }
.qsl-btn-ghost:active { background: color-mix(in srgb, var(--color-accent) 18%, transparent); }

/* on-accent variants, for buttons sitting on top of the accent-colored close/CTA sections */
.qsl-btn-secondary--on-accent { color: var(--color-bg); border-color: var(--color-bg); }
.qsl-btn-secondary--on-accent:hover { background: color-mix(in srgb, #fff 15%, transparent); color: var(--color-bg); }
.qsl-btn-ghost--on-accent { color: var(--color-bg); border: 1px solid var(--color-bg); padding: var(--space-2) calc(var(--space-3) * 1.2); }
.qsl-btn-ghost--on-accent:hover { background: color-mix(in srgb, #fff 12%, transparent); color: var(--color-bg); }

/* — tags — */
.qsl-tag {
  display: inline-flex; align-items: center; font-size: 11px;
  letter-spacing: 0.02em; padding: 3px 10px; font-family: var(--font-heading); font-weight: 700;
}
.qsl-tag-accent { background: var(--color-accent-100); color: var(--color-accent-800); }
.qsl-tag-outline { border: 1px solid var(--color-accent); color: var(--color-accent); }

/* — header / nav (shared across every page) — */
/* Full-bleed bar; the inner .container (in the partial) aligns its
   content to the same edges as every other page section. */
.qsl-nav { border-bottom: 2px solid var(--color-divider); background: var(--color-bg); }
.qsl-nav .container { padding-top: 14px; padding-bottom: 14px; gap: 32px; }
.qsl-brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--color-text); margin-right: auto; }
.qsl-brand:hover { color: var(--color-text); text-decoration: none; }
.qsl-mono {
  width: 38px; height: 38px; object-fit: contain; flex: none;
}
.qsl-brand-name { font-family: var(--font-heading); font-weight: 800; font-size: 17px; line-height: 1.15; letter-spacing: -0.01em; }
.qsl-brand-tag { font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase; color: color-mix(in srgb, var(--color-text) 60%, transparent); margin-top: 1px; }
.qsl-nav-links { display: flex; align-items: center; gap: 22px; }
.qsl-nav-links a { color: var(--color-text); text-decoration: none; font-size: 14px; }
.qsl-nav-links a:hover, .qsl-nav-links a.active { color: var(--color-accent); text-decoration: none; }
.qsl-nav-flags { display: flex; align-items: center; gap: 6px; }
.qsl-nav-flags img { height: 15px; width: auto; border-radius: 2px; }
.qsl-nav-flags img.active { outline: 2px solid var(--color-accent); }
.qsl-nav-auth { display: flex; align-items: center; gap: 10px; }

/* — footer (shared across every page) — */
/* Width/columns come from Bootstrap's .container + .row/.col-* in the
   partial; this class only carries the dark background + padding. */
.qsl-footer { background: var(--color-neutral-900); color: var(--color-neutral-100); padding: 48px 0 24px; }
.qsl-footer h6 { color: var(--color-neutral-100); font-size: 13px; letter-spacing: 0.06em; margin-bottom: 14px; font-family: var(--font-heading); font-weight: 800; text-transform: uppercase; }
.qsl-footer a { color: color-mix(in srgb, var(--color-neutral-100) 80%, transparent); text-decoration: none; font-size: 13px; display: block; margin-bottom: 8px; }
.qsl-footer a:hover { color: var(--color-accent-300); }
.qsl-footer p { font-size: 13px; color: color-mix(in srgb, var(--color-neutral-100) 70%, transparent); margin: 0 0 4px; }
.qsl-footer-photo { width: 100%; aspect-ratio: 4/3; margin-bottom: 16px; }
.qsl-footer-socials { display: flex; gap: 10px; margin-top: 16px; }
.qsl-footer-socials a {
  display: flex; align-items: center; justify-content: center; width: 32px; height: 32px;
  border: 1px solid var(--color-neutral-700); color: var(--color-neutral-100); margin-bottom: 0;
}
.qsl-footer-socials a:hover { border-color: var(--color-accent); color: var(--color-accent-300); }
.qsl-newsletter-row { display: flex; gap: 0; margin-top: 12px; }
.qsl-newsletter-row input {
  flex: 1; background: var(--color-neutral-800); border: 1px solid var(--color-neutral-700);
  color: var(--color-neutral-100); padding: 8px 10px; font-size: 13px; font-family: var(--font-body);
}
.qsl-newsletter-row .qsl-btn-primary { border-radius: 0; }
.qsl-footer-bottom { margin-top: 32px; padding-top: 20px; border-top: 2px solid var(--color-neutral-800); text-align: center; }
.qsl-footer-bottom p { font-size: 11px; }
.qsl-footer-copy { text-align: center; font-size: 11px; margin-top: 16px; color: color-mix(in srgb, var(--color-neutral-100) 55%, transparent); }
.qsl-footer .loading, .qsl-footer .error-message, .qsl-footer .sent-message { display: none; font-size: 12px; margin-top: 8px; }
.qsl-footer .error-message { color: var(--color-accent-300); }
.qsl-footer .sent-message { color: #8fd19e; }

/* The header partial reuses the existing #navmenu/.navmenu/.mobile-nav-toggle
   structure so main.js's toggle + scrollspy logic keeps working unmodified.
   Only the desktop (>=1200px) link color/typography is restyled here to the
   new palette — same selector + media query main.css uses, loaded after it
   so this wins the cascade tie. The mobile flyout keeps main.css's own
   already-coherent card styling untouched. */
@media (min-width: 1200px) {
  .qsl-nav .navmenu a,
  .qsl-nav .navmenu a:focus {
    color: var(--color-text);
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 14px;
  }
  .qsl-nav .navmenu li:hover > a,
  .qsl-nav .navmenu .active,
  .qsl-nav .navmenu .active:focus {
    color: var(--color-accent);
  }
}


/* Scroll-to-top button (shared chrome, rendered on every page via the
   layout) — main.css styles it off the old gold --accent-color; repoint
   it to the new red/orange accent so it doesn't clash. */
.scroll-top {
  background-color: var(--color-accent);
  border-radius: 0;
}
.scroll-top i { color: var(--color-bg); }
.scroll-top:hover { background-color: var(--color-accent-600); }

/* ==========================================================================
   Calculators — shared components (`qcalc-` prefix), used across the
   calculators index and all 11 individual calculator pages. Kept here
   (global, alongside .qsl-btn/.qsl-tag) rather than page-scoped like the
   qh-/qa-/qbl- styles, because these components repeat across 11+ pages.

   Column STRUCTURE (how many columns, when they stack) comes from
   Bootstrap's .row/.col-* in the Blade markup. These classes only carry
   the visual identity on top of it — padding, the thick dividers, type —
   same split used for buttons/tags/kicker elsewhere in this file, so a
   qcalc-panel is just a .col-lg-5 with this class added, not a grid item
   in its own right.
   ========================================================================== */

.qcalc-crumbs { font-size: 13px; letter-spacing: 0.04em; text-transform: uppercase; color: color-mix(in srgb, var(--color-text) 55%, transparent); margin: 0 0 20px; }
.qcalc-crumbs a { color: inherit; }
.qcalc-crumbs a:hover { color: var(--color-accent); }

.qcalc-hero { padding: 40px 0 32px; }
.qcalc-hero h1 { font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: clamp(32px,4vw,50px); line-height: 1.1; margin: 0 0 16px; letter-spacing: -0.02em; }
.qcalc-hero p { font-size: 16px; max-width: 62ch; color: color-mix(in srgb, var(--color-text) 78%, transparent); margin: 0; }

/* Quantum Matrix World promo panel (`qsl-qmw-` prefix) — the cross-sell box
   for quantummatrixworld.com. Global because it repeats in the homepage
   hero and every calculator header, not just one page (see partial
   resources/views/site/partials/qmw-promo.blade.php). */
.qsl-qmw-panel { border: 2px solid var(--color-divider); padding: 24px; }
.qsl-qmw-panel h2 { font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: clamp(28px, 4.3vw, 38px); line-height: 1.1; margin: 0; }
.qsl-qmw-panel h2 .accent { color: var(--color-accent); }
.qsl-qmw-panel .sub { font-size: 16px; color: color-mix(in srgb, var(--color-text) 75%, transparent); max-width: 100%; margin-bottom: 0; }
.qsl-qmw-panel .sub .accent { color: black; font-weight: 700; }

.qsl-qmw-icon-col { font-size: 14px; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; color: black; margin-top: 8px; font-family: var(--font-heading); }
.qsl-qmw-icon-col i { font-size: 40px; margin-bottom: 10px; color: var(--color-accent); }

.qmw-mono { max-width: 100%; height: auto; text-align: right; margin-left: auto; display: block; }

.buttonless-button { display: inline-block; gap: 6px; font-size: 20px; font-weight: 800; color: black; text-decoration: none; }
.buttonless-button i { font-size: 20px; font-weight: 800; color: var(--color-accent-700); }

.qcalc-layout { border-top: 2px solid var(--color-divider); border-bottom: 2px solid var(--color-divider); }
.qcalc-panel { padding: 32px 36px 40px 0; border-right: 2px solid var(--color-divider); }
.qcalc-panel + .qcalc-panel { padding: 32px 0 40px 36px; border-right: none; }
.qcalc-panel-label { display: block; font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-accent-700); margin-bottom: 20px; font-family: var(--font-heading); }

.qcalc-field { margin-bottom: 18px; }
.qcalc-field label { display: block; font-size: 12.5px; font-weight: 600; letter-spacing: 0.03em; margin-bottom: 8px; color: color-mix(in srgb, var(--color-text) 85%, transparent); }
.qcalc-input, .qcalc-select {
  width: 100%; box-sizing: border-box; border: 2px solid var(--color-divider); background: var(--color-bg);
  color: var(--color-text); font-family: var(--font-body); font-size: 15px; padding: 10px 12px;
}
.qcalc-input:focus, .qcalc-select:focus { outline: none; border-color: var(--color-accent); }

.qcalc-checkbox { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 500; color: var(--color-text); cursor: pointer; margin-bottom: 10px; }
.qcalc-checkbox input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--color-accent); cursor: pointer; }

.qcalc-segmented { display: flex; border: 2px solid var(--color-divider); margin-bottom: 0px; }
.qcalc-segmented button {
  flex: 1; padding: 10px 12px; border: 0; background: transparent; color: var(--color-text);
  font-size: 13.5px; font-weight: 500; cursor: pointer; font-family: var(--font-body);
  border-right: 1px solid var(--color-divider);
}
.qcalc-segmented button:last-child { border-right: 0; }
.qcalc-segmented button.active { background: var(--color-accent); color: var(--color-bg); font-weight: 700; }

.qcalc-result-grid { border-top: 2px solid var(--color-divider); }
.qcalc-result-tile { padding: 20px; border-right: 2px solid var(--color-divider); border-bottom: 2px solid var(--color-divider); }
.qcalc-result-grid.cols-2 > .qcalc-result-tile:nth-child(2n),
.qcalc-result-grid.cols-3 > .qcalc-result-tile:nth-child(3n),
.qcalc-result-grid.cols-4 > .qcalc-result-tile:nth-child(4n),
.qcalc-result-grid.cols-1 > .qcalc-result-tile { border-right: none; }
.qcalc-result-tile .label { font-size: 12.5px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: color-mix(in srgb, var(--color-text) 70%, transparent); margin: 0; }
.qcalc-result-tile .value { font-family: var(--font-heading); font-weight: 800; font-size: 34px; line-height: 1.15; margin: 10px 0 0; font-variant-numeric: tabular-nums; }
.qcalc-result-tile .value.accent { color: var(--color-accent); }
.qcalc-result-tile .value.small { font-size: 24px; font-weight: 700; }

.qcalc-verdict { display: flex; justify-content: space-between; align-items: baseline; padding: 22px 0; border-bottom: 2px solid var(--color-divider); gap: 16px; flex-wrap: wrap; }
.qcalc-verdict .label { font-family: var(--font-heading); font-weight: 700; font-size: 19px; }
.qcalc-verdict .value { font-family: var(--font-heading); font-weight: 800; font-size: 30px; color: var(--color-accent); font-variant-numeric: tabular-nums; }
.qcalc-note { font-size: 14.5px; color: color-mix(in srgb, var(--color-text) 78%, transparent); margin: 18px 0 0; }

/* Dynamic rows (dutching/arbitrage/implied-probability/accumulator legs)
   render as a genuine Bootstrap table — .qcalc-rows-table just retints
   Bootstrap's table borders/typography to match the divider palette. */
.qcalc-rows-table { --bs-table-border-color: var(--color-divider); --bs-table-bg: var(--color-bg); margin-bottom: 0; }
.qcalc-rows-table > thead > tr > th { border-bottom-width: 2px; font-size: 11.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: color-mix(in srgb, var(--color-text) 65%, transparent); }
.qcalc-rows-table > tbody > tr > td { vertical-align: middle; padding-top: 10px; padding-bottom: 10px; }
.qcalc-rows-table .qcalc-input { min-width: 90px; }
.qcalc-row-remove { border: 0; background: transparent; color: var(--color-accent); font-size: 20px; line-height: 1; cursor: pointer; padding: 4px 8px; }

/* Bootstrap locks .container to a fixed 540px max-width once the viewport
   crosses 576px, which on a landscape phone (~600-767px) leaves a wide dead
   margin on both sides instead of using the extra width the device actually
   has. Widen it back out for just that bucket; narrower (already fluid) and
   md-and-up (already has its own appropriately larger cap) are untouched. */
@media (min-width: 576px) and (max-width: 767.98px) {
  .container { max-width: 100%; }
}

/* Dutching's row has 8 columns (Selection, Odds, Return %, Stake, Returns, Net,
   plus # and remove) — too many to fit a phone width, portrait or landscape,
   without either shrinking everything unreadably or scrolling sideways. Below
   md (so this covers landscape phones too, not just narrow portrait), each
   row becomes a stacked mini-card instead: the header row hides, and every
   cell shows its own label (from the data-label attribute the JS sets) next
   to its value, so nothing is lost, it just reflows vertically. */
@media (max-width: 767.98px) {
  [data-calculator="dutching"] .qcalc-rows-table thead { display: none; }
  [data-calculator="dutching"] .qcalc-rows-table,
  [data-calculator="dutching"] .qcalc-rows-table tbody,
  [data-calculator="dutching"] .qcalc-rows-table td {
    display: block; width: 100%;
  }
  /* flex-column (not block) so the remove button — last in the DOM, so its
     click handler stays wired to the right row — can be visually pulled to
     the top of the card with `order` instead of floating over the content. */
  [data-calculator="dutching"] .qcalc-rows-table tr {
    display: flex; flex-direction: column;
    padding: 14px 0; border-bottom: 2px solid var(--color-divider);
  }
  [data-calculator="dutching"] .qcalc-rows-table td {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 5px 0 !important; border: 0 !important;
  }
  [data-calculator="dutching"] .qcalc-rows-table td[data-label]::before {
    content: attr(data-label); flex: none;
    font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
    color: color-mix(in srgb, var(--color-text) 65%, transparent);
  }
  [data-calculator="dutching"] .qcalc-rows-table td:first-child { display: none; } /* row index — redundant once each row is its own card */
  [data-calculator="dutching"] .qcalc-rows-table td:last-child { order: -1; justify-content: flex-end; padding: 0 0 8px !important; }
  [data-calculator="dutching"] .qcalc-rows-table .qcalc-input { width: auto; max-width: 55%; min-width: 70px; }
}

.qcalc-explain h2 { font-family: var(--font-heading); font-weight: 700; font-size: 26px; letter-spacing: -0.015em; margin: 0 0 16px; }
.qcalc-explain p { font-size: 15.5px; line-height: 1.65; color: color-mix(in srgb, var(--color-text) 82%, transparent); margin: 0 0 14px; }

.qcalc-tool-row { padding: 22px 0; border-bottom: 2px solid var(--color-divider); color: var(--color-text); text-decoration: none; }
.qcalc-tool-row:hover { color: var(--color-accent); text-decoration: none; }
.qcalc-tool-row:hover .qcalc-tool-name { color: var(--color-accent); }
.qcalc-tool-num { flex: 0 0 40px; font-family: var(--font-heading); font-weight: 700; font-size: 14px; font-variant-numeric: tabular-nums; color: color-mix(in srgb, var(--color-text) 55%, transparent); }
.qcalc-tool-name { flex: 0 0 auto; width: 100%; max-width: 260px; font-family: var(--font-heading); font-weight: 700; font-size: 19px; letter-spacing: -0.01em; }
.qcalc-tool-blurb { font-size: 15px; color: color-mix(in srgb, var(--color-text) 75%, transparent); }
.qcalc-tool-arrow { color: var(--color-accent); font-size: 18px; }

.qcalc-start-card { padding: 28px; border-top: 2px solid var(--color-divider); border-bottom: 2px solid var(--color-divider); }
.qcalc-start-card:last-child { border-right: none; }
.qcalc-start-card i { font-size: 24px; color: var(--color-accent); margin-bottom: 16px; display: block; }
.qcalc-start-card h3 { font-family: var(--font-heading); font-weight: 700; font-size: 22px; letter-spacing: -0.01em; margin: 0; }
.qcalc-start-card p { font-size: 14.5px; color: color-mix(in srgb, var(--color-text) 78%, transparent); margin: 12px 0 18px; }

@media (max-width: 991.98px) {
  .qcalc-panel, .qcalc-panel + .qcalc-panel { padding: 28px 0; border-right: none; border-bottom: 2px solid var(--color-divider); }
  .qcalc-start-card { border-right: none; }
  .qcalc-tool-blurb, .qcalc-tool-arrow { display: none; }
}

/* Funnel banner toward quantummatrixworld.com, shown on calculator pages only. */
.qsl-funnel-cta { padding: 40px 0; border-top: 2px solid var(--color-divider); border-bottom: 2px solid var(--color-divider); background: var(--color-surface); }
.qsl-funnel-cta h3 { font-family: var(--font-heading); font-weight: 700; font-size: 21px; letter-spacing: -0.01em; margin: 0 0 8px; }
.qsl-funnel-cta p { font-size: 14.5px; color: color-mix(in srgb, var(--color-text) 75%, transparent); margin: 0; }

/* Reserved ad space. Empty by default (no ad tag placed inside yet), so the
   wrapper collapses to nothing and no placeholder box is visible on the live
   site until real ad/affiliate markup is dropped into .qsl-ad-slot. */
.qsl-ad-slot-wrap { text-align: center; }
.qsl-ad-slot-wrap:has(.qsl-ad-slot:empty) { display: none; }
.qsl-ad-slot-label { display: block; font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: color-mix(in srgb, var(--color-text) 50%, transparent); margin: 24px 0 8px; }
.qsl-ad-slot { margin: 0 auto 24px; }
.qsl-ad-slot[data-ad-slot="top"] { max-width: 728px; min-height: 90px; }
.qsl-ad-slot[data-ad-slot="bottom"] { max-width: 336px; min-height: 280px; }
.qsl-ad-slot img, .qsl-ad-slot ins, .qsl-ad-slot iframe { max-width: 100%; height: auto; border: 0; }