/* ==========================================================================
   rfq.css — request-a-quote lead capture section
   ========================================================================== */

.rfq {
  padding-block: var(--sp-12);
  background: var(--paper);
}

.rfq__inner {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: var(--sp-10);
}

.rfq__intro .section-sub {
  margin-bottom: var(--sp-7);
}

.rfq__contact-cards {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  margin-bottom: var(--sp-6);
}

.rfq__contact-card {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-4);
  border-radius: var(--radius-md);
  border: 1.5px solid var(--steel-100);
  transition: border-color 0.2s var(--ease), background 0.2s var(--ease), transform 0.2s var(--ease);
}
.rfq__contact-card:hover {
  border-color: var(--ember-500);
  background: var(--ember-100);
  transform: translateX(4px);
}
.rfq__contact-card svg {
  flex: none;
  width: 20px;
  height: 20px;
  color: var(--flame-500);
}
.rfq__contact-card strong {
  display: block;
  font-size: 0.9rem;
  color: var(--ink-900);
}
.rfq__contact-card span {
  font-size: 0.85rem;
  color: var(--steel-600);
}
.rfq__contact-card--whatsapp:hover {
  border-color: var(--success-500);
  background: rgba(47, 158, 91, 0.08);
}
.rfq__contact-card--whatsapp svg {
  color: var(--success-500);
}

.rfq__address {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
  font-size: 0.88rem;
  color: var(--steel-600);
  line-height: 1.6;
  padding-top: var(--sp-4);
  border-top: 1px solid var(--steel-100);
}
.rfq__address svg {
  flex: none;
  width: 18px;
  height: 18px;
  color: var(--indigo-700);
  margin-top: 0.15em;
}

/* ---- Form ------------------------------------------------------------- */
.rfq__form {
  background: var(--steel-50);
  border: 1px solid var(--steel-100);
  border-radius: var(--radius-lg);
  padding: var(--sp-7);
}

.rfq__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-5);
  margin-bottom: var(--sp-6);
}

.rfq__field--full {
  grid-column: 1 / -1;
}

.rfq__field label {
  display: block;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--ink-700);
  margin-bottom: 0.55em;
}

.rfq__field input,
.rfq__field select,
.rfq__field textarea {
  width: 100%;
  padding: 0.8em 1em;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--steel-200);
  background: var(--paper);
  font-size: 0.92rem;
  color: var(--ink-900);
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.rfq__field input:focus,
.rfq__field select:focus,
.rfq__field textarea:focus {
  border-color: var(--flame-500);
  box-shadow: 0 0 0 3px rgba(223, 58, 28, 0.12);
  outline: none;
}
.rfq__field textarea {
  resize: vertical;
  min-height: 100px;
}
.rfq__field input[type="file"] {
  padding: 0.6em 0.8em;
  font-size: 0.85rem;
  color: var(--steel-600);
}

.rfq__field.has-error input,
.rfq__field.has-error select {
  border-color: var(--flame-500);
}
.rfq__field-error {
  display: block;
  font-size: 0.78rem;
  color: var(--flame-500);
  margin-top: 0.4em;
}

.rfq__submit {
  width: 100%;
}

.rfq__success {
  display: flex;
  align-items: center;
  gap: 0.6em;
  margin-top: var(--sp-5);
  padding: var(--sp-4);
  border-radius: var(--radius-md);
  background: rgba(47, 158, 91, 0.1);
  color: var(--success-500);
  font-size: 0.9rem;
  font-weight: 600;
}
/* .rfq__success's own `display: flex` ties in specificity with the
   browser's built-in `[hidden]{display:none}` rule, and — being author
   CSS loaded after the UA stylesheet — would otherwise win the cascade
   and show the success banner on every page load. This makes [hidden]
   win explicitly, as intended. */
.rfq__success[hidden] {
  display: none;
}
.rfq__success svg {
  flex: none;
  width: 20px;
  height: 20px;
}

@media (max-width: 940px) {
  .rfq__inner {
    grid-template-columns: 1fr;
    gap: var(--sp-8);
  }
}

@media (max-width: 560px) {
  .rfq__grid {
    grid-template-columns: 1fr;
  }
  .rfq__form {
    padding: var(--sp-5);
  }
}