@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Outfit:wght@500;600;700;800&display=swap");

/* ==========================================================================
   Pricelist 2026 — "Daftar Harga" page content.
   Restyled to match the order2026/track2026 page shell so it's visually
   selaras (aligned) with the rest of the site: same breadcrumb, same fluid
   edge-to-edge .container padding scale (lines up with the navbar/footer
   instead of a capped+centered Bootstrap grid), same compact icon hero and
   white surface panel used across the order/track flow. Still fully
   self-contained under .pricelist2026 so it never touches any other page.
   ========================================================================== */

.pricelist2026 {
    --p-primary: var(--yellow-primary);
    --p-primary-soft: color-mix(in srgb, var(--yellow-primary) 12%, var(--white));
    --p-ink: var(--dark-blue);
    --p-bg: var(--bg-body);
    --p-surface: var(--white);
    --p-border: var(--dark-grey);
    --p-text: var(--black);
    --p-muted: var(--black-text);
    --p-success: #16A34A;
    --p-danger: #DC2626;
    --p-radius: 14px;
    --p-radius-lg: 22px;
    --p-shadow: 0 10px 30px -12px rgba(14, 18, 33, 0.12);
    font-family: "Inter", sans-serif;
    color: var(--p-text);
    background: transparent;
    padding-bottom: 40px;
}

/* Same dark-mode surface fix as order2026: --p-surface is aliased straight
   to --white, which never changes in dark mode, so the filter/table cards
   would otherwise stay bright white on a dark page. */
[data-theme="dark"] .pricelist2026 {
    --p-surface: var(--light-blue);
    --p-primary-soft: color-mix(in srgb, var(--yellow-primary) 16%, var(--light-blue));
}

.pricelist2026 * { box-sizing: border-box; }

/* Same fluid, edge-to-edge padding scale as order2026/track2026 and the
   shared navbar/footer — no max-width cap, just growing side padding — so
   this page's left/right edge lines up at the exact same distance from the
   screen edge as every other page, instead of the old capped+centered
   Bootstrap .container/.row/.col-md-10 grid. */
.pricelist2026 .container {
    max-width: none;
    width: 100%;
    padding-left: 16px;
    padding-right: 16px;
}

@media (min-width: 576px) {
    .pricelist2026 .container { padding-left: 24px; padding-right: 24px; }
}

@media (min-width: 992px) {
    .pricelist2026 .container { padding-left: 40px; padding-right: 40px; }
}

@media (min-width: 1400px) {
    .pricelist2026 .container { padding-left: 64px; padding-right: 64px; }
}

/* -------- Breadcrumb (identical pattern to order2026-crumb) -------- */
.pricelist2026-crumb {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--p-muted);
    margin-bottom: 14px;
}

