/* Lightweight Twibbon Maker with Contextual Mobile UI */

/* Checkerboard pattern for transparent canvas & preview */
.checkerboard-pattern {
  background-color: #0f172a;
  background-image: 
    linear-gradient(45deg, #1e293b 25%, transparent 25%),
    linear-gradient(-45deg, #1e293b 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #1e293b 75%),
    linear-gradient(-45deg, transparent 75%, #1e293b 75%);
  background-size: 16px 16px;
  background-position: 0 0, 0 8px, 8px -8px, -8px 0;
}

/* Canvas container responsive centering */
#canvasContainer {
  position: relative;
  width: 320px;
  height: 320px;
  max-width: 100%;
  aspect-ratio: 1 / 1;
  margin: 0 auto;
  box-shadow: 0 12px 28px -6px rgba(0, 0, 0, 0.5), 0 8px 12px -6px rgba(0, 0, 0, 0.4);
  border-radius: 12px;
  overflow: hidden;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}

#mainCanvas {
  display: block;
  width: 100%;
  height: 100%;
  cursor: crosshair;
}

body.mode-photo #mainCanvas {
  cursor: grab;
}

body.mode-photo #mainCanvas:active {
  cursor: grabbing;
}

body.mode-text #mainCanvas {
  cursor: move;
}

/* Contextual Tab Buttons */
.tab-btn {
  color: #94a3b8;
  background-color: transparent;
}

.tab-btn:hover {
  color: #f1f5f9;
  background-color: rgba(51, 65, 85, 0.5);
}

.tab-btn.active {
  color: #020617;
  background-color: #38bdf8;
  box-shadow: 0 2px 8px rgba(56, 189, 248, 0.3);
}

/* Multi-Text Pill Tabs */
.text-pill {
  padding: 4px 10px;
  border-radius: 9999px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
  background-color: #1e293b;
  color: #94a3b8;
  border: 1px solid #334155;
  transition: all 0.15s ease;
  cursor: pointer;
}

.text-pill.active {
  background-color: #10b981;
  color: #ffffff;
  border-color: #059669;
  box-shadow: 0 0 8px rgba(16, 185, 129, 0.4);
}

/* Custom styled Range Sliders */
input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  height: 6px;
  border-radius: 9999px;
  background: #334155;
  outline: none;
}

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #38bdf8;
  cursor: pointer;
  border: 2px solid #0f172a;
  box-shadow: 0 0 6px rgba(56, 189, 248, 0.4);
  transition: transform 0.1s ease;
}

input[type="range"]::-webkit-slider-thumb:hover {
  transform: scale(1.15);
}

input[type="range"]::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #38bdf8;
  cursor: pointer;
  border: 2px solid #0f172a;
}