/* ═══════════ COMPONENTS ═══════════
   Κάθε component είναι μία κλάση που μπορείς να βάλεις οπουδήποτε.
   Χρησιμοποιούν ΜΟΝΟ tokens — καμία σκέτη τιμή. */

/* ── Κουμπιά ── */
.btn {
  display: inline-flex; align-items: center; gap: var(--s-2);
  padding: var(--s-3) var(--s-5); border-radius: var(--r-full);
  font-weight: 700; font-size: var(--t-small); border: 1px solid transparent;
  cursor: pointer; transition: transform var(--d-fast) var(--e-out), box-shadow var(--d-base) var(--e-out);
  text-decoration: none; line-height: 1.2;
}
.btn:hover { transform: translateY(-1px); text-decoration: none; }
.btn-primary { background: var(--g-brand); color: #04101f; box-shadow: var(--sh-2); }
.btn-primary:hover { box-shadow: var(--glow); }
.btn-ghost { background: transparent; color: var(--c-ink); border-color: var(--c-line); }
.btn-ghost:hover { background: var(--c-surface-2); border-color: var(--c-brand); }

/* ── Κάρτα ── */
.card {
  background: var(--c-surface); border: 1px solid var(--c-line);
  border-radius: var(--r-lg); padding: var(--s-5);
  transition: border-color var(--d-base) var(--e-out), transform var(--d-base) var(--e-out);
}
.card:hover { border-color: color-mix(in srgb, var(--accent, var(--c-brand)) 55%, var(--c-line)); transform: translateY(-2px); }
.card h3 { margin-bottom: var(--s-2); }
.card p  { color: var(--c-ink-2); margin-bottom: 0; }

/* Κάρτα προϊόντος: το accent έρχεται από --accent, που ορίζεται ανά προϊόν.
   Έτσι το ίδιο component εξυπηρετεί και τα 7, χωρίς 7 παραλλαγές. */
.card-product { position: relative; overflow: hidden; }
.card-product::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: linear-gradient(90deg, var(--accent, var(--c-brand)), transparent);
}
.card-product .ico {
  width: 44px; height: 44px; border-radius: var(--r-md); display: grid; place-items: center;
  background: color-mix(in srgb, var(--accent, var(--c-brand)) 14%, transparent);
  color: var(--accent, var(--c-brand)); margin-bottom: var(--s-4);
}

/* Τα accents ανά προϊόν — μία γραμμή το καθένα */
.p-pharmacyone { --accent: var(--c-pharmacyone); }
.p-boxvisio    { --accent: var(--c-boxvisio); }
.p-rxvision    { --accent: var(--c-rxvision); }
.p-cloud       { --accent: var(--c-cloud); }
.p-pbx         { --accent: var(--c-pbx); }
.p-ecom        { --accent: var(--c-ecom); }
.p-caron       { --accent: var(--c-caron); }
.p-findora     { --accent: var(--c-findora); }
.p-nous        { --accent: var(--c-nous); }

/* ── Bento: άνισα κελιά χωρίς να μετράς στήλες στο χέρι ── */
.bento { display: grid; gap: var(--s-4); grid-template-columns: repeat(auto-fit, minmax(min(300px,100%), 1fr)); }
@media (min-width: 900px) {
  .bento { grid-template-columns: repeat(6, 1fr); }
  .bento > * { grid-column: span 2; }
  .bento > .wide { grid-column: span 3; }
  .bento > .full { grid-column: 1 / -1; }
}

/* ── Glass panel — με μέτρο, και με fallback όπου δεν υποστηρίζεται ── */
.glass {
  background: color-mix(in srgb, var(--c-surface) 72%, transparent);
  border: 1px solid color-mix(in srgb, var(--c-ink) 10%, transparent);
  border-radius: var(--r-lg);
}
@supports (backdrop-filter: blur(1px)) {
  .glass { backdrop-filter: blur(14px) saturate(1.3); }
}

/* ── Pill / ετικέτα ── */
.pill {
  display: inline-flex; align-items: center; gap: var(--s-1);
  padding: var(--s-1) var(--s-3); border-radius: var(--r-full);
  font-size: var(--t-micro); font-weight: 700; letter-spacing: .04em;
  background: color-mix(in srgb, var(--accent, var(--c-brand)) 16%, transparent);
  color: var(--accent, var(--c-brand));
}

/* ── Στατιστικό ── */
.stat b { display: block; font-size: var(--t-h2); line-height: 1; font-variant-numeric: tabular-nums; }
.stat span { color: var(--c-ink-3); font-size: var(--t-small); }

/* ── Φόντο με πλέγμα: διακριτικό, όχι θορυβώδες ── */
.mesh { position: relative; isolation: isolate; }
.mesh::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(60ch 40ch at 20% -10%, color-mix(in srgb, var(--c-brand) 16%, transparent), transparent 70%),
    radial-gradient(50ch 36ch at 95% 0%, color-mix(in srgb, var(--c-brand-2) 12%, transparent), transparent 70%);
}

