/* CasaPay cookie consent: shared tokens + component styles (banner, panel, footer button)
   NOTE: All colours, spacing, fonts, radii and motion values live in this ONE token block.
         The block includes the spec's proposed new tokens (clearly commented as proposed).
*/
:root{
  /* Brand tokens (from brand.json equivalents) */
  --cp-color-ink:#143A45;            /* colors.ink */
  --cp-color-text-body:#435B65;      /* colors.text_body */
  --cp-color-text-secondary:#52656C; /* colors.text_secondary */
  --cp-color-primary:#007FAE;        /* colors.primary */
  --cp-color-link:#006D92;           /* colors.link */
  --cp-color-bg:#FFFFFF;             /* colors.bg */
  --cp-color-bg-soft:#F5F8FA;        /* colors.bg_soft */
  --cp-color-bg-card:#F8FBFC;        /* colors.bg_card */
  --cp-color-bg-tint-teal:#EAF5F8;   /* colors.bg_tint_teal */
  --cp-color-border:#DFE7EB;         /* colors.border */

  --cp-font-sans:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; /* fonts.body stack */
  --cp-font-weight-body:400;         /* fonts.body.weights[0] */
  --cp-font-weight-label:650;        /* fonts.body.weights[1] */
  --cp-font-weight-button:750;       /* buttons.primary "weight 750" */
  --cp-font-weight-heading:700;      /* fonts.heading.weights[0] */
  --cp-font-size-body:16px;          /* fonts.body.sizes_px lower bound */
  --cp-font-size-title:20px;         /* fonts.body.sizes_px upper bound */
  --cp-font-size-button:15px;        /* buttons.primary "15-16px" */
  --cp-letter-spacing-heading:-0.025em; /* fonts.heading.letter_spacing */

  --cp-radius-button:999px;          /* radius.button */
  --cp-radius-card:20px;             /* radius.card */
  --cp-radius-nav:8px;               /* radius.nav_item "8-9px" (lower bound) */

  /* Proposed new tokens (not yet in brand.json) */
  --cp-space-1:8px;                  /* PROPOSED: space.1 (8px grid) */
  --cp-space-2:16px;                 /* PROPOSED: space.2 */
  --cp-space-3:24px;                 /* PROPOSED: space.3 */
  --cp-space-4:32px;                 /* PROPOSED: space.4 */
  --cp-line-height-body:24px;        /* PROPOSED: font.lineHeight.body */
  --cp-line-height-title:24px;       /* PROPOSED: font.lineHeight.title */
  --cp-line-height-button:18px;      /* PROPOSED: font.lineHeight.button */
  --cp-size-control:48px;            /* PROPOSED: size.control.height */
  --cp-size-banner-width:592px;      /* PROPOSED (v3 default): size.consent.bannerWidth */
  --cp-size-panel-max:520px;         /* PROPOSED: size.consent.panelMaxWidth */
  --cp-size-icon:24px;               /* PROPOSED: size.icon (close glyph box) */
  --cp-icon-stroke:2px;              /* PROPOSED: icon.strokeWidth */
  --cp-font-size-caption:14px;       /* PROPOSED: font.size.caption */
  --cp-line-height-caption:20px;     /* PROPOSED: font.lineHeight.caption */
  --cp-switch-track-w:40px;          /* PROPOSED: size.switch.trackWidth */
  --cp-switch-track-h:24px;          /* PROPOSED: size.switch.trackHeight */
  --cp-switch-knob:20px;             /* PROPOSED: size.switch.knob */
  --cp-border-width:1px;             /* PROPOSED: border.width.hairline */
  --cp-focus-width:2px;              /* PROPOSED: focus.ring.width */
  --cp-focus-offset:2px;             /* PROPOSED: focus.ring.offset */
  --cp-shadow-float:0 8px 32px rgba(20,58,69,.12),0 1px 2px rgba(20,58,69,.08);      /* PROPOSED: shadow.float */
  --cp-shadow-dialog:0 24px 64px rgba(20,58,69,.16),0 2px 8px rgba(20,58,69,.08);    /* PROPOSED: shadow.dialog */
  --cp-color-backdrop:rgba(20,58,69,.24);                                            /* PROPOSED: color.backdrop */
  --cp-z-header:2147482900;          /* documented live-site value */
  --cp-z-banner:2147483000;          /* PROPOSED: z.banner */
  --cp-z-overlay:2147483600;         /* PROPOSED: z.overlay (same layer as .offline-modal) */
  --cp-motion-ease:cubic-bezier(.2,0,0,1);  /* PROPOSED: motion.easing.standard */
  --cp-motion-enter:240ms;           /* PROPOSED: motion.duration.enter */
  --cp-motion-exit:160ms;            /* PROPOSED: motion.duration.exit */
  --cp-motion-panel:200ms;           /* PROPOSED: motion.duration.panel */
  --cp-motion-fast:120ms;            /* PROPOSED: motion.duration.fast */
  --cp-motion-reduced:100ms;         /* PROPOSED: motion.duration.reduced */
  --cp-motion-offset:16px;           /* PROPOSED: motion.distance.enter */
  --cp-motion-scale:.98;             /* PROPOSED: motion.scale.enter */
}

