/* ===================================================
   NFC Card Configurator v1.2.0
   =================================================== */

:root {
  --nfc-accent    : #0f3460;
  --nfc-radius    : 12px;
  --nfc-transition: .22s cubic-bezier(.4,0,.2,1);
  --nfc-font      : 'Poppins', system-ui, sans-serif;
}

/* ── Pannello controlli ── */
#nfc-controls-panel {
  margin     : 0 0 20px;
  font-family: var(--nfc-font);
  width      : 100%;
}

.nfc-controls-inner {
  display        : flex;
  flex-direction : column;
  gap            : 20px;
}

/* ── Sezioni ── */
.nfc-section-title {
  font-size     : .7rem;
  font-weight   : 800;
  letter-spacing: .09em;
  text-transform: uppercase;
  margin        : 0 0 10px;
}

/* ── Swatches ── */
.nfc-color-swatches {
  display      : flex;
  flex-wrap    : wrap;
  gap          : 8px;
  margin-bottom: 12px;
}

.nfc-swatch {
  width        : 30px;
  height       : 30px;
  border-radius: 10px;
  border       : 3px solid transparent;
  cursor       : pointer;
  transition   : transform var(--nfc-transition), border-color var(--nfc-transition), box-shadow var(--nfc-transition);
  box-shadow   : 0 2px 5px rgba(0,0,0,.18);
  outline      : none;
}
.nfc-swatch:hover { transform: scale(1.2); box-shadow: 0 4px 10px rgba(0,0,0,.26); }
.nfc-swatch.active {
  border-color: #fff;
  box-shadow  : 0 0 0 2px var(--nfc-accent), 0 3px 10px rgba(0,0,0,.22);
  transform   : scale(1.05);
}

/* ── Picker colore personalizzato ── */
.nfc-custom-color-row {
  display    : flex;
  align-items: center;
  gap        : 10px;
}
.nfc-custom-color-row label { font-size: .82rem; color: #445; }

#nfc-custom-color-input {
  width        : 38px;
  height       : 34px;
  padding      : 2px;
  border       : 1px solid #ccc;
  border-radius: 8px;
  cursor       : pointer;
  background   : none;
}

#nfc-color-value-display {
  font-size    : .8rem;
  font-family  : monospace;
  color        : #667;
  background   : #edf0f8;
  padding      : 2px 8px;
  border-radius: 6px;
}

/* ── Drop zone ── */
.nfc-drop-zone {
  position     : relative;
  border       : 2px dashed #c0cce0;
  border-radius: var(--nfc-radius);
  padding      : 20px 14px;
  text-align   : center;
  cursor       : pointer;
  background   : #fff;
  transition   : border-color var(--nfc-transition), background var(--nfc-transition);
}
.nfc-drop-zone.dragover { border-color: var(--nfc-accent); background: #edf2fb; }
.nfc-drop-zone input[type="file"] {
  position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%;
}
.nfc-drop-text { font-size: .82rem; color: #7788aa; line-height: 1.4; margin: 4px 0 0; }

/* ── Hint placeholder ── */
.nfc-placeholder-hint {
  font-size    : .78rem;
  color        : #7a5800;
  background   : #fff8e1;
  border       : 1px solid #ffe082;
  border-radius: 8px;
  padding      : 7px 12px;
  margin-top   : 8px;
  line-height  : 1.4;
}

/* ── Bottoni ── */
.nfc-logo-actions { display: none; gap: 8px; margin-top: 10px; }
.nfc-logo-actions.visible { display: flex; }

.nfc-btn {
  font-size    : .78rem;
  font-weight  : 700;
  padding      : 7px 14px;
  border-radius: 8px;
  border       : none;
  cursor       : pointer;
  transition   : background var(--nfc-transition), transform .1s;
}
.nfc-btn:active       { transform: scale(.97); }
.nfc-btn-change       { background: var(--nfc-accent); color: #fff; }
.nfc-btn-change:hover { background: #1a4880; }
.nfc-btn-remove       { background: #ffe2e2; color: #c0392b; }
.nfc-btn-remove:hover { background: #ffc8c8; }

/* ── Toast ── */
.nfc-toast {
  font-size    : .8rem;
  padding      : 7px 12px;
  border-radius: 8px;
  margin-top   : 6px;
  display      : none;
}
.nfc-toast.error   { display: block; background: #fff0f0; color: #c0392b; border: 1px solid #ffd0d0; }
.nfc-toast.success { display: block; background: #f0fff4; color: #27ae60; border: 1px solid #b7f5d0; }

/* ── Riepilogo ── */
.nfc-summary {
  background   : #fff;
  border       : 1px solid #dde5f5;
  border-radius: 10px;
  padding      : 10px 14px;
  font-size    : .82rem;
  color        : #445;
  line-height  : 1.7;
}
.nfc-summary strong { color: #223; }
.nfc-summary-swatch {
  display       : inline-block;
  width         : 12px;
  height        : 12px;
  border-radius : 3px;
  vertical-align: middle;
  margin-right  : 4px;
  border        : 1px solid rgba(0,0,0,.15);
}

/* ── Notice logo obbligatorio ── */
.nfc-cart-notice {
  display      : flex;
  align-items  : center;
  gap          : 8px;
  background   : #fff8e1;
  border       : 1px solid #ffe082;
  border-radius: 10px;
  padding      : 10px 14px;
  font-size    : .82rem;
  color        : #7a5800;
  font-weight  : 600;
  line-height  : 1.4;
}

/* ── Pulsante Add to Cart disabilitato ── */
.single_add_to_cart_button.nfc-btn-disabled,
.single_add_to_cart_button:disabled {
  opacity       : 0.4 !important;
  cursor        : not-allowed !important;
  pointer-events: none !important;
}