/* =============================================
   PandaEats — portal unify (load LAST)
   Forces customer / rider / admin onto one brand
   ============================================= */
:root {
    --forest: #0B3D2E;
    --emerald: #145C45;
    --leaf: #1F7A58;
    --moss: #2A8F68;
    --sage: #D7E8DF;
    --mist: #E8F1EC;
    --canvas: #EEF5F1;
    --ink: #102820;
    --muted: #5B7268;
    --danger: #C23B3B;
    --warn: #B87A12;
    --ok: #1F7A58;
    --font-display: "Fraunces", Georgia, serif;
    --font-body: "Sora", sans-serif;
    /* Legacy aliases used by old inline themes */
    --green: var(--emerald);
    --green-light: var(--leaf);
    --green-soft: var(--mist);
    --primary-color: var(--forest);
    --secondary-color: var(--leaf);
    --accent-color: var(--moss);
    --success-color: var(--leaf);
    --warning-color: var(--warn);
}

body.pe-body,
body.pe-admin,
body.pe-rider {
    font-family: var(--font-body) !important;
    color: var(--ink) !important;
}

body.pe-body h1,
body.pe-body h2,
body.pe-body h3,
body.pe-admin h1,
body.pe-admin h2,
body.pe-admin h3,
body.pe-rider h1,
body.pe-rider h2,
body.pe-rider h3,
body.pe-body .logo span,
body.pe-body .pe-brand-name {
    font-family: var(--font-display) !important;
    letter-spacing: -0.02em;
    color: var(--forest);
}

/* Shared page shell */
.pe-wrap,
.container.pe-wrap,
body.pe-body > .container {
    width: min(1100px, calc(100% - 32px));
    margin-left: auto;
    margin-right: auto;
}

