/* ICONIC VOICES — cookie-consent theme (orestbida/cookieconsent v3). Loaded after the
   vendor stylesheet on every page; tokens from iv-tokens.css. Moved out of iv-2026.css
   on 2026-09-03 so /app/pricing, /app/login and the classics page match. */
/* ===========================================================================
   COOKIE CONSENT — one dark variant on every page
   Vendor widget: orestbida/cookieconsent v3 (assets/vendor/cookieconsent/).
   Its stylesheet is linked AFTER this file on every page, so each override
   below carries `html` (and `!important` wherever the vendor's own ≤640px
   block is !important) to win the cascade.
   PRESENTATION ONLY — categories, the EEA opt-in / rest-of-world opt-out mode
   and the stored payload live in assets/js/consent-config.js and are untouched.
   =========================================================================== */
html #cc-main {
  --cc-bg: var(--iv-surface-3);
  --cc-primary-color: var(--iv-ink);
  --cc-secondary-color: #B6B6BE;
  --cc-link-color: var(--iv-gold-2);

  --cc-btn-primary-bg: var(--iv-gold);
  --cc-btn-primary-color: var(--iv-on-gold);
  --cc-btn-primary-border-color: var(--iv-gold);
  --cc-btn-primary-hover-bg: var(--iv-gold-2);
  --cc-btn-primary-hover-color: var(--iv-on-gold);
  --cc-btn-primary-hover-border-color: var(--iv-gold-2);

  --cc-btn-secondary-bg: #242428;
  --cc-btn-secondary-color: var(--iv-ink);
  --cc-btn-secondary-border-color: rgba(201,168,76,0.22);
  --cc-btn-secondary-hover-bg: #303036;
  --cc-btn-secondary-hover-color: #FFFFFF;
  --cc-btn-secondary-hover-border-color: rgba(201,168,76,0.40);

  --cc-separator-border-color: rgba(201,168,76,0.14);
  --cc-toggle-on-bg: var(--iv-gold);
  --cc-toggle-off-bg: #33333A;
  --cc-toggle-on-knob-bg: var(--iv-on-gold);
  --cc-toggle-off-knob-bg: #B6B6BE;
  --cc-toggle-readonly-bg: #2A2A30;
  --cc-toggle-readonly-knob-bg: #6B6B75;
  --cc-toggle-enabled-icon-color: #0A0A0B;
  --cc-toggle-disabled-icon-color: #131317;

  --cc-section-category-border: rgba(201,168,76,0.14);
  --cc-cookie-category-block-bg: #1C1C20;
  --cc-cookie-category-block-border: rgba(201,168,76,0.16);
  --cc-cookie-category-block-hover-bg: #242428;
  --cc-cookie-category-block-hover-border: rgba(201,168,76,0.28);
  --cc-cookie-category-expanded-block-bg: transparent;
  --cc-cookie-category-expanded-block-hover-bg: #242428;

  --cc-overlay-bg: rgba(0,0,0,0.72);
  --cc-webkit-scrollbar-bg: rgba(201,168,76,0.22);
  --cc-webkit-scrollbar-hover-bg: var(--iv-gold);
  --cc-footer-bg: #101013;
  --cc-footer-color: var(--iv-ink-3);
  --cc-footer-border-color: rgba(201,168,76,0.12);

  --cc-modal-border-radius: 14px;
  --cc-btn-border-radius: 10px;
  color-scheme: dark;
}

/* The vendor reset is `all: unset`, so every node inside the widget inherits
   the page's tracking. Zero it once, at the root of the widget. */
html #cc-main * { letter-spacing: 0; }

html #cc-main .cm,
html #cc-main .pm {
  border: 1px solid rgba(201,168,76,0.20);
  box-shadow: 0 28px 80px -20px rgba(0,0,0,0.78);
}
html #cc-main .cm__title,
html #cc-main .pm__title { color: var(--iv-ink); font-family: var(--font-display, Georgia, serif); }
html #cc-main .cc__link { color: var(--iv-gold-2); text-underline-offset: 2px; }

html #cc-main .cm__btn,
html #cc-main .pm__btn { font-weight: 700; }

/* guiOptions.equalWeightButtons gives "Reject all" the same primary skin as
   "Accept all"; re-separate the two surfaces without down-weighting either. */
