/* angl.ruda-agency.ru — в стиле ruda-agency.ru */

@font-face {
  font-family: 'Determination2';
  font-style: normal;
  font-weight: 400;
  src: local('Determination2'),
       url('../fonts/determination2.ttf') format('truetype');
}
/* Если шрифта нет — используется Arial (как на сайте в fallback) */

/* Переменные как на основном сайте */
:root {
  --color-main: #F5F950;
  --color-main-light: #fdff79;
  --color-main-dark: #edf100;
  --color-secondary: #DC5454;
  --color-secondary-dark: #c73a3a;
  --color-secondary-darker: #bb2424;
  --color-black: rgb(5 5 5);
  --color-gray: #646A75;
  --color-gray-light: rgb(224 224 224);
  --color-gray-light-25: rgb(224 224 224 / 25%);
  --section-side-padding: clamp(0.5em, 2.5vw, 2em);
  --section-v-padding: clamp(0.75em, 2.5vw, 1.75em);
  --p-1: clamp(0.5em, 1.5vw, 1em);
  --p-2: clamp(1em, 3vw, 2em);
  --p-15: clamp(0.75em, 2.25vw, 1.5em);
}

* {
  box-sizing: border-box;
}

html {
  background-color: var(--color-black);
}

body {
  margin: 0;
  min-height: 100vh;
  font-family: 'Determination2', Arial, sans-serif;
  font-size: clamp(17px, 1.25vw, 20px);
  line-height: 1.4;
  color: var(--color-black);
  background-color: #fff;
}

.body-inner {
  max-width: 1760px;
  margin-left: auto;
  margin-right: auto;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* ——— Шапка в стиле сайта ——— */
.angl-header-wrapper {
  padding: 0.25em var(--section-side-padding) 1em;
}

.angl-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--p-1);
  padding: 0.5em var(--section-side-padding);
  background-color: #fff;
  border-radius: 4em;
}

.angl-header .logo-group {
  display: inline-flex;
  align-items: center;
  gap: 0.75em;
}

.angl-header .logo-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  color: var(--color-black);
  text-decoration: none;
  font-size: clamp(18px, 1.5vw, 24px);
  transition: opacity 0.25s;
}

.angl-header .logo-link:hover {
  opacity: 0.85;
}

/* Совмещённый логотип Ruda Agency */
.angl-header .logo-img {
  display: block;
  height: 2.4em;
  width: auto;
  object-fit: contain;
}

.angl-header .logo-text {
  color: var(--color-black);
}

.angl-header .logo-accent {
  color: var(--color-secondary);
}

.angl-header .service-name {
  font-size: clamp(16px, 1.25vw, 20px);
  color: var(--color-gray);
}

/* ——— Основной контент ——— */
.angl-main {
  flex: 1;
  padding: var(--section-v-padding) var(--section-side-padding);
}

.angl-section {
  max-width: 720px;
  margin: 0 auto;
}

.label {
  display: block;
  font-size: clamp(16px, 1.25vw, 19px);
  color: var(--color-gray);
  margin-bottom: 0.5em;
}

.input-row {
  display: flex;
  gap: 0.75em;
  align-items: center;
  flex-wrap: wrap;
}

.input {
  flex: 1;
  min-width: 180px;
  padding: 0.75em 1em;
  font-family: inherit;
  font-size: clamp(16px, 1.25vw, 20px);
  color: var(--color-black);
  background: #fff;
  border: 2px solid var(--color-gray-light);
  border-radius: 2em;
  transition: border-color 0.25s, box-shadow 0.25s;
}

.input:focus {
  outline: none;
  border-color: var(--color-secondary);
  box-shadow: 0 0 0 2px rgb(220 84 84 / 20%);
}

.hint {
  margin: 0.75em 0 0;
  font-size: clamp(14px, 1vw, 16px);
  color: var(--color-gray);
}

/* Кнопки как на сайте */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  padding: 0.65em 1.25em;
  font-family: inherit;
  font-size: clamp(16px, 1.25vw, 20px);
  font-weight: 400;
  border: none;
  border-radius: 2em;
  cursor: pointer;
  transition: 0.25s;
  line-height: 1;
}

