/* Telefoon: mint-zegel 64px, card dun zoals oude style */
@media (max-width: 600px) {
  html body:not(.read-list-mode) > main:not(.detail-page):not(.reader-page) #surahGrid.grid .card,
  html body #surahGrid.grid .card,
  html body.read-list-mode #readSurahGrid .read-surah-card,
  html body .detail-page.audio-page #audioSurahList .card,
  html body .detail-page.audio-page #audioSurahList .read-surah-card,
  html body #audioSurahList.grid .card {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    padding-left: 4px !important;
    gap: 0 !important;
    min-height: 52px !important;
    height: 52px !important;
    max-height: 52px !important;
    overflow: visible !important;
  }

  html body:not(.read-list-mode) > main:not(.detail-page):not(.reader-page) #surahGrid.grid .card .info,
  html body #surahGrid.grid .card .info,
  html body.read-list-mode #readSurahGrid .read-surah-card .info,
  html body .detail-page.audio-page #audioSurahList .card .info,
  html body .detail-page.audio-page #audioSurahList .read-surah-card .info,
  html body #audioSurahList.grid .card .info {
    margin-left: -10px !important;
    padding-left: 0 !important;
  }

  html body:not(.read-list-mode) > main:not(.detail-page):not(.reader-page) #surahGrid.grid .card .number,
  html body #surahGrid.grid .card .number,
  html body.read-list-mode #readSurahGrid .read-surah-card .number,
  html body .detail-page.audio-page #audioSurahList .card .number,
  html body .detail-page.audio-page #audioSurahList .read-surah-card .number,
  html body #audioSurahList.grid .card .number {
    min-width: 64px !important;
    width: 64px !important;
    height: 64px !important;
    flex-shrink: 0 !important;
    background-color: transparent !important;
    background-image: url("/surah-number-seal.svg?v=6") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 100% 100% !important;
    clip-path: none !important;
    border-radius: 0 !important;
    overflow: visible !important;
    color: #0f172a !important;
    font-size: 0.78rem !important;
    font-weight: 700 !important;
    box-shadow: none !important;
    border: none !important;
    transform: none !important;
  }

  html body:not(.read-list-mode) > main:not(.detail-page):not(.reader-page) #surahGrid.grid .card .number::before,
  html body:not(.read-list-mode) > main:not(.detail-page):not(.reader-page) #surahGrid.grid .card .number::after,
  html body #surahGrid.grid .card .number::before,
  html body #surahGrid.grid .card .number::after,
  html body.read-list-mode #readSurahGrid .read-surah-card .number::before,
  html body.read-list-mode #readSurahGrid .read-surah-card .number::after,
  html body .detail-page.audio-page #audioSurahList .card .number::before,
  html body .detail-page.audio-page #audioSurahList .card .number::after,
  html body #audioSurahList.grid .card .number::before,
  html body #audioSurahList.grid .card .number::after {
    content: none !important;
    display: none !important;
    background: none !important;
  }

  html body:not(.read-list-mode) > main:not(.detail-page):not(.reader-page) #surahGrid.grid .card:hover .number,
  html body #surahGrid.grid .card:hover .number,
  html body.read-list-mode #readSurahGrid .read-surah-card:hover .number,
  html body .detail-page.audio-page #audioSurahList .card:hover .number,
  html body #audioSurahList.grid .card:hover .number {
    background-color: transparent !important;
    background-image: url("/surah-number-seal.svg?v=6") !important;
    color: #0f172a !important;
    transform: none !important;
  }

  html body:not(.read-list-mode) > main:not(.detail-page):not(.reader-page) #surahGrid.grid .card .arabic h3,
  html body #surahGrid.grid .card .arabic h3,
  html body.read-list-mode #readSurahGrid .read-surah-card .arabic h3,
  html body .detail-page.audio-page #audioSurahList .card .arabic h3,
  html body .detail-page.audio-page #audioSurahList .read-surah-card .arabic h3,
  html body #audioSurahList.grid .card .arabic h3 {
    font-size: 1.42rem !important;
  }

  html body:not(.read-list-mode) > main:not(.detail-page):not(.reader-page) #surahGrid.grid .card .favorite-btn,
  html body #surahGrid.grid .card .favorite-btn,
  html body.read-list-mode #readSurahGrid .read-surah-card .fav-btn,
  html body.read-list-mode #readSurahGrid .read-surah-card .favorite-btn,
  html body .detail-page.audio-page #audioSurahList .card .fav-btn,
  html body .detail-page.audio-page #audioSurahList .card .favorite-btn,
  html body .detail-page.audio-page #audioSurahList .read-surah-card .fav-btn,
  html body #audioSurahList.grid .card .fav-btn,
  html body #audioSurahList.grid .card .favorite-btn {
    position: absolute !important;
    top: 50% !important;
    right: 8px !important;
    left: auto !important;
    bottom: auto !important;
    transform: translateY(-50%) !important;
    width: 22px !important;
    min-width: 22px !important;
    max-width: 22px !important;
    height: 22px !important;
    min-height: 22px !important;
    max-height: 22px !important;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: visible !important;
    font-size: 0 !important;
    line-height: 0 !important;
    color: transparent !important;
    border-radius: 0 !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
    z-index: 30 !important;
  }

  html body:not(.read-list-mode) > main:not(.detail-page):not(.reader-page) #surahGrid.grid .card .favorite-btn::after,
  html body #surahGrid.grid .card .favorite-btn::after,
  html body.read-list-mode #readSurahGrid .read-surah-card .fav-btn::after,
  html body.read-list-mode #readSurahGrid .read-surah-card .favorite-btn::after,
  html body .detail-page.audio-page #audioSurahList .card .fav-btn::after,
  html body .detail-page.audio-page #audioSurahList .card .favorite-btn::after,
  html body .detail-page.audio-page #audioSurahList .read-surah-card .fav-btn::after,
  html body #audioSurahList.grid .card .fav-btn::after,
  html body #audioSurahList.grid .card .favorite-btn::after {
    content: "" !important;
    display: block !important;
    width: 18px !important;
    height: 18px !important;
    background-color: #0f172a !important;
    background-image: none !important;
    -webkit-mask: url("/heart-outline.svg") center / contain no-repeat !important;
    mask: url("/heart-outline.svg") center / contain no-repeat !important;
  }

  html body:not(.read-list-mode) > main:not(.detail-page):not(.reader-page) #surahGrid.grid .card .favorite-btn.active::after,
  html body #surahGrid.grid .card .favorite-btn.active::after,
  html body.read-list-mode #readSurahGrid .read-surah-card .fav-btn.active::after,
  html body.read-list-mode #readSurahGrid .read-surah-card .favorite-btn.active::after,
  html body .detail-page.audio-page #audioSurahList .card .fav-btn.active::after,
  html body .detail-page.audio-page #audioSurahList .card .favorite-btn.active::after,
  html body .detail-page.audio-page #audioSurahList .read-surah-card .fav-btn.active::after,
  html body #audioSurahList.grid .card .fav-btn.active::after,
  html body #audioSurahList.grid .card .favorite-btn.active::after {
    background-color: #f43f5e !important;
    -webkit-mask: url("/heart-filled.svg") center / contain no-repeat !important;
    mask: url("/heart-filled.svg") center / contain no-repeat !important;
  }

  html body:not(.read-list-mode) > main:not(.detail-page):not(.reader-page) #surahGrid.grid .card .favorite-btn.active,
  html body #surahGrid.grid .card .favorite-btn.active,
  html body.read-list-mode #readSurahGrid .read-surah-card .fav-btn.active,
  html body.read-list-mode #readSurahGrid .read-surah-card .favorite-btn.active,
  html body .detail-page.audio-page #audioSurahList .card .fav-btn.active,
  html body .detail-page.audio-page #audioSurahList .card .favorite-btn.active,
  html body .detail-page.audio-page #audioSurahList .read-surah-card .fav-btn.active,
  html body #audioSurahList.grid .card .fav-btn.active,
  html body #audioSurahList.grid .card .favorite-btn.active {
    font-size: 0 !important;
  }
  html body #surahGrid.grid .card .favorite-btn:hover,
  html body.read-list-mode #readSurahGrid .read-surah-card .fav-btn:hover,
  html body .detail-page.audio-page #audioSurahList .card .fav-btn:hover,
  html body #audioSurahList.grid .card .fav-btn:hover {
    transform: translateY(-50%) !important;
  }

  html body.theme-dark:not(.read-list-mode) > main:not(.detail-page):not(.reader-page) #surahGrid.grid .card .favorite-btn,
  html body.theme-dark #surahGrid.grid .card .favorite-btn,
  html body.theme-dark.read-list-mode #readSurahGrid .read-surah-card .fav-btn,
  html body.theme-dark.read-list-mode #readSurahGrid .read-surah-card .favorite-btn,
  html body.theme-dark .detail-page.audio-page #audioSurahList .card .fav-btn,
  html body.theme-dark .detail-page.audio-page #audioSurahList .card .favorite-btn,
  html body.theme-dark #audioSurahList.grid .card .fav-btn {
    background: transparent !important;
    color: transparent !important;
    box-shadow: none !important;
  }

  html body.theme-dark:not(.read-list-mode) > main:not(.detail-page):not(.reader-page) #surahGrid.grid .card .favorite-btn::after,
  html body.theme-dark #surahGrid.grid .card .favorite-btn::after,
  html body.theme-dark.read-list-mode #readSurahGrid .read-surah-card .fav-btn::after,
  html body.theme-dark.read-list-mode #readSurahGrid .read-surah-card .favorite-btn::after,
  html body.theme-dark .detail-page.audio-page #audioSurahList .card .fav-btn::after,
  html body.theme-dark .detail-page.audio-page #audioSurahList .card .favorite-btn::after,
  html body.theme-dark #audioSurahList.grid .card .fav-btn::after {
    background-color: #e2e8f0 !important;
  }

  html body.theme-dark:not(.read-list-mode) > main:not(.detail-page):not(.reader-page) #surahGrid.grid .card .favorite-btn.active::after,
  html body.theme-dark #surahGrid.grid .card .favorite-btn.active::after,
  html body.theme-dark.read-list-mode #readSurahGrid .read-surah-card .fav-btn.active::after,
  html body.theme-dark .detail-page.audio-page #audioSurahList .card .fav-btn.active::after,
  html body.theme-dark #audioSurahList.grid .card .fav-btn.active::after {
    background-color: #fb7185 !important;
  }
}