/* ===== UstaServisi custom: flags, fixed contact buttons, AZ popup ===== */

/* --- Language switcher with flags (visible on mobile too) --- */
header .flex.items-center.gap-4 > div:first-child {
  display: flex !important;
  gap: 4px;
  padding: 3px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--border);
  box-shadow: 0 2px 10px -4px rgba(0, 0, 0, .15);
}
header .flex.items-center.gap-4 > div:first-child > a {
  display: flex;
  align-items: center;
  gap: 6px;
  border-radius: 999px;
  padding: 3px 10px 3px 3px;
  line-height: 1;
  transition: background .2s, box-shadow .2s, transform .2s;
}
header .flex.items-center.gap-4 > div:first-child > a::before {
  content: "";
  width: 22px;
  height: 22px;
  flex: none;
  border-radius: 50%;
  background: center / cover no-repeat;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .08);
  transition: filter .2s, opacity .2s, transform .2s;
}
header .flex.items-center.gap-4 > div:first-child > a:first-child::before { background-image: url(/assets/flag-az.svg); }
header .flex.items-center.gap-4 > div:first-child > a:last-child::before  { background-image: url(/assets/flag-ru.svg); }
header .flex.items-center.gap-4 > div:first-child > a:not(.bg-primary)::before { filter: saturate(.55); opacity: .7; }
header .flex.items-center.gap-4 > div:first-child > a:hover::before { filter: none; opacity: 1; transform: scale(1.08); }

@media (max-width: 639px) {
  header .flex.items-center.gap-4 { gap: 10px !important; }
  header .flex.items-center.gap-4 > div:first-child > a { font-size: 0; padding: 3px; gap: 0; }
  header .flex.items-center.gap-4 > div:first-child > a::before { width: 26px; height: 26px; }
  header .flex.items-center.gap-4 > div:first-child > a.bg-primary { box-shadow: 0 0 0 2px var(--accent); }
}
@media (max-width: 380px) {
  header a > span.text-lg { font-size: 1rem !important; }
}

/* --- Hide the old bottom bar and its spacer --- */
div.fixed.inset-x-0.bottom-0.z-50 { display: none !important; }
div.min-h-screen.pb-24 { padding-bottom: 0 !important; }

/* --- New fixed contact buttons --- */
#us-fab {
  position: fixed;
  right: 18px;
  bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  z-index: 9998;
  display: flex;
  flex-direction: column;
  gap: 14px;
  transform: translateZ(0);
  will-change: transform;
}
#us-fab a {
  position: relative;
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  color: #fff;
  text-decoration: none;
  transition: transform .25s cubic-bezier(.34, 1.56, .64, 1), box-shadow .25s;
  animation: us-pop .6s cubic-bezier(.34, 1.56, .64, 1) both;
}
#us-fab a svg { width: 28px; height: 28px; position: relative; z-index: 1; }
#us-fab .us-wa {
  background: linear-gradient(145deg, #3be37a, #1ebe5a);
  box-shadow: 0 10px 25px -6px rgba(37, 211, 102, .65), inset 0 1px 0 rgba(255, 255, 255, .35);
}
#us-fab .us-tel {
  background: linear-gradient(145deg, #ff8a3d, #f05a0e);
  box-shadow: 0 10px 25px -6px rgba(240, 90, 14, .6), inset 0 1px 0 rgba(255, 255, 255, .35);
  animation-delay: .12s;
}
#us-fab a:hover, #us-fab a:focus-visible { transform: scale(1.1); }
#us-fab a:active { transform: scale(.94); }

/* expanding wave rings */
#us-fab a::before, #us-fab a::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid currentColor;
  opacity: 0;
  animation: us-wave 2.4s ease-out infinite;
}
#us-fab .us-wa { color: #fff; }
#us-fab .us-wa::before, #us-fab .us-wa::after { border-color: #25d366; }
#us-fab .us-tel::before, #us-fab .us-tel::after { border-color: #f05a0e; }
#us-fab a::after { animation-delay: 1.2s; }

/* phone icon "ringing" shake every few seconds */
#us-fab .us-tel svg { animation: us-ring 4s ease-in-out 1.5s infinite; transform-origin: 50% 50%; }

