/*!*****************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js??clonedRuleSet-12.use[1]!./node_modules/@vue/vue-loader-v15/lib/loaders/stylePostLoader.js!./node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-12.use[2]!./node_modules/@vue/vue-loader-v15/lib/index.js??vue-loader-options!./src/view/components/IqPwaUpdateSnackbar.vue?vue&type=style&index=0&id=82321470&scoped=true&lang=css ***!
  \*****************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************************/

/* ── Layout ──────────────────────────────────────────────────────────────── */
.iq-pwa-snackbar[data-v-82321470] {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 99999;
  display: flex;
  align-items: center;
  gap: 14px;

  min-width: 300px;
  max-width: 420px;
  padding: 14px 16px 14px 16px;
  border-radius: 14px;

  /* Glassmorphism */
  background: rgba(22, 6, 35, 0.88);
  backdrop-filter: blur(18px) saturate(180%);
  -webkit-backdrop-filter: blur(18px) saturate(180%);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45), 0 2px 8px rgba(113, 0, 139, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(113, 0, 139, 0.4);
}

/* ── Icon ring ───────────────────────────────────────────────────────────── */
.iq-pwa-snackbar__icon[data-v-82321470] {
  position: relative;
  flex-shrink: 0;
  width: 46px;
  height: 46px;
}
.iq-pwa-ring[data-v-82321470] {
  width: 46px;
  height: 46px;
  transform: rotate(-90deg); /* Start arc from top */
}
.iq-pwa-ring__track[data-v-82321470] {
  stroke: rgba(255, 255, 255, 0.12);
}
.iq-pwa-ring__progress[data-v-82321470] {
  stroke: #c84bff;
  stroke-linecap: round;
  transition: stroke-dashoffset 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  filter: drop-shadow(0 0 4px rgba(200, 75, 255, 0.7));
}
.iq-pwa-ring__check[data-v-82321470] {
  stroke: #6dff9e;
  stroke-dasharray: 30;
  stroke-dashoffset: 30;
  animation: drawCheck-82321470 0.45s ease-out 0.1s forwards;
  transform-origin: 18px 18px;
  transform: rotate(90deg); /* Undo the -90° parent rotation for the check */
}
@keyframes drawCheck-82321470 {
to {
    stroke-dashoffset: 0;
}
}
.iq-pwa-ring__label[data-v-82321470] {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  font-weight: 700;
  font-family: Poppins, Helvetica, sans-serif;
  color: #e0aaff;
  letter-spacing: -0.3px;
}

/* ── Text ────────────────────────────────────────────────────────────────── */
.iq-pwa-snackbar__content[data-v-82321470] {
  flex: 1;
  min-width: 0;
}
.iq-pwa-snackbar__title[data-v-82321470] {
  margin: 0 0 2px;
  font-family: Poppins, Helvetica, sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: #f0e6ff;
  letter-spacing: 0.1px;
}
.iq-pwa-snackbar__subtitle[data-v-82321470] {
  margin: 0;
  font-family: Poppins, Helvetica, sans-serif;
  font-size: 11.5px;
  font-weight: 400;
  color: rgba(220, 190, 255, 0.75);
  line-height: 1.4;
}

/* ── Action button ───────────────────────────────────────────────────────── */
.iq-pwa-snackbar__btn[data-v-82321470] {
  flex-shrink: 0;
  padding: 7px 14px;
  border: none;
  border-radius: 8px;
  background: linear-gradient(135deg, #71008b, #9c00c0);
  color: #fff;
  font-family: Poppins, Helvetica, sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.3px;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.2s ease;
  box-shadow: 0 3px 12px rgba(113, 0, 139, 0.5);
}
.iq-pwa-snackbar__btn[data-v-82321470]:hover {
  background: linear-gradient(135deg, #9c00c0, #b800e0);
  transform: translateY(-1px);
  box-shadow: 0 5px 18px rgba(113, 0, 139, 0.65);
}
.iq-pwa-snackbar__btn[data-v-82321470]:active {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(113, 0, 139, 0.4);
}

/* ── Dismiss button ──────────────────────────────────────────────────────── */
.iq-pwa-snackbar__dismiss[data-v-82321470] {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: none;
  background: none;
  color: rgba(200, 160, 255, 0.55);
  cursor: pointer;
  border-radius: 50%;
  transition: color 0.15s ease, background 0.15s ease;
}
.iq-pwa-snackbar__dismiss[data-v-82321470]:hover {
  color: rgba(220, 190, 255, 0.9);
  background: rgba(255, 255, 255, 0.08);
}

/* ── Slide-up entrance/exit animation ────────────────────────────────────── */
.iq-pwa-slide-enter-active[data-v-82321470],
.iq-pwa-slide-leave-active[data-v-82321470] {
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
    opacity 0.3s ease;
}
.iq-pwa-slide-enter[data-v-82321470] {
  transform: translateY(20px) scale(0.97);
  opacity: 0;
}
.iq-pwa-slide-leave-to[data-v-82321470] {
  transform: translateY(16px) scale(0.97);
  opacity: 0;
}

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 480px) {
.iq-pwa-snackbar[data-v-82321470] {
    bottom: 16px;
    right: 12px;
    left: 12px;
    min-width: 0;
    min-width: initial;
    max-width: none;
    max-width: initial;
}
}