/* WLK-10037 — WalksDevour consent banner stylesheet.
   Deployed to s3://walks-ui-components/cookiebot/wd.css (prod) and
   cookiebot/wd-staging.css (staging), served as /consent-banner.css and
   /consent-banner-staging.css on walksdevour.com via Amplify rewrite rules.
   Generated: WD tokens + base.css verbatim. Edit base.css or the tokens,
   then run build.sh in this folder — do not hand-edit below the marker. */
#CybotCookiebotDialog {
  --consent-accent: #2d5132; /* WD brand green */
}

/* ---- base.css (do not edit below; regenerate with build.sh) ---- */

/* WLK-9920 — Cookiebot mobile banner: put the accept CTA first.
   On <600px Cookiebot's own template stacks the content column (which holds
   the "Show details" accordion trigger) above the footer that holds "Allow
   all"; Clarity heatmaps show users tapping "Show details", landing in the
   category accordion and leaving. The dashboard has no control over CTA
   order, but the banner is plain light DOM in our page, so we fix it here:
   hide the top trigger and surface the footer's pre-existing (hidden)
   "Customize" button directly under "Allow all" — it opens the same details
   panel, verified on prod against the US/RoW (`leveloptin`) variant at
   390x844 and 375x667 (see brain: wd-gtm-ga4/discovery/WLK-9920--*).
   `!important` is required: Cookiebot injects its rules via
   document.adoptedStyleSheets, which sit after author stylesheets. Scoped
   to `.CybotEdge` (the bottom-bar/edge template) so the CCPA-mode variant's
   "Do not sell or share" footer is left alone until verified separately. */
@media (max-width: 600px) {
  /* Bottom-aligned sheet (ticket target: "bottom-aligned compact modal /
     sheet"). Geometry is deliberately NOT scoped to .CybotEdge: Cookiebot
     removes that class while the details panel is open, so an Edge-scoped
     rule would snap the sheet back to a centred card on open. Position is
     variant-neutral chrome; the content rules below stay Edge-scoped.
     `html` prefix outranks vendor rules that carry !important at
     id+class specificity; the logical `inline-size` pair is required
     because the vendor constrains width via max-inline-size, which
     plain max-width does not override. */
  html #CybotCookiebotDialog,
  html #CybotCookiebotDialog.CybotEdge {
    top: auto !important;
    bottom: 0 !important;
    left: 50% !important;
    right: auto !important;
    width: 100% !important;
    max-width: none !important;
    inline-size: 100% !important;
    max-inline-size: none !important;
    transform: translateX(-50%) !important;
    border-radius: 12px 12px 0 0 !important;
  }
  #CybotCookiebotDialog.CybotEdge #CybotCookiebotDialogBodyEdgeMoreDetails {
    display: none !important;
  }
  /* De-prioritised secondary action per the ticket's target hierarchy: a
     text link, not a second button competing with "Allow all". Verified on
     prod at 390x844: 114x32 link vs the 340x58 default button; the banner
     shrinks from 57% to 54% of the viewport as a side effect. */
  #CybotCookiebotDialog.CybotEdge
    #CybotCookiebotDialogBodyLevelButtonCustomize {
    display: block !important;
    background: transparent !important;
    border: none !important;
    color: var(--consent-accent) !important;
    font-size: 12px !important; /* minimum readable size; button text is 15px */
    font-weight: 600;
    width: auto !important;
    margin: 0.25em auto 0 !important;
    padding: 0.25em 0.5em !important;
  }
  /* The button ships an arrow glyph child that pushes the label left of the
     visual centre; text-only reads centred. */
  #CybotCookiebotDialog.CybotEdge
    #CybotCookiebotDialogBodyLevelButtonCustomize
    .CybotCookiebotDialogArrow {
    display: none !important;
  }
  /* Client feedback WLK-10037 (Jira 67491/67492): two actions only on
     mobile — accept + the Customize link. In the `optionaloptin`
     (CCPA-flavoured) variant of Domain Group #1, cc.js renders the decline
     button with the "Do not sell or share my personal information" text
     next to "OK"; with the surfaced Customize link the sheet showed THREE
     actions. Hiding decline restores the approved two-action hierarchy.
     Scope: mobile only, Domain Group #1 only (EU / Canada / California
     load their own cbid banners, which this stylesheet's rules never
     re-style — and this rule is Edge-scoped like the rest). Compliance
     call: requested by the client in Jira comment 67491; this group
     excludes California (US-06 has its own group). In the `leveloptin`
     variant this button is "Deny" and already display:none — no-op. */
  #CybotCookiebotDialog.CybotEdge #CybotCookiebotDialogBodyButtonDecline {
    display: none !important;
  }
}