/* ───────────── משתני פריסטים ───────────── */
html[data-theme="default"] {
  --white:        #ffffff;
  --black:        #161616;
  --gray:         #cccccc;
  --header-bg:    #363636;
  --header-fg:    #fefefe;
  --border-color: #161616;
}
html[data-theme="dark"] {
  --white:        #090040;
  --black:        #ffffff;
  --gray:         #444444;
  --header-bg:    #090040;
  --header-fg:    #ffffff;
  --border-color: #ffffff;
}
html[data-theme="warm"] {
  --white:        #1fcbff;
  --black:        #f6ff00;
  --gray:         #657483;
  --header-bg:    #f965af;
  --header-fg:    #1fcbff;
  --border-color: #f6ff00;
}
html[data-theme="cool"] {
  --white:        #fdf0d5;
  --black:        #003049;
  --gray:         #696969;
  --header-bg:    #003049;
  --header-fg:    #c1121f;
  --border-color: #003049;
}
html[data-theme="pastel"] {
  --white:        #fffbf0;
  --black:        #6b5b95;
  --gray:         #d8bfd8;
  --header-bg:    #6b5b95;
  --header-fg:    #fffbf0;
  --border-color: #6b5b95;
}

/*────────────────────────────────────────*/
/*  Remove circle around cart & toggle   */
/*────────────────────────────────────────*/
.cart-toggle {
  border:        none !important;
  background:    transparent !important;
}
.cart-toggle svg,
.menu-toggle svg {
  width:  1.5rem;
  height: 1.5rem;
}
.cart-toggle svg * {
  stroke: var(--header-fg) !important;
  fill:   var(--header-fg) !important;
}

/*────────────────────────────────────────*/
/*  Menu Toggle styling                  */
/*────────────────────────────────────────*/
.menu-toggle {
  border:          var(--border-w) solid var(--border-color);
  border-radius:   50%;
  background:      transparent;
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  cursor:          pointer;
  box-shadow:      none !important;
}
.menu-toggle svg * {
  stroke: var(--header-fg) !important;
  fill:   var(--header-fg) !important;
}

/*────────────────────────────────────────*/
/*  Picker + Theme-Switcher layout       */
/*────────────────────────────────────────*/
.color-picker {
  position:       relative;
  display:        inline-flex;
  align-items:    center;
}

/* 2. Inline slide-in panel (no semi-opaque bg) */
.color-picker-popup {
  position: absolute;
  top: 50%;
  right: 100%;
  transform: translateY(-50%) translateX(10px) scaleX(0);
  transform-origin: right center;
  display: flex;
  gap: var(--gap-buttons);
  background: transparent;                /* שקוף לגמרי */
  /*border: var(--border-w) solid var(--border-color);*/
  border-radius: 4px;
  padding: .5rem;
  opacity: 0;
  transition:
    transform 0.3s var(--anim-ease),
    opacity   0.3s var(--anim-ease);
  pointer-events: none;
  z-index: 1002;
}

/* 3. Slide-in when open */
.color-picker.open .color-picker-popup {
  transform: translateY(-50%) translateX(0) scaleX(1);
  opacity: 1;
  pointer-events: auto;
}

/*────────────────────────────────────────*/
/*  Theme-switcher buttons               */
/*────────────────────────────────────────*/
.theme-switcher {
  display: flex;
  gap: var(--gap-buttons);
}
.theme-switcher button {
  width: 5rem;
  height: 2rem;
  border: var(--border-w) solid var(--border-color);
  border-radius: 0%;
  padding: 0;
  cursor: pointer;
  background: transparent;
  transition: transform var(--anim-d) var(--anim-ease);
}

/* חצאי-חצאי + פס אמצע מדויק */
.theme-switcher button[data-theme="default"] {
  background: linear-gradient(
    to right,
    #ffffff 0%,   #ffffff 49.5%,
    #161616 49.5%,#161616 100%
  );
}
.theme-switcher button[data-theme="dark"] {
  background: linear-gradient(
    to right,
    #090040 0%,   #090040 49.5%,
    #ffffff 49.5%,#ffffff 100%
  );
}
.theme-switcher button[data-theme="warm"] {
  background: linear-gradient(
    to right,
    #f965af 0%,  #f965af 48%,
    #ffeb3b 48%, #ffeb3b 52%,
    #1fcbff 52%, #1fcbff 100%
  );
}
.theme-switcher button[data-theme="cool"] {
  background: linear-gradient(
    to right,
    #001ecb 0%,  #001ecb 48%,
    #1d1d1d 48%,#1d1d1d 52%,
    #c90000 52%,#c90000 100%
  );
}
.theme-switcher button[data-theme="pastel"] {
  background: linear-gradient(
    to right,
    #fffbf0 0%,   #fffbf0 49.5%,
    #6b5b95 49.5%,#6b5b95 100%
  );
}

/* חיווי על הבחירה */
.theme-switcher button.active {
  transform: scale(1.0) translateX(0px) translateY(-8px);
  /*box-shadow: 0 0 0 calc(var(--border-w) * 2) var(--border-color);*/
}

