/* Date-checker first-visit confirm: tomorrow was pre-selected, not chosen.
   Visual language follows the callback modal (scrim, sheet/modal, amber CTA)
   using the date-checker's --av-* tokens. Mobile-first. */

.dccm {
    --dccm-scrim: rgba(27, 27, 28, 0.55);
    --dccm-bg: #ffffff;
    --dccm-ink: var(--av-ink, #181819);
    --dccm-muted: var(--av-ink-2, #44474d);
    --dccm-notch: #e2dad3;
    --dccm-focus-ring: rgba(162, 63, 176, 0.55);
    --dccm-cancel-hover: #f6f1ed;
    --dccm-z: 60;
    --dccm-pad: var(--av-pad-page, 20px);
    --dccm-pad-desktop: 34px;
    --dccm-gap: var(--av-gap-field, 16px);
    --dccm-radius-sheet: var(--av-r-card, 24px);
    --dccm-radius-modal: 22px;
    --dccm-radius-btn: var(--av-r-ctl, 10px);
    --dccm-radius-cta: var(--av-r-cta, 20px);
    --dccm-notch-w: 38px;
    --dccm-notch-h: 4px;
    --dccm-notch-mt: 14px;
    --dccm-max-h: 92vh;
    --dccm-max-h-dvh: 92dvh;
    --dccm-fs-title: 22px;
    --dccm-lh-title: 1.2;
    --dccm-ls-title: -0.01em;
    --dccm-fw-title: 700;
    --dccm-fs-copy: var(--av-fs-input, 16px);
    --dccm-lh-copy: 1.5;
    --dccm-fw-copy: 400;
    --dccm-btn-min: 44px;
    --dccm-ok-min-h: var(--cta-yellow-min-h, 60px);
    --dccm-ok-fs: var(--cta-yellow-fs, 16px);
    --dccm-ok-lh: var(--cta-yellow-lh, 24px);
    --dccm-ok-fw: var(--cta-yellow-fw, 600);
    --dccm-ok-pad-x: 32px;
    --dccm-cancel-fs: 15px;
    --dccm-cancel-fw: 600;
    --dccm-cancel-pad-x: 22px;
    --dccm-cancel-pad-y: 12px;
    --dccm-focus-width: 3px;
    --dccm-active-nudge: 1px;
    --dccm-shadow-sheet: 0 -18px 50px -12px rgba(27, 27, 28, 0.4);
    --dccm-shadow-modal: 0 30px 70px -22px rgba(27, 27, 28, 0.42),
        0 8px 24px -10px rgba(27, 27, 28, 0.16);
    --dccm-cta-from: var(--av-cta-from, #fecc66);
    --dccm-cta-to: var(--av-cta-to, #f7a547);
    --dccm-desktop-inset: 24px;
    --dccm-desktop-w: 480px;

    position: fixed;
    inset: 0;
    z-index: var(--dccm-z);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    font-family: Poppins, ui-sans-serif, system-ui, sans-serif;
}

.dccm[hidden] {
    display: none;
}

.dccm__scrim {
    position: absolute;
    inset: 0;
    background: var(--dccm-scrim);
}

.dccm__shell {
    position: relative;
    width: 100%;
    overflow: hidden;
    box-sizing: border-box;
    background: var(--dccm-bg);
    border-radius: var(--dccm-radius-sheet) var(--dccm-radius-sheet) 0 0;
    box-shadow: var(--dccm-shadow-sheet);
}

.dccm__scroll {
    max-height: var(--dccm-max-h);
    max-height: var(--dccm-max-h-dvh);
    overflow-y: auto;
    overscroll-behavior: contain;
    box-sizing: border-box;
    padding: 0 var(--dccm-pad) calc(var(--dccm-pad) + env(safe-area-inset-bottom));
}

.dccm__notch {
    display: block;
    width: var(--dccm-notch-w);
    height: var(--dccm-notch-h);
    border-radius: calc(var(--dccm-notch-h) / 2);
    background: var(--dccm-notch);
    margin: var(--dccm-notch-mt) auto;
}

.dccm__title {
    margin: 0;
    font-weight: var(--dccm-fw-title);
    font-size: var(--dccm-fs-title);
    line-height: var(--dccm-lh-title);
    letter-spacing: var(--dccm-ls-title);
    color: var(--dccm-ink);
}

.dccm__copy {
    margin: var(--dccm-gap) 0 0;
    font-weight: var(--dccm-fw-copy);
    font-size: var(--dccm-fs-copy);
    line-height: var(--dccm-lh-copy);
    color: var(--dccm-muted);
}

.dccm__actions {
    display: flex;
    flex-direction: column;
    gap: var(--dccm-gap);
    margin-top: calc(var(--dccm-gap) * 1.5);
}

.dccm__cancel,
.dccm__ok {
    -webkit-appearance: none;
    appearance: none;
    min-height: var(--dccm-btn-min);
    font-family: inherit;
    cursor: pointer;
}

.dccm__cancel {
    border: 0;
    background: none;
    font-weight: var(--dccm-cancel-fw);
    font-size: var(--dccm-cancel-fs);
    color: var(--dccm-ink);
    padding: var(--dccm-cancel-pad-y) var(--dccm-cancel-pad-x);
    border-radius: var(--dccm-radius-btn);
}

.dccm__ok {
    border: 0;
    min-height: var(--dccm-ok-min-h);
    padding: 0 var(--dccm-ok-pad-x);
    border-radius: var(--dccm-radius-cta);
    background: linear-gradient(180deg, var(--dccm-cta-from), var(--dccm-cta-to));
    color: #000;
    font-size: var(--dccm-ok-fs);
    font-weight: var(--dccm-ok-fw);
    line-height: var(--dccm-ok-lh);
}

.dccm__cancel:focus-visible,
.dccm__ok:focus-visible {
    outline: none;
    box-shadow: 0 0 0 var(--dccm-focus-width) var(--dccm-focus-ring);
}

.dccm__cancel:active,
.dccm__ok:active {
    transform: translateY(var(--dccm-active-nudge));
}

@media (min-width: 960px) {
    .dccm {
        align-items: center;
        padding: var(--dccm-desktop-inset);
    }

    .dccm__shell {
        width: var(--dccm-desktop-w);
        max-width: 100%;
        border-radius: var(--dccm-radius-modal);
        box-shadow: var(--dccm-shadow-modal);
    }

    .dccm__scroll {
        padding: var(--dccm-pad-desktop);
        padding-bottom: calc(var(--dccm-pad-desktop) + env(safe-area-inset-bottom));
    }

    .dccm__notch {
        display: none;
    }

    .dccm__actions {
        flex-direction: row;
        justify-content: flex-end;
    }

    .dccm__ok {
        flex: 0 0 auto;
    }
}

@media (hover: hover) and (pointer: fine) {
    .dccm__cancel:hover {
        background: var(--dccm-cancel-hover);
    }

    .dccm__ok:hover {
        filter: brightness(1.03);
    }
}