/* ═══════════════════════════════════════════════
   Banca del Tempo — style.css
   ═══════════════════════════════════════════════ */

:root {
  --bdt-green:      #1D9E75;
  --bdt-green-lt:   #E1F5EE;
  --bdt-green-dk:   #0F6E56;
  --bdt-amber:      #EF9F27;
  --bdt-amber-lt:   #FAEEDA;
  --bdt-amber-dk:   #633806;
  --bdt-blue:       #378ADD;
  --bdt-blue-lt:    #E6F1FB;
  --bdt-blue-dk:    #0C447C;
  --bdt-red:        #E24B4A;
  --bdt-red-lt:     #FCEBEB;
  --bdt-red-dk:     #791F1F;
  --bdt-gray:       #888780;
  --bdt-gray-lt:    #F1EFE8;
  --bdt-border:     rgba(0,0,0,.10);
  --bdt-radius:     10px;
  --bdt-radius-sm:  6px;
  --bdt-shadow:     0 1px 4px rgba(0,0,0,.08);
}

#bdt-app *, #bdt-app *::before, #bdt-app *::after { box-sizing: border-box; }
#bdt-app { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-size: 15px; line-height: 1.6; color: #1a1a1a; max-width: 960px; margin: 0 auto; }

/* ─── TOPBAR ─── */
.bdt-topbar { display: flex; align-items: center; justify-content: space-between; padding: 12px 20px; border-bottom: 1px solid var(--bdt-border); background: #fff; position: sticky; top: 0; z-index: 100; flex-wrap: wrap; gap: 8px; }
.bdt-logo { font-size: 16px; font-weight: 600; color: var(--bdt-green); }
.bdt-topbar-right { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.bdt-crediti-badge { background: var(--bdt-green-lt); color: var(--bdt-green-dk); padding: 4px 12px; border-radius: 20px; font-size: 13px; display: flex; align-items: center; gap: 4px; }
.bdt-notifiche-btn { position: relative; cursor: pointer; font-size: 18px; padding: 4px; }
.bdt-msg-btn { cursor: pointer; font-size: 18px; padding: 4px; position: relative; }
.bdt-badge { background: var(--bdt-red); color: #fff; font-size: 10px; font-weight: 700; padding: 1px 5px; border-radius: 10px; position: absolute; top: -2px; right: -4px; }
.bdt-user-name { font-size: 13px; color: #555; }
.bdt-logout { font-size: 12px; color: var(--bdt-gray); text-decoration: none; }
.bdt-logout:hover { color: var(--bdt-red); }

/* ─── NAV ─── */
.bdt-nav { display: flex; gap: 4px; padding: 8px 16px; border-bottom: 1px solid var(--bdt-border); background: #fff; overflow-x: auto; }
.bdt-nav-link { padding: 7px 14px; border-radius: var(--bdt-radius-sm); cursor: pointer; font-size: 13px; color: #555; white-space: nowrap; user-select: none; }
.bdt-nav-link:hover { background: #f5f5f5; }
.bdt-nav-link.active { background: var(--bdt-green-lt); color: var(--bdt-green-dk); font-weight: 500; }

/* ─── MAIN ─── */
.bdt-main { padding: 20px 16px; }
.bdt-view { }
.bdt-view.hidden { display: none; }
.bdt-loading { color: #888; padding: 20px 0; }
.bdt-empty { padding: 32px 0; text-align: center; font-size: 15px; }

/* ─── SECTION HEAD ─── */
.bdt-section-head { margin-bottom: 16px; }
.bdt-section-head h2, .bdt-main h2 { font-size: 20px; font-weight: 600; margin: 0 0 4px; }
.bdt-muted { color: #666; font-size: 14px; }
.bdt-muted-sm { color: #888; font-size: 12px; }
.bdt-text-center { text-align: center; }

/* ─── FILTRI ─── */
.bdt-filters { margin-bottom: 20px; }
.bdt-tipo-tabs { display: flex; gap: 8px; margin-bottom: 12px; }
.bdt-tipo-tab { padding: 8px 20px; border-radius: 20px; border: 1px solid var(--bdt-border); background: #fff; cursor: pointer; font-size: 14px; color: #555; }
.bdt-tipo-tab.active { background: var(--bdt-green); color: #fff; border-color: var(--bdt-green); font-weight: 500; }
.bdt-filter-row { display: flex; gap: 8px; flex-wrap: wrap; }

/* ─── INPUT / FORM ─── */
.bdt-input, .bdt-select, .bdt-textarea {
  border: 1px solid #ddd; border-radius: var(--bdt-radius-sm); padding: 8px 12px;
  font-size: 14px; font-family: inherit; color: #1a1a1a; background: #fff;
  transition: border-color .15s;
}
.bdt-input { height: 38px; }
.bdt-input-sm { width: 120px; }
.bdt-select { height: 38px; }
.bdt-textarea { resize: vertical; width: 100%; }
.bdt-input:focus, .bdt-select:focus, .bdt-textarea:focus { outline: none; border-color: var(--bdt-green); }
.bdt-field { margin-bottom: 14px; }
.bdt-field label { display: block; font-size: 13px; font-weight: 500; margin-bottom: 5px; color: #333; }
.bdt-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.bdt-radio-group { display: flex; gap: 20px; }
.bdt-radio-group label { font-weight: 400; font-size: 14px; display: flex; align-items: center; gap: 6px; cursor: pointer; }

/* ─── BOTTONI ─── */
.bdt-btn-primary { background: var(--bdt-green); color: #fff; border: none; border-radius: var(--bdt-radius-sm); padding: 10px 20px; font-size: 14px; font-weight: 500; cursor: pointer; transition: background .15s; }
.bdt-btn-primary:hover { background: var(--bdt-green-dk); }
.bdt-btn-secondary { background: #fff; color: #333; border: 1px solid #ddd; border-radius: var(--bdt-radius-sm); padding: 8px 16px; font-size: 13px; cursor: pointer; }
.bdt-btn-secondary:hover { background: #f5f5f5; }
.bdt-btn-sm { padding: 5px 12px; font-size: 12px; border-radius: var(--bdt-radius-sm); border: 1px solid #ddd; cursor: pointer; background: #fff; }
.bdt-btn-green { background: var(--bdt-green-lt); color: var(--bdt-green-dk); border-color: var(--bdt-green); }
.bdt-btn-red   { background: var(--bdt-red-lt);   color: var(--bdt-red-dk);   border-color: var(--bdt-red); }
.bdt-btn-gray  { background: var(--bdt-gray-lt);  color: #555;                border-color: #ccc; }
.bdt-btn-blue  { background: var(--bdt-blue-lt);  color: var(--bdt-blue-dk);  border-color: var(--bdt-blue); }

/* ─── CARDS ─── */
.bdt-card { background: #fff; border: 1px solid var(--bdt-border); border-radius: var(--bdt-radius); padding: 16px; margin-bottom: 12px; }
.bdt-form-card { max-width: 560px; }
.bdt-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.bdt-annuncio-card { cursor: pointer; transition: box-shadow .15s, border-color .15s; padding: 14px; display: flex; flex-direction: column; gap: 8px; }
.bdt-annuncio-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,.1); border-color: var(--bdt-green); }
.bdt-card-cat { font-size: 28px; }
.bdt-card-titolo { font-weight: 600; font-size: 14px; }
.bdt-card-meta { font-size: 12px; color: #888; }
.bdt-card-desc { font-size: 13px; color: #555; flex: 1; }
.bdt-card-footer { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
.bdt-stelle { font-size: 13px; color: var(--bdt-amber); }

/* ─── CHIPS ─── */
.bdt-chip { display: inline-block; padding: 3px 10px; border-radius: 20px; font-size: 12px; font-weight: 500; }
.bdt-chip-green  { background: var(--bdt-green-lt); color: var(--bdt-green-dk); }
.bdt-chip-amber  { background: var(--bdt-amber-lt); color: var(--bdt-amber-dk); }
.bdt-chip-blue   { background: var(--bdt-blue-lt);  color: var(--bdt-blue-dk); }
.bdt-chip-red    { background: var(--bdt-red-lt);   color: var(--bdt-red-dk); }
.bdt-chip-gray   { background: var(--bdt-gray-lt);  color: #444; }

/* ─── SCAMBI ─── */
.bdt-scambio-card { }
.bdt-scambio-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.bdt-scambio-meta { font-size: 13px; color: #666; margin-bottom: 8px; }
.bdt-scambio-azioni { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }

/* ─── CREDITI ─── */
.bdt-crediti-header { background: var(--bdt-green-lt); border-radius: var(--bdt-radius); padding: 24px; text-align: center; margin-bottom: 24px; }
.bdt-crediti-big { font-size: 48px; font-weight: 700; color: var(--bdt-green-dk); line-height: 1; }
.bdt-crediti-big small { font-size: 16px; font-weight: 400; }
.bdt-trans-row { display: flex; align-items: center; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid #f0f0f0; }
.bdt-trans-info { flex: 1; font-size: 14px; }
.bdt-trans-delta { font-size: 16px; font-weight: 600; min-width: 40px; text-align: right; }
.bdt-pos { color: var(--bdt-green); }
.bdt-neg { color: var(--bdt-amber-dk); }

/* ─── PROFILO ─── */
.bdt-profilo-header { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; }
.bdt-avatar { width: 56px; height: 56px; background: var(--bdt-green-lt); color: var(--bdt-green-dk); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 22px; font-weight: 600; flex-shrink: 0; }
.bdt-avatar-sm { width: 36px; height: 36px; font-size: 14px; }
.bdt-recensione-card { background: #fafafa; border: 1px solid #eee; border-radius: var(--bdt-radius-sm); padding: 12px; margin-bottom: 8px; }

/* ─── MESSAGGI ─── */
.bdt-conv-row { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid #f0f0f0; cursor: pointer; }
.bdt-conv-row:hover { background: #fafafa; }
.bdt-conv-info { flex: 1; font-size: 14px; }
.bdt-chat-wrap { display: flex; flex-direction: column; height: 500px; border: 1px solid var(--bdt-border); border-radius: var(--bdt-radius); overflow: hidden; }
.bdt-chat-messages { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 8px; background: #fafafa; }
.bdt-msg-bubble { max-width: 75%; padding: 10px 14px; border-radius: 16px; font-size: 14px; }
.bdt-mio { align-self: flex-end; background: var(--bdt-green); color: #fff; border-bottom-right-radius: 4px; }
.bdt-suo { align-self: flex-start; background: #fff; border: 1px solid #eee; border-bottom-left-radius: 4px; }
.bdt-bubble-name { font-size: 11px; opacity: .7; margin-bottom: 2px; }
.bdt-bubble-time { font-size: 10px; opacity: .6; margin-top: 4px; text-align: right; }
.bdt-chat-input { display: flex; gap: 8px; padding: 12px; border-top: 1px solid var(--bdt-border); background: #fff; }
.bdt-chat-input .bdt-textarea { flex: 1; margin: 0; height: 60px; }

/* ─── PAGINATION ─── */
.bdt-pagination { display: flex; gap: 6px; justify-content: center; margin-top: 24px; flex-wrap: wrap; }
.bdt-pag-btn { padding: 6px 12px; border: 1px solid #ddd; border-radius: var(--bdt-radius-sm); background: #fff; cursor: pointer; font-size: 13px; }
.bdt-pag-btn.active { background: var(--bdt-green); color: #fff; border-color: var(--bdt-green); }

/* ─── MODAL ─── */
.bdt-modal { position: fixed; inset: 0; z-index: 999; display: flex; align-items: center; justify-content: center; }
.bdt-modal.hidden { display: none; }
.bdt-modal-overlay { position: absolute; inset: 0; background: rgba(0,0,0,.45); }
.bdt-modal-box { position: relative; background: #fff; border-radius: var(--bdt-radius); padding: 24px; max-width: 520px; width: 90vw; max-height: 85vh; overflow-y: auto; z-index: 1; }
.bdt-modal-close { position: absolute; top: 12px; right: 14px; background: none; border: none; font-size: 20px; cursor: pointer; color: #888; line-height: 1; }
.bdt-modal-head h3 { margin: 0 0 4px; font-size: 18px; }
.bdt-modal-info { background: #f8f8f8; border-radius: var(--bdt-radius-sm); padding: 12px; margin: 12px 0; font-size: 14px; display: flex; flex-direction: column; gap: 4px; }
.bdt-richiedi-form { margin-top: 16px; border-top: 1px solid #eee; padding-top: 16px; }

/* ─── RECENSIONE STELLE ─── */
.bdt-stelle-picker { display: flex; gap: 6px; font-size: 32px; margin: 8px 0; }
.bdt-stella { cursor: pointer; user-select: none; color: #ccc; transition: color .1s; }
.bdt-stella:hover { color: var(--bdt-amber); }

/* ─── NOTIFICHE ─── */
.bdt-notifiche-dropdown { display: none; position: absolute; right: 0; top: 36px; background: #fff; border: 1px solid var(--bdt-border); border-radius: var(--bdt-radius); box-shadow: 0 8px 24px rgba(0,0,0,.12); min-width: 280px; z-index: 200; max-height: 320px; overflow-y: auto; }
.bdt-notifiche-dropdown.open { display: block; }
.bdt-notif-item { padding: 10px 14px; font-size: 13px; border-bottom: 1px solid #f0f0f0; }
.bdt-notif-new { background: var(--bdt-green-lt); }

/* ─── MESSAGGI/TOAST ─── */
.bdt-msg { padding: 10px 14px; border-radius: var(--bdt-radius-sm); font-size: 13px; margin: 8px 0; }
.bdt-msg.hidden { display: none; }
.bdt-success { background: var(--bdt-green-lt); color: var(--bdt-green-dk); }
.bdt-error   { background: var(--bdt-red-lt);   color: var(--bdt-red-dk); }
.bdt-toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); padding: 12px 24px; border-radius: 8px; font-size: 14px; font-weight: 500; z-index: 9999; animation: bdt-fadein .2s; }
.bdt-toast.bdt-success { background: var(--bdt-green); color: #fff; }
.bdt-toast.bdt-error   { background: var(--bdt-red);   color: #fff; }
@keyframes bdt-fadein { from { opacity: 0; transform: translateX(-50%) translateY(10px); } to { opacity: 1; transform: translateX(-50%) translateY(0); } }

/* ─── AUTH ─── */
.bdt-auth-wrap { min-height: 80vh; display: flex; align-items: center; justify-content: center; padding: 24px; }
.bdt-auth-card { background: #fff; border: 1px solid var(--bdt-border); border-radius: var(--bdt-radius); padding: 32px; max-width: 400px; width: 100%; box-shadow: var(--bdt-shadow); }
.bdt-logo-big { font-size: 22px; font-weight: 700; color: var(--bdt-green); text-align: center; margin-bottom: 8px; }
.bdt-auth-tabs { display: flex; border-bottom: 1px solid #eee; margin-bottom: 20px; }
.bdt-auth-tab { flex: 1; padding: 10px; border: none; background: none; cursor: pointer; font-size: 14px; color: #888; border-bottom: 2px solid transparent; }
.bdt-auth-tab.active { color: var(--bdt-green); border-bottom-color: var(--bdt-green); font-weight: 500; }

/* WP login form override */
#bdt-wp-login p { margin-bottom: 12px; }
#bdt-wp-login label { font-size: 13px; font-weight: 500; color: #333; display: block; margin-bottom: 4px; }
#bdt-user-login, #bdt-user-pass { width: 100%; height: 38px; border: 1px solid #ddd; border-radius: var(--bdt-radius-sm); padding: 0 12px; font-size: 14px; }
#bdt-wp-login .submit input { background: var(--bdt-green); color: #fff; border: none; border-radius: var(--bdt-radius-sm); padding: 10px 20px; font-size: 14px; font-weight: 500; cursor: pointer; width: 100%; }
#bdt-wp-login .forgetmenot { display: flex; align-items: center; gap: 6px; font-size: 13px; }

/* ─── RESPONSIVE ─── */
@media (max-width: 600px) {
  .bdt-grid { grid-template-columns: 1fr; }
  .bdt-field-row { grid-template-columns: 1fr; }
  .bdt-topbar { flex-direction: column; align-items: flex-start; }
  .bdt-modal-box { padding: 16px; }
}

/* ─── GESTIONE ANNUNCI UTENTE ─── */
.bdt-annuncio-mgmt-card { transition: opacity .3s; }
.bdt-ann-mgmt-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.bdt-ann-desc { font-size: 13px; color: #555; margin: 0 0 10px; line-height: 1.5; }
.bdt-ann-mgmt-footer { display: flex; align-items: center; justify-content: space-between; margin-top: 10px; padding-top: 10px; border-top: 1px solid #f0f0f0; flex-wrap: wrap; gap: 8px; }