/* ── Scroll reveal ──────────────────────────────────────────────────────────
   ΚΡΙΣΙΜΟ: το περιεχόμενο είναι ορατό ΕΞ ΑΡΧΗΣ. Κρύβεται μόνο αφού η JavaScript
   δηλώσει ότι τρέχει (html.js). Αν σπάσει το JS ή το μπλοκάρει ο browser, ο
   επισκέπτης βλέπει το site — δεν βλέπει λευκή σελίδα.
   Το ίδιο ισχύει για όποιον έχει ζητήσει λιγότερη κίνηση. */
.reveal { transition: opacity var(--d-slow) var(--e-out), transform var(--d-slow) var(--e-out); }
@media (prefers-reduced-motion: no-preference) {
  html.js .reveal:not(.is-in) { opacity: 0; transform: translateY(14px); }
}

/* ── Μπάρα λογοτύπων πελατών ────────────────────────────────────────────────
   Σε σκούρο φόντο τα πολύχρωμα λογότυπα «ουρλιάζουν». Τα ισοπεδώνουμε οπτικά
   (grayscale + χαμηλή αδιαφάνεια) και επανέρχονται στο hover. */
/* Τα λογότυπα πελατών είναι σχεδόν όλα φτιαγμένα για ΛΕΥΚΟ φόντο. Πάνω στο
   σκούρο, όσα έχουν αδιαφανές λευκό υπόβαθρο γίνονταν γκρι κουτιά. Αντί να τα
   «πειράξουμε» με φίλτρα, τους δίνουμε τη λωρίδα που περιμένουν. */

/* ── Μαρτυρίες: κύλιση με scroll-snap, ΟΧΙ βιβλιοθήκη ───────────────────────
   Δουλεύει με δάχτυλο, με ποντίκι και με πληκτρολόγιο, και δεν κοστίζει ούτε
   ένα byte JavaScript. */
.rail {
  display: grid; grid-auto-flow: column; grid-auto-columns: min(420px, 85%);
  gap: var(--s-4); overflow-x: auto; scroll-snap-type: x mandatory;
  padding-bottom: var(--s-4); scrollbar-width: thin;
}
.rail > * { scroll-snap-align: start; }
.rail::-webkit-scrollbar { height: 6px; }
.rail::-webkit-scrollbar-thumb { background: var(--c-line); border-radius: var(--r-full); }

.quote { display: flex; flex-direction: column; gap: var(--s-4); }
.quote p { font-size: 1.02rem; color: var(--c-ink); margin: 0; }
.quote footer { color: var(--c-ink-3); font-size: var(--t-small); margin-top: auto; }
.quote::before { content: "\201C"; font-size: 3rem; line-height: .6; color: var(--accent, var(--c-brand)); }

/* ── Screenshot προϊόντος μέσα σε κάρτα ─────────────────────────────────── */
.shot {
  border-radius: var(--r-md); border: 1px solid var(--c-line); overflow: hidden;
  margin-top: var(--s-4); box-shadow: var(--sh-2);
}
.shot img { display: block; width: 100%; }

/* ── Βραβεία ── */
.award { display: flex; gap: var(--s-4); align-items: flex-start; }
.award .yr { font-variant-numeric: tabular-nums; font-weight: 800; color: var(--c-brand-2);
  font-size: var(--t-small); min-width: 5.5ch; padding-top: 2px; }

/* ── Καρουζέλ πελατών ───────────────────────────────────────────────────────
   Γυρίζει μόνιμα, χωρίς βιβλιοθήκη. Η λωρίδα τυπώνεται δύο φορές και κινούνται
   και οι δύο κατά το πλάτος τους: μόλις η πρώτη βγει αριστερά, η δεύτερη έχει
   ήδη πάρει τη θέση της, οπότε δεν φαίνεται ραφή. Η σειρά ανακατεύεται σε κάθε
   φόρτωση (PHP) και ξανά από το app.js, ώστε να μη διαβάζεται ως λίστα. */
