/* Odisal Sections: the enquiry form used by the Contact Card and Contact page widgets.
   The form is plain HTML that the Odisal Enquiry Form plugin sends (data-odisal-style="soft" gives its soft boxes);
   the same look is repeated here so the form looks right before (or without) that plugin's script.
   Colours: the widget may set --_accent and --_label on an outer element; otherwise the site accent and quiet text. */
.osx-contact-enq { position: relative; display: grid; gap: 18px; margin: 0;
  --_fa: var(--_accent, var(--osx-accent)); --_fl: var(--_label, var(--osx-muted));
  --odq-accent: var(--_fa); --odq-text: var(--osx-text); --odq-label: var(--_fl); --odq-fill: rgba(255,255,255,.06); --odq-fill-focus: rgba(255,255,255,.09);
  --odq-line: rgba(255,255,255,.1); --odq-drop-line: rgba(255,255,255,.3); --odq-drop-fill: color-mix(in srgb, var(--_fa) 6%, transparent); --odq-icon-fill: color-mix(in srgb, var(--_fa) 14%, transparent); --odq-radius: 14px; }
.osx-contact-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.osx-contact-f { position: relative; display: block; margin: 0; }
.osx-contact-f > span { position: absolute; left: 17px; top: 17px; z-index: 1; max-width: calc(100% - 34px); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font: 300 15px/1.2 var(--osx-body); color: var(--_fl); pointer-events: none; transform-origin: left top; transition: transform 200ms var(--osx-ease-out), color 200ms ease; }
/* Four classes deep so a site-wide form style (an Elementor kit's, for one) doesn't win */
.osx .osx-contact-enq.osx-contact-enq .osx-contact-f :is(input, select, textarea) { display: block; width: 100%; margin: 0; padding: 26px 16px 9px; border: 0; border-radius: 14px; background-color: rgba(255,255,255,.06); box-shadow: inset 0 0 0 1px rgba(255,255,255,.1); color: var(--osx-text); font: 300 16px/1.4 var(--osx-body); transition: box-shadow 200ms ease, background-color 200ms ease; }
.osx-contact-enq textarea { min-height: 110px; resize: vertical; }
.osx .osx-contact-enq.osx-contact-enq .osx-contact-f select { -webkit-appearance: none; appearance: none; padding-right: 38px; }
.osx-contact-enq select option { color: #222; }
.osx-contact-f:has(select)::after { content: ""; position: absolute; right: 14px; top: 50%; width: 14px; height: 14px; margin-top: -7px; background: var(--_fa); pointer-events: none;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat; }
.osx-contact-enq.odq-soft .osx-contact-f:has(select)::after { content: none; } /* the plugin draws its own arrow */
.osx .osx-contact-enq.osx-contact-enq .osx-contact-f :is(input, select, textarea):focus { outline: none; border: 0; background-color: rgba(255,255,255,.09); box-shadow: inset 0 0 0 1.5px var(--_fa); }
.osx-contact-f:has(:focus) > span, .osx-contact-f:has(input:not(:placeholder-shown), textarea:not(:placeholder-shown)) > span, .osx-contact-f:has(select) > span { transform: translateY(-9px) scale(.76); }
.osx-contact-f:has(:focus) > span { color: var(--_fa); }
.osx-contact-enq [aria-invalid="true"], .osx-contact-enq.is-tried :invalid { box-shadow: inset 0 0 0 1.5px var(--osx-accent-2); }

/* Photos drop box (optional) */
.osx-contact-drop { position: relative; display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: 14px; border: 1px dashed rgba(255,255,255,.3); cursor: pointer; transition: border-color 200ms ease, background-color 200ms ease; }
.osx-contact-drop input { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; padding: 0; opacity: 0; cursor: pointer; }
.osx-contact-drop i { display: grid; place-items: center; width: 42px; height: 42px; flex: none; border-radius: 50%; background: color-mix(in srgb, var(--_fa) 14%, transparent); color: var(--_fa); font-style: normal; }
.osx-contact-drop .osx-ico { width: 18px; height: 18px; stroke-width: 2.4; }
.osx-contact-drop > span { display: grid; gap: 3px; min-width: 0; }
.osx .osx-contact-drop b { font: 400 15px/1.2 var(--osx-head); color: var(--osx-text); }
.osx .osx-contact-drop small { font: 300 12.5px/1.4 var(--osx-body); color: var(--_fl); }
.osx-contact-drop.odq-over, .osx-contact-drop:focus-within { border-color: var(--_fa); background: color-mix(in srgb, var(--_fa) 6%, transparent); }
@media (hover: hover) and (pointer: fine) { .osx-contact-drop:hover { border-color: var(--_fa); background: color-mix(in srgb, var(--_fa) 6%, transparent); } }

/* The send button: the shared pill, then sending (label blurs) and sent */
.osx .osx-contact-send { justify-self: start; background: var(--_fa); transition: transform 160ms var(--osx-ease-out), background-color 250ms ease, color 250ms ease; }
/* A theme's button:hover / :focus colours would otherwise take over */
.osx .osx-contact-send:is(:hover, :focus) { background-color: var(--_fa); color: var(--osx-dark); }
.osx-contact-send:disabled { cursor: progress; }
.osx-contact-lbl { display: inline-block; transition: opacity 200ms ease, filter 200ms ease; }
.osx-contact-send.is-busy .osx-contact-lbl { opacity: .5; filter: blur(2px); }
.osx .osx-contact-send.is-sent { background: #2e6b4f; color: #fff; cursor: default; }
.osx-contact-send.is-sent::after { display: none; }
@keyframes osx-contact-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.osx-contact-done { font-size: 13px; color: var(--_fa); animation: osx-contact-rise 400ms var(--osx-ease-out) both; }
.osx-contact-done.is-fail { color: color-mix(in srgb, var(--osx-accent-2) 45%, #fff); }

@media (max-width: 560px) {
  .osx-contact-row { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .osx-contact-f > span, .osx .osx-contact-enq.osx-contact-enq .osx-contact-f :is(input, select, textarea), .osx-contact-drop { transition: none; }
  .osx-contact-done { animation: none; }
}