/* Бастион — компоненты: кнопка с орбом, иконка-кнопка, section label,
   поле ввода, поп-ап, карточка отзыва. */

/* ──────────────────────────────── Кнопка ──────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  border:1px solid transparent;border-radius:var(--radius-button);
  font:var(--type-button);font-weight:var(--weight-semibold);
  cursor:pointer;white-space:nowrap;text-decoration:none;
  -webkit-appearance:none;appearance:none;
  transition:background-color var(--dur-fast) var(--ease-standard),
             border-color var(--dur-fast) var(--ease-standard),
             color var(--dur-fast) var(--ease-standard),
             transform var(--dur-base) var(--ease-standard),
             box-shadow var(--dur-base) var(--ease-standard);
}
.btn:hover{transform:var(--lift-hover)}
.btn:active{transform:var(--press-scale)}
.btn[disabled],.btn[aria-busy="true"]{pointer-events:none}

/* размеры */
.btn--sm{height:40px;padding:0 20px;font-size:var(--size-body-sm)}
.btn--md{height:48px;padding:0 26px;font-size:var(--size-body)}
.btn--lg{height:56px;padding:0 32px;font-size:var(--size-body)}
.btn--cta{height:51px;padding:0 32px;font-size:17px}
.btn--full{width:100%}

/* варианты */
.btn--primary{background:var(--action-primary);color:var(--text-on-accent)}
.btn--primary:hover{background:var(--action-primary-hover);box-shadow:var(--shadow-accent)}
.btn--primary:active{background:var(--action-primary-active)}

.btn--light{background:var(--surface-card);color:var(--text-heading);box-shadow:var(--shadow-sm)}
.btn--light:hover{background:var(--ink-25);box-shadow:var(--shadow-md)}

.btn--outline{background:transparent;color:var(--text-heading);border-color:var(--border-default)}
.btn--outline:hover{border-color:var(--action-primary);color:var(--action-primary)}

/* орб — стрелка ↗ в собственном круге у правого края */
.orb{
  width:30px;height:30px;border-radius:var(--radius-circle);flex:none;
  margin:-4px -10px -4px 4px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.16);
  transition:transform .28s var(--ease-standard),background-color .28s var(--ease-standard);
}
.btn:hover .orb{transform:translate(2px,-2px);background:rgba(255,255,255,.26)}
.orb svg{width:14px;height:14px;stroke-width:2.4;stroke:currentColor;fill:none;
  stroke-linecap:round;stroke-linejoin:round}
/* на неоранжевых кнопках круг сам становится оранжевым */
.btn--light .orb,.btn--outline .orb{background:var(--action-primary);color:var(--white)}
.btn--light:hover .orb,.btn--outline:hover .orb{background:var(--action-primary-hover)}

/* состояние загрузки */
.btn__spinner{
  width:18px;height:18px;flex:none;border-radius:var(--radius-circle);
  border:2px solid rgba(255,255,255,.32);border-top-color:currentColor;
  animation:bst-spin .7s linear infinite;display:none;
}
.btn[aria-busy="true"] .btn__spinner{display:block}
.btn[aria-busy="true"] .btn__label{opacity:.72}
.btn[aria-busy="true"] .orb{display:none}

