/* ==========================================================================
   Tori Ramen — форма обратной связи
   /local/templates/{tpl}/css/feedback.css
   ========================================================================== */

:root{
  --fb-red:#e31e24;
  --fb-red-dark:#c1151b;
  --fb-ink:#23262b;
  --fb-gray:#7a8290;
  --fb-line:#dde1e6;
  --fb-bg:#f5f6f8;
  --fb-ok:#1f9d55;
  --fb-radius:4px;
  --fb-font:'Golos Text','Inter','Helvetica Neue',Arial,sans-serif;
  --fb-ease:cubic-bezier(.4,0,.2,1);
}

/* ---------- Секция ---------- */
.fb-section{
  padding:72px 0 96px;
  background:var(--fb-bg);
  color:var(--fb-ink);
  font-family:var(--fb-font);
  font-size:16px;
  line-height:1.5;
}
.fb-section *,
.fb-section *::before,
.fb-section *::after{box-sizing:border-box}

.fb-container{max-width:1240px;margin:0 auto;padding:0 20px}

.fb-eyebrow{
  margin:0 0 14px;
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--fb-gray);
}
.fb-title{
  margin:0 0 16px;
  font-size:38px;
  line-height:1.2;
  font-weight:500;
  letter-spacing:-.01em;
}
.fb-lead{
  margin:0 0 44px;
  max-width:620px;
  color:var(--fb-gray);
}

.fb-grid{
  display:grid;
  grid-template-columns:minmax(280px,380px) 1fr;
  gap:30px;
  align-items:start;
}

/* ---------- Фото ---------- */
.fb-media{
  position:relative;
  overflow:hidden;
  border-radius:var(--fb-radius);
  background:var(--fb-ink);
  background-image:repeating-radial-gradient(circle at 112% -12%,
    rgba(255,255,255,.055) 0 1px, transparent 1px 26px);
  aspect-ratio:760/900;
}
.fb-media::before{
  content:"";
  position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--fb-red);z-index:2;
}
.fb-media img{display:block;width:100%;height:100%;object-fit:cover}

/* ---------- Карточка формы ---------- */
.fb-form-wrap{
  background:#fff;
  border-radius:var(--fb-radius);
  box-shadow:0 2px 20px rgba(35,38,43,.06);
  padding:40px;
}

.fb-row{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.fb-field{margin-bottom:22px}
.fb-row .fb-field{margin-bottom:0}
.fb-row + .fb-field{margin-top:22px}

.fb-label{
  display:block;
  margin-bottom:8px;
  font-size:11px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--fb-gray);
}
.fb-label .req{color:var(--fb-red)}

