/* PET SWAD customer pages: responsive, screenshot-led finishing layer.
   Existing PHP markup, cart state, payment selection and order actions stay intact. */
body.ps-page {
    --ps-green: #126437;
    --ps-green-soft: #eff8f0;
    --ps-orange: #f45b12;
    --ps-orange-soft: #fff4eb;
    --ps-ink: #171c25;
    --ps-muted: #687383;
    --ps-line: #eceef1;
    --ps-card-shadow: 0 5px 22px rgba(23, 28, 37, .055);
    background: #f7f7f5 !important;
    color: var(--ps-ink) !important;
    padding-bottom: calc(92px + env(safe-area-inset-bottom)) !important;
}

body.ps-page :is(.app, .app-container) {
    width: 100% !important;
    max-width: 1080px !important;
    min-height: 100dvh;
    margin-inline: auto !important;
    padding-bottom: calc(110px + env(safe-area-inset-bottom)) !important;
    background: #fff !important;
    box-shadow: 0 0 48px rgba(23, 28, 37, .045) !important;
}

body.ps-page :is(.top-header, .top-nav-bar, .app-header, .header) {
    position: relative;
    z-index: 2;
    background: #fff !important;
    border-color: var(--ps-line) !important;
    box-shadow: none !important;
}

body.ps-page :is(.section-header, .section-wrapper) { min-width: 0; }
body.ps-page :is(.section-header h2, .section-header h3) { letter-spacing: -.025em; }
body.ps-page :is(button, .btn, .action-tile, .method, .home-restaurant, .grid-card) {
    transition: box-shadow .18s ease, transform .18s ease, background-color .18s ease;
}
body.ps-page :is(button, a, input, select, textarea) { -webkit-tap-highlight-color: transparent; }
body.ps-page button { cursor: pointer; }
body.ps-page :is(button, a, input, select, textarea):focus-visible {
    outline: 3px solid rgba(244, 91, 18, .35) !important;
    outline-offset: 3px;
}

/* Persistent navigation is shared by all customer-facing pages. */
.ps-reference-nav {
    width: min(100%, 1080px) !important;
    padding: 9px 10px calc(9px + env(safe-area-inset-bottom)) !important;
    background: rgba(255,255,255,.96) !important;
    border-color: #eceef1 !important;
    box-shadow: 0 -8px 28px rgba(23,28,37,.07) !important;
}
.ps-reference-nav a { min-height: 48px; font-size: 11px; font-weight: 650; }
.ps-reference-nav a[aria-current] { color: var(--ps-orange) !important; }
.ps-reference-nav a[aria-current]:after { bottom: -5px; }
.ps-reference-nav svg { width: 22px; height: 22px; }

/* Home: featured restaurant, categories, discovery and item cards. */
body.ps-page-index .app { max-width: 1080px !important; }
body.ps-page-index .top-header {
    grid-template-columns: minmax(88px, 145px) minmax(0, 1fr) 38px !important;
    gap: clamp(8px, 2vw, 22px) !important;
    align-items: center !important;
    padding: 14px clamp(14px, 3vw, 30px) !important;
}
body.ps-page-index .top-header .brand { min-width: 0 !important; }
body.ps-page-index .top-header .brand-logo {
    width: min(132px, 32vw) !important;
    max-width: 100% !important;
    height: 42px !important;
}
body.ps-page-index .top-header .address-bar { min-width: 0 !important; }
body.ps-page-index .top-header .address-text { min-width: 0 !important; }
body.ps-page-index .banner-slider-wrapper { margin-inline: clamp(12px, 2.5vw, 26px); }
body.ps-page-index .banner-slides-track { border-radius: 22px; overflow: hidden; }
body.ps-page-index .section-header { padding-inline: clamp(14px, 2.5vw, 26px) !important; }
body.ps-page-index .category-scroll { padding-inline: clamp(14px, 2.5vw, 26px) !important; }
body.ps-page-index .home-restaurants {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: clamp(10px, 1.7vw, 18px) !important;
    padding-inline: clamp(14px, 2.5vw, 26px) !important;
}
body.ps-page-index .home-restaurant {
    min-width: 0 !important;
    border-radius: 18px !important;
    box-shadow: var(--ps-card-shadow) !important;
}
body.ps-page-index .dishes-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: clamp(10px, 1.7vw, 18px) !important;
    padding-inline: clamp(14px, 2.5vw, 26px) !important;
}
body.ps-page-index .grid-card {
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--ps-line) !important;
    border-radius: 18px !important;
    box-shadow: var(--ps-card-shadow) !important;
}
body.ps-page-index .grid-card-img { aspect-ratio: 1.28 !important; }
body.ps-page-index .grid-card-body { padding: 12px !important; }
body.ps-page-index .grid-card-bottom { gap: 8px; }
body.ps-page-index .cart-float-bar {
    left: 50% !important;
    width: min(calc(100% - 24px), 560px) !important;
    transform: translateX(-50%);
    bottom: calc(78px + env(safe-area-inset-bottom)) !important;
    border-radius: 18px !important;
    box-shadow: 0 8px 24px rgba(9, 68, 34, .22) !important;
}

