/* ── R4XN Forms — section wrapper ───────────────────────────────────────── */
/* Break out of the theme's content column so the section spans the full
   viewport — the form looks identical to the builder preview everywhere. */
.r4xn-section {
  box-sizing: border-box;
  width: 100vw;
  max-width: 100vw;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  margin-left: 0;
  margin-right: 0;
}

.r4xn-section-inner {
  box-sizing: border-box;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}

/* Two-column layouts: image + form side by side */
.r4xn-section--image-left  .r4xn-section-inner,
.r4xn-section--image-right .r4xn-section-inner {
  display: flex;
  align-items: stretch;
  max-width: none !important; /* inner max-width is on .r4xn-section-inner via inline style */
}

.r4xn-section--image-left  .r4xn-section-img  { order: -1; }
.r4xn-section--image-right .r4xn-section-img  { order:  1; }

.r4xn-section-img {
  flex: 1; min-height: 320px; position: relative; overflow: hidden;
}

.r4xn-section-img img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}

.r4xn-section-content {
  flex: 1; box-sizing: border-box;
}

/* Form heading */
.r4xn-section-heading { margin-bottom: 28px; }
.r4xn-section-heading h2 {
  margin: 0 0 10px;
  font-size: clamp(22px, 4vw, 36px);
  font-weight: 700;
  line-height: 1.25;
  color: inherit;
}
.r4xn-section-heading p {
  margin: 0;
  font-size: clamp(14px, 2vw, 16px);
  line-height: 1.65;
  opacity: .75;
}

/* Responsive: stack image and form on small screens */
@media (max-width: 768px) {
  .r4xn-section--image-left  .r4xn-section-inner,
  .r4xn-section--image-right .r4xn-section-inner { flex-direction: column; }
  .r4xn-section-img { min-height: 220px; }
  .r4xn-section--image-left  .r4xn-section-img  { order: 0; }
  .r4xn-section--image-right .r4xn-section-img  { order: 0; }
}

/* ── R4XN Forms — public stylesheet ─────────────────────────────────────── *
 * All selectors are scoped under .r4xn-form-wrap to prevent collision with
 * Elementor, Hello Elementor, Twenty Twenty-Six, and caching plugins.
 * Per-form colours/spacing come from CSS custom properties set inline on the
 * container (#r4xn-form-{id}-instance-{hash}) by the renderer.
 * ────────────────────────────────────────────────────────────────────────── */

/* Custom-property defaults — overridden per instance by inline <style>. */
.r4xn-form-wrap {
  --r4xn-label-color:      #111827;
  --r4xn-input-bg:         #ffffff;
  --r4xn-border-color:     #d1d5db;
  --r4xn-input-color:      #111827;
  --r4xn-btn-bg:           #111827;
  --r4xn-btn-color:        #ffffff;
  --r4xn-btn-hover-bg:     #374151;
  --r4xn-radius:           0px;
  --r4xn-gap:              16px;
  --r4xn-font-size:        14px;
  --r4xn-label-font-size:  13px;
  --r4xn-input-padding:    10px 14px;

  box-sizing: border-box;
  font-family: var(--r4xn-font-family, inherit);
}

.r4xn-form-wrap *,
.r4xn-form-wrap *::before,
.r4xn-form-wrap *::after {
  box-sizing: inherit;
}

/* Honeypot — visually and assistive-technologically hidden. */
.r4xn-form-wrap .r4xn-hp {
  display: none !important;
}

/* ── Field grid ─────────────────────────────────────────────────────────── */
.r4xn-form-wrap .r4xn-fields {
  display: flex;
  flex-wrap: wrap;
  gap: var(--r4xn-gap);
}

.r4xn-form-wrap .r4xn-field-wrap   { width: 100%; }
.r4xn-form-wrap .r4xn-width-25    { width: calc(25% - var(--r4xn-gap) * .75); }
.r4xn-form-wrap .r4xn-width-50    { width: calc(50% - var(--r4xn-gap) * .5);  }
.r4xn-form-wrap .r4xn-width-75    { width: calc(75% - var(--r4xn-gap) * .25); }
.r4xn-form-wrap .r4xn-width-100   { width: 100%; }

@media (max-width: 640px) {
  .r4xn-form-wrap .r4xn-width-25,
  .r4xn-form-wrap .r4xn-width-50,
  .r4xn-form-wrap .r4xn-width-75 { width: 100%; }
}

/* ── Container field ────────────────────────────────────────────────────── */
.r4xn-form-wrap .r4xn-container {
  --r4xn-c-cols-sm: 1;
  --r4xn-c-cols-md: 2;
  --r4xn-c-gap: 16px;
  display: grid;
  grid-template-columns: repeat(var(--r4xn-c-cols-sm), 1fr);
  gap: var(--r4xn-c-gap);
  width: 100%;
}
@media (min-width: 640px) {
  .r4xn-form-wrap .r4xn-container {
    grid-template-columns: repeat(var(--r4xn-c-cols-md), 1fr);
  }
}
.r4xn-form-wrap .r4xn-container.r4xn-c-flex {
  display: flex;
  flex-wrap: wrap;
  grid-template-columns: none;
}
/* Fields inside a container fill their grid cell — ignore width classes */
.r4xn-form-wrap .r4xn-container .r4xn-field-wrap { width: 100% !important; }

/* ── Label ──────────────────────────────────────────────────────────────── */
.r4xn-form-wrap .r4xn-label {
  display: block;
  font-size: var(--r4xn-label-font-size);
  font-weight: 600;
  color: var(--r4xn-label-color);
  margin-bottom: 6px;
  line-height: 1.4;
}

.r4xn-form-wrap .r4xn-required {
  color: #ef4444;
  margin-left: 2px;
}

