/* ============================================================
   QUICK ORDER FORM STYLES
   Accent + input styling follow the App Designer tokens
   (--apol-color-primary, --apol-input-*, --apol-font-body).
   ============================================================ */

.quick_order_form_outer {
    /* Accent follows the App Designer primary colour, with a purple fallback */
    --qof-accent: var(--apol-color-primary, #701c7e);
    --qof-line:   var(--apol-input-border, #e2e2e8);
    --qof-muted:  var(--apol-color-text-muted, #8a8a93);
    /* Row divider: deliberately a shade darker than --qof-line (the input
       border) so products stay visibly separated over the #f9f9f9 striped
       rows that datatables.css paints on tr.odd. */
    --qof-row-line: #d3d3db;
    /* Soft tints derived directly from the primary token (single-level var,
       so color-mix resolves reliably). */
    --qof-tint:   color-mix(in srgb, var(--apol-color-primary, #701c7e) 8%,  #fff);
    --qof-tint-2: color-mix(in srgb, var(--apol-color-primary, #701c7e) 14%, #fff);
    --qof-ring:   color-mix(in srgb, var(--apol-color-primary, #701c7e) 28%, transparent);
    /* One shared width for the category + search controls so they always match */
    --qof-control-w: 260px;
    /* Match the App Designer form fonts */
    font-family: var(--apol-font-body, inherit);
    /* Breathing room when quick.order.form.js scrolls here on a page change */
    scroll-margin-top: 16px;
}

/* ── Toolbar: title (left) + category + search (right) ─────── */
.qof-header-row {
    align-items: center;
    /* Divider separating the toolbar from the products table below */
    padding-bottom: 14px;
    margin-bottom: 14px;
    border-bottom: 1px solid var(--qof-line);
}
.qof-toolbar {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 16px;
    flex-wrap: wrap;
}
.qof-title {
    flex: 0 0 auto;
    margin: 0;
    font-family: var(--apol-font-body, inherit);
    font-size: 1.5em;
    font-weight: 700;
    line-height: 1.2;
    color: var(--apol-color-heading, #262626);
}
/* Category + search share --qof-control-w so they render identically.
   margin-left:auto pushes the category (and the search that follows it) to the
   right, leaving the title on the left. */
.qof-cat-wrap {
    position: relative;
    flex: 0 1 var(--qof-control-w);
    max-width: 100%;
    margin-left: auto;
}
/* Both inputs follow the App Designer input tokens (radius, border, bg, font)
   so they match each other and the rest of the site's forms.
   NOTE: apol.base.css styles every <select> via
   `select:not(.apol-select-proxied):not(.small_select)` with !important on
   width/height/padding/font/border — that beats even this ID rule, so the
   properties that must match the search input are !important here to win.
   Left padding is 16px to line up with the search input; the 40px right keeps
   clear of the chevron. */
#qof-category-filter {
    width: 100% !important;
    height: 46px !important;
    padding: 0 40px 0 16px !important;
    font-size: 0.95em !important;
    border: var(--apol-input-border-width, 1px) solid var(--apol-input-border, var(--qof-line)) !important;
    border-radius: var(--apol-input-radius, 6px) !important;
    background-color: var(--apol-input-bg, #fff) !important;
    color: var(--apol-input-text, #333);
    font-family: var(--apol-font-body, inherit);
    font-weight: var(--apol-font-weight-body, 400);
    cursor: pointer;
    box-sizing: border-box;
    -webkit-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 16px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
#qof-category-filter:focus {
    outline: 0;
    border-color: var(--qof-accent);
    box-shadow: 0 0 0 3px var(--qof-ring);
}
/* Pick out "Previously ordered" in the App Designer primary colour so it reads
   as the shortcut it is, rather than just another category.
   Note: <option> styling is at the browser's discretion — Chrome/Edge/Firefox
   honour colour + weight in the dropdown list, and while an option is actually
   hovered/selected the OS highlight takes over. It degrades to a plain option,
   never to something broken. */
#qof-category-filter option[value="__prev_ordered__"] {
    color: var(--qof-accent);
    font-weight: 700;
}

/* ── Search box (moved into the toolbar) ───────────────────── */
.quick_order_form_outer .dataTables_filter {
    float: none;
    margin: 0;
    flex: 0 1 var(--qof-control-w);
    max-width: 100%;
    text-align: right;
}
.quick_order_form_outer .dataTables_filter label { width: 100%; margin: 0; }
.quick_order_form_outer .dataTables_filter input {
    width: 100%;
    height: 46px;
    padding: 0 16px !important;
    border: var(--apol-input-border-width, 1px) solid var(--apol-input-border, var(--qof-line)) !important;
    border-radius: var(--apol-input-radius, 6px) !important;
    background: var(--apol-input-bg, #fff) !important;
    color: var(--apol-input-text, #222) !important;
    font-family: var(--apol-font-body, inherit) !important;
    font-size: 0.95em;
    box-sizing: border-box;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.quick_order_form_outer .dataTables_filter input::placeholder { color: var(--apol-input-placeholder, #8a8a8a); }
.quick_order_form_outer .dataTables_filter input:focus {
    outline: 0;
    border-color: var(--qof-accent) !important;
    box-shadow: 0 0 0 3px var(--qof-ring) !important;
}

/* ── Table ─────────────────────────────────────────────────── */
#qof-table {
    border-collapse: collapse;
}
#qof-table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: #fff;
    border-bottom: 2px solid var(--qof-accent);
    padding: 12px 10px;
    font-size: 0.82em;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: #555;
    white-space: nowrap;
}
#qof-table tbody td {
    padding: 10px;
    border-bottom: 1px solid var(--qof-row-line);
    vertical-align: middle;
}
#qof-table tbody tr {
    transition: background-color 0.12s ease;
}
/* Tint the CELLS (not just the <tr>) so DataTables/site cell backgrounds
   can't paint over the highlight. Static fallback first, dynamic primary tint
   second — the browser keeps whichever is valid. */
#qof-table tbody tr:hover > td {
    background-color: #eef2f6;
    background-color: color-mix(in srgb, var(--apol-color-primary, #701c7e) 8%, #fff);
}
/* Selected rows (qty > 0): stronger primary tint + solid left accent bar */
#qof-table tbody tr.qof-row-selected > td {
    background-color: #e4edf3;
    background-color: color-mix(in srgb, var(--apol-color-primary, #701c7e) 16%, #fff);
}
#qof-table tbody tr.qof-row-selected > td:first-child {
    box-shadow: inset 4px 0 0 0 var(--apol-color-primary, #701c7e);
}

/* Item cell: thumbnail + name side by side */
.qof-item-name-wrap {
    display: flex;
    align-items: center;
    gap: 12px;
}
.qof-thumb {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 6px;
    background-color: #f8f8f8;
    border: 1px solid var(--qof-line);
}
.td_alignment { vertical-align: middle; }

.qof-item-text { display: flex; flex-direction: column; justify-content: center; min-width: 0; }
.qof-item-title { display: block; font-weight: 600; color: #262626; }
.qof-item-price-inline { display: none; font-size: 0.9em; color: #333; margin-top: 3px; }
.qof-item-price-inline em { font-style: normal; font-size: 0.85em; color: var(--qof-muted); }

.qof-col-sku { color: var(--qof-muted); font-size: 0.9em; }
.qof-exvat {
    display: block;
    font-size: 0.75em;
    color: var(--qof-muted);
}
.qof-col-subtotal { font-weight: 700; color: #262626; white-space: nowrap; }

/* ── Quantity stepper (typed input + / -) ──────────────────── */
.qof-qty-cell { white-space: nowrap; }
.qof-qty {
    display: inline-flex;
    align-items: stretch;
    border: 1px solid var(--qof-line);
    border-radius: 6px;
    overflow: hidden;
    background: #fff;
    height: 40px;
}
.qof-qty:focus-within {
    border-color: var(--qof-accent);
    box-shadow: 0 0 0 3px var(--qof-ring);
}
.qof-step {
    width: 34px;
    border: 0;
    background: var(--qof-tint);
    color: var(--qof-accent);
    font-size: 1.15em;
    line-height: 1;
    cursor: pointer;
    user-select: none;
    transition: background-color 0.12s ease;
}
.qof-step:hover  { background: var(--qof-tint-2); }
.qof-step:active { background: color-mix(in srgb, var(--qof-accent) 22%, #fff); }
/* Scoped by the parent (.qof-qty ...) so this beats the global form-control
   normaliser in apol.base.css — `input[type="text"],…{ width; padding }` has
   specificity 0,1,1 and would otherwise override a single-class rule, inflating
   the stepper and pushing the table off-screen on mobile. padding/box-sizing are
   pinned for the same reason (the normaliser injects input padding). */
.qof-qty .qof-qty-input {
    width: 52px;
    padding: 0;
    box-sizing: border-box;
    border: 0;
    border-left: 1px solid var(--qof-line);
    border-right: 1px solid var(--qof-line);
    text-align: center;
    font-size: 0.95em;
    font-weight: 600;
    color: #262626;
    -moz-appearance: textfield;
}
.qof-qty .qof-qty-input:focus { outline: 0; }

/* ── Out of stock rows ─────────────────────────────────────── */
tr.qof-row-oos td { opacity: 0.5; }
tr.qof-row-oos .qof-qty-cell { opacity: 1; }
.qof-qty-oos .qof-qty-input {
    border: 1px solid var(--qof-line);
    border-radius: 6px;
    background: #f5f5f5;
    color: #aaa;
    width: 52px;
    height: 40px;
    padding: 0;
    box-sizing: border-box;
    text-align: center;
    cursor: not-allowed;
}
.qof-oos-badge {
    display: inline-block;
    margin-left: 8px;
    font-size: 0.72em;
    font-weight: 600;
    color: #fff;
    background: #999;
    border-radius: 3px;
    padding: 2px 6px;
    vertical-align: middle;
    white-space: nowrap;
}

/* ── Sticky checkout bar ───────────────────────────────────── */
.qof-checkout-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 999;
    background: #fff;
    border-top: 3px solid var(--qof-accent);
    box-shadow: 0 -6px 22px rgba(0,0,0,0.12);
    padding: 12px 22px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    transition: transform 0.25s ease;
}
.qof-checkout-bar.qof-bar-hidden { transform: translateY(110%); }
.qof-checkout-totals {
    display: flex;
    flex-direction: column;
    line-height: 1.3;
}
.qof-checkout-totals .qof-bar-items {
    font-size: 0.82em;
    color: var(--qof-muted);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.qof-checkout-totals .qof-bar-inc {
    font-size: 1.25em;
    font-weight: 700;
    color: #1c1c1c;
}
.qof-checkout-totals .qof-bar-ex {
    font-size: 0.8em;
    color: var(--qof-muted);
}
.qof-checkout-btn {
    white-space: nowrap;
    flex-shrink: 0;
}
.qof-checkout-btn i { margin-right: 10px; }
.qof-checkout-btn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}
.qof-bar-error {
    width: 100%;
    color: #c62828;
    font-size: 0.85em;
    margin-top: 4px;
}

/* ── <=1200px: drop SKU + sub-total ────────────────────────── */
@media only screen and (max-width: 1200px) {
    .qof-col-sku,      th.qof-col-sku,
    .qof-col-subtotal, th.qof-col-subtotal { display: none; }
}

/* ── <=900px: drop category ────────────────────────────────── */
@media only screen and (max-width: 900px) {
    .qof-col-cat, th.qof-col-cat { display: none; }
    .td_alignment { vertical-align: middle; }
}

/* ── <=640px: price column → inline under name ─────────────── */
@media only screen and (max-width: 640px) {
    .qof-col-price, th.qof-col-price { display: none; }
    .qof-item-price-inline { display: block; }

    .qof-thumb { width: 42px; height: 42px; }
    body { padding-bottom: 88px; }

    /* Toolbar stacks: title, then category + search each full width */
    .qof-title { flex: 1 1 100%; }
    .qof-cat-wrap { flex: 1 1 100%; margin-left: 0; }
    .quick_order_form_outer .dataTables_filter {
        flex: 1 1 100%;
        max-width: none;
        text-align: left;
    }
    .quick_order_form_outer .dataTables_filter input { width: 100% !important; box-sizing: border-box; }

    /* Checkout bar stacks on very narrow screens */
    .qof-checkout-bar {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
        padding: 10px 14px;
    }
    .qof-checkout-btn { width: 100%; text-align: center; }
}

/* Hide-prices-until-signed-in gate: the grid still shows, but a notice banner
   sits above it and each row's price is replaced with the sign-in message and
   the quantity cell is locked (the global "hide prices until signed in"
   setting). */
.qof-signin-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin: 0 0 16px;
    padding: 14px 18px;
    border: 1px solid var(--qof-line, #e2e2e8);
    border-left: 4px solid var(--qof-accent, #701c7e);
    border-radius: 8px;
    background: #faf7fb;
}
.qof-signin-banner span {
    font-size: 1.02em;
    color: var(--apol-color-text, #2a2a30);
}
/* Masked price: the sign-in message shown where a price would be. */
.qof-signin-price,
.qof-signin-price:link,
.qof-signin-price:visited {
    color: var(--qof-accent, #701c7e);
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}
.qof-signin-price:hover { text-decoration: underline; }
/* Locked quantity cell — non-interactive while prices are hidden. */
.qof-qty-locked { opacity: 0.45; pointer-events: none; }