/* Al-Quran Axelit App (custom UI inspired by reference screenshot)
   Scope: only inside .aqaxl-app
*/
.aqaxl-app{
  --aq-primary:#18B7B5;
  --aq-primary-2:#6C63FF;
  --aq-bg:#EAFBFF;
  --aq-card:#FFFFFF;
  --aq-muted:#7B8794;
  --aq-shadow:0 12px 30px rgba(0,0,0,.10);
  --aq-radius:24px;
  font-family: "Montserrat", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

/* --- Scoped reset to avoid theme CSS bleeding into the app --- */
.aqaxl-app, .aqaxl-app *{ box-sizing:border-box; }
.aqaxl-app *{ font-family: inherit; }
.aqaxl-app button, .aqaxl-app input{ font-family: inherit !important; }
.aqaxl-app button{
  -webkit-appearance:none; appearance:none;
  outline:none !important; box-shadow:none !important;
}
.aqaxl-app button:focus, .aqaxl-app button:active{ outline:none !important; box-shadow:none !important; }
/* Keep Tabler icon font from being overridden by the app font */
.aqaxl-app i.ti{ font-family: "tabler-icons" !important; }
/* Arabic should use an Arabic font (fallbacks) */
.aqaxl-app .aqaxl-ayah-ar, .aqaxl-app .aqaxl-arabic{
  font-family: "Amiri", "Scheherazade New", "Noto Naskh Arabic", serif !important;
}
.aqaxl-wrap{
  background: radial-gradient(1200px 600px at 50% -200px, #ffffff 0%, var(--aq-bg) 55%, #ffffff 100%);
  /* full-height phone frame centered */
  padding: 0 !important;
  min-height: 100vh;
  min-height: 100svh;
  display:flex;
  justify-content:center;
  align-items: stretch;
}
.aqaxl-frame{
  max-width: 500px;
  width: 100%;
  margin: 0 auto;
  background: var(--aq-card);
  border-radius: var(--aq-radius);
  box-shadow: var(--aq-shadow);
  overflow: hidden;
  position: relative;

  /* make the app fill from top to bottom */
  height: 100vh;
  height: 100svh;
  max-height: 100vh;
  max-height: 100svh;
  display: flex;
  flex-direction: column;
}
.aqaxl-topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 18px 18px 8px 18px;
}
.aqaxl-topbar .aqaxl-greet small{
  display:block;
  color: var(--aq-muted);
  font-weight:600;
  font-size: 12px;
}
.aqaxl-topbar .aqaxl-greet h3{
  margin:2px 0 0 0;
  font-size: 22px;
  line-height: 1.1;
  font-weight: 800;
}
.aqaxl-icon-btn{
  width: 38px;
  height: 38px;
  border-radius: 14px;
  display:flex;
  align-items:center;
  justify-content:center;
  color: rgba(0,0,0,.65);
  background: rgba(24,183,181,.10);
  cursor:pointer;
}
.aqaxl-hero{
  margin: 8px 18px 12px 18px;
  border-radius: 20px;
  padding: 16px 16px;
  color: #fff;
  background: linear-gradient(100deg, var(--aq-primary) 0%, var(--aq-primary-2) 58%, #B94BFF 100%);
  position: relative;
  overflow:hidden;
}
.aqaxl-hero .aqaxl-hero-title{
  font-weight: 800;
  font-size: 14px;
  margin-bottom: 4px;
}
.aqaxl-hero .aqaxl-hero-sub{
  font-weight: 600;
  font-size: 12px;
  opacity: .92;
}
.aqaxl-progress{
  height: 6px;
  background: rgba(255,255,255,.25);
  border-radius: 999px;
  overflow:hidden;
  margin-top: 12px;
  width: 75%;
}
.aqaxl-progress > span{
  display:block;
  height: 100%;
  width: 3%;
  background: rgba(255,255,255,.95);
  border-radius: 999px;
}
.aqaxl-hero .aqaxl-badge{
  position:absolute;
  right: 14px;
  top: 14px;
  font-weight: 800;
  font-size: 12px;
  background: rgba(255,255,255,.18);
  border: 1px solid rgba(255,255,255,.24);
  padding: 6px 10px;
  border-radius: 999px;
}
.aqaxl-section{
  padding: 6px 18px 12px 18px;
}
.aqaxl-section .aqaxl-section-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin: 8px 0 10px 0;
}
.aqaxl-section h4{
  font-size: 14px;
  font-weight: 800;
  margin:0;
}
.aqaxl-link{
  font-size: 12px;
  font-weight: 700;
  color: var(--aq-primary);
}
.aqaxl-card{
  background: #fff;
  border: 1px solid rgba(17,24,39,.06);
  border-radius: 18px;
  padding: 14px 14px;
  box-shadow: 0 8px 18px rgba(0,0,0,.04);
}
.aqaxl-row{
  display:flex;
  gap: 12px;
  align-items:center;
  justify-content:space-between;
}
.aqaxl-pill{
  display:inline-flex;
  align-items:center;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 14px;
  background: rgba(24,183,181,.10);
  color: rgba(0,0,0,.75);
  font-size: 12px;
  font-weight: 700;
}
.aqaxl-date{
  background: rgba(24,183,181,.12);
  color: rgba(0,0,0,.65);
  font-weight: 800;
  font-size: 11px;
  padding: 6px 10px;
  border-radius: 999px;
}
.aqaxl-list{
  margin:0;
  padding:0;
  list-style:none;
}
.aqaxl-list li{
  border-radius: 16px;
  padding: 12px 12px;
  border: 1px solid rgba(17,24,39,.06);
  margin-bottom: 10px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
}
.aqaxl-list .aqaxl-li-left{
  display:flex;
  align-items:center;
  gap: 12px;
  min-width: 0;
}
.aqaxl-ico{
  width: 42px;
  height: 42px;
  border-radius: 16px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(24,183,181,.12);
  color: var(--aq-primary);
  flex: 0 0 auto;
  font-size: 18px;
}
.aqaxl-li-title{
  font-weight: 900;
  font-size: 13px;
  margin:0;
}
.aqaxl-li-sub{
  font-weight: 600;
  font-size: 12px;
  color: var(--aq-muted);
  margin:0;
  white-space: nowrap;
  overflow:hidden;
  text-overflow: ellipsis;
  max-width: 250px;
}
.aqaxl-chevron{
  color: rgba(0,0,0,.35);
  font-size: 18px;
}
/* Avoid "black" tap/click highlight on some themes/browsers */
.aqaxl-app *{ -webkit-tap-highlight-color: transparent; }
.aqaxl-app :focus{ outline: none; }


/* Screens */
.aqaxl-screen{
  display:none;
  /* space for floating nav + safe area */
  padding-bottom: calc(124px + env(safe-area-inset-bottom, 0px));
  flex: 1;
  min-height: 0;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}
.aqaxl-screen.is-active{ display:block; }

/* Reading screen */
.aqaxl-read-head{
  padding: 18px 18px 8px 18px;
}
.aqaxl-read-head h3{
  margin:0;
  font-size: 22px;
  font-weight: 900;
}
.aqaxl-search{
  margin-top: 10px;
  position: relative;
}
.aqaxl-search input{
  width: 100%;
  border-radius: 18px;
  border: 1px solid rgba(17,24,39,.10);
  padding: 12px 42px 12px 14px;
  font-weight: 700;
  font-size: 13px;
  outline: none;
  background: #fff;
}
.aqaxl-search .ti{
  position:absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 18px;
  color: rgba(0,0,0,.45);
}
.aqaxl-chips{
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
  padding: 8px 18px 10px 18px;
}
.aqaxl-chip{
  border: 1px solid rgba(24,183,181,.35);
  color: rgba(0,0,0,.7);
  background: rgba(24,183,181,.08);
  padding: 8px 12px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  cursor:pointer;
}
.aqaxl-tabs{
  display:flex;
  gap: 18px;
  padding: 0 18px;
  border-bottom: 1px solid rgba(17,24,39,.06);
}
.aqaxl-tab{
  padding: 10px 0 12px 0;
  font-weight: 900;
  font-size: 12px;
  color: rgba(0,0,0,.45);
  cursor:pointer;
  position:relative;
}
.aqaxl-tab.is-active{
  color: rgba(0,0,0,.85);
}
.aqaxl-tab.is-active::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-1px;
  height: 3px;
  border-radius: 99px;
  background: var(--aq-primary);
}
.aqaxl-surah-list{
  padding: 12px 18px 18px 18px;
}
.aqaxl-surah-item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  border-bottom: 1px solid rgba(17,24,39,.06);
  padding: 12px 0;
  cursor:pointer;
}
.aqaxl-surah-item:last-child{ border-bottom: 0; }
.aqaxl-surah-left{
  display:flex;
  align-items:center;
  gap: 12px;
  min-width:0;
}
.aqaxl-num{
  width: 34px;
  height: 34px;
  border-radius: 14px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(24,183,181,.12);
  color: var(--aq-primary);
  font-weight: 900;
  font-size: 13px;
  flex:0 0 auto;
}
.aqaxl-surah-title{
  margin:0;
  font-weight: 900;
  font-size: 13px;
}
.aqaxl-surah-sub{
  margin:0;
  font-weight: 700;
  font-size: 12px;
  color: var(--aq-muted);
}
.aqaxl-arabic{
  font-size: 18px;
  font-weight: 700;
  font-family: "Amiri", "Scheherazade New", "Noto Naskh Arabic", serif;
  color: rgba(0,0,0,.85);
  white-space: nowrap;
}

