/* ── Orders popovers (My Orders + Order Details)
   Two stacked centered panels behind one shared scrim. The list panel is
   the entry point; clicking a card slides the details panel over it. */

#ptOrdersScrim {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .55);
    z-index: 1050;
    opacity: 0;
    transition: opacity .18s ease;
}
#ptOrdersScrim.is-open { opacity: 1; }

.pt-orders-popover {
    position: fixed;
    inset: 0;
    z-index: 1051;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    pointer-events: none;
}
.pt-orders-popover > .pt-orders-popover-card {
    background: #f6f7fb;
    border-radius: 16px;
    width: 100%;
    max-width: 440px;
    max-height: calc(100vh - 32px);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 50px rgba(0, 0, 0, .25);
    transform: translateY(20px);
    opacity: 0;
    transition: opacity .18s ease, transform .18s ease;
    pointer-events: auto;
}
.pt-orders-popover.is-open > .pt-orders-popover-card {
    transform: translateY(0);
    opacity: 1;
}

.pt-orders-popover-body {
    overflow-y: auto;
    flex: 1;
    /* Thin, unobtrusive scrollbar + smooth/momentum scrolling. This is the actual
       scroll container for both the My Orders list and the Order Details body. */
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;                      /* Firefox */
    scrollbar-color: #c7c9d1 transparent;       /* Firefox: thumb / track */
}
/* WebKit / Blink (Chrome, Edge, Safari) — Firefox uses the properties above. */
.pt-orders-popover-body::-webkit-scrollbar {
    width: 6px;
}
.pt-orders-popover-body::-webkit-scrollbar-thumb {
    background: #c7c9d1;
    border-radius: 3px;
}
.pt-orders-popover-body::-webkit-scrollbar-thumb:hover {
    background: #a9acb6;
}
.pt-orders-popover-body::-webkit-scrollbar-track {
    background: transparent;
}

/* ── Orders list ── */

