/* =====================================================
   TABLET-IPAD.CSS — START BESTAND
   Holy Quran-Pashto — tablet/iPad styling
   Telefoon = audio-mobile.css | PC = style.css (≥1367px)
   ===================================================== */


/* =====================================================
   DEEL 1 — ALLE TABLET (601px t/m 1366px)
   Groene randen (Light + Dark + Sepia)
   2 cards per rij (3 pagina's)
   + Mobiele titel verbergen
   ===================================================== */

@media (min-width: 601px) and (max-width: 1366px) {

  /* ——— TABLET KLEUREN START ——— */

  :root,
  html.theme-light,
  body.theme-light {
    --bg: #eef2f7;
    --text: #111827;
    --muted: #6b7280;
    --card: #ffffff;
    --soft-card: #f8fafc;
    --border: #35855D;
    --accent: #1d4ed8;
    --primary: #0f172a;
    --primary-soft: #1f2937;
    --hero-bg: linear-gradient(135deg, #e8edf5, #dbeafe);
    --hero-card-bg: rgba(255, 255, 255, 0.75);
    --shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
    --surah-hover: #2F7A55;
    --title-green: #2F7A55;
  }

  html.theme-dark,
  body.theme-dark {
    --bg: #0f172a;
    --text: #f8fafc;
    --muted: #cbd5e1;
    --card: #1a2332;
    --soft-card: #243044;
    --border: #4CB88A;
    --accent: #3b82f6;
    --primary: #f8fafc;
    --primary-soft: #e5e7eb;
    --hero-bg: linear-gradient(135deg, #0f172a, #1e293b);
    --hero-card-bg: rgba(17, 24, 39, 0.75);
    --shadow: 0 10px 24px rgba(0, 0, 0, 0.35);
    --surah-hover: #4CB88A;
    --title-green: #4CB88A;
  }

  html.theme-sepia,
  body.theme-sepia {
    --bg: #f5efe4;
    --text: #5b4632;
    --muted: #7b6550;
    --card: #fffaf0;
    --soft-card: #fff8eb;
    --border: #4A8F65;
    --accent: #8b6914;
    --primary: #5b4632;
    --primary-soft: #7b6550;
    --hero-bg: linear-gradient(135deg, #f5efe4, #ede0c8);
    --hero-card-bg: rgba(255, 250, 240, 0.85);
    --shadow: 0 10px 24px rgba(91, 70, 50, 0.1);
    --surah-hover: #4A8F65;
    --title-green: #4A8F65;
  }

  /* ——— TABLET KLEUREN EIND ——— */

  /* ——— STAP 1 START ———
     Mobiele titel bovenaan VERBERGEN
     ——— STAP 1 START ——— */

  #mobileBlueBarTitle,
  .mobile-blue-bar-title {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
  }

  body::before {
    display: none !important;
    content: none !important;
  }

  body {
    padding-top: 0 !important;
  }

  body.read-list-mode {
    padding-top: 0 !important;
  }

  /* ——— STAP 1 EIND ——— */

  /* =====================================================
     STAP 7 — ALLE RANDEN GROEN (hele website tablet)
     Light + Dark + Sepia
     ===================================================== */

  /* ——— STAP 7 START ——— */

  /* =====================================================
     STAP 10 — SETTINGS MENU groene randen
     Wint van style.css #d1d5db (Light/Dark/Sepia)
     ===================================================== */

  /* ——— STAP 10 START ——— */

  #sideMenu.side-menu {
    border: 1px solid var(--border) !important;
  }

  #sideMenu select,
  #sideMenu select#languageSelect,
  #sideMenu .menu-link,
  #sideMenu #shareWebsiteBtn,
  #sideMenu .font-accordion-btn,
  #sideMenu .font-size-control,
  #sideMenu .font-step-btn,
  #sideMenu .theme-btn,
  #sideMenu .font-opt,
  #sideMenu .font-accordion-panel,
  #sideMenu .user-profile,
  #sideMenu .google-login-btn {
    border: 1px solid var(--border) !important;
    border-color: var(--border) !important;
  }

  body:not(.theme-dark):not(.theme-sepia) #sideMenu .menu-link,
  body:not(.theme-dark):not(.theme-sepia) #sideMenu #shareWebsiteBtn,
  body:not(.theme-dark):not(.theme-sepia) #sideMenu select#languageSelect,
  body:not(.theme-dark):not(.theme-sepia) #sideMenu .font-accordion-btn,
  body:not(.theme-dark):not(.theme-sepia) #sideMenu .font-size-control,
  body:not(.theme-dark):not(.theme-sepia) #sideMenu .user-profile,
  body:not(.theme-dark):not(.theme-sepia) #sideMenu .theme-buttons .theme-btn:not(.active-theme),
  body:not(.theme-dark):not(.theme-sepia) #sideMenu .font-step-btn,
  body:not(.theme-dark):not(.theme-sepia) #sideMenu .font-accordion-panel,
  body:not(.theme-dark):not(.theme-sepia) #sideMenu .font-accordion-panel .font-opt:not(.active-theme) {
    border-color: var(--border) !important;
    border: 1px solid var(--border) !important;
  }

  body.theme-dark #sideMenu select,
  body.theme-dark #sideMenu .menu-link,
  body.theme-dark #sideMenu .theme-btn,
  body.theme-dark #sideMenu .font-step-btn,
  body.theme-dark #sideMenu .font-accordion-btn,
  body.theme-dark #sideMenu .font-accordion-panel,
  body.theme-dark #sideMenu .font-opt {
    border-color: var(--border) !important;
    border: 1px solid var(--border) !important;
  }

  body.theme-sepia #sideMenu select,
  body.theme-sepia #sideMenu .menu-link,
  body.theme-sepia #sideMenu .theme-btn,
  body.theme-sepia #sideMenu .font-step-btn,
  body.theme-sepia #sideMenu .font-accordion-btn,
  body.theme-sepia #sideMenu .font-accordion-panel,
  body.theme-sepia #sideMenu .font-opt {
    border-color: var(--border) !important;
    border: 1px solid var(--border) !important;
  }

  #sideMenu .theme-btn.active-theme,
  #sideMenu .font-opt.active-theme {
    border-color: var(--surah-hover) !important;
    border: 1px solid var(--surah-hover) !important;
  }

  body.theme-dark #sideMenu .theme-btn.active-theme,
  body.theme-dark #sideMenu .font-opt.active-theme {
    border-color: var(--border) !important;
    border: 1px solid var(--border) !important;
  }

  /* ——— STAP 10 EIND ——— */
  /* ——— STAP 10 codes tot hier ——— */

  button,
  input,
  select,
  textarea,
  .search,
  .hero-chip-btn,
  .card,
  .read-surah-card,
  .hero-card,
  .menu-link,
  .menu-toggle,
  .close-menu,
  .font-step-btn,
  .font-accordion-btn,
  .font-accordion-panel,
  .theme-btn,
  .font-opt,
  .side-menu,
  #sideMenu,
  .detail-box,
  .detail-card,
  .mobile-surah-pill,
  .mobile-info-box,
  .page-end-card,
  .google-login-btn,
  .back-link,
  .back-btn,
  .page-back-link,
  .hero-back-link,
  .favorite-btn,
  .fav-btn,
  .qari-card,
  .audio-card,
  .ayah-card,
  .donate-popup-card,
  .profile-popup-card,
  .desktop-surah-summary,
  .font-size-control,
  .translation-toggle-buttons .theme-btn {
    border-color: var(--border) !important;
  }

  .search {
    border: 1px solid var(--border) !important;
  }

  .hero-chip-btn {
    border: 1px solid var(--border) !important;
  }

  body:not(.read-list-mode) #surahGrid.grid .card,
  body.read-list-mode #readSurahGrid .read-surah-card,
  #audioSurahList.grid .card {
    border: 2px solid var(--border) !important;
    background: var(--card) !important;
    box-shadow: none !important;
  }

  body:not(.read-list-mode) #surahGrid.grid .card:hover,
  body.read-list-mode #readSurahGrid .read-surah-card:hover,
  #audioSurahList.grid .card:hover {
    transform: none !important;
    background: var(--card) !important;
    border-color: var(--surah-hover) !important;
    box-shadow: 0 2px 10px rgba(47, 122, 85, 0.15) !important;
  }

  html.theme-dark button,
  html.theme-dark input,
  html.theme-dark select,
  html.theme-dark .card,
  html.theme-dark .read-surah-card,
  html.theme-dark .hero-card,
  html.theme-dark .menu-link,
  html.theme-dark .search,
  html.theme-dark .hero-chip-btn,
  body.theme-dark button,
  body.theme-dark input,
  body.theme-dark select,
  body.theme-dark .card,
  body.theme-dark .read-surah-card,
  body.theme-dark .hero-card,
  body.theme-dark .menu-link,
  body.theme-dark .search,
  body.theme-dark .hero-chip-btn {
    border-color: var(--border) !important;
  }

  html.theme-sepia button,
  html.theme-sepia input,
  html.theme-sepia select,
  html.theme-sepia .card,
  html.theme-sepia .read-surah-card,
  html.theme-sepia .hero-card,
  html.theme-sepia .menu-link,
  html.theme-sepia .search,
  html.theme-sepia .hero-chip-btn,
  body.theme-sepia button,
  body.theme-sepia input,
  body.theme-sepia select,
  body.theme-sepia .card,
  body.theme-sepia .read-surah-card,
  body.theme-sepia .hero-card,
  body.theme-sepia .menu-link,
  body.theme-sepia .search,
  body.theme-sepia .hero-chip-btn {
    border-color: var(--border) !important;
  }

  html.theme-light button,
  html.theme-light .card,
  html.theme-light .search,
  html.theme-light .hero-chip-btn,
  body.theme-light button,
  body.theme-light .card,
  body.theme-light .search,
  body.theme-light .hero-chip-btn {
    border-color: var(--border) !important;
  }

  /* ——— STAP 7 EIND ——— */
  /* ——— STAP 7 codes tot hier ——— */

  /* =====================================================
     STAP 8 — 2 SURAH CARDS PER RIJ (3 pagina's)
     Homepage + Read Quran + Audio Quran
     ===================================================== */

  /* ——— STAP 8 START ——— */

  body:not(.read-list-mode) #surahGrid.grid,
  body.read-list-mode #readSurahGrid,
  #audioSurahList.grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 16px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  body:not(.read-list-mode) #surahGrid.grid .card,
  body.read-list-mode #readSurahGrid .read-surah-card,
  #audioSurahList.grid .card {
    position: relative !important;
    display: grid !important;
    grid-template-columns: 42px minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 12px !important;
    min-height: 92px !important;
    height: auto !important;
    padding: 14px 16px !important;
    border-radius: 14px !important;
    border: 2px solid var(--border) !important;
    background: var(--card) !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
  }

  body:not(.read-list-mode) #surahGrid.grid .card .number,
  body.read-list-mode #readSurahGrid .read-surah-card .number,
  #audioSurahList.grid .card .number {
    grid-column: 1 !important;
    min-width: 42px !important;
    width: 42px !important;
    height: 42px !important;
    font-size: 0.88rem !important;
    font-weight: 700 !important;
    color: var(--text) !important;
    background: var(--soft-card) !important;
    clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  body:not(.read-list-mode) #surahGrid.grid .card .info,
  body.read-list-mode #readSurahGrid .read-surah-card .info,
  #audioSurahList.grid .card .info {
    grid-column: 2 !important;
    min-width: 0 !important;
    padding: 0 !important;
    text-align: left !important;
  }

  body:not(.read-list-mode) #surahGrid.grid .card .info h3,
  body.read-list-mode #readSurahGrid .read-surah-card .info h3,
  #audioSurahList.grid .card .info h3 {
    font-size: 1.05rem !important;
    font-weight: 700 !important;
    margin: 0 0 3px !important;
    line-height: 1.2 !important;
    color: var(--primary) !important;
  }

  body:not(.read-list-mode) #surahGrid.grid .card .info p,
  body.read-list-mode #readSurahGrid .read-surah-card .info p,
  #audioSurahList.grid .card .info p {
    font-size: 0.82rem !important;
    margin: 0 !important;
    line-height: 1.2 !important;
    color: var(--muted) !important;
  }

  body:not(.read-list-mode) #surahGrid.grid .card .arabic,
  body.read-list-mode #readSurahGrid .read-surah-card .arabic,
  #audioSurahList.grid .card .arabic {
    grid-column: 3 !important;
    min-width: 80px !important;
    text-align: right !important;
  }

  body:not(.read-list-mode) #surahGrid.grid .card .arabic h3,
  body.read-list-mode #readSurahGrid .read-surah-card .arabic h3,
  #audioSurahList.grid .card .arabic h3 {
    font-size: 1.28rem !important;
    font-weight: 700 !important;
    margin: 0 0 3px !important;
    line-height: 1.15 !important;
    color: var(--primary) !important;
  }

  body:not(.read-list-mode) #surahGrid.grid .card .arabic p,
  body.read-list-mode #readSurahGrid .read-surah-card .arabic p,
  #audioSurahList.grid .card .arabic p {
    font-size: 0.76rem !important;
    margin: 0 !important;
    color: var(--muted) !important;
  }

  body.read-list-mode #readSurahGrid .read-surah-card.center-last {
    grid-column: auto !important;
    max-width: 100% !important;
    justify-self: stretch !important;
  }

  /* ——— STAP 8 EIND ——— */
  /* ——— STAP 8 codes tot hier ——— */

  /* =====================================================
     STAP 9 — TITEL "Holy Quran-Pashto" groen (tablet)
     ===================================================== */

  /* ——— STAP 9 START ——— */

  .hero h1,
  #heroTitle {
    background: linear-gradient(90deg, var(--title-green), var(--border)) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
  }

  /* ——— STAP 9 EIND ——— */
  /* ——— STAP 9 codes tot hier ——— */

  /* Stap Hero card — breed op Homepage + Read + Audio */

  .hero {
    width: 100% !important;
    padding: 12px 8px !important;
    box-sizing: border-box !important;
  }

  .hero-card {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    padding: 50px 24px 52px !important;
    box-sizing: border-box !important;
  }

  body.read-list-mode #readerContent > .hero,
  body.read-list-mode #readerContent > .hero .hero-card,
  .detail-page.audio-page > .hero,
  .detail-page.audio-page > .hero .hero-card {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Eind Hero card codes */

  main,
  body.read-list-mode #readerContent,
  .detail-page.audio-page {
    max-width: 100% !important;
    padding-left: 28px !important;
    padding-right: 28px !important;
    box-sizing: border-box !important;
  }

  body:not(.read-list-mode) main {
    max-width: 100% !important;
    padding: 16px 28px 36px !important;
  }

  /* Stap Surah pagina — minder lege ruimte links/rechts */
  main.has-floating-back.detail-page {
    padding-left: 12px !important;
    padding-right: 12px !important;
    max-width: 100% !important;
  }

  .has-floating-back {
    width: 100% !important;
    max-width: 100% !important;
    margin: 16px auto !important;
    padding: 0 !important;
  }

  /* Stap Ayah card — groene rand (zoals PC) */
  body:has(#surahDetail) .has-floating-back .ayah-card {
    background: var(--soft-card) !important;
    border: 1px solid var(--border) !important;
    border-radius: 22px !important;
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.06) !important;
    padding: 24px !important;
    box-sizing: border-box !important;
  }



  /* Stap Ayah active — blauwe rand bij klikken (tablet) */
  body:has(#surahDetail) .has-floating-back .ayah-card.active {
    border: 2px solid #2563eb !important;
    box-shadow: 0 10px 22px rgba(37, 99, 235, 0.12) !important;
    background: rgba(37, 99, 235, 0.08) !important;
  }

  body.theme-dark:has(#surahDetail) .has-floating-back .ayah-card.active {
    border: 2px solid #3b82f6 !important;
    box-shadow: 0 14px 30px rgba(59, 130, 246, 0.18) !important;
    background: rgba(59, 130, 246, 0.08) !important;
  }





  body:has(#surahDetail) .has-floating-back .translation-block {
    background: var(--card) !important;
    border: 1px solid var(--border) !important;
    border-radius: 16px !important;
    box-sizing: border-box !important;
  }











  
  /* Stap Ayah nummer — zichtbaar wit thema */
  body:has(#surahDetail) .has-floating-back .ayah-number-badge {
    background: var(--border) !important;
    color: #ffffff !important;
    font-weight: 700 !important;
  }

  body.theme-dark:has(#surahDetail) .has-floating-back .ayah-number-badge {
    background: var(--border) !important;
    color: #0f172a !important;
  }

  .has-floating-back .ayah-num-circle {
    background: #dbeafe !important;
    border: 1.5px solid #2563eb !important;
    color: #1e3a8a !important;
  }

  /* Stap Ayah font */
  .has-floating-back .ayah-section-title {
    font-size: 1.65rem !important;
  }

  .has-floating-back .ayah-arabic {
    font-size: 1.9rem !important;
    line-height: 2.15 !important;
  }
  body:has(#surahDetail) .has-floating-back .translation-arabic .ayah-arabic {
    
    font-size: 1.9rem !important;
    line-height: 2.15 !important;
  }
    body.quran-font-alqalam:has(#surahDetail) .has-floating-back .translation-arabic .ayah-arabic {
    font-family: 'Alqalam Majeed', serif !important;
  }
  .has-floating-back .qcf-ayah-inline {
    font-size: 2rem !important;
    line-height: 2.3 !important;
  }

    /* Taal namen — zachte pill (Arabic, Pashto, English, Dari) */
  body:has(#surahDetail) .has-floating-back .block-header h3 {
    display: inline-block !important;
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: max-content !important;
    align-self: flex-start !important;
    background: rgba(53, 133, 93, 0.12) !important;
    color: #2f7a55 !important;
    border: 1px solid rgba(53, 133, 93, 0.28) !important;
    border-radius: 10px !important;
    padding: 6px 12px !important;
    margin: 0 !important;
    font-size: 0.82rem !important;
    font-weight: 700 !important;
  }

  body.theme-dark:has(#surahDetail) .has-floating-back .block-header h3 {
    background: rgba(76, 184, 138, 0.15) !important;
    color: #4cb88a !important;
    border: 1px solid rgba(76, 184, 138, 0.3) !important;
  }

  body.theme-sepia:has(#surahDetail) .has-floating-back .block-header h3 {
    background: rgba(74, 143, 101, 0.12) !important;
    color: #4a8f65 !important;
    border: 1px solid rgba(74, 143, 101, 0.28) !important;
  }

  .has-floating-back .translation-block h3 {
    font-size: 1.05rem !important;
  }

  .has-floating-back .translation-english p {
    font-size: 1.05rem !important;
    line-height: 1.8 !important;
  }

  .has-floating-back .translation-pashto p,
  .has-floating-back .translation-dari p {
    font-size: 1.1rem !important;
    line-height: 1.75 !important;
  }
  /* Eind Ayah font */

  /* Stap Surah detail — knoppen rand naar rand (zoals PC) */
  .has-floating-back .desktop-surah-summary .detail-header,
  .has-floating-back .desktop-surah-summary .detail-main-info {
    width: 100% !important;
  }

  .has-floating-back .desktop-surah-summary .surah-actions {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    gap: 14px !important;
    width: 100% !important;
    margin-top: 20px !important;
    padding: 0 !important;
  }

  .has-floating-back .desktop-surah-summary .surah-actions a.read-surah-link,
  .has-floating-back .desktop-surah-summary .surah-actions a.listen-surah-link {
    flex: 1 1 0 !important;
    width: auto !important;
    min-width: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    padding: 12px 16px !important;
    min-height: 42px !important;
    font-size: 0.95rem !important;
    border-radius: 18px !important;
    background: var(--card) !important;
    color: var(--primary) !important;
    border: 1px solid var(--border) !important;
    box-shadow: var(--shadow) !important;
    text-decoration: none !important;
    font-weight: 800 !important;
    box-sizing: border-box !important;
  }
  /* Eind Surah detail knoppen */

  /* Stap Surah detail — info cards groene rand */
  .has-floating-back .desktop-surah-summary .detail-box {
    border: 1px solid var(--border) !important;
    background: var(--soft-card) !important;
    border-radius: 18px !important;
    box-sizing: border-box !important;
  }
  /* Eind Surah detail info rand */





  /* YouTube video card — groene rand op tablet */
  body:has(#surahDetail) .has-floating-back .media-section .video-box {
    background: var(--soft-card) !important;
    border: 1px solid var(--border) !important;
    border-radius: 20px !important;
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.05) !important;
    box-sizing: border-box !important;
  }

  body.theme-dark:has(#surahDetail) .has-floating-back .media-section .video-box {
    background: var(--soft-card) !important;
    border: 1px solid var(--border) !important;
    box-shadow: none !important;
  }

  body.theme-sepia:has(#surahDetail) .has-floating-back .media-section .video-box {
    border: 1px solid var(--border) !important;
  }





  
  /* Stap Hart */
  body:not(.read-list-mode) main #surahGrid.grid .card .favorite-btn,
  body.read-list-mode #readSurahGrid .read-surah-card .fav-btn,
  body.read-list-mode #readSurahGrid .read-surah-card .favorite-btn,
  .detail-page.audio-page #audioSurahList .fav-btn,
  .detail-page.audio-page #audioSurahList .favorite-btn {
    position: absolute !important;
    top: 6px !important;
    right: 6px !important;
    left: auto !important;
    width: 24px !important;
    height: 24px !important;
    z-index: 30 !important;
  }
  /* Eind Hart */

  /* Stap Tap */
  .card.tap-feedback,
  .read-surah-card.tap-feedback,
  .hero-chip-btn.tap-feedback,
  button.tap-feedback,
  .menu-link.tap-feedback,
  .theme-btn.tap-feedback {
    transform: scale(0.98) !important;
    border-color: var(--surah-hover) !important;
    box-shadow: 0 2px 10px rgba(47, 122, 85, 0.25) !important;
  }

  .hero-chip-btn.tap-feedback,
  button.tap-feedback,
  .menu-link.tap-feedback,
  .theme-btn.tap-feedback {
    background: var(--accent) !important;
    color: #ffffff !important;
  }
  /* Eind Tap */

}
/* ——— DEEL 1 codes tot hier ——— */




