/* ============================================================
   App-style design for the order page (order-new.php → order.php)
   Matches the Nikos Grill iPhone/Android apps: Nikos red, neutral
   greys, rounded cards with the photo on the right, and dark mode
   that follows the customer's device. Loaded after order.css and the
   admin theme vars; everything is scoped to body.app-skin.
   ============================================================ */

/* ── Tokens: light ─────────────────────────────────────────── */
body.app-skin {
    --primary: #CC1E29;
    --primary-dark: #B81421;
    --primary-light: rgba(204, 30, 41, .09);
    --primary-grad: linear-gradient(135deg, #DB2B33 0%, #B81421 100%);
    --accent: #17A34A;
    --bg: #F6F6F9;
    --card-bg: #FFFFFF;
    --gray-100: #F1F2F6;
    --gray-200: #E6E8EF;
    --gray-300: #D3D7E0;
    --gray-400: #A6ADBB;
    --gray-500: #6B7587;
    --gray-600: #556070;
    --gray-700: #3A4250;
    --gray-800: #1A1F2B;
    --gray-900: #11141B;
    --app-border: #E6E8EF;
    --app-text: #1A1F2B;
    --app-muted: #6B7587;
    --app-header: #1E1E22;
    --shadow-xs: 0 1px 3px rgba(0, 0, 0, .05);
    --shadow-sm: 0 3px 10px rgba(0, 0, 0, .06);
    --shadow-md: 0 6px 22px rgba(0, 0, 0, .08);
    --shadow-lg: 0 16px 44px rgba(0, 0, 0, .14);
    --shadow-card: 0 4px 18px rgba(0, 0, 0, .07);
    --shadow-hover: 0 10px 30px rgba(0, 0, 0, .11);
    --radius: 18px;
    --radius-sm: 12px;
    background: var(--bg);
    color: var(--app-text);
    color-scheme: light;
}

/* ── Tokens: dark (follows the device, like the apps) ─────── */
@media (prefers-color-scheme: dark) {
    body.app-skin {
        --primary: #F5454A;
        --primary-dark: #D92E38;
        --primary-light: rgba(245, 69, 74, .14);
        --primary-grad: linear-gradient(135deg, #FA5454 0%, #D92E38 100%);
        --accent: #45D173;
        --bg: #0E0E11;
        --card-bg: #1D1D21;
        --gray-100: #222227;
        --gray-200: #2B2B31;
        --gray-300: #3A3A42;
        --gray-400: #6E7180;
        --gray-500: #A1A6B3;
        --gray-600: #BFC3CC;
        --gray-700: #D9DCE2;
        --gray-800: #F0F1F4;
        --gray-900: #F5F5F7;
        --app-border: rgba(255, 255, 255, .10);
        --app-text: #F5F5F7;
        --app-muted: #A1A6B3;
        --app-header: #141417;
        --shadow-xs: none; --shadow-sm: none; --shadow-md: none;
        --shadow-card: none; --shadow-hover: none;
        --shadow-lg: 0 16px 44px rgba(0, 0, 0, .5);
        color-scheme: dark;
    }
}

/* ── Header: charcoal like the app splash, red accents ─────── */
body.app-skin .order-header {
    background: var(--app-header);
    background-image: none;
    box-shadow: 0 1px 0 rgba(255, 255, 255, .06);
}
body.app-skin .order-logo-icon { background: var(--primary-grad); box-shadow: none; }
body.app-skin .service-btn.active {
    background: var(--primary-grad);
    box-shadow: 0 4px 14px rgba(204, 30, 41, .35);
}
body.app-skin .header-search input {
    border-radius: 999px;
}

/* ── Category sidebar ──────────────────────────────────────── */
body.app-skin .category-sidebar {
    background: var(--bg);
    border-right: 1px solid var(--app-border);
}
body.app-skin .cat-nav-item { border-radius: 12px; color: var(--app-text); }
body.app-skin .cat-nav-item.active {
    background: var(--primary-light);
    color: var(--primary);
}

/* ── Menu sections: big bold headers like the app ──────────── */
body.app-skin .menu-section-title {
    color: var(--app-text);
    font-size: 1.45rem;
    font-weight: 800;
    letter-spacing: -.02em;
}
body.app-skin .menu-section::before { display: none; }
body.app-skin .menu-section-desc { color: var(--app-muted); }

/* ── Item cards: text left, photo right, red + on the photo ── */
body.app-skin .items-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
    gap: 12px;
}
body.app-skin .item-card {
    flex-direction: row-reverse;
    align-items: stretch;
    background: var(--card-bg);
    border: 1px solid var(--app-border);
    border-radius: 20px;
    box-shadow: var(--shadow-card);
    min-height: 120px;
    overflow: hidden;
    position: relative;
    transition: transform .18s cubic-bezier(.3, 1.4, .5, 1), box-shadow .18s ease;
}
body.app-skin .item-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-hover); }
body.app-skin .item-card:active { transform: scale(.98); }
body.app-skin .item-card .item-img {
    width: 112px;
    min-width: 112px;
    height: auto;
    min-height: 112px;
    margin: 12px 12px 12px 0;
    border-radius: 14px;
    overflow: hidden;
    align-self: center;
    aspect-ratio: 1 / 1;
    background: var(--gray-100);
}
body.app-skin .item-card .item-img img { border-radius: 14px; }
/* "⭐ Popular" sits small on the photo */
body.app-skin .item-card .item-badge {
    top: 6px; left: 6px;
    font-size: .62rem;
    padding: 2px 7px;
    background: var(--primary-grad);
}
body.app-skin .item-card .item-body {
    padding: 14px 6px 14px 16px;
    min-width: 0;
}
body.app-skin .item-card .item-name {
    color: var(--app-text);
    font-size: .98rem;
    font-weight: 800;
    letter-spacing: -.01em;
    text-transform: uppercase;
}
body.app-skin .item-card .item-desc {
    color: var(--app-muted);
    font-size: .82rem;
    -webkit-line-clamp: 2;
}
body.app-skin .item-card .item-price {
    color: var(--primary);
    font-weight: 800;
    font-size: 1.02rem;
}
/* Round red + in the photo's corner, like the app's add badge */
body.app-skin .item-card .btn-add-item {
    position: absolute;
    right: 18px;
    bottom: 18px;
    width: 34px; height: 34px;
    border-radius: 50%;
    background: var(--primary-grad);
    color: #fff;
    border: 2px solid var(--card-bg);
    box-shadow: 0 4px 12px rgba(204, 30, 41, .35);
    font-size: 1.15rem;
    z-index: 2;
}
body.app-skin .item-card.no-image .btn-add-item { right: 14px; bottom: 14px; }
body.app-skin .item-card.no-image .item-body { padding-right: 60px; }
body.app-skin .item-colored-tags { margin-top: 6px; }
body.app-skin .item-tag-colored { border-radius: 999px; font-weight: 600; }

