/**
 * SOCOCE Marketplace — Plugin Stylesheet
 *
 * Covers:
 *   1. Delivery address popup  (#sococe-location-popup)
 *   2. Order status timeline   (.sococe-order-timeline)
 *   3. B2B address selector    (.sococe-b2b-address-selector)
 *   4. Responsive / mobile adjustments
 *
 * Enqueued by: SOCOCE_Geolocation::enqueue_scripts() on all front-end pages
 * Version: 1.1.0
 */

/* =========================================================
   1. DELIVERY ADDRESS POPUP
   ========================================================= */

#sococe-location-popup {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(17, 17, 17, 0.55);
    z-index: 99999;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

#sococe-location-popup.is-visible {
    display: flex;
}

.sococe-popup-card {
    background: #fff;
    border-radius: 16px;
    padding: 28px 28px 32px;
    max-width: 460px;
    width: calc(100% - 32px);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.22);
    font-family: inherit;
    cursor: initial;
}

.sococe-popup-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 4px;
}

.sococe-popup-pin-icon {
    flex-shrink: 0;
    height: 28px;
    width: auto;
}

.sococe-popup-hero {
    text-align: center;
    margin: 12px 0 16px;
}

.sococe-popup-bg-img {
    max-width: 100%;
    max-height: 210px;
    object-fit: contain;
}

.sococe-popup-title {
    font-size: 20px;
    font-weight: 700;
    margin: 0;
    color: #1a1a1a;
    line-height: 1.3;
}

.sococe-popup-subtitle {
    font-size: 14px;
    color: #111111;
    margin: 0 0 16px;
    line-height: 1.5;
    text-align: center;
    font-weight: 700;
}

.sococe-popup-input {
    width: 100% !important;
    padding: 13px 20px !important;
    border: 1.5px solid #D4D8E1 !important;
    border-radius: 50px !important;
    font-size: 16px !important;
    box-sizing: border-box;
    outline: none;
    transition: border-color 0.2s !important;
    background: #fafafa;
}

.sococe-popup-input:focus {
    border-color: #8dc63f;
    background: #fff;
}

/* Google Places Autocomplete dropdown — must sit above the overlay backdrop (z-index: 99999) */
.pac-container {
    z-index: 100001 !important;
}

.sococe-popup-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #4A556D;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin: 20px 0;
}

.sococe-popup-divider::before,
.sococe-popup-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: #e0e0e0;
}

.sococe-gps-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    width: 100%;
    padding: 14px 20px !important;
    background: #8dc63f;
    background-color: rgb(141, 198, 63);
    color: #fff !important;
    border: none !important;
    border-radius: 50px !important;
    font-size: 20px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: background 0.2s !important;
    text-align: center !important;
    box-sizing: border-box;
}

.sococe-gps-btn-icon {
    flex-shrink: 0;
    height: 20px;
    width: auto;
}

.sococe-gps-btn:hover {
    background: #7ab32e;
}

.sococe-gps-btn:disabled {
    background: #aaa;
    cursor: not-allowed;
}

#sococe-gps-msg {
    display: none;
    margin-top: 10px;
    font-size: 13px;
    color: #c0392b;
    text-align: center;
}

/* =========================================================
   2. ORDER STATUS TIMELINE
   ========================================================= */

.sococe-order-timeline {
    display: flex;
    align-items: center;
    margin: 24px 0 28px;
    padding: 16px 0 0;
}

.sococe-order-timeline .timeline-step {
    flex: 1;
    text-align: center;
    font-size: 13px;
    font-weight: 500;
    color: #aaa;
    position: relative;
    padding-top: 12px;
}

/* Connector line between steps */
.sococe-order-timeline .timeline-step::before {
    content: '';
    position: absolute;
    top: -6px;
    left: 0;
    right: 0;
    height: 4px;
    background: #e0e0e0;
}

.sococe-order-timeline .timeline-step:first-child::before {
    left: 50%;
}

.sococe-order-timeline .timeline-step:last-child::before {
    right: 50%;
}

/* Step dot */
.sococe-order-timeline .timeline-step::after {
    content: '';
    position: absolute;
    top: -13px;
    left: 50%;
    transform: translateX(-50%);
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #e0e0e0;
    border: 2px solid #fff;
    box-shadow: 0 0 0 2px #e0e0e0;
}

/* Completed step */
.sococe-order-timeline .timeline-step.completed {
    color: #008000;
}

.sococe-order-timeline .timeline-step.completed::before {
    background: #008000;
}

.sococe-order-timeline .timeline-step.completed::after {
    background: #008000;
    box-shadow: 0 0 0 2px #008000;
}

/* Active (current) step */
.sococe-order-timeline .timeline-step.active {
    color: #008000;
    font-weight: 700;
}

.sococe-order-timeline .timeline-step.active::after {
    background: #008000;
    box-shadow: 0 0 0 2px #008000;
    width: 16px;
    height: 16px;
    top: -15px;
}

/* =========================================================
   3. B2B ADDRESS SELECTOR
   ========================================================= */

