/* Cookie consent banner.

   Self-contained on purpose — no dependency on main.css tokens or Bootstrap, so it
   renders correctly even on a page whose stylesheet has not arrived yet. It is the
   one element that must never appear broken.

   A dark floating card rather than a flat white bar: the site is white and bright
   pink, so a white full-bleed strip disappeared into the page and read as part of
   the layout instead of as a question waiting for an answer. The brand keyline
   along the top ties it back to MYDAWA's pink and green without colouring the
   buttons themselves.

   Accept and Reject are deliberately identical in size, padding, font weight and
   click count. Only the fill differs. A refusal that is smaller, greyer or further
   away than agreement is not a free choice, and it is the first thing an auditor
   looks for. */

.cc {
    --cc-surface: #2b2b33;
    --cc-surface-2: #363642;
    --cc-text: #f7f7f8;
    --cc-muted: #bfc2c9;
    --cc-line: rgba(255, 255, 255, .14);
    --cc-pink: #e61b77;
    --cc-green: #6fb74c;

    position: fixed;
    inset: auto 0 0 0;
    z-index: 2147483000;            /* above the chat widget and delivery modals */
    display: flex;
    justify-content: center;
    padding: 0 16px calc(16px + env(safe-area-inset-bottom, 0px));
    pointer-events: none;           /* the gap around the card stays clickable */
    font-family: inherit;
}

.cc[hidden] { display: none; }
.cc:focus { outline: none; }   /* focused programmatically to announce the banner */

.cc__inner {
    pointer-events: auto;
    width: 100%;
    max-width: 1120px;
    background: var(--cc-surface);
    color: var(--cc-text);
    border-radius: 16px;
    box-shadow: 0 18px 50px rgba(16, 24, 40, .34), 0 2px 8px rgba(16, 24, 40, .18);
    padding: 20px 22px;
    max-height: calc(100vh - 32px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;

    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px 28px;
    position: relative;
}

/* Brand keyline. Pseudo-element so it follows the rounded corners. */
.cc__inner::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    border-radius: 16px 16px 0 0;
    background: linear-gradient(90deg, var(--cc-pink) 0%, var(--cc-pink) 55%, var(--cc-green) 100%);
}

.cc__body { flex: 1 1 380px; min-width: 0; }

.cc__title { font-size: 1rem; font-weight: 700; margin: 0 0 4px; letter-spacing: -.01em; }
.cc__text  { font-size: .8125rem; line-height: 1.6; margin: 0; color: var(--cc-muted); }
.cc__text a { color: #fff; text-decoration: underline; text-underline-offset: 2px; }
.cc__text a:hover { color: var(--cc-green); }

.cc__actions {
    flex: 0 0 auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
}

.cc__btn {
    font: inherit;
    font-size: .875rem;
    font-weight: 600;
    line-height: 1;
    border-radius: 10px;
    padding: 13px 22px;
    border: 1.5px solid transparent;
    cursor: pointer;
    min-height: 46px;               /* comfortable touch target */
    white-space: nowrap;
    transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}

.cc__btn:focus-visible { outline: 2px solid var(--cc-green); outline-offset: 2px; }

.cc__btn--primary   { background: #fff; color: #1d1d23; border-color: #fff; }
.cc__btn--primary:hover   { background: #e8e8ec; border-color: #e8e8ec; }

.cc__btn--secondary { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .55); }
.cc__btn--secondary:hover { background: rgba(255, 255, 255, .1); border-color: #fff; }

.cc__btn--link {
    background: none;
    border-color: transparent;
    color: var(--cc-muted);
    text-decoration: underline;
    text-underline-offset: 3px;
    padding-inline: 10px;
    font-weight: 500;
}
.cc__btn--link:hover { color: #fff; }

/* ── Preferences panel ───────────────────────────────────────────────── */
.cc__panel {
    flex: 1 1 100%;                 /* always wraps onto its own row */
    margin-top: 4px;
    border-top: 1px solid var(--cc-line);
    padding-top: 18px;
}
.cc__panel[hidden] { display: none; }

.cc__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
@media (min-width: 768px) {
    .cc__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 32px; }
}

.cc__item {
    background: var(--cc-surface-2);
    border: 1px solid var(--cc-line);
    border-radius: 12px;
    padding: 14px 16px;
}

.cc__row { display: flex; align-items: center; gap: 10px; cursor: pointer; }
.cc__row input {
    width: 18px; height: 18px;
    accent-color: var(--cc-green);
    flex: 0 0 auto;
    cursor: pointer;
}
.cc__row input:disabled { cursor: not-allowed; opacity: .6; }

.cc__label { font-size: .875rem; font-weight: 600; color: var(--cc-text); }
.cc__label em { font-weight: 400; font-style: normal; color: var(--cc-muted); }

.cc__desc { font-size: .8125rem; line-height: 1.55; color: var(--cc-muted); margin: 8px 0 0 28px; }

.cc__panel-actions { margin-top: 18px; }

/* ── Mobile ──────────────────────────────────────────────────────────── */
@media (max-width: 767.98px) {
    .cc { padding: 0; }

    /* Edge to edge, so the card cannot introduce a horizontal scrollbar on a
       narrow screen, and rounded only along the top where it meets the page. */
    .cc__inner {
        max-width: none;
        border-radius: 18px 18px 0 0;
        padding: 18px 16px calc(18px + env(safe-area-inset-bottom, 0px));
        max-height: 82vh;
        gap: 14px;
    }
    .cc__inner::before { border-radius: 18px 18px 0 0; }

    .cc__body { flex: 1 1 100%; }
    .cc__title { font-size: 1.0625rem; }
    .cc__text { font-size: .8125rem; }

    /* Accept and Reject share a row at equal width; Manage sits below, full
       width, so it is easy to hit without competing with the two answers. */
    .cc__actions {
        flex: 1 1 100%;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }
    .cc__btn { width: 100%; padding-inline: 12px; }
    .cc__btn--link { grid-column: 1 / -1; }

    .cc__desc { margin-left: 0; }
    .cc__panel-actions .cc__btn { width: 100%; }
}

/* Very narrow phones: two buttons side by side would wrap their labels. */
@media (max-width: 359.98px) {
    .cc__actions { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: no-preference) {
    .cc__inner { animation: cc-rise .24s cubic-bezier(.22, 1, .36, 1); }
    @keyframes cc-rise { from { transform: translateY(12px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
}

/* Honour an OS light preference only where the page itself is light: the card
   stays dark by design, so this simply guards against a forced-colors mode
   flattening the contrast. */
@media (forced-colors: active) {
    .cc__inner { border: 1px solid CanvasText; }
    .cc__btn { border: 1px solid ButtonText; }
}