/*
 | Cookie bar. Full width, flush to the bottom, dusk navy so it reads as a
 | separate thing rather than part of the page it sits on.
 |
 | Both buttons are identical. That is deliberate and not an oversight: making
 | "reject" quieter than "accept" is the visual asymmetry the EDPB names first
 | among cookie-banner dark patterns, and our own Acceptable Use Policy tells
 | customers not to do it in their popups.
 |
 | Self-contained, because the same file is loaded by the marketing page and by
 | the legal pages, whose stylesheets are generated separately.
 */
.es-consent {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;
    background: #18213f;
    border-top: 3px solid;
    border-image: linear-gradient(120deg, #eeaf45 0%, #e68249 52%, #d85f82 100%) 1;
    box-shadow: 0 -8px 28px -14px rgba(24, 16, 30, 0.55);
    font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
    animation: es-consent-in 0.22s ease-out both;
}
@keyframes es-consent-in {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
    .es-consent { animation: none; }
}
.es-consent-inner {
    max-width: 76rem;
    margin: 0 auto;
    padding: 1rem 1.5rem;
    display: flex;
    align-items: center;
    gap: 1.5rem;
    flex-wrap: wrap;
}
.es-consent-text {
    flex: 1 1 24rem;
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.6;
    color: #d7dbeb;
}
.es-consent-link {
    font: inherit;
    color: #f6b25f;
    background: none;
    border: 0;
    padding: 0;
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
}
.es-consent-link:hover { color: #ffd9a8; }

.es-consent-actions {
    display: flex;
    gap: 0.65rem;
    flex: 0 0 auto;
}
/*
 | Same size, same shape, same row, same number of clicks. Accept carries the
 | brand fill and Reject is outlined, which is the ordinary primary/secondary
 | pairing and is where the line sits.
 |
 | What must NOT happen here: Reject becoming a text link, or shrinking, or
 | moving out of this row. "Accept as a bright button, reject as small grey text"
 | is the first dark pattern the EDPB names, and our own cookie policy states in
 | writing that Reject is one click, in the same place, at the same size as
 | Accept. Changing this makes a published legal page false.
 */
.es-consent-btn {
    font: inherit;
    font-size: 0.9rem;
    font-weight: 600;
    color: #e7eaf5;
    background: transparent;
    border: 1px solid rgba(231, 234, 245, 0.45);
    border-radius: 9px;
    padding: 0.6rem 1.6rem;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}
.es-consent-btn:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(231, 234, 245, 0.8);
    color: #ffffff;
}

/* The brand fill. Same box as its neighbour, so the difference is colour only. */
.es-consent-btn--yes {
    color: #ffffff;
    background-color: #e0694c;
    background-image: linear-gradient(120deg, #ec8b3c 0%, #e0694c 55%, #d2567e 100%);
    border-color: transparent;
    box-shadow: 0 8px 18px -8px rgba(200, 110, 60, 0.6);
}
.es-consent-btn--yes:hover {
    background-color: #e0694c;
    background-image: linear-gradient(120deg, #ec8b3c 0%, #e0694c 55%, #d2567e 100%);
    border-color: transparent;
    filter: brightness(1.06);
}
.es-consent-btn:focus-visible {
    outline: 2px solid #f6b25f;
    outline-offset: 3px;
}

/* Second layer: what we store, over the page rather than away from it. */
.es-consent-details {
    position: fixed;
    inset: 0;
    z-index: 10000;
    background: rgba(24, 26, 46, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.25rem;
    font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
}
.es-consent-details-card {
    width: 100%;
    max-width: 34rem;
    max-height: 85vh;
    overflow-y: auto;
    background: #ffffff;
    border-radius: 16px;
    padding: 1.6rem;
    box-shadow: 0 18px 50px -18px rgba(24, 16, 30, 0.5);
}
.es-consent-details-card h2 {
    margin: 0 0 0.6rem;
    font-family: 'Titillium Web', 'Inter', ui-sans-serif, system-ui, sans-serif;
    font-size: 1.2rem;
    font-weight: 600;
    color: #181a2e;
}
.es-consent-details-card p {
    margin: 0 0 1rem;
    font-size: 0.88rem;
    line-height: 1.65;
    color: #4f5468;
}
.es-consent-details-card table {
    width: 100%;
    border-collapse: collapse;
    margin: 0 0 1rem;
    font-size: 0.82rem;
}
.es-consent-details-card th,
.es-consent-details-card td {
    border: 1px solid #efe6da;
    padding: 0.5rem 0.65rem;
    text-align: left;
    vertical-align: top;
    color: #4f5468;
}
.es-consent-details-card th {
    background: #fffaf3;
    color: #181a2e;
    font-weight: 600;
}
.es-consent-details-card code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.95em;
}
.es-consent-details-foot { font-size: 0.82rem; }
.es-consent-details-card a {
    color: #cf6438;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.es-consent-details-card .es-consent-btn {
    color: #353a52;
    background: #fffaf3;
    border-color: #ddd0c0;
}
.es-consent-details-card .es-consent-btn:hover {
    background: #f6efe5;
    border-color: #c9b9a4;
}

@media (max-width: 40rem) {
    .es-consent-inner { padding: 0.9rem 1.1rem; gap: 0.9rem; }
    .es-consent-actions { width: 100%; }
    .es-consent-btn { flex: 1; padding: 0.6rem 0.75rem; }
}