/* ===========================================================
   BaatBanao Install UI + Branded Splash v1.0.3
   =========================================================== */

/* Hide install button when installed (multiple selectors for safety) */
body.bb-installed [data-bb-install-trigger],
body.bb-installed .bb-install-btn{ display:none !important; }

/* ---------- Header install button ---------- */
.bb-install-btn{
  display:inline-flex; align-items:center; gap:6px;
  background:#fff; color:#B8790C;
  border:1px solid var(--border-soft, #F0DFCF);
  padding:8px 12px; border-radius:16px;
  font-family:inherit; font-weight:800; font-size:12.5px;
  box-shadow:0 4px 10px rgba(65,35,25,0.08);
  cursor:pointer; transition:transform .15s ease;
}
.bb-install-btn:active{ transform:scale(0.96); }
.bb-install-btn svg{ width:14px; height:14px; }
.bb-install-btn .bb-dot{
  width:6px; height:6px; border-radius:50%; background:#22c55e;
  box-shadow:0 0 0 0 rgba(34,197,94,.6);
  animation:bbPulse 1.6s ease-out infinite;
}
@keyframes bbPulse{
  0%{ box-shadow:0 0 0 0 rgba(34,197,94,.55); }
  70%{ box-shadow:0 0 0 8px rgba(34,197,94,0); }
  100%{ box-shadow:0 0 0 0 rgba(34,197,94,0); }
}

/* ---------- Update Banner ---------- */
.bb-update-banner{
  position:fixed; left:50%; bottom:100px; transform:translateX(-50%) translateY(10px);
  background:#261818; color:#fff; padding:10px 12px 10px 16px; border-radius:14px;
  font-family:inherit; font-weight:700; font-size:13px;
  box-shadow:0 12px 24px rgba(0,0,0,0.28);
  display:flex; align-items:center; gap:10px;
  opacity:0; transition:opacity .25s ease, transform .25s ease;
  z-index:10001;
}
.bb-update-banner.show{ opacity:1; transform:translateX(-50%) translateY(0); }
.bb-update-btn{
  background:#FF725F; color:#fff; border:none; padding:6px 12px;
  border-radius:10px; font-family:inherit; font-weight:800; font-size:12.5px;
  cursor:pointer;
}
.bb-update-btn:active{ transform:scale(0.96); }

/* ===========================================================
   🎬 BRANDED SPLASH
   =========================================================== */
#bb-splash{
  position:fixed; top:0; right:0; bottom:0; left:0; inset:0; z-index:99999;
  width:100%; height:100%;
  background:linear-gradient(160deg, #FFF9E8 0%, #FFEACC 45%, #FFD4B8 100%);
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
  animation: bbSplashIn .3s ease-out;
}
@keyframes bbSplashIn { from{opacity:0} to{opacity:1} }

#bb-splash.bb-fade-out{
  animation: bbSplashOut .55s cubic-bezier(.5,.05,.5,.95) forwards;
}
@keyframes bbSplashOut {
  0%{ opacity:1; transform:scale(1); filter:blur(0); }
  100%{ opacity:0; transform:scale(1.06); filter:blur(6px); }
}

