/**
 * NOTICE OF LICENSE
 *
 * This file is proprietary software and is not open source.
 * Your subscription grants you a limited, non-transferable right to use this code
 * solely as part of the Retail Media Manager platform, and only for the duration
 * of your valid subscription.
 *
 * You are not permitted to copy, redistribute, resell, lease, license, sub-license,
 * or otherwise make this code or its resources available to any third party.
 *
 * DISCLAIMER
 *
 * Do not edit or add to this file. If you require customizations, please
 * contact Corebuilt Labs for professional services.
 *
 * @author     Corebuilt Labs <info@corebuilt.com>
 * @copyright  2025 Corebuilt Labs
 * @license    Limited to use within an active subscription to Retail Media Manager
 */

/* ============================================================
   RMM Order Flow — Front Office (New order page)
   ============================================================ */

.neworder-page {
    /* Pull brand, surface, radius and typography from the active
       (Bootstrap-based) theme — same token mapping as the other RMM
       front pages. Fallbacks equal the theme's own current values. */
    --rmm-text:          var(--bs-body-color, #212529);
    --rmm-muted:         var(--bs-secondary-color, #6c757d);
    --rmm-surface:       var(--bs-body-bg, #fff);
    --rmm-border:        var(--bs-border-color, #dee2e6);
    --rmm-radius-lg:     var(--bs-border-radius-lg, 0.75rem);

    color: var(--rmm-text);
}

.neworder-page .page-subtitle {
    color: var(--rmm-muted);
    margin-bottom: 1.5rem;
}

/* ----- Cards ------------------------------------------------ */

.neworder-card {
    border-radius: var(--rmm-radius-lg);
}

.neworder-card .card-header {
    background: var(--rmm-surface);
}

/* ----- Items ------------------------------------------------ */

.neworder-item-name {
    font-weight: 600;
}

.neworder-item-attributes {
    font-size: 0.875rem;
    margin-top: 0.125rem;
}

.neworder-item-price {
    font-weight: 600;
    white-space: nowrap;
}

.rmm-remove-item .material-icons {
    font-size: 1rem;
    vertical-align: text-bottom;
}

/* ----- Company card ----------------------------------------- */

.neworder-company-name {
    font-weight: 700;
    margin-bottom: 0.375rem;
}

.neworder-vat {
    font-size: 0.875rem;
    margin-top: 0.5rem;
}

/* ----- Summary ---------------------------------------------- */

.neworder-summary-row {
    padding: 0.25rem 0;
    gap: 1rem;
}

.neworder-summary-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.neworder-summary-total {
    border-top: 1px solid var(--rmm-border);
    margin-top: 0.5rem;
    padding-top: 0.75rem;
}

.neworder-confirm-label,
.rmm-balance-note {
    font-size: 0.875rem;
}

/* ----- Confirm button ----------------------------------------
   The design uses an amber CONFIRM ORDER button (distinct from the
   theme's primary blue). Overridden via Bootstrap 5.3 button vars so
   states (hover/active/disabled) stay consistent; .btn-primary remains
   on the element as the fallback if custom properties ever fail. */

.neworder-page #rmm-confirm-order-btn {
    --rmm-confirm: #c87a2e;
    --bs-btn-bg: var(--rmm-confirm);
    --bs-btn-border-color: var(--rmm-confirm);
    --bs-btn-color: #fff;
    --bs-btn-hover-bg: color-mix(in srgb, var(--rmm-confirm) 85%, #000);
    --bs-btn-hover-border-color: color-mix(in srgb, var(--rmm-confirm) 85%, #000);
    --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: color-mix(in srgb, var(--rmm-confirm) 78%, #000);
    --bs-btn-active-border-color: color-mix(in srgb, var(--rmm-confirm) 78%, #000);
    --bs-btn-active-color: #fff;
    --bs-btn-disabled-bg: color-mix(in srgb, var(--rmm-confirm) 45%, var(--rmm-surface));
    --bs-btn-disabled-border-color: transparent;
    --bs-btn-disabled-color: #fff;
    font-weight: 600;
    letter-spacing: 0.03em;
}