/**
 *                          ___                   _       _         _ 
 *                         / __)                 | |     | |       | |
 *     _ _ _ _ _ _ _ _ _ _| |__ _____  ____ _   _| |  _  | |__   __| |
 *    | | | | | | | | | (_   __|____ |/ ___) | | | |_/ ) |  _ \ / _  |
 *    | | | | | | | | | | | |  / ___ | |   | |_| |  _ ( _| |_) | (_| |
 *     \___/ \___/ \___(_)|_|  \_____|_|   |____/|_| \_|_)____/ \____|
 *                                                                    
 *
 * 	Author: MD OMAR FARUK
 * 	Author URI: www.faruk.bd
 * 	Author Contact: https://faruk.bd/#contact
 * 	Author Email: info@faruk.bd | farukmr@gmail.com
 * 	Copyright © 2026
 *                          ___                   _       _         _ 
 *                         / __)                 | |     | |       | |
 *     _ _ _ _ _ _ _ _ _ _| |__ _____  ____ _   _| |  _  | |__   __| |
 *    | | | | | | | | | (_   __|____ |/ ___) | | | |_/ ) |  _ \ / _  |
 *    | | | | | | | | | | | |  / ___ | |   | |_| |  _ ( _| |_) | (_| |
 *     \___/ \___/ \___(_)|_|  \_____|_|   |____/|_| \_|_)____/ \____|
 *                                                                    
 */
/* Quran CMS - the Arabic letter board and the quiz */
.alw { margin: 1.6rem 0 2rem; }
.alw-head { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; justify-content: space-between; margin-bottom: 1rem; }
.alw-marks { display: flex; flex-wrap: wrap; gap: .3rem; }
.alw-marks button { border: 1px solid var(--line); background: var(--surface); color: var(--ink-2); border-radius: 999px;
                    padding: .35rem .8rem; font: inherit; font-size: .85rem; font-weight: 600; cursor: pointer; display: inline-flex; gap: .35rem; align-items: center; }
.alw-marks button.on { background: var(--brand); border-color: var(--brand); color: #fff; }
.alw-marks .ar { font-family: var(--font-ar); font-size: 1.15em; }
.alw-tools { display: flex; gap: .4rem; }
.alw-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: .7rem; }
.alw-card { display: flex; flex-direction: column; align-items: center; gap: .1rem; padding: .9rem .5rem .7rem; border-radius: 16px;
            border: 1px solid var(--line); background: var(--surface); color: var(--ink); cursor: pointer; font: inherit;
            transition: transform .15s, border-color .15s, box-shadow .15s; }
.alw-card:hover { transform: translateY(-3px); border-color: var(--brand-2, var(--brand)); box-shadow: 0 10px 22px rgba(11,107,85,.12); }
.alw-card.is-on { background: var(--brand-soft); border-color: var(--brand); }
.alw-ch { font-family: var(--font-ar); font-size: 2.6rem; line-height: 1.5; color: var(--brand); }
.alw-nm { font-weight: 700; font-size: .92rem; }
.alw-en { color: var(--muted); font-size: .76rem; }
.alw-zoom { position: relative; margin-top: 1rem; padding: 1.4rem 1.2rem; border-radius: 20px; border: 1px solid var(--line);
            background: linear-gradient(180deg, var(--brand-soft), var(--surface)); text-align: center; }
.alw-zoom[hidden] { display: none; }
.alw-zoom-x { position: absolute; top: .5rem; inset-inline-end: .5rem; }
.alw-zoom-ch { font-family: var(--font-ar); font-size: 5rem; line-height: 1.3; color: var(--brand); }
.alw-zoom-nm { font-size: 1.2rem; font-weight: 700; }
.alw-zoom-nm small { color: var(--muted); font-weight: 500; }
.alw-zoom-forms { display: flex; justify-content: center; gap: 1.4rem; margin: .8rem 0; flex-wrap: wrap; }
.alw-zoom-forms span { display: flex; flex-direction: column; gap: .1rem; color: var(--muted); font-size: .8rem; }
.alw-zoom-forms b { font-family: var(--font-ar); font-size: 2rem; color: var(--ink); font-weight: 400; }
.alw-zoom-btns { display: flex; justify-content: center; gap: .4rem; }

/* ------------------------------------------------------------- the quiz */
.alq { margin: 1.6rem 0 2rem; border: 1px solid var(--line); border-radius: 20px; background: var(--surface); padding: 1.4rem; }
.alq h3 { margin: 0 0 .3rem; display: flex; align-items: center; gap: .5rem; }
.alq-start p { color: var(--muted); margin: 0 0 .9rem; }
.alq-modes { display: flex; flex-wrap: wrap; gap: .5rem; }
.alq-best { margin: .9rem 0 0; color: var(--brand); font-weight: 700; }
.alq-bar { height: 6px; border-radius: 6px; background: var(--line-2); overflow: hidden; margin-bottom: .7rem; }
.alq-bar span { display: block; height: 100%; width: 0; background: var(--brand); transition: width .3s; }
.alq-meta { display: flex; justify-content: space-between; color: var(--muted); font-size: .88rem; font-weight: 600; }
.alq-q { text-align: center; margin: 1rem 0 1.2rem; display: flex; flex-direction: column; align-items: center; gap: .5rem; }
.alq-big { font-family: var(--font-ar); font-size: 4.5rem; line-height: 1.25; color: var(--brand); }
.alq-word { font-size: 2rem; font-weight: 800; color: var(--brand); }
.alq-ask { color: var(--ink-2); font-weight: 600; }
.alq-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: .6rem; }
.alq-opt { padding: .8rem .6rem; border-radius: 14px; border: 1px solid var(--line); background: var(--surface); color: var(--ink);
           font: inherit; font-size: 1.05rem; font-weight: 700; cursor: pointer; transition: .15s; }
.alq-opt.is-ar { font-family: var(--font-ar); font-size: 2rem; }
.alq-opt:hover:not(:disabled) { border-color: var(--brand); background: var(--brand-soft); }
.alq-opt.is-right { border-color: var(--ok, #1f9d55); background: rgba(31,157,85,.14); }
.alq-opt.is-wrong { border-color: var(--danger, #b42318); background: rgba(180,35,24,.12); }
.alq-tip { margin-top: .9rem; padding: .7rem .9rem; border-radius: 12px; background: var(--bg-2, var(--brand-soft)); font-size: .95rem; }
.alq-tip .ar { font-family: var(--font-ar); font-size: 1.5rem; vertical-align: middle; }
.alq-tip .ok { color: var(--ok, #1f9d55); }
.alq-tip .no { color: var(--danger, #b42318); }
.alq-done { text-align: center; }
.alq-score { font-size: 3rem; font-weight: 800; color: var(--brand); }
.alq-score small { font-size: .45em; color: var(--muted); }
.alq-done p { color: var(--ink-2); margin: .3rem 0 1rem; }

@media (max-width: 560px) {
  .alw-grid { grid-template-columns: repeat(auto-fill, minmax(86px, 1fr)); gap: .5rem; }
  .alw-ch { font-size: 2.1rem; }
  .alq { padding: 1rem; }
  .alq-big { font-size: 3.4rem; }
}