.btn-main {
  background-color: var(--color-main);
  color: var(--color-black);
}

.btn-main:hover {
  background-color: var(--color-main-light);
}

.btn-main:active {
  background-color: var(--color-main-dark);
}

/* Результаты */
.results {
  margin-top: 2em;
  padding-top: 2em;
  border-top: 1px solid var(--color-gray-light-25);
}

.results.hidden {
  display: none;
}

.results-title {
  font-size: clamp(20px, 1.75vw, 26px);
  font-weight: 400;
  margin: 0 0 0.5em;
  color: var(--color-black);
}

.results-title::after {
  content: '_';
}

.summary {
  font-size: clamp(15px, 1.1vw, 18px);
  color: var(--color-gray);
  margin-bottom: 1em;
}

.dicts {
  display: flex;
  flex-direction: column;
  gap: 1em;
}

.dict-block {
  background: #fff;
  border: 2px solid var(--color-gray-light-25);
  border-radius: 1rem;
  padding: 1em 1.25em;
  transition: border-color 0.25s;
}

.dict-block--found {
  border-left: 4px solid var(--color-secondary);
}

.dict-block--not-found {
  opacity: 0.9;
}

.dict-block__title {
  font-size: clamp(17px, 1.25vw, 20px);
  font-weight: 400;
  margin: 0 0 0.5em;
  color: var(--color-black);
}

.dict-block__title::after {
  content: '_';
}

.dict-block__excerpt {
  margin: 0;
  font-size: clamp(14px, 1vw, 16px);
  line-height: 1.55;
  white-space: pre-wrap;
  word-break: break-word;
  color: var(--color-black);
}

.dict-block__entry {
  font-size: clamp(14px, 1vw, 16px);
  line-height: 1.55;
  color: var(--color-black);
}

.dict-block__entry .dict-block__grammar {
  color: var(--color-gray);
  margin-left: 0.25em;
}

.dict-block__entry .dict-block__etymology {
  color: var(--color-secondary);
  font-style: italic;
  margin-left: 0.25em;
}

.dict-block__definition {
  margin: 0.75em 0 0;
}

.dict-block__meta {
  margin: 0;
  font-size: clamp(14px, 1vw, 16px);
  color: var(--color-gray);
}

.error {
  color: var(--color-secondary);
  font-size: clamp(14px, 1vw, 16px);
}

.empty {
  margin-top: 2em;
  padding: var(--p-15);
  text-align: center;
  color: var(--color-gray);
  background: #fff;
  border: 2px solid var(--color-gray-light-25);
  border-radius: 1rem;
}

.empty.hidden {
  display: none;
}

/* ——— Подвал как на сайте ——— */
.angl-footer-wrapper {
  margin-top: auto;
  background-color: var(--color-black);
  color: #e8e8e8;
  padding: var(--section-v-padding) var(--section-side-padding);
  border-radius: 1.5rem 1.5rem 0 0;
}

.angl-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--p-1);
  font-size: clamp(14px, 1.1vw, 17px);
}

.angl-footer a {
  color: var(--color-main-light);
  text-decoration: none;
  opacity: 0.9;
  transition: opacity 0.25s;
}

.angl-footer a:hover {
  opacity: 1;
  color: var(--color-main-light);
}

.angl-footer .divider {
  color: var(--color-gray-light-25);
  user-select: none;
}

.angl-footer .support-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  font-size: clamp(14px, 1vw, 16px);
  color: var(--color-secondary-light, var(--color-main-light));
}

.angl-footer .support-link-arrow {
  display: inline-block;
  animation: support-arrow-blink 1s infinite;
}

@keyframes support-arrow-blink {
  0%, 100% {
    opacity: 1;
    transform: translateX(0);
  }
  50% {
    opacity: 0.25;
    transform: translateX(4px);
  }
}

@media (max-width: 640px) {
  .angl-header {
    flex-direction: column;
    gap: 0.5em;
    text-align: center;
  }

  .input-row {
    flex-direction: column;
    align-items: stretch;
  }

  .btn {
    width: 100%;
  }
}