/* ============================================================
   SOF Front-end CSS v1.9.0
   Aggiunge:
    - .sof-notify-container / .sof-notify (sistema notifiche)
    - .sof-loading / skeleton loader
    - .sof-row-actions (azioni riga carrello)
    - miglioramenti responsive per mobile/app-ready
   ============================================================ */

/* --- Notify ------------------------------------------------- */
.sof-notify-container {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 99999;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
}

.sof-notify {
  padding: 12px 20px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  color: #fff;
  max-width: 340px;
  box-shadow: 0 4px 16px rgba(0,0,0,.18);
  opacity: 0;
  transform: translateX(40px);
  transition: opacity .3s ease, transform .3s ease;
  pointer-events: auto;
  word-break: break-word;
}
.sof-notify.is-visible {
  opacity: 1;
  transform: translateX(0);
}
.sof-notify--success { background: #2e7d32; }
.sof-notify--error   { background: #c62828; }
.sof-notify--info    { background: #1565c0; }
.sof-notify--warning { background: #e65100; }

/* --- Skeleton loader ---------------------------------------- */
.sof-card-front.sof-loading {
  position: relative;
  pointer-events: none;
}
.sof-card-front.sof-loading::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: rgba(255,255,255,.65);
  z-index: 10;
  animation: sof-pulse 1.2s ease-in-out infinite;
}
@keyframes sof-pulse {
  0%, 100% { opacity: .6; }
  50%       { opacity: 1; }
}

/* --- Azioni riga carrello ----------------------------------- */
.sof-row-actions {
  white-space: nowrap;
}
.sof-row-actions .sof-link-btn {
  margin-right: 6px;
  font-size: 12px;
}

/* --- Qty edit inline --------------------------------------- */
.sof-qty-edit {
  width: 72px;
  padding: 4px 8px;
  border: 1px solid #ccc;
  border-radius: 6px;
  font-size: 14px;
  text-align: right;
}

/* --- Merge button ------------------------------------------ */
#sof-btn-merge {
  margin-top: 12px;
  font-size: 13px;
}

/* --- Mobile responsive ------------------------------------- */
@media (max-width: 600px) {
  .sof-prodotti-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .sof-checkout-grid { grid-template-columns: 1fr; }
  .sof-notify-container { right: 8px; left: 8px; }
  .sof-notify { max-width: 100%; }
  .sof-tabella-front { font-size: 13px; }
  .sof-qty-edit { width: 56px; }
}