/* ===============================
   CIEMME — Palette unificata + alias
   =============================== */
:root{
  /* Canonici */
  --ciemme-red:#B11B19;
  --ciemme-bronze:#785F38;
  --ciemme-brown:#38220F;
  --ciemme-beige:#ECE0D1;
  --ciemme-white:#FFFFFF;

  /* Derivati */
  --ciemme-brown-2:#2c190b;
  --ciemme-beige-muted:#e1d5c7;
  --ciemme-bronze-light:#bfa273;
  --ciemme-muted:#6c757d;

  /* Tema blu (9+1 originale) */
  --c9-bg1:#143a66;
  --c9-bg2:#0d2b4c;
  --c9-bg3:#0a2340;
  --c9-light:#eaf3ff;
  --c9-muted:#9ec1ff;
  --c9-green:#2aa86b;

  /* Alias (retrocompatibilità) */
  --brand-red: var(--ciemme-red);
  --brand-cream: var(--ciemme-beige);
  --brand-dark: var(--ciemme-brown);
  --muted: var(--ciemme-muted);
  --accent-gold: var(--ciemme-bronze-light);
}

/* ===============================
   Base layout (uniformato)
   =============================== */
body{background: var(--ciemme-beige); color: var(--ciemme-brown);}
.navbar{ background: var(--ciemme-brown); }
.navbar .nav-link, .navbar-brand{ color:#fff !important; }
.card{ border-radius:1rem; box-shadow:0 8px 24px rgba(0,0,0,.08); }
.btn-ciemme{ background: var(--ciemme-red); color:#fff; border:none; }
.btn-ciemme:hover{ filter: brightness(0.95); }
.badge-ciemme{ background: var(--ciemme-bronze); }
.brand-gradient{ background: linear-gradient(135deg,var(--ciemme-brown),var(--ciemme-bronze)); color:#fff; }
/* ===============================
   HScroll + Coupon cards (uniformati)
   =============================== */
.hscroll-wrap{ position:relative; }
.hscroll{ display:flex; gap:12px; overflow-x:auto; padding:6px 2px 10px; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; }
.hscroll::-webkit-scrollbar{ height:8px; }
.hscroll::-webkit-scrollbar-thumb{ background:#ddd; border-radius:8px; }

.scroll-hint{ position:absolute; right:8px; top:-2px; font-size:.9rem; color:#888; display:none; user-select:none; }
.scroll-hint.show{ display:inline-flex; align-items:center; gap:.25rem; }
.scroll-hint .bi{ font-size:1rem; }

.coupon-card{ min-width:260px; max-width:320px; border:1px solid #eee; border-radius:16px; padding:14px; background:#fff; box-shadow:0 6px 20px rgba(0,0,0,.06); scroll-snap-align:start; display:flex; flex-direction:column; }
.coupon-title{ font-weight:800; color:var(--ciemme-red); letter-spacing:.3px; }
.coupon-type-code{ font-size:.8rem; color:#666; }
.coupon-desc{ margin-top:2px; color:#444; font-size:.85rem; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.badge-row{ margin-top:.35rem; display:flex; gap:.5rem; align-items:center; flex-wrap:wrap; }
.qr-box{ width:180px; height:180px; margin:auto; display:flex; align-items:center; justify-content:center; }
.qr-box canvas, .qr-box img{ width:100% !important; height:100% !important; }
.qr-placeholder{ width:160px; height:160px; margin:auto; display:flex; align-items:center; justify-content:center; }
.qr-placeholder img{ max-width:100%; max-height:100%; opacity:.9; }

.qr-slot[data-active="0"]{ display:none; }
.qr-placeholder[data-active="1"]{ display:none; }

.card-footer{ margin-top:auto; padding-top:10px; border-top:1px solid #eee; display:flex; justify-content:flex-start; align-items:center; gap:.5rem; }

.coupon-card.pending{ background:linear-gradient(180deg, #fff9e8, #ffffff); border-color:#ffd88a; }
.coupon-card.pending .coupon-title{ color:#a86500; }
.coupon-card.pending .coupon-desc{ color:#6b4b00; }

.muted{ color:var(--ciemme-muted); }
.coupon-code{ font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; word-break:break-all; }

@media (max-width:768px){
  .coupon-card{ min-width:100%; max-width:100%; }
  .qr-box, .qr-placeholder{ width:220px; height:220px; }
  .scroll-hint{ display:inline-flex; }
}

/* ===============================
   Tessera cliente (membercard)
   =============================== */
.membercard{
  position:relative; border-radius:18px; overflow:hidden;
  aspect-ratio: 7 / 4;
  background: var(--ciemme-red) url('/assets/img/lovers-card-bg.png') center/cover no-repeat;
  box-shadow:0 14px 28px rgba(0,0,0,.25); color:#fff;
}
.membercard .overlay-dark{ position:absolute; inset:0; background:linear-gradient(180deg,rgba(0,0,0,.0),rgba(0,0,0,.4)); }
.membercard .content{ position:relative; z-index:2; width:100%; height:100%; padding:16px; }
.membercard .qr-group{ position:absolute; top:10px; right:10px; }
.membercard .qr-wrap{ background:rgba(255,255,255,.95); border-radius:12px; padding:10px; box-shadow:0 8px 24px rgba(0,0,0,.35); }
.membercard .qr-wrap .qr-box{ width:120px; height:120px; display:flex; align-items:center; justify-content:center; }
.membercard .qr-wrap .qr-box canvas, 
.membercard .qr-wrap .qr-box img{ width:100% !important; height:100% !important; }
.membercard .member-info{ position:absolute; left:50%; bottom:16px; transform:translateX(-50%); text-align:center; width:calc(100% - 32px); }
.membercard .member-info .name{ font-weight:900; font-size:1.05rem; }

/* Stato disattivata (mantiene QR nitido) */
.membercard.disabled .content, 
.membercard.disabled .member-info,
.membercard.disabled .overlay-dark{
  filter: grayscale(1) brightness(.92);
}
.membercard.disabled .qr-wrap{ filter:none; }
.membercard .disabled-note{
  position:absolute; left:16px; bottom:16px; right:16px;
  background:rgba(0,0,0,.55); color:#fff; border-radius:12px; padding:10px;
  font-size:.92rem; line-height:1.2;
}

/* ===============================
   Tessera 9+1 — VARIABILI COMUNI
   =============================== */
:root{
  --slot-size: clamp(36px, 7.5vw, 50px);
  --slot-gap: 14px;
  --slot-icon: 1.25rem;
  --slot-icon-filled: 1.35rem;
}

/* Animazioni comuni (unica definizione) */
@keyframes pop { 0%{transform:scale(1);} 40%{transform:scale(1.25);} 60%{transform:scale(.95);} 100%{transform:scale(1);} }
@keyframes pop-strong { 0%{transform:scale(1);} 25%{transform:scale(1.4);} 60%{transform:scale(.85);} 100%{transform:scale(1);} }
@keyframes reward-glow { 0%{box-shadow:0 0 0 rgba(70,255,160,0);} 50%{box-shadow:0 0 25px rgba(70,255,160,.6);} 100%{box-shadow:0 0 0 rgba(70,255,160,0);} }

.anim-pop{ animation: pop .4s ease-out both; }
.anim-pop-strong{ animation: pop-strong .5s ease-out both; }
.anim-reward{ animation: reward-glow 1.4s ease-in-out 0s 3; }

/* Ripple + confetti (unica definizione) */
.carnet-slot { position: relative; overflow: visible; }
.carnet-slot .ripple{
  position:absolute; left:50%; top:50%; width:8px; height:8px; border-radius:999px;
  transform:translate(-50%,-50%); border:2px solid currentColor; opacity:.5;
  animation: rippleOut 500ms ease-out forwards; pointer-events:none;
}
@keyframes rippleOut { from{opacity:.6; transform:translate(-50%,-50%) scale(.4);} to{opacity:0; transform:translate(-50%,-50%) scale(3.5);} }
.confetti{
  position:absolute; width:6px; height:6px; border-radius:1px; opacity:.9;
  animation: confettiFall 700ms ease-out forwards; pointer-events:none;
}
@keyframes confettiFall{
  0%{ transform:translate(0,0) rotate(0deg); opacity:1; }
  80%{ transform:translate(var(--dx,12px), var(--dy,-28px)) rotate(180deg); opacity:.9; }
  100%{ transform:translate(calc(var(--dx,12px)*1.2), calc(var(--dy,-28px)*1.3)) rotate(260deg); opacity:0; }
}

/* =========================================================
   TEMA BLU ORIGINALE (scoped su .loyalty-card per evitare overlap)
   ========================================================= */
.loyalty-card{
  background: radial-gradient(120% 120% at 100% 0%, var(--c9-bg1) 0%, var(--c9-bg2) 55%, var(--c9-bg3) 100%);
  border-radius:18px; padding:20px 18px; color:var(--c9-light);
  box-shadow:0 12px 30px rgba(0,0,0,.25); position:relative; overflow:hidden;
}
.loyalty-card::after{
  content:""; position:absolute; inset:0; border-radius:18px;
  border:1px solid rgba(255,255,255,.08); pointer-events:none;
}
.loyalty-card .title{ font-weight:800; letter-spacing:.5px; font-size:1.2rem; color:var(--c9-light); }
.loyalty-card .subtitle{ color:var(--c9-muted); font-size:.85rem; }

#lcGrid{ display:grid; grid-template-columns:repeat(5,1fr); gap:var(--slot-gap); margin-top:14px; justify-items:center; }
@media (max-width:768px){ #lcGrid{ gap:10px; } }

.loyalty-card .carnet-slot{
  width:var(--slot-size); height:var(--slot-size); aspect-ratio:auto;
  border-radius:999px; display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.08); border:2px solid rgba(255,255,255,.20);
  box-shadow:inset 0 2px 6px rgba(0,0,0,.25); transition:all .25s ease;
  color:#c7dbff;
}
.loyalty-card .carnet-slot i{ font-size:var(--slot-icon); opacity:.85; }

/* Timbri progressivi (solo tema blu) */
.loyalty-card .carnet-slot.filled[data-step="1"],
.loyalty-card .carnet-slot.filled[data-step="2"],
.loyalty-card .carnet-slot.filled[data-step="3"]{
  background:#B89265; border-color:#CFAB7C; box-shadow: inset 0 2px 4px rgba(0,0,0,.25), 0 0 8px rgba(185,146,101,.35);
}
.loyalty-card .carnet-slot.filled[data-step="4"],
.loyalty-card .carnet-slot.filled[data-step="5"],
.loyalty-card .carnet-slot.filled[data-step="6"]{
  background:#8B6A3C; border-color:#A8814E; box-shadow: inset 0 2px 4px rgba(0,0,0,.25), 0 0 8px rgba(139,106,60,.4);
}
.loyalty-card .carnet-slot.filled[data-step="7"],
.loyalty-card .carnet-slot.filled[data-step="8"],
.loyalty-card .carnet-slot.filled[data-step="9"]{
  background:#785F38; border-color:#A38456; box-shadow: inset 0 2px 4px rgba(0,0,0,.25), 0 0 8px rgba(163,132,86,.4);
}
.loyalty-card .carnet-slot.filled i{ color:#fffaf3; opacity:1; }

.loyalty-card .carnet-slot.ready{
  background: linear-gradient(145deg, #D9B26E 0%, #C6974A 100%);
  border-color:#FFDFA3; box-shadow:0 0 18px rgba(255,215,130,.55);
}
.loyalty-card .carnet-slot.ready i{ color:#fff; }

.loyalty-card.disabled{ filter:grayscale(1) brightness(.9); opacity:.8; pointer-events:none; }
.loyalty-card.disabled .carnet-slot i{ opacity:.6; }

/* =========================================================
   TEMA CIEMME (marrone/bronzo/rosso) — scoped su .carnet-card
   ========================================================= */
.carnet-wrap{ margin-bottom:1.25rem; }
.carnet-title{ font-weight:700; font-size:1.25rem; color:var(--ciemme-brown); }
.carnet-sub{ color:var(--ciemme-muted); margin-top:-2px; }

.carnet-card{
  position:relative; border-radius:14px; padding:18px; overflow:hidden; transition:all .25s ease;
  color:var(--ciemme-beige);
  background: radial-gradient(120% 120% at 100% 0%, var(--ciemme-brown) 0%, var(--ciemme-brown-2) 55%, #1f1208 100%);
  box-shadow:0 10px 30px rgba(0,0,0,.22);
}
.carnet-card::after{
  content:""; position:absolute; inset:0; border-radius:14px; border:1px solid rgba(255,255,255,.06); pointer-events:none;
}
.carnet-card::before {
  content: "";
  position: absolute;
  right: 14px;
  bottom: 10px;
  width: 120px;
  height: 60px;
  background: url('/assets/img/logo-ciemme-light.png') no-repeat right bottom / contain;
  opacity: 0.55;
  filter: invert(90%) sepia(8%) saturate(200%) hue-rotate(6deg) brightness(105%) contrast(92%);
  pointer-events: none;
  z-index: 1;
}

/* Brand in alto a destra + riserva spazio titoli */
.carnet-card .brand{ position:absolute; top:12px; right:14px; color:var(--ciemme-bronze); opacity:.9; font-weight:800; letter-spacing:.5px; z-index:2; }
.carnet-head, .carnet-bar, .carnet-addr{ position:relative; z-index:2; }
.carnet-head{ font-size:.78rem; color:var(--ciemme-bronze); letter-spacing:.4px; text-transform:uppercase; }
.carnet-bar{ font-weight:800; color:var(--ciemme-beige); }
.carnet-addr{ color:var(--ciemme-beige-muted); font-size:.9rem; margin-top:-2px; }

.carnet-grid{ display:grid; grid-template-columns:repeat(5,1fr); gap:var(--slot-gap); padding:10px 0 2px; position:relative; z-index:2; justify-items:center; }

.carnet-card .carnet-slot{
  width:var(--slot-size); height:var(--slot-size); aspect-ratio:auto;
  border-radius:999px; display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,.08); border:2px solid rgba(255,255,255,.15);
  box-shadow:inset 0 2px 6px rgba(0,0,0,.2), 0 3px 10px rgba(0,0,0,.12);
  transition:transform .25s ease, background .25s ease, border-color .25s ease;
  color:#c7bca7;
}
.carnet-card .carnet-slot i{ font-size:var(--slot-icon); opacity:.9; }

/* Stati Ciemme */
.carnet-card .carnet-slot.filled{ background:var(--ciemme-bronze); border-color:var(--ciemme-bronze-light); color:#fff; }
.carnet-card .carnet-slot.ready{ background:var(--ciemme-red); border-color:#e7b5a0; box-shadow:0 0 18px rgba(177,27,25,.45); color:#fff; }

/* Variante "tick" (solo bordo/icone) */
.carnet-card .carnet-slot.tick{ background:transparent; border-color:var(--ciemme-bronze); color:var(--ciemme-bronze); }
.carnet-card .carnet-slot.tick i{ font-size:calc(var(--slot-icon) + .05rem); }

/* Stato card inattiva */
.carnet-card.inactive{ filter:grayscale(.55) brightness(.9); opacity:.9; }
.carnet-card.inactive .carnet-slot{ border-color:rgba(255,255,255,.08); background:rgba(255,255,255,.05); color:#b6a68d; }
.carnet-card.inactive .brand{ color:#9a8462; opacity:.65; }
.carnet-card.inactive .carnet-link{ color:#9a8462; }

/* Footer/link */
.carnet-footer{ margin-top:8px; position:relative; z-index:2; }
.carnet-link{ color:var(--ciemme-bronze); text-decoration:underline; }
.carnet-link:hover{ color:var(--ciemme-beige); text-decoration:underline; }

/* ===== PATCH 9+1 — dimensioni slot + icone + brand + contrasto timbri ===== */

/* 1) Cerchi più grandi (valori fluidi) + icone più grandi */
:root{
  --slot-size: clamp(44px, 9vw, 58px);  /* prima più piccolo */
  --slot-gap: 14px;
  --slot-icon: 1.45rem;                 /* icona “tazzina” */
  --slot-icon-filled: 1.75rem;          /* icona quando pieno/ready */
}

/* 2) Logo in alto a destra (tema Ciemme) + spazio riservato ai titoli */
.carnet-card{ position: relative; }
.carnet-card .brand{
  position: absolute; top: 12px; right: 14px; z-index: 2;
  display: inline-flex; align-items: center; gap: 8px;
}
.carnet-card .brand img{ height: 22px; display:block; filter: brightness(0) invert(1); }

/* 3) Applica le nuove dimensioni agli slot dei due temi */
.loyalty-card .carnet-slot,
.carnet-card .carnet-slot{
  width: var(--slot-size);
  height: var(--slot-size);
  aspect-ratio: auto; /* usiamo width/height espliciti */
}
.loyalty-card .carnet-slot i,
.carnet-card .carnet-slot i{
  font-size: var(--slot-icon);
  opacity: .95;
  transform: translateY(1px); /* centratura ottica */
}
.loyalty-card .carnet-slot.filled i,
.loyalty-card .carnet-slot.ready i,
.carnet-card .carnet-slot.filled i,
.carnet-card .carnet-slot.ready i{
  font-size: var(--slot-icon-filled);
}

/* 4) TIMBRI PIÙ IN CHIARO (contrasto alto su sfondo scuro)
   — TEMA BLU ------------------------------------------------ */
.loyalty-card .carnet-slot.filled{
  background: rgba(255,255,255,.92);
  border-color: rgba(255,255,255,.98);
  color: #0d2b4c;                 /* icona scura per contrasto */
  box-shadow: inset 0 2px 4px rgba(0,0,0,.2), 0 0 8px rgba(255,255,255,.25);
}
.loyalty-card .carnet-slot.ready{
  background: linear-gradient(145deg, #fff6cc 0%, #ffe9a6 100%);
  border-color: #fff2bf;
  color: #0a2340;
  box-shadow: 0 0 18px rgba(255, 235, 160, .55);
}

/* 4) TIMBRI PIÙ IN CHIARO
   — TEMA CIEMME (marrone/bronzo/rosso) ---------------------- */
.carnet-card .carnet-slot.filled{
  background: #f2e7d6;           /* chiaro/beige per contrasto sul marrone */
  border-color: #fff3e0;
  color: var(--ciemme-brown);     /* icona scura leggibile */
  box-shadow: inset 0 2px 4px rgba(0,0,0,.2), 0 0 8px rgba(255,255,255,.18);
}
.carnet-card .carnet-slot.ready{
  background: #ffe9e5;           /* chiaro con accento rosso */
  border-color: #ffcec3;
  color: var(--ciemme-red);       /* icona rossa che richiama il brand */
  box-shadow: 0 0 18px rgba(177,27,25,.35);
}

/* Variante “tick” (solo bordo/icone) — lasciamo più presente l’icona */
.carnet-card .carnet-slot.tick{
  background: #fbf7f1;
  border-color: var(--ciemme-bronze);
  color: var(--ciemme-bronze);
}

/* ===== PATCH 9+1 — ultimo caffè + logo più grande + slot più vicini ===== */

/* 1) Slot più vicini */
:root{
  --slot-gap: 10px; /* prima 14px */
}
.carnet-grid,
#lcGrid{
  gap: var(--slot-gap);
}

/* 2) Logo più grande in alto a destra (card Ciemme) */
.carnet-card .brand img{
  height: 70px;              /* prima ~22px */
}

/* 3) Evidenzia l’ultimo caffè (classe .is-last o data-last="1") */
/* --- Tema Ciemme (marrone/bronzo/rosso) --- */
.carnet-card .carnet-slot.filled.is-last,
.carnet-card .carnet-slot.filled[data-last="1"]{
  background: #fff5e9;                        /* più chiaro per contrasto */
  border-color: var(--ciemme-bronze-light);
  color: var(--ciemme-red);
  box-shadow:
    0 0 0 3px rgba(198, 151, 74, .25),        /* anello bronzo soft */
    0 0 22px rgba(177, 27, 25, .35);          /* glow rosso brand */
  transform: translateZ(0);                   /* hint rendering */
}
.carnet-card .carnet-slot.ready.is-last,
.carnet-card .carnet-slot.ready[data-last="1"]{
  background: #ffe3dd;
  border-color: #ffc8bb;
  color: var(--ciemme-red);
  box-shadow:
    0 0 0 3px rgba(177, 27, 25, .25),
    0 0 26px rgba(177, 27, 25, .45);
}

/* (facoltativo) micro-boost visivo all’icona dell’ultimo caffè */
.carnet-slot.is-last i,
.carnet-slot[data-last="1"] i{
  transform: translateY(1px) scale(1.08);
  opacity: 1;
}

/* ===== Patch 9+1: size + logo + gap + ultimo timbro ===== */

/* Cerchi (slot) e icone più grandi, distanza più stretta */
:root{
  --slot-size: clamp(44px, 9vw, 58px);
  --slot-gap: 10px;              /* prima 14px */
  --slot-icon: 1.45rem;          /* icone base */
  --slot-icon-filled: 1.75rem;   /* icone quando pieno/ready */
}

.carnet-grid,
#lcGrid{ gap: var(--slot-gap); }

.carnet-card .carnet-slot,
.loyalty-card .carnet-slot{
  width: var(--slot-size);
  height: var(--slot-size);
  aspect-ratio: auto; /* usiamo width/height espliciti */
}

.carnet-card .carnet-slot i,
.loyalty-card .carnet-slot i{
  font-size: var(--slot-icon);
  opacity: .95;
  transform: translateY(1px);
}
.carnet-card .carnet-slot.filled i,
.carnet-card .carnet-slot.ready i,
.loyalty-card .carnet-slot.filled i,
.loyalty-card .carnet-slot.ready i{
  font-size: var(--slot-icon-filled);
}

/* Evidenzia l’ultimo caffè — Tema Ciemme (marrone/bronzo/rosso) */
.carnet-card .carnet-slot.is-last{
  background: #fff5e9;
  border-color: var(--ciemme-bronze-light);
  color: var(--ciemme-red);
  box-shadow:
    0 0 0 3px rgba(198,151,74,.25),
    0 0 24px rgba(177,27,25,.38);
}
.carnet-card .carnet-slot.ready.is-last{
  background: #ffe3dd;
  border-color: #ffc8bb;
  color: var(--ciemme-red);
  box-shadow:
    0 0 0 3px rgba(177,27,25,.28),
    0 0 28px rgba(177,27,25,.45);
}

/* Evidenzia l’ultimo caffè — Tema Blu */
.loyalty-card .carnet-slot.is-last{
  background: #ffffff;
  border-color: #ffffff;
  color: #0d2b4c;
  box-shadow:
    0 0 0 3px rgba(234,243,255,.45),
    0 0 24px rgba(158,193,255,.45);
}
.loyalty-card .carnet-slot.ready.is-last{
  background: #fff6cc;
  border-color: #ffe9a6;
  color: #0a2340;
  box-shadow:
    0 0 0 3px rgba(255,240,180,.55),
    0 0 28px rgba(70,255,160,.45);
}

/* ==== Animazioni base (uniche) ==== */
@keyframes pop { 0%{transform:scale(1)} 40%{transform:scale(1.25)} 60%{transform:scale(.95)} 100%{transform:scale(1)} }
@keyframes reward-glow { 0%{box-shadow:0 0 0 rgba(70,255,160,0)} 50%{box-shadow:0 0 25px rgba(70,255,160,.6)} 100%{box-shadow:0 0 0 rgba(70,255,160,0)} }
.anim-pop{ animation: pop .45s ease-out both; }
.anim-reward{ animation: reward-glow 1.4s ease-in-out 0s 3 both; }

/* Effetti “ripple” + “confetti” sugli slot */
.carnet-slot{ position:relative; overflow:visible; }
.carnet-slot .ripple{
  position:absolute; left:50%; top:50%; width:8px; height:8px; border-radius:999px;
  transform:translate(-50%,-50%); border:2px solid currentColor; opacity:.5;
  animation: rippleOut 500ms ease-out forwards; pointer-events:none;
}
@keyframes rippleOut{ from{opacity:.6; transform:translate(-50%,-50%) scale(.4)} to{opacity:0; transform:translate(-50%,-50%) scale(3.5)} }
.confetti{
  position:absolute; width:6px; height:6px; border-radius:1px; opacity:.9;
  animation: confettiFall 700ms ease-out forwards; pointer-events:none;
}
@keyframes confettiFall{
  0%{ transform:translate(0,0) rotate(0deg); opacity:1 }
  80%{ transform:translate(var(--dx,12px), var(--dy,-28px)) rotate(180deg); opacity:.9 }
  100%{ transform:translate(calc(var(--dx,12px)*1.2), calc(var(--dy,-28px)*1.3)) rotate(260deg); opacity:0 }
}

/* === Dropdown notifiche centrato su mobile === */
@media (max-width: 576px) {
  #notifDropdown .dropdown-menu.drop-center {
    position: fixed !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    top: 60px !important;
    width: min(92vw, 400px) !important;
    margin: 0 !important;
    z-index: 2050 !important;
  }
}

/* ================================
   Notifiche – Stile Ciemme compatto
   (unificato e deduplicato)
   ================================ */
:root{
  --ciemme-red:   #B11B19;
  --ciemme-bronze:#785F38;
  --ciemme-brown: #38220F;
  --ciemme-beige: #ECE0D1;
  --ciemme-dark:  #2f2a28;
}

/* Dropdown container */
#notifDropdown .dropdown-menu{
  min-width: 320px;
  max-height: 64vh;
  padding: 0 !important;
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 10px;
  background: #fff !important;
  box-shadow: 0 6px 18px rgba(0,0,0,.15);
  background-clip: padding-box !important;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

/* Header rosso con testo bianco */
#notifDropdown .dropdown-menu > li:first-child{
  position: sticky; top: 0; z-index: 1;
  display: flex; justify-content: space-between; align-items: center;
  padding: .45rem .6rem !important;
  background: var(--ciemme-red) !important;
  color: #fff !important;
  border-bottom: 0 !important;
}
#notifDropdown .dropdown-menu > li:first-child .fw-semibold{
  font-weight: 700; font-size: .9rem;
}
#notifDropdown #notifMarkAll{
  padding: .25rem .5rem !important;
  font-size: .72rem !important;
  color: #fff !important;
  border: 1px solid #fff !important;
  background: transparent !important;
  line-height: 1.1;
}
#notifDropdown #notifMarkAll:hover{
  background: rgba(255,255,255,.15) !important;
}

/* Lista notifiche */
#notifList .notif-item{
  padding: .45rem .6rem !important;
  border-bottom: 1px solid rgba(0,0,0,.06);
  line-height: 1.2;
  background: #fff !important;
}
#notifList .notif-item:last-child{ border-bottom: 0; }
#notifList .notif-item:hover{ background: #f7f4f1; }

/* Stato non letto: beige + barra rossa */
#notifList .notif-item.unseen{
  background: var(--ciemme-beige) !important;
  box-shadow: inset 3px 0 0 var(--ciemme-red) !important;
}

/* Tipografia e link */
#notifList .title{ font-weight: 600; font-size: .88rem; color: var(--ciemme-dark); }
#notifList .body{ margin-top: .18rem; font-size: .78rem; color: var(--ciemme-dark); opacity: .9; }
#notifList small{ font-size: .68rem; color: #7a706b; }
#notifList a.small{ font-size: .75rem; color: var(--ciemme-red); text-decoration: none; }
#notifList a.small:hover{ color: var(--ciemme-bronze); text-decoration: underline; }

/* Riga con icona */
.notif-row{ display: flex; gap: .5rem; align-items: flex-start; }
.notif-ico{
  font-size: 13px;
  flex: 0 0 18px;
  height: 18px; line-height: 18px;
  margin-top: 2px;
  color: var(--ciemme-bronze);
}

/* Badge campanella */
#notifCount{
  transform: translate(-12%, -44%);
  font-size: .68rem;
  min-width: 1.15rem;
}

/* Barra strumenti (campanella / scanner / esci) */
#toolsBar{ gap: .5rem; }

/* Mobile: proporzioni compatte */
@media (max-width: 576px){
  #notifDropdown .dropdown-menu{
    width: min(90vw, 400px);
    max-height: min(74vh, 500px);
    margin-top: .4rem;
  }
  #notifList .notif-item{ padding: .42rem .55rem !important; }
  #notifList .title{ font-size: .86rem; }
  #notifList .body{ font-size: .76rem; }
  #notifList small{ font-size: .66rem; }
}

/* Mobile XS: bottoni più compatti nella top bar */
@media (max-width: 380px){
  #toolsBar .btn.btn-sm{ padding: .35rem .5rem; font-size: .82rem; }
}

/* Opzione: dropdown centrato su mobile (aggiungi .drop-center al menu) */
@media (max-width: 576px){
  #notifDropdown .dropdown-menu.drop-center{
    position: fixed !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    top: 60px !important;
    width: min(92vw, 400px) !important;
    margin: 0 !important;
    z-index: 2050 !important;
  }
}

/* Accessibilità: riduci motion se richiesto dall’utente */
@media (prefers-reduced-motion: reduce){
  #notifDropdown .dropdown-menu,
  #notifList .notif-item,
  #notifDropdown #notifMarkAll{ transition: none !important; }
}
/* Card contenitore tabella */
.table-card {
  border-radius: 1rem;
  box-shadow: 0 0 25px rgba(0,0,0,.06);
  background: #fff;
  padding: 1rem;
}

/* Wrapper e header sticky */
.table-wrap { max-height: 70vh; overflow: auto; border-radius: .75rem; }
.table thead th { position: sticky; top: 0; z-index: 2; background: #f8f9fa; }

/* Dimensioni tipiche colonne (tweak per pagina) */
.col-id{ width: 8ch; }
.col-name{ min-width: 260px; }
.col-city{ min-width: 160px; }
.col-email{ min-width: 260px; }
.col-actions{ min-width: 140px; text-align: right; }

/* Badge “pill” */
.badge-pill { border-radius: 999px; padding: .35rem .6rem; font-weight: 600; }
.badge-yes { background: #198754; color:#fff; }   /* Attivo / Sì */
.badge-no  { background: #6c757d; color:#fff; }   /* No */

/* ---- Palette base ---- */
:root{
  --beige:#ECE0D1; 
  --beige-2:#e4d9c9; 
  --bronze:#785F38; 
  --red:#B11B19; 
  --ok:#2aa86b;
}

/* =========================
   COUPON CARD (Disponibili + Utilizzati)
   ========================= */
.coupon-card[data-card="coupon"]{
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  gap:.35rem;
  border:1px solid rgba(0,0,0,.06);
  box-shadow:0 2px 6px rgba(0,0,0,.05);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  min-height: 520px; /* altezza media equilibrata; regola se serve */
  border-radius:.75rem;
  padding: .9rem 1rem;
  background:#fff;
}
.coupon-card[data-card="coupon"]:hover{
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0,0,0,.10);
  border-color: rgba(0,0,0,.10);
}

/* Titoli/descrizioni (desktop leggermente compatti) */
[data-card="coupon"] .coupon-title{ 
  font-size: 1.02rem; 
  font-weight: 700; 
  margin-bottom:.15rem; 
}
[data-card="coupon"] .coupon-desc{ 
  font-size: .93rem; 
  line-height:1.4; 
  margin-top:.10rem; 
}

/* Testi piccoli */
[data-card="coupon"] .small,
[data-card="coupon"] .muted{
  font-size: .88rem;
}

/* Badge uniformi */
[data-card="coupon"] .badge[data-badge]{
  font-size: .9rem;
  line-height: 1.1;
  font-weight: 600;
}

/* Riga badge */
.badge-row{ display:flex; flex-wrap:wrap; gap:.35rem; margin-top:.15rem; }
.badge-row .badge i{ margin-right:.4rem; }

/* Badge validità: look chiaro, multilinea, no overflow */
.badge[data-badge="validity"]{
  white-space: normal !important;
  line-height: 1.2;
  word-break: break-word;
  text-align: left;
  max-width: 100%;
  display: inline-block;
  padding: .35rem .6rem;
  background:#f1f3f5;
  color:#333;
}

/* Badge EXCLUSIVE: può andare a capo */
.badge-row [data-badge="exclusive"]{
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  white-space: normal;
  text-align: left;
  line-height: 1.3;
  word-break: break-word;
  min-height: 2.2em;
  padding: .35rem .5rem;
}
.badge-row [data-badge="exclusive"] i{
  flex-shrink: 0;
  margin-right: .4rem;
}

/* Pill “ESCLUSIVO” sulla card (solo desktop) */
.coupon-card.exclusive{ position: relative; }
.coupon-card.exclusive::before{
  content: "ESCLUSIVO";
  position: absolute; top: 8px; right: -6px;
  font-size: .62rem; font-weight: 800; letter-spacing: .03em;
  background: #0d6efd; color: #fff;
  padding: 2px 8px; border-radius: 999px;
  box-shadow: 0 2px 6px rgba(0,0,0,.12);
}
@media (max-width: 480px){
  .coupon-card.exclusive::before{ display:none; }
}

/* QR box e placeholder: sempre centrati */
.coupon-card .qr-box,
.coupon-card .qr-placeholder{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height: 130px;
  margin-top:.25rem;
}

/* Footer card: spinto in basso, look pulito */
[data-card="coupon"] .card-footer{
  background: transparent !important;
  border-top: none !important;
  padding: 0 !important;
  box-shadow: none !important;
  margin-top:auto !important;
}
[data-card="coupon"] .card-footer .btn{ margin-top:.25rem; }
[data-card="coupon"] .card-footer .small{ margin-top:.25rem; }

/* Riga distanza/extra info */
.coupon-card .distance-line{
  margin-top:.15rem;
  color:#6c757d !important;
}

/* Stato "pending" (non attivo) — solo resa visiva soft */
.coupon-card.pending{
  background: #fff;
  border-color: rgba(0,0,0,.05);
  opacity: 1;
}

/* === Sezione "Coupon utilizzati" compatta === */
#usedScroll .coupon-card{
  display:flex;
  flex-direction:column;
  gap:4px;
  overflow:hidden;
  min-height:100px;
  max-height:130px;
  padding:10px 14px;
  border-radius:10px;
}
#usedScroll .coupon-card .qr-slot,
#usedScroll .coupon-card .qr-placeholder,
#usedScroll .coupon-card [data-role="code"],
#usedScroll .coupon-card .card-footer,
#usedScroll .coupon-card .coupon-desc{ display:none !important; }
#usedScroll .coupon-card .coupon-title{ margin-bottom:2px; }
#usedScroll .coupon-card .badge-row{ margin-bottom:2px; }
#usedScroll .coupon-card .small{ line-height:1.2; }



/* =========================
   TOOLTIP "BAR VICINI"
   (Bootstrap e custom)
   ========================= */
.tooltip.nearby-tooltip {
  --bs-tooltip-bg: #fff;
  --bs-tooltip-color: #212529;
  --bs-tooltip-opacity: 1;
  --bs-tooltip-max-width: 360px;
  --bs-tooltip-padding-x: .75rem;
  --bs-tooltip-padding-y: .5rem;
  --bs-tooltip-border-radius: .5rem;
  filter: drop-shadow(0 6px 20px rgba(0,0,0,.15));
}
.tooltip.nearby-tooltip .tooltip-inner { text-align: left; }

/* Tooltip custom (senza Bootstrap JS) */
#nearby-tooltip{
  position: fixed;
  z-index: 99999;
  max-width: 360px;
  background: #fff;
  color: #212529;
  border: 1px solid rgba(0,0,0,.1);
  border-radius: 8px;
  box-shadow: 0 12px 28px rgba(0,0,0,.18);
  padding: .6rem .75rem;
  font-size: .9rem;
  line-height: 1.35;
  display: none;
}
#nearby-tooltip .muted { color:#6c757d; }
#nearby-tooltip ul { list-style:none; margin:0; padding:0; }
#nearby-tooltip li { margin-bottom:.5rem; }
#nearby-tooltip li:last-child { margin-bottom:0; }
#nearby-tooltip .small { font-size:.82em; }

/* =========================
   RESPONSIVE — testi più grandi su mobile
   ========================= */
@media (max-width: 576px){
  [data-card="coupon"] .coupon-title{ font-size: 1.18rem; }
  [data-card="coupon"] .coupon-desc{ font-size: 1.04rem; }
  [data-card="coupon"] .badge[data-badge]{ font-size: 1rem; }
  [data-card="coupon"] .small,
  [data-card="coupon"] .muted{ font-size: .98rem; }
}


/* ===============================
   9+1 — Stato PENDING (ambrare, ben visibile)
   Si applica sia al tema Ciemme (.carnet-card) che al tema Blu (.loyalty-card)
   =============================== */
:root{
  --pending-bg:    #FFE8A6;   /* ambra chiaro */
  --pending-bd:    #FFD36A;   /* bordo ambra */
  --pending-ink:   #6B5400;   /* testo/icona */
  --pending-stripe:#FFF3C7;   /* righe leggere */
}

/* PENDING — tema Ciemme */
.carnet-card .carnet-slot.pending{
  background:
    repeating-linear-gradient(45deg, var(--pending-stripe) 0 7px, rgba(255,232,166,.65) 7px 14px),
    var(--pending-bg);
  border-color: var(--pending-bd);
  color: var(--pending-ink);
  box-shadow: inset 0 2px 6px rgba(0,0,0,.15), 0 0 10px rgba(255,211,106,.20);
  position: relative;
}

/* PENDING — tema Blu */
.loyalty-card .carnet-slot.pending{
  background:
    repeating-linear-gradient(45deg, rgba(255,249,205,.85) 0 7px, rgba(255,236,158,.75) 7px 14px),
    #FFF2B3;
  border-color: #FFE084;
  color: #0a2340;
  box-shadow: inset 0 2px 6px rgba(0,0,0,.20), 0 0 10px rgba(255,224,132,.25);
  position: relative;
}

/* Micro-pulse soft per dare “in attesa” (rispetta reduce-motion) */
@keyframes carnetPendingPulse{
  0%,100%{ transform: scale(1);   box-shadow: 0 0 0 0 rgba(255,211,106,.0); }
  50%   { transform: scale(1.03); box-shadow: 0 0 0 6px rgba(255,211,106,.12); }
}
.carnet-card .carnet-slot.pending,
.loyalty-card .carnet-slot.pending{
  animation: carnetPendingPulse 1.4s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce){
  .carnet-card .carnet-slot.pending,
  .loyalty-card .carnet-slot.pending{
    animation: none;
  }
}

/* Bollino opzionale (non invasivo) — togli se non ti piace */
.carnet-card .carnet-slot.pending::after,
.loyalty-card .carnet-slot.pending::after{
  content: "⏳";
  position: absolute; top: -6px; right: -6px;
  font-size: 12px; line-height: 1;
  color: var(--pending-ink);
  background:#fff; border:1px solid var(--pending-bd);
  border-radius: 10px; padding: 1px 4px;
}

/* Quando lo stato cambia da pending a filled/ready,
   NON serve altro: eredita già gli stili esistenti. */

@media (max-width: 400px) {

  /* brand più compatto */
  .navbar-brand {
    font-size: 0.95rem;
    margin-right: 4px;
    flex: 1 1 auto;
    min-width: 0;
  }
  .navbar-brand img {
    width: 24px;       /* logo un filo più piccolo */
    height: auto;
    margin-right: 4px;
  }
}
/* =========================
   Footer Ciemme Lovers
   ========================= */
.cm-footer {
  background: #38220F; /* marrone scuro */
  color: #ECE0D1;      /* beige chiaro */
  /*border-top: 1px solid #785F38; /* bronzo */
  font-size: 0.85rem;
}

.cm-footer h5,
.cm-footer h6 {
  color: #ECE0D1;
}

.cm-footer .legal {
  color: #ECE0D1;
  opacity: 0.9;
  font-size: 0.86rem;
}

.cm-footer .legal a {
  color: #ECE0D1;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.15s ease, color 0.15s ease, opacity 0.15s ease;
}

.cm-footer .legal a:hover,
.cm-footer .legal a:focus {
  opacity: 1;
  color: #ffffff;
  border-bottom-color: rgba(236, 224, 209, 0.7);
  text-decoration: none;
}

.cm-footer .cookie-note i {
  font-size: 0.9rem;
  opacity: 0.85;
}

/* Responsivo footer */
@media (max-width: 767.98px) {
  .cm-footer {
    text-align: left;
  }
  .cm-footer .row > [class*="col-"] {
    margin-bottom: 0.75rem;
  }
}

/* =========================
   Cookie Banner – Ciemme (colori invertiti)
   ========================= */
.cm-cookie-banner{
  background: var(--ciemme-beige);
  color: var(--ciemme-brown);
  padding: .75rem 0;
  border-top: 2px solid rgba(0,0,0,.10);
  box-shadow: 0 -10px 30px rgba(0,0,0,.15);
}

.cm-cookie-banner a{
  color: var(--ciemme-brown);
  text-decoration: underline;
}
.cm-cookie-banner a:hover{
  color: var(--ciemme-red);
}

/* Bottoni banner */
.cm-cookie-btn{
  border-radius: .75rem;
  font-weight: 500;
  border: 0;
}

/* Accetta = rosso */
.cm-cookie-btn-accept{
  background: var(--ciemme-red);
  color: #fff;
}
.cm-cookie-btn-accept:hover{
  filter: brightness(.92);
}

/* Rifiuta = marrone (invertito rispetto a prima) */
.cm-cookie-btn-reject{
  background: var(--ciemme-brown);
  color: #fff;
}
.cm-cookie-btn-reject:hover{
  filter: brightness(.92);
}

/* Settings = contorno marrone */
.cm-cookie-btn-settings{
  background: transparent;
  color: var(--ciemme-brown);
  border: 1px solid var(--ciemme-brown);
}
.cm-cookie-btn-settings:hover{
  background: rgba(0,0,0,.05);
}

/* Modal impostazioni cookie – invertito */
.cm-cookie-modal{
  border-radius: 1rem;
  overflow: hidden;
  border: 1px solid rgba(0,0,0,.08);
}

/* Header modal → beige? o brown?  
   Coerentemente con footer e tema, lo mettiamo BROWN */
.cm-cookie-modal .modal-header{
  background: var(--ciemme-brown);
  color: #fff;
  border-bottom: 1px solid rgba(255,255,255,.15);
}

.cm-cookie-modal .modal-title{
  font-weight: 600;
}

/* Body → beige */
.cm-cookie-modal .modal-body{
  background: var(--ciemme-beige);
  color: var(--ciemme-brown);
}

/* Footer modal → beige leggermente più scuro */
.cm-cookie-modal .modal-footer{
  background: #e4d8c3;
  border-top: 1px solid rgba(0,0,0,.05);
}

/* Blocchi opzioni */
.cm-cookie-block{
  background: #fff;
  border-color: #d2c6b3 !important;
}

/* ===== Footer: lista legale in 2 colonne solo desktop ===== */
@media (min-width: 992px) {
  .cm-footer .legal-list-2col {
    column-count: 2;
    column-gap: 1rem;
  }

  .cm-footer .legal-list-2col li {
    break-inside: avoid;
    margin-bottom: .35rem;
  }
}

/* iOS status-bar safe-area — Ciemme Lovers */
@supports (padding-top: env(safe-area-inset-top)) {
  html {
    background-color: #38220F;
  }
  body {
    min-height: 100vh;
    min-height: 100dvh;
  }
}

/* Ciemme Lovers — spacer navbar fixed-top */
.ciemme-navbar-spacer {
  height: 56px;
  flex: 0 0 56px;
}

/* === CIEMME GLOBAL PAGE FLOW FIX BEGIN === */
body.customer-db {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

body.customer-db main.page-wrap {
  flex: 1 0 auto;
  width: 100%;
}

body.customer-db footer {
  flex: 0 0 auto;
}
/* === CIEMME GLOBAL PAGE FLOW FIX END === */