/* ---- Client theme tokens: light-only build ---- */
.tint-sim {
  --tint-bg: #ffffff;
  --tint-text: #111214;
  --tint-muted: #6b7280;
  --tint-border: #e2e5e9;
  --tint-surface: #f7f8fa;
  --tint-surface-hover: #eef0f3;
  /* Elementor can supply its primary brand color through this standard
     global token. Layout values below remain component-owned. */
  --tint-accent: var(--e-global-color-primary, #111214);
  --tint-accent-contrast: #ffffff;
  --tint-stage-bg: linear-gradient(180deg, #f7f8fa 0%, #ffffff 100%);
  --tint-shadow-ambient: 0 16px 40px rgba(15, 23, 42, 0.08);
  --tint-shadow-tight: 0 1px 2px rgba(15, 23, 42, 0.06);
  --tint-focus: #111214;
  --tint-ease: cubic-bezier(0.4, 0, 0.2, 1);

  position: relative;
  max-width: 640px;
  margin: 0 auto;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background: var(--tint-bg);
  color: var(--tint-text);
  border: 1px solid var(--tint-border);
  border-radius: 22px;
  box-shadow: var(--tint-shadow-ambient), var(--tint-shadow-tight);
  padding: 30px 26px 26px;
  box-sizing: border-box;
}

.tint-sim__eyebrow {
  text-align: center;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--tint-muted);
  margin: 0 0 8px;
}

.tint-sim__title {
  font-weight: 700;
  font-size: 24px;
  letter-spacing: -0.015em;
  text-align: center;
  margin: 0 0 4px;
}

.tint-sim__subtitle {
  text-align: center;
  color: var(--tint-muted);
  font-size: 14px;
  margin: 0 0 22px;
}

.tint-sim__stage {
  background: var(--tint-stage-bg);
  border-radius: 16px;
  padding: 20px;
  margin-bottom: 22px;
  transition: opacity .2s var(--tint-ease);
}

.tint-sim__stage--loading {
  min-height: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: tint-sim-pulse 1.4s ease-in-out infinite;
}

.tint-sim__stage--loading .tint-sim__canvas {
  display: none;
}

@keyframes tint-sim-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .5; }
}

.tint-sim__canvas {
  display: block;
  width: 100%;
  height: auto;
}

.tint-sim__tabs {
  position: relative;
  display: flex;
  gap: 4px;
  justify-content: center;
  flex-wrap: wrap;
  background: var(--tint-surface);
  border: 1px solid var(--tint-border);
  border-radius: 14px;
  padding: 4px;
  margin: 0 0 14px;
}

.tint-sim__tab-indicator,
.tint-sim__chip-indicator {
  position: absolute;
  top: 0;
  left: 0;
  /* width/height/position are set inline by simulator.js, matched to the
     active tab/chip's actual box - this covers wrapping onto multiple rows
     on narrow viewports, where a fixed/percentage size would misalign. */
  background: var(--tint-accent);
  border-radius: 10px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.28);
  transition: transform .28s var(--tint-ease), width .28s var(--tint-ease), height .28s var(--tint-ease);
  z-index: 0;
  pointer-events: none;
}

.tint-sim__chip-indicator {
  border-radius: 999px;
}

.tint-sim__tab {
  position: relative;
  z-index: 1;
  flex: 1 1 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: transparent;
  border: none;
  border-radius: 10px;
  padding: 9px 14px;
  cursor: pointer;
  font-size: 14px;
  color: var(--tint-muted);
  white-space: nowrap;
  transition: color .2s var(--tint-ease), transform .12s var(--tint-ease);
}

.tint-sim__tab:hover {
  color: var(--tint-text);
}

.tint-sim__tab:active {
  transform: scale(0.97);
}

.tint-sim__tab[data-active="1"] {
  color: var(--tint-accent-contrast);
}

.tint-sim__tab-badge {
  font-size: 12px;
  font-weight: 700;
  opacity: 0.75;
}

.tint-sim__sliderwrap {
  position: relative;
  max-width: 420px;
  height: 24px;
  margin: 2px auto 16px;
}

.tint-sim__slider-track {
  position: absolute;
  top: 50%;
  right: 0;
  left: 0;
  height: 4px;
  transform: translateY(-50%);
  border-radius: 999px;
  background: var(--tint-border);
  pointer-events: none;
}

.tint-sim__slider-knob {
  position: absolute;
  z-index: 1;
  top: 50%;
  left: var(--tint-slider-position, 50%);
  width: 20px;
  height: 20px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: var(--tint-accent);
  border: 3px solid var(--tint-bg);
  box-shadow: 0 1px 4px rgba(0, 0, 0, .45);
  pointer-events: none;
  transition: left .15s var(--tint-ease);
}

.tint-sim__slider {
  position: absolute;
  z-index: 2;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  background: transparent;
  cursor: pointer;
  touch-action: none;
  outline: none;
}

.tint-sim__sliderwrap:has(.tint-sim__slider:focus-visible) .tint-sim__slider-knob {
  box-shadow: 0 0 0 3px var(--tint-bg), 0 0 0 5px var(--tint-focus);
}

