/*
 * Mercato TNG storefront skin, loaded after the platform's stylesheet.
 *
 * Tokens come from the old site's identity (docs/old-site-notes.md):
 * logo blue for structure and the active state, action blue for buttons,
 * amber as the one signal colour (active marker, sale badges). One typeface
 * (Jost, the old site's body font), hierarchy by weight.
 */

:root {
    --mtng-blue: #0d47a1; /* logo blue: links, active, headings accents */
    --mtng-blue-action: #2e6bc6; /* old theme primary: buttons */
    --mtng-blue-soft: #e8eef8; /* tints: hover rows, focus halo */
    --mtng-amber: #fbbc34; /* old theme accent: active marker, sale badge */
    --mtng-ink: #1f2933; /* text */
    --mtng-muted: #5b6673; /* secondary text, AA on white */
    --mtng-line: #e3e7ed; /* borders */
    --mtng-paper: #f5f7fa; /* soft backgrounds */
    --mtng-whatsapp: #25d366;
    --mtng-whatsapp-text: #0d7a3d; /* WhatsApp green readable on white (5.3:1) */
    --mtng-radius: 10px;
    --mtng-font: "Jost", "Segoe UI", system-ui, sans-serif;
}

/* ---------- Typography: one family, weights for hierarchy ---------- */

/* Every element: the platform sets its font on elements directly, not only on
   body. Icon-font elements (icon-*) keep their icon font. */
body,
body :not([class^="icon-"]):not([class*=" icon-"]) {
    font-family: var(--mtng-font) !important;
}

body {
    color: var(--mtng-ink);
}

.font-dmserif {
    font-weight: 600;
}

/*
 * Arabic: Jost has no Arabic glyphs, and letter-spacing breaks Arabic letter
 * joining. Tajawal is geometric like Jost, so both scripts read as one brand.
 */
[dir="rtl"] body,
[dir="rtl"] body :not([class^="icon-"]):not([class*=" icon-"]) {
    font-family: Tajawal, var(--mtng-font) !important;
}

[dir="rtl"] body * {
    letter-spacing: normal !important;
}

/*
 * Arrows in right-to-left: the views ask for "rtl:icon-arrow-left" etc., a
 * variant the precompiled theme CSS does not contain, so breadcrumbs, menus
 * and carousels pointed the wrong way in Arabic. Same icon font glyphs.
 */
[dir="rtl"] [class~="rtl:icon-arrow-left"]::before {
    content: "\e903";
}

[dir="rtl"] [class~="rtl:icon-arrow-right"]::before {
    content: "\e905";
}

[dir="rtl"] [class~="rtl:icon-arrow-left-stylish"]::before {
    content: "\e902";
}

[dir="rtl"] [class~="rtl:icon-arrow-right-stylish"]::before {
    content: "\e904";
}

/* ---------- Brand colours (re-maps the platform's navy token) ---------- */

.text-navyBlue {
    color: var(--mtng-blue) !important;
}

.border-navyBlue {
    border-color: var(--mtng-blue) !important;
}

.ring-navyBlue {
    --tw-ring-color: var(--mtng-blue) !important;
}

.bg-navyBlue,
.primary-button {
    background-color: var(--mtng-blue-action) !important;
    border-color: var(--mtng-blue-action) !important;
    color: #fff !important;
}

.primary-button:hover {
    background-color: var(--mtng-blue) !important;
    border-color: var(--mtng-blue) !important;
}

.secondary-button {
    border-color: var(--mtng-blue-action) !important;
    color: var(--mtng-blue) !important;
}

.secondary-button:hover {
    background-color: var(--mtng-blue-soft) !important;
}

/* Sale badge: the old site's amber signal, dark text for contrast */
.bg-red-600.rounded-\[44px\],
.bg-red-500.rounded-\[44px\] {
    background-color: var(--mtng-amber) !important;
    color: var(--mtng-ink) !important;
    font-weight: 600;
}

/* ---------- Layering ----------
 * The menus and drawers live inside the sticky header, whose z-index caps
 * them: at z-10 (same as the category page's filter bar) an open mobile menu
 * was covered by the filter bar. Order: page bars 10 < WhatsApp 30 < header 40.
 */
header.sticky {
    z-index: 40 !important;
}

/* The top bar (language, currency) is above the header but outside it: its
   dropdowns (z-20) opened under the sticky header (z-40). "Not inside the
   header" has no simple :not() form. */
