/* path: src/core/static/ui/css/pages/contact_page.css */

/* =============================================================================
   Contact Page
   ============================================================================= */

.ContactPage{
  padding:0 0 56px;
}

.ContactPage__section + .ContactPage__section{
  margin-top:24px;
}

.ContactPage__section:first-child{
  margin-top:var(--space-4);
}

.ContactPage__head{
  margin-bottom:14px;
}

.ContactPage__head--form{
  margin-bottom:var(--space-5);
}

.PageTitle{
  padding-bottom:0;
}

.ContactPage__subtitle{
  max-width:46ch;
}

/* =============================================================================
   Contact methods
   ============================================================================= */

.ContactChips{
  display:flex;
  flex-wrap:wrap;
  gap:var(--space-2);
}

.ContactChip{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:42px;
  padding:0 var(--space-3);
  border:1px solid var(--divider-2);
  border-radius:var(--r-pill);
  background:transparent;
  color:var(--text);
  font:inherit;
  font-size:1rem;
  line-height:1;
  text-decoration:none;
  white-space:nowrap;
  transition:
    background .15s ease,
    border-color .15s ease,
    color .15s ease,
    transform .08s ease;
}

.ContactChip:hover{
  background:rgba(255,255,255,.03);
  border-color:var(--divider-3);
  color:var(--text);
}

.ContactChip:active{
  transform:translateY(1px);
}

.ContactChip--primary{
  background:var(--accent-soft);
  border-color:rgba(207,133,36,.34);
}

.ContactChip--primary:hover{
  background:rgba(207,133,36,.22);
  border-color:rgba(207,133,36,.46);
}

.ContactChip__label{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:0;
}

/* =============================================================================
   Meta
   ============================================================================= */

.ContactMeta{
  padding:18px;
}

.ContactMeta__row + .ContactMeta__row{
  margin-top:16px;
  padding-top:16px;
  border-top:1px solid var(--divider);
}

.ContactMeta__label{
  margin:0 0 6px;
  color:var(--text-3);
  font-size:.92rem;
  line-height:1.1;
}

.ContactMeta__value{
  color:var(--text);
  line-height:1.35;
  word-break:break-word;
}

/* =============================================================================
   Form
   ============================================================================= */

.ContactFormCard{
  padding:18px;
}

.ContactForm{
  width:100%;
}

.ContactForm__grid{
  display:grid;
  grid-template-columns:1fr;
  gap:12px;
}

.Field{
  min-width:0;
}

.Field__control{
  display:flex;
  align-items:center;
  min-height:var(--h-input);
  border:1px solid var(--divider-2);
  border-radius:var(--r-m);
  background:var(--surface-3);
  transition:border-color .15s ease, background .15s ease;
}

.Field__control:focus-within{
  border-color:rgba(207,133,36,.45);
}

.Field__control--textarea{
  align-items:stretch;
  min-height:120px;
}

.Field .Input{
  height:var(--h-input);
  padding:0 16px;
  border:0;
  background:transparent;
}

.Textarea{
  width:100%;
  min-height:120px;
  padding:14px 16px;
  border:0;
  background:transparent;
  color:var(--text);
  font:inherit;
  line-height:1.45;
  resize:vertical;
  outline:none;
}

.Textarea::placeholder{
  color:var(--text-3);
}

.ContactForm__actions{
  margin-top:18px;
}

.ContactForm__submit{
  width:100%;
}

.ContactForm__agree{
  margin-top:12px;
}

/* =============================================================================
   Contact form consent
   ============================================================================= */

.ContactForm__consent{
  position:relative;
  display:flex;
  align-items:flex-start;
  gap:10px;
  margin:0;
  min-width:0;
  cursor:pointer;
}

.ContactForm__checkbox{
  position:absolute;
  opacity:0;
  pointer-events:none;
}

.ContactForm__checkboxUi{
  position:relative;
  width:18px;
  height:18px;
  flex:0 0 18px;
  margin-top:1px;
  border:1px solid var(--divider-2);
  background:var(--surface-2);
  border-radius:5px;
  transition:
    border-color .18s ease,
    background .18s ease,
    box-shadow .18s ease;
}

