/* ═══════════════════════════════════════════════════════════════
   PUTIH DCARIK — Contact Form 7
   ═══════════════════════════════════════════════════════════════

   Deliberately short. The form template is the design's own markup, so
   `.pd-field`, the labels and the submit button are already styled by
   main.css. All this file does is:

     1. lay the seven fields out on the grid (main.css sizes the original
        four-field placeholder, which no longer matches),
     2. neutralise the wrapper <span> CF7 puts around every control,
     3. hide the honeypot,
     4. make CF7's validation and response messages legible on the dark ground.

   CF7's own stylesheet is off (wpcf7_load_css), so nothing here is fighting it.
   ═══════════════════════════════════════════════════════════════ */

/* ── Grid ─────────────────────────────────────────────────────────────────
   Four quarters on the top row (dates, guests, room), then name + email as
   halves, then message and the button full width. */
.pd-form{
  grid-template-columns: repeat(4, minmax(0, 1fr));
}
.pd-field--half{ grid-column: span 2; }
.pd-field--full{ grid-column: 1 / -1; }
.pd-form .pd-form__submit{ grid-column: 1 / -1; }

@media (max-width: 900px){
  .pd-form{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pd-field--half{ grid-column: span 1; }
}
@media (max-width: 620px){
  .pd-form{ grid-template-columns: 1fr; }
  .pd-field--half{ grid-column: 1 / -1; }
}

/* ── CF7's own children of <form> ─────────────────────────────────────────
   CF7 puts two non-field elements directly inside the form: a <fieldset> of
   hidden inputs, and the response-output div. Both are grid items, so left
   alone the fieldset takes the first cell and pushes every field one place
   along — the whole form renders offset by one.

   The fieldset carries only hidden inputs, so hiding it costs nothing; the
   response output has to stay visible and simply spans the full width. */
.pd-form > .hidden-fields-container{ display: none; }

.pd-form > .wpcf7-response-output{ grid-column: 1 / -1; }

/* It ships empty and only fills on submit. Empty, its border and background
   render as a stray bar under the button. */
.pd-form > .wpcf7-response-output:empty{ display: none; }

/* ── CF7 wrappers ─────────────────────────────────────────────────────────
   CF7 wraps each control in <span class="wpcf7-form-control-wrap">. Left as
   an inline span it breaks the field's grid; `display: contents` removes it
   from layout without removing it from the DOM, which CF7 needs for
   validation messages. */
.pd-field .wpcf7-form-control-wrap{ display: contents; }

.pd-form .wpcf7-form-control{ width: 100%; }

/* The design already styles .pd-field input / select; the textarea is new. */
.pd-form textarea{
  background: none;
  border: 0;
  padding: 0;
  width: 100%;
  font-family: var(--serif);
  font-size: 1rem;
  line-height: 1.5;
  color: var(--paper);
  resize: vertical;
  min-height: 4.5em;
}
.pd-form textarea:focus{ outline: none; }
.pd-form ::placeholder{ color: var(--light-48); opacity: 1; }

/* Native date inputs on a dark ground. */
.pd-form input[type="date"]{ color-scheme: dark; }

/* ── Honeypot ─────────────────────────────────────────────────────────────
   Not `display: none`: some bots skip hidden inputs, and a few screen readers
   still announce them. Taken out of flow, out of the tab order (tabindex=-1 in
   the markup) and hidden from the accessibility tree (aria-hidden). */
.pd-trap{
  position: absolute !important;
  left: -9999px !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ── The screen-reader live region ────────────────────────────────────────
   CF7 emits `.screen-reader-response`, a role="status" aria-live region that
   announces the outcome, plus a list of validation errors. Its own stylesheet
   is what visually hides it — and that stylesheet is off — so without this the
   confirmation prints twice: once as raw text above the form, once in the
   styled box below.

   Visually hidden, NOT display:none. Hiding it outright would take it out of
   the accessibility tree and the result would stop being announced, which is
   the one thing AGENTS.md §11 explicitly asks to check. */
.wpcf7 .screen-reader-response{
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ── Messages ─────────────────────────────────────────────────────────────
   CF7 announces these itself (it manages aria-live); this only makes them
   readable against the dark ground. */
.pd-form .wpcf7-not-valid-tip{
  font-family: var(--sans);
  font-size: var(--fs-micro);
  letter-spacing: .06em;
  color: #F0B7A0;
  margin-top: .35rem;
}

.pd-form .wpcf7-not-valid{ box-shadow: none; }
.pd-field:has(.wpcf7-not-valid) label{ color: #F0B7A0; }

.wpcf7 .wpcf7-response-output{
  margin: 1.2rem 0 0;
  padding: .9rem 1.2rem;
  border: 1px solid var(--light-18);
  border-radius: 3px;
  font-family: var(--sans);
  font-size: var(--fs-micro);
  letter-spacing: .08em;
  color: var(--paper);
  background: rgba(18,20,15,.5);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}
.wpcf7 form.sent .wpcf7-response-output{ border-color: rgba(120,170,130,.5); }
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output,
.wpcf7 form.spam .wpcf7-response-output{ border-color: rgba(168,95,60,.7); }

/* CF7's submitting state. */
.wpcf7 form.submitting .pd-form__submit{ opacity: .6; pointer-events: none; }
.wpcf7-spinner{ margin-left: .6rem; vertical-align: middle; }