/**
 * Homepage Enhancements CSS
 * Professional styling for homepage sections
 */

/* ==========================================
   HEADER TOP-AREA CLEANUP (search row)
   ========================================== */

/* Empty search-results dropdown was rendering as a blank white card.
   .unvisible had no global display:none rule, so the styled
   .pos-search__result container (white bg + shadow) showed as an
   empty card beneath the search input. */
.unvisible {
    display: none !important;
}

/* Hide dummy static pos_links strip (Fashions/Electronic/... href="#") below search */
#header .elementor-element-damdygg {
    display: none !important;
}

/* Tighten the blue search row so it meets the teal logo row cleanly */
#header .elementor-element-nianpep {
    padding-top: 10px;
    padding-bottom: 10px;
}

/* Gap between "All Categories" button and the Search input */
#header .elementor-element-pvourkt > .elementor-widget-container {
    margin-left: 12px !important;
}

/* Slideshow section had 60px bottom margin — too much empty space
   before the first content section. Trim it. */
.elementor-element-sticxur {
    margin-bottom: 20px !important;
}

/* Card styling from custom.css was painting every col-100 column-wrap
   in top-sections as a white rounded card. That rule is for homepage
   content sections but also matched header/footer sections (e.g.
   ndpjczg image banner in header, about-us text and copyright row
   in footer), leaving white cards in those regions. Scope it out. */
#header .elementor-column-wrap,
#footer .elementor-column-wrap {
    background: transparent !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Image-box widget card look was also leaking into the footer
   "We specialise in delivery..." column, rendering it as a pale
   card on the dark blue footer. */
#footer .elementor-widget-image-box .elementor-image-box-wrapper {
    background: transparent !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
}
#footer .elementor-widget-image-box:hover .elementor-image-box-wrapper {
    transform: none !important;
    box-shadow: none !important;
}

/* Footer sections use max-width:1750px containers, so on wide viewports
   the columns touch the screen edges. Add horizontal gutter. */
#footer .elementor-top-section > .elementor-container {
    padding-left: 30px;
    padding-right: 30px;
}

/* ==========================================
   TOP BAR — Sign in + Business Account Signup buttons
   Both sit in the dark topbar and looked like plain text.
   Turn them into proper pill buttons: ghost for Sign in,
   filled accent for the B2B signup CTA. */
/* Give the topbar a right-side gutter so right-aligned buttons
   never butt against the viewport edge. */
#header .elementor-element-hctgrcr > .elementor-container {
    padding-right: 20px;
    padding-left: 20px;
}
#header .elementor-element-fszdjpw .elementor-widget-wrap {
    flex-wrap: wrap;
    row-gap: 6px;
}

#header .elementor-element-oyekcvg .pos-account > a.account-login {
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    padding: 5px 12px !important;
    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 999px;
    color: #e9eef2 !important;
    font-weight: 500;
    font-size: 12.5px !important;
    line-height: 1.2;
    white-space: nowrap;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
#header .elementor-element-oyekcvg .pos-account > a.account-login:hover {
    background-color: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.5);
    color: #ffffff !important;
}
#header .elementor-element-oyekcvg .pos-account > a.account-login i {
    font-size: 13px !important;
    line-height: 1;
}

#header a.kbb2b-signup-link,
#header a.kbb2b-signup-link:link,
#header a.kbb2b-signup-link:visited {
    display: inline-flex !important;
    align-items: center;
    gap: 6px !important;
    margin-left: 10px !important;
    padding: 6px 14px !important;
    border-radius: 999px !important;
    background-color: #ffffff !important;
    color: #1a2530 !important;
    font-weight: 600 !important;
    font-size: 12.5px !important;
    line-height: 1.2;
    text-decoration: none !important;
    white-space: nowrap;
    opacity: 1 !important;
    transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}
