/* Realizzato da Lomazzi Federico */

/* ============================================================
   TOKENS GLOBALI
   ============================================================ */
:root {
    /* — Tema originale — */
    --primary-color: #2c3e50;
    --accent-color:  #3498db;
    --bg-color:      #f4f7f6;
    --text-color:    #333;

    /* — Design system navy/amber (profile + pagine autonome) — */
    --navy:       #0d1b2a;
    --navy-mid:   #1a2e42;
    --navy-light: #243b55;
    --amber:      #f0a500;
    --amber-lt:   #ffc947;
    --white:      #ffffff;
    --off:        #f7f8fa;
    --text:       #1a1f2e;
    --muted:      #6b7a99;
    --border:     #e4e8f0;
    --border-dk:  #1e3249;
    --green:      #059669;
    --red:        #e11d48;
    --power:      #7c3aed;
    --speed:      #e67e22;
    --r-sm:       6px;
    --r-md:       12px;
    --r-lg:       20px;
    --sh-sm:      0 2px 8px rgba(13,27,42,.07);
    --sh-md:      0 4px 20px rgba(13,27,42,.10);
    --font:       'DM Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --font-d:     'Playfair Display', Georgia, serif;
    --t:          0.2s cubic-bezier(.4,0,.2,1);
}

/* ============================================================
   RESET & BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
    font-family: var(--font);
    background-color: var(--bg-color);
    color: var(--text-color);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    margin: 0;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }

/* ============================================================
   LAYOUT
   ============================================================ */
.container { width: 90%; max-width: 600px; margin: auto; padding: 20px; }
header { background: var(--primary-color); color: white; padding: 1rem; text-align: center; }

/* ============================================================
   CARD (tema originale)
   ============================================================ */
.card {
    background: white;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    margin-bottom: 20px;
}

/* ============================================================
   BOTTONE (tema originale)
   ============================================================ */
.btn {
    display: block;
    width: 100%;
    padding: 12px;
    background: var(--accent-color);
    color: white;
    border: none;
    border-radius: 4px;
    text-align: center;
    text-decoration: none;
    font-weight: bold;
    cursor: pointer;
}

/* ============================================================
   FORM (tema originale)
   ============================================================ */
.form-group { margin-bottom: 15px; }
.form-group label { display: block; margin-bottom: 5px; }
.form-group input { width: 100%; padding: 10px; box-sizing: border-box; }

input, select, textarea {
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 16px; /* Evita zoom automatico su iOS */
    padding: 12px;
}

/* ============================================================
   UX / INTERAZIONI (PATCH STEP 08)
   ============================================================ */
