/* ── CA Design System Variables ─────────────────────────────────────────── */
:root {
  --ca-primary:      #007a5e;
  --ca-primary-dark: #005f49;
  --ca-text:         #1d1d1b;
  --ca-gray:         #5b6770;
  --ca-light:        #f3f6f5;
  --ca-green:        #009597;
  --ca-border:       #e0e9e7;
}

/* ── Fonts ──────────────────────────────────────────────────────────────── */
@font-face { font-family:'Mulish'; src:url('../fonts/mulish-400.7a1b5d5fb98afb1363c4.ttf'); font-weight:400; font-display:swap; }
@font-face { font-family:'Mulish'; src:url('../fonts/mulish-600.3e81afd2a3befa2e0d65.ttf'); font-weight:600; font-display:swap; }
@font-face { font-family:'Mulish'; src:url('../fonts/mulish-700.d6d5935ae86db778f462.ttf'); font-weight:700; font-display:swap; }
@font-face { font-family:'Mulish'; src:url('../fonts/mulish-800.527b8355027199061268.ttf'); font-weight:800; font-display:swap; }
@font-face { font-family:'Mulish'; src:url('../fonts/mulish-900.42e79cfb27d3efe4d31b.ttf'); font-weight:900; font-display:swap; }

body {
  font-family: 'Mulish', system-ui, sans-serif;
  color: var(--ca-text);
  line-height: 1.6;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
main { flex: 1; }

/* ── Container ──────────────────────────────────────────────────────────── */
.ca-container { max-width: 1280px; margin: 0 auto; padding: 0 1.5rem; width: 100%; }

/* ── Buttons ────────────────────────────────────────────────────────────── */
.ca-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  background: var(--ca-primary); color: #fff;
  border: 2px solid var(--ca-primary);
  padding: .625rem 1.5rem; border-radius: 9999px;
  font-weight: 700; font-size: .9375rem; cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
  text-decoration: none; white-space: nowrap;
}
.ca-btn:hover  { background: var(--ca-primary-dark); border-color: var(--ca-primary-dark); }
.ca-btn:disabled { opacity: .5; cursor: not-allowed; }

