/*
Theme Name: Flatsome Child
Description: This is a child theme for Flatsome Theme
Author: UX Themes
Template: flatsome
Version: 3.0
*/

/*************** ADD CUSTOM CSS HERE.   ***************/
/*header*/
/* ============================================================
   JB Hi-Fi Style Header CSS
   Matches: Green top bar, Yellow middle, Black nav bottom
   Applied to existing HTML class names from kirtirva.com
   ============================================================ */

/* ── Google Font ── */

/* ── CSS Variables ── */
:root {
  --color-green:   #3aaa35;
  --color-yellow:  #ffd100;
  --color-black:   #111111;
  --color-white:   #ffffff;
  --color-dark-nav:#1a1a1a;
  --color-text-dark:#111111;
}

/* ============================================================
   RESET & BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  color: var(--color-text-dark);
}

a { text-decoration: none; color: inherit; }
ul { list-style: none; }

/* ============================================================
   TOP BAR  →  Green strip (promo / announcement bar)
   ============================================================ */
#top-bar,
.header-top {
  background-color: var(--color-green) !important;
  color: var(--color-white) !important;
  font-size: 13px;
  font-weight: 500;
  padding: 6px 0;
  text-align: center;
  line-height: 1.4;
}

#top-bar .flex-row,
.header-top .flex-row {
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 20px;
  gap: 10px;
}

/* Top bar text & links */
#top-bar *,
.header-top * {
  color: var(--color-white) !important;
}

#top-bar a,
.header-top a {
  color: var(--color-white) !important;
  font-weight: 700;
  text-decoration: underline;
}

#top-bar .html_topbar_left strong,
.header-top .html_topbar_left strong {
  font-size: 13px;
  letter-spacing: 0.02em;
}

/* Top bar nav items */
#top-bar .nav-small li,
.header-top .nav-small li {
  display: inline-flex;
  align-items: center;
}

/* Social icons in top bar */
.header-social-icons .social-icons a {
  color: var(--color-white) !important;
  font-size: 16px;
  margin: 0 4px;
  opacity: 0.9;
  transition: opacity 0.2s;
}
.header-social-icons .social-icons a:hover { opacity: 1; }

/* Newsletter icon */
.header-newsletter-item a {
  color: var(--color-white) !important;
  font-size: 14px;
}

/* Close / dismiss button if any */
#top-bar .close,
.header-top .close {
  color: var(--color-white) !important;
  font-size: 18px;
  cursor: pointer;
  opacity: 0.8;
}
#top-bar .close:hover { opacity: 1; }

/* ============================================================
   MASTHEAD / MAIN HEADER  →  Yellow band
   ============================================================ */
#masthead,
.header-main {
  background-color: var(--color-yellow) !important;
  border-bottom: none !important;
  padding: 0;
}

.header-main .header-inner {
  display: flex;
  align-items: center;
  max-width: 1280px;
  margin: 0 auto;
  padding: 10px 20px;
  gap: 16px;
}

/* ── Logo ── */
#logo,
.header-main .logo {
  flex-shrink: 0;
}

#logo a,
.header-main .logo a {
  display: flex;
  align-items: center;
}

#logo img,
.header-main .logo img,
.header_logo,
.header-logo {
  height: 54px !important;
  width: auto !important;
  max-width: 180px;
  object-fit: contain;
}

/* If no custom logo exists, show a KWT text fallback */
#logo a::after {
  /* Remove if real logo image is present */
}

/* ── Search Bar ── */
.header-search-form,
.header-search-form-wrapper,
.searchform-wrapper {
  flex: 1;
  max-width: 640px;
}

.searchform-wrapper .flex-row {
  display: flex;
  align-items: center;
  border: 2px solid var(--color-black);
  border-radius: 4px;
  background: var(--color-white);
  overflow: hidden;
  height: 42px;
}

/* Category dropdown */
.search_categories {
  border: none;
  border-right: 2px solid var(--color-black);
  background: #f0f0f0;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-black);
  padding: 0 10px;
  height: 100%;
  cursor: pointer;
  outline: none;
  -webkit-appearance: none;
  appearance: none;
  padding-right: 22px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23111'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 6px center;
}

