/* Delivery workspace aligned with the online-store management pages. */
.online-delivery-page {
    --delivery-red: #dc2638;
    --delivery-ink: #29232a;
    --delivery-muted: #79727a;
    --delivery-border: #e5d9dc;
    --delivery-shadow-sm: 0 2px 4px #47252d12, 0 7px 18px #47252d0d;
    --delivery-shadow-md: 0 3px 7px #47252d16, 0 14px 32px #47252d10;
}

.online-delivery-page .main-content {
    color: var(--delivery-ink);
    background: linear-gradient(145deg, #fbf9fa 0%, #f8f5f6 100%);
}

.online-delivery-page .delivery-page-header {
    position: relative;
    isolation: isolate;
    margin-bottom: 22px;
    padding: 16px 18px;
    overflow: hidden;
    border: 1px solid #e3d3d7;
    border-radius: 16px;
    background: linear-gradient(110deg, #fff 0%, #fff8f9 100%);
    box-shadow: inset 0 1px 0 #fff, var(--delivery-shadow-md);
}

.online-delivery-page .delivery-page-header::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    background: var(--delivery-red);
}

.online-delivery-page .delivery-page-header::after {
    content: "";
    position: absolute;
    z-index: -1;
    top: -85px;
    right: -55px;
    width: 190px;
    height: 190px;
    border-radius: 50%;
    background: radial-gradient(circle, #dc263810 0%, #dc263800 70%);
}

.online-delivery-page .delivery-page-title {
    display: flex;
    align-items: center;
    gap: 13px;
    min-width: 0;
}

.online-delivery-page .delivery-page-title__icon {
    display: grid;
    place-items: center;
    flex: 0 0 48px;
    width: 48px;
    height: 48px;
    color: #fff;
    background: linear-gradient(145deg, #ed3348, #cc172a);
    border-radius: 13px;
    box-shadow: 0 7px 16px #dc26382c;
    font-size: 1.25rem;
    transform: rotate(-3deg);
}

.online-delivery-page .online-header h2 {
    margin: 0;
    color: var(--delivery-ink);
    font-size: clamp(1.3rem, 2.1vw, 1.85rem);
    line-height: 1.3;
    letter-spacing: -.025em;
}

.online-delivery-page .online-header p {
    margin-top: 3px;
    color: var(--delivery-muted);
    font-size: .875rem;
}

.online-delivery-page .delivery-page-header .online-header__links {
    position: relative;
    z-index: 1;
}

.online-delivery-page .btn,
.online-delivery-page .delivery-tab,
.online-delivery-page #jobs button,
.online-delivery-page #jobs .actions a,
.online-delivery-page #jobs select {
    min-height: 40px;
    padding: 9px 14px;
    color: #554b52;
    background: linear-gradient(180deg, #fff 0%, #fdfafb 100%);
    border: 1px solid #dfd0d4;
    border-radius: 10px;
    box-shadow: 0 2px 4px #47252d12, 0 6px 14px #47252d0c;
    font: 600 .875rem/1.45 'Sarabun', sans-serif;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background-color .18s ease;
}

.online-delivery-page .delivery-page-header .btn { min-height: 42px; padding-inline: 15px; }
.online-delivery-page :is(.btn, .delivery-tab, #jobs button, #jobs .actions a):not(:disabled):hover { transform: translateY(-2px); border-color: #e88d98; box-shadow: 0 4px 8px #47252d18, 0 11px 22px #47252d14; }
.online-delivery-page :is(.btn, .delivery-tab, #jobs button, #jobs .actions a):not(:disabled):active { transform: translateY(0); box-shadow: 0 1px 3px #47252d1c; }
.online-delivery-page :is(button, a, select):focus-visible { outline: 3px solid var(--delivery-red); outline-offset: 3px; }
.online-delivery-page button { cursor: pointer; }
.online-delivery-page button:disabled { opacity: .55; cursor: wait; }

.online-delivery-page .delivery-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin-bottom: 14px;
}

.online-delivery-page .delivery-tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    padding-inline: 17px;
}

.online-delivery-page .delivery-tab.active,
.online-delivery-page #jobs button.primary {
    color: #fff;
    background: linear-gradient(145deg, #eb3044, #cf192c);
    border-color: #c91428;
    box-shadow: 0 3px 6px #7d1e2b20, 0 8px 18px #dc263826;
}

.online-delivery-page #message {
    margin: 0 0 18px;
    padding: 12px 16px;
    color: #9e3544;
    background: #fff1f3;
    border: 1px solid #f1c8ce;
    border-radius: 10px;
    font-size: .875rem;
    overflow-wrap: anywhere;
}

.online-delivery-page #message.error { color: #991b1b; background: #fee2e2; border-color: #fca5a5; }

.online-delivery-page .delivery-jobs {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr));
    align-items: start;
    gap: 18px;
}

.online-delivery-page #jobs article {
    position: relative;
    min-width: 0;
    margin: 0;
    padding: 19px;
    overflow: hidden;
    color: var(--delivery-ink);
    background: #fff;
    border: 1px solid #e2d5d8;
    border-radius: 17px;
    box-shadow: inset 0 1px 0 #fff, var(--delivery-shadow-md);
}