#header a.kbb2b-signup-link:hover,
#header a.kbb2b-signup-link:hover > span,
#header a.kbb2b-signup-link:hover > i {
    background-color: #80b435 !important;
    color: #ffffff !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    opacity: 1 !important;
}
#header a.kbb2b-signup-link > span {
    color: #1a2530 !important;
}
#header a.kbb2b-signup-link i.material-icons {
    font-size: 15px !important;
    line-height: 1;
    color: #1a2530 !important;
}

/* Customer Signup pill — the primary CTA for regular shoppers, so it gets
   the filled accent green while B2B keeps the white pill. */
#header a.kbb2b-customer-signup-link,
#header a.kbb2b-customer-signup-link:link,
#header a.kbb2b-customer-signup-link:visited {
    display: inline-flex !important;
    align-items: center;
    gap: 6px !important;
    margin-left: 10px !important;
    padding: 6px 14px !important;
    border-radius: 999px !important;
    background-color: #80b435 !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    font-size: 12.5px !important;
    line-height: 1.2;
    text-decoration: none !important;
    white-space: nowrap;
    opacity: 1 !important;
    transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}
#header a.kbb2b-customer-signup-link > span,
#header a.kbb2b-customer-signup-link i.material-icons {
    color: #ffffff !important;
}
#header a.kbb2b-customer-signup-link:hover,
#header a.kbb2b-customer-signup-link:hover > span,
#header a.kbb2b-customer-signup-link:hover > i {
    background-color: #ffffff !important;
    color: #1a2530 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    opacity: 1 !important;
}
#header a.kbb2b-customer-signup-link i.material-icons {
    font-size: 15px !important;
    line-height: 1;
}

/* ==========================================
   HEADER MAIN-MENU — nav-button styling
   Default CE template paints hover/active orange (#e6a303) which
   clashes with the teal header. Use secondary green (#80b435)
   so items read as distinct nav buttons, not orange text. */
#header .elementor-element-ynroewy .pos-menu-horizontal .menu-content {
    gap: 6px;
}
#header.use-sticky .elementor-element-ynroewy .pos-menu-horizontal .menu-item > a {
    color: rgba(255, 255, 255, 0.85) !important;
    padding: 10px 16px !important;
    margin: 0 !important;
    border-radius: 6px;
    border-width: 0 !important;
    font-weight: 600 !important;
    letter-spacing: 0.4px;
    transition: background-color 0.2s ease, color 0.2s ease;
}
#header.use-sticky .elementor-element-ynroewy .pos-menu-horizontal .menu-item:hover > a {
    color: #ffffff !important;
    background-color: #80b435 !important;
    border-color: transparent !important;
}
#header.use-sticky .elementor-element-ynroewy .pos-menu-horizontal .menu-item.active > a,
#header.use-sticky .elementor-element-ynroewy .pos-menu-horizontal .menu-item.home > a {
    color: #ffffff !important;
    background-color: #6a9a2d !important;
    border-color: transparent !important;
}
#header.use-sticky .elementor-element-ynroewy .pos-menu-vertical .menu-item.active > a,
#header.use-sticky .elementor-element-ynroewy .pos-menu-vertical .menu-item.home > a,
#header.use-sticky .elementor-element-ynroewy .pos-menu-vertical .menu-item:hover > a {
    color: #ffffff !important;
    border-color: #80b435 !important;
}

/* ==========================================
   FEATURED CATEGORIES — compact cards
   Cards had too much padding; shrink them so more fit per row. */
.elementor-element-rssppmc .category-item {
    padding: 0 6px;
}
.elementor-element-rssppmc .category-item .style3 {
    padding: 10px 8px;
    border-radius: 8px;
    min-height: 0;
}
.elementor-element-rssppmc .category-item .category-image {
    margin: 0 auto 6px;
    max-width: 70px;
}
.elementor-element-rssppmc .category-item .category-image img {
    max-height: 60px;
    width: auto;
    object-fit: contain;
}
.elementor-element-rssppmc .category-item .category-content {
    text-align: center;
}
.elementor-element-rssppmc .category-item .category-content .name {
    font-size: 12px;
    font-weight: 600;
    line-height: 1.25;
}

/* ==========================================
   CONTACT PAGE — ticket panel
   ========================================== */

