/* ---------------------------------------------------------------------------
    Agendy-scope positioning for the cookie-consent banner.

    The markup and the base rules live in the shared core
    (modules/_system/template/box/consent_cookie_message.tpl and
    modules/_system/css/_system.css). Every project carries its own copy of
    those two files, so editing them there would travel to other sites --
    nothing in this file touches them. It is loaded AFTER {$cms.css} (which is
    where _system.css is emitted, verified in the rendered landing markup), and
    every selector is body-prefixed, so the override also wins on specificity
    and does not depend on head ordering staying the way it is today.

    The core default is a 700px centered card (top/left 50% +
    translate(-50%,-50%)), which put the banner in the middle of the landing
    hero, on top of the primary CTA. Wanted instead: a full-width bar pinned to
    the bottom, roughly 80-110px tall, shadow pointing upwards, no center
    transform -- i.e. the core's own <=768px layout promoted to every width,
    plus a single-row flex layout so the message and the three buttons share
    one line on desktop.
--------------------------------------------------------------------------- */

body .consent-cookie-popup {
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
    transform: none;
    width: 100%;
    max-width: 100%;
    /* The customize panel (step 2) expands in place. Cap the bar and scroll
       inside it rather than letting it grow over the page. */
    max-height: 45vh;
    overflow-y: auto;
    border-radius: 0;
    padding: 12px 24px;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.18);
}

/* Step 1: message on the left, the three buttons on the right, one row. */
body .consent-cookie-popup #cookie-main-tab {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    row-gap: 10px;
    margin: 0;
}

body .consent-cookie-popup #cookie-main-tab > .col-md-12 {
    flex: 1 1 380px;
    width: auto;
    max-width: none;
    /* .pb-4 in the core markup is an !important utility. */
    padding-bottom: 0 !important;
}

body .consent-cookie-popup #cookie-main-tab > .col-md-4 {
    flex: 0 0 auto;
    width: auto;
    max-width: none;
}

body .consent-cookie-popup #cookie-main-tab p {
    margin-bottom: 0;
}

/* Title line. */
body .consent-cookie-popup #cookie-main-tab p:first-child {
    font-size: 0.95rem;
    line-height: 1.3;
}

/* The legal body text is the only thing driving the bar's height (4 lines of
   HU at 1440px). It is NOT truncated -- clamping consent wording would hide
   information the user is entitled to see -- only set at a smaller type size
   so the whole bar lands in the 80-110px band. */
body .consent-cookie-popup #cookie-main-tab p + p {
    margin-top: 2px;
    font-size: 0.75rem;
    line-height: 1.3;
}

body .consent-cookie-popup #cookie-main-tab .btn {
    white-space: nowrap;
}

/* Narrow screens: the buttons stack under the message and keep the full width
   the core mobile rule gave them. */
@media (max-width: 767.98px) {
    body .consent-cookie-popup {
        padding: 12px 16px;
    }

    body .consent-cookie-popup #cookie-main-tab > .col-md-4 {
        flex: 1 1 100%;
        width: 100%;
    }

    body .consent-cookie-popup #cookie-main-tab > .col-md-4 .btn {
        width: 100%;
    }

    /* Stacked buttons plus 8-9 lines of legal text would eat ~44% of a phone
       screen. The text scrolls inside the bar instead: nothing is cut, the
       three actions stay above the fold. */
    body .consent-cookie-popup #cookie-main-tab p + p {
        max-height: 5.2em;
        overflow-y: auto;
    }
}