/* -----------------------------------------------------------------------------
   Nuno storefront theme
   Brings the customer web storefront in line with the Nuno-branded admin and
   vendor panels. Companion to:
     - public/assets/backend/admin/css/nuno-admin.css
     - public/assets/backend/vendor/css/nuno-vendor.css
   Loaded last in resources/themes/default/layouts/front-end/app.blade.php so it
   wins over the inline colour block and the shipped theme CSS.

   The storefront theme is almost entirely CSS-variable driven (--base,
   --web-primary*, --bs-base-rgb, ...). Re-pointing those variables re-tints the
   whole site; the rules below only add the polish that variables alone miss
   (typography, surfaces, borders, radii, shadows).
--------------------------------------------------------------------------------- */

:root {
    --nuno-primary: #f58220;
    --nuno-primary-rgb: 245, 130, 32;
    --nuno-primary-hover: #df6f12;
    --nuno-primary-active: #c95f0c;
    --nuno-primary-light: #fff3e8;
    --nuno-primary-soft: #fff8f1;
    --nuno-ink: #1f2937;
    --nuno-text-muted: #6b7280;
    --nuno-border: #e5e7eb;
    --nuno-surface: #ffffff;
    --nuno-surface-muted: #f8fafc;
    --nuno-info: #0284c7;
    --nuno-success: #16a34a;
    --nuno-warning: #d97706;
    --nuno-danger: #dc2626;
    --nuno-radius-sm: 8px;
    --nuno-radius-md: 12px;
    --nuno-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
    --nuno-shadow-md: 0 10px 25px rgba(15, 23, 42, 0.08);
    --nuno-font: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

    /* re-point the shipped storefront palette to Nuno */
    --base: var(--nuno-primary);
    --base-2: var(--nuno-info);
    --bs-base-rgb: var(--nuno-primary-rgb);
    --web-primary: var(--nuno-primary);
    --web-primary-10: rgba(var(--nuno-primary-rgb), 0.06);
    --web-primary-20: rgba(var(--nuno-primary-rgb), 0.12);
    --web-primary-40: rgba(var(--nuno-primary-rgb), 0.24);
    --web-secondary: var(--nuno-info);
    --primary-clr-rgb: var(--nuno-primary-rgb);

    /* bootstrap 5 tokens the theme leans on */
    --bs-primary: var(--nuno-primary);
    --bs-primary-rgb: var(--nuno-primary-rgb);
    --bs-link-color: var(--nuno-primary);
    --bs-link-color-rgb: var(--nuno-primary-rgb);
    --bs-link-hover-color: var(--nuno-primary-hover);
    --bs-border-color: var(--nuno-border);
    --bs-body-color: var(--nuno-text-muted);
    --bs-heading-color: var(--nuno-ink);
    --bs-body-font-family: var(--nuno-font);
    --font-family-sans-serif: var(--nuno-font);
}

/* --------------------------------- base --------------------------------- */
body.nuno-web {
    background-color: var(--nuno-surface-muted);
    color: var(--nuno-text-muted);
    font-family: var(--nuno-font);
}

body.nuno-web input,
body.nuno-web select,
body.nuno-web textarea,
body.nuno-web button,
body.nuno-web .btn,
body.nuno-web .navbar,
body.nuno-web .form-control,
body.nuno-web .form-select {
    font-family: var(--nuno-font);
}

body.nuno-web h1,
body.nuno-web h2,
body.nuno-web h3,
body.nuno-web h4,
body.nuno-web h5,
body.nuno-web h6,
body.nuno-web .headerTitle,
body.nuno-web .section-title {
    color: var(--nuno-ink);
    font-family: var(--nuno-font);
    font-weight: 700;
}

body.nuno-web :focus-visible {
    outline: 3px solid rgba(var(--nuno-primary-rgb), 0.28);
    outline-offset: 2px;
}

/* --------------------------------- links -------------------------------- */
body.nuno-web a {
    color: var(--nuno-primary);
}

body.nuno-web a:hover {
    color: var(--nuno-primary-hover);
}

body.nuno-web a.text-dark,
body.nuno-web a.text-body,
body.nuno-web a.text-reset,
body.nuno-web .navbar-brand,
body.nuno-web .nav-link {
    color: inherit;
}

body.nuno-web .text-primary,
body.nuno-web .c1,
body.nuno-web .product-price,
body.nuno-web .discounted-unit-price,
body.nuno-web .featured_product-price,
body.nuno-web .flash-product-price,
body.nuno-web .category-single-product-price {
    color: var(--nuno-primary) !important;
}

/* --------------------------------- header ------------------------------- */
body.nuno-web .header,
body.nuno-web .navbar-sticky.navbar-stuck,
body.nuno-web .navbar-stuck-menu {
    background-color: var(--nuno-surface);
}

body.nuno-web .navbar-stuck-menu {
    border-bottom: 1px solid var(--nuno-border);
}

body.nuno-web .topbar,
body.nuno-web .header-top,
body.nuno-web .top-header {
    background: var(--nuno-primary);
    color: #fff;
}

body.nuno-web .search_button {
    background-color: var(--nuno-primary);
    border-color: var(--nuno-primary);
}

body.nuno-web .search_button:hover {
    background-color: var(--nuno-primary-hover);
}

body.nuno-web .mega-nav .nav-item .nav-link,
body.nuno-web .navbar-light .navbar-tool-icon-box {
    color: var(--nuno-primary) !important;
}

