/* ============================================================
   ORDERS — Cart, checkout, buyer orders overview
   ============================================================ */

/* ── Reservation countdown pill ── */
.buyer-step-strip {
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:8px;
    margin:0 0 16px;
}

.buyer-step-strip span {
    min-width:0;
    padding:10px 12px;
    border:1px solid var(--line);
    border-radius:14px;
    background:var(--surface);
    color:var(--muted);
    font-size:12px;
    font-weight:800;
    text-align:center;
}
.buyer-step-strip span.is-active {
    border-color:rgba(16,185,129,.26);
    background:rgba(16,185,129,.10);
    color:var(--accent);
}
.buyer-helper-card {
    display:grid;
    gap:4px;
    margin:0 0 16px;
    padding:14px 16px;
    border:1px solid rgba(37,99,235,.16);
    border-radius:18px;
    background:rgba(37,99,235,.07);
}
.buyer-helper-card strong { font-size:14px; }
.buyer-helper-card span { color:var(--muted); font-size:13px; line-height:1.45; }
.buyer-helper-card--warning { border-color:rgba(245,158,11,.24); background:rgba(245,158,11,.10); }
.buyer-helper-card--compact { margin:0 0 14px; padding:12px 14px; }

.reservation-pill {
    display:flex;
    flex-direction:column;
    gap:4px;
    min-width:140px;
    padding:10px 12px;
    border:1px solid var(--line);
    border-radius:14px;
    background:rgba(16,185,129,.08);
}
.reservation-pill--expired {
    background:rgba(239,68,68,.08);
}

/* ── Checkout layout ── */
.checkout-item        { display:flex; gap:12px; align-items:center; }
.checkout-item + .checkout-item { margin-top:12px; }
.checkout-thumb       { width:72px; height:72px; object-fit:cover; border-radius:18px; border:1px solid var(--line); flex-shrink:0; }
.checkout-item-body   { flex:1; min-width:0; }
.checkout-divider     { border:0; border-top:1px solid var(--line); margin:18px 0; }
.checkout-totals      { display:flex; flex-direction:column; gap:8px; }
.checkout-total-row   { display:flex; justify-content:space-between; align-items:baseline; }
.checkout-total-row--final { border-top:1px solid var(--line); padding-top:10px; margin-top:4px; }
.checkout-grand-total { font-size:24px; font-weight:700; }
.checkout-validation-note,
.checkout-payment-warning,
.checkout-reminder-card {
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:14px;
    margin:14px 0 0;
    padding:14px 16px;
    border:1px solid rgba(37,99,235,.16);
    border-radius:18px;
    background:rgba(37,99,235,.08);
}
.checkout-validation-note,
.checkout-payment-warning {
    display:grid;
    justify-content:stretch;
}
.checkout-validation-note strong,
.checkout-payment-warning strong,
.checkout-reminder-card strong { display:block; font-size:14px; }
.checkout-validation-note span,
.checkout-payment-warning span,
.checkout-reminder-card span { display:block; color:var(--muted); font-size:13px; line-height:1.45; margin-top:3px; }
.checkout-payment-warning { border-color:rgba(245,158,11,.22); background:rgba(245,158,11,.10); }
.checkout-reminder-card { align-items:center; margin:16px 0; background:rgba(16,185,129,.08); border-color:rgba(16,185,129,.18); }
.checkout-review-page { width:100%; padding:24px; }
.checkout-review-hero { display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom:18px; padding:22px; border:1px solid var(--line); border-radius:24px; background:var(--surface); box-shadow:var(--shadow); }
.checkout-review-hero h1 { margin:8px 0 6px; }
.checkout-review-hero p { margin:0; color:var(--muted); }
.checkout-review-grid { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(320px,.85fr); gap:18px; align-items:start; }
.checkout-review-status { display:flex; flex-wrap:wrap; gap:8px; margin:12px 0 18px; }
.checkout-review-status span { display:inline-flex; align-items:center; gap:6px; padding:7px 10px; border-radius:999px; background:rgba(148,163,184,.10); color:var(--muted); font-size:12px; font-weight:800; }
.checkout-review-items { display:flex; flex-direction:column; gap:12px; }
.checkout-address-summary { display:grid; gap:4px; margin:14px 0; padding:14px; border:1px solid var(--line); border-radius:16px; background:rgba(148,163,184,.05); }
.checkout-address-summary span { color:var(--muted); font-size:13px; }
.checkout-pay-button { width:100%; justify-content:center; margin-top:16px; min-height:48px; }
.checkout-assurance-list {
    display:grid;
    gap:8px;
    margin-top:14px;
    padding-top:14px;
    border-top:1px solid var(--line);
}
.checkout-assurance-list span {
    position:relative;
    padding-left:18px;
    color:var(--muted);
    font-size:13px;
    line-height:1.4;
}
.checkout-assurance-list span::before {
    content:"";
    position:absolute;
    left:0;
    top:.45em;
    width:8px;
    height:8px;
    border-radius:999px;
    background:var(--accent);
}