/* Cards / panels */
body.pe-body .dashboard-card,
body.pe-body .order-item,
body.pe-body .order-card,
body.pe-body .feedback-card,
body.pe-body .stat-card,
body.pe-body .mobile-order-card,
body.pe-body .detail-card,
body.pe-body .tracking-card,
body.pe-body .customer-summary-box,
body.pe-body .orders-table,
body.pe-body .checkout-card,
body.pe-rider .order-card,
body.pe-rider .empty-state,
body.pe-rider .rider-nav-panel,
body.pe-admin .stat-card,
body.pe-admin .dashboard-card,
body.pe-admin .table-container,
body.pe-admin .content-card {
    background: linear-gradient(165deg, #ffffff, #f5faf7) !important;
    border: 1px solid rgba(20, 92, 69, 0.1) !important;
    border-radius: 18px !important;
    box-shadow: 0 14px 28px rgba(11, 61, 46, 0.1) !important;
}

/* Buttons */
body.pe-body .btn,
body.pe-body .action-btn,
body.pe-body .feedback-btn,
body.pe-body .track-btn,
body.pe-body button[type="submit"],
body.pe-rider .btn-action,
body.pe-rider .filter-btn,
body.pe-rider .btn-navigate,
body.pe-admin .btn,
body.pe-admin .add-btn,
body.pe-admin .action-btn {
    border-radius: 12px !important;
    font-weight: 700 !important;
    font-family: var(--font-body) !important;
}

body.pe-body .action-btn,
body.pe-body .track-btn,
body.pe-body .feedback-btn:not(.edit),
body.pe-rider .btn-deliver,
body.pe-rider .filter-btn.active,
body.pe-rider .filter-btn.available,
body.pe-rider .filter-btn.delivered {
    background: linear-gradient(145deg, var(--leaf), var(--forest)) !important;
    color: #fff !important;
    border: none !important;
}

body.pe-rider .filter-btn.pending { background: #c23b3b !important; color: #fff !important; }
body.pe-rider .filter-btn.out_for_delivery { background: #1f7a58 !important; color: #fff !important; }
body.pe-rider .filter-btn.my_orders,
body.pe-rider .btn-view,
body.pe-rider .btn-center-customer { background: var(--emerald) !important; color: #fff !important; }
body.pe-rider .filter-btn.all { background: #64748b !important; color: #fff !important; }
body.pe-rider .btn-pickup { background: var(--warn) !important; color: #fff !important; }

/* Status badges */
body.pe-body .status-badge,
body.pe-body .order-status-badge,
body.pe-rider .status-badge {
    border-radius: 999px !important;
    font-weight: 700 !important;
    letter-spacing: 0.02em;
}

/* Tables */
body.pe-body table,
body.pe-admin table {
    border-collapse: collapse;
    width: 100%;
}
body.pe-body th,
body.pe-admin th {
    background: var(--mist) !important;
    color: var(--forest) !important;
    font-weight: 700 !important;
}
body.pe-body td,
body.pe-admin td {
    border-color: rgba(20, 92, 69, 0.08) !important;
}

/* Hide duplicate legacy mobile footers when pe-mobile-nav is present */
body.pe-logged .mobile-footer-nav,
body.pe-logged .mobile-bottom-nav {
    display: none !important;
}

@media (max-width: 640px) {
    body.pe-logged {
        padding-bottom: 84px;
    }
    body.pe-logged .pe-mobile-nav {
        display: flex !important;
    }
    body.pe-logged .pe-topbar,
    body.pe-logged .topbar {
        display: none !important;
    }
}

/* Soften blue Flat-UI leftovers on admin stats */
body.pe-admin .stat-card i,
body.pe-admin .stat-icon {
    color: var(--leaf) !important;
}
body.pe-admin .spinner {
    border-top-color: var(--leaf) !important;
}

/* ——— Maps: never inherit 3D transforms (blank canvas) ——— */
body.pe-track,
body.pe-rider,
body.pe-admin {
    perspective: none !important;
}
.main-content:has(#riderMainNavMap),
.main-content:has(#map),
.rider-nav-map-wrap,
.map-shell,
.map-section,
.map-container,
#orderTrackingMap,
#riderMainNavMap,
#riderFullscreenMap,
body.pe-admin #map {
    transform: none !important;
    perspective: none !important;
    transform-style: flat !important;
}
.maplibregl-map,
.maplibregl-canvas-container,
.maplibregl-canvas,
.leaflet-container {
    transform: none !important;
    perspective: none !important;
}
#orderTrackingMap {
    width: 100%;
    min-height: 320px;
    height: 420px;
}
body.pe-admin .map-shell {
    min-height: 360px;
}
body.pe-admin #map {
    min-height: 360px;
}

/* Product photos: never apply 3D transforms (can blank or crop oddly) */
.food-tile img,
.food-tile-media img,
.food-card-media img,
.oh-card img,
.cart-item img,
.order-item img,
[data-pe-product-img="1"] {
    transform: none !important;
    perspective: none !important;
    max-width: none !important;
    object-fit: cover !important;
    object-position: center center;
    display: block !important;
}

/* Cart + checkout alignment */
body.pe-body .cart-container,
body.pe-body .checkout-container {
    display: grid !important;
    grid-template-columns: minmax(0, 1.55fr) minmax(260px, 0.85fr);
    gap: 18px;
    width: 100% !important;
    max-width: none !important;
    padding: 0 !important;
    box-sizing: border-box;
    align-items: start;
}
body.pe-body .cart-items,
body.pe-body .checkout-form,
body.pe-body .cart-summary,
body.pe-body .order-summary {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    box-sizing: border-box;
}
body.pe-body .cart-item {
    display: grid !important;
    grid-template-columns: 72px minmax(0, 1fr) auto auto auto;
    align-items: center !important;
    gap: 12px !important;
    flex-direction: unset !important;
    background: transparent !important;
    border: 0 !important;
    border-bottom: 1px solid rgba(20, 92, 69, 0.1) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 12px 0 !important;
    overflow: visible !important;
    transform: none !important;
}
body.pe-body .cart-item:last-child { border-bottom: 0 !important; }
body.pe-body .cart-item img,
body.pe-body .summary-item img {
    width: 72px !important;
    height: 72px !important;
    min-height: 72px !important;
    max-width: 72px !important;
    object-fit: cover !important;
    border-radius: 12px !important;
    flex-shrink: 0;
}
body.pe-body .summary-item img {
    width: 52px !important;
    height: 52px !important;
    min-height: 52px !important;
    max-width: 52px !important;
}
body.pe-body .item-details { min-width: 0; margin-left: 0 !important; }
body.pe-body .item-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
body.pe-body .item-total {
    min-width: 76px;
    text-align: right;
    font-variant-numeric: tabular-nums;
}
body.pe-body .remove-btn {
    margin-left: 0 !important;
    min-width: 36px;
    min-height: 36px;
    display: inline-grid;
    place-items: center;
}
body.pe-body .summary-row {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
}
body.pe-body .summary-item {
    display: grid !important;
    grid-template-columns: 52px minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px;
    justify-content: stretch !important;
}
body.pe-body .summary-item .item-name { white-space: normal; }
body.pe-body .summary-price {
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    text-align: right;
    white-space: nowrap;
}
body.pe-body a.checkout-btn,
body.pe-body .place-order-btn,
body.pe-body .cancel-order-btn {
    display: flex !important;
    width: 100% !important;
    box-sizing: border-box;
    justify-content: center;
    align-items: center;
    transform: none !important;
}
body.pe-body .cancel-order-btn {
    margin-top: 10px;
    min-height: 46px;
    background: #C23B3B !important;
    color: #fff !important;
    border-radius: 12px;
    text-decoration: none;
    font-weight: 800;
}
body.pe-body .checkout-form select {
    width: 100%;
    min-height: 44px;
    padding: 10px 12px;
    border: 1px solid rgba(20, 92, 69, 0.18);
    border-radius: 10px;
    font: inherit;
    background: #fff;
}
body.pe-body .payment-options {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    align-items: stretch;
}
body.pe-body .payment-option {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    min-height: 100%;
    box-sizing: border-box;
}
@media (max-width: 820px) {
    body.pe-body .cart-container,
    body.pe-body .checkout-container {
        grid-template-columns: 1fr;
    }
    body.pe-body .cart-item {
        grid-template-columns: 64px minmax(0, 1fr) auto;
        grid-template-rows: auto auto;
    }
    body.pe-body .cart-item img {
        grid-row: 1 / span 2;
        width: 64px !important;
        height: 64px !important;
        min-height: 64px !important;
        max-width: 64px !important;
    }
    body.pe-body .item-details { grid-column: 2; grid-row: 1; }
    body.pe-body .quantity-controls { grid-column: 2; grid-row: 2; justify-self: start; }
    body.pe-body .item-total { grid-column: 3; grid-row: 1; }
    body.pe-body .remove-btn { grid-column: 3; grid-row: 2; justify-self: end; }
    body.pe-body .payment-options { grid-template-columns: 1fr; }
    body.pe-logged .container { padding-bottom: 96px; }
}

/* Rider phone/tablet: keep last so dashboard is not squeezed by desktop sidebar */
@media (max-width: 1024px) {
    body.pe-rider {
        display: block !important;
        overflow-x: hidden !important;
    }
    body.pe-rider .sidebar {
        display: none !important;
    }
    body.pe-rider .main-content {
        margin-left: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 12px !important;
        padding-right: 12px !important;
        padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)) !important;
    }
    body.pe-rider .orders-grid {
        grid-template-columns: 1fr !important;
    }
    body.pe-rider .rider-mobile-top,
    body.pe-rider .rider-mobile-nav {
        display: flex !important;
    }
}