/* ── Inputs ─────────────────────────────────────────────────────────────── */
.r4xn-form-wrap .r4xn-input {
  display: block;
  width: 100%;
  padding: var(--r4xn-input-padding);
  border: 1px solid var(--r4xn-border-color);
  border-radius: var(--r4xn-radius);
  background: var(--r4xn-input-bg);
  color: var(--r4xn-input-color);
  font-size: var(--r4xn-font-size);
  font-family: inherit;
  line-height: 1.5;
  appearance: none;
  -webkit-appearance: none;
  transition: border-color .15s, box-shadow .15s;
}

.r4xn-form-wrap .r4xn-input:focus {
  outline: none;
  border-color: var(--r4xn-input-color);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--r4xn-input-color) 15%, transparent);
}

.r4xn-form-wrap .r4xn-input.r4xn-input--error {
  border-color: #ef4444;
}

.r4xn-form-wrap .r4xn-textarea {
  resize: vertical;
  min-height: 80px;
}

/* Custom select arrow — avoids conflict with browser/theme default styles. */
.r4xn-form-wrap .r4xn-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath fill='%236b7280' d='M5 6 0 0h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 36px;
  cursor: pointer;
}

.r4xn-form-wrap .r4xn-file {
  padding: 7px 14px;
  cursor: pointer;
}

/* ── Radio / Checkbox ───────────────────────────────────────────────────── */
.r4xn-form-wrap .r4xn-choices {
  border: none;
  padding: 0;
  margin: 0;
}

.r4xn-form-wrap .r4xn-choices legend.r4xn-label {
  width: 100%;
  float: none;
}

.r4xn-form-wrap .r4xn-choices-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.r4xn-form-wrap .r4xn-choice {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--r4xn-font-size);
  color: var(--r4xn-input-color);
  cursor: pointer;
  line-height: 1.4;
}

.r4xn-form-wrap .r4xn-choice-input {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  accent-color: var(--r4xn-btn-bg);
  cursor: pointer;
  margin: 0;
}

/* ── Submit button ──────────────────────────────────────────────────────── */
.r4xn-form-wrap .r4xn-submit-btn {
  display: inline-block;
  padding: 11px 28px;
  background: var(--r4xn-btn-bg);
  color: var(--r4xn-btn-color);
  border: none;
  border-radius: var(--r4xn-radius);
  font-size: var(--r4xn-font-size);
  font-family: inherit;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  transition: background .15s;
}

.r4xn-form-wrap .r4xn-submit-btn:hover {
  background: var(--r4xn-btn-hover-bg);
}

.r4xn-form-wrap .r4xn-submit-btn:disabled {
  opacity: .55;
  cursor: not-allowed;
}

/* ── Field error ────────────────────────────────────────────────────────── */
.r4xn-form-wrap .r4xn-field-error {
  display: block;
  font-size: 12px;
  color: #ef4444;
  margin-top: 4px;
}

/* ── Form-level message ─────────────────────────────────────────────────── */
.r4xn-form-wrap .r4xn-form-message {
  padding: 14px 16px;
  border-radius: var(--r4xn-radius);
  font-size: var(--r4xn-font-size);
  margin-top: 16px;
  line-height: 1.5;
}

.r4xn-form-wrap .r4xn-msg-success {
  background: #d1fae5;
  color: #065f46;
}

.r4xn-form-wrap .r4xn-msg-error {
  background: #fee2e2;
  color: #991b1b;
}

/* ── Theme isolation ────────────────────────────────────────────────────── *
 * Themes (Twenty Twenty-Five, Elementor kits, etc.) style bare inputs,
 * labels and focus states. Neutralise anything that leaks into the form so
 * the live render always matches the builder preview.                       */
.r4xn-form-wrap div,
.r4xn-form-wrap label,
.r4xn-form-wrap legend {
  border: none;
  outline: none;
  box-shadow: none;
  background-image: none;
}

.r4xn-form-wrap .r4xn-label {
  margin-top: 0;
  padding: 0;
  letter-spacing: normal;
  text-transform: none;
}

/* Kill theme focus rings — we draw our own via border + box-shadow */
.r4xn-form-wrap .r4xn-input:focus,
.r4xn-form-wrap .r4xn-input:focus-visible,
.r4xn-form-wrap .r4xn-choice-input:focus,
.r4xn-form-wrap .r4xn-choice-input:focus-visible,
.r4xn-form-wrap .r4xn-submit-btn:focus,
.r4xn-form-wrap .r4xn-submit-btn:focus-visible {
  outline: none !important;
}
.r4xn-form-wrap .r4xn-field-wrap:focus-within {
  outline: none !important;
  border: none !important;
  box-shadow: none !important;
}

/* Re-assert critical input styles against theme selectors */
.r4xn-form-wrap .r4xn-form .r4xn-input {
  border: 1px solid var(--r4xn-border-color);
  border-radius: var(--r4xn-radius);
  background: var(--r4xn-input-bg);
  color: var(--r4xn-input-color);
  font-size: var(--r4xn-font-size);
  padding: var(--r4xn-input-padding);
  line-height: 1.5;
  margin: 0;
  width: 100%;
}
.r4xn-form-wrap .r4xn-form .r4xn-input:focus {
  border-color: var(--r4xn-input-color);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--r4xn-input-color) 15%, transparent);
}
.r4xn-form-wrap .r4xn-form .r4xn-submit-btn {
  border: none;
  border-radius: var(--r4xn-radius);
  background: var(--r4xn-btn-bg);
  color: var(--r4xn-btn-color);
  text-decoration: none;
  text-transform: none;
  letter-spacing: normal;
  margin: 0;
}
.r4xn-form-wrap .r4xn-form .r4xn-submit-btn:hover {
  background: var(--r4xn-btn-hover-bg);
}