/* =====================================================
   Σελίδα αγγελίας (detail) — photo stage + right panel
   Συνεργάζεται με marketplace.css (design tokens).
   ===================================================== */
:root{--panel-w:400px}
html,body{height:100%}
body{overflow:hidden}

/* ===== Photo stage (αριστερά) ===== */
.stage{position:fixed;left:0;top:0;bottom:0;right:var(--panel-w);background:#0B0C0D;display:flex;align-items:center;justify-content:center;overflow:hidden}
.stage img{max-width:100%;max-height:100%;object-fit:contain;user-select:none}
.stage-empty{display:grid;place-items:center;color:#3a3b3c}
.stage-top{position:absolute;top:0;left:0;right:0;padding:14px 16px;display:flex;align-items:center;gap:10px;background:linear-gradient(180deg,rgba(0,0,0,.55),transparent);z-index:5}
.s-circle{width:40px;height:40px;border-radius:var(--r);background:rgba(255,255,255,.14);display:grid;place-items:center;color:#fff;transition:background .12s;flex-shrink:0}
.s-circle:hover{background:rgba(255,255,255,.28)}
.s-circle svg{width:18px;height:18px}
.s-logo{width:36px;height:36px;border-radius:var(--r);display:block}
.s-nav{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;border-radius:var(--r);background:rgba(255,255,255,.14);color:#fff;display:grid;place-items:center;transition:background .12s;z-index:5;border:none;cursor:pointer}
.s-nav:hover{background:rgba(255,255,255,.3)}
.s-nav.prev{left:16px}
.s-nav.next{right:16px}
.s-nav svg{width:18px;height:18px}
.s-thumbs{position:absolute;bottom:14px;left:50%;transform:translateX(-50%);display:flex;gap:6px;z-index:5;background:rgba(0,0,0,.35);padding:6px;border-radius:var(--r);max-width:90%;overflow-x:auto}
.s-thumb{width:46px;height:46px;border-radius:var(--r);overflow:hidden;opacity:.55;transition:opacity .12s;border:2px solid transparent;flex-shrink:0;padding:0;cursor:pointer;background:none}
.s-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.s-thumb.on{opacity:1;border-color:#fff}
.s-thumb:hover{opacity:.9}
.s-counter{position:absolute;top:16px;right:16px;background:rgba(0,0,0,.6);color:#fff;font-size:12.5px;font-weight:600;padding:5px 11px;border-radius:var(--r);z-index:5}
.sold-overlay{position:absolute;left:50%;top:18px;transform:translateX(-50%);background:rgba(0,0,0,.75);color:#fff;font-size:13px;font-weight:700;padding:6px 16px;border-radius:var(--r);z-index:6}

/* ===== Right panel ===== */
.panel{position:fixed;right:0;top:0;bottom:0;width:var(--panel-w);background:var(--surface);display:flex;flex-direction:column;box-shadow:-2px 0 10px rgba(0,0,0,.35)}
.panel-scroll{flex:1;overflow-y:auto;padding:12px 16px 16px}
.p-top{display:flex;justify-content:flex-end;align-items:center;gap:8px;margin-bottom:8px}
.p-circle{position:relative;width:36px;height:36px;border-radius:var(--r);background:var(--hover);display:grid;place-items:center;color:var(--text)}
.p-circle:hover{background:var(--hover-2)}
.p-circle svg{width:17px;height:17px}
.p-avatar{width:36px;height:36px;border-radius:var(--r);background:linear-gradient(135deg,#2F63E0,#7B5CFF);display:grid;place-items:center;font-weight:700;font-size:14px;color:#fff;text-transform:uppercase}
.p-title{font-size:24px;font-weight:700;line-height:1.2;word-break:break-word}
.p-price{font-size:17px;font-weight:600;margin-top:5px;display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.p-price .neg{font-size:13px;font-weight:600;color:var(--green)}
.p-price .p-pchg{font-size:12.5px;font-weight:700;line-height:1;padding:4px 8px;border-radius:var(--r);font-variant-numeric:tabular-nums}
.p-price .p-pchg.down{background:color-mix(in srgb,var(--green) 14%,transparent);color:var(--green)}
.p-price .p-pchg.up  {background:color-mix(in srgb,var(--gold) 16%,transparent);color:var(--gold)}
.p-fairp{display:inline-flex;align-items:center;gap:7px;margin-top:9px;padding:6px 11px;border-radius:var(--r);font-size:13px;font-weight:700;border:1px solid transparent}
.p-fairp svg{width:15px;height:15px;flex-shrink:0}
.p-fairp-sub{font-weight:500;font-size:11.5px;opacity:.85}
.p-fairp.good{color:var(--green);background:color-mix(in srgb,var(--green) 14%,transparent);border-color:color-mix(in srgb,var(--green) 35%,transparent)}
.p-fairp.fair{color:var(--text-2);background:var(--hover);border-color:var(--line-2)}
.p-fairp.high{color:var(--gold);background:color-mix(in srgb,var(--gold) 15%,transparent);border-color:color-mix(in srgb,var(--gold) 38%,transparent)}
.p-meta{font-size:12.5px;color:var(--text-2);margin-top:9px}
.p-soldtag{display:inline-block;background:var(--hover);color:var(--text);font-size:12px;font-weight:700;padding:3px 10px;border-radius:var(--r);margin-top:8px}
/* actions */
.actions{display:flex;gap:8px;margin:14px 0 4px}
.act-msg{flex:1;height:38px;border-radius:var(--r);background:var(--hover);font-weight:600;font-size:14.5px;display:flex;align-items:center;justify-content:center;gap:8px;transition:background .12s;color:var(--text);border:none;cursor:pointer}
.act-msg:hover{background:var(--hover-2)}
.act-msg svg{width:16px;height:16px}
.act-sq{width:38px;height:38px;border-radius:var(--r);background:var(--hover);display:grid;place-items:center;transition:background .12s,color .12s;flex-shrink:0;color:var(--text);border:none;cursor:pointer}
.act-sq.promote{background:rgba(245,195,59,.16);color:#a87900}
.act-sq.promote:hover{background:rgba(245,195,59,.3)}
:root[data-theme="dark"] .act-sq.promote{color:var(--gold)}
@media (prefers-color-scheme: dark){:root:not([data-theme]) .act-sq.promote{color:var(--gold)}}
.act-sq:hover{background:var(--hover-2)}
.act-sq svg{width:16px;height:16px}
.act-sq.saved{background:var(--blue);color:#fff}
.act-sq.cmp.on{background:var(--green);color:#fff}
.p-hr{border:none;border-top:1px solid var(--line-2);margin:16px -16px}
.p-h{font-size:16px;font-weight:700;margin-bottom:8px}
/* specs */
.spec{display:flex;align-items:center;gap:12px;padding:6px 0;font-size:14.5px;color:var(--text)}
.spec svg,.spec img{width:18px;height:18px;color:var(--text-2);flex-shrink:0}
.spec .k{color:var(--text-2)}
.p-desc{font-size:14.5px;color:var(--text);word-break:break-word;line-height:1.55}
.p-desc .d-block{margin-top:10px}
.p-desc .d-block:first-child{margin-top:0}
.p-desc p{margin:0 0 4px}
.p-desc p:last-child{margin-bottom:0}
.p-desc .d-h{font-size:13px;font-weight:700;letter-spacing:.02em;text-transform:uppercase;color:var(--text-2);margin:0 0 5px}

/* Αποτέλεσμα «Εμφάνιση τηλεφώνου» (HTMX swap στο #phoneOut) */
.phone-result{display:block;width:100%;border-radius:var(--r);padding:11px 14px;font-size:14px;line-height:1.45;text-align:center}
.phone-result.ok{background:color-mix(in srgb,var(--green) 14%,transparent);color:var(--green);font-weight:700;font-size:15.5px;font-variant-numeric:tabular-nums;letter-spacing:.01em;transition:background .12s}
.phone-result.ok:hover{background:color-mix(in srgb,var(--green) 22%,transparent)}
.phone-result.ok svg{width:15px;height:15px;vertical-align:-2px;margin-right:7px}
.phone-result.warn{background:color-mix(in srgb,var(--gold) 14%,transparent);color:var(--gold);text-align:left}
.phone-result.warn b{display:block;font-weight:700}
.phone-result.warn span{font-size:12.5px;opacity:.85}
.phone-result.muted{background:var(--surface-2);color:var(--text-2)}
/* υπολογιστής δόσης */
.p-calc{background:var(--surface-2);border:1px solid var(--line-2);border-radius:var(--r);padding:14px}
.pc-row{margin-bottom:11px}
.pc-lbl{display:flex;justify-content:space-between;font-size:13px;color:var(--text-2);margin-bottom:5px}
.pc-lbl b{color:var(--text);font-weight:700;font-variant-numeric:tabular-nums}
.p-calc input[type=range]{width:100%;height:5px;-webkit-appearance:none;appearance:none;background:var(--line-2);border-radius:var(--r);accent-color:var(--blue);cursor:pointer}
.p-calc input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;border-radius:var(--r);background:var(--surface);border:2px solid var(--blue);box-shadow:var(--shadow);cursor:grab}
.p-calc input[type=range]::-moz-range-thumb{width:14px;height:14px;border-radius:var(--r);background:var(--surface);border:2px solid var(--blue);cursor:grab}
.pc-out{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin-top:13px;padding-top:12px;border-top:1px solid var(--line)}
.pc-out span{font-size:13px;color:var(--text-2)}
.pc-out b{font-size:21px;font-weight:800;color:var(--blue-txt);font-variant-numeric:tabular-nums}
.pc-sub{font-size:12px;color:var(--text-2);margin-top:5px;text-align:right}
.pc-note{font-size:11px;color:var(--text-3);margin-top:8px}
/* phone reveal */
.phone-box{margin-top:12px}
.phone-btn{width:100%;height:40px;border-radius:var(--r);background:var(--hover);font-weight:600;font-size:14.5px;display:flex;align-items:center;justify-content:center;gap:8px;color:var(--text);border:none;cursor:pointer}
.phone-btn:hover{background:var(--hover-2)}
.phone-btn svg{width:16px;height:16px}
.phone-out{margin-top:8px;font-size:15px;font-weight:700;text-align:center}
.phone-out a{color:var(--blue-txt)}
/* inline message form */
.msg-form{margin-top:12px;display:none}
.msg-form.show{display:block}
.msg-form textarea{width:100%;min-height:84px;border:1px solid var(--line-2);border-radius:var(--r);background:transparent;padding:10px 12px;font-size:14px;color:var(--text);resize:vertical}
.msg-form textarea:focus{outline:none;border-color:var(--blue)}
.msg-form button{margin-top:8px;width:100%;height:38px;border-radius:var(--r);background:var(--blue);color:#fff;font-weight:700;border:none;cursor:pointer}
.msg-form button:hover{background:var(--blue-hover)}
/* map */
.panel-scroll .aa-map{margin-top:14px}
.panel-scroll .aa-map svg{height:120px}
.p-loc{font-size:12.5px;color:var(--text-2);margin-top:8px}
.p-loc b{color:var(--text);font-weight:600}
/* similar */
.sim-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.sim{cursor:pointer;border-radius:var(--r);color:inherit}
.sim .iw{aspect-ratio:4/3;border-radius:var(--r);overflow:hidden;background:var(--surface-2)}
.sim img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .2s}
.sim:hover img{transform:scale(1.05)}
.sim .pr{font-size:13.5px;font-weight:700;margin-top:5px}
.sim .tt{font-size:11.5px;color:var(--text-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* seller */
.seller-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.seller-head .h{font-size:16px;font-weight:700}
.seller-head a{font-size:13px;color:var(--blue-txt)}
.seller-head a:hover{text-decoration:underline}
.seller{display:flex;align-items:center;gap:11px;color:inherit}
.seller .av{width:44px;height:44px;border-radius:var(--r);display:grid;place-items:center;font-weight:700;font-size:17px;color:#fff;flex-shrink:0;text-transform:uppercase}
.seller-info{min-width:0}
.seller b{font-size:15px;display:flex;align-items:center;gap:5px}
.seller .s-verified{display:inline-flex;color:var(--blue);flex-shrink:0}
.seller .s-verified svg{width:15px;height:15px}
.seller .s-sub{display:block;font-size:12.5px;color:var(--text-2);margin-top:1px}
.seller .s-rating{display:inline-flex;align-items:center;gap:4px;font-size:12.5px;color:var(--text-2);margin-top:3px}
.seller .s-rating svg{width:13px;height:13px;color:var(--gold)}
.seller .s-rating b{display:inline;font-size:12.5px;color:var(--text);font-weight:700}
.seller .s-rating.none{color:var(--text-3)}
/* sticky CTA */
.panel-foot{border-top:1px solid var(--line);padding:12px 16px 14px;background:var(--surface)}
.cta{width:100%;height:40px;border-radius:var(--r);background:var(--blue);color:#fff;font-weight:700;font-size:15px;display:flex;align-items:center;justify-content:center;gap:9px;transition:background .12s;border:none;cursor:pointer}
.cta:hover{background:var(--blue-hover)}
.cta:disabled{background:var(--hover);color:var(--text-3);cursor:not-allowed}
.cta svg{width:17px;height:17px}
.legal{font-size:11px;color:var(--text-2);margin-top:9px;line-height:1.45;text-align:center}
.legal-links{font-size:11px;color:var(--text-3);margin-top:4px;text-align:center}
.legal-links a{color:var(--text-3);text-decoration:none}
.legal-links a:hover{color:var(--blue-txt);text-decoration:underline}

.msg-guest-note{font-size:11.5px;color:var(--text-3);margin:7px 0 0;text-align:center}

/* breadcrumb above the title */
.p-crumbs{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--text-3);margin-bottom:6px;flex-wrap:wrap}
.p-crumbs a{color:var(--text-2);text-decoration:none}
.p-crumbs a:hover{color:var(--blue-txt);text-decoration:underline}

/* ── Report listing (collapsible) ── */
.report-wrap{margin-top:18px;padding-top:4px}
.report-toggle{display:inline-flex;align-items:center;gap:7px;background:none;border:none;color:var(--text-3);font-size:12.5px;font-weight:600;cursor:pointer;padding:4px 0;text-decoration:none}
.report-toggle svg{width:14px;height:14px}
.report-toggle:hover{color:var(--red)}
.report-form{margin-top:10px;background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r);padding:14px}
.report-form label{display:block;font-size:12.5px;font-weight:600;color:var(--text-2);margin:0 0 5px}
.report-form select,.report-form textarea{width:100%;border:1px solid var(--line-2);border-radius:var(--r);background:var(--surface);color:var(--text);font-size:13.5px;padding:9px 10px;margin-bottom:11px;font-family:inherit}
.report-form select:focus,.report-form textarea:focus{outline:none;border-color:var(--blue)}
.report-actions{display:flex;gap:8px}
.report-send{flex:1;background:var(--red);color:#fff;border:none;border-radius:var(--r);font-size:13.5px;font-weight:700;padding:9px 14px;cursor:pointer}
.report-send:hover{filter:brightness(1.08)}
.report-cancel{background:var(--hover);color:var(--text);border:none;border-radius:var(--r);font-size:13.5px;font-weight:600;padding:9px 14px;cursor:pointer}
.report-cancel:hover{background:var(--hover-2)}

@media(max-width:900px){
  body{overflow:auto}
  .stage{position:relative;right:0;height:54vh}
  .panel{position:relative;width:auto;height:auto;box-shadow:none}
  .panel-scroll{overflow:visible}
}