/* ============================================================
   login-skyline.css — Νέο split-screen Login look (Metronic template)
   5 χρωματικά θέματα: govgr (default) / navy / teal / green / red
   Πηγή σχεδίασης: Claude Design "Οικονομική / egfin".
   Όλα scoped κάτω από body.login-container-new ώστε ΝΑ ΜΗΝ επηρεάζει
   το admin (Blazor) ούτε άλλες περιοχές. Φορτώνεται ΜΕΤΑ το Metronic.css.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Public+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&display=swap');

/* ---- Tabler Icons (subset) — ίδια icons με το design ---- */
@font-face {
  font-family: "tabler-icons";
  font-style: normal;
  font-weight: 400;
  src: url("/webfonts/tabler-icons.woff2") format("woff2");
}
.login-container-new .ti {
  font-family: "tabler-icons" !important;
  font-style: normal; font-weight: normal; font-variant: normal;
  text-transform: none; line-height: 1; display: inline-block; speak: none;
  vertical-align: middle;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
.login-container-new .ti-mail:before { content: "\eae5"; }
.login-container-new .ti-lock:before { content: "\eae2"; }
.login-container-new .ti-eye:before { content: "\ea9a"; }
.login-container-new .ti-eye-off:before { content: "\ecf0"; }
.login-container-new .ti-check:before { content: "\ea5e"; }
.login-container-new .ti-language:before { content: "\ebbe"; }
.login-container-new .ti-chevron-down:before { content: "\ea5f"; }
.login-container-new .ti-arrow-right:before { content: "\ea1f"; }
.login-container-new .ti-id-badge-2:before { content: "\f076"; }
.login-container-new .ti-scale:before { content: "\ebc2"; }
.login-container-new .ti-loader-2:before { content: "\f226"; }
.login-container-new .ti-alert-circle:before { content: "\ea05"; }
.login-container-new .ti-key:before { content: "\eac7"; }
.login-container-new .ti-fingerprint:before { content: "\ebd1"; }
.login-container-new .ti-layout-grid:before { content: "\edba"; }
.login-container-new .ti-user:before { content: "\eb4d"; }
.login-container-new .ti-phone:before { content: "\eb09"; }
.login-container-new .ti-shield-lock:before { content: "\efdb"; }
.login-container-new .ti-chevron-right:before { content: "\ea61"; }
.login-container-new .ti-clock-hour-4:before { content: "\f31a"; }
.login-container-new .ti-id:before { content: "\eac3"; }
.login-container-new .ti-map-pin:before { content: "\eb4a"; }
.login-container-new .ti-building:before { content: "\ea6c"; }
.login-container-new .ti-circle-check:before { content: "\ea67"; }
.login-container-new .ti-info-circle:before { content: "\eac5"; }
.login-container-new .ti-alert-triangle:before { content: "\ea06"; }
.login-container-new .ti-x:before { content: "\eb55"; }

/* ---- Χρωματικά θέματα (default govgr) ---- */
body.login-container-new {
  --sky-primary:        #00243b;
  --sky-primary-hover:  #001827;
  --sky-brand-bg:       #00121f;
  --sky-glow:           rgba(0, 64, 105, .55);
  --sky-glow-0:         rgba(0, 64, 105, 0);
  --sky-ring:           rgba(0, 36, 59, .16);
  --sky-shadow:         rgba(0, 36, 59, .26);
  --sky-shadow-strong:  rgba(0, 36, 59, .30);

  /* Ουδέτερα (egfin tokens) */
  --sky-ink:            #1b2433;
  --sky-ink-2:          #4a5568;
  --sky-ink-3:          #6b7280;
  --sky-ink-4:          #9aa3b2;
  --sky-border:         #e4e7eb;
  --sky-border-strong:  #d2d6dc;
  --sky-surface-alt:    #fafbfc;
  --sky-primary-soft:   #eef2f8;
  --sky-font: 'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Commissioner', 'Helvetica Neue', Arial, sans-serif;
}
body.login-container-new.scheme-navy {
  --sky-primary:#1e3548; --sky-primary-hover:#335c7d; --sky-brand-bg:#0d1b26;
  --sky-glow:rgba(61,109,148,.55); --sky-glow-0:rgba(61,109,148,0);
  --sky-ring:rgba(0,0,0,.14); --sky-shadow:rgba(0,0,0,.18); --sky-shadow-strong:rgba(0,0,0,.22);
}
body.login-container-new.scheme-teal {
  --sky-primary:#2d7577; --sky-primary-hover:#235a5c; --sky-brand-bg:#0f1f27;
  --sky-glow:rgba(45,117,119,.55); --sky-glow-0:rgba(45,117,119,0);
  --sky-ring:rgba(45,117,119,.16); --sky-shadow:rgba(45,117,119,.28); --sky-shadow-strong:rgba(45,117,119,.32);
}
body.login-container-new.scheme-green {
  --sky-primary:#3f6b4f; --sky-primary-hover:#31543e; --sky-brand-bg:#0f2117;
  --sky-glow:rgba(63,107,79,.55); --sky-glow-0:rgba(63,107,79,0);
  --sky-ring:rgba(0,0,0,.14); --sky-shadow:rgba(0,0,0,.18); --sky-shadow-strong:rgba(0,0,0,.22);
}
body.login-container-new.scheme-red {
  --sky-primary:#c2413f; --sky-primary-hover:#a83335; --sky-brand-bg:#25100f;
  --sky-glow:rgba(160,40,38,.55); --sky-glow-0:rgba(160,40,38,0);
  --sky-ring:rgba(194,65,63,.16); --sky-shadow:rgba(194,65,63,.26); --sky-shadow-strong:rgba(194,65,63,.30);
}

/* ---- Shell reset (μόνο για το νέο login body) ---- */
body.login-container-new {
  margin: 0; padding: 0; background: #ffffff;
  color: var(--sky-ink); font-family: var(--sky-font);
}
body.login-container-new * { box-sizing: border-box; }
body.login-container-new a { color: var(--sky-primary); text-decoration: none; }
body.login-container-new a:hover { color: var(--sky-primary-hover); }

/* ============================================================
   SPLIT-SCREEN SHELL
   ============================================================ */
.login-container-new .sky-shell {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1fr 1.06fr;
  background: #ffffff;
}
/* brand/logo αριστερά, φόρμα δεξιά */
.login-container-new .sky-brand { order: 1; }
.login-container-new .sky-form { order: 2; }

/* ---- FORM SIDE (αριστερά) ---- */
.login-container-new .sky-form {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 40px 52px 26px;
  overflow: hidden;
  background: #ffffff;
}
.login-container-new .sky-form::before {
  content: "";
  position: absolute; inset: 0;
  background-image: radial-gradient(var(--sky-border) 1px, transparent 1px);
  background-size: 22px 22px;
  opacity: .55;
  -webkit-mask-image: radial-gradient(120% 90% at 88% 0%, #000 0%, transparent 62%);
  mask-image: radial-gradient(120% 90% at 88% 0%, #000 0%, transparent 62%);
  pointer-events: none;
}
.login-container-new .sky-form-body {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: 452px; width: 100%;
  margin: 0 auto;
  padding: 24px 0;
  animation: skyRise .5s ease both;
}
/* Register page: 2-στηλο layout (Όνομα/Επώνυμο, Κωδικός/Επιβεβαίωση) -> φαρδύτερη φόρμα + footer */
.login-container-new .sky-form-body:has(.sky-row) { max-width: 500px; }
.login-container-new .sky-form:has(.sky-row) .sky-form-foot { max-width: 500px; }
.login-container-new .sky-form-foot {
  position: relative;
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px;
  max-width: 452px; width: 100%; margin: 0 auto;
  font-size: 12.5px; color: var(--sky-ink-4);
}

/* ---- Τίτλος / intro ---- */
.login-container-new .sky-title {
  margin: 0; font-size: 40px; font-weight: 700;
  letter-spacing: -.02em; line-height: 1.05; color: var(--sky-ink);
}
.login-container-new .sky-intro {
  margin: 10px 0 24px; font-size: 15px; line-height: 1.5;
  color: var(--sky-ink-3); max-width: 36ch;
}

/* ---- Social providers ---- */
.login-container-new .sky-providers {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
}
.login-container-new .sky-provider {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  height: 44px; padding: 0 10px;
  border: 1px solid var(--sky-border); border-radius: 8px;
  background: #fff; color: var(--sky-ink-2);
  font-family: inherit; font-size: 13.5px; font-weight: 400;
  cursor: pointer; transition: all .12s ease; text-align: center;
}
.login-container-new .sky-provider:hover {
  border-color: var(--sky-border-strong); background: var(--sky-surface-alt);
  color: var(--sky-ink-2);
}
.login-container-new .sky-provider--wide { grid-column: span 2; }
.login-container-new .sky-providers.one-provider .sky-provider { grid-column: span 2; }
.login-container-new .sky-provider .img-icon,
.login-container-new .sky-provider img { height: 18px; width: auto; margin: 0; }
.login-container-new .sky-provider i { font-size: 16px; width: 20px; text-align: center; }
.login-container-new .sky-provider .sky-i-gsis { color: var(--sky-primary); }

/* ---- Separator ---- */
.login-container-new .sky-sep {
  display: flex; align-items: center; gap: 14px; margin: 22px 0 18px;
}
.login-container-new .sky-sep::before,
.login-container-new .sky-sep::after {
  content: ""; flex: 1; height: 1px; background: var(--sky-border);
}
.login-container-new .sky-sep span {
  font-size: 10.5px; font-weight: 600; letter-spacing: .1em;
  text-transform: uppercase; color: var(--sky-ink-4); white-space: nowrap;
}

/* ---- Floating-label fields ---- */
.login-container-new .sky-fields { display: flex; flex-direction: column; gap: 16px; }
.login-container-new .sky-field { position: relative; display: block; }
.login-container-new .sky-field-icon {
  position: absolute; left: 13px; top: 50%; transform: translateY(-50%);
  font-size: 16px; color: var(--sky-ink-4); pointer-events: none; z-index: 2;
}
.login-container-new .sky-input {
  width: 100%; height: 50px;
  padding: 16px 14px 0 40px;
  border: 1px solid var(--sky-border-strong); border-radius: 8px;
  background: #fff; font-size: 14.5px; color: var(--sky-ink);
  font-family: var(--sky-font); font-weight: 400; outline: none;
  transition: box-shadow .12s ease, border-color .12s ease;
}
/* το κείμενο μέσα στα πεδία: normal weight (το Metronic .input κάνει 500 -> πιο bold) */
body.login-container-new .sky-form-body .sky-input,
body.login-container-new .sky-form-body .input { font-weight: 400; color: var(--sky-ink); }
.login-container-new .sky-field-pass .sky-input { padding-right: 46px; }
.login-container-new .sky-input:focus {
  border-color: var(--sky-primary);
  box-shadow: 0 0 0 3px var(--sky-ring);
}
.login-container-new .sky-field-label {
  position: absolute; left: 40px; top: 50%; transform: translateY(-50%);
  pointer-events: none; font-size: 14.5px; font-weight: 400; color: var(--sky-ink-4);
  transition: all .14s ease;
  max-width: calc(100% - 52px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.login-container-new .sky-input:focus + .sky-field-label,
.login-container-new .sky-input:not(:placeholder-shown) + .sky-field-label {
  top: 7px; transform: none; font-size: 10.5px; font-weight: 600;
  letter-spacing: .07em; text-transform: uppercase; color: var(--sky-ink-3);
}
.login-container-new .sky-eye {
  position: absolute; right: 8px; top: 0; bottom: 0; margin: auto 0;
  width: 36px; height: 36px; display: flex; align-items: center; justify-content: center;
  padding: 0; line-height: 0; transform: none;
  border: 0; border-radius: 6px; background: transparent;
  color: var(--sky-ink-3); cursor: pointer; transition: all .12s ease; z-index: 2;
}
.login-container-new .sky-eye i { font-size: 20px; line-height: 1; display: block; }
.login-container-new .sky-eye:hover { background: var(--sky-primary-soft); color: var(--sky-primary); }

/* ---- Submit ---- */
.login-container-new .sky-submit {
  margin-top: 22px;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; height: 50px; border: 0; border-radius: 8px;
  background: var(--sky-primary); color: #fff;
  font-family: inherit; font-size: 15px; font-weight: 600; letter-spacing: .01em;
  cursor: pointer; box-shadow: 0 6px 18px var(--sky-shadow);
  transition: background .12s ease, transform .12s ease, box-shadow .12s ease;
}
.login-container-new .sky-submit:hover {
  background: var(--sky-primary-hover); transform: translateY(-1px);
  box-shadow: 0 10px 24px var(--sky-shadow-strong); color: #fff;
}
.login-container-new .sky-submit:active { transform: translateY(0); }

/* ---- Error alert (όπως design) ---- */
.login-container-new .sky-alert {
  display: flex; align-items: flex-start; gap: 10px; margin-bottom: 14px;
  padding: 11px 13px; border: 1px solid rgba(234,84,85,.35); border-left: 3px solid #ea5455;
  border-radius: 8px; background: rgba(234,84,85,.07);
}
.login-container-new .sky-alert > i { flex: none; margin-top: 1px; font-size: 17px; color: #ea5455; }
.login-container-new .sky-alert .sky-alert-body { font-size: 13px; line-height: 1.45; color: #b23e3f; }
.login-container-new .sky-alert .sky-alert-body a { color: #b23e3f; font-weight: 600; text-decoration: underline; }
.login-container-new .sky-loginform.has-error .sky-input { border-color: rgba(234,84,85,.6); }

/* register: 2 στήλες (Όνομα/Επώνυμο), κόκκινος αστερίσκος, τίτλος αριστερά */
.login-container-new .sky-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.login-container-new .sky-req { color: #ea5455; font-weight: 700; }
.login-container-new .sky-form-body .register-head { justify-content: flex-start; margin-bottom: 2px; }
.login-container-new .sky-form-body .register-title { text-align: left; font-size: 40px; font-weight: 700; letter-spacing: -.02em; }
.login-container-new .sky-form-body .register-subltitle {
  display: block; text-align: left; width: auto; max-width: 40ch;
  font-size: 15px; line-height: 1.5; font-weight: 400; color: var(--sky-ink-3);
  margin: 10px 0 24px;
}
@media (max-width: 480px) { .login-container-new .sky-row { grid-template-columns: 1fr; } }

/* ---- Terms ---- */
.login-container-new .sky-terms {
  display: flex; gap: 10px; align-items: flex-start; margin-top: 18px;
  font-size: 12.5px; line-height: 1.5; color: var(--sky-ink-3);
}
.login-container-new .sky-terms p { margin: 0; color: var(--sky-ink-3); font-size: 12.5px; line-height: 1.5; }
.login-container-new .sky-terms a { font-weight: 600; }

/* ---- Links row (Εγγραφή / Ξεχάσατε) ---- */
.login-container-new .sky-links {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 16px; margin-top: 22px; padding-top: 18px;
  border-top: 1px solid var(--sky-border);
  font-size: 13px; color: var(--sky-ink-3);
}
.login-container-new .sky-links a { font-weight: 600; white-space: nowrap; }

/* ---- Language picker (form foot) ---- */
.login-container-new .sky-lang { position: relative; }
.login-container-new .sky-lang-btn {
  display: inline-flex; align-items: center; gap: 8px; padding: 7px 10px;
  border: 1px solid var(--sky-border); border-radius: 8px; background: #fff;
  font-family: inherit; font-size: 12.5px; font-weight: 600; color: var(--sky-ink-2);
  cursor: pointer; transition: all .12s ease;
}
.login-container-new .sky-lang-btn:hover { border-color: var(--sky-border-strong); background: var(--sky-surface-alt); }
.login-container-new .sky-lang-btn img { width: 18px; height: auto; border-radius: 3px; }
.login-container-new .sky-lang-menu {
  position: absolute; bottom: calc(100% + 6px); left: 0; min-width: 148px;
  padding: 4px 0; border: 1px solid var(--sky-border); border-radius: 8px;
  background: #fff; box-shadow: 0 5px 12px 0 rgba(67,89,113,.18);
  overflow: hidden; z-index: 5;
  opacity: 0; visibility: hidden; transform: translateY(4px); transition: all .14s ease;
}
.login-container-new .sky-lang:hover .sky-lang-menu,
.login-container-new .sky-lang:focus-within .sky-lang-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.login-container-new .sky-lang-menu button {
  display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 12px;
  border: 0; background: transparent; font-family: inherit; font-size: 12.5px;
  font-weight: 500; text-align: left; color: var(--sky-ink-2); cursor: pointer;
}
.login-container-new .sky-lang-menu button:hover { background: var(--sky-surface-alt); }
.login-container-new .sky-lang-menu img { width: 18px; height: auto; border-radius: 3px; }
.login-container-new .sky-official { font-size: 12.5px; font-weight: 600; color: var(--sky-ink-3); white-space: nowrap; }

/* ============================================================
   BRAND SIDE (δεξιά)
   ============================================================ */
.login-container-new .sky-brand {
  position: relative; overflow: hidden; z-index: 2;
  background: var(--sky-brand-bg);
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 40px 48px;
  /* Κυρτή δεξιά άκρη που «αναπνέει» — αλλάζει σχήμα συνεχώς */
  border-radius: 0 46% 46% 0 / 0 50% 50% 0;
  animation: skyBrandMorph 7s ease-in-out infinite;
}
@keyframes skyBrandMorph {
  0%,100% { border-radius: 0 46% 46% 0 / 0 50% 50% 0; }
  25%     { border-radius: 0 58% 40% 0 / 0 44% 60% 0; }
  50%     { border-radius: 0 42% 54% 0 / 0 62% 42% 0; }
  75%     { border-radius: 0 52% 44% 0 / 0 40% 56% 0; }
}
.login-container-new .sky-glow {
  position: absolute; width: 130%; height: 130%; left: -15%; top: -15%;
  background: radial-gradient(45% 45% at 62% 38%, var(--sky-glow) 0%, var(--sky-glow-0) 70%);
  animation: skyDrift 16s ease-in-out infinite; pointer-events: none;
}
.login-container-new .sky-stars { position: absolute; inset: 0; pointer-events: none; }
.login-container-new .sky-stars span {
  position: absolute; border-radius: 50%; background: rgba(255,255,255,.5);
  box-shadow: 0 0 8px 1.2px rgba(255,255,255,.16); opacity: .14;
  animation-name: skyTwinkle; animation-timing-function: ease-in-out; animation-iteration-count: infinite;
  animation-fill-mode: backwards;
}
.login-container-new .sky-brand-main {
  position: relative; flex: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 20px 0;
}
.login-container-new .sky-seal {
  position: relative; display: flex; align-items: center; justify-content: center; width: 100%;
}
.login-container-new .sky-seal a { display: grid; place-items: center; }
.login-container-new .sky-seal-ring {
  position: absolute; inset: 0; border: 1px solid rgba(255,255,255,.14); border-radius: 50%;
}
.login-container-new .sky-seal-pulse {
  position: absolute; inset: -22px; border: 1px solid rgba(255,255,255,.07); border-radius: 50%;
  animation: skyRing 4.5s ease-out infinite;
}
.login-container-new .sky-seal img {
  max-width: 250px; max-height: 175px; width: auto; height: auto; display: block;
  filter: drop-shadow(0 10px 26px rgba(0,0,0,.4));
}
/* Co-branding: brand logo + κάθετο (μικρό σε height) border + partner (Egritos) logo */
.login-container-new .sky-seal-cobrand { gap: 26px; }
.login-container-new .sky-seal-cobrand a { display: inline-grid; }
.login-container-new .sky-seal-cobrand img,
.login-container-new .sky-seal-partner { max-width: 168px; max-height: 92px; }
.login-container-new .sky-seal-divider { width: 1px; height: 46px; background: rgba(255,255,255,.22); flex: none; }

/* ============================================================
   INTRO — "φούσκα" με το Egritos logo που φεύγει προς το σκούρο panel (αριστερά)
   Παίζει μία φορά ανά session (JS sessionStorage -> .eg-intro-done)
   ============================================================ */
@keyframes egCurtain {
  0%, 52%  { background: #fff; }
  72%      { background: rgba(255,255,255,0); }
  100%     { background: rgba(255,255,255,0); visibility: hidden; }
}
@keyframes egBubble {
  0%   { transform: translateX(0) scale(0);    opacity: 0; }
  10%  { opacity: 1; }
  22%  { transform: translateX(0) scale(1); }
  30%  { transform: translateX(0) scale(1.09); }
  40%  { transform: translateX(0) scale(1); }
  52%  { transform: translateX(0) scale(1); }
  86%  { opacity: 1; }
  100% { transform: translateX(-24vw) scale(7); opacity: 0; }
}
@keyframes egBubbleLogo {
  0%   { opacity: 0; transform: scale(.55); filter: blur(5px); }
  22%  { opacity: 1; transform: scale(1);   filter: blur(0); }
  30%  { transform: scale(1.06); }
  40%  { transform: scale(1); }
  56%  { opacity: 1; }
  68%  { opacity: 0; transform: scale(1.1); }
  100% { opacity: 0; }
}
@keyframes egBubbleRing {
  0%, 24% { opacity: 0; transform: scale(.9); }
  32%     { opacity: .5; }
  100%    { opacity: 0; transform: scale(1.9); }
}
.eg-intro {
  position: fixed; inset: 0; z-index: 1060;
  display: grid; place-items: center;
  pointer-events: none; background: #fff;
  animation: egCurtain 2.1s linear both;
}
.eg-intro__bubble {
  position: relative; width: 300px; height: 300px; border-radius: 50%;
  background: radial-gradient(60% 60% at 50% 40%, #0b3550 0%, #00121f 68%);
  box-shadow: 0 30px 90px rgba(0,18,31,.45);
  display: grid; place-items: center;
  animation: egBubble 2.1s cubic-bezier(.62,.02,.3,1) both;
}
.eg-intro__ring {
  position: absolute; inset: -6px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.35);
  animation: egBubbleRing 2.1s cubic-bezier(.2,.8,.3,1) both;
}
.eg-intro__logo {
  width: 152px; height: auto; display: block;
  animation: egBubbleLogo 2.1s cubic-bezier(.62,.02,.3,1) both;
}
/* Έχει ήδη παίξει σε αυτό το session -> μη το δείχνεις (χωρίς flash) */
.eg-intro-done .eg-intro { display: none !important; }
@media (prefers-reduced-motion: reduce) { .eg-intro { display: none; } }
.login-container-new .sky-brand-sub-short { display: none; }
.login-container-new .sky-brand-title {
  margin: 32px 0 0; font-size: clamp(22px, 3vw, 38px); font-weight: 500;
  letter-spacing: -.02em; line-height: 1.08; color: #fff;
}
.login-container-new .sky-brand-rule { width: 46px; height: 2px; background: var(--sky-primary); margin: 40px 0; }
.login-container-new .sky-brand-sub,
.login-container-new .sky-brand-sub-short {
  margin: 16px 0 0; max-width: 52ch; font-size: 14.5px; line-height: 1.6; color: rgba(255,255,255,.6);
}
.login-container-new .sky-features {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
  margin-top: 32px; width: 100%; max-width: 420px;
}
.login-container-new .sky-feature {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 16px 8px; border: 1px solid rgba(255,255,255,.09); border-radius: 10px;
  background: rgba(255,255,255,.035);
}
.login-container-new .sky-feature i { font-size: 19px; color: rgba(255,255,255,.72); }
.login-container-new .sky-feature span {
  font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase;
  color: rgba(255,255,255,.5); line-height: 1.3; text-align: center;
}
.login-container-new .sky-brand-foot {
  position: relative; display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.08);
}
.login-container-new .sky-brand-foot span {
  font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: rgba(255,255,255,.32);
}
.login-container-new .sky-brand-foot .sky-brand-foot-strong { font-weight: 600; }
/* ΕΣΠΑ banner (κάτω στο brand panel) */
.login-container-new .sky-espa {
  position: relative; z-index: 1; width: 100%; max-width: 300px; align-self: center; margin: 0 auto;
  display: flex; align-items: center; justify-content: center;
  border-radius: 10px;
}
.login-container-new .sky-espa img { width: 100%; height: auto; display: block; }
/* άσπρο ΕΣΠΑ (άσπρο κείμενο) σε dark panel -> διαφανές */
.login-container-new .sky-espa.sky-espa-plain img { background: transparent !important; }
/* σκούρο ΕΣΠΑ (μπλε κείμενο) -> λευκό card */
.login-container-new .sky-espa.sky-espa-card img { background: #fff; padding: 8px 12px; border-radius: 8px; }

/* Βήματα (steps) — κύκλοι με connecting lines */
.login-container-new .sky-steps {
  position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 0;
  width: 100%; max-width: 430px; margin-top: 38px;
}
.login-container-new .sky-steps-line {
  position: absolute; top: 17px; height: 1px;
  background: linear-gradient(90deg, rgba(255,255,255,.06), rgba(255,255,255,.22), rgba(255,255,255,.06));
}
.login-container-new .sky-steps-line-1 { left: calc(16.66% + 26px); width: calc(33.33% - 52px); }
.login-container-new .sky-steps-line-2 { left: calc(50% + 26px); width: calc(33.33% - 52px); }
.login-container-new .sky-step {
  position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.login-container-new .sky-step-ic {
  display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.22); background: rgba(255,255,255,.06);
  transition: background .18s ease, border-color .18s ease, transform .18s ease;
}
.login-container-new .sky-step:hover .sky-step-ic { background: rgba(255,255,255,.13); border-color: rgba(255,255,255,.4); transform: translateY(-2px); }
.login-container-new .sky-step-ic i { font-size: 16px; color: rgba(255,255,255,.8); }
.login-container-new .sky-step-lbl {
  font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase;
  color: rgba(255,255,255,.5); line-height: 1.35; text-align: center;
}

/* ============================================================
   ANIMATIONS
   ============================================================ */
@keyframes skyDrift {
  0%   { transform: translate3d(0,0,0) scale(1); }
  50%  { transform: translate3d(0,-3%,0) scale(1.06); }
  100% { transform: translate3d(0,0,0) scale(1); }
}
@keyframes skyRise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes skyOrbitA {
  0%   { transform: rotate(0deg) translateY(0) scale(1);      border-radius: 42%; }
  25%  { transform: rotate(5deg) translateY(-12px) scale(1.05); border-radius: 52% 38% 46% 44%; }
  50%  { transform: rotate(9deg) translateY(-18px) scale(1.09); border-radius: 34% 50% 40% 56%; }
  75%  { transform: rotate(4deg) translateY(-8px) scale(1.04);  border-radius: 48% 42% 55% 36%; }
  100% { transform: rotate(0deg) translateY(0) scale(1);      border-radius: 42%; }
}
@keyframes skyOrbitB {
  0%   { transform: rotate(0deg) translateY(0) scale(1);       border-radius: 46%; }
  30%  { transform: rotate(-7deg) translateY(9px) scale(1.07);  border-radius: 38% 54% 42% 50%; }
  60%  { transform: rotate(-11deg) translateY(14px) scale(1.11); border-radius: 55% 36% 50% 40%; }
  100% { transform: rotate(0deg) translateY(0) scale(1);       border-radius: 46%; }
}
@keyframes skyRing { 0% { opacity: .35; transform: scale(1); } 100% { opacity: 0; transform: scale(1.35); } }
@keyframes skyTwinkle { 0%, 100% { opacity: .14; transform: scale(.97); } 50% { opacity: .28; transform: scale(1.02); } }

@media (prefers-reduced-motion: reduce) {
  .login-container-new .sky-glow,
  .login-container-new .sky-orbit-a,
  .login-container-new .sky-orbit-b,
  .login-container-new .sky-seal-pulse,
  .login-container-new .sky-brand,
  .login-container-new .sky-form-body { animation: none !important; }
}

/* Μεγάλες οθόνες (>1600px): η καμπύλη μπαίνει κάτω από τη λευκή στήλη */
@media (min-width: 1600px) {
  .login-container-new .sky-brand { margin-right: -9%; }
}
/* Μεσαίες οθόνες (<1300px): μικρότερη καμπύλη ώστε να μη μπαίνει τόσο μέσα */
@keyframes skyBrandMorphSm {
  0%,100% { border-radius: 0 32% 32% 0 / 0 50% 50% 0; }
  25%     { border-radius: 0 40% 27% 0 / 0 44% 60% 0; }
  50%     { border-radius: 0 28% 37% 0 / 0 62% 42% 0; }
  75%     { border-radius: 0 36% 30% 0 / 0 40% 56% 0; }
}
@media (max-width: 1300px) {
  .login-container-new .sky-brand {
    border-radius: 0 32% 32% 0 / 0 50% 50% 0;
    animation-name: skyBrandMorphSm;
  }
}

/* ============================================================
   RESPONSIVE — tablet & mobile: stacked (brand πάνω, φόρμα κάτω)
   ============================================================ */
@media (max-width: 992px) {
  .login-container-new .sky-shell { display: flex; flex-direction: column; min-height: 100vh; }
  .login-container-new .sky-brand { order: -1; padding: 44px 56px 36px; border-radius: 0; margin-right: 0; animation: none; }
  .login-container-new .sky-brand-main { flex: none; padding: 0; }
  .login-container-new .sky-seal img { max-width: 200px; max-height: 104px; }
  .login-container-new .sky-brand-title { margin-top: 22px; font-size: 28px; }
  .login-container-new .sky-brand-rule { display: none; }
  .login-container-new .sky-steps { display: none; }
  .login-container-new .sky-espa { margin-top: 22px; max-width: 340px; }
  .login-container-new .sky-brand-sub,
  .login-container-new .sky-brand-sub-short { display: none; }
  .login-container-new .sky-form { padding: 34px 40px 24px; }
  .login-container-new .sky-form-body { padding: 8px 0; }
}

@media (max-width: 600px) {
  .login-container-new .sky-brand { padding: 30px 22px 26px; }
  .login-container-new .sky-brand-main { align-items: center; }
  .login-container-new .sky-seal img { max-width: 168px; max-height: 84px; }
  .login-container-new .sky-brand-title { font-size: 22px; margin-top: 18px; }
  .login-container-new .sky-brand-rule { display: none; }
  .login-container-new .sky-brand-sub,
  .login-container-new .sky-brand-sub-short { display: none; }
  .login-container-new .sky-form { padding: 26px 20px 20px; }
  .login-container-new .sky-title { font-size: 30px; }
  .login-container-new .sky-intro { margin-bottom: 20px; }
  .login-container-new .sky-form-foot { flex-direction: column; align-items: flex-start; gap: 12px; }
}

/* ============================================================
   Legacy overrides — ώστε ΟΙ ΑΛΛΕΣ σελίδες (register / forgot / reset /
   2fa) που μοιράζονται τις κοινές form classes να ακολουθούν το νέο look.
   Scoped κάτω από .login-container-new .sky-form-body.
   ============================================================ */
.login-container-new .sky-form-body .center,
.login-container-new .sky-form-body .center-sm-div { background: transparent; width: 100%; max-width: 100%; padding: 0; }
.login-container-new .sky-form-body .cont-wrap-450 { max-width: 100%; margin: 0; }
.login-container-new .sky-form-body .register-title { color: var(--sky-ink); font-size: 34px; font-weight: 700; letter-spacing: -.02em; }
.login-container-new .sky-form-body .register-subltitle { color: var(--sky-ink-3); font-size: 15px; margin-bottom: 22px; }
.login-container-new .sky-form-body .separator-content { margin: 22px 0 !important; }
.login-container-new .sky-form-body .separator-content span { color: var(--sky-ink-4); font-size: 10.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.login-container-new .sky-form-body .separator-content::before,
.login-container-new .sky-form-body .separator-content::after { border-bottom-color: var(--sky-border); }
.login-container-new .sky-form-body .loginProvidersWrap { gap: 10px; }
.login-container-new .sky-form-body .btn-ext-login {
  width: calc(50% - 5px); border-radius: 8px; border: 1px solid var(--sky-border);
  background: #fff; color: var(--sky-ink-2); padding: 0 10px; height: 44px; transition: all .12s ease;
}
.login-container-new .sky-form-body .btn-ext-login:hover { background: var(--sky-surface-alt); border-color: var(--sky-border-strong); color: var(--sky-ink-2); }
.login-container-new .sky-form-body .one-provider .btn-ext-login { width: 100% !important; }

/* ---- Overlay: λίστα οργανισμών («Σύνδεση μέσω άλλου οργανισμού») ---- */
.login-container-new .sky-form-body .more-auth-content .register-head { justify-content: flex-start; margin-bottom: 2px; }
.login-container-new .sky-form-body .more-auth-content .register-title { text-align: left; font-size: 34px; font-weight: 700; letter-spacing: -.02em; color: var(--sky-ink); }
.login-container-new .sky-form-body .auth-menu { margin-top: 0; padding: 0; height: auto; max-height: 60vh; overflow-y: auto; }
.login-container-new .sky-form-body #external-auth-search { margin-bottom: 12px; }
.login-container-new .sky-form-body .filterable { display: flex; flex-wrap: wrap; align-content: flex-start; gap: 20px; margin: 0; }
.login-container-new .sky-form-body .external-auth-btn {
  display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center; gap: 20px;
  width: calc(50% - 10px); min-height: 128px; padding: 16px 10px; margin: 0;
  border: 1px solid var(--sky-border); border-radius: 8px; background: #fff;
  color: var(--sky-ink); text-align: center; transition: all .12s ease;
}
.login-container-new .sky-form-body .external-auth-btn:hover { border-color: var(--sky-primary); background: var(--sky-surface-alt); }
.login-container-new .sky-form-body .external-auth-btn .img-ico { height: 75px !important; width: auto !important; max-width: 100% !important; object-fit: contain; flex: none; margin: 0 !important; display: block; }
.login-container-new .sky-form-body .external-auth-btn .provider-title { max-width: 100%; text-align: center; font-size: 13px; font-weight: 500; line-height: 1.25; }
.login-container-new .sky-form-body .external-auth-btn:not(.match) { display: none !important; }

/* ---- Κάρτα επιλογής μεθόδου 2FA (SendCode: Email / Authenticator) ---- */
.login-container-new .sky-method-card {
  width: 100%; margin: 18px auto 0;
  border: 1px solid #e4e7eb; border-radius: 10px; overflow: hidden;
}
.login-container-new .sky-method {
  display: flex; align-items: center; gap: 14px; width: 100%;
  padding: 17px 18px; border: 0; background: #fff;
  font-family: inherit; text-align: left; cursor: pointer;
  transition: background .12s ease;
}
.login-container-new .sky-method:not(:last-child) { border-bottom: 1px solid #e4e7eb; }
.login-container-new .sky-method:hover { background: #fafbfc; }
.login-container-new .sky-method:focus-visible { outline: 2px solid #00243b; outline-offset: -2px; }
.login-container-new .sky-method-ic { flex: none; font-size: 26px; color: #00243b; line-height: 1; }
.login-container-new .sky-method-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.login-container-new .sky-method-title { font-size: 16px; font-weight: 600; color: #1b2433; }
.login-container-new .sky-method-sub { font-size: 12.5px; font-weight: 400; color: #6b7280; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.login-container-new .sky-method-chev { margin-left: auto; flex: none; font-size: 18px; color: #9aa3b2; }

/* ---- Κλείδωμα λογαριασμού (Lockout) — κάρτα με countdown + progress ---- */
.login-container-new .sky-lock-card {
  position: relative; overflow: hidden; text-align: left;
  margin-top: 24px; padding: 22px 24px;
  border: 1px solid var(--sky-border); border-radius: 12px; background: var(--sky-surface-alt);
}
.login-container-new .sky-lock-progress {
  position: absolute; left: 0; top: 0; bottom: 0; width: 0;
  background: rgba(0,36,59,.05); transition: width 1s linear;
}
.login-container-new .sky-lock-row { position: relative; display: flex; align-items: center; gap: 18px; }
.login-container-new .sky-lock-ic-wrap {
  flex: none; display: grid; place-items: center; width: 46px; height: 46px;
  border-radius: 50%; border: 1px solid var(--sky-border-strong); background: #fff;
}
.login-container-new .sky-lock-ic { font-size: 22px; color: var(--sky-primary); }
.login-container-new .sky-lock-txt { display: flex; flex-direction: column; gap: 2px; }
.login-container-new .sky-lock-time { font-size: 34px; font-weight: 600; line-height: 1; letter-spacing: .02em; color: var(--sky-ink); font-variant-numeric: tabular-nums; }
.login-container-new .sky-lock-lbl { font-size: 11px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--sky-ink-3); }
.login-container-new .sky-lock-info {
  display: flex; align-items: flex-start; gap: 10px; text-align: left;
  margin-top: 18px; font-size: 12.5px; line-height: 1.5; color: var(--sky-ink-3);
}
.login-container-new .sky-lock-info > i { flex: none; margin-top: 1px; font-size: 16px; color: var(--sky-ink-4); }
.login-container-new .sky-lock-info a { color: var(--sky-primary); font-weight: 600; }
.login-container-new .sky-form-body .input {
  border: 1px solid var(--sky-border-strong); border-radius: 8px; height: 50px; color: var(--sky-ink);
}
.login-container-new .sky-form-body .input:focus { border-color: var(--sky-primary); box-shadow: 0 0 0 3px var(--sky-ring); }
/* το εικονίδιο του input (register/forgot) στο focus να ακολουθεί το scheme αντί για σταθερό μπλε */
.login-container-new .sky-form-body .input:focus + .focus-input + .symbol-input { color: var(--sky-primary) !important; }
.login-container-new .sky-form-body .btn-success,
.login-container-new .sky-form-body .btn-login-custom,
.login-container-new .sky-form-body .sumbit,
.login-container-new .sky-form-body #btnsignin {
  background-color: var(--sky-primary); border-color: var(--sky-primary); border-radius: 8px; height: 50px;
  margin-top: 22px; margin-bottom: 0;
}
.login-container-new .sky-form-body .btn-success:hover,
.login-container-new .sky-form-body .btn-login-custom:hover,
.login-container-new .sky-form-body #btnsignin:hover {
  background-color: var(--sky-primary-hover); border-color: var(--sky-primary-hover);
}
.login-container-new .sky-form-body .register-btn { color: var(--sky-primary); font-weight: 600; }
/* "Είστε ήδη εγγεγραμμένοι; Είσοδος" — αριστερά, inline (link κοντά στο κείμενο) */
.login-container-new .sky-form-body .register-button {
  display: block; text-align: left; margin: 22px 0 0; padding: 18px 0 0; width: 100%; max-width: 100%;
  border-top: 1px solid var(--sky-border);
  font-size: 13px; color: var(--sky-ink-3);
}
.login-container-new .sky-form-body .register-button .register-btn { margin-left: 4px; }
.login-container-new .sky-form-body .forgot-pass a { color: var(--sky-primary); }

/* ---- Σελίδες κατάστασης/μηνύματος (email στάλθηκε / επιβεβαιώθηκε / κωδικός άλλαξε) ---- */
.login-container-new .sky-status {
  display: flex; align-items: flex-start; gap: 14px; text-align: left;
  margin-top: 24px; padding: 20px 22px;
  border: 1px solid var(--sky-border); border-radius: 12px; background: var(--sky-surface-alt);
}
.login-container-new .sky-status .sky-status-ic {
  flex: none; display: grid; place-items: center; width: 46px; height: 46px;
  border-radius: 50%; border: 1px solid var(--sky-border-strong); background: #fff;
}
.login-container-new .sky-status .sky-status-ic i { font-size: 24px; color: var(--sky-primary); line-height: 1; }
.login-container-new .sky-status-body { display: flex; flex-direction: column; gap: 4px; }
.login-container-new .sky-status-title { font-size: 15px; font-weight: 600; color: var(--sky-ink); }
.login-container-new .sky-status-txt { font-size: 13px; line-height: 1.5; color: var(--sky-ink-3); }
/* Επιτυχία -> πράσινο accent στο εικονίδιο */
.login-container-new .sky-status.sky-status-ok .sky-status-ic {
  border-color: rgba(40,199,111,.4); background: rgba(40,199,111,.08);
}
.login-container-new .sky-status.sky-status-ok .sky-status-ic i { color: #28c76f; }
/* Πληροφορία επιστροφής κάτω από το status card (ίδιο look με το Lockout info) */
.login-container-new .sky-status-note {
  display: flex; align-items: flex-start; gap: 10px; text-align: left;
  margin-top: 18px; font-size: 12.5px; line-height: 1.5; color: var(--sky-ink-3);
}
.login-container-new .sky-status-note > i { flex: none; margin-top: 1px; font-size: 16px; color: var(--sky-ink-4); }
.login-container-new .sky-status-note a { color: var(--sky-primary); font-weight: 600; }

/* ============================================================
   HARDENING — εξουδετέρωση overrides από theme-front/plugins/Metronic/Bootstrap
   (φορτώνονται ΠΡΙΝ και στοχεύουν generic button/span/form/input/section).
   ============================================================ */
/* Πλάτη: τα generic form rules μαζεύουν τα containers -> τα ξαναγεμίζουμε */
body.login-container-new .sky-login { width: 100%; }
body.login-container-new .sky-login > form,
body.login-container-new .sky-loginform,
body.login-container-new form.form-horizontal { display: block; width: 100%; margin: 0; }
body.login-container-new .sky-providers { width: 100%; margin: 0; }
body.login-container-new .sky-fields { width: 100%; }
body.login-container-new .sky-provider { margin: 0; float: none; min-height: 0; }
/* Το <span> μέσα σε κουμπιά γίνεται λευκό από Metronic -> επαναφορά για provider/lang */
body.login-container-new .sky-provider span { color: var(--sky-ink-2) !important; font-weight: 400; }
body.login-container-new .sky-lang-btn span,
body.login-container-new .sky-lang-menu button span { color: var(--sky-ink-2) !important; }
/* Το submit πρέπει να μένει λευκό (σκούρο κουμπί) */
body.login-container-new .sky-submit span,
body.login-container-new .sky-submit { color: #fff !important; }
/* Custom checkbox όρων — ίδιο look με το design (rounded box + Tabler check) */
body.login-container-new .sky-terms-wrap .acceptTermsChBox { display: block; margin: 1px 0 0; }
body.login-container-new .sky-terms-wrap .acceptTermsCh {
  -webkit-appearance: none; appearance: none;
  width: 18px; height: 18px; margin: 0; flex: none; vertical-align: top;
  border: 1.5px solid var(--sky-border-strong); border-radius: 7px;
  background: #fff; cursor: pointer; display: inline-grid; place-items: center;
  transition: all .12s ease;
}
body.login-container-new .sky-terms-wrap .acceptTermsCh:checked { border-color: var(--sky-primary) !important; background: var(--sky-primary) !important; }
body.login-container-new .sky-terms-wrap .acceptTermsCh:checked::after {
  content: "\ea5e"; font-family: "tabler-icons"; font-size: 12px; color: #fff; line-height: 1;
}

/* ---- Terms of use (κρατά το υπάρχον markup/λογική, νέο look) ---- */
.login-container-new .sky-terms-wrap { margin-top: 16px; }
.login-container-new .sky-terms-wrap .term-of-use-container { display: flex; gap: 10px; align-items: flex-start; margin: 0; }
.login-container-new .sky-terms-wrap .term-of-use {
  font-size: 12.5px; line-height: 1.5; color: var(--sky-ink-3);
  background: transparent !important; padding: 0; margin: 0;
}
.login-container-new .sky-terms-wrap .term-of-use a { font-weight: 600; color: var(--sky-primary); }
.login-container-new .sky-terms-wrap .acceptTermsChBox.hidden { display: none; }
.login-container-new .sky-terms-wrap .acceptTermsChBox { margin-top: 2px; }

/* ---- Note blocks (success / info) — status μηνύματα (Πάροχος κ.λπ.) ---- */
.login-container-new .sky-note {
  display: flex; align-items: flex-start; gap: 10px; margin-top: 20px;
  padding: 13px 15px; border: 1px solid var(--sky-border); border-left-width: 3px;
  border-radius: 8px; text-align: left;
}
.login-container-new .sky-note > i { flex: none; margin-top: 1px; font-size: 18px; }
.login-container-new .sky-note .sky-note-body { font-size: 13px; line-height: 1.5; color: var(--sky-ink-2); }
.login-container-new .sky-note .sky-note-body a { font-weight: 600; text-decoration: underline; }
.login-container-new .sky-note-ok {
  border-color: rgba(40,167,69,.35); border-left-color: #28a745; background: rgba(40,167,69,.07);
}
.login-container-new .sky-note-ok > i { color: #28a745; }
.login-container-new .sky-note-info {
  border-color: rgba(0,123,255,.30); border-left-color: var(--sky-primary); background: var(--sky-primary-soft);
}
.login-container-new .sky-note-info > i { color: var(--sky-primary); }

/* ---- Status icon block (AccessDenied / NotAuthorized / ExternalLoginFailure) ---- */
.login-container-new .sky-status-ic {
  display: grid; place-items: center; width: 64px; height: 64px; margin: 26px 0 22px;
  border-radius: 16px; border: 1px solid var(--sky-border-strong); background: var(--sky-surface-alt);
}
.login-container-new .sky-form-body .sky-status-ic { margin-left: 0; }
.login-container-new .sky-status-ic i { font-size: 30px; color: var(--sky-primary); line-height: 1; }
.login-container-new .sky-status-ic-warn { border-color: rgba(234,84,85,.35); background: rgba(234,84,85,.07); }
.login-container-new .sky-status-ic-warn i { color: #ea5455; }

/* ============================================================
   Kiosk (LoginWithPin) — card-reader + on-screen numpad στο sky look.
   Το kiosk.css φορτώνεται ΜΕΤΑ, οπότε εδώ ξαναγράφουμε ό,τι πρέπει
   να ακολουθεί το νέο design. Τα class names (.pin-input/.show-pass/
   .keys-wrapper/.submit-btn/.clear-btn) μένουν για το kiosk.js.
   ============================================================ */
body.login-container-new.kiosk-body {
  background: var(--sky-surface-alt); color: var(--sky-ink);
  font-family: var(--sky-font); font-size: 15px;
}
.login-container-new.kiosk-body .main { min-height: 100vh; padding: 24px; }
.login-container-new.kiosk-body .form-wrapper {
  width: 100%; max-width: 480px; margin: auto; padding: 40px 36px;
  background: #fff; border: 1px solid var(--sky-border); border-radius: 16px;
  box-shadow: 0 18px 48px var(--sky-shadow);
}
.login-container-new.kiosk-body .sky-kiosk-welcome {
  font-size: 30px; font-weight: 700; letter-spacing: -.02em; color: var(--sky-ink); margin-bottom: 20px;
}
.login-container-new.kiosk-body .sky-kiosk-card {
  width: 100%; max-width: 480px; margin: auto; padding: 44px 36px; text-align: center;
  display: flex; flex-direction: column; align-items: center;
  background: #fff; border: 1px solid var(--sky-border); border-radius: 16px;
  box-shadow: 0 18px 48px var(--sky-shadow);
}
.login-container-new.kiosk-body .sky-kiosk-ic {
  display: grid; place-items: center; width: 72px; height: 72px; margin-bottom: 22px;
  border-radius: 18px; border: 1px solid var(--sky-border-strong); background: var(--sky-surface-alt);
}
.login-container-new.kiosk-body .sky-kiosk-ic i { font-size: 34px; color: var(--sky-primary); line-height: 1; }
.login-container-new.kiosk-body .sky-kiosk-card-error .sky-kiosk-ic { border-color: rgba(234,84,85,.35); background: rgba(234,84,85,.07); }
.login-container-new.kiosk-body .sky-kiosk-card-error .sky-kiosk-ic i { color: #ea5455; }
.login-container-new.kiosk-body .sky-kiosk-title { font-size: 22px; font-weight: 700; letter-spacing: -.01em; color: var(--sky-ink); margin-bottom: 8px; }
.login-container-new.kiosk-body .sky-kiosk-sub { font-size: 14.5px; line-height: 1.55; color: var(--sky-ink-3); }
.login-container-new.kiosk-body .sky-kiosk-info {
  display: flex; align-items: flex-start; gap: 10px; text-align: left;
  margin: 0 0 18px; padding: 13px 15px; border: 1px solid rgba(0,123,255,.30);
  border-left: 3px solid var(--sky-primary); border-radius: 8px; background: var(--sky-primary-soft);
  font-size: 13px; line-height: 1.5; color: var(--sky-ink-2);
}
.login-container-new.kiosk-body .sky-kiosk-info > i { flex: none; margin-top: 1px; font-size: 18px; color: var(--sky-primary); }
/* Το .pin-input κρατά το kiosk class για το JS αλλά παίρνει sky-input look */
.login-container-new.kiosk-body .pin-input {
  font-size: 15px; height: 50px; color: var(--sky-ink);
  border: 1px solid var(--sky-border-strong); border-radius: 8px; width: 100%;
}
.login-container-new.kiosk-body .pin-input:focus { border-color: var(--sky-primary); box-shadow: 0 0 0 3px var(--sky-ring); }
/* Το .show-pass κρατά το kiosk class αλλά τοποθετείται σαν sky-eye */
.login-container-new.kiosk-body .sky-eye.show-pass {
  position: absolute; right: 8px; top: 0; bottom: 0; margin: auto 0;
  width: 36px; height: 36px; padding: 0; color: var(--sky-ink-3); background: transparent;
}
.login-container-new.kiosk-body .sky-eye.show-pass i { font-size: 20px; }
/* Numpad + actions στο sky look (κρατούν το functional markup) */
.login-container-new.kiosk-body .keyboard-wrapper { margin-top: 22px; gap: 14px; }
.login-container-new.kiosk-body .keys-wrapper span {
  border: 1px solid var(--sky-border-strong); border-radius: 10px; background: #fff;
  color: var(--sky-ink); font-weight: 600; font-size: 20px; transition: all .12s ease;
}
.login-container-new.kiosk-body .keys-wrapper span:hover,
.login-container-new.kiosk-body .keys-wrapper span:active { background: var(--sky-surface-alt); border-color: var(--sky-primary); color: var(--sky-primary); }
.login-container-new.kiosk-body .actions-wrapper span { border-radius: 10px; border: 0; font-weight: 600; color: #fff; }
.login-container-new.kiosk-body .submit-btn { background-color: var(--sky-primary); }
.login-container-new.kiosk-body .submit-btn:hover { background-color: var(--sky-primary-hover); }
.login-container-new.kiosk-body .clear-btn { background-color: var(--sky-ink-3); }