/* Service-call form stylesheet — shared by skymed_service_call.html and demo_service_call.html.
   Merged from fixus-homepage's main.css + theme-light.css + theme-dark.css + skymed.css,
   keeping only the rules this page's markup actually uses.
   (PrimeFlex, cookieconsent CSS still load from CDN; icons are inline SVG, see .icon below.) */

/* ---------- design tokens ---------- */
:root {
  --font-size: 14px;
  --font-family: "Varela Round", Helvetica Neue Light, Helvetica Neue, Helvetica, Arial, Lucida Grande, sans-serif;
  --primary-color: #673ab7;
  --text-color: rgba(0, 0, 0, .87);
  --text-color-secondary: rgba(0, 0, 0, .6);
  --surface-ground: #fafafa;
  --surface-card: #fff;
  --surface-100: #f5f5f5;
  --surface-200: #eee;
  --surface-500: #9e9e9e;
  --skymed-border-radius: 3px;
}
@media (prefers-color-scheme: dark) {
  :root {
    --primary-color: #9575cd;
    --text-color: hsla(0, 0%, 100%, .87);
    --text-color-secondary: hsla(0, 0%, 100%, .6);
    --surface-ground: #121212;
    --surface-card: #1e1e1e;
    --surface-100: #414141;
    --surface-200: #595959;
    --surface-500: #a0a0a0;
  }
}

/* ---------- base (from main.css) ---------- */
* { box-sizing: border-box; font-size: 16px; }
html { height: 100%; }
body, html { font-size: var(--font-size); }
body {
  margin: 0;
  padding: 0;
  min-height: 100%;
  color: var(--text-color);
  font-family: var(--font-family);
  background-color: var(--surface-ground);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.landing-body { background-color: var(--surface-ground); }
a { color: var(--primary-color); text-decoration: none; }
a:hover { text-decoration: none; }
p a { text-decoration: underline; }
p { line-height: 1.5; }
.skymed-notice { color: var(--text-color-secondary); font-size: 14px; max-width: 600px; }
h1 { font-size: 48px; }
button { cursor: pointer; }
.text-center { text-align: center; }
.p-button-text { width: 100%; }
.icon { height: 1em; width: auto; fill: currentColor; vertical-align: -0.125em; flex: none; }
.icon-spin { animation: icon-spin 1s linear infinite; }
@keyframes icon-spin { to { transform: rotate(360deg); } }

/* ---------- PrimeFlex utilities (the 4 this page uses) ---------- */
.grid { display: flex; flex-wrap: wrap; margin-top: -0.5rem; margin-right: -0.5rem; margin-left: -0.5rem; }
.col-12 { flex: 0 0 auto; width: 100%; padding: 0.5rem; }
.w-full { width: 100% !important; }
.text-lg { font-size: 1.25rem !important; }
.padded-div { width: 80%; margin: 0 auto; padding: 60px 0; }
#toast-message {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 50%;
  padding: 10px 20px;
  border: 1px solid transparent;
  border-radius: 2px;
  font-size: 16px;
  text-align: right;
  opacity: 0;
  box-shadow: 0 5px 5px -3px rgba(0, 0, 0, .2), 0 8px 10px 1px rgba(0, 0, 0, .14), 0 3px 14px 2px rgba(0, 0, 0, .12);
  transition: opacity .4s, color .4s, box-shadow .4s;
}
#toast-close {
  flex: none;
  background: none;
  border: none;
  color: inherit;
  padding: 4px;
  margin: -4px;
  border-radius: 2px;
}
#toast-close:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
@media screen and (max-width: 64em) {
  .padded-div { width: 100%; padding-left: 15px; padding-right: 15px; }
}

