/* ============================================================
   HAFIEXPO.COM — AMAZON-STYLE REDESIGN
   Brand: Dark Slate / Amazon Navy (#131921, #232F3E), Orange/Yellow accents (#FEBD69, #F3A847)
   Performance-first: CSS overrides only, zero extra JS
   ============================================================ */

/* ---------- 0. GOOGLE FONTS ---------- */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

/* ---------- 1. CSS ROOT VARIABLES (Amazon Theme) ---------- */
:root {
  --amz-navy:           #131921;
  --amz-navy-light:     #232F3E;
  --amz-yellow:         #FEBD69;
  --amz-orange:         #F3A847;
  --amz-orange-hover:   #F08804;
  --amz-link:           #007185;
  --amz-link-hover:     #C40000;
  --amz-bg:             #E3E6E6; /* Classic Amazon gray background */
  --text-dark:          #0F1111;
  --text-mid:           #565959;
  --bg-white:           #FFFFFF;
  --border-light:       #D5D9D9;
  --radius-sm:          4px;
  --radius-md:          8px;
  --shadow-card:        0 1px 4px rgba(0,0,0,0.15);
  --font-main:          'Inter', Arial, sans-serif;
  --transition:         all .15s ease-in-out;
}

/* ---------- 2. BASE RESET ---------- */
*, *::before, *::after { box-sizing: border-box; }

body {
  font-family: var(--font-main) !important;
  background-color: var(--amz-bg) !important;
  color: var(--text-dark) !important;
  -webkit-font-smoothing: antialiased;
}

a { 
  color: var(--amz-link) !important; 
  text-decoration: none !important;
  transition: var(--transition);
}
a:hover {
  color: var(--amz-link-hover) !important;
  text-decoration: underline !important;
}

/* Hide ALL Maps everywhere (User Request) */
iframe[src*="google.com/maps"],
.map-container,
#map,
.contact-map { 
  display: none !important; 
}

/* ---------- 3. TOP BAR & MAIN HEADER (Amazon Dark Navy) ---------- */
.top-bar,
.header-top,
.header-main,
.navbar-header,
header.header,
.mobile-nav-container,
.nav-mobile-header,
.nav-mobile-header-container {
  background-color: var(--amz-navy) !important;
  border: none !important;
  padding: 4px 6px !important;
  color: white !important;
}

.top-bar *,
.header-top *,
.header-main *,
.top-bar a,
.header-top a {
  color: white !important;
  font-size: 13px !important;
}

/* Logo wrapper to give it space */
.navbar-brand,
.header-logo {
  padding: 4px 8px !important;
  border: 1px solid transparent;
  border-radius: 2px;
}
.navbar-brand:hover,
.header-logo:hover {
  border-color: white !important;
}

.navbar-brand img,
.header-logo img {
  max-height: 38px !important;
  object-fit: contain;
}

/* ---------- 4. SEARCH BAR (Amazon Style) ---------- */
.search-form,
.header-search {
  display: flex !important;
  border-radius: var(--radius-sm) !important;
  overflow: hidden !important;
  background: white;
  margin: 0 16px;
  flex: 1;
}

.search-form input[type="text"],
.search-form input[type="search"],
.header-search input {
  border: none !important;
  padding: 10px 14px !important;
  font-size: 15px !important;
  color: var(--text-dark) !important;
  width: 100% !important;
  border-radius: var(--radius-sm) 0 0 var(--radius-sm) !important;
}
.search-form input:focus {
  outline: 2px solid var(--amz-orange) !important;
  outline-offset: -2px;
} /* Focus ring inside */

.search-form button,
.header-search button,
button.btn-search {
  background-color: var(--amz-yellow) !important;
  border: none !important;
  color: var(--text-dark) !important;
  padding: 0 20px !important;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0 !important;
  cursor: pointer;
  transition: background .2s;
}
.search-form button:hover,
button.btn-search:hover {
  background-color: var(--amz-orange) !important;
}
/* Recolor the search icon inside the button */
.search-form button i,
button.btn-search i {
  color: var(--text-dark) !important;
  font-size: 18px;
}

/* ---------- 5. HEADER ICONS & CART ---------- */
.nav-icon a,
.header-icons a,
.li-cart a {
  padding: 8px 12px !important;
  border: 1px solid transparent;
  border-radius: 2px;
  display: flex !important;
  flex-direction: column;
  align-items: center;
  text-decoration: none !important;
}
.nav-icon a:hover,
.header-icons a:hover,
.li-cart a:hover {
  border-color: white !important;
  text-decoration: none !important;
}