@media (max-width:900px) {
    .checkout-review-page { padding:16px; }
    .checkout-review-hero,
    .checkout-reminder-card { flex-direction:column; align-items:stretch; }
    .checkout-review-grid { grid-template-columns:1fr; }
}

@media (max-width:600px) {
    /* Checkout-formulier: adresvelden in één kolom op mobiel */
    .checkout-form-grid .form-grid { grid-template-columns:1fr !important; }
    /* Velden die via style="grid-column:1/-1" vol-breed zijn: reset naar normaal */
    .checkout-form-grid .form-grid p { grid-column:auto !important; }
    /* Orderoverzicht onder het formulier stapelen */
    .checkout-form-grid { gap:16px; }
    /* Checkout-pay-button extra hoog op mobile voor touch */
    .checkout-pay-button { min-height:56px; font-size:16px; }
}

@media (max-width:600px) {
    .buyer-step-strip { grid-template-columns:1fr 1fr; }
    .buyer-step-strip span { text-align:left; }
    .buyer-table,
    .buyer-table tbody,
    .buyer-table tr,
    .buyer-table td { display:block; width:100%; }
    .buyer-table tr:first-child { display:none; }
    .buyer-table tr {
        border:1px solid var(--line);
        border-radius:18px;
        padding:10px 12px;
        margin-bottom:12px;
        background:var(--surface);
    }
    .buyer-table td { border:0; padding:9px 0; }
    .buyer-table td + td { border-top:1px solid var(--line-soft); }
    .buyer-table td::before {
        display:block;
        margin-bottom:5px;
        color:var(--muted);
        font-size:11px;
        font-weight:900;
        letter-spacing:.04em;
        text-transform:uppercase;
    }
    .buyer-table td:nth-child(1)::before { content:"Product"; }
    .buyer-table td:nth-child(2)::before { content:"Prijs"; }
    .buyer-table td:nth-child(3)::before { content:"Aantal"; }
    .buyer-table td:nth-child(4)::before { content:"Subtotaal"; }
    .buyer-table td:nth-child(5)::before { content:"Actie"; }
    .buyer-orders-table td:nth-child(1)::before { content:"Order"; }
    .buyer-orders-table td:nth-child(2)::before { content:"Shop"; }
    .buyer-orders-table td:nth-child(3)::before { content:"Status"; }
    .buyer-orders-table td:nth-child(4)::before { content:"Betaling"; }
    .buyer-orders-table td:nth-child(5)::before { content:"Subtotaal"; }
    .buyer-orders-table td:nth-child(6)::before { content:"Verzending"; }
    .buyer-orders-table td:nth-child(7)::before { content:"Totaal"; }
    .buyer-orders-table td:nth-child(8)::before { content:"Aangemaakt"; }
    .buyer-orders-table td:nth-child(9)::before { content:"Reservering"; }
    .buyer-orders-table td:nth-child(10)::before { content:"Actie"; }
}