/* ── Cart panel ────────────────────────────────────────────── */
body.app-skin .cart-panel {
    background: var(--bg);
    border-left: 1px solid var(--app-border);
}
body.app-skin .cart-header { background: transparent; border-bottom: none; color: var(--app-text); }
body.app-skin .cart-item {
    background: var(--card-bg);
    border: 1px solid var(--app-border);
    border-radius: 16px;
    margin: 0 12px 10px;
    padding: 12px 14px;
}
body.app-skin .cart-footer {
    background: var(--card-bg);
    border-top: 1px solid var(--app-border);
    border-radius: 22px 22px 0 0;
}
body.app-skin .btn-checkout,
body.app-skin .btn-add-to-cart,
body.app-skin .mobile-bar-btn {
    background: var(--primary-grad);
    border-radius: 16px;
    font-weight: 700;
    box-shadow: 0 8px 20px rgba(204, 30, 41, .28);
}
body.app-skin .btn-checkout:disabled { background: var(--gray-200); color: var(--app-muted); box-shadow: none; }
body.app-skin .cart-empty-icon { background: var(--primary-light); box-shadow: none; }

/* ── Item sheet (opens from the bottom like the app) ───────── */
body.app-skin .modal-sheet {
    background: var(--bg);
    border-radius: 26px 26px 0 0;
}
body.app-skin .modal-item-name { color: var(--app-text); font-weight: 800; }
body.app-skin .modal-item-desc { color: var(--app-muted); }
body.app-skin .modal-item-price { color: var(--primary); }
body.app-skin .option-set {
    background: var(--card-bg);
    border: 1px solid var(--app-border);
    border-radius: 16px;
}
body.app-skin .modal-note-input,
body.app-skin .modal-qty-controls {
    background: var(--card-bg);
    border: 1px solid var(--app-border);
    color: var(--app-text);
    border-radius: 14px;
}

