:root{
  --bg:#ffffff;
  --text:#1a1a1a;
  --muted:#5A5955;
  --border:#D0D0D0;
  --banner:#5A5955;
  --accent:#97B911;
  --card:#ffffff;
  --soft:#f5f5f5;
  --danger:#c0392b;
  --shadow: 0 8px 22px rgba(0,0,0,.08);
  --radius:18px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  background: var(--bg);
  color: var(--text);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.gatekeeper-overlay {
  position: fixed;
  top: 0; left: 0; width: 100%; height: 100%;
  background: var(--bg);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
}

.gatekeeper-box {
  background: var(--banner);
  padding: 30px;
  border-radius: 18px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.1);
  text-align: center;
  width: 90%;
  max-width: 320px;
  color: white;
}

.gatekeeper-box h3 {
  color: var(--header-text, #ffffff);
}

.gatekeeper-box p {
  color: var(--header-text, #ffffff);
}

.gatekeeper-logo {
  height: 50px;
  margin-bottom: 20px;
  object-fit: contain;
}

.topbar{
  position:sticky; top:0; z-index:5;
  background: var(--banner);
  border-bottom: 1px solid rgba(255,255,255,.12);
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px 18px;
}

.brand{
  display:flex;
  align-items:center;
  gap:12px;
  min-width: 0;
}
.brandText{display:flex; flex-direction:column; gap:2px; min-width:0}
.brand-logo{
  height:44px;
  width:auto;
  display:block;
}
.logo{
  color: var(--header-text, #ffffff);
  font-weight:800;
  letter-spacing:.04em;
  line-height:1.1;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.subtitle{
  color: var(--header-text, #e0e0e0); opacity: 0.8;
  font-size:13px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.actions{display:flex; gap:10px; align-items:center}

.container{max-width:1100px; margin:0 auto; padding:18px}

.controls{
  display:flex;
  gap:12px;
  align-items:center;
  justify-content:space-between;
  margin-bottom:12px;
}

.input{
  width: min(520px, 100%);
  border:1px solid var(--border);
  border-radius: 14px;
  padding:12px 12px;
  background:#fff;
  color: var(--text);
  outline:none;
}
.input::placeholder{color: rgba(90,89,85,.70)}
.status{font-size:13px; color: var(--muted)}

.btn{
  border:1px solid var(--accent);
  background: var(--accent);
  color: #fff;
  border-radius:14px;
  padding:10px 20px;
  cursor:pointer;
  font-weight:700;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.btn:hover{filter:brightness(.95)}
.btn.small{padding:8px 10px; border-radius:12px; font-size:12px}
.btn.danger{border-color: var(--danger); background: var(--danger)}

.btn.ghost{
  border:1px solid var(--border);
  background: transparent;
  color: var(--muted);
}
.btn.ghost:hover{background: rgba(208,208,208,.30)}
.btn.ok{border-color: var(--accent); background: var(--accent)}

.grid{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap:12px;
}

.card{
  background: var(--card);
  border:1px solid var(--border);
  border-radius: var(--radius);
  overflow:hidden;
  box-shadow: var(--shadow);
  display:flex;
  flex-direction:column;
  min-height: 100%;
}

.imgwrap{
  position:relative;
  background: var(--soft);
  border-bottom:1px solid var(--border);
  height:180px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.imgwrap img{
  width: auto;
  height: auto;
  max-width:100%;
  max-height:100%;
  object-fit:contain;
  padding:10px;
}
.imgwrap .placeholder{
  color: rgba(90,89,85,.75);
  font-size:13px;
  text-align:center;
  padding: 0 12px;
}

.badge{
  position:absolute;
  top:10px; left:10px;
  padding:6px 10px;
  border-radius: 999px;
  font-size:12px;
  font-weight:800;
  letter-spacing:.02em;
  color:#fff;
  box-shadow: 0 6px 18px rgba(0,0,0,.14);
}
.badge.ok{background: var(--accent)}
.badge.out{background: var(--muted)}

.content{padding:12px 12px 14px; display:flex; flex-direction:column; gap:10px; flex:1}

.title{display:flex; align-items:baseline; justify-content:space-between; gap:10px}
.code{font-weight:900; letter-spacing:.01em}
.qty{font-size:12px; color: var(--muted)}
.name{color: rgba(26,26,26,.92); font-size:14px; line-height:1.25; min-height: 38px}

.prices{display:flex; gap:10px; flex-wrap:wrap; align-items:baseline}
.muted{ color: var(--muted); }
.strike{ color: rgba(90,89,85,.8); text-decoration: line-through; }
.priceRow{ display:flex; gap:8px; align-items:baseline; flex-wrap:wrap; }
.priceRow.strong{ font-weight:900; font-size:18px; }

.meta{position:relative; gap:8px; flex-wrap:wrap; color: var(--muted); font-size:12px}

.coinIcon{position:absolute; bottom:0; right:0; background:url('images/hcoin.png') no-repeat; background-size:contain; width:28px; height:28px; display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:bold; color:#333; background-size:28px 28px}

/* Description class for card text truncation */
.description {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.4;
}

/* Admin notes styling */
.admin-notes {
  background: #fff3cd;
  border: 1px solid #ffeaa7;
  border-radius: 8px;
  padding: 12px;
  margin: 8px 0;
  font-size: 13px;
  color: #856404;
  display: none; /* Hidden by default, shown only to admin */
}

.admin-notes.show {
  display: block;
}

.admin{
  margin-top:auto;
  padding-top:10px;
  border-top:1px dashed var(--border);
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
}

.qtyInput{
  width: 92px;
  border:1px solid var(--border);
  border-radius: 12px;
  padding:8px 10px;
}

.footer{
  margin-top: 18px;
  padding: 18px;
  display:flex;
  flex-direction:column;
  gap:14px;
  align-items:center;
  justify-content:center;
  border-top:1px solid var(--border);
}
.footerNote{font-size:12px; color: var(--muted); line-height:1.35}
.footerNote code{background: var(--soft); padding:2px 6px; border-radius:10px; border:1px solid var(--border)}

.soldout{margin-top:26px}
.soldout h2{margin: 0 0 10px; font-size: 16px; color: var(--muted)}

.adminPanel{
  margin: 14px 0 20px;
  padding: 14px;
  border:1px solid var(--border);
  border-radius: var(--radius);
  background: var(--soft);
  box-shadow: var(--shadow);
}
.adminPanel .panelTitle{
  font-weight:900;
  margin-bottom:10px;
}
.adminPanel .hint{
  font-size:12px;
  color: var(--muted);
  margin-bottom:12px;
}

.adminDetails{
  border:1px solid var(--border);
  border-radius: 14px;
  background:#fff;
  padding: 10px 12px;
  margin-bottom: 10px;
}
.adminDetails summary{
  cursor:pointer;
  font-weight:800;
  list-style:none;
}
.adminDetails summary::-webkit-details-marker{display:none}
.adminDetails .editor{margin-top:10px}

/* Add vertical spacing between form rows in admin panel */
.adminPanel .editor .formRow {
  margin-bottom: 12px;
}

.smallNote{
  font-size: 12px;
  color: var(--muted);
  margin-top: 8px;
}

.info-notice {
  background: var(--soft);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px;
  margin-bottom: 12px;
  box-shadow: var(--shadow);
}

.info-notice p {
  margin: 0 0 8px 0;
}

.info-notice p:last-child {
  margin: 0;
}

.mobile-break { display: none; }

@media (max-width: 480px) {
  .mobile-break { display: block; }
}

@media (max-width: 700px){
  .controls{flex-direction:column; align-items:stretch}
  .input{width:100%}
  .footer{flex-direction:column}
  .subtitle{white-space:normal}
}

@media (max-width: 480px){
  .container{padding:12px}
  .topbar{padding:10px 12px}
  .imgwrap{height:140px}
  .grid{grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap:8px}
  .btn{height:44px; padding:12px 20px}
  .input{min-height:44px; padding:12px 16px}
  .btn.small{min-height:40px; padding:10px 14px}
  .qtyInput{min-height:40px}
  .brand-logo{height:36px}
  .subtitle{display:none}
  .badge.ok{font-size:0; padding:6px; width:12px; height:12px; border-radius:50%; }
  .badge.ok:after{content:'';}
}

.footerActions{display:flex; gap:10px; align-items:center}
.footerActions.center{justify-content:center}

.printHeader{display:none; padding:14px 18px}
.printBrand{display:flex; align-items:center; gap:14px}
.printLogo{height:42px; width:auto; object-fit:contain}
.printTitle{font-size:14px; font-weight:800; letter-spacing:.5px; color: var(--text)}
.printMeta{font-size:12px; color: var(--muted); margin-top:2px}

@media print{
  @page{ size: A4; margin: 12mm; }

  /* better PDF output */
  html{ -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  body{ font-family: Arial, Helvetica, sans-serif; color: #000; background: #fff; }

  /* Add dark gray background behind logo for visibility */
  .brand-logo,
  .printLogo{
    background-color: #555;
    padding: 8px;
  }

  /* layout */
  .topbar{position:static; background:#fff; color:#000; border-bottom:1px solid var(--border)}
  .brandText .subtitle{display:none}
  .actions, .controls, .adminPanel, .footer, .cardActions, .qtyControls, .adminPill{display:none !important;}
  .printHeader{display:block; font-family: Arial, Helvetica, sans-serif; }
  body{background:#fff}
  .container{max-width:none; padding:0 12mm 12mm}
  h2.h2{margin-top:10mm}
  .grid{display:flex; flex-wrap:wrap; gap:8mm}
  .card{width: calc(50% - 4mm); box-shadow:none; border:1px solid #ccc; border-radius:8px; overflow:hidden; page-break-inside:avoid; break-inside:avoid; background: #fff; }
  .imgwrap{height:42mm; background: #f9f9f9; }
  .imgwrap img{max-height:42mm; width:auto; image-rendering: high-quality; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .badge{display:none}
  .priceRow{gap:10px}
  .priceLine{font-size:12px}
  .outlet{font-size:16px}
  .meta{font-size:12px; color: #666; }
  .empty{display:none !important}
  .card .content{ padding: 8px 8px 10px; font-family: Arial, Helvetica, sans-serif; }
  .card .code{ font-size: 18px; font-weight: bold; }
  .card .name{ font-size: 14px; }
  .prices{ gap: 6px; }

  /* show soldout section title */
  .soldout{page-break-before:always}
}

/* ---------- sales tracking UI ---------- */

.agenciesGrid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
  margin: 16px 0;
}

.agencyCard{
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 14px;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
}

.agencyName{
  font-weight: 800;
  font-size: 16px;
  color: var(--text);
  word-break: break-word;
}

.agencyCoins{
  font-size: 18px;
  font-weight: bold;
  color: var(--accent);
}

.agencyCard .btn{
  margin-top: auto;
  width: 100%;
}

.transactionsList{
  margin: 16px 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.transactionItem{
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 12px;
  align-items: center;
  background: rgba(151, 177, 17, 0.05);
  border: 1px solid rgba(151, 177, 17, 0.15);
  border-radius: 8px;
  padding: 10px 14px;
}

.txTime{
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
  text-align: right;
}

.txDetails{
  font-weight: 500;
  font-size: 14px;
  color: var(--text);
}

.txCoins{
  font-weight: bold;
  color: var(--accent);
  text-align: right;
}

.noData{
  text-align: center;
  font-style: italic;
  color: var(--muted);
  padding: 30px;
  margin: 20px 0;
  background: var(--soft);
  border-radius: 12px;
  border: 1px solid var(--border);
}

.sectionTitle{
  font-size: 16px;
  color: var(--text);
  margin: 20px 0 10px 0;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}

/* ---------- sales table ---------- */

.salesTable{
  width: 100%;
  border-collapse: collapse;
  margin: 16px 0;
}

.salesTable th{
  background: var(--soft);
  border: 1px solid var(--border);
  padding: 12px;
  text-align: left;
  font-weight: bold;
}

.salesTable td{
  border: 1px solid var(--border);
  padding: 12px;
}

.coinIconTable {
  background: url('images/hcoin.png') no-repeat;
  background-size: contain;
  width: 28px;
  height: 28px;
  line-height: 28px; /* Questo centra il testo verticalmente */
  display: inline-block;
  text-align: center;
  font-size: 12px;
  font-weight: bold;
  color: #333;
  vertical-align: middle;
}

/* Modal Styles */
.modalOverlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.6);
  z-index: 1000;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  backdrop-filter: blur(2px);
}

.modalContent {
  background: var(--bg);
  padding: 24px;
  border-radius: var(--radius);
  width: 95%; max-width: 600px;
  max-height: 90vh;
  display: flex; flex-direction: column;
  margin: auto;
  box-shadow: 0 20px 40px rgba(0,0,0,0.2);
  animation: popIn 0.2s ease-out;
}

@keyframes popIn {
  from {transform: scale(0.9); opacity: 0;}
  to {transform: scale(1); opacity: 1;}
}

#cartList {
  overflow-y: auto;
  padding-right: 5px;
}

.modalSubtitle { font-weight: bold; margin-bottom: 15px; color: var(--accent); }
.modalSection { margin-bottom: 16px; }
.borderTop { border-top: 1px solid var(--border); padding-top: 16px; }

.agencyList {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
  max-height: 200px; overflow-y: auto;
  margin-top: 8px;
}

.agencyBtn {
  background: var(--soft); border: 1px solid var(--border);
  padding: 10px; border-radius: 8px;
  font-size: 13px; font-weight: 600; color: var(--text);
  cursor: pointer; text-align: center;
  transition: all 0.2s;
}
.agencyBtn:hover { background: var(--accent); color: #fff; border-color: var(--accent); }

.newAgencyRow { display: flex; gap: 8px; margin-top: 8px; }
.fullWidth { width: 100%; }

/* Assicura che l'attributo hidden funzioni anche se c'è display:flex */
.modalOverlay[hidden] {
  display: none !important;
}

/* ---------- hidden items ---------- */

.hiddenItem {
  opacity: 0.6;
  border: 2px dashed #ccc;
}

/* --- Admin Panel Layout --- */
.admin-card {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.08);
  padding: 24px;
  margin-bottom: 24px;
}

.admin-header h3 { margin: 0; color: var(--accent); }
.admin-header p { margin: 4px 0 0; color: #888; font-size: 13px; }

/* Main Grid - 2 Columns on Desktop */
.admin-layout-grid {
  display: grid;
  grid-template-columns: 2fr 1fr; /* Left column wider than right */
  gap: 30px;
  margin-top: 24px;
}

/* Left Column Rows (for inputs pairs) */
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 16px;
}
.form-row.full { grid-template-columns: 1fr; }

/* Input Styling (Taller for mobile) */
.form-group label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  color: #999;
  margin-bottom: 6px;
  letter-spacing: 0.5px;
}

.admin-input {
  width: 100%;
  height: 44px; /* Optimal touch target */
  padding: 0 12px;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  font-size: 15px;
  background: #fff;
  transition: all 0.2s;
  -webkit-appearance: none;
}
.admin-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(255, 64, 129, 0.1); outline: none; }
.admin-input[readonly] { background: #f7f7f7; border-color: #eee; color: #666; font-weight: 600; }

textarea.admin-input {
  min-height: 80px;
  resize: vertical;
  padding: 12px;
}

/* Right Column - Media Section */
.admin-media-col {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.media-preview {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1; /* Square preview */
  background: #f0f0f0;
  border-radius: 12px;
  overflow: hidden;
  border: 2px dashed #ddd;
}
.media-preview img { width: 100%; height: 100%; object-fit: cover; }
.media-preview.hidden { display: none; }

.remove-media-btn {
  position: absolute;
  top: 8px; right: 8px;
  background: rgba(0,0,0,0.5); color: white;
  border: none; border-radius: 50%; width: 24px; height: 24px;
  font-size: 16px; line-height: 1; cursor: pointer;
}

.photo-upload-btn {
  height: 44px;
  background: #eef2ff; color: var(--accent);
  border: 1px dashed var(--accent); border-radius: 8px;
  font-weight: 600; display: flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer;
  transition: all 0.2s;
}
.photo-upload-btn:hover { background: #e0e7ff; }

/* Add Button */
.admin-footer { margin-top: 24px; }
#addBtn { height: 50px; font-size: 16px; font-weight: 700; }

/* --- MOBILE RESPONSIVENESS --- */
@media (max-width: 768px) {
  .admin-card { padding: 16px; }
  .admin-layout-grid {
    grid-template-columns: 1fr; /* Stack columns vertically */
    gap: 20px;
  }
  /* On mobile, media section goes below inputs */
  .admin-media-col { order: 2; }
  /* Small rows stack too */
  .form-row { grid-template-columns: 1fr; gap: 12px; }

  /* Media preview less tall on mobile */
  .media-preview { aspect-ratio: 16 / 9; }
}

/* --- Compact Editor (for inside Cards) --- */
.card-editor-wrapper {
  background: #fcfcfc;
  border-top: 1px solid #eee;
  padding: 12px;
  margin-top: 12px;
  border-radius: 0 0 12px 12px;
}

.compact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr; /* 2 columns on Desktop */
  gap: 8px;
  margin-bottom: 8px;
}

.compact-full {
  grid-column: 1 / -1;
  margin-bottom: 8px;
}

.compact-label {
  display: block;
  font-size: 10px;
  text-transform: uppercase;
  color: #999;
  margin-bottom: 4px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.compact-input {
  width: 100%;
  height: 40px; /* Slightly taller for easier tapping */
  padding: 0 8px;
  border: 1px solid #e0e0e0;
  border-radius: 6px;
  font-size: 15px; /* Larger font prevents zooming on iOS */
  background: #fff;
  transition: border-color 0.2s;
}
.compact-input:focus { border-color: var(--accent); outline: none; }
.compact-input[readonly] { background: #f2f2f2; color: #555; }

/* Media row inside card */
.compact-media-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-top: 8px;
  border-top: 1px dashed #eee;
  margin-top: 8px;
}

/* --- MOBILE FIX: Force single column on phones --- */
@media (max-width: 600px) {
  .compact-grid {
    grid-template-columns: 1fr; /* Force 1 column stack */
  }
  .card-editor-wrapper {
    padding: 10px;
  }
  .compact-input {
    font-size: 16px; /* 16px prevents auto-zoom on iPhone input focus */
  }
}

/* Bottoni Lead Generation */
.actions-row {
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px solid #eee;
  display: flex;
  gap: 8px;
}

.btn-whatsapp {
  flex: 1;
  background-color: #25D366;
  border: 1px solid #25D366;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-weight: 700;
  text-decoration: none;
  font-size: 13px;
  border-radius: 8px;
  padding: 8px;
  cursor: pointer;
  transition: background 0.2s;
}
.btn-whatsapp:hover {
  background-color: #128C7E;
}

.btn-email {
  width: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f0f0f0;
  border: 1px solid #ddd;
  border-radius: 8px;
  color: #555;
  cursor: pointer;
  text-decoration: none;
}
.btn-email:hover {
  background: #e0e0e0;
}

/* Stile per il Logo Testuale */
.text-logo {
  color: #fff;
  font-weight: 900;
  font-size: 22px;
  letter-spacing: -0.5px;
  margin-right: 15px;
  white-space: nowrap;
  display: none; /* Gestito da JS */
}

/* Stile per l'editor foto nel pannello admin */
.photo-upload-btn {
  width: 100%;
  padding: 10px;
  margin-top: 5px;
  background: #eef2ff;
  color: var(--accent);
  border: 1px dashed var(--accent);
  border-radius: 8px;
  cursor: pointer;
  font-weight: 600;
}
.photo-upload-btn:hover {
  background: #e0e7ff;
}

/* Badge Dinamiche (Stato Prodotto) */
.dynamic-badge {
  position: absolute;
  top: 10px; left: 10px;
  background-color: var(--badge-bg);
  color: #fff;
  padding: 6px 10px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  box-shadow: 0 4px 10px rgba(0,0,0,0.2);
  z-index: 2;
  transition: all 0.3s ease;
}

/* SU MOBILE: Diventa solo un pallino colorato */
@media (max-width: 480px) {
  .dynamic-badge {
    font-size: 0 !important; /* Nasconde il testo */
    padding: 0;
    width: 14px;
    height: 14px;
    border-radius: 50%; /* Diventa cerchio */
    border: 2px solid #fff; /* Bordo bianco per risaltare */
  }
}

/* Tab Panels */
.tab-panels { margin-top: 14px; }
.tab-panel { display: none; }
.tab-panel.active { display: block; }

/* Mobile Tab Nav */
@media (max-width: 768px){
  .tab-nav {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    justify-content: flex-start;
    /* Negative margins to pull out of parent padding */
    margin: 0 -14px;
    padding: 5px 14px;
    width: calc(100% + 28px);
    scrollbar-width: none; /* Firefox */
  }
  .tab-nav::-webkit-scrollbar { display: none; } /* Chrome/Safari */
  .tab-btn { flex: 0 0 auto; margin-right: 8px; }
}

/* Stile per l'editor delle etichette nell'Admin */
.label-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
  padding: 8px;
  background: #fff;
  border: 1px solid #eee;
  border-radius: 6px;
}

/* --- CONFIGURATION CARD LAYOUT --- */
.config-container {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}

.cfg-preset-box {
  background: #eef2ff;
  border: 1px solid #d0d7de;
  border-radius: 12px;
  padding: 15px;
  margin-bottom: 20px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.cfg-card {
  background: #fff;
  border: 1px solid #d0d0d0;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  margin-bottom: 15px;
  overflow: hidden;
}

.cfg-card summary {
  padding: 15px 20px;
  font-weight: bold;
  cursor: pointer;
  background: #f8f9fa;
  border-bottom: 1px solid #e9ecef;
  position: relative;
  list-style: none;
}

.cfg-card summary::-webkit-details-marker {
  display: none;
}

.cfg-card summary::after {
  content: '+';
  position: absolute;
  right: 20px;
  font-size: 18px;
  font-weight: bold;
  color: #6c757d;
  transition: transform 0.3s;
}

.cfg-card[open] summary::after {
  content: '-';
}

.cfg-card .editor {
  padding: 20px;
}

.cfg-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px;
  margin-bottom: 15px;
}

.cfg-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 15px;
  margin-bottom: 15px;
}

@media (max-width: 768px) {
  .cfg-grid-2,
  .cfg-grid-3 {
    grid-template-columns: 1fr;
  }
}

/* --- TAB NAVIGATION STYLES --- */
.tab-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-bottom: 20px;
  padding: 10px;
  background: var(--soft);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.tab-btn {
  background: #fff;
  border: 1px solid var(--border);
  color: var(--text);
  padding: 12px 24px;
  border-radius: 12px;
  cursor: pointer;
  font-weight: 600;
  font-size: 14px;
  transition: all 0.3s ease;
  min-width: 120px;
  text-align: center;
}

.tab-btn:hover {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}

.tab-btn.active {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

/* --- NUOVI LAYOUT --- */

/* 1. GRIGLIA LARGE (Gallery Mode) */
.grid.layout-large {
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
}

/* 2. LIST VIEW (Modalità Riga/Magazzino) */
.grid.layout-list {
  grid-template-columns: 1fr; /* Una sola colonna */
}

.grid.layout-list .card {
  flex-direction: row; /* Foto a sx, testo a dx */
  height: auto;
  min-height: 120px;
  align-items: center;
}

.grid.layout-list .imgwrap {
  width: 100px;
  height: 100%;
  min-height: 120px;
  border-bottom: none;
  border-right: 1px solid var(--border);
  flex-shrink: 0;
}

.grid.layout-list .content {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
}

.grid.layout-list .title { margin-bottom: 0; flex: 1; min-width: 200px; }
.grid.layout-list .description { display: none; } /* Nascondi descrizione lunga in lista */
.grid.layout-list .prices { flex-direction: column; align-items: flex-end; gap: 0; }
.grid.layout-list .actions-row { margin-top: 0; border-top: none; width: auto; }
.grid.layout-list .btn { height: 36px; padding: 0 15px; font-size: 13px; }

/* Adattamento mobile per la lista */
@media (max-width: 600px) {
  .grid.layout-list .card { flex-direction: column; align-items: stretch; }
  .grid.layout-list .imgwrap { width: 100%; height: 160px; border-right: none; border-bottom: 1px solid var(--border); }
  .grid.layout-list .content { flex-direction: column; align-items: stretch; }
  .grid.layout-list .prices { align-items: flex-start; flex-direction: row; }
}

/* 3. STILE MINIMAL (No bordi) */
.card.style-minimal {
  border: none;
  box-shadow: none;
  background: transparent;
}
.card.style-minimal .imgwrap {
  background: transparent;
  border: none;
  border-radius: var(--radius);
}
.card.style-minimal .content {
  padding-left: 0;
  padding-right: 0;
}

/* CARRELLO STYLES */
.btn.cart-add {
  background: var(--cart-btn, var(--accent));
  border: 1px solid var(--cart-btn, var(--accent));
  color: white;
  padding: 8px 12px;
  font-size: 13px;
  font-weight: 600;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s;
  margin-top: 8px;
  width: 100%;
}
.btn.cart-add:hover {
  filter: brightness(0.85);
}

.cart-item {
  display: flex;
  gap: 10px;
  align-items: center;
  border-bottom: 1px solid #eee;
  padding: 10px 0;
}
.cart-item:last-child {
  border-bottom: none;
}
.cart-item img {
  width: 50px;
  height: 50px;
  object-fit: cover;
  border-radius: 6px;
}
.cart-item .details {
  flex: 1;
}
.cart-item .name {
  font-weight: 600;
  font-size: 14px;
  margin-bottom: 2px;
}
.cart-item .code {
  font-size: 12px;
  color: #666;
}
.cart-item .remove-btn {
  background: none;
  border: none;
  color: #999;
  font-size: 18px;
  cursor: pointer;
  padding: 4px;
  border-radius: 4px;
}
.cart-item .remove-btn:hover {
  background: #f0f0f0;
  color: #666;
}

/* FIX COLOR INPUTS */
input[type="color"].input {
  padding: 4px; /* Small frame */
  height: 45px; /* Taller for visibility */
  min-width: 60px;
  cursor: pointer;
  background: #fff;
  vertical-align: middle;
}

/* Chrome/Safari/Edge internal styling */
input[type="color"]::-webkit-color-swatch-wrapper {
  padding: 0;
}
input[type="color"]::-webkit-color-swatch {
  border: 1px solid rgba(0,0,0,0.1);
  border-radius: 8px; /* Inner radius */
}

/* Firefox internal styling */
input[type="color"]::-moz-color-swatch {
  border: 1px solid rgba(0,0,0,0.1);
  border-radius: 8px;
}

/* --- STEPPER QUANTITÀ --- */
.qty-stepper {
  display: flex;
  align-items: center;
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  height: 40px;
  width: 120px; /* Larghezza fissa per stabilità */
}
.stepper-btn {
  background: #f9f9f9;
  border: none;
  width: 35px;
  height: 100%;
  font-size: 18px;
  font-weight: bold;
  color: var(--accent);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.stepper-btn:hover { background: #eee; }
.stepper-btn:active { background: #ddd; }
.stepper-input {
  flex: 1;
  border: none;
  text-align: center;
  font-size: 15px;
  font-weight: 600;
  width: 100%;
  height: 100%;
  appearance: none; -moz-appearance: textfield;
}
.stepper-input::-webkit-outer-spin-button,
.stepper-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* Indicatore quantità nel carrello */
.cart-qty-badge {
  background: var(--soft);
  color: var(--text);
  border: 1px solid var(--border);
  font-weight: 800;
  font-size: 12px;
  padding: 4px 8px;
  border-radius: 6px;
  margin-right: 8px;
  min-width: 30px;
  text-align: center;
}

/* --- STILI SCHEDA DETTAGLIO --- */
.product-detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 450px;
}
.product-detail-img {
  position: relative;
  background: #f4f4f4;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.product-detail-img img {
  width: 100%;
  height: 100%;
  max-height: 400px;
  object-fit: contain;
  mix-blend-mode: multiply;
}
.product-detail-info {
  padding: 30px;
  display: flex;
  flex-direction: column;
  background: #fff;
}
@media (max-width: 768px) {
  .product-detail-grid { grid-template-columns: 1fr; }
  .product-detail-img { height: 300px; }
  .product-detail-info { padding: 20px; }
}

.badge-notify {
    background: #e74c3c;
    color: white;
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 10px;
    margin-left: 5px;
    font-weight: bold;
    vertical-align: middle;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

/* Evidenzia la tab quando ci sono richieste in sospeso */
.tab-btn:has(#reqBadge:not([style*="display: none"])) {
    border-bottom: 3px solid #e74c3c;
}

/* --- EMOJI PICKER SYSTEM --- */
.emoji-trigger-btn {
  background: transparent; border: 1px solid var(--border);
  cursor: pointer; font-size: 18px; padding: 0 10px;
  border-radius: 8px; transition: transform 0.1s;
  margin-left: 5px; height: 40px; display: inline-flex; align-items: center; justify-content: center;
}
.emoji-trigger-btn:hover { background: var(--soft); transform: scale(1.1); }

.emoji-modal-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 10000;
  display: flex; align-items: center; justify-content: center;
  backdrop-filter: blur(2px); animation: fadeIn 0.2s;
}

.emoji-picker-box {
  background: #fff; width: 90%; max-width: 380px;
  border-radius: 16px; box-shadow: 0 10px 40px rgba(0,0,0,0.2);
  display: flex; flex-direction: column; overflow: hidden;
  max-height: 60vh; animation: popIn 0.2s;
}

.emoji-header {
  padding: 12px 16px; background: var(--soft); border-bottom: 1px solid var(--border);
  display: flex; justify-content: space-between; align-items: center; font-weight: bold; font-size: 14px;
}

.emoji-grid {
  padding: 12px; overflow-y: auto; display: grid;
  grid-template-columns: repeat(auto-fill, minmax(36px, 1fr)); gap: 8px;
}

.emoji-item {
  font-size: 22px; cursor: pointer; text-align: center;
  padding: 6px; border-radius: 6px; transition: background 0.1s;
}
.emoji-item:hover { background: #f0f0f0; transform: scale(1.2); }

/* Helper per affiancare input e bottone */
.input-group { display: flex; align-items: center; width: 100%; }
.input-group .input { flex: 1; }

/* FIX CRITICO: Assicura che l'attributo hidden nasconda il flex container */
.emoji-modal-overlay[hidden] {
  display: none !important;
}

/* --- FILTRO DINAMICO CHIPS --- */
.filter-chip {
  background: #f0f0f0;
  color: #333;
  border: none;
  border-radius: 20px;
  padding: 8px 16px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
  display: flex;
  align-items: center;
  justify-content: center;
}

.filter-chip:hover {
  background: #e0e0e0;
}

.filter-chip.active {
  background: var(--accent);
  color: #fff;
}

.filter-chip:active {
  transform: scale(0.95);
}

/* Scroll orizzontale per i filtri */
.filter-bar {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE/Edge */
}

.filter-bar::-webkit-scrollbar {
  display: none; /* Chrome/Safari */
}