/* ==========================================================================
   Modals and overlays in the approved design language (20 September 2026).

   Three overlays live on the public pages: the cart popup for guests (.cpo),
   the cookie consent banner and its preferences modal (.cc-*), and the scam
   alert badge and modal (.sa-*). Their legacy sheets are linked inside the
   includes, after this file, and the cookie and scam sheets carry !important
   on nearly every rule; this file wins by specificity (body prefix), by
   redefining the variables those sheets read, and with the same weight only
   where a legacy !important stands in the way.

   One language for all: a deep navy overlay with blur, a white glass plate
   with a hairline and a deep shadow, the display face for titles, Inter for
   text, a saturated tile with a white glyph for the icon, pills for the
   actions (orange for the sale, glass for the quiet one, royal blue for
   consent), the national mark faint in the plate's corner.
   ========================================================================== */

:root {
    --md-overlay: rgba(8, 20, 40, 0.62);
    --md-plate: linear-gradient(180deg, #ffffff 0%, #f7f9fe 100%);
    --md-line: rgba(30, 58, 138, 0.1);
    --md-line-strong: rgba(30, 58, 138, 0.2);
    --md-shadow: 0 40px 90px -30px rgba(11, 31, 58, 0.55), 0 0 0 1px rgba(30, 58, 138, 0.08);
    --md-radius: 28px;
    --md-tile: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
    --md-leaf: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><g fill='%23b45309'><path d='M50 46C41 38 33 34 33 25 33 17 41 14 46 18 48 20 49 22 50 26 51 22 52 20 54 18 59 14 67 17 67 25 67 34 59 38 50 46Z'/><path d='M50 46C41 38 33 34 33 25 33 17 41 14 46 18 48 20 49 22 50 26 51 22 52 20 54 18 59 14 67 17 67 25 67 34 59 38 50 46Z' transform='rotate(90 50 50)'/><path d='M50 46C41 38 33 34 33 25 33 17 41 14 46 18 48 20 49 22 50 26 51 22 52 20 54 18 59 14 67 17 67 25 67 34 59 38 50 46Z' transform='rotate(270 50 50)'/><path d='M50 50C52 62 50 70 58 80 51 76 46 68 47 55Z'/></g></svg>");
    --md-crown: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><g fill='%23b45309'><path d='M5 16 3.2 6.6a.5.5 0 0 1 .8-.5L8.6 9.6 11.56 4.3a.5.5 0 0 1 .88 0l2.96 5.3 4.6-3.5a.5.5 0 0 1 .8.5L19 16H5Z'/><path d='M5.2 17.6h13.6a.9.9 0 0 1 .9.9v.8a.9.9 0 0 1-.9.9H5.2a.9.9 0 0 1-.9-.9v-.8a.9.9 0 0 1 .9-.9Z'/></g></svg>");
}

/* ==========================================================================
   1. The cart popup for guests (#cpOv .cpo)
   ========================================================================== */

body .cpo {
    z-index: 999996;      /* above the scam badge, below the cookie layers */
    padding: 20px;
    background: var(--md-overlay);
    -webkit-backdrop-filter: blur(14px) saturate(120%);
    backdrop-filter: blur(14px) saturate(120%);
}

body .cpo__card {
    position: relative;
    width: 100%;
    max-width: 464px;
    padding: 42px 38px 34px;
    border-radius: var(--md-radius);
    background: var(--md-plate);
    border: 1px solid rgba(255, 255, 255, 0.9);
    box-shadow: var(--md-shadow);
    text-align: center;
    overflow: hidden;
    isolation: isolate;
}

/* the national mark, faint in the corner */
html[lang="en-IE"] body .cpo__card::after,
html[lang="en-GB"] body .cpo__card::after {
    content: '';
    position: absolute;
    right: -34px;
    bottom: -40px;
    z-index: -1;
    width: 190px;
    height: 190px;
    opacity: 0.07;
    pointer-events: none;
}

html[lang="en-IE"] body .cpo__card::after { background: var(--md-leaf) no-repeat center / contain; transform: rotate(-14deg); }
html[lang="en-GB"] body .cpo__card::after { background: var(--md-crown) no-repeat center / contain; transform: rotate(-8deg); }

body .cpo__x {
    top: 18px;
    right: 18px;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.85);
    border: 1px solid var(--md-line);
    color: var(--sc-ink-3, #3f4d66);
    box-shadow: 0 6px 14px -10px rgba(11, 31, 58, 0.4);
    transition: background 0.2s var(--sc-ease), color 0.2s var(--sc-ease), transform 0.2s var(--sc-ease);
}

body .cpo__x:hover {
    background: var(--sc-navy, #0d1b2a);
    color: #ffffff;
    transform: scale(1.06);
}

body .cpo__x svg { width: 14px; height: 14px; }

body .cpo__top { margin-bottom: 0; }

body .cpo__ic {
    display: inline-grid;
    place-items: center;
    width: 68px;
    height: 68px;
    margin-bottom: 22px;
    border-radius: 22px;
    background: var(--md-tile);
    color: #ffffff;
    box-shadow: 0 18px 34px -18px rgba(37, 99, 235, 0.9), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

body .cpo__ic svg {
    width: 30px;
    height: 30px;
    stroke: #ffffff !important;   /* the legacy svg carries a gradient stroke attribute */
    stroke-width: 2;
    fill: none;
}

body .cpo__h {
    margin: 0 0 12px;
    font-family: var(--sc-font-display, 'Plus Jakarta Sans', Inter, sans-serif);
    font-size: 26px;
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: var(--sc-ink, #0b1220);
    text-wrap: balance;
}

body .cpo__p {
    margin: 0;
    font-family: var(--sc-font-body, Inter, sans-serif);
    font-size: 16px;
    font-weight: 500;
    line-height: 1.6;
    color: var(--sc-ink-3, #3f4d66);
    text-wrap: pretty;
}

body .cpo__btns {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 26px;
}

body .cpo__b {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    height: 54px;
    padding: 0 22px;
    border-radius: 999px;
    box-sizing: border-box;
    font-family: var(--sc-font-display, 'Plus Jakarta Sans', Inter, sans-serif);
    font-size: 16px;
    font-weight: 800;
    letter-spacing: 0.01em;
    line-height: 1;
    text-decoration: none;
    transition: transform 0.25s var(--sc-ease), box-shadow 0.25s var(--sc-ease), background 0.25s var(--sc-ease), color 0.25s var(--sc-ease), border-color 0.25s var(--sc-ease);
}

body .cpo__b svg { width: 18px; height: 18px; flex: 0 0 18px; stroke: currentColor; fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; transition: transform 0.25s var(--sc-ease); }
body .cpo__b:hover svg { transform: translateX(3px); }

/* the sale action: the orange pill of the heroes */
body .cpo__b--primary,
body .cpo__b--blue {
    color: #ffffff;
    background: linear-gradient(135deg, #ff8a1f 0%, #f26a00 100%);
    border: 0;
    box-shadow: 0 18px 36px -16px rgba(242, 106, 0, 0.85), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

body .cpo__b--primary:hover,
body .cpo__b--blue:hover {
    color: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 24px 44px -16px rgba(242, 106, 0, 0.9), 0 0 0 6px rgba(249, 115, 22, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

/* the quiet action: glass with a hairline, blue on hover */
body .cpo__b--ghost,
body .cpo__b--out {
    color: var(--sc-ink, #0b1220);
    background: rgba(255, 255, 255, 0.75);
    border: 1px solid var(--md-line-strong);
    box-shadow: none;
}

body .cpo__b--ghost:hover,
body .cpo__b--out:hover {
    color: var(--sc-blue-deep, #1d4ed8);
    background: #ffffff;
    border-color: rgba(37, 99, 235, 0.45);
    transform: translateY(-2px);
    box-shadow: 0 14px 30px -18px rgba(37, 99, 235, 0.5);
}

body .cpo__b:focus-visible { outline: 0; box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.3); }

/* the team line: a quiet row under a hairline, its own small mark */
body .cpo__p2 {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin: 24px 0 0;
    padding: 18px 0 0;
    border-top: 1px solid var(--md-line);
    font-family: var(--sc-font-body, Inter, sans-serif);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.55;
    color: var(--sc-ink-3, #3f4d66);
    text-align: left;
}

body .cpo__p2 svg {
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    padding: 7px;
    border-radius: 9px;
    background: rgba(37, 99, 235, 0.08);
    color: var(--sc-blue-deep, #1d4ed8);
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
    box-sizing: border-box;
}

@media (max-width: 480px) {
    body .cpo { padding: 14px; align-items: flex-end; }
    body .cpo__card { padding: 34px 22px 26px; border-radius: 26px; }
    body .cpo__ic { width: 60px; height: 60px; border-radius: 19px; margin-bottom: 18px; }
    body .cpo__ic svg { width: 26px; height: 26px; }
    body .cpo__h { font-size: 23px; }
    body .cpo__p { font-size: 15.5px; }
    body .cpo__btns { margin-top: 22px; }
    body .cpo__b { height: 52px; font-size: 15.5px; }
    body .cpo__p2 { margin-top: 20px; padding-top: 16px; font-size: 13.5px; }
}

/* while the popup is open the floating badge steps aside */
body.cpo-active .sa-badge { opacity: 0 !important; pointer-events: none !important; }

@media (prefers-reduced-motion: reduce) {
    body .cpo, body .cpo__card, body .cpo__b, body .cpo__x { transition: none; }
}

/* ==========================================================================
   2. Cookie consent: the banner card and the preferences modal (.cc-*)
   The legacy sheet reads its own variables: they are redefined here.
   ========================================================================== */

body .cc-banner,
body .cc-overlay {
    --ck-brand: #1d4ed8;
    --ck-brand-dark: #1e40af;
    --ck-brand-glow: rgba(37, 99, 235, 0.14);
    --ck-brand-light: rgba(37, 99, 235, 0.06);
    --ck-surface: #ffffff;
    --ck-bg: #f5f8fe;
    --ck-bg-2: #edf2fb;
    --ck-ink: #0b1220;
    --ck-ink-2: #253247;
    --ck-body: #3f4d66;
    --ck-subtle: #3f4d66;
    --ck-muted: #5b6478;
    --ck-light: #8b94a7;
    --ck-border: rgba(30, 58, 138, 0.1);
    --ck-border-2: rgba(30, 58, 138, 0.2);
    --ck-radius: 24px;
    --ck-shadow: 0 30px 70px -34px rgba(11, 31, 58, 0.5), 0 0 0 1px rgba(30, 58, 138, 0.08);
    --ck-shadow-lg: 0 40px 90px -30px rgba(11, 31, 58, 0.55), 0 0 0 1px rgba(30, 58, 138, 0.08);
    --ck-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

body .cc-overlay {
    background: var(--md-overlay) !important;
    -webkit-backdrop-filter: blur(14px) saturate(120%) !important;
    backdrop-filter: blur(14px) saturate(120%) !important;
}

/* the faces: Inter for text, the display face for the titles */
body .cc-banner, body .cc-banner *,
body .cc-overlay, body .cc-overlay * {
    font-family: var(--sc-font-body, Inter, sans-serif) !important;
}

body .cc-title,
body .cc-m-title,
body .cc-b,
body .cc-cat-name {
    font-family: var(--sc-font-display, 'Plus Jakarta Sans', Inter, sans-serif) !important;
}

body .cc-card,
body .cc-modal {
    background: var(--md-plate) !important;
    border: 1px solid rgba(255, 255, 255, 0.9) !important;
}

body .cc-card { max-width: 440px !important; padding: 26px 26px 20px !important; }

/* the accent line becomes the national hairline (tricolour, Union on UK) */
body .cc-card::before,
body .cc-modal::before {
    height: 3px !important;
    background: linear-gradient(90deg, #059669 0%, #059669 33.33%, #d9dee8 33.33%, #d9dee8 66.66%, #ff883e 66.66%, #ff883e 100%) !important;
}

html[lang="en-GB"] body .cc-card::before,
html[lang="en-GB"] body .cc-modal::before {
    background: linear-gradient(90deg, #012169 0%, #012169 33.33%, #d9dee8 33.33%, #d9dee8 66.66%, #c8102e 66.66%, #c8102e 100%) !important;
}

/* the cookie emoji gives way to a shield tile */
body .cc-emoji,
body .cc-m-head-l > span[style] { display: none !important; }

body .cc-head::before,
body .cc-m-head-l::before {
    content: '' !important;
    display: inline-block !important;
    width: 36px !important;
    height: 36px !important;
    flex: 0 0 36px !important;
    border-radius: 11px !important;
    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'/><path d='m9 12 2 2 4-4'/></svg>"), var(--md-tile) !important;
    background-repeat: no-repeat, no-repeat !important;
    background-position: center, center !important;
    background-size: 18px 18px, cover !important;
    box-shadow: 0 10px 20px -12px rgba(37, 99, 235, 0.9) !important;
}

body .cc-head { gap: 12px !important; margin-bottom: 10px !important; }
body .cc-title { font-size: 17.5px !important; font-weight: 800 !important; letter-spacing: -0.01em !important; }
body .cc-desc { font-size: 15px !important; line-height: 1.6 !important; margin-bottom: 18px !important; }
body .cc-m-title { font-size: 19px !important; font-weight: 800 !important; }
body .cc-m-head-l { gap: 12px !important; }

/* the actions: pills. Consent is royal blue, the quiet one glass */
body .cc-banner .cc-b,
body .cc-overlay .cc-b {
    height: 46px !important;
    padding: 0 20px !important;
    border-radius: 999px !important;
    font-size: 14.5px !important;
    font-weight: 700 !important;
    letter-spacing: 0.01em !important;
    box-sizing: border-box !important;
    transition: transform 0.22s var(--ck-ease), box-shadow 0.22s var(--ck-ease), background 0.22s var(--ck-ease), color 0.22s var(--ck-ease), border-color 0.22s var(--ck-ease) !important;
}

body .cc-b-accept,
body .cc-b-save {
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%) !important;
    color: #ffffff !important;
    box-shadow: 0 16px 30px -16px rgba(37, 99, 235, 0.85), inset 0 1px 0 rgba(255, 255, 255, 0.25) !important;
}

body .cc-b-accept:hover,
body .cc-b-save:hover {
    background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 22px 38px -16px rgba(37, 99, 235, 0.9), 0 0 0 6px rgba(37, 99, 235, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
}

body .cc-b-reject,
body .cc-b-rej {
    background: rgba(255, 255, 255, 0.75) !important;
    color: var(--ck-ink) !important;
    border: 1px solid var(--ck-border-2) !important;
}

body .cc-b-reject:hover,
body .cc-b-rej:hover {
    background: #ffffff !important;
    color: var(--ck-brand) !important;
    border-color: rgba(37, 99, 235, 0.45) !important;
    transform: translateY(-2px) !important;
}

body .cc-b-custom {
    height: auto !important;
    padding: 10px 0 2px !important;
    color: var(--ck-muted) !important;
    font-family: var(--sc-font-body, Inter, sans-serif) !important;
    font-weight: 600 !important;
    font-size: 13.5px !important;
}

body .cc-b-custom:hover { color: var(--ck-brand) !important; transform: none !important; }

/* the preferences modal: rows as glass cards */
body .cc-modal { max-width: 520px !important; }
body .cc-m-head { padding: 22px 26px 18px !important; }
body .cc-m-body { padding: 20px 26px !important; }
body .cc-m-intro { font-size: 15px !important; }
body .cc-cat { border-radius: 16px !important; margin-bottom: 8px !important; background: rgba(255, 255, 255, 0.7) !important; }
body .cc-cat:hover, body .cc-cat.cc-open { background: #ffffff !important; box-shadow: 0 14px 30px -24px rgba(11, 31, 58, 0.45) !important; }
body .cc-cat-head { padding: 14px 16px !important; }
body .cc-cat-name { font-size: 15px !important; font-weight: 700 !important; }
body .cc-cat-sub { font-size: 13.5px !important; }
body .cc-cat-desc { font-size: 14px !important; }
body .cc-m-foot { padding: 16px 26px calc(18px + var(--ck-safe)) !important; background: rgba(245, 248, 254, 0.9) !important; }
body .cc-m-close { background: rgba(255, 255, 255, 0.85) !important; border: 1px solid var(--ck-border) !important; }
body .cc-m-close:hover { background: var(--sc-navy, #0d1b2a) !important; }
body .cc-m-close:hover svg { stroke: #ffffff !important; }
body .cc-tog-tr { background: #cbd5e1 !important; }

/* phones: the two closing actions stack, the saving one on top */
@media (max-width: 480px) {
    body .cc-m-foot { flex-direction: column-reverse !important; gap: 10px !important; }
    body .cc-m-foot .cc-b { width: 100% !important; flex: 0 0 auto !important; min-height: 46px !important; }
    body .cc-banner .cc-b, body .cc-overlay .cc-b { white-space: nowrap !important; }
}

/* ==========================================================================
   3. Scam alert: the floating badge and the warning modal (.sa-*)
   ========================================================================== */

body .sa-badge, body .sa-badge *,
body .sa-overlay, body .sa-overlay *,
body .sa-lightbox, body .sa-lightbox * {
    font-family: var(--sc-font-body, Inter, sans-serif) !important;
}

body .sa-badge,
body .sa-title,
body .sa-chip-tag,
body .sa-chip-name,
body .sa-gal-title {
    font-family: var(--sc-font-display, 'Plus Jakarta Sans', Inter, sans-serif) !important;
}

/* the badge: the amber warning pill, a little deeper */
body .sa-badge {
    background: linear-gradient(135deg, #92400e 0%, #b45309 50%, #d97706 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.28) !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    letter-spacing: 0.01em !important;
    box-shadow: 0 14px 30px -14px rgba(146, 64, 14, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
}

body .sa-overlay {
    background: var(--md-overlay) !important;
    -webkit-backdrop-filter: blur(14px) saturate(120%);
    backdrop-filter: blur(14px) saturate(120%);
}

body .sa-modal {
    border-radius: var(--md-radius) !important;
    background: var(--md-plate) !important;
    border: 1px solid rgba(255, 255, 255, 0.9);
    box-shadow: var(--md-shadow) !important;
}

/* the head on the deep plate, the warning on a red tile */
body .sa-head {
    background: var(--sc-plate, linear-gradient(150deg, #0b1f3a 0%, #12325c 55%, #16407a 100%)) !important;
    padding: 24px 64px 22px 28px;
}

body .sa-head::before {
    background: radial-gradient(circle, rgba(239, 68, 68, 0.28) 0%, transparent 70%);
}

body .sa-head-ico {
    width: 50px;
    height: 50px;
    border-radius: 15px;
    background: linear-gradient(135deg, #ef4444 0%, #b91c1c 100%);
    border: 0;
    box-shadow: 0 14px 28px -14px rgba(239, 68, 68, 0.9), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

body .sa-title {
    font-size: 22px !important;
    font-weight: 800 !important;
    letter-spacing: -0.02em;
}

body .sa-x {
    background: rgba(255, 255, 255, 0.12) !important;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

body .sa-x:hover { background: rgba(255, 255, 255, 0.24) !important; }

body .sa-body { padding: 24px 28px 26px; }
body .sa-intro { font-size: 16px; line-height: 1.6; color: var(--sc-ink-3, #3f4d66); }

body .sa-chip {
    border-radius: 18px !important;
    border: 1px solid var(--md-line) !important;
    background: rgba(255, 255, 255, 0.85) !important;
    box-shadow: 0 14px 30px -24px rgba(11, 31, 58, 0.45);
}

body .sa-chip-ok { background: linear-gradient(180deg, rgba(209, 250, 229, 0.7) 0%, rgba(255, 255, 255, 0.9) 100%) !important; border-color: rgba(5, 150, 105, 0.25) !important; }
body .sa-chip-bad { background: linear-gradient(180deg, rgba(254, 226, 226, 0.7) 0%, rgba(255, 255, 255, 0.9) 100%) !important; border-color: rgba(220, 38, 38, 0.25) !important; }
body .sa-chip-tag { font-size: 12px !important; font-weight: 800 !important; letter-spacing: 0.08em; text-transform: uppercase; }
body .sa-chip-name { font-size: 16px !important; font-weight: 800 !important; color: var(--sc-ink, #0b1220) !important; }
body .sa-points li { font-size: 15px; line-height: 1.55; color: var(--sc-ink-3, #3f4d66); }
body .sa-shot { border-radius: 16px !important; overflow: hidden; border: 1px solid var(--md-line) !important; }

/* the closing action: the green pill of the info pages */
body .sa-btn {
    border-radius: 999px !important;
    min-height: 54px !important;
    font-family: var(--sc-font-display, 'Plus Jakarta Sans', Inter, sans-serif) !important;
    font-size: 16px !important;
    font-weight: 800 !important;
}

body .sa-btn-ok {
    background: linear-gradient(135deg, #10b981 0%, #047857 100%) !important;
    box-shadow: 0 18px 36px -16px rgba(5, 150, 105, 0.85), inset 0 1px 0 rgba(255, 255, 255, 0.25) !important;
}

body .sa-btn-ok:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 24px 44px -16px rgba(5, 150, 105, 0.9), 0 0 0 6px rgba(5, 150, 105, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
}

@media (max-width: 480px) {
    body .sa-head { padding: 20px 60px 18px 20px; }
    body .sa-body { padding: 20px; }
    body .sa-title { font-size: 19px !important; }
}