.sococe-b2b-address-selector {
    border: 1px solid #ddd;
    border-radius: 8px;
    overflow: hidden;
    margin: 16px 0;
}

.sococe-b2b-address-selector .sococe-address-option {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    border-bottom: 1px solid #f0f0f0;
    cursor: pointer;
    transition: background 0.15s;
}

.sococe-b2b-address-selector .sococe-address-option:last-child {
    border-bottom: none;
}

.sococe-b2b-address-selector .sococe-address-option:hover {
    background: #f8f9fa;
}

.sococe-b2b-address-selector .sococe-address-option.is-active {
    background: #f0f7f0;
    border-left: 3px solid #008000;
    padding-left: 13px;
}

.sococe-address-option .address-label {
    font-weight: 600;
    font-size: 14px;
    color: #1a1a1a;
    margin-bottom: 2px;
}

.sococe-address-option .address-line {
    font-size: 13px;
    color: #666;
}

.sococe-address-option .address-store-badge {
    margin-left: auto;
    font-size: 11px;
    background: #e8f5e9;
    color: #2e7d32;
    border-radius: 4px;
    padding: 2px 8px;
    white-space: nowrap;
    align-self: center;
    flex-shrink: 0;
}

.sococe-add-address-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    color: #008000;
    text-decoration: none;
    margin-top: 10px;
    font-weight: 500;
}

.sococe-add-address-link:hover {
    text-decoration: underline;
    color: #006600;
}

/* =========================================================
   4. RESPONSIVE — MOBILE
   ========================================================= */

@media (max-width: 600px) {

    #sococe-location-popup {
        align-items: flex-end;
    }

    .sococe-popup-card {
        border-radius: 16px 16px 0 0;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        max-width: 100%;
        width: 100%;
        padding: 24px 16px 32px;
    }

    .sococe-order-timeline {
        flex-direction: column;
        align-items: flex-start;
        gap: 0;
        padding: 0 0 0 24px;
    }

    .sococe-order-timeline .timeline-step {
        flex: none;
        width: 100%;
        text-align: left;
        padding: 8px 0 8px 20px;
    }

    /* Vertical connector line */
    .sococe-order-timeline .timeline-step::before {
        width: 4px;
        height: 100%;
        top: 0;
        left: -16px;
        right: auto;
    }

    .sococe-order-timeline .timeline-step:first-child::before {
        top: 50%;
        left: -16px;
    }

    .sococe-order-timeline .timeline-step:last-child::before {
        bottom: 50%;
        height: 50%;
        right: auto;
    }

    .sococe-order-timeline .timeline-step::after {
        left: -22px;
        top: 50%;
        transform: translateY(-50%);
    }

    .sococe-order-timeline .timeline-step.active::after {
        left: -24px;
    }
}


/* =========================================================
   5. B2BKING PRODUCT INFORMATION TABLE
   ========================================================= */

/* Remove default top margin so the table sits flush against the element above it. */
.b2bking_shop_table {
    margin-top: 0px !important;
    margin-bottom: 0px !important;
}

/* =========================================================
   6. LOCATION SELECT BOX  [location_select_box]
   ========================================================= */

/*
 * The clickable "Deliver in / {area}" widget rendered by the
 * [location_select_box] shortcode. Clicking opens the geolocation popup.
 * JS writes the selected area name into .sococe-location-box__area after each
 * successful address selection.
 */
.sococe-location-box {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    user-select: none;
    text-decoration: none;
}

.sococe-location-box:focus-visible {
    outline: 2px solid #8dc63f;
    outline-offset: 3px;
    border-radius: 6px;
}

.sococe-location-box__icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
}

.sococe-location-box__text {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
}

.sococe-location-box__label {
    font-size: 16px;
    font-weight: 400;
    color: #26314D;
    text-transform: none;
    white-space: nowrap;
}