/* Bottom nav */
.aqaxl-nav{
  position:absolute;
  left: 14px;
  right: 14px;
  bottom: calc(14px + env(safe-area-inset-bottom, 0px));
  background: rgba(24,183,181,.96);
  padding: 12px 12px;
  display:flex;
  justify-content:space-around;
  align-items:center;
  gap: 6px;
  border-radius: 22px;
  box-shadow: 0 18px 40px rgba(0,0,0,.18);
}
.aqaxl-nav button{
  border:0;
  background: transparent;
  color: rgba(255,255,255,.80);
  display:flex;
  flex-direction: column;
  align-items:center;
  gap: 2px;
  padding: 6px 8px;
  font-weight: 800;
  font-size: 10px;
  cursor:pointer;
}
.aqaxl-nav button .ti{
  font-size: 18px;
}
.aqaxl-nav button.is-active{
  color: #fff;
}

/* Reader modal */
.aqaxl-modal{
  /* modal is inside .aqaxl-frame; keep it within the phone frame */
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.35);
  display:none;
  align-items:flex-end;
  justify-content:center;
  z-index: 50;
}
.aqaxl-modal.is-open{ display:flex; }
.aqaxl-sheet{
  width: 100%;
  max-width: 500px;
  background: #fff;
  border-top-left-radius: 22px;
  border-top-right-radius: 22px;
  box-shadow: 0 -20px 60px rgba(0,0,0,.18);
  max-height: calc(100% - 12px);
  overflow: hidden;
  display:flex;
  flex-direction: column;
}
.aqaxl-sheet-head{
  padding: 14px 16px;
  border-bottom: 1px solid rgba(17,24,39,.06);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
}
.aqaxl-sheet-title{
  font-weight: 900;
  margin:0;
  font-size: 14px;
}
.aqaxl-sheet-sub{
  margin:2px 0 0 0;
  font-size: 12px;
  color: var(--aq-muted);
  font-weight: 700;
}
.aqaxl-close{
  width: 38px;
  height: 38px;
  border-radius: 14px;
  border: 1px solid rgba(17,24,39,.08) !important;
  background: rgba(0,0,0,.02) !important;
  box-shadow: none !important;
  cursor:pointer;
}
.aqaxl-sheet-body{
  padding: 14px 16px 18px 16px;
  overflow:auto;
  flex: 1;
}
.aqaxl-ayah{
  padding: 10px 0;
  border-bottom: 1px solid rgba(17,24,39,.06);
}
.aqaxl-ayah:last-child{ border-bottom: 0; }
.aqaxl-ayah .aqaxl-ayah-num{
  font-weight: 900;
  font-size: 12px;
  color: var(--aq-primary);
}
.aqaxl-ayah .aqaxl-ayah-ar{
  margin: 6px 0 6px 0;
  font-size: 22px;
  line-height: 1.55;
  text-align: right;
  font-family: "Amiri", "Scheherazade New", "Noto Naskh Arabic", serif;
}
.aqaxl-ayah .aqaxl-ayah-id{
  margin:0;
  font-weight: 700;
  font-size: 13px;
  line-height: 1.55;
  color: rgba(0,0,0,.78);
}
.aqaxl-skeleton{
  background: linear-gradient(90deg, rgba(0,0,0,.05) 0%, rgba(0,0,0,.08) 50%, rgba(0,0,0,.05) 100%);
  background-size: 200% 100%;
  animation: aqaxl-shimmer 1.1s infinite linear;
  border-radius: 14px;
}
@keyframes aqaxl-shimmer{ from{background-position: 200% 0;} to{background-position:-200% 0;} }

