/* ===========================================================================
   Mekapart homepage redesign — flat Nordson-blue theme (#007ac9)
   Loaded last in UserMaster.master so it cleanly overrides the legacy CSS
   without needing to touch the original files.
   =========================================================================== */

/* ---------- hero slider ---------- */
/* global.css pins the top nav (#clone) as "position: fixed; top: 113px" with nothing in normal
   flow reserving space for it, so whatever renders right below the header — the hero — starts
   underneath that floating bar and gets visually covered by it. Pushing the hero down by the
   nav's own height (~46px, the same figure Menu.css uses for its dropdown offset) leaves room
   for the fixed bar instead of letting it overlap the slide. */
.carousel-section {
    margin-top: 23px;
}

.mkp-hero-slide {
    position: relative;
    display: block;
    overflow: hidden;
}

.mkp-hero-media {
    position: relative;
    width: 100%;
    height: 100%;
}

.mkp-hero-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.mkp-hero-scrim {
    position: absolute;
    inset: 0;
    background: linear-gradient(to left, rgba(0, 82, 147, .78) 0%, rgba(0, 82, 147, .35) 38%, rgba(0, 82, 147, 0) 65%);
    pointer-events: none;
}

.mkp-hero-copy {
    position: absolute;
    inset-inline-end: 0;
    inset-block-end: 0;
    inset-block-start: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-end;
    text-align: right;
    max-width: 46%;
    padding: 24px 5%;
    color: #fff;
    z-index: 2;
}

.mkp-hero-title {
    font-size: clamp(20px, 2.6vw, 34px);
    font-weight: 800;
    line-height: 1.4;
    margin: 0 0 10px;
    color: #fff;
}

.mkp-hero-desc {
    font-size: clamp(13px, 1.3vw, 16px);
    line-height: 1.8;
    margin: 0 0 16px;
    color: #eaf6ff;
    max-width: 460px;
}

.mkp-hero-btn {
    display: inline-block;
    background: #f2a900;
    color: #1c1300;
    font-weight: 700;
    font-size: 14px;
    padding: 10px 22px;
    border-radius: 8px;
}

@media (max-width: 767px) {
    .mkp-hero-copy {
        max-width: 100%;
        align-items: flex-end;
        padding: 16px 6%;
    }
    .mkp-hero-desc {
        display: none;
    }
}

/* ---------- category grid (hover-reveal; top site nav stays fixed/unaffected) ---------- */
/* isolation:isolate forces a fresh stacking context here, so z-index below is compared directly
   against the hero carousel's own context instead of getting trapped inside some nested one
   Flickity creates for its sliding cells (it moves cells with CSS transforms, which silently
   create their own stacking contexts) — that mismatch was why the open dropdown could render
   behind the slider despite already having a z-index. */
.mkp-cat-section {
    position: relative;
    margin-block: 14px;
    z-index: 200;
    isolation: isolate;
}

.mkp-cat-trigger {
    display: flex;
    align-items: center;
    gap: 8px;
    width: fit-content;
    background: #007ac9;
    color: #fff;
    font-weight: 700;
    font-size: 14px;
    padding: 10px 20px;
    border-radius: 8px;
    cursor: pointer;
    user-select: none;
}

.mkp-cat-trigger .mkp-cat-trigger-icon {
    font-size: 15px;
    line-height: 1;
    transition: transform .25s ease;
}

.mkp-cat-section:hover .mkp-cat-trigger .mkp-cat-trigger-icon,
.mkp-cat-section.mkp-cat-open .mkp-cat-trigger .mkp-cat-trigger-icon {
    transform: rotate(180deg);
}

.mkp-cat-grid {
    position: absolute;
    inset-inline-start: 0;
    inset-inline-end: 0;
    top: 100%;
    margin-top: 8px;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 16px;
    background: #fff;
    border: 1px solid #e7ecf2;
    border-radius: 12px;
    padding: 16px;
    box-shadow: 0 16px 34px -10px rgba(0, 0, 0, .2);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity .2s ease, transform .2s ease, visibility .2s;
    pointer-events: none;
}

.mkp-cat-section:hover .mkp-cat-grid,
.mkp-cat-section:focus-within .mkp-cat-grid,
.mkp-cat-section.mkp-cat-open .mkp-cat-grid {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
}

@media (max-width: 991px) {
    .mkp-cat-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 575px) {
    .mkp-cat-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
}

.mkp-cat-card {
    display: block;
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    background: #007ac9;
    min-height: 130px;
    text-decoration: none;
}

.mkp-cat-media {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    opacity: .35;
}

.mkp-cat-body {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 18px 10px;
    min-height: 130px;
}

.mkp-cat-body h3 {
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    text-align: center;
    margin: 0;
}

/* ---------- product cards (flat blue, RTL-safe, no shadows/gradients) ---------- */
.product-box.first-page {
    background: #fff;
    border: 1px solid #e7ecf2;
    border-radius: 10px;
    overflow: hidden;
    transition: transform .2s ease, border-color .2s ease;
}

.product-box.first-page:hover {
    transform: translateY(-3px);
    border-color: #007ac9;
}

.product-box.first-page .product-img-box {
    background: #f4f7fa;
}

.product-box.first-page .product-title-box lable {
    color: #1a2a3a;
    font-weight: 600;
    font-size: 13.5px;
}

.product-box.first-page .product-price-box .product-price {
    color: #007ac9;
    font-weight: 800;
}

.product-box.first-page .product-price-box .product-old-price {
    color: #9aa4b2;
}

.product-box.first-page .product-price-box .off {
    background: #f2a900;
    color: #1c1300;
    font-weight: 700;
}

