/* ==========================================================================
   Marco Cafe — announcement popup
   Loaded on the website and inside the QR menu, so it may not lean on
   anything that only one of the two stylesheets defines. It sits above
   everything else: the site modal is z-index 400, the maker strip 500, the
   QR sheet 100.
   ========================================================================== */

.mc-pop {
    position: fixed;
    inset: 0;
    z-index: 900;
    display: grid;
    place-items: center;
    padding: 18px;
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s var(--ease, ease), visibility .3s var(--ease, ease);
}
.mc-pop[hidden] { display: none; }
.mc-pop:not(.is-open) { pointer-events: none; }
.mc-pop.is-open { opacity: 1; visibility: visible; }

.mc-pop-veil {
    position: absolute;
    inset: 0;
    background: rgba(38, 49, 31, .58);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.mc-pop-box {
    position: relative;          /* anchors .mc-pop-close */
    width: 100%;
    max-width: 420px;
    max-height: 88vh;
    max-height: 88dvh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    background: var(--c-50, #fdfaf3);
    border-radius: var(--r-xl, 28px);
    box-shadow: var(--sh-lg, 0 30px 60px -24px rgba(38, 49, 31, .28));
    transform: translateY(20px) scale(.97);
    transition: transform .4s var(--ease, ease);
}
.mc-pop.is-open .mc-pop-box { transform: none; }

.mc-pop-close {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 2;
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border: 0;
    padding: 0;
    cursor: pointer;
    border-radius: 50%;
    background: rgba(253, 250, 243, .94);
    color: var(--g-800, #39482f);
    font-size: 15px;
    box-shadow: var(--sh-sm, 0 2px 8px rgba(38, 49, 31, .06));
    transition: background .25s ease, transform .25s ease;
}
.mc-pop-close,
.mc-pop-later { touch-action: manipulation; }
.mc-pop-close:hover { background: #fff; transform: rotate(90deg); }

/* Image is optional: an announcement is often just a sentence. */
.mc-pop-media {
    background: var(--g-100, #eaf0e2);
    border-radius: var(--r-xl, 28px) var(--r-xl, 28px) 0 0;
    overflow: hidden;
}
.mc-pop-media img {
    display: block;
    width: 100%;
    max-height: 46vh;
    object-fit: cover;
}

.mc-pop-body { padding: 24px 26px 26px; text-align: center; }
/* With no photo the title would otherwise slide under the close button. */
.mc-pop-box > .mc-pop-close + .mc-pop-body { padding-top: 34px; }

.mc-pop-body h3 {
    margin: 0 0 10px;
    font-size: 22px;
    line-height: 1.25;
    color: var(--g-900, #26311f);
}

.mc-pop-text {
    font-size: 14.5px;
    line-height: 1.7;
    color: var(--ink-2, #52604a);
}
.mc-pop-text p { margin: 0 0 10px; }
.mc-pop-text p:last-child { margin-bottom: 0; }

.mc-pop-body .btn { margin-top: 18px; }

/* Secondary dismiss. Some guests will not look for an X in the corner, and a
   popup nobody can find the exit on is worse than no popup. */
.mc-pop-later {
    display: block;
    width: 100%;
    margin-top: 10px;
    padding: 8px;
    border: 0;
    background: none;
    cursor: pointer;
    font: inherit;
    font-size: 13px;
    color: var(--ink-3, #7d8974);
    text-decoration: underline;
    text-underline-offset: 3px;
}
.mc-pop-later:hover { color: var(--g-700, #4a5d46); }

/* Phones: sit the card slightly low so it reads as a sheet, not a takeover. */
@media (max-width: 480px) {
    .mc-pop { padding: 14px; align-content: end; }
    .mc-pop-box { max-width: none; }
    .mc-pop-body { padding: 20px 20px 22px; }
    .mc-pop-media img { max-height: 38vh; }
}

@media (prefers-reduced-motion: reduce) {
    .mc-pop, .mc-pop-box { transition: none; }
    .mc-pop-box { transform: none; }
}