/*
 * Consent banner, cookie preferences, and the click-to-load map placeholder.
 *
 * A SEPARATE SHEET, not an addition to style.css. config/rendering.php calls style.css and
 * responsive.css frozen artifacts - never minified, merged or purged, because style.css declares
 * .main-nav .ely-dropdown .mega-menu twice and depends on source order. Appending to a file with
 * that property to add a cookie banner is not worth the risk, and this is genuinely new surface.
 *
 * EVERY VALUE HERE COMES FROM THE HOUSE SHEET. AvertaStd; body text #524972; the purple #7c51fb
 * and orange #f67a3c that .btn-gradient blends at 60deg; 16px corners, which is the most common
 * radius in style.css by a distance. Nothing is invented, because a privacy banner that looks
 * like it came from a different site reads as a third-party script - which is precisely what this
 * one is not.
 */

/* ------------------------------------------------------------------ click-to-load map */

.ely-map-consent {
    /* The iframe it replaces carries height="450" inline, so the placeholder holds the same
       space and the page does not jump when the map arrives. */
    min-height: 450px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 14px;
    padding: 30px 24px;
    border-radius: 16px;
    background: rgba(124, 81, 251, 0.04);
    border: 1px solid rgba(124, 81, 251, 0.13);
    font-family: AvertaStd;
    color: #524972;
}

.ely-map-consent h4 {
    margin: 0;
    font-size: 20px;
    font-weight: 700;
    color: #524972;
}

.ely-map-consent p {
    margin: 0;
    max-width: 46ch;
    font-size: 15px;
    line-height: 1.6;
}

.ely-map-consent .ely-map-note {
    font-size: 13px;
    opacity: 0.8;
}

.ely-map-consent .ely-map-address {
    font-weight: 600;
}

/* The map that replaces the placeholder keeps its rounded corner. */
.cu-map .gmap_iframe {
    border-radius: 16px;
}

/* ------------------------------------------------------------------ consent banner */

.ely-consent {
    position: fixed;
    /* Below a modal dialog and above ordinary content. It must not sit over a popup the visitor
       opened deliberately. */
    z-index: 9000;
    left: 16px;
    right: 16px;
    bottom: 16px;
    margin: 0 auto;
    max-width: 940px;
    padding: 22px 24px;
    border-radius: 16px;
    background: #fff;
    border: 1px solid rgba(124, 81, 251, 0.13);
    box-shadow: 0 10px 40px rgba(127, 137, 161, 0.25);
    font-family: AvertaStd;
    color: #524972;
    /* Expanded - three categories and their descriptions - the banner was most of a laptop
       screen tall, and the page reserved that much space beneath the footer to clear it. It
       scrolls itself now instead of growing the document. */
    max-height: min(72vh, 560px);
    overflow-y: auto;
    overscroll-behavior: contain;
}

/*
 * ON A WIDE SCREEN IT IS A CARD IN THE CORNER, NOT A BAR ACROSS THE PAGE.
 *
 * Full width, it sits over the whole bottom of the viewport, so the page has to give up that much
 * room at the end or the footer's last row - the copyright, the Cookie preferences link, the
 * payment marks - is covered and unclickable. That reservation is correct and it is also 124px of
 * dark nothing under the footer on every first visit, which reads as a broken stylesheet.
 *
 * Pinned to the right at 420px it covers a corner instead. The footer stays reachable, so nothing
 * needs reserving and there is no gap at all. ely-privacy.js decides that by MEASURING the banner
 * against the viewport rather than repeating this breakpoint, so the two cannot drift apart.
 *
 * Below 768px it stays a full-width bar: on a phone a 420px card is the whole screen anyway, and
 * the reservation comes back with it.
 */
@media (min-width: 768px) {
    .ely-consent {
        left: auto;
        right: 16px;
        max-width: 420px;
        margin: 0;
    }
}

.ely-consent[hidden] {
    display: none;
}

