/* HMG Customer Survey — front-end styles. Colors come from inline --hmg-* vars. */
.hmg-survey, .hmg-survey *, .hmg-survey *::before, .hmg-survey *::after { box-sizing: border-box; }
.hmg-survey{
  --primary: var(--hmg-primary, #123A63);
  --accent:  var(--hmg-accent, #4A90D9);
  --cta:     var(--hmg-cta, #E15A46);
  --bg:      var(--hmg-bg, #F6F9FC);
  --teal-dark:#2F6DAF; --cta-dark:#C6472F;
  --card:#fff; --ink:#0F1B2D; --muted:#5B6B7E; --line:#E3E9F0; --line-2:#EEF3F8;
  --ring:rgba(15,163,163,.35); --r:18px; --r-sm:12px; --shadow:0 18px 50px -24px rgba(14,42,71,.35);
  position:relative; font-family:'Inter',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--ink); background:var(--bg); line-height:1.6; padding:0 16px 70px; overflow:hidden;
  -webkit-font-smoothing:antialiased;
}
.hmg-survey .hmg-bg{ position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(60% 50% at 85% -5%, color-mix(in srgb, var(--accent) 15%, transparent), transparent 60%),
    radial-gradient(55% 45% at -5% 8%, color-mix(in srgb, var(--cta) 13%, transparent), transparent 60%);
}
.hmg-survey .hmg-wrap{ position:relative; z-index:1; max-width:760px; margin:0 auto; }

.hmg-survey .hmg-progress{ position:sticky; top:0; z-index:5; height:6px; width:100%; background:var(--line-2); border-radius:4px; overflow:hidden; margin-bottom:4px; }
.hmg-survey .hmg-progress__bar{ height:100%; width:0%; background:linear-gradient(90deg,var(--accent),var(--cta)); transition:width .35s cubic-bezier(.4,0,.2,1); }

.hmg-survey .hmg-hero{ text-align:center; padding:40px 8px 22px; }
.hmg-survey .hmg-badge{ display:inline-block; font-size:12.5px; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
  color:var(--teal-dark); background:color-mix(in srgb, var(--accent) 12%, transparent); border:1px solid color-mix(in srgb, var(--accent) 30%, transparent); padding:7px 14px; border-radius:999px; margin-bottom:16px; }
.hmg-survey .hmg-h1{ font-family:'Poppins',sans-serif; font-weight:700; color:var(--primary); font-size:clamp(26px,5vw,40px); line-height:1.15; letter-spacing:-.02em; margin:0 0 12px; }
.hmg-survey .hmg-lead{ font-size:clamp(15px,2.3vw,17px); color:var(--muted); margin:0 auto; max-width:54ch; }

.hmg-survey .hmg-section{ background:var(--card); border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow); padding:24px 22px; margin:16px 0;
  opacity:0; transform:translateY(16px); transition:opacity .5s ease, transform .5s ease; }
.hmg-survey .hmg-section.is-in{ opacity:1; transform:none; }
.hmg-survey .hmg-section__head{ display:flex; align-items:center; gap:12px; margin-bottom:6px; }
.hmg-survey .hmg-section__no{ flex:none; width:32px; height:32px; border-radius:9px; display:grid; place-items:center; font-family:'Poppins',sans-serif; font-weight:600; font-size:14px; color:#fff; background:linear-gradient(135deg,var(--primary),var(--teal-dark)); }
.hmg-survey .hmg-section__title{ font-family:'Poppins',sans-serif; font-weight:600; font-size:18px; color:var(--primary); margin:0; }
.hmg-survey .hmg-section__sub{ font-size:14px; color:var(--muted); margin:2px 0 16px 44px; }

.hmg-survey .hmg-q{ padding:18px 0; border-top:1px solid var(--line-2); }
.hmg-survey .hmg-section__body > .hmg-q:first-child{ border-top:0; padding-top:4px; }
.hmg-survey .hmg-q__label{ display:block; font-weight:600; font-size:15.5px; color:var(--ink); margin-bottom:6px; }
.hmg-survey .hmg-q__req{ color:var(--cta-dark); margin-left:3px; }
.hmg-survey .hmg-q__help{ font-size:13.5px; color:var(--muted); margin:0 0 12px; }
.hmg-survey .hmg-q__label + .hmg-scale, .hmg-survey .hmg-q__label + *{ margin-top:10px; }

/* face + radio option shells */
.hmg-survey .hmg-scale{ display:grid; grid-template-columns:repeat(5,1fr); gap:8px; }
.hmg-survey .hmg-opt{ position:relative; }
.hmg-survey .hmg-opt input{ position:absolute; opacity:0; width:1px; height:1px; }
.hmg-survey .hmg-scale .hmg-opt label{ display:flex; flex-direction:column; align-items:center; gap:7px; cursor:pointer; padding:12px 4px 9px; border:1.5px solid var(--line); border-radius:var(--r-sm); background:#fff; transition:border-color .18s, background .18s; height:100%; }
.hmg-survey .hmg-scale .hmg-opt label:hover{ border-color:var(--accent); background:color-mix(in srgb, var(--accent) 6%, transparent); }
.hmg-survey .hmg-face{ width:30px; height:30px; fill:none; stroke:#9AA8B7; stroke-width:1.6; transition:stroke .18s, transform .18s; }
.hmg-survey .hmg-face circle.f{ fill:#F1F5F9; stroke:#CBD5E1; }
.hmg-survey .hmg-otext{ font-size:11px; font-weight:500; color:var(--muted); text-align:center; line-height:1.25; }
.hmg-survey .hmg-scale .hmg-opt input:checked + label{ border-color:var(--accent); background:color-mix(in srgb, var(--accent) 10%, transparent); box-shadow:0 0 0 3px var(--ring); }
.hmg-survey .hmg-scale .hmg-opt input:checked + label .hmg-face{ stroke:var(--teal-dark); transform:scale(1.08); }
.hmg-survey .hmg-scale .hmg-opt input:checked + label .hmg-face circle.f{ fill:color-mix(in srgb, var(--accent) 15%, transparent); stroke:var(--accent); }
.hmg-survey .hmg-scale .hmg-opt input:checked + label .hmg-otext{ color:var(--primary); font-weight:600; }
.hmg-survey .hmg-opt input:focus-visible + label{ outline:3px solid var(--ring); outline-offset:2px; }

/* NPS */
.hmg-survey .hmg-nps{ display:grid; grid-template-columns:repeat(11,1fr); gap:6px; }
.hmg-survey .hmg-nps .hmg-opt label{ display:flex; align-items:center; justify-content:center; height:46px; border:1.5px solid var(--line); border-radius:var(--r-sm); font-weight:600; font-size:15px; color:var(--primary); cursor:pointer; transition:.18s; }
.hmg-survey .hmg-nps .hmg-opt label:hover{ border-color:var(--accent); }
.hmg-survey .hmg-nps .hmg-opt input:checked + label{ background:var(--primary); color:#fff; border-color:var(--primary); }
.hmg-survey .hmg-nps-legend{ display:flex; justify-content:space-between; font-size:11.5px; color:var(--muted); margin-top:8px; }

/* Stars */
.hmg-survey .hmg-stars{ display:inline-flex; gap:6px; flex-direction:row-reverse; }
.hmg-survey .hmg-stars .hmg-opt label{ cursor:pointer; display:block; }
.hmg-survey .hmg-star{ width:38px; height:38px; fill:#E3E9F0; transition:fill .12s, transform .12s; }
.hmg-survey .hmg-stars .hmg-opt:hover ~ .hmg-opt .hmg-star,
.hmg-survey .hmg-stars .hmg-opt:hover .hmg-star,
.hmg-survey .hmg-stars .hmg-opt input:checked ~ label .hmg-star{ fill:var(--cta); }
.hmg-survey .hmg-stars .hmg-opt:has(input:checked) ~ .hmg-opt .hmg-star{ fill:var(--cta); }
.hmg-survey .hmg-stars .hmg-opt label:hover .hmg-star{ transform:scale(1.12); }

/* Slider */
.hmg-survey .hmg-slider{ padding-top:6px; }
.hmg-survey .hmg-range{ width:100%; accent-color:var(--accent); }
.hmg-survey .hmg-slider__scale{ display:flex; justify-content:space-between; font-size:13px; color:var(--muted); margin-top:4px; }
.hmg-survey .hmg-range__val{ font-weight:700; color:var(--primary); font-size:16px; }

/* Pills (choice) */
.hmg-survey .hmg-pills{ display:flex; flex-wrap:wrap; gap:9px; }
.hmg-survey .hmg-pills .hmg-opt label{ display:block; padding:9px 15px; border:1.5px solid var(--line); border-radius:var(--r-sm); font-size:14px; font-weight:500; color:var(--primary); cursor:pointer; transition:.18s; }
.hmg-survey .hmg-pills .hmg-opt label:hover{ border-color:var(--accent); }
.hmg-survey .hmg-pills .hmg-opt input:checked + label{ border-color:var(--accent); background:color-mix(in srgb, var(--accent) 12%, transparent); color:var(--teal-dark); font-weight:600; }

/* Inputs */
.hmg-survey .hmg-input, .hmg-survey .hmg-textarea, .hmg-survey .hmg-select, .hmg-survey .hmg-file{ width:100%; font:inherit; color:var(--ink); background:#fff; border:1.5px solid var(--line); border-radius:var(--r-sm); padding:12px 14px; transition:border-color .18s, box-shadow .18s; }
.hmg-survey .hmg-textarea{ min-height:96px; resize:vertical; }
.hmg-survey .hmg-input:focus, .hmg-survey .hmg-textarea:focus, .hmg-survey .hmg-select:focus, .hmg-survey .hmg-file:focus{ outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--ring); }

/* Matrix */
.hmg-survey .hmg-matrix{ overflow-x:auto; }
.hmg-survey .hmg-matrix__table{ width:100%; border-collapse:collapse; font-size:14px; }
.hmg-survey .hmg-matrix__table th, .hmg-survey .hmg-matrix__table td{ padding:9px 8px; text-align:center; border-bottom:1px solid var(--line-2); }
.hmg-survey .hmg-matrix__table thead th{ color:var(--muted); font-weight:600; font-size:12px; }
.hmg-survey .hmg-matrix__table th[scope=row]{ text-align:left; color:var(--ink); font-weight:600; }
.hmg-survey .hmg-matrix__table td input{ position:absolute; opacity:0; width:1px; height:1px; }
.hmg-survey .hmg-matrix__table td label{ display:inline-block; cursor:pointer; }
.hmg-survey .hmg-radio-dot{ display:block; width:22px; height:22px; border-radius:50%; border:2px solid var(--line); transition:.15s; }
.hmg-survey .hmg-matrix__table td label:hover .hmg-radio-dot{ border-color:var(--accent); }
.hmg-survey .hmg-matrix__table td input:checked + label .hmg-radio-dot{ border-color:var(--accent); background:var(--accent); box-shadow:inset 0 0 0 3px #fff; }

/* Ranking */
.hmg-survey .hmg-ranking{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; }
.hmg-survey .hmg-ranking__item{ display:flex; align-items:center; gap:12px; padding:12px 14px; border:1.5px solid var(--line); border-radius:var(--r-sm); background:#fff; cursor:grab; user-select:none; }
.hmg-survey .hmg-ranking__item.dragging{ opacity:.5; border-color:var(--accent); }
.hmg-survey .hmg-ranking__grip{ color:#B7C2CE; font-size:16px; letter-spacing:-2px; }
.hmg-survey .hmg-ranking__num{ flex:none; width:24px; height:24px; border-radius:50%; background:var(--primary); color:#fff; font-size:12px; font-weight:700; display:grid; place-items:center; }
.hmg-survey .hmg-ranking__label{ font-weight:500; }

/* Validation */
.hmg-survey .hmg-q.is-invalid .hmg-q__label{ color:var(--cta-dark); }
.hmg-survey .hmg-qerr{ display:none; font-size:12.5px; color:var(--cta-dark); margin-top:9px; font-weight:500; }
.hmg-survey .hmg-q.is-invalid .hmg-qerr{ display:block; }
.hmg-survey .hmg-formerror{ background:color-mix(in srgb, var(--cta) 10%, transparent); border:1px solid color-mix(in srgb, var(--cta) 35%, transparent); color:var(--cta-dark); border-radius:var(--r-sm); padding:13px 16px; font-size:14px; font-weight:500; margin:14px 0; }

.hmg-survey .hmg-hp{ position:absolute; left:-9999px; width:1px; height:1px; opacity:0; }

.hmg-survey .hmg-actions{ text-align:center; margin-top:24px; }
.hmg-survey .hmg-btn{ display:inline-flex; align-items:center; gap:10px; cursor:pointer; font-family:'Poppins',sans-serif; font-weight:600; font-size:16px; color:#fff;
  background:linear-gradient(135deg,var(--cta),var(--cta-dark)); border:0; border-radius:999px; padding:15px 34px; text-decoration:none;
  box-shadow:0 14px 30px -12px color-mix(in srgb, var(--cta) 60%, transparent); transition:transform .15s, box-shadow .15s, filter .15s; }
.hmg-survey .hmg-btn:hover{ transform:translateY(-2px); }
.hmg-survey .hmg-btn:disabled{ filter:grayscale(.3) opacity(.7); cursor:wait; transform:none; }
.hmg-survey .hmg-btn--ghost{ background:transparent; color:var(--primary); border:1.5px solid var(--line); box-shadow:none; margin-top:6px; }
.hmg-survey .hmg-ic{ width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }

.hmg-survey .hmg-thanks{ text-align:center; padding:56px 20px; }
.hmg-survey .hmg-thanks__art{ width:82px; height:82px; margin:0 auto 20px; border-radius:50%; display:grid; place-items:center; background:linear-gradient(135deg,var(--accent),var(--teal-dark)); box-shadow:0 16px 40px -16px var(--accent); animation:hmg-pop .5s cubic-bezier(.34,1.56,.64,1) both; }
.hmg-survey .hmg-thanks__art svg{ width:40px; height:40px; fill:none; stroke:#fff; stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round; }
.hmg-survey .hmg-h2{ font-family:'Poppins',sans-serif; font-weight:700; color:var(--primary); font-size:clamp(24px,4.5vw,32px); margin:0 0 10px; }
@keyframes hmg-pop{ from{ transform:scale(.4); opacity:0 } to{ transform:scale(1); opacity:1 } }

.hmg-survey .hmg-empty{ color:var(--muted); text-align:center; padding:20px; }

@media (max-width:560px){
  .hmg-survey .hmg-section{ padding:20px 15px; }
  .hmg-survey .hmg-scale{ gap:5px; }
  .hmg-survey .hmg-scale .hmg-opt label{ padding:10px 2px 8px; }
  .hmg-survey .hmg-face{ width:26px; height:26px; }
  .hmg-survey .hmg-otext{ font-size:9.5px; }
  .hmg-survey .hmg-nps{ grid-template-columns:repeat(6,1fr); }
  .hmg-survey .hmg-section__sub{ margin-left:0; }
}
@media (prefers-reduced-motion:reduce){
  .hmg-survey *{ animation:none !important; transition:none !important; }
  .hmg-survey .hmg-section{ opacity:1; transform:none; }
}