/* contenitore responsive per i grafici salvati [keytube_chart]: evita overflow su mobile */
.keytube-chart-wrap {
  position: relative;
  display: block;
  box-sizing: border-box;
  width: 100%;
  max-width: 600px;
  min-width: 0;    /* evita che un genitore flex/grid impedisca il restringimento */
  aspect-ratio: 3 / 2;
  margin: 0 auto;
  overflow: hidden;
}
.keytube-chart-wrap canvas.keytube-chart {
  display: block;
  width: 100% !important;
  height: 100% !important;
  max-width: 100%;
}
@media (max-width: 480px) {
  .keytube-chart-wrap { aspect-ratio: 4 / 3; }
}

.ktc-builder table {width:100%;border-collapse:collapse;margin:8px 0}
.ktc-builder th,.ktc-builder td{border:1px solid #ddd;padding:8px}
.ktc-builder input{width:100%}
.ktc-builder .actions{display:flex;gap:.5rem}

/* spazio per il color picker */
.wp-picker-container { display: inline-block; }
#ktc-rows input[name="ktc_colors[]"] { max-width: 180px; }

#ktc-rows .ktc-handle {
  cursor: grab;     
  text-align: center;
  user-select: none;
  width: 28px;
  font-weight: bold;
  color: #666;
}

#ktc-rows .ktc-handle:active {
  cursor: grabbing;    
}

#ktc-rows tr.ui-sortable-helper {
  background: #fffbe6;
}

#ktc-rows tr.ktc-row-placeholder td {
  background: #f0f6ff !important;
  border: 1px dashed #9eb8ff !important;
}

/* LATO FRONTEND*/
.ktc-form {background-color: black; border: 1px solid rgba(0,255,255,0.2); border-radius: 8px; padding: 20px;}

.ktc-form .genera-grafico {border: 2px solid #cd6aff !important; border-radius: 8px !important;
    background: transparent; color: white; animation: fadeInDown .5s  ease; background-color: rgba(0, 0, 0, 0.8) !important; cursor: pointer; padding: 10px 20px; margin: 0 20px; }

.genera-grafico {border: 2px solid #cd6aff !important; border-radius: 8px !important;
    background: transparent; background-color: black; color: white; animation: fadeInDown .5s  ease; background-color: rgba(0, 0, 0, 0.8) !important; cursor: pointer; padding: 10px 20px; margin: 0 20px; }

.genera-grafico:hover {background: #cd6aff; background-color: #cd6aff;}

.titolo-grafico {text-align: center; margin: 0 auto;}
.titolo-grafico h3 {margin-bottom: 20px;}
.titolo-grafico input {width: 600px; margin-bottom: 20px;}

.ktc-form {background-color: black; border: 1px solid rgba(0,255,255,0.2); border-radius: 8px;}
.ktc-form table td, .ktc-form table tr {vertical-align: middle; text-align: center;}
.ktc-form input[type="text"],
.ktc-form input[type="number"],
.ktc-form input[type="email"],
.ktc-form input[type="url"],
.ktc-form select {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(0,255,255,0.2);
  border-radius: 8px;
  color: #fff;
  padding: 10px 14px;
  font-size: 15px;
  transition: all 0.25s ease;
  box-shadow: inset 0 0 10px rgba(0,255,255,0.06);
  backdrop-filter: blur(3px);
}

/* Placeholder */
.ktc-form input::placeholder {
  color: rgba(255,255,255,0.35);
}

/* Hover */
.ktc-form input:hover,
.ktc-form select:hover {
  border-color: rgba(0,255,255,0.5);
  box-shadow: 0 0 12px rgba(0,255,255,0.2);
	
}

/* Focus */
.ktc-form input:focus,
.ktc-form select:focus {
  outline: none;
  border-color: #00ffff;
  box-shadow: 0 0 6px #00ffff, inset 0 0 8px rgba(0,255,255,0.8);
  background: rgba(0,0,0,0.5);
}

.ktc-form {margin: 50px auto; width: 700px;}
.ktc-builder { max-width: 720px; margin: 24px auto; }
.ktc-builder canvas {width: 680px !important; height: 500px !important; margin: 0 auto;}

.ktc-swatch-group {
  display: flex; gap: 6px; flex-wrap: wrap; align-items: center;
}
.ktc-swatch {width: 22px; height: 22px; border-radius: 50%; opacity: .4; border: 0; background: var(--c, #ccc); display: inline-block; cursor: pointer; outline: none; transition: transform .07s ease, box-shadow .2s ease, border-color .2s ease;}
.ktc-swatch.is-selected, .ktc-swatch:hover,.ktc-swatch:focus  {opacity: 1; border: none;}

/* bottone elimina riga "X" futuristica */
.ktc-del-row.button, .aggiungi-riga.button {color: #25f2e0; background-color: transparent; border: 0; }
.ktc-del-row.button:hover .aggiungi-riga.button:hover {color: white; }

/*COLOR SWITCH THEME*/
/* switch tema */
.ktc-theme-toggle { margin-top: .5rem; }
.ktc-switch {
  position: relative; display: inline-flex; align-items: center; gap: 10px;
  user-select: none; cursor: pointer;
}
.ktc-switch input { display:none; }
.ktc-slider {
  width: 48px; height: 26px; border-radius: 999px;
  background: #222; border: 1px solid #444;
  position: relative; transition: background .25s, border-color .25s;
  box-shadow: inset 0 0 8px rgba(0,0,0,.35);
}
.ktc-slider::after {
  content: ''; position: absolute; top: 3px; left: 3px;
  width: 20px; height: 20px; border-radius: 50%;
  background: #9f8df4; box-shadow: 0 0 8px rgba(159,141,244,.6);
  transition: transform .25s;
}
.ktc-switch input:checked + .ktc-slider {
  background: #e9eef5; border-color: #cfd8e3;
}
.ktc-switch input:checked + .ktc-slider::after {
  transform: translateX(22px);
}
.ktc-switch-text { display: inline-flex; gap: 6px; font-size: 12px; opacity: .85; }