/* stylelint-disable-next-line selector-not-notation */
.max-lg\:hidden:not(header *) .absolute.z-20 {
    z-index: 50 !important;
}

/*
 * A drawer (z-1000) is capped by the bar it lives in: the category page's
 * filter/sort drawers sit in its z-10 bar, under the header, which hid the
 * filter drawer's title and close button. While a drawer is open, its bar
 * goes on top; the WhatsApp button hides so it covers no drawer content.
 */
.sticky:has(.fixed.z-\[1000\]:not([style*="display: none"])),
.fixed:has(.fixed.z-\[1000\]:not([style*="display: none"])) {
    z-index: 1000 !important;
}

body:has(.fixed.z-\[1000\]:not([style*="display: none"])) .mtng-whatsapp {
    display: none;
}

/* ---------- Header: categories ---------- */

/* Readable labels on one line (were uppercase and wrapped in two lines) */
header .group.relative.flex.h-\[77px\] a,
header .flex.h-\[77px\].cursor-pointer > span {
    text-transform: none;
    white-space: nowrap;
    font-weight: 500;
    padding-inline: 12px;
}

header .group.relative.flex.h-\[77px\]:hover {
    border-bottom-color: var(--mtng-blue) !important;
}

/* Active category: the one bold element of the header */
header .j2hb-nav-active {
    border-bottom-color: var(--mtng-amber) !important;
}

header .j2hb-nav-active > span > a,
header a.j2hb-active {
    color: var(--mtng-blue) !important;
    font-weight: 600;
}

/* Drawers (desktop "Tout" and mobile menu): active row */
a.j2hb-active {
    color: var(--mtng-blue) !important;
    font-weight: 600 !important;
}

div:has(> a.j2hb-active[aria-current="page"]) {
    background-color: var(--mtng-blue-soft);
    box-shadow: inset 3px 0 0 var(--mtng-amber);
}

[dir="rtl"] div:has(> a.j2hb-active[aria-current="page"]) {
    box-shadow: inset -3px 0 0 var(--mtng-amber);
}

/* ---------- Buttons (home intro, contact, empty cart) ---------- */

.mtng-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 48px;
    padding: 0 24px;
    border-radius: var(--mtng-radius);
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
}

.mtng-btn-primary {
    background: var(--mtng-blue-action);
    color: #fff;
}

.mtng-btn-primary:hover {
    background: var(--mtng-blue);
}

.mtng-btn-whatsapp {
    background: #fff;
    color: var(--mtng-whatsapp-text);
    border: 2px solid var(--mtng-whatsapp);
}

.mtng-btn-whatsapp:hover {
    background: #eafaf1;
}

.mtng-btn-call {
    background: #fff;
    color: var(--mtng-blue);
    border: 1px solid var(--mtng-line);
}

.mtng-btn-call:hover {
    background: var(--mtng-blue-soft);
}

/* ---------- Contact page ---------- */

.mtng-contact {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 48px;
    max-width: 1180px;
    margin: 40px auto 0;
    padding-inline: 60px;
}

.mtng-contact-info h1 {
    font-size: 2.25rem;
    line-height: 1.15;
    font-weight: 700;
    color: var(--mtng-ink);
}

.mtng-contact-lead {
    margin-top: 10px;
    line-height: 1.55;
    color: var(--mtng-muted);
}

.mtng-contact-actions {
    display: grid;
    gap: 10px;
    margin-top: 24px;
}

.mtng-contact-info h2,
.mtng-contact-form h2 {
    margin: 32px 0 12px;
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--mtng-ink);
}

.mtng-contact-form h2 {
    margin-top: 0;
}

.mtng-contact-info dl {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 10px 20px;
    font-size: 0.9375rem;
}

.mtng-contact-info dt {
    color: var(--mtng-muted);
}

.mtng-contact-info dd a,
.mtng-contact-social a {
    color: var(--mtng-blue);
    font-weight: 500;
}

.mtng-contact-social {
    display: flex;
    gap: 20px;
}

.mtng-contact-form {
    padding: 32px;
    border: 1px solid var(--mtng-line);
    border-radius: var(--mtng-radius);
    background: #fff;
}

.mtng-contact-submit {
    width: 100% !important;
    max-width: none !important; /* the platform's button is max-content */
    min-height: 48px;
    margin-top: 8px;
    border-radius: var(--mtng-radius);
}

