/* Shared checkout presentation only: validation, consent and payment stay in Vue. */
#app .order { box-sizing: border-box; width: 100%; min-width: 0; }
#app .order__title {
  font-family: Geometria, sans-serif; font-size: 36px; line-height: 1.2;
  font-weight: 700; text-align: left; text-transform: none; margin: 0 0 28px;
}
#app .order__content { min-width: 0; gap: 24px; }
#app .order__form { width: 100%; max-width: 600px; min-width: 0; gap: 20px; }
#app .order__form-section {
  padding: 28px; gap: 16px; border: 1px solid #484458; border-radius: 18px;
  background: #242330; box-shadow: 0 8px 24px #00000018;
  text-align: left; min-width: 0;
}
#app .order__form-section h4 {
  margin: 0 0 4px; color: #fff; font-size: 18px; line-height: 1.4;
  font-weight: 700; text-align: left;
}
#app .order .input, #app .order .vti__input {
  min-width: 0; color: #fff; font-size: 16px; line-height: 1.4;
  background: #302e3e; caret-color: #c4b5ff;
}
#app .order .input {
  width: 100%; height: 52px; padding: 14px 16px;
  border: 1px solid #686175; border-radius: 10px;
}
#app .order textarea.input { height: auto; min-height: 110px; resize: vertical; }
#app .order .input::placeholder, #app .order .vti__input::placeholder { color: #c0bacd; opacity: 1; }
#app .order .input:focus-visible {
  outline: 2px solid #b7a4ff; outline-offset: 2px; border-color: #b7a4ff;
}
#app .order .vue-tel-input {
  min-width: 0; height: 52px !important; background: #302e3e;
  border: 1px solid #686175 !important; border-radius: 10px !important;
}
#app .order .vue-tel-input:focus-within {
  outline: 2px solid #b7a4ff; outline-offset: 2px; box-shadow: none;
}
#app .order .vti__input { width: 100%; border-radius: 0 10px 10px 0; }
#app .order .vti__dropdown { border-radius: 10px 0 0 10px; padding: 8px; }
#app .order .vti__dropdown-list { z-index: 40; max-width: min(320px, 75vw); background: #302e3e; color: #fff; border-color: #686175; }
#app .order .vti__dropdown-item.highlighted { background: #514664; }
#app .order .checkbox-container { align-items: flex-start; gap: 12px; text-align: left; }
#app .order .checkbox {
  flex: 0 0 44px; width: 44px; height: 44px; min-width: 44px; min-height: 44px;
  margin: 0; border: 1px solid #8c819f; border-radius: 10px; background-color: #302e3e;
}
#app .order .checkbox.checked { border: 1px solid #a999ff; }
#app .order .checkbox-label { flex: 1; min-width: 0; padding: 10px 0; text-align: left; font-size: 14px; line-height: 1.6; color: #eeeaf6; overflow-wrap: anywhere; }
#app .order .checkbox-label a { color: #c2b2ff; text-decoration: underline; text-underline-offset: 3px; }
#app .order .error-message { color: #ffb0ba; font-size: 13px; line-height: 1.5; margin: 6px 0 0; text-align: left; }
#app .order .ui-input--required::before, #app .order .vue-tel-input[required]::before { color: #ff9eae; }
#app .order__form-additional-text { color: #c0bacd; line-height: 1.5; }
#app .order__form-promocode-wrapper { gap: 10px; align-items: stretch; min-width: 0; }
#app .order__form-promocode-wrapper > div { flex: 1; min-width: 0; }
#app .order__form-promocode button { height: auto; min-height: 52px; border-radius: 10px; padding: 12px 16px; font-size: 13px; }
@media (max-width: 767px) {
  #app .order {
    /* The shared content already reserves the measured fixed cart height. */
    margin-bottom: 0;
    padding: 20px 18px 24px;
    padding-left: max(18px, env(safe-area-inset-left));
    padding-right: max(18px, env(safe-area-inset-right));
  }
  #app .order__title { font-size: 28px; margin-bottom: 20px; }
  #app .order__form { max-width: none; }
  #app .order__form-section { padding: 20px 16px; border-radius: 16px; }
  #app .order .input, #app .order .vue-tel-input { scroll-margin-top: 24px; scroll-margin-bottom: 35vh; }
}
@media (max-width: 360px) {
  #app .order__form-promocode-wrapper { flex-direction: column; }
}