/*
 * OOXFLOW theme — our adjustments on top of the Softec pack.
 * Hand-edited HERE; `node scripts/build-ooxflow-site-theme.mjs` copies it to
 * public/platform-themes/ooxflow/assets/css/ooxflow-overrides.css (loaded last).
 */

/* ── Header logo (owner 2026-10-18): clean logo on top, the "Online POS…" line
      and the rebrand notice live in the footer only. ─────────────────────── */
header .oox-brand,
.tpoffcanvas .oox-brand { width: auto; gap: 0; }
header .oox-brand > img { width: 172px; max-width: none; }
.tpoffcanvas .oox-brand > img { width: 160px; }
@media (max-width: 1023px) {
  header .oox-brand > img { width: 148px; }
}

/* ── Help assistant skin ──────────────────────────────────────────────────
 * The platform help widget (HelpWidget + the shared chat popup) is light by
 * design; inside the OOXFLOW theme it is wrapped in .oox-help-skin and
 * recoloured to the theme's dark glass + cyan→violet light. Only colours
 * change — layout, behaviour and the verification flow are the widget's own.
 */
.oox-help-skin {
  --oh-bg: #0e1220;
  --oh-surface: #141a2c;
  --oh-field: #0a0e1a;
  --oh-line: rgba(255, 255, 255, 0.10);
  --oh-line-strong: rgba(255, 255, 255, 0.18);
  --oh-ink: #eef1ff;
  --oh-ink-2: #c3cbe0;
  --oh-muted: #8f9ab6;
  --oh-cyan: #25b8ff;
  --oh-violet: #b04dff;
  --oh-grad: linear-gradient(120deg, #1983cb 0%, #8045db 70%, #a34ae5 100%);
  font-family: 'Onest', ui-sans-serif, system-ui, sans-serif;
}

/* Surfaces */
.oox-help-skin .bg-white { background-color: var(--oh-bg) !important; }
.oox-help-skin [class~="bg-[#F4F5F8]"] { background-color: #090c16 !important; }
.oox-help-skin .rounded-2xl.shadow-2xl {
  box-shadow: 0 24px 60px -12px rgba(0, 0, 0, 0.75), 0 0 0 1px var(--oh-line), 0 0 40px -10px rgba(37, 184, 255, 0.25) !important;
}

/* Gradient pieces: launcher, panel header, primary buttons, your own bubbles */
.oox-help-skin .bg-gradient-to-r { background-image: var(--oh-grad) !important; }
.oox-help-skin button.rounded-full.bg-gradient-to-r {
  box-shadow: 0 10px 30px -6px rgba(37, 184, 255, 0.55), 0 0 0 1px rgba(255, 255, 255, 0.12) inset !important;
}

/* Rings / borders */
.oox-help-skin .ring-slate-200,
.oox-help-skin .ring-slate-300 { --tw-ring-color: var(--oh-line) !important; }
.oox-help-skin .ring-indigo-200,
.oox-help-skin .ring-indigo-300 { --tw-ring-color: rgba(37, 184, 255, 0.35) !important; }
.oox-help-skin .border-slate-200\/70 { border-color: var(--oh-line) !important; }
.oox-help-skin .ring-white { --tw-ring-color: var(--oh-bg) !important; }

/* Text */
.oox-help-skin .text-slate-900,
.oox-help-skin .text-slate-800 { color: var(--oh-ink) !important; }
.oox-help-skin .text-slate-700,
.oox-help-skin .text-slate-600 { color: var(--oh-ink-2) !important; }
.oox-help-skin .text-slate-500,
.oox-help-skin .text-slate-400 { color: var(--oh-muted) !important; }
.oox-help-skin .text-indigo-600,
.oox-help-skin .text-indigo-700 { color: #6dcfff !important; }
.oox-help-skin .hover\:text-indigo-800:hover,
.oox-help-skin .hover\:text-indigo-700:hover,
.oox-help-skin .hover\:text-slate-900:hover,
.oox-help-skin .hover\:text-slate-800:hover,
.oox-help-skin .hover\:text-slate-700:hover { color: #ffffff !important; }

/* Soft tinted chips / cards */
.oox-help-skin .bg-indigo-50 { background-color: rgba(37, 184, 255, 0.12) !important; }
.oox-help-skin .hover\:bg-indigo-50:hover,
.oox-help-skin .hover\:bg-indigo-100:hover,
.oox-help-skin .hover\:bg-slate-100:hover { background-color: rgba(37, 184, 255, 0.18) !important; }
.oox-help-skin .bg-violet-50 { background-color: rgba(176, 77, 255, 0.16) !important; }
.oox-help-skin .text-violet-700 { color: #d9a8ff !important; }
.oox-help-skin .ring-violet-200 { --tw-ring-color: rgba(176, 77, 255, 0.4) !important; }
.oox-help-skin .bg-emerald-50 { background-color: rgba(98, 230, 207, 0.12) !important; }
.oox-help-skin .text-emerald-700 { color: #62e6cf !important; }
.oox-help-skin .ring-emerald-200 { --tw-ring-color: rgba(98, 230, 207, 0.35) !important; }
.oox-help-skin .bg-amber-50 { background-color: rgba(251, 191, 36, 0.12) !important; }
.oox-help-skin .text-amber-800 { color: #fcd34d !important; }
.oox-help-skin .ring-amber-200 { --tw-ring-color: rgba(251, 191, 36, 0.35) !important; }
.oox-help-skin .bg-rose-50 { background-color: rgba(244, 63, 94, 0.14) !important; }
.oox-help-skin .text-rose-700 { color: #fda4af !important; }

/* Fields */
.oox-help-skin input:not([type="checkbox"]),
.oox-help-skin textarea {
  background-color: var(--oh-field) !important;
  color: var(--oh-ink) !important;
  --tw-ring-color: var(--oh-line-strong) !important;
}
.oox-help-skin input::placeholder,
.oox-help-skin textarea::placeholder { color: #6b7591 !important; }
.oox-help-skin input:focus,
.oox-help-skin textarea:focus { --tw-ring-color: rgba(37, 184, 255, 0.65) !important; }
.oox-help-skin input[type="checkbox"] { accent-color: var(--oh-cyan); }

/* ── Two support addresses during the name change (Contact → Second support email) ── */
.oox-email-note {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  line-height: 18px;
  color: #9aa6c2;
}
.oox-email-sep { color: #6b7591; }
.oox-email-help {
  font-size: 13px;
  line-height: 21px;
  color: #b8c6dc;
  margin: 0 0 12px;
}

/* ── Small line under the header logo (Brand → "Line under the header logo") ──
      Owner 2026-10-18: bigger, centred under the whole logo. */
header .oox-brand,
.tpoffcanvas .oox-brand { display: inline-flex; flex-direction: column; align-items: center; }
.oox-logo-note {
  display: block;
  width: 100%;
  margin-top: 5px;
  text-align: center;
  font: 600 13.5px/1.1 'Onest', ui-sans-serif, system-ui, sans-serif;
  letter-spacing: 0.04em;
  color: #a9b4cf;
}
@media (max-width: 1023px) {
  .oox-logo-note { font-size: 12px; margin-top: 4px; }
}

/* ── Footer brand column (rewritten by the pack script, owner 2026-10-18) ── */
.oox-foot-brand { display: flex; flex-direction: column; gap: 14px; max-width: 420px; }
.oox-foot-brand .oox-foot-logo { display: inline-block; }
/* Footer logo = the header logo: same width, the old name centred under it, same size. */
.oox-foot-brand .oox-brand { display: inline-flex; flex-direction: column; align-items: center; gap: 0; width: auto; }
.oox-foot-brand .oox-brand > img { width: 172px; max-width: none; }
.oox-foot-blurb { margin: 0; font-size: 14px; line-height: 22px; color: #c3cbe0; }
.oox-foot-rename {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  align-self: flex-start;
  margin: 0;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(37, 184, 255, 0.08);
  box-shadow: inset 0 0 0 1px rgba(37, 184, 255, 0.22);
  font-size: 13px;
  line-height: 18px;
  color: #b8c6dc;
}
.oox-foot-rename i { color: #25b8ff; font-size: 12px; }
.oox-foot-rename strong { color: #eef1ff; font-weight: 600; }

/* Header: the old name after "Start free" (Brand → "Line under the header logo"; blank = gone). */
.oox-head-oldname {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 36px;
  margin-left: 12px;
  padding: 0 14px;
  border-radius: 999px;
  white-space: nowrap;
  font: 600 13.5px/1 'Onest', ui-sans-serif, system-ui, sans-serif;
  letter-spacing: 0.02em;
  color: #a9b4cf;
  background: rgba(255, 255, 255, 0.04);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14);
}
.oox-head-oldname i { color: #6dcfff; font-size: 12px; }
@media (max-width: 767px), (min-width: 1024px) and (max-width: 1119px) {
  /* Phones: "Start free" lives in the menu. Narrow laptops: the full menu needs the room.
     The old name stays under the logo in both. */
  .oox-head-oldname { display: none; }
}
.oox-foot-label {
  margin: 0 0 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #6dcfff;
}
.oox-foot-contact ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 7px; }
.oox-foot-contact li { display: flex; align-items: center; gap: 9px; font-size: 14px; color: #eef1ff; }
.oox-foot-contact li i { width: 16px; text-align: center; color: #25b8ff; }
.oox-foot-contact a { color: #eef1ff; text-decoration: none; word-break: break-word; }
.oox-foot-contact a:hover { color: #6dcfff; text-decoration: underline; }
.oox-foot-copy { color: #8f9ab6; }