/* Shared */
.cc-banner :focus-visible,.cc-panel :focus-visible,.footer-link:focus-visible{outline:var(--cp-focus-width) solid var(--cp-color-primary);outline-offset:var(--cp-focus-offset)}
.cc-title{margin:0;font-size:var(--cp-font-size-title);line-height:var(--cp-line-height-title);font-weight:var(--cp-font-weight-heading);letter-spacing:var(--cp-letter-spacing-heading);color:var(--cp-color-ink)}
.cc-text{margin:0;color:var(--cp-color-text-body)}
.cc-text a{color:var(--cp-color-link);text-decoration:underline;text-underline-offset:2px;border-radius:4px}
.cc-text a:hover{ text-decoration-thickness:2px }

/* Buttons (outline / secondary pill) */
.cc-btn{display:inline-flex;align-items:center;justify-content:center;min-width:0;min-height:var(--cp-size-control);margin:0;padding:0 var(--cp-space-2);border:var(--cp-border-width) solid var(--cp-color-primary);border-radius:var(--cp-radius-button);background:var(--cp-color-bg);color:var(--cp-color-link);font-family:inherit;font-size:var(--cp-font-size-button);line-height:var(--cp-line-height-button);font-weight:var(--cp-font-weight-button);text-align:center;cursor:pointer;transition:background-color var(--cp-motion-fast) var(--cp-motion-ease),border-color var(--cp-motion-fast) var(--cp-motion-ease)}
@media(hover:hover){.cc-btn:hover{background:var(--cp-color-bg-tint-teal)}}
.cc-btn--primary{background:var(--cp-color-primary);color:var(--cp-color-bg)}
@media(hover:hover){.cc-btn--primary:hover{background:var(--cp-color-link);border-color:var(--cp-color-link)}}

/* Banner (non-modal labelled region) */
.cc-banner{position:fixed;z-index:var(--cp-z-banner);left:var(--cp-space-2);right:var(--cp-space-2);bottom:calc(var(--cp-space-2) + env(safe-area-inset-bottom,0px));padding:24px;background:var(--cp-color-bg);border-radius:var(--cp-radius-card);box-shadow:inset 0 0 0 var(--cp-border-width) var(--cp-color-border),var(--cp-shadow-float);opacity:0;transform:translateY(var(--cp-motion-offset));transition:opacity var(--cp-motion-exit) var(--cp-motion-ease),transform var(--cp-motion-exit) var(--cp-motion-ease)}
.cc-banner{container:cc-banner/inline-size}
.cc-banner[hidden]{display:none!important}
.cc-banner.is-visible{opacity:1;transform:none;transition-duration:var(--cp-motion-enter)}
.cc-banner .cc-text{margin-top:var(--cp-space-1);line-height:1.4} /* explicit 1.4 (≈22.4px at 16px) */
.cc-links{display:flex;flex-wrap:wrap;column-gap:16px;row-gap:8px;align-items:center;margin-top:calc(var(--cp-space-2) - 8px)} /* pull up 8px per spec */
.cc-link{appearance:none;-webkit-appearance:none;-moz-appearance:none;position:relative;display:inline-flex;align-items:center;gap:6px;min-height:24px;margin:0;padding:0;border:0;background:transparent;color:var(--cp-color-link);font:inherit;text-decoration:underline;text-underline-offset:2px;cursor:pointer}
.cc-link:focus-visible{outline:none}
.cc-link:focus-visible::after{content:"";position:absolute;inset:-2px;border-radius:6px;outline:2px solid var(--cp-color-primary)}
.cc-actions{display:grid;grid-template-columns:1fr;gap:var(--cp-space-1);margin-top:var(--cp-space-2)} /* 16px gap links → buttons */
/* v5 final: identical 56px pills; Accept is filled, Reject is outline.
   Design decision (2026‑09‑28 00:21 Tallinn): Accept = filled; Reject = outline; same size/shape/position. */