.ca-btn-outline {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  background: transparent; color: var(--ca-primary);
  border: 2px solid var(--ca-primary);
  padding: .625rem 1.5rem; border-radius: 9999px;
  font-weight: 700; font-size: .9375rem; cursor: pointer;
  transition: background .15s, color .15s;
  text-decoration: none; white-space: nowrap;
}
.ca-btn-outline:hover { background: var(--ca-primary); color: #fff; }

/* ── Hero section ───────────────────────────────────────────────────────── */
.ca-hero {
  background: linear-gradient(135deg, var(--ca-primary) 0%, var(--ca-primary-dark) 60%, #003d30 100%);
  color: #fff; position: relative; overflow: hidden;
}
.ca-hero-img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: .18; mix-blend-mode: luminosity;
}

/* ── Card ───────────────────────────────────────────────────────────────── */
.ca-card {
  background: #fff; border-radius: 1rem;
  box-shadow: 0 1px 4px rgba(0,0,0,.07), 0 4px 24px rgba(0,122,94,.06);
  overflow: hidden; transition: box-shadow .2s, transform .2s;
}
.ca-card:hover { box-shadow: 0 4px 24px rgba(0,122,94,.18); transform: translateY(-2px); }

/* ── Section headings ───────────────────────────────────────────────────── */
.ca-section-title { font-size: 1.75rem; font-weight: 800; color: var(--ca-text); }
.ca-section-sub   { color: var(--ca-gray); font-size: 1rem; }

/* ── Breadcrumb ─────────────────────────────────────────────────────────── */
.ca-breadcrumb { color: var(--ca-gray); font-size: .85rem; }
.ca-breadcrumb a { color: var(--ca-primary); text-decoration: none; }
.ca-breadcrumb a:hover { text-decoration: underline; }
.ca-breadcrumb span { margin: 0 .35rem; }

/* ── Form inputs ────────────────────────────────────────────────────────── */
.ca-input {
  width: 100%; padding: .75rem 1rem;
  border: 1.5px solid var(--ca-border); border-radius: .625rem;
  font-size: 1rem; font-family: inherit; background: #fff; color: var(--ca-text);
  outline: none; transition: border-color .15s, box-shadow .15s;
}
.ca-input:focus { border-color: var(--ca-primary); box-shadow: 0 0 0 3px rgba(0,122,94,.12); }
.ca-input::placeholder { color: #aab; }

.ca-label { display: block; font-weight: 700; font-size: .9rem; margin-bottom: .35rem; color: var(--ca-text); }

/* ── Steps indicator ────────────────────────────────────────────────────── */
.ca-steps { display: flex; gap: .5rem; align-items: center; }
.ca-step-dot {
  width: 2rem; height: 2rem; border-radius: 50%; border: 2px solid var(--ca-border);
  display: flex; align-items: center; justify-content: center;
  font-size: .8rem; font-weight: 700; color: var(--ca-gray);
  transition: all .2s;
}
.ca-step-dot.active  { background: var(--ca-primary); border-color: var(--ca-primary); color: #fff; }
.ca-step-dot.done    { background: var(--ca-green);   border-color: var(--ca-green);   color: #fff; }
.ca-step-line { flex: 1; height: 2px; background: var(--ca-border); }
.ca-step-line.done { background: var(--ca-green); }

/* ── Chat widget ────────────────────────────────────────────────────────── */
.assistant-widget-root { position: fixed; bottom: 1.5rem; right: 1.5rem; z-index: 300; }

.assistant-launcher {
  width: 72px; height: 72px; border-radius: 50%; background: #fff;
  box-shadow: 0 4px 24px rgba(0,0,0,.18); border: none; cursor: pointer;
  position: relative; transition: transform .2s;
}
.assistant-launcher:hover  { transform: scale(1.07); }
.assistant-launcher:hover .assistant-launcher-hover-label { opacity: 1; transform: translateY(-2px); }

.assistant-face { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
.assistant-face-svg { filter: drop-shadow(0 2px 6px rgba(0,0,0,.1)); }

.assistant-help-badge {
  position: absolute; top: -3px; right: -3px; width: 20px; height: 20px;
  background: var(--ca-primary); color: #fff; border-radius: 50%;
  font-size: 11px; font-weight: 800; line-height: 20px; text-align: center;
  border: 2px solid #fff;
}

.assistant-launcher-hover-label {
  position: absolute; bottom: calc(100% + .5rem); right: 0;
  background: var(--ca-text); color: #fff; font-size: .8rem; font-weight: 700;
  padding: .35rem .7rem; border-radius: .5rem; white-space: nowrap;
  opacity: 0; transition: opacity .15s, transform .15s; pointer-events: none;
}

.assistant-panel {
  position: absolute; bottom: calc(100% + 1rem); right: 0;
  width: 370px; max-width: calc(100vw - 2rem);
  background: #fff; border-radius: 1.25rem;
  box-shadow: 0 8px 40px rgba(0,0,0,.18); overflow: hidden;
  display: flex; flex-direction: column;
  animation: chatSlideIn .2s ease;
}
@keyframes chatSlideIn { from { opacity: 0; transform: translateY(8px) scale(.97); } to { opacity: 1; transform: none; } }

.assistant-panel-header {
  background: var(--ca-primary); color: #fff;
  padding: 1rem 1.25rem; display: flex; align-items: center; gap: .75rem;
}
.assistant-panel-avatar {
  width: 40px; height: 40px; border-radius: 50%; object-fit: cover; border: 2px solid rgba(255,255,255,.4);
}
.assistant-panel-name { font-weight: 800; font-size: .95rem; }
.assistant-panel-status { font-size: .78rem; opacity: .85; }
.assistant-panel-close { margin-left: auto; background: none; border: none; color: #fff; cursor: pointer; opacity: .7; }
.assistant-panel-close:hover { opacity: 1; }

.assistant-messages {
  flex: 1; overflow-y: auto; padding: 1rem;
  display: flex; flex-direction: column; gap: .75rem;
  max-height: 320px; min-height: 180px;
}

.assistant-msg {
  max-width: 82%; padding: .6rem .9rem; border-radius: 1rem; font-size: .88rem; line-height: 1.5;
}
.assistant-msg.bot  { background: var(--ca-light); color: var(--ca-text); border-bottom-left-radius: .25rem; align-self: flex-start; }
.assistant-msg.user { background: var(--ca-primary); color: #fff; border-bottom-right-radius: .25rem; align-self: flex-end; }

.assistant-typing-dots { display: flex; gap: 3px; align-items: center; padding: .2rem 0; }
.assistant-typing-dots span {
  width: 6px; height: 6px; border-radius: 50%; background: var(--ca-gray);
  animation: typingBounce 1.1s infinite;
}
.assistant-typing-dots span:nth-child(2) { animation-delay: .15s; }
.assistant-typing-dots span:nth-child(3) { animation-delay: .3s; }
@keyframes typingBounce { 0%,80%,100% { transform: scaleY(1); } 40% { transform: scaleY(1.5); } }

.assistant-input-area {
  padding: .75rem 1rem; border-top: 1px solid var(--ca-border);
  display: flex; gap: .5rem; align-items: flex-end;
}
.assistant-input {
  flex: 1; border: 1.5px solid var(--ca-border); border-radius: 1.5rem;
  padding: .5rem .9rem; font-size: .88rem; font-family: inherit;
  resize: none; outline: none; max-height: 100px; min-height: 36px;
  transition: border-color .15s;
}
.assistant-input:focus { border-color: var(--ca-primary); }
.assistant-send {
  background: var(--ca-primary); border: none; border-radius: 50%;
  width: 36px; height: 36px; color: #fff; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s;
}
.assistant-send:hover    { background: var(--ca-primary-dark); }
.assistant-send:disabled { opacity: .4; cursor: not-allowed; }

/* ── OTP boxes (login step 2) ───────────────────────────────────────────── */
.otp-boxes { display: flex; gap: .5rem; justify-content: center; }
.otp-box {
  width: 3rem; height: 3.5rem; text-align: center; font-size: 1.5rem; font-weight: 800;
  border: 2px solid var(--ca-border); border-radius: .625rem;
  outline: none; transition: border-color .15s, box-shadow .15s;
}
.otp-box:focus { border-color: var(--ca-primary); box-shadow: 0 0 0 3px rgba(0,122,94,.15); }

/* ── Spinner ─────────────────────────────────────────────────────────────── */
.ca-spinner {
  width: 2rem; height: 2rem; border: 3px solid var(--ca-border);
  border-top-color: var(--ca-primary); border-radius: 50%;
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Tag pill ────────────────────────────────────────────────────────────── */
.ca-tag {
  display: inline-block; padding: .25rem .75rem; border-radius: 9999px;
  font-size: .78rem; font-weight: 700; background: var(--ca-light); color: var(--ca-primary);
}
.ca-tag.active { background: var(--ca-primary); color: #fff; }

/* ── Utility ─────────────────────────────────────────────────────────────── */
.ca-green-text { color: var(--ca-green); }
.ca-primary-text { color: var(--ca-primary); }

/* ── Page fon.png hero background ──────────────────────────────────────── */
.ca-fon-hero {
  background-image: url('../img/fon.png');
  background-size: cover; background-position: center;
}

/* ── Responsive tweaks ───────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .ca-section-title { font-size: 1.35rem; }
  .assistant-panel  { width: calc(100vw - 2rem); right: -0.5rem; }
}