/* ═══════════════════════════════════════════════════════════════════
   FutureTechDaily — Wallapop Widget · Terminal Hacker Style
   ═══════════════════════════════════════════════════════════════════ */
:root {
  --wlp-bg:      var(--tn-dark,       #030303);
  --wlp-surface: var(--tn-surface,    #050a05);
  --wlp-s2:      var(--tn-surface2,   #091209);
  --wlp-b:       var(--tn-border,     #0f2a0f);
  --wlp-b2:      var(--tn-border2,    #1a3d1a);
  --wlp-g:       var(--tn-green,      #00ff41);
  --wlp-dim:     var(--tn-green-dim,  #00cc33);
  --wlp-dark:    var(--tn-green-dark, #004d12);
  --wlp-faint:   var(--tn-green-faint,#001a06);
  --wlp-text:    var(--tn-white,      #e0ffe0);
  --wlp-amber:   var(--tn-amber,      #ffb000);
  --wlp-red:     var(--tn-red,        #ff3333);
  --wlp-glow:    var(--tn-glow,       0 0 6px #00ff41,0 0 18px rgba(0,255,65,.25));
  --wlp-glow-sm: var(--tn-glow-sm,    0 0 4px #00ff41,0 0 10px rgba(0,255,65,.2));
  --wlp-font:    var(--tn-font-mono,  'Share Tech Mono',monospace);
}

.ab-wlp { margin:2rem 0; font-family:var(--wlp-font); color:var(--wlp-dim); }

/* Header */
.ab-wlp-header { display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:1.25rem; flex-wrap:wrap; gap:.75rem; padding-bottom:1rem; border-bottom:1px solid var(--wlp-b2); }
.ab-wlp-title { font-size:.95rem; font-weight:400; letter-spacing:.12em; text-transform:uppercase; color:var(--wlp-g); text-shadow:var(--wlp-glow-sm); margin:0 0 .3rem; }
.ab-wlp-title::before { content:'## '; color:var(--wlp-dark); }
.ab-wlp-subtitle { font-size:.72rem; color:var(--wlp-dark); letter-spacing:.05em; margin:0; }
.ab-wlp-subtitle strong { color:var(--wlp-dim); }
.ab-wlp-profile-btn { font-family:var(--wlp-font); font-size:.65rem; letter-spacing:.1em; text-transform:uppercase; padding:.4rem .9rem; border:1px solid var(--wlp-b2); color:var(--wlp-dark); text-decoration:none; transition:all .15s; white-space:nowrap; background:transparent; }
.ab-wlp-profile-btn::before { content:'> '; color:var(--wlp-dark); }
.ab-wlp-profile-btn:hover { border-color:var(--wlp-g); color:var(--wlp-g); text-shadow:var(--wlp-glow-sm); background:var(--wlp-faint); }

/* Filters */
.ab-wlp-filters { display:flex; flex-wrap:wrap; gap:0; margin-bottom:0; border:1px solid var(--wlp-b); border-bottom:none; }
.ab-wlp-filter { background:var(--wlp-bg); border:none; border-right:1px solid var(--wlp-b); padding:.38rem .85rem; font-family:var(--wlp-font); font-size:.63rem; letter-spacing:.08em; text-transform:uppercase; cursor:pointer; color:var(--wlp-dark); transition:all .15s; }
.ab-wlp-filter::before { content:'> '; color:var(--wlp-b2); }
.ab-wlp-filter:hover { color:var(--wlp-dim); background:var(--wlp-faint); }
.ab-wlp-filter.active { color:var(--wlp-g); background:var(--wlp-faint); text-shadow:var(--wlp-glow-sm); }
.ab-wlp-filter.active::before { color:var(--wlp-g); }

/* Grid */
.ab-wlp-grid { display:grid; grid-template-columns:repeat(var(--cols,3),1fr); gap:0; border:1px solid var(--wlp-b); border-bottom:none; margin-bottom:0; }

/* Card */
.ab-wlp-card { background:var(--wlp-bg); border-right:1px solid var(--wlp-b); border-bottom:1px solid var(--wlp-b); position:relative; transition:background .15s,border-color .15s; }
.ab-wlp-card::before { content:''; position:absolute; top:0; right:0; width:16px; height:16px; background:linear-gradient(225deg,rgba(0,255,65,.1),transparent 60%); pointer-events:none; z-index:1; }
.ab-wlp-card:hover { background:var(--wlp-faint); border-color:var(--wlp-b2); }
.ab-wlp-card.reserved { opacity:.5; }
.ab-wlp-card-link { text-decoration:none; color:inherit; display:flex; flex-direction:column; height:100%; }

/* Thumb */
.ab-wlp-thumb { aspect-ratio:4/3; overflow:hidden; background:var(--wlp-surface); position:relative; border-bottom:1px solid var(--wlp-b); }
.ab-wlp-thumb img { width:100%; height:100%; object-fit:cover; filter:saturate(0) brightness(.6) sepia(.2); transition:filter .3s,transform .3s; }
.ab-wlp-card:hover .ab-wlp-thumb img { filter:saturate(.2) brightness(.7) sepia(.15) hue-rotate(80deg); transform:scale(1.03); }
.ab-wlp-thumb-placeholder { width:100%; height:100%; display:flex; align-items:center; justify-content:center; font-size:2.5rem; color:var(--wlp-dark); }
/* CRT scanlines on image */
.ab-wlp-thumb::after { content:''; position:absolute; inset:0; background:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,0,0,.09) 2px,rgba(0,0,0,.09) 4px); pointer-events:none; z-index:1; }
.ab-wlp-badge { position:absolute; font-family:var(--wlp-font); font-size:.58rem; letter-spacing:.1em; text-transform:uppercase; padding:2px 7px; }
.ab-wlp-badge.reserved { top:8px; left:8px; background:rgba(255,176,0,.1); border:1px solid var(--wlp-amber); color:var(--wlp-amber); }
.ab-wlp-badge.condition { bottom:8px; right:8px; background:rgba(0,0,0,.7); border:1px solid var(--wlp-b2); color:var(--wlp-dim); }

/* Body */
.ab-wlp-body { padding:12px 14px; flex:1; display:flex; flex-direction:column; gap:5px; }
.ab-wlp-item-title { font-size:.8rem; font-weight:400; line-height:1.3; margin:0; color:var(--wlp-text); }
.ab-wlp-pitch { font-size:.7rem; color:var(--wlp-dark); line-height:1.55; margin:0; flex:1; font-style:italic; }
.ab-wlp-pitch::before { content:'> '; color:var(--wlp-b2); font-style:normal; }
.ab-wlp-desc { font-size:.7rem; color:var(--wlp-dark); line-height:1.55; margin:0; flex:1; }
.ab-wlp-footer { display:flex; justify-content:space-between; align-items:center; padding-top:8px; border-top:1px solid var(--wlp-b); margin-top:auto; }
.ab-wlp-price { font-size:.95rem; color:var(--wlp-g); text-shadow:var(--wlp-glow-sm); letter-spacing:.04em; }
.ab-wlp-cta { font-size:.6rem; letter-spacing:.1em; text-transform:uppercase; color:var(--wlp-dark); transition:color .15s,text-shadow .15s; }
.ab-wlp-card:hover .ab-wlp-cta { color:var(--wlp-g); text-shadow:var(--wlp-glow-sm); }
.ab-wlp-cta::after { content:' ▶'; }
.ab-wlp-stats { font-size:.6rem; color:var(--wlp-dark); letter-spacing:.04em; }

/* Trust bar */
.ab-wlp-trust { display:flex; flex-wrap:wrap; gap:.35rem 1.25rem; padding:.65rem 1rem; background:var(--wlp-surface); border:1px solid var(--wlp-b); border-top:none; }
.ab-wlp-trust-item { font-size:.65rem; letter-spacing:.05em; color:var(--wlp-dark); }
.ab-wlp-trust-item::before { content:'[OK] '; color:var(--wlp-g); text-shadow:var(--wlp-glow-sm); }

/* Widget mode */
.ab-wlp-widget { border:1px solid var(--wlp-b); background:var(--wlp-bg); font-family:var(--wlp-font); }
.ab-wlp-widget-head { display:flex; justify-content:space-between; align-items:center; padding:.55rem .85rem; background:var(--wlp-surface); border-bottom:1px solid var(--wlp-b); font-size:.65rem; letter-spacing:.1em; text-transform:uppercase; color:var(--wlp-g); text-shadow:var(--wlp-glow-sm); }
.ab-wlp-widget-head::before { content:'> '; color:var(--wlp-dark); }
.ab-wlp-widget-head a { font-size:.6rem; color:var(--wlp-dark); text-decoration:none; text-shadow:none; letter-spacing:.06em; }
.ab-wlp-widget-head a::before { content:none; }
.ab-wlp-widget-head a:hover { color:var(--wlp-g); text-shadow:var(--wlp-glow-sm); }
.ab-wlp-mini { display:flex; gap:.6rem; align-items:center; padding:.6rem .85rem; border-bottom:1px solid var(--wlp-b); text-decoration:none; color:inherit; transition:background .15s; }
.ab-wlp-mini:last-child { border-bottom:none; }
.ab-wlp-mini:hover { background:var(--wlp-faint); }
.ab-wlp-mini img { width:42px; height:42px; object-fit:cover; flex-shrink:0; filter:saturate(0) brightness(.6) hue-rotate(80deg); border:1px solid var(--wlp-b2); }
.ab-wlp-mini-placeholder { width:42px; height:42px; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:1.3rem; background:var(--wlp-s2); border:1px solid var(--wlp-b); color:var(--wlp-dark); }
.ab-wlp-mini-title { font-size:.7rem; color:var(--wlp-dim); line-height:1.3; margin-bottom:3px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.ab-wlp-mini-price { font-size:.75rem; color:var(--wlp-g); text-shadow:var(--wlp-glow-sm); letter-spacing:.04em; }

/* Responsive */
@media (max-width:768px) { .ab-wlp-grid { grid-template-columns:repeat(2,1fr); } }
@media (max-width:480px) { .ab-wlp-grid { grid-template-columns:1fr; } .ab-wlp-filters { flex-direction:column; } }