/* ═══════════════════════════════════════════════════════════
   MEGASOFT THEME OVERRIDES v2.0
   Font: Montserrat Alternates
   Brand: #0f518d (green), Accent: #0d4a7a
   ═══════════════════════════════════════════════════════════ */

/* ══ BASE TYPOGRAPHY ══ */
body, html {
    font-family: 'Montserrat Alternates', system-ui, -apple-system, sans-serif !important;
}
/* Don't override icon fonts — only text elements */
h1,h2,h3,h4,h5,h6,p,a,span,li,td,th,label,input,select,textarea,button,div {
    font-family: 'Montserrat Alternates', system-ui, -apple-system, sans-serif;
}
/* Preserve Bagisto icon font */
[class^="icon-"], [class*=" icon-"] {
    font-family: "bagisto-shop" !important;
}

::selection {
    background-color: rgba(15, 81, 141, 0.2) !important;
}

/* ══ BRAND COLORS — NavyBlue → Green ══ */
.text-navyBlue { color: #08304f !important; }
.bg-navyBlue { background-color: #0d4a7a !important; }
.border-navyBlue { border-color: #0f518d !important; }
.hover\:border-navyBlue:hover { border-color: #0f518d !important; }
.hover\:border-b-4:hover { border-bottom-color: #0f518d !important; }
span.bg-navyBlue { background-color: #0f518d !important; }
.bg-navyBlue.rounded-full { background-color: #0f518d !important; }

/* ══ GLOBAL BORDER RADIUS — 25px everywhere ══ */
.rounded-xl, .rounded-2xl, .rounded-lg, .rounded-md {
    border-radius: 25px !important;
}
.rounded-full { border-radius: 9999px !important; }
.rounded-t-lg, .rounded-t-xl { border-radius: 25px 25px 0 0 !important; }
.rounded-b-lg, .rounded-b-xl { border-radius: 0 0 25px 25px !important; }
input, select, textarea {
    border-radius: 25px !important;
}

/* ══ PRIMARY BUTTONS ══ */
.primary-button, button.primary-button, a.primary-button {
    background-color: #0f518d !important;
    border-color: #0f518d !important;
    border-radius: 25px !important;
    font-weight: 600 !important;
    transition: all 0.2s ease !important;
}
.primary-button:hover, button.primary-button:hover {
    background-color: #0a3a63 !important;
    border-color: #0a3a63 !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(15, 81, 141, 0.3) !important;
}
.primary-button:active { background-color: #0d4a7a !important; transform: translateY(0); }

/* ══ SECONDARY BUTTONS ══ */
.secondary-button {
    color: #0d4a7a !important;
    border-color: #0f518d !important;
    border-radius: 25px !important;
    transition: all 0.2s ease !important;
}
.secondary-button:hover {
    color: #08304f !important;
    border-color: #0d4a7a !important;
    background-color: #e8f0f8 !important;
}

/* ══ HEADER ══ */
header {
    box-shadow: 0 1px 8px rgba(0,0,0,0.06) !important;
}

/* Header top bar */
header .bg-navyBlue,
.max-lg\:hidden .bg-navyBlue {
    background: linear-gradient(135deg, #08304f, #0d4a7a) !important;
}

/* Search input */
header input[name="query"] {
    border-radius: 12px !important;
    background-color: #f5f5f5 !important;
    border: 1.5px solid #e0e0e0 !important;
    transition: all 0.2s ease !important;
}
header input[name="query"]:focus {
    border-color: #0f518d !important;
    box-shadow: 0 0 0 3px rgba(15, 81, 141, 0.1) !important;
    background-color: #fff !important;
}

/* ══ MEGA MENU (desktop category dropdown) ══ */
/* The pre-compiled Tailwind bundle ships without `py-8`, so the dropdown
   content sat flush against the header and collided with the nav row. */
header .group > .fixed > .container {
    padding-top: 32px !important;
    padding-bottom: 32px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Header row of the dropdown: title left, "view all" right, never touching */
header .group > .fixed > .container > .mb-6 {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 24px !important;
}

/* Keep the "Показать Все →" link on one line and off the category titles */
header .group > .fixed > .container > .mb-6 > a {
    flex: 0 0 auto !important;
    white-space: nowrap !important;
}

/* Top-level nav items must not shrink into each other */
header .group.static > span > a {
    white-space: nowrap !important;
}

/* ── Category nav row: full width, edges flush with the container ── */
header .category-nav-row {
    display: flex !important;
    width: 100% !important;
    align-items: center !important;
    justify-content: space-between !important;
}

/* Drop the horizontal padding on every link so each item's box equals its
   text box. Spacing between items comes from `justify-content: space-between`
   instead. Result: the hover underline sits exactly under the text (never
   overhanging on one side), the first item starts on the container's left
   edge and the last one ends on its right edge — nothing spills outside. */
header .category-nav-row > .group > span > a {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* ══ PRODUCT CARDS ══ */
/* Grid card wrapper */
.group.w-full.rounded-md,
[class*="group"][class*="rounded-md"] {
    border-radius: 16px !important;
    border: 1px solid #f0f0f0 !important;
    overflow: hidden !important;
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1) !important;
    background: #fff;
}
.group.w-full.rounded-md:hover,
[class*="group"][class*="rounded-md"]:hover {
    border-color: #e0e0e0 !important;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.1) !important;
    transform: translateY(-4px) !important;
}

/* Card image zoom on hover */
.group:hover img[loading],
.group:hover .bg-zinc-100 img {
    transform: scale(1.08) !important;
}
.group img[loading],
.group .bg-zinc-100 img {
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Card info section */
.group .bg-white.p-2\.5,
.group [class*="content-start"][class*="bg-white"] {
    padding: 12px 14px !important;
}

/* Product name */
.group .break-all.text-base.font-medium {
    font-size: 0.875rem !important;
    line-height: 1.4 !important;
    font-weight: 600 !important;
    color: #333 !important;
}

/* Product price — green */
.group .font-semibold[class*="text-lg"],
.group .text-lg.font-semibold {
    color: #0d4a7a !important;
    font-weight: 800 !important;
}

/* Sale badge */
.bg-red-600[class*="rounded"] {
    border-radius: 8px !important;
    font-weight: 700 !important;
}

/* New badge — green */
.bg-navyBlue[class*="rounded"][class*="text-white"][class*="text-sm"] {
    background-color: #0f518d !important;
    border-radius: 8px !important;
    font-weight: 700 !important;
}

/* Wishlist heart icon */
.icon-heart-fill { color: #F44336 !important; }

/* ══ CATEGORY PAGE ══ */
/* Category banner */
.aspect-\[4\/1\] { border-radius: 16px !important; }

/* Filters checkbox */
input[type="checkbox"]:checked {
    background-color: #0f518d !important;
    border-color: #0f518d !important;
}

/* Category filter active */
.bg-navyBlue[class*="text-white"] {
    background-color: #0f518d !important;
}

/* Load more button */
.secondary-button.mx-auto {
    border-radius: 12px !important;
}

/* ══ PRODUCT VIEW PAGE ══ */
/* Add to cart button on product page */
.product-detail .primary-button,
main .primary-button {
    border-radius: 12px !important;
    padding: 14px 32px !important;
}

/* Product price on detail page */
[class*="text-"][class*="font-semibold"][class*="text-lg"] {
    color: #0d4a7a !important;
}

/* ══ IMAGE CAROUSEL / SLIDER ══ */
/* Hero slider container */
[class*="carousel"] img,
.carousel img {
    border-radius: 0 !important;
}

/* Carousel navigation arrows */
.icon-arrow-right, .icon-arrow-left {
    color: #0f518d !important;
}

/* Carousel dots */
[class*="carousel"] [class*="bg-"][class*="rounded-full"][class*="cursor-pointer"] {
    transition: all 0.3s ease;
}

/* ══ PRODUCT CAROUSELS ══ */
/* Section titles — modern style */
.font-dmserif,
.font-sans.font-bold {
    font-family: 'Montserrat Alternates', system-ui, sans-serif !important;
    font-weight: 700 !important;
}

/* Product carousel wrapper — ensure container */
.container.mt-20 {
    margin-top: 48px !important;
    margin-bottom: 48px !important;
}

/* Product carousel navigation */
.icon-arrow-right.text-2xl,
.icon-arrow-left.text-2xl {
    width: 40px;
    height: 40px;
    display: flex !important;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #f5f5f5;
    color: #0f518d !important;
    transition: all 0.2s ease;
}

.icon-arrow-right.text-2xl:hover,
.icon-arrow-left.text-2xl:hover {
    background: #0f518d;
    color: #fff !important;
}

/* Category carousel — smaller, modern */
[class*="categories"] [class*="rounded-full"] {
    border-radius: 12px !important;
    width: 80px !important;
    height: 80px !important;
    overflow: hidden;
    border: 2px solid #e8f0f8 !important;
    transition: all 0.3s ease;
}
[class*="categories"] [class*="rounded-full"]:hover {
    border-color: #0f518d !important;
    transform: scale(1.05);
}
[class*="categories"] [class*="rounded-full"] img {
    object-fit: cover;
    width: 100% !important;
    height: 100% !important;
}
/* Category name under icon */
[class*="categories"] .text-center p,
[class*="categories"] .text-center span {
    font-size: 12px !important;
    font-weight: 600 !important;
    color: #444 !important;
    margin-top: 6px !important;
}

/* ══ PRODUCT CARD — price styling ══ */
/* Regular price */
.group .special-price {
    color: #0f518d !important;
    font-weight: 800 !important;
}
/* Old price (crossed) */
.group .regular-price {
    color: #aaa !important;
    text-decoration: line-through;
    font-size: 13px !important;
    font-weight: 400 !important;
}
/* Discount badge in price */
.group .sale-icon {
    background: #e74c3c !important;
    color: #fff !important;
    border-radius: 4px;
    padding: 1px 6px;
    font-size: 11px;
    font-weight: 700;
}

/* ══ STATIC CONTENT SECTIONS ══ */
/* Ensure all static blocks use container */
.section-gap {
    margin-top: 48px !important;
}

.bold-collections.container,
.container.section-gap {
    padding-left: 16px;
    padding-right: 16px;
}

/* ══ SERVICES/FEATURES ══ */
.border-black.rounded-full {
    border-color: #0f518d !important;
    color: #0d4a7a !important;
    background-color: #e8f0f8 !important;
    border-width: 2px !important;
    transition: all 0.3s ease;
}

/* Services section wrapper */
.container.mt-20 + .container,
[v-pre] .flex.justify-center.gap-6 {
    gap: 32px !important;
}

/* Service item card */
[v-pre] .flex.items-center.gap-5 {
    background: #f8f9fa !important;
    border-radius: 12px;
    padding: 20px 24px !important;
    transition: all 0.3s ease;
    border: 1px solid #f0f0f0;
}

[v-pre] .flex.items-center.gap-5:hover {
    background: #fff !important;
    box-shadow: 0 4px 16px rgba(0,0,0,0.06);
    border-color: #e0e0e0;
}

/* ══ FOOTER ══ */
footer.mt-9,
footer {
    margin-top: 0 !important;
}

/* ── Footer logo: show the wordmark legibly instead of cramming it into a
   tiny circle (the channel logo is a wide "MegaSoft" wordmark, not an icon) ── */
footer .footer-logo {
    display: block;
    height: 38px;
    width: auto;
    max-width: 180px;
    object-fit: contain;
}

/* ── Footer columns — FLEXBOX layout ──
   Replaces the old inline CSS-grid (which relied on Tailwind `max-1060:`/
   `max-md:` utilities that aren't in the pre-compiled bundle and overflowed
   on mobile). Flex wrapping is predictable at every width.

   Children order: [0] logo/about · [1..n] link columns · [last] newsletter.
   :first-child / :last-child are used so the layout survives any number of
   link sections. */
footer .footer-columns {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 48px;
}

/* Link columns (default): grow to share the remaining space */
footer .footer-columns > div {
    flex: 1 1 160px;
    min-width: 0;
}

/* Logo/about column: fixed width */
footer .footer-columns > div:first-child {
    flex: 0 0 200px;
    max-width: 200px;
}

/* Newsletter column: fixed width */
footer .footer-columns > div:last-child {
    flex: 0 0 300px;
    max-width: 300px;
}

/* Tablet: logo + newsletter go full width, the link columns sit side by side */
@media (max-width: 1060px) {
    footer .footer-columns {
        gap: 32px 40px;
    }

    footer .footer-columns > div:first-child,
    footer .footer-columns > div:last-child {
        flex: 1 1 100%;
        max-width: 100%;
    }

    footer .footer-columns > div {
        flex: 1 1 40%;
    }
}

/* Phones: single column, everything stacked full width */
@media (max-width: 640px) {
    footer .footer-columns {
        flex-direction: column;
        gap: 28px;
    }

    footer .footer-columns > div,
    footer .footer-columns > div:first-child,
    footer .footer-columns > div:last-child {
        flex: 1 1 auto;
        width: 100%;
        max-width: 100%;
    }

    footer .footer-logo {
        height: 34px;
    }

    /* Newsletter field + button stack instead of squeezing side by side */
    footer .footer-columns form .flex {
        flex-direction: column;
        gap: 10px;
    }

    footer .footer-columns form button[type="submit"] {
        width: 100%;
    }
}

.bg-\[\#1a1a2e\],
.bg-lightOrange {
    background-color: #0f1923 !important;
    color: #d0d0d0 !important;
}

.bg-\[\#1a1a2e\] *,
.bg-lightOrange * {
    color: #b0b8c0 !important;
}

.bg-\[\#1a1a2e\] a:hover,
.bg-lightOrange a:hover {
    color: #5ba3e6 !important;
}

.bg-\[\#1a1a2e\] .text-\[\#08304f\],
.bg-lightOrange .text-navyBlue,
.bg-lightOrange .font-dmserif,
.bg-lightOrange h2,
.bg-lightOrange h3,
.bg-lightOrange h4,
.bg-lightOrange p[class*="text-3xl"],
.bg-lightOrange p[class*="italic"] {
    color: #ffffff !important;
}

/* Footer newsletter input */
.bg-lightOrange input[type="email"] {
    background: rgba(255,255,255,0.1) !important;
    border-color: rgba(255,255,255,0.2) !important;
    color: #fff !important;
}
.bg-lightOrange input[type="email"]::placeholder {
    color: rgba(255,255,255,0.5) !important;
}
.bg-lightOrange input[type="email"]:focus {
    border-color: #0f518d !important;
    box-shadow: 0 0 0 2px rgba(15, 81, 141, 0.2) !important;
}

/* Footer subscribe button */
.bg-lightOrange button[type="submit"],
footer button[type="submit"] {
    background-color: #0f518d !important;
    color: #fff !important;
    border-radius: 10px !important;
}
.bg-lightOrange button[type="submit"]:hover,
footer button[type="submit"]:hover {
    background-color: #0c4577 !important;
}

/* Footer bottom bar */
footer .bg-\[\#12121f\],
footer .bg-\[\#F1EADF\],
.bg-\[\#F1EADF\] {
    background-color: #0a1118 !important;
}
footer .bg-\[\#12121f\] p,
footer .bg-\[\#F1EADF\] p,
.bg-\[\#F1EADF\] p {
    color: #556 !important;
}

/* Footer mobile accordion */
.bg-lightOrange .border-\[\#e9decc\],
.bg-\[\#1a1a2e\] .border-\[\#e9decc\] {
    border-color: rgba(255,255,255,0.08) !important;
}
.bg-lightOrange .bg-\[\#F1EADF\],
.bg-\[\#1a1a2e\] .bg-\[\#12121f\] {
    background-color: rgba(255,255,255,0.03) !important;
}

/* Footer links spacing */
footer ul {
    list-style: none !important;
}
footer ul li {
    margin-bottom: 6px;
}
footer ul a {
    font-size: 14px !important;
    transition: color 0.2s ease;
}

/* Footer newsletter heading */
footer .text-3xl.italic,
footer p[class*="text-3xl"] {
    font-style: normal !important;
    font-size: 22px !important;
    line-height: 1.4 !important;
    font-weight: 700 !important;
}

/* ══ PRODUCT CARD — Modern Design ══ */
/* Card wrapper */
.group.w-full {
    border-radius: 12px !important;
    overflow: hidden;
    border: 1px solid #f0f0f0 !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    background: #fff;
}
.group.w-full:hover {
    border-color: #e0e8f0 !important;
    box-shadow: 0 8px 30px rgba(15, 81, 141, 0.08) !important;
    transform: translateY(-3px);
}

/* Card image container */
.group .relative.overflow-hidden {
    background: #f8f9fa !important;
}

/* Card image hover zoom */
.group:hover .bg-zinc-100 img,
.group:hover img.lazy {
    transform: scale(1.05) !important;
}
.group .bg-zinc-100 img,
.group img.lazy {
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Card product info section */
.group .content-start.gap-2\.5.bg-white {
    padding: 14px 16px 16px !important;
    background: #fff !important;
    border-radius: 0 0 12px 12px !important;
}

/* Product name */
.group .break-all.text-base.font-medium {
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
    color: #2c3e50 !important;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Product price */
.group .text-lg.font-semibold {
    color: #0f518d !important;
    font-weight: 800 !important;
    font-size: 17px !important;
}

/* Sale/New badge */
.group .bg-\[\#0d4a7a\],
.group .bg-red-600 {
    border-radius: 6px !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    padding: 3px 10px !important;
    letter-spacing: 0.03em;
}

/* Add to cart button on card */
.group .secondary-button.w-full {
    border-radius: 8px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    padding: 10px 16px !important;
    background: #0f518d !important;
    color: #fff !important;
    border-color: #0f518d !important;
    transition: all 0.2s ease !important;
}
.group .secondary-button.w-full:hover {
    background: #0c4577 !important;
    border-color: #0c4577 !important;
    transform: translateY(-1px);
}

/* Wishlist heart on mobile */
.group .icon-heart {
    color: #ccc !important;
    transition: color 0.2s ease;
}
.group .icon-heart:hover,
.group .icon-heart-fill {
    color: #e74c3c !important;
}

/* Rating stars */
.group .flex.items-center.rounded {
    border-radius: 6px !important;
    backdrop-filter: blur(8px);
}

/* ══ MINI CART DRAWER ══ */
/* (Using default Bagisto styles) */

/* ══ CART PAGE ══ */
.text-navyBlue[class*="font-semibold"] {
    color: #0d4a7a !important;
}

/* ─────────────────────────────────────────────
   ORDER SUCCESS PAGE
   ───────────────────────────────────────────── */
.order-success {
    max-width: 560px;
    margin: 24px auto 0;
    padding: 48px 40px;
    text-align: center;
    background: #ffffff;
    border: 1px solid #eef0f3;
    border-radius: 20px;
    box-shadow: 0 10px 40px rgba(15, 81, 141, 0.06);
}

.order-success__badge {
    width: 88px;
    height: 88px;
    margin: 0 auto 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: #16a34a;
    background: #e9f9ef;
    box-shadow: 0 0 0 8px rgba(22, 163, 74, 0.06);
    animation: order-success-pop 0.4s ease-out;
}

.order-success__badge svg {
    width: 44px;
    height: 44px;
}

@keyframes order-success-pop {
    0%   { transform: scale(0.6); opacity: 0; }
    60%  { transform: scale(1.08); opacity: 1; }
    100% { transform: scale(1); }
}

.order-success__title {
    font-size: 26px;
    font-weight: 800;
    color: #0f172a;
    margin-bottom: 8px;
    line-height: 1.2;
}

.order-success__thanks {
    font-size: 15px;
    color: #64748b;
    margin-bottom: 24px;
}

.order-success__order-no {
    display: inline-block;
    padding: 10px 20px;
    margin-bottom: 28px;
    font-size: 15px;
    font-weight: 600;
    color: #0f518d;
    background: #eef5fb;
    border: 1px solid #d6e6f4;
    border-radius: 12px;
}

.order-success__order-no a {
    color: #0f518d;
    font-weight: 700;
    text-decoration: underline;
}

.order-success__recap {
    display: flex;
    align-items: stretch;
    justify-content: center;
    gap: 0;
    margin-bottom: 28px;
    padding: 18px 8px;
    background: #fafbfc;
    border: 1px solid #eef0f3;
    border-radius: 14px;
}

.order-success__recap-item {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 0 18px;
    min-width: 0;
}

.order-success__recap-label {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #94a3b8;
}

.order-success__recap-value {
    font-size: 15px;
    font-weight: 700;
    color: #1f2937;
    overflow-wrap: anywhere;
}

.order-success__recap-divider {
    width: 1px;
    background: #e5e7eb;
    flex: 0 0 auto;
}

.order-success__info {
    font-size: 14px;
    line-height: 1.6;
    color: #64748b;
    margin-bottom: 28px;
}

.order-success__actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
}

.order-success__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 28px;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 600;
    transition: background-color 0.2s ease, color 0.2s ease, transform 0.15s ease;
    cursor: pointer;
}

.order-success__btn--primary {
    background: #0f518d;
    color: #ffffff;
    border: 1.5px solid #0f518d;
}

.order-success__btn--primary:hover {
    background: #0c4577;
    border-color: #0c4577;
    transform: translateY(-1px);
}

.order-success__btn--secondary {
    background: #ffffff;
    color: #0f518d;
    border: 1.5px solid #cbdcec;
}

.order-success__btn--secondary:hover {
    background: #eef5fb;
    border-color: #0f518d;
}

@media (max-width: 640px) {
    .order-success {
        padding: 32px 20px;
        border-radius: 16px;
    }

    .order-success__title { font-size: 21px; }

    .order-success__recap {
        flex-direction: column;
        gap: 14px;
    }

    .order-success__recap-divider {
        width: auto;
        height: 1px;
    }

    .order-success__btn {
        flex: 1 1 100%;
    }
}

/* ══ CHECKOUT ══ */
/* Progress steps */
.bg-navyBlue[class*="rounded-full"][class*="text-white"] {
    background-color: #0f518d !important;
}

/* ─────────────────────────────────────────────
   CHECKOUT PAGE — white canvas, themed controls
   The page now renders inside the main header/footer,
   so it must read as a normal shop page.
   ───────────────────────────────────────────── */
.checkout-page,
.checkout-page .container {
    background-color: #ffffff !important;
}

/* Section cards (Адрес / Доставка / Оплата accordions) */
.checkout-page .accordion,
.checkout-page [class*="rounded-xl"][class*="border"] {
    background-color: #ffffff !important;
}

/* ── Form fields ──
   The global `input,select,textarea { border-radius: 25px }` pill shape is
   right for the search bar but wrong for a dense address form. */
.checkout-page input[type="text"],
.checkout-page input[type="email"],
.checkout-page input[type="tel"],
.checkout-page input[type="number"],
.checkout-page input[type="password"],
.checkout-page select,
.checkout-page textarea {
    border-radius: 10px !important;
    border: 1.5px solid #e5e7eb !important;
    background-color: #ffffff !important;
    padding: 11px 14px !important;
    font-size: 14px !important;
    color: #1f2937 !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
    box-shadow: none !important;
}

.checkout-page input:hover:not(:focus),
.checkout-page select:hover:not(:focus),
.checkout-page textarea:hover:not(:focus) {
    border-color: #cbd5e1 !important;
}

.checkout-page input:focus,
.checkout-page select:focus,
.checkout-page textarea:focus {
    border-color: #0f518d !important;
    box-shadow: 0 0 0 3px rgba(15, 81, 141, 0.10) !important;
    outline: none !important;
}

.checkout-page input::placeholder,
.checkout-page textarea::placeholder {
    color: #9ca3af !important;
}

/* Validation errors keep priority over the themed border */
.checkout-page .border-red-500,
.checkout-page input.border-red-500,
.checkout-page select.border-red-500 {
    border-color: #ef4444 !important;
}

.checkout-page span[class*="text-red"] {
    font-size: 12px !important;
}

/* Select: room for the native arrow */
.checkout-page select {
    padding-right: 38px !important;
    cursor: pointer;
}

/* Labels */
.checkout-page label {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #374151 !important;
    margin-bottom: 6px !important;
    display: inline-block;
}

/* Required marker in brand colour */
.checkout-page label.required::after {
    color: #dc2626 !important;
}

/* ── Buttons ── */
.checkout-page .primary-button,
.checkout-page button[type="submit"] {
    border-radius: 10px !important;
    background-color: #0f518d !important;
    border-color: #0f518d !important;
    color: #fff !important;
    font-weight: 600 !important;
    padding: 12px 28px !important;
    transition: background-color 0.2s ease, transform 0.15s ease !important;
}

.checkout-page .primary-button:hover,
.checkout-page button[type="submit"]:hover {
    background-color: #0c4577 !important;
    border-color: #0c4577 !important;
}

.checkout-page .secondary-button {
    border-radius: 10px !important;
    border-color: #0f518d !important;
    color: #0f518d !important;
    font-weight: 600 !important;
}

.checkout-page .secondary-button:hover {
    background-color: #e8f0f8 !important;
}

/* Selectable cards: saved address, shipping & payment methods */
.checkout-page label[class*="rounded-xl"],
.checkout-page div[class*="rounded-xl"][class*="border-zinc-200"] {
    border-color: #e5e7eb !important;
    border-radius: 12px !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

.checkout-page label[class*="rounded-xl"]:hover,
.checkout-page div[class*="rounded-xl"][class*="border-zinc-200"]:hover {
    border-color: #0f518d !important;
    box-shadow: 0 2px 10px rgba(15, 81, 141, 0.08) !important;
}

/* Radio / checkbox accents */
.checkout-page input[type="radio"],
.checkout-page input[type="checkbox"] {
    accent-color: #0f518d;
    border-radius: 4px !important;
    padding: 0 !important;
}

.checkout-page input[type="radio"] {
    border-radius: 50% !important;
}

/* Cart summary panel */
.checkout-page .sticky {
    background-color: #ffffff !important;
}

/* Breadcrumb separators must not inherit the carousel-arrow pill styling */
.checkout-page nav .icon-arrow-right,
.checkout-page nav .icon-arrow-left,
.checkout-page [aria-label="breadcrumb"] .icon-arrow-right,
.checkout-page [aria-label="breadcrumb"] .icon-arrow-left {
    background: transparent !important;
    width: auto !important;
    height: auto !important;
    border-radius: 0 !important;
    color: #9ca3af !important;
}

/* ── Modals on the checkout page (login, address form, coupon) ── */
.checkout-page .fixed [class*="bg-zinc-100"],
body > [class*="bg-zinc-100"][class*="rounded-lg"],
.fixed [class*="max-w-[595px]"] {
    background-color: #ffffff !important;
    border-radius: 16px !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.18) !important;
}

/* Modal inner sections keep a clean white surface */
.fixed [class*="max-w-[595px]"] > div {
    background-color: #ffffff !important;
}

/* Modal fields follow the same rules as the page form */
.fixed [class*="max-w-[595px]"] input[type="text"],
.fixed [class*="max-w-[595px]"] input[type="email"],
.fixed [class*="max-w-[595px]"] input[type="password"],
.fixed [class*="max-w-[595px]"] input[type="tel"],
.fixed [class*="max-w-[595px]"] select,
.fixed [class*="max-w-[595px]"] textarea {
    border-radius: 10px !important;
    border: 1.5px solid #e5e7eb !important;
    padding: 11px 14px !important;
    font-size: 14px !important;
    background-color: #fff !important;
}

.fixed [class*="max-w-[595px]"] input:focus,
.fixed [class*="max-w-[595px]"] select:focus,
.fixed [class*="max-w-[595px]"] textarea:focus {
    border-color: #0f518d !important;
    box-shadow: 0 0 0 3px rgba(15, 81, 141, 0.10) !important;
}

.fixed [class*="max-w-[595px]"] .primary-button {
    border-radius: 10px !important;
    background-color: #0f518d !important;
    border-color: #0f518d !important;
}

.fixed [class*="max-w-[595px]"] .primary-button:hover {
    background-color: #0c4577 !important;
}

/* Modal close icon */
.fixed .icon-cancel {
    color: #6b7280 !important;
    transition: color 0.2s ease;
}

.fixed .icon-cancel:hover {
    color: #0f518d !important;
}

/* ══ AUTH PAGES (Login / Register / Forgot Password) ══ */

/* Form card container */
.container.mx-auto .rounded-2xl {
    border: 1px solid #eee !important;
    box-shadow: 0 2px 16px rgba(0,0,0,0.04) !important;
}

/* Form inputs — white bg, subtle border */
.container.mx-auto input[type="text"],
.container.mx-auto input[type="email"],
.container.mx-auto input[type="password"],
.container.mx-auto input[type="tel"],
.container.mx-auto select {
    background: #fff !important;
    border: 1.5px solid #e0e0e0 !important;
    border-radius: 8px !important;
    padding: 10px 14px !important;
    font-size: 14px !important;
    transition: border-color 0.2s ease !important;
}
.container.mx-auto input:focus,
.container.mx-auto select:focus {
    border-color: #0f518d !important;
    box-shadow: 0 0 0 3px rgba(15,81,141,0.08) !important;
}

/* Form labels */
.container.mx-auto label {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #444 !important;
}

/* Photo-search (camera) icon inside the header search field.
   The inline `font-size: 18px;!important` in the blade was invalid CSS
   (the `;` closed the declaration), so the glyph fell back to 13px and
   sat 2px above centre while overlapping the magnifier. */
header form[role="search"] .icon-camera,
header form[role="search"] label.icon-camera,
header form[role="search"] button.icon-camera {
    top: 50% !important;
    bottom: auto !important;
    transform: translateY(-50%) !important;
    font-size: 18px !important;
    line-height: 1 !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #9ca3af !important;
    transition: color 0.2s ease;
}

header form[role="search"] .icon-camera:hover {
    color: #0f518d !important;
}

/* Keep the camera clear of the magnifier on the right edge */
html[dir="ltr"] header form[role="search"] .icon-camera,
header form[role="search"] .icon-camera {
    right: 48px !important;
    left: auto !important;
}

html[dir="rtl"] header form[role="search"] .icon-camera {
    left: 48px !important;
    right: auto !important;
}

/* Magnifier stays vertically centred too */
header form[role="search"] .icon-search {
    top: 50% !important;
    transform: translateY(-50%) !important;
    line-height: 1 !important;
}

/* Submit button — full width, branded */
.container.mx-auto .primary-button,
form .primary-button {
    width: 100%;
    border-radius: 10px !important;
    font-weight: 700 !important;
    font-size: 15px !important;
    padding: 12px 24px !important;
    letter-spacing: 0.02em;
}

/* Social login icons */
.container.mx-auto .flex.gap-4 a[class*="rounded-full"],
.container.mx-auto [class*="icon-facebook"],
.container.mx-auto [class*="icon-google"] {
    transition: transform 0.2s ease;
}
.container.mx-auto .flex.gap-4 a:hover {
    transform: scale(1.1);
}

/* Links — forgot password, create account */
.container.mx-auto a[href*="forgot"],
.container.mx-auto a[href*="register"] {
    color: #0f518d !important;
    font-weight: 600 !important;
    font-size: 13px !important;
}
.container.mx-auto a[href*="forgot"]:hover,
.container.mx-auto a[href*="register"]:hover {
    text-decoration: underline !important;
}

/* Copyright text at bottom */
.container.mx-auto + p,
body > p.text-center {
    font-size: 11px !important;
    color: #bbb !important;
    margin-top: 32px !important;
}

/* ══ BREADCRUMBS ══ */
nav[aria-label="breadcrumb"] a:hover,
.icon-arrow-right {
    color: #0f518d !important;
}

/* ══ FORM FOCUS STATES ══ */
input:focus, select:focus, textarea:focus {
    border-color: #0f518d !important;
    box-shadow: 0 0 0 3px rgba(15, 81, 141, 0.08) !important;
    outline: none !important;
}

/* ══ PAGINATION ══ */
nav[role="navigation"] .bg-navyBlue {
    background-color: #0f518d !important;
}

/* ══ STAR RATINGS ══ */
.icon-star-fill { color: #FF9800 !important; }

/* ══ SCROLLBAR ══ */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: #f5f5f5; }
::-webkit-scrollbar-thumb { background: #ccc; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #0f518d; }

/* ══ WHATSAPP FLOATING BUTTON ══ */
#megasoft-whatsapp {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 9999;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background-color: #0f518d;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 16px rgba(37, 211, 102, 0.4);
    transition: all 0.3s ease;
    cursor: pointer;
    text-decoration: none;
}
#megasoft-whatsapp:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 24px rgba(37, 211, 102, 0.5);
}
#megasoft-whatsapp svg {
    width: 28px;
    height: 28px;
    fill: currentColor;
}

/* ══ MISC POLISH ══ */

/* Compare page table headers */
.bg-\[\#F5F5F5\] { background-color: #f8f9fa !important; }

/* Empty cart / wishlist state — standalone icons only.
   Must NOT repaint icons sitting inside filled buttons, otherwise the
   cart glyph turns brand-blue on a brand-blue button and disappears. */
.icon-cart, .icon-wishlist { color: #0f518d !important; }

/* ── Header icon cluster: compare / cart / account ──
   The mini-cart span ships without the h-10 w-10 hover wrapper its siblings
   have, so it rendered 2px high and had no hover state. Give it the same
   hit area, centring and hover treatment. */
header .icon-cart.cursor-pointer,
header .icon-compare,
header .icon-users {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 2.5rem !important;
    height: 2.5rem !important;
    line-height: 1 !important;
    border-radius: 9999px !important;
    vertical-align: middle !important;
    transition: background-color 0.2s ease, color 0.2s ease !important;
}

header .icon-cart.cursor-pointer:hover,
header .icon-compare:hover,
header a:hover > .icon-compare,
header .icon-users:hover {
    background-color: #f3f4f6 !important;
}

/* Cart keeps its brand tint at rest and darkens on hover */
header .icon-cart.cursor-pointer:hover {
    color: #0c4577 !important;
}

/* The badge counter must stay anchored to the icon, not the new 40px box */
header .icon-cart.cursor-pointer + span,
header span.relative > .icon-cart.cursor-pointer ~ span {
    pointer-events: none;
}

/* Icons inside filled/branded buttons always inherit the button's text colour */
button .icon-cart,
a.primary-button .icon-cart,
button.primary-button .icon-cart,
.primary-button .icon-cart,
[class*="bg-[#0f518d]"] .icon-cart,
[class*="bg-[#0d4a7a]"] .icon-cart,
[class*="bg-[#0c4577]"] .icon-cart,
button[class*="text-white"] .icon-cart,
button[class*="text-white"] .icon-wishlist {
    color: #fff !important;
}

/* ═══════════════════════════════════════════════════════════
   TAILWIND ARBITRARY VALUE CLASSES
   These replace navyBlue/lightOrange in blade templates
   since the pre-compiled CSS doesn't include them
   ═══════════════════════════════════════════════════════════ */

/* Backgrounds */
.bg-\[\#0d4a7a\] { background-color: #0d4a7a !important; }
.bg-\[\#0f518d\] { background-color: #0f518d !important; }
.bg-\[\#08304f\] { background-color: #08304f !important; }
.bg-\[\#e8f0f8\] { background-color: #e8f0f8 !important; }
.bg-\[\#1a1a2e\] { background-color: #1a1a2e !important; }
.bg-\[\#12121f\] { background-color: #12121f !important; }

/* Text */
.text-\[\#08304f\] { color: #08304f !important; }
.text-\[\#0d4a7a\] { color: #0d4a7a !important; }
.text-\[\#0f518d\] { color: #0f518d !important; }

/* Borders */
.border-\[\#0f518d\] { border-color: #0f518d !important; }
.border-\[\#0d4a7a\] { border-color: #0d4a7a !important; }
.border-\[\#08304f\] { border-color: #08304f !important; }
.border-\[\#e9decc\] { border-color: rgba(255,255,255,0.15) !important; }

/* Hover states */
.hover\:bg-\[\#0d4a7a\]:hover { background-color: #0d4a7a !important; }
.hover\:bg-\[\#0f518d\]:hover { background-color: #0f518d !important; }
.hover\:bg-\[\#0c4577\]:hover { background-color: #0c4577 !important; }
.hover\:bg-\[\#0a3a63\]:hover { background-color: #0a3a63 !important; }
.hover\:bg-\[\#e8f0f8\]:hover { background-color: #e8f0f8 !important; }
.hover\:text-\[\#0f518d\]:hover { color: #0f518d !important; }
.hover\:text-\[\#08304f\]:hover { color: #08304f !important; }
.hover\:border-\[\#0f518d\]:hover { border-color: #0f518d !important; }
.hover\:border-b-4:hover { border-bottom-width: 4px; }

/* Additional backgrounds */
.bg-\[\#0c4577\] { background-color: #0c4577 !important; }
.bg-\[\#0a3a63\] { background-color: #0a3a63 !important; }

/* Focus states */
.focus\:border-\[\#0f518d\]:focus { border-color: #0f518d !important; }
.focus\:ring-\[\#0f518d\]:focus { --tw-ring-color: #0f518d; box-shadow: 0 0 0 3px rgba(15, 81, 141, 0.15) !important; }

/* Ring */
.ring-\[\#0f518d\] { --tw-ring-color: #0f518d; box-shadow: 0 0 0 3px rgba(15, 81, 141, 0.3); }

/* Min/Max widths */
.min-w-\[320px\] { min-width: 320px !important; }
.min-w-\[360px\] { min-width: 360px !important; }
.w-\[360px\] { width: 360px !important; }

/* Footer dark theme text overrides */
.bg-\[\#1a1a2e\] a { color: #c0c0c0; }
.bg-\[\#1a1a2e\] a:hover { color: #0f518d !important; }
.bg-\[\#1a1a2e\] p, .bg-\[\#1a1a2e\] span { color: #c0c0c0; }
.bg-\[\#1a1a2e\] h2, .bg-\[\#1a1a2e\] h3, .bg-\[\#1a1a2e\] h4 { color: #fff !important; }
.bg-\[\#1a1a2e\] .font-sans.font-bold { color: #fff !important; }
.bg-\[\#1a1a2e\] input[type="email"] {
    background: rgba(255,255,255,0.08) !important;
    border-color: rgba(255,255,255,0.15) !important;
    color: #fff !important;
}
.bg-\[\#1a1a2e\] input::placeholder { color: rgba(255,255,255,0.4) !important; }
.bg-\[\#1a1a2e\] button[type="submit"] {
    background-color: #0f518d !important;
    color: #fff !important;
}
.bg-\[\#12121f\] p { color: #666 !important; }