#febles-pwa-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 9000;
  padding: 0 clamp(12px, 3.2vw, 18px) calc(clamp(14px, 3.8vw, 20px) + env(safe-area-inset-bottom));
  transform: translateY(110%);
  transition: transform 380ms cubic-bezier(0.32, 0.72, 0, 1);
  pointer-events: none;
}

#febles-pwa-banner,
#febles-pwa-banner * {
  box-sizing: border-box;
}

#febles-pwa-banner.is-visible {
  transform: translateY(0);
  pointer-events: auto;
}

.dpwa-card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(254, 250, 243, 0.84), rgba(246, 236, 220, 0.78)),
    url("img/backgrounds/7th.png") center / cover no-repeat;
  border: 2px solid #F4D4B2;
  border-radius: clamp(18px, 4vw, 24px);
  width: min(100%, 500px);
  padding: clamp(22px, 5vw, 28px) clamp(22px, 5.4vw, 30px) clamp(18px, 4.4vw, 24px);
  box-shadow:
    0 -4px 18px rgba(14, 31, 58, 0.08),
    0 16px 38px rgba(14, 31, 58, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.55);
  font-family: var(--font-main, 'Nunito', sans-serif);
  color: var(--clr-navy, #0E1F3A);
  max-width: 500px;
  margin: 0 auto;
}

/* Inner parchment glow */
.dpwa-card::before {
  content: "";
  position: absolute;
  inset: clamp(10px, 2.7vw, 14px);
  z-index: 0;
  border-radius: calc(clamp(18px, 4vw, 24px) - 7px);
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 12%, rgba(255, 255, 255, 0.76), rgba(255, 255, 255, 0.5) 44%, rgba(254, 250, 243, 0.36) 100%),
    linear-gradient(180deg, rgba(255, 248, 232, 0.58), rgba(244, 232, 206, 0.38));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.62),
    0 14px 34px rgba(62, 47, 25, 0.08);
  backdrop-filter: blur(1.4px) saturate(0.9);
  -webkit-backdrop-filter: blur(1.4px) saturate(0.9);
}

/* Edge vignette */
.dpwa-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 48%, transparent 52%, rgba(139, 90, 43, 0.10) 100%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.22), transparent 34%, rgba(14, 31, 58, 0.06));
}

.dpwa-close {
  position: absolute;
  top: clamp(14px, 3.8vw, 18px);
  right: clamp(14px, 3.8vw, 18px);
  z-index: 1;
  width: clamp(34px, 8.5vw, 40px);
  height: clamp(34px, 8.5vw, 40px);
  background: rgba(254, 250, 243, 0.8);
  border: 2px solid rgba(14, 31, 58, 0.14);
  border-radius: 50%;
  color: rgba(14, 31, 58, 0.44);
  font-size: clamp(18px, 4.6vw, 23px);
  line-height: 1;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background 140ms;
  font-family: inherit;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.68),
    0 4px 10px rgba(14, 31, 58, 0.1);
}

.dpwa-close:active { background: rgba(7, 28, 64, 0.15); }

.dpwa-title {
  position: relative;
  z-index: 1;
  font-family: var(--font-heading, 'Baloo 2', 'Nunito', sans-serif);
  font-weight: 900;
  font-size: clamp(19px, 4.8vw, 24px);
  line-height: 1.06;
  margin: 0 clamp(42px, 12vw, 52px) clamp(10px, 2.4vw, 13px) 0;
  letter-spacing: 0;
  color: var(--clr-navy, #0E1F3A);
  text-shadow: 0 1px 0 rgba(255,255,255,0.72);
}

.dpwa-body {
  position: relative;
  z-index: 1;
  max-width: 38rem;
  font-size: clamp(14.5px, 3.5vw, 16px);
  line-height: 1.45;
  color: rgba(14, 31, 58, 0.74);
  text-shadow: 0 1px 0 rgba(255,255,255,0.55);
  margin: 0;
}

/* ── Android: two-button row ─────────────────────────────── */

.dpwa-actions {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(10px, 2.8vw, 14px);
  align-items: stretch;
  margin-top: clamp(18px, 4.6vw, 24px);
}

.dpwa-btn-install {
  min-width: 0;
  padding: clamp(13px, 3.4vw, 16px) clamp(16px, 4vw, 22px);
  border-radius: 14px;
  background: #FEFAF3;
  color: var(--clr-navy, #0E1F3A);
  font-family: var(--font-heading, 'Baloo 2', 'Nunito', sans-serif);
  font-weight: 800;
  font-size: clamp(17px, 4.2vw, 21px);
  line-height: 1.05;
  border: 2px solid rgba(244, 212, 178, 0.9);
  cursor: pointer;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.8),
    0 8px 18px rgba(7, 28, 64, 0.14);
  text-shadow: 0 1px 0 rgba(255,255,255,0.6);
  transition: transform 110ms, opacity 110ms;
}

.dpwa-btn-install:active { transform: scale(0.97); opacity: 0.88; }

.dpwa-btn-dismiss {
  min-width: clamp(86px, 23vw, 112px);
  padding: clamp(13px, 3.4vw, 16px) clamp(12px, 3.2vw, 18px);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.56);
  color: var(--clr-navy, #0E1F3A);
  font-family: var(--font-heading, 'Baloo 2', 'Nunito', sans-serif);
  font-weight: 800;
  font-size: clamp(16px, 4vw, 19px);
  line-height: 1.05;
  border: 2px solid rgba(14, 31, 58, 0.16);
  cursor: pointer;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.65),
    0 8px 18px rgba(7, 28, 64, 0.08);
  text-shadow: 0 1px 0 rgba(255,255,255,0.58);
  transition: background 140ms;
  white-space: nowrap;
}

.dpwa-btn-dismiss:active { background: rgba(255, 255, 255, 0.65); }

/* ── iOS-only: full-width dismiss ───────────────────────── */

.dpwa-btn-dismiss--full {
  display: block;
  width: 100%;
  text-align: center;
  margin-top: clamp(18px, 4.6vw, 24px);
  padding: clamp(13px, 3.4vw, 16px);
}

/* ── iOS share hint row ──────────────────────────────────── */

.dpwa-ios-hint {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: clamp(9px, 2.4vw, 12px);
  margin-top: clamp(16px, 4vw, 20px);
  padding: clamp(11px, 3vw, 14px) clamp(13px, 3.4vw, 16px);
  background: rgba(255, 255, 255, 0.52);
  border-radius: 14px;
  font-size: clamp(13.5px, 3.3vw, 15px);
  font-weight: 700;
  color: rgba(14, 31, 58, 0.78);
  border: 2px solid rgba(244, 212, 178, 0.72);
  text-shadow: 0 1px 0 rgba(255,255,255,0.55);
}

.dpwa-ios-share {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  color: rgba(7, 28, 64, 0.55);
}