/**
 * Concerq — cookie consent banner.
 *
 * Site-wide, so everything is namespaced under .cqcc, but the tokens below
 * are the same gold/pill-button values the deals pages already use
 * (css/popular-routes.css, css/route-request.css, style.css's .cta-button) --
 * copied rather than shared so this still works on pages those never load.
 */

.cqcc {
    --cqcc-gold: #d6b97c;
    --cqcc-gold-2: #e4cb92;
    --cqcc-dim: rgba(214, 185, 124, .35);

    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 99999;

    background: rgba(10, 10, 10, .97);
    border-top: 1px solid var(--cqcc-dim);
    box-shadow: 0 -8px 40px rgba(0, 0, 0, .55);

    color: #fff;
    font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

    animation: cqccUp .35s ease both;
}

/* The banner ships hidden and is revealed by js/cookie-consent.js. Stated
   explicitly because a theme rule elsewhere could otherwise override the
   browser's own [hidden] handling and flash the bar at everyone. */
.cqcc[hidden] {
    display: none;
}

@supports (backdrop-filter: blur(6px)) or (-webkit-backdrop-filter: blur(6px)) {
    .cqcc {
        background: rgba(10, 10, 10, .88);
        -webkit-backdrop-filter: blur(10px);
        backdrop-filter: blur(10px);
    }
}

@keyframes cqccUp {
    from { transform: translateY(100%); }
    to   { transform: none; }
}

.cqcc-inner {
    max-width: 1180px;
    margin: 0 auto;
    padding: clamp(1rem, 3vw, 1.35rem) clamp(1rem, 4vw, 2rem);

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: clamp(1rem, 3vw, 2.25rem);
}

.cqcc-copy {
    min-width: 0;
}

/* Gradient text heading, matched to the reference screenshot and the same
   technique the deals page already uses for its own headings
   (.cqpr-cta .t in css/popular-routes.css) -- title case, not the uppercase
   tracked-out label this used before. */
.cqcc-t {
    margin: 0 0 .3rem;
    font-size: .82rem;
    font-weight: 700;
    letter-spacing: normal;
    text-transform: none;
    background: linear-gradient(180deg, #e4cb92, #c7a667);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: var(--cqcc-gold);
}

.cqcc-p {
    margin: 0;
    font-size: .84rem;
    font-weight: 300;
    line-height: 1.55;
    color: rgba(255, 255, 255, .78);
}

.cqcc-p a {
    color: var(--cqcc-gold);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.cqcc-p a:hover {
    color: var(--cqcc-gold-2);
}

.cqcc-actions {
    display: flex;
    align-items: center;
    gap: .6rem;
    flex-shrink: 0;
}

/* Matched to the site-wide button language now used everywhere else on
   the home page (front-page.php's .cta-button / .cta-secondary): squared
   10px corners instead of a pill, the exact white-to-gold
   linear-gradient(180deg, #e4cb92, #c7a667) fill on the primary action,
   and a plain dark drop-shadow instead of the glowing gold halo this used
   before. "Essential only" mirrors .cta-secondary -- transparent with a
   thin gold border and white text at rest, filling gold with dark text
   on hover, exactly like the hero's "Contact Us" button. */
.cqcc-btn {
    font-family: inherit;
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;

    padding: .8rem 1.75rem;
    border-radius: 10px;
    border: 1px solid var(--cqcc-gold);
    background: transparent;
    color: #fff;

    cursor: pointer;
    white-space: nowrap;
    transition: background .2s ease, color .2s ease, border-color .2s ease, transform .2s ease;
}

.cqcc-btn:hover {
    background: var(--cq-btn-fill);
    color: #0a0a0a;
    border-color: var(--cqcc-gold);
    transform: translateY(-2px);
}

/* Both choices are equally reachable and equally legible. A greyed-out
   "essential only" beside a bright "accept" is the dark pattern regulators
   actually name, and it makes the consent worthless. */
.cqcc-accept {
    background: var(--cq-btn-fill);
    border-color: var(--cqcc-gold);
    color: #0a0a0a;
    box-shadow: 0 8px 20px rgba(0, 0, 0, .35);
}

.cqcc-accept:hover {
    filter: brightness(1.08);
    box-shadow: 0 12px 26px rgba(0, 0, 0, .4);
    color: #0a0a0a;
}

.cqcc-btn:focus-visible,
.cqcc-link:focus-visible {
    outline: 2px solid var(--cqcc-gold-2);
    outline-offset: 2px;
}

/* The footer "Cookie settings" control. A button, because it does something
   on this page rather than going somewhere, dressed as the links around it. */
.cqcc-link {
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    color: inherit;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.cqcc-link:hover {
    color: #d6b97c;
}

@media (max-width: 860px) {
    .cqcc-inner {
        flex-direction: column;
        align-items: stretch;
        gap: .9rem;
    }

    .cqcc-actions {
        justify-content: stretch;
    }

    .cqcc-btn {
        flex: 1;
        padding: .85rem 1rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .cqcc {
        animation: none;
    }
}