/* =====================================================================
   contact.css — общий каркас страницы контактов ({lang}/contact/).
   Форма из assets/partials/contact.php; поведение отправки — в assets/js/site.js.
   Раньше правила лежали инлайн в <style> ru/contact/index.php.
   ===================================================================== */
  :root{
    --teal:#1D7A9E;
    --navy:#0C3A52;
    --green:#1D9E75;
    --amber:#EF9F27;
    --bg-soft:#F0F6F5;
    --bg-softer:#F7FAFA;
    --white:#FFFFFF;
    --text-muted:#5F7280;
    --text-faint:#8A9AA5;
    --border:#E8EEF0;
    --pink:#D4537E;
    --shadow-soft:0 18px 48px rgba(12,58,82,.12);
    --shadow-card:0 12px 28px rgba(12,58,82,.10);
  }

  *{box-sizing:border-box; margin:0; padding:0;}
  html{scroll-behavior:smooth;}

  /* Cross-document view transition pair with {lang}/index.php (both pages must opt in). */
  @view-transition{ navigation: auto; }
  @media (prefers-reduced-motion: reduce){
    @view-transition{ navigation: none; }
  }
  body{
    font-family:'Inter', sans-serif;
    color:var(--navy);
    background:var(--white);
    line-height:1.5;
  }
  h1,h2,h3, .display{
    font-family:'Nunito', sans-serif;
    font-weight:800;
    color:var(--navy);
    letter-spacing:-0.01em;
  }
  a{color:inherit; text-decoration:none;}
  button{font-family:inherit; cursor:pointer; border:none; background:none;}
  img{max-width:100%; display:block;}
  select, input, textarea{font-family:inherit;}
  :focus-visible{ outline:3px solid var(--teal); outline-offset:2px; }

  .container{ max-width:1160px; margin:0 auto; padding:0 24px; }
  @media (min-width:901px){ .container{ padding:0 48px; } }

  /* ---------- Contact hero ---------- */
  .contact-hero{
    background:linear-gradient(180deg, #F5FBFA 0%, #ECF6F4 58%, #E0EEEA 100%);
    padding:30px 0;
    text-align:center;
  }
  .contact-hero h1{
    font-size:clamp(26px, 3.6vw, 34px);
    line-height:1.14;
    margin:0 auto 10px;
    max-width:560px;
  }
  .contact-hero .subhead{
    font-size:15.5px; color:var(--text-muted);
    max-width:480px; margin:0 auto;
  }

  /* ---------- Entrance animation ---------- */
  @keyframes fadeInUp{
    from{ opacity:0; transform:translateY(18px); }
    to{ opacity:1; transform:translateY(0); }
  }
  .contact-hero h1, .contact-hero .subhead, .form-card, .human-note{
    animation:fadeInUp .6s cubic-bezier(.22,.61,.36,1) both;
  }
  .contact-hero .subhead{ animation-delay:.08s; }
  .form-card{ animation-delay:.16s; }
  .human-note{ animation-delay:.28s; }
  @media (prefers-reduced-motion: reduce){
    .contact-hero h1, .contact-hero .subhead, .form-card, .human-note{
      animation:none;
    }
  }

  /* ---------- Form section ---------- */
  .contact-form-section{ background:var(--white); padding:56px 0 76px; }
  .form-card{
    max-width:560px; margin:0 auto;
    padding:38px;
    border-radius:22px;
    background:linear-gradient(135deg, #F8FFFC 0%, #F1F8F7 100%);
    border:1px solid rgba(12,58,82,.08);
    box-shadow:var(--shadow-soft);
  }
  /* Пояснительный абзац над полями (форма «покупка в РФ», contact_rs.php) */
  .rs-note{
    margin:0 0 22px;
    font-size:14px; line-height:1.55; color:var(--text-muted);
  }
  .field{ margin-bottom:18px; }
  .field label{
    display:block; font-weight:700; font-size:13.5px; color:var(--navy);
    margin-bottom:7px;
  }
  .field input, .field textarea{
    width:100%; border:1px solid var(--border); border-radius:12px;
    padding:13px 15px; font-size:15px; color:var(--navy);
    background:#fff;
    transition:border-color .15s ease, box-shadow .15s ease;
  }
  .field input:focus, .field textarea:focus{
    border-color:var(--teal); box-shadow:0 0 0 4px rgba(29,122,158,.12); outline:none;
  }
  .field textarea{ min-height:130px; resize:vertical; }
  .btn-primary{
    display:inline-flex; align-items:center; justify-content:center; gap:10px;
    width:100%;
    background:linear-gradient(180deg, #2188AF 0%, var(--teal) 100%);
    color:#fff; font-weight:800; font-size:16px;
    padding:16px 31px; border-radius:16px;
    box-shadow:0 16px 32px rgba(29,122,158,.32), 0 4px 0 rgba(12,58,82,.07);
    transition:transform .15s ease, box-shadow .15s ease;
  }
  .btn-primary:hover{ transform:translateY(-2px); box-shadow:0 20px 38px rgba(29,122,158,.38), 0 4px 0 rgba(12,58,82,.06); }
  .btn-primary svg{ width:19px; height:19px; flex:0 0 auto; }
  .contact-note{
    min-height:20px;
    margin-top:14px;
    font-size:13.5px;
    font-weight:700;
    color:var(--text-muted);
  }
  .contact-note.is-success{ color:#1e8a4a; }
  .contact-note.is-error{ color:#c2272d; }
  .contact-honeypot{
    position:absolute !important;
    left:-9999px !important;
    width:1px !important;
    height:1px !important;
    opacity:0 !important;
    pointer-events:none !important;
  }
  .form-card.is-sending .btn-primary{
    opacity:.72;
    pointer-events:none;
    transform:none;
  }

  /* Карточка-подтверждение: заменяет форму после успешной отправки (site.js). */
  .contact-success{ text-align:left; }
  .contact-success:focus{ outline:none; }
  .contact-success-head{ display:flex; align-items:center; gap:13px; margin-bottom:14px; }
  .contact-success-icon{
    width:44px; height:44px; flex:0 0 auto; border-radius:50%;
    display:inline-flex; align-items:center; justify-content:center;
    background:rgba(30,138,74,.13); color:#1e8a4a;
  }
  .contact-success-icon svg{ width:24px; height:24px; }
  .contact-success-title{ margin:0; font-size:20px; font-weight:800; color:var(--navy); }
  .contact-success-note{
    margin:0 0 20px; font-size:14.5px; line-height:1.55; color:var(--text-muted);
  }
  .contact-success-summary{ margin:0; display:grid; gap:12px; }
  .contact-success-row{
    display:grid; grid-template-columns:120px 1fr; gap:10px;
    padding:12px 14px; border:1px solid var(--border); border-radius:12px; background:#fff;
  }
  .contact-success-row dt{ font-weight:700; font-size:13px; color:var(--navy); }
  .contact-success-row dd{ margin:0; font-size:14.5px; color:var(--navy); overflow-wrap:anywhere; }
  .contact-success-row.is-message dd{ white-space:pre-wrap; }
  @media (max-width:520px){
    .contact-success-row{ grid-template-columns:1fr; gap:3px; }
  }

  .human-note{
    display:flex; align-items:center; gap:14px;
    max-width:560px; margin:26px auto 0;
    padding:16px 20px;
    border-radius:16px;
    background:var(--bg-softer);
    border:1px solid var(--border);
  }
  .human-avatar{
    width:44px; height:44px; border-radius:50%; flex:0 0 auto;
    display:flex; align-items:center; justify-content:center;
    background:var(--teal); color:#fff;
  }
  .human-avatar svg{ width:20px; height:20px; }
  .human-note p{ font-size:13.5px; color:var(--text-muted); line-height:1.5; }
  .human-note a{ color:var(--teal); font-weight:700; }
  .human-note a:hover{ text-decoration:underline; }

  @media (max-width:600px){
    .form-card{ padding:26px 20px; border-radius:18px; }
  }