html #cc-main .cm__btn[data-role="necessary"],
html #cc-main .pm__btn[data-role="necessary"] {
  background: var(--cc-btn-secondary-bg);
  border-color: var(--cc-btn-secondary-border-color);
  color: var(--cc-btn-secondary-color);
}
html #cc-main .cm__btn[data-role="necessary"]:hover,
html #cc-main .pm__btn[data-role="necessary"]:hover {
  background: var(--cc-btn-secondary-hover-bg);
  border-color: var(--cc-btn-secondary-hover-border-color);
  color: var(--cc-btn-secondary-hover-color);
}
html #cc-main .cm__btn[data-role="show"],
html #cc-main .pm__btn[data-role="save"] {
  background: transparent;
  border-color: rgba(201,168,76,0.22);
  color: var(--iv-gold-2);
}
html #cc-main .cm__btn[data-role="show"]:hover,
html #cc-main .pm__btn[data-role="save"]:hover {
  background: rgba(201,168,76,0.10);
  border-color: rgba(201,168,76,0.42);
  color: #FFFFFF;
}

/* Entry animated opacity 0 → 1, so for ~250ms the page printed through the
   panel and collided with the consent copy. Slide only; opacity is a step. */
html #cc-main .cc--anim .cm { transition: transform var(--cc-modal-transition-duration) ease; }

@media (max-width: 640px) {
  /* Measured panel height (171px, capped by the 3-line clamp below) + its
     gutter + 8px of air. Keeps the mini-player and scrolled-to anchors clear. */
  html { --iv-cc-lift: 192px; }

  html #cc-main { --cc-modal-margin: 12px; }

  /* Pin BOTH edges and derive the width from them: `width: calc(100% - 16px)`
     plus a margin on the same side as `right` double-counted, leaving 16px of
     gutter on the right, none on the left, and the left corners off-screen. */
  html #cc-main .cm {
    left: var(--cc-modal-margin) !important;
    right: var(--cc-modal-margin) !important;
    bottom: calc(var(--cc-modal-margin) + env(safe-area-inset-bottom)) !important;
    width: auto !important;
    max-width: none !important;
    max-height: none !important;
    margin: 0 !important;
    border-radius: 14px !important;
  }

  html #cc-main .cm__body { padding: 0 !important; }
  html #cc-main .cm__texts { padding: 0 !important; }
  html #cc-main .cm__title {
    font-size: 0.98rem !important;
    padding: 13px 14px 5px !important;
  }
  html #cc-main .cm__desc {
    font-size: 0.78rem !important;
    line-height: 1.42 !important;
    /* box-sizing is border-box inside the widget, so the clamp has to be a
       whole multiple of line-height with no padding in it, or the last
       visible line is sliced in half. 4.26em = 3 x 1.42em. */
    max-height: 4.26em !important;
    overflow-y: auto !important;
    margin: 0 0 11px !important;
    padding: 0 14px !important;
  }

  /* One row, three equal-height buttons. The pair lives in group 1 and
     "Customize" in group 2, so the groups get 2fr / 1fr of the row. */
  html #cc-main .cm__btns {
    display: flex !important;
    flex-direction: row !important;
    align-items: stretch !important;
    gap: 8px;
    padding: 11px 14px 13px !important;
  }
  html #cc-main .cm__btn-group {
    display: grid !important;
    grid-auto-flow: column !important;
    grid-auto-columns: minmax(0, 1fr) !important;
    gap: 8px;
    min-width: 0 !important;
  }
  html #cc-main .cm__btn-group:first-child { flex: 2 1 0 !important; }
  html #cc-main .cm__btn-group:last-child { flex: 1 1 0 !important; }
  /* The vendor's ≤640px sheet adds this sibling margin with !important; inside
     a grid row it lands on the second button only, which then stretches 6px
     shorter than its neighbour. `gap` above carries the spacing instead. */
  html #cc-main .cm__btn + .cm__btn,
  html #cc-main .cm__btn-group + .cm__btn-group { margin: 0 !important; }
  html #cc-main .cm__btn {
    min-height: 44px !important;
    font-size: 0.74rem !important;
    padding: 0.5em 0.45em !important;
  }

  /* The panel is fixed to the bottom edge, where the mini-player docks and
     where in-page anchors land. Keep both clear of it while it is up. */
  html.show--consent { scroll-padding-bottom: calc(var(--iv-cc-lift) + env(safe-area-inset-bottom)); }
  html.show--consent .iv-miniplayer.is-active {
    transform: translateY(calc(-1 * (var(--iv-cc-lift) + env(safe-area-inset-bottom))));
  }
}