/* Contact + Support: DS Field, captcha, form card, states. */

/* ---------- DS Field ---------- */
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 20px; }
.field { display: flex; flex-direction: column; gap: 6px; width: 100%; min-width: 0; }
.field icon{display: none}
.field--full, .form-actions, .form-alert { grid-column: 1 / -1; }
.field--head{ font-weight: 800; background-color: var(--border); border-radius: var(--radius-md); padding: 10px; gap: 0;}
.field--head span{ font-weight: normal;font-size: 14px; line-height: 1em;}
.field label { display: flex; align-items: baseline; gap: 8px; font-weight: 600; font-size: 14px; color: var(--text-strong); }
.field label .required{color: rgb(159, 17, 17);}
.field__opt { font-weight: 400; font-size: 13px; color: var(--text-muted); }
.field input, .field select, .field textarea {
  width: 100%; background: var(--input-bg); border: 1px solid var(--border-input); border-radius: var(--radius-sm);
  font-family: var(--font-body); font-size: 16px; color: var(--text-strong); outline: none; box-shadow: none;
  transition: border-color var(--dur-fast) var(--ease);
}
.field input, .field select { height: 44px; padding: 0 12px; }
.field textarea { min-height: 132px; padding: 10px 12px; resize: vertical; line-height: 1.5; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--text-muted); }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--focus); box-shadow: var(--focus-ring); border-radius: var(--radius-sm); }
.field.has-error input, .field.has-error textarea { border-color: var(--text-error); }
.field input:disabled, .field select:disabled, .field textarea:disabled { background: var(--surface-subtle); color: var(--text-muted); border-color: var(--border); }
.field__select { position: relative; }
.field__select select { appearance: none; padding-right: 40px; cursor: pointer; }
.field__select .icon { position: absolute; right: 12px; top: 14px; pointer-events: none; color: var(--text-muted); }
.field__err { display: flex; align-items: center; gap: 6px; font-size: 14px; line-height: 1.4; color: var(--text-error); }
.field__help { font-size: 14px; line-height: 1.4; color: var(--text-muted); }
.captcha { display: flex; gap: 12px; align-items: stretch; }
.captcha__code {
  overflow: hidden;
  flex: none; width: 132px; height: 44px; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-sm);
  border: 1px solid var(--border-strong); background-color: var(--surface-inset);
  background: #EEF5FB;
  /* background-image: repeating-linear-gradient(-30deg, var(--grid-line) 0 2px, transparent 2px 7px); */
  font-family: var(--font-mono); font-weight: 500; font-size: 20px; letter-spacing: 0.18em; color: var(--text-strong); font-style: italic;
}
.captcha input { flex: 1; min-width: 0; font-family: var(--font-mono); font-weight: 500; letter-spacing: 0.12em; }
.field--captcha { gap: 6px; }
.captcha__new {
  align-self: flex-start; display: flex; align-items: center; gap: 6px; min-height: 32px; margin-top: 2px; padding: 0; border: 0; background: transparent; cursor: pointer;
  font-weight: 600; font-size: 14px; color: var(--text-link);
}
.captcha__new:hover { color: var(--text-link-hover); }
.form-alert { display: flex; gap: 10px; align-items: flex-start; padding: 14px 16px; border: 1px solid var(--text-error); border-radius: var(--radius-md); font-size: 15px; line-height: 1.5; color: var(--text-error); }
.form-alert .icon { --icon-size: 20px; margin-top: 1px; }
.form-alert a { font-weight: 600; color: var(--text-error); text-decoration: underline; }
.form-actions { display: flex; padding-top: 4px; }
.form-submit { border: 0; }
.form-submit.is-sending { opacity: 0.7; cursor: progress; pointer-events: none; }
.form-success { display: flex; gap: 12px; align-items: flex-start; padding: 20px; border-radius: var(--radius-md); background: var(--success-bg); border: 1px solid var(--success-border); color: var(--text-success); font-size: 17px; line-height: 1.5; font-weight: 600; }
.form-success .icon { --icon-size: 22px; margin-top: 1px; }
.form-card { min-width: 0; display: flex; flex-direction: column; gap: 24px; padding: 40px; background: var(--surface-card); border: 1px solid var(--border); border-radius: var(--radius-md); }
.form-card__h { outline: none; font-family: var(--font-display); font-weight: 600; font-size: 30px; line-height: 1.15; letter-spacing: var(--tracking-heading); color: var(--text-strong); }
[tabindex="-1"]:focus { outline: none; box-shadow: none; }

.field.field-password{
  position: relative;
}

