/* Markaz Ilm — homepage Islamic tools */
.hero-prayer-chip { display: inline-flex; align-items: center; gap: .45rem; margin-top: 1.1rem; padding: .45rem .85rem; border-radius: 999px; background: #fff; border: 1px solid var(--mi-border); color: var(--mi-ink-2); font-size: .88rem; font-weight: 500; box-shadow: var(--mi-shadow-xs); }
    .hero-prayer-chip i:first-child { color: var(--mi-primary); }
    .hero-prayer-chip:hover { border-color: var(--mi-primary); color: var(--mi-primary); }
    .hero-prayer-chip strong { color: var(--mi-primary-700); font-weight: 600; }

    .pt-section { background: linear-gradient(180deg, #fff 0%, var(--mi-bg) 100%); }
    .pt-card { background: #fff; border: 1px solid var(--mi-border); border-radius: var(--mi-radius-lg); box-shadow: var(--mi-shadow-sm); height: 100%; }
    .pt-card-body { padding: 26px; }
    .pt-head { display: flex; justify-content: space-between; align-items: flex-start; gap: .75rem 1rem; flex-wrap: wrap; margin-bottom: 18px; }
    .pt-head h3 { font-size: 1.15rem; margin: 0 0 4px; display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
    .pt-head h3 > i { color: var(--mi-primary); }
    .pt-dates { font-size: .88rem; color: var(--mi-muted); display: flex; flex-wrap: wrap; gap: .2rem .9rem; }
    .pt-dates .hijri { color: var(--mi-accent-ink); font-weight: 600; }
    .pt-now strong { color: var(--mi-ink); font-variant-numeric: tabular-nums; }

    .pt-controls { display: grid; grid-template-columns: 1.1fr 1.5fr 1fr auto; gap: 10px; align-items: end; margin-bottom: 18px; }
    .pt-controls label { display: block; font-size: .7rem; font-weight: 600; text-transform: uppercase; letter-spacing: .07em; color: var(--mi-muted); margin-bottom: 4px; }
    .pt-locate .btn { white-space: nowrap; }

    .pt-next { position: relative; overflow: hidden; display: grid; grid-template-columns: 1fr auto; gap: 14px 20px; align-items: end;
      background: radial-gradient(420px 200px at 100% 0%, rgba(31,160,106,.22), transparent 60%), var(--mi-primary-900);
      color: #fff; border-radius: var(--mi-radius); padding: 20px 22px; margin-bottom: 16px; }
    .pt-next small { display: block; font-size: .7rem; letter-spacing: .09em; text-transform: uppercase; font-weight: 600; color: rgba(232,239,250,.7); margin-bottom: 2px; }
    .pt-next-name { font-family: var(--mi-font-head); font-size: 1.55rem; font-weight: 600; line-height: 1.2; }
    .pt-next-time { color: #7EDDAE; font-size: 1.1rem; font-weight: 500; margin-left: .25rem; }
    .pt-countdown { font-family: var(--mi-font-head); font-size: 1.9rem; font-weight: 600; line-height: 1.1; font-variant-numeric: tabular-nums; letter-spacing: .01em; }
    .pt-progress { grid-column: 1 / -1; height: 6px; border-radius: 999px; background: rgba(255,255,255,.15); overflow: hidden; }
    .pt-progress span { display: block; height: 100%; width: 0; background: #7EDDAE; border-radius: 999px; transition: width .8s linear; }

    .pt-grid { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
    .pt-tile { border: 1px solid var(--mi-border); border-radius: 12px; padding: 12px 6px; text-align: center; background: #fff; transition: background .2s, border-color .2s; }
    .pt-tile > i { color: var(--mi-primary); font-size: 1.05rem; }
    .pt-tile .nm { display: block; font-weight: 600; font-size: .85rem; margin-top: 4px; }
    .pt-tile .ar { display: block; font-family: "Amiri", "Noto Naskh Arabic", serif; font-size: 1rem; line-height: 1.3; color: var(--mi-accent-ink); }
    .pt-tile .tm { display: block; margin-top: 4px; font-family: var(--mi-font-head); font-weight: 600; font-size: 1rem; font-variant-numeric: tabular-nums; color: var(--mi-ink); white-space: nowrap; }
    .pt-tile.is-sunrise { background: var(--mi-bg); border-style: dashed; }
    .pt-tile.is-sunrise > i { color: var(--mi-accent); }
    .pt-tile.is-passed .tm, .pt-tile.is-passed .nm { color: var(--mi-faint); }
    .pt-tile.is-next { background: var(--mi-accent-50); border-color: var(--mi-accent); box-shadow: inset 0 0 0 1px var(--mi-accent); }
    .pt-tile.is-current { background: var(--mi-primary-50); border-color: rgba(2,81,183,.35); }
    .pt-note { display: flex; gap: .5rem; font-size: .8rem; color: var(--mi-muted); margin: 14px 0 0; }
    .pt-note i { margin-top: .1rem; }

    .qibla-wrap { display: flex; align-items: center; gap: 22px; }
    .qibla-compass { width: 220px; height: 220px; flex-shrink: 0; }
    .qibla-compass svg { width: 100%; height: 100%; display: block; overflow: visible; }
    .qibla-compass .ring-outer { fill: var(--mi-primary-25); stroke: var(--mi-border); stroke-width: 1; }
    .qibla-compass .ring { fill: #fff; stroke: var(--mi-border-strong); stroke-width: 1; }
    .qibla-compass .tk { stroke: var(--mi-border-strong); stroke-width: 1; }
    .qibla-compass .tk-major { stroke: var(--mi-faint); stroke-width: 2; }
    .qibla-compass .lbl, .qibla-compass .lbl-n { font: 600 13px var(--mi-font-head); text-anchor: middle; fill: var(--mi-muted); }
    .qibla-compass .lbl-n { fill: var(--mi-danger); }
    .qibla-compass .needle { stroke: var(--mi-primary); stroke-width: 3; stroke-linecap: round; }
    .qibla-compass .needle-head { fill: var(--mi-primary); }
    .qibla-compass .kaaba { fill: #1F2937; }
    .qibla-compass .kaaba-band { fill: var(--mi-accent); }
    .qibla-compass .hub { fill: var(--mi-primary-900); stroke: #fff; stroke-width: 3; }
    .qibla-compass .phone-mark { fill: var(--mi-accent); opacity: 0; transition: opacity .2s; }
    .qibla-compass.is-live .phone-mark { opacity: 1; }
    #ptDial, #ptNeedle { transform-box: view-box; transform-origin: 120px 120px; transition: transform .35s ease-out; }
    .qibla-card .pt-card-body { height: 100%; display: flex; flex-direction: column; }
    .qibla-card .qibla-wrap { flex: 1; justify-content: center; }
    .qibla-deg { font-family: var(--mi-font-head); font-size: 2.2rem; font-weight: 600; line-height: 1; color: var(--mi-ink); font-variant-numeric: tabular-nums; }
    .qibla-deg .unit { color: var(--mi-accent); }
    [data-qibla-live][aria-pressed="true"] { background: var(--mi-primary); color: #fff; }

    .adhan-list { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
    .adhan-row { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: 10px 12px; border: 1px solid var(--mi-border); border-radius: 12px; }
    .adhan-row label { display: flex; align-items: center; gap: .6rem; font-size: .9rem; font-weight: 600; cursor: pointer; min-width: 0; line-height: 1.25; }
    .adhan-row label > i { font-size: 1.1rem; }
    .adhan-row label i { color: var(--mi-primary); }
    .adhan-at { color: var(--mi-muted); font-weight: 400; font-size: .8rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
    .adhan-list.is-off { opacity: .55; }
    .adhan-words { list-style: none; padding: 0; margin: 0; counter-reset: aw; }
    .adhan-words li { display: grid; grid-template-columns: 1fr; gap: 2px; padding: 14px 0; border-bottom: 1px solid var(--mi-border); }
    .adhan-words li:last-child { border-bottom: 0; }
    .adhan-words .ar { font-family: "Amiri", "Noto Naskh Arabic", serif; font-size: 1.6rem; line-height: 1.7; color: var(--mi-primary-900); text-align: right; }
    .adhan-words .tr { font-weight: 600; color: var(--mi-ink); }
    .adhan-words .tr em { font-weight: 400; color: var(--mi-muted); font-style: normal; font-size: .85rem; }
    .adhan-words .mn { color: var(--mi-muted); font-size: .92rem; }
    .adhan-words .fajr-only { background: var(--mi-accent-50); margin: 0 -12px; padding: 14px 12px; border-radius: 10px; }

    @media (max-width: 1199.98px) {
      .pt-controls { grid-template-columns: 1fr 1fr; }
      .pt-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    }
    @media (max-width: 991.98px) {
      .adhan-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    }
    @media (max-width: 767.98px) {
      .pt-card-body { padding: 20px; }
      .pt-next { grid-template-columns: 1fr; }
      .pt-next .text-end { text-align: left !important; }
      .qibla-wrap { flex-direction: column; text-align: center; }
      .adhan-list { grid-template-columns: 1fr 1fr; }
    }
    @media (max-width: 575.98px) {
      .pt-controls { grid-template-columns: 1fr; }
      .pt-countdown { font-size: 1.6rem; }
      .qibla-compass { width: 200px; height: 200px; }
    }
.pt-quicklinks { display: flex; flex-wrap: wrap; gap: .5rem; }
    .pt-quicklinks a { display: inline-flex; align-items: center; gap: .4rem; padding: .45rem .85rem; border-radius: 999px; border: 1px solid var(--mi-border); background: #fff; color: var(--mi-ink-2); font-size: .86rem; font-weight: 500; }
    .pt-quicklinks a i { color: var(--mi-primary); }
    .pt-quicklinks a:hover { border-color: var(--mi-primary); color: var(--mi-primary); }

    .cal-adjust { min-width: 230px; }
    .cal-adjust .form-label { color: var(--mi-muted); font-weight: 600; }
    .cal-head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
    .cal-title { font-size: 1.35rem; margin: 0; }
    .cal-sub { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: .2rem .8rem; font-size: .88rem; color: var(--mi-muted); }
    .cal-sub .ar { font-family: "Amiri", "Noto Naskh Arabic", serif; font-size: 1.15rem; color: var(--mi-accent-ink); }
    .cal-toolbar { display: flex; justify-content: space-between; align-items: center; gap: .75rem; flex-wrap: wrap; margin-bottom: 12px; }
    .cal-legend { display: flex; flex-wrap: wrap; gap: .3rem .9rem; font-size: .75rem; color: var(--mi-muted); }
    .cal-legend span { display: inline-flex; align-items: center; gap: .35rem; }
    .cal-legend i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
    .lg-today { background: var(--mi-primary); }
    .lg-event { background: var(--mi-accent); border-radius: 50% !important; }
    .lg-white { background: var(--mi-primary-50); border: 1px solid rgba(2,81,183,.3); }
    .lg-fri { background: var(--mi-accent-50); border: 1px solid rgba(31,160,106,.4); }
    .cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
    .cal-weekdays { margin-bottom: 6px; }
    .cal-weekdays span { text-align: center; font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--mi-muted); }
    .cal-weekdays span.fri { color: var(--mi-accent-ink); }
    .cal-day { position: relative; border: 1px solid var(--mi-border); background: #fff; border-radius: 10px; min-height: 62px; padding: 6px 4px 8px; text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; cursor: pointer; color: var(--mi-ink); transition: border-color .15s, background .15s; }
    .cal-day:hover { border-color: var(--mi-primary); }
    .cal-day .hd { font-family: var(--mi-font-head); font-weight: 600; font-size: 1.05rem; line-height: 1.1; }
    .cal-day .gd { font-size: .7rem; color: var(--mi-muted); white-space: nowrap; }
    .cal-day.is-fri { background: var(--mi-accent-50); border-color: rgba(31,160,106,.35); }
    .cal-day.is-white { background: var(--mi-primary-25); border-color: rgba(2,81,183,.25); }
    .cal-day.has-event::after { content: ""; position: absolute; top: 6px; right: 6px; width: 7px; height: 7px; border-radius: 50%; background: var(--mi-accent); }
    .cal-day.is-today { background: var(--mi-primary); border-color: var(--mi-primary); color: #fff; }
    .cal-day.is-today .gd { color: rgba(255,255,255,.8); }
    .cal-day.is-today.has-event::after { background: #7EDDAE; }
    .cal-day.is-selected { box-shadow: 0 0 0 2px var(--mi-accent); }
    .cal-empty { min-height: 62px; }
    .cal-detail { margin-top: 14px; padding: 14px 16px; border-radius: 12px; background: var(--mi-bg); font-size: .9rem; min-height: 64px; }
    .cal-detail strong.dt { display: block; font-family: var(--mi-font-head); font-size: .98rem; }
    .cal-detail .tags { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: 8px; }

    .ev-feature { border-radius: var(--mi-radius); padding: 18px 20px; margin-bottom: 14px; color: #fff; position: relative; overflow: hidden;
      background: radial-gradient(360px 180px at 100% 0%, rgba(31,160,106,.28), transparent 60%), var(--mi-primary-900); }
    .ev-feature small { display: block; font-size: .7rem; text-transform: uppercase; letter-spacing: .09em; font-weight: 600; color: rgba(232,239,250,.7); }
    .ev-feature .ev-name { font-family: var(--mi-font-head); font-size: 1.3rem; font-weight: 600; margin: 2px 0; }
    .ev-feature .ar { font-family: "Amiri", "Noto Naskh Arabic", serif; font-size: 1.2rem; color: #7EDDAE; }
    .ev-feature .ev-when { font-size: .88rem; color: rgba(232,239,250,.85); }
    .ev-feature .ev-count { position: absolute; right: 18px; top: 16px; text-align: center; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.18); border-radius: 12px; padding: 8px 12px; }
    .ev-feature .ev-count strong { display: block; font-family: var(--mi-font-head); font-size: 1.5rem; line-height: 1; color: #fff; }
    .ev-feature .ev-count span { font-size: .7rem; color: rgba(232,239,250,.75); }
    .ev-feature .ev-text { padding-right: 90px; }
    .ev-feature .btn { margin-top: 10px; }
    .ev-list { list-style: none; padding: 0; margin: 0; max-height: 360px; overflow-y: auto; border: 1px solid var(--mi-border); border-radius: 12px; }
    .ev-item { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-bottom: 1px solid var(--mi-border); }
    .ev-item:last-child { border-bottom: 0; }
    .ev-item .date-chip { width: 50px; }
    .ev-item .ev-main { flex: 1; min-width: 0; }
    .ev-item .ev-main strong { display: block; font-size: .9rem; }
    .ev-item .ev-main small { color: var(--mi-muted); font-size: .78rem; }
    .ev-item .ev-days { font-size: .78rem; color: var(--mi-muted); white-space: nowrap; }
    .ev-item .btn-icon { width: 34px; height: 34px; flex-shrink: 0; }
    .ev-days-sm { display: none; }

    .mf-search { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 120px) auto auto; gap: 10px; align-items: end; background: #fff; border: 1px solid var(--mi-border); border-radius: var(--mi-radius-lg); padding: 14px; box-shadow: var(--mi-shadow-sm); margin-bottom: 18px; }
    .mf-field label { display: block; font-size: .7rem; font-weight: 600; text-transform: uppercase; letter-spacing: .07em; color: var(--mi-muted); margin-bottom: 4px; }
    .mf-field .input-icon { position: relative; }
    .mf-field .input-icon i { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--mi-primary); }
    .mf-field .input-icon .form-control { padding-left: 36px; }
    .mf-search .btn { min-height: 46px; }
    .mf-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 18px; }
    .mf-results { background: #fff; border: 1px solid var(--mi-border); border-radius: var(--mi-radius-lg); overflow: hidden; display: flex; flex-direction: column; min-height: 460px; }
    .mf-results-head { padding: 12px 16px; border-bottom: 1px solid var(--mi-border); color: var(--mi-muted); }
    .mf-results-head strong { color: var(--mi-ink); }
    .mf-list { overflow-y: auto; max-height: 460px; flex: 1; }
    .mf-item { display: flex; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--mi-border); }
    .mf-item:last-child { border-bottom: 0; }
    .mf-item.is-active { background: var(--mi-primary-25); box-shadow: inset 3px 0 0 var(--mi-primary); }
    .mf-item .mf-num { width: 30px; height: 30px; border-radius: 50%; background: var(--mi-primary-50); color: var(--mi-primary-700); font-weight: 600; font-size: .8rem; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
    .mf-item .mf-main { flex: 1; min-width: 0; }
    .mf-item h3 { font-size: .95rem; margin: 0 0 2px; }
    .mf-item .mf-addr { font-size: .8rem; color: var(--mi-muted); margin: 0 0 8px; }
    .mf-item .mf-dist { font-size: .78rem; font-weight: 600; color: var(--mi-primary-700); white-space: nowrap; }
    .mf-item .mf-actions { display: flex; gap: .4rem; flex-wrap: wrap; }
    .mf-map { position: relative; border-radius: var(--mi-radius-lg); overflow: hidden; border: 1px solid var(--mi-border); background: var(--mi-primary-25); min-height: 460px; }
    .mf-map iframe { width: 100%; height: 100%; min-height: 460px; border: 0; display: block; }
    .mf-map-link { position: absolute; right: 10px; bottom: 10px; background: #fff; padding: .3rem .6rem; border-radius: 8px; box-shadow: var(--mi-shadow-sm); }
    .mf-skeleton { padding: 14px 16px; border-bottom: 1px solid var(--mi-border); }
    .mf-skeleton span { display: block; height: 10px; border-radius: 6px; background: linear-gradient(90deg, var(--mi-bg), #E8EDF4, var(--mi-bg)); background-size: 200% 100%; animation: mfShimmer 1.2s infinite; margin-bottom: 8px; }
    .mf-skeleton span:nth-child(1) { width: 60%; } .mf-skeleton span:nth-child(2) { width: 85%; } .mf-skeleton span:nth-child(3) { width: 30%; }
    @keyframes mfShimmer { to { background-position: -200% 0; } }

    @media (max-width: 991.98px) {
      .mf-search { grid-template-columns: 1fr 1fr; }
      .mf-where { grid-column: 1 / -1; }
      .mf-body { grid-template-columns: 1fr; }
      .mf-map, .mf-map iframe { min-height: 320px; }
      .mf-results { min-height: 0; }
    }
    @media (max-width: 575.98px) {
      .cal-day { min-height: 50px; padding: 4px 2px 6px; border-radius: 8px; }
      .cal-empty { min-height: 50px; }
      .cal-day .hd { font-size: .95rem; }
      .cal-day .gd { font-size: .62rem; }
      .cal-grid { gap: 4px; }
      .cal-legend { display: none; }
      .cal-adjust { min-width: 0; width: 100%; }
      .mf-search { grid-template-columns: 1fr; }
      .ev-feature .ev-text { padding-right: 0; }
      .ev-item .ev-days { display: none; }
      .ev-days-sm { display: inline; }
      .ev-feature .ev-count { position: static; display: inline-block; margin-bottom: 10px; }
    }
.dua-tools { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
    .dua-tools .search-inline { min-width: 220px; }
    .dua-today { margin-bottom: 22px; }
    .dua-feature { position: relative; overflow: hidden; border-radius: var(--mi-radius-lg); padding: 28px 30px; color: #fff;
      background: radial-gradient(520px 240px at 100% 0%, rgba(31,160,106,.25), transparent 60%), var(--mi-primary-900); }
    .dua-feature small { display: block; font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 600; color: #7EDDAE; margin-bottom: 4px; }
    .dua-feature h3 { color: #fff; font-size: 1.15rem; margin: 0 0 12px; }
    .dua-feature .dua-ar { color: #fff; }
    .dua-feature .dua-tr { color: #B4EDCF; }
    .dua-feature .dua-en { color: rgba(232,239,250,.88); }
    .dua-feature .dua-ref { color: rgba(232,239,250,.7); }
    .dua-feature .btn-icon { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.2); color: #fff; }
    .dua-pills { display: flex; gap: .5rem; overflow-x: auto; padding-bottom: 6px; margin-bottom: 16px; scrollbar-width: thin; }
    .dua-pill { display: inline-flex; align-items: center; gap: .4rem; white-space: nowrap; border: 1px solid var(--mi-border); background: #fff; color: var(--mi-ink-2); border-radius: 999px; padding: .45rem .9rem; font-size: .86rem; font-weight: 500; }
    .dua-pill i { color: var(--mi-primary); }
    .dua-pill:hover { border-color: var(--mi-primary); color: var(--mi-primary); }
    .dua-pill.active { background: var(--mi-primary); border-color: var(--mi-primary); color: #fff; }
    .dua-pill.active i { color: #7EDDAE; }
    .dua-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
    .dua-card { background: #fff; border: 1px solid var(--mi-border); border-radius: var(--mi-radius); padding: 20px; display: flex; flex-direction: column; box-shadow: var(--mi-shadow-xs); }
    .dua-top { display: flex; justify-content: space-between; align-items: flex-start; gap: .5rem; margin-bottom: 10px; }
    .dua-top h3 { font-size: 1rem; margin: 0; }
    .dua-ar { font-family: "Amiri", "Noto Naskh Arabic", serif; font-size: calc(1.45rem * var(--dua-scale, 1)); line-height: 1.9; text-align: right; color: var(--mi-primary-900); margin: 0 0 10px; }
    .dua-tr { font-style: italic; color: var(--mi-accent-ink); font-size: .9rem; margin: 0 0 6px; }
    .dua-en { font-size: .9rem; color: var(--mi-ink-2); margin: 0 0 12px; }
    .dua-foot { margin-top: auto; display: flex; justify-content: space-between; align-items: center; gap: .5rem; padding-top: 10px; border-top: 1px solid var(--mi-border); }
    .dua-feature .dua-foot { border-top-color: rgba(255,255,255,.15); }
    .dua-ref { font-size: .78rem; color: var(--mi-muted); display: inline-flex; gap: .35rem; align-items: center; }
    .dua-card .btn-icon, .dua-feature .btn-icon { width: 34px; height: 34px; }

    .gc-label { font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .07em; color: var(--mi-muted); margin-bottom: 8px; float: none; width: auto; padding: 0; }
    .gc-occasions { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 8px; }
    .gc-occ input, .gc-theme input { position: absolute; opacity: 0; pointer-events: none; }
    .gc-occ { position: relative; margin: 0; }
    .gc-occ span { display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; padding: 10px 6px; border: 1px solid var(--mi-border-strong); border-radius: 12px; cursor: pointer; font-size: .8rem; font-weight: 500; color: var(--mi-ink-2); height: 100%; transition: border-color .15s, background .15s; }
    .gc-occ span b { font-family: "Amiri", "Noto Naskh Arabic", serif; font-weight: 700; font-size: 1.05rem; color: var(--mi-primary-900); }
    .gc-occ input:checked + span { border-color: var(--mi-primary); background: var(--mi-primary-25); box-shadow: inset 0 0 0 1px var(--mi-primary); color: var(--mi-primary-900); }
    .gc-occ input:focus-visible + span, .gc-theme input:focus-visible + span { outline: 3px solid rgba(31,160,106,.75); outline-offset: 2px; }
    .gc-themes { display: flex; flex-wrap: wrap; gap: 8px; }
    .gc-theme { position: relative; margin: 0; }
    .gc-theme span { display: inline-flex; align-items: center; gap: .5rem; padding: .45rem .85rem .45rem .5rem; border: 1px solid var(--mi-border-strong); border-radius: 999px; cursor: pointer; font-size: .85rem; font-weight: 500; }
    .gc-theme span::before { content: ""; width: 22px; height: 22px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 0 0 1px var(--mi-border-strong); }
    .t-emerald span::before { background: linear-gradient(135deg, #0251B7, #012062); }
    .t-night span::before { background: linear-gradient(135deg, #1B2A41, #0B1320); }
    .t-ivory span::before { background: linear-gradient(135deg, #FBF7EE, #F1E7D0); }
    .t-gold span::before { background: linear-gradient(135deg, #7EDDAE, #1FA06A); }
    .gc-theme input:checked + span { border-color: var(--mi-primary); background: var(--mi-primary-25); }
    .gc-preview { position: sticky; top: calc(var(--mi-header-h) + 20px); background: #fff; border: 1px solid var(--mi-border); border-radius: var(--mi-radius-lg); padding: 14px; box-shadow: var(--mi-shadow-md); }
    .gc-preview canvas { width: 100%; height: auto; display: block; border-radius: 12px; aspect-ratio: 1 / 1; }

    .zk-group { padding-bottom: 22px; margin-bottom: 22px; border-bottom: 1px solid var(--mi-border); }
    .zk-group h3 { font-size: 1.02rem; display: flex; align-items: center; gap: .6rem; margin-bottom: 14px; }
    .zk-karat { max-width: 92px; flex: 0 0 auto; }
    .zk-group:last-child { border-bottom: 0; padding-bottom: 0; }
    .zk-result { background: #fff; border: 1px solid var(--mi-border); border-radius: var(--mi-radius-lg); padding: 22px; box-shadow: var(--mi-shadow-sm); }
    .zk-due { border-radius: var(--mi-radius); padding: 20px; color: #fff; margin-bottom: 14px;
      background: radial-gradient(360px 180px at 100% 0%, rgba(31,160,106,.25), transparent 60%), var(--mi-primary-900); }
    .zk-due small { display: block; font-size: .72rem; letter-spacing: .09em; text-transform: uppercase; font-weight: 600; color: rgba(232,239,250,.7); }
    .zk-amount { font-family: var(--mi-font-head); font-size: 2.3rem; font-weight: 600; line-height: 1.15; color: #fff; font-variant-numeric: tabular-nums; word-break: break-word; }
    .zk-status { font-size: .88rem; color: rgba(232,239,250,.85); margin-top: 4px; }
    .zk-status.ok { color: #9BE3C4; }
    .zk-status.below { color: #B4EDCF; }
    .zk-facts li span:last-child { font-variant-numeric: tabular-nums; }
    .zk-facts small { color: var(--mi-faint); font-size: .75rem; }
    .zk-meter { height: 8px; border-radius: 999px; background: var(--mi-primary-50); overflow: hidden; margin-top: 6px; }
    .zk-meter span { display: block; height: 100%; width: 0; background: var(--mi-accent); border-radius: 999px; transition: width .4s var(--mi-ease); }
    .zk-meter span.full { background: var(--mi-primary); }

    @media (max-width: 1199.98px) { .dua-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
    @media (max-width: 991.98px) { .gc-preview { position: static; } }
    @media (max-width: 767.98px) {
      .dua-grid { grid-template-columns: 1fr; }
      .dua-tools { width: 100%; }
      .dua-tools .search-inline { flex: 1; min-width: 0; }
      .dua-feature { padding: 22px; }
      .zk-amount { font-size: 2rem; }
    }

/* Finding the visitor's location */
.pt-locating .ph-next, .pt-locating .pl-list .tm, .pt-locating .ph-dates { opacity: .35; transition: opacity .2s; }
.pt-locating .ph-loc .bi-geo-alt-fill { animation: locPulse 1s ease-in-out infinite; }
@keyframes locPulse { 50% { opacity: .3; transform: scale(.85); } }
@media (prefers-reduced-motion: reduce) { .pt-locating .ph-loc .bi-geo-alt-fill { animation: none; } }

/* Masjid finder — Google map */
.mf-map .mf-gmap { position: absolute; inset: 0; }
.mf-map .mf-gmap[hidden] { display: none; }
.mf-map iframe[hidden] { display: none; }
.mf-here { width: 16px; height: 16px; border-radius: 50%; background: #1A73E8; border: 3px solid #fff; box-shadow: 0 0 0 6px rgba(26,115,232,.22); }
.mf-iw { font: 500 13px/1.45 var(--mi-font-body); color: var(--mi-ink); max-width: 220px; }
.mf-iw a { font-weight: 600; }
.mf-num.is-osm { background: var(--mi-accent-50); color: var(--mi-accent-ink); }
.mf-hint { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; padding: 12px 16px; background: var(--mi-primary-25); border-bottom: 1px solid var(--mi-border); font-size: .82rem; color: var(--mi-ink-2); }
.mf-hint > i { color: var(--mi-primary); }
.mf-hint.is-warn { background: #FFF6E5; color: #7A4A00; }
.mf-hint.is-warn > i { color: #B45309; }
.mf-hint > span { flex: 1; min-width: 180px; }
.mf-sources { font-size: .76rem; color: var(--mi-muted); padding: 8px 16px; border-top: 1px solid var(--mi-border); margin: 0; }
.screen[data-screen="masjid"] .mf-actions { flex-wrap: nowrap; gap: 6px; }
.screen[data-screen="masjid"] .mf-actions .btn { padding: .32rem .62rem; white-space: nowrap; }
.mf-map-link { display: inline-flex; align-items: center; gap: .35rem; font-weight: 600; z-index: 2; }
@media (max-width: 991.98px) {
  .screen[data-screen="masjid"] .mf-body { display: flex; flex-direction: column; gap: 14px; }
  .screen[data-screen="masjid"] .mf-map { order: -1; }
  .screen[data-screen="masjid"] .mf-list { max-height: none; }
}