/* ==========================================================================
   "Select the shop" (/restaurants), where every order starts. Loaded only by
   front_end/restaurants/index.blade.php. Tokens come from
   css/design-system.css. Mobile-first: every media query is min-width.

   One card per shop, one up on phones, two on tablets, four from 1360px:
   name and address, the button that starts an order, then its map and
   opening times.
   ========================================================================== */

.dh-select-shop {
    background: var(--dh-surface-sunken);
    font-family: var(--dh-font);
    color: var(--dh-text-primary);
}

/* The design's narrower gutter, so four cards have room for their buttons.
   Scoped, so it outranks .dh-container's gutter whatever the load order. */
.dh-select-shop .dh-select-shop__inner {
    display: flex;
    flex-direction: column;
    gap: clamp(22px, 2.4vw, 32px);
    padding: clamp(56px, 6vw, 96px) clamp(20px, 3vw, 40px);
}

.dh-select-shop__head {
    display: flex;
    flex-direction: column;
    gap: 14px;
    text-align: center;
}

.dh-select-shop__title {
    margin: 0;
    font: var(--dh-weight-black) clamp(40px, 5.6vw, 84px)/1 var(--dh-font);
    letter-spacing: var(--dh-tracking-display);
    color: var(--dh-text-primary);
    text-wrap: balance;
}

.dh-select-shop__title span {
    color: var(--dh-text-brand);
}

/* A signed-in customer's balance, under the title. */
.dh-select-shop__points {
    margin: 0;
    font: var(--dh-weight-semibold) 17px/1.4 var(--dh-font);
    color: var(--dh-text-secondary);
}

/* The Monday closure, and the back office's loyalty promotion. */
.dh-select-shop__notice {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 18px clamp(18px, 2vw, 30px);
    background: var(--dh-red-50);
    border-radius: var(--dh-radius-card);
    font: var(--dh-weight-medium) 18px/1.4 var(--dh-font);
    color: var(--dh-text-primary);
}

.dh-select-shop__notice svg {
    flex: none;
    width: 28px;
    height: 28px;
    color: var(--dh-red-500);
}

/* Inherit: css/styles.css sizes every bare paragraph, and the promotion is
   the back office's own HTML. */
.dh-select-shop__notice p {
    margin: 0;
    font: inherit;
}

.dh-select-shop__empty {
    margin: 0;
    padding-block: clamp(24px, 4vw, 48px);
    text-align: center;
    font: var(--dh-weight-semibold) clamp(17px, 2vw, 21px)/1.5 var(--dh-font);
    color: var(--dh-text-secondary);
}

.dh-select-shop__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(16px, 1.6vw, 24px);
}