.ContactForm__checkboxUi::after{
  content:"";
  position:absolute;
  left:5px;
  top:1px;
  width:5px;
  height:9px;
  border-right:2px solid #fff;
  border-bottom:2px solid #fff;
  transform:rotate(45deg) scale(.85);
  opacity:0;
  transition:
    opacity .16s ease,
    transform .16s ease;
}

.ContactForm__checkbox:checked + .ContactForm__checkboxUi{
  border-color:rgba(207,133,36,.42);
  background:rgba(207,133,36,.16);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.03);
}

.ContactForm__checkbox:checked + .ContactForm__checkboxUi::after{
  opacity:1;
  transform:rotate(45deg) scale(1);
}

.ContactForm__checkbox:focus-visible + .ContactForm__checkboxUi{
  border-color:var(--divider-3);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.03),
    0 0 0 3px rgba(207,133,36,.12);
}

.ContactForm__consent:hover .ContactForm__checkboxUi{
  border:1px solid var(--divider-3);
  background:var(--surface-2);
}

.ContactForm__checkbox:checked + .ContactForm__checkboxUi,
.ContactForm__consent:hover .ContactForm__checkbox:checked + .ContactForm__checkboxUi{
  border-color:rgba(207,133,36,.42);
  background:rgba(207,133,36,.16);
}

.ContactForm__consentText{
  min-width:0;
  color:var(--text-3);
  font-size:var(--small);
  line-height:1.35;
}

.ContactForm__consentLink{
  color:var(--text-2);
  text-decoration:underline;
  text-underline-offset:2px;
}

.ContactForm__consentLink:hover{
  color:var(--accent);
}

.ContactPage__section[aria-label="Реквизиты организации"] + .ContactPage__section{
  margin-top:var(--space-7);
}

/* =============================================================================
   Breakpoints
   ============================================================================= */

@media (min-width:700px){
  .ContactPage__section + .ContactPage__section{
    margin-top:28px;
  }

  .ContactForm__submit{
    width:auto;
    min-width:240px;
  }
}

@media (min-width:1024px){
  .ContactPage{
    padding-bottom:72px;
  }

  .ContactPage__section + .ContactPage__section{
    margin-top:32px;
  }

  .ContactPage__head{
    margin-bottom:22px;
  }

  .ContactPage__head--form{
    margin-bottom:var(--space-6);
  }

  .ContactPage__subtitle{
    max-width:72ch;
  }

  .ContactChips{
    gap:var(--space-2);
  }

  .ContactChip{
    min-height:44px;
    padding:0 var(--space-3);
  }

  .ContactMeta{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    column-gap:var(--space-5);
    row-gap:var(--space-4);
    padding:18px;
  }

  .ContactMeta__row{
    min-width:0;
  }

  .ContactMeta__row + .ContactMeta__row{
    margin-top:0;
    padding-top:0;
    border-top:0;
  }

  .ContactMeta__label{
    margin:0 0 8px;
  }

  .ContactFormCard{
    padding:18px;
  }

  .ContactForm__grid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
    column-gap:12px;
    row-gap:12px;
  }

  .Field--name{
    grid-column:1;
  }

  .Field--phone{
    grid-column:2;
  }

  .Field--message{
    grid-column:1 / -1;
  }

  .Field__control--textarea{
    min-height:148px;
  }

  .Textarea{
    min-height:148px;
  }

  .ContactForm__actions{
    margin-top:20px;
  }

  .ContactForm__agree{
    margin-top:12px;
  }

  .ContactForm__consent{
    align-items:center;
    gap:10px;
  }

  .ContactForm__checkboxUi{
    margin-top:0;
  }

  .ContactForm__consentText{
    display:block;
    min-width:0;
    font-size:.9rem;
    line-height:1.25;
  }

  .ContactPage__section[aria-label="Реквизиты организации"] + .ContactPage__section{
    margin-top:var(--space-8);
  }
}