/* ============================================================
   CX Team Kit v1.3.6 — storefront
   Εμφάνιση στο πρότυπο της αναφοράς (Real Madrid shop): pills σε ανοιχτό γκρι χωρίς
   εμφανές περίγραμμα, επιλεγμένο = λευκό με accent περίγραμμα/κείμενο, μεγάλο
   dropdown, καθαρά πεδία με μετρητή.
   Οι ιδιότητες που τα θέματα (Journal κ.ά.) συνηθίζουν να επιβάλλουν σε button/select/input/ul
   (φόντο, περίγραμμα, ακτίνα, κεφαλαία, σκιά, ύψος, γραμματοσειρά, outline) ορίζονται ρητά ώστε
   το μπλοκ να δείχνει ίδιο σε κάθε θέμα. Χρώματα: από τις μεταβλητές του CX Checkout (--cxc-*)
   όταν υπάρχουν, αλλιώς οι προεπιλογές εδώ.
   Ιεραρχία ειδικότητας (για να μην «περνά» τίποτα από το θέμα και να κερδίζει πάντα ο διαχειριστής):
     θέμα  <  βασικό εδώ (.cxtk.cxtk …, !important)  <  tab «Εμφάνιση» (html .cxtk.cxtk …, !important)
   v1.2.0: ΚΑΜΙΑ «καρφωτή» ακτίνα γωνιών — όλα ξεκινούν από 0 (ρητά) και ο διαχειριστής ορίζει ό,τι
   θέλει ανά στοιχείο (ή πατά το έτοιμο σετ «Ανοιχτό»/«Σκούρο» που περιέχει τις ακτίνες της αναφοράς).
   Το dropdown παίκτη είναι δικό μας (κουμπί + λίστα) ώστε να στυλάρεται ολόκληρο.
   v1.2.1: όλα τα structural του dropdown/λίστας με !important (outline, περίγραμμα, κενά, σκιά) —
   τίποτα από το θέμα· hover γραμμής ορατό σε ανοιχτό ΚΑΙ σκούρο φόντο (ημιδιαφανές).
   v1.2.2: το περίγραμμα της ανοιχτής λίστας παίρνει το ίδιο (διακριτικό) χρώμα με το κλειστό κουμπί
   (--tk-fill) και ΟΧΙ τη «γραμμή διαχωρισμού» του θέματος (--cxc-line), που σε θέματα με έντονο accent
   έδινε έντονο περίγραμμα. Ετικέτα + chips ρόστερ σε .cxtk-rosterwrap (on/off από την «Εμφάνιση»).
   ============================================================ */
