/* Pocketbook Hudson — cookie banner (Option 1 Desktop)
   Strips CookieConsent's default chrome and rebuilds the consent box:
   bottom-left cream box, Body 2 copy, rooms-page outlined buttons.
   Uses the brand tokens from variables.css. */

#cc-main {
    --cc-font-family: "DTLElzevirT-Book", Georgia, serif;
    --cc-modal-transition-duration: 0s;
}

/* keep the site's lighter font rendering (library's `all: initial` reverts it to `auto`) */
#cc-main .cm,
#cc-main .cm * {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* the overlay appears and disappears instantly — the promo banner is what
   animates in afterward, so the cookie box itself never transitions */
#cc-main .cm {
    transition: none !important;
}

/* buttons behave like the rest of the site — instant hover fill, no transition */
#cc-main .cm__btn {
    transition: none !important;
}

/* hide the cookie banner while the menu / a lightbox is open (matches the promo banner) */
body.no-scroll #cc-main {
    display: none !important;
}

/* ---- the box ---- */
#cc-main .cm {
    position: fixed !important;
    inset: auto 72px 36px auto !important;      /* bottom-right: 36px bottom, 72px right */
    width: calc(50vw - 72px) !important;
    max-width: none !important;
    box-sizing: border-box;
    margin: 0 !important;
    padding: 13.5px 18px 18px !important;       /* top 13.5px, sides + bottom 18px */
    background: var(--white) !important;
    color: var(--black);
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    transform: none !important;          /* fade only — no slide/bounce on entrance or exit */
}

/* ---- inner layout: copy over buttons, 18px gap, no default chrome ---- */
#cc-main .cm__body {
    display: flex;
    flex-direction: column;
    gap: 18px;
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
}

#cc-main .cm__texts {
    margin: 0;
    padding: 0;
}

#cc-main .cm__title {
    display: none;
}

/* body copy: Body 2 desktop — DTLElzevirT-Book 14/18, no extra padding */
#cc-main .cm__desc {
    margin: 0 !important;
    margin-block: 0 !important;
    padding: 0 !important;
    font-family: "DTLElzevirT-Book", Georgia, serif;
    font-weight: 400;
    font-size: var(--desktop---body-2);
    line-height: var(--desktop---body-2--line-height);
    letter-spacing: var(--desktop---body-2--letter-spacing);
    color: var(--black);
    text-align: left;
    text-transform: none;
}

/* ---- buttons row ---- */
#cc-main .cm__btns {
    margin: 0 !important;
    padding: 0 !important;
    border-top: none;                         /* removes the default separator line */
    display: flex;
    flex-direction: row;
    align-items: stretch;
    width: 100%;
    gap: 18px;
}

/* buttons fill the box, split equally — works whether they share one group
   or sit in separate groups */
#cc-main .cm__btn-group,
#cc-main .cm__btn-group + .cm__btn-group {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    flex: 1;
    width: 100%;
    gap: 18px;
    margin: 0 !important;
}

/* exact copy of the rooms-page button (.item-caption__button) */
#cc-main .cm__btn {
    display: inline-flex;
    align-items: flex-start;                   /* top-align the label like the rooms <a> (native <button> centers it) */
    justify-content: center;
    text-align: center;
    vertical-align: baseline;
    margin: 0 !important;                      /* kills the library's logical margin-block-start: 6px */
    margin-block: 0 !important;
    font-weight: 400;                          /* prevents faux-bold (font ships only weight 400) */
    height: var(--0_75);
    min-height: 0;
    flex: 1 1 0;                               /* fill the box, equal width */
    width: 100%;
    min-width: 0;
    padding: .15rem var(--1_5);                /* 54px left/right */
    border: 1px var(--black) solid;
    border-radius: 0;
    background: transparent;
    color: var(--black);
    box-shadow: none;
    white-space: nowrap;
    font-family: "DTLElzevirTCaps-Book", "DTLElzevirT-Book", serif;
    font-size: var(--desktop---body-2-small-caps);
    line-height: var(--desktop---body-2--line-height);
    letter-spacing: var(--desktop---body-2-small-caps--letter-spacing);
    text-align: center;
    text-transform: lowercase;
}