/* label bubble */
#us-fab a span {
  position: absolute;
  right: 70px;
  top: 50%;
  white-space: nowrap;
  padding: 7px 12px;
  border-radius: 10px;
  background: #fff;
  color: #0f2a20;
  font: 700 13px/1 "Plus Jakarta Sans", system-ui, sans-serif;
  box-shadow: 0 6px 20px -6px rgba(0, 0, 0, .25);
  opacity: 0;
  transform: translate(8px, -50%);
  pointer-events: none;
  transition: opacity .2s, transform .2s;
}
#us-fab a span::after {
  content: "";
  position: absolute;
  right: -5px;
  top: 50%;
  width: 10px;
  height: 10px;
  background: #fff;
  transform: translateY(-50%) rotate(45deg);
}
#us-fab a:hover span { opacity: 1; transform: translate(0, -50%); }
#us-fab.us-hint a span { opacity: 1; transform: translate(0, -50%); }

/* online dot on WhatsApp */
#us-fab .us-wa i {
  position: absolute;
  top: 3px;
  right: 3px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: #ffd23f;
  border: 2px solid #fff;
  z-index: 2;
}

@keyframes us-wave {
  0% { transform: scale(1); opacity: .7; }
  100% { transform: scale(1.75); opacity: 0; }
}
@keyframes us-ring {
  0%, 70%, 100% { transform: rotate(0); }
  73% { transform: rotate(-18deg); }
  76% { transform: rotate(16deg); }
  79% { transform: rotate(-14deg); }
  82% { transform: rotate(10deg); }
  85% { transform: rotate(-6deg); }
  88% { transform: rotate(0); }
}
@keyframes us-pop {
  from { transform: scale(0) translateY(20px); opacity: 0; }
  to { transform: scale(1) translateY(0); opacity: 1; }
}

@media (max-width: 639px) {
  #us-fab { right: 14px; gap: 12px; }
  #us-fab a { width: 54px; height: 54px; }
}

/* --- "Switch to Azerbaijani?" popup --- */
#us-lang-pop {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 16px;
  padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  background: rgba(8, 24, 18, .35);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  opacity: 0;
  transition: opacity .3s;
}
#us-lang-pop.us-show { opacity: 1; }
@media (min-width: 640px) { #us-lang-pop { align-items: center; } }

#us-lang-pop .us-card {
  position: relative;
  width: 100%;
  max-width: 360px;
  padding: 26px 22px 20px;
  border-radius: 22px;
  background: #fff;
  text-align: center;
  font-family: "Plus Jakarta Sans", system-ui, sans-serif;
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .4);
  transform: translateY(30px) scale(.96);
  transition: transform .4s cubic-bezier(.34, 1.56, .64, 1);
  overflow: hidden;
}
#us-lang-pop.us-show .us-card { transform: none; }
#us-lang-pop .us-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 6px;
  background: linear-gradient(90deg, #00B5E2 0 33.3%, #EF3340 33.3% 66.6%, #509E2F 66.6%);
}
#us-lang-pop .us-flag {
  width: 64px;
  height: 64px;
  margin: 0 auto 14px;
  border-radius: 50%;
  background: url(/assets/flag-az.svg) center / cover;
  box-shadow: 0 0 0 4px #fff, 0 0 0 6px rgba(0, 181, 226, .25), 0 10px 25px -8px rgba(0, 0, 0, .35);
  animation: us-wave-flag 2.5s ease-in-out infinite;
}
@keyframes us-wave-flag { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(4deg); } }
#us-lang-pop h3 {
  margin: 0 0 6px;
  font-size: 18px;
  font-weight: 800;
  line-height: 1.3;
  color: var(--primary, #0f3d2e);
}
#us-lang-pop p {
  margin: 0 0 18px;
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--muted-foreground, #5b6b63);
}
#us-lang-pop .us-yes {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 13px 16px;
  border: 0;
  border-radius: 14px;
  background: var(--gradient-accent, linear-gradient(135deg, #ff8a3d, #f05a0e));
  color: #fff;
  font-family: inherit;
  font-size: 15px;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 12px 25px -10px rgba(240, 90, 14, .7);
  transition: transform .2s;
}
#us-lang-pop .us-yes:hover { transform: translateY(-2px); }
#us-lang-pop .us-no {
  margin-top: 8px;
  width: 100%;
  padding: 10px;
  border: 0;
  background: none;
  color: var(--muted-foreground, #5b6b63);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
}
#us-lang-pop .us-no:hover { color: var(--primary, #0f3d2e); }
#us-lang-pop .us-x {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 30px;
  height: 30px;
  border: 0;
  border-radius: 50%;
  background: #f1f4f2;
  color: #5b6b63;
  font-size: 18px;
  line-height: 30px;
  cursor: pointer;
}

@media (prefers-reduced-motion: reduce) {
  #us-fab a, #us-fab a::before, #us-fab a::after, #us-fab .us-tel svg, #us-lang-pop .us-flag { animation: none !important; }
}