.item-row { transition: background 0.2s; }
.item-row:active { background: #f0f0f0; }

.alert { animation: slideIn 0.3s ease-out; }

@keyframes slideIn {
    from { opacity: 0; transform: translateY(-20px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   GALLERY FIX
   ============================================================ */
#main-slider::-webkit-scrollbar { display: none; }
#main-slider { -ms-overflow-style: none; scrollbar-width: none; }

/* ============================================================
   ANIMAZIONI CONDIVISE
   ============================================================ */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* ============================================================
   NEW LISTING — AI Price Options
   Scope: new_listing.php
   ============================================================ */
.price-options-container {
    display: none;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-top: 10px;
}
.price-card {
    background: #fff;
    border: 2px solid #ddd;
    border-radius: 8px;
    padding: 8px;
    text-align: center;
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s;
}
.price-card:hover { border-color: var(--accent-color); }
.price-card.selected {
    border-color: var(--accent-color);
    background: #ebf5ff;
}
.price-card-val {
    display: block;
    font-weight: bold;
    font-size: 1rem;
    color: var(--accent-color);
}
.price-card-label {
    display: block;
    font-size: 0.65rem;
    color: #666;
    margin: 4px 0;
}
.price-card-time {
    display: block;
    font-size: 0.6rem;
    color: #999;
    font-style: italic;
}

/* ============================================================
   NEW LISTING — AI Post-it Boxes
   Scope: new_listing.php
   ============================================================ */

/* Post-it Giallo — Consiglio Esperto */
.expert-advice-box {
    display: none;
    background: #fef9c3;
    border-left: 4px solid #facc15;
    padding: 12px;
    margin-top: 15px;
    border-radius: 4px;
    font-size: 0.85rem;
    color: #854d0e;
    box-shadow: 2px 2px 5px rgba(0,0,0,0.05);
    animation: fadeIn 0.5s ease-in;
}
.expert-advice-box strong { display: block; margin-bottom: 4px; color: #713f12; }

/* Post-it Azzurro — Consigli Tecnici Venditore */
.seller-tips-box {
    display: none;
    background: #e0f2fe;
    border-left: 4px solid #38bdf8;
    padding: 12px;
    margin-top: 10px;
    border-radius: 4px;
    font-size: 0.85rem;
    color: #0369a1;
    box-shadow: 2px 2px 5px rgba(0,0,0,0.05);
    animation: fadeIn 0.5s ease-in;
}
.seller-tips-box strong { display: block; margin-bottom: 4px; color: #0c4a6e; }

/* ============================================================
   NEW LISTING — AI Full-screen Loading Overlay
   Scope: new_listing.php
   ============================================================ */
#ai-overlay {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(255,255,255,0.85);
    backdrop-filter: blur(4px);
    z-index: 9999;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}
.spinner {
    width: 50px; height: 50px;
    border: 5px solid #f3f3f3;
    border-top: 5px solid var(--accent-color);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin-bottom: 20px;
}
.loading-text {
    font-weight: bold;
    color: var(--primary-color);
    font-size: 1.1rem;
}
.loading-subtext {
    font-size: 0.85rem;
    color: #666;
    margin-top: 8px;
}

/* ============================================================
   TOPBAR GLOBALE  .vb-topbar
   Componente condiviso — pagine autonome navy/amber
   ============================================================ */
.vb-topbar {
    position: sticky; top: 0; z-index: 900;
    background: var(--navy);
    border-bottom: 1px solid var(--border-dk);
}
.vb-topbar__inner {
    display: flex; align-items: center; gap: 16px;
    height: 64px; max-width: 1400px;
    margin: 0 auto; padding: 0 24px;
}
.vb-logo {
    font-family: var(--font-d);
    font-size: 1.35rem; font-weight: 800;
    color: var(--white); letter-spacing: -.01em; flex-shrink: 0;
}
.vb-logo span { color: var(--amber); }
.vb-topbar__nav { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.vb-nav-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 14px; border-radius: 8px;
    color: rgba(255,255,255,.75); font-size: .85rem; font-weight: 500;
    border: none; background: none;
    transition: background var(--t), color var(--t);
}
.vb-nav-btn:hover      { background: var(--navy-light); color: var(--white); }
.vb-nav-btn.active     { color: var(--amber); }
.vb-nav-btn.primary    { background: var(--amber); color: var(--navy); font-weight: 700; padding: 8px 18px; }
.vb-nav-btn.primary:hover { background: var(--amber-lt); }
.vb-nav-btn i          { width: 16px; height: 16px; }
.vb-mob-btn            { display: none; background: none; border: none; color: white; padding: 8px; }

/* Mobile drawer */
.vb-mob-nav {
    display: none; position: fixed; inset: 0; z-index: 950;
    background: var(--navy); padding: 80px 24px 24px;
    flex-direction: column; gap: 8px;
}
.vb-mob-nav.open { display: flex; }
.vb-mob-nav .vb-nav-btn { font-size: 1rem; padding: 14px 16px; }

@media (max-width: 768px) {
    .vb-topbar__nav .vb-nav-btn:not(.primary):not(.vb-mob-btn) { display: none; }
    .vb-mob-btn { display: flex !important; }
}

/* ============================================================
   FOOTER GLOBALE  .vb-footer
   Componente condiviso — pagine autonome navy/amber
   ============================================================ */
.vb-footer {
    background: var(--navy);
    border-top: 1px solid var(--border-dk);
    color: rgba(255,255,255,.45);
    padding: 20px 24px;
    margin-top: auto;
}
.vb-footer__inner {
    max-width: 1400px; margin: 0 auto;
    display: flex; align-items: center;
    justify-content: space-between; flex-wrap: wrap; gap: 10px;
}
.vb-footer__brand { font-family: var(--font-d); font-size: 1rem; font-weight: 800; color: white; }
.vb-footer__brand span { color: var(--amber); }
.vb-footer__copy { font-size: .78rem; }
.vb-footer__copy a { color: rgba(255,255,255,.35); transition: color var(--t); }
.vb-footer__copy a:hover { color: var(--amber); }
.vb-footer__ver { font-size: .7rem; font-family: monospace; color: rgba(255,255,255,.2); }

/* ============================================================
   PROFILO — Layout e Alert
   Scope: profile.php
   ============================================================ */
.pf-layout {
    max-width: 1200px; margin: 0 auto;
    padding: 32px 24px; flex: 1;
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 24px;
    align-items: start;
}
@media (max-width: 900px) { .pf-layout { grid-template-columns: 1fr; } }
@media (max-width: 600px) { .pf-layout { padding: 16px; gap: 16px; } }

.pf-alert {
    grid-column: 1 / -1;
    display: flex; align-items: center; gap: 10px;
    padding: 13px 18px; border-radius: var(--r-md);
    font-size: .875rem; font-weight: 500;
    animation: slideIn .3s ease;
}
.pf-alert--success { background: #f0fdf4; border: 1px solid #86efac; color: #166534; }
.pf-alert--error   { background: #fff1f2; border: 1px solid #fda4af; color: #be123c; }
.pf-alert i        { width: 16px; height: 16px; flex-shrink: 0; }

/* ============================================================
   PROFILO — Sidebar
   Scope: profile.php
   ============================================================ */
.pf-sidebar {
    position: sticky; top: 84px;
    display: flex; flex-direction: column; gap: 16px;
}

/* Avatar card */
.pf-avatar-card {
    background: var(--white);
    border-radius: var(--r-md);
    border: 1px solid var(--border);
    box-shadow: var(--sh-sm);
    overflow: hidden;
}
.pf-avatar-card__banner {
    height: 72px;
    background: linear-gradient(135deg, var(--navy) 0%, var(--navy-mid) 100%);
    position: relative;
}
.pf-avatar-card__body {
    padding: 0 20px 20px;
    display: flex; flex-direction: column; align-items: center;
    text-align: center;
}
.pf-avatar-wrap {
    width: 88px; height: 88px;
    border-radius: 50%; overflow: hidden;
    border: 4px solid var(--white);
    box-shadow: var(--sh-md);
    margin-top: -44px; margin-bottom: 12px;
    background: var(--off); flex-shrink: 0;
    cursor: pointer; position: relative;
}
.pf-avatar-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pf-avatar-wrap__overlay {
    position: absolute; inset: 0;
    background: rgba(13,27,42,.5);
    display: flex; align-items: center; justify-content: center;
    opacity: 0; transition: opacity var(--t);
    color: white;
}
.pf-avatar-wrap__overlay i { width: 20px; height: 20px; }
.pf-avatar-wrap:hover .pf-avatar-wrap__overlay { opacity: 1; }

.pf-user-name {
    font-family: var(--font-d); font-size: 1.05rem; font-weight: 700;
    color: var(--navy); margin-bottom: 4px;
}
.pf-user-at   { font-size: .8rem; color: var(--muted); margin-bottom: 10px; }
.pf-plan-badge {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: .7rem; font-weight: 800;
    text-transform: uppercase; letter-spacing: .06em;
    padding: 4px 12px; border-radius: 999px;
}
.pf-account-info {
    margin-top: 14px; width: 100%;
    background: var(--off); border-radius: var(--r-sm);
    padding: 12px 14px;
    font-size: .78rem; color: var(--muted);
    text-align: left;
    display: flex; flex-direction: column; gap: 6px;
}
.pf-account-info__row { display: flex; justify-content: space-between; align-items: center; }
.pf-account-info__val { font-weight: 600; color: var(--text); }

/* Sidebar nav links */
.pf-nav {
    background: var(--white);
    border-radius: var(--r-md);
    border: 1px solid var(--border);
    box-shadow: var(--sh-sm);
    overflow: hidden;
}
.pf-nav__item {
    display: flex; align-items: center; gap: 10px;
    padding: 13px 16px;
    font-size: .875rem; font-weight: 500; color: var(--muted);
    border-bottom: 1px solid var(--border);
    transition: background var(--t), color var(--t);
    cursor: pointer;
}
.pf-nav__item:last-child { border-bottom: none; }
.pf-nav__item:hover  { background: var(--off); color: var(--text); }
.pf-nav__item.active { color: var(--amber); font-weight: 700; background: #fffbeb; }
.pf-nav__item i      { width: 16px; height: 16px; flex-shrink: 0; }

/* ============================================================
   PROFILO — Main content
   Scope: profile.php
   ============================================================ */
.pf-main { display: flex; flex-direction: column; gap: 20px; }

.pf-card {
    background: var(--white);
    border-radius: var(--r-md);
    border: 1px solid var(--border);
    box-shadow: var(--sh-sm);
    overflow: hidden;
}
.pf-card__header {
    padding: 18px 24px;
    border-bottom: 1px solid var(--border);
    display: flex; align-items: center; gap: 10px;
}
.pf-card__header-icon {
    width: 34px; height: 34px; border-radius: var(--r-sm);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.pf-card__title {
    font-family: var(--font-d); font-size: 1rem; font-weight: 700;
    color: var(--navy);
}
.pf-card__body { padding: 24px; }

/* Form controls profilo */
.pf-field { margin-bottom: 18px; }
.pf-field:last-child { margin-bottom: 0; }
.pf-label {
    display: block; font-size: .8rem; font-weight: 700;
    color: var(--muted); text-transform: uppercase;
    letter-spacing: .05em; margin-bottom: 7px;
}
.pf-input, .pf-textarea, .pf-select {
    width: 100%; padding: 12px 14px;
    border: 1.5px solid var(--border); border-radius: var(--r-sm);
    font-family: var(--font); font-size: .9rem;
    color: var(--text); background: var(--off);
    outline: none;
    transition: border-color var(--t), box-shadow var(--t), background var(--t);
    -webkit-appearance: none;
}
.pf-input:focus, .pf-textarea:focus, .pf-select:focus {
    border-color: var(--amber);
    box-shadow: 0 0 0 3px rgba(240,165,0,.13);
    background: var(--white);
}
.pf-input::placeholder, .pf-textarea::placeholder { color: #b0bac8; }
.pf-textarea { resize: vertical; min-height: 90px; line-height: 1.55; }

.pf-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.pf-grid-3 { display: grid; grid-template-columns: 1fr 1fr auto; gap: 12px; align-items: end; }
@media (max-width: 600px) {
    .pf-grid-2 { grid-template-columns: 1fr; }
    .pf-grid-3 { grid-template-columns: 1fr 1fr; }
}

/* Toggle WhatsApp */
.pf-toggle {
    display: flex; align-items: center; gap: 12px;
    padding: 14px 16px;
    background: rgba(5,150,105,.06);
    border: 1px solid rgba(5,150,105,.2);
    border-radius: var(--r-sm); cursor: pointer;
}
.pf-toggle input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--green); cursor: pointer; }
.pf-toggle__label { font-size: .875rem; font-weight: 600; color: #065f46; }
.pf-toggle__sub   { font-size: .75rem; color: #6b7a99; margin-top: 1px; }

/* Bottoni profilo */
.pf-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 7px;
    padding: 13px 22px; border-radius: var(--r-sm);
    font-family: var(--font); font-size: .9rem; font-weight: 700;
    border: none; cursor: pointer; transition: all var(--t);
    width: 100%;
}
.pf-btn--amber { background: var(--amber); color: var(--navy); }
.pf-btn--amber:hover { background: var(--amber-lt); transform: translateY(-1px); }
.pf-btn--navy  { background: var(--navy); color: var(--white); }
.pf-btn--navy:hover { background: var(--navy-mid); }
.pf-btn--red   { background: var(--red); color: var(--white); }
.pf-btn--red:hover { background: #be123c; }
.pf-btn--ghost { background: var(--off); color: var(--muted); border: 1px solid var(--border); }
.pf-btn--ghost:hover { background: var(--border); color: var(--text); }
.pf-btn i { width: 16px; height: 16px; }

/* ============================================================
   PROFILO — Sedi Operative
   Scope: profile.php
   ============================================================ */
.pf-loc-list { display: flex; flex-direction: column; gap: 0; margin-bottom: 20px; }
.pf-loc-item {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 0; border-bottom: 1px solid var(--border);
    gap: 12px;
}
.pf-loc-item:last-child { border-bottom: none; }
.pf-loc-item__icon {
    width: 38px; height: 38px; border-radius: var(--r-sm);
    background: rgba(13,27,42,.06);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.pf-loc-item__icon i { width: 16px; height: 16px; color: var(--navy); }
.pf-loc-item__info   { flex: 1; min-width: 0; }
.pf-loc-item__name {
    font-weight: 700; font-size: .875rem; color: var(--navy);
    display: flex; align-items: center; gap: 6px; margin-bottom: 2px;
}
.pf-loc-item__default {
    background: var(--amber); color: var(--navy);
    font-size: .6rem; font-weight: 800;
    padding: 1px 7px; border-radius: 999px;
    text-transform: uppercase; letter-spacing: .05em;
}
.pf-loc-item__meta { font-size: .78rem; color: var(--muted); }
.pf-loc-item__del {
    background: none; border: none; cursor: pointer;
    color: var(--muted); padding: 7px; border-radius: var(--r-sm);
    transition: background var(--t), color var(--t);
    display: flex; align-items: center;
}
.pf-loc-item__del:hover { background: #fee2e2; color: var(--red); }
.pf-loc-item__del i { width: 15px; height: 15px; }

/* Form aggiungi sede */
.pf-add-loc {
    background: var(--off); border-radius: var(--r-sm);
    border: 1px dashed var(--border);
    padding: 18px;
}
.pf-add-loc__title {
    font-size: .8rem; font-weight: 700; color: var(--muted);
    text-transform: uppercase; letter-spacing: .05em;
    margin-bottom: 14px;
    display: flex; align-items: center; gap: 6px;
}
.pf-add-loc__title i { width: 14px; height: 14px; }
.pf-loc-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 80px;
    gap: 10px;
    margin-bottom: 10px;
}
@media (max-width: 600px) { .pf-loc-grid { grid-template-columns: 1fr 80px; } }
.pf-check-row {
    display: flex; align-items: center; gap: 8px;
    font-size: .82rem; color: var(--muted); cursor: pointer;
    margin-bottom: 14px;
}
.pf-check-row input { accent-color: var(--amber); width: 16px; height: 16px; }

/* ============================================================
   PROFILO — Sicurezza (griglia password)
   Scope: profile.php
   ============================================================ */
.pf-pw-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 14px;
    align-items: end;
}
@media (max-width: 700px) { .pf-pw-grid { grid-template-columns: 1fr; } }

/* ============================================================
   TOKEN ALIAS — retrocompatibilità sales_summary.php
   ============================================================ */
:root {
    --navy-lt:  #243b55; /* alias di --navy-light */
    --green-lt: #f0fdf4;
}

/* ============================================================
   SALES SUMMARY — Layout wrapper
   Scope: sales_summary.php
   ============================================================ */
.rp-wrap {
    max-width: 1200px; margin: 0 auto;
    padding: 32px 24px; flex: 1;
}
@media (max-width: 600px) { .rp-wrap { padding: 16px; } }

/* ── Page header ── */
.rp-header {
    display: flex; align-items: flex-start;
    justify-content: space-between; flex-wrap: wrap; gap: 16px;
    margin-bottom: 28px;
}
.rp-eyebrow {
    font-size: .72rem; font-weight: 700; letter-spacing: .1em;
    text-transform: uppercase; color: var(--amber);
    display: flex; align-items: center; gap: 5px;
    margin-bottom: 6px;
}
.rp-eyebrow i { width: 12px; height: 12px; }
.rp-title {
    font-family: var(--font-d); font-size: 1.7rem; font-weight: 800;
    color: var(--navy); line-height: 1.2;
}
.rp-periodo {
    font-size: .82rem; color: var(--muted); margin-top: 4px;
    display: flex; align-items: center; gap: 6px;
}
.rp-periodo i { width: 13px; height: 13px; }

/* ── Toolbar azioni ── */
.rp-toolbar {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.rp-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 9px 16px; border-radius: var(--r-sm);
    font-family: var(--font); font-size: .82rem; font-weight: 700;
    border: none; cursor: pointer; transition: all var(--t);
    text-decoration: none; white-space: nowrap;
}
.rp-btn--navy  { background: var(--navy); color: var(--white); }
.rp-btn--navy:hover { background: var(--navy-mid); }
.rp-btn--green { background: var(--green); color: var(--white); }
.rp-btn--green:hover { background: #047857; }
.rp-btn--ghost {
    background: var(--white); color: var(--text);
    border: 1.5px solid var(--border);
}
.rp-btn--ghost:hover { background: var(--off); border-color: var(--navy); }
.rp-btn i { width: 14px; height: 14px; }

/* ============================================================
   SALES SUMMARY — Filtro periodo
   Scope: sales_summary.php
   ============================================================ */
.rp-filter-row {
    display: flex; align-items: center; gap: 10px;
    flex-wrap: wrap; margin-bottom: 24px;
}
.rp-filter-label {
    font-size: .78rem; font-weight: 700; color: var(--muted);
    text-transform: uppercase; letter-spacing: .05em;
}
.rp-period-pills { display: flex; gap: 6px; flex-wrap: wrap; }
.rp-pill {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 6px 14px; border-radius: 999px;
    font-size: .78rem; font-weight: 600;
    border: 1.5px solid var(--border); background: var(--white);
    color: var(--muted); cursor: pointer; transition: all var(--t);
    text-decoration: none;
}
.rp-pill:hover       { border-color: var(--amber); color: var(--text); background: #fffbeb; }
.rp-pill.active      { background: var(--navy); border-color: var(--navy); color: var(--white); }
.rp-pill--reset      { color: var(--red); border-color: #fda4af; background: #fff1f2; }
.rp-pill--reset:hover { background: #fee2e2; border-color: var(--red); color: var(--red); }

/* ============================================================
   SALES SUMMARY — KPI Grid
   Scope: sales_summary.php
   ============================================================ */
.rp-kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 14px;
    margin-bottom: 28px;
}
.rp-kpi {
    background: var(--white);
    border-radius: var(--r-md);
    border: 1px solid var(--border);
    box-shadow: var(--sh-sm);
    padding: 20px 22px;
    display: flex; flex-direction: column; gap: 8px;
    transition: box-shadow var(--t);
}
.rp-kpi:hover        { box-shadow: var(--sh-md); }
.rp-kpi--featured    { border-color: var(--amber); border-width: 2px; }
.rp-kpi__icon {
    width: 36px; height: 36px; border-radius: var(--r-sm);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.rp-kpi__icon i { width: 17px; height: 17px; }
.rp-kpi__label {
    font-size: .72rem; font-weight: 700; color: var(--muted);
    text-transform: uppercase; letter-spacing: .06em;
}
.rp-kpi__value {
    font-family: var(--font-d); font-size: 1.75rem; font-weight: 800;
    color: var(--navy); line-height: 1; letter-spacing: -.02em;
}
.rp-kpi__value.amber  { color: var(--amber); }
.rp-kpi__value.green  { color: var(--green); }
.rp-kpi__value.purple { color: var(--power); }
.rp-kpi__sub {
    font-size: .72rem; color: var(--muted); line-height: 1.3;
}
.rp-kpi__sub strong { color: var(--text); }

/* ============================================================
   SALES SUMMARY — Card tabella
   Scope: sales_summary.php
   ============================================================ */
.rp-card {
    background: var(--white);
    border-radius: var(--r-md);
    border: 1px solid var(--border);
    box-shadow: var(--sh-sm);
    overflow: hidden;
}
.rp-card__header {
    padding: 18px 24px;
    border-bottom: 1px solid var(--border);
    display: flex; align-items: center;
    justify-content: space-between; gap: 12px; flex-wrap: wrap;
}
.rp-card__title {
    font-family: var(--font-d); font-size: 1rem; font-weight: 700;
    color: var(--navy);
}
.rp-card__count {
    font-size: .78rem; color: var(--muted);
    background: var(--off); border: 1px solid var(--border);
    padding: 3px 10px; border-radius: 999px; font-weight: 600;
}

/* ── Tabella ── */
.rp-table-wrap { overflow-x: auto; }
.rp-table {
    width: 100%; border-collapse: collapse;
    font-size: .875rem;
}
.rp-table thead th {
    padding: 13px 18px; text-align: left;
    background: var(--off);
    border-bottom: 1px solid var(--border);
    font-size: .72rem; font-weight: 700;
    color: var(--muted); text-transform: uppercase;
    letter-spacing: .06em; white-space: nowrap;
}
.rp-table thead th:last-child,
.rp-table thead th:nth-child(3),
.rp-table thead th:nth-child(4) { text-align: right; }
.rp-table tbody tr {
    border-bottom: 1px solid var(--border);
    transition: background var(--t);
}
.rp-table tbody tr:last-child { border-bottom: none; }
.rp-table tbody tr:hover      { background: var(--off); }
.rp-table td                  { padding: 14px 18px; vertical-align: middle; }
.rp-table td:last-child,
.rp-table td:nth-child(3),
.rp-table td:nth-child(4)     { text-align: right; }

.rp-td-date  { font-size: .78rem; color: var(--muted); white-space: nowrap; }
.rp-td-title { font-weight: 600; color: var(--navy); }
.rp-td-cat   { font-size: .72rem; color: var(--muted); margin-top: 2px; }
.rp-td-price {
    font-weight: 800; font-size: .95rem;
    color: var(--green); white-space: nowrap;
}
.rp-td-save {
    font-weight: 600; font-size: .85rem;
    color: var(--power); white-space: nowrap;
}
.rp-td-pps {
    display: inline-flex; align-items: center; gap: 3px;
    background: rgba(5,150,105,.08); color: var(--green);
    border: 1px solid rgba(5,150,105,.2);
    font-size: .65rem; font-weight: 800;
    padding: 2px 7px; border-radius: 999px;
    text-transform: uppercase; margin-top: 3px;
}

/* ── Footer tabella — totale ── */
.rp-table tfoot tr          { background: var(--off); }
.rp-table tfoot td          { padding: 16px 18px; border-top: 2px solid var(--border); font-weight: 800; }
.rp-table tfoot .rp-total-label {
    font-size: .8rem; color: var(--muted);
    text-transform: uppercase; letter-spacing: .06em;
    text-align: right;
}
.rp-table tfoot .rp-total-value {
    color: var(--green); font-size: 1.05rem; text-align: right;
}

/* ── Stato vuoto ── */
.rp-empty {
    padding: 60px 24px; text-align: center;
    display: flex; flex-direction: column;
    align-items: center; gap: 12px;
}
.rp-empty__icon {
    width: 56px; height: 56px;
    background: var(--off); border-radius: var(--r-md);
    display: flex; align-items: center; justify-content: center;
}
.rp-empty__icon i { width: 26px; height: 26px; color: var(--border); }
.rp-empty__title  { font-weight: 700; color: var(--navy); font-size: .95rem; }
.rp-empty__sub    { font-size: .82rem; color: var(--muted); }
.rp-empty__cta {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 10px 20px; border-radius: var(--r-sm);
    background: var(--amber); color: var(--navy);
    font-weight: 700; font-size: .85rem;
    margin-top: 4px; transition: background var(--t);
}
.rp-empty__cta:hover { background: var(--amber-lt); }
.rp-empty__cta i     { width: 14px; height: 14px; }

/* ── Nota risparmio commissioni ── */
.rp-note {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 14px 18px;
    background: rgba(124,58,237,.05);
    border-top: 1px solid var(--border);
    font-size: .78rem; color: var(--muted); line-height: 1.5;
}
.rp-note i        { width: 15px; height: 15px; color: var(--power); flex-shrink: 0; margin-top: 1px; }
.rp-note strong   { color: var(--power); }

/* ============================================================
   SALES SUMMARY — Print
   Scope: sales_summary.php
   ============================================================ */
@media print {
    .vb-topbar, .rp-toolbar, .rp-filter-row,
    .vb-footer, .rp-btn, .vb-mob-nav { display: none !important; }
    body          { background: white !important; }
    .rp-kpi       { box-shadow: none !important; }
    .rp-card      { box-shadow: none !important; }
    .rp-wrap      { padding: 0 !important; }
    .rp-header    { margin-bottom: 20px !important; }
}

/* ============================================================
   TOKEN ALIAS — retrocompatibilità dashboard.php
   Mappa i nomi lunghi usati in dashboard verso i token
   canonici già definiti in :root
   ============================================================ */
:root {
    --amber-light: #ffc947;   /* alias di --amber-lt     */
    --off-white:   #f7f8fa;   /* alias di --off          */
    --text-main:   #1a1f2e;   /* alias di --text         */
    --text-muted:  #6b7a99;   /* alias di --muted        */
    --border-dark: #1e3249;   /* alias di --border-dk    */
    --radius-sm:   6px;       /* alias di --r-sm         */
    --radius-md:   12px;      /* alias di --r-md         */
    --radius-lg:   20px;      /* alias di --r-lg         */
    --speed-color: #e67e22;   /* alias di --speed        */
    --power-color: #7c3aed;   /* alias di --power        */
    --pps-color:   #059669;   /* nuovo — verde PPS       */
    --font-body:   'DM Sans', system-ui, sans-serif;   /* alias di --font   */
    --font-display:'Playfair Display', Georgia, serif; /* alias di --font-d */
    --transition:  0.2s cubic-bezier(0.4,0,0.2,1);    /* alias di --t      */
    --shadow-sm:   0 2px 8px rgba(13,27,42,0.07);     /* alias di --sh-sm  */
    --shadow-md:   0 4px 20px rgba(13,27,42,0.10);    /* alias di --sh-md  */
    --shadow-lg:   0 8px 32px rgba(13,27,42,0.14);    /* nuovo             */
}

/* ============================================================
   MOBILE NAV ALIAS — dashboard usa .vb-mobile-btn/nav
   invece di .vb-mob-btn/nav già definiti
   Scope: dashboard.php (e futuri moduli con stesso naming)
   ============================================================ */
.vb-mobile-btn { display: none; background: none; border: none; color: white; padding: 8px; }
.vb-mobile-nav {
    display: none; position: fixed; inset: 0; z-index: 950;
    background: var(--navy); padding: 80px 24px 24px;
    flex-direction: column; gap: 8px;
}
.vb-mobile-nav.open { display: flex; }
.vb-mobile-nav .vb-nav-btn { font-size: 1rem; padding: 14px 16px; }
@media (max-width: 768px) {
    .vb-topbar__nav .vb-nav-btn:not(.primary):not(.vb-mobile-btn) { display: none; }
    .vb-mobile-btn { display: flex !important; }
}

/* ============================================================
   TOPBAR — msg-badge con animazione pulse-red
   Componente globale (notifiche messaggi)
   ============================================================ */
.msg-badge {
    position: absolute; top: 4px; right: 4px;
    background: #e11d48; color: white;
    font-size: 0.6rem; font-weight: 800;
    padding: 1px 5px; border-radius: 999px;
    min-width: 16px; text-align: center;
    animation: pulse-red 2s infinite;
}
@keyframes pulse-red {
    0%   { box-shadow: 0 0 0 0   rgba(225,29,72,.7); }
    70%  { box-shadow: 0 0 0 6px rgba(225,29,72,0);  }
    100% { box-shadow: 0 0 0 0   rgba(225,29,72,0);  }
}

/* ============================================================
   DASHBOARD — Layout principale
   Scope: dashboard.php
   ============================================================ */
.db-layout {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 24px;
    max-width: 1600px;
    margin: 0 auto;
    padding: 28px 24px;
    flex: 1;
}
@media (max-width: 1024px) {
    .db-layout { grid-template-columns: 1fr; }
    .db-sidebar { display: none; }
    .db-sidebar.visible { display: flex; }
}
@media (max-width: 600px) { .db-layout { padding: 16px; gap: 16px; } }

/* ============================================================
   DASHBOARD — Alert banner
   Scope: dashboard.php
   ============================================================ */
.db-alert {
    display: flex; align-items: center; gap: 10px;
    padding: 13px 18px; border-radius: var(--radius-md);
    font-size: 0.875rem; font-weight: 500;
    margin-bottom: 20px;
}
.db-alert--success { background: #f0fdf4; border: 1px solid #86efac; color: #166534; }
.db-alert--warning { background: #fffbeb; border: 1px solid #fde68a; color: #92400e; }
.db-alert i { width: 16px; height: 16px; flex-shrink: 0; }

/* ============================================================
   DASHBOARD — Sidebar
   Scope: dashboard.php
   ============================================================ */
.db-sidebar {
    display: flex; flex-direction: column; gap: 16px;
    align-self: start;
    position: sticky; top: 84px;
}

/* Widget card */
.db-widget {
    background: var(--white);
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}
.db-widget__header {
    padding: 16px 18px 0;
    display: flex; align-items: center; justify-content: space-between;
}
.db-widget__title {
    font-size: 0.78rem; font-weight: 700;
    color: var(--text-muted);
    text-transform: uppercase; letter-spacing: 0.06em;
}
.db-widget__body { padding: 14px 18px 18px; }

/* Stat numbers */
.db-stat-row {
    display: grid; grid-template-columns: 1fr 1fr;
    gap: 10px; margin-bottom: 16px;
}
.db-stat {
    background: var(--off-white);
    border-radius: var(--radius-sm);
    padding: 14px 12px; text-align: center;
}
.db-stat__label {
    font-size: 0.68rem; font-weight: 700;
    color: var(--text-muted); text-transform: uppercase;
    letter-spacing: 0.05em; margin-bottom: 6px; display: block;
}
.db-stat__value {
    font-size: 1.2rem; font-weight: 800;
    color: var(--navy); line-height: 1;
}
.db-stat__value.amber  { color: var(--amber); }
.db-stat__value.green  { color: var(--pps-color); }
.db-stat__value.purple { color: var(--power-color); }
.db-stat__value.blue   { color: #1d4ed8; }
.db-stat--locked       { cursor: pointer; position: relative; }
.db-stat--locked .db-stat__value { filter: blur(5px); opacity: .5; }
.db-stat__lock {
    position: absolute; top: 6px; right: 8px;
    font-size: 0.7rem; color: var(--power-color);
}

/* Azioni rapide sidebar */
.db-quick-actions { display: flex; flex-direction: column; gap: 8px; }
.db-qbtn {
    display: flex; align-items: center; gap: 10px;
    padding: 11px 14px; border-radius: var(--radius-sm);
    font-size: 0.875rem; font-weight: 600;
    border: none; transition: all var(--transition);
    cursor: pointer; text-decoration: none;
}
.db-qbtn--primary { background: var(--amber); color: var(--navy); }
.db-qbtn--primary:hover { background: var(--amber-light); }
.db-qbtn--navy  { background: var(--navy); color: white; }
.db-qbtn--navy:hover { background: var(--navy-light); }
.db-qbtn--power {
    background: rgba(124,58,237,0.08); color: var(--power-color);
    border: 1px solid rgba(124,58,237,0.2);
}
.db-qbtn--power:hover { background: rgba(124,58,237,0.14); }
.db-qbtn--ghost {
    background: var(--off-white); color: var(--text-muted);
    border: 1px solid var(--border);
}
.db-qbtn--ghost:hover { background: var(--border); color: var(--text-main); }
.db-qbtn--msg {
    background: rgba(5,150,105,0.08); color: var(--pps-color);
    border: 1px solid rgba(5,150,105,0.2);
}
.db-qbtn--msg:hover { background: rgba(5,150,105,0.15); }
.db-qbtn i { width: 16px; height: 16px; flex-shrink: 0; }
.db-qbtn__badge {
    margin-left: auto;
    background: #e11d48; color: white;
    font-size: 0.65rem; font-weight: 800;
    padding: 2px 7px; border-radius: 999px;
}

/* Radar list */
.db-radar-list { list-style: none; display: flex; flex-direction: column; gap: 0; }
.db-radar-item {
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 0; border-bottom: 1px solid var(--border);
    font-size: 0.82rem;
}
.db-radar-item:last-child { border-bottom: none; }
.db-radar-item__kw  { font-weight: 600; color: var(--text-main); }
.db-radar-item__cat { color: var(--text-muted); font-size: 0.75rem; }
.db-radar-item__off {
    background: none; border: none; cursor: pointer;
    color: var(--text-muted); padding: 4px; border-radius: 4px;
    transition: color var(--transition);
    display: flex; align-items: center;
}
.db-radar-item__off:hover { color: #e11d48; }
.db-radar-item__off i { width: 14px; height: 14px; }

/* ============================================================
   DASHBOARD — Sezione principale
   Scope: dashboard.php
   ============================================================ */
.db-main { display: flex; flex-direction: column; gap: 20px; min-width: 0; }

/* Trattative */
.db-neg-card {
    background: var(--white);
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
    border-left: 4px solid var(--pps-color);
    box-shadow: var(--shadow-sm); overflow: hidden;
}
.db-neg-card__header {
    padding: 16px 20px;
    display: flex; align-items: center; gap: 8px;
    border-bottom: 1px solid var(--border);
}
.db-neg-card__title {
    font-family: var(--font-display);
    font-size: 1rem; font-weight: 700; color: var(--navy);
}
.db-neg-body  { padding: 16px 20px; display: flex; flex-direction: column; gap: 12px; }
.db-neg-row {
    display: flex; align-items: center; justify-content: space-between;
    background: var(--off-white);
    border-radius: var(--radius-sm);
    padding: 12px 14px; gap: 12px; flex-wrap: wrap;
}
.db-neg-row__info  { flex: 1; min-width: 0; }
.db-neg-row__title { font-size: .88rem; font-weight: 600; color: var(--navy); margin-bottom: 2px; }
.db-neg-row__meta  { font-size: .78rem; color: var(--text-muted); }
.db-neg-row__price { font-weight: 800; color: var(--pps-color); }
.db-neg-row__btns  { display: flex; gap: 6px; flex-shrink: 0; }
.db-neg-btn {
    padding: 7px 14px; border-radius: var(--radius-sm);
    font-size: 0.78rem; font-weight: 700;
    border: none; cursor: pointer; transition: all var(--transition);
}
.db-neg-btn--accept       { background: var(--pps-color); color: white; }
.db-neg-btn--accept:hover { background: #047857; }
.db-neg-btn--reject       { background: #fee2e2; color: #be123c; }
.db-neg-btn--reject:hover { background: #fecaca; }
.db-proposals-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 10px; margin-top: 8px;
}
.db-proposal-card {
    background: white; border: 1px solid var(--border);
    border-radius: var(--radius-sm); padding: 10px 12px; font-size: .82rem;
}
.db-proposal-card__title  { font-weight: 600; color: var(--navy); margin-bottom: 4px; }
.db-proposal-card__price  { color: var(--text-muted); }
.db-proposal-card__status {
    float: right; font-weight: 700; font-size: .72rem; text-transform: uppercase;
}

/* Section card */
.db-section-card {
    background: var(--white);
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
    box-shadow: var(--shadow-sm); overflow: hidden;
}
.db-section-card__header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 18px 20px; border-bottom: 1px solid var(--border);
}
.db-section-card__title {
    font-family: var(--font-display);
    font-size: 1.05rem; font-weight: 700; color: var(--navy);
}
.db-section-card__link {
    font-size: .82rem; color: var(--amber); font-weight: 600;
    transition: color var(--transition);
}
.db-section-card__link:hover { color: var(--amber-light); }
.db-section-card__body { padding: 18px 20px; }

/* Search + toolbar */
.db-search-row { display: flex; gap: 8px; margin-bottom: 14px; }
.db-search-input {
    flex: 1; padding: 10px 14px;
    border: 1.5px solid var(--border); border-radius: var(--radius-sm);
    font-family: var(--font-body); font-size: .875rem;
    background: var(--off-white); color: var(--text-main);
    outline: none; transition: border-color .2s;
}
.db-search-input:focus { border-color: var(--amber); background: white; }
.db-search-btn {
    padding: 10px 18px; border-radius: var(--radius-sm);
    background: var(--navy); color: white;
    font-size: .875rem; font-weight: 600; border: none;
    transition: background var(--transition);
}
.db-search-btn:hover { background: var(--navy-light); }
.db-toolbar {
    display: flex; align-items: center;
    justify-content: space-between; flex-wrap: wrap; gap: 10px;
    margin-bottom: 16px;
}
.db-sort-group {
    display: flex; align-items: center; gap: 6px;
    font-size: .82rem; color: var(--text-muted);
}
.db-sort-btn {
    padding: 6px 12px; border-radius: var(--radius-sm);
    border: 1px solid var(--border); background: white;
    font-size: .8rem; font-weight: 600; color: var(--text-main);
    cursor: pointer; transition: all .15s;
}
.db-sort-btn:hover  { border-color: var(--amber); color: var(--amber); background: #fffbeb; }
.db-sort-btn.active { background: var(--navy); border-color: var(--navy); color: white; }
.db-layout-group { display: flex; gap: 4px; }
.db-layout-btn {
    width: 34px; height: 34px; border-radius: var(--radius-sm);
    border: 1px solid var(--border); background: white;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; transition: all .15s; padding: 0;
}
.db-layout-btn:hover       { border-color: var(--amber); background: #fffbeb; }
.db-layout-btn.active      { background: var(--navy); border-color: var(--navy); }
.db-layout-btn.active svg  { stroke: white; }
.db-layout-btn svg         { stroke: var(--text-muted); fill: none; stroke-width: 1.8; display: block; }

/* ============================================================
   DASHBOARD — Griglia card oggetti
   Scope: dashboard.php
   ============================================================ */
#items-zone.loading { opacity: .4; pointer-events: none; transition: opacity .15s; }
.db-items-grid { display: grid; gap: 14px; }
.db-items-grid.layout-6 { grid-template-columns: repeat(auto-fill, minmax(175px, 1fr)); }
.db-items-grid.layout-4 { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.db-items-grid.layout-1 { grid-template-columns: 1fr; }

.db-card {
    background: white;
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
    display: flex; flex-direction: column;
    position: relative; overflow: hidden;
    transition: box-shadow var(--transition), transform var(--transition);
}
.db-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }

/* Layout orizzontale (layout-1) */
.db-items-grid.layout-1 .db-card            { flex-direction: row; align-items: flex-start; }
.db-items-grid.layout-1 .db-card__media     { width: 110px; flex-shrink: 0; height: 110px; }
.db-items-grid.layout-1 .db-card__body      { flex: 1; padding: 12px 14px; }
.db-items-grid.layout-1 .db-card__desc      { display: block !important; }
.db-items-grid.layout-1 .db-card__actions   {
    flex-direction: column; justify-content: center;
    border-top: none; border-left: 1px solid var(--border);
    padding: 0 12px; gap: 6px;
}

.db-card__badges {
    position: absolute; top: 8px; left: 8px;
    display: flex; flex-direction: column; gap: 3px; z-index: 3;
}
.db-badge {
    font-size: .58rem; font-weight: 800;
    padding: 2px 7px; border-radius: 999px;
    color: white; text-transform: uppercase; letter-spacing: .04em;
    width: fit-content;
}
.db-badge--boost    { background: linear-gradient(135deg,#f59e0b,#d97706); }
.db-badge--pps      { background: var(--pps-color); }
.db-badge--pending  { background: #f0a500; color: var(--navy); }
.db-badge--rejected { background: #e11d48; }

.db-card__media {
    height: 150px; background: var(--off-white);
    overflow: hidden; flex-shrink: 0;
}
.db-card__placeholder {
    width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
    color: var(--border);
}
.db-thumb-strip {
    display: flex; height: 100%;
    overflow-x: auto; scroll-snap-type: x mandatory;
    scrollbar-width: none;
}
.db-thumb-strip::-webkit-scrollbar { display: none; }
.db-thumb-strip img {
    flex: 0 0 100%; width: 100%; height: 100%;
    object-fit: cover; scroll-snap-align: start;
    cursor: zoom-in; transition: transform .4s;
}
.db-card:hover .db-thumb-strip img:first-child { transform: scale(1.04); }

.db-card__body  { padding: 12px 12px 8px; flex: 1; display: flex; flex-direction: column; gap: 5px; }
.db-card__title {
    font-size: .84rem; font-weight: 600; color: var(--navy); line-height: 1.3;
    display: -webkit-box; -webkit-line-clamp: 2;
    -webkit-box-orient: vertical; overflow: hidden;
}
.db-card__price  { font-size: .95rem; font-weight: 800; color: var(--amber); letter-spacing: -.01em; }
.db-card__status { font-size: .72rem; font-weight: 600; margin-top: auto; }
.db-card__desc   { display: none; font-size: .76rem; color: var(--text-muted); line-height: 1.4; margin-top: 4px; }
.db-card__actions {
    display: flex; align-items: center; justify-content: space-between;
    padding: 8px 12px; border-top: 1px solid var(--border); gap: 4px;
}
.db-action-btn {
    display: flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; border-radius: var(--radius-sm);
    background: var(--off-white); border: 1px solid var(--border);
    font-size: .9rem; text-decoration: none;
    transition: all var(--transition); cursor: pointer;
}
.db-action-btn:hover         { background: var(--border); transform: scale(1.08); }
.db-action-btn--danger:hover { background: #fee2e2; border-color: #fca5a5; }
.db-action-btn--toggle:hover { background: #f0fdf4; border-color: #86efac; }

/* ============================================================
   DASHBOARD — Paginatore
   Scope: dashboard.php
   ============================================================ */
.db-paginator {
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: 10px;
    padding: 14px 0; border-top: 1px solid var(--border);
}
.db-paginator__info { font-size: .82rem; color: var(--text-muted); }
.db-paginator__info strong { color: var(--text-main); }
.db-paginator__pages { display: flex; gap: 4px; flex-wrap: wrap; }
.pg-link, .pg-current, .pg-dots {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 32px; height: 32px; padding: 0 8px;
    border-radius: var(--radius-sm); font-size: .82rem; font-weight: 600;
    border: 1px solid var(--border); background: white; color: var(--text-main);
    text-decoration: none; transition: all .15s;
}
.pg-link:hover  { border-color: var(--amber); color: var(--amber); background: #fffbeb; cursor: pointer; }
.pg-current     { background: var(--navy); border-color: var(--navy); color: white; cursor: default; }
.pg-dots        { border: none; background: none; cursor: default; color: #aaa; }
.db-paginator__pp { display: flex; align-items: center; gap: 6px; font-size: .82rem; color: var(--text-muted); }
.pp-select {
    padding: 5px 8px; border: 1px solid var(--border);
    border-radius: var(--radius-sm); font-size: .82rem;
    background: white; cursor: pointer;
}

/* ============================================================
   DASHBOARD — Lightbox
   Scope: dashboard.php
   ============================================================ */
#db-lightbox {
    display: none; position: fixed; inset: 0; z-index: 20000;
    background: rgba(4,9,20,0.97);
    align-items: center; justify-content: center; flex-direction: column;
}
#db-lightbox.open { display: flex; }
#db-lightbox img  { max-width: 92%; max-height: 86vh; border-radius: 6px; object-fit: contain; }
.db-lb-close {
    position: absolute; top: 16px; right: 16px;
    width: 36px; height: 36px; border-radius: 50%;
    background: rgba(255,255,255,.1); border: none;
    display: flex; align-items: center; justify-content: center;
    color: white; cursor: pointer; transition: background var(--transition);
}
.db-lb-close:hover { background: rgba(255,255,255,.2); }
.db-lb-close i     { width: 18px; height: 18px; }

/* ============================================================
   FOOTER — override max-width per pagine 1600px
   Scope: dashboard.php + pagine wide-layout
   ============================================================ */
.db-layout ~ .vb-footer .vb-footer__inner,
.vb-footer__inner--wide { max-width: 1600px; }

@media (max-width: 600px) {
    .vb-footer__inner { justify-content: center; text-align: center; }
}

/* ============================================================
   AUTH — Layout split (visual + panel)
   Componente globale: register.php, login.php e future
   pagine di autenticazione standalone (no topbar/footer)
   ============================================================ */
.auth-page {
    min-height: 100%;
    background: var(--navy);
    display: flex;
    align-items: stretch;
}
@media (max-width: 800px) {
    .auth-page { flex-direction: column; }
}

/* ── Colonna sinistra — brand visuale ── */
.auth-visual {
    flex: 1;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 48px;
    background: var(--navy);
}
.auth-visual__bg {
    position: absolute; inset: 0;
    background-size: cover;
    background-position: center;
    opacity: 0.25;
}
.auth-visual__gradient {
    position: absolute; inset: 0;
    background:
        linear-gradient(160deg, rgba(13,27,42,.6) 0%, rgba(13,27,42,.1) 40%, transparent 70%),
        linear-gradient(to top, rgba(13,27,42,1) 0%, rgba(13,27,42,.4) 40%, transparent 100%);
}
.auth-visual__content { position: relative; z-index: 2; }

.auth-brand {
    font-family: var(--font-d);
    font-size: 3rem; font-weight: 800;
    color: var(--white); letter-spacing: -.02em;
    line-height: 1; margin-bottom: 12px;
}
.auth-brand span { color: var(--amber); }

.auth-slogan {
    font-size: 1.05rem;
    color: rgba(255,255,255,.6);
    font-style: italic;
    margin-bottom: 36px; line-height: 1.5;
}

/* Perks list */
.auth-perks { list-style: none; display: flex; flex-direction: column; gap: 14px; }
.auth-perk {
    display: flex; align-items: flex-start; gap: 12px;
    font-size: .9rem; color: rgba(255,255,255,.75); line-height: 1.45;
}
.auth-perk__dot {
    width: 22px; height: 22px; border-radius: 50%;
    background: rgba(240,165,0,.2);
    border: 1.5px solid rgba(240,165,0,.5);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; margin-top: 1px;
}
.auth-perk__dot svg { width: 11px; height: 11px; color: var(--amber); }
.auth-perk strong { color: var(--white); }

/* Promo badge */
.auth-promo {
    display: inline-flex; align-items: center; gap: 8px;
    background: linear-gradient(135deg, rgba(240,165,0,.2), rgba(240,165,0,.08));
    border: 1px solid rgba(240,165,0,.4);
    border-radius: var(--r-md);
    padding: 12px 16px; margin-bottom: 28px;
    font-size: .82rem; color: var(--amber); font-weight: 600;
}
.auth-promo strong { color: var(--amber-lt); font-size: .95rem; }

@media (max-width: 800px) {
    .auth-visual { flex: none; min-height: 260px; padding: 24px; justify-content: flex-end; }
    .auth-brand  { font-size: 2rem; }
    .auth-promo  { display: none; }
    .auth-perks  { display: none; }
}

/* ── Colonna destra — form panel ── */
.auth-panel {
    width: 480px; flex-shrink: 0;
    background: var(--white);
    display: flex; flex-direction: column; justify-content: center;
    padding: 52px 48px; position: relative;
}
.auth-panel__logo {
    font-family: var(--font-d);
    font-size: 1.4rem; font-weight: 800;
    color: var(--navy); margin-bottom: 28px;
}
.auth-panel__logo span { color: var(--amber); }
.auth-panel__footer {
    position: absolute; bottom: 20px;
    left: 48px; right: 48px;
    text-align: center;
    font-size: .72rem; color: #c4cbda;
}

@media (max-width: 800px) {
    .auth-panel         { width: 100%; padding: 36px 24px 64px; }
    .auth-panel__logo   { display: none; }
    .auth-panel__footer { left: 24px; right: 24px; }
}

/* ── Testi form ── */
.auth-title {
    font-family: var(--font-d);
    font-size: 1.75rem; font-weight: 700;
    color: var(--navy); line-height: 1.2; margin-bottom: 6px;
}
.auth-sub {
    font-size: .9rem; color: var(--muted);
    margin-bottom: 28px; line-height: 1.5;
}

/* Speed badge inline */
.speed-inline {
    display: inline-flex; align-items: center; gap: 4px;
    background: rgba(230,126,34,.1);
    border: 1px solid rgba(230,126,34,.3);
    color: var(--speed-color);
    font-size: .72rem; font-weight: 700;
    padding: 2px 9px; border-radius: 999px;
    vertical-align: middle; margin-left: 4px;
}

/* ── Campi form ── */
.auth-field  { margin-bottom: 16px; }
.auth-label  {
    display: block; font-size: .82rem; font-weight: 600;
    color: #374151; margin-bottom: 7px; letter-spacing: .02em;
}
.auth-hint { font-size: .72rem; color: #9ba8c0; margin-top: 5px; }

.auth-input {
    width: 100%; padding: 13px 16px;
    border: 1.5px solid var(--border); border-radius: var(--r-md);
    font-family: var(--font); font-size: .9rem;
    color: var(--navy); background: var(--off);
    outline: none;
    transition: border-color .2s, box-shadow .2s, background .2s;
    -webkit-appearance: none;
}
.auth-input:focus {
    border-color: var(--amber);
    box-shadow: 0 0 0 3px rgba(240,165,0,.14);
    background: var(--white);
}
.auth-input::placeholder { color: #9ba8c0; }
.auth-input.valid { border-color: var(--green); }

/* Password strength meter */
.pw-strength { margin-top: 6px; display: flex; gap: 4px; }
.pw-bar {
    flex: 1; height: 3px; border-radius: 999px;
    background: var(--border);
    transition: background .3s;
}
.pw-bar.active-1 { background: var(--red); }
.pw-bar.active-2 { background: var(--amber); }
.pw-bar.active-3 { background: var(--green); }

/* ── CTA ── */
.auth-btn {
    width: 100%; padding: 14px;
    background: var(--amber); color: var(--navy);
    font-family: var(--font); font-size: .95rem; font-weight: 800;
    border: none; border-radius: var(--r-md);
    cursor: pointer; margin-top: 10px;
    transition: background .2s, transform .15s;
    letter-spacing: .01em;
}
.auth-btn:hover  { background: var(--amber-lt); transform: translateY(-1px); }
.auth-btn:active { transform: none; }

/* ── Elementi ausiliari ── */
.auth-terms {
    font-size: .75rem; color: #9ba8c0;
    text-align: center; margin-top: 14px; line-height: 1.5;
}
.auth-terms a { color: var(--muted); }

.auth-divider {
    display: flex; align-items: center; gap: 12px;
    margin: 22px 0; color: #c4cbda; font-size: .78rem;
}
.auth-divider::before, .auth-divider::after {
    content: ''; flex: 1; height: 1px; background: var(--border);
}

.auth-link-row {
    text-align: center; font-size: .875rem; color: var(--muted);
}
.auth-link-row a {
    color: var(--amber); font-weight: 600;
    text-decoration: none; transition: color .2s;
}
.auth-link-row a:hover { color: #d97706; }

/* Alert errori auth */
.auth-alert {
    padding: 12px 16px; border-radius: var(--r-md);
    font-size: .875rem; font-weight: 500;
    display: flex; align-items: center; gap: 10px;
}
.auth-alert--error {
    background: #fff1f2; border: 1px solid #fda4af; color: #be123c;
}
.auth-alert svg { width: 16px; height: 16px; flex-shrink: 0; }

/* ============================================================
   AUTH — Componenti aggiuntivi login.php
   ============================================================ */

/* Pills feature (colonna visuale login) */
.auth-pills {
    display: flex; flex-wrap: wrap; gap: 8px;
}
.auth-pill {
    display: inline-flex; align-items: center; gap: 6px;
    background: rgba(240,165,0,.12);
    border: 1px solid rgba(240,165,0,.3);
    color: var(--amber);
    font-size: .75rem; font-weight: 600;
    letter-spacing: .05em; text-transform: uppercase;
    padding: 6px 14px; border-radius: 999px;
}
@media (max-width: 768px) { .auth-pills { display: none; } }

/* Alert success (già presente --error, aggiunto --success) */
.auth-alert--success {
    background: #f0fdf4;
    border: 1px solid #86efac;
    color: #166534;
}

/* ============================================================
   TOKEN AGGIUNTIVI — subscription_plans.php
   ============================================================ */
:root {
    --radius-xl:        28px;
    --text-light:       #9ba8c0;
    --card-shadow:      0 2px 20px rgba(13,27,42,0.08);
    --card-shadow-hover:0 12px 40px rgba(13,27,42,0.16);
}

/* ============================================================
   LAYOUT — .vb-container (contenitore centrato largo)
   Componente globale riutilizzabile
   ============================================================ */
.vb-container {
    width: min(100%, 1200px);
    margin: 0 auto;
    padding: 0 24px;
}

/* ============================================================
   SUBSCRIPTION PLANS — Hero pricing
   Scope: subscription_plans.php
   ============================================================ */
.pricing-hero {
    background: var(--navy);
    padding: 72px 0 80px;
    text-align: center;
    position: relative;
    overflow: hidden;
}
.pricing-hero::before {
    content: '';
    position: absolute; inset: 0;
    background:
        radial-gradient(ellipse 60% 50% at 20% 50%, rgba(240,165,0,.08) 0%, transparent 70%),
        radial-gradient(ellipse 50% 60% at 80% 30%, rgba(124,58,237,.07) 0%, transparent 70%);
    pointer-events: none;
}
.pricing-hero__eyebrow {
    display: inline-flex; align-items: center; gap: 6px;
    background: rgba(240,165,0,.12);
    border: 1px solid rgba(240,165,0,.3);
    color: var(--amber);
    font-size: .72rem; font-weight: 700; letter-spacing: .12em;
    text-transform: uppercase; padding: 5px 14px; border-radius: 999px;
    margin-bottom: 20px;
}
.pricing-hero__eyebrow i { width: 12px; height: 12px; }
.pricing-hero__title {
    font-family: var(--font-d);
    font-size: clamp(2rem, 5vw, 3.2rem);
    font-weight: 800; color: var(--white);
    line-height: 1.15; margin-bottom: 16px;
}
.pricing-hero__title em { color: var(--amber); font-style: normal; }
.pricing-hero__sub {
    font-size: 1.05rem; color: rgba(255,255,255,.6);
    max-width: 520px; margin: 0 auto 32px; line-height: 1.7;
}

/* Trust badges */
.pricing-trust {
    display: flex; align-items: center; justify-content: center;
    gap: 24px; flex-wrap: wrap;
}
.trust-item {
    display: flex; align-items: center; gap: 7px;
    font-size: .8rem; color: rgba(255,255,255,.5);
}
.trust-item i { width: 14px; height: 14px; color: var(--amber); }

/* ============================================================
   SUBSCRIPTION PLANS — Sezione cards
   Scope: subscription_plans.php
   ============================================================ */
.pricing-section { padding: 64px 0 80px; }

.current-plan-banner {
    background: rgba(240,165,0,.08);
    border: 1px solid rgba(240,165,0,.25);
    border-radius: var(--radius-md);
    padding: 12px 20px;
    display: flex; align-items: center; gap: 10px;
    font-size: .875rem; color: var(--text-main);
    margin-bottom: 40px;
}
.current-plan-banner i        { width: 18px; height: 18px; color: var(--amber); flex-shrink: 0; }
.current-plan-banner strong   { color: var(--navy); }

/* Griglia 3 card */
.plans-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    align-items: stretch;
}
@media (max-width: 900px) { .plans-grid { grid-template-columns: 1fr; gap: 20px; } }
@media (max-width: 600px) { .plans-grid { gap: 16px; } }

/* ── Singola card piano ── */
.plan-card {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 32px 28px 28px;
    display: flex; flex-direction: column;
    position: relative;
    transition: box-shadow var(--t), transform var(--t);
}
.plan-card:hover { box-shadow: var(--card-shadow-hover); }

/* Bordi adiacenti alla featured card */
.plan-card:first-child {
    border-radius: var(--radius-lg) 0 0 var(--radius-lg);
    border-right: none;
    margin-top: 40px; margin-bottom: 40px;
}
.plan-card:last-child {
    border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
    border-left: none;
    margin-top: 40px; margin-bottom: 40px;
}
@media (max-width: 900px) {
    .plan-card:first-child,
    .plan-card:last-child {
        border-radius: var(--radius-lg);
        border: 1px solid var(--border);
        margin: 0;
    }
}

/* Card featured (Speed Seller) */
.plan-card--featured {
    background: var(--navy);
    border: 2px solid var(--amber);
    border-radius: var(--radius-lg) !important;
    z-index: 2;
    box-shadow: 0 20px 60px rgba(13,27,42,.28), 0 0 0 1px var(--amber);
    transform: scale(1.02);
    margin: 0 !important;
    padding: 44px 30px 32px;
}
.plan-card--featured:hover {
    box-shadow: 0 28px 72px rgba(13,27,42,.35), 0 0 0 1px var(--amber);
    transform: scale(1.04);
}
@media (max-width: 600px) {
    .plan-card--featured       { transform: none; }
    .plan-card--featured:hover { transform: none; }
}

/* Badge "IL PIÙ SCELTO" */
.plan-badge {
    position: absolute; top: -1px; left: 50%;
    transform: translateX(-50%);
    background: var(--amber); color: var(--navy);
    font-size: .7rem; font-weight: 800; letter-spacing: .1em;
    text-transform: uppercase; padding: 6px 20px;
    border-radius: 0 0 var(--r-sm) var(--r-sm);
    white-space: nowrap;
    display: flex; align-items: center; gap: 5px;
}
.plan-badge i { width: 11px; height: 11px; }

/* Piano nome */
.plan-name {
    font-size: .75rem; font-weight: 800; letter-spacing: .12em;
    text-transform: uppercase; color: var(--muted);
    margin-bottom: 6px;
}
.plan-card--featured .plan-name { color: rgba(255,255,255,.55); }

/* Prezzo */
.plan-price { display: flex; align-items: flex-end; gap: 4px; margin-bottom: 4px; }
.plan-price__amount {
    font-family: var(--font-d);
    font-size: clamp(2.4rem, 5vw, 3rem);
    font-weight: 800; color: var(--text); line-height: 1;
}
.plan-card--featured .plan-price__amount { color: var(--amber); }
.plan-price__period { font-size: .9rem; color: var(--muted); margin-bottom: 6px; }
.plan-card--featured .plan-price__period { color: rgba(255,255,255,.5); }
.plan-price__note { font-size: .78rem; color: var(--text-light); margin-bottom: 24px; }
.plan-card--featured .plan-price__note { color: rgba(255,255,255,.4); }

/* Separatore */
.plan-divider { height: 1px; background: var(--border); margin-bottom: 22px; }
.plan-card--featured .plan-divider { background: rgba(255,255,255,.12); }

/* Lista features */
.plan-features {
    list-style: none; flex: 1;
    display: flex; flex-direction: column; gap: 11px;
    margin-bottom: 28px;
}
.plan-feature {
    display: flex; align-items: flex-start; gap: 10px;
    font-size: .875rem; color: var(--text); line-height: 1.4;
}
.plan-card--featured .plan-feature { color: rgba(255,255,255,.85); }
.plan-feature--disabled            { opacity: .35; }
.plan-feature--disabled .pf-icon   { color: var(--text-light) !important; }

.pf-icon          { flex-shrink: 0; width: 17px; height: 17px; margin-top: 1px; }
.pf-icon--check   { color: var(--pps-color); }
.pf-icon--cross   { color: #e11d48; }
.pf-icon--pin     { color: var(--amber); }

/* Highlight badge features */
.pf-highlight {
    display: inline-flex; align-items: center; gap: 3px;
    background: rgba(240,165,0,.12); color: var(--amber);
    border: 1px solid rgba(240,165,0,.25);
    font-size: .72rem; font-weight: 700;
    padding: 1px 7px; border-radius: 999px; letter-spacing: .04em;
    margin-left: 4px; vertical-align: middle;
}

/* CTA button */
.plan-cta {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    width: 100%; padding: 15px 24px; border-radius: var(--radius-md);
    font-family: var(--font); font-size: .95rem; font-weight: 700;
    border: none; transition: all var(--t); cursor: pointer;
    letter-spacing: .01em;
}
.plan-cta--free {
    background: var(--off); color: var(--text);
    border: 1.5px solid var(--border);
}
.plan-cta--free:hover { background: var(--border); }
.plan-cta--speed {
    background: var(--amber); color: var(--navy);
    box-shadow: 0 6px 24px rgba(240,165,0,.4);
}
.plan-cta--speed:hover {
    background: var(--amber-lt); transform: translateY(-2px);
    box-shadow: 0 10px 32px rgba(240,165,0,.5);
}
.plan-cta--power {
    background: var(--power); color: var(--white);
    box-shadow: 0 6px 20px rgba(124,58,237,.3);
}
.plan-cta--power:hover {
    background: #6d28d9; transform: translateY(-2px);
    box-shadow: 0 10px 28px rgba(124,58,237,.4);
}
.plan-cta i { width: 16px; height: 16px; }

/* Badge "Piano attuale" */
.plan-current-badge {
    display: flex; align-items: center; justify-content: center; gap: 6px;
    width: 100%; padding: 13px; border-radius: var(--radius-md);
    background: rgba(5,150,105,.08);
    border: 1.5px solid rgba(5,150,105,.3);
    color: var(--pps-color); font-weight: 700; font-size: .9rem;
}
.plan-current-badge i { width: 16px; height: 16px; }

/* ============================================================
   SUBSCRIPTION PLANS — Tabella comparativa
   Scope: subscription_plans.php
   ============================================================ */
.comparison-section {
    padding: 64px 0 80px;
    background: var(--white);
    border-top: 1px solid var(--border);
}
.comparison-section__header  { text-align: center; margin-bottom: 40px; }
.comparison-section__eyebrow {
    display: inline-flex; align-items: center; gap: 6px;
    color: var(--amber); font-size: .72rem; font-weight: 700;
    letter-spacing: .1em; text-transform: uppercase; margin-bottom: 8px;
}
.comparison-section__eyebrow i { width: 12px; height: 12px; }
.comparison-section__title {
    font-family: var(--font-d);
    font-size: clamp(1.4rem, 3vw, 2rem); font-weight: 700;
    color: var(--text);
}

.comp-table-wrap { overflow-x: auto; }
.comp-table {
    width: 100%; border-collapse: collapse;
    font-size: .875rem;
}
.comp-table th {
    padding: 14px 20px; text-align: center;
    background: var(--off); border-bottom: 2px solid var(--border);
    font-weight: 700; color: var(--text);
    font-size: .82rem; text-transform: uppercase; letter-spacing: .06em;
}
.comp-table th:first-child  { text-align: left; }
.comp-table th.th-featured  { background: var(--navy); color: var(--amber); border-bottom-color: var(--amber); }
.comp-table td {
    padding: 13px 20px; text-align: center;
    border-bottom: 1px solid var(--border); color: var(--text);
}
.comp-table td:first-child    { text-align: left; color: var(--muted); font-weight: 500; }
.comp-table tr:hover td       { background: var(--off); }
.comp-table .td-featured      { background: rgba(13,27,42,.03); font-weight: 600; color: var(--navy); }
.comp-table .check            { color: var(--pps-color); }
.comp-table .cross            { color: #e11d48; opacity: .4; }
.comp-check i                 { width: 16px; height: 16px; vertical-align: middle; }
.comp-cross i                 { width: 16px; height: 16px; vertical-align: middle; opacity: .4; }

/* ============================================================
   SUBSCRIPTION PLANS — FAQ
   Scope: subscription_plans.php
   ============================================================ */
.faq-section { padding: 64px 0; }
.faq-section__header { text-align: center; margin-bottom: 40px; }
.faq-section__title {
    font-family: var(--font-d);
    font-size: clamp(1.3rem, 3vw, 1.8rem); font-weight: 700;
}
.faq-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
}
.faq-item {
    background: var(--white); border: 1px solid var(--border);
    border-radius: var(--radius-md); padding: 20px 22px;
}
.faq-item__q {
    display: flex; align-items: flex-start; gap: 10px;
    font-weight: 700; font-size: .88rem; color: var(--text);
    margin-bottom: 8px;
}
.faq-item__q i { width: 16px; height: 16px; color: var(--amber); flex-shrink: 0; margin-top: 2px; }
.faq-item__a   { font-size: .82rem; color: var(--muted); line-height: 1.6; }

/* ============================================================
   SUBSCRIPTION PLANS — Footer override (bottom-only)
   Scope: subscription_plans.php
   ============================================================ */
.vb-footer__bottom {
    padding: 22px 0;
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: 12px;
    font-size: .78rem; color: rgba(255,255,255,.35);
}
.vb-footer__bottom a       { color: rgba(255,255,255,.35); }
.vb-footer__bottom a:hover { color: var(--amber); }

/* ============================================================
   SUBSCRIPTION PLANS — Modale pagamento
   Scope: subscription_plans.php
   ============================================================ */
#pay-modal {
    display: none; position: fixed; inset: 0; z-index: 10000;
    background: rgba(4,9,20,.85); backdrop-filter: blur(6px);
    align-items: center; justify-content: center; padding: 20px;
}
#pay-modal.open { display: flex; }

.pay-modal-box {
    background: var(--white); border-radius: var(--radius-xl);
    padding: 36px; width: min(100%, 460px);
    box-shadow: 0 32px 64px rgba(0,0,0,.4);
    text-align: center;
}
.pay-modal-box__icon {
    width: 56px; height: 56px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto 16px;
}
.pay-modal-box__icon--speed { background: rgba(240,165,0,.12); color: var(--amber); }
.pay-modal-box__icon--power { background: rgba(124,58,237,.1);  color: var(--power); }
.pay-modal-box__icon i      { width: 26px; height: 26px; }
.pay-modal-box h2 {
    font-family: var(--font-d);
    font-size: 1.4rem; font-weight: 700; margin-bottom: 6px;
}
.pay-modal-box p {
    font-size: .875rem; color: var(--muted);
    margin-bottom: 24px; line-height: 1.6;
}
.pay-modal-price {
    font-size: 2.2rem; font-weight: 800; color: var(--text);
    letter-spacing: -.03em; margin-bottom: 24px;
}
.pay-modal-price span { font-size: 1rem; color: var(--muted); font-weight: 400; }

.pay-modal-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pay-btn-confirm {
    padding: 14px; border-radius: var(--radius-md);
    font-family: var(--font); font-size: .9rem; font-weight: 700;
    border: none; transition: all var(--t);
}
.pay-btn-confirm--speed       { background: var(--amber); color: var(--navy); }
.pay-btn-confirm--speed:hover { background: var(--amber-lt); }
.pay-btn-confirm--power       { background: var(--power); color: white; }
.pay-btn-confirm--power:hover { background: #6d28d9; }
.pay-btn-cancel {
    padding: 14px; border-radius: var(--radius-md);
    background: var(--off); color: var(--text);
    font-family: var(--font); font-size: .9rem; font-weight: 600;
    border: 1px solid var(--border); transition: background var(--t);
}
.pay-btn-cancel:hover { background: var(--border); }

/* ============================================================
   EDIT LISTING — Struttura form e header card
   Scope: edit_listing.php
   ============================================================ */
.el-card-header {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 24px;
}
.el-card-header__title {
    font-family: var(--font-d);
    font-size: 1.25rem; font-weight: 700;
    color: var(--navy); margin: 0;
}
.el-card-header__id {
    font-size: .78rem; color: var(--muted);
    background: var(--off); border: 1px solid var(--border);
    padding: 4px 10px; border-radius: 999px; font-weight: 600;
}

/* Grid 2 colonne per campi affiancati */
.el-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
}
@media (max-width: 600px) { .el-grid-2 { grid-template-columns: 1fr; } }

/* Grid CTA footer form */
.el-grid-cta {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 10px;
    margin-top: 30px;
}
@media (max-width: 480px) { .el-grid-cta { grid-template-columns: 1fr; } }

/* Separatore sezione */
.el-divider {
    border: 0; border-top: 1px solid var(--border);
    margin: 28px 0;
}

/* Titolo sezione interna */
.el-section-title {
    font-family: var(--font-d);
    font-size: 1rem; font-weight: 700;
    margin-bottom: 14px;
}
.el-section-title--accent { color: var(--accent-color); }
.el-section-title--pps    { color: var(--pps-color); }

/* ============================================================
   EDIT LISTING — AI Group boxes
   Scope: edit_listing.php (+ new_listing.php già usa .expert-advice-box)
   ============================================================ */
.ai-group {
    background: var(--off);
    border: 1px solid var(--border);
    padding: 16px; border-radius: var(--r-md);
    margin-bottom: 14px;
}
.ai-group--geo    { background: #f0f4f8; }
.ai-group--yellow {
    background: #fffbeb;
    border-left: 4px solid #facc15;
}
.ai-group--blue {
    background: #f0f9ff;
    border-left: 4px solid #38bdf8;
}
.ai-group--pps {
    background: #f0fdf4;
    border-left: 4px solid var(--pps-color);
}

.ai-label {
    font-weight: 700; font-size: .85rem;
    display: flex; align-items: center; gap: 6px;
    margin-bottom: 10px; color: var(--navy);
}

/* Textarea tematica all'interno degli ai-group */
.ai-textarea--yellow { background: #fffbeb !important; }
.ai-textarea--blue   { background: #f0f9ff !important; }

/* ============================================================
   EDIT LISTING — Sede warning (nessuna sede configurata)
   Scope: edit_listing.php
   ============================================================ */
.el-location-warn {
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: var(--r-sm);
    padding: 12px 14px;
    font-size: .85rem; color: #854d0e;
    line-height: 1.5;
}
.el-location-warn a {
    color: #854d0e; font-weight: 700;
    text-decoration: underline;
}

/* ============================================================
   EDIT LISTING — Trattativa Rapida (neg-settings)
   Scope: edit_listing.php, new_listing.php
   ============================================================ */
.neg-settings {
    margin-top: 15px;
    border-top: 1px solid #dcfce7;
    padding-top: 15px;
}
.neg-settings__label {
    font-size: .82rem; font-weight: 700;
    display: block; margin-bottom: 10px;
    color: var(--navy);
}
.neg-settings__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
.neg-settings__hint {
    font-size: .72rem; color: var(--muted);
    margin-top: 8px; display: block;
    line-height: 1.5;
}
.neg-plan-warn {
    font-size: .8rem; font-weight: 700;
    color: var(--red); display: block; margin-top: 6px;
}

/* form-control: override per allineamento con pf-input del design system */
.form-control {
    width: 100%; padding: 11px 14px;
    border: 1.5px solid var(--border);
    border-radius: var(--r-sm);
    font-family: var(--font); font-size: .9rem;
    color: var(--text); background: var(--off);
    outline: none;
    transition: border-color var(--t), box-shadow var(--t), background var(--t);
    -webkit-appearance: none;
}
.form-control:focus {
    border-color: var(--accent-color);
    box-shadow: 0 0 0 3px rgba(52,152,219,.13);
    background: var(--white);
}

/* ============================================================
   CAPTURER — Layout acquisizione rapida
   Scope: capturer.php
   ============================================================ */
.cap-intro {
    font-size: .85rem; color: var(--muted);
    margin-bottom: 16px; line-height: 1.5;
}

/* Counter badge */
.counter-badge {
    text-align: center; font-weight: 700;
    margin-bottom: 14px;
    font-size: .9rem; color: var(--muted);
}
.counter-badge span { color: var(--navy); font-size: 1.1rem; }

/* Pulsanti icona (camera / gallery) */
.capture-controls {
    display: flex; justify-content: center;
    gap: 30px; margin: 20px 0;
}
.icon-btn {
    text-align: center; cursor: pointer;
    transition: opacity var(--t), transform var(--t);
    display: flex; flex-direction: column;
    align-items: center; gap: 6px;
    padding: 16px 20px;
    border-radius: var(--r-md);
    border: 1.5px solid var(--border);
    background: var(--off);
    min-width: 90px;
    user-select: none;
}
.icon-btn:hover:not(.disabled) {
    border-color: var(--accent-color);
    background: var(--white);
    transform: translateY(-2px);
    box-shadow: var(--sh-sm);
}
.icon-btn.disabled {
    opacity: .3; pointer-events: none;
    filter: grayscale(1);
}
.icon-btn__emoji { font-size: 2.4rem; line-height: 1; display: block; }
.icon-btn small  { font-size: .75rem; font-weight: 600; color: var(--muted); }

/* Griglia repertorio foto */
.repertorio-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
    gap: 10px;
    margin: 20px 0;
    min-height: 110px;
    border: 2px dashed var(--border);
    padding: 12px;
    border-radius: var(--r-md);
    background: var(--off);
    transition: border-color var(--t);
}
.repertorio-grid:has(.thumb-wrapper) {
    border-color: var(--accent-color);
    border-style: solid;
}

/* Singola thumbnail */
.thumb-wrapper {
    position: relative;
    width: 80px; height: 80px;
}
.thumb-wrapper img {
    width: 100%; height: 100%;
    object-fit: cover;
    border-radius: var(--r-sm);
    display: block;
}
.btn-remove {
    position: absolute; top: -5px; right: -5px;
    background: var(--red); color: var(--white);
    border-radius: 50%;
    width: 20px; height: 20px;
    display: flex; align-items: center; justify-content: center;
    font-weight: 800; cursor: pointer;
    border: 2px solid var(--white);
    font-size: .65rem; line-height: 1;
    transition: background var(--t), transform var(--t);
    z-index: 2;
}
.btn-remove:hover { background: #be123c; transform: scale(1.15); }

/* Stack CTA footer */
.cap-actions {
    display: flex; flex-direction: column;
    gap: 10px; margin-top: 20px;
}