/* /public/assets/css/pages/contact.css */
/* Contact page styles (scoped). Route: /contact (e.g. /ru/contact). */

.page--contact .main{ padding-top:0; }

/* ------------------------------------------------------------ */
/* HERO                                                         */
/* ------------------------------------------------------------ */

.page--contact .contact-hero{
  position:relative;
  overflow:hidden;
  padding:76px 0 62px;
  background:
    radial-gradient(820px 520px at 50% 14%, rgba(154,184,255,.10), transparent 62%),
    radial-gradient(1100px 760px at 50% 120%, rgba(0,0,0,.46), transparent 62%);
}
.page--contact .contact-hero::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background: radial-gradient(rgba(231,236,246,.10) 1px, transparent 1px);
  background-size:14px 14px;
  opacity:.28;
  -webkit-mask-image: radial-gradient(circle at 50% 28%, #000 0%, transparent 68%);
          mask-image: radial-gradient(circle at 50% 28%, #000 0%, transparent 68%);
}
.page--contact .contact-hero::after{
  content:"";
  position:absolute;
  inset:-2px;
  pointer-events:none;
  background:
    linear-gradient(180deg, rgba(7,10,18,.92) 0%, rgba(7,10,18,.00) 220px),
    radial-gradient(1200px 780px at 50% 44%, transparent 0%, rgba(0,0,0,.22) 56%, rgba(0,0,0,.55) 100%);
  opacity:.95;
  transform:translateZ(0);
  animation: contactBreath 10.5s var(--ease) infinite;
}
@keyframes contactBreath{
  0%,100%{ filter:saturate(1) brightness(1); transform:translateZ(0) scale(1); }
  50%{ filter:saturate(1.02) brightness(1.03); transform:translateZ(0) scale(1.012); }
}

.page--contact .contact-hero .container{ position:relative; z-index:2; }

.page--contact .contact-hero .hero__inner{
  max-width:860px;
  margin:0 auto;
  text-align:center;
}
.page--contact .contact-hero .lead{
  margin:0 auto;
  max-width:66ch;
  color:rgba(231,236,246,.82);
  line-height:1.62;
  text-wrap:balance;
}

/* ------------------------------------------------------------ */
/* SECTION / ONE-COLUMN LAYOUT                                   */
/* ------------------------------------------------------------ */

.page--contact .contact-section{ padding:52px 0; }

.page--contact .contact-grid{
  max-width: 760px;         /* one column */
  margin: 0 auto;
  display:block;            /* kill any grid */
}

/* Hide the right-side note panel (we keep PHP unchanged) */
.page--contact .contact-panel--note{ display:none; }

/* ------------------------------------------------------------ */
/* PANEL                                                         */
/* ------------------------------------------------------------ */

.page--contact .contact-panel{
  width:100%;
  border-radius:22px;
  background: var(--glass2);
  border:1px solid rgba(231,236,246,.12);
  box-shadow: var(--shadow1), var(--inset2);
  overflow:hidden;
  padding:18px;
}

.page--contact .contact-panel--ok{
  padding:20px;
}

/* ------------------------------------------------------------ */
/* ALERTS                                                        */
/* ------------------------------------------------------------ */

.page--contact .contact-alert{
  margin:12px 0 14px;
  padding:12px 12px;
  border-radius:14px;
  border:1px solid rgba(231,236,246,.12);
  background: rgba(231,236,246,.04);
  color: rgba(231,236,246,.82);
  font-size:14px;
  line-height:1.55;
}

.page--contact .contact-alert--err{
  border-color: rgba(255,120,120,.22);
  background: rgba(255,120,120,.08);
  color: rgba(255,200,200,.92);
}

/* ------------------------------------------------------------ */
/* FORM                                                          */
/* ------------------------------------------------------------ */

.page--contact .contact-form{ margin-top:10px; }

.page--contact .field{ margin-top:14px; }
.page--contact .field:first-child{ margin-top:0; }

.page--contact .label{
  display:block;
  font-size:13px;
  font-weight:900;
  letter-spacing:.02em;
  color: rgba(231,236,246,.78);
  margin:0 0 8px 0;
}

.page--contact .control{ position:relative; }

.page--contact .input,
.page--contact .select,
.page--contact .textarea{
  width:100%;
  border-radius:16px;
  border:1px solid rgba(231,236,246,.12);
  background: rgba(16,20,30,.58);
  color: rgba(231,236,246,.92);
  box-shadow: 0 10px 28px rgba(0,0,0,.30);
  outline:none;
}

.page--contact .input,
.page--contact .select{
  height:48px;
  padding:0 14px;
}

.page--contact .textarea{
  padding:12px 14px;
  resize:vertical;
  min-height: 160px;
  line-height:1.6;
}

.page--contact .input::placeholder,
.page--contact .textarea::placeholder{
  color: rgba(231,236,246,.44);
}

.page--contact .input:focus,
.page--contact .select:focus,
.page--contact .textarea:focus{
  border-color: rgba(60,207,208,.26);
  box-shadow:
    0 10px 28px rgba(0,0,0,.30),
    0 0 0 3px rgba(60,207,208,.10);
}

.page--contact .select{
  appearance:none;
  -webkit-appearance:none;
  padding-right:40px;
  background-image:
    linear-gradient(45deg, transparent 50%, rgba(231,236,246,.55) 50%),
    linear-gradient(135deg, rgba(231,236,246,.55) 50%, transparent 50%);
  background-position:
    calc(100% - 18px) 20px,
    calc(100% - 13px) 20px;
  background-size:5px 5px, 5px 5px;
  background-repeat:no-repeat;
}

/* file input – minimal, consistent */
.page--contact .file{
  width:100%;
  border-radius:16px;
  border:1px dashed rgba(231,236,246,.16);
  background: rgba(16,20,30,.46);
  color: rgba(231,236,246,.78);
  padding:12px 14px;
  box-shadow: 0 10px 28px rgba(0,0,0,.26);
}
.page--contact .file:focus{
  outline:none;
  border-color: rgba(60,207,208,.22);
  box-shadow:
    0 10px 28px rgba(0,0,0,.26),
    0 0 0 3px rgba(60,207,208,.10);
}

/* hints */
.page--contact .hint{
  margin-top:8px;
  font-size:13px;
  color: rgba(231,236,246,.62);
  line-height:1.55;
}
.page--contact .hint--err{
  color: rgba(255,190,190,.92);
}

/* actions */
.page--contact .contact-actions{
  margin-top:16px;
  display:flex;
  justify-content:flex-start;
  gap:10px;
}

/* ------------------------------------------------------------ */
/* HONEYPOT (hidden)                                             */
/* ------------------------------------------------------------ */

.page--contact .contact-hp{
  position:absolute !important;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

/* ------------------------------------------------------------ */
/* MOTION                                                        */
/* ------------------------------------------------------------ */

.page--contact .contact-hero .hero__inner,
.page--contact .contact-panel{
  opacity:0;
  transform: translateY(10px);
  animation: contactIn .72s var(--ease) forwards;
}
.page--contact .contact-panel{ animation-delay:.08s; }

@keyframes contactIn{ to{ opacity:1; transform: translateY(0); } }

@media (prefers-reduced-motion: reduce){
  .page--contact .contact-hero::after,
  .page--contact .contact-hero .hero__inner,
  .page--contact .contact-panel{
    animation:none !important;
    transform:none !important;
    opacity:1 !important;
  }
}

/* ------------------------------------------------------------ */
/* RESPONSIVE                                                    */
/* ------------------------------------------------------------ */

@media (max-width:980px){
  .page--contact .contact-hero{ padding:66px 0 54px; }
}

@media (max-width:560px){
  .page--contact .contact-panel{ padding:14px; }

  .page--contact .contact-actions{
    flex-wrap:wrap;
  }
  .page--contact .contact-actions .btn{
    width:100%;
  }

  .page--contact .input,
  .page--contact .select{ height:46px; }

  .page--contact .textarea{ min-height:150px; }
}