/* =========================================================================
   MG Flasher Shop — Dark theme to match mgflasher.com (new design)
   Loaded last so it overrides the base DefaultClean/MGFlasher styles.
   Fonts (Oxanium + Sarabun) are loaded via <link> in Head.cshtml.
   ========================================================================= */

:root {
    --mg-bg: #050505;
    --mg-bg-2: #0c0c0c;
    --mg-surface: #141414;
    --mg-surface-2: #1b1b1b;
    --mg-card: #141414;
    --mg-border: rgba(255, 255, 255, 0.10);
    --mg-border-soft: rgba(255, 255, 255, 0.06);
    --mg-text: #ffffff;
    --mg-muted: #9a9a9a;
    --mg-muted-2: #707070;
    --mg-red: #ef302b;
    --mg-red-hover: #c8211d;
    --mg-display: 'Oxanium', 'Segoe UI', sans-serif;
    --mg-body: 'Sarabun', 'Segoe UI', sans-serif;
}

/* ---------- base ---------- */
html {
    background-color: var(--mg-bg);
}

body {
    background-color: var(--mg-bg);
    color: var(--mg-muted);
    font-family: var(--mg-body);
    -webkit-font-smoothing: antialiased;
}

.master-wrapper-content,
.master-wrapper-page,
main.c-offcanvas-content-wrap,
.page-container,
.html-home-page,
.home-page {
    background-color: transparent;
}

p, span, li, td, th, dd, dt, label, .text-muted {
    color: var(--mg-muted);
}

/* text inside buttons/links must inherit the control colour, not the muted
   span colour above (otherwise e.g. "QUICK VIEW"/"ADD TO CART" go gray-on-red) */
.btn span, .btn i, .btn .mdi, .btn .add-cart-text,
.button-1 span, .button-2 span, .button-1 .mdi, .button-2 .mdi,
.additional-info .btn span, .add-to-cart-button span, .add-to-wishlist-button span,
a.btn span, .nav-link span {
    color: inherit !important;
}

/* ---------- typography ---------- */
h1, h2, h3, h4, h5, h6,
.generalTitle,
.page-title h1,
.product-title,
.product-name,
.title strong,
.heading {
    font-family: var(--mg-display);
    color: var(--mg-text);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 700;
}

.generalTitle {
    font-weight: 800;
    letter-spacing: 1px;
    margin-bottom: 28px;
    position: relative;
}

/* red accent overline under centered section titles */
.generalTitle.text-center::after,
.generalTitle.text-sm-center::after,
.generalTitle.text-md-center::after {
    content: "";
    display: block;
    width: 64px;
    height: 3px;
    background: var(--mg-red);
    margin: 14px auto 0;
    border-radius: 2px;
}

/* ---------- links ---------- */
a {
    color: var(--mg-red);
}

a:hover {
    color: var(--mg-red-hover);
}

/* ---------- buttons ---------- */
.btn-primary,
.btn-info,
.button-1,
.add-to-cart-button,
.add-to-wishlist-button,
.product-box .button-2,
input[type="submit"].button-1,
.login-button,
.register-button,
.register-next-step-button,
.checkout-button,
.checkout-as-guest-button,
.new-address-next-step-button,
.save-address-button,
.apply-discount-coupon-code-button,
.apply-gift-card-button,
.estimate-shipping-button,
.update-cart-button,
.continue-shopping-button,
.contact-button,
.newsletter-subscribe-button,
.search-button {
    background-color: var(--mg-red) !important;
    border-color: var(--mg-red) !important;
    color: #fff !important;
    font-family: var(--mg-display);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-radius: 999px;
    padding: 9px 22px;
    transition: background-color .15s ease, transform .15s ease;
}

    .btn-primary:hover,
    .btn-info:hover,
    .button-1:hover,
    .add-to-cart-button:hover,
    .add-to-wishlist-button:hover,
    .login-button:hover,
    .register-button:hover,
    .checkout-button:hover,
    .newsletter-subscribe-button:hover,
    .search-button:hover {
        background-color: var(--mg-red-hover) !important;
        border-color: var(--mg-red-hover) !important;
        color: #fff !important;
    }

