/* ==========================================================================
   Athenian Product Add-ons — Compact “Pro” Dark UI (Token-aware)
   Goals:
   - tighter density, cleaner hierarchy, fewer nested borders
   - consistent focus/hover states (keyboard + pointer)
   - modern file UI + per-option uploads
   - swatches: ultra-compact 4-col tiles (dot + label)
   - safe-scoped: only touches .athenian-addons and its children
   ========================================================================== */

/* 0) Base scope + sensible resets */
.athenian-addons,
.athenian-addons * { box-sizing: border-box; }

.athenian-addons :where(button, input, select, textarea) {
  font: inherit;
  color: inherit;
}

.athenian-addons :where(label) { cursor: pointer; }

/* 1) Design tokens (defaults) */
.athenian-addons {
  /* Density + radius */
  --apadd-pad: 10px;
  --apadd-gap: 8px;
  --apadd-radius: 12px;
  --apadd-radius-sm: 10px;
  --apadd-radius-xs: 9px;

  /* Typography */
  --apadd-font: 12px;
  --apadd-label-font: 12px;
  --apadd-help-font: 11px;
  --apadd-title-font: 11px;

  /* Dark palette */
  --apadd-bg: rgba(15, 23, 42, 0.72);   /* outer */
  --apadd-bg2: rgba(2, 6, 23, 0.34);    /* group */
  --apadd-surface: rgba(2, 6, 23, 0.28);
  --apadd-border: rgba(148, 163, 184, 0.16);
  --apadd-border-soft: rgba(148, 163, 184, 0.12);

  --apadd-text: rgba(226, 232, 240, 0.92);
  --apadd-muted: rgba(226, 232, 240, 0.66);
  --apadd-help: rgba(226, 232, 240, 0.54);

  /* Accent (Columbia Coatings default) */
  --apadd-accent: #ec8639;
  --apadd-accent-2: rgba(236, 134, 57, 0.22);

  /* Shadows + blur */
  --apadd-shadow: 0 10px 26px rgba(0, 0, 0, 0.22);
  --apadd-shadow-soft: 0 6px 14px rgba(0, 0, 0, 0.18);

  /* Focus ring */
  --apadd-ring: 0 0 0 1px rgba(236, 134, 57, 0.55), 0 0 0 4px rgba(236, 134, 57, 0.20);

  /* Inputs */
  --apadd-input-bg: rgba(2, 6, 23, 0.28);
  --apadd-input-border: rgba(148, 163, 184, 0.18);

  /* Chips */
  --apadd-chip-bg: rgba(2, 6, 23, 0.22);
  --apadd-chip-bg-hover: rgba(2, 6, 23, 0.36);
  --apadd-chip-border: rgba(148, 163, 184, 0.14);

  /* Motion */
  --apadd-ease: cubic-bezier(.2,.8,.2,1);
  --apadd-fast: 120ms;
  --apadd-med: 180ms;
}

/* 2) Token bridge (optional theme tokens) */
.athenian-addons {
  /* Surfaces */
  --apadd-bg: var(--ast-surface-2, var(--ath-surface-2, var(--apadd-bg)));
  --apadd-bg2: var(--ast-surface-1, var(--ath-surface-1, var(--apadd-bg2)));
  --apadd-border: var(--ast-border, var(--ath-border, var(--apadd-border)));
  --apadd-border-soft: var(--ast-border-soft, var(--ath-border-soft, var(--apadd-border-soft)));

  /* Text */
  --apadd-text: var(--ast-text, var(--ath-text, var(--apadd-text)));
  --apadd-muted: var(--ast-text-muted, var(--ath-text-muted, var(--apadd-muted)));
  --apadd-help: var(--ast-text-subtle, var(--ath-text-subtle, var(--apadd-help)));

  /* Accent */
  --apadd-accent: var(--ast-accent, var(--ath-accent, var(--apadd-accent)));
}

