/* Ads v3 banner slots (shared-data/src/Web/Templates/partials/ad-slot.php).
   Each .adLink carries its banner's max width and aspect ratio per breakpoint
   (--adw/--adr wide, --admw/--admr phone), so the box is reserved before the image loads,
   and the image is always width:100%/height:auto inside it: a banner can never be wider
   than its column, whatever its file size. */
/* ponytail: banner images are not themed (dark mode leaves them as uploaded); add dark variants per ad only if a sponsor asks. */

.adLink{position:relative;display:block;box-sizing:border-box;margin:0 auto;width:100%;max-width:min(100%,var(--adw,100%));aspect-ratio:var(--adr,auto);border-radius:10px;overflow:hidden;box-shadow:0 0 10px rgb(16 25 132 / 8%);line-height:0}
.adLink picture{display:block;width:100%;max-width:100%}
.adLink img{display:block;width:100%;max-width:100%;height:auto;border-radius:0;box-shadow:none}
.adTag{position:absolute;top:6px;inset-inline-end:6px;z-index:1;padding:2px 6px;border-radius:4px;background:rgb(0 0 0 / 55%);color:#fff;font-size:10px;line-height:1.4;letter-spacing:.02em;pointer-events:none}

/* top: under the H1 / last-update line (first price stays above the fold); 728/970x90 */
.adSlot-top{box-sizing:border-box;max-width:1000px;margin:8px auto 16px;padding-inline:12px}
.adSlot-top .adLink--nodims{min-height:90px}
/* mid: the long-standing banner under the main table, same 1097px box it always had */
.adSlot-mid{max-width:1097px;margin-block:2rem}
.adSlot-inline{margin-block:2rem}

/* inline as a table row (crypto table, after row 10) */
.adRow td{padding:16px 8px!important;background:var(--c-surface)!important;cursor:default;border:0}
.adRow:hover td{background:var(--c-surface)!important}

@media (max-width:639px){
  .adLink{max-width:min(100%,var(--admw,100%));aspect-ratio:var(--admr,auto)}
  .adSlot-top .adLink--nodims{min-height:50px}
  /* ad density cap: at most 4 units on a phone (see AdSlots::plan) */
  .adSlot--noMobile{display:none!important}
}
@media (min-width:640px){
  /* ad density cap: at most 6 units on a desktop (see AdSlots::plan) */
  .adSlot--noDesktop{display:none!important}
}

/* side: desktop rail unit (300x250 / 300x600), sticky inside its column (.l-rail in ui.css);
   below 1200px there is no rail, so it is hidden, and its beacon never fires (ui.js adview) */
.adSlot-side{display:none}
@media (min-width:1200px){
  .adSlot-side{display:block}
  .adSlot-side .adLink{max-width:min(100%,var(--adw,300px))}
}
/* rect: a 300x250 desktop unit in a v4 side column (pair / market related links, crypto
   history); hidden and never counted below 1200px, like side */
.adSlot-rect{display:none}
@media (min-width:1200px){
  .adSlot-rect{display:block}
  .adSlot-rect .adLink{max-width:min(100%,300px)}
}

/* native: a sponsored row inside a price table — logo, one line of text, clearly tagged.
   Tinted so it never reads as a quote row, and it carries no price-like numbers. */
.c-native td{padding:6px 8px!important;background:var(--c-surface-2)!important;border-block:1px solid var(--c-line)}
.c-native:hover td{background:var(--c-line)!important}
.c-native__link{display:flex;align-items:center;gap:10px;padding:4px 6px;color:var(--c-text);text-align:start;line-height:1.5}
.c-native__logo{flex:none;width:36px;height:36px;border-radius:8px;object-fit:cover;background:#fff}
.c-native__body{display:flex;flex-direction:column;min-width:0;flex:1}
.c-native__text{font-weight:600;font-size:.875rem;color:var(--c-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.c-native__sub{font-size:.75rem;color:var(--c-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.c-native .c-native__tag{position:static;flex:none;background:#101984}
.c-native--block{margin-block:16px;border:1px solid var(--c-line);border-radius:14px;background:var(--c-surface-2);padding:6px 8px}

/* the crypto/gold tables turn their rows into flex cards on phones; the ad row must stay a
   full-width block with clear space from the tappable rows around it */
@media screen and (max-width:779px){
  .cryptoTbl tbody tr.adRow{display:block;padding:0;margin:16px 0;background:transparent!important;border:0;border-radius:0;cursor:default}
  .cryptoTbl tbody tr.adRow td{display:block;width:100%;padding:0!important;background:transparent!important}
}
@media screen and (max-width:640px){
  .goldTbl tbody tr.adRow{display:block;padding:0;margin:16px 0;background:transparent!important;border:0;border-radius:0;cursor:default}
  .goldTbl tbody tr.adRow td{display:block;width:100%;padding:0!important;background:transparent!important;text-align:center}
  .goldTbl tbody tr.adRow td::before{content:none}
}

/* sticky: phones only, a 320x50 bar at the very bottom. While it shows (body.has-sticky-ad)
   the floating bottom menu (.navMenu: fixed, bottom:15px, 60px tall) moves up above it and
   the footer gets room so its last links stay reachable. The menu moves by a transform, which
   is not a layout shift; the distance is what bottom:calc(50px + 15px + safe area) gave. */
.adSticky{display:none}
@media (max-width:639px){
  .adSticky{display:flex;justify-content:center;align-items:center;position:fixed;left:0;right:0;bottom:0;z-index:10000000;box-sizing:content-box;height:50px;padding:0 0 env(safe-area-inset-bottom, 0px);background:var(--c-surface);box-shadow:0 -2px 10px rgb(16 25 132 / 15%)}
  .adSticky[hidden]{display:none!important}
  .adSticky .adLink{width:320px;max-width:100%;height:50px;aspect-ratio:auto;border-radius:0;box-shadow:none}
  .adSticky .adLink img{width:100%;height:50px;object-fit:contain}
  .adStickyClose{position:absolute;top:-12px;inset-inline-start:6px;z-index:2;width:24px;height:24px;padding:0;border:0;border-radius:50%;background:#101984;color:#fff;font-size:16px;line-height:24px;text-align:center;cursor:pointer;box-shadow:0 1px 4px rgb(0 0 0 / 30%)}
  .adStickyClose:before{content:"";position:absolute;inset:-10px}
  body.has-sticky-ad .navMenu{transform:translateY(calc(-50px - env(safe-area-inset-bottom, 0px)))}
  body.has-sticky-ad .footer{margin-bottom:9em!important}
}
/* landscape phones: the flat bar sits at bottom:0 (ui.css), so it travels the 15px too */
@media (max-width:639px) and (max-height:480px){
  body.has-sticky-ad .navMenu{transform:translateY(calc(-65px - env(safe-area-inset-bottom, 0px)))}
}

/* native row inside the compact mobile markets grid (markets.css turns rows into cards):
   a full-width tinted strip, not a card cell */
@media screen and (max-width:640px){
  .mktTbl tbody tr.c-native.adRow{display:block}
  .mktTbl tbody tr.c-native.adRow td{display:block;width:100%;padding:6px 8px!important;background:var(--c-surface-2)!important}
}