@import url('https://fonts.googleapis.com/css2?family=Vazirmatn:wght@400;500;600;700;800&display=swap');

#aida-apology-app {
  --bg: #f7f7f8;
  --text: #151515;
  --muted: #777;
  --dark: #111;
  --red: #e84855;
  --green: #238636;
  --white: #fff;
  font-family: "Vazirmatn", Tahoma, sans-serif;
  color: var(--text);
  min-height: 100vh;
  background: var(--bg);
  position: relative;
  overflow: hidden;
}

#aida-apology-app * { box-sizing: border-box; }

.aida-progress {
  position: fixed;
  z-index: 99;
  top: 0; right: 0; left: 0;
  height: 4px;
  background: #e9e9e9;
}
#aida-progress-bar {
  display:block;
  height:100%;
  width:0;
  background:#111;
  transition:width .45s ease;
}

.aida-stage-wrap {
  min-height: 100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:55px 18px;
}

.aida-stage {
  width:100%;
  display:none;
  animation:aidaIn .5s ease both;
}
.aida-stage.active { display:block; }

@keyframes aidaIn {
  from { opacity:0; transform:translateY(16px); }
  to { opacity:1; transform:translateY(0); }
}

.aida-card {
  width:min(650px, 100%);
  margin:auto;
  background:rgba(255,255,255,.94);
  border:1px solid #e9e9e9;
  border-radius:28px;
  padding:48px 32px;
  text-align:center;
  box-shadow:0 18px 70px rgba(0,0,0,.07);
}
.aida-card h1,.aida-card h2,.aida-card h3 { margin:0 0 18px; line-height:1.7; }
.aida-card p { font-size:18px; line-height:2.15; color:#444; margin:8px 0; }
.aida-emoji { font-size:54px; margin-bottom:12px; }
.aida-buttons { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-top:30px; }

.aida-btn,.aida-option {
  border:0;
  border-radius:16px;
  padding:15px 25px;
  font-family:inherit;
  font-size:16px;
  font-weight:700;
  cursor:pointer;
  transition:.25s ease;
}
.aida-btn:hover,.aida-option:hover { transform:translateY(-2px); }
.aida-btn.primary { background:#111; color:#fff; }
.aida-btn.secondary { background:#eee; color:#111; }
.aida-btn.danger { background:#f0dfe1; color:#8f2631; }
.aida-btn.aida-full { width:100%; }
.aida-option {
  background:#f3f3f3;
  color:#111;
  width:100%;
  text-align:right;
  margin:5px 0;
}
.aida-options { margin-top:22px; }

.aida-shrink-1 { transform:scale(.92); }
.aida-shrink-2 { transform:scale(.75); }
.aida-no-grow { animation:takeover .75s ease forwards; }
@keyframes takeover {
  to { transform:scale(1.08); padding:25px 45px; }
}

.aida-blackout {
  position:fixed; inset:0; background:#000; color:#fff;
  z-index:1000; display:flex; align-items:center; justify-content:center;
  opacity:0; pointer-events:none; transition:opacity .25s;
}
.aida-blackout.show { opacity:1; }
.aida-blackout-text { font-size:28px; }

.text-card { text-align:right; }
.text-card .heart-line,.heart-line { text-align:center; font-size:25px; font-weight:800; color:#111; margin:25px 0; }
.big-text { font-size:23px !important; }
.emotional { background:rgba(255,255,255,.98); }

.aida-slider-wrap { margin:35px 0; }
#aida-slider { width:100%; accent-color:#111; cursor:pointer; }
.aida-slider-labels { display:flex; justify-content:space-between; color:#777; font-size:14px; }
.aida-slider-text { font-size:22px; font-weight:800; margin-top:25px; min-height:35px; }

.typing-card { min-height:450px; display:flex; flex-direction:column; justify-content:center; }
#aida-typing { text-align:right; font-size:20px; line-height:2.25; min-height:300px; white-space:normal; }
.hidden { display:none !important; }

.final-card .aida-emoji { font-size:80px; }
.final-media img {
  width:100%; max-height:520px; object-fit:cover;
  border-radius:22px; display:block; margin-bottom:25px;
}
.final-media audio { width:100%; margin:12px 0 18px; }

@media(max-width:600px) {
  .aida-stage-wrap { padding:45px 12px; }
  .aida-card { padding:35px 20px; border-radius:22px; }
  .aida-card h1 { font-size:25px; }
  .aida-card h2 { font-size:23px; }
  .aida-card p { font-size:16px; }
  .aida-btn { width:100%; }
  .aida-buttons { flex-direction:column; }
}