.aqaxl-note{
  font-size: 12px;
  color: var(--aq-muted);
  font-weight: 700;
}

/* Keep it comfy on small screens */
@media (max-width: 420px){
  .aqaxl-wrap{ padding: 0 !important; }
  .aqaxl-topbar, .aqaxl-read-head{ padding-left: 14px; padding-right: 14px; }
  .aqaxl-hero{ margin-left: 14px; margin-right: 14px; }
  .aqaxl-section{ padding-left: 14px; padding-right: 14px; }
  .aqaxl-chips, .aqaxl-tabs, .aqaxl-surah-list{ padding-left: 14px; padding-right: 14px; }
}


/* v1.1 additions */

.aqaxl-btn{
  border: 0 !important;
  outline: none !important;
  cursor: pointer;
  border-radius: 14px;
  padding: 10px 12px;
  font-weight: 800;
  font-size: 13px;
  display: inline-flex;
  align-items: center;
  justify-content:center;
  gap: 8px;
  box-shadow: none !important;
}
.aqaxl-btn i{ font-size: 18px; }
.aqaxl-btn-primary{
  color: #fff !important;
  background: linear-gradient(100deg, var(--aq-primary) 0%, var(--aq-primary-2) 100%) !important;
  box-shadow: 0 10px 18px rgba(24,183,181,.18) !important;
}
.aqaxl-btn-soft{
  color: rgba(0,0,0,.75) !important;
  background: rgba(24,183,181,.10) !important;
  border: 1px solid rgba(24,183,181,.18) !important;
}
.aqaxl-btn[disabled]{ opacity: .45; cursor:not-allowed; }
.aqaxl-reader-head{
  display:flex;
  gap: 10px;
  align-items:center;
  justify-content:flex-start;
  margin-bottom: 10px;
}
.aqaxl-more{
  position: sticky;
  bottom: 0;
  padding: 10px 0 4px 0;
  background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.90) 40%, rgba(255,255,255,1) 100%);
  display:flex;
  justify-content:center;
}
.aqaxl-reader-list{ padding-bottom: 4px; }