/* secondary / outline buttons -> translucent on dark */
.btn-secondary,
.button-2,
.btn-outline-secondary,
.btn-light,
.btn-default {
    background-color: rgba(255, 255, 255, 0.06);
    border: 1px solid var(--mg-border);
    color: var(--mg-text);
    font-family: var(--mg-display);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-radius: 999px;
}

    .btn-secondary:hover,
    .button-2:hover,
    .btn-outline-secondary:hover,
    .btn-light:hover,
    .btn-default:hover {
        background-color: rgba(255, 255, 255, 0.12);
        border-color: rgba(255, 255, 255, 0.25);
        color: #fff;
    }

/* ---------- header ---------- */
header[role="presentation"] {
    background-color: var(--mg-bg);
    border-bottom: 1px solid var(--mg-border-soft);
}

    header[role="presentation"] .container {
        background: transparent;
    }

.headBottom {
    padding-top: 10px;
    padding-bottom: 10px;
}

/* header action icons (sign-in, wishlist, cart, menu) */
header .headBottom a,
header .headBottom .mdi,
header .header-links a,
.user-panel-trigger,
.shopping-cart-link a,
.wishlist-qty,
.cart-qty,
header .mdi {
    color: var(--mg-text) !important;
}

header .headBottom a:hover,
header .headBottom a:hover .mdi {
    color: var(--mg-red) !important;
}

/* counts bubbles */
.cart-qty, .wishlist-qty {
    background: var(--mg-red);
    color: #fff !important;
}

/* ---------- top navigation ---------- */
.navbar.mainNav {
    background-color: var(--mg-bg);
    border-top: 1px solid var(--mg-border-soft);
}

.mainNav .navbar-nav .nav-link,
.mainNav .navbar-nav > li > a,
.mainNav a.nav-link {
    color: var(--mg-text);
    font-family: var(--mg-display);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 14px;
}

    .mainNav .navbar-nav .nav-link:hover,
    .mainNav .navbar-nav > li > a:hover,
    .mainNav .navbar-nav .nav-link:focus {
        color: var(--mg-red);
    }

/* "Go to Website" CTA stays a red pill */
.mainNav .nav-link.btn-primary,
.mainNav a.btn-primary {
    color: #fff;
    border-radius: 999px;
    padding: 8px 20px;
}

/* dropdown menus */
.dropdown-menu,
.mainNav .dropdown-menu {
    background-color: var(--mg-surface);
    border: 1px solid var(--mg-border);
}

    .dropdown-menu .dropdown-item,
    .dropdown-menu a {
        color: var(--mg-muted);
    }

        .dropdown-menu .dropdown-item:hover,
        .dropdown-menu a:hover {
            background-color: rgba(255, 255, 255, 0.05);
            color: #fff;
        }

/* ---------- logo (swap to transparent white version) ---------- */
.header-logo .store-logo a img,
.footer .store-logo img {
    display: none;
}

.header-logo .store-logo a {
    display: inline-block;
    width: 210px;
    max-width: 60vw;
    height: 60px;
    background: url('/Themes/MGFlasher/Content/images/logo-white.png') no-repeat left center;
    background-size: contain;
}

/* footer brand logo */
.footer-brand .footer-logo img {
    width: 220px;
    max-width: 70vw;
    height: auto;
    opacity: 0.95;
    transition: opacity .2s ease, transform .2s ease;
}

.footer-brand .footer-logo:hover img {
    opacity: 1;
    transform: translateY(-2px);
}

/* ---------- home: welcome text block ---------- */
.generalMarginSupporter,
.topic-block,
.topic-html-content {
    color: var(--mg-muted);
}

.generalMarginSupporter a,
.topic-html-content a {
    color: var(--mg-red);
}

/* hero / carousel framing — darken & fade into the black page like mgflasher.com */
.carousel.slide,
.bannerHomePage,
.home-page-banner {
    border-radius: 14px;
    overflow: hidden;
    position: relative;
}

.carousel.slide img {
    filter: brightness(0.82) contrast(1.05);
}

.carousel.slide::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 2;
    background: linear-gradient(180deg, rgba(5, 5, 5, 0.55) 0%, rgba(5, 5, 5, 0.10) 38%, rgba(5, 5, 5, 0.88) 100%);
}

/* ---------- product grid & boxes ---------- */
.product-grid .item-grid,
.product-grid {
    background: transparent;
}

.product-box.grid-box,
.product-box {
    background-color: var(--mg-card);
    border: 1px solid var(--mg-border);
    border-radius: 14px;
    overflow: hidden;
    transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}

    .product-box.grid-box:hover,
    .product-box:hover {
        border-color: rgba(255, 255, 255, 0.22);
        transform: translateY(-4px);
        box-shadow: 0 14px 30px rgba(0, 0, 0, 0.55);
    }