/* Cart count badge (Amazon Orange) */
.cart-items-count,
.label-nav-icon-badge,
span.badge {
  background-color: var(--amz-orange) !important;
  color: #111 !important;
  font-weight: bold !important;
  border-radius: 50% !important;
  position: absolute;
  top: 0;
  right: 4px;
}

/* ---------- 6. SELL NOW / PRIMARY BUTTON (Amazon Yellow) ---------- */
.btn-custom,
.btn-sell-now {
  background-color: var(--amz-yellow) !important;
  color: var(--text-dark) !important;
  border: 1px solid #A88734 !important;
  border-radius: var(--radius-sm) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.4) inset !important;
  font-weight: 500 !important;
  padding: 8px 16px !important;
}
.btn-custom:hover,
.btn-sell-now:hover {
  background-color: var(--amz-orange) !important;
  text-decoration: none !important;
}

/* Add to cart / Buy Buttons inside product cards */
.btn-add-to-cart,
.btn-cart,
.add-to-cart {
  background-color: var(--amz-yellow) !important;
  color: var(--text-dark) !important;
  border: 1px solid #A88734 !important;
  border-radius: var(--radius-md) !important;
  border-radius: 100px !important; /* Amazon uses pill shapes for their Add to Cart now */
  font-size: 13px !important;
  padding: 6px 14px !important;
  width: 100%;
  margin-top: 8px;
}
.btn-add-to-cart:hover,
.btn-cart:hover {
  background-color: var(--amz-orange-hover) !important;
  border-color: #9C7E31 !important;
}

/* ---------- 7. NAV MENU BAR (Amazon Secondary Header) ---------- */
.nav-main,
.main-nav,
.navbar-nav.mega-menu {
  background-color: var(--amz-navy-light) !important;
  padding: 0 12px !important;
}

.nav-main .nav-link,
.main-nav .nav-link,
.navbar-nav.mega-menu > li > a {
  color: white !important;
  font-size: 14px !important;
  padding: 8px 10px !important;
  border: 1px solid transparent !important;
  border-radius: 2px !important;
}
.nav-main .nav-link:hover,
.navbar-nav.mega-menu > li > a:hover {
  border-color: white !important;
  text-decoration: none !important;
}

/* ---------- 8. PRODUCT CARDS (Amazon White Boxes) ---------- */
/* Amazon separates its grey background with stark white blocks */
.products-grid .card,
.product-item,
.product-card {
  background-color: var(--bg-white) !important;
  border: 1px solid var(--border-light) !important;
  border-radius: var(--radius-sm) !important;
  padding: 12px !important;
  box-shadow: none !important; /* Flat design */
  transition: transform .1s;
}
.products-grid .card:hover,
.product-item:hover,
.product-card:hover {
  border-color: transparent !important;
  box-shadow: 0 0 8px rgba(0,0,0,.15) !important; 
}

/* Product title */
.product-card .card-title,
.product-card .product-name,
.product-item .name {
  color: var(--text-dark) !important;
  font-weight: 500 !important;
  font-size: 15px !important;
  line-height: 1.4 !important;
  display: -webkit-box;
  -webkit-line-clamp: 2; /* Truncate after 2 lines like Amazon */
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 4px !important;
}
.product-card .card-title:hover,
.product-item .name:hover {
  color: var(--amz-link-hover) !important;
  text-decoration: underline !important;
}

/* Prices */
.price-main,
.product-price,
.price .amount {
  color: #B12704 !important; /* Amazon Red Price */
  font-size: 18px !important;
  font-weight: 500 !important;
}
.price-old,
.price-compare {
  color: var(--text-mid) !important;
  font-size: 13px !important;
  text-decoration: line-through !important;
}

/* Star Ratings (Amazon Orange Stars) */
.stars i,
.rating i,
.star-filled {
  color: #FFA41C !important;
}

/* Tags/Badges (Amazon Choice style) */
.badge-sponsored {
  background-color: #232F3E !important;
  color: white !important;
  border-radius: 0 !important;
  font-size: 11px !important;
  padding: 2px 6px !important;
}

/* ---------- 9. CATEGORY / HOME BOXES ---------- */
/* Amazon's homepage uses large white squares with titles */
.category-card,
.shop-by-category .item,
.home-category-box {
  background-color: var(--bg-white) !important;
  border-radius: 0 !important;
  padding: 20px !important;
  margin-bottom: 20px;
  box-shadow: rgb(0 0 0 / 10%) 0px 1px 3px 0px !important;
}
.category-card span {
  font-weight: 700 !important;
  font-size: 18px !important;
  color: var(--text-dark) !important;
}

