/* ==========================================================================
   quran-taraweeh.css — Вкладка «Таравих»
   Адаптирован под CSS-переменные палитры (--emerald, --emerald-dark и т.д.)
   ========================================================================== */

#tab-taraweeh {
  overflow-y: auto;
  padding: 24px 32px;
}

/* --- Баннер --- */
.taraweeh-banner {
  text-align: center;
  padding: 40px 24px;
  background: linear-gradient(135deg, var(--emerald-50, #ecfdf5), var(--white, #fff));
  border: 1.5px solid color-mix(in srgb, var(--emerald, #059669) 30%, transparent);
  border-radius: 16px;
  margin-bottom: 28px;
  max-width: 700px;
  margin-inline-start: auto;
  margin-inline-end: auto;
}

.taraweeh-banner-icon { font-size: 3rem; margin-bottom: 12px; }
.taraweeh-banner-title { font-size: 1.4rem; font-weight: 700; color: var(--emerald-dark, #065f46); margin: 0 0 4px; }
.taraweeh-banner-title-ar { font-family: var(--font-arabic, 'Amiri', serif); font-size: 1.1rem; color: var(--emerald, #059669); margin: 0 0 12px; }
.taraweeh-banner-desc { font-size: 0.88rem; color: var(--dark-gray, #374151); line-height: 1.5; margin: 0 0 16px; max-width: 500px; margin-inline-start: auto; margin-inline-end: auto; }

.taraweeh-banner-status { display: inline-block; padding: 6px 18px; border-radius: 20px; font-size: 0.82rem; font-weight: 600; }
.taraweeh-banner-status.active { background: var(--emerald, #059669); color: #fff; }
.taraweeh-banner-status.closed { background: #f3f4f6; color: #6b7280; border: 1px solid #e5e7eb; }

/* --- Два блока --- */
.taraweeh-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  max-width: 700px;
  margin: 0 auto 28px;
}

.taraweeh-role-card {
  background: var(--white, #fff);
  border: 1.5px solid var(--border-gray, #e5e7eb);
  border-radius: 14px;
  padding: 32px 24px;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s;
}

.taraweeh-role-card:hover {
  border-color: var(--emerald-light, #86efac);
  box-shadow: 0 4px 16px color-mix(in srgb, var(--emerald, #059669) 10%, transparent);
  transform: translateY(-2px);
}

.taraweeh-role-icon { font-size: 2.5rem; margin-bottom: 10px; }
.taraweeh-role-title { font-size: 1rem; font-weight: 600; color: var(--dark-gray, #333); margin: 0 0 8px; }
.taraweeh-role-desc { font-size: 0.82rem; color: var(--medium-gray, #888); margin: 0 0 14px; line-height: 1.4; }
.taraweeh-role-btn { font-size: 0.82rem; font-weight: 600; color: var(--emerald, #059669); }

/* --- Шаги --- */
.taraweeh-steps {
  max-width: 700px;
  margin: 0 auto 28px;
}

.taraweeh-steps-title { font-size: 1rem; font-weight: 600; color: var(--dark-gray, #333); margin: 0 0 16px; text-align: center; }

.taraweeh-steps-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

.taraweeh-step {
  text-align: center;
  padding: 16px 8px;
  border: 1px solid var(--border-gray, #e5e7eb);
  border-radius: 10px;
  background: var(--white, #fff);
}

.taraweeh-step-num { font-size: 1.5rem; display: block; margin-bottom: 6px; color: var(--emerald, #059669); }
.taraweeh-step p { font-size: 0.78rem; color: var(--medium-gray, #555); margin: 0; line-height: 1.4; }

/* --- Статистика --- */
.taraweeh-stats {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 10px 24px;
  max-width: 400px;
  margin: 0 auto;
  background: var(--emerald-50, #ecfdf5);
  border: 1px solid color-mix(in srgb, var(--emerald, #059669) 30%, transparent);
  border-radius: 24px;
  font-size: 0.82rem;
  color: var(--emerald-dark, #065f46);
}

.taraweeh-stats b { font-weight: 700; }
.taraweeh-stats-dot { color: var(--emerald-light, #6ee7b7); }

/* --- Форма --- */
.taraweeh-form-page {
  max-width: 600px;
  margin: 0 auto;
}

.taraweeh-back-btn {
  border: none;
  background: transparent;
  color: var(--emerald, #059669);
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  padding: 8px 0;
  margin-bottom: 16px;
}

.taraweeh-back-btn:hover { text-decoration: underline; }

.taraweeh-form-title { font-size: 1.3rem; font-weight: 700; margin: 0 0 4px; }
.taraweeh-form-title-ar { font-family: var(--font-arabic, 'Amiri', serif); font-size: 1rem; color: var(--emerald, #059669); margin: 0 0 24px; }

.taraweeh-field { margin-bottom: 16px; }
.taraweeh-field label { display: block; font-size: 0.82rem; font-weight: 500; color: var(--dark-gray, #374151); margin-bottom: 4px; }

.taraweeh-field input[type="text"],
.taraweeh-field input[type="email"],
.taraweeh-field input[type="tel"],
.taraweeh-field input[type="number"],
.taraweeh-field textarea {
  width: 100%;
  padding: 10px 14px;
  border: 1.5px solid var(--border-gray, #e5e7eb);
  border-radius: 10px;
  font-size: 0.88rem;
  box-sizing: border-box;
  outline: none;
  transition: border-color 0.15s;
}

.taraweeh-field input:focus,
.taraweeh-field textarea:focus {
  border-color: var(--emerald, #059669);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--emerald, #059669) 12%, transparent);
}

.taraweeh-radio-group {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 4px;
}

.taraweeh-radio-group label {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.82rem;
  font-weight: 400;
  cursor: pointer;
}

.taraweeh-radio-group input[type="radio"] {
  accent-color: var(--emerald, #059669);
}

.taraweeh-consent label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8rem;
}

.taraweeh-consent input[type="checkbox"] {
  accent-color: var(--emerald, #059669);
  width: 16px;
  height: 16px;
}

.taraweeh-submit-btn {
  width: 100%;
  padding: 12px;
  border: none;
  border-radius: 10px;
  background: var(--emerald, #059669);
  color: #fff;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
  margin-top: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.taraweeh-submit-btn:hover { background: var(--emerald-dark, #047857); }

/* --- Успех --- */
.taraweeh-success {
  text-align: center;
  max-width: 500px;
  margin: 40px auto;
  padding: 40px 24px;
  background: var(--emerald-50, #ecfdf5);
  border-radius: 16px;
  border: 1.5px solid color-mix(in srgb, var(--emerald, #059669) 30%, transparent);
}

.taraweeh-success-icon { font-size: 3rem; margin-bottom: 12px; }
.taraweeh-success h2 { font-size: 1.2rem; color: var(--emerald-dark, #065f46); margin: 0 0 12px; }
.taraweeh-success p { font-size: 0.88rem; color: var(--dark-gray, #374151); line-height: 1.5; margin: 0 0 8px; }
.taraweeh-success-id { font-size: 0.82rem; color: var(--emerald, #059669); margin-top: 16px !important; }
.taraweeh-success-dua { font-family: var(--font-arabic, 'Amiri', serif); font-size: 1.2rem; color: var(--emerald, #059669); margin-top: 16px !important; }
.taraweeh-success-dua-ru { font-size: 0.85rem; color: var(--emerald, #059669); font-style: italic; }

/* --- Ночной режим --- */
.night-mode .taraweeh-banner {
  background: linear-gradient(135deg, color-mix(in srgb, var(--emerald) 8%, transparent), color-mix(in srgb, var(--emerald) 3%, transparent));
  border-color: color-mix(in srgb, var(--emerald) 20%, transparent);
}
.night-mode .taraweeh-banner-title { color: #d1d5db; }
.night-mode .taraweeh-banner-desc { color: #9ca3af; }
.night-mode .taraweeh-role-card { background: #1a1f2e; border-color: #2d3548; }
.night-mode .taraweeh-role-card:hover { border-color: color-mix(in srgb, var(--emerald) 30%, transparent); }
.night-mode .taraweeh-role-title { color: #d1d5db; }
.night-mode .taraweeh-role-desc { color: #6b7280; }
.night-mode .taraweeh-steps-title { color: #d1d5db; }
.night-mode .taraweeh-step { background: #1a1f2e; border-color: #2d3548; }
.night-mode .taraweeh-step p { color: #9ca3af; }
.night-mode .taraweeh-stats { background: color-mix(in srgb, var(--emerald) 6%, transparent); border-color: color-mix(in srgb, var(--emerald) 20%, transparent); color: #6b9e8a; }
.night-mode .taraweeh-field label { color: #9ca3af; }
.night-mode .taraweeh-field input,
.night-mode .taraweeh-field textarea { background: #1a1f2e; border-color: #2d3548; color: #e5e7eb; }
.night-mode .taraweeh-success { background: color-mix(in srgb, var(--emerald) 6%, transparent); border-color: color-mix(in srgb, var(--emerald) 20%, transparent); }
.night-mode .taraweeh-success h2 { color: #d1d5db; }
.night-mode .taraweeh-success p { color: #9ca3af; }
.night-mode .taraweeh-banner-status.closed { background: #1f2937; color: #6b7280; border-color: #374151; }

/* --- Мобильный --- */
@media (max-width: 767px) {
  #tab-taraweeh { padding: 16px; }
  .taraweeh-cards { grid-template-columns: 1fr; }
  .taraweeh-steps-grid { grid-template-columns: repeat(2, 1fr); }
}