.aqaxl-ayah-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
}
.aqaxl-ayah-actions{
  display:flex;
  gap: 6px;
  align-items:center;
}
.aqaxl-icon-mini{
  width: 34px;
  height: 34px;
  border-radius: 12px;
  border: 1px solid rgba(17,24,39,.10) !important;
  background: rgba(0,0,0,.02) !important;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  box-shadow: none !important;
}
.aqaxl-icon-mini i{ font-size: 18px; color: rgba(0,0,0,.75) !important; }
.aqaxl-icon-mini.is-on{
  background: rgba(24,183,181,.16) !important;
  border-color: rgba(24,183,181,.28) !important;
}
.aqaxl-icon-mini.is-on i{ color: rgba(24,183,181,1) !important; }

.aqaxl-ayah .aqaxl-ayah-ar{
  font-size: 22px;
  font-weight: 700;
  direction: rtl;
  text-align: right;
  line-height: 1.7;
  margin-top: 6px;
}
.aqaxl-ayah .aqaxl-ayah-tr{
  font-size: 12px;
  color: rgba(0,0,0,.55);
  font-weight: 700;
  margin-top: 6px;
  line-height: 1.5;
}

.aqaxl-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 10px;
}
.aqaxl-grid-btn{
  border: 1px solid rgba(17,24,39,.10);
  background: rgba(0,0,0,.02);
  border-radius: 18px;
  padding: 12px 10px;
  display:flex;
  flex-direction:column;
  gap: 2px;
  align-items:flex-start;
  cursor:pointer;
}
.aqaxl-grid-btn span{
  font-size: 11px;
  color: rgba(0,0,0,.55);
  font-weight: 800;
}
.aqaxl-grid-btn b{
  font-size: 18px;
  font-weight: 900;
  margin:0;
}
.aqaxl-grid-btn:hover{
  background: rgba(24,183,181,.08);
  border-color: rgba(24,183,181,.20);
}

.aqaxl-pagebox{
  display:flex;
  gap: 10px;
  align-items:center;
  margin-top: 12px;
}
.aqaxl-page-input{
  flex: 1;
  border: 1px solid rgba(17,24,39,.10);
  border-radius: 16px;
  padding: 12px 12px;
  font-weight: 800;
  outline: none;
  background: rgba(0,0,0,.02);
}

.aqaxl-divider{
  margin: 10px 0 6px 0;
  padding: 8px 10px;
  font-weight: 900;
  font-size: 12px;
  border-radius: 14px;
  background: rgba(24,183,181,.10);
  color: rgba(0,0,0,.75);
  border: 1px solid rgba(24,183,181,.16);
}

.aqaxl-toast{
  position: absolute;
  left: 50%;
  bottom: calc(128px + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%) translateY(10px);
  background: rgba(17,24,39,.92);
  color: #fff;
  font-weight: 800;
  font-size: 12px;
  padding: 10px 12px;
  border-radius: 999px;
  opacity: 0;
  transition: all .25s ease;
  z-index: 60;
}
.aqaxl-toast.is-on{
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}


@media (max-width: 560px){
  .aqaxl-frame{
    height: 100vh;
    height: 100svh;
    max-height: 100vh;
    max-height: 100svh;
    border-radius: 0;
  }
  .aqaxl-nav{
    left: 12px;
    right: 12px;
    border-radius: 20px;
  }
}