/* product image sits on a clean light tile so photos stay legible */
.product-box .picture-container,
.product-box .picture {
    background-color: #f4f4f4;
}

/* the title/price band (.top) is #fff in the base theme -> make it dark so the
   white product title and price are visible (was white-on-white) */
.product-box.grid-box .top,
.product-box.list-box .top,
.product-box .top {
    background-color: transparent !important;
}

/* hover overlays must be dark, not the base #fff (which flashed white on hover) */
.product-box.grid-box .additional-info,
.product-box .additional-info {
    background: var(--mg-card);
}

.product-box.grid-box .box-unvisible {
    background-color: var(--mg-surface);
    border-color: var(--mg-border);
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.65);
}

/* slide-up action bar buttons: full-width red bars (keep base square shape) */
.product-box.grid-box .additional-info .btn,
.product-box .additional-info .btn {
    background: var(--mg-red) !important;
    border-color: var(--mg-red) !important;
    color: #fff !important;
}

    .product-box.grid-box .additional-info .btn:hover,
    .product-box .additional-info .btn:hover {
        background: var(--mg-red-hover) !important;
    }

.product-box .product-title,
.product-box .product-title a,
.product-box.grid-box .title,
.product-box.grid-box .title a,
.product-box.grid-box .title h5,
.product-box.list-box .title a,
.product-box.list-box .title h5 {
    color: var(--mg-text);
    font-family: var(--mg-display);
    text-transform: none;
    font-weight: 600;
    letter-spacing: 0.3px;
}

    .product-box .product-title a:hover,
    .product-box.grid-box .title a:hover,
    .product-box.list-box .title a:hover {
        color: var(--mg-red);
    }

.product-box .description,
.product-box .short-description,
.product-box .desc {
    color: var(--mg-muted-2);
}

/* prices (override base teal #17a2b8 with matching specificity) */
.prices,
.product-box .prices {
    color: var(--mg-text);
}

.product-box .prices .actual-price,
.featured-product .prod-list .actual-price,
.overview-buttons .prices .actual-price,
.associatedItem .actual-price,
.prod-list .actual-price,
.actual-price,
.price.actual-price,
.product-price span,
.product-box .actual-price {
    color: var(--mg-text);
    font-family: var(--mg-display);
    font-weight: 700;
}

.product-box .prices .old-price,
.old-price,
.non-actual-price {
    color: var(--mg-muted-2);
    text-decoration: line-through;
}

.product-box .add-info,
.product-box .buttons,
.product-box .details {
    background: transparent;
}

/* ---------- category navigation sidebar ---------- */
.block .list a,
.list a,
.sublist a,
.inactive a {
    color: var(--mg-muted);
}

    .block .list a:hover,
    .list a:hover,
    .sublist a:hover {
        color: #fff;
    }

.list .active > a,
.sublist .active > a {
    color: var(--mg-red);
}

/* sub-category tiles (rendered as bootstrap cards) */
.card .card-title,
.card-title,
.card-title a,
.list-title .card-title {
    color: var(--mg-text) !important;
    font-family: var(--mg-display);
}

/* ---------- product detail page ---------- */
.product-essential,
.product-details-page,
.overview,
.product-collateral {
    color: var(--mg-muted);
}

.product-name h1,
.product-details-page .product-name {
    color: var(--mg-text);
    font-family: var(--mg-display);
}

.product-details-page .prices .product-price,
.product-price .price {
    color: var(--mg-text);
    font-family: var(--mg-display);
    font-weight: 800;
}

.gallery,
.picture-thumbs,
.product-details-page .picture {
    background-color: #f4f4f4;
    border-radius: 12px;
}

/* tabs / blocks on dark */
.block .title,
.product-collateral .title,
.tab-content,
.nav-tabs .nav-link {
    color: var(--mg-text);
}

.nav-tabs {
    border-bottom: 1px solid var(--mg-border);
}

    .nav-tabs .nav-link.active {
        background: transparent;
        color: var(--mg-red);
        border-color: transparent transparent var(--mg-red);
    }

/* product tabs (DESCRIPTION / SPECIFICATIONS) - labels live in inner spans */
.nav-tabs.product-tabs .nav-link,
.nav-tabs.product-tabs .nav-link span,
.product-tabs .nav-link,
.product-tabs .nav-link span {
    color: var(--mg-muted) !important;
    font-family: var(--mg-display);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

    .nav-tabs.product-tabs .nav-link.active,
    .nav-tabs.product-tabs .nav-link.active span,
    .product-tabs .nav-link.active,
    .product-tabs .nav-link.active span {
        color: var(--mg-text) !important;
    }

/* ---------- forms / inputs ---------- */
.form-control,
.custom-select,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
textarea,
select {
    background-color: var(--mg-surface);
    border: 1px solid var(--mg-border);
    color: var(--mg-text);
}

    .form-control:focus,
    .custom-select:focus,
    textarea:focus,
    select:focus {
        background-color: var(--mg-surface-2);
        border-color: var(--mg-red);
        color: var(--mg-text);
        box-shadow: 0 0 0 0.15rem rgba(239, 48, 43, 0.25);
    }

    .form-control::placeholder {
        color: var(--mg-muted-2);
    }

label, .form-label {
    color: var(--mg-muted);
}

/* ---------- offcanvas side panels (user, mobile menu, filters) ---------- */
.c-offcanvas,
#user_panel,
#mobile_menu,
.mobile-filters,
.user-panel-head,
.user-panel-content {
    background-color: var(--mg-surface) !important;
    color: var(--mg-muted);
}

    #user_panel a,
    #mobile_menu a,
    .user-panel-content a {
        color: var(--mg-muted);
    }

        #user_panel a:hover,
        #mobile_menu a:hover {
            color: #fff;
        }

/* ---------- breadcrumb ---------- */
.breadcrumb,
.breadcrumb-item,
.breadcrumb-item a {
    color: var(--mg-muted);
}

.breadcrumb-item.active,
.breadcrumb-item.active strong {
    color: var(--mg-text);
}

/* ---------- tables / cart ---------- */
.table,
.cart,
.cart-total,
.order-summary-content,
.data-table {
    color: var(--mg-muted);
}

    .table th,
    .cart th,
    .table thead th {
        color: var(--mg-text);
        border-color: var(--mg-border);
        background-color: var(--mg-surface);
        font-family: var(--mg-display);
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    .table td,
    .cart td {
        border-color: var(--mg-border-soft);
    }

.cart a.product-name,
.order-summary-content .product-name {
    color: var(--mg-text);
}

/* ---------- conversion funnel (cart / checkout / order) ---------- */
/* cart row cells are #fff in the base theme -> make them transparent (dark) */
.remove-from-cart,
.product-picture,
.cart .product,
.unit-price,
.quantity,
.subtotal,
.cart tbody td,
.cart-item-row td,
.order-review-data td,
.order-details-area td,
.data-table td {
    background-color: transparent !important;
    border-color: var(--mg-border-soft) !important;
    color: var(--mg-muted);
}

/* boxed panels across cart + checkout become dark surfaces */
.deals,
.cart-options,
.totals,
.order-summary-content,
.cart-total,
.checkout-data .section,
.checkout-page .section,
.order-review-data,
.order-details-area .section,
.billing-info-wrap,
.shipping-info-wrap,
.selected-checkout-attributes,
.checkout-attributes,
.address-item,
.method-list .method-item,
.shipping-method,
.payment-method,
.order-progress {
    background-color: var(--mg-surface) !important;
    border: 1px solid var(--mg-border);
    border-radius: 12px;
    color: var(--mg-muted);
}

/* totals rows / labels */
.order-summary-content .cart-total td,
.order-summary-content td,
.totals td,
.cart-total td {
    background-color: transparent !important;
    color: var(--mg-muted);
    border-color: var(--mg-border-soft) !important;
}

    .order-summary-content .cart-total .order-total,
    .order-summary-content .order-total,
    .totals .order-total td,
    .cart-total .order-total {
        color: var(--mg-text);
        font-family: var(--mg-display);
        font-weight: 700;
    }

/* checkout step headings / progress */
.checkout-page .page-title,
.opc .step-title,
.order-progress li a,
.checkout-data .title,
.order-review-data .title {
    color: var(--mg-text);
}

.order-progress li.active a,
.order-progress li.done a {
    color: var(--mg-red);
}

/* one-page checkout step boxes */
.opc .checkout-data,
.opc .step,
.opc .buttons {
    background-color: transparent;
}

.opc .step {
    border: 1px solid var(--mg-border);
    border-radius: 12px;
    background-color: var(--mg-surface);
}

/* card-like content blocks used across account / checkout */
.page.account-page .block,
.section,
.box,
.well,
.card {
    background-color: var(--mg-surface);
    border: 1px solid var(--mg-border);
    color: var(--mg-muted);
}

/* ---------- pagination ---------- */
.pagination .page-link {
    background-color: var(--mg-surface);
    border-color: var(--mg-border);
    color: var(--mg-muted);
}

    .pagination .page-item.active .page-link {
        background-color: var(--mg-red);
        border-color: var(--mg-red);
        color: #fff;
    }

/* ---------- alerts / notifications ---------- */
.bar-notification,
.alert {
    border-radius: 10px;
}

/* ---------- footer ---------- */
footer,
footer.mt-3,
footer .footer-upper,
footer .footer-lower,
.footer,
.footer-upper,
.footer-lower {
    background-color: var(--mg-bg-2);
    color: var(--mg-muted);
}

footer {
    border-top: 1px solid var(--mg-border-soft);
    padding-top: 40px;
}

footer .footer-block .title,
footer .footer-block .title strong,
.footer-block .title,
.footer-block h3,
footer .title strong {
    color: var(--mg-text);
    font-family: var(--mg-display);
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 700;
}

footer .footer-block a,
footer a,
footer li a {
    color: var(--mg-muted);
}

    footer .footer-block a:hover,
    footer a:hover {
        color: #fff;
    }

footer .text-copyright,
.footer-disclaimer,
footer .footer-lower.small {
    color: var(--mg-muted-2);
}

footer .social a,
footer .social .mdi,
footer .viewBox a,
footer .viewBox .mdi {
    color: var(--mg-muted);
}

    footer .social a:hover,
    footer .viewBox a:hover {
        color: var(--mg-red);
    }

/* ---------- misc ---------- */
hr {
    border-color: var(--mg-border-soft);
}

.modal-content {
    background-color: var(--mg-surface);
    color: var(--mg-muted);
    border: 1px solid var(--mg-border);
}

::selection {
    background: var(--mg-red);
    color: #fff;
}

/* =========================================================================
   Base-theme light-leftover remediation — overrides hard-coded light/teal
   colours from style.css that escape the dark theme on secondary surfaces
   (flyout cart, quick-view, checkout steps, popups, sidebar, footer, etc.).
   ========================================================================= */

/* teal (#17a2b8) / green (#26A69A) accents from the base theme -> brand red */
.shopping-links .nav-link,
.generalLeftSide li a:hover,
.generalLeftSide li.active.last > a,
.generalLeftSide .product-spec-group .spec-link,
.catalog-product-price {
    color: var(--mg-red) !important;
}

/* teal active bullets in the category sidebar */
.viewBox > .list > li.active::before,
.viewBox .list li.active::before,
.generalLeftSide .block-category-navigation li.active > .sublist > li a::before {
    background: var(--mg-red) !important;
}

/* header currency / language / tax / store selector trigger buttons */
.currency-selector .btn-group .btn,
.tax-type-button .btn,
.language-selector .btn,
.store-selector .btn {
    background-color: var(--mg-surface) !important;
    color: var(--mg-text) !important;
}

/* flyout / mini-cart drawer (base text is #1D1F20 -> dark-on-dark) */
.flyout-cart,
.flyout-cart .name a,
.flyout-cart .price strong,
.flyout-cart .quantity strong,
.flyout-cart .count,
.flyout-cart .totals,
.mini-shopping-cart {
    color: var(--mg-text) !important;
}

    .flyout-cart .item {
        border-bottom-color: var(--mg-border-soft) !important;
    }

    .flyout-cart .name a:hover {
        color: var(--mg-red) !important;
    }

/* product quick-view modal */
.product-quickview .product-details-page,
.product-quickview,
.zoom-anim-dialog {
    background: var(--mg-surface) !important;
    color: var(--mg-muted);
}

.quick-close::before,
.quick-close::after {
    background: var(--mg-text) !important;
}

/* mobile menu nav links (base sets #000 / #1D1F20 inside media queries) */
#mobile_menu .nav-link,
#mobile_menu .navbar-nav .nav-link,
#mobile_menu li > a,
#mobile_menu a {
    color: var(--mg-muted) !important;
}

    #mobile_menu .nav-link:hover,
    #mobile_menu a:hover {
        color: #fff !important;
    }

/* one-page checkout step indicators */
.opc .card-grey,
.opc ul.opc > li,
.opc .step-title {
    background-color: var(--mg-surface) !important;
    border-color: var(--mg-border) !important;
    color: var(--mg-muted);
}

