/* Odisal Sections: Quick Contact Bar. On phones (.osx-quickbar--m, set below the widget's breakpoint) a Call / WhatsApp /
   Quote bar slides up from the bottom after the first screen; the back-to-top button shows once scrolled (all widths). */
.osx-quickbar {
  --_bg: var(--osx-quickbar-bg, var(--osx-dark));
  --_quote: var(--osx-quickbar-quote, var(--osx-accent));
  --_top: var(--osx-quickbar-top, var(--osx-accent-2));
  --_top-ico: var(--osx-quickbar-top-ico, #fff);
}

.osx-quickbar-bar { display: none; }
.osx-quickbar--m .osx-quickbar-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 8px;
  padding: 8px var(--osx-gutter-r) calc(8px + env(safe-area-inset-bottom, 0px)) var(--osx-gutter-l); background: var(--_bg); border-top: 1px solid rgba(255,255,255,.15);
  transform: translateY(100%); transition: transform 350ms var(--osx-ease-drawer); }
.osx-quickbar--m .osx-quickbar-bar.is-shown { transform: none; }
.osx-quickbar-bar a { padding: 14px 4px; border: 1px solid rgba(255,255,255,.4); border-radius: 999px; color: var(--osx-text); text-align: center; text-decoration: none; font: 400 11px/1 var(--osx-label); letter-spacing: 2px; text-transform: uppercase;
  transition: transform 160ms var(--osx-ease-out), background-color 200ms ease, border-color 200ms ease, color 200ms ease; }
/* With icons: icon and label side by side, a little tighter so "WHATSAPP" still fits a 375px phone */
.osx-quickbar-bar a:has(.osx-ico) { display: flex; align-items: center; justify-content: center; gap: 7px; letter-spacing: 1.5px; }
.osx .osx-quickbar-bar .osx-ico { flex: none; width: 16px; height: 16px; stroke-width: 2; }
@media (max-width: 370px) { .osx-quickbar-bar a:has(.osx-ico) { gap: 5px; letter-spacing: 1px; } }
.osx-quickbar-bar a.osx-quickbar-quote { background: var(--_quote); border-color: var(--_quote); color: var(--osx-dark); }
.osx-quickbar-bar a:active { transform: scale(0.97); }

/* While the bar is in use the page gets room at the bottom, so it never covers the footer */
html.osx-has-quickbar body { padding-bottom: var(--osx-quickbar-h, calc(64px + env(safe-area-inset-bottom, 0px))); }

.osx-quickbar-top { position: fixed; z-index: 44; right: max(18px, env(safe-area-inset-right, 0px)); bottom: calc(18px + env(safe-area-inset-bottom, 0px)); display: grid; place-items: center; width: 44px; height: 44px; background: var(--_top); color: var(--_top-ico); text-decoration: none;
  opacity: 0; transform: translateY(10px) scale(0.95); pointer-events: none; transition: opacity 250ms var(--osx-ease-out), transform 250ms var(--osx-ease-out), background-color 200ms ease; }
.osx-quickbar-top .osx-ico { width: 18px; height: 18px; stroke-width: 2.4; }
.osx-quickbar-top.is-shown { opacity: 1; transform: none; pointer-events: auto; }
.osx-quickbar-top.is-shown:active { transform: scale(0.97); }
html.osx-has-quickbar .osx-quickbar-top { bottom: calc(var(--osx-quickbar-h, calc(64px + env(safe-area-inset-bottom, 0px))) + 18px); }

/* The header's phone menu hides both while it's open */
html.osx-menu-open .osx-quickbar { visibility: hidden; }

@media (prefers-reduced-motion: reduce) {
  .osx-quickbar-bar, .osx-quickbar-top, .osx-quickbar-top.is-shown:active, .osx-quickbar-bar a:active { transform: none !important; }
  .osx-quickbar-bar { transition: none; visibility: hidden; }
  .osx-quickbar-bar.is-shown { visibility: visible; }
  .osx-quickbar-top { transition-property: opacity, background-color; }
}

/* In the Elementor editor both parts sit in the page flow, shown, so they can be selected and edited */
.elementor-editor-active .osx-quickbar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding: 8px; }
.elementor-editor-active .osx-quickbar-bar { position: static; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 8px; flex: 1 1 280px; padding: 8px; transform: none; visibility: visible; background: var(--_bg); }
.elementor-editor-active .osx-quickbar-top { position: static; opacity: 1; transform: none; pointer-events: auto; }