/* ═══════════════════════════════════════════════════════════════════
 * SLICE PIZZA — UX upgrade overrides (2026-05-14)
 * Loaded AFTER app.css and animations.css, so selectors here win the
 * cascade without modifying the 240KB original sheet.
 *
 * Goals:
 *   1. Tap targets ≥44px (Apple HIG) on add-to-cart buttons.
 *   2. iOS no-zoom inputs: font-size ≥16px on mobile.
 *   3. Compact header on mobile (171px → ~120px) without losing brand.
 *   4. Visible skip-link on keyboard focus.
 *   5. Brand-correct copy fallbacks (no "премиум/премиальная" residue).
 * ═══════════════════════════════════════════════════════════════════ */

/* ── 1. TAP TARGETS — pricing CTAs ───────────────────────────────── */

/* Salon variant: «+540 ₽» button on each product card */
.salon-add-btn {
    min-height: 44px;
    padding: 10px 16px;
    font-size: 14px;
    font-weight: 600;
    gap: 8px;
}
.salon-add-plus { font-size: 18px; line-height: 1; font-weight: 700; }
.salon-add-price { font-size: 14px; }
.product-card--salon .salon-add-btn {
    margin-top: 12px;
    padding: 12px 0;
    font-size: 14px;
    min-height: 44px;
}

/* Drinkit pill variant — keep visual identity but enlarge hit area */
.dk-card__price-pill {
    min-height: 36px;
    padding: 8px 14px;
    font-size: 0.875rem;
}
/* Compact 3-col grid: smaller cards, but pill still ≥36px tap target */
.dk-card--compact .dk-card__price-pill {
    min-height: 36px;
    padding: 8px 12px;
    font-size: 0.8rem;
}
.dk-card--featured .dk-card__price-pill { min-height: 44px; padding: 11px 18px; font-size: 0.95rem; }

/* Body.dk .add-btn (highest specificity in app.css line ~8430) */
body.dk .add-btn,
body.dk .pd-add {
    min-height: 44px;
    padding: 11px 18px;
    font-size: 14px;
    font-weight: 600;
}

/* Generic +XXX ₽ chip used in addon picker */
.dk-chip {
    min-height: 40px;
    padding: 8px 14px;
}

/* ── 2. iOS NO-ZOOM INPUTS ───────────────────────────────────────── */
/* Safari triggers viewport zoom on focus when input font-size < 16px.
   Apply to all touch-input controls. */
@media (max-width: 768px) {
    .dk-search-input,
    .search-input,
    .form-input,
    .promo-input,
    .dc-input,
    #ai-input,
    input[type="text"],
    input[type="search"],
    input[type="tel"],
    input[type="email"],
    input[type="number"],
    textarea,
    select {
        font-size: 16px;
    }
}

/* ── 3. COMPACT HEADER ON MOBILE ─────────────────────────────────── */
@media (max-width: 640px) {
    .dk-header {
        padding: 8px 14px 8px;
    }
    /* Tighten the brand row, drop the tagline on small screens */
    .dk-brand-row {
        padding: 6px 0 0;
        gap: 8px;
    }
    .dk-brand { font-size: 22px; }
    .dk-brand-sub { display: none; }

    .dk-search { margin-top: 10px; }
    .dk-search-input { height: 44px; }

    .dk-address { padding: 7px 10px; }
    .dk-address-label { font-size: 10.5px; }
    .dk-address-value { font-size: 13.5px; }

    /* Category-nav sticky position depends on header height — pull it up */
    body.dk .category-nav { top: 120px; }
}

/* ── 4. SKIP LINK — visible on focus ─────────────────────────────── */
.sr-only:focus,
.sr-only:focus-visible {
    position: fixed;
    top: 8px;
    left: 8px;
    width: auto;
    height: auto;
    margin: 0;
    padding: 12px 18px;
    overflow: visible;
    clip: auto;
    background: var(--rose, #C2406A);
    color: #fff;
    font-weight: 600;
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0,0,0,.25);
    z-index: 10000;
    text-decoration: none;
}

/* ── 5. H1 STYLING (hero logo) ───────────────────────────────────── */
/* When index.html promotes the hero SLICE logo to <h1>, this keeps the
   visual appearance identical to the previous <span class="dk-brand">. */
