/* ==========================================================================
   Delivery card — last card in the country home menu rail (.cy-menu-scroll).
   Scoped under .cy-mcard--delivery. Loaded only when the partial actually
   renders, so countries with no delivery partners pay nothing for it.

   Deliberately NOT a band of its own: a standalone cream panel on a cream page
   read as a large empty box, and the partner marks belong in the same rail as
   the menu cards — "how do I get this" sits naturally beside "what is on it".
   Inherits .cy-mcard's footprint (280px, 3/4 ratio) so the rail stays even.
   ========================================================================== */

.cy-mcard--delivery {
    background: linear-gradient(150deg, var(--cy-brown, #3f2016) 0%, var(--cy-dark, #1a0e08) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Sits above the card's own bottom gradient overlay, and clears it so the
   logos never collide with the title. */
.cy-dcard-body {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 22px 22px 96px;
}

.cy-dcard-logos {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
}

/* Fixed-size chip on a white ground rather than logos loose on the brown.
   All three partner lockups are vertical stacks at different aspect ratios, so
   unboxed they optically read as three different sizes; the Uber Eats mark is
   black and would vanish entirely against this card. */
.cy-dcard-chip {
    /* border-box: the site sets none globally, so padding would otherwise
       widen the chip past the card's inner width. */
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 56px;
    padding: 8px 12px;
    background: #FFFFFF;
    border-radius: 10px;
}

/* The picture must fill the chip so the image has a definite box to fit
   inside. With `max-height: 100%` against an auto-height <picture> the
   constraint never resolves and the taller lockups overflow. */
.cy-dcard-chip picture {
    display: flex;
    width: 100%;
    height: 100%;
}

.cy-dcard-chip img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.cy-dcard-chip-text {
    font-size: .85rem; font-weight: 700; line-height: 1.15;
    text-align: center; color: var(--cy-brown, #3f2016);
}

/* The rail's other cards carry a title only. This one adds a one-line prompt,
   because unlike a menu group the destination is not implied by the title. */
.cy-dcard-note {
    display: block;
    margin-top: 6px;
    color: rgba(255, 255, 255, .78);
    font-size: .82rem;
    font-weight: 500;
}

.cy-mcard--delivery:hover .cy-dcard-chip,
.cy-mcard--delivery:focus-visible .cy-dcard-chip {
    transition: transform .3s cubic-bezier(0.16, 1, 0.3, 1);
    transform: translateY(-2px);
}

@media (prefers-reduced-motion: reduce) {
    .cy-mcard--delivery:hover .cy-dcard-chip,
    .cy-mcard--delivery:focus-visible .cy-dcard-chip { transform: none; }
}