/* ═══════════════════════════════════════════════
   Ascendant Calculator — Styles v2.0
   ═══════════════════════════════════════════════ */

/* ── Контейнер ── */
.asc-calculator {
  max-width: 520px;
  margin: 2rem auto;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
    Ubuntu, Cantarell, sans-serif;
}

/* ── Группа времени (час : минута) ── */
.asc-time-group {
  display: flex;
  align-items: center;
  gap: 8px;
}

.asc-time-part {
  flex: 1;
}

.asc-time-part select {
  width: 100%;
  padding: 10px 10px;
  font-size: 15px;
  border: 1px solid #ccc;
  border-radius: 8px;
  background: #fff;
  box-sizing: border-box;
  transition: border-color 0.2s;
  appearance: auto;
  color: #333;
}

.asc-time-part select:focus {
  outline: none;
  border-color: #6c5ce7;
  box-shadow: 0 0 0 3px rgba(108, 92, 231, 0.12);
}

.asc-time-sep {
  font-size: 20px;
  font-weight: 700;
  color: #555;
}

/* ── Ссылка на страницу знака ── */
.asc-sign-link {
  display: inline-block;
  margin-top: 12px;
  padding: 10px 20px;
  background: linear-gradient(135deg, #6c5ce7, #a855f7);
  color: #fff !important;
  text-decoration: none;
  border-radius: 8px;
  font-weight: 600;
  font-size: 15px;
  transition: opacity 0.2s;
}

.asc-sign-link:hover {
  opacity: 0.88;
  color: #fff !important;
  text-decoration: none;
}

/* ── Группа даты (день / месяц / год) ── */
.asc-date-group {
  display: flex;
  gap: 10px;
}

.asc-date-part {
  flex: 1;
}

.asc-date-part select {
  width: 100%;
  padding: 10px 10px;
  font-size: 15px;
  border: 1px solid #ccc;
  border-radius: 8px;
  background: #fff;
  box-sizing: border-box;
  transition: border-color 0.2s;
  appearance: auto;
  color: #333;
}

.asc-date-part select:focus {
  outline: none;
  border-color: #6c5ce7;
  box-shadow: 0 0 0 3px rgba(108, 92, 231, 0.12);
}

/* ── Форма ── */
.asc-form {
  background: #fafafa;
  border: 1px solid #e0e0e0;
  border-radius: 12px;
  padding: 28px 24px;
}

.asc-field {
  margin-bottom: 20px;
}

.asc-field label {
  display: block;
  margin-bottom: 6px;
  font-weight: 600;
  font-size: 15px;
  color: #333;
}

.asc-field input[type="date"],
.asc-field input[type="time"],
.asc-field input[type="text"] {
  width: 100%;
  padding: 10px 14px;
  font-size: 15px;
  border: 1px solid #ccc;
  border-radius: 8px;
  background: #fff;
  box-sizing: border-box;
  transition: border-color 0.2s;
}

.asc-field input:focus {
  outline: none;
  border-color: #6c5ce7;
  box-shadow: 0 0 0 3px rgba(108, 92, 231, 0.12);
}

.asc-hint {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  color: #888;
}

/* ── Кнопка ── */
.asc-btn {
  display: block;
  width: 100%;
  padding: 13px;
  font-size: 16px;
  font-weight: 600;
  color: #fff;
  background: linear-gradient(135deg, #6c5ce7, #a855f7);
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: opacity 0.2s, transform 0.1s;
}

.asc-btn:hover {
  opacity: 0.92;
}

.asc-btn:active {
  transform: scale(0.98);
}

.asc-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.asc-btn-loader {
  display: inline-block;
  animation: asc-pulse 1s infinite;
}

@keyframes asc-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.5; }
}

/* ── Ошибка ── */
.asc-error {
  margin-top: 16px;
  padding: 12px 16px;
  background: #fdeaea;
  color: #c0392b;
  border: 1px solid #f5c6cb;
  border-radius: 8px;
  font-size: 14px;
}

/* ── Результат ── */
.asc-result {
  margin-top: 24px;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid #e0e0e0;
  background: #fff;
}

.asc-result-sign {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 28px 20px 20px;
  background: linear-gradient(135deg, #6c5ce7, #a855f7);
  color: #fff;
}

.asc-result-symbol {
  font-size: 52px;
  line-height: 1;
  margin-bottom: 8px;
}

.asc-result-label {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  opacity: 0.85;
  margin-bottom: 4px;
}

.asc-result-name {
  font-size: 26px;
  font-weight: 700;
}

.asc-result-details {
  padding: 20px 24px 24px;
}

.asc-result-details p {
  margin: 0 0 10px;
  font-size: 15px;
  line-height: 1.55;
  color: #444;
}

.asc-result-details strong {
  color: #333;
}

/* ── Знак-специфичные цвета (опционально) ── */
.asc-result.aries .asc-result-sign       { background: linear-gradient(135deg, #e74c3c, #e67e22); }
.asc-result.taurus .asc-result-sign      { background: linear-gradient(135deg, #27ae60, #2ecc71); }
.asc-result.gemini .asc-result-sign      { background: linear-gradient(135deg, #f1c40f, #e67e22); }
.asc-result.cancer .asc-result-sign      { background: linear-gradient(135deg, #bdc3c7, #95a5a6); }
.asc-result.leo .asc-result-sign         { background: linear-gradient(135deg, #f39c12, #e74c3c); }
.asc-result.virgo .asc-result-sign       { background: linear-gradient(135deg, #1abc9c, #16a085); }
.asc-result.libra .asc-result-sign       { background: linear-gradient(135deg, #e91e63, #9b59b6); }
.asc-result.scorpio .asc-result-sign     { background: linear-gradient(135deg, #2c3e50, #c0392b); }
.asc-result.sagittarius .asc-result-sign { background: linear-gradient(135deg, #8e44ad, #3498db); }
.asc-result.capricorn .asc-result-sign   { background: linear-gradient(135deg, #34495e, #2c3e50); }
.asc-result.aquarius .asc-result-sign    { background: linear-gradient(135deg, #3498db, #00d2ff); }
.asc-result.pisces .asc-result-sign      { background: linear-gradient(135deg, #6c5ce7, #a29bfe); }

/* ── Google Places autocomplete dropdown fix ── */
.pac-container {
  z-index: 99999 !important;
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.12);
  border: 1px solid #e0e0e0;
  margin-top: 2px;
}

/* ── Адаптивность ── */
@media (max-width: 560px) {
  .asc-calculator {
    margin: 1rem 12px;
  }
  .asc-form {
    padding: 20px 16px;
  }
  .asc-date-group {
    flex-direction: column;
    gap: 8px;
  }
  .asc-time-group {
    gap: 6px;
  }
  .asc-result-symbol {
    font-size: 42px;
  }
  .asc-result-name {
    font-size: 22px;
  }
}