/* Contact page — layout + form extensions (use with login-page.css) */
.contact-hero.login-hero{
  padding-bottom:1.35rem;
}

.contact-layout{
  display:grid;
  grid-template-columns:1fr;
  gap:1.75rem;
  width:100%;
  max-width:min(56rem,100%);
  align-self:center;
  margin:0;
}
@media (min-width:900px){
  .contact-layout{
    grid-template-columns:minmax(260px,1fr) minmax(300px,1.1fr);
    gap:2rem;
    align-items:start;
  }
}

.contact-aside__title{
  margin:0 0 1rem;
  font-size:clamp(1.15rem,2.2vw,1.35rem);
  font-weight:800;
  line-height:1.25;
  color:#fff;
  letter-spacing:-.02em;
}

.contact-info{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:.85rem;
}

.contact-info__card{
  margin:0;
  padding:1.1rem 1.15rem 1.15rem;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.1);
  background:
    linear-gradient(165deg,rgba(38,38,38,.72) 0%,rgba(22,22,22,.55) 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 8px 24px rgba(0,0,0,.2);
}

.contact-info__icon{
  display:grid;
  place-items:center;
  width:2.4rem;
  height:2.4rem;
  margin-bottom:.65rem;
  border-radius:10px;
  color:#1a1200;
  background:linear-gradient(145deg,#ffd54a 0%,var(--login-yellow) 50%,#d9a000 100%);
  box-shadow:0 4px 12px rgba(0,0,0,.25);
}
.contact-info__icon svg{
  width:1.25rem;
  height:1.25rem;
  display:block;
}

.contact-info__heading{
  margin:0 0 .4rem;
  font-size:1rem;
  font-weight:800;
  color:#f0f0f0;
  letter-spacing:.01em;
}

.contact-info__text{
  margin:0;
  font-size:.93rem;
  line-height:1.6;
  color:#c4c4c4;
}

.contact-info__link{
  color:#ffe082;
  font-weight:700;
  text-decoration:none;
  word-break:break-word;
}
.contact-info__link:hover{
  text-decoration:underline;
}

.contact-info__hint{
  margin:.5rem 0 0;
  font-size:.82rem;
  line-height:1.5;
  color:#8a8a8a;
}

.contact-panel{
  width:100%;
  min-width:0;
}

.contact-form.login-form{
  max-width:100%;
  width:100%;
  margin-left:0;
  margin-right:0;
  padding:1.85rem 1.5rem 1.9rem;
}

.contact-form__label{
  display:block;
  margin-bottom:.4rem;
  font-size:.82rem;
  font-weight:700;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:#a8a8a8;
}

.contact-form .login-form__field{
  margin-bottom:1rem;
}

.contact-form__select,
.contact-form__textarea{
  width:100%;
  padding:1rem 1.1rem;
  font-size:1.02rem;
  line-height:1.45;
  font-family:inherit;
  color:#f5f5f5;
  background:rgba(20,20,20,.65);
  border:1px solid rgba(255,255,255,.12);
  border-radius:12px;
  outline:none;
  box-shadow:0 2px 8px rgba(0,0,0,.25);
  transition:border-color .18s ease,box-shadow .18s ease,background .18s ease;
}
.contact-form__select{
  cursor:pointer;
  appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%239a9a9a' d='M6 8L0 0h12z'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 1rem center;
  padding-right:2.5rem;
}
.contact-form__select:hover,
.contact-form__textarea:hover{
  border-color:rgba(255,255,255,.18);
}
.contact-form__select:focus,
.contact-form__textarea:focus{
  border-color:rgba(255,193,7,.55);
  background:rgba(28,28,28,.85);
  box-shadow:0 0 0 3px rgba(255,193,7,.14),0 4px 16px rgba(0,0,0,.35);
}

.contact-form__textarea{
  min-height:9rem;
  resize:vertical;
}

.contact-form__check{
  display:flex;
  gap:.65rem;
  align-items:flex-start;
  margin:0 0 1.15rem;
  font-size:.84rem;
  line-height:1.55;
  color:#9a9a9a;
  cursor:pointer;
}
.contact-form__check input{
  margin-top:.2rem;
  flex-shrink:0;
  width:1.05rem;
  height:1.05rem;
  accent-color:var(--login-yellow);
}
.contact-form__check a{
  color:#ffe082;
}
.contact-form__check a:hover{
  text-decoration:underline;
}

.contact-form__submit.login-form__submit{
  text-transform:none;
  letter-spacing:.04em;
  font-size:1.02rem;
}

.contact-form__note{
  margin:1rem 0 0;
  font-size:.8rem;
  line-height:1.55;
  color:#6a6a6a;
  text-align:center;
}

@media (max-width:640px){
  .contact-aside__title{
    text-align:center;
  }
  .contact-info__card{
    padding:1rem 1rem 1.05rem;
  }
  .contact-form.login-form{
    padding:1.5rem 1.15rem 1.55rem;
  }
}