.marquee{
  display: flex;
  overflow: hidden;
  padding-block: var(--s-6);
  background: var(--c-surface-2);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  /* σβήσιμο στις δύο άκρες, για να μη «κόβονται» απότομα τα λογότυπα */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.marquee-track{
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: clamp(2rem, 5vw, 4rem);
  padding-inline-end: clamp(2rem, 5vw, 4rem);
  animation: cloudon-marquee 64s linear infinite;
  will-change: transform;
}
@keyframes cloudon-marquee{ to{ transform: translateX(-100%); } }

/* Πλακίδιο ανά λογότυπο. Τα αρχεία είναι ανάκατα — διάφανα PNG, JPG με λευκό
   φόντο, και του WeCare+ με μαύρο. Το κοινό λευκό πλακίδιο τα εξισώνει. */
.marquee-chip{
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  min-width: 172px;
  height: 96px;
  padding-inline: var(--s-5);
  background: #FFFFFF;
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  overflow: hidden;
}
.marquee-chip img{
  max-height: 58px;
  max-width: 150px;
  width: auto;
  height: auto;
  object-fit: contain;
}

/* Όποιος έχει ζητήσει λιγότερη κίνηση παίρνει μια λωρίδα που κυλάει με το χέρι. */
@media (prefers-reduced-motion: reduce){
  .marquee{ overflow-x: auto; scrollbar-width: thin; }
  .marquee-track{ animation: none; }
  .marquee-track[aria-hidden="true"]{ display: none; }
}

/* ── Καρουζέλ διακρίσεων ────────────────────────────────────────────────────
   Ένα βραβείο τη φορά. Διαφορετικός μηχανισμός από το καρουζέλ πελατών: εκεί
   η λωρίδα κυλάει συνέχεια, εδώ εναλλάσσονται διαφάνειες — γιατί το καθένα
   θέλει να διαβαστεί, δεν είναι σήμα που αναγνωρίζεις με μια ματιά.
   Χωρίς JavaScript φαίνονται ΟΛΑ, στη σειρά. */
.awards-carousel{
  margin-top: var(--s-7);
  border: 1px solid var(--c-line);
  border-radius: var(--r-lg);
  background: var(--c-surface);
  box-shadow: var(--sh-1);
  overflow: hidden;
}
.award-slides{ list-style: none; margin: 0; padding: 0; }
.award-slide{
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--s-6);
  align-items: center;
  padding: var(--s-7);
}
html.js .award-slide{ display: none; }
html.js .award-slide.is-on{ display: grid; animation: award-in .45s var(--e-out) both; }
@keyframes award-in{ from{ opacity: 0; transform: translateY(8px); } to{ opacity: 1; transform: none; } }

/* Η θέση της εικόνας. Όσο δεν υπάρχει φωτογραφία, μπαίνει τυπογραφικό σήμα. */
.award-visual{ display: grid; place-items: center; width: 132px; height: 132px; }
.award-photo{ max-width: 132px; max-height: 132px; width: auto; height: auto; object-fit: contain; }
.award-seal{
  display: grid; place-items: center;
  width: 118px; height: 118px; border-radius: 50%;
  background: radial-gradient(circle at 36% 30%,
    color-mix(in srgb, var(--c-brand-2) 22%, transparent), transparent 62%), var(--c-surface-2);
  border: 2px solid color-mix(in srgb, var(--c-brand-2) 38%, var(--c-line));
  color: var(--c-brand-2);
}
.award-mark{ width: 46px; height: 46px; stroke-width: 1.4; }
.award-text h3{ margin: var(--s-2) 0 var(--s-1); font-size: var(--t-h3); }
.award-text p.mut{ margin: 0; }

.award-nav{
  display: flex; align-items: center; gap: var(--s-4);
  padding: var(--s-4) var(--s-5);
  border-top: 1px solid var(--c-line);
  background: var(--c-surface-2);
}
html:not(.js) .award-nav{ display: none; }   /* χωρίς JS τα κουμπιά δεν κάνουν τίποτα */
.award-arrow{
  flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%;
  border: 1px solid var(--c-line); background: var(--c-surface);
  color: var(--c-ink-2); cursor: pointer; font-size: .95rem; line-height: 1;
}
.award-arrow:hover{ color: var(--c-ink); border-color: var(--c-ink-3); }
.award-dots{ list-style: none; display: flex; gap: var(--s-2); margin: 0 auto; padding: 0; }
.award-dot{
  border: 1px solid transparent; background: none; cursor: pointer;
  padding: var(--s-1) var(--s-3); border-radius: 999px;
  font: inherit; font-size: var(--t-micro); font-weight: 700;
  font-variant-numeric: tabular-nums; color: var(--c-ink-3);
}
.award-dot:hover{ color: var(--c-ink-2); }
.award-dot.is-on{ background: var(--c-surface); border-color: var(--c-line); color: var(--c-brand-2); }

@media (max-width: 620px){
  .award-slide{ grid-template-columns: 1fr; justify-items: center; text-align: center; padding: var(--s-6); }
  .award-nav{ gap: var(--s-2); }
}

/* Βαθμίδα βραβείου. Τα χρώματα βγαίνουν από τα ίδια τα σήματα — χρυσό και ασήμι. */
.award-tier{
  display: inline-block; margin-left: var(--s-2);
  padding: 1px var(--s-2); border-radius: 999px;
  font-size: var(--t-micro); font-weight: 800; letter-spacing: .06em;
  text-transform: uppercase; vertical-align: 2px;
}
.tier-gold   { background: #FBF0D5; color: #6E5410; border: 1px solid #E8D5A3; }
.tier-silver { background: #F0F2F4; color: #5B6671; border: 1px solid #DBE0E5; }

.award-cat{ margin: var(--s-2) 0 0; color: var(--c-ink-2); }
.award-meta{ display: flex; align-items: center; gap: var(--s-3); margin: var(--s-3) 0 0;
  font-size: var(--t-small); color: var(--c-ink-3); }
.award-meta .award-tier{ margin-left: 0; }