/* ===========================================================================
   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;
}

/* ---------- 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;
}