/*
 * ONE LINE AND TWO BUTTONS until the visitor asks for more. The first version was about a third of
 * a laptop viewport, fixed to the bottom of every page - it covered the chat composer so the box
 * could not be typed into, and the lower half of the footer so those links could not be clicked.
 */
.ely-consent-row {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.ely-consent-lead {
    margin: 0;
    flex: 1 1 320px;
    font-size: 14.5px;
    line-height: 1.55;
}

.ely-consent-details {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid rgba(124, 81, 251, 0.13);
}

.ely-consent-details[hidden] {
    display: none;
}

.ely-consent p {
    margin: 0 0 14px;
    font-size: 15px;
    line-height: 1.6;
}

.ely-consent a {
    color: #7c51fb;
    text-decoration: underline;
}

.ely-consent-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

/* Reject must be exactly as easy to reach as accept: same size, same weight, same number of
   clicks. A refusal hidden behind a second screen is not a free choice, and regulators in both
   the EU and the UK have said so in terms. */
.ely-consent-actions button {
    padding: 10px 22px;
    font-size: 15px;
    font-family: AvertaStd;
    border-radius: 999px;
    border: 1px solid #7c51fb;
    background: #fff;
    color: #7c51fb;
    cursor: pointer;
    transition: all 0.3s ease;
}

.ely-consent-actions button:hover {
    box-shadow: 0 0 10px rgba(127, 137, 161, 0.25);
}

.ely-consent-actions button.ely-consent-accept {
    background: linear-gradient(60deg, rgba(124, 81, 251, 1) 0%, rgba(246, 122, 60, 1) 100%);
    border-color: transparent;
    color: #fff;
}

.ely-consent-actions .ely-consent-link {
    border: none;
    background: none;
    color: #524972;
    text-decoration: underline;
    padding: 10px 6px;
}

/* ------------------------------------------------------------------ preferences panel */

.ely-consent-categories {
    margin: 0 0 16px;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 12px;
}

.ely-consent-categories li {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 12px 14px;
    border-radius: 12px;
    background: rgba(124, 81, 251, 0.04);
}

.ely-consent-categories input[type="checkbox"] {
    margin-top: 3px;
    width: 18px;
    height: 18px;
    accent-color: #7c51fb;
    flex: 0 0 auto;
}

.ely-consent-categories strong {
    display: block;
    font-size: 15px;
    color: #524972;
}

.ely-consent-categories span {
    font-size: 13px;
    line-height: 1.55;
}

.ely-consent-gpc {
    margin: 0 0 14px;
    padding: 10px 14px;
    border-radius: 12px;
    background: rgba(124, 81, 251, 0.08);
    font-size: 13px;
    line-height: 1.55;
}

@media (max-width: 575px) {
    .ely-consent {
        left: 10px;
        right: 10px;
        bottom: 10px;
        padding: 18px 16px;
    }

    .ely-consent-actions button {
        flex: 1 1 100%;
    }
}

/* ------------------------------------------------------------------ footer control */

/*
 * Sits inside the copyright line. It is a <button> because it opens a dialog rather than going
 * anywhere, so it has to be talked back down to looking like the text around it.
 */
.footer-bottom-cont .ely-consent-link {
    border: 0;
    background: none;
    padding: 0;
    margin-left: 10px;
    font-family: inherit;
    font-size: inherit;
    color: inherit;
    text-decoration: underline;
    cursor: pointer;
}

.footer-bottom-cont .ely-consent-link:hover {
    color: #7c51fb;
}

/*
 * THE BANNER IS A <section>, AND style.css HIDES EVERY SECTION UNTIL IT SCROLLS INTO VIEW.
 *
 * `html.js-reveal section { opacity: 0 }` waits for main.js to add .is-visible, but main.js only
 * observes the sections that exist at load. A banner opened later - from "Cookie preferences" or
 * "Do Not Sell or Share" in the footer - was added at opacity 0: present, clickable, invisible.
 * The consent controls are never a scroll-reveal.
 */
html.js-reveal section.ely-consent {
    opacity: 1;
    transform: none;
    transition: none;
}