/* Search input */
.searchform-wrapper input[type="search"],
.search-field {
  flex: 1;
  border: none;
  outline: none;
  font-size: 14px;
  color: var(--color-black);
  padding: 0 12px;
  height: 100%;
  background: transparent;
}

.searchform-wrapper input[type="search"]::placeholder { color: #888; }

/* Search submit button */
.ux-search-submit,
.submit-button {
  background-color: var(--color-black) !important;
  color: var(--color-white) !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 16px !important;
  height: 100%;
  cursor: pointer;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
}
.ux-search-submit:hover { background-color: #333 !important; }

/* ── Right Icons (Track order / Stores / Log in / Cart) ── */
.header-nav-main.nav-right {
  display: flex;
  align-items: center;
  gap: 4px;
}

/* Account / Cart icon buttons */
.account-item .account-link,
.cart-item .header-cart-link {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  background: transparent !important;
  border: none !important;
  color: var(--color-black) !important;
  font-size: 11px;
  font-weight: 500;
  padding: 6px 10px !important;
  border-radius: 4px;
  gap: 3px;
  min-width: 56px;
  transition: background 0.15s;
  text-align: center;
}

.account-item .account-link:hover,
.cart-item .header-cart-link:hover {
  background: rgba(0,0,0,0.08) !important;
}

.account-item .account-link i,
.cart-item .header-cart-link i {
  font-size: 22px !important;
  color: var(--color-black) !important;
  line-height: 1;
}

/* Cart price display */
.header-cart-link .cart-price,
.header-cart-link .header-cart-title {
  font-size: 11px;
  font-weight: 600;
  color: var(--color-black) !important;
  margin-top: 0;
  display: block;
}

/* Cart badge count */
[data-icon-label]:not([data-icon-label="0"])::after {
  content: attr(data-icon-label);
  position: absolute;
  top: -4px;
  right: -4px;
  background: var(--color-green);
  color: var(--color-white);
  font-size: 10px;
  font-weight: 700;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Account dropdown */
.account-item .nav-dropdown {
  background: var(--color-white);
  border: 1px solid #ddd;
  border-radius: 4px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.12);
  min-width: 160px;
  padding: 6px 0;
}

.account-item .nav-dropdown li a {
  display: block;
  padding: 9px 16px;
  font-size: 14px;
  color: var(--color-black) !important;
  transition: background 0.15s;
}
.account-item .nav-dropdown li a:hover {
  background: var(--color-yellow);
}

/* Divider between icons */
.header-divider {
  width: 1px;
  height: 32px;
  background: rgba(0,0,0,0.15);
  margin: 0 4px;
}

/* ============================================================
   WIDE NAV / BOTTOM NAV  →  Black navigation bar
   ============================================================ */
#wide-nav,
.header-bottom.wide-nav {
  background-color: var(--color-black) !important;
  padding: 0;
}

#wide-nav .flex-row,
.header-bottom .flex-row {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  align-items: center;
}

/* Nav items */
.header-bottom-nav li,
.header-bottom-nav > li {
  position: relative;
}

.header-bottom-nav li a,
.header-bottom-nav > li > a {
  display: block;
  color: var(--color-white) !important;
  font-size: 14px;
  font-weight: 600;
  padding: 13px 15px;
  letter-spacing: 0.01em;
  white-space: nowrap;
  transition: background 0.15s, color 0.15s;
  text-transform: none !important;
}

.header-bottom-nav li a:hover,
.header-bottom-nav > li > a:hover {
  background-color: var(--color-yellow) !important;
  color: var(--color-black) !important;
}

/* Dropdown arrow for items with children */
.header-bottom-nav li.menu-item-has-children > a::after {
  content: ' ▾';
  font-size: 11px;
  opacity: 0.8;
}

/* Sub-dropdown */
.header-bottom-nav .sub-menu,
.header-bottom-nav .nav-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  background: var(--color-white);
  border-top: 3px solid var(--color-yellow);
  box-shadow: 0 6px 20px rgba(0,0,0,0.15);
  min-width: 200px;
  z-index: 999;
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity 0.2s, transform 0.2s, visibility 0.2s;
}

.header-bottom-nav li:hover > .sub-menu,
.header-bottom-nav li:hover > .nav-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.header-bottom-nav .sub-menu li a,
.header-bottom-nav .nav-dropdown li a {
  color: var(--color-black) !important;
  font-weight: 500;
  padding: 10px 16px;
  border-bottom: 1px solid #f0f0f0;
}

.header-bottom-nav .sub-menu li a:hover,
.header-bottom-nav .nav-dropdown li a:hover {
  background: var(--color-yellow) !important;
  color: var(--color-black) !important;
}

/* ============================================================
   STICKY HEADER
   ============================================================ */
.header.has-sticky.sticky-jump.is-sticky #masthead,
.header.has-sticky.sticky-jump.is-sticky .header-main {
  box-shadow: 0 2px 12px rgba(0,0,0,0.15);
}

.header.has-sticky.sticky-jump.is-sticky #top-bar,
.header.has-sticky.sticky-jump.is-sticky .header-top {
  display: none !important;
}

/* ============================================================
   HEADER BACKGROUND
   ============================================================ */
.header-bg-container,
.header-bg-image,
.header-bg-color {
  display: none !important;
}

/* ============================================================
   MOBILE NAV  →  Keeps yellow background
   ============================================================ */
@media (max-width: 849px) {
  #masthead .header-inner,
  .header-main .header-inner {
    padding: 8px 16px;
    justify-content: space-between;
  }

  #logo img,
  .header_logo {
    height: 40px !important;
  }

  /* Mobile menu icon */
  .mobile-nav .nav-icon a,
  .mobile-nav .nav-icon .is-small {
    color: var(--color-black) !important;
    font-size: 24px;
    background: transparent !important;
    border: none !important;
  }

  /* Mobile cart */
  .mobile-nav .cart-item .header-cart-link {
    color: var(--color-black) !important;
    background: transparent !important;
    border: none !important;
    font-size: 22px;
  }

  /* Hide wide-nav on mobile */
  #wide-nav { display: none !important; }

  /* Mobile top bar centered */
  .header-top .flex-row { flex-direction: column; gap: 4px; }
}

/* ============================================================
   CART SIDEBAR POPUP
   ============================================================ */

.cart-popup-title .heading-font {
  font-size: 20px;
  font-weight: 800;
  color: var(--color-black);
  letter-spacing: 0.05em;
}

.cart-popup-inner { padding: 20px; }

.button.primary.wc-backward,
.button.primary {
  background-color: var(--color-black) !important;
  color: var(--color-white) !important;
  font-weight: 700;
  border-radius: 4px;
  padding: 10px 20px;
  transition: background 0.15s;
}
.button.primary:hover { background-color: var(--color-green) !important; }

/* ============================================================
   NEWSLETTER LIGHTBOX
   ============================================================ */
.lightbox-content .banner {
  background-color: var(--color-black);
}

.lightbox-content h3 {
  font-size: 28px;
  font-weight: 800;
  color: var(--color-white);
  letter-spacing: 0.04em;
}

.lightbox-content .lead { color: rgba(255,255,255,0.8); font-size: 14px; }

.lightbox-content .wpcf7-email {
  width: 100%;
  padding: 10px 14px;
  border: 2px solid var(--color-yellow);
  border-radius: 4px;
  font-size: 14px;
  outline: none;
  margin-bottom: 10px;
}

.lightbox-content .wpcf7-submit {
  background-color: var(--color-yellow) !important;
  color: var(--color-black) !important;
  font-size: 16px;
  font-weight: 800;
  padding: 10px 28px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  letter-spacing: 0.04em;
  transition: background 0.15s;
}
.lightbox-content .wpcf7-submit:hover { background-color: var(--color-green) !important; color: var(--color-white) !important; }

/*header*/

@media only screen and (max-width: 48em) {
/*************** ADD MOBILE ONLY CSS HERE  ***************/


}