.field.field-password input{
  padding-right: 44px;
}
.field.field-password icon{
  display: block;
  width: 24px;
  height: 24px;
  position: absolute;
  right: 10px;
  top: 38px;
  z-index: 100;
  cursor: pointer;
  background-position: center center;
  background-size: contain;
  background-repeat: no-repeat;
}
.field.field-password icon.on{
    background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPHN2ZyB2aWV3Qm94PSIwIC05NjAgOTYwIDk2MCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICA8cGF0aCBkPSJNNDgwIC0zMjlRNTQzIC0zMjkgNTg3IC0zNzNRNjMxIC00MTcgNjMxIC00ODBRNjMxIC01NDMgNTg3IC01ODdRNTQzIC02MzEgNDgwIC02MzFRNDE3IC02MzEgMzczIC01ODdRMzI5IC01NDMgMzI5IC00ODBRMzI5IC00MTcgMzczIC0zNzNRNDE3IC0zMjkgNDgwIC0zMjlaTTQ4MCAtMzg0UTQ0MCAtMzg0IDQxMiAtNDEyUTM4NCAtNDQwIDM4NCAtNDgwUTM4NCAtNTIwIDQxMiAtNTQ4UTQ0MCAtNTc2IDQ4MCAtNTc2UTUyMCAtNTc2IDU0OCAtNTQ4UTU3NiAtNTIwIDU3NiAtNDgwUTU3NiAtNDQwIDU0OCAtNDEyUTUyMCAtMzg0IDQ4MCAtMzg0Wk03MCAtNDgwUTEyNCAtNjAyIDIzNC41IC02NzVRMzQ1IC03NDggNDgwIC03NDhRNjE1IC03NDggNzI1LjUgLTY3NVE4MzYgLTYwMiA4OTAgLTQ4MFE4MzYgLTM1OCA3MjUuNSAtMjg1UTYxNSAtMjEyIDQ4MCAtMjEyUTM0NSAtMjEyIDIzNC41IC0yODVRMTI0IC0zNTggNzAgLTQ4MFpNODMzIC00ODBRNzgyIC01ODAgNjg3IC02MzhRNTkyIC02OTYgNDgwIC02OTZRMzY4IC02OTYgMjczIC02MzhRMTc4IC01ODAgMTI3IC00ODBRMTc4IC0zODAgMjczIC0zMjJRMzY4IC0yNjQgNDgwIC0yNjRRNTkyIC0yNjQgNjg3IC0zMjJRNzgyIC0zODAgODMzIC00ODBaIiBzdHlsZT0iZmlsbDogcmdiKDc0LCA4OSwgMTEwKTsiLz4KPC9zdmc+") ;
}
.field.field-password icon.off{
    background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPHN2ZyB2aWV3Qm94PSIwIC05NjAgOTYwIDk2MCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICA8cGF0aCBkPSJNNjI0IC00MzggNTc1IC00ODdRNTc5IC01MjggNTUwLjUgLTU1NFE1MjIgLTU4MCA0ODcgLTU3Nkw0MzggLTYyNVE0NDguMyAtNjI4IDQ1OC43IC02MjkuNVE0NjkgLTYzMSA0ODAgLTYzMVE1NDMgLTYzMSA1ODcgLTU4N1E2MzEgLTU0MyA2MzEgLTQ4MFE2MzEgLTQ2OSA2MjkuNSAtNDU4UTYyOCAtNDQ3IDYyNCAtNDM4Wk03NTYgLTMwNyA3MTggLTM0NFE3NTQgLTM3MiA3ODMuNSAtNDA1LjVRODEzIC00MzkgODMzIC00ODBRNzg0IC01ODEgNjg4LjUgLTYzOC41UTU5MyAtNjk2IDQ4MCAtNjk2UTQ1NC4xIC02OTYgNDI5IC02OTNRNDA0IC02OTAgMzgwIC02ODNMMzM3IC03MjZRMzcyIC03MzkgNDA4IC03NDMuNVE0NDQgLTc0OCA0ODAgLTc0OFE2MTMgLTc0OCA3MjYuNSAtNjc2LjVRODQwIC02MDUgODkwIC00ODBRODY5IC00MjggODM1IC0zODUuNVE4MDEgLTM0MyA3NTYgLTMwN1pNNzY2IC0xMTkgNjQzIC0yNDRRNjA4LjggLTIyOS4yIDU2Ny40IC0yMjAuNlE1MjYgLTIxMiA0ODAgLTIxMlEzNDcgLTIxMiAyMzQgLTI4My41UTEyMSAtMzU1IDcwIC00ODBROTMgLTUzNyAxMzIgLTU4NC41UTE3MSAtNjMyIDIyMCAtNjY3TDExOSAtNzY3TDE1NiAtODA1TDgwNCAtMTU2Wk0yNTcgLTYyOVEyMTguNyAtNjAyLjIgMTgzLjMgLTU2NC4xUTE0OCAtNTI2IDEyNyAtNDgwUTE3NiAtMzc5IDI3MS41IC0zMjEuNVEzNjcgLTI2NCA0ODAgLTI2NFE1MTMgLTI2NCA1NDYgLTI2OS41UTU3OSAtMjc1IDYwMyAtMjgzTDU0NCAtMzQyUTUyOS43IC0zMzYuMiA1MTIuOSAtMzMyLjZRNDk2IC0zMjkgNDgwIC0zMjlRNDE3IC0zMjkgMzczIC0zNzNRMzI5IC00MTcgMzI5IC00ODBRMzI5IC00OTUuNCAzMzMuNSAtNTEyLjdRMzM4IC01MzAgMzQyIC01NDRaIiBzdHlsZT0iZmlsbDogcmdiKDc0LCA4OSwgMTEwKTsiLz4KPC9zdmc+") ;
}

