/* ============================================================
   Studio Mint Theme Override — Storefront & Marketplace
   ============================================================
   Applies Studio Mint visual styling to:
   1. Vendor Store (store/<vendor_slug>)
   2. Marketplace - Cart Mode (store/)
   3. Marketplace - Sales Mode (store/classified)
   ============================================================ */

/* ---- Google Fonts: Be Vietnam Pro ---- */
@import url('https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:wght@400;500;600;700;800&display=swap');

/* ============================================================
   1.  CSS VARIABLES (STOREFRONT)
   ============================================================ */
:root {
    --store-primary: #173828;
    --store-primary-mint: #B8F4CF;
    --store-primary-mint-hover: #9AE8B8;
    --store-secondary: #66736B;
    --store-text-primary: #18241F;
    --store-text-secondary: #66736B;
    --store-text-muted: #97A39C;
    --store-bg-page: #F5F7F5;
    --store-bg-card: #FFFFFF;
    --store-bg-secondary: #F6F8F6;
    --store-border: #E6EBE7;
    --store-radius: 16px;
    --store-radius-sm: 9px;
    --store-shadow: 0 1px 3px rgba(24, 36, 31, 0.04);
    --store-shadow-hover: 0 8px 24px rgba(24, 36, 31, 0.08);
    --store-transition: all 150ms ease;
    --store-font: 'Be Vietnam Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* ============================================================
   2.  GLOBAL BODY & TYPOGRAPHY
   ============================================================ */
body {
    background-color: #F5F7F5 !important;
    color: #18241F !important;
    font-family: 'Be Vietnam Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}

h1, h2, h3, h4, h5, h6 {
    color: #18241F !important;
    font-family: 'Be Vietnam Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}

p, span, label, a {
    font-family: 'Be Vietnam Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}

/* ============================================================
   3.  TOP BAR & NOTIFICATION BAR
   ============================================================ */
.top-bar,
.top-bar.bg-main {
    background-color: #FFFFFF !important;
    border-bottom: 1px solid #E6EBE7 !important;
    color: #66736B !important;
}

.top-bar .container {
    color: #66736B !important;
    font-size: 13px !important;
}

/* ============================================================
   4.  STORE HEADER & NAVIGATION (CART MODE & VENDOR STORE)
   ============================================================ */
header,
#myHeader {
    background-color: #FFFFFF !important;
    border-bottom: 1px solid #E6EBE7 !important;
    box-shadow: 0 1px 3px rgba(24, 36, 31, 0.04) !important;
    padding: 8px 0 !important;
}

header .navbar-expand-lg .navbar-nav .nav-link {
    color: #66736B !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    padding: 6px 14px !important;
    border-radius: 8px !important;
    transition: all 150ms ease !important;
}

header .navbar-expand-lg .navbar-nav .nav-link:hover {
    color: #18241F !important;
    background-color: #F6F8F6 !important;
}

header .navbar-expand-lg .navbar-nav .nav-item.active .nav-link,
header .navbar-expand-lg .navbar-nav .nav-link.active {
    background-color: #18241F !important;
    color: #FFFFFF !important;
    border-radius: 8px !important;
}

/* Search Input in Header */
.header-right-listing .input-group {
    background-color: #F6F8F6 !important;
    border: 1px solid #E6EBE7 !important;
    border-radius: 9px !important;
    box-shadow: none !important;
}

.header-right-listing .input-group input {
    background: transparent !important;
    color: #18241F !important;
    border: none !important;
}

.header-right-listing .input-group input::placeholder {
    color: #97A39C !important;
}

/* Currency & Language Dropdown Links */
.header-right-listing .dropdown .js-link,
.header-right-listing .dropdown .js-link1,
.header-right-listing .dropdown .js-link2 {
    color: #18241F !important;
    font-weight: 500 !important;
    background-color: #F6F8F6 !important;
    border: 1px solid #E6EBE7 !important;
    border-radius: 9px !important;
    padding: 6px 12px !important;
}

/* Dropdown Menus */
.dropdown-menu,
.js-dropdown-list,
.js-dropdown-list1,
.js-dropdown-list2,
.cart-dropdown {
    background-color: #FFFFFF !important;
    border: 1px solid #E6EBE7 !important;
    border-radius: 12px !important;
    box-shadow: 0 8px 24px rgba(24, 36, 31, 0.08) !important;
}

.dropdown-menu .dropdown-item,
.js-dropdown-list li a,
.js-dropdown-list1 li a,
.js-dropdown-list2 li a {
    color: #18241F !important;
    border-radius: 8px !important;
    transition: background 150ms ease, color 150ms ease !important;
}

.dropdown-menu .dropdown-item:hover,
.js-dropdown-list li a:hover,
.js-dropdown-list1 li a:hover,
.js-dropdown-list2 li a:hover {
    background-color: rgba(184, 244, 207, 0.25) !important;
    color: #173828 !important;
}

/* ============================================================
   5.  VENDOR STORE BANNER (IMAGE 2 RIGHT)
   ============================================================ */
.single-ctg-banner {
    background: linear-gradient(135deg, #B8F4CF 0%, #8CE8B5 100%) !important;
    color: #173828 !important;
    border-bottom: 1px solid #E6EBE7 !important;
    min-height: 180px !important;
    padding: 40px 0 !important;
}

.single-ctg-banner .text-caption,
.single-ctg-banner .text-caption h1,
.single-ctg-banner .text-caption h2,
.single-ctg-banner .text-caption p {
    color: #173828 !important;
}

.single-ctg-banner .text-caption h2 {
    font-size: 38px !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
}

.single-ctg-banner .text-caption h1 {
    font-size: 22px !important;
    font-weight: 600 !important;
    opacity: 0.85 !important;
}

/* Vendor Contact Card in Vendor Store */
.vendor-store-contact-section .card {
    background: #FFFFFF !important;
    border: 1px solid #E6EBE7 !important;
    border-radius: 16px !important;
    box-shadow: 0 1px 3px rgba(24, 36, 31, 0.04) !important;
}

.sidebar-vendor-store .vendor-contact a {
    background-color: #B8F4CF !important;
    color: #173828 !important;
    border: 1px solid #B8F4CF !important;
    border-radius: 9px !important;
    padding: 6px 14px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    transition: all 150ms ease !important;
}

.sidebar-vendor-store .vendor-contact a:hover {
    background-color: #9AE8B8 !important;
    color: #173828 !important;
}

/* ============================================================
   6.  PRODUCT CARDS & BUTTONS (VENDOR STORE & CART MODE)
   ============================================================ */
.product-card,
.product-item,
.col-product,
.product-wrapper {
    background: #FFFFFF !important;
    border: 1px solid #E6EBE7 !important;
    border-radius: 16px !important;
    box-shadow: 0 1px 3px rgba(24, 36, 31, 0.04) !important;
    overflow: hidden !important;
    transition: all 150ms ease !important;
}

.product-card:hover,
.product-item:hover,
.product-wrapper:hover {
    box-shadow: 0 8px 24px rgba(24, 36, 31, 0.08) !important;
    transform: translateY(-2px) !important;
    border-color: #D5DCD7 !important;
}

.product-card .card,
.product-item .card {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* Product Titles & Prices */
.product-card h3,
.product-card h4,
.product-item h3,
.product-item h4,
.product-title {
    color: #18241F !important;
    font-weight: 600 !important;
}

.product-card .price,
.product-item .price,
.sale-price {
    color: #18241F !important;
    font-weight: 800 !important;
}

.regular-price {
    color: #97A39C !important;
}

/* Store Action Buttons */
.btn-cart-detail,
.btn-add-to-cart,
.btn.btn-cart-detail.bg-main2,
.btn.btn-primary {
    background-color: #B8F4CF !important;
    border-color: #B8F4CF !important;
    color: #173828 !important;
    font-weight: 600 !important;
    border-radius: 9px !important;
    transition: all 150ms ease !important;
}

.btn-cart-detail:hover,
.btn-add-to-cart:hover,
.btn.btn-cart-detail.bg-main2:hover,
.btn.btn-primary:hover {
    background-color: #9AE8B8 !important;
    border-color: #9AE8B8 !important;
    color: #173828 !important;
    transform: none !important;
}

/* Secondary Button (Details) */
.btn-details,
.btn-secondary,
.btn-outline-primary {
    background-color: #FFFFFF !important;
    border-color: #E6EBE7 !important;
    color: #18241F !important;
    font-weight: 600 !important;
    border-radius: 9px !important;
    transition: all 150ms ease !important;
}

.btn-details:hover,
.btn-secondary:hover,
.btn-outline-primary:hover {
    background-color: #F6F8F6 !important;
    border-color: #D5DCD7 !important;
    color: #18241F !important;
}

/* ============================================================
   7.  MARKETPLACE — CART MODE HERO (IMAGE 3 LEFT)
   ============================================================ */
.banner-slider,
.banner-caption {
    background-color: #F5F7F5 !important;
}

.banner-slide-title {
    color: #18241F !important;
    font-weight: 800 !important;
}

.banner-slide-sub,
.banner-slide-desc {
    color: #66736B !important;
}

/* Features Strip (Free shipping, Secure payment, etc.) */
.feature-box,
.features-box,
.features-section .card {
    background: #FFFFFF !important;
    border: 1px solid #E6EBE7 !important;
    border-radius: 14px !important;
    box-shadow: 0 1px 3px rgba(24, 36, 31, 0.04) !important;
}

/* ============================================================
   8.  MARKETPLACE — SALES MODE / CLASSIFIED (IMAGE 3 RIGHT)
   ============================================================ */
/* Header */
.classified-header,
.site-header {
    background-color: #FFFFFF !important;
    border-bottom: 1px solid #E6EBE7 !important;
    box-shadow: 0 1px 3px rgba(24, 36, 31, 0.04) !important;
}

.site-header .main-menu li a {
    color: #66736B !important;
    font-weight: 500 !important;
}

.site-header .main-menu li a:hover,
.site-header .main-menu li.active a {
    color: #18241F !important;
}

/* Classified Search Box */
.search-box,
.banner-search-box {
    background: #FFFFFF !important;
    border: 1px solid #E6EBE7 !important;
    border-radius: 16px !important;
    box-shadow: 0 8px 24px rgba(24, 36, 31, 0.08) !important;
    padding: 16px !important;
}

.search-box .form-control,
.search-box .form-select {
    background-color: #F6F8F6 !important;
    border: 1px solid #E6EBE7 !important;
    border-radius: 9px !important;
    color: #18241F !important;
}

.search-box .btn-search,
.search-box button[type="submit"] {
    background-color: #B8F4CF !important;
    border: 1px solid #B8F4CF !important;
    color: #173828 !important;
    font-weight: 700 !important;
    border-radius: 9px !important;
}

.search-box .btn-search:hover,
.search-box button[type="submit"]:hover {
    background-color: #9AE8B8 !important;
    color: #173828 !important;
}

/* Advertisement / Listing Cards */
.ad-item,
.listing-card,
.product-box {
    background: #FFFFFF !important;
    border: 1px solid #E6EBE7 !important;
    border-radius: 16px !important;
    box-shadow: 0 1px 3px rgba(24, 36, 31, 0.04) !important;
    overflow: hidden !important;
    transition: all 150ms ease !important;
}

.ad-item:hover,
.listing-card:hover,
.product-box:hover {
    box-shadow: 0 8px 24px rgba(24, 36, 31, 0.08) !important;
    border-color: #D5DCD7 !important;
    transform: translateY(-2px) !important;
}

/* Badges in Classified */
.badge-leads,
.badge-sale {
    background-color: #18241F !important;
    color: #FFFFFF !important;
    border-radius: 20px !important;
    font-weight: 600 !important;
}

/* ============================================================
   9.  STORE FOOTER
   ============================================================ */
footer,
.store-footer,
.site-footer {
    background-color: #FFFFFF !important;
    border-top: 1px solid #E6EBE7 !important;
    color: #66736B !important;
}

footer a,
.store-footer a,
.site-footer a {
    color: #66736B !important;
    transition: color 150ms ease !important;
}

footer a:hover,
.store-footer a:hover,
.site-footer a:hover {
    color: #18241F !important;
}