/* ─────────────────────────── Кнопка-иконка ─────────────────────────── */
.icon-btn{
  width:44px;height:44px;flex:none;
  display:inline-flex;align-items:center;justify-content:center;
  border-radius:var(--radius-circle);border:1px solid transparent;
  background:transparent;color:var(--text-heading);cursor:pointer;
  transition:var(--transition-color),transform var(--dur-fast) var(--ease-standard),opacity var(--dur-fast) var(--ease-standard);
}
.icon-btn:active{transform:var(--press-scale)}
.icon-btn svg{stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.icon-btn--ghost:hover{background:var(--action-ghost-hover);color:var(--action-primary)}
.icon-btn--outline{border-color:var(--border-default)}
.icon-btn--outline:hover{border-color:var(--action-primary);color:var(--action-primary)}
.icon-btn--sm{width:36px;height:36px}
.icon-btn--md{width:40px;height:40px}
.icon-btn--on-dark{color:var(--text-on-inverse);border-color:var(--border-inverse-strong)}
.icon-btn--on-dark:hover{border-color:var(--action-primary);color:var(--action-primary)}
.icon-btn[disabled]{opacity:.34;pointer-events:none}

/* ───────────────────────────── Section label ───────────────────────────── */
.section-label{display:inline-flex;align-self:flex-start;align-items:center;gap:12px;
  font:var(--type-eyebrow);color:var(--text-accent)}
.section-label__medallion{
  width:28px;height:28px;flex:none;border-radius:var(--radius-circle);
  display:flex;align-items:center;justify-content:center;
  background:var(--surface-accent-soft);border:1px solid rgba(240,117,43,.28);
}
.section-label__medallion::before{content:"";width:10px;height:2px;border-radius:2px;background:var(--action-primary)}
.section-label--on-dark .section-label__medallion{
  background:rgba(240,117,43,.14);border-color:rgba(240,117,43,.34)}

/* ─────────────────────────────── Поля формы ─────────────────────────────── */
.field{display:flex;flex-direction:column;gap:8px}
.field__label{font:var(--type-label);letter-spacing:var(--tracking-label);color:var(--text-heading)}
.field__label span{color:var(--action-primary)}
.field__control{position:relative;display:flex}
.field__input{
  width:100%;height:56px;padding:0 46px 0 16px;
  border-radius:var(--radius-input);border:1px solid var(--ink-200);
  background:var(--surface-card);color:var(--text-heading);
  font:var(--type-body);
  transition:border-color var(--dur-fast) var(--ease-standard),box-shadow var(--dur-fast) var(--ease-standard);
}
.field__input::placeholder{color:var(--text-disabled)}
.field__input:focus{outline:none;border-color:var(--action-primary);box-shadow:var(--shadow-focus)}
.field__icon{
  position:absolute;right:16px;top:50%;transform:translateY(-50%);
  display:none;pointer-events:none;color:var(--success-fg)}
.field__icon svg{stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.field__error{display:none;font:var(--type-caption);color:var(--danger-fg)}

.field[data-state="valid"] .field__icon--ok{display:block}
.field[data-state="error"] .field__input{border-color:var(--danger-border);box-shadow:0 0 0 3px rgba(196,55,43,.18)}
.field[data-state="error"] .field__input:focus{border-color:var(--danger-border);box-shadow:0 0 0 3px rgba(196,55,43,.18)}
.field[data-state="error"] .field__icon--error{display:block;color:var(--danger-border)}
.field[data-state="error"] .field__error{display:block}

/* ──────────────────────────────── Поп-ап ──────────────────────────────── */
.modal{position:fixed;inset:0;z-index:var(--z-modal);display:none}
.modal[data-open="true"]{display:block}
.modal__overlay{
  position:absolute;inset:0;background:var(--surface-overlay);
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
  animation:bst-fade-in var(--dur-fast) var(--ease-standard);
}
.modal__wrap{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  padding:24px;overflow-y:auto}
.modal__panel{
  position:relative;width:100%;max-width:var(--container-form);
  background:var(--surface-card);border-radius:var(--radius-panel);
  padding:var(--pad-panel);box-shadow:var(--shadow-xl);
  animation:bst-rise var(--dur-base) var(--ease-standard);
  display:flex;flex-direction:column;gap:24px;
}
.modal__close{position:absolute;top:20px;right:20px;
  width:36px;height:36px;border-radius:var(--radius-circle);border:0;
  background:var(--ink-50);color:var(--text-muted);cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:var(--transition-color)}
.modal__close:hover{background:var(--orange-50);color:var(--action-primary)}
.modal__close svg{stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.modal__head{display:flex;flex-direction:column;gap:12px;padding-right:44px}
.modal__title{font:var(--type-h3);letter-spacing:var(--tracking-heading);color:var(--text-heading)}
.modal__desc{font:var(--type-body);color:var(--text-muted)}
.modal__form{display:flex;flex-direction:column;gap:var(--gap-stack)}
.modal__note{font:var(--type-caption);color:var(--text-subtle)}
.modal__success{display:flex;align-items:center;gap:12px;padding:14px 16px;
  background:var(--success-bg);border-radius:var(--radius-sm)}
.modal__success svg{stroke:var(--success-fg);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
.modal__success span{font:var(--type-body-sm);color:var(--success-fg)}
.modal__fail{display:none;font:var(--type-caption);color:var(--danger-fg)}
.modal[data-failed="true"] .modal__fail{display:block}

/* ─────────────────────────── Карточка отзыва ─────────────────────────── */
.testimonial{
  margin:0;height:100%;display:flex;flex-direction:column;gap:16px;
  padding:var(--pad-card-lg);border-radius:var(--radius-card);
  background:var(--surface-inverse-raised);border:1px solid var(--border-inverse);
  transition:var(--transition-lift),border-color var(--dur-base) var(--ease-standard);
}
.testimonial__quote{width:22px;height:22px;flex:none;color:var(--orange-400)}
.testimonial__quote svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
.testimonial__text{font:var(--type-body);color:var(--text-on-inverse-muted);flex:1}
.testimonial__foot{display:flex;align-items:center;gap:12px;
  padding-top:16px;border-top:1px solid var(--border-inverse)}
.testimonial__avatar{
  width:40px;height:40px;flex:none;border-radius:var(--radius-circle);
  background:var(--surface-glass);display:flex;align-items:center;justify-content:center;
  font:var(--type-caption);font-weight:var(--weight-semibold);color:var(--orange-400)}
.testimonial__name{font:var(--type-label);color:var(--text-on-inverse)}
.testimonial[data-accent="true"]{border-color:var(--action-primary)}