/* ── Order cards — buyer overview redesign (0.20.9) ── */
.order-cards { display:grid; gap:14px; }

.order-filter-card {
    margin-bottom:14px;
}
.order-filter-form {
    display:grid;
    gap:12px;
}
.order-filter-search {
    display:grid;
    gap:6px;
}
.order-filter-search label {
    color:var(--muted);
    font-size:11px;
    font-weight:900;
    letter-spacing:.04em;
    text-transform:uppercase;
}
.order-filter-search input {
    width:100%;
}
.order-filter-tabs {
    display:flex;
    flex-wrap:wrap;
    gap:8px;
}
.order-filter-tab {
    display:inline-flex;
    align-items:center;
    gap:8px;
    min-height:36px;
    padding:7px 10px;
    border:1px solid var(--line);
    border-radius:999px;
    background:rgba(148,163,184,.05);
    color:var(--muted);
    text-decoration:none;
    font-size:12px;
    font-weight:800;
}
.order-filter-tab strong {
    min-width:22px;
    padding:2px 7px;
    border-radius:999px;
    background:rgba(148,163,184,.12);
    color:var(--text);
    text-align:center;
    font-size:11px;
}
.order-filter-tab.is-active {
    border-color:rgba(16,185,129,.28);
    background:rgba(16,185,129,.10);
    color:var(--accent);
}
.order-filter-actions {
    display:flex;
    gap:8px;
    flex-wrap:wrap;
}

.order-card {
    border:1px solid var(--line);
    border-radius:20px;
    background:var(--surface);
    overflow:hidden;
}
.order-card--cancelled { opacity:.72; }

.order-card-header {
    display:flex;
    align-items:center;
    gap:8px;
    padding:13px 18px;
    border-bottom:1px solid var(--line-soft);
    background:rgba(148,163,184,.04);
    flex-wrap:wrap;
}
.order-card-num  { display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:700; font-family:monospace; letter-spacing:.02em; }
.order-card-num span { font-family:inherit; font-size:10px; font-weight:800; text-transform:uppercase; color:var(--muted); letter-spacing:.06em; }
.order-card-sep  { color:var(--muted); font-size:13px; }
.order-card-shop { font-size:13px; color:var(--muted); }
.order-card-date { font-size:12px; color:var(--muted); margin-left:auto; }
.order-card-auction-badge {
    display:inline-flex;
    align-items:center;
    gap:3px;
    padding:2px 8px;
    border-radius:999px;
    background:rgba(245,158,11,.14);
    color:#f59e0b;
    font-size:11px;
    font-weight:800;
}
.order-card-auction-badge--cancelled {
    background:rgba(239,68,68,.12);
    color:#f87171;
}

/* Items row */
.order-card-items {
    display:flex;
    align-items:center;
    gap:10px;
    padding:14px 18px;
    flex-wrap:wrap;
    border-bottom:1px solid var(--line-soft);
}
.order-card-item {
    display:flex;
    align-items:center;
    gap:9px;
    min-width:160px;
    flex:1;
    max-width:340px;
}
.order-card-thumb {
    width:46px;
    height:46px;
    object-fit:cover;
    border-radius:10px;
    border:1px solid var(--line);
    flex-shrink:0;
    background:rgba(148,163,184,.1);
}
.order-card-thumb-placeholder {
    width:46px;
    height:46px;
    border-radius:10px;
    border:1px solid var(--line);
    flex-shrink:0;
    background:rgba(148,163,184,.08);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:20px;
}
.order-card-item-body { min-width:0; }
.order-card-item-name {
    font-size:13px;
    font-weight:600;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    max-width:240px;
}
.order-card-item-qty { font-size:12px; color:var(--muted); margin-top:2px; }
.order-card-more {
    font-size:12px;
    color:var(--muted);
    padding:4px 10px;
    border:1px solid var(--line);
    border-radius:999px;
    white-space:nowrap;
    flex-shrink:0;
}

