/* Color del Header y pill */
/* Color del Header y pill */

/* ===== Unified header hover colors (WoodMart) ===== */
:root{
  --menu-hover-bg:  #22c55e;  /* background on hover/active */
  --menu-hover-text:#ffffff;  /* text/icon on hover/active */
  --menu-radius:    5px;      /* pill rounding */
}

/* Smoothen transitions a bit */
.whb-general-header .wd-nav > li > a,
.whb-general-header .wd-header-my-account a,
.whb-general-header .wd-header-search > a{
  transition: background-color .15s ease, color .15s ease;
}

/* === MAIN MENU (top-level) === */
.whb-general-header .wd-nav > li:hover > a,
.whb-general-header .wd-nav > li > a:hover,
.whb-general-header .wd-nav > li.current-menu-item > a,
.whb-general-header .wd-nav > li.current-menu-ancestor > a{
  background-color: var(--menu-hover-bg) !important;
  color: var(--menu-hover-text) !important;
  border-radius: var(--menu-radius);
}

/* Remove theme underline so the bg shows clean */
.whb-general-header .wd-nav > li > a:before{
  background: transparent !important;
}

/* === SUBMENU (dropdown) === */
.whb-general-header .wd-nav .sub-menu li > a:hover,
.whb-general-header .wd-nav .sub-menu li:hover > a{
  background-color: var(--menu-hover-bg) !important;
  color: var(--menu-hover-text) !important;
  border-radius: calc(var(--menu-radius) - 2px);
}

/* === MY ACCOUNT (icon + "Hello, ?") === */
/* Hover on the whole button */
.whb-general-header .wd-header-my-account:hover > a,
.whb-general-header .wd-header-my-account > a:hover{
  background-color: var(--menu-hover-bg) !important;
  color: var(--menu-hover-text) !important;
  border-radius: var(--menu-radius);
}
/* Some WoodMart builds wrap content in .wd-tools-inner */
.whb-general-header .wd-header-my-account:hover a .wd-tools-inner,
.whb-general-header .wd-header-my-account a:hover .wd-tools-inner{
  background-color: var(--menu-hover-bg) !important;
  color: var(--menu-hover-text) !important;
  border-radius: var(--menu-radius);
}
/* Ensure inner text/icon inherits */
.whb-general-header .wd-header-my-account a:hover .wd-tools-text,
.whb-general-header .wd-header-my-account a:hover .wd-tools-icon,
.whb-general-header .wd-header-my-account a:hover .wd-tools-icon svg{
  color: var(--menu-hover-text) !important;
  fill:  var(--menu-hover-text) !important;
}
/* Account dropdown items */
.whb-general-header .wd-header-my-account .wd-dropdown-menu li > a:hover{
  background-color: var(--menu-hover-bg) !important;
  color: var(--menu-hover-text) !important;
  border-radius: calc(var(--menu-radius) - 2px);
}

/* === SEARCH (header tool) === */
.whb-general-header .wd-header-search > a:hover,
.whb-general-header .wd-header-search:hover > a{
  background-color: var(--menu-hover-bg) !important;
  color: var(--menu-hover-text) !important;
  border-radius: var(--menu-radius);
}
/* Inner pieces (icon/text) */
.whb-general-header .wd-header-search > a:hover .wd-tools-text,
.whb-general-header .wd-header-search > a:hover .wd-tools-icon,
.whb-general-header .wd-header-search > a:hover .wd-tools-icon svg{
  color: var(--menu-hover-text) !important;
  fill:  var(--menu-hover-text) !important;
}
/* Some layouts use .wd-tools-inner */
.whb-general-header .wd-header-search:hover .wd-tools-inner{
  background-color: var(--menu-hover-bg) !important;
  color: var(--menu-hover-text) !important;
  border-radius: var(--menu-radius);
}

/* === ACCESSIBILITY: focus visible (keyboard) === */
.whb-general-header .wd-nav > li > a:focus-visible,
.whb-general-header .wd-header-my-account > a:focus-visible,
.whb-general-header .wd-header-search > a:focus-visible{
  outline: 2px solid var(--menu-hover-bg);
  outline-offset: 2px;
  border-radius: var(--menu-radius);
}

/* === MOBILE MENU (optional) === */
.wd-nav-mobile .menu-item > a:hover,
.wd-nav-mobile .menu-item > a:focus{
  background-color: var(--menu-hover-bg) !important;
  color: var(--menu-hover-text) !important;
}

/* === CART (header tool) === */
.whb-general-header .wd-header-cart > a:hover,
.whb-general-header .wd-header-cart:hover > a {
  background-color: var(--menu-hover-bg) !important;
  color: var(--menu-hover-text) !important;
  border-radius: var(--menu-radius);
}

/* Inner pieces (icon/text) */
.whb-general-header .wd-header-cart > a:hover .wd-tools-text,
.whb-general-header .wd-header-cart > a:hover .wd-tools-icon,
.whb-general-header .wd-header-cart > a:hover .wd-tools-icon svg {
  color: var(--menu-hover-text) !important;
  fill:  var(--menu-hover-text) !important;
}