ul.opc h5,
.opc h5 {
    background-color: var(--mg-surface-2) !important;
    color: var(--mg-text) !important;
}

/* EU cookie consent banner (base is teal rgba(23,162,184,.9)) */
.eu-cookie-bar-notification {
    background: var(--mg-surface) !important;
    border: 1px solid var(--mg-border);
    color: var(--mg-muted);
}

/* jQuery UI autocomplete + datepicker popups */
ul.ui-autocomplete,
.ui-datepicker,
.ui-widget-content {
    background-color: var(--mg-surface) !important;
    border: 1px solid var(--mg-border) !important;
    color: var(--mg-muted) !important;
}

    ul.ui-autocomplete .ui-menu-item,
    ul.ui-autocomplete a,
    .ui-datepicker a,
    .ui-datepicker td a {
        color: var(--mg-muted) !important;
        border-color: var(--mg-border-soft) !important;
    }

    ul.ui-autocomplete .ui-state-active,
    ul.ui-autocomplete .ui-menu-item a:hover,
    .ui-datepicker .ui-state-hover,
    .ui-datepicker .ui-state-active {
        background: var(--mg-red) !important;
        color: #fff !important;
    }

/* product-detail thumbnail strip (base #fff bg + 4px #fff border) */
.sp-thumbs a:link,
.sp-thumbs a:visited,
.sp-thumbs a {
    background-color: #f4f4f4 !important;
    border-color: var(--mg-border) !important;
}

/* progress bars (polls etc.) */
.progress {
    background-color: var(--mg-surface-2) !important;
}

.progress-bar {
    background-color: var(--mg-red) !important;
}

/* main content wrap (#fafaf8 cream) + Bootstrap list-group white */
.c-offcanvas-content-wrap {
    background-color: transparent !important;
}

.list-group-item {
    background-color: transparent !important;
    border-color: var(--mg-border-soft) !important;
    color: var(--mg-muted);
}

/* footer light leftovers */
footer .newsletter-container,
.newsletter-container {
    background: var(--mg-surface) !important;
    border: 1px solid var(--mg-border);
    border-radius: 12px;
}

.footer-lower {
    border-top-color: var(--mg-border-soft) !important;
}

/* pagination: base '.pagination .page-item .page-link' (#fff) is (0,3,0);
   the pager emits '.current-page' (not '.active') for the active page */
.pagination .page-item .page-link,
.pagination li .page-link,
.pagination li a {
    background-color: var(--mg-surface) !important;
    color: var(--mg-muted) !important;
    border-color: var(--mg-border) !important;
}

    .pagination .page-item .page-link:hover,
    .pagination li a:hover {
        background-color: var(--mg-surface-2) !important;
        color: #fff !important;
    }

.pagination .current-page .page-link,
.pagination li.current-page a,
.pagination .page-item.active .page-link {
    background-color: var(--mg-red) !important;
    border-color: var(--mg-red) !important;
    color: #fff !important;
}

/* back-to-top FAB -> brand red (base uses old #E31111) */
#back-to-top,
.back-to-top {
    background-color: var(--mg-red) !important;
}

/* checkboxes & radios get the brand accent instead of white native boxes */
input[type="checkbox"],
input[type="radio"] {
    accent-color: var(--mg-red);
}

/* --- round 3: mobile + modal + banner remediation --- */

/* mobile search modal (base uses ID-specificity #f7f7f7 / #fff) */
#searchModal .modal-content,
#searchModal .modal-body,
#searchModal .modal-dialog,
#searchModal .input-group {
    background-color: var(--mg-surface) !important;
    color: var(--mg-muted) !important;
}

#searchModal .search-box-text,
#searchModal .search-box-select,
#searchModal input,
#searchModal select {
    background-color: var(--mg-bg-2) !important;
    color: var(--mg-text) !important;
    border-color: var(--mg-border) !important;
}

/* generic Bootstrap modals */
.modal-content,
.modal-header,
.modal-body,
.modal-footer {
    background-color: var(--mg-surface) !important;
    border-color: var(--mg-border) !important;
    color: var(--mg-muted);
}

/* shopping-cart page rows/cells (incl. the mobile white-card media query) */
.shopping-cart tr,
.shopping-cart tbody tr,
.shopping-cart tbody tr:nth-child(even),
.shopping-cart td,
.shopping-cart th {
    background-color: transparent !important;
    border-color: var(--mg-border-soft) !important;
}

    .shopping-cart th {
        color: var(--mg-text) !important;
    }

    .shopping-cart .quantity {
        font-family: var(--mg-body) !important;
    }

