/* ══════════════════════ Order Project Modal ══════════════════════ */
.order-modal {
  position: fixed;
  inset: 0;
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s ease, visibility 0.35s ease;
}

.order-modal.is-open {
  opacity: 1;
  visibility: visible;
}

.order-modal__overlay {
  position: absolute;
  inset: 0;
  background: rgba(38, 37, 40, 0.6);
  backdrop-filter: blur(4px);
}

.order-modal__dialog {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1140px;
  max-height: calc(100vh - 80px);
  border-radius: 28px;
  background: linear-gradient(135deg, #d7f5e7 0%, #eafcf4 60%, #ffffff 100%);
  box-shadow: 0 40px 80px rgba(0, 0, 0, 0.35);
  transform: translateY(24px) scale(0.98);
  transition: transform 0.35s ease;
}

.order-modal.is-open .order-modal__dialog {
  transform: translateY(0) scale(1);
}

.order-modal__body {
  max-height: calc(100vh - 80px);
  overflow-y: auto;
  display: grid;
  grid-template-columns: 0.65fr 1fr;
  gap: 20px;
  padding: 30px;
  border-radius: 20px;
}

.order-modal__close {
  position: absolute;
  top: -18px;
  right: -18px;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--color-white);
  color: var(--color-dark);
  transition: background 0.3s ease, color 0.3s ease;
}
.order-modal__close:hover {background: var(--color-black); color: var(--color-white);}

/* ══════════════════════ Intro column ══════════════════════ */
.order-modal__intro {padding: 32px 20px; background: transparent;}

.order-modal__title {margin: 0 0 18px; font-family: var(--font-primary); font-size: 58px; line-height: 1.1; font-weight: 500; letter-spacing: -2.5px; color: var(--color-heading);}

.order-modal__desc {margin: 0 0 32px; font-size: 16px; line-height: 1.55; letter-spacing: -0.28px; color: var(--color-muted);}

.order-modal__help {padding: 24px; border-radius: 16px; background: var(--color-white); box-shadow: 0 12px 30px rgba(0, 0, 0, 0.06);}

.order-modal__help-top {position: relative; display: flex; align-items: center; gap: 18px; margin-top: -45px; margin-bottom: 20px;}

.order-modal__avatar {display: block; width: 80px; flex-shrink: 0;}
.order-modal__avatar img {display: block; width: 100%; height: auto;}

.order-modal__help-text {position: relative; margin-top: 30px; font-family: var(--font-primary); font-size: 20px; font-weight: 700; letter-spacing: -0.4px; line-height: 1.25; color: var(--color-dark);}

.order-modal__contact {display: flex; align-items: center; gap: 12px; margin-top: 16px;}
.order-modal__contact:first-of-type {margin-top: 0;}

.order-modal__contact-icon {display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0;}
.order-modal__contact-icon--call {background: var(--color-purple); color: var(--color-dark);}
.order-modal__contact-icon--mail {background: var(--color-ddb0); color: var(--color-deep-green);}

.order-modal__contact-body {display: flex; flex-direction: column; gap: 2px; min-width: 0;}
.order-modal__contact-label {font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.5px; text-transform: uppercase; color: var(--color-muted);}
.order-modal__contact-value {font-family: var(--font-primary); font-size: 16px; font-weight: 700; letter-spacing: -0.32px; color: var(--color-dark); overflow-wrap: break-word;}

/* ══════════════════════ Form column ══════════════════════ */
.order-modal__form {display: flex; flex-direction: column; padding: 30px 35px; border-radius: 22px; background: var(--color-white); box-shadow: 0 20px 50px rgba(0, 0, 0, 0.08);}

.order-modal__label {display: block; margin: 0 0 12px; font-family: var(--font-mono); font-size: 13px; font-weight: 400; letter-spacing: -0.56px; text-transform: uppercase; color: var(--color-muted);}
.order-modal__label:not(:first-child) {margin-top: 20px;}

.order-modal__row {display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px;}

.order-modal__form input,
.order-modal__form select,
.order-modal__form textarea {
  width: 100%;
  height: 52px;
  padding: 0 18px;
  border: 1px solid var(--color-divider);
  border-radius: 10px;
  background: var(--color-white);
  font-family: var(--font-primary);
  font-size: 15px;
  color: var(--color-dark);
  transition: border-color 0.3s ease;
}
.order-modal__form input::placeholder,
.order-modal__form textarea::placeholder {color: var(--color-muted);}
.order-modal__form input:focus,
.order-modal__form select:focus,
.order-modal__form textarea:focus {outline: none; border-color: var(--color-mint);}

.order-modal__form textarea {height: auto; padding: 14px 18px; resize: vertical; line-height: 1.5;}

.order-modal__select {position: relative;}
.order-modal__select select {appearance: none; -webkit-appearance: none; padding-right: 40px; cursor: pointer; color: var(--color-muted);}
.order-modal__select-arrow {position: absolute; top: 50%; right: 18px; transform: translateY(-50%); color: var(--color-muted); pointer-events: none;}

.order-modal__file {display: none; align-items: center; gap: 20px; margin-top: 0px; padding: 12px; border: 1px solid var(--color-divider); border-radius: 12px; cursor: pointer; transition: border-color 0.3s ease;}
.order-modal__file:hover {border-color: var(--color-mint);}
.order-modal__file-btn {display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; padding: 14px 26px; border-radius: 10px; background: var(--color-ghost); font-family: var(--font-primary); font-size: 15px; font-weight: 600; color: var(--color-dark); transition: background 0.3s ease;}
.order-modal__file:hover .order-modal__file-btn {background: var(--color-mint);}
.order-modal__file-hint {font-family: var(--font-primary); font-size: 14px; color: var(--color-muted);}

.order-modal__submit {width: fit-content; margin-top: 0;}