/* Интерактивность и адаптация дополняют основной дизайн. */
.contact-field { margin-bottom: 20px; }
textarea { box-sizing: border-box; width: 100%; min-width: 0; min-height: 112px; resize: vertical; font: inherit; font-size: 16px; line-height: 1.5; padding: 13px 15px; border: 1px solid #dededc; border-radius: 9px; color: #292b30; background: white; outline: none; }
textarea:focus { border-color: #ad8f56; box-shadow: 0 0 0 3px #ad8f561c; }
textarea[aria-invalid="true"] { border-color: #bb3850; }
textarea::placeholder { color: #7e8086; font-size: 14px; }
.contact-name { overflow: hidden; text-overflow: ellipsis; }
#preview-name, #preview-email, #preview-message { border-radius: 4px; transition: background .25s, box-shadow .25s; }
.submit:disabled { opacity: .65; cursor: wait; }
[hidden] { display: none !important; }
body { min-width: 280px; }
.checkout { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); animation: enter .6s ease both; }
.intro, .form-panel, input { min-width: 0; }
.card { transition: transform .45s ease, box-shadow .45s ease; }
.card.is-editing { transform: rotate(0deg) translateY(-4px); box-shadow: 0 22px 45px #050e3060; }
.card-number { font-family: Consolas, monospace; letter-spacing: .5px; font-size: clamp(1rem, 1.85vw, 1.375rem); }
.card-bottom { gap: 18px; }
.card-holder { min-width: 0; flex: 1; }
.card-holder span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#preview-number, #preview-holder, #preview-expiry { border-radius: 4px; transition: background .25s, box-shadow .25s; }
.preview-active { background: #ffffff18; box-shadow: 0 0 0 5px #ffffff18; }
.card-cvv-hint { position: absolute; inset: auto 0 0; background: #142966; padding: 10px 14px; font-size: 12px; text-align: center; animation: enter .2s ease both; }
.step > span { transition: background .25s, color .25s; flex-shrink: 0; }
.step > span.active { background: var(--blue); color: white; }
.form-heading { gap: 12px; }
.form-subtitle { font-size: 16px; }
label { font-size: 14px; }
input { font-size: 16px; height: 54px; scroll-margin: 24px; }
input::placeholder { color: #7d879d; }
input[aria-invalid="true"] { border-color: #bb3850; box-shadow: 0 0 0 3px #bb385012; }
.field-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.error { font-size: 13px; line-height: 1.5; min-height: 20px; }
.submit { min-height: 54px; font-size: 16px; }
.submit span { transition: transform .2s; }
.submit:active { transform: scale(.98); }
button { touch-action: manipulation; }
.demo-note { color: #69748a; }
.panel-footer, .page-footer { font-size: 12px; line-height: 1.5; color: #727d93; }
body:has(dialog[open]) { overflow: hidden; }
dialog { max-height: calc(100dvh - 32px); }
dialog[open] { animation: enter .28s ease both; }
.modal-content p { font-size: 16px; }
#close-dialog { min-height: 48px; }
@keyframes enter {
  from { opacity: 0; translate: 0 12px; }
  to { opacity: 1; translate: 0 0; }
}
@media (hover: hover) {
  .submit:hover span { transform: translateX(5px); }
  #close-dialog:hover { background: #eaf0ff; }
}
/* На планшете и телефоне компактная карта располагается над формой. */
@media (max-width: 820px) {
  .topbar { padding: 22px 24px; gap: 12px; }
  .checkout { width: calc(100% - 32px); max-width: 550px; margin: 8px auto 26px; grid-template-columns: minmax(0, 1fr); border-radius: 20px; min-height: 0; }
  .intro { padding: 24px 28px 22px; }
  .intro > .eyebrow, .intro-text, .intro-note { display: none; }
  h1 { font-size: 25px; margin: 0 0 22px; letter-spacing: -.7px; }
  h1 br { display: none; }
  .card { width: 100%; max-width: 350px; margin: 0 auto; padding: 18px 22px; transform: rotate(-2deg); }
  .card-number { font-size: clamp(1rem, 4.6vw, 1.3rem); margin: 6px 0 18px; letter-spacing: .6px; }
  .card .visa { font-size: 27px; }
  .chip { height: 32px; font-size: 29px; margin-top: 2px; }
  .card-bottom > div { gap: 5px; }
  .form-panel { padding: 28px; }
  .step { margin-bottom: 24px; }
  .page-footer { width: calc(100% - 48px); max-width: 550px; margin: 0 auto 25px; }
}
@media (max-width: 380px) {
  .topbar { padding: 18px 16px; gap: 8px; }
  .brand { font-size: 22px; gap: 7px; }
  .demo-badge { padding: 7px 9px; font-size: 11px; }
  .intro, .form-panel { padding-left: 20px; padding-right: 20px; }
  h1 { font-size: 22px; }
  h2 { font-size: 24px; }
  .card { padding: 16px; }
  .card-number { letter-spacing: 0; }
  .field-row { gap: 12px; }
  .field-row label { font-size: 13px; }
  .page-footer { flex-direction: column; gap: 6px; }
}
/* Уважаем настройку «уменьшить движение» на устройстве. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* Немецкая тема: графит, красный и золото. Это авторский учебный дизайн. */
.header-label { color: #707177; font-size: 13px; }
.payment-notice { font-size: 12px; line-height: 1.65; color: #707177; text-align: center; margin: 18px 0 22px; }
.intro { display: flex; flex-direction: column; justify-content: center; }
.card { flex-shrink: 0; }
.form-panel { padding-top: 36px; }
.step { margin-bottom: 28px; }
.topbar { padding-top: 28px; padding-bottom: 28px; }
.checkout { margin-top: 22px; }
:root { --blue: #b52832; --muted: #6e7076; color: #242529; background: #f3f3f1; }
.brand-icon { background: #242529; }
.brand-dot { color: #bd3038; }
.demo-badge { color: #66676b; border-color: #dededc; }
.checkout { border-color: #dfdfdc; box-shadow: 0 20px 65px #2424240c; border-radius: 18px; }
.intro { background: #242529; }
.intro .eyebrow { color: #d8d4ca; }
h1 span { color: #dbba79; }
.intro-text, .intro-note { color: #b9b9bd; }
.note-line { background: #997f50; }
.german-label, .card-edition { display: inline-flex; align-items: center; gap: 10px; }
.german-flag { display: inline-block; width: 22px; height: 15px; flex-shrink: 0; border-radius: 2px; background: linear-gradient(to bottom, #111 0 33.33%, #d23a3f 33.33% 66.66%, #e7b751 66.66%); outline: 1px solid #ffffff16; }
.card {
  background: linear-gradient(125deg, #44454a, #25262a 60%, #34353a);
  border-color: #656366;
  border-radius: 14px;
  transform: rotate(-2deg);
  box-shadow: 0 18px 30px #00000040;
  padding-bottom: 32px;
}
.card::after {
  inset: 0 0 0 auto;
  width: 7px;
  height: auto;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: linear-gradient(to bottom, #101114 0 33.33%, #c63740 33.33% 66.66%, #dfb463 66.66%);
}
.card-top > span { color: #dedbd4; letter-spacing: 1.6px; }
.card .visa { color: #f5f0e6; }
.chip { color: #d7b976; }
.card-number { color: #f4f0e8; }
.card-bottom small { color: #c5bba7; font-size: 10px; }
.card-bottom > div { font-size: 12px; }
.card-cvv-hint { background: #17181b; }
.card.is-editing { box-shadow: 0 22px 45px #00000050; }
.visa-small { color: #303137; }
.step > span { color: #77797f; background: #eeeeec; }
input { color: #292b30; border-color: #dededc; }
input:focus { border-color: #ad8f56; box-shadow: 0 0 0 3px #ad8f561c; }
input::placeholder { color: #7e8086; }
.submit { box-shadow: 0 6px 12px #b5283218; }
.panel-footer { border-top-color: #eaeae7; }
.demo-note, .panel-footer, .page-footer { color: #707177; }
.spinner { border-color: #eeeae3; border-top-color: #b52832; }
.modal-content .eyebrow { color: #8c7347; }
dialog::backdrop { background: #17181b80; }
#close-dialog { color: #34353a; border-color: #dededc; background: #f5f4f1; }
button:focus-visible, a:focus-visible { outline-color: #bda16c; }
@media (hover: hover) {
  .submit:hover { background: #95212b; }
  #close-dialog:hover { background: #eae7e0; }
}
@media (max-width: 820px) {
  .card { padding-bottom: 23px; }
  .header-label { font-size: 12px; }
  .intro { display: block; }
  .topbar { padding-top: 20px; padding-bottom: 20px; }
  .checkout { margin-top: 6px; }
}

/* Анкета по референсу: широкие колонки, графитовая карточка и красная кнопка. */
:root { background: #f2f3f4; color: #19212a; }
.topbar { max-width: 1520px; padding: 22px 16px; }
.brand { font-size: 30px; }
.brand-icon { width: 40px; height: 40px; }
.checkout { max-width: 1520px; width: calc(100% - 64px); grid-template-columns: 46% 54%; margin: 8px auto 28px; min-height: 720px; border-radius: 22px; }
.intro { padding: 56px 48px; background: radial-gradient(ellipse at top left, #2b3034, #202427 75%); }
h1 { font-size: clamp(36px, 3.5vw, 54px); }
h1 span { color: #e2bd6e; }
.intro-text { font-size: 18px; }
.card { margin: 38px 0 12px; padding: 28px 30px; min-height: 265px; background: linear-gradient(125deg, #373b3e, #24282b 65%); border-color: #55595b; }
.profile-mark { font-size: 38px; line-height: 1; }
.card-number { font-family: inherit; font-weight: 600; font-size: 21px; letter-spacing: 1px; overflow: hidden; text-overflow: ellipsis; }
.card-postal { font-size: 10px; color: #c5bba7; margin-top: 20px; letter-spacing: 1px; }
.card-postal span { color: white; margin-left: 9px; }
#preview-city { max-width: 220px; }
.form-panel { padding: 42px 54px 30px; }
.step { margin-bottom: 40px; }
.step > span { width: 32px; height: 32px; font-size: 12px; }
h2 { font-size: 34px; }
.form-subtitle { font-size: 18px; margin-bottom: 32px; }
label { font-size: 16px; }
input { height: 60px; font-size: 17px; border-color: #d8dde3; }
input::placeholder { font-size: 16px; color: #929ba7; }
.field-row { gap: 28px; margin: 26px 0; }
.submit { height: 62px; background: #bd202f; font-size: 19px; }
.payment-notice { margin-bottom: 0; }
.page-footer { max-width: 1520px; }
@media(max-width: 1000px) { .intro { padding: 36px 28px; } .form-panel { padding: 36px 30px; } .card { padding: 24px; } }
@media(max-width: 820px) { .checkout { width: calc(100% - 32px); max-width: 550px; grid-template-columns: 1fr; min-height: 0; } .intro { padding: 28px; } h1 { font-size: 28px; } .card { min-height: 0; max-width: 390px; margin: 20px auto 0; } .card-postal { margin-top: 14px; } .form-panel { padding: 30px 26px; } .step { margin-bottom: 26px; } h2 { font-size: 30px; } .topbar { max-width: 570px; padding: 20px 24px; } .field-row { gap: 16px; } }
@media(max-width: 380px) { .field-row { grid-template-columns: 1fr; gap: 22px; } .intro,.form-panel { padding-left: 20px; padding-right: 20px; } .brand { font-size: 25px; } }
.contact-field:has(#number-mask) {
  position: relative;
}

#contact-name {
  font-family: monospace;
  font-size: 17px;
}

#number-mask {
  position: absolute;
  left: 16px;
  bottom: 0;
  height: 60px;
  display: flex;
  align-items: center;
  font-family: monospace;
  font-size: 17px;
  color: #929ba7;
  white-space: pre;
  pointer-events: none;
}
.contact-field:has(#number-mask) {
  position: relative;
}
#contact-name {
  color: #20242a;
  font-weight: 600;
}

/* Экран ожидания ответа администратора после сохранения заявки. */
.submitted-screen {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: 32px 24px;
  background: radial-gradient(ellipse at center, #fff 0%, #f5f6f8 78%);
}
.submitted-card {
  width: min(810px, 100%);
  padding: 90px 30px;
  border-radius: 26px;
  background: #fff;
  box-shadow: 0 18px 55px #26334812;
  text-align: center;
}
.submitted-spinner {
  display: block;
  width: 132px;
  height: 132px;
  margin: 0 auto 52px;
  /* Индикатор ожидания вращается и при отключённых декоративных анимациях. */
  animation: spin 1.3s linear infinite !important;
  transform-origin: center;
}
.submitted-card h1 {
  margin: 0 0 26px;
  color: #181d25;
  font-size: 56px;
  font-weight: 750;
  line-height: 1.2;
  letter-spacing: -1.7px;
  outline: none;
}
.submitted-card p {
  margin: 0;
  color: #737986;
  font-size: 27px;
  line-height: 1.65;
  overflow-wrap: anywhere;
}
@media (max-width: 600px) {
  .submitted-screen { padding: 20px; }
  .submitted-card { padding: 50px 22px; border-radius: 22px; }
  .submitted-spinner { width: 94px; height: 94px; margin-bottom: 32px; }
  .submitted-card h1 { font-size: 36px; letter-spacing: -.8px; margin-bottom: 20px; }
  .submitted-card p { font-size: 19px; line-height: 1.65; }
}
.approved-icon { display: block; width: 132px; height: 132px; margin: 0 auto 52px; }
.submitted-card .status-connection { margin-top: 20px; font-size: 15px; color: #9a6428; }
#new-request { margin-top: 30px; border: 1px solid #dce5df; border-radius: 10px; padding: 13px 24px; font: inherit; color: #207848; background: #f3faf5; cursor: pointer; }
@media (max-width: 600px) { .approved-icon { width: 94px; height: 94px; margin-bottom: 32px; } }