/* GLite Color Storefront 1.1 — minimal swatches on top of standard Woo variations. */
.glite-color-picker,
.glite-color-picker *{box-sizing:border-box}

.glite-color-picker{
  --glite-color-accent:#71c91a;
  --glite-color-accent-dark:#4f9f12;
  --glite-color-soft:#f1fbe8;
  --glite-color-border:#dfe4e8;
  --glite-color-text:#252a2f;
  --glite-color-muted:#77818a;
  direction:rtl;
  margin:0 0 12px;
  color:var(--glite-color-text);
}

.glite-color-picker__title{
  margin:0 0 10px;
  font-size:14px;
  font-weight:700;
  line-height:1.5;
}

.glite-color-picker__options{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:9px;
}

/* Only the swatch is visible. The color name remains in the DOM for screen
   readers and is exposed as a tooltip on pointer devices. */
.glite-color-picker__option{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:42px;
  height:42px;
  min-width:42px;
  margin:0;
  padding:4px;
  overflow:visible;
  border:1.5px solid var(--glite-color-border);
  border-radius:10px;
  background:#fff;
  background-image:none;
  color:var(--glite-color-text);
  cursor:pointer;
  box-shadow:none;
  outline:none;
  -webkit-tap-highlight-color:transparent;
  transition:border-color .13s ease,box-shadow .13s ease,transform .09s ease,opacity .13s ease;
}

.glite-color-picker__option:hover,
.glite-color-picker__option:focus-visible{
  border-color:var(--glite-color-accent);
  background:#fff;
  background-image:none;
  color:var(--glite-color-text);
  box-shadow:0 0 0 2px rgba(113,201,26,.09);
}

.glite-color-picker__option:focus-visible{
  outline:2px solid rgba(113,201,26,.28);
  outline-offset:2px;
}

.glite-color-picker__option:active:not(:disabled){transform:scale(.96)}

.glite-color-picker__swatch{
  display:block;
  width:27px;
  height:27px;
  flex:0 0 27px;
  border-radius:50%;
  background:var(--glite-color,#d8dde3);
  border:1px solid rgba(0,0,0,.11);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.34);
  pointer-events:none;
}

.glite-color-picker__sr-name{
  position:absolute!important;
  width:1px!important;
  height:1px!important;
  padding:0!important;
  margin:-1px!important;
  overflow:hidden!important;
  clip:rect(0,0,0,0)!important;
  white-space:nowrap!important;
  border:0!important;
}

/* Selected is intentionally stronger than hover: green ring + compact check. */
.glite-color-picker__option.is-selected{
  border-color:var(--glite-color-accent);
  background:#fff;
  box-shadow:0 0 0 2px rgba(113,201,26,.17);
}
.glite-color-picker__option.is-selected::before{
  content:'✓';
  position:absolute;
  z-index:3;
  top:-6px;
  right:-6px;
  display:flex;
  align-items:center;
  justify-content:center;
  width:16px;
  height:16px;
  border:2px solid #fff;
  border-radius:50%;
  background:var(--glite-color-accent);
  color:#fff;
  font:700 10px/1 Arial,sans-serif;
  box-shadow:0 2px 5px rgba(44,94,9,.18);
  pointer-events:none;
}

/* Unavailable colors remain recognizable but cannot be selected. */
.glite-color-picker__option.is-unavailable,
.glite-color-picker__option.is-unavailable:hover{
  opacity:.42;
  cursor:not-allowed;
  border-color:#d9dde1;
  background:#f7f8f9;
  box-shadow:none;
  transform:none;
}
.glite-color-picker__option.is-unavailable::before{
  content:'';
  position:absolute;
  z-index:2;
  width:31px;
  height:1.5px;
  border-radius:1px;
  background:#8b949c;
  transform:rotate(-45deg);
  pointer-events:none;
}
.glite-color-picker__option.is-unavailable .glite-color-picker__swatch{filter:grayscale(.45)}

/* Desktop tooltip: names are not permanently printed beside swatches. */
@media (hover:hover) and (pointer:fine){
  .glite-color-picker__option::after{
    content:attr(data-color-tooltip);
    position:absolute;
    z-index:40;
    left:50%;
    bottom:calc(100% + 8px);
    width:max-content;
    max-width:150px;
    padding:5px 8px;
    border-radius:6px;
    background:#252a2f;
    color:#fff;
    font-family:inherit;
    font-size:11px;
    font-weight:500;
    line-height:1.35;
    white-space:nowrap;
    opacity:0;
    visibility:hidden;
    transform:translate(-50%,4px);
    pointer-events:none;
    transition:opacity .12s ease,transform .12s ease,visibility .12s ease;
  }
  .glite-color-picker__option:hover::after,
  .glite-color-picker__option:focus-visible::after{
    opacity:1;
    visibility:visible;
    transform:translate(-50%,0);
  }
}

