/* ═══════════════════════════════════════════════════════
  Contact Form — Scoped styles
   Tailwind utility classes are applied via @apply or
   written directly here so they work without a build step.
   All rules are scoped to #scf-root to avoid theme leakage.
═══════════════════════════════════════════════════════ */

/* ── Google Font ── */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Thai:wght@400;500;600;700&display=swap');

/* ── CSS custom properties ── */
#scf-root {
  --scf-primary:     #ea7425;
  --scf-primary-h:   #ba4e1f;
  --scf-bg:          #fffbf800;
  --scf-card-bg:     #ffffff00;
  --scf-border:      #f0e9e5;
  --scf-text:        #fffbf8;
  --scf-muted:       #80736b;
  --scf-radius:      8px;
  --scf-shadow:      0 8px 40px rgba(241, 161, 99, 0.12), 0 2px 8px rgba(0,0,0,.06);
  font-family: 'Noto Sans Thai', sans-serif;
}

/* ── Wrapper ── */
.scf-wrapper {
  display: flex;
  flex-direction: column;
  justify-content: center;
  justify-self: center;
  align-items: flex-start;
  padding: 2.5rem 1rem;
  background: var(--scf-bg);
  min-height: 100%;
}

/* ── Card ── */
.scf-card {
  width: 100%;
  max-width: 880px;
  margin: auto;
  /* background: var(--scf-card-bg);
  border-radius: var(--scf-radius);
  box-shadow: var(--scf-shadow);
  border: 1px solid var(--scf-border);
  padding: 2.5rem;
  position: relative; */
  overflow: hidden;
}

/* decorative gradient blob top-right */
.scf-card::before {
  content: '';
  position: absolute;
  top: -80px; right: -80px;
  width: 260px; height: 260px;
  /* background: radial-gradient(circle, rgba(241, 217, 99, 0.15) 0%, transparent 70%); */
  pointer-events: none;
}

/* ── Header ── */
.scf-header {
  width: 100%;
  text-align: center;
  margin-bottom: 1.75rem;
}

.scf-header-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px; height: 56px;
  border-radius: 14px;
  background: linear-gradient(135deg, #ba4e1f, #ea7425);
  font-size: 1.5rem;
  margin-bottom: .75rem;
  box-shadow: 0 4px 18px rgba(241, 161, 99, 0.35);
}

.scf-title {
  font-size: 1.65rem !important;
  font-weight: 700 !important;
  color: var(--scf-text) !important;
  margin: 0 0 .3rem !important;
  line-height: 1.2 !important;
}

.scf-subtitle {
  color: var(--scf-muted);
  font-size: .9rem;
  margin: 0;
}

/* ── Alert ── */
.scf-alert {
  margin-bottom: 1.25rem !important;
  border-radius: 10px !important;
}

/* ── Form ── */
.scf-form .ant-form-item-label > label {
  font-weight: 500 !important;
  color: var(--scf-text) !important;
  font-size: .875rem !important;
}

.scf-form .ant-input,
.scf-form .ant-input-affix-wrapper,
.scf-form textarea.ant-input,
.scf-form .ant-select-selector {
  border-color: var(--scf-border) !important;
  font-family: 'Noto Sans Thai', sans-serif !important;
  color: var(--scf-text) !important;
  transition: border-color .2s, box-shadow .2s !important;
}

.scf-form .ant-input:hover,
.scf-form .ant-select-selector:hover,
.scf-form textarea.ant-input:hover {
  border-color: var(--scf-primary) !important;
}

.scf-form .ant-input:focus,
.scf-form .ant-select-focused .ant-select-selector,
.scf-form textarea.ant-input:focus {
  border-color: var(--scf-primary) !important;
  box-shadow: 0 0 0 3px rgba(241, 172, 99, 0.15) !important;
}

/* ── Two-column row ── */
.scf-row-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 1rem;
}

@media (max-width: 520px) {
  .scf-row-2 { grid-template-columns: 1fr; }
  .scf-card   { padding: 1.5rem; }
}

/* ── Submit row ── */
.scf-submit-row {
  margin-top: .5rem !important;
  margin-bottom: .5rem !important;
  text-align: center !important;
}

.scf-btn.ant-btn-primary {
  background: linear-gradient(135deg, #ba4e1f, #ea7425) !important;
  border: none !important;
  border-radius: 4px !important;
  font-weight: 600 !important;
  font-size: 1rem !important;
  height: 48px !important;
  letter-spacing: .01em !important;
  box-shadow: 0 4px 18px rgba(241, 163, 99, 0.3) !important;
  transition: opacity .2s, transform .1s !important;
  width: fit-content !important;
}

.scf-btn.ant-btn-primary:hover {
  opacity: .9 !important;
  transform: translateY(-1px) !important;
}

.scf-btn.ant-btn-primary:active {
  transform: translateY(0) !important;
}