@import url("https://fonts.googleapis.com/css2?family=Amiri:wght@400;700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Noto+Naskh+Arabic:wght@400;700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Scheherazade+New:wght@400;700&display=swap");

/* Uthmanic Hafs Font */
@font-face {
  font-family: 'KFGQPC Uthmanic Script HAFS';
  src: url('https://db.onlinewebfonts.com/t/468122624d514e5acbeeb79e4e9f3d88.woff2') format('woff2'),
    url('https://db.onlinewebfonts.com/t/468122624d514e5acbeeb79e4e9f3d88.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* Indo-Pak Font */
@font-face {
  font-family: 'IndoPak';
  src: url('https://static-cdn.tarteel.ai/qul/fonts/nastaleeq/Hanafi/normal-v4.2.2/with-waqf-lazmi/font.woff2') format('woff2'),
    url('https://static-cdn.tarteel.ai/qul/fonts/nastaleeq/Hanafi/normal-v4.2.2/with-waqf-lazmi/font.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* Font family classes */
.font-arabic {
  font-family: "Amiri", "Noto Naskh Arabic", serif;
}

.font-uthmanic {
  font-family: 'KFGQPC Uthmanic Script HAFS', "Amiri", "Noto Naskh Arabic", serif;
}

.font-indopak {
  font-family: 'IndoPak', "Amiri", "Noto Naskh Arabic", serif;
}

.font-amiri {
  font-family: "Amiri", "Noto Naskh Arabic", serif;
}

.font-scheherazade {
  font-family: "Scheherazade New", "Amiri", serif;
}

.font-noto {
  font-family: "Noto Naskh Arabic", "Amiri", serif;
}

.material-symbols-outlined {
  font-family: "Material Symbols Outlined";
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  display: inline-block;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;
}

.icon-16 .material-symbols-outlined,
.icon-16.material-symbols-outlined {
  font-size: 16px;
}

.icon-18 .material-symbols-outlined,
.icon-18.material-symbols-outlined {
  font-size: 18px;
}

.icon-20 .material-symbols-outlined,
.icon-20.material-symbols-outlined {
  font-size: 20px;
}

.icon-24 .material-symbols-outlined,
.icon-24.material-symbols-outlined {
  font-size: 24px;
}

.icon-28 .material-symbols-outlined,
.icon-28.material-symbols-outlined {
  font-size: 28px;
}

.icon-36 .material-symbols-outlined,
.icon-36.material-symbols-outlined {
  font-size: 36px;
}

.icon-48 .material-symbols-outlined,
.icon-48.material-symbols-outlined {
  font-size: 48px;
}

/* Responsive header button icons */
@media (max-width: 640px) {
  .header-button {
    width: 28px;
    height: 28px;
  }

  .header-icon .material-symbols-outlined {
    font-size: 18px;
  }

  .subtitle-text {
    font-size: 12px !important;
  }
}

@media (min-width: 641px) {
  .header-button {
    width: 40px;
    height: 40px;
  }

  .header-icon .material-symbols-outlined {
    font-size: 24px;
  }
}

/* Keyboard focus styles for accessibility */
button:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

select:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

/* Safe area inset for notched phones */
html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
}

body {
  padding-bottom: max(0px, env(safe-area-inset-bottom));
}

main {
  padding-bottom: max(1rem, env(safe-area-inset-bottom, 1rem));
}

#root {
  min-height: 100%;
}

/* Slide-up animation for bottom sheet */
@keyframes slide-up {
  from {
    transform: translateY(100%);
  }

  to {
    transform: translateY(0);
  }
}

.animate-slide-up {
  animation: slide-up 0.3s ease-out;
}

/* Siri-like organic animation */
@keyframes siri-glow {
  0% {
    transform: rotate(0deg) scale(1);
  }

  25% {
    transform: rotate(90deg) scale(1.15);
  }

  50% {
    transform: rotate(180deg) scale(0.9);
  }

  75% {
    transform: rotate(270deg) scale(1.1);
  }

  100% {
    transform: rotate(360deg) scale(1);
  }
}

.animate-siri-glow {
  animation: siri-glow 3s ease-in-out infinite;
}