/*
 * File: style.css
 * Description: Styles for Cliffjumper WooCommerce color swatches
 * Plugin: Cliffjumper
 * Author: Eric Kowalewski
 * Last Updated: 2025-08-02 21:00 EDT
 */

/* Base wrapper */
.cj-wrap{ position:relative; display:block; }

/* Hide the native select but keep it in the DOM for forms & a11y */
.cj-wrap select.cj-hidden{
  position:absolute !important; left:-9999px !important; top:auto !important;
  width:1px !important; height:1px !important; overflow:hidden !important;
}

/* Trigger button (mimics theme inputs) */
.cj-button{
  width:100%; display:flex; align-items:center; justify-content:flex-start;
  gap:.5rem; padding:10px 36px 10px 40px; /* room for swatch & arrow */
  border:1px solid var(--cj-border, #cfdccd); border-radius:4px;
  background:#fff; line-height:1.2; position:relative; cursor:pointer;
}

/* Inherit theme font/size if available */
.cj-button, .cj-option{ font: inherit; font-size: inherit; color: inherit; }

/* Arrow (chevron) */
.cj-button .cj-caret{
  position:absolute; right:12px; top:50%; transform:translateY(-50%) rotate(45deg);
  width:8px; height:8px; border-right:2px solid #667; border-bottom:2px solid #667;
  pointer-events:none;
}
.cj-open .cj-button .cj-caret{ transform:translateY(-50%) rotate(-135deg); }

/* Swatch chip shown on button (empty until selection) */
.cj-chip{
  position:absolute; left:10px; top:50%; transform:translateY(-50%);
  width:18px; height:18px; border:1px solid rgba(0,0,0,.25); border-radius:2px;
  background:transparent; box-sizing:border-box; pointer-events:none;
}
.cj-chip.cj-empty{
  background:
    linear-gradient(45deg, #eee 25%, transparent 25%),
    linear-gradient(-45deg, #eee 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #eee 75%),
    linear-gradient(-45deg, transparent 75%, #eee 75%);
  background-size:10px 10px; background-position:0 0,0 5px,5px -5px,-5px 0;
}

/* Dropdown panel */
.cj-list{
  position:absolute; left:0; right:0; z-index:50; margin-top:6px;
  background:#fff; border:1px solid var(--cj-border, #cfdccd); border-radius:6px;
  box-shadow:0 10px 20px rgba(0,0,0,.08); max-height:250px; overflow:auto; display:none;
}
.cj-open .cj-list{ display:block; }

/* Option rows */
.cj-option{
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 12px; cursor:pointer;
}
.cj-option:hover{ background:#f7faf7; }
.cj-option[aria-selected="true"]{ background:#eef8ee; }

/* Swatch box in list */
.cj-swatch{
  width:18px; height:18px; border:1px solid rgba(0,0,0,.25); border-radius:2px;
}

/* Respect very light colors */
.cj-swatch.cj-light, .cj-chip.cj-light{ border-color:rgba(0,0,0,.35) }

/* Match your theme’s green borders for variation fields */
.variations .cj-wrap .cj-button{ border-color:#8bd09a; }
.variations .cj-wrap .cj-list{ border-color:#8bd09a; }

/* Ensure minimum height */
.cj-wrap{ min-height:38px; }


.woocommerce #color {display:none;}