/* ══════════════════════════════════════════════════════
   KURSBUCHUNG SAAS — Base / Design System
   Όλες οι CSS variables, reset, typography, layout shell
   ══════════════════════════════════════════════════════ */

/* ── Google Fonts ── */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@300;400;500;600&family=IBM+Plex+Mono:wght@300;400;500&display=swap');

/* ── Design Tokens ── */
:root {
  /* Surfaces */
  --bg:          #f9f8f5;
  --bg-mid:      #f0efe9;
  --bg-light:    #e8e7e0;
  --card:        #ffffff;

  /* Text */
  --ink:         #0e0e0e;
  --text:        #1a1a18;
  --muted:       #999990;

  /* Brand */
  --amber:       #c8891a;
  --amber-dim:   rgba(200,137,26,.10);
  --amber-glow:  rgba(200,137,26,.06);

  /* Feedback */
  --success:     #3a8f5c;
  --error:       #c04040;

  /* Borders */
  --border:      rgba(14,14,14,.10);
  --border-mid:  rgba(14,14,14,.07);

  /* Radii */
  --r:           6px;
  --r-lg:        12px;
  --r-xl:        20px;

  /* Shadows */
  --shadow-sm:   0 2px 8px  rgba(14,14,14,.05);
  --shadow-md:   0 4px 20px rgba(14,14,14,.08);
  --shadow-lg:   0 8px 40px rgba(14,14,14,.12);

  /* Transitions */
  --t-fast:      .15s ease;
  --t-base:      .22s ease;
  --t-slow:      .4s ease;

  /* Typography */
  --font-sans:    'IBM Plex Sans', sans-serif;
  --font-mono:    'IBM Plex Mono', monospace;

  /* Extra brand tokens (orestis-brand) */
  --glow:        rgba(200,137,26,.09);
  --navy-mid:    #f0efe9;
  --navy-light:  #e8e7e0;
  --navy-card:   #ffffff;

  /* Layout */
  --panel-w:     340px;   /* Left panel width */
  --header-h:    60px;    /* Mobile header height */
}

/* ── Reset ── */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }

html, body {
  height: 100%;
  overflow: hidden;
  font-family: var(--font-sans);
  font-weight: 300;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ── Noise Texture ── */
body::after {
  content: '';
  position: fixed; inset: 0;
  pointer-events: none; z-index: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");
  opacity: .15;
}

/* ── Custom Cursor (desktop only) ── */
@media (pointer: fine) {
  body { cursor: none; }
  #kb-cursor {
    position: fixed;
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--amber);
    pointer-events: none;
    z-index: 99999;           /* above all overlays (login: 9999, home: 200) */
    opacity: 0;               /* hidden until first mousemove */
    transform: translate(-50%,-50%);
    transition: width .2s, height .2s, opacity .2s;
    mix-blend-mode: multiply;
  }
  #kb-cursor.visible          { opacity: 1; }
  /* Hover halo: bigger + a radial fade so the edge dissolves smoothly
     (instead of a hard-edged solid circle darkening the figure). */
  #kb-cursor.hovering {
    width: 40px; height: 40px; opacity: .35;
    background: var(--amber);
    /* Gaussian blur → guaranteed soft, fully-dissolving edge (no hard circle). */
    filter: blur(10px);
  }
  #kb-cursor.visible.hovering { opacity: .35; }
}

/* ── Ambient Blob (spring physics via JS) ── */
#kb-blob {
  position: fixed;
  width: 560px; height: 560px;
  border-radius: 50%;
  background: radial-gradient(circle, var(--glow) 0%, transparent 68%);
  pointer-events: none;
  z-index: 0;
  will-change: transform;
  transition: opacity 1s;
  opacity: 0;
  top: 0; left: 0;
  margin-left: -280px; margin-top: -280px;
}

/* ── Film Grain ── */
.kb-grain {
  position: fixed; inset: -40%;
  width: 180%; height: 180%;
  z-index: 1; pointer-events: none; opacity: .022;
  animation: grainMove .14s steps(1) infinite;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='250' height='250'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='250' height='250' filter='url(%23n)'/%3E%3C/svg%3E");
}
@keyframes grainMove {
  0%  { transform:translate(0,0); }   20% { transform:translate(-2%,-3%); }
  40% { transform:translate(3%,1%); } 60% { transform:translate(-1%,4%); }
  80% { transform:translate(4%,-2%); }
}

/* ══════════════════════════════════════════════════════
   APP SHELL — Two-panel layout
   ══════════════════════════════════════════════════════ */

#kb-app {
  position: fixed;
  inset: 0;
  z-index: 2;
  display: flex;
  opacity: 0;
  transition: opacity .5s;
}
#kb-app.visible { opacity: 1; }

/* ── Left Panel ── */
.kb-l-panel {
  width: var(--panel-w);
  flex-shrink: 0;
  background: var(--bg-mid);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  padding: 2.5rem 1.75rem;
  position: relative;
  overflow: hidden;
}
.kb-l-panel::before {
  content: '';
  position: absolute;
  bottom: -80px; left: -40px;
  width: 240px; height: 240px;
  background: radial-gradient(circle, rgba(200,137,26,.06) 0%, transparent 65%);
  pointer-events: none;
}

/* ── Right Panel ── */
.kb-r-panel {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  background: var(--bg);
  position: relative;
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
}
.kb-r-panel::-webkit-scrollbar { width: 4px; }
.kb-r-panel::-webkit-scrollbar-thumb { background: var(--border); }

/* ── Mobile header bar (hidden on desktop) ── */
.kb-mobile-bar {
  display: none;
  height: var(--header-h);
  background: var(--bg-mid);
  border-bottom: 1px solid var(--border);
  align-items: center;
  justify-content: space-between;
  padding: 0 1.25rem;
  flex-shrink: 0;
}

/* ══════════════════════════════════════════════════════
   TYPOGRAPHY HELPERS
   ══════════════════════════════════════════════════════ */

.kb-eyebrow {
  font-family: var(--font-mono);
  font-size: .6rem;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--amber);
  opacity: .85;
}

.kb-heading {
  font-family: var(--font-mono);
  font-size: clamp(1.5rem, 3vw, 2.2rem);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -.02em;
  color: var(--ink);
}
.kb-heading em { font-style: normal; color: var(--amber); }

.kb-sub {
  font-size: .88rem;
  color: var(--muted);
  line-height: 1.7;
}

.kb-label {
  font-family: var(--font-mono);
  font-size: .62rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--amber);
  opacity: .8;
}

/* ══════════════════════════════════════════════════════
   OVERLAY SYSTEM
   ══════════════════════════════════════════════════════ */

.kb-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  background: var(--bg);
  animation: kbFadeIn .4s ease;
}

/* Two-panel overlay */
.kb-ov-split { display: flex; width: 100%; height: 100%; }

.kb-ov-left {
  width: 340px;
  flex-shrink: 0;
  background: var(--bg-mid);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 2.5rem 2rem;
  position: relative;
  overflow: hidden;
}
.kb-ov-left::before {
  content: '';
  position: absolute;
  bottom: -80px; left: -40px;
  width: 260px; height: 260px;
  background: radial-gradient(circle, rgba(200,137,26,.06) 0%, transparent 65%);
  pointer-events: none;
}

.kb-ov-right {
  flex: 1;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow-y: auto;
}

/* ── Login card ── */
.kb-login-card {
  width: 340px;
  max-width: 90vw;
  animation: kbCardIn .55s cubic-bezier(.22,.8,.32,1) .5s both;
}

/* ══════════════════════════════════════════════════════
   STEP SYSTEM (Booking Flow)
   ══════════════════════════════════════════════════════ */

.kb-step-page {
  display: none;
  min-height: 100%;
  padding: 3rem 3.5rem;
  flex-direction: column;
  animation: kbStepIn .3s ease both;
}
.kb-step-page.active { display: flex; }

/* ── Sidebar step indicators ── */
.kb-l-steps { margin: 2rem 0; flex-shrink: 0; }
.kb-l-step {
  display: flex;
  align-items: flex-start;
  gap: .85rem;
  padding: .5rem 0;
  position: relative;
}
.kb-l-step:not(:last-child)::after {
  content: '';
  position: absolute;
  left: 13px; top: 36px;
  width: 1px; height: calc(100% - 28px);
  background: var(--border-mid);
}
.kb-l-step.active::after,
.kb-l-step.done::after { background: rgba(200,137,26,.25); }

.kb-step-dot {
  width: 28px; height: 28px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 1.5px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono);
  font-size: .65rem;
  color: var(--muted);
  transition: all .3s;
}
.kb-l-step.active .kb-step-dot {
  border-color: var(--amber);
  background: var(--amber-dim);
  color: var(--amber);
}
.kb-l-step.done .kb-step-dot {
  border-color: var(--amber);
  background: var(--amber);
  color: #fff;
}

.kb-step-label {
  font-family: var(--font-mono);
  font-size: .75rem;
  color: var(--muted);
  transition: color .3s;
  padding-top: 4px;
  letter-spacing: .03em;
}
.kb-l-step.active .kb-step-label { color: var(--amber); }
.kb-l-step.done  .kb-step-label  { color: var(--text); }

.kb-step-val {
  font-size: .8rem;
  color: var(--text);
  margin-top: .15rem;
  line-height: 1.4;
  max-width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ══════════════════════════════════════════════════════
   KEYFRAMES
   ══════════════════════════════════════════════════════ */

@keyframes kbFadeIn   { from { opacity:0; }                            to { opacity:1; } }
@keyframes kbCardIn   { from { opacity:0; transform:translateY(14px); } to { opacity:1; transform:none; } }
@keyframes kbStepIn   { from { opacity:0; transform:translateX(14px); } to { opacity:1; transform:none; } }
@keyframes kbRevealUp { from { opacity:0; transform:translateY(40px); } to { opacity:1; transform:none; } }
@keyframes kbRuleGrow { to   { width:80px; } }
@keyframes kbSlide    {
  0%   { transform:translateX(-110%); }
  50%  { transform:translateX(120%);  }
  100% { transform:translateX(120%);  }
}
@keyframes grainMove  {
  0%  { transform:translate(0,0); }   20% { transform:translate(-2%,-3%); }
  40% { transform:translate(3%,1%); } 60% { transform:translate(-1%,4%); }
  80% { transform:translate(4%,-2%); }
}

/* Scramble effect */
.kb-scramble-char { color:var(--muted); opacity:.45; }

/* Amber rule line (left panel, below logo) */
.kb-ov-rule {
  width: 0; height: 1.5px;
  background: var(--amber);
  margin: 1.25rem 0 0;
  animation: kbRuleGrow 1s cubic-bezier(.4,0,.2,1) .8s forwards;
  opacity: .55;
}

/* ── Logo / brand in left panel ── */
.kb-logo-mono {
  font-family: var(--font-mono);
  font-size: .6rem;
  letter-spacing: .28em;
  color: var(--amber);
  text-transform: uppercase;
  margin-bottom: .6rem;
}
.kb-logo-name {
  font-family: var(--font-mono);
  font-size: 1.4rem;
  color: var(--ink);
  line-height: 1.1;
  font-weight: 400;
  letter-spacing: -.02em;
}
.kb-logo-name em  { font-style:normal; color: var(--amber); }
.kb-logo-tag {
  font-size: .78rem;
  color: var(--muted);
  margin-top: .3rem;
  line-height: 1.5;
}

.kb-l-footer {
  font-family: var(--font-mono);
  font-size: .58rem;
  color: var(--muted);
  opacity: .45;
  letter-spacing: .08em;
  margin-top: auto;
}

/* ── Divider ── */
.kb-divider { height:1px; background: var(--border-mid); margin: 1.5rem 0; }

/* ── Message boxes ── */
.kb-msg {
  padding: 1rem 1.25rem;
  border-radius: var(--r);
  margin-bottom: 1rem;
  font-size: .85rem;
  line-height: 1.6;
  display: none;
}
.kb-msg.ok  { background:rgba(58,143,92,.08); border:1px solid rgba(58,143,92,.3); color:#2d7a4f; }
.kb-msg.err { background:rgba(192,64,64,.08); border:1px solid rgba(192,64,64,.25); color:var(--error); }
.kb-msg.info{ background:var(--amber-dim);    border:1px solid rgba(200,137,26,.25); color:#8a5e10; }