.product-box.first-page .newstatus {
    color: #fff;
    background: #007ac9;
}

.product-box.first-page .newstatus.unav {
    background: #9aa4b2;
}

.product-box.first-page .newstatus.stop {
    background: #b04141;
}

/* "Request a quote" - shown on the 95 products that carry no published price. Green rather
   than the grey used for .unav on purpose: those products ARE supplied, the price just comes
   on request, so the badge has to read as an invitation and not as a refusal. Matches the
   inquiry panel colour on the product page. */
.product-box.first-page .newstatus.tel {
    background: #0c7c59;
}

.product-box.first-page .newstatus.tel i {
    font-size: 15px;
    vertical-align: middle;
    margin-inline-end: 4px;
}

/* ---------- floating AI assistant widget ---------- */
/* Physical left/bottom on purpose, not inset-inline-start: the site is RTL, so the logical
   "inline-start" edge resolves to the RIGHT, not the left — that mismatch was the bug. */
.mkp-ai-widget {
    position: fixed;
    bottom: 22px;
    left: 22px;
    z-index: 9999;
    font-family: inherit;
}

.mkp-ai-fab {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 13px 22px;
    border-radius: 999px;
    background: #007ac9;
    color: #fff;
    border: none;
    cursor: pointer;
    font-family: inherit;
    font-size: 15px;
    font-weight: 700;
    box-shadow: 0 6px 18px -6px rgba(0, 122, 201, .65);
}

.mkp-ai-fab-text {
    white-space: nowrap;
}

.mkp-ai-fab-icon {
    width: 20px;
    height: 20px;
    flex: none;
}

.mkp-ai-panel {
    position: absolute;
    bottom: 62px;
    left: 0;
    width: min(340px, 90vw);
    height: min(460px, 70vh);
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 12px 30px -8px rgba(0, 0, 0, .25);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.mkp-ai-panel[hidden] {
    display: none;
}

.mkp-ai-head {
    background: #007ac9;
    color: #fff;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-weight: 700;
    font-size: 14px;
}

.mkp-ai-close {
    background: none;
    border: none;
    color: #fff;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
}

.mkp-ai-body {
    flex: 1;
    overflow-y: auto;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    background: #f4f7fa;
}

.mkp-ai-msg {
    max-width: 85%;
    padding: 8px 12px;
    border-radius: 10px;
    font-size: 13px;
    line-height: 1.8;
}

.mkp-ai-msg-bot {
    align-self: flex-start;
    background: #fff;
    border: 1px solid #e7ecf2;
    color: #1a2a3a;
}

.mkp-ai-msg-user {
    align-self: flex-end;
    background: #007ac9;
    color: #fff;
}

.mkp-ai-msg-typing {
    opacity: .6;
}

.mkp-ai-products {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.mkp-ai-product-card {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #fff;
    border: 1px solid #e7ecf2;
    border-radius: 8px;
    padding: 6px;
    text-decoration: none;
}

.mkp-ai-product-card img {
    width: 40px;
    height: 40px;
    object-fit: contain;
    flex: none;
}

.mkp-ai-product-title {
    font-size: 12.5px;
    color: #1a2a3a;
    font-weight: 600;
}

.mkp-ai-product-price {
    font-size: 11.5px;
    color: #007ac9;
}

.mkp-ai-form {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px;
    border-top: 1px solid #e7ecf2;
    background: #fff;
}

.mkp-ai-input {
    flex: 1;
    border: 1px solid #e7ecf2;
    border-radius: 8px;
    padding: 8px 12px;
    font-size: 13px;
    font-family: inherit;
}

.mkp-ai-send {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: #007ac9;
    color: #fff;
    border: none;
    display: grid;
    place-items: center;
    cursor: pointer;
    flex: none;
}

@media (max-width: 480px) {
    .mkp-ai-widget {
        bottom: 14px;
        left: 14px;
    }
}

/* ---------- extra admin-managed social icons (footer) ---------- */
.social_links a.mkp-social-extra {
    display: inline-flex;
}

.mkp-social-extra-letter {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #007ac9;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
}

/* ---------- footer credit line removal / centered copyright ---------- */
.subfooter .row {
    justify-content: center;
}

.subfooter .mkp-copyright-full {
    width: 100%;
    text-align: center;
}

/* "Confirm price" mode, 2026-09-11. Unlike .tel (no published price at all), these products DO
   carry a price and it stays visible on the card - keeping them eligible for price-bearing
   search results. The badge only sets the expectation that the figure is confirmed by sales
   before the order is final, so it sits alongside the price rather than replacing it. Amber,
   because it is a qualifier, not a refusal (grey .unav) and not an invitation (green .tel). */
.product-box.first-page .newstatus.confirm {
    background: #b7791f;
}

.product-box.first-page .newstatus.confirm i {
    font-size: 14px;
    vertical-align: middle;
    margin-inline-end: 4px;
}

/* Product page: replaces the add-to-basket form for the same products. */
.pnl-confirm-price {
    margin: 14px 0 6px;
}

.btn-confirm-price {
    display: inline-block;
    width: 100%;
    text-align: center;
    background: #b7791f;
    color: #fff !important;
    border: 1px solid #b7791f;
    border-radius: 6px;
    padding: 12px 18px;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.8;
    transition: background .2s ease-in-out;
}

.btn-confirm-price:hover,
.btn-confirm-price:focus {
    background: #96621a;
    border-color: #96621a;
    color: #fff !important;
    text-decoration: none;
}

.btn-confirm-price i {
    margin-inline-end: 6px;
}

.confirm-price-note {
    margin: 10px 2px 0;
    font-size: 13px;
    line-height: 2;
    color: #6b7280;
}