/* ============================================================
   Zayed Forms — Layouts
   Scoped entirely under .zayed-form-layout-* so it never touches
   booking-form, search-form or any other .field usage in the theme.
   ============================================================ */

/* ---------- 1. Classic (theme default — no overrides needed) ---------- */

/* ---------- 2. Floating Label ---------- */
.zayed-form-layout-floating-label .field{ position:relative; border:1px solid var(--line-strong,#cccccc); padding-top:16px; }
.zayed-form-layout-floating-label .field label{ position:absolute; top:-9px; left:10px; background:#fff; padding:0 6px; font-size:10px; }

/* ---------- 3. Underline ---------- */
.zayed-form-layout-underline .field{ border:none; border-bottom:2px solid var(--line-strong,#cccccc); border-radius:0; background:none; padding:6px 2px; }
.zayed-form-layout-underline .field:focus-within{ border-bottom-color:var(--gold,#C89B3C); }

/* ---------- 4. Two Column ---------- */
.zayed-form-layout-two-column form{ display:grid; grid-template-columns:1fr 1fr; gap:14px 16px; }
.zayed-form-layout-two-column .field:has(textarea),
.zayed-form-layout-two-column .field:has(.zayed-form__options),
.zayed-form-layout-two-column .field:has(.zayed-form__name-row){ grid-column:1 / -1; }
.zayed-form-layout-two-column button[type=submit]{ grid-column:1 / -1; }

/* ---------- 5. Card Boxed ---------- */
.zayed-form-layout-card-boxed{ background:var(--ivory,#FBF9F4); border-radius:16px; padding:32px; box-shadow:0 12px 32px rgba(22,33,27,.12); }

/* ---------- 6. Split Panel ---------- */
.zayed-form-layout-split-image{ display:grid; grid-template-columns:1fr 1.3fr; border-radius:14px; overflow:hidden; position:relative; box-shadow:0 8px 24px rgba(22,33,27,.1); }
.zayed-form-layout-split-image::before{ content:''; grid-column:1; grid-row:1/-1; background:linear-gradient(160deg,#2E4034,#16211B); min-height:220px; }
.zayed-form-layout-split-image .booking-alert{ grid-column:2; margin:20px 20px 0; }
.zayed-form-layout-split-image form{ grid-column:2; padding:28px; }
@media (max-width:640px){ .zayed-form-layout-split-image{ grid-template-columns:1fr; } .zayed-form-layout-split-image::before{ display:none; } .zayed-form-layout-split-image form,.zayed-form-layout-split-image .booking-alert{ grid-column:1; } }

/* ---------- 7. Dark Glass ---------- */
.zayed-form-layout-dark-glass{ background:rgba(22,33,27,.72); backdrop-filter:blur(10px); border-radius:14px; padding:28px; }
.zayed-form-layout-dark-glass .field{ background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.18); }
.zayed-form-layout-dark-glass .field label{ color:rgba(255,255,255,.65); }
.zayed-form-layout-dark-glass .field select,
.zayed-form-layout-dark-glass .field input,
.zayed-form-layout-dark-glass .field textarea{ color:#fff; }
.zayed-form-layout-dark-glass .zayed-form__sublabel{ color:rgba(255,255,255,.5); }

/* ---------- 8. Conversational (structure via JS, see contact-forms.js) ---------- */
.zayed-form-layout-conversational .field{ max-width:520px; margin-left:auto; margin-right:auto; }
.zayed-form-layout-conversational button[type=submit]{ display:block; margin:0 auto; }

/* ---------- 9. Inline Horizontal ---------- */
.zayed-form-layout-inline-horizontal form{ display:flex; flex-wrap:wrap; align-items:flex-end; gap:10px; }
.zayed-form-layout-inline-horizontal .field{ flex:1 1 160px; margin-bottom:0 !important; }
.zayed-form-layout-inline-horizontal .field:has(textarea){ flex-basis:100%; }
.zayed-form-layout-inline-horizontal button[type=submit]{ flex:0 0 auto; }

/* ---------- 10. Stepped Wizard (structure via JS) ---------- */
.zayed-form-layout-stepped-wizard .field{ max-width:560px; margin-left:auto; margin-right:auto; }

/* ---------- 11. Sidebar Info ---------- */
.zayed-form-layout-sidebar-info{ display:grid; grid-template-columns:1.4fr 1fr; gap:28px; align-items:start; }
.zayed-form-layout-sidebar-info form{ grid-column:1; }
.zayed-form-layout-sidebar-info .booking-alert{ grid-column:1; }
.zayed-form-layout-sidebar-info::after{ content:'We usually reply within 24 hours.'; grid-column:2; background:var(--sand,#F4EFE4); border:1px dashed var(--gold,#C89B3C); border-radius:10px; padding:20px; font-size:13px; color:var(--forest,#2E4034); align-self:start; }
@media (max-width:720px){ .zayed-form-layout-sidebar-info{ grid-template-columns:1fr; } .zayed-form-layout-sidebar-info::after{ display:none; } }

/* ---------- 12. Rounded Pill ---------- */
.zayed-form-layout-rounded-pill .field{ border-radius:999px; padding:10px 20px; }
.zayed-form-layout-rounded-pill button[type=submit]{ border-radius:999px; }

/* ---------- 13. Bordered Outline ---------- */
.zayed-form-layout-bordered-outline .field{ background:none; border:2px solid var(--ink,#16211B); border-radius:0; }
.zayed-form-layout-bordered-outline button[type=submit]{ border-radius:0; }

/* ---------- 14. Compact Dense ---------- */
.zayed-form-layout-compact-dense .field{ padding:6px 10px; margin-bottom:10px !important; }
.zayed-form-layout-compact-dense .field label{ font-size:9.5px; }
.zayed-form-layout-compact-dense .field select,
.zayed-form-layout-compact-dense .field input,
.zayed-form-layout-compact-dense .field textarea{ font-size:13px; }

/* ---------- 15. Large Hero ---------- */
.zayed-form-layout-large-hero{ max-width:640px; margin:0 auto; }
.zayed-form-layout-large-hero .field{ padding:16px 20px; margin-bottom:22px !important; }
.zayed-form-layout-large-hero .field label{ font-size:13px; }
.zayed-form-layout-large-hero .field select,
.zayed-form-layout-large-hero .field input,
.zayed-form-layout-large-hero .field textarea{ font-size:17px; }
.zayed-form-layout-large-hero button[type=submit]{ display:block; width:100%; padding:16px; font-size:16px; }

/* ---------- 16. Accent Rail ---------- */
.zayed-form-layout-accent-rail .field{ border-left:4px solid var(--gold,#C89B3C); border-radius:0 8px 8px 0; }

/* ---------- 17. Bubble Chat ---------- */
.zayed-form-layout-bubble-chat .field{ border-radius:16px 16px 16px 3px; background:var(--sand,#F4EFE4); border-color:transparent; }
.zayed-form-layout-bubble-chat button[type=submit]{ border-radius:16px 16px 3px 16px; }

/* ---------- 18. Paper Ticket ---------- */
.zayed-form-layout-paper-ticket .field{ border-style:dashed; border-color:var(--gold,#C89B3C); background:#fffdf7; }

/* ---------- 19. Gradient Accent ---------- */
.zayed-form-layout-gradient-accent .field{ position:relative; }
.zayed-form-layout-gradient-accent .field::before{ content:''; position:absolute; top:-1px; left:8px; right:8px; height:3px; border-radius:0 0 3px 3px; background:linear-gradient(90deg,var(--gold,#C89B3C),var(--forest,#2E4034)); opacity:0; transition:opacity .15s; }
.zayed-form-layout-gradient-accent .field:focus-within::before{ opacity:1; }
.zayed-form-layout-gradient-accent .field:focus-within{ box-shadow:0 0 0 3px rgba(200,155,60,.18); }

/* ---------- 20. Minimal Flat ---------- */
.zayed-form-layout-minimal-flat .field{ border:none; background:var(--sand,#F4EFE4); }
.zayed-form-layout-minimal-flat .field:focus-within{ background:#ecdfc2; }

/* ---------- 21. Split Testimonial ---------- */
.zayed-form-layout-split-testimonial{ display:grid; grid-template-columns:1.4fr 1fr; gap:0; border-radius:14px; overflow:hidden; box-shadow:0 8px 24px rgba(22,33,27,.1); }
.zayed-form-layout-split-testimonial form{ grid-column:1; padding:28px; }
.zayed-form-layout-split-testimonial .booking-alert{ grid-column:1; margin:20px 20px 0; }
.zayed-form-layout-split-testimonial::after{ content:'\201C'; grid-column:2; grid-row:1/-1; background:var(--forest,#2E4034); color:var(--gold,#C89B3C); font-size:64px; line-height:1; display:flex; align-items:center; justify-content:center; min-height:220px; }
@media (max-width:640px){ .zayed-form-layout-split-testimonial{ grid-template-columns:1fr; } .zayed-form-layout-split-testimonial::after{ display:none; } .zayed-form-layout-split-testimonial form,.zayed-form-layout-split-testimonial .booking-alert{ grid-column:1; } }

/* ---------- 22. Neumorphic ---------- */
.zayed-form-layout-neumorphic{ background:var(--sand,#F4EFE4); padding:24px; border-radius:16px; }
.zayed-form-layout-neumorphic .field{ background:var(--sand,#F4EFE4); border:none; box-shadow:4px 4px 8px rgba(22,33,27,.12), -4px -4px 8px rgba(255,255,255,.9); }
.zayed-form-layout-neumorphic button[type=submit]{ box-shadow:4px 4px 8px rgba(22,33,27,.18), -4px -4px 8px rgba(255,255,255,.7); }

/* ---------- 23. Magazine Serif ---------- */
.zayed-form-layout-magazine-serif .field{ border:none; border-bottom:1px solid #ddd; border-radius:0; background:none; padding:10px 2px 8px; }
.zayed-form-layout-magazine-serif .field label{ font-family:Georgia,'Times New Roman',serif; text-transform:none; letter-spacing:0; font-size:13px; font-weight:400; font-style:italic; }
.zayed-form-layout-magazine-serif .field + .field{ margin-top:6px; }

/* ---------- 24. Full-Width Centered ---------- */
.zayed-form-layout-full-width-centered{ max-width:480px; margin:0 auto; background:#fff; padding:28px; border-radius:12px; }

/* ============================================================
   GUI-setting overrides (Design panel: Columns / Button alignment /
   Label position). Applied on top of whichever layout is active.
   ============================================================ */
.zf-cols-2 form{ display:grid; grid-template-columns:1fr 1fr; gap:12px 16px; }
.zf-cols-2 .field:has(textarea),
.zf-cols-2 .field:has(.zayed-form__options),
.zf-cols-2 .field:has(.zayed-form__name-row){ grid-column:1 / -1; }
.zf-cols-2 button[type=submit]{ grid-column:1 / -1; }
.zf-cols-1 form{ display:block; }

.zf-btn-left button[type=submit]{ display:block; margin-right:auto; }
.zf-btn-center button[type=submit]{ display:block; margin-left:auto; margin-right:auto; }
.zf-btn-right button[type=submit]{ display:block; margin-left:auto; }
.zf-btn-full button[type=submit]{ display:block; width:100%; }

.zf-label-hidden .field label{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
.zf-label-floating .field{ position:relative; padding-top:16px; }
.zf-label-floating .field label{ position:absolute; top:-9px; left:10px; background:#fff; padding:0 6px; font-size:10px; }

/* ============================================================
   Paged layouts (Conversational / Stepped Wizard) — nav bar and
   progress strip injected by contact-forms.js
   ============================================================ */
.zf-steps-nav{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:16px; }
.zf-steps-progress{ font-size:12px; color:#7c8578; font-weight:600; letter-spacing:.04em; text-transform:uppercase; }
.zf-steps-bar{ height:4px; border-radius:2px; background:var(--line,rgba(22,33,27,.12)); margin-bottom:20px; overflow:hidden; }
.zf-steps-bar i{ display:block; height:100%; background:var(--gold,#C89B3C); transition:width .2s ease; }
.zf-step-back,.zf-step-next{ border:1px solid var(--line-strong,#cccccc); background:#fff; border-radius:8px; padding:8px 16px; cursor:pointer; font-weight:600; font-size:13px; }
.zf-step-next{ background:var(--gold,#C89B3C); border-color:var(--gold,#C89B3C); color:#fff; }

/* Validation */
.contact-form-row.is-invalid input,
.contact-form-row.is-invalid textarea,
.contact-form-row.is-invalid select,
.field.is-invalid input,
.field.is-invalid textarea,
.field.is-invalid select,
.eddy-form__field.is-invalid input,
.eddy-form__field.is-invalid textarea,
.zaycapture.is-invalid,
.contact-form-row.is-invalid .zaycapture {
  border-color: #c0392b !important;
  box-shadow: 0 0 0 3px rgba(192,57,43,0.12);
}
.field-error {
  color: #8a1f1f;
  font-size: 0.85rem;
  margin: 6px 0 0;
}
.contact-form-row .req,
.field .req { color: #c0392b; }

.contact-consent,
.eddy-form__consent {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 0.92rem;
  line-height: 1.5;
  cursor: pointer;
}
.contact-consent input,
.eddy-form__consent input {
  margin-top: 3px;
  flex-shrink: 0;
}

.booking-alert {
  padding: 14px 16px;
  border-radius: 10px;
  margin-bottom: 18px;
  font-size: 0.95rem;
}
.booking-alert--success {
  background: rgba(10,77,60,0.1);
  color: #063328;
  border: 1px solid rgba(10,77,60,0.2);
}
.booking-alert--error {
  background: rgba(220,50,50,0.08);
  color: #8a1f1f;
  border: 1px solid rgba(220,50,50,0.2);
}