/* Contact Form block – style.css (v3.6.3 - Layout Presets + Taxi Booking, real frontend grid fix) */

.pf-contact-form {
  box-sizing: border-box;
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;
  padding: var(--pf-pad, 20px);
  margin: var(--pf-margin, 0);
  color: var(--pf-text-color, #111827);
  background: var(--pf-bg-color, transparent);
  border-width: var(--pf-border-width, 0);
  border-style: var(--pf-border-style, solid);
  border-color: var(--pf-border-color, transparent);
  border-radius: var(--pf-border-radius, 8px);

  --pf-row-gap: 10px;
  --pf-col-gap: var(--pf-row-gap);
  --pf-form-cols: 1;
  --pf-title-align: left;
  --pf-btn-jc: flex-start;
  --pf-btn-fs: inherit;
  --pf-btn-pad: .55rem .9rem;
  --pf-btn-color: #ffffff;
  --pf-btn-bg: #111827;
  --pf-btn-bw: 1px;
  --pf-btn-bc: #111827;
  --pf-btn-radius: 8px;
  --pf-btn-hover-bg: ;
  --pf-btn-hover-color: ;
  --pf-btn-w: auto;
  --pf-input-h: auto;
  --pf-input-radius: 6px;
  --pf-input-pad: .55rem .65rem;
  --pf-textarea-h: 110px;
}

.pf-contact-form,
.pf-contact-form * { box-sizing: border-box; }

.pf-contact-form__title {
  margin: 0 0 1rem 0;
  font-weight: var(--pf-title-weight, 700);
  text-align: var(--pf-title-align, left);
  color: var(--pf-title-color, inherit);
  font-size: var(--pf-title-size, inherit);
  line-height: var(--pf-title-lh, normal);
  letter-spacing: var(--pf-title-ls, normal);
  text-transform: var(--pf-title-tt, none);
}

.pf-contact-form__inner.pf-form {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(var(--pf-form-cols, 1), minmax(0, 1fr));
  gap: var(--pf-row-gap, 10px) var(--pf-col-gap, var(--pf-row-gap, 10px));
}

.pf-form .pf-row,
.pf-contact-form__inner .pf-row,
.pf-contact-form__inner .pf-form__item,
.pf-contact-form__inner .pf-field {
  display: flex;
  flex-direction: column;
  gap: .35rem;
  min-width: 0;
  margin: 0;
}

.pf-form label,
.pf-contact-form__inner label {
  font-size: var(--pf-label-size, .95rem);
  font-weight: var(--pf-label-weight, 400);
  line-height: var(--pf-label-lh, normal);
  letter-spacing: var(--pf-label-ls, normal);
  text-transform: var(--pf-label-tt, none);
  color: var(--pf-label-color, #374151);
  text-align: left;
}

.pf-form input[type="text"],
.pf-form input[type="email"],
.pf-form input[type="tel"],
.pf-form input[type="number"],
.pf-form input[type="date"],
.pf-form input[type="time"],
.pf-form input[type="datetime-local"],
.pf-form textarea,
.pf-form select,
.pf-contact-form__inner input[type="text"],
.pf-contact-form__inner input[type="email"],
.pf-contact-form__inner input[type="tel"],
.pf-contact-form__inner input[type="number"],
.pf-contact-form__inner input[type="date"],
.pf-contact-form__inner input[type="time"],
.pf-contact-form__inner input[type="datetime-local"],
.pf-contact-form__inner textarea,
.pf-contact-form__inner select {
  width: 100%;
  max-width: 100%;
  min-height: var(--pf-input-h, auto);
  padding: var(--pf-input-pad, .55rem .65rem);
  border: 1px solid var(--pf-input-border-color, #d1d5db);
  border-radius: var(--pf-input-radius, 6px);
  background: var(--pf-input-bg, #fff);
  color: var(--pf-input-color, #111827);
  font-size: var(--pf-input-size, inherit);
  font-weight: var(--pf-input-weight, inherit);
  line-height: var(--pf-input-lh, normal);
  letter-spacing: var(--pf-input-ls, normal);
  text-transform: var(--pf-input-tt, none);
  outline: none;
}

.pf-form input:focus,
.pf-form select:focus,
.pf-form textarea:focus,
.pf-contact-form__inner input:focus,
.pf-contact-form__inner select:focus,
.pf-contact-form__inner textarea:focus {
  border-color: var(--pf-input-focus-border, var(--pf-input-border-color, #9ca3af));
  box-shadow: var(--pf-input-focus-shadow, none);
}

.pf-form textarea,
.pf-contact-form__inner textarea {
  min-height: var(--pf-textarea-h, 110px);
  resize: vertical;
}

.pf-form .pf-actions,
.pf-contact-form__inner .pf-actions {
  display: flex;
  gap: .5rem;
  justify-content: var(--pf-btn-jc, flex-start);
  margin-top: 0.5rem;
}

.pf-form button[type="submit"],
.pf-contact-form__inner button[type="submit"] {
  width: var(--pf-btn-w, auto);
  box-sizing: border-box;
  font-size: var(--pf-btn-fs, inherit);
  padding: var(--pf-btn-pad, .55rem .9rem);
  color: var(--pf-btn-color, #fff);
  background: var(--pf-btn-bg, #111827);
  border: var(--pf-btn-bw, 1px) solid var(--pf-btn-bc, #111827);
  border-radius: var(--pf-btn-radius, 8px);
  cursor: pointer;
  transition: opacity .2s, background .2s, color .2s, transform .2s, box-shadow .2s;
}

.pf-form button[type="submit"]:hover,
.pf-contact-form__inner button[type="submit"]:hover {
  opacity: .92;
  background: var(--pf-btn-hover-bg, var(--pf-btn-bg));
  color: var(--pf-btn-hover-color, var(--pf-btn-color));
}

.pf-form button[type="submit"] .btn-spinner {
  display: inline-block;
  width: 1rem;
  height: 1rem;
  vertical-align: text-bottom;
  border: .2em solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: spinner-border .75s linear infinite;
}
@keyframes spinner-border { to { transform: rotate(360deg); } }

/* Grid helpers */
.pf-contact-form[data-textarea-full="1"] .pf-row:has(textarea),
.pf-contact-form[data-textarea-full="1"] .pf-form__item:has(textarea),
.pf-contact-form[data-textarea-full="1"] .pf-field:has(textarea) { grid-column: 1 / -1; }

.pf-contact-form[data-actions-full="1"] .pf-actions { grid-column: 1 / -1; }
.pf-contact-form[data-hide-labels="1"] .pf-form label,
.pf-contact-form[data-hide-labels="1"] .pf-contact-form__inner label { display: none !important; }

.pf-contact-form[data-btn-icon="1"] button[type="submit"]::after {
  content: "›";
  font-size: 1.75em;
  line-height: 0;
  margin-left: .65em;
  position: relative;
  top: .05em;
}

/* Taxi booking preset */
.pf-contact-form--taxi {
  --pf-form-cols: 2;
  --pf-row-gap: 14px;
  --pf-col-gap: 22px;
  --pf-pad: 24px 28px;
  --pf-bg-color: #fffef2;
  --pf-border-width: 1px;
  --pf-border-style: solid;
  --pf-border-color: #9bcf7a;
  --pf-border-radius: 18px;
  --pf-title-color: #146b22;
  --pf-title-size: 22px;
  --pf-title-weight: 800;
  --pf-title-tt: uppercase;
  --pf-input-h: 46px;
  --pf-input-radius: 10px;
  --pf-input-pad: 0 16px;
  --pf-input-border-color: #d9d9d9;
  --pf-input-bg: #ffffff;
  --pf-input-color: #222222;
  --pf-input-size: 15px;
  --pf-textarea-h: 46px;
  --pf-btn-jc: stretch;
  --pf-btn-w: 100%;
  --pf-btn-fs: 18px;
  --pf-btn-pad: 13px 18px;
  --pf-btn-color: #111111;
  --pf-btn-bg: linear-gradient(180deg, #ffe600 0%, #ffd000 100%);
  --pf-btn-bw: 0px;
  --pf-btn-bc: transparent;
  --pf-btn-radius: 999px;
  box-shadow: 0 8px 24px rgba(0,0,0,.04);
}

.pf-contact-form--taxi .pf-contact-form__title { margin-bottom: 18px; }
.pf-contact-form--taxi label { display: none !important; }
.pf-contact-form--taxi textarea { resize: none; padding-top: 12px; }
.pf-contact-form--taxi .pf-actions { grid-column: 1 / -1; margin-top: 0; }
.pf-contact-form--taxi button[type="submit"] {
  font-weight: 800;
  box-shadow: 0 8px 18px rgba(255,205,0,.25);
}
.pf-contact-form--taxi button[type="submit"]:hover { transform: translateY(-1px); }
.pf-contact-form--taxi button[type="submit"]::after {
  content: "›";
  font-size: 32px;
  line-height: 0;
  margin-left: 18px;
  position: relative;
  top: 2px;
}

/* Alerts */
.pf-form-wrapper .pf-alert,
.pf-form .pf-alert,
.pf-alert {
  padding: 10px 14px;
  border-radius: 8px;
  margin-bottom: 12px;
  font-size: 14px;
  line-height: 1.5;
  text-align: left;
}
.pf-form-wrapper .pf-alert--ok,
.pf-form .pf-alert--ok,
.pf-alert--ok { background:#dcfce7; color:#166534; border:1px solid #86efac; }
.pf-form-wrapper .pf-alert--err,
.pf-form .pf-alert--err,
.pf-alert--err { background:#fee2e2; color:#991b1b; border:1px solid #fca5a5; }

/* Honeypot + empty label */
.pf-form .pf-robot { display:none !important; }
.pf-form input[name^="__hp_"] { position:absolute !important; left:-9999px !important; opacity:0 !important; height:0 !important; width:0 !important; pointer-events:none !important; }
.pf-form .pf-form__item > label:empty,
.pf-form .pf-row > label:empty { display:none !important; }

/* Responsive */
@media (max-width: 1024px) {
  .pf-contact-form {
    max-width: var(--pf-width-md, initial) !important;
    padding: var(--pf-pad-md, var(--pf-pad));
    --pf-form-cols: var(--pf-form-cols-md, var(--pf-form-cols));
    --pf-row-gap: var(--pf-row-gap-md, var(--pf-row-gap));
    --pf-col-gap: var(--pf-col-gap-md, var(--pf-col-gap));
    text-align: var(--pf-align-h-md, initial);
    --pf-label-size: var(--pf-label-size-md, var(--pf-label-size, .95rem));
    --pf-input-size: var(--pf-input-size-md, var(--pf-input-size, inherit));
    --pf-btn-fs: var(--pf-btn-fs-md, var(--pf-btn-fs, inherit));
  }
  .pf-contact-form .pf-contact-form__title { font-size: var(--pf-title-size-md, var(--pf-title-size, initial)) !important; }
}

@media (max-width: 640px) {
  .pf-contact-form {
    max-width: var(--pf-width-sm, initial) !important;
    padding: var(--pf-pad-sm, var(--pf-pad-md, var(--pf-pad)));
    --pf-form-cols: var(--pf-form-cols-sm, 1);
    --pf-row-gap: var(--pf-row-gap-sm, var(--pf-row-gap-md, var(--pf-row-gap)));
    --pf-col-gap: var(--pf-col-gap-sm, var(--pf-col-gap-md, var(--pf-col-gap)));
    text-align: var(--pf-align-h-sm, var(--pf-align-h-md, initial));
    --pf-label-size: var(--pf-label-size-sm, var(--pf-label-size-md, var(--pf-label-size, .95rem)));
    --pf-input-size: var(--pf-input-size-sm, var(--pf-input-size-md, var(--pf-input-size, inherit)));
    --pf-btn-fs: var(--pf-btn-fs-sm, var(--pf-btn-fs-md, var(--pf-btn-fs, inherit)));
  }
  .pf-contact-form .pf-contact-form__title { font-size: var(--pf-title-size-sm, var(--pf-title-size-md, var(--pf-title-size, initial))) !important; }
  .pf-contact-form .pf-row,
  .pf-contact-form .pf-form__item,
  .pf-contact-form .pf-field,
  .pf-contact-form .pf-actions { grid-column: 1 / -1; }
  .pf-contact-form--taxi { --pf-pad: 18px; --pf-border-radius: 14px; }
}


/* v3.6.3: Real frontend grid fix
   pf_render_form() may output: .pf-contact-form__inner wrapper > form.pf-form
   so grid must target both the wrapper itself and the nested real form. */
.pf-contact-form .pf-contact-form__inner.pf-form,
.pf-contact-form .pf-contact-form__inner form.pf-form,
.pf-contact-form .pf-contact-form__inner .pf-form {
  width: 100%;
  display: grid !important;
  grid-template-columns: repeat(var(--pf-form-cols, 1), minmax(0, 1fr)) !important;
  gap: var(--pf-row-gap, 10px) var(--pf-col-gap, var(--pf-row-gap, 10px)) !important;
}

.pf-contact-form .pf-contact-form__inner form.pf-form > .pf-row,
.pf-contact-form .pf-contact-form__inner form.pf-form > .pf-form__item,
.pf-contact-form .pf-contact-form__inner form.pf-form > .pf-field,
.pf-contact-form .pf-contact-form__inner .pf-form > .pf-row,
.pf-contact-form .pf-contact-form__inner .pf-form > .pf-form__item,
.pf-contact-form .pf-contact-form__inner .pf-form > .pf-field {
  min-width: 0;
}

.pf-contact-form[data-textarea-full="1"] .pf-contact-form__inner form.pf-form > .pf-row:has(textarea),
.pf-contact-form[data-textarea-full="1"] .pf-contact-form__inner form.pf-form > .pf-form__item:has(textarea),
.pf-contact-form[data-textarea-full="1"] .pf-contact-form__inner form.pf-form > .pf-field:has(textarea),
.pf-contact-form[data-textarea-full="1"] .pf-contact-form__inner .pf-form > .pf-row:has(textarea),
.pf-contact-form[data-textarea-full="1"] .pf-contact-form__inner .pf-form > .pf-form__item:has(textarea),
.pf-contact-form[data-textarea-full="1"] .pf-contact-form__inner .pf-form > .pf-field:has(textarea) {
  grid-column: 1 / -1;
}

.pf-contact-form[data-actions-full="1"] .pf-contact-form__inner form.pf-form > .pf-actions,
.pf-contact-form[data-actions-full="1"] .pf-contact-form__inner .pf-form > .pf-actions {
  grid-column: 1 / -1;
}

.pf-contact-form .pf-contact-form__inner form.pf-form > .pf-actions,
.pf-contact-form .pf-contact-form__inner .pf-form > .pf-actions {
  width: 100%;
}

/* Common alternative class names from form-render.php */
.pf-contact-form .pf-contact-form__inner .form-group,
.pf-contact-form .pf-contact-form__inner .form-field {
  min-width: 0;
}

@media (max-width: 1024px) {
  .pf-contact-form .pf-contact-form__inner.pf-form,
  .pf-contact-form .pf-contact-form__inner form.pf-form,
  .pf-contact-form .pf-contact-form__inner .pf-form {
    grid-template-columns: repeat(var(--pf-form-cols-md, var(--pf-form-cols, 1)), minmax(0, 1fr)) !important;
  }
}

@media (max-width: 640px) {
  .pf-contact-form .pf-contact-form__inner.pf-form,
  .pf-contact-form .pf-contact-form__inner form.pf-form,
  .pf-contact-form .pf-contact-form__inner .pf-form {
    grid-template-columns: repeat(var(--pf-form-cols-sm, 1), minmax(0, 1fr)) !important;
  }
}

/* =========================================================
   v3.6.3 — HARD FIX frontend real form columns
   Some pf_render_form() outputs nested wrappers not matching preview.
   Force grid on the most common real containers and their direct fields.
========================================================= */
.pf-contact-form .pf-contact-form__inner,
.pf-contact-form .pf-contact-form__inner > form,
.pf-contact-form .pf-contact-form__inner form.pf-form,
.pf-contact-form .pf-contact-form__inner .pf-form,
.pf-contact-form .pf-contact-form__inner .pf-form__fields,
.pf-contact-form .pf-contact-form__inner .pf-fields,
.pf-contact-form .pf-contact-form__inner .form-fields,
.pf-contact-form .pf-contact-form__inner .fields {
  display: grid !important;
  grid-template-columns: repeat(var(--pf-form-cols, 1), minmax(0, 1fr)) !important;
  column-gap: var(--pf-col-gap, 16px) !important;
  row-gap: var(--pf-row-gap, 10px) !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* If inner has only a nested form/wrapper, let the nested grid own the layout */
.pf-contact-form .pf-contact-form__inner > form,
.pf-contact-form .pf-contact-form__inner > .pf-form,
.pf-contact-form .pf-contact-form__inner > .pf-form__fields,
.pf-contact-form .pf-contact-form__inner > .pf-fields,
.pf-contact-form .pf-contact-form__inner > .form-fields,
.pf-contact-form .pf-contact-form__inner > .fields {
  grid-column: 1 / -1 !important;
}

/* Normalize direct field wrappers no matter which class form-render.php uses */
.pf-contact-form .pf-contact-form__inner .pf-row,
.pf-contact-form .pf-contact-form__inner .pf-form__item,
.pf-contact-form .pf-contact-form__inner .pf-field,
.pf-contact-form .pf-contact-form__inner .form-group,
.pf-contact-form .pf-contact-form__inner .form-field,
.pf-contact-form .pf-contact-form__inner .field,
.pf-contact-form .pf-contact-form__inner .pf-actions {
  min-width: 0 !important;
  width: 100% !important;
  box-sizing: border-box !important;
}

/* Make wrappers behave as grid items when they are direct children of the active grid */
.pf-contact-form .pf-contact-form__inner > .pf-row,
.pf-contact-form .pf-contact-form__inner > .pf-form__item,
.pf-contact-form .pf-contact-form__inner > .pf-field,
.pf-contact-form .pf-contact-form__inner > .form-group,
.pf-contact-form .pf-contact-form__inner > .form-field,
.pf-contact-form .pf-contact-form__inner > .field,
.pf-contact-form .pf-contact-form__inner > .pf-actions,
.pf-contact-form .pf-contact-form__inner form > .pf-row,
.pf-contact-form .pf-contact-form__inner form > .pf-form__item,
.pf-contact-form .pf-contact-form__inner form > .pf-field,
.pf-contact-form .pf-contact-form__inner form > .form-group,
.pf-contact-form .pf-contact-form__inner form > .form-field,
.pf-contact-form .pf-contact-form__inner form > .field,
.pf-contact-form .pf-contact-form__inner form > .pf-actions,
.pf-contact-form .pf-contact-form__inner .pf-form > .pf-row,
.pf-contact-form .pf-contact-form__inner .pf-form > .pf-form__item,
.pf-contact-form .pf-contact-form__inner .pf-form > .pf-field,
.pf-contact-form .pf-contact-form__inner .pf-form > .form-group,
.pf-contact-form .pf-contact-form__inner .pf-form > .form-field,
.pf-contact-form .pf-contact-form__inner .pf-form > .field,
.pf-contact-form .pf-contact-form__inner .pf-form > .pf-actions,
.pf-contact-form .pf-contact-form__inner .pf-form__fields > .pf-row,
.pf-contact-form .pf-contact-form__inner .pf-form__fields > .pf-form__item,
.pf-contact-form .pf-contact-form__inner .pf-form__fields > .pf-field,
.pf-contact-form .pf-contact-form__inner .pf-form__fields > .form-group,
.pf-contact-form .pf-contact-form__inner .pf-form__fields > .form-field,
.pf-contact-form .pf-contact-form__inner .pf-form__fields > .field,
.pf-contact-form .pf-contact-form__inner .pf-form__fields > .pf-actions {
  grid-column: auto !important;
}

/* Hidden/control fields must not occupy grid cells */
.pf-contact-form .pf-contact-form__inner input[type="hidden"],
.pf-contact-form .pf-contact-form__inner .pf-robot,
.pf-contact-form .pf-contact-form__inner [hidden] {
  display: none !important;
}

/* Full row controls */
.pf-contact-form[data-textarea-full="1"] .pf-contact-form__inner .pf-row:has(textarea),
.pf-contact-form[data-textarea-full="1"] .pf-contact-form__inner .pf-form__item:has(textarea),
.pf-contact-form[data-textarea-full="1"] .pf-contact-form__inner .pf-field:has(textarea),
.pf-contact-form[data-textarea-full="1"] .pf-contact-form__inner .form-group:has(textarea),
.pf-contact-form[data-textarea-full="1"] .pf-contact-form__inner .form-field:has(textarea),
.pf-contact-form[data-textarea-full="1"] .pf-contact-form__inner .field:has(textarea),
.pf-contact-form[data-actions-full="1"] .pf-contact-form__inner .pf-actions,
.pf-contact-form .pf-contact-form__inner .pf-alert {
  grid-column: 1 / -1 !important;
}

/* Responsive real form columns */
@media (max-width: 1024px) {
  .pf-contact-form .pf-contact-form__inner,
  .pf-contact-form .pf-contact-form__inner > form,
  .pf-contact-form .pf-contact-form__inner form.pf-form,
  .pf-contact-form .pf-contact-form__inner .pf-form,
  .pf-contact-form .pf-contact-form__inner .pf-form__fields,
  .pf-contact-form .pf-contact-form__inner .pf-fields,
  .pf-contact-form .pf-contact-form__inner .form-fields,
  .pf-contact-form .pf-contact-form__inner .fields {
    grid-template-columns: repeat(var(--pf-form-cols-md, var(--pf-form-cols, 1)), minmax(0, 1fr)) !important;
    column-gap: var(--pf-col-gap-md, var(--pf-col-gap, 16px)) !important;
    row-gap: var(--pf-row-gap-md, var(--pf-row-gap, 10px)) !important;
  }
}

@media (max-width: 640px) {
  .pf-contact-form .pf-contact-form__inner,
  .pf-contact-form .pf-contact-form__inner > form,
  .pf-contact-form .pf-contact-form__inner form.pf-form,
  .pf-contact-form .pf-contact-form__inner .pf-form,
  .pf-contact-form .pf-contact-form__inner .pf-form__fields,
  .pf-contact-form .pf-contact-form__inner .pf-fields,
  .pf-contact-form .pf-contact-form__inner .form-fields,
  .pf-contact-form .pf-contact-form__inner .fields {
    grid-template-columns: repeat(var(--pf-form-cols-sm, 1), minmax(0, 1fr)) !important;
    column-gap: var(--pf-col-gap-sm, var(--pf-col-gap-md, var(--pf-col-gap, 16px))) !important;
    row-gap: var(--pf-row-gap-sm, var(--pf-row-gap-md, var(--pf-row-gap, 10px))) !important;
  }
}