.kbmpss-contact-panel {
    margin-bottom: 24px;
    border: 1px solid #e5e9ec;
    border-radius: 10px;
    background: #ffffff;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
}
.kbmpss-contact-panel .card-block {
    padding: 22px 26px;
}
.kbmpss-contact-panel h3 {
    color: #253237;
    margin: 0 0 6px;
    font-weight: 700;
}
.kbmpss-contact-panel .kbmpss-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 14px;
}
.kbmpss-contact-panel .kbmpss-pick-seller {
    margin: 14px 0 4px;
}
.kbmpss-contact-panel .btn-primary {
    background: #80b435;
    border-color: #80b435;
}
.kbmpss-contact-panel .btn-primary:hover {
    background: #6a9a2d;
    border-color: #6a9a2d;
}

/* ==========================================
   PAGE BACKGROUND
   ========================================== */

/* Light gray background for homepage content area */
#content-wrapper,
.page-home #content-wrapper {
    background-color: #f5f7fa;
}

/* ==========================================
   CARD SECTION CONTAINERS
   ========================================== */

/* Target top-level columns that contain our card sections */
.elementor-section.elementor-top-section > .elementor-container > .elementor-row > .elementor-column.elementor-col-100 > .elementor-column-wrap {
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.08);
    padding: 25px;
    margin: 10px 0;
}

