/* Loaded after the shared responsive/theme layers so mobile restaurant facts
 * keep their intended grid and telephone links remain individually usable. */
@media (max-width: 720px) {
    html body .food-app[data-page="home"][data-lang="en-US"] .food-heading p {
        font-size: 16px !important;
        font-weight: 500;
        line-height: 1.45;
    }

    html body .food-app[data-page="home"][data-lang="en-US"] .food-location-status {
        width: 100%;
        font-size: 14px !important;
        font-weight: 500;
        line-height: 1.45;
    }

    html body .food-app[data-page="home"][data-lang="en-US"] .food-address-picker label > span {
        font-size: 13px !important;
        font-weight: 600;
        line-height: 1.35;
    }

    html body .food-app[data-page="home"][data-lang="en-US"] :is(
        .food-address-picker select,
        .food-address-picker input,
        .food-mrt-trigger
    ) {
        font-weight: 500;
    }

    html body .food-app[data-page="home"][data-lang="en-US"] .food-mrt-trigger {
        font-size: 15px !important;
    }

    html body .food-app[data-page="home"][data-lang="en-US"] .food-filter span {
        font-size: 13px !important;
        font-weight: 600;
    }

    html body:not([data-ui-theme="dark"]) .food-app[data-page="home"][data-lang="en-US"] :is(
        .food-heading p,
        .food-location-status,
        .food-address-picker label > span,
        .food-filter span
    ) {
        color: #526783 !important;
    }

    html body .food-app[data-page="home"][data-lang="en-US"] .food-prompt-box {
        min-height: 126px !important;
        padding: 11px 12px !important;
        display: grid !important;
        grid-template-columns: 25px minmax(0, 1fr) !important;
        grid-template-rows: 46px 46px !important;
        gap: 9px 10px !important;
    }

    html body .food-app[data-page="home"][data-lang="en-US"] .food-prompt-box > img {
        align-self: center;
    }

    html body .food-app[data-page="home"][data-lang="en-US"] .food-prompt-box input {
        width: 100% !important;
        min-width: 0 !important;
        align-self: center;
        font-size: 16px !important;
        font-weight: 500;
    }

    html body .food-app[data-page="home"][data-lang="en-US"] .food-prompt-box input::placeholder {
        font-size: 15px;
        font-weight: 500;
        opacity: 1;
    }

    html body:not([data-ui-theme="dark"]) .food-app[data-page="home"][data-lang="en-US"] .food-prompt-box input::placeholder {
        color: #526783 !important;
    }

    html body .food-app[data-page="home"][data-lang="en-US"] .food-prompt-box button {
        width: 100% !important;
        min-width: 0 !important;
        grid-column: 1 / -1;
    }

    html body .food-app .food-mini-form {
        min-width: 0 !important;
        height: auto !important;
        min-height: 132px !important;
        overflow: visible !important;
    }

    html body .food-app .food-mini-form textarea {
        width: 100% !important;
        min-width: 0 !important;
        min-height: 54px !important;
        padding: 0 !important;
        overflow-wrap: anywhere !important;
        white-space: pre-wrap !important;
        font-size: clamp(13px, 3.7vw, 15px) !important;
        line-height: 1.45 !important;
    }

    html body .food-app .food-mini-form textarea::placeholder {
        white-space: pre-wrap !important;
        overflow-wrap: anywhere !important;
        opacity: 1 !important;
    }

    html body .food-app[data-page="home"] .food-address-street {
        grid-column: 1 / -1 !important;
        width: 100% !important;
    }

    html body .food-app[data-page="home"] .food-address-street input {
        width: 100% !important;
        min-width: 0 !important;
        padding-inline: 12px !important;
        box-sizing: border-box !important;
        font-size: 16px !important;
        text-overflow: ellipsis;
    }

    html body .food-app[data-page="home"][data-lang="en-US"] .food-address-street input::placeholder {
        font-size: 15px;
        font-weight: 500;
        opacity: 1;
    }

    html body:not([data-ui-theme="dark"]) .food-app[data-page="home"][data-lang="en-US"] .food-address-street input::placeholder {
        color: #526783 !important;
    }

    html body .food-app .food-restaurant-fact-line {
        grid-template-columns: max-content minmax(0, 1fr) !important;
        column-gap: 5px !important;
    }

    html body .food-app .food-restaurant-fact-line > b {
        min-width: 0 !important;
        white-space: nowrap !important;
        overflow-wrap: normal !important;
        word-break: keep-all !important;
    }

    html body .food-app .food-phone-values {
        min-width: 0;
        display: flex;
        align-items: flex-start;
        flex-direction: column;
        gap: 3px;
    }

    html body .food-app .food-phone-values > a {
        display: inline-block;
        white-space: nowrap;
        overflow-wrap: normal;
        word-break: keep-all;
    }

    html body .food-app .food-phone-separator {
        display: none;
    }
}

@media (max-width: 360px) {
    html body .food-app[data-page="home"][data-lang="en-US"] .food-prompt-box input::placeholder {
        font-size: 13px;
    }
}

/* Local food detail: keep the visit actions consistent with the dark shell. */
body[data-ui-theme="dark"] .food-app[data-page="detail"] .food-before-panel :is(.food-live-action, button[data-food-action]) {
    border-color: #34465c !important;
    background: #1a2635 !important;
    color: #dceaff !important;
    box-shadow: none !important;
}

body[data-ui-theme="dark"] .food-app[data-page="detail"] .food-before-panel :is(.food-live-action, button[data-food-action]):hover {
    border-color: #6198d9 !important;
    background: #20344b !important;
    color: #f2f7ff !important;
}

body[data-ui-theme="dark"] .food-app[data-page="detail"] .food-before-panel {
    border-color: #2f4055 !important;
    background: #151f2c !important;
    box-shadow: 0 8px 22px rgba(0, 0, 0, .15) !important;
}

body[data-ui-theme="dark"] .food-app[data-page="detail"] .food-before-panel h2 {
    border-bottom-color: #2f4055 !important;
}

body[data-ui-theme="dark"] .food-app[data-page="detail"] .food-live-action :is(img, b),
body[data-ui-theme="dark"] .food-app[data-page="detail"] .food-before-panel > button :is(img, b) {
    opacity: 1 !important;
    filter: brightness(1.25) saturate(.9) !important;
}

body[data-ui-theme="dark"] .food-app[data-page="detail"] .food-source-note {
    border-color: transparent !important;
    background: #111a26 !important;
    color: #b9cbe0 !important;
    box-shadow: none !important;
}

body[data-ui-theme="dark"] .food-app[data-page="detail"] .food-source-note img {
    opacity: 1 !important;
    filter: brightness(1.3) saturate(.9) !important;
}