/* NOGAMU dynamic-feature styles (cart, wishlist, members, resources, application form).
   Kept separate from style.css so the original template file is never touched. */

/* Splash-screen preloader disabled sitewide: it was tied to the browser's
   window.load event (waits for every last resource on the page), measured
   at 5-12+ seconds even on localhost — a poor UX pattern, not a bug to fix.
   display:none removes it from layout AND hit-testing immediately, so it
   can never block a click or flash on screen; any leftover JS that tries to
   fade/remove it later is a safe no-op on an already-hidden element. */
.preloader { display: none !important; }

/* Mobile nav (meanmenu): the "More" submenu has 11 items, which can be
   taller than the viewport once expanded — meanmenu's own panel has no
   height cap at all (position:absolute, grows to fit content), so it was
   overflowing off-screen with no way to reach the remaining items. Capping
   the whole panel's height and letting it scroll internally fixes this for
   every submenu, not just "More", without touching the vendored
   meanmenu.css/jquery.meanmenu.min.js. */
@media (max-width: 991px) {
    .mean-container .mean-nav {
        max-height: 80vh;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* Footer newsletter-column CTA buttons (Admin / MRP Ecosystem) — matched to the
   Subscribe button's exact size/style so they read as one consistent stack. */
.footer-cta-btn {
    display: block;
    width: 100%;
    height: 60px;
    line-height: 60px;
    background: #1A9120;
    color: #fff;
    text-align: center;
    margin-top: 20px;
    font-weight: 500;
    text-decoration: none;
}
.footer-cta-btn:hover {
    background: #147519;
    color: #fff;
}

/* Main nav carries 6 top-level items (Organic Academy moved out of "More";
   Services moved into "More"). The template's default 30px side padding per
   item is slightly too wide at narrower desktop widths, so it's trimmed a
   little here rather than in style.css, only at the same >=992px breakpoint
   the template itself uses for the desktop nav. */
@media screen and (min-width: 992px) {
    .cp-header-area .main-menu ul > li > a {
        padding: 40px 16px;
    }
}
@media screen and (min-width: 992px) and (max-width: 1300px) {
    .cp-header-area .main-menu ul > li > a {
        padding: 40px 5px;
        font-size: 14.5px;
    }
}

/* Secondary nav row (desktop only): surfaces a few high-priority pages that
   would otherwise be buried inside the "More" dropdown. Lives INSIDE
   #cp-header-sticky (not as a sibling of it) so it scrolls and sticks
   together with the main nav row once JS applies the .sticky class to that
   element on scroll — placing it outside would leave it behind, hidden
   under the now-fixed header. Deliberately slim (single-line, small type)
   so it doesn't add meaningful vertical space to the header. */
.kh-secondary-nav {
    background: #eef7ee;
    border-top: 1px solid #e2e2e2;
    /* Full-bleed: #cp-header-sticky (the parent) inherits large side padding
       from .cp-header-area .menu-area (220px down to 20px depending on
       breakpoint). This classic calc(-50vw + 50%) trick cancels that out so
       the background spans the true viewport edge-to-edge regardless of the
       parent's padding or breakpoint, without triggering a horizontal
       scrollbar the way width:100vw alone can. */
    width: auto;
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
}
.kh-secondary-nav ul {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 28px;
    list-style: none;
    margin: 0;
    padding: 7px 65px;
}
.kh-secondary-nav ul li a {
    color: #1A9120;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    transition: color 0.2s ease;
}
.kh-secondary-nav ul li a:hover {
    color: #0B3D2C;
}
@media (max-width: 991px) {
    .kh-secondary-nav {
        display: none;
    }
}

/* The 5 pages surfaced in .kh-secondary-nav are deliberately duplicated as
   "li.kh-secnav-dup" entries inside the "More" dropdown too, rather than
   being removed from that markup entirely. meanmenu.js builds the mobile
   accordion menu by cloning the *raw HTML* of #mobile-menu verbatim
   (jQuery(target).html()) at whatever breakpoint it activates at — so if
   these items existed only in .kh-secondary-nav (desktop-only, display:none
   below 992px), mobile users would have no way to reach these 5 pages at
   all. Hiding the duplicates only at desktop widths, where the secondary
   nav row already shows them, avoids that dead end without touching
   meanmenu itself. */
@media (min-width: 992px) {
    .kh-secnav-dup {
        display: none;
    }
}

/* Brand-colored scrollbar (replaces default gray) */
html {
    scrollbar-width: thin;
    scrollbar-color: #1A9120 #F1F1F1;
}
::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}
::-webkit-scrollbar-track {
    background: #F1F1F1;
}
::-webkit-scrollbar-thumb {
    background-color: #1A9120;
    border-radius: 10px;
    border: 2px solid #F1F1F1;
}
::-webkit-scrollbar-thumb:hover {
    background-color: #147519;
}

.nogamu-toast {
    position: fixed;
    left: 50%;
    bottom: 30px;
    transform: translate(-50%, 20px);
    background: #1A9120;
    color: #fff;
    padding: 12px 26px;
    border-radius: 30px;
    font-size: 14px;
    font-weight: 600;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
    z-index: 99999;
    opacity: 0;
    transition: all 0.3s ease;
    pointer-events: none;
}
.nogamu-toast.show {
    opacity: 1;
    transform: translate(-50%, 0);
}

/* Heart icon (SVG) — outline by default, solid red once wishlisted.
   Used on product cards, product-single, and the floating wishlist button. */
.heart-icon {
    width: 20px;
    height: 20px;
    overflow: visible;
}
.heart-icon path {
    fill: none;
    stroke: #16171A;
    stroke-width: 1.8;
    stroke-linejoin: round;
    stroke-linecap: round;
    transition: fill 0.25s ease, stroke 0.25s ease;
}
.add-to-wishlist-btn.active .heart-icon path {
    fill: #e0245e;
    stroke: #e0245e;
}
.add-to-wishlist-btn {
    transition: transform 0.2s ease;
}
.add-to-wishlist-btn:active {
    transform: scale(1.25);
}
.add-to-wishlist-btn.just-added {
    animation: nogamuHeartPop 0.4s ease;
}
@keyframes nogamuHeartPop {
    0% { transform: scale(1); }
    40% { transform: scale(1.35); }
    100% { transform: scale(1); }
}

/* Product card wishlist heart on shop grid */
.product-img .product-wishlist-toggle {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 36px;
    height: 36px;
    background: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    z-index: 2;
    transition: transform 0.2s;
}
.product-img .product-wishlist-toggle:hover {
    transform: scale(1.08);
}

/* Floating dynamic action buttons (wishlist + cart) — sitewide, fixed position */
.nogamu-floating-actions {
    position: fixed;
    right: 22px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 14px;
    z-index: 9998;
}
.floating-action-btn {
    position: relative;
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 6px 20px rgba(0,0,0,0.18);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.floating-action-btn:hover {
    transform: scale(1.08);
    box-shadow: 0 10px 26px rgba(0,0,0,0.24);
}
.floating-action-btn svg {
    width: 22px;
    height: 22px;
}
.floating-cart-btn svg path,
.floating-cart-btn svg circle {
    fill: none;
    stroke: #1A9120;
    stroke-width: 1.8;
    stroke-linejoin: round;
    stroke-linecap: round;
}
.floating-badge {
    box-sizing: border-box;
    position: absolute;
    top: -6px;
    right: -6px;
    min-width: 22px;
    height: 22px;
    border-radius: 11px;
    border: 2px solid #fff;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    padding: 0 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}
.floating-wishlist-btn .floating-badge {
    background: #e0245e;
}
.floating-cart-btn .floating-badge {
    background: #1A9120;
}
@media (max-width: 767px) {
    .nogamu-floating-actions {
        right: 10px;
        gap: 10px;
    }
    .floating-action-btn {
        width: 46px;
        height: 46px;
    }
    .floating-action-btn svg {
        width: 19px;
        height: 19px;
    }
    .floating-badge {
        min-width: 19px;
        height: 19px;
        border-radius: 10px;
        font-size: 10px;
        top: -5px;
        right: -5px;
    }
}

/* Wishlist page */
.wishlist-item-card {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.06);
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 20px;
}
.wishlist-item-card .wishlist-item-img {
    width: 90px;
    height: 90px;
    min-width: 90px;
    border-radius: 10px;
    overflow: hidden;
}
.wishlist-item-card .wishlist-item-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.wishlist-item-card .wishlist-item-body {
    flex: 1;
}
.wishlist-item-card h4 {
    font-size: 17px;
    margin-bottom: 6px;
}
.wishlist-item-card .price {
    color: #1A9120;
    font-weight: 700;
    font-size: 16px;
}
.wishlist-stock-badge {
    display: inline-block;
    font-size: 12px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 20px;
    margin-left: 10px;
}
.wishlist-stock-badge.low {
    background: #fff2e0;
    color: #d4770a;
}
.wishlist-stock-badge.in {
    background: #eef7ee;
    color: #1A9120;
}
.wishlist-item-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.wishlist-empty-state {
    text-align: center;
    padding: 80px 20px;
}
.wishlist-empty-state i {
    font-size: 60px;
    color: #ddd;
    margin-bottom: 20px;
    display: block;
}

/* Cart page quantity stepper (functional version of the template's decorative markup) */
.quantity.cart-plus-minus {
    position: relative;
}
.quantity.cart-plus-minus .qtybutton {
    cursor: pointer;
    user-select: none;
}
.cart-remove-btn {
    cursor: pointer;
    background: none;
    border: none;
    padding: 0;
}

/* Members directory */
.member-card {
    background: #fff;
    border-radius: 16px;
    padding: 30px 24px;
    text-align: center;
    box-shadow: 0 10px 30px rgba(0,0,0,0.06);
    height: 100%;
    position: relative;
    border-top: 4px solid #1A9120;
}
.member-card.tier-platinum { border-top-color: #6c5ce7; }
.member-card.tier-gold { border-top-color: #d4a017; }
.member-card.tier-silver { border-top-color: #9aa0a6; }
.member-card.tier-bronze { border-top-color: #a0522d; }
.member-card.tier-individual { border-top-color: #1A9120; }
.member-card .member-avatar {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background: #1A9120;
    color: #fff;
    font-weight: 700;
    font-size: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
}
.member-card .member-verified {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    color: #1A9120;
    background: rgba(26,145,32,0.08);
    padding: 4px 12px;
    border-radius: 30px;
    margin-bottom: 10px;
}
.member-card h4 {
    margin-bottom: 6px;
}
.member-card .member-tier-badge {
    display: inline-block;
    font-size: 12px;
    font-weight: 700;
    padding: 4px 14px;
    border-radius: 30px;
    color: #fff;
    background: #1A9120;
    margin-bottom: 14px;
}
.member-card.tier-platinum .member-tier-badge { background: #6c5ce7; }
.member-card.tier-gold .member-tier-badge { background: #d4a017; }
.member-card.tier-silver .member-tier-badge { background: #9aa0a6; }
.member-card.tier-bronze .member-tier-badge { background: #a0522d; }
.member-card .member-meta {
    font-size: 13px;
    color: #666;
    margin-bottom: 4px;
}
.member-card .member-meta i {
    color: #1A9120;
    margin-right: 6px;
}
.member-card .member-what-they-do {
    font-size: 13px;
    color: #666;
    line-height: 1.5;
    margin-bottom: 10px;
}
.member-card .member-tags {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
    margin: 12px 0 4px;
}
.member-tag {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    padding: 3px 12px;
    border-radius: 30px;
    color: #1A9120;
    background: rgba(26,145,32,0.08);
    border: 1px solid rgba(26,145,32,0.2);
}
.member-card .member-website-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: #1A9120;
    margin-top: 10px;
    font-weight: 600;
}
.member-card .member-website-link:hover {
    text-decoration: underline;
}
.member-card .member-profile-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 700;
    color: #222;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid #eee;
    width: 100%;
    justify-content: center;
}
.member-card .member-profile-link:hover {
    color: #1A9120;
}
.members-empty-note {
    text-align: center;
    padding: 40px 20px;
    background: #F5F5F5;
    border-radius: 16px;
    color: #555;
}

/* Resources */
.resource-card .resource-link.disabled {
    opacity: 0.6;
    pointer-events: none;
}

/* Application form */
.application-form-wrap {
    background: #fff;
    border-radius: 16px;
    padding: 40px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.06);
}
.application-form-wrap label {
    font-weight: 600;
    font-size: 14px;
    margin-bottom: 6px;
    display: inline-block;
}
.application-form-wrap .form-control,
.application-form-wrap .form-select {
    margin-bottom: 20px;
}
.application-form-wrap .required-star {
    color: #e0245e;
}
.membership-fee-note {
    font-size: 13px;
    color: #666;
}

/* Success animation (order / application submitted) */
.nogamu-success-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.55);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 100000;
}
.nogamu-success-overlay.show {
    display: flex;
}
.nogamu-success-box {
    background: #fff;
    border-radius: 24px;
    padding: 40px;
    text-align: center;
    max-width: 380px;
    width: 90%;
}
.nogamu-success-box .glow-check svg {
    filter: drop-shadow(0 0 15px #00c85188);
    animation: nogamuGlow 1.5s infinite alternate;
}
@keyframes nogamuGlow {
    0% { filter: drop-shadow(0 0 8px #00c85188); }
    100% { filter: drop-shadow(0 0 24px #00c851cc); }
}
.nogamu-success-box h4 {
    color: #1A9120;
    font-weight: 700;
    margin: 16px 0 8px;
}
.nogamu-success-box p {
    color: #555;
    margin-bottom: 20px;
}
.nogamu-success-box button {
    background: #1A9120;
    color: #fff;
    border: none;
    padding: 10px 30px;
    border-radius: 30px;
    font-weight: 600;
    cursor: pointer;
}