/* ── Checkout ──────────────────────────────────────────────── */
body.app-skin .checkout-modal { background: var(--bg); }
body.app-skin .checkout-header { background: var(--bg); border-bottom: 1px solid var(--app-border); color: var(--app-text); }
body.app-skin .form-input,
body.app-skin .form-select,
body.app-skin textarea.form-input {
    background: var(--card-bg);
    border: 1px solid var(--app-border);
    border-radius: 14px;
    color: var(--app-text);
}
body.app-skin .form-input::placeholder { color: var(--gray-400); }
body.app-skin .form-input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-light); }
body.app-skin .form-label { color: var(--app-muted); font-weight: 600; }
body.app-skin .payment-option {
    background: var(--card-bg);
    border: 1.5px solid var(--app-border);
    border-radius: 16px;
}
body.app-skin .payment-option:has(input:checked) { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-light); }

/* ── Phones: full-width app cards, app-like spacing ────────── */
@media (max-width: 768px) {
    body.app-skin .items-grid { grid-template-columns: 1fr; gap: 10px; }
    body.app-skin .item-card .item-img { width: 96px; min-width: 96px; min-height: 96px; }
    body.app-skin .item-card .btn-add-item { right: 16px; bottom: 16px; width: 30px; height: 30px; font-size: 1rem; }
    body.app-skin .menu-section-title { font-size: 1.3rem; }
    body.app-skin .mobile-bar { background: var(--card-bg); border-top: 1px solid var(--app-border); }
}

/* ── Dark-mode fixes for parts order.css paints white ─────── */
@media (prefers-color-scheme: dark) {
    body.app-skin .item-card,
    body.app-skin .cart-item,
    body.app-skin .option-set,
    body.app-skin .payment-option,
    body.app-skin .ca-card,
    body.app-skin .auth-modal,
    body.app-skin .checkout-modal .card,
    body.app-skin .dash-panel { background: var(--card-bg); color: var(--app-text); }
    body.app-skin .item-tag-colored { filter: brightness(1.25); }
    body.app-skin img { color-scheme: normal; }
}

/* ── Neutral app colours where order.css hard-codes warm beige/white ── */
body.app-skin .category-sidebar,
body.app-skin .cart-panel,
body.app-skin .cart-header,
body.app-skin .cart-items { background: var(--bg); }
body.app-skin .cart-footer { background: var(--card-bg); }
body.app-skin .item-card.list-view:hover { background: var(--card-bg); }
body.app-skin .dashboard-tabs,
body.app-skin .dash-order-row,
body.app-skin .dash-addr-card,
body.app-skin .saved-addr-card,
body.app-skin .ca-card { background: var(--card-bg); color: var(--app-text); border-color: var(--app-border); }
body.app-skin .tracking-dot,
body.app-skin .tracking-step.pending .tracking-dot { background: var(--card-bg); }

/* Phones: show two lines of description, like the app */
@media (max-width: 768px) {
    body.app-skin .item-card .item-desc {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        font-size: .8rem;
        line-height: 1.4;
        margin-top: 2px;
    }
}