/* order details totals box */
.order-details-page .totals table,
.order-details-page .totals td,
.order-details-page .totals th {
    background-color: var(--mg-surface) !important;
    border-color: var(--mg-border) !important;
    color: var(--mg-muted);
}

/* Bootstrap colour-utility banners (.bg-info teal etc. used on
   password-recovery, contact, activation, wishlist, news, product boxes) */
.bg-info,
.card.bg-info,
.bg-primary,
.bg-secondary,
.bg-white,
.bg-light {
    background-color: var(--mg-surface) !important;
    border-color: var(--mg-border) !important;
}

.card.bg-info {
    border-left: 3px solid var(--mg-red) !important;
}

/* card header / footer near-dark text (#4c4c4c) on dark surface */
.card-header,
.card-footer {
    background-color: var(--mg-surface-2) !important;
    color: var(--mg-text) !important;
    border-color: var(--mg-border) !important;
}

/* --- round 4: final coverage fixes --- */

/* native form controls (select option popups, date pickers, scrollbars) render dark */
html {
    color-scheme: dark;
}

/* product-detail MOBILE tab active label (base uses ID specificity #1D1F20) */
#pills-mobile-tab .nav-item .nav-link,
#pills-mobile-tab .nav-item .nav-link.active,
#pills-mobile-tab .nav-link span {
    color: var(--mg-text) !important;
}

/* catalog sort / items-per-page dropdowns (.selectdiv select #fff) */
.selectdiv select,
.selectdiv {
    background-color: var(--mg-surface) !important;
    color: var(--mg-text) !important;
    border-color: var(--mg-border) !important;
}

/* Bootstrap alert variants -> dark surface with a coloured accent edge */
.alert-success,
.alert-danger,
.alert-warning,
.alert-info {
    background-color: var(--mg-surface) !important;
    color: var(--mg-text) !important;
    border-color: var(--mg-border) !important;
}