.bb-splash-bg{ position:absolute; top:0; right:0; bottom:0; left:0; inset:0; overflow:hidden; z-index:0; }
.bb-splash-blob{
  position:absolute; border-radius:50%; filter:blur(40px); opacity:.5;
  animation: bbBlobFloat 6s ease-in-out infinite;
}
.bb-blob-1{ width:280px; height:280px; background:#FF725F; top:-80px; right:-60px; animation-delay:0s; }
.bb-blob-2{ width:220px; height:220px; background:#FFB88C; bottom:-40px; left:-40px; animation-delay:1.5s; }
.bb-blob-3{ width:180px; height:180px; background:#FFD97D; top:50%; left:30%; animation-delay:3s; opacity:.35; }
@keyframes bbBlobFloat{
  0%,100%{ transform:translate(0,0) scale(1); }
  50%{ transform:translate(20px,-15px) scale(1.08); }
}

.bb-splash-content{
  position:relative; z-index:1;
  display:flex; flex-direction:column; align-items:center;
  gap:18px; padding:20px;
}

.bb-splash-mascot-wrap{
  position:relative; width:170px; height:170px;
  display:flex; align-items:center; justify-content:center;
  animation: bbMascotEntrance .9s cubic-bezier(.34,1.56,.64,1);
}
@keyframes bbMascotEntrance{
  0%{ opacity:0; transform:scale(.3) rotate(-20deg); }
  60%{ opacity:1; transform:scale(1.1) rotate(5deg); }
  100%{ opacity:1; transform:scale(1) rotate(0); }
}

.bb-splash-ring{
  position:absolute; top:-8px; right:-8px; bottom:-8px; left:-8px; inset:-8px;
  border-radius:50%;
  border:3px dashed rgba(255,114,95,.35);
  animation: bbRingSpin 8s linear infinite;
}
@keyframes bbRingSpin{ to{ transform:rotate(360deg); } }

.bb-splash-mascot{
  width:130px; height:130px; object-fit:contain;
  filter: drop-shadow(0 12px 20px rgba(230,150,20,0.4));
  animation: bbMascotBounce 1.6s ease-in-out infinite;
  z-index:2;
}
@keyframes bbMascotBounce{
  0%,100%{ transform:translateY(0) rotate(-3deg); }
  50%{ transform:translateY(-10px) rotate(3deg); }
}

.bb-splash-coin{
  position:absolute; z-index:3;
  font-size:20px; font-weight:900; color:#FF725F;
  background:#fff; width:36px; height:36px;
  display:flex; align-items:center; justify-content:center;
  border-radius:50%;
  box-shadow:0 6px 12px rgba(255,114,95,.35);
  opacity:0;
  animation: bbCoinPop .5s ease-out forwards, bbCoinFloat 3s ease-in-out infinite;
}
.bb-splash-coin-1{ top:5%; right:0; animation-delay:.6s, .6s; }
.bb-splash-coin-2{ bottom:10%; left:-5%; animation-delay:.8s, .8s; }
.bb-splash-coin-3{ top:55%; right:-10%; animation-delay:1s, 1s; }
@keyframes bbCoinPop{
  from{ opacity:0; transform:scale(.2) translateY(-15px); }
  to{ opacity:1; transform:scale(1) translateY(0); }
}
@keyframes bbCoinFloat{
  0%,100%{ transform:translateY(0); }
  50%{ transform:translateY(-6px); }
}

.bb-splash-logo{
  margin:6px 0 0 0;
  font-family:'Manrope','Nunito Sans',-apple-system,BlinkMacSystemFont,sans-serif;
  font-weight:900; font-size:38px; letter-spacing:-0.5px;
  color:#261818;
  display:flex; gap:1px;
}
.bb-splash-logo span{
  opacity:0; display:inline-block;
  transform:translateY(15px);
  animation: bbLetterUp .5s cubic-bezier(.34,1.56,.64,1) forwards;
}
.bb-splash-logo span:nth-child(1){ animation-delay:.4s; }
.bb-splash-logo span:nth-child(2){ animation-delay:.48s; }
.bb-splash-logo span:nth-child(3){ animation-delay:.56s; }
.bb-splash-logo span:nth-child(4){ animation-delay:.64s; }
.bb-splash-logo span:nth-child(5){ animation-delay:.72s; color:#FF725F; }
.bb-splash-logo span:nth-child(6){ animation-delay:.80s; }
.bb-splash-logo span:nth-child(7){ animation-delay:.88s; }
.bb-splash-logo span:nth-child(8){ animation-delay:.96s; }
.bb-splash-logo span:nth-child(9){ animation-delay:1.04s; }
@keyframes bbLetterUp{ to{ opacity:1; transform:translateY(0); } }

.bb-splash-tag{
  margin:0; font-family:'Nunito Sans',sans-serif;
  font-weight:700; font-size:14.5px; color:#75615C;
  opacity:0;
  animation: bbFadeUp .5s ease-out 1.15s forwards;
  text-align:center;
}
.bb-emoji-wink{
  display:inline-block;
  animation: bbEmojiWiggle 1.2s ease-in-out infinite 1.5s;
}
@keyframes bbEmojiWiggle{
  0%,100%{ transform:rotate(0); }
  25%{ transform:rotate(-15deg); }
  75%{ transform:rotate(15deg); }
}
@keyframes bbFadeUp{
  from{ opacity:0; transform:translateY(10px); }
  to{ opacity:1; transform:translateY(0); }
}

.bb-splash-dots{
  display:flex; gap:6px; margin-top:10px;
  opacity:0;
  animation: bbFadeUp .4s ease-out 1.35s forwards;
}
.bb-splash-dots span{
  width:8px; height:8px; border-radius:50%; background:#FF725F;
  animation: bbDotPulse 1.2s ease-in-out infinite;
}
.bb-splash-dots span:nth-child(1){ animation-delay:0s; }
.bb-splash-dots span:nth-child(2){ animation-delay:.2s; }
.bb-splash-dots span:nth-child(3){ animation-delay:.4s; }
@keyframes bbDotPulse{
  0%,100%{ transform:scale(.6); opacity:.4; }
  50%{ transform:scale(1); opacity:1; }
}

.bb-splash-madein{
  position:absolute; bottom:32px; left:0; right:0;
  margin:0; text-align:center;
  font-size:12px; font-weight:700; color:#9D8781;
  opacity:0;
  animation: bbFadeUp .5s ease-out 1.5s forwards;
  display:flex; align-items:center; justify-content:center; gap:6px;
}
.bb-flag{
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:2px; overflow:hidden; box-shadow:0 1px 2px rgba(0,0,0,0.1);
}

/* ---------- Install bottom sheet ---------- */
.bb-install-wrap{
  position:fixed; top:0; right:0; bottom:0; left:0; inset:0; z-index:9999;
  width:100%; height:100%;
  display:flex; align-items:flex-end; justify-content:center;
  opacity:0; pointer-events:none; transition:opacity .22s ease;
}
.bb-install-wrap.bb-show{ opacity:1; pointer-events:auto; }
.bb-install-scrim{
  position:absolute; top:0; right:0; bottom:0; left:0; inset:0;
  width:100%; height:100%;
  background:rgba(20, 10, 5, 0.45);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
}
.bb-install-sheet{
  position:relative; z-index:1;
  width:100%; max-width:480px;
  background:#FFFDF8;
  border-radius:22px 22px 0 0;
  padding:22px 20px calc(20px + env(safe-area-inset-bottom, 8px)) 20px;
  box-shadow:0 -20px 60px rgba(0,0,0,0.25);
  transform:translateY(24px);
  transition:transform .28s cubic-bezier(.2,.9,.3,1);
  font-family:'Nunito Sans','Manrope',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  color:#261818;
}
.bb-install-wrap.bb-show .bb-install-sheet{ transform:translateY(0); }
@media(min-width:481px){
  .bb-install-wrap{ align-items:center; }
  .bb-install-sheet{ border-radius:22px; max-width:420px; }
}
.bb-close{
  position:absolute; top:10px; right:12px;
  width:34px; height:34px; border:none; background:transparent;
  font-size:24px; line-height:1; color:#9D8781; cursor:pointer;
  border-radius:10px;
}
.bb-close:active{ background:rgba(72,42,33,0.06); }
.bb-install-head{
  display:flex; align-items:center; gap:14px; margin-bottom:14px;
}
.bb-install-icon{
  width:56px; height:56px; border-radius:14px;
  box-shadow:0 8px 18px rgba(255, 114, 95, 0.35);
}
.bb-install-head h3{
  margin:0; font-family:'Manrope',sans-serif;
  font-weight:900; font-size:18px; line-height:1.25;
}
.bb-install-sub{
  margin:3px 0 0 0; font-size:13px; font-weight:600; color:#75615C;
}
.bb-trust{
  list-style:none; padding:14px; margin:2px 0 14px 0;
  background:#FFF5DF; border-radius:14px;
  display:grid; gap:9px;
}
.bb-trust li{
  display:flex; align-items:center; gap:10px;
  font-size:13px; font-weight:600; color:#5A302B; line-height:1.35;
}
.bb-trust li svg{ color:#22c55e; flex-shrink:0; }
.bb-trust li b{ color:#261818; font-weight:800; }
.bb-ios-steps{
  list-style:none; padding:0; margin:6px 0 14px 0;
  display:grid; gap:8px;
}
.bb-ios-steps li{
  display:flex; align-items:center; gap:10px;
  font-size:13.5px; font-weight:600; color:#261818;
  background:#fff; border:1px solid #F0DFCF;
  padding:10px 12px; border-radius:12px;
}
.bb-step-num{
  width:22px; height:22px; border-radius:50%;
  background:#FF725F; color:#fff; font-weight:900; font-size:12px;
  display:inline-flex; align-items:center; justify-content:center;
  flex-shrink:0;
}
.bb-ios-steps svg{ color:#FF725F; margin-left:auto; }
.bb-note{
  margin:0 0 12px 0; font-size:13px; color:#5A302B; line-height:1.4;
  background:#FFF5DF; padding:10px 12px; border-radius:12px;
}
.bb-install-actions{
  display:flex; flex-direction:column; gap:8px; margin-top:4px;
}
.bb-primary{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  width:100%; padding:14px; border:none; border-radius:16px;
  background:linear-gradient(135deg,#FF725F,#FF9278);
  color:#fff; font-family:inherit; font-weight:800; font-size:15px;
  box-shadow:0 12px 20px rgba(232,89,75,0.32);
  cursor:pointer; transition:transform .12s ease;
}
.bb-primary:active{ transform:scale(0.98); }
.bb-ghost{
  width:100%; padding:12px; border:none; border-radius:14px;
  background:transparent; color:#75615C;
  font-family:inherit; font-weight:700; font-size:14px; cursor:pointer;
}
.bb-tiny{
  text-align:center; margin:12px 0 0 0;
  font-size:11.5px; color:#9D8781; font-weight:600;
}
.bb-toast{
  position:fixed; left:50%; bottom:80px; transform:translateX(-50%) translateY(10px);
  background:#261818; color:#fff; padding:10px 16px; border-radius:14px;
  font-family:inherit; font-weight:700; font-size:13px;
  max-width:85vw; text-align:center;
  box-shadow:0 12px 24px rgba(0,0,0,0.25);
  opacity:0; transition:opacity .2s ease, transform .2s ease;
  z-index:10000;
}
.bb-toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }