* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Vazirmatn", sans-serif;
}

body {
  min-height: 100vh;
  background: linear-gradient(135deg, #0f2027, #203a43);
  color: #fff;
  direction: rtl;
  text-align: right;
}
html {
  background: #0f2027;
}

/* container */
.container {
  display: flex;
  justify-content: center;
  padding: 30px 15px;
}

/* card */
.card {
  width: 100%;
  max-width: 620px;
  background: rgba(255,255,255,0.06);
  border-radius: 28px;
  padding: 26px;
  backdrop-filter: blur(18px);
  box-shadow: 0 15px 40px rgba(0,0,0,0.35);
}

/* title */
.card h1 {
  text-align: center;
  font-size: 26px;
  margin-bottom: 10px;
  font-weight: 700;
}

.subtitle {
  text-align: center;
  font-size: 13px;
  opacity: 0.75;
  margin-bottom: 25px;
  line-height: 1.8;
}

/* section */
.info-section {
  margin-top: 20px;
  padding: 22px;
  background: rgba(255,255,255,0.04);
  border-radius: 22px;
  line-height: 2;
}

/* تیتر */
.info-section h2 {
  font-size: 17px;
  margin-bottom: 12px;
  font-weight: 700;
}

/* متن اصلی */
.lead {
  font-size: 14px;
  opacity: 0.85;
  margin-bottom: 18px;
}

/* باکس معمولی */
.block {
  margin-bottom: 14px;
  padding: 15px;
  border-radius: 14px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.05);
  transition: 0.25s;
}

.block:hover {
  transform: translateY(-3px);
  background: rgba(255,255,255,0.08);
}

/* تیتر داخل */
.block h3 {
  font-size: 14px;
  margin-bottom: 6px;
  color: #60efff;
}

/* متن */
.block p {
  font-size: 13px;
  opacity: 0.9;
}

/* 🔥 باکس مهم */
.important-box {
  margin: 16px 0;
  padding: 16px;
  border-radius: 16px;
  background: rgba(96,239,255,0.08);
  border-right: 4px solid #60efff;
  font-size: 13px;
  line-height: 2;
}

/* عنوان مدارک */
.section-title {
  margin-top: 18px;
  font-size: 15px;
  font-weight: 600;
}

/* مدارک */
.docs {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 12px 0 18px;
}

.doc-item {
  padding: 12px;
  border-radius: 12px;
  background: rgba(255,255,255,0.06);
  font-size: 13px;
  border: 1px solid rgba(255,255,255,0.05);
  transition: 0.2s;
}

.doc-item:hover {
  background: rgba(255,255,255,0.1);
}

/* 🔥 باکس نکات (اون دوتا یکی شد) */
.tips-box {
  margin-top: 15px;
  padding: 16px;
  border-radius: 18px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.05);
  line-height: 2;
}

.tips-box p {
  font-size: 13px;
  margin-bottom: 8px;
  opacity: 0.9;
}

/* متن پایانی */
.final-text {
  text-align: center;
  margin-top: 20px;
  font-weight: bold;
  font-size: 15px;
  color: #00ff87;
  line-height: 1.8;
}

/* buttons */
.actions {
  margin-top: 28px;
  display: flex;
  gap: 12px;
}
.btn-title {
  text-align: center;
  margin-top: 25px;
  margin-bottom: 10px;
  font-size: 14px;
  opacity: 0.8;
}
.btn-subtitle {
  text-align: center;
  margin-top: 10px;
  font-size: 12px;
  opacity: 0.6;
}
/* دکمه اصلی (arbeitsagentur) */
.primary {
  background: linear-gradient(135deg, #00ff87, #60efff);
  color: #000;
  box-shadow: 0 10px 25px rgba(0,255,135,0.3);
}

/* دکمه دوم (Ausbildung) */
.secondary {
  border: 2px solid #60efff;
  color: #60efff;
  background: transparent;
}

/* badge بهتر */
.badge {
  position: absolute;
  top: -10px;
  left: 2px;
  font-size: 10px;
  background: #00ff87;
  color: #000;
  padding: 2px 3px;
  border-radius: 12px;
  font-weight: bold;
  box-shadow: 0 4px 8px rgba(0,255,135,0.4);
}

/* لوگو بهتر */
.btn-logo img {
  width: 22px;
  height: 22px;
}
/* glow حرفه‌ای */
.glow {
  box-shadow: 0 0 20px rgba(0,255,135,0.4);
}

.glow:hover {
  box-shadow: 0 0 30px rgba(0,255,135,0.7);
}

/* hover نرم */
.btn:hover {
  transform: translateY(-3px) scale(1.04);
}

/* دکمه پایه */
.btn {
  flex: 1;
  text-align: center;
  padding: 10px 12px;   /* 👈 ارتفاع کمتر شد */
  border-radius: 16px;
  text-decoration: none;
  font-weight: bold;
  transition: 0.25s;

  display: flex;
  flex-direction: column;   /* 👈 لوگو میره بالا */
  align-items: center;
  justify-content: center;
  gap: 6px;

  position: relative;
}


/* دکمه دوم */
.secondary {
  border: 2px solid #60efff;
  color: #60efff;
}

/* hover حرفه‌ای */
.btn:hover {
  transform: scale(1.05);
  opacity: 0.95;
}

/* موبایل */
@media (max-width: 700px) {

  .card {
    padding: 18px;
  }

  .card h1 {
    font-size: 20px;
  }

  .subtitle {
    font-size: 12px;
  }

  .lead {
    font-size: 12px;
  }

  .block h3 {
    font-size: 13px;
  }

  .block p,
  .doc-item,
  .tips-box p {
    font-size: 11.5px;
  }

  /* 💣 مهم‌ترین بخش */
  .actions {
    flex-direction: column;   /* 👈 دکمه‌ها زیر هم */
    gap: 10px;
  }

  .btn {
    width: 100%;
    padding: 10px;
    font-size: 12px;

    height: auto;        /* 👈 جلوگیری از کش اومدن */
    min-height: unset;   /* 👈 خیلی مهم */
  }

  /* لوگو موبایل کوچیک‌تر */
  .btn-logo img {
    width: 18px;
    height: 18px;
    top: 6px;
    right: 8px;
  }

  /* badge کوچیک‌تر */
  .badge {
    font-size: 8px;
    padding: 3px 6px;
  }

}