/* the label is wrapped in a <span> — inherit type */
#cc-main .cm__btn span {
    display: inline;
    vertical-align: baseline;
    line-height: inherit;
    font: inherit;
    font-weight: 400;
    letter-spacing: inherit;
    margin: 0 !important;
    margin-block: 0 !important;
}

#cc-main .cm__btn:hover {
    color: var(--white);
    background: var(--black);
}

/* the library spaces adjacent buttons/groups with `margin: .375rem 0 0 !important`
   via `.cm__btn + .cm__btn` (more specific than `.cm__btn`, so it beat our reset).
   we use `gap` for spacing, so zero it with a matching-specificity selector. */
#cc-main .cm__btn + .cm__btn,
#cc-main .cm__btn-group + .cm__btn-group {
    margin: 0 !important;
}

/* ---- desktop (1024px+): full-width bar, 12-col grid — matches Figma node 4175:966 ----
   copy sits in cols 1–5, buttons sit in cols 7–12 (col 6 left empty as a spacer);
   replaces the old bottom-right floating box (was right-justified, read as
   off-center against the now-centered Olive pill). 1024px, not 769px: below
   ~1007px the "manage preferences" button's grid cell drops under its natural
   width (155px text + 72px padding + 2px border = 229px), so its 36px padding
   starts getting squeezed before that — 1024px keeps a safety margin. */
@media screen and (min-width: 1024px) {
    #cc-main .cm {
        inset: auto 0 0 0 !important;
        width: 100% !important;
        max-width: none !important;
        padding: var(--0_5) !important;
    }

    #cc-main .cm__body {
        display: grid !important;
        grid-template-columns: repeat(12, 1fr) !important;
        column-gap: var(--0_5) !important;
        row-gap: var(--0_5) !important;
        align-items: start !important;
    }

    #cc-main .cm__texts {
        grid-column: 1 / span 5;
    }

    #cc-main .cm__btns {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        column-gap: var(--0_5) !important;
        grid-column: 7 / span 6;
        align-self: center;
    }

    /* accept/reject group: two equal buttons */
    #cc-main .cm__btn-group {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: var(--0_5) !important;
    }

    /* manage-preferences group: single button, fills its half */
    #cc-main .cm__btn-group + .cm__btn-group {
        grid-template-columns: 1fr !important;
    }

    /* vertical padding + height match .item-caption__button--external (main.css);
       36px horizontal padding per design; ellipsis so the label degrades
       gracefully instead of overflowing if the grid cell ever gets too narrow */
    #cc-main .cm__btn {
        padding: .15rem var(--1) !important;
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

/* ---- mobile/tablet (below 1024px) — stacked layout, see the desktop
   breakpoint comment above for why the cutoff moved from 768px ---- */
@media screen and (max-width: 1023px) {
    /* fill the full width, flush to the bottom — no margins */
    #cc-main .cm {
        inset: auto 0 0 0 !important;
        width: 100% !important;
        max-width: none !important;
    }

    /* keep buttons side by side (50/50) with a 13.5px gap — library flips to column at this width */
    #cc-main .cm__btns,
    #cc-main .cm__btn-group,
    #cc-main .cm__btn-group + .cm__btn-group {
        flex-direction: row !important;
        gap: 13.5px;
    }

    #cc-main .cm__btn {
        flex: 1 1 0;                /* split the width equally */
        width: 100%;
        padding: .15rem var(--0_5); /* tighter side padding so labels fit on narrow screens */
        font-size: var(--mobile---body-2-small-caps);
        line-height: var(--mobile---body-2--line-height);
        letter-spacing: var(--mobile---body-2-small-caps--letter-spacing);
    }

    /* mobile copy token */
    #cc-main .cm__desc {
        font-size: var(--mobile---body-2);
        line-height: var(--mobile---body-2--line-height);
        letter-spacing: var(--mobile---body-2--letter-spacing);
    }
}