/**
 * /contact-us/ — additions on top of plan-my-trip.css, whose public form
 * language (smt-*) this page reuses: the same fields, button, error banner,
 * thank-you and side card. Only what that page does not have lives here.
 */

/* The two drop-downs reuse the country picker's look (.smt-dial). */
.scu-wrap .scu-select:disabled { color: var(--smt-text-3); background-color: #fafafa; cursor: not-allowed; }
.scu-wrap .scu-select.is-bad { border-color: var(--smt-error); background-color: var(--smt-error-light); }

.scu-wrap [data-scu-ref][hidden] { display: none; }

/* "You are writing as …" for someone logged in. */
.scu-wrap p.scu-as {
  margin: 0 0 18px !important;
  padding: 12px 16px !important;
  border-radius: 12px;
  background: var(--smt-primary-ultra);
  font-size: 15px !important;
  line-height: 1.5 !important;
  color: var(--smt-text-2);
}

.scu-wrap .scu-count { text-align: right; }
.scu-wrap .scu-count.is-over { color: var(--smt-error); }

/* The file picker: the real input is hidden, the label is the button. */
.scu-label {
  display: block;
  margin: 0 0 7px;
  font-size: 15px;
  font-weight: 700;
  color: var(--smt-text-1);
}

.scu-file-input {
  position: absolute !important;
  width: 1px !important; height: 1px !important;
  opacity: 0; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%);
}

.scu-wrap label.scu-file {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  max-width: 100%;
  margin: 0;
  padding: 12px 18px;
  border: 1.5px dashed #d6d2e4;
  border-radius: 12px;
  background: var(--smt-surface);
  font-size: 15px;
  font-weight: 600;
  color: var(--smt-primary);
  cursor: pointer;
  transition: border-color 160ms var(--smt-ease), background-color 160ms var(--smt-ease);
}

.scu-wrap label.scu-file span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.scu-wrap label.scu-file:hover { border-color: var(--smt-primary); background: var(--smt-primary-ultra); }
.scu-file-input:focus-visible + .scu-file-clear,
.scu-wrap .scu-file-input:focus-visible ~ label.scu-file { box-shadow: 0 0 0 4px rgba(119, 0, 255, .12); }
.scu-wrap label.scu-file.is-bad { border-color: var(--smt-error); background: var(--smt-error-light); color: #B91C2F; }
.scu-wrap label.scu-file .svgico { width: 18px; height: 18px; flex: none; }

.scu-wrap .scu-file-clear {
  margin-left: 10px;
  padding: 6px 4px;
  border: 0;
  background: none;
  font-family: var(--smt-font);
  font-size: 14px;
  font-weight: 600;
  color: var(--smt-text-2);
  text-decoration: underline;
  cursor: pointer;
}
.scu-wrap .scu-file-clear[hidden] { display: none; }

/* The side card: quick answers and contact details. */
.scu-wrap .scu-card { position: sticky; }
.scu-wrap .smt-card-kind .svgico { width: 16px; height: 16px; }

.scu-links { margin: 6px 0 0; padding: 0; list-style: none; }
.scu-links li { margin: 0; padding: 9px 0; border-bottom: 1px solid var(--smt-border); }
.scu-links li:last-child { border-bottom: 0; }
.scu-links a { font-size: 15px; font-weight: 600; color: var(--smt-primary); text-decoration: none; }
.scu-links a:hover { color: var(--smt-primary-dark); text-decoration: underline; }

.scu-details { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--smt-border); }
.scu-wrap p.scu-detail {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0 0 10px !important;
  font-size: 14.5px !important;
  line-height: 1.45 !important;
  color: var(--smt-text-2);
  word-break: break-word;
}
.scu-detail .svgico { width: 18px; height: 18px; flex: none; margin-top: 1px; color: var(--smt-primary); }
.scu-detail a { color: var(--smt-text-1); text-decoration: none; }
.scu-detail a:hover { color: var(--smt-primary); }

@media (max-width: 900px) {
  /* On a phone the form comes first; quick answers follow it. */
  .scu-wrap .smt-aside { order: 0; }
  .scu-wrap .scu-card { position: static; max-width: none; }
}