/* ============================================================
   3_contact.css — Contact page styles
   ============================================================ */


/* #region |||||||||| CONTACT INFO SIDEBAR ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||*| */

  .contact-layout { align-items: start; }

  .contact-info {
    display: flex;
    flex-direction: column;
    gap: var(--S-XL);
    position: sticky;
    top: calc(var(--L-NAV-H) + var(--S-LG));
  }

  .contact-info__item { display: flex; flex-direction: column; gap: var(--S-XS); }

  .contact-info__label {
    color: var(--C-RUB);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-weight: 600;
  }

  .contact-info__value {
    font-family: var(--F-HDG);
    font-size: var(--T-LG);
    color: var(--C-COL);
    text-decoration: none;
    transition: color var(--T-BASE);
  }

  a.contact-info__value:hover { color: var(--C-RUB); }

  .contact-social {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: var(--S-XS);
  }

  .contact-social__link {
    font-family: var(--F-BDY);
    font-size: var(--T-SM);
    color: var(--C-COL);
    text-decoration: none;
    opacity: 0.65;
    transition: opacity var(--T-BASE), color var(--T-BASE);
  }

  .contact-social__link:hover { opacity: 1; color: var(--C-RUB); }

  @media (max-width: 900px) { .contact-info { position: static; } }

/* #endregion */


/* #region |||||||||| FORM ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||*| */

  .contact-form { display: flex; flex-direction: column; gap: var(--S-LG); }

  .form-group { display: flex; flex-direction: column; gap: var(--S-XS); }

  .form-label {
    font-family: var(--F-BDY);
    font-size: var(--T-SM);
    font-weight: 500;
    color: var(--C-COL);
  }

  .form-label span { color: var(--C-RUB); }

  .form-input {
    font-family: var(--F-BDY);
    font-size: var(--T-MD);
    color: var(--C-COL);
    background: var(--C-WHT);
    border: 1.5px solid var(--C-BON-D);
    border-radius: var(--R-MD);
    padding: var(--S-SM) var(--S-MD);
    width: 100%;
    transition: border-color var(--T-BASE), box-shadow var(--T-FAST);
    appearance: none;
  }

  .form-input:focus { border-color: var(--C-RUB); box-shadow: 0 0 0 3px rgba(187, 32, 38, 0.12); }

  .form-input.has-error { border-color: var(--C-RUB); }

  .form-textarea { resize: vertical; min-height: 140px; }

  .form-select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7' viewBox='0 0 12 7'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23171718' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right var(--S-MD) center; padding-right: var(--S-2XL); cursor: pointer; }

  /* Error display */
  .form-error {
    font-family: var(--F-BDY);
    font-size: var(--T-SM);
    color: var(--C-RUB);
    background: rgba(187, 32, 38, 0.06);
    border: 1px solid rgba(187, 32, 38, 0.2);
    border-radius: var(--R-MD);
    padding: var(--S-SM) var(--S-MD);
  }

/* #endregion */


/* #region |||||||||| SUCCESS STATE ||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||*| */

  .form-success {
    background: var(--C-WHT);
    border-radius: var(--R-LG);
    padding: var(--S-2XL) var(--S-XL);
    text-align: center;
    box-shadow: var(--SH-CRD);
  }

  .form-success__title {
    font-family: var(--F-HDG);
    font-size: var(--T-2XL);
    color: var(--C-RUB);
    margin-bottom: var(--S-MD);
  }

/* #endregion */