/* ============================================================
   DONATION POS — ENHANCE LAYER  (v1.0)
   Loaded LAST, after styles.css + upgrade.css.
   Adds: EU/region announcement bar, layout offsets for the bar,
   and a round of targeted fintech polish (QR, cards, badges).
   Self-contained: re-declares the few tokens it relies on so it
   also works on pages that don't load upgrade.css (terms/privacy).
   ============================================================ */

:root {
    /* Height of the region announcement bar (also used by inline
       page offsets via var(--announce-height, ...) fallbacks). */
    --announce-height: 42px;

    /* Fallback tokens (match upgrade.css so legal pages behave too) */
    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    --surface-tint: #f6f8fb;
    --color-ink: #0b1f33;
}

/* ------------------------------------------------------------
   1. REGION ANNOUNCEMENT BAR  —  "Greece site → Europe site"
   ------------------------------------------------------------ */
.announce-bar {
    position: fixed;
    inset: 0 0 auto 0;
    height: var(--announce-height);
    z-index: 260; /* above header (200), below modal (300) */
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    padding: 0 1rem;
    font-family: var(--font-primary);
    font-size: 0.82rem;
    font-weight: 500;
    letter-spacing: 0.01em;
    line-height: 1;
    color: #e9f0fb;
    text-decoration: none;
    background:
        radial-gradient(140% 220% at 0% 0%, rgba(238, 122, 45, 0.38), transparent 42%),
        linear-gradient(90deg, var(--color-primary-dark) 0%, var(--color-primary) 55%, #27578a 100%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.10);
    overflow: hidden;
    transition: filter 0.3s var(--ease-out);
    animation: announceDrop 0.5s var(--ease-out) both;
}
@keyframes announceDrop {
    from { transform: translateY(-100%); }
    to   { transform: translateY(0); }
}
.announce-bar:hover { filter: brightness(1.08); }

.announce-flag {
    font-size: 1.02rem;
    line-height: 1;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.28));
}
.announce-text { opacity: 0.9; }
.announce-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-weight: 700;
    color: #ffffff;
    white-space: nowrap; /* never wrap to a 2nd line (bar clips overflow) */
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
    text-decoration-color: rgba(255, 255, 255, 0.45);
}
.announce-arrow {
    transition: transform 0.25s var(--ease-out);
    flex: none;
}
.announce-bar:hover .announce-arrow { transform: translateX(4px); }

/* ------------------------------------------------------------
   2. LAYOUT OFFSETS  —  push the fixed header + page tops down
      by the height of the announcement bar.
   ------------------------------------------------------------ */
.header { top: var(--announce-height); }
.hero   { padding-top: calc(var(--header-height) + var(--announce-height)); }
.subhero { padding-top: calc(var(--header-height) + var(--announce-height) + 4.5rem); }

/* ------------------------------------------------------------
   3. QR CODE — premium gradient ring, soft glow, gentle lift
   ------------------------------------------------------------ */
.qr-code-frame {
    padding: 16px;
    border-radius: 22px;
    border: 2px solid transparent;
    background:
        linear-gradient(#fff, #fff) padding-box,
        linear-gradient(135deg, var(--color-primary) 0%, var(--color-accent) 100%) border-box;
    box-shadow:
        0 24px 60px rgba(11, 31, 51, 0.16),
        0 0 0 6px rgba(30, 58, 95, 0.04);
    transition: transform 0.4s var(--ease-out), box-shadow 0.4s var(--ease-out);
}
.qr-code-frame:hover {
    transform: translateY(-4px);
    box-shadow:
        0 34px 80px rgba(11, 31, 51, 0.22),
        0 0 42px rgba(238, 122, 45, 0.16),
        0 0 0 6px rgba(238, 122, 45, 0.06);
}
.qr-code-frame img {
    border-radius: 12px;
    display: block;
}
/* nudge the scanning corners inside the larger ring */
.qr-corner { width: 24px; height: 24px; }
.qr-corner--tl { top: 9px; left: 9px; }
.qr-corner--tr { top: 9px; right: 9px; }
.qr-corner--bl { bottom: 9px; left: 9px; }
.qr-corner--br { bottom: 9px; right: 9px; }

.qr-code-hint {
    font-weight: 500;
    color: var(--color-primary);
}

/* Placement preview cards (Stand/Poster + Digital): the two source images
   have different aspect ratios (portrait poster vs landscape mockup). The
   original fixed-height `cover` box cropped them. Show each in FULL with
   `contain` on a soft branded backdrop, at a uniform height so both cards
   stay balanced. */
.qr-placement-visual {
    height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px;
    background: linear-gradient(135deg, #eef2f8 0%, #f6f8fb 100%);
}
.qr-placement-visual img {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(11, 31, 51, 0.12);
}
@media (max-width: 768px) {
    .qr-placement-visual { height: 340px; }
}

/* ------------------------------------------------------------
   4. TARGETED POLISH — cards, compliance badges, focus rings
   ------------------------------------------------------------ */
/* Softer, deeper card elevation on hover (tilt handled by JS) */
.client-card {
    transition:
        box-shadow 0.35s var(--ease-out),
        transform 0.35s var(--ease-out);
}
.client-card:hover {
    box-shadow: 0 22px 50px rgba(11, 31, 51, 0.14);
}

/* Compliance strip badges: subtle interactive lift */
.cs-badge {
    transition: transform 0.25s var(--ease-out), color 0.25s var(--ease-out);
}
.cs-badge:hover {
    transform: translateY(-2px);
    color: var(--color-primary);
}

/* logo-white.png actually ships as the DARK logo on an opaque white
   background, so on the dark footer / 404 it reads as a bare white block.
   Present it deliberately as a clean rounded "logo chip". Header logo
   (on a white surface) is untouched. */
.footer .logo-img,
.nf-logo {
    background: #fff;
    border-radius: 12px;
    padding: 6px 10px;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.28);
}

/* Accessible focus ring for all buttons/links-as-buttons */
.btn:focus-visible,
.announce-bar:focus-visible,
.nav-link--cta:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 3px;
    border-radius: 12px;
}

/* ------------------------------------------------------------
   5. RESPONSIVE
   ------------------------------------------------------------ */
@media (max-width: 768px) {
    :root { --announce-height: 40px; }
    .nav-menu { top: calc(var(--header-height) + var(--announce-height)); }
}
@media (max-width: 560px) {
    .announce-bar { font-size: 0.76rem; gap: 0.4rem; }
    .announce-text { display: none; } /* keep flag + CTA + arrow only */
}
@media (max-width: 380px) {
    .announce-bar { font-size: 0.7rem; padding: 0 0.6rem; }
    .announce-flag { font-size: 0.9rem; }
}

/* Respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce) {
    .announce-bar { animation: none; }
    .qr-code-frame { transition: none; }
}