/* -------------------------------- buttons ------------------------------- */
body.nuno-web .btn,
body.nuno-web .form-control,
body.nuno-web .form-select,
body.nuno-web .input-group > .form-control {
    border-radius: var(--nuno-radius-sm);
}

body.nuno-web .btn--primary,
body.nuno-web .btn-primary {
    --bs-btn-bg: var(--nuno-primary);
    --bs-btn-border-color: var(--nuno-primary);
    --bs-btn-hover-bg: var(--nuno-primary-hover);
    --bs-btn-hover-border-color: var(--nuno-primary-hover);
    --bs-btn-active-bg: var(--nuno-primary-active);
    --bs-btn-active-border-color: var(--nuno-primary-active);
    background-color: var(--nuno-primary);
    border-color: var(--nuno-primary);
    color: #fff;
    box-shadow: 0 8px 18px rgba(var(--nuno-primary-rgb), 0.20);
    font-weight: 600;
}

body.nuno-web .btn--primary:hover,
body.nuno-web .btn-primary:hover,
body.nuno-web .btn--primary:focus,
body.nuno-web .btn-primary:focus {
    background-color: var(--nuno-primary-hover);
    border-color: var(--nuno-primary-hover);
    color: #fff;
}

body.nuno-web .btn--primary:active,
body.nuno-web .btn-primary:active {
    background-color: var(--nuno-primary-active);
    border-color: var(--nuno-primary-active);
}

body.nuno-web .btn-outline-primary {
    border-color: var(--nuno-primary);
    color: var(--nuno-primary);
}

body.nuno-web .btn-outline-primary:hover,
body.nuno-web .btn-outline-primary:focus {
    background-color: var(--nuno-primary);
    border-color: var(--nuno-primary);
    color: #fff;
}

body.nuno-web .btn-scroll-top {
    background-color: var(--nuno-primary);
}

/* --------------------------------- forms -------------------------------- */
body.nuno-web .form-control:focus,
body.nuno-web .form-select:focus {
    border-color: var(--nuno-primary);
    box-shadow: 0 0 0 0.2rem rgba(var(--nuno-primary-rgb), 0.16);
}

body.nuno-web .form-check-input:checked {
    background-color: var(--nuno-primary);
    border-color: var(--nuno-primary);
}

/* --------------------------------- cards -------------------------------- */
body.nuno-web .card {
    border: 1px solid var(--nuno-border);
    border-radius: var(--nuno-radius-md);
    box-shadow: var(--nuno-shadow-sm);
}

body.nuno-web .card > .card-header {
    background: transparent;
    border-bottom-color: var(--nuno-border);
}

body.nuno-web .product-card,
body.nuno-web .recommended-product-card {
    border: 1px solid var(--nuno-border);
    border-radius: var(--nuno-radius-md);
    transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

body.nuno-web .product-card:hover,
body.nuno-web .recommended-product-card:hover {
    border-color: rgba(var(--nuno-primary-rgb), 0.36);
    box-shadow: var(--nuno-shadow-md);
    transform: translateY(-2px);
}

body.nuno-web .product-card-shadow {
    box-shadow: var(--nuno-shadow-sm) !important;
}

body.nuno-web .discount-badge {
    background-color: var(--nuno-primary) !important;
    border-radius: 999px;
}

/* ------------------------------ pagination ----------------------------- */
body.nuno-web .page-link {
    color: var(--nuno-primary);
}

body.nuno-web .page-item.active .page-link {
    background-color: var(--nuno-primary);
    border-color: var(--nuno-primary);
    color: #fff;
}

body.nuno-web .nav-pills .nav-link.active {
    background-color: var(--nuno-primary);
    color: #fff;
}

/* -------------------------------- badges ------------------------------ */
body.nuno-web .badge.bg-info,
body.nuno-web .text-bg-info {
    background-color: rgba(2, 132, 199, 0.12) !important;
    color: #075985 !important;
}

body.nuno-web .badge.bg-success,
body.nuno-web .text-bg-success {
    background-color: rgba(22, 163, 74, 0.12) !important;
    color: #166534 !important;
}

body.nuno-web .badge.bg-warning,
body.nuno-web .text-bg-warning {
    background-color: rgba(217, 119, 6, 0.14) !important;
    color: #9a3412 !important;
}

/* -------------------------------- footer ----------------------------- */
body.nuno-web .footer,
body.nuno-web footer.footer {
    background-color: var(--nuno-surface);
    border-top: 1px solid var(--nuno-border);
    color: var(--nuno-text-muted);
}

body.nuno-web .footer .footer-widget-title,
body.nuno-web .footer h5,
body.nuno-web .footer h6 {
    color: var(--nuno-ink);
}

body.nuno-web .footer-web-logo a img,
body.nuno-web .navbar-brand img,
body.nuno-web .mobile-logo-img {
    max-height: 46px;
    width: auto;
    object-fit: contain;
}

/* ------------------------------ dropdowns ---------------------------- */
body.nuno-web .dropdown-menu {
    border: 1px solid var(--nuno-border);
    border-radius: var(--nuno-radius-md);
    box-shadow: var(--nuno-shadow-md);
}

body.nuno-web .dropdown-item.active,
body.nuno-web .dropdown-item:active,
body.nuno-web .dropdown-item:hover {
    background-color: var(--nuno-primary-soft);
    color: var(--nuno-primary-hover);
}

/* ------------------------------ responsive --------------------------- */
@media (max-width: 575.98px) {
    body.nuno-web .card,
    body.nuno-web .product-card,
    body.nuno-web .recommended-product-card {
        border-radius: var(--nuno-radius-sm);
    }
}