@media (max-width: 1023px) {
    .mtng-contact {
        padding-inline: 30px;
        gap: 32px;
    }
}

@media (max-width: 767px) {
    .mtng-contact {
        grid-template-columns: 1fr;
        margin-top: 24px;
        padding-inline: 16px;
    }

    .mtng-contact-info h1 {
        font-size: 1.75rem;
    }

    .mtng-contact-form {
        padding: 20px 16px;
    }
}

/* ---------- Category page title (rendered by J2hb/Store) ---------- */

.mtng-category-title {
    margin: 32px auto 8px;
    padding-inline: 60px;
    max-width: 1440px;
    font-size: 2rem;
    line-height: 1.2;
    font-weight: 600;
    color: var(--mtng-ink);
}

@media (max-width: 767px) {
    .mtng-category-title {
        margin-top: 20px;
        padding-inline: 16px;
        font-size: 1.5rem;
    }
}

/* Inline WhatsApp link (search without results) */
.mtng-wa-link {
    color: var(--mtng-whatsapp-text);
    font-weight: 600;
    text-decoration: underline;
}

/* ---------- Mobile menu (drawer) ---------- */

.mtng-drawer-nav {
    padding-block: 8px;
}

.mtng-drawer-group {
    border-bottom: 1px solid var(--mtng-line);
}

.mtng-drawer-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* The link fills the row (padding included): the whole row is clickable */
.mtng-drawer-row > a {
    flex: 1;
    display: flex;
    align-items: center;
    min-height: 52px;
    padding-inline: 20px;
    font-size: 1rem;
    font-weight: 500;
    color: var(--mtng-ink);
}

.mtng-drawer-row:hover {
    background-color: var(--mtng-paper);
}

.mtng-drawer-row > [class*="icon-arrow"] {
    margin-inline-end: 20px;
}

/* Subcategories: indented under the parent, on a guide line */
.mtng-drawer-children {
    margin-inline-start: 20px;
    margin-block-end: 10px;
    border-inline-start: 2px solid var(--mtng-line);
}

.mtng-drawer-child > a {
    padding-inline: 16px 20px;
    min-height: 44px;
    font-size: 0.9375rem;
    font-weight: 400;
    color: var(--mtng-muted);
}

.mtng-drawer-help {
    display: grid;
    gap: 10px;
    margin: 24px 20px 96px; /* clear of the fixed language bar */
    padding: 16px;
    border-radius: var(--mtng-radius);
    background: var(--mtng-paper);
}

.mtng-drawer-help p {
    font-weight: 600;
    color: var(--mtng-ink);
}

.mtng-drawer-help a {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 44px;
    border-radius: var(--mtng-radius);
    background: #fff;
    font-weight: 600;
}

.mtng-drawer-wa {
    color: var(--mtng-whatsapp-text);
    border: 2px solid var(--mtng-whatsapp);
}

.mtng-drawer-call {
    color: var(--mtng-blue);
    border: 1px solid var(--mtng-line);
}

/* ---------- Service points (above the footer) ---------- */

.mtng-services {
    margin-top: 64px;
    background: var(--mtng-blue-soft);
}

.mtng-services ul {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    max-width: 1440px;
    margin: 0 auto;
    padding: 28px 60px;
}

.mtng-services li {
    display: flex;
    align-items: center;
    gap: 16px;
}

.mtng-services-icon {
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: #fff;
    color: var(--mtng-blue);
    font-size: 28px;
}

.mtng-services-title {
    font-weight: 600;
    color: var(--mtng-ink);
}

.mtng-services-text {
    margin-top: 2px;
    font-size: 0.875rem;
    line-height: 1.45;
    color: var(--mtng-muted);
}

/* ---------- Footer ---------- */

.mtng-footer {
    background: #fff;
    border-top: 1px solid var(--mtng-line);
}

.mtng-footer-inner {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1.2fr 1fr;
    gap: 40px;
    max-width: 1440px;
    margin: 0 auto;
    padding: 48px 60px;
}

.mtng-footer-brand img {
    width: 160px;
    height: auto;
}

.mtng-footer-brand p {
    margin-top: 14px;
    max-width: 32ch;
    line-height: 1.55;
    color: var(--mtng-muted);
}

.mtng-footer-social {
    display: flex;
    gap: 10px;
    margin-top: 18px;
}

.mtng-footer-social a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid var(--mtng-line);
    color: var(--mtng-blue);
}