/* ---------- Contact ---------- */
.contact-hero .page-hero__call { display: none; }
.contact-main { display: grid; grid-template-columns: minmax(0,7fr) minmax(0,5fr); gap: 64px; align-items: start; padding-top: 80px; padding-bottom: 96px; }
.contact-about { display: flex; align-items: center; gap: 8px; margin-top: -12px; font-size: 15px; line-height: 1.4; color: var(--text-body); }
.contact-about .icon { --icon-size: 18px; color: var(--icon); }
.contact-about strong { font-weight: 600; color: var(--text-strong); }
.contact-aside { display: flex; flex-direction: column; gap: 32px; padding-top: 40px; }
.contact-call { display: flex; flex-direction: column; gap: 12px; }
.contact-aside__h { font-family: var(--font-display); font-weight: 600; font-size: 22px; line-height: 1.25; letter-spacing: var(--tracking-heading); color: var(--text-strong); }
.contact-aside__h--sm { font-size: 18px; line-height: 1.3; }
.contact-call__phone { align-self: flex-start; font-family: var(--font-mono); font-weight: 500; font-size: 36px; line-height: 1.1; letter-spacing: 0.01em; color: var(--text-strong); border-radius: var(--radius-sm); }
.contact-call__phone:hover { color: var(--text-link); }
.contact-call__hours { display: flex; flex-direction: column; gap: 2px; font-size: 15px; line-height: 1.5; color: var(--text-body); }
.contact-aside__block { display: flex; flex-direction: column; gap: 10px; padding-top: 24px; border-top: 1px solid var(--border-strong); align-items: flex-start; }
.contact-aside__block--addr { gap: 20px; align-items: stretch; }
.contact-addr { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 24px; }
.contact-addr > div { display: flex; flex-direction: column; gap: 6px; }
.contact-addr p { font-size: 15px; line-height: 1.55; color: var(--text-strong); }
.contact-addr strong { font-weight: 600; }
/* Contact map: the mobile crop at every width (the column is narrow), except tablet where it spans the page */
.map-frame--contact .map-frame__d { display: none; }
.map-frame--contact .map-frame__m { display: block; }
@media (min-width: 768px) and (max-width: 1023px) {
  .map-frame--contact .map-frame__d { display: block; }
  .map-frame--contact .map-frame__m { display: none; }
}

/* ---------- Support ---------- */
.support-choices { display: flex; flex-direction: column; gap: 48px; padding-top: 72px; padding-bottom: 80px; }
.urgent { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 16px; padding: 24px 0; border-top: 2px solid var(--text-strong); border-bottom: 1px solid var(--border-strong); }
.urgent__lead { font-family: var(--font-display); font-weight: 600; font-size: 24px; line-height: 1.25; letter-spacing: var(--tracking-heading); color: var(--text-strong); }
.urgent__body { font-size: 20px; line-height: 1.4; color: var(--text-body); }
.support-ticket { display: grid; grid-template-columns: minmax(0,4fr) minmax(0,8fr); gap: 40px; align-items: start; padding-top: 96px; padding-bottom: 96px; }
.support-ticket__head { display: flex; flex-direction: column; gap: 12px; }
.support-ticket__h { outline: none; max-width: 12ch; }
.support-ticket__head p { font-size: 17px; line-height: 1.6; color: var(--text-body); }
.support-ticket .form-card { gap: 0; }

@media (max-width: 1023px) {
  .contact-hero .page-hero__call { display: block; }
  .contact-main { grid-template-columns: minmax(0,1fr); gap: 40px; padding-top: 48px; padding-bottom: 64px; }
  .contact-form { padding: 32px; }
  .form-card__h { font-size: 26px; }
  .contact-aside { padding-top: 0; }
  .contact-call__phone { font-size: 30px; }
  .support-choices { gap: 32px; padding-top: 48px; padding-bottom: 56px; }
  .support-tiles { grid-template-columns: minmax(0,1fr); }
  .urgent { padding: 20px 0; }
  .urgent__lead { font-size: 20px; }
  .urgent__body { font-size: 17px; }
  .support-ticket { grid-template-columns: minmax(0,1fr); gap: 24px; padding-top: 56px; padding-bottom: 64px; }
  .support-ticket .form-card { padding: 24px 20px; }
  .support-ticket .form-grid { grid-template-columns: minmax(0,1fr); }
  .form-submit--block-m { width: 100%; }
}
@media (max-width: 767px) {
  .contact-form { padding: 24px 20px; }
  .contact-form .form-grid { grid-template-columns: minmax(0,1fr); }
  .contact-addr { grid-template-columns: minmax(0,1fr); }
  .form-submit--block-phone { width: 100%; }
}