.alert-success { border-left: 3px solid #2ecc71 !important; }
.alert-danger  { border-left: 3px solid var(--mg-red) !important; }
.alert-warning { border-left: 3px solid #f0a020 !important; }
.alert-info    { border-left: 3px solid #3a9bdc !important; }

/* account navigation sidebar links (base #4c4c4c, specificity 0,3,1) */
.block-account-navigation .list li a,
.block-account-navigation .list a {
    background-color: var(--mg-surface-2) !important;
    color: var(--mg-muted) !important;
}

    .block-account-navigation .list li a:hover,
    .block-account-navigation .list li.active a {
        color: #fff !important;
        border-left: 3px solid var(--mg-red);
    }

/* return-request table head (#ececec) */
.return-request-table thead,
.return-request-table th {
    background-color: var(--mg-surface) !important;
    border-color: var(--mg-border) !important;
    color: var(--mg-text) !important;
}

/* product flag badges keep a brand-red highlight (not a dull dark chip) */
.badge.bg-info,
.badge.bg-info.text-white,
.product-box .badge.bg-info {
    background-color: var(--mg-red) !important;
    color: #fff !important;
    border-color: var(--mg-red) !important;
}

/* flyout cart header uses old #E31111 -> brand red */
.flyout-cart-header,
.flyout-cart .header,
.mini-shopping-cart .header {
    background-color: var(--mg-red) !important;
}

/* product rating stars -> muted empty, brand-aligned filled (was off-brand orange) */
.rating-box {
    background-color: transparent;
}

    .rating-box .rating,
    .product-rating-box .rating {
        filter: none;
    }

/* =========================================================================
   Interactions & motion — give the shop the same "alive" feel as
   mgflasher.com: smooth hovers, button press feedback, card/image motion.
   ========================================================================= */

html {
    scroll-behavior: smooth;
}

a,
.btn,
button,
.nav-link,
.mainNav .navbar-nav .nav-link,
.product-box,
.product-box .picture img,
.card,
.footer-block a,
.pagination .page-link,
input,
select,
textarea,
.mdi {
    transition: color .18s ease, background-color .18s ease, border-color .18s ease,
                box-shadow .2s ease, transform .2s ease, opacity .18s ease;
}

/* primary (red) buttons: lift + glow on hover, press down on click */
.btn-primary:hover,
.btn-info:hover,
.button-1:hover,
.login-button:hover,
.register-button:hover,
.checkout-button:hover,
.add-to-cart-button:hover,
.newsletter-subscribe-button:hover,
.search-button:hover,
.contact-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(239, 48, 43, 0.38);
}

.btn:active,
.button-1:active,
.button-2:active,
.btn-primary:active,
.btn-info:active,
.login-button:active,
.register-button:active,
.add-to-cart-button:active,
.add-to-wishlist-button:active,
.checkout-button:active,
.search-button:active {
    transform: translateY(0) scale(0.97);
    box-shadow: none;
}

/* secondary / translucent buttons: subtle lift */
.btn-secondary:hover,
.button-2:hover,
.btn-outline-secondary:hover,
.btn-light:hover,
.btn-default:hover {
    transform: translateY(-2px);
}

/* top-nav links: animated red underline grows from the left on hover */
.mainNav .navbar-nav .nav-link {
    position: relative;
}

    .mainNav .navbar-nav .nav-link::after {
        content: "";
        position: absolute;
        left: 0;
        bottom: 2px;
        width: 0;
        height: 2px;
        background: var(--mg-red);
        transition: width .24s ease;
    }

    .mainNav .navbar-nav .nav-link:hover::after {
        width: 100%;
    }

/* keep the red pill CTA in the nav free of the underline */
.mainNav .nav-link.btn-primary::after,
.mainNav a.btn-primary::after {
    display: none;
}

/* product cards: image zooms inside the clipped tile on hover */
.product-box .picture,
.product-box .picture-container {
    overflow: hidden;
}

.product-box .picture img {
    transition: transform .4s ease;
}

.product-box:hover .picture img {
    transform: scale(1.06);
}

/* header action icons nudge/scale on hover */
header .headBottom a:hover .mdi,
header .user-panel-trigger:hover .mdi,
header .shopping-cart-link:hover .mdi {
    transform: scale(1.12);
}

/* footer links slide slightly on hover */
.footer-block a:hover,
footer .footer-block a:hover {
    transform: translateX(3px);
}

/* social icons pop on hover */
footer .social a:hover,
footer .viewBox a:hover {
    transform: translateY(-2px) scale(1.1);
}

/* accessible focus ring in brand red */
a:focus-visible,
.btn:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.nav-link:focus-visible {
    outline: 2px solid var(--mg-red);
    outline-offset: 2px;
}

/* =========================================================================
   Page-level motion — scroll-triggered reveals (mirrors the new site's
   GSAP/ScrollTrigger feel) + sticky condensing header + hero parallax.
   Hidden state is gated on html.mg-js so it only applies once JS is active
   (no-JS / failed-JS users see everything), and is set up before first paint
   by a tiny inline script in Head.cshtml to avoid any flash.
   ========================================================================= */
html.mg-js :is(.generalTitle, .generalMarginSupporter, .product-box, .card,
               .footer-block, .page-title, .product-essential, .product-collateral,
               .topic-block, .topic-html-content, .contact-page, .block) {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity .7s cubic-bezier(.16, .7, .3, 1),
                transform .7s cubic-bezier(.16, .7, .3, 1);
    transition-delay: var(--mg-reveal-delay, 0s);
    will-change: opacity, transform;
}

    html.mg-js :is(.generalTitle, .generalMarginSupporter, .product-box, .card,
                   .footer-block, .page-title, .product-essential, .product-collateral,
                   .topic-block, .topic-html-content, .contact-page, .block).mg-in {
        opacity: 1;
        transform: none;
    }

/* sticky condensing header with blur on scroll */
header[role="presentation"] {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 1000;
    transition: background-color .3s ease, box-shadow .3s ease, padding .3s ease;
}

    header[role="presentation"].mg-header-scrolled {
        background-color: rgba(5, 5, 5, 0.82);
        -webkit-backdrop-filter: blur(12px);
        backdrop-filter: blur(12px);
        box-shadow: 0 8px 30px rgba(0, 0, 0, 0.55);
    }

        header[role="presentation"].mg-header-scrolled .headBottom {
            padding-top: 6px;
            padding-bottom: 6px;
        }

/* honour users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    html.mg-js :is(.generalTitle, .generalMarginSupporter, .product-box, .card,
                   .footer-block, .page-title, .product-essential, .product-collateral,
                   .topic-block, .topic-html-content, .contact-page, .block) {
        opacity: 1;
        transform: none;
        transition: none;
    }

    *,
    *::before,
    *::after {
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
    }
}