/* =========================================================
   User Dashboard skin v8 - layout compatto, 2 col uguali, mobile pulito
   ========================================================= */

/* ===== Tokens ===== */
:root{
  --az-accent:#6C5CE7;
  --az-accent-2:#00D1B2;
  --az-bg:#f7f7fb;
  --az-card-bg:#ffffff;
  --az-text:#1f2330;
  --az-muted:#6b7280;
  --az-border:#e6e7ee;
  --az-radius:14px;
  --az-shadow:0 6px 18px rgba(20,20,43,.05);
}

/* ===== Reset default Woo ===== */
.woocommerce .woocommerce-MyAccount-navigation,
.woocommerce .woocommerce-MyAccount-content{
  float:none !important;
  width:auto !important;
  margin:0 !important;
  padding:0;
}

/* ===== Layout FLEX 2 colonne ===== */
.woocommerce{
  display:flex !important;
  align-items:flex-start !important;
  gap:24px !important;
}

/* ===== Nav sinistra (sticky) ===== */
.woocommerce nav.woocommerce-MyAccount-navigation{
  background: var(--az-card-bg);
  border: 1px solid var(--az-border);
  border-radius: var(--az-radius);
  box-shadow: var(--az-shadow);
  padding: 12px;
  position: sticky;
  top: 24px;
  flex: 0 0 240px !important;
  max-width: 260px;
  z-index: 1;
}
.woocommerce nav.woocommerce-MyAccount-navigation ul{
  list-style:none !important; margin:0 !important; padding:4px !important;
}
.woocommerce nav.woocommerce-MyAccount-navigation li+li{ margin-top:2px; }
.woocommerce nav.woocommerce-MyAccount-navigation ul li::marker{ content:""; }
.woocommerce nav.woocommerce-MyAccount-navigation ul li:before{ content:none; }
.woocommerce nav.woocommerce-MyAccount-navigation a{
  display:flex; align-items:center; gap:10px;
  padding:9px 11px; border-radius:9px;
  text-decoration:none; color: var(--az-text); font-weight:600; font-size:.94rem;
  transition: background .2s, color .2s;
}
.woocommerce nav.woocommerce-MyAccount-navigation a::before{
  content:""; width:8px; height:8px; border-radius:50%;
  background: linear-gradient(135deg, var(--az-accent), var(--az-accent-2));
  opacity:.85; flex: 0 0 8px;
}
.woocommerce nav.woocommerce-MyAccount-navigation a:hover{ background:#f3f4f7; }
.woocommerce nav.woocommerce-MyAccount-navigation li.is-active > a{
  background: linear-gradient(135deg, #f2efff, #eefcff);
  color: var(--az-accent);
}

/* ===== Contenuto destra ===== */
.woocommerce .woocommerce-MyAccount-content{
  flex: 1 1 auto !important; min-width: 0; position: relative; z-index: 2;
}
.woocommerce-MyAccount-content .az-container{
  background: var(--az-bg);
  padding: 18px;
  border-radius: var(--az-radius);
}

/* ===== Card base ===== */
.az-card{
  background: var(--az-card-bg);
  border: 1px solid var(--az-border);
  border-radius: var(--az-radius);
  box-shadow: var(--az-shadow);
  padding: 14px 16px;
  margin-bottom: 14px;
}
.az-card:last-child{ margin-bottom:0; }
.az-card-header{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding-bottom:8px; margin-bottom:10px; border-bottom:1px dashed #eef0f6;
}
.az-card-title{ font-weight:700; font-size:1rem; }
.az-card-actions{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }

/* =========================================================
   HERO 2 (compatto)
   ========================================================= */
.az-hero2{
  background: linear-gradient(135deg, #ffffff, #f6f3ff);
  border:1px solid var(--az-border);
  border-radius: var(--az-radius);
  box-shadow: var(--az-shadow);
  padding: 14px 16px;
  margin-bottom: 14px;
  display:grid; grid-template-columns: 1fr auto; gap:12px; align-items:center;
}
.az-hero2__title{ margin:0 0 6px; font-size:1.2rem; font-weight:800; letter-spacing:-.01em; }
.az-hero2__meta{ display:flex; gap:8px; flex-wrap:wrap; }
.az-hero2__right{ display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end; }

/* =========================================================
   STATS 3 colonne (full width)
   ========================================================= */
.az-stats{
  display:grid; grid-template-columns: repeat(3, 1fr); gap:12px;
  margin-bottom:14px;
}
.az-stat{
  background: var(--az-card-bg);
  border:1px solid var(--az-border);
  border-radius: var(--az-radius);
  box-shadow: var(--az-shadow);
  padding: 12px 14px;
  display:flex; flex-direction:column; gap:6px;
  min-height: 96px;
}
.az-stat__lbl{ color: var(--az-muted); font-size:.85rem; font-weight:600; text-transform:uppercase; letter-spacing:.04em; }
.az-stat__num{ font-size:1.8rem; font-weight:800; line-height:1; color: var(--az-text); }
.az-stat__lim{ font-size:1rem; font-weight:600; color: var(--az-muted); margin-left:4px; }
.az-stat__cta{
  margin-top:auto; align-self:flex-start;
  font-size:.88rem; font-weight:600; color: var(--az-accent);
  text-decoration:none;
}
.az-stat__cta:hover{ text-decoration:underline; }

.az-progress{
  height:8px; background:#eef0f6; border-radius:999px; overflow:hidden; margin-top:auto;
}
.az-progress > span{
  display:block; height:100%;
  background:linear-gradient(90deg, var(--az-accent), var(--az-accent-2));
  width:0%;
}

/* =========================================================
   TODO compatto (mancanze profilo)
   ========================================================= */
.az-todo__head{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  margin-bottom:8px;
}
.az-todo__chips{ display:flex; flex-wrap:wrap; gap:6px; }
.az-chip{
  display:inline-flex; align-items:center; padding:5px 10px;
  background:#f3f4f7; color: var(--az-text);
  border:1px solid var(--az-border); border-radius:999px;
  font-size:.84rem; font-weight:600; text-decoration:none;
  transition: background .2s;
}
.az-chip:hover{ background:#e9eaf3; color: var(--az-text); }

/* =========================================================
   GRID 2 col uguali (Promozioni | Eventi)
   ========================================================= */
.az-grid2{
  display:grid; grid-template-columns: 1fr 1fr; gap:14px;
  margin-bottom:14px;
}

/* Mini lista compatta */
.az-mini{ list-style:none; margin:0; padding:0; }
.az-mini li{
  display:flex; align-items:center; gap:10px;
  padding:8px 0; border-bottom:1px dashed #eef0f6;
}
.az-mini li:last-child{ border-bottom:none; padding-bottom:0; }
.az-mini li:before{ content:none !important; }
.az-mini__title{
  flex:1 1 auto; min-width:0; font-weight:600; color: var(--az-text);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.az-mini__edit{
  font-size:.85rem; font-weight:600; color: var(--az-accent);
  text-decoration:none; flex:0 0 auto;
}
.az-mini__edit:hover{ text-decoration:underline; }

/* =========================================================
   Plan card (full width)
   ========================================================= */
.az-plan__row{
  display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
}
.az-plan__name, .az-plan__usage{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; }

/* =========================================================
   Bottoni
   ========================================================= */
.az-button{
  appearance:none; -webkit-appearance:none;
  background: var(--az-accent);
  color:#fff !important; border:1px solid transparent; border-radius: 10px;
  padding: 0 14px; height:36px; line-height:36px;
  font-weight:600; text-decoration:none;
  display:inline-flex; align-items:center; gap:6px;
  box-shadow: 0 6px 14px rgba(108,92,231,.22);
  transition: transform .06s ease, box-shadow .2s ease, background .2s ease, color .2s;
}
.az-button:hover{
  transform: translateY(-1px); box-shadow: 0 10px 20px rgba(108,92,231,.26);
  color:#fff !important;
}
.az-button--light{
  background:#fff; color: var(--az-text) !important;
  border:1px solid var(--az-border); box-shadow:none;
}
.az-button--light:hover{
  border-color:#dfe3ee; background:#fbfbfe;
  color: var(--az-text) !important;
}
.az-button--ghost{
  background:transparent; color: var(--az-accent) !important;
  border:1px dashed var(--az-accent); box-shadow:none;
}
.az-button--ghost:hover{
  background: rgba(108,92,231,.06);
  color: var(--az-accent) !important;
}
.az-button.sm{ height:32px; line-height:32px; padding:0 11px; border-radius:8px; font-size:.88rem; }

/* ===== Badge / pill ===== */
.az-badge{
  display:inline-flex; align-items:center; gap:6px;
  padding:5px 9px; border-radius:999px; font-size:.83rem;
  border:1px solid var(--az-border); background:#fff; color:var(--az-text);
}
.az-badge .dot{
  width:7px; height:7px; border-radius:50%;
  background: linear-gradient(135deg, var(--az-accent), var(--az-accent-2));
}
.az-pill{
  padding:3px 9px; border-radius:999px; border:1px solid var(--az-border);
  font-size:.8rem; background:#fff; color: var(--az-text);
}
.az-empty{ padding:12px; background:#fff; border:1px dashed var(--az-border); border-radius:10px; color:var(--az-muted); }
.az-empty--sm{ padding:8px 12px; font-size:.9rem; }

/* ===== Helper ===== */
.az-muted{ color: var(--az-muted); }
.az-row{ display:flex; gap:12px; align-items:center; flex-wrap:wrap; }

/* =========================================================
   MOBILE - cards stack puliti, sidebar chip orizzontali
   ========================================================= */
@media (max-width: 1024px){
  .woocommerce{
    flex-direction: column !important;
    gap:12px !important;
    display:flex !important;
  }

  /* Sidebar diventa slider orizzontale a tutta larghezza */
  .woocommerce nav.woocommerce-MyAccount-navigation{
    display:block !important;
    position: relative !important;
    top:auto !important;
    width:100% !important;
    max-width:none !important;
    flex: 0 0 auto !important;
    padding:8px 28px !important;
    z-index:0;
    overflow:hidden !important;
  }
  /* Frecce slider SVG (cliccabili, angolo aperto) */
  .woocommerce nav.woocommerce-MyAccount-navigation::before,
  .woocommerce nav.woocommerce-MyAccount-navigation::after{
    content: "" !important;
    position:absolute !important;
    top:0 !important; bottom:0 !important;
    width:32px !important;
    z-index:3 !important;
    cursor:pointer !important;
    transition: opacity .15s, transform .1s !important;
  }
  .woocommerce nav.woocommerce-MyAccount-navigation::before{
    left:0 !important;
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236C5CE7' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='14,5 8,12 14,19'/></svg>") center/20px no-repeat, linear-gradient(to right, #fff 65%, rgba(255,255,255,0)) !important;
  }
  .woocommerce nav.woocommerce-MyAccount-navigation::after{
    right:0 !important;
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236C5CE7' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='10,5 16,12 10,19'/></svg>") center/20px no-repeat, linear-gradient(to left, #fff 65%, rgba(255,255,255,0)) !important;
  }
  .woocommerce nav.woocommerce-MyAccount-navigation:active::before,
  .woocommerce nav.woocommerce-MyAccount-navigation:active::after{
    opacity:.6 !important;
  }
  /* Voci come chip orizzontali in slide (scroll-x, no wrap) */
  .woocommerce nav.woocommerce-MyAccount-navigation ul{
    display:flex !important;
    flex-wrap:nowrap !important;
    gap:6px !important;
    padding:2px 4px !important;
    margin:0 !important;
    overflow-x:auto !important;
    overflow-y:hidden !important;
    -webkit-overflow-scrolling:touch !important;
    scroll-snap-type:x proximity !important;
    scrollbar-width:none !important;
    -ms-overflow-style:none !important;
  }
  .woocommerce nav.woocommerce-MyAccount-navigation ul::-webkit-scrollbar{
    display:none !important;
    height:0 !important;
  }
  .woocommerce nav.woocommerce-MyAccount-navigation li{
    margin:0 !important;
    flex: 0 0 auto !important;
    scroll-snap-align: start !important;
  }
  .woocommerce nav.woocommerce-MyAccount-navigation li+li{ margin-top:0 !important; }
  .woocommerce nav.woocommerce-MyAccount-navigation a{
    width:auto !important;
    border:1px solid var(--az-border) !important;
    background:#fff !important;
    padding:7px 12px !important;
    border-radius:999px !important;
    font-size:.86rem !important;
  }
  .woocommerce nav.woocommerce-MyAccount-navigation a::before{
    width:6px !important; height:6px !important; flex: 0 0 6px !important;
  }
  .woocommerce nav.woocommerce-MyAccount-navigation li.is-active > a{
    background: linear-gradient(135deg,#f2efff,#eefcff) !important;
    border-color: var(--az-accent) !important;
    color: var(--az-accent) !important;
  }
}

@media (max-width: 768px){
  .woocommerce-MyAccount-content .az-container{ padding:12px; }

  /* Hero stack */
  .az-hero2{
    grid-template-columns: 1fr;
    padding:12px 14px;
  }
  .az-hero2__right{ justify-content:flex-start; }
  .az-hero2__title{ font-size:1.1rem; }

  /* Stats 1 colonna a tutta larghezza */
  .az-stats{
    grid-template-columns: 1fr;
    gap:10px;
  }
  .az-stat{ min-height: auto; padding:10px 12px; }
  .az-stat__num{ font-size:1.5rem; }

  /* Grid 1 colonna */
  .az-grid2{ grid-template-columns: 1fr; gap:10px; }

  /* Plan stack */
  .az-plan__row{ flex-direction: column; align-items:flex-start; gap:8px; }

  /* Card padding ridotto */
  .az-card{ padding:12px 14px; margin-bottom:10px; }

  /* Bottoni full width nelle azioni principali */
  .az-card-actions .az-button.sm{ flex: 1 1 auto; justify-content:center; }
  .az-todo__head{ flex-direction: column; align-items:flex-start; gap:6px; }
  .az-todo__head .az-button{ align-self:stretch; justify-content:center; }

  /* Mini list - stato a destra ma compresso */
  .az-mini li{ flex-wrap:wrap; gap:6px 10px; }
  .az-mini__title{ flex: 1 1 100%; white-space:normal; }
  .az-mini__edit{ margin-left:auto; }
}

/* admin bar offset */
html.admin-bar .woocommerce nav.woocommerce-MyAccount-navigation{ top: calc(24px + 32px); }
@media (max-width: 782px){
  html.admin-bar .woocommerce nav.woocommerce-MyAccount-navigation{ top: auto; }
}

/* Tabelle responsive (compatibilita pagine vecchie) */
@media (max-width: 768px){
  .az-table, .az-table thead, .az-table tbody, .az-table th, .az-table td, .az-table tr{ display:block; width:100%; }
  .az-table thead{ display:none; }
  .az-table tr{
    background:#fff; border:1px solid var(--az-border); border-radius:12px;
    box-shadow: var(--az-shadow); margin-bottom:10px; overflow:hidden;
  }
  .az-table td{
    position:relative; border:none; border-bottom:1px solid var(--az-border);
    padding:10px 10px 10px 110px;
  }
  .az-table td:last-child{ border-bottom:none; }
  .az-table td::before{
    content: attr(data-label);
    position:absolute; left:10px; top:10px; width:90px;
    font-size:.82rem; color:var(--az-muted); font-weight:600;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  }
}

/* === Plan-specific badge colors === */
.az-badge.silver, .az-badge.gold, .az-badge.platinum{color:#fff !important;font-weight:600 !important;border:1px solid transparent !important;}
.az-badge.silver .dot, .az-badge.gold .dot, .az-badge.platinum .dot{background:rgba(255,255,255,0.9) !important;}
.az-badge.silver strong, .az-badge.gold strong, .az-badge.platinum strong{color:#fff !important;text-transform:uppercase;letter-spacing:0.5px;}
.az-badge.silver{background:linear-gradient(135deg, #9ca3af 0%, #6b7280 100%) !important;}
.az-badge.gold{background:linear-gradient(135deg, #fbbf24 0%, #d97706 100%) !important;color:#3b2510 !important;}
.az-badge.gold .dot{background:#3b2510 !important;}
.az-badge.gold strong{color:#3b2510 !important;}
.az-badge.platinum{background:linear-gradient(135deg, #7c3aed 0%, #4338ca 100%) !important;}
.az-badge.none{background:#e5e7eb !important;color:#374151 !important;}