/* Some builds wrap content in .wd-tools-inner */
.whb-general-header .wd-header-cart:hover .wd-tools-inner {
  background-color: var(--menu-hover-bg) !important;
  color: var(--menu-hover-text) !important;
  border-radius: var(--menu-radius);
}

/* Color del Header y pill fin fin */
/* Color del Header y pill fin fin */



/* filtro de fecha */
/* filtro de fecha */

/* Toolbar shell */
.wb-toolbar{
  display:flex; flex-wrap:wrap; gap:10px 12px; align-items:flex-end;
  margin: 10px 0 18px;
}

/* Each field group */
.wb-toolbar .wb-field{ display:flex; flex-direction:column; gap:6px; }

/* Labels – small, semi-bold like your top controls */
.wb-toolbar .wb-label{
  font-size: 12px; font-weight: 600; line-height: 1; opacity:.9;
  text-transform: none; /* keep as typed */
}

/* Inputs – pill style */
.wb-toolbar .wb-input{
  height: 40px; padding: 0 14px; border-radius: 9999px;
  border: 1px solid rgba(0,0,0,.15);
  background: #1A2236; outline: none;
  transition: box-shadow .15s, border-color .15s;
}
.wb-toolbar .wb-input:focus{
  border-color: rgba(0,0,0,.25);
  box-shadow: 0 0 0 2px rgba(0, 200, 83, .15); /* soft green glow */
}

/* Buttons – reuse theme .button, add pill + spacing */
.wb-toolbar .wb-btn{
  height: 40px; padding: 0 18px; border-radius: 9999px;
  display:inline-flex; background: #00B735; align-items:center; justify-content:center;
}
.wb-toolbar .wb-btn-ghost{
  background: #CFE60E; border: 1px solid rgba(0,0,0,.2);
}

/* Compact on small screens */
@media (max-width: 680px){
  .wb-toolbar { gap: 8px; }
  .wb-toolbar .wb-field{ width: 100%; }
  .wb-toolbar .wb-actions{ display:flex; gap:8px; width:100%; }
  .wb-toolbar .wb-btn, .wb-toolbar .wb-input { width: 100%; }
}

/* Make the mm/dd/yyyy text (and typed value) white */
.wb-toolbar .wb-input[type="date"] { 
  color: #fff;                 /* value color (Firefox uses this) */
  color-scheme: white;          /* asks the browser to use light text for built-in parts */
}

/* Chrome/Edge/Safari (WebKit/Blink) field pieces */
.wb-toolbar .wb-input[type="date"]::-webkit-datetime-edit,
.wb-toolbar .wb-input[type="date"]::-webkit-datetime-edit-fields-wrapper,
.wb-toolbar .wb-input[type="date"]::-webkit-datetime-edit-text,
.wb-toolbar .wb-input[type="date"]::-webkit-datetime-edit-month-field,
.wb-toolbar .wb-input[type="date"]::-webkit-datetime-edit-day-field,
.wb-toolbar .wb-input[type="date"]::-webkit-datetime-edit-year-field {
  color: #fff;
}

/* Calendar icon: make it visible on dark backgrounds */
.wb-toolbar .wb-input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(1);
  opacity: .9;
}

/* Make the date text/placeholder white */
.wb-toolbar .wb-input[type="date"]{
  color:#fff;
  color-scheme: white; /* helps Firefox use light UI */
}

/* Chrome/Edge/Safari: turn the calendar icon white and a bit brighter */
.wb-toolbar .wb-input[type="date"]::-webkit-calendar-picker-indicator{
  filter: invert(1) brightness(1.4) contrast(1.1);
  opacity: 1;
}

/* (Optional) bump icon size slightly */
.wb-toolbar .wb-input[type="date"]::-webkit-calendar-picker-indicator{
  width: 18px;
  height: 18px;
}

/* Also force the "mm/dd/yyyy" pieces to white */
.wb-toolbar .wb-input[type="date"]::-webkit-datetime-edit,
.wb-toolbar .wb-input[type="date"]::-webkit-datetime-edit-fields-wrapper,
.wb-toolbar .wb-input[type="date"]::-webkit-datetime-edit-text,
.wb-toolbar .wb-input[type="date"]::-webkit-datetime-edit-month-field,
.wb-toolbar .wb-input[type="date"]::-webkit-datetime-edit-day-field,
.wb-toolbar .wb-input[type="date"]::-webkit-datetime-edit-year-field{
  color:#fff;
}

.wb-toolbar{
  justify-content: flex-end;   /* right-align all the inputs/buttons */
}

/* optional mobile */
@media (max-width: 680px){
  .wb-toolbar{ justify-content: flex-start; }
}

/* filtro de fecha fin fin */
/* filtro de fecha fin fin */



/* fecha de sorteo en product archive cards */
/* fecha de sorteo en product archive cards */

.wb-fecha-sorteo-archive{
  margin-top:.35rem; font-size:.92rem; display:inline-block;
  background:#f6f7f9; padding:.25rem .5rem; border-radius:.5rem;
}

/* fecha de sorteo en product archive cards fin fin */
/* fecha de sorteo en product archive cards fin fin */