/* On desktop the tooltip is enough. Mobile has no hover, so after selection we
   show one explicit line: «رنگ انتخابی: آبی». */
.glite-color-picker__hint{display:none;margin-top:8px;color:var(--glite-color-muted);font-size:11px;line-height:1.6}

/* Keep WooCommerce's actual variation form/JS in the DOM, but replace the
   visible selector/price block with GLite's lighter color UI. */
.glite-color-managed-variable form.variations_form .variations,
.glite-color-managed-variable form.variations_form .reset_variations,
.glite-color-managed-variable form.variations_form .single_variation{display:none!important}
.glite-color-managed-variable form.variations_form{margin:0!important}
.glite-color-managed-variable .glite-smart-atc--variable{margin-top:0!important}

/* Before a GLite color is selected, this is a prompt—not an unavailable state.
   Keep it softly green instead of Woo/DigiLand's grey disabled treatment. */
.glite-color-managed-variable .glite-smart-atc.is-awaiting-variation .glite-smart-atc__add,
.glite-color-managed-variable .glite-smart-atc.is-awaiting-variation .glite-smart-atc__add:disabled,
.glite-smart-atc.glite-color-managed-sticky.is-awaiting-variation .glite-smart-atc__add,
.glite-smart-atc.glite-color-managed-sticky.is-awaiting-variation .glite-smart-atc__add:disabled{
  background:#effbe5!important;
  background-image:none!important;
  border-color:#b9e892!important;
  color:#478a15!important;
  opacity:1!important;
  box-shadow:none!important;
  cursor:not-allowed!important;
}
.glite-color-managed-variable .glite-smart-atc.is-awaiting-variation .glite-smart-atc__bag,
.glite-smart-atc.glite-color-managed-sticky.is-awaiting-variation .glite-smart-atc__bag{color:#5cae1a!important}

@media(max-width:767px){
  .glite-color-picker{margin-bottom:10px}
  .glite-color-picker__title{margin-bottom:8px;font-size:13px}
  .glite-color-picker__options{gap:8px}
  .glite-color-picker__option{width:39px;height:39px;min-width:39px;border-radius:9px;padding:4px}
  .glite-color-picker__swatch{width:25px;height:25px;flex-basis:25px}
  .glite-color-picker__hint.has-selection{display:block}
}

/* GLite 1.2 — isolate color swatches from DigiLand's global button:hover.
   The theme has a more-specific `.mweb-body button:hover` rule that paints
   generic buttons with the main color. Color choices must stay white; hover
   is communicated only by the GLite green outline. */
.mweb-body .glite-color-picker button.glite-color-picker__option:not(.is-unavailable):hover,
.mweb-body .glite-color-picker button.glite-color-picker__option:not(.is-unavailable):focus,
.mweb-body .glite-color-picker button.glite-color-picker__option:not(.is-unavailable):focus-visible,
body .glite-color-picker button.glite-color-picker__option:not(.is-unavailable):hover,
body .glite-color-picker button.glite-color-picker__option:not(.is-unavailable):focus,
body .glite-color-picker button.glite-color-picker__option:not(.is-unavailable):focus-visible{
  background:#fff!important;
  background-color:#fff!important;
  background-image:none!important;
  border-color:var(--glite-color-accent)!important;
  color:var(--glite-color-text)!important;
  box-shadow:none!important;
}

/* Selected stays visually stronger than a plain hover, still with a white fill. */
.mweb-body .glite-color-picker button.glite-color-picker__option.is-selected:hover,
.mweb-body .glite-color-picker button.glite-color-picker__option.is-selected:focus-visible,
body .glite-color-picker button.glite-color-picker__option.is-selected:hover,
body .glite-color-picker button.glite-color-picker__option.is-selected:focus-visible{
  background:#fff!important;
  background-color:#fff!important;
  border-color:var(--glite-color-accent)!important;
  box-shadow:0 0 0 2px rgba(113,201,26,.17)!important;
}