.fb-input,
.fb-textarea{
  width:100%;
  font-family:inherit;
  font-size:16px;
  color:var(--fb-ink);
  background:#fff;
  border:1px solid var(--fb-line);
  border-radius:var(--fb-radius);
  padding:15px 16px;
  transition:border-color .2s var(--fb-ease), box-shadow .2s var(--fb-ease);
}
.fb-input{height:52px}
.fb-textarea{min-height:140px;resize:vertical;line-height:1.55}
.fb-input::placeholder,
.fb-textarea::placeholder{color:#aab0b9}
.fb-input:hover,
.fb-textarea:hover{border-color:#c3c9d1}
.fb-input:focus,
.fb-textarea:focus{
  outline:none;
  border-color:var(--fb-red);
  box-shadow:0 0 0 3px rgba(227,30,36,.12);
}

.fb-field.is-error .fb-input,
.fb-field.is-error .fb-textarea{border-color:var(--fb-red);background:#fffafa}
.fb-field.is-valid .fb-input,
.fb-field.is-valid .fb-textarea{border-color:#c7dccb}

.fb-error{
  display:none;
  margin-top:7px;
  font-size:13px;
  line-height:1.35;
  color:var(--fb-red);
}
.fb-field.is-error > .fb-error,
.fb-check.is-error .fb-error{display:block}

.fb-counter{margin-top:7px;font-size:12px;color:var(--fb-gray);text-align:right}
.fb-counter.is-limit{color:var(--fb-red)}

/* ---------- Согласия ---------- */
.fb-consents{
  margin:30px 0 26px;
  padding-top:26px;
  border-top:1px solid var(--fb-line);
}
.fb-check{
  position:relative;
  display:block;
  padding-left:32px;
  margin-bottom:16px;
  font-size:14px;
  line-height:1.45;
  color:#4d545e;
  cursor:pointer;
}
.fb-check:last-child{margin-bottom:0}
.fb-check input{position:absolute;left:0;top:1px;width:20px;height:20px;margin:0;opacity:0;cursor:pointer}
.fb-check .box{
  position:absolute;left:0;top:1px;
  width:20px;height:20px;
  border:1px solid var(--fb-line);
  border-radius:3px;
  background:#fff;
  transition:border-color .15s var(--fb-ease), background-color .15s var(--fb-ease);
}
.fb-check .box::after{
  content:"";
  position:absolute;left:6px;top:2px;
  width:5px;height:10px;
  border:solid #fff;border-width:0 2px 2px 0;
  transform:rotate(45deg) scale(.6);
  opacity:0;
  transition:opacity .15s var(--fb-ease), transform .15s var(--fb-ease);
}
.fb-check:hover .box{border-color:#b9bfc7}
.fb-check input:checked ~ .box{background:var(--fb-red);border-color:var(--fb-red)}
.fb-check input:checked ~ .box::after{opacity:1;transform:rotate(45deg) scale(1)}
.fb-check input:focus-visible ~ .box{outline:2px solid var(--fb-red);outline-offset:2px}
.fb-check.is-error .box{border-color:var(--fb-red);background:#fffafa}
.fb-check a{color:var(--fb-red)}

/* ---------- Капча ---------- */
.fb-captcha{
  display:flex;
  align-items:flex-start;
  gap:16px;
  margin-bottom:26px;
  flex-wrap:wrap;
}
.fb-captcha img{border:1px solid var(--fb-line);border-radius:var(--fb-radius)}
.fb-captcha .fb-field{margin-bottom:0;flex:1;min-width:180px}

/* ---------- Кнопка ---------- */
.fb-actions{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.fb-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:54px;
  padding:0 40px;
  font-family:inherit;
  font-size:13px;
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#fff;
  background:var(--fb-red);
  border:0;
  border-radius:var(--fb-radius);
  cursor:pointer;
  transition:background-color .2s var(--fb-ease), transform .15s var(--fb-ease);
}
.fb-btn:hover{background:var(--fb-red-dark)}
.fb-btn:active{transform:translateY(1px)}
.fb-btn[disabled]{opacity:.6;cursor:not-allowed;transform:none}
.fb-note{font-size:13px;color:var(--fb-gray);max-width:320px}

/* ---------- Сообщения ---------- */
.fb-formerror{
  display:none;
  margin-bottom:22px;
  padding:14px 16px;
  border-left:3px solid var(--fb-red);
  background:#fff5f5;
  font-size:14px;
}
.fb-formerror.is-visible{display:block}

.fb-success{display:none;text-align:center;padding:56px 20px}
.fb-success.is-visible{display:block}
.fb-success-icon{
  width:64px;height:64px;
  margin:0 auto 22px;
  border-radius:50%;
  background:rgba(31,157,85,.1);
  display:flex;align-items:center;justify-content:center;
}
.fb-success-icon svg{width:26px;height:26px;fill:none;stroke:var(--fb-ok);stroke-width:2.5}
.fb-success h2{margin:0 0 10px;font-size:24px;font-weight:500}
.fb-success p{margin:0 auto;max-width:420px;color:var(--fb-gray)}

/* ---------- Адаптив ---------- */
@media (max-width:1023px){
  .fb-grid{grid-template-columns:1fr}
  .fb-media{order:2;aspect-ratio:16/7}
  .fb-form-wrap{order:1}
  .fb-title{font-size:32px}
}
@media (max-width:767px){
  .fb-section{padding:48px 0 64px}
  .fb-title{font-size:26px}
  .fb-lead{margin-bottom:32px}
  .fb-form-wrap{padding:26px 20px}
  .fb-media{aspect-ratio:4/3}
  .fb-row{grid-template-columns:1fr;gap:0}
  .fb-row .fb-field{margin-bottom:22px}
  .fb-row .fb-field:last-child{margin-bottom:0}
  .fb-input,.fb-textarea{font-size:16px}
  .fb-btn{width:100%;padding:0 20px}
  .fb-note{max-width:none}
}
@media (max-width:400px){
  .fb-container{padding:0 16px}
  .fb-form-wrap{padding:22px 16px}
}
@media (prefers-reduced-motion:reduce){
  .fb-section *{transition-duration:.01ms !important;animation-duration:.01ms !important}
}