/* =====================================================
   DEEL 2 — TABLET STAAND (portrait)
   STAP 4 — homepage extra styling
   ===================================================== */

@media (min-width: 601px) and (max-width: 1366px) and (orientation: portrait) {

  /* =====================================================
     STAP 4 — HOMEPAGE ZOEKBALK MIDDEN
     ===================================================== */

  /* ——— STAP 4 START ——— */

  .hero {
    padding: 16px 12px 20px !important;
    display: flex !important;
    justify-content: center !important;
  }

  .hero-card {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    padding: 50px 24px 52px !important;
    text-align: center !important;
    border-radius: 22px !important;
    box-sizing: border-box !important;
    border: 1px solid var(--border) !important;
  }

  .hero h1 {
    font-size: 2.4rem !important;
    margin: 12px 0 !important;
    line-height: 1.1 !important;
  }

  .subtitle,
  .hero-description {
    max-width: 560px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .hero-description {
    font-size: 0.95rem !important;
    margin-top: 10px !important;
  }

  .search-wrapper {
    width: 100% !important;
    max-width: 100% !important;
    margin: 22px auto 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
  }

  .search {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    padding: 15px 22px !important;
    border-radius: 999px !important;
    text-align: left !important;
    box-sizing: border-box !important;
    display: block !important;
    border: 1px solid var(--border) !important;
  }

  .buttons {
    justify-content: center !important;
    margin-top: 18px !important;
    gap: 10px !important;
  }

  .hero-chip-btn {
    height: 44px !important;
    padding: 0 16px !important;
    font-size: 0.88rem !important;
    border: 1px solid var(--border) !important;
  }

  /* ——— STAP 4 EIND ——— */
  /* ——— STAP 4 codes tot hier ——— */

}
/* ——— DEEL 2 codes tot hier ——— */




/* =====================================================
   DEEL 3 — TABLET LIGGEND (landscape)
   Groene randen + tablet kleuren blijven
   ===================================================== */

@media (min-width: 601px) and (max-width: 1366px) and (orientation: landscape) {

  /* ——— STAP 6 START ——— */

  body:not(.read-list-mode) .hero-card {
    background: var(--hero-card-bg) !important;
    border: 1px solid var(--border) !important;
  }

  body:not(.read-list-mode) .hero {
    background: var(--hero-bg) !important;
  }

  body:not(.read-list-mode) .search,
  body:not(.read-list-mode) .hero-chip-btn {
    border: 1px solid var(--border) !important;
  }

  /* ——— STAP 6 EIND ——— */
  /* ——— STAP 6 codes tot hier ——— */

}
  /* Copy knop — iPad groen + geen keyboard focus */
  .has-floating-back .block-copy-btn,
  .has-floating-back .ayah-copy-btn {
    -webkit-tap-highlight-color: transparent !important;
    outline: none !important;
    touch-action: manipulation !important;
  }

  .has-floating-back .block-copy-btn.copied,
  .has-floating-back .block-copy-btn.copied i,
  .has-floating-back .ayah-copy-btn.copied,
  .has-floating-back .ayah-copy-btn.copied i {
    color: #16a34a !important;
  }
    body.theme-dark .has-floating-back .block-copy-btn,
  body.theme-dark .has-floating-back .block-copy-btn i,
  body.theme-dark .has-floating-back .ayah-copy-btn,
  body.theme-dark .has-floating-back .ayah-copy-btn i {
    color: #f8fafc !important;
  }

  body.theme-dark .has-floating-back .block-copy-btn.copied,
  body.theme-dark .has-floating-back .block-copy-btn.copied i,
  body.theme-dark .has-floating-back .ayah-copy-btn.copied,
  body.theme-dark .has-floating-back .ayah-copy-btn.copied i {
    color: #22c55e !important;
  }
/* ——— DEEL 3 codes tot hier ——— */




@media (min-width: 601px) and (max-width: 1366px) {
  #menuToggle {
    position: fixed !important;
    display: flex !important;
    visibility: visible !important;
    z-index: 99999 !important;
  }

  .has-floating-back .ayah-card-top {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    margin-bottom: 16px !important;
  }

  .has-floating-back .ayah-card-top .ayah-number-badge {
    margin-bottom: 0 !important;
  }

  .has-floating-back .ayah-card.active .ayah-card-actions {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex-shrink: 0 !important;
    margin-right: 32px !important;
  }

  .has-floating-back .ayah-card-actions .ayah-share-btn,
  .has-floating-back .ayah-card-actions .ayah-copy-btn,
  .has-floating-back .ayah-card-actions .ayah-favorite-btn,
  .has-floating-back .ayah-card.active .ayah-card-actions .ayah-share-btn,
  .has-floating-back .ayah-card.active .ayah-card-actions .ayah-copy-btn,
  .has-floating-back .ayah-card.active .ayah-card-actions .ayah-favorite-btn {
    position: static !important;
    top: auto !important;
    right: auto !important;
    left: auto !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    min-height: 28px !important;
    max-width: 28px !important;
    max-height: 28px !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    transform: none !important;
    transition: none !important;
  }

  .has-floating-back .ayah-card-actions .ayah-share-btn:active,
  .has-floating-back .ayah-card-actions .ayah-copy-btn:active,
  .has-floating-back .ayah-card-actions .ayah-favorite-btn:active {
    transform: none !important;
    opacity: 1 !important;
    box-shadow: none !important;
    background: transparent !important;
    border: none !important;
  }

  .has-floating-back .ayah-card-actions .ayah-share-icon {
    width: 24px !important;
    height: 24px !important;
    display: block !important;
  }

  .has-floating-back .ayah-card-actions .ayah-share-btn i,
  .has-floating-back .ayah-card-actions .ayah-copy-btn i,
  .has-floating-back .ayah-card-actions .ayah-favorite-btn i {
    font-size: 24px !important;
    line-height: 1 !important;
    display: block !important;
  }

  body.theme-dark .has-floating-back .ayah-favorite-btn i {
    color: #f8fafc !important;
  }

  body.theme-dark .has-floating-back .ayah-favorite-btn.saved i {
    color: #ef4444 !important;
  }

  /* Share menu — alle items groene tablet-rand */
  .surah-ayah-share-menu .surah-ayah-share-sheet {
    border: 1px solid var(--border) !important;
    border-color: var(--border) !important;
  }

  .surah-ayah-share-menu a.surah-ayah-share-item,
  .surah-ayah-share-menu button.surah-ayah-share-item {
    border: 1px solid var(--border) !important;
    border-color: var(--border) !important;
  }

  .surah-ayah-share-menu .surah-ayah-share-close {
    border: 1px solid var(--border) !important;
    border-color: var(--border) !important;
    right: 0 !important;
    left: auto !important;
    transform: none !important;
    top: 0 !important;
    bottom: 0 !important;
    margin-top: auto !important;
    margin-bottom: auto !important;
  }

  .surah-ayah-share-menu .surah-ayah-share-close:active,
  .surah-ayah-share-menu .surah-ayah-share-close.tap-feedback {
    transform: none !important;
    opacity: 1 !important;
    box-shadow: none !important;
  }

  .surah-ayah-share-menu .surah-ayah-share-brand {
    border-top-color: var(--border) !important;
  }

  .surah-ayah-share-menu .surah-ayah-share-item-icon.is-whatsapp { border-color: #25d366 !important; }
  .surah-ayah-share-menu .surah-ayah-share-item-icon.is-telegram { border-color: #229ed9 !important; }
  .surah-ayah-share-menu .surah-ayah-share-item-icon.is-email { border-color: #6366f1 !important; }
  .surah-ayah-share-menu .surah-ayah-share-item-icon.is-copy { border-color: #2563eb !important; }
  .surah-ayah-share-menu .surah-ayah-share-item-icon.is-more { border-color: #64748b !important; }

  /* Share menu open — ayah + taal blokken geen rand */
  body:has(#surahAyahShareMenu):has(#surahDetail) .has-floating-back .ayah-card,
  body:has(#surahAyahShareMenu):has(#surahDetail) .has-floating-back .ayah-card.active {
    border-color: transparent !important;
    box-shadow: none !important;
  }

  body:has(#surahAyahShareMenu):has(#surahDetail) .has-floating-back .translation-block {
    border-color: transparent !important;
    box-shadow: none !important;
  }
}

/* =====================================================
   TABLET-IPAD.CSS — EIND BESTAND
   ===================================================== */









body:has(#surahDetail) .has-floating-back .ayah-card.highlight-ayah {
  background: linear-gradient(135deg, #fff8dc 0%, #ffe6a3 100%) !important;
  border: 2px solid #ffc107 !important;
  box-shadow: 0 0 25px rgba(255, 193, 7, 0.6) !important;
  animation: highlightGlow 3s ease-out !important;
}

body.theme-dark:has(#surahDetail) .has-floating-back .ayah-card.highlight-ayah {
  background: linear-gradient(135deg, rgba(255, 193, 7, 0.18) 0%, rgba(255, 193, 7, 0.10) 100%) !important;
  border: 2px solid rgba(255, 193, 7, 0.65) !important;
  box-shadow: 0 0 22px rgba(255, 193, 7, 0.30) !important;
}