.online-delivery-page #jobs article::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 3px;
    background: linear-gradient(90deg, var(--delivery-red), #f27a87);
}

.online-delivery-page #jobs article h2 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 0 0 14px;
    color: var(--delivery-ink);
    font-size: 1.15rem;
    overflow-wrap: anywhere;
}

.online-delivery-page #jobs article p {
    margin: 10px 0;
    color: var(--delivery-muted);
    font-size: .875rem;
    line-height: 1.7;
    overflow-wrap: anywhere;
}

.online-delivery-page #jobs article p b { color: var(--delivery-ink); font-size: .9375rem; }
.online-delivery-page #jobs article p.error { padding: 9px 11px; color: #991b1b; background: #fee2e2; border-radius: 8px; }

.online-delivery-page #jobs .badge {
    flex-shrink: 0;
    padding: 5px 9px;
    color: #b21e30;
    background: #fff0f2;
    border-radius: 7px;
    font-size: .8125rem;
    font-weight: 600;
    white-space: nowrap;
}

.online-delivery-page #jobs .amounts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: 14px;
    padding: 13px;
    color: #665b61;
    background: #fcfafb;
    border: 1px solid var(--delivery-border);
    border-radius: 10px;
    font-size: .875rem;
}

.online-delivery-page #jobs .amounts span:last-child { color: #16803e; font-weight: 700; text-align: right; }

.online-delivery-page #jobs .actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 9px;
    margin-top: 14px;
}

.online-delivery-page #jobs .actions a { display: inline-flex; align-items: center; justify-content: center; color: #9e3544; text-decoration: none; }
.online-delivery-page #jobs .assign { display: flex; align-items: center; gap: 9px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--delivery-border); }
.online-delivery-page #jobs .assign select { flex: 1; min-width: 180px; cursor: pointer; }

.online-delivery-page #jobs .empty {
    grid-column: 1 / -1;
    margin: 0;
    padding: 48px 20px;
    color: var(--delivery-muted);
    background: #fff;
    border: 1px solid #e2d5d8;
    border-radius: 17px;
    box-shadow: inset 0 1px 0 #fff, var(--delivery-shadow-md);
    text-align: center;
}

.online-delivery-page [hidden] { display: none !important; }

html[data-theme="dark"] .online-delivery-page .main-content { color: #e5e7eb; background: #111827; }
html[data-theme="dark"] .online-delivery-page :is(.delivery-page-header, #jobs article, #jobs .empty) { color: #e5e7eb; background: #172033; border-color: #334155; box-shadow: none; }
html[data-theme="dark"] .online-delivery-page .delivery-page-header { background: linear-gradient(110deg, #172033 0%, #211923 100%); }
html[data-theme="dark"] .online-delivery-page :is(.online-header h2, #jobs article h2, #jobs article p b) { color: #f8fafc; }
html[data-theme="dark"] .online-delivery-page :is(.online-header p, #jobs article p, #jobs .empty) { color: #94a3b8; }
html[data-theme="dark"] .online-delivery-page :is(.btn, .delivery-tab, #jobs button, #jobs .actions a, #jobs select) { color: #e2e8f0; background: #1e293b; border-color: #475569; box-shadow: none; }
html[data-theme="dark"] .online-delivery-page :is(.delivery-tab.active, #jobs button.primary) { color: #fff; background: linear-gradient(145deg, #eb3044, #cf192c); border-color: #f43f5e; }
html[data-theme="dark"] .online-delivery-page #message { color: #fecdd3; background: #3f171c; border-color: #7f1d1d; }
html[data-theme="dark"] .online-delivery-page #jobs .amounts { color: #cbd5e1; background: #111827; border-color: #334155; }
html[data-theme="dark"] .online-delivery-page #jobs .assign { border-color: #334155; }

@media (max-width: 700px) {
    .online-delivery-page .delivery-page-header { padding: 13px; }
    .online-delivery-page .delivery-page-title__icon { flex-basis: 42px; width: 42px; height: 42px; border-radius: 11px; font-size: 1.08rem; }
    .online-delivery-page .delivery-page-header .online-header__links { width: 100%; }
    .online-delivery-page .delivery-page-header .online-header__links .btn { flex: 1; justify-content: center; }
    .online-delivery-page .delivery-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .online-delivery-page .delivery-tab:only-child { grid-column: 1 / -1; }
}

@media (max-width: 480px) {
    .online-delivery-page .delivery-tabs { grid-template-columns: minmax(0, 1fr); }
    .online-delivery-page #jobs article { padding: 16px; }
    .online-delivery-page #jobs article h2 { align-items: flex-start; flex-direction: column; }
    .online-delivery-page #jobs .amounts { grid-template-columns: minmax(0, 1fr); }
    .online-delivery-page #jobs .amounts span:last-child { text-align: left; }
    .online-delivery-page #jobs .actions > * { flex: 1 1 calc(50% - 5px); white-space: nowrap; }
    .online-delivery-page #jobs .assign { align-items: stretch; flex-direction: column; }
    .online-delivery-page #jobs .assign select,
    .online-delivery-page #jobs .assign button { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
    .online-delivery-page *,
    .online-delivery-page *::before,
    .online-delivery-page *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}