/* ==========================================================================
   FlagsExpo redesign V1 (Figma) — Customer Feedback page
   Shares :root custom properties from Design/css/fx-redesign.css
   ========================================================================== */

.v2-cf-header, .v2-cf-form,
.v2-cf-header *, .v2-cf-form * {
  box-sizing: border-box;
  font-family: var(--v2-font);
}

/* ---------- Header ---------- */
.v2-cf-header { background: var(--v2-navy); }
.v2-cf-header-inner { max-width: 760px; margin: 0 auto; padding: 64px 80px; text-align: center; display: flex; flex-direction: column; gap: 20px; }
.v2-cf-title { font-family: var(--v2-font-display); font-weight: 300; font-size: 48px; line-height: 1.1; color: #fff; margin: 0; }
.v2-cf-copy { margin: 0; font-size: 16px; line-height: 1.6; color: rgba(255,255,255,0.7); }

/* ---------- Form ---------- */
.v2-cf-form { display: flex; flex-direction: column; gap: 32px; max-width: 760px; margin: 0 auto; }

.v2-cf-fields { display: flex; flex-direction: column; gap: 24px; width: 100%; }
.v2-cf-row { display: flex; gap: 24px; width: 100%; }
.v2-cf-field { flex: 1 1 0; background: #f5f6f8; position: relative; min-width: 0; }
.v2-cf-field input, .v2-cf-field textarea {
  width: 100%; background: transparent; border: none; outline: none; display: block;
  padding: 16px 24px; font-family: var(--v2-font); font-size: 14px; color: #1f1f1f;
}
.v2-cf-field textarea { height: 160px; resize: vertical; line-height: 1.5; }
.v2-cf-error { display: block; margin-top: 6px; font-size: 13px; color: var(--v2-red); }

.v2-cf-disclaimer { margin: 0; font-size: 13px; line-height: 1.6; color: #989ca1; }
.v2-cf-disclaimer a { color: inherit; }

/* ---------- Survey ---------- */
.v2-cf-survey { display: flex; flex-direction: column; gap: 24px; padding: 24px; background: #f5f6f8; }
.v2-cf-question { display: flex; flex-direction: column; gap: 12px; }
.v2-cf-question-text { margin: 0; font-family: var(--v2-font-display); font-weight: 500; font-size: 18px; color: #021433; }
.v2-cf-options { display: flex; gap: 12px; flex-wrap: wrap; }
.v2-cf-option {
  display: inline-flex; align-items: center; gap: 8px; background: #fff; border: 1px solid #e6e6e6;
  padding: 10px 20px; font-size: 14px; color: #1f1f1f; cursor: pointer; user-select: none;
}
.v2-cf-option:has(.v2-cf-radio:checked) { border-color: var(--v2-navy); background: var(--v2-navy); color: #fff; }
.v2-cf-option-num { padding: 10px 16px; min-width: 20px; justify-content: center; }
.v2-cf-radio { accent-color: var(--v2-navy); margin: 0; }
.v2-cf-scale { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.v2-cf-scale-label { font-size: 13px; color: #989ca1; }
.v2-cf-hint { margin: 0; font-size: 13px; color: #989ca1; }

.v2-cf-form-footer { display: flex; justify-content: flex-end; }
.v2-cf-submit {
  background: var(--v2-navy); color: #fff; border: none; padding: 20px 40px;
  font-family: var(--v2-font); font-weight: 600; font-size: 16px; cursor: pointer;
}
.v2-cf-submit:hover { background: var(--v2-navy-dark); }

.v2-cf-thankyou { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 32px 0; }
.v2-cf-thankyou p { margin: 0; font-size: 16px; line-height: 1.6; color: #021433; }
.v2-cf-thankyou .v2-cf-submit { margin-top: 16px; }

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 1023px) {
  .v2-cf-header-inner { padding: 48px 32px; }
  .v2-cf-title { font-size: 38px; }
  .v2-cf-row { flex-direction: column; }
}

@media (max-width: 640px) {
  .v2-cf-header-inner { padding: 40px 20px; }
  .v2-cf-title { font-size: 30px; }
  .v2-cf-form-footer { justify-content: stretch; }
  .v2-cf-submit { width: 100%; text-align: center; }
}