/*
 * Itqan Polls — visitor popup styles.
 * Built on the Itqan UI tokens (--iu-*). Logical properties only, so RTL and
 * LTR share one file. Dark mode via html.dark or a per-poll theme class.
 */

.ip {
  --ip-accent: var(--iu-accent);
  --ip-accent-soft: color-mix(in srgb, var(--ip-accent) 10%, transparent);
  --ip-accent-ring: color-mix(in srgb, var(--ip-accent) 35%, transparent);
  --ip-radius: 1rem;
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 100%;
  font-family: var(--iu-font);
  color: var(--iu-fg);
  background: var(--iu-bg);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
.ip.ip-theme-light { --iu-bg: #fff; --iu-bg-muted: #f7f7fa; --iu-fg: #1f1f1f; --iu-fg-muted: #808080; --iu-border: #ededed; }
.ip.ip-theme-dark  { --iu-bg: #303030; --iu-bg-muted: #2f2f2f; --iu-fg: #f5f5f5; --iu-fg-muted: #999; --iu-border: #414141; }
.ip *, .ip *::before, .ip *::after { box-sizing: border-box; }
.ip button { font: inherit; color: inherit; }

/* Hero ------------------------------------------------------------------ */
.ip-hero {
  position: relative;
  flex: 0 0 auto;
  height: 150px;
  overflow: hidden;
  background: var(--iu-bg-muted);
}
.ip-hero--sm { height: 110px; }
.ip-hero--lg { height: 210px; }
.ip-hero img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.ip-hero--contain img { object-fit: contain; background: #000; }
.ip-hero::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 45%;
  background: linear-gradient(to top, var(--iu-bg), transparent);
  pointer-events: none;
}
@media (min-width: 640px) {
  .ip-hero { height: 180px; }
  .ip-hero--sm { height: 130px; }
  .ip-hero--lg { height: 240px; }
}

/* Store-style icon overlapping the hero edge */
.ip-icon {
  position: relative;
  z-index: 1;
  width: 4.5rem;
  height: 4.5rem;
  margin-block: -2.25rem 0;
  margin-inline: 1.25rem;
}
@media (min-width: 640px) { .ip-icon { margin-inline: 1.75rem; } }
.ip-icon {
  border-radius: 1.1rem;
  overflow: hidden;
  background: var(--iu-bg);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22), 0 0 0 3px var(--iu-bg);
  flex: 0 0 auto;
}
.ip-icon--circle { border-radius: 999px; }
.ip-icon--square { border-radius: 0.35rem; }
.ip-icon img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ip-icon--standalone { margin-top: 1.5rem; }
.ip--center .ip-icon { margin-inline: auto; }

/* Body ------------------------------------------------------------------ */
.ip-stage { position: relative; flex: 1 1 auto; overflow: hidden; }
.ip-page {
  padding: 1.1rem 1.25rem 0.75rem;
  transition: transform 260ms var(--iu-ease), opacity 260ms var(--iu-ease);
}
@media (min-width: 640px) { .ip-page { padding: 1.25rem 1.75rem 1rem; } }
.ip-page--enter { opacity: 0; transform: translateX(var(--ip-slide, 28px)); }
.ip-page--leave { position: absolute; inset: 0 0 auto 0; opacity: 0; transform: translateX(calc(var(--ip-slide, 28px) * -1)); pointer-events: none; }
.ip--center .ip-page { text-align: center; }
.ip-hero + .ip-stage .ip-page, .ip-icon + .ip-stage .ip-page { padding-top: 1rem; }

.ip-progress {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0.15rem 0 1.1rem;
  color: var(--iu-fg-muted);
  font-size: 0.8rem;
}
.ip--center .ip-progress { justify-content: center; }
.ip-progress__dot {
  width: 0.5rem; height: 0.5rem;
  border-radius: 999px;
  background: var(--iu-border);
  transition: background 200ms ease, transform 200ms ease;
}
.ip-progress__dot.is-done { background: var(--ip-accent); opacity: 0.55; }
.ip-progress__dot.is-current { background: var(--ip-accent); transform: scale(1.35); opacity: 1; }
.ip-progress__bar { flex: 1 1 auto; height: 0.35rem; border-radius: 999px; background: var(--iu-border); overflow: hidden; }
.ip-progress__bar > span { display: block; height: 100%; width: 0; background: var(--ip-accent); transition: width 320ms var(--iu-ease); }

.ip-title {
  margin: 0 0 0.5rem;
  font-family: var(--iu-font-bold);
  font-size: 1.3rem;
  line-height: 1.4;
  font-weight: 700;
  color: var(--iu-fg);
  outline: none; /* focus is moved here for screen readers; no visible ring */
}
.ip-title:focus, .ip-title:focus-visible { outline: none; box-shadow: none; }
.ip-text { margin: 0 0 1.1rem; color: var(--iu-fg-muted); font-size: 0.98rem; line-height: 1.6; }
.ip-text:last-child { margin-bottom: 0.25rem; }
/* Answer block: clear air between the question and its controls. */
.ip-q { margin-top: 1.1rem; }
.ip-text + .ip-q, .ip-q-desc + .ip-q { margin-top: 0.75rem; }
.ip-text a { color: var(--ip-accent); }
.ip-page-image { display: block; width: 100%; height: auto; border-radius: var(--ip-radius); margin: 0 0 1rem; }
.ip-q-text { margin: 0.75rem 0 0.25rem; font-family: var(--iu-font-bold); font-size: 1.12rem; font-weight: 700; line-height: 1.45; }
.ip-q-desc { margin: 0.25rem 0 0; color: var(--iu-fg-muted); font-size: 0.92rem; }

/* Options --------------------------------------------------------------- */
.ip-options { display: grid; gap: 0.7rem; margin: 0 0 0.5rem; }
.ip-options--grid { grid-template-columns: repeat(var(--ip-cols, 2), minmax(0, 1fr)); }
.ip-options--chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.ip--center .ip-options--chips { justify-content: center; }

.ip-opt {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  min-height: 3.25rem;
  padding: 0.7rem 0.9rem;
  border: 1.5px solid var(--iu-border);
  border-radius: 0.9rem;
  background: var(--iu-bg);
  text-align: start;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: border-color 160ms ease, background 160ms ease, transform 120ms ease, box-shadow 160ms ease;
}
.ip-opt:hover { border-color: color-mix(in srgb, var(--ip-accent) 50%, var(--iu-border)); }
.ip-opt:active { transform: scale(0.985); }
.ip-opt:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--ip-accent-ring); }
.ip-opt[aria-checked="true"] {
  border-color: var(--ip-accent);
  background: var(--ip-accent-soft);
  box-shadow: 0 0 0 1px var(--ip-accent) inset;
}
.ip-opt__label { flex: 1 1 auto; font-size: 1rem; font-weight: 500; }
.ip-opt__desc { display: block; margin-top: 0.1rem; color: var(--iu-fg-muted); font-size: 0.82rem; font-weight: 400; }
.ip-opt__emoji { font-size: 1.4rem; line-height: 1; flex: 0 0 auto; }
.ip-opt__icon {
  --ip-icon: var(--ip-accent);
  flex: 0 0 auto;
  width: 2.5rem; height: 2.5rem;
  display: grid; place-items: center;
  border-radius: 0.7rem;
  background: color-mix(in srgb, var(--ip-icon) 12%, transparent);
  color: var(--ip-icon);
  transition: background 160ms ease, color 160ms ease, transform 200ms var(--iu-ease);
}
.ip-opt__icon--success { --ip-icon: #0ca30c; }
.ip-opt__icon--danger  { --ip-icon: #d03b3b; }
.ip-opt__icon--warning { --ip-icon: #c98500; }
.ip-opt__icon--info    { --ip-icon: #2a78d6; }
.ip-opt__icon--neutral { --ip-icon: var(--iu-fg-muted); }
.dark .ip-opt__icon--success, .ip-theme-dark .ip-opt__icon--success { --ip-icon: #2fbf2f; }
.dark .ip-opt__icon--danger, .ip-theme-dark .ip-opt__icon--danger { --ip-icon: #e66767; }
.dark .ip-opt__icon--warning, .ip-theme-dark .ip-opt__icon--warning { --ip-icon: #fab219; }
.dark .ip-opt__icon--info, .ip-theme-dark .ip-opt__icon--info { --ip-icon: #3987e5; }
.ip-opt__icon svg { width: 1.35rem; height: 1.35rem; }
.ip-opt[aria-checked="true"] .ip-opt__icon { background: var(--ip-icon); color: #fff; transform: scale(1.04); }
.ip-opt__thumb { flex: 0 0 auto; width: 3.25rem; height: 2.5rem; border-radius: 0.6rem; overflow: hidden; background: var(--iu-bg-muted); }
.ip-opt__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ip-options--chips .ip-opt__icon { width: 1.6rem; height: 1.6rem; border-radius: 999px; background: transparent; }
.ip-options--chips .ip-opt__icon svg { width: 1.1rem; height: 1.1rem; }
.ip-opt__check {
  flex: 0 0 auto;
  width: 1.4rem; height: 1.4rem;
  display: grid; place-items: center;
  border: 1.5px solid var(--iu-border);
  border-radius: 999px;
  background: var(--iu-bg);
  transition: background 160ms ease, border-color 160ms ease, transform 200ms var(--iu-ease);
}
.ip-opt--multi .ip-opt__check { border-radius: 0.4rem; }
.ip-opt__check svg { width: 0.85rem; height: 0.85rem; opacity: 0; transform: scale(0.4); transition: opacity 160ms ease, transform 220ms var(--iu-ease); }
.ip-opt[aria-checked="true"] .ip-opt__check { background: var(--ip-accent); border-color: var(--ip-accent); animation: ip-pop 320ms var(--iu-ease); }
.ip-opt[aria-checked="true"] .ip-opt__check svg { opacity: 1; transform: none; color: #fff; }
@keyframes ip-pop { 0% { transform: scale(0.8); } 50% { transform: scale(1.18); } 100% { transform: scale(1); } }

.ip-options--chips .ip-opt { width: auto; min-height: 2.6rem; padding: 0.45rem 0.9rem; border-radius: 999px; }
.ip-options--chips .ip-opt__check { display: none; }

/* Image options */
.ip-opt--image { flex-direction: column; align-items: stretch; padding: 0.45rem; gap: 0.45rem; }
.ip-opt--image .ip-opt__img { position: relative; aspect-ratio: 4 / 3; border-radius: 0.6rem; overflow: hidden; background: var(--iu-bg-muted); }
.ip-opt--image .ip-opt__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ip-opt--image .ip-opt__label { text-align: center; font-size: 0.92rem; padding-bottom: 0.15rem; }
.ip-opt--image .ip-opt__check { position: absolute; top: 0.8rem; inset-inline-end: 0.8rem; z-index: 1; box-shadow: 0 2px 8px rgba(0,0,0,0.3); }
.ip-opt__zoom {
  position: absolute; bottom: 0.4rem; inset-inline-start: 0.4rem;
  width: 1.9rem; height: 1.9rem; display: grid; place-items: center;
  border: 0; border-radius: 999px; background: rgba(0,0,0,0.5); color: #fff; cursor: pointer;
}
.ip-opt__zoom svg { width: 1rem; height: 1rem; }

/* Other option input */
.ip-other { margin-top: 0.3rem; }

/* Rating ---------------------------------------------------------------- */
.ip-scale { display: flex; align-items: center; justify-content: space-between; gap: 0.4rem; margin: 0 0 0.25rem; }
.ip-scale__btn {
  flex: 1 1 0;
  min-width: 2.4rem; height: 3rem;
  display: grid; place-items: center;
  border: 1.5px solid var(--iu-border);
  border-radius: 0.8rem;
  background: var(--iu-bg);
  cursor: pointer;
  font-size: 1.4rem;
  transition: transform 140ms var(--iu-ease), border-color 160ms ease, background 160ms ease;
}
.ip-scale__btn:hover { transform: translateY(-2px); }
.ip-scale__btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--ip-accent-ring); }
.ip-scale__btn svg { width: 1.6rem; height: 1.6rem; color: var(--iu-border); transition: color 150ms ease, transform 200ms var(--iu-ease); }
.ip-scale__btn.is-lit svg { color: var(--ip-accent); }
.ip-scale__btn[aria-checked="true"] { border-color: var(--ip-accent); background: var(--ip-accent-soft); }
.ip-scale__btn[aria-checked="true"] svg { transform: scale(1.15); }
.ip-scale__btn--num { font-size: 1.05rem; font-weight: 600; }
.ip-scale__btn--face svg { width: 1.9rem; height: 1.9rem; color: var(--iu-fg-muted); }
.ip-scale__btn--face.is-lit svg { color: var(--ip-accent); }
.ip-scale__btn--num[aria-checked="true"] { color: var(--ip-accent); }
.ip-scale__labels { display: flex; justify-content: space-between; color: var(--iu-fg-muted); font-size: 0.78rem; margin-bottom: 0.5rem; }

/* Inputs ---------------------------------------------------------------- */
.ip-input, .ip-textarea {
  width: 100%;
  padding: 0.8rem 0.95rem;
  border: 1.5px solid var(--iu-border);
  border-radius: 0.9rem;
  background: var(--iu-bg);
  color: var(--iu-fg);
  font: inherit;
  font-size: 1rem;
  transition: border-color 150ms ease, box-shadow 150ms ease;
}
.ip-input:focus, .ip-textarea:focus { outline: none; border-color: var(--ip-accent); box-shadow: 0 0 0 3px var(--ip-accent-ring); }
.ip-textarea { min-height: 6.5rem; resize: vertical; }
.ip-input[dir="ltr"] { text-align: start; }

.ip-error {
  display: none;
  margin: 0.75rem 0 0;
  padding: 0.55rem 0.8rem;
  border-radius: 0.7rem;
  background: color-mix(in srgb, #e0464e 12%, transparent);
  color: #c7343c;
  font-size: 0.88rem;
}
.ip-error.is-visible { display: block; animation: ip-shake 320ms ease; }
.dark .ip-error, .ip-theme-dark .ip-error { color: #ff8a8f; }
@keyframes ip-shake { 0%,100% { transform: none; } 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }

/* Thanks ---------------------------------------------------------------- */
.ip-thanks { padding: 0.5rem 0 0.25rem; text-align: center; }
.ip-thanks__badge {
  width: 4.25rem; height: 4.25rem;
  margin: 0 auto 0.9rem;
  display: grid; place-items: center;
  border-radius: 999px;
  background: var(--ip-accent);
  color: #fff;
  animation: ip-pop 480ms var(--iu-ease);
}
.ip-thanks__badge svg { width: 2rem; height: 2rem; }
.ip-thanks__badge svg path { stroke-dasharray: 40; stroke-dashoffset: 40; animation: ip-draw 500ms 200ms var(--iu-ease) forwards; }
@keyframes ip-draw { to { stroke-dashoffset: 0; } }

/* Footer ---------------------------------------------------------------- */
.ip-footer {
  flex: 0 0 auto;
  padding: 0.9rem 1.25rem 1.2rem;
  background: var(--iu-bg);
  box-shadow: 0 -12px 16px -14px rgba(0, 0, 0, 0.25);
}
@media (min-width: 640px) { .ip-footer { padding-inline: 1.75rem; } }
.ip-actions { display: flex; align-items: center; gap: 0.6rem; }
.ip-btn {
  flex: 1 1 auto;
  min-height: 3.1rem;
  padding: 0.75rem 1.25rem;
  border: 0;
  border-radius: 999px;
  font-family: var(--iu-font-bold);
  font-size: 1.02rem;
  font-weight: 700;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 120ms ease, filter 150ms ease, opacity 150ms ease;
}
.ip-btn:active { transform: scale(0.98); }
.ip-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--ip-accent-ring); }
/* `.ip .ip-btn--primary` outranks the theme's and our own `button { color: inherit }` resets in every mode. */
.ip .ip-btn--primary, .ip .ip-btn--primary:hover, .ip .ip-btn--primary:focus, .ip .ip-btn--primary:active { background: var(--ip-accent); color: #fff; box-shadow: 0 8px 20px -8px var(--ip-accent); }
.ip .ip-btn--primary:hover { filter: brightness(1.06); }
.ip-btn--primary[disabled] { opacity: 0.55; cursor: default; filter: none; }
.ip-btn--primary.is-busy { pointer-events: none; }
.ip .ip-btn--ghost { flex: 0 0 auto; background: var(--iu-bg-muted); color: var(--iu-fg); min-width: 3.1rem; padding-inline: 1rem; }
.ip-btn--ghost svg { width: 1.1rem; height: 1.1rem; display: block; }
[dir="ltr"] .ip-btn--ghost svg { transform: scaleX(-1); }
.ip-secondary {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.75rem;
  margin-top: 0.85rem;
  font-size: 0.85rem;
  color: var(--iu-fg-muted);
}
.ip-link {
  background: none; border: 0; padding: 0.35rem 0.4rem;
  color: var(--iu-fg-muted); font-size: 0.86rem; cursor: pointer;
  border-radius: 0.5rem; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: transparent;
  transition: color 150ms ease, text-decoration-color 150ms ease;
}
.ip-link:hover, .ip-link:focus-visible { color: var(--iu-fg); text-decoration-color: currentColor; outline: none; }
.ip-secondary__sep { width: 3px; height: 3px; border-radius: 999px; background: currentColor; opacity: 0.5; }
.ip-cta { display: inline-block; margin-top: 0.4rem; color: var(--ip-accent); font-weight: 600; text-decoration: none; }

/* Preview badge (admin dry run) */
.ip-preview-badge {
  position: absolute; top: 0.6rem; inset-inline-start: 0.6rem; z-index: 3;
  padding: 0.2rem 0.55rem; border-radius: 999px;
  background: rgba(0,0,0,0.65); color: #fff; font-size: 0.72rem; letter-spacing: 0.02em;
}

@media (prefers-reduced-motion: reduce) {
  .ip-page, .ip-opt, .ip-opt__check, .ip-scale__btn, .ip-btn { transition: none !important; animation: none !important; }
}