.pt-orders-pop-head,
.pt-orderd-pop-head {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px 16px;
    background: #fff;
    /* Sticky (not relative) so the header stays pinned to the top of the scrolling
       popover body while the list / details scroll underneath. sticky still establishes
       the containing block the absolutely-positioned close/back/refresh buttons need. */
    position: sticky;
    top: 0;
    z-index: 3;
    border-bottom: 1px solid #eef0f4;
}
.pt-orders-pop-head h2,
.pt-orderd-pop-head h2 {
    margin: 0;
    font-size: 1rem;
    color: #111;
    font-weight: 600;
}
.pt-orders-pop-close {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 32px; height: 32px;
    border: none; background: transparent; cursor: pointer;
    color: #4b5563;
    border-radius: 50%;
}
.pt-orders-pop-close:hover { background: #f3f4f6; }
.pt-orders-pop-close svg { width: 18px; height: 18px; }

.pt-orders-pop-msg {
    margin: 16px;
    padding: 12px 16px;
    border-radius: 8px;
    font-size: 0.875rem;
}
.pt-orders-pop-msg--error { background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; }

.pt-orders-pop-empty {
    text-align: center;
    padding: 48px 24px;
    color: #6b7280;
}
.pt-orders-pop-empty svg { width: 64px; height: 64px; margin-bottom: 12px; }
.pt-orders-pop-empty-title { margin: 0 0 4px; font-weight: 600; color: #111; }
.pt-orders-pop-empty-sub { margin: 0; font-size: 0.8125rem; }

.pt-orders-pop-list {
    list-style: none;
    padding: 12px;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.pt-order-card {
    background: #fff;
    border-radius: 12px;
    padding: 0;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: box-shadow .12s ease, transform .12s ease;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
}
.pt-order-card:hover,
.pt-order-card:focus-visible { box-shadow: 0 4px 12px rgba(0, 0, 0, .08); outline: none; }

.pt-order-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px 12px;
}
.pt-order-card-id { font-weight: 600; color: #111; font-size: 0.875rem; }
.pt-order-card-store {
    position: absolute;
    top: 14px; right: 16px;
    color: #6b7280;
    font-size: 0.6875rem;
    display: none;     /* shown by JS when there's enough room (kept hidden by default) */
}

.pt-order-status {
    padding: 5px 14px;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 500;
    white-space: nowrap;
    background: #137a4d;
    color: #fff;
}
.pt-order-status.is-pending   { background: #fef3c7; color: #92400e; }
.pt-order-status.is-completed { background: #dcfce7; color: #166534; }
.pt-order-status.is-cancelled { background: #fee2e2; color: #991b1b; }
.pt-order-status.is-active    { background: #137a4d; color: #fff; }

.pt-order-card-body {
    padding: 12px 16px 4px;
    border-top: 1px solid #eef0f4;
}
.pt-order-card-section {
    margin: 0 0 6px;
    color: #6b7280;
    font-size: 0.75rem;
}
.pt-order-card-items {
    list-style: none;
    padding: 0;
    margin: 0 0 12px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.pt-order-card-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.8125rem;
    color: #111;
}
.pt-order-card-item-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pt-order-card-item-qty { color: #6b7280; }
.pt-order-card-item--more { color: #6b7280; font-style: italic; padding-left: 22px; }

/* Free items redeemed with points, under the item list in an orders-popover card. */
.pt-order-card-rewards { list-style: none; padding: 0; margin: 6px 0 0; display: flex; flex-direction: column; gap: 4px; }
.pt-order-card-reward { display: flex; align-items: center; gap: 4px; color: #2c7a3a; font-weight: 600; font-size: 12px; }
.pt-order-card-reward .material-symbols-rounded { font-size: 14px; }
.pt-order-card-reward-txt { min-width: 0; }

.pt-order-card-meta {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px 12px;
    margin: 8px 0 12px;
}
.pt-order-card-meta-value {
    margin: 0;
    color: #111;
    font-size: 0.875rem;
    font-weight: 500;
}
.pt-order-card-cancel {
    margin: 8px 0 12px;
    padding: 6px 10px;
    background: #fef2f2;
    color: #991b1b;
    border-radius: 6px;
    font-size: 0.75rem;
}

.pt-order-card-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-top: 1px solid #eef0f4;
    background: #fff;
}
.pt-order-card-total { font-weight: 600; color: #111; font-size: 0.9375rem; }
.pt-order-card-invoice {
    background: #E21B22;
    color: #fff;
    padding: 8px 14px;
    border-radius: 6px;
    font-size: 0.8125rem;
    font-weight: 500;
    text-decoration: none;
}
.pt-order-card-invoice:hover { background: #c5161c; }

/* ── Veg / non-veg dot — matches FoodPanda / Swiggy convention.
       Outer square + centered inner circle. Green=veg, red=non-veg. */
.pt-veg {
    flex: 0 0 14px;
    width: 14px; height: 14px;
    border: 1.5px solid currentColor;
    border-radius: 2px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.pt-veg > span {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: currentColor;
    display: block;
}
.pt-veg--veg    { color: #2e7d32; }
.pt-veg--nonveg { color: #c62828; }

/* ── Order Details popover ── */

.pt-orderd-pop-head {
    justify-content: center;
}
.pt-orderd-pop-back,
.pt-orderd-pop-refresh {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 32px; height: 32px;
    border: none; background: transparent;
    color: #4b5563;
    cursor: pointer;
    border-radius: 50%;
}
.pt-orderd-pop-back { left: 12px; }
.pt-orderd-pop-refresh { right: 12px; }
.pt-orderd-pop-back:hover,
.pt-orderd-pop-refresh:hover { background: #f3f4f6; }
.pt-orderd-pop-back svg,
.pt-orderd-pop-refresh svg { width: 18px; height: 18px; }
.pt-orderd-pop-refresh.is-spinning svg { animation: pt-spin 0.6s linear infinite; }
@keyframes pt-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

.pt-orderd-pop-msg {
    margin: 16px;
    padding: 12px 16px;
    border-radius: 8px;
    font-size: 0.875rem;
}
.pt-orderd-pop-msg--error { background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; }

.pt-orderd-pop-body {
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.pt-orderd-card {
    background: #fff;
    border-radius: 12px;
    padding: 16px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
}

.pt-orderd-row { display: flex; align-items: flex-start; gap: 12px; }
.pt-orderd-row--head { justify-content: space-between; align-items: center; }
.pt-orderd-row--two { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.pt-orderd-row--two > div > .pt-orderd-label { margin-top: 0; }
.pt-orderd-id { font-weight: 600; color: #111; font-size: 0.875rem; }

.pt-orderd-sep {
    height: 1px;
    background: #eef0f4;
    margin: 12px 0;
}

.pt-orderd-ico {
    flex: 0 0 24px;
    color: #137a4d;
}
.pt-orderd-ico svg { width: 24px; height: 24px; }

.pt-orderd-addr {
    flex: 1;
    min-width: 0;
}
.pt-orderd-addr-label {
    margin: 0 0 4px;
    color: #6b7280;
    font-size: 0.75rem;
}
.pt-orderd-addr-store {
    margin: 0 0 4px;
    color: #111;
    font-weight: 600;
    font-size: 0.875rem;
}
.pt-orderd-addr-line {
    margin: 0;
    color: #4b5563;
    font-size: 0.8125rem;
}

.pt-orderd-label {
    margin: 0 0 4px;
    color: #6b7280;
    font-size: 0.75rem;
    display: flex;
    align-items: center;
    gap: 4px;
}
.pt-orderd-label-ico { width: 14px; height: 14px; }
.pt-orderd-value {
    margin: 0;
    color: #111;
    font-weight: 600;
    font-size: 0.875rem;
}

.pt-orderd-section-title {
    margin: 0 0 12px;
    color: #111;
    font-weight: 600;
    font-size: 0.875rem;
}
.pt-orderd-items {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.pt-orderd-item-head {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.875rem;
    color: #111;
}
.pt-orderd-item-name { flex: 1; min-width: 0; }
.pt-orderd-item-qty { color: #6b7280; }
.pt-orderd-item-mods {
    list-style: none;
    padding: 6px 0 0 22px;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.pt-orderd-item-mods li {
    font-size: 0.75rem;
    color: #6b7280;
}
.pt-orderd-item-mods-key { color: #6b7280; }
.pt-orderd-item-mods-val { color: #374151; }
.pt-orderd-item--empty { color: #6b7280; font-size: 0.8125rem; font-style: italic; }

/* Free items redeemed with points — sits under the item list in the order popover.
   Points-only: the item itself is a $0 line above, so no money is restated here. */
.pt-orderd-rewards {
    list-style: none;
    padding: 10px 0 0;
    margin: 10px 0 0;
    border-top: 1px dashed #e5e7eb;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.pt-orderd-reward { display: flex; flex-direction: column; }
.pt-orderd-reward-name { font-size: 13px; font-weight: 700; color: #111827; }
.pt-orderd-reward-caption { font-size: 12px; font-weight: 600; color: #2c7a3a; }

.pt-orderd-card--bill { padding: 0; overflow: hidden; }
.pt-orderd-bill-summary {
    width: 100%;
    background: transparent;
    border: none;
    text-align: left;
    cursor: pointer;
    padding: 14px 16px;
    display: flex;
    align-items: center;
    gap: 12px;
}
.pt-orderd-bill-summary:hover { background: #f9fafb; }
.pt-orderd-bill-ico {
    color: #b91c1c;
    flex: 0 0 28px;
}
.pt-orderd-bill-ico svg { width: 28px; height: 28px; }
.pt-orderd-bill-text {
    flex: 1;
    display: flex;
    flex-direction: column;
}
.pt-orderd-bill-text strong { color: #111; font-size: 0.875rem; }
.pt-orderd-bill-text span { color: #6b7280; font-size: 0.75rem; margin-top: 2px; }
.pt-orderd-bill-chev {
    color: #4b5563;
    flex: 0 0 20px;
    transition: transform .15s ease;
}
.pt-orderd-bill-chev svg { width: 20px; height: 20px; }
.pt-orderd-bill-summary[aria-expanded="true"] .pt-orderd-bill-chev { transform: rotate(180deg); }
.pt-orderd-bill-detail {
    padding: 0 16px 14px;
    border-top: 1px solid #eef0f4;
}
.pt-orderd-bill-row {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    font-size: 0.8125rem;
    color: #4b5563;
}
.pt-orderd-bill-row + .pt-orderd-bill-row { border-top: 1px dashed #eef0f4; }
.pt-orderd-bill-row--total {
    border-top: 1px solid #eef0f4 !important;
    margin-top: 4px;
    padding-top: 12px;
    color: #111;
    font-weight: 600;
    font-size: 0.875rem;
}

/* ── Loading state ── */
.pt-orders-popover-body.is-loading::before {
    content: "";
    display: block;
    width: 32px; height: 32px;
    border: 3px solid #e5e7eb;
    border-top-color: #137a4d;
    border-radius: 50%;
    margin: 48px auto;
    animation: pt-spin 0.7s linear infinite;
}

/* ── Saved Addresses popover ────────────────────────────────────────────── */

/* Fixed header + toolbar, only the address list scrolls. Scoped to the addresses
   popover so the shared orders shell is untouched. The shared card is already a
   flex column with a max-height; here we stop the OUTER body from scrolling and
   let the inner list scroll instead (one scrollbar, header/toolbar always visible). */
#ptAddressesPopoverBody {
    overflow: hidden;
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    padding: 0;
}
.pt-addr-pop {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

.pt-addr-pop-head,
.pt-addr-pop-toolbar {
    flex-shrink: 0;          /* never scroll away */
    background: #fff;
    z-index: 2;
}
.pt-addr-pop-toolbar { padding: 16px 16px 4px; }

.pt-addr-pop-head {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: #fff;
    position: relative;
    border-bottom: 1px solid #eef0f4;
}
.pt-addr-pop-head h2 {
    margin: 0;
    font-size: 1rem;
    color: #111;
    font-weight: 600;
}
.pt-addr-pop-close {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 32px; height: 32px;
    border: none; background: transparent; cursor: pointer;
    color: #4b5563;
    border-radius: 50%;
}
.pt-addr-pop-close:hover { background: #f3f4f6; }
.pt-addr-pop-close svg { width: 18px; height: 18px; }

.pt-addr-pop-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 12px 16px 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    /* Match the shared popover scrollbar so there's one consistent thin scrollbar. */
    scrollbar-width: thin;
    scrollbar-color: #c7c9d1 transparent;
}
.pt-addr-pop-body::-webkit-scrollbar { width: 6px; }
.pt-addr-pop-body::-webkit-scrollbar-thumb { background: #c7c9d1; border-radius: 3px; }
.pt-addr-pop-body::-webkit-scrollbar-thumb:hover { background: #a9acb6; }
.pt-addr-pop-body::-webkit-scrollbar-track { background: transparent; }

.pt-addr-pop-msg {
    padding: 12px 16px;
    border-radius: 8px;
    font-size: 0.875rem;
}
.pt-addr-pop-msg--error { background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; }

.pt-addr-pop-empty {
    text-align: center;
    padding: 32px 16px;
    color: #6b7280;
}
.pt-addr-pop-empty svg { width: 64px; height: 64px; margin-bottom: 12px; }
.pt-addr-pop-empty-title { margin: 0 0 4px; font-weight: 600; color: #111; }
.pt-addr-pop-empty-sub { margin: 0; font-size: 0.8125rem; }

/* "+ Add New Address" CTA — full-width red gradient pill, matches the design. */
.pt-addr-add {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 16px;
    border: none;
    border-radius: 12px;
    background: linear-gradient(90deg, #e21b22 0%, #b30b14 100%);
    color: #fff;
    font-size: 0.9375rem;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(226, 27, 34, .25);
    transition: transform .12s ease, box-shadow .12s ease;
}
.pt-addr-add:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 14px rgba(226, 27, 34, .30);
}
.pt-addr-add svg { width: 18px; height: 18px; }

.pt-addr-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.pt-addr-card {
    background: #fff;
    border-radius: 12px;
    padding: 14px 16px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
}
.pt-addr-card-title {
    margin: 0 0 6px;
    font-size: 0.9375rem;
    color: #111;
    font-weight: 600;
}
.pt-addr-card-line {
    margin: 0 0 12px;
    font-size: 0.8125rem;
    color: #6b7280;
    line-height: 1.45;
}
.pt-addr-card-foot {
    display: flex;
    align-items: center;
    gap: 8px;
}
.pt-addr-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    border-radius: 999px;
    background: #fff5f5;
    color: #e21b22;
    font-size: 0.8125rem;
    font-weight: 500;
    border: 1px solid #fad1d3;
    line-height: 1;
}
.pt-addr-chip svg { width: 14px; height: 14px; }

/* Delete chip — same red pill but icon-only and clickable. */
.pt-addr-chip--del {
    width: 28px;
    height: 28px;
    padding: 0;
    justify-content: center;
    cursor: pointer;
}
.pt-addr-chip--del:hover { background: #fee2e2; }
.pt-addr-chip--del:disabled { opacity: .5; cursor: progress; }
.pt-addr-chip--del svg { width: 14px; height: 14px; }

/* ── Mobile (≤425px): popovers go edge-to-edge, full-screen — app-like experience.
   Drop the scrim padding (kills the side margins + top/bottom gaps) and let the card
   fill the viewport with square corners. 100dvh tracks the *visible* viewport so the
   card isn't clipped by mobile browser chrome; 100vh is the fallback for older browsers. */
@media (max-width: 425px) {
    .pt-orders-popover {
        padding: 0;
    }
    .pt-orders-popover > .pt-orders-popover-card {
        width: 100vw;
        max-width: 100vw;
        height: 100vh;
        height: 100dvh;
        max-height: 100vh;
        max-height: 100dvh;
        margin: 0;
        border-radius: 0;
    }
}

/* ── Popover skeletons ───────────────────────────────────────────────────────
   Shown while a popover's partial fetch is in flight (My Orders / Order Details
   / Saved Addresses). Each skeleton reuses the real card chrome (.pt-order-card,
   .pt-orderd-card, .pt-addr-card) and drops shimmering .pt-skel boxes inside, so
   the placeholder matches the final layout. Shimmer primitives live in
   skeleton.css. */
.pt-order-card--skel,
.pt-addr-card--skel { cursor: default; }

/* My Orders list — line spacing inside the card body. */
.pt-order-card--skel .pt-order-card-body .pt-skel-line { margin-bottom: 10px; }
.pt-order-card--skel .pt-order-card-body .pt-skel-line:last-child { margin-bottom: 2px; }
.pt-skel-foot-btn { width: 118px; height: 34px; border-radius: 6px; }

/* Order Details — leading icon placeholder (address pin / bill icon). */
.pt-skel-detl-ico { flex: 0 0 24px; width: 24px; height: 24px; }

/* Saved Addresses — line spacing inside the card. */
.pt-addr-card--skel .pt-skel-line { margin-bottom: 10px; }
.pt-addr-card--skel .pt-addr-card-foot { margin-top: 2px; }