/* Advanced Price Manager - Feature 7 (quantity-based pricing) styles. */

/* --------------------- FO inline price-slot hint ------------------------ */
/* b021: the price-block (after_price) slot is INLINE in Hummingbird
 * (rendered inside <span class="product__tax-label"> within
 * .product__price). We emit ONLY this inline text complement there — the
 * full ladder card moved to the displayProductAdditionalInfo block hook.
 * Stays inline so it never breaks the theme's flex price row; styling is
 * Bootstrap-5 utility-class driven (text-body-secondary small ms-1 d-inline),
 * these rules are just a defensive guard for themes that reset utilities. */
.apm-f7-hint {
    display: inline;
    white-space: nowrap;
}

/* --------------------- FO product page ---------------------------------- */
/* b009: card chrome (Bootstrap 5 / Hummingbird-native). The wrapper just
 * provides vertical rhythm; the visual chrome comes from the inner
 * .card and is intentionally minimal so a child theme can re-skin
 * without fighting our rules. */
.apm-f7-block {
    margin: 16px 0;
    font-size: 0.95em;
}
.apm-f7-block .apm-f7-ladder.card {
    border-radius: 0.5rem;
    border-color: var(--bs-border-color, #dee2e6);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}
.apm-f7-block .apm-f7-ladder .card-header {
    background-color: var(--bs-light, #f8f9fa);
    border-bottom: 1px solid var(--bs-border-color, #dee2e6);
    padding: 0.5rem 0.875rem;
}
.apm-f7-block .apm-f7-ladder-header {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--bs-body-color, #212529);
    letter-spacing: 0.01em;
}
.apm-f7-block .apm-f7-ladder .card-body {
    background: var(--bs-body-bg, #fff);
}
.apm-f7-block .apm-f7-ladder-table {
    margin-bottom: 0;
}
.apm-f7-block .apm-f7-ladder-table th,
.apm-f7-block .apm-f7-ladder-table td {
    padding: 0.5rem 0.875rem;
    vertical-align: middle;
    border-color: var(--bs-border-color-translucent, rgba(0, 0, 0, 0.08));
}
.apm-f7-block .apm-f7-ladder-table thead th {
    background-color: var(--bs-light, #f8f9fa);
    font-weight: 600;
    font-size: 0.8125rem;
    color: var(--bs-secondary-color, #6c757d);
    text-transform: uppercase;
    letter-spacing: 0.02em;
    border-bottom-width: 1px;
}
.apm-f7-block .apm-f7-ladder-table tr.apm-f7-tier-row td:first-child {
    font-weight: 500;
}
.apm-f7-block .apm-f7-ladder-table tr.apm-f7-tier-active {
    background-color: var(--bs-secondary-bg, #e9ecef); /* grey: the tier the customer is in */
}
.apm-f7-block .apm-f7-ladder-table tr.apm-f7-tier-active td {
    font-weight: 600;
}
.apm-f7-block .apm-f7-ladder-table tr.apm-f7-tier-active td:first-child::before {
    content: "\002022";  /* bullet */
    color: var(--bs-secondary-color, #6c757d);
    margin-right: 0.375rem;
    font-weight: 700;
}
/* derkarton-style totals header: two columns (excl VAT | incl VAT), each a big total for the
 * current quantity + the per-unit price + a VAT note. The FO JS keeps the amounts in sync. */
.apm-f7-block .apm-f7-totals {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 0.75rem;
}
.apm-f7-block .apm-f7-total {
    flex: 1 1 45%;
    min-width: 140px;
}
.apm-f7-block .apm-f7-total-incl {
    text-align: right;
}
.apm-f7-block .apm-f7-total-amount {
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1.1;
    color: var(--bs-body-color, #232323);
}
.apm-f7-block .apm-f7-total-unit {
    font-size: 0.875rem;
    color: var(--bs-body-color, #232323);
}
.apm-f7-block .apm-f7-total-note {
    font-size: 0.8125rem;
    color: var(--bs-secondary-color, #6c757d);
}
/* Two VAT price columns in the ladder table. */
.apm-f7-block .apm-f7-ladder-table .apm-f7-unit-excl,
.apm-f7-block .apm-f7-ladder-table .apm-f7-unit-incl {
    white-space: nowrap;
}

/* b094: gated CTA block shown to customers outside the allowed groups instead of the grid. */
.apm-f7-cta {
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: var(--bs-border-radius, 0.375rem);
    padding: 1rem 1.125rem;
    margin-bottom: 0.75rem;
    background: var(--bs-light, #f8f9fa);
}
.apm-f7-cta-text {
    margin-bottom: 0.75rem;
    color: var(--bs-body-color, #232323);
}
.apm-f7-cta .apm-f7-cta-btn {
    display: inline-block;
}
/* Savings cell -- the badge gets Bootstrap-5 bg-success utility; we
 * only need to align it to the right and tighten typography. */
.apm-f7-block .apm-f7-savings-pct {
    font-weight: 600;
    font-size: 0.8125rem;
    letter-spacing: 0.01em;
    padding: 0.25rem 0.5rem;
}
.apm-f7-block .apm-f7-ladder-table .text-end {
    text-align: right;
}

/* Standalone "total savings" badge under the ladder, kept for hooks
 * where displaySavings=1 and the active tier crosses the threshold. */
.apm-f7-savings-badge {
    margin-top: 0.75rem;
    padding: 0.5rem 0.875rem;
    display: inline-block;
    background: var(--bs-success, #198754);
    color: var(--bs-light, #fff);
    font-weight: 600;
    border-radius: 0.375rem;
    font-size: 0.875rem;
}
.apm-f7-savings-badge strong {
    margin-left: 0.375rem;
}

/* --------------------- BO per-product panel ----------------------------- */
/* The panel is the loaded admin theme's OWN native chrome: a `.panel`
 * (panel-heading + panel-body), a plain `.table`, native `.alert`, native
 * `.switch.prestashop-switch` toggles, native `.form-control` inputs/selects,
 * native `.badge`/`.label` and native `.btn` actions. All the chrome styling
 * (panel borders, table borders/striping, heading bar, button skins, switch
 * animation, dark mode, RTL) comes from the admin theme -- no module CSS
 * re-implements it. What stays below is only the minimum NON-chrome layout
 * glue the theme cannot infer: input sizing inside the cramped tier grid,
 * empty-result hiding, the derived/preview/validation affordances, and a
 * couple of cell-alignment helpers. All colours are theme tokens, never
 * hardcoded hex. */
.apm-f7-product-panel .apm-f7-input {
    min-width: 70px;
}
.apm-f7-product-panel .apm-f7-input.apm-f7-price,
.apm-f7-product-panel .apm-f7-input.apm-f7-discount,
.apm-f7-product-panel .apm-f7-mode {
    min-width: 110px;
}
.apm-f7-product-panel .apm-f7-checkcell {
    text-align: center;
    vertical-align: middle;
}
.apm-f7-product-panel .apm-f7-actions {
    margin-top: 12px;
}
.apm-f7-product-panel .apm-f7-actions .btn {
    margin-right: 6px;
}
/* The AJAX result mount collapses when empty so it never adds blank vertical
 * space above the tier table. */
.apm-f7-product-panel .apm-f7-result:empty {
    display: none;
}
.apm-f7-product-panel .apm-f7-alert {
    margin-bottom: 12px;
}
.apm-f7-product-panel .apm-f7-stats {
    margin-left: 6px;
}
.apm-f7-product-panel .apm-f7-err-list {
    margin: 6px 0 0 0;
    padding-left: 20px;
}

/* Derived (preview) field: the either/or partner the merchant did NOT type
 * into. Dimmed + italic so it reads as a computed hint, not an input the
 * merchant is expected to fill. Uses the theme's muted token. */
.apm-f7-product-panel .apm-f7-derived {
    opacity: 0.6;
    font-style: italic;
}

/* "Do" derived-bound hint under the qty_to field ("1-9", "10+"). */
.apm-f7-product-panel .apm-f7-qty-to-display {
    margin: 2px 0 0 0;
    font-size: 0.85em;
}

/* Per-row "Rezultat" preview (resulting unit price + savings badge). */
.apm-f7-product-panel .apm-f7-preview {
    white-space: nowrap;
}
.apm-f7-product-panel .apm-f7-preview-badge {
    margin-left: 2px;
}

/* Inline validation: native help-block message + a subtle invalid outline
 * driven by the theme's state token (no hardcoded red). */
.apm-f7-product-panel .apm-f7-field-error {
    margin: 2px 0 0 0;
    color: var(--danger, #c4392f);
    font-size: 0.85em;
}
.apm-f7-product-panel .apm-f7-invalid {
    border-color: var(--danger, #c4392f);
}

/* Delete affordance: a row flagged for deletion is dimmed + struck so the
 * merchant sees what "Shrani" will remove. */
.apm-f7-product-panel .apm-f7-row-deleted td {
    opacity: 0.5;
    text-decoration: line-through;
}
.apm-f7-product-panel .apm-f7-delete-btn {
    padding: 2px 6px;
}

/* "Dodaj nivo" flash: briefly highlight the new row when focused. */
.apm-f7-product-panel .apm-f7-flash {
    animation: apm-f7-flash 0.9s ease-out 1;
}
@keyframes apm-f7-flash {
    0%   { background-color: rgba(37, 184, 109, 0.18); }
    100% { background-color: transparent; }
}

/* b013 batch 3: FO upsell nudge + cart-line quantity-discount note.
   Theme-neutral, muted styling keyed off Bootstrap-5 tokens the Hummingbird
   theme exposes; refined per-theme in the FO Hummingbird batch. */
.apm-f7-nudge {
    margin-top: 6px;
}
.apm-f7-nudge-text {
    display: inline-block;
    font-size: 0.875em;
    line-height: 1.3;
    padding: 4px 10px;
    border-radius: var(--bs-border-radius, 4px);
    background: var(--bs-tertiary-bg, #f1f3f5);
    color: var(--bs-secondary-color, #6c757d);
}
.apm-f7-cart-note {
    margin-top: 4px;
}
.apm-f7-cart-note .apm-f7-cart-badge {
    font-weight: 600;
    font-size: 0.8125em;
}