/* Tracking timeline */
.order-timeline {
    display:flex;
    align-items:flex-start;
    padding:0;
    overflow-x:auto;
}
.order-timeline-step {
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:6px;
    flex-shrink:0;
    width:72px;
}
.order-timeline-connector {
    flex:1;
    min-width:8px;
    height:2px;
    background:var(--line);
    margin-top:9px; /* (20px dot / 2) - (2px line / 2) */
    flex-shrink:1;
}
.order-timeline-connector.is-done { background:var(--accent); }

.order-timeline-dot {
    width:20px;
    height:20px;
    border-radius:999px;
    border:2px solid var(--line);
    background:var(--surface);
    flex-shrink:0;
}
.order-timeline-step.is-done .order-timeline-dot {
    background:var(--accent);
    border-color:var(--accent);
}
.order-timeline-step.is-active .order-timeline-dot {
    background:var(--accent);
    border-color:var(--accent);
    box-shadow:0 0 0 4px rgba(16,185,129,.22);
}
.order-timeline-label {
    font-size:10px;
    font-weight:700;
    color:var(--muted);
    text-align:center;
    white-space:nowrap;
    letter-spacing:.02em;
    line-height:1.2;
}
.order-timeline-step.is-done .order-timeline-label,
.order-timeline-step.is-active .order-timeline-label { color:var(--text); }

/* Footer */
.order-card-footer {
    display:flex;
    align-items:center;
    gap:14px;
    padding:0;
    flex-wrap:wrap;
}
.order-card-total { font-size:17px; font-weight:700; }
.order-card-total span { font-size:11px; font-weight:500; color:var(--muted); margin-right:4px; }
.order-card-meta { font-size:12px; color:var(--muted); margin-top:2px; }
.order-card-actions {
    display:flex;
    align-items:center;
    gap:8px;
    margin-left:auto;
    flex-wrap:wrap;
    justify-content:flex-end;
}