.cc-choice{display:inline-flex;align-items:center;justify-content:center;min-height:56px;margin:0;padding:0 24px;border:2px solid var(--cp-color-ink);border-radius:999px;background:#fff;color:var(--cp-color-ink);font-weight:700;font-size:16px;line-height:24px;cursor:pointer;transition:background-color var(--cp-motion-fast) var(--cp-motion-ease),border-color var(--cp-motion-fast) var(--cp-motion-ease)}
.cc-choice:focus-visible{outline:2px solid var(--cp-color-primary);outline-offset:2px}
@media(hover:hover){.cc-choice:hover{background:var(--cp-color-bg-tint-teal)}}
/* Primary (Accept all) modifier only changes colours; box metrics remain identical */
.cc-choice--primary{background:var(--cp-color-ink);border-color:var(--cp-color-ink);color:#fff}
@media(hover:hover){.cc-choice--primary:hover{background:var(--cp-color-text-body);border-color:var(--cp-color-text-body);color:#fff}}
/* Inherit page font across banner/panel (Designer font fix) */
.cc-banner,.cc-banner button,.cc-panel,.cc-panel button{font-family:inherit}
@container cc-banner (max-width:303px){.cc-actions{grid-template-columns:repeat(2,minmax(0,1fr))}.cc-choice{padding:0 16px}.cc-links{margin-top:var(--cp-space-2)}}
@media(min-width:768px){.cc-banner{left:var(--cp-space-3);right:auto;bottom:var(--cp-space-3);padding:32px;width:480px;max-width:calc(100vw - 2 * var(--cp-space-3))}}
/* v4 heading sizes (banner only) */
.cc-banner .cc-title{font-size:24px;line-height:32px;font-weight:700;letter-spacing:-0.6px}
@media(min-width:768px){.cc-banner .cc-title{font-size:28px;line-height:32px;letter-spacing:-0.7px}}

/* OPEN ITEM toggle holder: two-up buttons on very narrow phones (disabled by default) */
:root{ --cc-two-up-breakpoint: 382px; } /* breakpoint holder; not used */
/* Example activation:
@media (max-width: 382px){ .cc-actions{ grid-template-columns: repeat(2, minmax(0,1fr)); } }
*/

/* Panel (modal dialog + backdrop) */
.cc-layer{position:fixed;inset:0;z-index:var(--cp-z-overlay);display:flex;align-items:flex-end;justify-content:center}
.cc-layer[hidden]{display:none!important}
.cc-backdrop{position:absolute;inset:0;background:var(--cp-color-backdrop);opacity:0;transition:opacity var(--cp-motion-exit) var(--cp-motion-ease)}
.cc-panel{position:relative;width:100%;max-height:calc(100dvh - var(--cp-space-3));overflow-y:auto;overscroll-behavior:contain;padding:var(--cp-space-3) var(--cp-space-3) calc(var(--cp-space-3) + env(safe-area-inset-bottom,0px));background:var(--cp-color-bg);border-radius:var(--cp-radius-card) var(--cp-radius-card) 0 0;box-shadow:var(--cp-shadow-dialog);opacity:0;transform:scale(var(--cp-motion-scale));transform-origin:50% 100%;transition:opacity var(--cp-motion-exit) var(--cp-motion-ease),transform var(--cp-motion-exit) var(--cp-motion-ease)}
.cc-panel:focus{outline:none}
.cc-layer.is-open .cc-backdrop{opacity:1;transition-duration:var(--cp-motion-panel)}
.cc-layer.is-open .cc-panel{opacity:1;transform:none;transition-duration:var(--cp-motion-panel)}
.cc-panel .cc-title{padding-right:var(--cp-size-control)}
.cc-panel .cc-text{margin-top:var(--cp-space-2)}
.cc-close{position:absolute;top:calc(var(--cp-space-3) - (var(--cp-size-control) - var(--cp-line-height-title))/2);right:calc(var(--cp-space-3) - (var(--cp-size-control) - var(--cp-line-height-title))/2);display:inline-flex;align-items:center;justify-content:center;width:var(--cp-size-control);height:var(--cp-size-control);margin:0;padding:0;border:0;border-radius:var(--cp-radius-button);background:transparent;color:var(--cp-color-ink);cursor:pointer;transition:background-color var(--cp-motion-fast) var(--cp-motion-ease)}
.cc-close svg{display:block;width:var(--cp-size-icon);height:var(--cp-size-icon)}
@media(hover:hover){.cc-close:hover{background:var(--cp-color-bg-tint-teal)}}
.cc-rows{list-style:none;margin:var(--cp-space-2) 0 0;padding:0}
.cc-rows>li+li{box-shadow:inset 0 var(--cp-border-width) 0 var(--cp-color-border)}
.cc-row{display:flex;align-items:center;gap:var(--cp-space-2);min-height:56px;padding:var(--cp-space-2) 0}
label.cc-row{cursor:pointer}
.cc-row-text{display:block;flex:1 1 auto;min-width:0}
.cc-row-title{display:block;color:var(--cp-color-ink);font-weight:var(--cp-font-weight-label)}
.cc-row-desc{display:block;color:var(--cp-color-text-body)}
.cc-tag{display:inline-block;white-space:nowrap;padding:0 var(--cp-space-1);border-radius:var(--cp-radius-nav);background:var(--cp-color-bg-tint-teal);color:var(--cp-color-text-secondary);font-size:var(--cp-font-size-caption);line-height:var(--cp-line-height-caption);font-weight:var(--cp-font-weight-label)}
.cc-always{flex:none;color:var(--cp-color-text-secondary);font-weight:var(--cp-font-weight-label);font-size:var(--cp-font-size-button);line-height:var(--cp-line-height-button)}
.cc-panel-actions{display:grid;grid-template-columns:1fr;gap:var(--cp-space-1);margin-top:var(--cp-space-2);padding-top:var(--cp-space-3);box-shadow:inset 0 var(--cp-border-width) 0 var(--cp-color-border)}
@media(min-width:768px){.cc-layer{align-items:center;padding:var(--cp-space-3)}.cc-panel{max-width:var(--cp-size-panel-max);max-height:calc(100dvh - 2 * var(--cp-space-3));padding:var(--cp-space-4);border-radius:var(--cp-radius-card);transform-origin:50% 50%}.cc-close{top:calc(var(--cp-space-4) - (var(--cp-size-control) - var(--cp-line-height-title))/2);right:calc(var(--cp-space-4) - (var(--cp-size-control) - var(--cp-line-height-title))/2)}.cc-panel-actions{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Switch (button role="switch") */
.cc-switch{position:relative;flex:none;width:var(--cp-switch-track-w);height:var(--cp-switch-track-h);margin:0;padding:0;border:0;border-radius:var(--cp-radius-button);background:var(--cp-color-text-secondary);cursor:pointer;transition:background-color var(--cp-motion-fast) var(--cp-motion-ease)}
.cc-switch::before{content:"";position:absolute;inset:-10px -2px} /* invisible 44px hit area around the 24px track */
.cc-switch-knob{position:absolute;top:2px;left:2px;width:var(--cp-switch-knob);height:var(--cp-switch-knob);border-radius:50%;background:var(--cp-color-bg);box-shadow:0 1px 2px rgba(20,58,69,.24);transition:transform var(--cp-motion-fast) var(--cp-motion-ease)}
.cc-switch[aria-checked="true"]{background:var(--cp-color-primary)}
.cc-switch[aria-checked="true"] .cc-switch-knob{transform:translateX(16px)}

/* Footer controls: one style for <a> and <button> */
footer .footer-link{display:inline-flex;align-items:center;min-height:var(--cp-size-control);margin:0;padding:0 var(--cp-space-1);border:0;border-radius:var(--cp-radius-nav);background:transparent;font-family:inherit;font-size:var(--cp-font-size-caption);line-height:var(--cp-line-height-caption);font-weight:var(--cp-font-weight-body);color:var(--cp-color-text-body);text-decoration:none;text-align:start;cursor:pointer}
footer .footer-link:hover{text-decoration:underline}

/* Forced colours (Windows High Contrast) */
@media(forced-colors:active){
  .cc-banner,.cc-panel{border:1px solid CanvasText}
  .cc-tag{border:1px solid CanvasText}
  .cc-close{border:1px solid ButtonText}
  .cc-switch{border:1px solid ButtonText;background:Canvas}
  .cc-switch-knob{top:1px;left:1px;background:ButtonText;forced-color-adjust:none}
  .cc-switch[aria-checked="true"]{background:Highlight}
  .cc-switch[aria-checked="true"] .cc-switch-knob{background:HighlightText}
}

/* Reduced motion */
@media(prefers-reduced-motion:reduce){
  .cc-banner,.cc-banner.is-visible,.cc-panel,.cc-layer.is-open .cc-panel{transform:none}
  .cc-banner,.cc-banner.is-visible,.cc-backdrop,.cc-panel,.cc-layer.is-open .cc-backdrop,.cc-layer.is-open .cc-panel{transition:opacity var(--cp-motion-reduced) linear}
  .cc-switch,.cc-switch-knob,.cc-btn,.cc-close,.cc-choice{transition:none}
}