@media (min-width: 621px) {
    .dh-select-shop__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Four across from 1360px, not the design's 1181px: narrower cards than this
   cannot hold the order button's label on one line. */
@media (min-width: 1360px) {
    .dh-select-shop__grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

/* --------------------------------------------------------------------------
   Shop card
   -------------------------------------------------------------------------- */

/* Safe to lift on hover: the dialogs its buttons open are rendered outside
   it, so no transformed ancestor traps them. A container, so its buttons can
   size themselves to the card rather than the screen. */
.dh-outlet {
    container-type: inline-size;
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: clamp(22px, 2.2vw, 30px);
    background: var(--dh-surface-card);
    border: 1px solid var(--dh-border-subtle);
    border-radius: var(--dh-radius-card);
    box-shadow: var(--dh-shadow-card);
    transition: transform var(--dh-duration-base) var(--dh-ease),
    box-shadow var(--dh-duration-base) var(--dh-ease);
}

.dh-outlet:hover {
    transform: translateY(-2px);
    box-shadow: var(--dh-shadow-hover);
}

.dh-outlet p {
    margin: 0;
}

.dh-outlet__name {
    margin: 0;
    font: var(--dh-weight-black) clamp(30px, 2.6vw, 40px)/1.05 var(--dh-font);
    letter-spacing: var(--dh-tracking-display);
    color: var(--dh-text-brand);
}

/* Online orders paused from the shop's till. */
.dh-outlet__badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    align-self: flex-start;
    padding: 6px 12px;
    background: var(--dh-red-50);
    border-radius: var(--dh-radius-pill);
    font: var(--dh-weight-bold) 14px/1.2 var(--dh-font);
    color: var(--dh-red-600);
}

.dh-outlet__badge svg {
    flex: none;
    width: 16px;
    height: 16px;
}

.dh-outlet__address {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font: var(--dh-weight-regular) 17px/1.5 var(--dh-font);
    color: var(--dh-text-secondary);
}

.dh-outlet__address svg {
    flex: none;
    width: 22px;
    height: 22px;
    margin-top: 2px;
    color: var(--dh-red-500);
}

.dh-outlet__note {
    font: var(--dh-weight-bold) 15px/1.4 var(--dh-font);
    color: var(--dh-text-primary);
}

/* Pinned to the foot, so the buttons of cards side by side line up. On the
   narrowest phones the label wraps rather than overflow. */
.dh-outlet__order {
    min-height: 56px;
    margin-top: auto;
    padding: 8px;
    font-size: 16px;
    line-height: 1.2;
    text-transform: uppercase;
}

.dh-outlet__order svg {
    flex: none;
    width: 18px;
    height: 18px;
}

/* The card is white, where the header's white focus ring would vanish. */
.dh-outlet .dh-btn:focus-visible {
    outline-color: var(--dh-red-500);
}

/* Switched off in the back office: nothing to press, so it does not lift. */
.dh-outlet.is-unavailable:hover {
    transform: none;
    box-shadow: var(--dh-shadow-card);
}

/* Side by side while they fit, one per row where they would not. */
.dh-outlet__links {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.dh-outlet__link {
    display: inline-flex;
    flex: 1 1 auto;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 52px;
    padding: 0 10px;
    background: var(--dh-surface-card);
    border: 1px solid var(--dh-border-subtle);
    border-radius: var(--dh-radius-button);
    font: var(--dh-weight-semibold) 15px/1.2 var(--dh-font);
    color: var(--dh-text-brand);
    white-space: nowrap;
    cursor: pointer;
    transition: background-color var(--dh-duration-fast) var(--dh-ease),
    border-color var(--dh-duration-fast) var(--dh-ease),
    color var(--dh-duration-fast) var(--dh-ease);
}

.dh-outlet__link svg {
    flex: none;
    width: 18px;
    height: 18px;
}

/* Rules of their own: a browser without :focus-visible drops every selector
   in a list that names it, and would lose the hover tint with it. */
.dh-outlet__link:hover {
    background: var(--dh-red-50);
    border-color: var(--dh-red-500);
    color: var(--dh-red-600);
    text-decoration: none;
}

.dh-outlet__link:focus {
    outline: 2px solid var(--dh-red-500);
    outline-offset: 2px;
}

/* The tint for the keyboard only: the opening-times dialog hands focus back
   to its button when it closes, which left a mouse user's pick lit. */
.dh-outlet__link:focus-visible {
    background: var(--dh-red-50);
    border-color: var(--dh-red-500);
    color: var(--dh-red-600);
}

/* No ring after a mouse click; where :focus-visible is unknown this rule is
   dropped and every focus keeps the ring. */
.dh-outlet__link:focus:not(:focus-visible) {
    outline: none;
}

/* A card too narrow for the design's type (four across, a small phone):
   smaller labels keep the two buttons side by side. */
@container (max-width: 280px) {
    .dh-outlet__links {
        gap: 8px;
    }

    .dh-outlet__link {
        gap: 6px;
        padding: 0 6px;
        font-size: 14px;
    }

    .dh-outlet__link svg {
        width: 16px;
        height: 16px;
    }
}