/* Cart: clear item controls, totals and checkout action. */
.ps-page-cart .cart-header-row { align-items: center; gap: 12px; }
.ps-page-cart .cart-title { line-height: 1.2; }
.ps-page-cart .cart-items-container { display: grid; gap: 12px; }
.ps-page-cart .cart-card {
    display: flex;
    min-width: 0;
    align-items: center;
    box-shadow: var(--ps-card-shadow) !important;
}
.ps-page-cart .card-details { min-width: 0; }
.ps-page-cart .card-img-wrap { flex: 0 0 104px; overflow: hidden; }
.ps-page-cart .item-title-text, .ps-page-cart .item-desc-text { overflow-wrap: anywhere; }
.ps-page-cart .bottom-sticky-bar {
    left: 50% !important;
    width: min(calc(100% - 24px), 820px) !important;
    transform: translateX(-50%);
    bottom: calc(76px + env(safe-area-inset-bottom)) !important;
    border-radius: 18px !important;
    background: rgba(255,255,255,.97) !important;
    box-shadow: 0 5px 24px rgba(23,28,37,.14) !important;
}

/* Payment: accessible selected state, compact summary and steady pay action. */
body.ps-page-checkout { background: #f7f7f5 !important; padding-bottom: 0 !important; }
body.ps-page-checkout .app {
    max-width: 760px !important;
    padding: 14px clamp(14px, 3vw, 26px) 126px !important;
    background: #fff !important;
}
.ps-page-checkout .top { min-height: 64px; }
.ps-page-checkout .brand { text-align: center; }
.ps-page-checkout .ps-progress {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px !important;
    padding: 12px 0 !important;
}
.ps-page-checkout .ps-progress > span {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: 0;
    color: var(--ps-muted);
    text-align: center;
}
.ps-page-checkout .ps-progress > span.current { color: var(--ps-orange) !important; font-weight: 750; }
.ps-page-checkout .hero { padding: 22px 0 10px !important; }
.ps-page-checkout .hero h1 { font-size: clamp(25px, 5vw, 32px) !important; }
.ps-page-checkout .ps-payment-summary {
    border: 1px solid #ffe3cf !important;
    background: linear-gradient(110deg, #fff8f1, #fff) !important;
}
.ps-page-checkout .method {
    position: relative;
    border: 1px solid var(--ps-line) !important;
    background: #fff !important;
    box-shadow: var(--ps-card-shadow) !important;
}
.ps-page-checkout .method:hover { box-shadow: 0 8px 28px rgba(23,28,37,.09) !important; }
.ps-page-checkout .method.selected {
    border: 2px solid var(--ps-orange) !important;
    background: #fff8f3 !important;
}
.ps-page-checkout .radio { flex: 0 0 20px; }
.ps-page-checkout .upi-apps { display: flex; flex-wrap: wrap; justify-content: space-around; }
.ps-page-checkout .security { border-radius: 16px !important; }
.ps-page-checkout .bottom {
    position: fixed !important;
    left: 50% !important;
    width: min(calc(100% - 20px), 720px) !important;
    max-width: 720px !important;
    transform: translateX(-50%);
    bottom: calc(10px + env(safe-area-inset-bottom)) !important;
    padding: 12px 14px !important;
    border: 1px solid var(--ps-line) !important;
    border-radius: 18px !important;
    background: rgba(255,255,255,.98) !important;
    box-shadow: 0 8px 30px rgba(23,28,37,.14) !important;
}
.ps-page-checkout .pay { min-height: 50px !important; }

/* Profile, orders and tracking use the same cards, spacing and active states. */
.ps-page-profile .profile-hero, .ps-page-profile .quick-actions-card,
.ps-page-profile .saved-addresses-card, .ps-page-profile .order-card-noimg,
.ps-page-profile .stat-card-item, .ps-page-orders .order-card,
.ps-page-track :is(.info-card,.delivery-card,.timeline-card,.help-card) {
    border: 1px solid var(--ps-line) !important;
    box-shadow: var(--ps-card-shadow) !important;
}
.ps-page-profile .quick-stats-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ps-page-profile .stat-card-item { min-width: 0; }
.ps-page-profile .action-tile { min-width: 0; }
.ps-page-profile .action-tile:hover, .ps-page-orders .order-card:hover { background: #fffaf6; }
.ps-page-orders .order-card { min-width: 0; }
.ps-page-orders .card-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.ps-page-track .timeline-card, .ps-page-track .ps-order-items { overflow: hidden; }
.ps-page-track .ps-track-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }

@media (min-width: 700px) {
    body.ps-page :is(.app, .app-container) { padding-inline: clamp(18px, 3vw, 34px) !important; }
    body.ps-page-index .app { padding-inline: 0 !important; }
    body.ps-page-index .home-restaurants { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
    body.ps-page-index .dishes-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
    .ps-page-cart .cart-card { padding: 16px !important; }
    .ps-page-profile .actions-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (min-width: 1050px) {
    body.ps-page-index .home-restaurants { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
    body.ps-page-index .dishes-grid { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
    body.ps-page-index .section-header, body.ps-page-index .category-scroll,
    body.ps-page-index .home-restaurants, body.ps-page-index .dishes-grid { padding-inline: 30px !important; }
}
@media (max-width: 480px) {
    body.ps-page :is(.app, .app-container) { padding-bottom: calc(112px + env(safe-area-inset-bottom)) !important; }
    body.ps-page-index .top-header { height: auto !important; min-height: 0 !important; grid-template-columns: minmax(0,1fr) 38px !important; row-gap: 8px !important; }
    body.ps-page-index .top-header > .brand { grid-column: 1; grid-row: 1; }
    body.ps-page-index .top-header > .address-bar { grid-column: 1 / -1; grid-row: 2; width: 100% !important; }
    body.ps-page-index .top-header > .header-right { grid-column: 2; grid-row: 1; }
    body.ps-page-index .top-header .brand-logo { width: min(132px, 38vw) !important; }
    body.ps-page-index .home-restaurants { grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
    body.ps-page-index .dishes-grid { grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
    .ps-page-cart .cart-card { align-items: flex-start !important; padding: 10px !important; }
    .ps-page-cart .card-img-wrap { flex-basis: 88px !important; width: 88px !important; min-width: 88px !important; height: 96px !important; }
    .ps-page-cart .card-bottom-row { flex-wrap: wrap; gap: 8px; }
    .ps-page-profile .profile-hero-top { align-items: center; }
    .ps-page-profile .user-details { min-width: 0; }
    .ps-page-profile .user-name { overflow-wrap: anywhere; }
    .ps-page-track .ps-track-heading { align-items: flex-start; flex-direction: column; }
}
@media (max-width: 359px) {
    .ps-reference-nav { padding-inline: 2px !important; }
    .ps-reference-nav a { font-size: 10px; }
    .ps-page-checkout .bottom { gap: 8px !important; padding: 10px !important; }
    .ps-page-checkout .amount { min-width: 82px !important; }
    .ps-page-checkout .amount strong { font-size: 19px !important; }
}
@media (prefers-reduced-motion: reduce) {
    body.ps-page * { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* Cart and payment pages use their own checkout actions without the app tab bar. */
body.ps-page-cart, body.ps-page-checkout { padding-bottom: 0 !important; }
body.ps-page-cart .app { padding-bottom: calc(112px + env(safe-area-inset-bottom)) !important; }
body.ps-page-checkout .app { padding-bottom: calc(132px + env(safe-area-inset-bottom)) !important; }
body.ps-page-cart .ps-reference-nav, body.ps-page-checkout .ps-reference-nav { display: none !important; }
body.ps-page-cart .card-img-wrap img { object-fit: contain !important; object-position: center !important; padding: 5px !important; background: #fff !important; }
body.ps-page-cart .bottom-sticky-bar { bottom: calc(12px + env(safe-area-inset-bottom)) !important; }
body.ps-page-checkout .bottom { bottom: calc(12px + env(safe-area-inset-bottom)) !important; }