/* ---------- 10. HERO SLIDER ---------- */
.main-slider,
.slider-section {
  max-width: 1500px;
  margin: 0 auto;
}
/* Add a gradient fade at the bottom of the slider to blend into the grey bg */
.main-slider::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 250px;
  background: linear-gradient(to bottom, rgba(227,230,230,0) 0%, rgba(227,230,230,1) 100%);
  z-index: 10;
  pointer-events: none;
}

/* ---------- 11. SIDEBAR FILTERS ---------- */
.sidebar,
.filter-sidebar {
  background: transparent !important;
  border: none !important;
  padding: 0 16px 0 0 !important;
}
.sidebar h4,
.filter-sidebar h4,
.widget-title {
  font-weight: 700 !important;
  font-size: 14px !important;
  color: var(--text-dark) !important;
  margin-bottom: 8px !important;
}

/* ---------- 12. FOOTER (Amazon Dark) ---------- */
footer,
.footer,
.site-footer {
  background-color: var(--amz-navy-light) !important;
  color: white !important;
  padding-top: 40px !important;
  margin-top: 40px !important;
}
.footer-title,
footer h4 {
  color: white !important;
  font-weight: 700 !important;
  font-size: 16px !important;
  margin-bottom: 12px !important;
}
footer a,
.footer a {
  color: #DDDDDD !important;
  font-size: 14px !important;
  line-height: 2.2 !important;
}
footer a:hover {
  text-decoration: underline !important;
}

.footer-bottom,
.copyright {
  background-color: var(--amz-navy) !important;
  padding: 30px 0 !important;
  text-align: center;
  border-top: none !important;
  color: #ddd !important;
}

/* Back to top button (Amazon style full-width bar) */
.scroll-top-bar,
.back-to-top {
  background-color: #37475A !important;
  color: white !important;
  text-align: center;
  padding: 15px 0;
  cursor: pointer;
  display: block;
  font-size: 13px;
}
.scroll-top-bar:hover {
  background-color: #485769 !important;
}

/* ---------- 13. ALIGNMENT & RESPONSIVE ---------- */
.container,
.container-fluid {
  max-width: 1480px !important;
  padding-left: 15px !important;
  padding-right: 15px !important;
}

@media (max-width: 768px) {
  .search-form {
    margin: 8px 0 !important;
    width: 100% !important;
  }
  
  /* Mobile header layout fixes */
  .nav-mobile-header-container {
    display: flex !important;
    align-items: center !important;
    padding: 5px 0 !important;
  }
  .flex-item-left { width: 40px !important; }
  .flex-item-mid { 
    flex: 1 !important; 
    display: flex !important; 
    justify-content: center !important; 
    min-width: 0; /* Allow shrinking */
  }
  .mobile-logo img {
    max-width: 180px !important;
    height: auto !important;
    max-height: 45px !important;
  }
  .flex-item-right {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
  }
  
  /* Hide redundant search icon in top row since search bar is visible below */
  .a-search-icon { display: none !important; }
  
  .flex-item-right .button-link,
  .flex-item-right .a-mobile-cart {
    padding: 4px 5px !important;
    margin-left: 4px !important;
  }

  /* Mobile header icons */
  .btn-open-mobile-nav i,
  .a-mobile-cart i,
  .button-link i {
    color: white !important;
    font-size: 22px !important;
  }

  /* Mobile cart */
  .a-mobile-cart {
    position: relative;
    padding: 6px !important;
    margin-left: 12px;
    display: inline-block;
  }
  
  .a-mobile-cart .span_cart_product_count {
    background-color: var(--amz-orange) !important;
    color: #111 !important;
    font-weight: bold !important;
    position: absolute;
    top: -2px;
    right: -4px;
    border-radius: 50%;
    padding: 3px 6px;
    font-size: 12px;
    line-height: 1;
  }

  /* Form wrapper */
  .mobile-search-form {
    display: flex !important;
    margin: 10px 15px !important;
    border-radius: var(--radius-sm) !important;
    overflow: hidden !important;
    background: white;
  }
  .mobile-search-form form {
    display: flex;
    width: 100%;
  }
  .mobile-search-form input {
    border: none !important;
    padding: 10px 14px !important;
    font-size: 15px !important;
    width: 100% !important;
    border-radius: var(--radius-sm) 0 0 var(--radius-sm) !important;
  }
  .mobile-search-form input:focus {
    outline: 2px solid var(--amz-orange) !important;
    outline-offset: -2px;
  }
  .mobile-search-form button {
    background-color: var(--amz-yellow) !important;
    border: none !important;
    padding: 0 16px !important;
    color: var(--text-dark) !important;
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0 !important;
    cursor: pointer;
  }
  .mobile-search-form button i {
    color: var(--text-dark) !important;
    font-size: 18px;
  }
  
  /* Product cards spacing */
  .product-item {
    margin-bottom: 12px !important;
  }
}