.mtng-footer-social a:hover {
    background: var(--mtng-blue-soft);
}

.mtng-footer-social svg {
    width: 20px;
    height: 20px;
}

.mtng-footer-col h2 {
    margin-bottom: 14px;
    font-size: 1rem;
    font-weight: 600;
    color: var(--mtng-ink);
}

.mtng-footer-col ul {
    display: grid;
    gap: 10px;
    font-size: 0.9375rem;
    color: var(--mtng-muted);
}

.mtng-footer-col a {
    color: var(--mtng-muted);
}

.mtng-footer a:hover {
    color: var(--mtng-blue);
    text-decoration: underline;
}

.mtng-footer-bar {
    padding: 14px 16px;
    background: var(--mtng-blue);
    color: #fff;
    font-size: 0.875rem;
    text-align: center;
}

@media (max-width: 1023px) {
    .mtng-services ul {
        padding-inline: 30px;
    }

    .mtng-footer-inner {
        grid-template-columns: 1fr 1fr;
        padding: 40px 30px;
    }
}

@media (max-width: 767px) {
    .mtng-services {
        margin-top: 40px;
    }

    .mtng-services ul {
        grid-template-columns: 1fr;
        gap: 16px;
        padding: 24px 16px;
    }

    .mtng-services-icon {
        width: 44px;
        height: 44px;
        font-size: 24px;
    }

    /* Brand and service details full width; the two short lists side by side */
    .mtng-footer-inner {
        grid-template-columns: 1fr 1fr;
        gap: 28px 20px;
        padding: 32px 16px 96px; /* clear of the floating WhatsApp button */
    }

    .mtng-footer-brand {
        grid-column: 1 / -1;
    }

    /* Order: brand, then links | payment, then service details */
    div.mtng-footer-col:nth-of-type(2) {
        grid-column: 1 / -1;
        order: 2;
    }

    div.mtng-footer-col:nth-of-type(3) {
        order: 1;
    }

    /* Tap targets of at least 40px on phones */
    .mtng-footer-col ul {
        gap: 0;
    }

    .mtng-footer-col li {
        display: flex;
        align-items: center;
        min-height: 40px;
    }
}

/* ---------- Product page ---------- */

.mtng-stock {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
    font-size: 0.9375rem;
    font-weight: 600;
}

.mtng-stock::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentcolor;
}

.mtng-stock.is-in {
    color: #15803d;
}

.mtng-stock.is-out {
    color: #b91c1c;
}

.mtng-short-description {
    margin-top: 28px;
    padding-top: 24px;
    border-top: 1px solid var(--mtng-line);
    font-size: 0.9375rem;
    line-height: 1.65;
    color: var(--mtng-muted);
}

.mtng-short-description strong,
.mtng-short-description b {
    color: var(--mtng-ink);
}

/* Mobile: both purchase buttons full width, large tap targets */
@media (max-width: 639px) {
    .secondary-button.max-sm\:\!w-auto {
        width: 100% !important;
    }

    .primary-button,
    .secondary-button {
        min-height: 48px;
    }
}

/* ---------- Accessibility floor ---------- */

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[role="button"]:focus-visible {
    outline: 3px solid var(--mtng-blue-action);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ---------- Floating WhatsApp button (old site, decision #10) ---------- */

.mtng-whatsapp {
    position: fixed;
    inset-block-end: 20px;
    inset-inline-end: 20px;
    z-index: 30;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--mtng-whatsapp);
    color: #fff;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);

    /* Steps aside while a main button crosses its corner (phones, see whatsapp.blade.php) */
    transition:
        opacity 0.2s ease,
        transform 0.2s ease;
}

.mtng-whatsapp.is-away {
    opacity: 0;
    transform: scale(0.6);
    pointer-events: none;
}

.mtng-whatsapp svg {
    width: 30px;
    height: 30px;
}

/* Keep clear of the mobile filter/sort bar on category pages */
@media (max-width: 767px) {
    .mtng-whatsapp {
        inset-block-end: 72px;
        width: 52px;
        height: 52px;
    }
}

/* A product without a price (safety net behind the back-office rules,
   J2hb\Store\Support\MissingPrice): "Prix sur demande" in place of the price,
   and its card offers no add-to-cart (the cart refuses it anyway). */
.mtng-price-on-request {
    font-weight: 600;
    color: #060c3b;
}

.group.rounded-md:has(.mtng-price-on-request) .action-items .secondary-button {
    display: none;
}