.sococe-location-box__area {
    font-size: 16px;
    font-weight: 700;
    color: #1a1a1a;
    white-space: nowrap;
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (max-width: 767px) {
    .sococe-location-box__label {
        font-size: 14px;
    }

    .sococe-location-box__area {
        font-size: 14px;
        max-width: 75px;
    }
}

/* =========================================================
   7. Frontend adjustments for Woodmart theme
     - Specifically, the footer input field background color is too light and has poor contrast on mobile devices, so we override it here.
   ========================================================= */
.wd-footer input[type="email"] {
    background-color: #B7C1CC4D !important;
}

.wd-footer .wpcf7-spinner {
    display: none !important;
}

.wd-footer div.wpcf7 input[type="submit"],
.wd-footer div.wpcf7 input[type="submit"]:hover {
    background-color: #1a1a1a !important;
}

.wd-nav:where(:not(.wd-dis-act))>li:where(.current-menu-item, .wd-active, .active)>a {
    background-color: #26314D !important;
}

.wd-nav:where(:not(.wd-dis-act))>li:where(.current-menu-item, .wd-active, .active)>a:hover {
    background-color: #151b2b !important;
}

.soco-slider-heading h4 span {
    color: #94C21F !important;
}

.wd-loop-builder-off :where(.wd-product-wrapper, .product-element-bottom) {
    align-items: stretch;
    justify-content: center;
}

.wd-nav:where(:not(.wd-dis-act))>li:where(.current-menu-item, .wd-active, .active)>a {
    background-color: #94C21F !important;
    color: #fff !important;
}

.wd-nav:where(:not(.wd-dis-act))>li:where(.current-menu-item, .wd-active, .active)>a:hover,
.wd-nav:where(:not(.wd-dis-hover))>li:where(.wd-opened, :hover)>a {
    background-color: #7ab32e !important;
}

.offer-section p {
    font-size: 20px;
    font-weight: 700;
}

.offer-section a.btn-color-primary,
.offer-section a.btn-color-primary:hover {
    background-color: #fff !important;
    color: #26314D !important;
    font-size: 16px !important;
}

.testimon-style-boxed .testimonial-inner {
    background-color: #f6f6f6 !important;
}

.about-marquee .wd-marquee-item img {
    border-radius: 50% !important;
}

/* .about-brand .wd-brand-item img {
    opacity: .5;
    filter: grayscale(100%);
} */

.wd-dropdown-menu.wd-design-aside.wd-style-with-bg .wd-sub-menu-wrapp>.wd-sub-menu {
    background-color: #729618 !important;
}

.btn.btn-default {
    color: #fff !important;
}

.product-labels .product-label.out-of-stock {
    color: #fff !important;
}

.grecaptcha-badge {
    display: none !important;
}

@media (max-width: 767px) {

    .offer-section a.btn-color-primary,
    .offer-section a.btn-color-primary:hover {
        font-size: 14px !important;
    }

    .elementor-935 .elementor-element.elementor-element-0988ab6 div.product-category .wd-entities-title,
    .elementor-935 .elementor-element.elementor-element-0988ab6 .wd-nav-product-cat>li>a {
        font-size: 18px !important;
    }

    .sococe-hiw {
        padding: 35px 15px 5px 15px !important;
    }
}

/* =========================================================
   8. HOW IT WORKS  [how_it_works]
   ========================================================= */

/* =============================================================================
 * [sococe_store_link] — WoodMart header store icon
 * Uses the woodmart-font icon \f124 (store/shop glyph).
 * ============================================================================= */
.whb-col-right .wd-header-text {
    padding-inline: 0 !important;
}

.wd-header-store .wd-tools-icon::before {
    content: "\f146";
    font-family: "woodmart-font";
}

.sococe-hiw {
    display: flex;
    align-items: flex-start;
    justify-content: space-around;
    font-family: inherit;
    padding: 65px 25px 5px 25px;
    position: relative;
}

/* Single full-width line running behind all icon circles */
.sococe-hiw__connector {
    position: absolute;
    top: 113px;
    /* padding-top(65) + half icon-wrap height(46) */
    left: 15%;
    right: 25px;
    height: 1px;
    background: #B7C1CC;
    z-index: 0;
    width: 70%;
}

/* Horizontal connector line between steps */
.sococe-hiw__step {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 0 15px;
    flex: 0 0 auto;
    width: 290px;
    max-width: 100%;
    position: relative;
    z-index: 1;
}

.sococe-hiw__icon-wrap {
    width: 92px;
    height: 92px;
    border-radius: 50%;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0px 20px 40px 0px #121C270F;
    margin-bottom: 16px;
    flex-shrink: 0;
    border: 4px solid #EEF4FF;
}

.sococe-hiw__icon {
    object-fit: contain;
    display: block;
}

.sococe-hiw__title {
    display: block;
    font-size: 20px;
    font-weight: 700;
    color: #1a1a1a;
    margin-bottom: 8px;
    line-height: 1.3;
    font-family: inherit;
}

.sococe-hiw__desc {
    font-size: 16px;
    font-weight: 400;
    color: #555;
    margin: 0;
    line-height: 1.5;
    font-family: inherit;
}

/* Responsive: stack vertically on small screens */
@media (max-width: 640px) {
    .sococe-hiw {
        flex-direction: column;
        align-items: center;
        gap: 0;
    }

    .sococe-hiw__connector {
        display: none;
    }

    .sococe-hiw__step {
        padding: 0;
        max-width: 280px;
        margin-bottom: 24px;
    }
}

/* =========================================================
   10. DOKAN STORE PAGE — MOBILE SIDEBAR
   ========================================================= */


.dokan-store .wd-content-layout {
    padding-block: 20px;
}

.dokan-widget-area .widget_product_categories {
    padding: 20px;
    background-color: #F4F4F4;
    border-radius: 20px;
}

@media (min-width: 1000px) {
    .dokan-store-wrap .dokan-single-store {
        flex: 0 1 73% !important;
    }
}

@media (min-width: 1000px) {
    .dokan-store-wrap.layout-left .dokan-store-sidebar {
        margin-right: 2% !important;
    }
}