/* ==========================================================
   CX Checkout v0.56 — Popups
   Διατάξεις: center (modal με φόντο), corner (κάρτα κάτω δεξιά),
   bottom / top (μπάρα). Εικόνα: πάνω, αριστερά ή ως φόντο με το
   κείμενο επάνω της (θέση κειμένου 3x3, σκούρο φίλτρο).
   Χρώματα/διαστάσεις ανά popup με CSS variables (--pp-*).
   ========================================================== */
.cxpp { position: fixed; inset: 0; z-index: 10400; display: none; pointer-events: none; -webkit-text-size-adjust: 100%; }
.cxpp[hidden] { display: none !important; }
.cxpp.is-open { display: block; }
.cxpp *, .cxpp *::before, .cxpp *::after { box-sizing: border-box; }

.cxpp-bd { position: absolute; inset: 0; background: rgba(15, 18, 20, 0.55); opacity: 0; transition: opacity 0.25s ease; }
.cxpp--center .cxpp-bd { pointer-events: auto; }
.cxpp:not(.cxpp--center) .cxpp-bd { display: none; }
.cxpp.is-in .cxpp-bd { opacity: 1; }

.cxpp-box { position: absolute; pointer-events: auto; width: min(var(--pp-w, 520px), calc(100% - 32px)); background: var(--pp-bg, #fff); color: var(--pp-color, #1f2328); border-radius: var(--pp-r, 12px); box-shadow: 0 24px 64px rgba(0, 0, 0, 0.28); overflow: hidden; opacity: 0; transition: opacity 0.3s ease, transform 0.3s ease; font-size: 15px; line-height: 1.5; text-align: left; }
.cxpp.is-in .cxpp-box { opacity: 1; }

/* ── διατάξεις ── */
.cxpp--center .cxpp-box { left: 50%; top: 50%; transform: translate(-50%, -46%); max-height: calc(100% - 32px); overflow: auto; }
.cxpp--center.is-in .cxpp-box { transform: translate(-50%, -50%); }
.cxpp--corner .cxpp-box { right: 16px; bottom: 16px; transform: translateY(16px); max-height: calc(100% - 32px); overflow: auto; }
.cxpp--corner.is-in .cxpp-box { transform: none; }
.cxpp--bottom .cxpp-box, .cxpp--top .cxpp-box { left: 0; right: 0; width: 100%; border-radius: 0; box-shadow: 0 0 40px rgba(0, 0, 0, 0.25); max-height: 70%; overflow: auto; }
.cxpp--bottom .cxpp-box { bottom: 0; transform: translateY(100%); }
.cxpp--top .cxpp-box { top: 0; transform: translateY(-100%); }
.cxpp--bottom.is-in .cxpp-box, .cxpp--top.is-in .cxpp-box { transform: none; }

/* ── κλείσιμο ── */
.cxpp-x { position: absolute; top: 10px; right: 10px; z-index: 3; width: 34px; height: 34px; margin: 0; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.92); color: #1f2328; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18); transition: background 0.15s ease, transform 0.15s ease; }
.cxpp-x:hover { background: #fff; transform: scale(1.06); }
.cxpp-x svg { display: block; }

/* ── εικόνα ── */
.cxpp-media { position: relative; }
.cxpp-media img { display: block; width: 100%; height: auto; }
.cxpp--img-left .cxpp-box { display: flex; align-items: stretch; }
.cxpp--img-left .cxpp-media { flex: 0 0 42%; }
.cxpp--img-left .cxpp-media img { width: 100%; height: 100%; object-fit: cover; }
.cxpp--img-left .cxpp-body { flex: 1 1 auto; min-width: 0; }
.cxpp--bottom.cxpp--img-left .cxpp-media, .cxpp--top.cxpp--img-left .cxpp-media { flex-basis: 180px; }
.cxpp--bottom.cxpp--img-top .cxpp-media img, .cxpp--top.cxpp--img-top .cxpp-media img { max-height: 180px; object-fit: cover; }

/* ── περιεχόμενο ── */
.cxpp-body { display: flex; flex-direction: column; padding: 28px 28px 26px; }
.cxpp--img-top .cxpp-body { padding-top: 22px; }
.cxpp-content { display: flex; flex-direction: column; gap: 12px; max-width: 100%; }
.cxpp-title { font-size: 24px; font-weight: 700; line-height: 1.2; margin: 0; color: inherit; }
.cxpp-text { font-size: 15px; color: inherit; }
.cxpp-text > :first-child { margin-top: 0; }
.cxpp-text > :last-child { margin-bottom: 0; }
.cxpp-text img { max-width: 100%; height: auto; }
.cxpp-text table { max-width: 100%; }
.cxpp-btn { display: inline-flex; align-items: center; justify-content: center; align-self: flex-start; min-height: 46px; padding: 10px 26px; border-radius: 999px; background: var(--pp-btn-bg, #151514); color: var(--pp-btn-color, #fff); font-weight: 700; font-size: 15px; line-height: 1.2; text-decoration: none; cursor: pointer; transition: filter 0.15s ease, transform 0.15s ease; }
.cxpp-btn:hover, .cxpp-btn:focus { filter: brightness(1.08); color: var(--pp-btn-color, #fff); text-decoration: none; transform: translateY(-1px); }

/* θέση/στοίχιση κειμένου (3x3) — η κάθετη μετρά όταν η εικόνα είναι φόντο */
.cxpp-pos-tl, .cxpp-pos-tc, .cxpp-pos-tr { justify-content: flex-start; }
.cxpp-pos-ml, .cxpp-pos-mc, .cxpp-pos-mr { justify-content: center; }
.cxpp-pos-bl, .cxpp-pos-bc, .cxpp-pos-br { justify-content: flex-end; }
.cxpp-pos-tl, .cxpp-pos-ml, .cxpp-pos-bl { align-items: flex-start; text-align: left; }
.cxpp-pos-tc, .cxpp-pos-mc, .cxpp-pos-bc { align-items: center; text-align: center; }
.cxpp-pos-tr, .cxpp-pos-mr, .cxpp-pos-br { align-items: flex-end; text-align: right; }
.cxpp-pos-tc .cxpp-btn, .cxpp-pos-mc .cxpp-btn, .cxpp-pos-bc .cxpp-btn { align-self: center; }
.cxpp-pos-tr .cxpp-btn, .cxpp-pos-mr .cxpp-btn, .cxpp-pos-br .cxpp-btn { align-self: flex-end; }

/* ── εικόνα ως φόντο: το κείμενο επάνω της ── */
.cxpp-box--bg { display: flex; flex-direction: column; background-color: var(--pp-bg, #fff); background-size: cover; background-position: center; background-repeat: no-repeat; aspect-ratio: var(--pp-ar, auto); }
.cxpp-box--bg::before { content: ''; position: absolute; inset: 0; background: rgba(0, 0, 0, var(--pp-ov, 0.3)); pointer-events: none; }
.cxpp-box--bg .cxpp-body { position: relative; z-index: 1; flex: 1 1 auto; min-height: 220px; padding: 32px; }
.cxpp-box--bg .cxpp-title { text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25); }
.cxpp--bottom .cxpp-box--bg, .cxpp--top .cxpp-box--bg { aspect-ratio: auto; }
.cxpp--bottom .cxpp-box--bg .cxpp-body, .cxpp--top .cxpp-box--bg .cxpp-body { min-height: 0; }

/* ── μπάρες: περιεχόμενο σε μία γραμμή ── */
.cxpp--bottom .cxpp-body, .cxpp--top .cxpp-body { padding: 16px 60px 16px 24px; justify-content: center; }
.cxpp--bottom .cxpp-content, .cxpp--top .cxpp-content { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px 22px; }
.cxpp--bottom .cxpp-title, .cxpp--top .cxpp-title { font-size: 18px; }
.cxpp--bottom .cxpp-btn, .cxpp--top .cxpp-btn { min-height: 40px; padding: 8px 20px; align-self: center; }
.cxpp--bottom .cxpp-x, .cxpp--top .cxpp-x { top: 50%; transform: translateY(-50%); }
.cxpp--bottom .cxpp-x:hover, .cxpp--top .cxpp-x:hover { transform: translateY(-50%) scale(1.06); }
.cxpp--bottom.cxpp--img-top .cxpp-box, .cxpp--top.cxpp--img-top .cxpp-box { display: flex; align-items: stretch; }
.cxpp--bottom.cxpp--img-top .cxpp-media, .cxpp--top.cxpp--img-top .cxpp-media { flex: 0 0 180px; }
.cxpp--bottom.cxpp--img-top .cxpp-media img, .cxpp--top.cxpp--img-top .cxpp-media img { height: 100%; max-height: none; }
.cxpp--bottom.cxpp--img-top .cxpp-body, .cxpp--top.cxpp--img-top .cxpp-body { flex: 1 1 auto; }

html.cxpp-lock, html.cxpp-lock body { overflow: hidden; }

/* ── προεπισκόπηση στο admin: μέσα σε πλαίσιο, όχι fixed ── */
.cxpp--preview { position: relative; inset: auto; display: block; width: 100%; height: 100%; min-height: 480px; pointer-events: auto; background: #d9dde2; }
.cxpp--preview.is-open .cxpp-bd, .cxpp--preview .cxpp-box { opacity: 1; }
.cxpp--preview.cxpp--center .cxpp-box { transform: translate(-50%, -50%); }
.cxpp--preview.cxpp--corner .cxpp-box, .cxpp--preview.cxpp--bottom .cxpp-box, .cxpp--preview.cxpp--top .cxpp-box { transform: none; }

/* ── κινητό ── */
@media (max-width: 767px) {
  .cxpp-box { font-size: 14px; }
  .cxpp--center .cxpp-box { width: calc(100% - 24px); max-height: calc(100% - 24px); }
  .cxpp--corner .cxpp-box { left: 12px; right: 12px; bottom: 12px; width: auto; }
  .cxpp--img-left .cxpp-box { display: block; }
  .cxpp--img-left .cxpp-media img { height: auto; max-height: 220px; }
  .cxpp-body { padding: 22px 20px 20px; }
  .cxpp-box--bg .cxpp-body { padding: 24px 20px; min-height: 180px; }
  .cxpp-title { font-size: 20px; }
  .cxpp--bottom .cxpp-body, .cxpp--top .cxpp-body { padding: 14px 52px 14px 16px; }
  .cxpp--bottom .cxpp-content, .cxpp--top .cxpp-content { gap: 6px 14px; }
  .cxpp--bottom .cxpp-title, .cxpp--top .cxpp-title { font-size: 16px; }
  .cxpp--bottom.cxpp--img-left .cxpp-media, .cxpp--top.cxpp--img-left .cxpp-media, .cxpp--bottom.cxpp--img-top .cxpp-media, .cxpp--top.cxpp--img-top .cxpp-media { display: none; }
  .cxpp--bottom .cxpp-box, .cxpp--top .cxpp-box { max-height: 60%; }
}