/* Dark: soften the coloured notice boxes so they don't glare */
@media (prefers-color-scheme: dark) {
    body.app-skin .min-order-notice,
    body.app-skin .loyalty-row,
    body.app-skin .closed-banner,
    body.app-skin .session-closed,
    body.app-skin .ca-badge { background: rgba(236, 201, 75, .14); color: #F6E05E; border-color: rgba(236, 201, 75, .35); }
    body.app-skin .session-open,
    body.app-skin .promo-msg-success { background: rgba(72, 187, 120, .16); color: #68D391; }
    body.app-skin .promo-msg-error,
    body.app-skin .option-set-meta .required-badge { background: rgba(245, 69, 74, .16); color: #FC8181; }
    body.app-skin .ca-close { background: var(--gray-200); color: var(--app-text); }
}

/* ── Item sheet: big photo like the app (order.css shrinks it to 40px on phones) ── */
@media (max-width: 500px) {
    body.app-skin .modal-item-img { height: 200px; }
}
body.app-skin .modal-item-img { background: var(--gray-100); }
body.app-skin .modal-item-allergy { border-radius: 10px !important; }
body.app-skin .modal-qty-btn { background: var(--card-bg); color: var(--app-text); border: 1px solid var(--app-border); box-shadow: none; }
body.app-skin .modal-qty-btn:hover { background: var(--primary-light); color: var(--primary); }

@media (prefers-color-scheme: dark) {
    /* order.php sets the allergy colours inline */
    body.app-skin .modal-item-allergy {
        background: rgba(237, 137, 54, .14) !important;
        border-color: rgba(237, 137, 54, .4) !important;
        color: #F6AD55 !important;
    }
    body.app-skin .modal-qty-btn { background: var(--gray-200); }
}

/* ── Everything order.css paints with var(--white)/#fff as a BACKGROUND ──
   (--white stays white because it's also the text colour on red buttons) */
body.app-skin { --border: var(--app-border); }
body.app-skin .option-item,
body.app-skin .opt-qty-dec,
body.app-skin .opt-qty-inc,
body.app-skin .qty-btn,
body.app-skin .svc-opt,
body.app-skin .timing-opt,
body.app-skin .checkout-steps,
body.app-skin .checkout-header,
body.app-skin .auth-modal,
body.app-skin .modal-sheet .modal-body,
body.app-skin .form-textarea,
body.app-skin .modal-note-input:focus {
    background: var(--card-bg);
    color: var(--app-text);
    border-color: var(--app-border);
}
body.app-skin .option-item { border-width: 1.5px; border-radius: 14px; }
body.app-skin .option-item:hover { background: var(--gray-100); border-color: var(--gray-300); }
body.app-skin .option-item.selected { background: var(--primary-light); border-color: var(--primary); }
body.app-skin .option-label { color: var(--app-text); }
body.app-skin .option-price { color: var(--app-muted); }
body.app-skin .option-check { border-color: var(--gray-300); }
body.app-skin .opt-qty-dec:hover,
body.app-skin .opt-qty-inc:hover,
body.app-skin .qty-btn:hover { background: var(--primary-light); color: var(--primary); }
body.app-skin .svc-opt.active, body.app-skin .svc-opt.selected,
body.app-skin .timing-opt.active, body.app-skin .timing-opt.selected {
    border-color: var(--primary);
    background: var(--primary-light);
}
body.app-skin .modal-qty-row { background: var(--card-bg); border: 1px solid var(--app-border); }
body.app-skin .modal-qty-label { color: var(--app-text); }
@media (prefers-color-scheme: dark) {
    body.app-skin .free-counter, body.app-skin .option-price.free-tag { color: #68D391; }
    body.app-skin .free-counter.used { color: var(--app-muted); }
}

/* ── Payment step: buttons stay put when switching Cash ↔ Card ──
   #sumup-card is an old placeholder (the card form mounts in
   #sumup-card-form on the next screen) with min-height:200px, which pushed
   Back / Pay Now down only when "Pay by Card" was selected. */
body.app-skin #sumup-card:empty { min-height: 0; margin: 0; }
body.app-skin .checkout-nav .btn-nav { min-height: 48px; }
/* Same big red main button for every payment (app style): green "Place Order"
   and the narrower "Pay Now" both fill the space next to Back. */
body.app-skin .checkout-nav .btn-place,
body.app-skin .checkout-nav .btn-next {
    flex: 1;
    background: var(--primary-grad);
    color: #fff;
    border-radius: 16px;
    font-weight: 700;
    box-shadow: 0 8px 20px rgba(204, 30, 41, .28);
}
body.app-skin .checkout-nav .btn-place:hover,
body.app-skin .checkout-nav .btn-next:hover { background: var(--primary-grad); filter: brightness(1.05); }
body.app-skin .checkout-nav .btn-back { border-radius: 16px; }

/* Apple Pay's button is black — on the dark background give it a 1px white
   edge so it doesn't disappear. (SumUp's SDK mounts it inside this container.) */
@media (prefers-color-scheme: dark) {
    body.app-skin #apple-pay-container > *,
    body.app-skin #apple-pay-container apple-pay-button,
    body.app-skin #apple-pay-container button {
        outline: 1px solid rgba(255, 255, 255, .9);
        outline-offset: 0;
        border-radius: 10px;
        overflow: hidden;
    }
}