/* 3) Container + groups (cleaner, less “nested boxes”) */
.athenian-addons--product {
  margin: 12px 0;
  padding: calc(var(--apadd-pad) + 2px);
  border-radius: calc(var(--apadd-radius) + 2px);
  border: 1px solid var(--apadd-border);
  background: var(--apadd-bg);
  box-shadow: var(--apadd-shadow);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.athenian-addons__group {
  margin: 0 0 var(--apadd-gap);
  padding: var(--apadd-pad);
  border-radius: var(--apadd-radius);
  background: color-mix(in srgb, var(--apadd-bg2) 84%, transparent);
  border: 1px solid var(--apadd-border-soft);
  box-shadow: none;
}

.athenian-addons__group:last-child { margin-bottom: 0; }

.athenian-addons__group-title {
  font-size: var(--apadd-title-font);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin: 0 0 8px;
  color: var(--apadd-muted);
}

/* 4) Fields + labels */
.athenian-addons__field { margin-top: 8px; }

.athenian-addons__label {
  display: block;
  font-size: var(--apadd-label-font);
  font-weight: 750;
  margin: 0 0 6px;
  color: var(--apadd-text);
}

.athenian-addons__required { color: #ef4444; font-weight: 900; }

/* 5) Inputs (tight, modern, consistent) */
.athenian-addons__input {
  width: 100%;
  max-width: 100%;
  border-radius: var(--apadd-radius-sm);
  border: 1px solid var(--apadd-input-border);
  padding: 7px 10px;
  font-size: var(--apadd-font);
  line-height: 1.2;
  color: var(--apadd-text);
  background-color: var(--apadd-input-bg);
  transition:
    border-color var(--apadd-fast) var(--apadd-ease),
    box-shadow var(--apadd-fast) var(--apadd-ease),
    background-color var(--apadd-fast) var(--apadd-ease),
    transform var(--apadd-fast) var(--apadd-ease);
}

.athenian-addons__input::placeholder { color: var(--apadd-muted); opacity: 0.92; }

.athenian-addons__input:focus {
  outline: none;
  border-color: color-mix(in srgb, var(--apadd-accent) 55%, transparent);
  box-shadow: var(--apadd-ring);
  background-color: color-mix(in srgb, var(--apadd-input-bg) 72%, rgba(0,0,0,0.18));
}

.athenian-addons__input:disabled {
  opacity: .65;
  cursor: not-allowed;
}

/* Multi-select height, still dense */
.athenian-addons__input--multi-select {
  min-height: 120px;
  padding: 8px 10px;
}

/* 6) Choice chips (radio/checkbox “pills”) */
.athenian-addons__choices {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.athenian-addons__choice {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11.5px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--apadd-chip-border);
  background: var(--apadd-chip-bg);
  color: var(--apadd-text);
  cursor: pointer;
  transition:
    background-color var(--apadd-fast) var(--apadd-ease),
    border-color var(--apadd-fast) var(--apadd-ease),
    transform var(--apadd-fast) var(--apadd-ease),
    box-shadow var(--apadd-fast) var(--apadd-ease);
}

.athenian-addons__choice input { accent-color: var(--apadd-accent); }

.athenian-addons__choice:hover {
  background: var(--apadd-chip-bg-hover);
  border-color: color-mix(in srgb, var(--apadd-border) 75%, transparent);
  transform: translateY(-1px);
  box-shadow: var(--apadd-shadow-soft);
}

/* Selected (supports modern browsers) */
.athenian-addons__choice:has(input:checked) {
  border-color: color-mix(in srgb, var(--apadd-accent) 55%, transparent);
  box-shadow: 0 0 0 3px var(--apadd-accent-2);
  background: color-mix(in srgb, var(--apadd-chip-bg) 70%, var(--apadd-accent-2));
}

/* Keyboard focus inside chip */
.athenian-addons__choice:has(input:focus-visible) {
  box-shadow: var(--apadd-ring);
  border-color: color-mix(in srgb, var(--apadd-accent) 60%, transparent);
}

/* 7) Image choices (compact thumb + label) */
.athenian-addons__choices--image .athenian-addons__choice,
.athenian-addons__choices--image-swatch .athenian-addons__choice {
  border-radius: var(--apadd-radius-sm);
  padding: 7px 9px;
}

.athenian-addons__choice-thumb {
  width: 28px;
  height: 28px;
  border-radius: var(--apadd-radius-xs);
  overflow: hidden;
  background: rgba(0,0,0,0.18);
  border: 1px solid var(--apadd-border-soft);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.athenian-addons__choice-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ==========================================================================
   MULTI-SELECT WITH PER-OPTION UPLOAD
   - each option becomes a compact “row card” with an upload reveal
   ========================================================================== */

.athenian-addons__choices--multi-upload {
  display: grid;
  gap: 8px;
}

.athenian-addons__choice--multi-upload {
  display: grid;
  gap: 8px;
  padding: 10px;
  border-radius: var(--apadd-radius);
  border: 1px solid var(--apadd-chip-border);
  background: color-mix(in srgb, var(--apadd-chip-bg) 86%, transparent);
  transition:
    background-color var(--apadd-fast) var(--apadd-ease),
    border-color var(--apadd-fast) var(--apadd-ease),
    box-shadow var(--apadd-fast) var(--apadd-ease),
    transform var(--apadd-fast) var(--apadd-ease);
}

.athenian-addons__choice--multi-upload:hover {
  border-color: color-mix(in srgb, var(--apadd-border) 78%, transparent);
  background: var(--apadd-chip-bg-hover);
  box-shadow: var(--apadd-shadow-soft);
  transform: translateY(-1px);
}

.athenian-addons__choice--multi-upload .athenian-addons__choice-main {
  display: flex;
  align-items: center;
  gap: 10px;
  user-select: none;
}

.athenian-addons__choice--multi-upload input[type="checkbox"] {
  width: 16px;
  height: 16px;
  margin: 0;
  flex: 0 0 auto;
  accent-color: var(--apadd-accent);
}

.athenian-addons__choice--multi-upload .athenian-addons__choice-label {
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  min-width: 0;
}

.athenian-addons__choice-price {
  font-size: 10.5px;
  padding: 2px 7px;
  border-radius: 999px;
  border: 1px solid var(--apadd-border-soft);
  color: var(--apadd-muted);
  background: rgba(0,0,0,0.12);
}

.athenian-addons__choice-upload {
  padding-left: 26px; /* aligns under label text */
  display: grid;
  gap: 6px;
}

/* ==========================================================================
   Enhanced file UI (JS wrapper)
   ========================================================================== */

.apadd-file-ui {
  display: grid;
  gap: 6px;
}

/* Always hide the native input: prevents double “Choose file” */
.apadd-file-ui__native {
  position: absolute !important;
  left: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Keep a belt-and-suspenders fallback (some themes force file input display) */
.apadd-file-ui input[type="file"].apadd-file-ui__native { display: none !important; }

.apadd-file-ui__top {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.apadd-file-ui__btn,
.apadd-file-ui__clear {
  appearance: none;
  border: 1px solid var(--apadd-border-soft);
  background: color-mix(in srgb, var(--apadd-surface) 70%, rgba(0,0,0,0.08));
  color: var(--apadd-text);
  padding: 7px 10px;
  border-radius: var(--apadd-radius-sm);
  font-size: 12px;
  font-weight: 750;
  cursor: pointer;
  transition:
    border-color var(--apadd-fast) var(--apadd-ease),
    box-shadow var(--apadd-fast) var(--apadd-ease),
    background-color var(--apadd-fast) var(--apadd-ease),
    transform var(--apadd-fast) var(--apadd-ease);
}

.apadd-file-ui__btn:hover {
  border-color: color-mix(in srgb, var(--apadd-accent) 45%, var(--apadd-border-soft));
  box-shadow: 0 0 0 3px var(--apadd-accent-2);
  transform: translateY(-1px);
}

.apadd-file-ui__btn:focus-visible,
.apadd-file-ui__clear:focus-visible {
  outline: none;
  box-shadow: var(--apadd-ring);
  border-color: color-mix(in srgb, var(--apadd-accent) 60%, transparent);
}

.apadd-file-ui__name {
  flex: 1;
  min-width: 0;
  font-size: 11px;
  color: var(--apadd-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Clear: a little “danger” affordance but still subtle */
.apadd-file-ui__clear {
  color: var(--apadd-muted);
  font-weight: 700;
}

.apadd-file-ui__clear:hover {
  color: #fecaca;
  border-color: rgba(239, 68, 68, 0.35);
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.12);
}

.apadd-file-ui__preview {
  display: none;
  width: 100%;
  max-width: 240px;
  border-radius: var(--apadd-radius);
  overflow: hidden;
  border: 1px solid var(--apadd-border-soft);
  background: rgba(0,0,0,0.14);
}

.apadd-file-ui__preview.is-visible { display: block; }

.apadd-file-ui__preview img {
  display: block;
  width: 100%;
  height: auto;
}

/* Hint text under upload */
.athenian-addons__file-hint {
  font-size: var(--apadd-help-font);
  color: var(--apadd-help);
  opacity: 0.9;
}

/* 8) Help text */
.athenian-addons__help {
  margin: 4px 0 0;
  font-size: var(--apadd-help-font);
  color: var(--apadd-help);
}

/* Meta lines */
.athenian-addons__file-meta,
.athenian-addons__url-meta {
  margin-top: 8px;
  font-size: 12px;
  color: var(--apadd-help);
}

.athenian-addons__file-link {
  text-decoration: none;
  border-bottom: 1px dashed currentColor;
}

.athenian-addons__file-link:hover { border-bottom-style: solid; }

/* ==========================================================================
   SWATCHES — Ultra compact 4-col tiles (dot on top, label under)
   Safe-scoped: ONLY affects .athenian-addons__field--swatch
   ========================================================================== */

.athenian-addons__field--swatch {
  --sw-size: 14px;
  --sw-gap: 6px;
  --sw-radius: 12px;

  --sw-bg: var(--apadd-chip-bg);
  --sw-bg-hover: var(--apadd-chip-bg-hover);
  --sw-border: var(--apadd-chip-border);
  --sw-text: var(--apadd-text);
  --sw-ring: var(--apadd-ring);
  --sw-accent-2: var(--apadd-accent-2);
}

.athenian-addons__field--swatch .athenian-addons__choices--swatch {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: var(--sw-gap) !important;
  margin-top: 6px;
}

.athenian-addons__field--swatch .athenian-addons__choice--swatch {
  position: relative;
  display: block;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  user-select: none;
}

.athenian-addons__field--swatch .athenian-addons__choice--swatch > input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.athenian-addons__field--swatch .athenian-addons__choice-inner {
  display: grid;
  justify-items: center;
  gap: 6px;
  padding: 10px 8px;
  border-radius: var(--sw-radius);
  border: 1px solid var(--sw-border);
  background: var(--sw-bg);
  transition:
    transform var(--apadd-fast) var(--apadd-ease),
    background var(--apadd-fast) var(--apadd-ease),
    border-color var(--apadd-fast) var(--apadd-ease),
    box-shadow var(--apadd-fast) var(--apadd-ease);
  min-height: 0;
}

.athenian-addons__field--swatch .athenian-addons__choice--swatch:hover .athenian-addons__choice-inner {
  background: var(--sw-bg-hover);
  border-color: color-mix(in srgb, var(--apadd-border) 78%, transparent);
  transform: translateY(-1px);
  box-shadow: var(--apadd-shadow-soft);
}

.athenian-addons__field--swatch .athenian-addons__swatch {
  width: var(--sw-size);
  height: var(--sw-size);
  border-radius: 999px;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.32);
}

.athenian-addons__field--swatch .athenian-addons__swatch[style*="#FFF"],
.athenian-addons__field--swatch .athenian-addons__swatch[style*="#fff"] {
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.35),
    inset 0 0 0 2px rgba(0,0,0,0.25);
}

.athenian-addons__field--swatch .athenian-addons__choice-label-text {
  display: block;
  text-align: center;
  font-size: 10px;
  line-height: 1.05;
  font-weight: 800;
  color: var(--sw-text);
  margin: 0;
  max-width: 100%;
  word-break: break-word;
  hyphens: auto;
}

.athenian-addons__field--swatch
  .athenian-addons__choice--swatch > input[type="radio"]:checked
  + .athenian-addons__choice-inner {
  border-color: color-mix(in srgb, var(--apadd-accent) 60%, transparent);
  box-shadow: 0 0 0 3px var(--sw-accent-2);
  background: color-mix(in srgb, var(--sw-bg) 70%, var(--sw-accent-2));
}

.athenian-addons__field--swatch
  .athenian-addons__choice--swatch > input[type="radio"]:focus-visible
  + .athenian-addons__choice-inner {
  box-shadow: var(--sw-ring);
}

/* Ensure no legacy pseudo-checkmark */
.athenian-addons__field--swatch
  .athenian-addons__choice--swatch > input[type="radio"]:checked
  + .athenian-addons__choice-inner::after {
  content: none !important;
}

/* APF safety reiteration */
[data-apf="common"] .athenian-addons__field--swatch .athenian-addons__choices--swatch,
.apf-pricing .athenian-addons__field--swatch .athenian-addons__choices--swatch {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

/* 9) Responsive tweaks (keep compact) */
@media (max-width: 640px) {
  .athenian-addons--product { margin: 10px 0; padding: 10px; }
  .athenian-addons__group { padding: 10px; }
  .athenian-addons__choices { gap: 6px; }
  .athenian-addons__field--swatch .athenian-addons__choices--swatch { gap: 6px !important; }
}