.tint-sim__chips {
  position: relative;
  display: flex;
  gap: 6px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

.tint-sim__chip {
  position: relative;
  z-index: 1;
  background: var(--tint-surface);
  border: 1px solid var(--tint-border);
  padding: 7px 15px;
  border-radius: 999px;
  cursor: pointer;
  font-size: 13px;
  color: var(--tint-text);
  transition: color .2s var(--tint-ease), border-color .2s var(--tint-ease), transform .12s var(--tint-ease);
}

.tint-sim__chip:hover {
  border-color: var(--tint-muted);
}

.tint-sim__chip:active {
  transform: scale(0.95);
}

.tint-sim__chip[data-active="1"] {
  background: transparent;
  border-color: transparent;
  font-weight: bold;
  color: var(--tint-accent-contrast);
}

.tint-sim__actions {
  display: flex;
  gap: 10px;
  justify-content: center;
}

.tint-sim__reset,
.tint-sim__original {
  background: transparent;
  border: 1px solid var(--tint-border);
  color: var(--tint-text);
  padding: 8px 16px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 13px;
  transition: background .2s var(--tint-ease), border-color .2s var(--tint-ease), color .2s var(--tint-ease), transform .12s var(--tint-ease);
}

.tint-sim__reset:hover,
.tint-sim__original:hover {
  border-color: var(--tint-muted);
  background: var(--tint-surface-hover);
}

.tint-sim__reset:active,
.tint-sim__original:active {
  transform: scale(0.96);
}

.tint-sim__original--active {
  background: var(--tint-accent);
  border-color: var(--tint-accent);
  color: var(--tint-accent-contrast);
}

.tint-sim__tab:focus-visible,
.tint-sim__chip:focus-visible,
.tint-sim__reset:focus-visible,
.tint-sim__original:focus-visible {
  outline: 2px solid var(--tint-focus);
  outline-offset: 2px;
}

/* ---- WordPress / Elementor style isolation ----
   Page builders commonly emit global rules such as `.elementor-kit-N button`
   and `.elementor-kit-N input[type="range"]` after plugin styles. Those
   selectors are more specific than a single component class, so without this
   boundary they can recolor, uppercase, square off, or resize our controls.

   Keep this block scoped to the simulator root. The targeted !important flags
   are intentional: Elementor Site Settings may also mark global form-control
   declarations important, and matching importance plus this higher specificity
   is required for the plugin to remain visually self-contained. */
.tint-sim[data-tint-sim],
.tint-sim[data-tint-sim] *,
.tint-sim[data-tint-sim] *::before,
.tint-sim[data-tint-sim] *::after {
  box-sizing: border-box;
}

.tint-sim[data-tint-sim] button {
  font-family: inherit !important;
  font-style: normal !important;
  line-height: 1.2 !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  text-decoration: none !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
}

.tint-sim[data-tint-sim] .tint-sim__tab {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  height: auto !important;
  padding: 9px 14px !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 10px !important;
  box-shadow: none !important;
  color: var(--tint-muted) !important;
  font-size: 14px !important;
  font-weight: 400 !important;
}

.tint-sim[data-tint-sim] .tint-sim__tab:hover {
  color: var(--tint-text) !important;
}

.tint-sim[data-tint-sim] .tint-sim__tab[data-active="1"] {
  color: var(--tint-accent-contrast) !important;
}

.tint-sim[data-tint-sim] .tint-sim__chip {
  display: inline-block !important;
  width: auto !important;
  height: auto !important;
  padding: 7px 15px !important;
  background: var(--tint-surface) !important;
  border: 1px solid var(--tint-border) !important;
  border-radius: 999px !important;
  box-shadow: none !important;
  color: var(--tint-text) !important;
  font-size: 13px !important;
  font-weight: 400 !important;
}

.tint-sim[data-tint-sim] .tint-sim__chip[data-active="1"] {
  background: transparent !important;
  border-color: transparent !important;
  color: var(--tint-accent-contrast) !important;
  font-weight: 700 !important;
}

.tint-sim[data-tint-sim] .tint-sim__reset,
.tint-sim[data-tint-sim] .tint-sim__original {
  display: inline-block !important;
  width: auto !important;
  height: auto !important;
  padding: 8px 16px !important;
  background: transparent !important;
  border: 1px solid var(--tint-border) !important;
  border-radius: 8px !important;
  box-shadow: none !important;
  color: var(--tint-text) !important;
  font-size: 13px !important;
  font-weight: 400 !important;
}

.tint-sim[data-tint-sim] .tint-sim__reset:hover,
.tint-sim[data-tint-sim] .tint-sim__original:hover {
  background: var(--tint-surface-hover) !important;
  border-color: var(--tint-muted) !important;
}

.tint-sim[data-tint-sim] .tint-sim__original--active {
  background: var(--tint-accent) !important;
  border-color: var(--tint-accent) !important;
  color: var(--tint-accent-contrast) !important;
}

.tint-sim[data-tint-sim] .tint-sim__slider {
  position: absolute !important;
  z-index: 2 !important;
  inset: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  cursor: pointer !important;
  outline: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.tint-sim[data-tint-sim] .tint-sim__sliderwrap {
  position: relative;
  display: block;
  height: 24px;
}

.tint-sim[data-tint-sim] .tint-sim__slider-track {
  position: absolute;
  z-index: 0;
  top: 50%;
  right: 0;
  left: 0;
  height: 4px;
  transform: translateY(-50%);
  background: var(--tint-border);
  border-radius: 999px;
  pointer-events: none;
}

.tint-sim[data-tint-sim] .tint-sim__slider-knob {
  position: absolute;
  z-index: 1;
  top: 50%;
  left: var(--tint-slider-position, 50%);
  width: 20px !important;
  height: 20px !important;
  margin: 0 !important;
  padding: 0 !important;
  background: var(--tint-accent) !important;
  border: 3px solid var(--tint-bg) !important;
  border-radius: 50% !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .45) !important;
  transform: translate(-50%, -50%) !important;
  pointer-events: none !important;
}

@media (max-width: 480px) {
  .tint-sim[data-tint-sim] .tint-sim__tabs {
    flex-direction: column;
  }

  .tint-sim[data-tint-sim] .tint-sim__tab {
    flex: 1 1 auto;
    width: 100% !important;
  }
}