h1.dk-brand {
    margin: 0;
    font-size: 26px;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--ink);
    line-height: 1;
}
@media (max-width: 640px) {
    h1.dk-brand { font-size: 22px; }
}

/* ── 6. DELIVERY ZONE MODAL — replace 📍 emoji with svg pin ───────── */
.dz-place-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 8px 0;
}
.dz-place-row svg { color: var(--rose, #C2406A); flex-shrink: 0; }

/* ── 7. DRINKIT POLISH ───────────────────────────────────────────── */

/* Section-head salon: tighter spacing on mobile, more breathing room on desktop */
@media (max-width: 640px) {
    .salon-section-head {
        padding-top: 20px;
        padding-bottom: 12px;
    }
    .salon-section-head-title {
        font-size: clamp(2rem, 8vw, 2.5rem);
        line-height: 1;
    }
    .salon-section-head-num {
        font-size: 0.7rem;
    }
}

/* Menu-section spacing — kill the air, Drinkit is dense */
@media (max-width: 640px) {
    .menu-section {
        margin-bottom: 20px;
    }
    .menu-section-hero {
        margin-bottom: 12px;
        border-radius: 0 0 20px 20px;
    }
}

/* Product-card price block — make it visible & balanced on dk-card--compact.
   The compact cards have title + pill in a row; ensure pill doesn't overflow. */
.dk-card--compact .dk-card__price-pill {
    white-space: nowrap;
    flex-shrink: 0;
}

/* Tabbar polish — slightly more comfortable tap targets */
@media (max-width: 640px) {
    .dk-tab {
        padding: 10px 4px 8px;
        gap: 4px;
    }
    .dk-tab-label {
        font-size: 10.5px;
    }
}

/* Pay-chip: ensure clear separation from tabbar */
.dk-pay-chip {
    bottom: calc(var(--tab-h, 56px) + var(--safe-bottom, 0px) + 16px);
}
.dk-pay-chip__inner {
    min-height: 52px;
    padding: 12px 18px;
    border-radius: 16px;
    box-shadow: 0 8px 28px rgba(194, 64, 106, 0.25);
}

/* Footer compact on mobile — Drinkit hides legal weight on phone */
@media (max-width: 640px) {
    .site-footer {
        padding: 18px 16px calc(80px + env(safe-area-inset-bottom, 0px));
        font-size: 12px;
    }
    .footer-business { gap: 4px; }
    .footer-brand { font-size: 20px; }
    .footer-entity,
    .footer-address,
    .footer-phone { font-size: 11.5px; line-height: 1.5; }
    .footer-seo-text {
        font-size: 11px;
        line-height: 1.55;
        margin-top: 12px;
        opacity: 0.78;
    }
    .footer-last-updated { font-size: 10.5px; opacity: 0.5; }
    .footer-links { gap: 12px; flex-wrap: wrap; }
}

/* Call button — slimmer on mobile, doesn't compete with pay-chip */
@media (max-width: 640px) {
    .call-btn {
        padding: 10px 14px;
        font-size: 0.78rem;
    }
}

/* Category nav chips — tighter, more drinkit */
@media (max-width: 640px) {
    .cat-pill {
        padding: 8px 12px;
        font-size: 13px;
        min-height: 36px;
    }
}

/* ── 8. PRODUCT CARD — bigger image, cleaner footer ─────────────── */
.product-card {
    transition: transform 0.25s var(--ease-spring, cubic-bezier(.5,1.6,.4,1));
}
@media (hover: hover) {
    .product-card:hover:not(.zoom-pressed) {
        transform: translateY(-2px);
    }
}

/* Day-off banner — keep its position, but ensure it doesn't push hero down too far */
.day-off-banner {
    font-size: 13px;
}
@media (max-width: 640px) {
    .day-off-banner { font-size: 12.5px; padding: 8px 14px; }
}

/* ═══════════════════════════════════════════════════════════════════
 * Sprint 42 — Login modal + Orders history modal
 * ═══════════════════════════════════════════════════════════════════ */

/* ── LOGIN MODAL ─────────────────────────────────────────────────── */
.modal-sheet--login { max-width: 440px; }
.login-body { padding: 0 20px 24px; display: flex; flex-direction: column; gap: 14px; }
.login-hint {
    margin: 0;
    color: var(--ink-muted);
    font-size: 14px;
    line-height: 1.5;
}
.login-step { display: flex; flex-direction: column; gap: 10px; }
.login-step .field-label {
    font-size: 13px;
    color: var(--ink-muted);
    font-weight: 500;
}
.login-step .form-input { font-size: 16px; height: 48px; }
.login-code-input {
    text-align: center;
    letter-spacing: 0.5em;
    font-size: 24px !important;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}
.login-phone-display {
    font-size: 13px;
    color: var(--ink-muted);
    margin: 0;
}
.login-step .btn-primary { min-height: 48px; }
.login-step .btn-ghost {
    background: transparent;
    color: var(--ink-muted);
    border: 1px solid var(--border-light);
    min-height: 44px;
    border-radius: 12px;
    cursor: pointer;
    font-family: inherit;
    font-size: 14px;
    transition: background .15s ease;
}
.login-step .btn-ghost:hover { background: var(--bg-deep); }
.login-error {
    background: rgba(194, 64, 106, 0.1);
    border: 1px solid rgba(194, 64, 106, 0.3);
    color: var(--rose, #C2406A);
    padding: 10px 14px;
    border-radius: 10px;
    font-size: 14px;
}

/* ── ORDERS MODAL ────────────────────────────────────────────────── */
.orders-modal-body {
    padding: 16px 20px 80px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    overflow-y: auto;
}
.orders-loading {
    text-align: center;
    padding: 60px 20px;
    color: var(--ink-muted);
    font-size: 14px;
}
.orders-empty {
    text-align: center;
    padding: 60px 20px 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
}
.orders-empty h3 {
    margin: 0;
    font-size: 22px;
    color: var(--ink);
}
.orders-empty p {
    margin: 0;
    color: var(--ink-muted);
    font-size: 14px;
}
.orders-empty .btn-primary { min-height: 48px; padding: 0 24px; }
.orders-empty--guest .btn-primary {
    background: var(--rose, #C2406A);
    color: #fff;
}

.orders-card {
    background: var(--card, #fff);
    border-radius: 16px;
    padding: 14px 16px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 0 0 1px rgba(0,0,0,0.04);
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.orders-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}
.orders-card-meta { display: flex; flex-direction: column; gap: 2px; }
.orders-card-num {
    font-family: var(--font-mono, monospace);
    font-size: 13px;
    color: var(--ink-muted);
    font-weight: 600;
}
.orders-card-date {
    font-size: 12px;
    color: var(--ink-muted);
}
.orders-card-items {
    margin: 0;
    color: var(--ink);
    font-size: 14px;
    line-height: 1.5;
}
.orders-card-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-top: 6px;
    border-top: 1px solid var(--border-light);
}
.orders-card-total {
    font-weight: 700;
    font-size: 16px;
    color: var(--ink);
    font-variant-numeric: tabular-nums;
}
.orders-card-repeat {
    min-height: 36px;
    padding: 8px 14px;
    border-radius: 999px;
    background: var(--rose, #C2406A);
    color: #fff;
    border: 0;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: transform .15s ease, background .15s ease;
}
.orders-card-repeat:active { transform: scale(.96); }
.orders-card-repeat:hover { background: #8A2040; }

.orders-badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: lowercase;
    flex-shrink: 0;
}
.orders-badge.badge-new        { background: rgba(124,155,92,0.15); color: #5a7a3a; }
.orders-badge.badge-cooking    { background: rgba(255,182,39,0.18); color: #8a6210; }
.orders-badge.badge-delivering { background: rgba(50,140,200,0.15); color: #1e5e85; }
.orders-badge.badge-done       { background: rgba(120,120,120,0.12); color: #555; }
.orders-badge.badge-cancelled  { background: rgba(194,64,106,0.12); color: var(--rose, #C2406A); }
.orders-badge.badge-neutral    { background: rgba(120,120,120,0.10); color: #666; }

[data-theme="dark"] .orders-card { background: var(--card-dark, #1f1820); }
[data-theme="dark"] .orders-empty p,
[data-theme="dark"] .orders-card-date,
[data-theme="dark"] .orders-card-num { color: rgba(255,255,255,0.6); }