/*────────────────────────────────────────*/
/*  Color-picker toggle icon             */
/*────────────────────────────────────────*/
.color-picker-toggle {
  background: transparent;
  border: none;
  padding: .25rem;
  cursor: pointer;
  color: var(--header-fg);               /* בצבע של התמה */
  transition: color var(--anim-d) var(--anim-ease);
}
.color-picker-toggle:hover {
  color: var(--header-fg);      
}
.color-picker-icon {
  width: 3rem;
  height: 3rem;
  fill: currentColor;                    /* יורש מה-.color-picker-toggle color */
  stroke: none;
}
/* ──────────────────────────────────── */
/*  Icon Toggles Coloring              */
/*─────────────────────────────────────*/
/* מכניסים למכל־header-inner כדי שיהיה על כולם */
.header-inner .menu-toggle,
.header-inner .cart-toggle,
.header-inner .color-picker-toggle {
  /* ensure SVGs inside inherit currentColor */
  color: var(--header-fg) !important;
}

/* מגדירים גודל אחיד */
.header-inner .menu-toggle svg,
.header-inner .cart-toggle svg,
.header-inner .color-picker-toggle svg {
  width:  1.5rem;
  height: 1.5rem;
}

/* מוודאים שכל נתיבי ה-SVG יקבלו fill מלא בצבע התמה */
.header-inner .menu-toggle svg *    ,
.header-inner .cart-toggle svg *    ,
.header-inner .color-picker-toggle svg * {
  fill:   currentColor !important;
  stroke: currentColor !important;
}

/* אם יש לך גם מחלקה ספציפית ל-color-picker-icon */
.color-picker-icon {
  fill:   currentColor !important;
  stroke: currentColor !important;
}

/* 1. קיבוע רוחב ומרכז לכל התוכן */
.woocommerce-checkout .e-checkout__container {
  max-width: 800px;     /* לשנות לפי רוחב רצוי */
  margin: 0 auto;
  padding: 0 1rem;
}

/* 2. עיצוב שדות הקלט */
.woocommerce-checkout input.input-text,
.woocommerce-checkout select,
.woocommerce-checkout textarea {
  width: 100%;
  padding: 0.75rem;
  border: 1px solid var(--gray);
  border-radius: 4px;
  box-sizing: border-box;
}

/* 3. ריווח בין שורות */
.woocommerce-checkout .form-row {
  margin-bottom: 1rem;
}

/* 4. עיצוב כותרות (h3) */
.woocommerce-checkout h3 {
  margin-bottom: 1rem;
  font-size: 1.25rem;
}

/* 5. טבלת סקירת ההזמנה */
.woocommerce-checkout-review-order-table {
  width: 100%;
  border-spacing: 0;
  margin-bottom: 2rem;
}

/* 6. כפתור השלמת ההזמנה במרכז */
.woocommerce-checkout .place-order {
  text-align: center;
  margin-top: 2rem;
}

/* 7. (אופציונלי) להסיר ריווח עודף של אלמנטים חיצוניים */
.elementor-widget-woocommerce-checkout-page {
  padding: 0;      /* אם צריך “לפתוח” את הרוחב */
}






/*────────────────────────────────────────*/
/* Responsive – General Adjustments       */
/*────────────────────────────────────────*/
@media (max-width: 1024px) {
.color-picker-icon {
  width: 3rem;
  height: 3rem;
  border-radius: 0%;
  padding: 0;
  cursor: pointer;
  background: transparent;
  transition: transform var(--anim-d) var(--anim-ease);
  }
}
@media (max-width: 768px) {
.color-picker-icon {
  width: 1.7rem;
  height: 1.7rem;
  border-radius: 0%;
  padding: 0;
  cursor: pointer;
  background: transparent;
  transition: transform var(--anim-d) var(--anim-ease);
  }
}
@media (max-width: 480px) {
.color-picker-icon {
  width: 1.7rem;
  height: 1.7rem;
  border-radius: 0%;
  padding: 0;
  cursor: pointer;
  background: transparent;
  transition: transform var(--anim-d) var(--anim-ease);
  
  }

  .color-picker-popup {
  position: absolute;
  top: 170%;
  right: -20%;
  transform: translateY(-50%) translateX(10px) scaleX(0);
  transform-origin: right center;
  display: flex;
  gap: var(--gap-buttons);
  background: transparent;                /* שקוף לגמרי */
  /*border: var(--border-w) solid var(--border-color);*/
  border-radius: 4px;
  padding: .5rem;
  opacity: 0;
  transition:
    transform 0.3s var(--anim-ease),
    opacity   0.3s var(--anim-ease);
  pointer-events: none;
  z-index: 1002;
}


}

/* Force the toggle-icon to always use header-fg */
.color-picker-toggle {
  color: var(--header-fg) !important;
}
.color-picker-toggle .color-picker-icon {
  fill: currentColor !important;
  stroke: none !important;
}
/* כשפופאפ פתוח – לא לשנות אותו */
.color-picker-toggle.active,
.color-picker-toggle:hover {
  color: var(--header-fg) !important;
}


/* מסתיר כל אלמנט popup */
.color-picker-popup {
  display: none !important;
}

/* אם אתה רוצה להסיר לגמרי את המרווח שהייתה לו */
.color-picker {
  margin: 0 !important;
}