/* Don't apply card to full-width sections (hero, sliders) */
.elementor-section.elementor-section-full_width > .elementor-container > .elementor-row > .elementor-column > .elementor-column-wrap,
.elementor-section[data-settings*="full_width"] > .elementor-container > .elementor-row > .elementor-column > .elementor-column-wrap {
    background: transparent !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* ==========================================
   SECTION HEADERS
   ========================================== */

/* Header row inside sections */
.elementor-inner-section {
    margin-bottom: 15px;
}

/* Header title */
.elementor-inner-section .elementor-widget-heading .elementor-heading-title {
    font-size: 20px !important;
    font-weight: 700 !important;
    color: #253237 !important;
    margin: 0;
    padding: 0;
}

/* Standalone heading in card sections.
   2026-09-10 (R2#3): border-bottom removed. This selector matches EVERY heading
   in EVERY top section, so it drew the short rule under each section title
   ("Today's Deals", "Shop By Category", "Grocery Essentials"). The same rule is
   duplicated in custom.css and homepage-cards.css — all three were changed. */
.elementor-top-section .elementor-widget-heading .elementor-heading-title {
    font-size: 20px;
    font-weight: 700;
    color: #253237;
    padding-bottom: 0;
    margin-bottom: 14px;
    border-bottom: 0;
}

/* ==========================================
   VIEW ALL BUTTONS
   ========================================== */

.elementor-widget-button .elementor-button.elementor-size-xs {
    background: #80b435 !important;
    color: #ffffff !important;
    border-radius: 20px !important;
    font-weight: 600 !important;
    font-size: 12px !important;
    padding: 8px 18px !important;
    border: none !important;
    transition: all 0.3s ease;
}

.elementor-widget-button .elementor-button.elementor-size-xs:hover {
    background: #6a9a2d !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(128, 180, 53, 0.3);
}

/* ==========================================
   PRODUCT CARDS
   ========================================== */

.elementor-widget-pos_products .product-miniature {
    background: #ffffff;
    border-radius: 10px;
    box-shadow: 0 2px 15px rgba(0, 0, 0, 0.06);
    transition: all 0.3s ease;
    overflow: hidden;
    margin: 5px;
    border: 1px solid #f0f0f0;
}

.elementor-widget-pos_products .product-miniature:hover {
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
    transform: translateY(-3px);
    border-color: #e0e0e0;
}

/* Product image container */
.elementor-widget-pos_products .product-miniature .thumbnail-container {
    border-radius: 10px 10px 0 0;
    overflow: hidden;
    background: #fafafa;
}

/* Product title */
.elementor-widget-pos_products .product-miniature .product-title a {
    font-weight: 600;
    color: #253237;
    font-size: 14px;
    line-height: 1.4;
}

.elementor-widget-pos_products .product-miniature .product-title a:hover {
    color: #80b435;
}

/* Product price */
.elementor-widget-pos_products .product-miniature .product-price-and-shipping {
    margin-top: 8px;
}

.elementor-widget-pos_products .product-miniature .product-price-and-shipping .price {
    font-weight: 700;
    color: #80b435;
    font-size: 16px;
}

.elementor-widget-pos_products .product-miniature .product-price-and-shipping .regular-price {
    color: #999;
    text-decoration: line-through;
    font-size: 13px;
}

/* Product description area */
.elementor-widget-pos_products .product-miniature .product-description {
    padding: 15px;
    background: #fff;
}

/* Add to cart button */
.elementor-widget-pos_products .product-miniature .add-to-cart {
    background: #80b435;
    border-color: #80b435;
    border-radius: 5px;
    font-weight: 600;
    transition: all 0.3s ease;
}

.elementor-widget-pos_products .product-miniature .add-to-cart:hover {
    background: #6a9a2d;
    border-color: #6a9a2d;
}

/* Product badges */
.elementor-widget-pos_products .product-miniature .product-flags .new,
.elementor-widget-pos_products .product-miniature .product-flags .on-sale {
    background: #80b435;
    border-radius: 3px;
    font-weight: 600;
    font-size: 11px;
    padding: 4px 10px;
}

.elementor-widget-pos_products .product-miniature .product-flags .discount {
    background: #e74c3c;
    border-radius: 3px;
}

.elementor-widget-pos_products .product-miniature .out-of-stock {
    background: #dc3545;
    color: #fff;
    font-size: 11px;
    padding: 4px 10px;
    border-radius: 3px;
}

/* ==========================================
   IMAGE BOX CARDS (Category/Seller cards)
   ========================================== */

.elementor-widget-image-box .elementor-image-box-wrapper {
    background: #fafafa;
    border-radius: 10px;
    padding: 15px;
    transition: all 0.3s ease;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}

.elementor-widget-image-box:hover .elementor-image-box-wrapper {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

.elementor-widget-image-box .elementor-image-box-img img {
    border-radius: 8px;
    transition: all 0.3s ease;
}

.elementor-widget-image-box .elementor-image-box-title {
    font-weight: 600 !important;
    color: #253237;
    margin-top: 12px;
}

.elementor-widget-image-box .elementor-image-box-title a {
    color: #253237;
}

.elementor-widget-image-box .elementor-image-box-title a:hover {
    color: #80b435;
}

.elementor-widget-image-box .elementor-image-box-description {
    color: #666666;
    font-size: 13px;
}

/* ==========================================
   CAROUSEL ARROWS
   ========================================== */

.elementor-widget-pos_products .slick-arrow,
.pos-products-widget .slick-arrow {
    background: #ffffff !important;
    border: 2px solid #e0e0e0 !important;
    border-radius: 50% !important;
    width: 40px !important;
    height: 40px !important;
    transition: all 0.3s ease;
    z-index: 10;
}

.elementor-widget-pos_products .slick-arrow:hover,
.pos-products-widget .slick-arrow:hover {
    background: #80b435 !important;
    border-color: #80b435 !important;
}

.elementor-widget-pos_products .slick-arrow:before,
.pos-products-widget .slick-arrow:before {
    color: #666 !important;
    transition: all 0.3s ease;
}

.elementor-widget-pos_products .slick-arrow:hover:before,
.pos-products-widget .slick-arrow:hover:before {
    color: #ffffff !important;
}

/* ==========================================
   RESPONSIVE ADJUSTMENTS
   ========================================== */

@media (max-width: 991px) {
    .elementor-section.elementor-top-section > .elementor-container > .elementor-row > .elementor-column.elementor-col-100 > .elementor-column-wrap {
        padding: 20px;
        margin: 8px 0;
    }

    .elementor-widget-pos_products .product-miniature {
        margin: 3px;
    }

    .elementor-widget-image-box .elementor-image-box-wrapper {
        padding: 12px;
    }
}

@media (max-width: 767px) {
    .elementor-section.elementor-top-section > .elementor-container > .elementor-row > .elementor-column.elementor-col-100 > .elementor-column-wrap {
        padding: 15px;
        border-radius: 8px;
    }

    .elementor-inner-section .elementor-widget-heading .elementor-heading-title,
    .elementor-top-section .elementor-widget-heading .elementor-heading-title {
        font-size: 18px !important;
    }

    .elementor-widget-button .elementor-button.elementor-size-xs {
        font-size: 11px !important;
        padding: 6px 14px !important;
    }
}

/* ==========================================
   NO IMAGE PLACEHOLDER
   ========================================== */

.elementor-widget-pos_products .product-miniature img[src*="no-image"],
.elementor-widget-pos_products .product-miniature .product-thumbnail img[alt=""] {
    background: #f5f5f5;
    padding: 20px;
    min-height: 150px;
    object-fit: contain;
}

/* ==========================================
   NEWSLETTER POPUP — pospopup module
   ------------------------------------------
   The popup rendered see-through over the slider and carried no visual:
   theme.css forces `#posnewsletterpopup { background-color: transparent
   !important }`, which killed the white background the module emits inline,
   and no background image was ever configured. Same treatment as contactnepal:
   veggies photo right, white fade left so the copy stays readable. The
   gradient sits on top of the photo; if the image ever fails to load, the
   configured white background (restored via the popup-header.tpl override in
   themes/theme_ecolife/modules/pospopup/) keeps the text legible.
   Popup only renders on the homepage, hence this file.
   ========================================== */
#posnewsletterpopup {
    background-image:
        linear-gradient(90deg, #ffffff 0%, rgba(255, 255, 255, 0.97) 46%, rgba(255, 255, 255, 0.6) 68%, rgba(255, 255, 255, 0) 100%),
        url('/img/cms/fres-veggies.jpg') !important;
    background-size: cover, cover;
    background-position: center, center right;
    background-repeat: no-repeat;
    border-radius: 8px;
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.3);
    max-width: calc(100vw - 6rem);
    text-align: left;
    /* theme.css animates a .posnewsletter-content wrapper this module never
       renders, so the popup just hard-faded in — animate the box itself. */
    transform: translateX(-50%) translateY(-50%) scale(0.94);
    transition: opacity 0.4s ease, visibility 0.4s ease,
                transform 0.45s cubic-bezier(0.7, 0, 0.2, 1);
}
#posnewsletterpopup.showed-pnp {
    transform: translateX(-50%) translateY(-50%) scale(1);
}
#posnewsletterpopup .pnp-content {
    max-width: 62%;
    text-align: left;
}
#posnewsletterpopup .pnp-desc h2,
#posnewsletterpopup .title-popup h2 {
    color: #1a2530;
    font-weight: 700;
    line-height: 1.3;
}
#posnewsletterpopup .pnp-desc p,
#posnewsletterpopup .title-popup p {
    color: #4a5763;
}
#posnewsletterpopup .pnp-newsletter-form .newsletter-input {
    background: #ffffff;
    border: 1px solid #d5dbe0;
    color: #1a2530;
}
#posnewsletterpopup .pnp-newsletter-form .newsletter-input:focus {
    border-color: #80b435;
    outline: none;
}
/* The module's own pospopup.css loads after theme.css and repaints the button
   #ebebeb while the theme's white text colour sticks — white on light grey,
   effectively invisible. Restore a readable brand button. */
#posnewsletterpopup .pnp-newsletter-form .pos-btn-newsletter {
    display: block;
    width: 100%;
    max-width: 450px;
    background: #80b435;
    color: #ffffff;
}
#posnewsletterpopup .pnp-newsletter-form .pos-btn-newsletter:hover {
    background: #6a9a2b;
    color: #ffffff;
}
#posnewsletterpopup .pnp-close-checkbox .custom-checkbox label {
    color: #4a5763;
}