/* ==========================================================================
   Machines4U ” Cookie Consent Banner (optimized)
   Full-width bar pinned to the bottom edge, styled to sit native to the site.
   Same HTML structure & class names as the original:
     .consent-banner
       .consent-close            (×)
       p  >  a.privacy-policy    (message + Privacy Policy link)
       .consent-actions
         .consent-accept         (Accept Tracking — navy solid)
         .consent-deny           (Deny Tracking  — outline)
   ========================================================================== */

:root {
    --m4u-orange: #ff6600;
    --m4u-navy: #19242f;
    --m4u-navy-hover: #2c3a49;
    --m4u-ink: #19242f;
    --m4u-muted: #5a6573;
    --m4u-line: #e3e7eb;
    --m4u-surface: #ffffff;
}

/* --- The bar ------------------------------------------------------------- */
.consent-banner {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    box-sizing: border-box;

    /* Full-bleed background, content aligned to the ~1280px site column */
    padding: 16px max(20px, calc((100% - 1280px) / 2));

    background-color: var(--m4u-surface);
    color: var(--m4u-ink);
    border-top: 3px solid var(--m4u-orange);
    box-shadow: 0 -2px 18px rgba(25, 36, 47, 0.14);
    z-index: 10000;

    /* Adopt the host page's typeface so it reads as part of the site */
    font-family: inherit;

    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px 28px;

    animation: consentSlideUp 0.32s ease-out;
}

@keyframes consentSlideUp {
    from { transform: translateY(100%); }
    to   { transform: translateY(0); }
}

/* --- Message ------------------------------------------------------------- */
.consent-banner p {
    order: 1;
    flex: 1 1 320px;
    min-width: 0;
    margin: 0;
    max-width: none;
    text-align: left;
    font-size: 14px;
    line-height: 1.5;
    color: var(--m4u-ink);
}

.consent-banner p a {
    color: var(--m4u-navy);
    font-weight: 600;
    text-decoration: underline;
    text-decoration-color: var(--m4u-line);
    text-underline-offset: 2px;
    transition: color 0.2s ease, text-decoration-color 0.2s ease;
}

.consent-banner p a:hover {
    color: var(--m4u-orange);
    text-decoration-color: var(--m4u-orange);
}

.consent-banner p a:focus-visible {
    outline: 2px solid var(--m4u-orange);
    outline-offset: 2px;
    border-radius: 2px;
}

/* --- Actions ------------------------------------------------------------- */
.consent-actions {
    order: 2;
    display: flex;
    align-items: center;
    gap: 12px;
    width: auto;
    max-width: none;
    flex: 0 0 auto;
}

.consent-accept,
.consent-deny {
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    padding: 11px 22px;
    border-radius: 4px;
    border: 1.5px solid var(--m4u-navy);
    cursor: pointer;
    transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

/* Accept — navy solid (primary) */
.consent-accept {
    background-color: var(--m4u-navy);
    color: #ffffff;
    border-color: var(--m4u-navy);
}

.consent-accept:hover {
    background-color: var(--m4u-navy-hover);
    border-color: var(--m4u-navy-hover);
}

.consent-accept:focus-visible {
    outline: 2px solid var(--m4u-orange);
    outline-offset: 2px;
}

.consent-accept:active {
    background-color: #0f1820;
    border-color: #0f1820;
}

/* Deny — outline (balanced) */
.consent-deny {
    background-color: #ffffff;
    color: var(--m4u-navy);
    border-color: var(--m4u-navy);
}

.consent-deny:hover {
    background-color: #f4f6f8;
}

.consent-deny:focus-visible {
    outline: 2px solid var(--m4u-orange);
    outline-offset: 2px;
}

.consent-deny:active {
    background-color: #e7ebef;
}

/* --- Close (×) ----------------------------------------------------------- */
.consent-close {
    order: 3;
    position: static;
    top: auto;
    right: auto;
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    font-size: 24px;
    line-height: 1;
    color: var(--m4u-muted);
    cursor: pointer;
    border-radius: 4px;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.consent-close:hover {
    background-color: #f4f6f8;
    color: var(--m4u-ink);
}

.consent-close:focus-visible {
    outline: 2px solid transparent;
    outline-offset: 2px;
    color: var(--m4u-ink);
}

.consent-close:active {
    background-color: #e7ebef;
}

.consent-banner:focus {
    outline: none;
}

/* --- Responsive ---------------------------------------------------------- */
/* Tablet: keep the row but let the close hop to the corner so the message
   and buttons share the remaining width comfortably. */
@media (max-width: 880px) {
    .consent-banner {
        padding: 16px 20px;
        align-items: center;
    }
    .consent-close {
        position: absolute;
        top: 8px;
        right: 12px;
    }
    .consent-banner p {
        order: 2;
        flex: 1 1 100%;
    }
    .consent-actions {
        order: 1;
        box-sizing: border-box;
        flex: 1 1 100%;
        justify-content: flex-start;
        padding-right: 44px; /* clear the corner × */
    }
}

/* Phone: stack and let buttons fill the width for big tap targets. */
@media (max-width: 520px) {
    .consent-banner {
        gap: 14px;
    }
    .consent-actions {
        flex-direction: row;
    }
    .consent-accept,
    .consent-deny {
        flex: 1 1 0;
        padding: 13px 16px; /* ≥44px tall tap target */
        text-align: center;
        justify-content: center;
    }
}

/* --- Reduced motion ------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
    .consent-banner { animation: none; }
    .consent-banner p a,
    .consent-close,
    .consent-accept,
    .consent-deny { transition: none; }
}