/* === MOBILE OPTIMIZATIONS === */
@media (max-width: 480px) {
  .dhikr-hero-section {
    padding: var(--space-3) var(--space-1);
  }

  .dhikr-preset-card {
    width: 75px;
    min-height: 75px;
    padding: var(--space-1);
  }

  .dhikr-preset-icon {
    font-size: 1.3rem;
  }

  .dhikr-preset-arabic {
    font-size: 10px;
  }

  .dhikr-preset-name {
    font-size: 10px;
  }

  .dhikr-beads-container {
    width: 220px;
    gap: 3px;
  }

  .dhikr-beads-container .bead {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--color-bg-tertiary);
    border: 1.5px solid var(--color-border);
    transition: all 0.15s ease;
  }

  .dhikr-beads-container .bead.lit {
    background: linear-gradient(45deg,
        #34d399,
        #14b8a6,
        #06b6d4,
        #fbbf24,
        #34d399);
    background-size: 300% 300%;
    animation: fluidGradient 6s ease-in-out infinite;
    border-color: transparent;
    box-shadow: 0 0 10px rgba(20, 184, 166, 0.4);
  }
}

/* Dhikr presets */
.dhikr-preset-row {
  display: flex;
  gap: var(--space-3);
  /* Ensure children don't wrap and cause vertical expansion */
  flex-wrap: nowrap;
}

.dhikr-preset-card {
  flex: 0 0 auto;
  min-height: 85px;
  padding: var(--space-2);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;

  background: var(--color-glass);
  border: 2px solid var(--color-border);
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: all var(--transition-fast);
  scroll-snap-align: start;
  touch-action: manipulation;
  /* Prevent text selection on tap */
  user-select: none;
  -webkit-user-select: none;
}
  color: var(--color-text-muted);
  margin-top: 2px;
  display: none;
  /* Hide on mobile to save space */
}

/* Dhikr Keyframes */
@keyframes tapBtnPulse {

  0%,
  100% {
    box-shadow: 0 0 30px rgba(139, 92, 246, 0.4), 0 8px 24px rgba(0, 0, 0, 0.3);
  }

  50% {
    box-shadow: 0 0 45px rgba(139, 92, 246, 0.6), 0 8px 24px rgba(0, 0, 0, 0.3);
  }
}

@keyframes tapBtnRotate {
  100% {
    transform: rotate(360deg);
  }
}

@keyframes iconFloat {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-4px);
  }
}

@keyframes arabicGlow {

  0%,
  100% {
    filter: drop-shadow(0 0 2px rgba(234, 179, 8, 0.3));
  }

  50% {
    filter: drop-shadow(0 0 10px rgba(234, 179, 8, 0.6));
  }
}

/* Dhikr Session Grid */
.dhikr-session-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: var(--space-2);
}

.dhikr-session-item {
  background: var(--color-glass);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-3);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  animation: fadeInUp 0.3s ease;
}

.ds-icon {
  color: var(--color-accent-gold);
  display: flex;
  align-items: center;
}

.ds-icon svg {
  width: 20px;
  height: 20px;
}

.ds-info {
  display: flex;
  flex-direction: column;
}

.ds-name {
  font-size: var(--text-xs);
  font-weight: var(--fw-semibold);
  color: var(--color-text-secondary);
}

.ds-count {
  font-size: var(--text-sm);
  font-weight: var(--fw-bold);
  color: var(--color-text-primary);
}