.cxtk {
  --tk-accent: var(--cxc-primary, #3b3bd6);
  --tk-text: var(--cxc-text, #1a1b1f);
  --tk-muted: var(--cxc-muted, #6b7280);
  --tk-line: var(--cxc-line, #e3e5e9);
  --tk-fill: var(--cxc-thumb, #f3f4f6);
  --tk-fill-hover: #e9eaee;
  --tk-row-hover: rgba(128, 128, 128, .22);
  --tk-err: #d93025;
  color: var(--tk-text);
  margin: 0 0 22px;
  font-size: 15px;
  line-height: 1.4;
  text-align: left;
  border-radius: 0;
}
.cxtk.cxtk--generic { margin: 22px 0; padding: 20px 0; border-top: 1px solid var(--tk-line); border-bottom: 1px solid var(--tk-line); }
.cxtk *, .cxtk *::before, .cxtk *::after { box-sizing: border-box; }

.cxtk-head { margin: 0 0 12px; }
.cxtk-title { font-weight: 600; font-size: 17px; letter-spacing: 0; text-transform: none; }
.cxtk-label { display: block; font-weight: 600; font-size: 14px; margin: 18px 0 10px; text-transform: none; letter-spacing: 0; }

.cxtk-modes, .cxtk-chips, .cxtk-sides, .cxtk-badge-list { display: flex; flex-wrap: wrap; gap: 10px; }

/* ---- pills (λειτουργίες) & chips (ρόστερ) ---- */
.cxtk.cxtk .cxtk-pill, .cxtk.cxtk .cxtk-chip, .cxtk.cxtk .cxtk-badge {
  -webkit-appearance: none !important; appearance: none !important;
  display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important;
  height: 46px !important; min-height: 0 !important; min-width: 0 !important; width: auto !important;
  margin: 0 !important; padding: 0 20px !important;
  border: 1px solid var(--tk-fill) !important; border-radius: 0 !important;
  background: var(--tk-fill) !important; background-image: none !important;
  color: var(--tk-text) !important;
  font-family: inherit !important; font-size: 15px !important; font-weight: 400 !important; line-height: 1 !important;
  letter-spacing: 0 !important; text-transform: none !important; text-decoration: none !important; text-shadow: none !important;
  box-shadow: none !important; outline: none !important; cursor: pointer; white-space: nowrap;
  transition: border-color .15s, background-color .15s, color .15s;
}
.cxtk.cxtk .cxtk-chip { height: 42px !important; padding: 0 18px !important; }
.cxtk.cxtk .cxtk-pill:hover, .cxtk.cxtk .cxtk-chip:hover, .cxtk.cxtk .cxtk-badge:hover { background: var(--tk-fill-hover) !important; border-color: var(--tk-fill-hover) !important; }
.cxtk.cxtk .cxtk-pill.is-selected, .cxtk.cxtk .cxtk-chip.is-selected, .cxtk.cxtk .cxtk-badge.is-selected {
  background: #ffffff !important; border-color: var(--tk-accent) !important; color: var(--tk-accent) !important;
}
.cxtk.cxtk .cxtk-pill:focus-visible, .cxtk.cxtk .cxtk-chip:focus-visible, .cxtk.cxtk .cxtk-badge:focus-visible { outline: 2px solid var(--tk-accent) !important; outline-offset: 2px !important; }
.cxtk.cxtk .cxtk-pill b, .cxtk.cxtk .cxtk-badge b { font-weight: 500 !important; }
.cxtk.cxtk .cxtk-pill svg, .cxtk.cxtk .cxtk-badge svg { width: 18px !important; height: 18px !important; flex: none; display: inline-block; }
.cxtk.cxtk .cxtk-chip.is-static { cursor: default; }

/* ---- dropdown παίκτη (δικό μας: κουμπί .cxtk-select + λίστα .cxtk-dd-list) ---- */
.cxtk-selectwrap { margin-top: 12px; }
.cxtk-dd { position: relative; }
.cxtk.cxtk .cxtk-select {
  -webkit-appearance: none !important; appearance: none !important;
  display: block !important; width: 100% !important; max-width: 100% !important; height: 56px !important; min-height: 0 !important;
  margin: 0 !important; padding: 0 52px 0 20px !important;
  border: 1px solid var(--tk-fill) !important; border-radius: 0 !important;
  background: var(--tk-fill) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='none' stroke='%231a1b1f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 20px center !important;
  color: var(--tk-text) !important; font-family: inherit !important; font-size: 16px !important; font-weight: 400 !important; line-height: 54px !important;
  letter-spacing: 0 !important; text-transform: none !important; text-align: left !important; text-shadow: none !important; box-shadow: none !important; outline: none !important; cursor: pointer;
  transition: border-color .15s, background-color .15s, color .15s;
}
.cxtk.cxtk .cxtk-select > span { display: block !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; }
.cxtk.cxtk .cxtk-select:focus-visible { outline: 2px solid var(--tk-accent) !important; outline-offset: 1px !important; }
.cxtk.cxtk .cxtk-dd.is-open .cxtk-select, .cxtk.cxtk .cxtk-select:focus { border-color: var(--tk-accent) !important; }
.cxtk.cxtk .cxtk-dd-list {
  position: absolute !important; left: 0 !important; right: 0 !important; top: calc(100% + 6px) !important; width: auto !important; z-index: 60 !important;
  display: block !important; margin: 0 !important; padding: 6px !important; list-style: none !important;
  background: #ffffff !important; background-image: none !important; border: 1px solid var(--tk-fill) !important; border-radius: 0 !important;
  box-shadow: 0 12px 32px rgba(0, 0, 0, .14) !important; outline: none !important;
  max-height: 300px !important; overflow-y: auto !important; -webkit-overflow-scrolling: touch;
  text-align: left !important; text-transform: none !important;
}
.cxtk.cxtk .cxtk-dd-list[hidden] { display: none !important; }
.cxtk.cxtk .cxtk-dd-item {
  display: block !important; margin: 0 !important; padding: 11px 14px !important; border: 0 !important; border-radius: 0 !important;
  background: transparent !important; background-image: none !important; color: var(--tk-text) !important;
  font-family: inherit !important; font-size: 15px !important; font-weight: 400 !important; line-height: 1.3 !important; text-align: left !important;
  letter-spacing: 0 !important; text-transform: none !important; text-decoration: none !important; text-shadow: none !important; box-shadow: none !important; outline: none !important;
  white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; cursor: pointer;
}
.cxtk.cxtk .cxtk-dd-item::before, .cxtk.cxtk .cxtk-dd-item::after { display: none !important; content: none !important; }
.cxtk.cxtk .cxtk-dd-item:hover, .cxtk.cxtk .cxtk-dd-item.is-active { background: var(--tk-row-hover) !important; }
.cxtk.cxtk .cxtk-dd-item.is-selected { color: var(--tk-accent) !important; font-weight: 600 !important; }
.cxtk.cxtk .cxtk-dd-item.is-placeholder { color: var(--tk-muted) !important; }

/* ---- v1.3.6: μπάρα κύλισης της λίστας — «A: λεπτή, διακριτική» (6px, ημιδιαφανής λαβή, χωρίς βελάκια)· ορατή σε
   ανοιχτό ΚΑΙ σκούρο φόντο. Άλλες εκδοχές/χρώματα από την «Εμφάνιση» → ανοιχτή λίστα → Μπάρα κύλισης ---- */
.cxtk.cxtk .cxtk-dd-list::-webkit-scrollbar { width: 6px; height: 6px; }
.cxtk.cxtk .cxtk-dd-list::-webkit-scrollbar-track { background: transparent; }
.cxtk.cxtk .cxtk-dd-list::-webkit-scrollbar-thumb { background: rgba(128, 128, 128, .45); border-radius: 6px; }
.cxtk.cxtk .cxtk-dd-list::-webkit-scrollbar-thumb:hover { background: rgba(128, 128, 128, .7); }
.cxtk.cxtk .cxtk-dd-list::-webkit-scrollbar-button { display: none; height: 0; }
@supports not selector(::-webkit-scrollbar) {
  .cxtk.cxtk .cxtk-dd-list { scrollbar-width: thin; scrollbar-color: rgba(128, 128, 128, .45) transparent; }
}

/* ---- v1.3.0: πλέγμα παικτών με φωτογραφία (player_view = grid) ---- */
.cxtk.cxtk .cxtk-dd-list--grid { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(calc(var(--tk-photo, 80px) + 24px), 1fr)) !important; gap: 6px !important; }
.cxtk.cxtk .cxtk-dd-item--card { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: flex-start !important; gap: 8px !important; padding: 10px 6px !important; text-align: center !important; white-space: normal !important; overflow: hidden !important; min-width: 0 !important; }
/* v1.3.3: στις κάρτες το φόντο (hover / επιλεγμένο) μπαίνει στο πλακίδιο της φωτό, ΟΧΙ πίσω από το όνομα */
.cxtk.cxtk .cxtk-dd-item--card, .cxtk.cxtk .cxtk-dd-item--card:hover, .cxtk.cxtk .cxtk-dd-item--card.is-active { background: transparent !important; }
.cxtk.cxtk .cxtk-dd-photo-wrap { display: block !important; width: var(--tk-photo, 80px) !important; max-width: 100% !important; margin: 0 auto !important; padding: 0 !important; border-radius: 0; overflow: hidden !important; background: transparent !important; flex: none !important; line-height: 0 !important; }
.cxtk.cxtk .cxtk-dd-item--card:hover .cxtk-dd-photo-wrap, .cxtk.cxtk .cxtk-dd-item--card.is-active .cxtk-dd-photo-wrap { background: var(--tk-row-hover) !important; }
/* v1.3.2: η φωτό ΔΕΝ κόβεται και δεν έχει φόντο (PNG με διαφάνεια): πλάτος = ρύθμιση, ύψος κατ' αναλογία */
.cxtk.cxtk .cxtk-dd-photo { display: block !important; width: var(--tk-photo, 80px) !important; height: auto !important; max-width: 100% !important; object-fit: contain !important; border-radius: 0; background: transparent !important; margin: 0 auto !important; flex: none !important; }
.cxtk.cxtk .cxtk-dd-photo--empty { display: flex !important; height: var(--tk-photo, 80px) !important; align-items: center !important; justify-content: center !important; font-weight: 700 !important; font-size: calc(var(--tk-photo, 80px) * .32) !important; line-height: 1 !important; color: var(--tk-muted) !important; background: var(--tk-fill) !important; letter-spacing: .02em; }
.cxtk.cxtk .cxtk-dd-name { display: -webkit-box !important; -webkit-box-orient: vertical !important; -webkit-line-clamp: 2 !important; width: 100% !important; font-size: 13px !important; line-height: 1.25 !important; overflow: hidden !important; white-space: normal !important; overflow-wrap: anywhere !important; }
.cxtk.cxtk .cxtk-select-photo { display: inline-block !important; width: auto !important; height: 36px !important; max-width: 60px !important; object-fit: contain !important; vertical-align: middle !important; margin: 0 10px 0 0 !important; border-radius: 0; background: transparent !important; }

/* ---- πεδία προσωποποίησης ---- */
.cxtk-fields { display: grid; grid-template-columns: minmax(0, 1fr) 128px; gap: 12px; }
.cxtk-field .cxtk-label { margin-top: 0; }
.cxtk-inputwrap { position: relative; display: flex; align-items: center; }
.cxtk.cxtk .cxtk-input {
  -webkit-appearance: none !important; appearance: none !important;
  display: block !important; width: 100% !important; height: 54px !important; min-height: 0 !important;
  margin: 0 !important; padding: 0 70px 0 18px !important;
  border: 1px solid var(--tk-line) !important; border-radius: 0 !important;
  background: #ffffff !important; color: var(--tk-text) !important;
  font-family: inherit !important; font-size: 16px !important; font-weight: 400 !important; line-height: 52px !important;
  letter-spacing: 0 !important; box-shadow: none !important; outline: none !important;
}
.cxtk.cxtk .cxtk-field--num .cxtk-input { padding-right: 40px !important; text-align: center !important; }
.cxtk.cxtk .cxtk-input::placeholder { color: var(--tk-muted); text-transform: none; }
.cxtk.cxtk .cxtk-input:focus { outline: 2px solid var(--tk-accent) !important; outline-offset: 1px !important; border-color: var(--tk-accent) !important; }
.cxtk-count { position: absolute; right: 40px; font-size: 12px; color: var(--tk-muted); pointer-events: none; }
.cxtk.cxtk .cxtk-clear {
  -webkit-appearance: none !important; appearance: none !important;
  position: absolute !important; right: 10px !important; width: 24px !important; height: 24px !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important;
  border: 0 !important; border-radius: 0 !important; background: var(--tk-fill) !important; color: var(--tk-muted) !important;
  font-size: 16px !important; line-height: 24px !important; box-shadow: none !important; outline: none !important; cursor: pointer;
}
.cxtk.cxtk .cxtk-clear:hover { color: var(--tk-text) !important; background: var(--tk-fill-hover) !important; }
.cxtk-err { margin-top: 8px; color: var(--tk-err); font-size: 13px; }

/* ---- badges ---- */
.cxtk.cxtk .cxtk-badge { padding: 0 18px 0 12px !important; height: 42px !important; }
.cxtk.cxtk .cxtk-badge input { width: 16px !important; height: 16px !important; margin: 0 !important; accent-color: var(--tk-accent); flex: none; }
.cxtk.cxtk .cxtk-badge img { width: 22px !important; height: 22px !important; object-fit: contain; flex: none; }

/* ---- σύνολο / σημειώσεις ---- */
.cxtk-extra { margin-top: 14px; font-weight: 600; font-size: 15px; }
.cxtk-notes { margin-top: 14px; font-size: 12px; color: var(--tk-muted); line-height: 1.5; }
.cxtk-notes p { margin: 0 0 4px; }

/* ---- δική μας προεπισκόπηση (Journal / default) ---- */
.cxtk-preview { margin-top: 16px; }
.cxtk.cxtk .cxtk-stage { position: relative; width: 100%; aspect-ratio: 1 / 1; max-height: 520px; background: #ffffff; border: 1px solid var(--tk-line); border-radius: 0; overflow: hidden; }
.cxtk-stage-img { position: absolute; inset: 0; width: 100% !important; height: 100% !important; max-width: none !important; object-fit: contain; display: block; margin: 0 !important; }
.cxtk-overlay { position: absolute; inset: 0; pointer-events: none; }
.cxtk-sides { margin-top: 10px; }
.cxtk.cxtk .cxtk-side { -webkit-appearance: none !important; appearance: none !important; width: 60px !important; height: 60px !important; min-height: 0 !important; margin: 0 !important; padding: 2px !important; border: 2px solid var(--tk-line) !important; border-radius: 0 !important; background: #ffffff !important; box-shadow: none !important; outline: none !important; cursor: pointer; overflow: hidden; }
.cxtk.cxtk .cxtk-side.is-selected { border-color: var(--tk-accent) !important; }
.cxtk.cxtk .cxtk-side img { width: 100% !important; height: 100% !important; object-fit: cover; border-radius: 0; display: block; margin: 0 !important; }

/* ---- ζώνες (κοινές με το overlay της CX gallery) ---- */
.cxtk-zone { position: absolute; display: block; text-align: center; white-space: nowrap; overflow: visible; font-weight: 700; letter-spacing: .02em; pointer-events: none; }
.cxtk-zone.is-outlined { outline: 1px dashed rgba(59, 59, 214, .6); }
.cxtk-busy { opacity: .6; pointer-events: none; }

@media (max-width: 480px) {
  .cxtk-fields { grid-template-columns: minmax(0, 1fr) 100px; }
  .cxtk.cxtk .cxtk-pill { height: 44px !important; padding: 0 16px !important; font-size: 14px !important; }
  .cxtk.cxtk .cxtk-chip, .cxtk.cxtk .cxtk-badge { height: 40px !important; font-size: 14px !important; }
}