.pricelist2026-crumb a {
    color: var(--p-muted);
    text-decoration: none;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.pricelist2026-crumb a:hover { color: var(--p-primary); }

.pricelist2026-crumb .current {
    color: var(--p-text);
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 60vw;
}

/* -------- Hero (same compact icon-hero pattern as trk2026-hero) -------- */
.pricelist2026-hero {
    max-width: 640px;
    margin: 8px auto 28px;
    text-align: center;
}

.pricelist2026-hero-icon {
    width: 56px;
    height: 56px;
    margin: 0 auto 14px;
    border-radius: 16px;
    background: var(--p-primary-soft);
    color: var(--p-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
}

.pricelist2026-hero h1 {
    font-family: "Outfit", sans-serif;
    font-weight: 700;
    font-size: 22px;
    color: var(--p-text);
    margin: 0 0 6px;
}

@media (min-width: 768px) { .pricelist2026-hero h1 { font-size: 26px; } }

.pricelist2026-hero p {
    font-size: 13.5px;
    color: var(--p-muted);
    margin: 0 0 14px;
    line-height: 1.6;
}

/* Small pill tag, same visual language as .order2026-tag-accent */
.pricelist2026-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 12px;
    border-radius: 999px;
    background: var(--p-primary-soft);
    border: 1px solid color-mix(in srgb, var(--p-primary) 35%, transparent);
    font-size: 11.5px;
    font-weight: 600;
    color: color-mix(in srgb, var(--p-primary) 75%, var(--p-ink));
}

/* -------- Content shell -------- */
/* Same idea as .trk2026-receipt (max-width + auto margin) so the table
   doesn't stretch edge-to-edge on very wide screens while the outer
   .container padding still lines up with the rest of the site. */
.pricelist2026-content {
    max-width: 960px;
    margin: 0 auto;
}

/* -------- Panel (same white-card look as order2026-panel) -------- */
.pricelist2026-panel {
    min-width: 0;
    background: var(--p-surface);
    border: 1px solid var(--p-border);
    border-radius: var(--p-radius-lg);
    box-shadow: var(--p-shadow);
    padding: 20px;
}

@media (min-width: 768px) { .pricelist2026-panel { padding: 24px; } }

.pricelist2026-filter-card { margin-bottom: 20px; }

.pricelist2026-filter-title {
    display: flex;
    align-items: center;
    gap: 7px;
    font-family: "Outfit", sans-serif;
    font-weight: 600;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--p-muted);
    margin-bottom: 16px;
}

.pricelist2026-filter-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}

.pricelist2026-field label {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: var(--p-text);
    margin-bottom: 6px;
}

.pricelist2026-field select.form-select {
    width: 100%;
    height: 48px;
    padding: 0 16px;
    font-size: 14px;
    font-family: "Inter", sans-serif;
    color: var(--p-text);
    background-color: var(--p-surface);
    border: 1.5px solid var(--p-border);
    border-radius: var(--p-radius);
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.pricelist2026-field select.form-select:focus {
    border-color: var(--p-primary);
    box-shadow: 0 0 0 3px var(--p-primary-soft);
}

/* -------- Table card -------- */
.pricelist2026-table-card {
    padding: 8px;
    overflow: hidden;
}

.pricelist2026-table-card .table-responsive {
    border-radius: calc(var(--p-radius-lg) - 6px);
}

.pricelist2026 table.table {
    width: 100%;
    margin: 0;
    border-collapse: separate;
    border-spacing: 0;
    font-size: 13.5px;
}

.pricelist2026 table.table thead th {
    position: sticky;
    top: 0;
    background: var(--p-bg);
    color: var(--p-muted);
    font-family: "Outfit", sans-serif;
    font-weight: 600;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding: 14px 16px;
    border-bottom: 1px solid var(--p-border);
    white-space: nowrap;
}

.pricelist2026 table.table tbody td {
    padding: 13px 16px;
    color: var(--p-text);
    border-bottom: 1px solid var(--p-border);
    vertical-align: middle;
}

.pricelist2026 table.table tbody tr:last-child td {
    border-bottom: none;
}

.pricelist2026 table.table tbody tr:hover td {
    background: var(--p-primary-soft);
}

.pricelist2026 table.table .text-success {
    color: var(--p-success) !important;
    font-weight: 600;
}

.pricelist2026 table.table .text-danger {
    color: var(--p-danger) !important;
    font-weight: 600;
}

/* Same bright dark-mode variants used by history2026/track2026 for
   text-success/text-danger — the light-mode hex values (#16A34A/#DC2626)
   read muddy/low-contrast on a dark surface. */
[data-theme="dark"] .pricelist2026 table.table .text-success { color: #45e0a1 !important; }
[data-theme="dark"] .pricelist2026 table.table .text-danger  { color: #ff8b96 !important; }

.pricelist2026 #load_price {
    font-family: "Outfit", sans-serif;
    font-weight: 500;
    color: var(--p-muted);
    padding: 30px 0;
}

/* -------- Responsive -------- */
@media (max-width: 767.98px) {
    .pricelist2026-filter-grid {
        grid-template-columns: 1fr;
    }
}