/* forms.fieraroma.it - banner of the cookie consent (0.90.0), same design
   of the banner of EasyMenuPro.

   Loaded only on the pages with the banner (_includes/consent.tpl). The
   pages of the forms have the theme of each form: the banner does not use
   its variables and declares again fonts and colors. Everything is under
   .ck, so the themes (also the custom CSS) do not touch it and it does not
   touch them. */

.ck {
    --ck-bg: #FFFFFF;
    --ck-ink: #1B1D1A;
    --ck-muted: #5E6158;
    --ck-line: #DEDCD2;
    --ck-accent: #2F6D4F;
    --ck-accent-ink: #FFFFFF;

    position: fixed;
    z-index: 2147483000;
    inset: auto 0 0 0;
    display: flex;
    justify-content: center;
    padding: 0 .75rem .75rem;
    pointer-events: none;
    font: 400 15px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    color: var(--ck-ink);
    text-align: left;
}

.ck[hidden] { display: none; }

.ck *, .ck *::before, .ck *::after { box-sizing: border-box; }

/* in the middle: the veil darkens without blocking, and the two buttons
   stay at hand. A wall that forces to accept is not allowed */
.ck-center {
    inset: 0;
    align-items: center;
    padding: 1rem;
    background: rgba(27, 29, 26, .45);
    pointer-events: auto;
}

.ck-box {
    position: relative;
    width: 100%;
    max-width: 46rem;
    max-height: calc(100vh - 1.5rem);
    overflow-y: auto;
    padding: 1.1rem 1.25rem 1rem;
    background: var(--ck-bg);
    border: 1px solid var(--ck-line);
    border-radius: 14px;
    box-shadow: 0 18px 48px rgba(27, 29, 26, .22);
    pointer-events: auto;
}

.ck-center .ck-box { max-width: 34rem; }

.ck-title {
    margin: 0 2rem .35rem 0;
    font-family: inherit;
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--ck-ink);
}

.ck-text { margin: 0; font-size: .875rem; color: var(--ck-muted); }
.ck-text a { color: var(--ck-ink); font-weight: 600; text-decoration: underline; }

.ck-x {
    position: absolute;
    top: .6rem;
    right: .6rem;
    width: 2rem;
    height: 2rem;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 50%;
    font-family: inherit;
    font-size: 1.4rem;
    line-height: 1;
    color: var(--ck-muted);
    cursor: pointer;
}

.ck-x:hover { background: #F1F0EA; color: var(--ck-ink); }

.ck-prefs { display: grid; gap: .6rem; margin-top: .9rem; }
.ck-prefs[hidden] { display: none; }

.ck-cat { padding: .7rem .8rem; border: 1px solid var(--ck-line); border-radius: 10px; }
.ck-cat p { margin: .3rem 0 0; font-size: .8125rem; color: var(--ck-muted); }

.ck-cat-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin: 0; cursor: pointer; }
.ck-cat-head strong { font-size: .9375rem; }

.ck-always { font-size: .75rem; font-weight: 700; color: var(--ck-accent); white-space: nowrap; }

/* switch: the checkbox stays real (keyboard, screen readers), only the
   background is drawn */
.ck-switch { position: relative; flex: none; width: 2.6rem; height: 1.5rem; }

.ck-switch input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}

.ck-switch span {
    position: absolute;
    inset: 0;
    background: #C9C7BE;
    border-radius: 99px;
    transition: background-color .15s ease;
    pointer-events: none;
}

.ck-switch span::after {
    content: "";
    position: absolute;
    top: .2rem;
    left: .2rem;
    width: 1.1rem;
    height: 1.1rem;
    background: #fff;
    border-radius: 50%;
    transition: transform .15s ease;
}

.ck-switch input:checked + span { background: var(--ck-accent); }
.ck-switch input:checked + span::after { transform: translateX(1.1rem); }
.ck-switch input:focus-visible + span { outline: 2px solid var(--ck-ink); outline-offset: 2px; }

.ck-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-top: 1rem; }

/* Reject and Accept look the same, on purpose: the Garante asks that
   rejecting is as easy as accepting */
.ck-btn {
    flex: 1 1 9rem;
    min-height: 2.6rem;
    padding: .55rem 1rem;
    background: var(--ck-accent);
    border: 1px solid var(--ck-accent);
    border-radius: 10px;
    font-family: inherit;
    font-size: .9375rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--ck-accent-ink);
    cursor: pointer;
}

.ck-btn:hover { filter: brightness(.92); }
.ck-btn[hidden] { display: none; }

.ck-btn-link {
    flex: 0 1 auto;
    background: transparent;
    border-color: transparent;
    color: var(--ck-ink);
    text-decoration: underline;
}

.ck-btn-link:hover { filter: none; background: #F1F0EA; }

.ck-btn:focus-visible, .ck-x:focus-visible { outline: 2px solid var(--ck-ink); outline-offset: 2px; }

/* cookie icon to open the preferences again, at the bottom right of every
   page with the banner. Discreet: it is a service, not an invitation */
.ck-reopen {
    position: fixed;
    z-index: 2147482999;
    right: .9rem;
    bottom: calc(.9rem + env(safe-area-inset-bottom, 0px));
    display: grid;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    padding: 0;
    background: #FFFFFF;
    border: 1px solid #DEDCD2;
    border-radius: 50%;
    box-shadow: 0 4px 14px rgba(27, 29, 26, .18);
    color: #1B1D1A;
    cursor: pointer;
    opacity: .85;
}

.ck-reopen:hover, .ck-reopen:focus-visible { opacity: 1; transform: rotate(-12deg); }
.ck-reopen { transition: opacity .15s ease, transform .2s ease; }
.ck-reopen:focus-visible { outline: 2px solid #1B1D1A; outline-offset: 2px; }
.ck-reopen[hidden] { display: none; }
.ck-reopen svg { width: 1.45rem; height: 1.45rem; }
.ck-reopen .ck-cookie { fill: #C8883A; }
.ck-reopen .ck-chip { fill: #5A3A1C; }

@media (prefers-color-scheme: dark) {
    .ck {
        --ck-bg: #22241F;
        --ck-ink: #F2F1EC;
        --ck-muted: #BDBFB6;
        --ck-line: #3A3D36;
        --ck-accent: #4E9A73;
    }

    .ck-x:hover, .ck-btn-link:hover { background: #2E312B; }
    .ck-reopen { background: #22241F; border-color: #3A3D36; }
    .ck-switch span { background: #55584F; }
}

@media (max-width: 34rem) {
    .ck { padding: 0 .5rem .5rem; }
    .ck-box { padding: 1rem 1rem .9rem; }
    .ck-btn { flex-basis: 100%; }
    .ck-btn-link { order: 3; }
}

@media (prefers-reduced-motion: reduce) {
    .ck-switch span, .ck-switch span::after, .ck-reopen { transition: none; }
    .ck-reopen:hover, .ck-reopen:focus-visible { transform: none; }
}

/* room for the cookie icon under the card: the last buttons of a form
   (submit, Next, payment) are never under it at the end of the page */
.wf-body .wf-wrap { padding-bottom: calc(48px + 3rem); }

/* a window of the form open (privacy): the icon would cover its buttons */
body.wf-modal-open .ck-reopen { display: none; }

@media print {
    .ck, .ck-reopen { display: none !important; }
}