/* ===== کوکوی خروس و دکمه‌ی والدین ===== */
.rooster {
  position: absolute;
  bottom: 18px;
  inset-inline-start: 18px;
  font-size: 64px;
  cursor: pointer;
  animation: hop 2.4s ease-in-out infinite;
  border: 0;
  background: none;
}

.bubble {
  position: absolute;
  bottom: 96px;
  inset-inline-start: 24px;
  background: var(--white);
  color: #14204f;
  border: 4px solid var(--ink);
  border-radius: 20px;
  padding: 6px 14px;
  font-weight: 700;
  max-width: 230px;
}

@keyframes hop {0%,100%{transform:translateY(0)}50%{transform:translateY(-14px) rotate(-6deg)}}

.rooster {
  filter: drop-shadow(0 8px 6px rgba(0,0,0,.35)) drop-shadow(0 0 14px rgba(255,224,58,.9));
}

.bubble {
  background: linear-gradient(#fff,#e3ebff);
  box-shadow: 0 5px 0 var(--ink),inset 0 2px 0 #fff;
}

@media (max-width:480px) {
  .rooster {
    font-size: 52px;
  }
  .bubble {
    bottom: 84px;
    font-size: 14px;
    max-width: 200px;
  }
}

.rooster {
  width: clamp(96px,22vw,150px);
  height: clamp(96px,22vw,150px);
  padding: 0;
  border: 5px solid #fff;
  border-radius: 50%;
  overflow: hidden;
  background: #fff;
  font-size: 0;
  box-shadow: 0 7px 0 #14204f,0 16px 26px rgba(0,0,40,.4),0 0 0 4px #14204f,0 0 24px rgba(255,224,58,.9);
}

.rooster img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.bubble {
  bottom: 42px;
  inset-inline-start: calc(clamp(96px,22vw,150px) + 34px);
  max-width: min(240px,calc(100vw - 190px));
}

@media (max-width:480px) {
  .rooster {
    border-width: 4px;
  }
  .bubble {
    bottom: 30px;
    font-size: 14px;
  }
}

.hero2 .rooster {
  inset-inline-start: auto;
  left: 16px;
  bottom: 16px;
  z-index: 5;
}

.hero2 .bubble {
  inset-inline-start: auto;
  left: calc(clamp(96px,22vw,150px) + 34px);
  bottom: 38px;
  z-index: 5;
}

@media (max-width:700px) {
  .hero2 .rooster {
    left: 12px;
    bottom: 12px;
  }
  .hero2 .bubble {
    bottom: 34px;
    font-size: 13px;
    line-height: 1.7;
    padding: 4px 12px;
    max-width: min(220px,calc(100vw - 218px));
  }
}

.bubble {
  background: linear-gradient(145deg,rgba(255,255,255,.62),rgba(255,255,255,.26))!important;
  border: 1.5px solid rgba(255,255,255,.8)!important;
  box-shadow: 0 14px 40px rgba(40,70,170,.25),inset 0 2px 0 rgba(255,255,255,.9),inset 0 -2px 8px rgba(255,255,255,.25)!important;
  -webkit-backdrop-filter: blur(18px) saturate(1.7);
  backdrop-filter: blur(18px) saturate(1.7);
  color: #14204f;
}

.pfab {
  background: linear-gradient(145deg,rgba(255,110,130,.94),rgba(224,17,47,.84))!important;
  color: #fff!important;
  box-shadow: 0 10px 26px rgba(255,42,69,.45),inset 0 2px 0 rgba(255,255,255,.7),inset 0 -4px 8px rgba(120,0,20,.3)!important;
}

.pfab {
  border: 1.5px solid rgba(255,255,255,.85)!important;
}

.rooster {
  border: 5px solid rgba(255,255,255,.75)!important;
  box-shadow: 0 12px 32px rgba(0,40,120,.4),0 0 0 3px rgba(255,255,255,.45)!important;
}

@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))) {
  .bubble {
    background: rgba(255,255,255,.92)!important;
  }
}

.pfab {
  position: fixed;
  inset-inline-end: 14px;
  bottom: calc(14px + env(safe-area-inset-bottom,0px));
  z-index: 30;
  text-decoration: none;
  font: 900 15px Vazirmatn,sans-serif;
  color: #fff;
  background: linear-gradient(#ff8a99,#ff2a45 50%,#c8001f);
  border: 4px solid var(--ink);
  border-radius: 99px;
  padding: 6px 16px;
  box-shadow: 0 5px 0 #7d0014,0 10px 16px rgba(0,0,0,.3),inset 0 2px 0 rgba(255,255,255,.6);
}