* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  background: linear-gradient(135deg, #0a0f2c, #031328, #001a3d);
  color: white;
  font-family: 'Segoe UI', sans-serif;
  line-height: 1.6;
}
.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.2rem 2rem;
  background: rgba(255,255,255,0.05);
  backdrop-filter: blur(10px);
  position: fixed;
  width: 100%;
  top: 0;
  z-index: 1000;
}
.logo {
  font-size: 1.5rem;
  font-weight: bold;
  letter-spacing: 3px;
  color: #3ab4f2;
}
nav a {
  margin-left: 1.5rem;
  color: white;
  text-decoration: none;
}
nav .cta {
  color: #00c3ff;
  font-weight: bold;
}
.hero {
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 0 20px;
}
.hero-title {
  font-size: 6rem;
  color: #00c3ff;
  text-shadow: 0 0 25px #00c3ff88;
  letter-spacing: 12px;
  margin-bottom: 0.5rem;
}
.hero-subtext {
  font-size: 1.3rem;
  margin-bottom: 2rem;
  color: #ccd6f6;
}
.button-glow {
  padding: 15px 35px;
  font-size: 1.1rem;
  border: none;
  border-radius: 40px;
  background: #007aff;
  color: white;
  text-decoration: none;
  box-shadow: 0 0 20px #007aff88;
  transition: 0.3s ease;
}
.button-glow:hover {
  background: #005fe0;
  box-shadow: 0 0 30px #00aaff;
}

.live-support-btn {
  padding: 8px 14px;
  background-color: #3ab4f2;
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 12px;
  cursor: pointer;
  box-shadow: 0 0 10px #3ab4f2aa;
  transition: 0.3s ease;
}
.live-support-btn:hover {
  background-color: #289cd6;
  box-shadow: 0 0 16px #3ab4f2;
}

.features {
  padding: 80px 20px;
  text-align: center;
  background: #111528;
}
.features h2 {
  margin-bottom: 2rem;
  font-size: 2rem;
}
.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.5rem;
  padding: 0 10px;
}
.feature-card {
  background: #1c1f36;
  padding: 20px;
  border-radius: 10px;
  border: 1px solid #2f3250;
}
.feature-card h3 {
  margin-bottom: 10px;
  font-size: 1.2rem;
}

#typing {
  font-style: italic;
  opacity: 0.7;
  margin: 10px 0;
}

footer {
  text-align: center;
  padding: 1.5rem;
  background: #0a0f2c;
  font-size: 0.9rem;
}
body {
  position: relative;
  z-index: 0;
}

body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: repeating-linear-gradient(
    135deg,                                /* Diagonal angle */
    rgba(0, 0, 0, 0.2) 0px,                /* Darker black, more visible */
    rgba(0, 0, 0, 0.2) 4px,                /* Thicker line: 4px wide */
    transparent 4px,
    transparent 60px                       /* More spacing between lines */
  );
  z-index: -1;
  pointer-events: none;
  animation: moveLines 60s linear infinite;
}
.email-input {
  padding: 8px;
  border-radius: 6px;
  border: 1px solid #ccc;
  margin-top: 8px;
  width: 65%;
}

.email-submit {
  background-color: #3ab4f2;
  color: white;
  border: none;
  padding: 8px 12px;
  border-radius: 6px;
  cursor: pointer;
  margin-top: 8px;
}
html, body {
  height: 100%;
  margin: 0;
}

body {
  display: flex;
  flex-direction: column;
}

main {
  flex: 1;
}

footer {
  margin-top: auto;
}

/* Reserve space under the fixed header on phones only */
@media (max-width: 768px) {
  :root { --header-tweak: -50px; } /* adjust here */

  @supports (padding: max(0px)) {
    body { padding-top: calc(var(--header-h, 0px) + env(safe-area-inset-top) + var(--header-tweak, 0px)); }
  }
  @supports not (padding: max(0px)) {
    body { padding-top: calc(var(--header-h, 0px) + var(--header-tweak, 0px)); }
  }

  [id] { scroll-margin-top: calc(var(--header-h, 0px) + 12px + var(--header-tweak, 0px)); }
}

/* add to style.css, or inject once via <style> */
.olga-feed {
  overflow-y: auto;
  max-height: 420px;     /* or whatever your chat body height is */
  padding: 8px 0;
}

.live-support-bubble .email-input:disabled,
.live-support-bubble .email-submit:disabled {
  opacity: 0.6;
  cursor: default;
}

.live-support-success {
  opacity: 0.9; /* subtle cue it's done */
}

/* Single source of truth: make Olga bot bubbles and live-support bubble identical */
.olga-bubble.olga-bot,
.live-support-bubble {
  margin-left: 11px !important;   /* left indent (tweak by 1px if needed) */
  margin-right: 12px !important;
  margin-top: 10px !important;
  margin-bottom: 10px !important;

  padding: 10px 12px !important;
  border-radius: 14px !important;
  max-width: 80% !important;
  align-self: flex-start !important;
  box-sizing: border-box;
  border: 0 !important;           /* normalize if one had a border */
}

/* Ensure the inner box doesn’t add extra offset */
.live-support-bubble .live-support-box {
  margin: 0 !important;
  padding: 0 !important;  /* the bubble already has padding */
}

/* Reduce spacing when a live-support bubble follows another bot bubble */
.olga-bubble.olga-bot + .live-support-bubble {
  margin-top: 2px !important;    /* remove most of the gap */
}

/* Also remove extra bottom margin from the Olga bubble before it */
.olga-bubble.olga-bot:has(+ .live-support-bubble) {
  margin-bottom: 2px !important;
}

.dt-note a:link,
.dt-note a:visited {
  color: inherit;   /* keeps same color, no purple */
}

.dt-note a:hover {
  color: #3ab4f2;   /* optional: brand blue hover */
}

/* --- Olga booking modal --- */
.olga-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.5);display:none;z-index:9998}
.olga-modal{position:fixed;inset:0;display:none;z-index:9999;align-items:center;justify-content:center}
.olga-modal > div{background:#111827;border:1px solid #2a2f3a;border-radius:14px;padding:16px;max-width:380px;width:92%}
.olga-modal h3{margin:0 0 8px;font-size:16px}
.olga-modal label{display:block;margin:8px 0 4px;font-size:12px}
.olga-modal input,.olga-modal select,.olga-modal textarea{width:100%;padding:8px;border-radius:8px;border:1px solid #374151;background:#0f172a;color:#e5e7eb}
.olga-modal .row{display:flex;gap:8px}
.olga-modal .row > *{flex:1}
.olga-modal .actions{display:flex;gap:8px;justify-content:flex-end;margin-top:12px}
.olga-modal button{padding:8px 12px;border-radius:10px;border:1px solid #374151;background:#1f2937;color:#e5e7eb;cursor:pointer}
.olga-modal button.primary{background:#2563eb;border-color:#2563eb}

#noAccessCard { padding:16px 18px; }
#noAccessCard .ob-sub { color:#9fb3c8; }
#noAccessCard .ob-list { 
  margin: 0 0 6px 1.1rem; 
  line-height: 1.55;
}
#noAccessCard .ob-list li { margin: 6px 0; }
#noAccessCard .ob-list strong { color:#fff; }
.hero {
  margin-bottom: 95px; /* adjust px to taste */
}