/* ==========================================================================
   Contact us — page-specific styles (loaded after style.css)
   ========================================================================== */

/* ---------- Get in touch: left half white (details) · right half blue (form) ----------
   The 90deg split sits at the page centre; the centred container's two columns
   meet at the same line, so each half reads as full-bleed white / blue. */
.contact-intro {
  background: linear-gradient(90deg, var(--white) 0 50%, var(--blue) 50% 100%);
}
.contact-intro-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  align-items: stretch;
}
.contact-intro-text { padding: 72px 56px 72px 0; }
.contact-intro-text p { font-size: 16px; line-height: 1.5; }
.contact-intro-text .btn { margin-top: 6px; }

/* contact detail list with inline icons */
.contact-details { list-style: none; margin: 32px 0 0; padding: 0; }
.contact-details li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 16px;
  font-size: 16px;
  line-height: 1.4;
  color: var(--body);
}
.contact-details a:hover { color: var(--blue); text-decoration: underline; }
.contact-ico { flex: 0 0 auto; color: var(--blue); margin-top: 1px; }

/* ---------- Blue form panel ---------- */
.contact-form-panel {
  background: var(--blue);
  color: #fff;
  padding: 72px 0 72px 56px;
}
.contact-form-title {
  color: #fff;
  font-size: 20px;          /* match the "Get in touch with us" eyebrow */
  font-weight: 700;
  margin: 0 0 22px;
}
.contact-form { display: grid; gap: 16px; }
.contact-form .field { display: flex; flex-direction: column; gap: 6px; }
.contact-form .field span { font-size: 14px; color: rgba(255,255,255,.85); }
.contact-form input,
.contact-form textarea {
  font: inherit;
  font-size: 15px;
  color: #fff;
  background: transparent;             /* no field background */
  border: 1px solid rgba(255,255,255,.35);
  border-top: 0;                       /* no top edge */
  border-radius: 0;                    /* square corners */
  padding: 11px 14px;
  width: 100%;
  transition: border-color .2s;
}
.contact-form textarea { resize: vertical; }
.contact-form input::placeholder,
.contact-form textarea::placeholder { color: rgba(255,255,255,.5); }
.contact-form input:focus,
.contact-form textarea:focus {
  outline: none;
  border-color: #fff;
}
.contact-form .btn { margin-top: 6px; justify-self: start; }
/* outline by default; fills white with 100% blue text on rollover */
.contact-form .btn.btn-light:hover { background: #fff; color: var(--blue); }
.contact-form-note { font-size: 14px; color: rgba(255,255,255,.85); margin: 4px 0 0; }

/* ---------- Gravity Forms — restyle the embedded form to match the blue panel ----------
   The contact form is rendered by Gravity Forms, which ships its own theme CSS.
   These rules override that output so the fields/button look like the original
   hand-coded .contact-form. Scoped to .contact-form-panel; !important on the key
   visual props so they win regardless of GF stylesheet load order. Works with both
   the "gravity-theme" and "orbital" GF renderings. */
.contact-form-panel .gform_wrapper,
.contact-form-panel .gform_wrapper.gravity-theme { color: #fff; }

/* field grid + spacing */
.contact-form-panel .gform_wrapper .gform_fields {
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 16px !important;
}
.contact-form-panel .gform_wrapper .gfield { margin: 0 !important; padding: 0 !important; }

/* labels */
.contact-form-panel .gform_wrapper .gfield_label {
  color: rgba(255,255,255,.85) !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  margin: 0 0 6px !important;
  letter-spacing: 0;
}
.contact-form-panel .gform_wrapper .gfield_required { color: rgba(255,255,255,.85) !important; }

/* text inputs, email, phone, textarea — transparent, white text, square, no top edge */
.contact-form-panel .gform_wrapper input:not([type=submit]):not([type=button]):not([type=image]):not([type=checkbox]):not([type=radio]),
.contact-form-panel .gform_wrapper textarea {
  font: inherit !important;
  font-size: 15px !important;
  color: #fff !important;
  background: transparent !important;
  border: 1px solid rgba(255,255,255,.35) !important;
  border-top: 0 !important;
  border-radius: 0 !important;
  padding: 11px 14px !important;
  width: 100% !important;
  box-shadow: none !important;
  transition: border-color .2s;
}
.contact-form-panel .gform_wrapper textarea { resize: vertical; min-height: 116px; }
.contact-form-panel .gform_wrapper input::placeholder,
.contact-form-panel .gform_wrapper textarea::placeholder { color: rgba(255,255,255,.5) !important; }
.contact-form-panel .gform_wrapper input:focus,
.contact-form-panel .gform_wrapper textarea:focus {
  outline: none !important;
  border-color: #fff !important;
  box-shadow: none !important;
}
/* GF wraps some inputs (email/phone) in a container that can add its own spacing */
.contact-form-panel .gform_wrapper .ginput_container { margin-top: 0 !important; }

/* field description + validation text kept legible on the blue background */
.contact-form-panel .gform_wrapper .gfield_description { color: rgba(255,255,255,.7) !important; }
.contact-form-panel .gform_wrapper .gfield_validation_message,
.contact-form-panel .gform_wrapper .validation_message {
  color: #ffe0e0 !important;
  background: transparent !important;
  border: 0 !important;
  padding: 4px 0 0 !important;
  font-size: 13px !important;
}
.contact-form-panel .gform_wrapper .gfield_error input,
.contact-form-panel .gform_wrapper .gfield_error textarea { border-color: #ffb4b4 !important; }
.contact-form-panel .gform_wrapper .gform_validation_errors {
  background: rgba(255,255,255,.1) !important;
  border: 1px solid rgba(255,255,255,.35) !important;
  color: #fff !important;
  box-shadow: none !important;
}
.contact-form-panel .gform_wrapper .gform_validation_errors * { color: #fff !important; }

/* submit button — matches .btn.btn-light (white outline pill, inverts on hover) */
.contact-form-panel .gform_wrapper .gform_footer { margin: 6px 0 0 !important; padding: 0 !important; }
.contact-form-panel .gform_wrapper .gform_footer input[type=submit],
.contact-form-panel .gform_wrapper .gform_footer button,
.contact-form-panel .gform_wrapper .gform_button {
  display: inline-block !important;
  font-family: inherit !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  color: #fff !important;
  background: transparent !important;
  border: 2px solid #fff !important;
  border-radius: 25px !important;
  padding: 12px 28px !important;
  width: auto !important;
  cursor: pointer;
  transition: background-color .25s, color .25s, border-color .25s;
}
.contact-form-panel .gform_wrapper .gform_footer input[type=submit]:hover,
.contact-form-panel .gform_wrapper .gform_footer button:hover,
.contact-form-panel .gform_wrapper .gform_button:hover {
  background: #fff !important;
  color: var(--blue) !important;
}

/* AJAX confirmation message shown in place of the form after submit */
.contact-form-panel .gform_confirmation_message { color: #fff; font-size: 16px; line-height: 1.5; }

/* ---------- "Our expertise in the retail sector:" spacing before the cards ---------- */
.support-sub { margin-bottom: 25px; }

/* ---------- Map band ---------- */
.contact-map { position: relative; background: var(--blue); }
.contact-map iframe { display: block; width: 100%; height: 460px; border: 0; }
.contact-map-addr {
  margin: 0;
  background: var(--blue);
  color: var(--white);
  text-align: center;
  font-size: 16px;
  padding: 22px 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.contact-map-addr .contact-ico { color: var(--white); }

/* ---------- Responsive ---------- */
@media (max-width: 860px) {
  /* stack the split: white block then blue form block, each full width */
  .contact-intro { background: none; }
  .contact-intro-grid { grid-template-columns: 1fr; }
  .contact-intro-text { padding: 56px 0 36px; }
  .contact-form-panel {
    padding: 40px 24px;
    margin: 0 -5vw;            /* bleed to the screen edges on mobile */
  }
  .contact-map iframe { height: 360px; }
}
@media (max-width: 760px) {
  .contact-map-addr { flex-direction: column; gap: 6px; }
}