.order-tracking-dropdown {
    border-top:1px solid var(--line-soft);
    padding:0 18px 16px;
}
.order-tracking-dropdown summary {
    min-height:48px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    cursor:pointer;
    list-style:none;
    color:var(--muted);
    font-size:12px;
}
.order-tracking-dropdown summary::-webkit-details-marker { display:none; }
.order-tracking-dropdown summary::after {
    content:"⌄";
    color:var(--muted);
    font-size:16px;
    line-height:1;
    transition:transform .18s ease;
}
.order-tracking-dropdown[open] summary::after { transform:rotate(180deg); }
.order-tracking-dropdown summary span {
    font-weight:700;
    color:var(--text);
}
.order-tracking-dropdown summary strong {
    margin-left:auto;
    font-family:monospace;
    font-size:12px;
    color:var(--muted);
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}
.order-tracking-dropdown-body {
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
    gap:12px;
    padding:10px 0 2px;
}
.order-detail-section {
    padding:10px 12px;
    border:1px solid var(--line-soft);
    border-radius:12px;
    background:rgba(148,163,184,.05);
}
.order-detail-section--wide {
    grid-column:1 / -1;
}
.order-detail-section > span {
    display:block;
    color:var(--muted);
    font-size:11px;
    margin-bottom:8px;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:.04em;
}
.order-detail-section > strong {
    display:block;
    color:var(--text);
    font-size:13px;
    overflow-wrap:anywhere;
}
.order-detail-section > strong a {
    color:var(--accent);
    text-decoration:none;
}
.order-detail-section > strong a:hover {
    text-decoration:underline;
}
.order-detail-section .order-card-footer {
    align-items:flex-start;
}
.order-review-items {
    display:flex;
    flex-direction:column;
    gap:8px;
}
.order-review-item {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:8px 10px;
    border-radius:10px;
    background:rgba(124,58,237,.04);
    border:1px solid rgba(124,58,237,.12);
}
.order-review-item-name {
    font-size:13px;
    font-weight:600;
    color:var(--text);
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

@media (max-width:640px) {
    .order-card-header { gap:5px; }
    .order-card-date   { margin-left:0; width:100%; }
    .order-card-actions { margin-left:0; width:100%; }
    .order-card-actions .btn { flex:1; justify-content:center; }
    .order-filter-tab { flex:1 1 calc(50% - 8px); justify-content:space-between; }
    .order-filter-actions .btn { flex:1; justify-content:center; }
    .order-timeline-step { width:56px; }
    .order-timeline-label { font-size:9px; }
    .order-card-footer { gap:10px; }
    .order-tracking-dropdown { padding:0 12px 12px; }
    .order-tracking-dropdown summary { align-items:flex-start; flex-direction:column; padding:12px 0; }
    .order-tracking-dropdown summary strong { margin-left:0; max-width:100%; }
}

/* 0.17.0 phase 5 - mobile usability polish */
@media (max-width:520px) {
    .checkout-review-page {
        padding: 12px;
    }

    .checkout-review-hero {
        padding: 16px;
        border-radius: 16px;
    }

    .checkout-review-hero .btn,
    .checkout-reminder-card .btn {
        width: 100%;
        justify-content: center;
    }

    .checkout-item {
        align-items: flex-start;
    }

    .checkout-thumb {
        width: 60px;
        height: 60px;
        border-radius: 12px;
    }

    .checkout-total-row {
        gap: 16px;
    }

    .buyer-step-strip {
        gap: 6px;
    }

    .buyer-step-strip span {
        padding: 9px 10px;
        font-size: 11px;
    }

    .buyer-table form.flex {
        align-items: stretch;
        flex-direction: column;
    }

    .buyer-table form .btn,
    .buyer-table input[type=number] {
        width: 100%;
        max-width: none !important;
        justify-content: center;
    }

    .reservation-pill {
        width: 100%;
    }
}

/* ── 375px — kleine smartphones (iPhone SE, Galaxy S) ── */
@media (max-width:375px) {
    /* Orderkaart: alles gestapeld */
    .order-card-meta { flex-direction:column; gap:4px; }
    .order-card-number { font-size:13px; }

    /* Timeline: verberg labels, toon alleen bolletjes */
    .order-timeline-label { display:none; }
    .order-timeline-step  { width:32px; }
    .order-timeline-dot   { width:18px; height:18px; font-size:9px; }

    /* Filterbalk: één kolom */
    .order-filter-tabs { gap:4px; }
    .order-filter-tab  { flex:1 1 100%; }

    /* Checkout stappen: 2-koloms → 1-koloms */
    .buyer-step-strip                { grid-template-columns:1fr; }
    .buyer-step-strip span           { padding:7px 10px; font-size:11px; }

    /* Checkout formulier */
    .checkout-pay-button             { min-height:52px; font-size:15px; }

    /* Review knop per product */
    .order-review-items              { flex-direction:column; }
    .order-review-item               { flex-direction:column; align-items:flex-start; gap:6px; }
    .order-review-item .btn          { width:100%; justify-content:center; }
}

/* Probleem-melden knop: verberg de standaard disclosure-driehoek van <summary>,
   zodat de knop niet nog een los teken achter de tekst toont. */
.order-dispute-toggle summary { list-style: none; }
.order-dispute-toggle summary::-webkit-details-marker { display: none; }
.order-dispute-toggle summary::marker { content: ""; }

/* Verkoperreactie en uitkomst van een dispute, zichtbaar voor de koper. */
.order-dispute-note { margin:6px 0 0; font-size:13px; line-height:1.5; color:var(--muted); }
.order-dispute-note strong { color:var(--text); }