/* ---------- PrimeReact input + button (from theme-light.css) ---------- */
.p-inputtext {
  appearance: none;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, .38);
  border-radius: 4px;
  color: rgba(0, 0, 0, .87);
  font-family: var(--font-family);
  font-size: 1rem;
  padding: .75rem;
  transition: background-color .2s, border-color .2s, color .2s, box-shadow .2s, background-size .2s cubic-bezier(.64, .09, .08, 1);
}
.p-inputtext:enabled:hover { border-color: rgba(0, 0, 0, .87); }
.p-inputtext:enabled:focus { border-color: #673ab7; box-shadow: inset 0 0 0 1px #673ab7; outline: 0 none; outline-offset: 0; }
textarea.p-inputtext { resize: vertical; }

.p-button {
  min-width: 4rem;
  padding: .643rem .75rem;
  border: 0;
  border-radius: 4px;
  background: #673ab7;
  color: #fff;
  font-size: 1rem;
  font-weight: 500;
  transition: background-color .2s, border-color .2s, color .2s, box-shadow .2s, background-size .2s cubic-bezier(.64, .09, .08, 1);
}
.p-button:enabled:hover { background: rgba(103, 58, 183, .92); border-color: transparent; color: #fff; }
.p-button:enabled:focus { background: rgba(103, 58, 183, .76); }
.p-button:enabled:active { background: rgba(103, 58, 183, .68); border-color: transparent; color: #fff; }
.p-button:focus { box-shadow: none; outline: 0 none; }
.p-button:focus-visible { outline: 2px solid var(--primary-color); outline-offset: 2px; }
.p-button:disabled { background-color: rgba(0, 0, 0, .12) !important; color: rgba(0, 0, 0, .38) !important; opacity: 1; }
.p-button.p-button-text { background-color: transparent; border-color: transparent; color: #673ab7; }
.p-button.p-button-text:enabled:hover { background: rgba(103, 58, 183, .04); border-color: transparent; color: #673ab7; }
.p-button.p-button-text:enabled:focus { background: rgba(103, 58, 183, .12); }
.p-button.p-button-text:enabled:active { background: rgba(103, 58, 183, .16); }

/* ---------- PrimeReact input + button (dark overrides, from theme-dark.css) ---------- */
@media (prefers-color-scheme: dark) {
  .p-inputtext { background: #1e1e1e; border-color: hsla(0, 0%, 100%, .3); color: hsla(0, 0%, 100%, .87); }
  .p-inputtext:enabled:hover { border-color: hsla(0, 0%, 100%, .6); }
  .p-inputtext:enabled:focus { border-color: #9575cd; box-shadow: inset 0 0 0 1px #9575cd; }
  .p-button { background: #9575cd; color: #000; }
  .p-button:enabled:hover { background: rgba(149, 117, 205, .92); color: #212121; }
  .p-button:enabled:focus { background: rgba(149, 117, 205, .76); }
  .p-button:enabled:active { background: rgba(149, 117, 205, .68); color: #212121; }
  .p-button:disabled { background-color: hsla(0, 0%, 100%, .12) !important; color: hsla(0, 0%, 100%, .38) !important; }
  .p-button.p-button-text { color: #9575cd; }
  .p-button.p-button-text:enabled:hover { background: hsla(0, 0%, 100%, .04); color: #9575cd; }
  .p-button.p-button-text:enabled:focus { background: rgba(149, 117, 205, .12); }
  .p-button.p-button-text:enabled:active { background: rgba(149, 117, 205, .16); }
}

/* ---------- SKYMED form (unchanged, from skymed.css) ---------- */
#skymed-header { background-color: var(--surface-card); border-bottom: 3px solid #1a4fa0; padding: 0 auto; text-align: center; }
#skymed-service-call { margin: 0 auto; width: 80%; }
.skymed-logo { display: inline-block; padding: 24px 0; width: auto; }
.skymed-label { display: block; font-weight: 500; margin: 4px 0 6px; }
.skymed-disclaimer { background-color: var(--surface-ground); border-radius: var(--skymed-border-radius); color: var(--text-color-secondary); font-size: 14px; padding: 12px 16px; text-align: justify; }
.skymed-signature-wrap { align-items: flex-start; display: flex; flex-direction: column; gap: 4px; padding: 12px; }
.skymed-signature-wrap button { max-width: 100%; width: 250px; }
.skymed-signature-wrap canvas { background-color: var(--surface-100); border: 1px solid var(--surface-500); border-radius: var(--skymed-border-radius); max-width: 100%; touch-action: none; }
.sign-box { background-color: #f5f5f5; border-radius: 4px; box-shadow: 2px 2px 5px 1px rgba(0, 0, 0, .14); height: 150px; width: 250px; }
@media (prefers-color-scheme: dark) { .sign-box { background-color: hsla(0, 0%, 100%, .06); box-shadow: 2px 2px 5px 1px rgba(0, 0, 0, .24); } }
.skymed-dropzone { align-items: center; background-color: var(--surface-100); border: 2px dashed var(--surface-500); border-radius: var(--skymed-border-radius); cursor: pointer; display: flex; flex-direction: column; gap: 8px; justify-content: center; padding: 32px 16px; text-align: center; transition: border-color .2s, background-color .2s; }
.skymed-dropzone.skymed-dropzone-active, .skymed-dropzone:hover { background-color: var(--surface-200); border-color: var(--primary-color); }
.skymed-dropzone-icon { color: var(--surface-500); font-size: 32px; }
/* visually hidden but focusable, so the file picker is reachable by keyboard */
.skymed-file-input { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.col-12:has(.skymed-file-input:focus-visible) .skymed-dropzone { outline: 2px solid var(--primary-color); outline-offset: 2px; }
.skymed-photo-preview { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
.skymed-photo-thumb { height: 90px; position: relative; width: 90px; }
.skymed-photo-thumb img { border-radius: var(--skymed-border-radius); height: 100%; object-fit: cover; width: 100%; }
.skymed-photo-thumb .skymed-photo-remove { align-items: center; background-color: #b71c1c; border: none; border-radius: 50%; color: #fff; cursor: pointer; display: flex; font-size: 12px; height: 22px; justify-content: center; left: -8px; position: absolute; top: -8px; width: 22px; }
#form-spinner { display: none; }
#skymed-footer { background-color: var(--surface-card); border-top: 3px solid #1a4fa0; color: var(--text-color-secondary); font-size: 14px; }
#skymed-footer a { color: var(--primary-color); }
#skymed-footer p { margin: 4px 0; }
.fixus-footer { display: flex; font-size: 14px; gap: 18px; justify-content: center; margin-top: 22px; }
@media screen and (max-width: 64em) {
  #skymed-service-call { padding-left: 15px; padding-right: 15px; width: 100%; }
}