:root{ --bg:#ffffff; --text:#0f172a; --muted:#475569; --line:#e5e7eb; --card:#ffffff; --shadow: 0 12px 30px rgba(2,6,23,.08); --green:#0f7a3a; --green2:#19a34a; --greenSoft:#e9f7ee; --gold:#c9a227; --overlay: rgba(2,6,23,.45); --panelBg: #fbfbfb; --clockBg: transparent; --clockBorder: rgba(15,23,42,.12); --pillShadow: 0 10px 18px rgba(2,6,23,.08); --btnShadow2: 0 10px 18px rgba(2,6,23,.08); --p-green-bg: #0a8f3f; --p-green-bd: #065f2a; --p-red-bg: #d81f1f; --p-red-bd: #7a0c0c; --p-blue-bg: #1e4ed8; --p-blue-bd: #0b2a7a; --p-gray-bg: #4b5563; --p-gray-bd: #111827; --warn-bg: #dc2626; --warn-text: #ffffff; --warn-border: #991b1b; } body[data-theme="dark"]{ --bg:#07130b; --text:#e8f1ea; --muted:#a7c0b0; --line: rgba(232,241,234,.12); --card:#0b1a10; --shadow: 0 18px 40px rgba(0,0,0,.35); --greenSoft: rgba(25,163,74,.12); --overlay: rgba(0,0,0,.62); --panelBg: rgba(255,255,255,.04); --clockBorder: rgba(232,241,234,.14); --pillShadow: 0 16px 26px rgba(0,0,0,.35); --btnShadow2: 0 14px 26px rgba(0,0,0,.35); --p-green-bg: #12b35a; --p-green-bd: #0b7a3a; --p-red-bg: #ff3b3b; --p-red-bd: #a11212; --p-blue-bg: #3b82f6; --p-blue-bd: #1e40af; --p-gray-bg: #9ca3af; --p-gray-bd: #374151; --warn-bg: #ef4444; --warn-text: #ffffff; --warn-border: #7f1d1d; } *{ box-sizing:border-box; } body{ margin:0; font-family:"Tajawal","Cairo","Noto Kufi Arabic",system-ui,sans-serif; background:var(--bg); color:var(--text); min-height:100vh; display:flex; flex-direction:column; } .pageW{ width:min(960px, 100%); margin-inline:auto; padding-inline:14px; } .wrap{ flex:1 0 auto; } .topbar{ padding:12px 0; background:transparent; } .topbarCard{ background:linear-gradient(90deg, var(--green), var(--green2)); color:#fff; border-radius:16px; box-shadow:0 10px 20px rgba(15,122,58,.20); padding:10px 12px; border:1px solid rgba(255,255,255,.14); } .topbarInner{ display:grid; grid-template-columns: 1fr auto 1fr; align-items:center; gap:8px; min-height:38px; } .topbarLeft, .topbarRight{ display:flex; align-items:center; gap:8px; min-width:0; } .topbarLeft{ justify-self:start; } .topbarRight{ justify-self:end; } .topTitleOnly{ font-weight:1000; letter-spacing:.2px; font-size:16px; line-height:1.2; padding:7px 10px; border-radius:999px; background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.22); white-space:nowrap; justify-self:center; } .themeTextBtn{ padding:6px 9px; border-radius:999px; border:1px solid rgba(255,255,255,.22); background:rgba(255,255,255,.14); color:#fff; font-weight:1000; font-size:12px; cursor:pointer; white-space:nowrap; } .topbarCityBtn{ max-width:155px; padding:6px 8px; border-radius:12px; border:1px solid rgba(255,255,255,.22); background:rgba(255,255,255,.14); color:#fff; font-weight:1000; font-size:12px; display:inline-flex; align-items:center; gap:6px; } .topbarCityBtn svg{ width:14px; height:14px; opacity:.92; flex-shrink:0; } .topbarGeoBtn{ width:34px; height:34px; border-radius:12px; border:1px solid rgba(255,255,255,.22); background:rgba(255,255,255,.14); color:#fff; display:flex; align-items:center; justify-content:center; cursor:pointer; flex-shrink:0; } .topbarGeoBtn svg{ width:16px; height:16px; } .main{ background:var(--card); border:1px solid var(--line); border-radius:18px; box-shadow:var(--shadow); overflow:hidden; } .mainHeader{ padding:14px; border-bottom:1px solid var(--line); background:var(--panelBg); } .mainHeaderLayout { display: grid; grid-template-columns: 180px 1fr 180px; gap: 24px; align-items: start; } .headerSide { display: flex; flex-direction: column; align-items: center; justify-content: start; } .headerCenter { min-width: 0; } .headerClockWrap { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 12px; } .headerClockTitle { font-size: 14px; font-weight: 1000; color: var(--text); background: var(--card); padding: 4px 14px; border-radius: 999px; border: 1px solid var(--line); box-shadow: 0 4px 10px rgba(0,0,0,0.05); } .headerClockBox { width: 100%; aspect-ratio: 1/1; border-radius: 50%; background: var(--clockBg); border: 2px solid var(--clockBorder); box-shadow: inset 0 0 10px rgba(0,0,0,0.05), 0 8px 16px rgba(0,0,0,0.1); overflow: hidden; display: flex; align-items: center; justify-content: center; } body[data-theme="dark"] .headerClockBox { box-shadow: inset 0 0 10px rgba(0,0,0,0.5), 0 8px 20px rgba(0,0,0,0.4); } .headerClockBox.gh { border-color: rgba(201,162,39,.4); } canvas { width: 100%; height: 100%; display: block; direction: ltr !important; } .miniDigital { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; } .timeBox { display: inline-flex; align-items: baseline; gap: 4px; white-space: nowrap; direction: ltr; unicode-bidi: isolate; } .miniMain { font-weight: 1000; line-height: 1; letter-spacing: .5px; font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1, "lnum" 1; font-size: 32px; } .secondsMini { font-weight: 1000; opacity: .95; font-size: 18px; } .secondsMini::before{ content:":"; opacity:.6; margin:0 2px; } .ampm, .phase { font-weight: 1000; font-size: 13px; opacity: .9; padding: 4px 12px; border-radius: 999px; border: 1px solid rgba(15,23,42,.10); background: rgba(255,255,255,.45); } body[data-theme="dark"] .ampm, body[data-theme="dark"] .phase { border-color: rgba(232,241,234,.14); background: rgba(255,255,255,.05); } .headerMainStack{ display:flex; flex-direction:column; align-items:stretch; gap:10px; } .dateRow{ display:flex; align-items:center; justify-content:center; gap:10px; width:100%; } .fullDateLine{ width:100%; text-align:center; font-family:Tahoma, Arial, sans-serif; font-size:20px; font-weight:700; padding:10px 14px; border-radius:14px; border:1px solid rgba(15,23,42,.10); background:rgba(255,255,255,.72); box-shadow:0 8px 14px rgba(2,6,23,.06); line-height:1.8; cursor:pointer; user-select:none; } .fullDateLine:focus-visible{ outline:3px solid rgba(25,163,74,.35); outline-offset:3px; } body[data-theme="dark"] .fullDateLine{ border-color:rgba(232,241,234,.14); background:rgba(255,255,255,.06); box-shadow:0 16px 22px rgba(0,0,0,.35); } .nextPrayerChip{ width:100%; display:flex; flex-direction:column; gap:10px; padding:14px 16px; border-radius:16px; border:1px solid rgba(201,162,39,.22); background:rgba(201,162,39,.10); font-weight:1000; box-shadow:0 10px 18px rgba(2,6,23,.10); overflow:hidden; } body[data-theme="dark"] .nextPrayerChip{ background:rgba(201,162,39,.14); border-color:rgba(255,231,162,.18); box-shadow:0 16px 22px rgba(0,0,0,.35); } .npcTopRow{ display:flex; flex-direction:column; align-items:center; gap:6px; width:100%; justify-content:center; text-align:center; } .npcLabel{ display:none !important; } .npcTitle{ font-size:13px; color:rgba(15,23,42,.68); font-weight:900; line-height:1; } body[data-theme="dark"] .npcTitle{ color:rgba(232,241,234,.76); } .npcName{ font-size:17px; font-weight:1000; line-height:1.2; } .npcTimer{ letter-spacing:.4px; font-size:18px; font-weight:1000; opacity:.95; direction:ltr; unicode-bidi:isolate; min-width:8ch; text-align:center; padding:5px 12px; border-radius:12px; border:1px solid rgba(15,23,42,.10); background:rgba(255,255,255,.45); display:inline-flex; align-items:center; justify-content:center; } body[data-theme="dark"] .npcTimer{ border-color:rgba(232,241,234,.14); background:rgba(255,255,255,.05); } .planetsCapsulesList { display: flex; align-items: stretch; justify-content: space-between; gap: 2px; width: 100%; flex-wrap: nowrap; padding: 4px 0; } .planet-capsule { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 6px 2px; border-radius: 10px; color: #fff; opacity: 0.35; font-weight: 1000; transition: all 0.3s ease; border: 1px solid transparent; min-height: 48px; text-align: center; cursor: pointer; } .cap-name { font-size: 13px; } .cap-timer { font-size: 11px; font-weight: 900; margin-top: 3px; background: rgba(0,0,0,0.25); padding: 2px 6px; border-radius: 6px; line-height: 1; } .planet-capsule.active { opacity: 1; box-shadow: 0 4px 12px rgba(0,0,0,0.25); filter: brightness(1.15); border: 1px solid rgba(255,255,255,0.4); } .planet-capsule.p-red { background: var(--p-red-bg); border-color: var(--p-red-bd); } .planet-capsule.p-green { background: var(--p-green-bg); border-color: var(--p-green-bd); } .planet-capsule.p-blue { background: var(--p-blue-bg); border-color: var(--p-blue-bd); } .planet-capsule.p-gray { background: var(--p-gray-bg); border-color: var(--p-gray-bd); } /* تنسيقات المربع المنبثق لوصف الساعة */ .hour-popup { position: fixed; z-index: 9999; visibility: hidden; opacity: 0; padding: 10px 14px; border-radius: 12px; color: #fff; font-size: 13px; font-weight: 900; line-height: 1.6; text-align: center; max-width: 280px; box-shadow: 0 10px 25px rgba(0,0,0,0.3); pointer-events: none; transition: opacity 0.2s ease, visibility 0.2s; } .hour-popup.show { visibility: visible; opacity: 1; } .hour-popup.p-red { background: var(--p-red-bg); border: 2px solid var(--p-red-bd); } .hour-popup.p-green { background: var(--p-green-bg); border: 2px solid var(--p-green-bd); } .hour-popup.p-blue { background: var(--p-blue-bg); border: 2px solid var(--p-blue-bd); } .hour-popup.p-gray { background: var(--p-gray-bg); border: 2px solid var(--p-gray-bd); } .mergedPrGrid { display: flex; flex-wrap: nowrap; width: 100%; margin-top: 10px; background: rgba(255,255,255,0.6); border-radius: 12px; border: 1px solid rgba(15,23,42,0.05); overflow-x: auto; -ms-overflow-style: none; scrollbar-width: none; box-shadow: 0 4px 10px rgba(0,0,0,0.02); } .mergedPrGrid::-webkit-scrollbar { display: none; } body[data-theme="dark"] .mergedPrGrid { background: rgba(0,0,0,0.2); border-color: rgba(255,255,255,0.05); } .prLabelsCol { display: flex; flex-direction: column; align-items: center; justify-content: center; background: rgba(15,122,58,0.05); border-left: 1px solid rgba(15,23,42,0.05); padding: 6px 8px; flex-shrink: 0; } body[data-theme="dark"] .prLabelsCol { background: rgba(25,163,74,0.1); border-left-color: rgba(255,255,255,0.05); } .prLabelText { font-size: 11px; font-weight: 1000; color: var(--green); height: 22px; line-height: 22px; display: flex; align-items: center; } body[data-theme="dark"] .prLabelText { color: #bff0cf; } .mPill { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; border-left: 1px solid rgba(15,23,42,0.05); padding: 6px 2px; transition: all 0.2s ease; } .mPill:last-child { border-left: none; } body[data-theme="dark"] .mPill { border-left-color: rgba(255,255,255,0.05); } .mPill.next { background: rgba(201,162,39,0.25); box-shadow: inset 0 0 10px rgba(201,162,39,0.1); } body[data-theme="dark"] .mPill.next { background: rgba(255,231,162,0.2); } .mPName { font-size: 12px; font-weight: 1000; color: var(--text); opacity: 0.9; border-bottom: 1px solid rgba(15,23,42,0.1); padding-bottom: 4px; margin-bottom: 4px; width: 90%; min-height: 18px; display: flex; align-items: center; justify-content: center; white-space: nowrap; } body[data-theme="dark"] .mPName { border-bottom-color: rgba(232,241,234,0.1); } .prLabelsCol .mPName { border-bottom-color: transparent; } .mPTimes { display: flex; flex-direction: column; width: 100%; gap: 0; } .mPSolar, .mPGhuroobi { font-size: 12px; font-weight: 1000; direction: ltr; height: 22px; line-height: 22px; display: flex; align-items: center; justify-content: center; white-space: nowrap; } .mPSolar { color: var(--text); } .mPGhuroobi { color: var(--green2); opacity: 0.9; } body[data-theme="dark"] .mPGhuroobi { color: #7ee787; } .countdown-warning{ background:var(--warn-bg) !important; color:var(--warn-text) !important; border-color:var(--warn-border) !important; box-shadow:0 12px 24px rgba(220,38,38,.28) !important; } .content{ padding:14px; } .ghCard{ border:1px solid rgba(15,122,58,.22); background:linear-gradient(180deg, rgba(255,255,255,.98), rgba(251,255,252,.98)); border-radius:18px; overflow:hidden; } body[data-theme="dark"] .ghCard{ background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.03)); border-color:rgba(25,163,74,.22); } .ghCardInner{ padding:14px; } .subSection{ margin-top:0; border-top:none; padding-top:0; } .meta{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; } .kv{ flex:1 1 200px; min-width:170px; border-radius:18px; padding:12px; border:1px solid rgba(15,23,42,.10); background:linear-gradient(180deg, rgba(255,255,255,1), rgba(251,255,252,1)); box-shadow:var(--btnShadow2); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; text-align:center; } body[data-theme="dark"] .kv{ background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.04)); border-color:rgba(232,241,234,.12); } .k{ font-size:13px; color:var(--muted); font-weight:1000; white-space:nowrap; } .v{ font-weight:1000; font-size:15px; white-space:nowrap; letter-spacing:.4px; } .error{ color:#b91c1c; font-size:14px; line-height:1.6; background:#fff1f2; border:1px solid #fecdd3; padding:10px 12px; border-radius:14px; margin-top:12px; display:none; font-weight:900; } body[data-theme="dark"] .error{ color:#ffb4b4; background:rgba(255,84,84,.12); border-color:rgba(255,180,180,.18); } footer{ border-top:1px solid var(--line); background:var(--bg); padding:14px 18px; text-align:center; color:rgba(15,23,42,.70); font-weight:900; font-size:14px; } body[data-theme="dark"] footer{ color:rgba(232,241,234,.75); } footer a{ color:var(--green2); text-decoration:none; border-bottom:1px dashed rgba(15,122,58,.45); } .overlay{ position:fixed; inset:0; background:var(--overlay); display:none; align-items:center; justify-content:center; padding:16px; z-index:50; } .overlay.open{ display:flex; } .modal{ width:min(560px, 100%); background:var(--card); border:1px solid var(--line); border-radius:18px; box-shadow:0 20px 60px rgba(2,6,23,.25); overflow:hidden; transform:translateY(8px); opacity:0; transition:.18s ease; } .overlay.open .modal{ transform:translateY(0); opacity:1; } .modalHeader{ padding:14px 16px; border-bottom:1px solid var(--line); display:flex; align-items:center; justify-content:space-between; gap:10px; background:rgba(255,255,255,.06); } .modalTitle{ font-weight:1000; display:flex; align-items:center; gap:10px; font-size:15px; } .closeBtn{ padding:8px 10px; border-radius:12px; background:transparent; border:1px solid var(--line); color:var(--text); font-weight:1000; cursor:pointer; } .modalContent{ padding:14px 16px 16px; } .badge{ font-size:12px; padding:6px 10px; border-radius:999px; background:rgba(25,163,74,.10); border:1px solid rgba(15,122,58,.18); color:var(--text); white-space:nowrap; font-weight:1000; } label{ font-size:13px; color:var(--muted); display:block; margin:10px 0 6px; font-weight:1000; } input, select{ width:100%; border-radius:12px; border:1px solid var(--line); background:transparent; color:var(--text); padding:10px 12px; outline:none; font-size:15px; font-family:inherit; } .row{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-top:10px; } .row > *{ flex:1; min-width:140px; } button.primary{ background:linear-gradient(90deg, var(--green), var(--green2)); border:1px solid rgba(15,122,58,.25); color:#fff; font-weight:1000; padding:10px 12px; border-radius:12px; cursor:pointer; width:100%; font-size:15px; } button.secondary{ background:transparent; border:1px solid var(--line); color:var(--text); font-weight:1000; padding:10px 12px; border-radius:12px; cursor:pointer; width:100%; font-size:15px; } @media (max-width: 900px){ .mainHeaderLayout { grid-template-columns: 140px 1fr 140px; gap: 16px; } } @media (max-width: 750px){ .mainHeaderLayout { grid-template-columns: 1fr 1fr; grid-template-areas: "rightSide leftSide" "center center"; justify-items: center; gap: 16px; } .headerSide { width: 100%; max-width: 200px; } } @media (max-width: 560px){ .topbarInner{ grid-template-columns: 1fr auto 1fr; gap:6px; } .topTitleOnly{ font-size:14px; padding:6px 8px; } .themeTextBtn{ font-size:11px; padding:5px 8px; } .topbarCityBtn{ max-width:108px; font-size:11px; padding:5px 7px; } .topbarGeoBtn{ width:30px; height:30px; } .topbarGeoBtn svg{ width:14px; height:14px; } } .search-suggestions-box { position: absolute; width: 100%; background: var(--card); border: 1px solid var(--line); z-index: 1000; display: none; border-radius: 12px; max-height: 200px; overflow-y: auto; box-shadow: var(--shadow); margin-top: 5px; } .suggestion-item { padding: 12px; cursor: pointer; border-bottom: 1px solid var(--line); color: var(--text); font-weight: 500; font-size: 14px; } .suggestion-item:last-child { border-bottom: none; } .suggestion-item:hover { background-color: var(--greenSoft); color: var(--green2); } body[data-theme="dark"] .suggestion-item:hover { background-color: rgba(25, 163, 74, 0.2); } #citySelect { margin-top: 5px; font-family: inherit; font-size: 14px; } #citySelect option { padding: 8px; border-bottom: 1px solid var(--line); } .monthsOverlayStandalone{ position:fixed; inset:0; display:flex; align-items:center; justify-content:center; padding:24px; background:radial-gradient(circle at top, rgba(25,163,74,.18), transparent 28%), rgba(2,6,23,.70); backdrop-filter:blur(10px); opacity:0; visibility:hidden; pointer-events:none; transition:opacity .24s ease, visibility .24s ease; z-index:99999; } .monthsOverlayStandalone.open{ opacity:1; visibility:visible; pointer-events:auto; } .monthsModalStandalone{ width:min(820px, 100%); max-height:min(90vh, 900px); overflow:auto; border-radius:32px; background:linear-gradient(180deg, rgba(255,255,255,.98), rgba(249,251,249,.98)); color:var(--text); border:1px solid rgba(15,122,58,.14); box-shadow:0 30px 100px rgba(2,6,23,.35); } body[data-theme="dark"] .monthsModalStandalone{ background:linear-gradient(180deg, rgba(8,20,12,.98), rgba(11,26,16,.98)); border-color:rgba(255,255,255,.08); } .monthsHeroStandalone{ padding:24px 24px 18px; background:linear-gradient(135deg, rgba(15,122,58,.96), rgba(25,163,74,.92)); color:#fff; position:sticky; top:0; z-index:2; } .monthsHeroTopStandalone{ display:grid; grid-template-columns:56px 1fr 56px; align-items:center; gap:16px; } .monthsHeroCenterStandalone{ text-align:center; display:flex; flex-direction:column; align-items:center; justify-content:center; } .monthsModalTitleStandalone{ font-size:29px; font-weight:1000; line-height:1.35; } .monthsLeapTextStandalone{ display:inline-flex; align-items:center; justify-content:center; margin-top:10px; min-height:36px; padding:7px 16px; border-radius:999px; background:rgba(255,255,255,.18); border:1px solid rgba(255,255,255,.20); color:#fff; font-weight:1000; font-size:14px; box-shadow:0 10px 24px rgba(0,0,0,.14); letter-spacing:.2px; } .monthsLeapTextStandalone.is-leap{ background:#ffd54a !important; color:#5b3b00 !important; border:2px solid #f59e0b !important; box-shadow:0 14px 30px rgba(245,158,11,.35) !important; } .monthsLeapTextStandalone.is-normal{ background:#fee2e2 !important; color:#991b1b !important; border:2px solid #ef4444 !important; box-shadow:0 14px 30px rgba(239,68,68,.20) !important; } .monthsHintStandalone{ margin-top:12px; text-align:center; font-size:14px; font-weight:800; color:rgba(255,255,255,.95); opacity:.95; display:block; } .monthNavArrowStandalone{ width:56px; height:56px; border:none; border-radius:18px; background:rgba(255,255,255,.16); color:#fff; font-size:28px; font-weight:1000; cursor:pointer; display:flex; align-items:center; justify-content:center; box-shadow:0 12px 24px rgba(0,0,0,.12); transition:transform .16s ease, background .16s ease; } .monthNavArrowStandalone:hover{ transform:translateY(-2px); background:rgba(255,255,255,.22); } .monthNavArrowStandalone:active{ transform:translateY(0); } .monthsModalBodyStandalone{ padding:22px; } .monthsGridStandalone{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)) !important; gap:14px; } .monthEntryStandalone{ border:1px solid rgba(15,122,58,.10); border-radius:22px; background:linear-gradient(180deg, rgba(15,122,58,.04), rgba(255,255,255,.92)); padding:16px; box-shadow:0 10px 24px rgba(2,6,23,.06); } body[data-theme="dark"] .monthEntryStandalone{ background:linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,.02)); border-color:rgba(255,255,255,.08); box-shadow:none; } .isCurrentMonthStandalone{ background:#ffe082 !important; border:2px solid #f59e0b !important; } body[data-theme="dark"] .isCurrentMonthStandalone{ background:#7c5a00 !important; border:2px solid #fbbf24 !important; } .monthEntryHeadStandalone{ display:flex; align-items:center; gap:12px; margin-bottom:12px; } .monthEntryNumberStandalone{ width:42px; height:42px; border-radius:14px; background:linear-gradient(135deg, var(--green), var(--green2)); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:1000; box-shadow:0 10px 20px rgba(15,122,58,.18); } .monthEntryNameStandalone{ font-size:18px; font-weight:1000; margin-bottom:4px; } .monthEntryMetaStandalone{ color:var(--muted); font-size:13px; font-weight:700; min-height:0 !important; margin-top:0 !important; } .monthEntryDateStandalone{ padding:12px 14px; border-radius:16px; background:rgba(255,255,255,.78); border:1px solid rgba(15,23,42,.06); } body[data-theme="dark"] .monthEntryDateStandalone{ background:rgba(255,255,255,.04); border-color:rgba(255,255,255,.06); } .monthWeekdayStandalone{ font-size:15px; font-weight:1000; margin-bottom:4px; } .monthGregorianStandalone{ font-size:16px; font-weight:900; color:var(--green); } body[data-theme="dark"] .monthGregorianStandalone{ color:#7ee787; } .monthsModalFooterStandalone{ padding:0 22px 22px; } .closeMonthsBtnStandalone{ width:100%; padding:15px 16px; border:none; border-radius:18px; background:linear-gradient(90deg, var(--green), var(--green2)); color:#fff; font-size:16px; font-weight:1000; cursor:pointer; box-shadow:0 14px 28px rgba(15,122,58,.20); } .currentYearBtnStandalone{ margin-top:14px; margin-left:auto; margin-right:auto; min-width:220px; display:none; align-items:center; justify-content:center; padding:12px 22px; border:none; border-radius:999px; background:linear-gradient(135deg, #b91c1c, #ef4444); color:#fff; font-size:14px; font-weight:1000; letter-spacing:.1px; cursor:pointer; box-shadow:0 18px 34px rgba(185,28,28,.46); transition:transform .16s ease, box-shadow .16s ease, filter .16s ease; } .currentYearBtnStandalone:hover{ transform:translateY(-1px); box-shadow:0 14px 26px rgba(185,28,28,.42); } .currentYearBtnStandalone:active{ transform:translateY(0); } @media (max-width: 980px){ .monthsGridStandalone{ grid-template-columns:repeat(2, minmax(0, 1fr)) !important; } } @media (max-width: 720px){ .monthsOverlayStandalone{ padding:12px; } .monthsModalStandalone{ border-radius:24px; } .monthsHeroStandalone{ padding:18px 16px 14px; } .monthsHeroTopStandalone{ grid-template-columns:48px 1fr 48px; gap:10px; } .monthsModalTitleStandalone{ font-size:22px; } .monthNavArrowStandalone{ width:48px; height:48px; font-size:24px; border-radius:14px; } .monthsModalBodyStandalone{ padding:16px; } .monthEntryStandalone{ padding:14px; border-radius:18px; } .monthsModalFooterStandalone{ padding:0 16px 16px; } } @media (max-width: 560px){ .monthsGridStandalone{ grid-template-columns:1fr !important; } } /* Page navigation + Fatimid calendar page */ .topNav{display:flex;align-items:center;justify-content:center} .pageNavSelect{appearance:none;border:1px solid rgba(15,122,58,.25);background:var(--card-bg, #fff);color:var(--text, #17231b);border-radius:14px;padding:9px 34px 9px 14px;font-weight:800;box-shadow:0 8px 20px rgba(0,0,0,.06);cursor:pointer} body.dark .pageNavSelect{background:#102119;color:#f3fff7;border-color:rgba(255,255,255,.18)} .calendarShell{max-width:1240px;margin:18px auto 40px;padding:0 14px} .calToolbar{display:flex;gap:10px;align-items:center;justify-content:space-between;flex-wrap:wrap;background:rgba(255,255,255,.78);border:1px solid rgba(15,122,58,.15);border-radius:22px;padding:14px;box-shadow:0 12px 30px rgba(0,0,0,.06)} body.dark .calToolbar,.dark .calendarPanel{background:rgba(13,28,21,.9);border-color:rgba(255,255,255,.12)} .calTitle{font-size:clamp(20px,3vw,34px);font-weight:900;color:#0f7a3a}.dark .calTitle{color:#84e0a4} .calActions{display:flex;gap:8px;flex-wrap:wrap}.calBtn{border:0;border-radius:14px;padding:10px 14px;font-weight:900;cursor:pointer;background:#0f7a3a;color:#fff}.calBtn.secondary{background:#eef7f1;color:#0f7a3a}.dark .calBtn.secondary{background:#1c3a2a;color:#bdf0ce} .calendarPanel{margin-top:14px;background:rgba(255,255,255,.82);border:1px solid rgba(15,122,58,.15);border-radius:26px;padding:16px;box-shadow:0 16px 40px rgba(0,0,0,.07)} .yearGrid{display:grid;grid-template-columns:repeat(4,minmax(210px,1fr));gap:14px}.calMonth{border:1px solid rgba(15,122,58,.18);border-radius:20px;padding:12px;background:rgba(250,255,252,.9);cursor:pointer;transition:.18s}.calMonth:hover{transform:translateY(-2px);box-shadow:0 12px 26px rgba(0,0,0,.09)}.dark .calMonth{background:#102119;border-color:rgba(255,255,255,.12)} .calMonthHead{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}.calMonthName{font-size:18px;font-weight:900}.calMonthMeta{font-size:12px;opacity:.72}.monthDaysMini{display:grid;grid-template-columns:repeat(7,1fr);gap:3px}.dayMini{aspect-ratio:1;border-radius:8px;display:grid;place-items:center;font-size:12px;background:rgba(15,122,58,.08)}.dayMini.today{background:#0f7a3a;color:white;font-weight:900}.dayMini.hasTask{outline:2px solid #b78319} .zoomHeader{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:12px}.monthGridLarge{display:grid;grid-template-columns:repeat(7,1fr);gap:8px}.dayLarge{min-height:95px;border:1px solid rgba(15,122,58,.15);border-radius:16px;padding:9px;background:rgba(255,255,255,.72);cursor:pointer}.dark .dayLarge{background:#102119;border-color:rgba(255,255,255,.12)}.dayNum{font-weight:900;font-size:18px}.gDate{font-size:12px;opacity:.75}.taskDot{margin-top:8px;font-size:12px;color:#9a6500;font-weight:800}.weekName{text-align:center;font-weight:900;opacity:.75;padding:7px} .dayHours{display:grid;grid-template-columns:repeat(2,minmax(240px,1fr));gap:8px}.hourSlot{border:1px solid rgba(15,122,58,.16);border-radius:16px;padding:10px;background:rgba(255,255,255,.72)}.dark .hourSlot{background:#102119;border-color:rgba(255,255,255,.12)}.hourTitle{font-weight:900;color:#0f7a3a}.dark .hourTitle{color:#9ff0b8}.taskItem{margin-top:6px;padding:7px 9px;border-radius:12px;background:rgba(183,131,25,.12);display:flex;justify-content:space-between;gap:8px}.taskItem button{border:0;background:transparent;color:#b00020;cursor:pointer;font-weight:900}.emptyHint{text-align:center;opacity:.7;padding:30px}.breadcrumbs{font-weight:800;opacity:.8}.printOnly{display:none} @media(max-width:900px){.yearGrid{grid-template-columns:repeat(2,1fr)}.monthGridLarge{gap:5px}.dayHours{grid-template-columns:1fr}.topbarInner{gap:8px;flex-wrap:wrap}.topNav{order:3;width:100%}} @media(max-width:560px){.yearGrid{grid-template-columns:1fr}.monthGridLarge{grid-template-columns:repeat(2,1fr)}.weekName{display:none}.dayLarge{min-height:82px}} @media print{.topbar,.calActions,footer,.breadcrumbs,.themeTextBtn{display:none!important}.calendarShell{max-width:none;margin:0;padding:0}.calendarPanel,.calToolbar{box-shadow:none;border:0}.yearGrid{grid-template-columns:repeat(3,1fr);gap:8px}.calMonth{break-inside:avoid}.dayHours{grid-template-columns:repeat(2,1fr)}body{background:#fff!important;color:#000!important}.printOnly{display:block}} /* Stage 5: polished page menu and Fatimid calendar layout */ .calendarMenu{position:relative;z-index:20} .pageMenu{position:relative;min-width:210px} .pageMenu summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:11px 16px;border-radius:999px;border:1px solid rgba(15,122,58,.22);background:linear-gradient(135deg,rgba(255,255,255,.95),rgba(238,247,241,.92));color:#0f5130;font-weight:1000;cursor:pointer;box-shadow:0 12px 30px rgba(15,122,58,.12);user-select:none} .pageMenu summary::-webkit-details-marker{display:none}.pageMenu summary b{font-size:13px;transition:transform .18s ease}.pageMenu[open] summary b{transform:rotate(180deg)} .pageMenuList{position:absolute;top:calc(100% + 10px);right:0;left:0;display:grid;gap:8px;padding:10px;border-radius:20px;background:rgba(255,255,255,.97);border:1px solid rgba(15,122,58,.18);box-shadow:0 22px 50px rgba(0,0,0,.18);backdrop-filter:blur(10px)} .pageMenuList a{text-decoration:none;color:#163821;padding:12px 14px;border-radius:14px;font-weight:900;background:rgba(15,122,58,.05);transition:.16s ease}.pageMenuList a:hover,.pageMenuList a.active{background:linear-gradient(135deg,#0f7a3a,#159447);color:#fff;transform:translateX(-2px)} body[data-theme="dark"] .pageMenu summary,.dark .pageMenu summary{background:linear-gradient(135deg,rgba(21,45,32,.98),rgba(13,28,21,.96));color:#eaffef;border-color:rgba(255,255,255,.16)} body[data-theme="dark"] .pageMenuList,.dark .pageMenuList{background:rgba(13,28,21,.98);border-color:rgba(255,255,255,.13)} body[data-theme="dark"] .pageMenuList a,.dark .pageMenuList a{color:#eaffef;background:rgba(255,255,255,.05)} .calendarShell{max-width:1320px}.calToolbar{padding:18px 20px;border-radius:28px;background:linear-gradient(135deg,rgba(255,255,255,.94),rgba(240,249,244,.86));align-items:stretch}.calToolbar>div:first-child{display:flex;flex-direction:column;justify-content:center;gap:5px}.breadcrumbs{font-size:13px;color:#6b5b25}.calTitle{letter-spacing:-.4px}.calActions{align-items:center}.calBtn{display:inline-flex;align-items:center;justify-content:center;min-height:42px;border-radius:999px;padding:10px 18px;box-shadow:0 10px 20px rgba(15,122,58,.16);transition:transform .16s ease, box-shadow .16s ease}.calBtn:hover{transform:translateY(-1px);box-shadow:0 14px 26px rgba(15,122,58,.22)}.calBtn.secondary{box-shadow:none;border:1px solid rgba(15,122,58,.14)} .calendarPanel{padding:22px;border-radius:30px;background:linear-gradient(180deg,rgba(255,255,255,.94),rgba(248,252,249,.88))}.yearGrid{grid-template-columns:repeat(4,minmax(240px,1fr));gap:18px}.calMonth{padding:16px;border-radius:24px;background:linear-gradient(180deg,rgba(255,255,255,.98),rgba(244,252,247,.95));box-shadow:0 12px 30px rgba(0,0,0,.05);border-color:rgba(15,122,58,.16)}.calMonthHead{padding-bottom:10px;border-bottom:1px solid rgba(15,122,58,.1);gap:10px}.calMonthName{font-size:20px;color:#0f6b35}.calMonthHead>div:last-child{min-width:38px;height:38px;border-radius:14px;display:grid;place-items:center;background:#0f7a3a;color:white;font-weight:1000}.monthDaysMini{gap:5px;padding-top:10px}.dayMini{aspect-ratio:1.15;border-radius:10px;background:#eef8f1;color:#244d31;font-weight:800}.dayMini.today{background:linear-gradient(135deg,#0f7a3a,#16a34a);color:#fff}.dayMini.hasTask{box-shadow:inset 0 0 0 2px #b78319;outline:0;background:#fff5dc} .zoomHeader{padding:14px 16px;border-radius:22px;background:rgba(15,122,58,.07);border:1px solid rgba(15,122,58,.12)}.zoomEyebrow{display:block;font-size:12px;font-weight:1000;color:#b78319;margin-bottom:3px}.monthGridLarge{grid-template-columns:repeat(7,minmax(0,1fr));gap:10px;margin-top:14px}.weekName{border-radius:14px;background:#e9f6ee;color:#0f6b35}.dayLarge{min-height:122px;border-radius:20px;padding:12px;background:linear-gradient(180deg,#fff,#f7fcf8);box-shadow:0 8px 18px rgba(0,0,0,.04);border-color:rgba(15,122,58,.14);transition:.16s ease}.dayLarge:hover{transform:translateY(-2px);box-shadow:0 14px 28px rgba(0,0,0,.08);border-color:rgba(15,122,58,.32)}.dayBlank{visibility:hidden;pointer-events:none}.dayTop{display:flex;justify-content:space-between;align-items:center;gap:8px}.dayNum{width:38px;height:38px;border-radius:14px;display:grid;place-items:center;background:#eef8f1;color:#0f6b35}.dayWeekBadge{font-size:11px;font-weight:900;color:#8a6a18;background:#fff6df;border-radius:999px;padding:5px 8px}.gDate{margin-top:8px}.todayLarge{background:linear-gradient(180deg,#eaffef,#fff);box-shadow:inset 0 0 0 2px #0f7a3a,0 10px 22px rgba(15,122,58,.14)}.todayLarge .dayNum{background:#0f7a3a;color:#fff}.hasTasksLarge{box-shadow:inset 0 0 0 2px rgba(183,131,25,.55),0 10px 22px rgba(183,131,25,.08)}.taskDot{display:inline-flex;margin-top:12px;border-radius:999px;padding:6px 10px;background:#fff4d7;color:#855800}.dayHours{grid-template-columns:repeat(3,minmax(220px,1fr));gap:12px;margin-top:14px}.hourSlot{border-radius:20px;background:linear-gradient(180deg,#fff,#f7fcf8);box-shadow:0 8px 18px rgba(0,0,0,.04);min-height:92px}.hourTitle{display:inline-flex;border-radius:999px;background:#eef8f1;padding:6px 10px}.taskItem{background:#fff4d7;border:1px solid rgba(183,131,25,.2)} body[data-theme="dark"] .calToolbar,body[data-theme="dark"] .calendarPanel,.dark .calToolbar,.dark .calendarPanel{background:linear-gradient(180deg,rgba(13,28,21,.96),rgba(9,20,15,.94));border-color:rgba(255,255,255,.12)} body[data-theme="dark"] .breadcrumbs,.dark .breadcrumbs{color:#d9bd6a}body[data-theme="dark"] .calMonth,body[data-theme="dark"] .dayLarge,body[data-theme="dark"] .hourSlot,.dark .calMonth,.dark .dayLarge,.dark .hourSlot{background:linear-gradient(180deg,#102119,#0b1711);border-color:rgba(255,255,255,.12);box-shadow:none}body[data-theme="dark"] .dayMini,body[data-theme="dark"] .weekName,body[data-theme="dark"] .dayNum,body[data-theme="dark"] .hourTitle,.dark .dayMini,.dark .weekName,.dark .dayNum,.dark .hourTitle{background:rgba(255,255,255,.07);color:#dfffe8}body[data-theme="dark"] .calMonthName,.dark .calMonthName{color:#9ff0b8}body[data-theme="dark"] .dayWeekBadge,.dark .dayWeekBadge{background:rgba(183,131,25,.22);color:#f3d88a}body[data-theme="dark"] .taskDot,body[data-theme="dark"] .taskItem,.dark .taskDot,.dark .taskItem{background:rgba(183,131,25,.2);color:#ffe6a7;border-color:rgba(183,131,25,.28)} @media(max-width:1100px){.yearGrid{grid-template-columns:repeat(3,1fr)}.dayHours{grid-template-columns:repeat(2,1fr)}}@media(max-width:820px){.yearGrid{grid-template-columns:repeat(2,1fr)}.monthGridLarge{gap:7px}.dayLarge{min-height:105px}.pageMenu{width:100%}}@media(max-width:560px){.calendarPanel{padding:14px}.yearGrid{grid-template-columns:1fr}.monthGridLarge{grid-template-columns:repeat(7,minmax(36px,1fr));gap:4px}.dayLarge{min-height:62px;padding:7px;border-radius:12px}.dayTop{display:block}.dayNum{width:30px;height:30px;border-radius:10px;font-size:14px}.dayWeekBadge,.gDate{display:none}.taskDot{font-size:10px;padding:3px 6px;margin-top:5px}.dayHours{grid-template-columns:1fr}.calActions{width:100%}.calBtn{flex:1 1 auto}.pageMenu summary{border-radius:18px}} @media print{.pageMenu{display:none}.calendarPanel{padding:0}.dayMini,.dayLarge,.calMonth{box-shadow:none!important}.monthGridLarge{grid-template-columns:repeat(7,1fr)!important}.dayBlank{display:block}} /* Stage 7 header refinements */ .appTopbarV7{grid-template-columns:1fr auto 1fr!important;} .appTopbarV7 .calendarMenu{justify-self:end;display:flex;align-items:center;position:relative;z-index:40;} .appTopbarV7 .appLeftControls{justify-self:start;display:flex;align-items:center;gap:8px;} .hamburgerBtn{width:44px;height:44px;border:1px solid rgba(15,122,58,.22);border-radius:15px;background:linear-gradient(135deg,#fff,#edf8f1);color:#0f7a3a;font-size:27px;font-weight:1000;line-height:1;cursor:pointer;box-shadow:0 12px 26px rgba(15,122,58,.12)} .menuHover{position:relative;} .menuHover .pageMenuList{position:absolute;top:calc(100% + 8px);right:0;min-width:220px;display:grid;gap:8px;padding:10px;border-radius:22px;background:rgba(255,255,255,.98);border:1px solid rgba(15,122,58,.18);box-shadow:0 24px 60px rgba(0,0,0,.18);opacity:0;visibility:hidden;transform:translateY(-6px);transition:.16s ease;} .menuHover:hover .pageMenuList,.menuHover:focus-within .pageMenuList{opacity:1;visibility:visible;transform:translateY(0);} .menuHover .pageMenuList a{text-decoration:none;color:#163821;padding:13px 14px;border-radius:15px;font-weight:950;background:rgba(15,122,58,.055)} .menuHover .pageMenuList a:hover,.menuHover .pageMenuList a.active{background:linear-gradient(135deg,#0f7a3a,#16a34a);color:#fff} body.dark .hamburgerBtn,body[data-theme="dark"] .hamburgerBtn{background:#102119;color:#eaffef;border-color:rgba(255,255,255,.15)} body.dark .menuHover .pageMenuList,body[data-theme="dark"] .menuHover .pageMenuList{background:#102119;border-color:rgba(255,255,255,.15)} body.dark .menuHover .pageMenuList a,body[data-theme="dark"] .menuHover .pageMenuList a{color:#eaffef;background:rgba(255,255,255,.06)} @media(max-width:560px){.appTopbarV7 .appLeftControls{gap:5px}.hamburgerBtn{width:36px;height:36px;font-size:22px;border-radius:12px}.menuHover .pageMenuList{right:0;min-width:180px}.appTopbarV7 .topbarCityBtn{max-width:116px}} .calSubtitle{display:flex!important;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;text-align:center;flex-direction:column}.yearStatusBadge{border:1px solid rgba(15,122,58,.18);border-radius:999px;padding:8px 14px;background:#fff;color:var(--fc-green);font-weight:1000;box-shadow:0 8px 18px rgba(15,122,58,.08)}.yearStatusBadge.leap{background:#fff1f1!important;color:#c62828!important;border-color:rgba(198,40,40,.38)!important}.subDateText{font-weight:900;color:var(--fc-muted)}.gregMonthInline{display:inline-flex;align-items:center;margin-inline-start:7px;padding:3px 9px;border-radius:999px;background:rgba(207,162,42,.14);color:#8b6d19;font-size:.72em;font-weight:1000;vertical-align:middle}.dayMini{gap:1px}.gDayMini{font-size:10px!important;line-height:1;color:inherit;opacity:.78}.dayLarge .gDate{font-size:20px!important;font-weight:1000!important;text-align:center}.dark .yearStatusBadge,body[data-theme="dark"] .yearStatusBadge{background:#102119;color:#9ff0b8;border-color:rgba(255,255,255,.16)}.dark .gregMonthInline,body[data-theme="dark"] .gregMonthInline{background:rgba(207,162,42,.20);color:#ffd76a} /* Stage 10 refinements */ .calMonthMeta{display:none!important} .calMonthHead.monthOpen{cursor:pointer} .calMonthHead.monthOpen:hover .calMonthName{text-decoration:underline} #todayBtn{display:none;min-width:auto!important;width:auto!important;border-radius:999px!important;background:#c62828!important;color:#fff!important;border-color:#c62828!important;padding:5px 10px!important;font-size:11px!important;line-height:1.1!important;margin-top:-2px!important} .calSubtitle #todayBtn,.calSubtitle .todayBtnInline{margin-top:2px!important} .yearStatusBadge.leap + #todayBtn{} .dayMini{cursor:pointer!important} .dayMini:hover{filter:brightness(.96);transform:scale(1.04)} /* Stage 11: topbar alignment + bigger analog clocks + clock brand labels */ .pageW{ width:min(1120px, 100%); } .appTopbarV7{ display:grid !important; grid-template-columns:auto 1fr auto !important; direction:ltr; align-items:center; gap:10px; } .appTopbarV7 .calendarMenu{ grid-column:3; justify-self:end; direction:rtl; } .appTopbarV7 .topTitleOnly{ grid-column:2; justify-self:center; direction:rtl; } .appTopbarV7 .appLeftControls{ grid-column:1; justify-self:start; direction:rtl; display:flex; align-items:center; gap:8px; } .mainHeaderLayout{ grid-template-columns:minmax(220px, 260px) minmax(320px, 1fr) minmax(220px, 260px) !important; gap:16px; align-items:start; } .headerClockWrap{ max-width:260px; margin-inline:auto; } .headerClockBox{ width:min(260px, 100%); max-width:260px; } @media (max-width: 1020px){ .mainHeaderLayout{ grid-template-columns:minmax(180px, 215px) minmax(280px, 1fr) minmax(180px, 215px) !important; gap:12px; } .headerClockWrap{ max-width:215px; } .headerClockBox{ max-width:215px; } } @media (max-width: 750px){ .appTopbarV7{ grid-template-columns:auto 1fr auto !important; gap:6px; } .mainHeaderLayout{ grid-template-columns:1fr 1fr !important; grid-template-areas:"rightSide leftSide" "center center"; justify-items:center; } .headerSide{ width:100%; max-width:240px; } .headerClockWrap{ max-width:240px; } .headerClockBox{ max-width:240px; } } @media (max-width: 520px){ .appTopbarV7 .topTitleOnly{ font-size:12px; padding:6px 8px; } .appTopbarV7 .topbarCityBtn{ max-width:112px; } .headerSide{ max-width:180px; } .headerClockWrap{ max-width:180px; } .headerClockBox{ max-width:180px; } } /* Stage 12: ترتيب الهيدر في صف واحد وضمان اليمين/اليسار */ .topbar .pageW{ width:min(1180px,100%); } .appTopbarV7{ display:grid !important; grid-template-columns:auto minmax(120px,1fr) auto !important; grid-template-areas:"left title menu"; direction:ltr; align-items:center; gap:10px; flex-wrap:nowrap !important; } .appTopbarV7 .appLeftControls{ grid-area:left !important; justify-self:start !important; direction:rtl; display:flex !important; align-items:center; gap:8px; min-width:0; flex-wrap:nowrap; } .appTopbarV7 .topTitleOnly{ grid-area:title !important; justify-self:center !important; direction:rtl; max-width:100%; overflow:hidden; text-overflow:ellipsis; } .appTopbarV7 .calendarMenu{ grid-area:menu !important; justify-self:end !important; direction:rtl; width:auto !important; order:initial !important; display:flex !important; align-items:center; position:relative; } .appTopbarV7 .topNav{ width:auto !important; order:initial !important; } .headerClockTitle{ margin-bottom:2px; } .headerClockBox{ width:min(300px,100%) !important; max-width:300px !important; } .mainHeaderLayout{ grid-template-columns:minmax(240px,300px) minmax(320px,1fr) minmax(240px,300px) !important; gap:18px !important; } @media (max-width: 1080px){ .headerClockBox{ width:min(245px,100%) !important; max-width:245px !important; } .mainHeaderLayout{ grid-template-columns:minmax(195px,245px) minmax(280px,1fr) minmax(195px,245px) !important; gap:12px !important; } } @media (max-width: 760px){ .appTopbarV7{ grid-template-columns:auto minmax(80px,1fr) auto !important; gap:6px; } .appTopbarV7 .topTitleOnly{ font-size:12px; padding:6px 8px; } .appTopbarV7 .topbarCityBtn{ max-width:105px; } .themeTextBtn{ font-size:11px; padding:5px 7px; } .mainHeaderLayout{ grid-template-columns:1fr 1fr !important; grid-template-areas:"rightSide leftSide" "center center"; justify-items:center; } .rightSide{ grid-area:rightSide; } .leftSide{ grid-area:leftSide; } .headerCenter{ grid-area:center; width:100%; } .headerClockBox{ width:min(220px,44vw) !important; max-width:220px !important; } } @media (max-width: 430px){ .appTopbarV7{ gap:4px; } .hamburgerBtn{ width:34px; height:34px; font-size:21px; border-radius:11px; } .appTopbarV7 .topbarCityBtn{ max-width:92px; font-size:10px; } .themeTextBtn{ font-size:10px; padding:5px 6px; } .headerClockBox{ width:min(175px,43vw) !important; max-width:175px !important; } } /* Stage 19: one global header component shared by all pages */ .globalTopbar .globalHeaderGrid{ display:grid!important; grid-template-columns:minmax(170px,1fr) auto minmax(170px,1fr)!important; align-items:center!important; gap:14px!important; } .globalTopbar .calendarMenu{justify-self:end!important;position:relative!important;display:flex!important;align-items:center!important;} .globalTopbar .topTitleOnly{justify-self:center!important;text-align:center!important;white-space:nowrap!important;} .globalTopbar .topbarLeft{justify-self:start!important;display:flex!important;align-items:center!important;justify-content:flex-start!important;gap:10px!important;min-width:0!important;} .globalTopbar .pageMenuList{right:0!important;left:auto!important;} .globalTopbar .menuHover:not(:hover):not(:focus-within) .pageMenuList{opacity:0;visibility:hidden;pointer-events:none;transform:translateY(-6px);} .globalTopbar .menuHover:hover .pageMenuList, .globalTopbar .menuHover:focus-within .pageMenuList{opacity:1;visibility:visible;pointer-events:auto;transform:translateY(0);} @media(max-width:760px){ .globalTopbar .globalHeaderGrid{grid-template-columns:auto 1fr auto!important;gap:8px!important;} .globalTopbar .topTitleOnly{font-size:16px!important;white-space:normal!important;line-height:1.25!important;} .globalTopbar .topbarLeft{gap:6px!important;} .globalTopbar .themeTextBtn{padding-inline:9px!important;font-size:12px!important;} .globalTopbar .cityMiniBtn{max-width:120px!important;} } /* Stage 27: compact Hijri month selector in month view */ .monthSelector{ display:grid; grid-template-columns:repeat(12,minmax(72px,1fr)); gap:8px; margin:12px 0 16px; direction:rtl; } .monthSelectCard{ border:1px solid rgba(15,122,58,.16); border-radius:16px; background:linear-gradient(180deg,rgba(255,255,255,.96),rgba(244,252,247,.92)); color:var(--text,#183226); padding:9px 7px; min-height:76px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; cursor:pointer; box-shadow:0 6px 14px rgba(0,0,0,.045); transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease; font-family:inherit; } .monthSelectCard:hover{transform:translateY(-2px);box-shadow:0 12px 24px rgba(0,0,0,.08);border-color:rgba(15,122,58,.35)} .monthSelectCard .monthSelectNo{ width:24px;height:24px;border-radius:9px;display:grid;place-items:center; background:rgba(15,122,58,.10);color:#0f6b35;font-weight:1000;font-size:12px; } .monthSelectCard strong{font-size:13px;line-height:1.15;color:#0f6b35;white-space:nowrap} .monthSelectCard small{font-size:10px;line-height:1.2;opacity:.78;text-align:center;min-height:24px;display:flex;align-items:center} .monthSelectCard.selected{ background:linear-gradient(135deg,#0f7a3a,#16a34a); color:#fff; border-color:#0f7a3a; box-shadow:0 14px 28px rgba(15,122,58,.20); } .monthSelectCard.selected .monthSelectNo{background:rgba(255,255,255,.22);color:#fff} .monthSelectCard.selected strong{color:#fff} .monthSelectCard.selected small{opacity:.95} .selectedMonthFull{margin-top:4px} body[data-theme="dark"] .monthSelectCard,.dark .monthSelectCard{background:linear-gradient(180deg,#102119,#0b1711);border-color:rgba(255,255,255,.12);color:#dfffe8;box-shadow:none} body[data-theme="dark"] .monthSelectCard strong,.dark .monthSelectCard strong{color:#9ff0b8} body[data-theme="dark"] .monthSelectCard .monthSelectNo,.dark .monthSelectCard .monthSelectNo{background:rgba(255,255,255,.08);color:#dfffe8} body[data-theme="dark"] .monthSelectCard.selected,.dark .monthSelectCard.selected{background:linear-gradient(135deg,#7b1111,#c62828);border-color:#c62828;box-shadow:0 12px 24px rgba(198,40,40,.22)} body[data-theme="dark"] .monthSelectCard.selected strong,.dark .monthSelectCard.selected strong{color:#fff} body[data-theme="dark"] .monthSelectCard.selected .monthSelectNo,.dark .monthSelectCard.selected .monthSelectNo{background:rgba(255,255,255,.18);color:#fff} body.hasCustomPalette .monthSelectCard{border-color:var(--custom-line,var(--line))!important;background:var(--custom-panel-bg,var(--panelBg))!important;color:var(--custom-text,var(--text))!important} body.hasCustomPalette .monthSelectCard strong{color:var(--green)!important} body.hasCustomPalette .monthSelectCard .monthSelectNo{background:var(--greenSoft)!important;color:var(--custom-text,var(--text))!important} body.hasCustomPalette .monthSelectCard.selected{background:linear-gradient(135deg,var(--green),var(--green2))!important;color:#fff!important;border-color:var(--green)!important} body.hasCustomPalette .monthSelectCard.selected strong,body.hasCustomPalette .monthSelectCard.selected .monthSelectNo{color:#fff!important} @media(max-width:1100px){.monthSelector{grid-template-columns:repeat(6,1fr)}} @media(max-width:680px){.monthSelector{grid-template-columns:repeat(3,1fr)}.monthSelectCard{min-height:70px}.monthSelectCard strong{font-size:12px}} @media print{.monthSelector{grid-template-columns:repeat(6,1fr);gap:5px}.monthSelectCard{box-shadow:none!important;min-height:54px;padding:5px}.monthSelectCard small{font-size:8px;min-height:auto}} /* Stage 28: keep صباح/مساء marker inline with digital time under analog clocks */ .miniDigital{ display:flex!important; flex-direction:row!important; align-items:center!important; justify-content:center!important; gap:6px!important; flex-wrap:nowrap!important; line-height:1!important; } .miniDigital .timeBox{ display:inline-flex!important; align-items:baseline!important; justify-content:center!important; gap:4px!important; white-space:nowrap!important; } .miniDigital .ampm, .miniDigital .phase{ display:inline-flex!important; align-items:center!important; justify-content:center!important; margin:0!important; min-width:24px!important; height:24px!important; padding:2px 7px!important; line-height:1!important; white-space:nowrap!important; vertical-align:middle!important; } /* Stage29: Know your tower page */ .towersPageShell{width:min(1080px,calc(100% - 24px));margin:24px auto 56px!important;padding:0!important}.towersHero{text-align:center;padding:28px 18px;margin-bottom:16px;border-radius:32px;border:1px solid var(--custom-line,var(--line,rgba(15,122,58,.16)));background:linear-gradient(135deg,var(--custom-panel-bg,rgba(255,255,255,.94)),color-mix(in srgb,var(--green,#0f7a3a) 8%,transparent));box-shadow:0 20px 55px rgba(15,122,58,.10)}.towersEyebrow{display:inline-flex;align-items:center;justify-content:center;padding:6px 14px;border-radius:999px;background:var(--greenSoft,rgba(15,122,58,.10));color:var(--green,#0f7a3a);font-weight:1000;margin-bottom:10px}.towersHero h1{margin:0;color:var(--green,#0f7a3a);font-size:clamp(28px,4vw,44px);font-weight:1000}.towersHero p{max-width:640px;margin:10px auto 0;color:var(--custom-muted,var(--muted,#66776b));font-weight:850;line-height:1.8}.towerCard,.towerResultCard,.towerInfoGrid article{border:1px solid var(--custom-line,var(--line,rgba(15,122,58,.16)));background:var(--custom-panel-bg,rgba(255,255,255,.94));color:var(--custom-text,var(--text,#173321));box-shadow:0 18px 48px rgba(15,122,58,.09)}.towerCard{border-radius:30px;padding:22px;margin-bottom:16px}.towerCardHead{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin-bottom:18px}.towerCardHead h2{margin:0;color:var(--green,#0f7a3a);font-size:24px}.towerCardHead span{color:var(--custom-muted,var(--muted,#66776b));font-weight:850}.towerForm{display:grid;grid-template-columns:1fr 1fr auto;align-items:end;gap:12px}.towerField{display:grid;gap:8px;font-weight:1000;color:var(--custom-text,var(--text,#173321))}.towerField input{min-height:48px;border-radius:18px;border:1px solid var(--custom-line,var(--line,rgba(15,122,58,.16)));background:color-mix(in srgb,var(--custom-panel-bg,#fff) 86%,var(--greenSoft,rgba(15,122,58,.10)));color:var(--custom-text,var(--text,#173321));padding:0 14px;font-size:16px;font-weight:900;outline:none}.towerField input:focus{border-color:var(--green,#0f7a3a);box-shadow:0 0 0 4px color-mix(in srgb,var(--green,#0f7a3a) 18%,transparent)}.towerActions{display:flex;align-items:center;gap:8px}.towerBtn{min-height:48px;border:0;border-radius:999px;padding:0 18px;font-weight:1000;cursor:pointer;white-space:nowrap}.towerBtn.primary{background:linear-gradient(135deg,var(--green,#0f7a3a),var(--green2,#16a34a));color:#fff;box-shadow:0 12px 25px rgba(15,122,58,.18)}.towerBtn.secondary{background:var(--greenSoft,rgba(15,122,58,.10));color:var(--green,#0f7a3a);border:1px solid var(--custom-line,var(--line,rgba(15,122,58,.16)))}.towerResult{margin:16px 0}.towerResultCard{border-radius:32px;padding:18px}.towerResultTop{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:12px}.towerResultTop div,.towerMainResult{border-radius:22px;background:var(--greenSoft,rgba(15,122,58,.10));padding:13px;text-align:center}.towerResultTop span,.towerMainResult span{display:block;color:var(--custom-muted,var(--muted,#66776b));font-weight:900;margin-bottom:4px}.towerResultTop strong{font-size:20px;color:var(--custom-text,var(--text,#173321))}.towerMainResult{margin-bottom:12px;background:linear-gradient(135deg,var(--green,#0f7a3a),var(--green2,#16a34a));color:#fff}.towerMainResult span{color:rgba(255,255,255,.86)}.towerMainResult strong{display:block;font-size:34px}.towerResultGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.towerResultRow{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:48px;border-radius:18px;padding:10px 12px;background:color-mix(in srgb,var(--green,#0f7a3a) 6%,transparent);border:1px solid var(--custom-line,var(--line,rgba(15,122,58,.12)))}.towerResultRow span{color:var(--custom-muted,var(--muted,#66776b));font-weight:900}.towerResultRow strong{text-align:left;color:var(--custom-text,var(--text,#173321));font-weight:1000}.towerInfoGrid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.towerInfoGrid article{border-radius:24px;padding:18px}.towerInfoGrid h3{margin:0 0 8px;color:var(--green,#0f7a3a)}.towerInfoGrid p{margin:0;color:var(--custom-muted,var(--muted,#66776b));font-weight:850;line-height:1.75}body[data-theme="dark"] .towerCard,body[data-theme="dark"] .towerResultCard,body[data-theme="dark"] .towerInfoGrid article{background:var(--custom-panel-bg,rgba(255,255,255,.05));border-color:var(--custom-line,rgba(255,255,255,.13));box-shadow:none}body[data-theme="dark"] .towerField input{background:color-mix(in srgb,var(--custom-panel-bg,rgba(255,255,255,.06)) 82%,var(--greenSoft,rgba(255,255,255,.08)));color:var(--custom-text,#e8f1ea)}@media(max-width:860px){.towerForm{grid-template-columns:1fr}.towerActions{justify-content:center}.towerInfoGrid,.towerResultGrid{grid-template-columns:1fr}.towerCardHead{align-items:flex-start;flex-direction:column}.towerResultTop{grid-template-columns:1fr}}@media print{.towersPageShell{width:100%;margin:0!important}.towersHero,.towerCard,.towerResultCard,.towerInfoGrid article{box-shadow:none!important;background:#fff!important;color:#000!important}} /* Stage31: Abjad calculator page */ .abjadPageShell{width:min(1080px,calc(100% - 24px));margin:24px auto 56px!important;padding:0!important}.abjadHero{text-align:center;padding:28px 18px;margin-bottom:16px;border-radius:32px;border:1px solid var(--custom-line,var(--line,rgba(15,122,58,.16)));background:linear-gradient(135deg,var(--custom-panel-bg,rgba(255,255,255,.94)),color-mix(in srgb,var(--green,#0f7a3a) 8%,transparent));box-shadow:0 20px 55px rgba(15,122,58,.10)}.abjadEyebrow{display:inline-flex;align-items:center;justify-content:center;padding:6px 14px;border-radius:999px;background:var(--greenSoft,rgba(15,122,58,.10));color:var(--green,#0f7a3a);font-weight:1000;margin-bottom:10px}.abjadHero h1{margin:0;color:var(--green,#0f7a3a);font-size:clamp(28px,4vw,44px);font-weight:1000}.abjadHero p{max-width:640px;margin:10px auto 0;color:var(--custom-muted,var(--muted,#66776b));font-weight:850;line-height:1.8}.abjadCard,.abjadResultCard{border:1px solid var(--custom-line,var(--line,rgba(15,122,58,.16)));background:var(--custom-panel-bg,rgba(255,255,255,.94));color:var(--custom-text,var(--text,#173321));box-shadow:0 18px 48px rgba(15,122,58,.09)}.abjadCard{border-radius:30px;padding:22px;margin-bottom:16px}.abjadCardHead{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin-bottom:18px}.abjadCardHead h2{margin:0;color:var(--green,#0f7a3a);font-size:24px}.abjadCardHead span{color:var(--custom-muted,var(--muted,#66776b));font-weight:850}.abjadForm{display:grid;grid-template-columns:1fr auto;align-items:end;gap:12px}.abjadField{display:grid;gap:8px;font-weight:1000;color:var(--custom-text,var(--text,#173321))}.abjadField input{min-height:50px;border-radius:18px;border:1px solid var(--custom-line,var(--line,rgba(15,122,58,.16)));background:color-mix(in srgb,var(--custom-panel-bg,#fff) 86%,var(--greenSoft,rgba(15,122,58,.10)));color:var(--custom-text,var(--text,#173321));padding:0 14px;font-size:17px;font-weight:900;outline:none}.abjadField input:focus{border-color:var(--green,#0f7a3a);box-shadow:0 0 0 4px color-mix(in srgb,var(--green,#0f7a3a) 18%,transparent)}.abjadActions{display:flex;align-items:center;gap:8px}.abjadBtn{min-height:50px;border:0;border-radius:999px;padding:0 20px;font-weight:1000;cursor:pointer;white-space:nowrap}.abjadBtn.primary{background:linear-gradient(135deg,var(--green,#0f7a3a),var(--green2,#16a34a));color:#fff;box-shadow:0 12px 25px rgba(15,122,58,.18)}.abjadBtn.secondary{background:var(--greenSoft,rgba(15,122,58,.10));color:var(--green,#0f7a3a);border:1px solid var(--custom-line,var(--line,rgba(15,122,58,.16)))}.abjadResult{margin:16px 0}.abjadResultCard{border-radius:32px;padding:18px}.abjadResultTop{display:grid;grid-template-columns:1fr 220px;gap:10px;margin-bottom:12px}.abjadResultPhrase,.abjadMainResult{border-radius:22px;background:var(--greenSoft,rgba(15,122,58,.10));padding:14px;text-align:center}.abjadResultPhrase span,.abjadMainResult span{display:block;color:var(--custom-muted,var(--muted,#66776b));font-weight:900;margin-bottom:4px}.abjadResultPhrase strong{font-size:22px;color:var(--custom-text,var(--text,#173321));word-break:break-word}.abjadMainResult{background:linear-gradient(135deg,var(--green,#0f7a3a),var(--green2,#16a34a));color:#fff}.abjadMainResult span{color:rgba(255,255,255,.86)}.abjadMainResult strong{display:block;font-size:38px}.abjadLettersGrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(78px,1fr));gap:10px}.abjadLetterCell{display:grid;place-items:center;gap:5px;min-height:76px;border-radius:20px;background:color-mix(in srgb,var(--green,#0f7a3a) 7%,transparent);border:1px solid var(--custom-line,var(--line,rgba(15,122,58,.12)))}.abjadLetterCell b{font-size:25px;color:var(--green,#0f7a3a)}.abjadLetterCell span{font-weight:1000;color:var(--custom-text,var(--text,#173321))}.abjadEmpty{grid-column:1/-1;border-radius:20px;padding:18px;text-align:center;background:var(--greenSoft,rgba(15,122,58,.10));color:var(--custom-muted,var(--muted,#66776b));font-weight:900}body[data-theme="dark"] .abjadCard,body[data-theme="dark"] .abjadResultCard{background:var(--custom-panel-bg,rgba(255,255,255,.05));border-color:var(--custom-line,rgba(255,255,255,.13));box-shadow:none}body[data-theme="dark"] .abjadField input{background:color-mix(in srgb,var(--custom-panel-bg,rgba(255,255,255,.06)) 82%,var(--greenSoft,rgba(255,255,255,.08)));color:var(--custom-text,#e8f1ea)}@media(max-width:760px){.abjadForm{grid-template-columns:1fr}.abjadActions{justify-content:center}.abjadCardHead{align-items:flex-start;flex-direction:column}.abjadResultTop{grid-template-columns:1fr}}@media print{.abjadPageShell{width:100%;margin:0!important}.abjadHero,.abjadCard,.abjadResultCard{box-shadow:none!important;background:#fff!important;color:#000!important}} /* Stage 33: next prayer layout and prayer names emphasis */ .headerClockTitle{font-weight:1000;} .npcTopRow{display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;text-align:center!important;gap:6px!important;} .npcTitle{font-size:13px!important;font-weight:900!important;opacity:.82!important;} .npcName{display:block!important;font-size:26px!important;font-weight:1000!important;line-height:1.15!important;color:var(--green)!important;text-shadow:0 1px 0 rgba(255,255,255,.35);} body[data-theme="dark"] .npcName{color:#bff0cf!important;text-shadow:none;} .npcTimer{display:inline-flex!important;margin-top:2px!important;font-size:22px!important;font-weight:1000!important;line-height:1.1!important;direction:ltr!important;unicode-bidi:isolate!important;} .mPName{font-size:15px!important;font-weight:1000!important;color:var(--green)!important;opacity:1!important;} body[data-theme="dark"] .mPName{color:#bff0cf!important;} .prLabelsCol .mPName{color:transparent!important;} .mPill.next .mPName{font-size:17px!important;color:#8a5a00!important;} body[data-theme="dark"] .mPill.next .mPName{color:#ffe7a2!important;} /* Stage 34: move next-prayer countdown into prayer table */ .npcTopRow{display:none!important;} .npcTimer{display:none!important;} .mPill.next{padding-top:7px!important;} .mPCountdown{display:inline-flex!important;align-items:center!important;justify-content:center!important;direction:ltr!important;unicode-bidi:isolate!important;margin:2px 0 5px!important;padding:4px 8px!important;border-radius:999px!important;border:1px solid rgba(138,90,0,.24)!important;background:rgba(255,255,255,.62)!important;color:#8a5a00!important;font-size:13px!important;font-weight:1000!important;line-height:1!important;min-width:72px!important;box-shadow:0 5px 12px rgba(2,6,23,.08)!important;} body[data-theme="dark"] .mPCountdown{background:rgba(0,0,0,.18)!important;color:#ffe7a2!important;border-color:rgba(255,231,162,.22)!important;} .mPCountdown.countdown-warning{background:var(--warn-bg)!important;color:var(--warn-text)!important;border-color:var(--warn-border)!important;} /* Stage 35: put next-prayer countdown inside the prayer-name cell only */ .mPill.next{flex:1.45 0 92px!important;min-width:92px!important;padding-top:6px!important;outline:2px solid rgba(201,162,39,.38)!important;outline-offset:-2px!important;border-radius:10px!important;} .mPill.next .mPName{display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;gap:3px!important;min-height:44px!important;margin-bottom:4px!important;padding-bottom:4px!important;line-height:1.05!important;} .mPill.next .mPTimes{margin-top:0!important;} .mPill.next .mPCountdown{display:inline-flex!important;align-items:center!important;justify-content:center!important;direction:ltr!important;unicode-bidi:isolate!important;margin:0!important;padding:3px 7px!important;border-radius:999px!important;border:1px solid rgba(138,90,0,.24)!important;background:rgba(255,255,255,.68)!important;color:#8a5a00!important;font-size:12px!important;font-weight:1000!important;line-height:1!important;min-width:70px!important;box-shadow:0 4px 10px rgba(2,6,23,.07)!important;} body[data-theme="dark"] .mPill.next .mPCountdown{background:rgba(0,0,0,.18)!important;color:#ffe7a2!important;border-color:rgba(255,231,162,.24)!important;} .mPill.next .mPCountdown.countdown-warning{background:var(--warn-bg)!important;color:var(--warn-text)!important;border-color:var(--warn-border)!important;} /* Stage 36: compact next-prayer cell and enlarge table numbers */ .mergedPrGrid{ overflow-x:hidden!important; gap:0!important; } .prLabelsCol{ width:50px!important; min-width:50px!important; padding:5px 5px!important; } .prLabelText{ font-size:11px!important; height:24px!important; line-height:24px!important; } .mPill{ flex:1 1 0!important; min-width:0!important; padding:5px 1px!important; overflow:hidden!important; } .mPName{ width:100%!important; font-size:14px!important; min-height:21px!important; margin-bottom:3px!important; padding:0 1px 3px!important; line-height:1.05!important; white-space:nowrap!important; } .mPTimes{ width:100%!important; } .mPSolar,.mPGhuroobi{ font-size:14px!important; height:24px!important; line-height:24px!important; letter-spacing:-.2px!important; } .mPill.next{ flex:1.08 1 0!important; min-width:0!important; max-width:none!important; padding:5px 1px!important; outline:2px solid rgba(201,162,39,.42)!important; outline-offset:-2px!important; border-radius:10px!important; } .mPill.next .mPName{ min-height:48px!important; margin-bottom:2px!important; padding:2px 1px 3px!important; gap:3px!important; font-size:15px!important; line-height:1.05!important; } .mPill.next .mPCountdown{ font-size:16px!important; min-width:66px!important; max-width:100%!important; padding:4px 5px!important; letter-spacing:-.4px!important; transform:scaleX(.96)!important; } @media(max-width:620px){ .mergedPrGrid{overflow-x:auto!important;} .prLabelsCol{width:46px!important;min-width:46px!important;padding-inline:3px!important;} .mPill{min-width:47px!important;} .mPName{font-size:12px!important;} .mPSolar,.mPGhuroobi{font-size:12.5px!important;} .mPill.next{min-width:68px!important;} .mPill.next .mPCountdown{font-size:14px!important;min-width:60px!important;padding-inline:4px!important;} } /* Stage 37: use horizontal space between analog clocks and prayer table */ .pageW{ width:min(1260px, 100%)!important; } .mainHeader{ padding:12px!important; } .mainHeaderLayout{ grid-template-columns:minmax(260px, 315px) minmax(520px, 1fr) minmax(260px, 315px)!important; gap:8px!important; align-items:start!important; } .headerClockWrap{ max-width:315px!important; gap:8px!important; } .headerClockBox{ width:min(315px,100%)!important; max-width:315px!important; } .headerClockTitle{ margin-bottom:0!important; } .headerMainStack{ gap:8px!important; } .nextPrayerChip{ padding:12px 12px!important; gap:9px!important; } .planetsCapsulesList{ gap:5px!important; padding:2px 0 6px!important; } .planet-capsule{ min-height:60px!important; padding:8px 4px!important; border-radius:13px!important; } .cap-name{ font-size:15px!important; line-height:1.1!important; } .cap-timer{ font-size:13px!important; margin-top:5px!important; padding:3px 8px!important; } .mergedPrGrid{ margin-top:4px!important; border-radius:15px!important; min-height:104px!important; } .prLabelsCol{ width:54px!important; min-width:54px!important; padding:7px 5px!important; } .prLabelText{ font-size:12px!important; height:30px!important; line-height:30px!important; } .mPill{ padding:7px 2px!important; min-height:104px!important; } .mPName{ font-size:15px!important; min-height:25px!important; margin-bottom:5px!important; padding-bottom:5px!important; } .mPSolar,.mPGhuroobi{ font-size:16px!important; height:31px!important; line-height:31px!important; letter-spacing:-.15px!important; } .mPill.next{ flex:1.05 1 0!important; } .mPill.next .mPName{ min-height:52px!important; font-size:16px!important; } .mPill.next .mPCountdown{ font-size:17px!important; min-width:72px!important; padding:4px 6px!important; } @media (max-width:1180px){ .pageW{ width:min(1160px,100%)!important; } .mainHeaderLayout{ grid-template-columns:minmax(230px,285px) minmax(460px,1fr) minmax(230px,285px)!important; gap:7px!important; } .headerClockWrap{ max-width:285px!important; } .headerClockBox{ width:min(285px,100%)!important; max-width:285px!important; } .cap-name{ font-size:14px!important; } .mPSolar,.mPGhuroobi{ font-size:15px!important; } } @media (max-width:980px){ .mainHeaderLayout{ grid-template-columns:minmax(190px,235px) minmax(390px,1fr) minmax(190px,235px)!important; gap:6px!important; } .headerClockWrap{ max-width:235px!important; } .headerClockBox{ width:min(235px,100%)!important; max-width:235px!important; } .planet-capsule{ min-height:54px!important; } .cap-name{ font-size:13px!important; } .cap-timer{ font-size:11.5px!important; } .mPSolar,.mPGhuroobi{ font-size:13.5px!important; } } @media (max-width:760px){ .mainHeader{ padding:10px!important; } .mainHeaderLayout{ grid-template-columns:1fr 1fr!important; gap:12px!important; } .headerCenter{ width:100%!important; } .headerClockWrap{ max-width:245px!important; } .headerClockBox{ width:min(245px,44vw)!important; max-width:245px!important; } .nextPrayerChip{ padding:10px 8px!important; } .planet-capsule{ min-height:52px!important; } .mergedPrGrid{ overflow-x:auto!important; } } @media (max-width:520px){ .headerClockWrap{ max-width:188px!important; } .headerClockBox{ width:min(188px,45vw)!important; max-width:188px!important; } .cap-name{ font-size:12px!important; } .prLabelsCol{ width:46px!important; min-width:46px!important; } .mPill{ min-width:48px!important; } .mPName{ font-size:12px!important; } .mPSolar,.mPGhuroobi{ font-size:12.5px!important; height:26px!important; line-height:26px!important; } .mPill.next{ min-width:68px!important; } } /* Stage 38: straight prayer-name row, fixed separator, stronger table labels */ .mergedPrGrid{ align-items:stretch!important; } .prLabelsCol, .mPill{ display:flex!important; flex-direction:column!important; justify-content:flex-start!important; } .prLabelsCol .mPName, .mPName{ height:52px!important; min-height:52px!important; max-height:52px!important; width:100%!important; box-sizing:border-box!important; margin:0!important; padding:0 2px 7px!important; border-bottom:2px solid rgba(15,122,58,.22)!important; display:flex!important; align-items:flex-end!important; justify-content:center!important; text-align:center!important; line-height:1.08!important; white-space:nowrap!important; } body[data-theme="dark"] .prLabelsCol .mPName, body[data-theme="dark"] .mPName{ border-bottom-color:rgba(191,240,207,.22)!important; } .prLabelsCol .mPName{ color:transparent!important; } .mPill.next .mPName{ height:52px!important; min-height:52px!important; max-height:52px!important; padding:4px 2px 6px!important; gap:1px!important; align-items:center!important; justify-content:space-between!important; } .mPill.next .mPName .mPCountdown{ display:inline-flex!important; align-items:center!important; justify-content:center!important; margin:0!important; padding:3px 6px!important; min-width:68px!important; max-width:100%!important; font-size:17px!important; font-weight:1000!important; line-height:1!important; transform:none!important; } .mPTimes{ flex:1 1 auto!important; justify-content:flex-start!important; padding-top:0!important; } .prLabelText{ font-size:15px!important; font-weight:1000!important; height:31px!important; line-height:31px!important; letter-spacing:0!important; } .mPSolar,.mPGhuroobi{ font-weight:1000!important; } .mPill.next{ flex:1 1 0!important; min-width:0!important; padding-top:7px!important; } @media(max-width:620px){ .prLabelsCol .mPName, .mPName, .mPill.next .mPName{ height:48px!important; min-height:48px!important; max-height:48px!important; } .prLabelText{font-size:13px!important;height:28px!important;line-height:28px!important;} .mPill.next .mPName .mPCountdown{font-size:14px!important;min-width:58px!important;padding-inline:4px!important;} } /* Stage 39: move sun/hour-length info under prayer table */ .sunInfoTable{ display:grid!important; grid-template-columns:repeat(4,minmax(0,1fr))!important; gap:0!important; margin-top:8px!important; overflow:hidden!important; border-radius:15px!important; border:1px solid rgba(15,122,58,.18)!important; background:linear-gradient(180deg,rgba(255,255,255,.90),rgba(248,253,249,.90))!important; box-shadow:0 10px 24px rgba(15,122,58,.07)!important; } .sunInfoCell{ min-width:0!important; padding:9px 6px!important; display:flex!important; flex-direction:column!important; align-items:center!important; justify-content:center!important; gap:4px!important; text-align:center!important; border-inline-start:1px solid rgba(15,122,58,.13)!important; } .sunInfoCell:first-child{border-inline-start:0!important;} .sunInfoLabel{ font-size:12px!important; line-height:1.2!important; font-weight:1000!important; color:var(--green,#0f7a3a)!important; white-space:nowrap!important; } .sunInfoValue{ font-size:15px!important; line-height:1.15!important; font-weight:1000!important; color:var(--custom-text,var(--text,#173321))!important; direction:ltr!important; unicode-bidi:isolate!important; white-space:nowrap!important; } body[data-theme="dark"] .sunInfoTable{ background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.035))!important; border-color:rgba(191,240,207,.16)!important; box-shadow:none!important; } body[data-theme="dark"] .sunInfoCell{border-inline-start-color:rgba(191,240,207,.12)!important;} body[data-theme="dark"] .sunInfoLabel{color:#bff0cf!important;} body[data-theme="dark"] .sunInfoValue{color:var(--custom-text,#e8f1ea)!important;} .content{padding-top:0!important;margin-top:0!important;} .content .error:empty{display:none!important;} @media(max-width:760px){ .sunInfoTable{grid-template-columns:repeat(2,minmax(0,1fr))!important;margin-top:7px!important;} .sunInfoCell:nth-child(3){border-inline-start:0!important;border-top:1px solid rgba(15,122,58,.13)!important;} .sunInfoCell:nth-child(4){border-top:1px solid rgba(15,122,58,.13)!important;} } @media(max-width:420px){ .sunInfoLabel{font-size:11px!important;} .sunInfoValue{font-size:13px!important;} .sunInfoCell{padding:7px 4px!important;} } /* Stage 40: compact year-month-start popup */ .monthsOverlayStandalone{padding:10px!important;} .monthsModalStandalone{width:min(560px,calc(100% - 16px))!important;max-height:min(82vh,720px)!important;border-radius:22px!important;} .monthsHeroStandalone{padding:12px 14px 10px!important;} .monthsHeroTopStandalone{grid-template-columns:42px 1fr 42px!important;gap:8px!important;} .monthsModalTitleStandalone{font-size:20px!important;line-height:1.25!important;} .monthsLeapTextStandalone{margin-top:6px!important;min-height:28px!important;padding:4px 11px!important;font-size:12px!important;} .monthsHintStandalone{margin-top:6px!important;font-size:11px!important;} .monthNavArrowStandalone{width:40px!important;height:40px!important;border-radius:13px!important;font-size:22px!important;} .monthsModalBodyStandalone{padding:12px!important;} .monthsGridStandalone{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:8px!important;} .monthEntryStandalone{padding:9px!important;border-radius:15px!important;box-shadow:0 6px 14px rgba(2,6,23,.05)!important;} .monthEntryHeadStandalone{gap:8px!important;margin-bottom:6px!important;} .monthEntryNumberStandalone{width:30px!important;height:30px!important;border-radius:10px!important;font-size:13px!important;} .monthEntryNameStandalone{font-size:19px!important;line-height:1.15!important;font-weight:1000!important;margin:0!important;color:var(--green,#0f7a3a)!important;} .monthEntryMetaStandalone{display:none!important;} .monthEntryDateStandalone{padding:7px 8px!important;border-radius:12px!important;} .monthWeekdayStandalone{font-size:12px!important;margin-bottom:2px!important;} .monthGregorianStandalone{font-size:14px!important;font-weight:1000!important;} .monthsModalFooterStandalone{padding:0 12px 12px!important;} .closeMonthsBtnStandalone{padding:10px 12px!important;border-radius:14px!important;font-size:14px!important;} .currentYearBtnStandalone{min-width:auto!important;margin-top:7px!important;padding:7px 14px!important;font-size:12px!important;box-shadow:0 10px 20px rgba(185,28,28,.30)!important;} .isCurrentMonthStandalone .monthEntryNameStandalone{color:#7a4c00!important;} body[data-theme="dark"] .isCurrentMonthStandalone .monthEntryNameStandalone{color:#fff0a6!important;} @media(max-width:620px){.monthsModalStandalone{width:calc(100% - 10px)!important;max-height:86vh!important}.monthsGridStandalone{grid-template-columns:repeat(2,minmax(0,1fr))!important}.monthsModalTitleStandalone{font-size:18px!important}.monthEntryNameStandalone{font-size:18px!important}} @media(max-width:390px){.monthsGridStandalone{grid-template-columns:1fr!important}} /* Stage 42: keep weekday and Gregorian date in one compact row inside month-start popup */ .monthEntryDateStandalone{ display:flex!important; align-items:center!important; justify-content:space-between!important; gap:8px!important; white-space:nowrap!important; min-height:34px!important; } .monthWeekdayStandalone,.monthGregorianStandalone{ display:inline-flex!important; align-items:center!important; margin:0!important; line-height:1!important; } .monthWeekdayStandalone{ font-size:13px!important; font-weight:1000!important; color:var(--custom-text,var(--text,#173321))!important; } .monthGregorianStandalone{ font-size:13px!important; font-weight:1000!important; color:var(--green,#0f7a3a)!important; } body[data-theme="dark"] .monthWeekdayStandalone{color:var(--custom-text,#e8f1ea)!important;} body[data-theme="dark"] .monthGregorianStandalone{color:#7ee787!important;} @media(max-width:390px){ .monthEntryDateStandalone{gap:6px!important;padding-inline:7px!important;} .monthWeekdayStandalone,.monthGregorianStandalone{font-size:12px!important;} } /* Stage 43: monthly prayers page */ .monthlyPrayerPage{padding-top:14px}.pageCard.monthlyPrayerCard{background:var(--panelBg,rgba(255,255,255,.92));border:1px solid var(--line,rgba(15,122,58,.16));border-radius:22px;box-shadow:0 12px 32px rgba(0,0,0,.08);padding:18px;overflow:hidden}.monthlyPrayerHead{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:12px}.monthlyPrayerHead h1{margin:0;color:var(--text,#173321);font-size:clamp(22px,3vw,34px);font-weight:900}.monthlyPrayerHead p{margin:6px 0 0;color:var(--muted,#64746b);font-weight:700}.monthlyPrayerActions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.monthJumpLabel{display:flex;align-items:center;gap:7px;background:var(--greenSoft,rgba(15,122,58,.1));border:1px solid var(--line,rgba(15,122,58,.16));border-radius:14px;padding:6px 10px;font-weight:900;color:var(--text,#173321)}.monthJumpLabel input{border:0;background:var(--panelBg,#fff);color:var(--text,#173321);border-radius:10px;padding:7px 8px;font-weight:800;direction:ltr}.monthNavBtn,.printMonthBtn{border:1px solid var(--line,rgba(15,122,58,.18));background:var(--green,#0f7a3a);color:#fff;border-radius:13px;min-height:38px;padding:7px 13px;font-weight:900;cursor:pointer}.monthNavBtn{font-size:24px;line-height:1;min-width:42px}.printMonthBtn{background:var(--green2,#18a054)}.monthlyPrayerInfo{display:flex;gap:10px;flex-wrap:wrap;margin:8px 0 14px}.monthlyPrayerInfo span{background:var(--greenSoft,rgba(15,122,58,.1));border:1px solid var(--line,rgba(15,122,58,.16));border-radius:999px;padding:7px 12px;color:var(--text,#173321);font-weight:800}.monthlyPrayerTableWrap{overflow:auto;border-radius:18px;border:1px solid var(--line,rgba(15,122,58,.16))}.monthlyPrayerTable{width:100%;border-collapse:separate;border-spacing:0;min-width:760px;background:var(--panelBg,#fff);color:var(--text,#173321)}.monthlyPrayerTable th,.monthlyPrayerTable td{text-align:center;padding:9px 8px;border-bottom:1px solid var(--line,rgba(15,122,58,.14));border-inline-start:1px solid var(--line,rgba(15,122,58,.10));white-space:nowrap;font-weight:800}.monthlyPrayerTable th{background:linear-gradient(180deg,var(--green,#0f7a3a),var(--green2,#18a054));color:#fff;font-size:15px;position:sticky;top:0;z-index:1}.monthlyPrayerTable td{font-size:16px}.monthlyPrayerTable tbody tr:nth-child(even){background:rgba(127,127,127,.035)}.monthlyPrayerTable tbody tr.isToday{background:var(--greenSoft,rgba(15,122,58,.16));outline:2px solid var(--green2,#18a054);outline-offset:-2px}.dayNameCell{font-size:17px!important}.todayMonthlyBadge{display:inline-flex;margin-inline-start:6px;background:#c62828;color:#fff;border-radius:999px;padding:2px 7px;font-size:11px;vertical-align:middle}.dateCell{font-weight:900;color:var(--green,#0f7a3a)}.monthlyPrayerFooter{text-align:center;color:var(--muted,#64746b);padding:18px}.monthlyPrayerFooter a{color:var(--green,#0f7a3a);font-weight:900}@media(max-width:720px){.monthlyPrayerCard{padding:12px!important}.monthlyPrayerActions{width:100%;justify-content:center}.monthJumpLabel{flex:1;justify-content:center}.monthlyPrayerTable{min-width:680px}.monthlyPrayerTable th,.monthlyPrayerTable td{padding:8px 6px;font-size:14px}.monthlyPrayerInfo span{font-size:12px}} @media print{body{background:#fff!important}.globalTopbar,footer,.monthlyPrayerActions,.themeColorsPanel,.overlay{display:none!important}.wrap,.monthlyPrayerPage{padding:0!important;margin:0!important}.pageW{max-width:none!important;width:100%!important}.pageCard.monthlyPrayerCard{box-shadow:none!important;border:0!important;border-radius:0!important;padding:0!important;background:#fff!important}.monthlyPrayerHead{margin-bottom:6px!important}.monthlyPrayerHead h1{font-size:20px!important}.monthlyPrayerHead p,.monthlyPrayerInfo span{font-size:11px!important;color:#000!important}.monthlyPrayerInfo{margin:4px 0 6px!important}.monthlyPrayerInfo span{padding:2px 6px!important;border:1px solid #999!important;background:#fff!important}.monthlyPrayerTableWrap{overflow:visible!important;border:1px solid #888!important;border-radius:0!important}.monthlyPrayerTable{min-width:0!important;width:100%!important;color:#000!important;background:#fff!important}.monthlyPrayerTable th{background:#e9e9e9!important;color:#000!important;font-size:10px!important;padding:3px 2px!important}.monthlyPrayerTable td{font-size:10px!important;padding:3px 2px!important;border-color:#aaa!important}.todayMonthlyBadge{background:#000!important;color:#fff!important;font-size:8px!important;padding:1px 4px!important}.dateCell{color:#000!important}@page{size:A4 portrait;margin:7mm}} /* Stage 44: Hijri monthly prayers page */ .monthlyPrayerTable{min-width:860px} .gregDateCell{color:var(--muted,#64746b)!important;font-weight:900!important} #hijriMonthPicker{width:110px;text-align:center;border:0;background:var(--panelBg,#fff);color:var(--text,#173321);border-radius:10px;padding:7px 8px;font-weight:900;direction:ltr} .monthlyPrayerInfo strong{font-weight:1000} @media(max-width:720px){.monthlyPrayerTable{min-width:820px}#hijriMonthPicker{width:96px}} @media print{#hijriMonthPicker{display:none!important}.monthlyPrayerTable th{font-size:9px!important}.monthlyPrayerTable td{font-size:9px!important;padding:2.5px 1.5px!important}.monthlyPrayerTable{font-variant-numeric:tabular-nums}} /* Stage 46 monthly prayers print/title refinements */ .monthlyPrayerHead{justify-content:center;text-align:center} .monthlyPrayerHead > div:first-child{flex:1 1 100%;text-align:center} .monthlyPrayerHead h1#monthlyPrayerTitle{width:100%;text-align:center;line-height:1.45} .monthlyPrayerActions{margin-inline:auto;justify-content:center} .monthlyPrayerInfo{justify-content:center} @media print{ .monthlyPrayerHead{display:block!important;text-align:center!important;margin:0 0 4px!important} .monthlyPrayerHead > div:first-child{text-align:center!important;width:100%!important} .monthlyPrayerHead h1#monthlyPrayerTitle{font-size:18px!important;font-weight:900!important;text-align:center!important;margin:0 auto 2px!important;color:#000!important;line-height:1.35!important} .monthlyPrayerHead p#monthlyPrayerSubtitle{text-align:center!important;margin:0 auto 4px!important;color:#000!important;font-size:10px!important} .monthlyPrayerInfo{justify-content:center!important;text-align:center!important;margin:2px 0 5px!important} } /* Stage47 print optimize monthly prayers */ @media print{ @page{ size:auto; margin:22mm 10mm 10mm 10mm; } body{ background:#fff!important; color:#000!important; zoom:1.04; } .monthlyPrayerPage{ padding-top:0!important; margin-top:0!important; } .monthlyPrayerCard{ box-shadow:none!important; border:none!important; padding:0!important; margin:0!important; width:100%!important; max-width:none!important; } .monthlyPrayerHead{ margin-top:10mm!important; margin-bottom:8mm!important; justify-content:center!important; text-align:center!important; } .monthlyPrayerActions, .monthlyPrayerFooter, [data-global-header]{ display:none!important; } .monthlyPrayerInfo{ justify-content:center!important; gap:18px!important; margin-bottom:8mm!important; font-size:15px!important; } .monthlyPrayerTableWrap{ padding:0!important; margin:0!important; } .monthlyPrayerTable{ width:100%!important; border-collapse:collapse!important; table-layout:fixed!important; font-size:15px!important; } .monthlyPrayerTable th, .monthlyPrayerTable td{ padding:8px 4px!important; line-height:1.5!important; text-align:center!important; vertical-align:middle!important; } .monthlyPrayerTable th{ font-size:16px!important; font-weight:1000!important; } .monthlyPrayerTable td{ font-weight:700!important; } } /* Stage48 print single page fix */ @media print{ html,body{ margin:0 !important; padding:0 !important; height:auto !important; overflow:hidden !important; } .monthly-prayers-page, .print-area, .prayer-month-wrapper, .container{ max-width:100% !important; width:100% !important; margin:0 auto !important; padding-top:8mm !important; padding-bottom:0 !important; } table{ width:100% !important; border-collapse:collapse !important; page-break-inside:avoid !important; break-inside:avoid !important; font-size:12px !important; line-height:1.15 !important; } tr, td, th{ page-break-inside:avoid !important; break-inside:avoid !important; padding:3px 4px !important; } h1,h2,h3{ margin:0 0 6px 0 !important; } } /* Zebra rows */ table tr:nth-child(even){ background:rgba(0,0,0,.06) !important; } table tr:nth-child(odd){ background:rgba(255,255,255,.02) !important; } /* Stage49 print compact header */ @media print{ @page{ size:A4 portrait; margin:8mm 8mm 6mm 8mm !important; } body{ zoom:0.96; } .print-header, .monthly-print-header, .page-title, .printTitle{ margin:0 !important; padding:0 !important; line-height:1.1 !important; } h1,h2,h3,p{ margin-top:0 !important; margin-bottom:2px !important; } br{ display:none !important; } table{ margin-top:2mm !important; } thead{ display:table-header-group; } .header-spacer, .top-gap, .print-gap{ display:none !important; height:0 !important; margin:0 !important; padding:0 !important; } } /* Stage50 monthly prayers current month button */ .currentMonthBtn{ border:1px solid var(--accent, #0f7a3a); background:var(--accent, #0f7a3a); color:#fff; border-radius:999px; padding:8px 12px; font-weight:800; cursor:pointer; white-space:nowrap; box-shadow:0 6px 14px rgba(0,0,0,.12); } .currentMonthBtn[hidden]{display:none!important} .currentMonthBtn:hover{filter:brightness(.95)} @media print{.currentMonthBtn{display:none!important}} /* Stage51 fixes: visible current-month button and global palette consistency */ .currentMonthBtn.showCurrentMonthBtn{display:inline-flex!important;align-items:center;justify-content:center;} .currentMonthBtn:not([hidden]){display:inline-flex!important;} .hasCustomPalette body, body.hasCustomPalette{background:var(--custom-page-bg,var(--bg))!important;color:var(--custom-text,var(--text))!important;} body.hasCustomPalette .pageCard, body.hasCustomPalette .card, body.hasCustomPalette .clockCard, body.hasCustomPalette .monthlyPrayerCard, body.hasCustomPalette .calendarCard, body.hasCustomPalette .result-template{background:var(--custom-panel-bg,var(--panelBg))!important;border-color:var(--custom-line,var(--line))!important;color:var(--custom-text,var(--text))!important;} /* Stage52: colored print for monthly prayer table */ @media print{ *{ -webkit-print-color-adjust:exact !important; print-color-adjust:exact !important; color-adjust:exact !important; } body{ background:var(--pageBg,#f6fbf7) !important; } .pageCard.monthlyPrayerCard{ background:var(--panelBg,#ffffff) !important; } .monthlyPrayerHead h1#monthlyPrayerTitle, .monthlyPrayerHead p#monthlyPrayerSubtitle, .monthlyPrayerInfo span, .monthlyPrayerInfo strong{ color:var(--text,#173321) !important; } .monthlyPrayerInfo span{ background:var(--greenSoft,rgba(15,122,58,.10)) !important; border-color:var(--line,rgba(15,122,58,.18)) !important; } .monthlyPrayerTableWrap{ border-color:var(--line,rgba(15,122,58,.22)) !important; } .monthlyPrayerTable{ background:var(--panelBg,#ffffff) !important; color:var(--text,#173321) !important; } .monthlyPrayerTable th{ background:linear-gradient(180deg,var(--green,#0f7a3a),var(--green2,#18a054)) !important; color:#fff !important; border-color:rgba(255,255,255,.25) !important; } .monthlyPrayerTable td{ color:var(--text,#173321) !important; border-color:var(--line,rgba(15,122,58,.16)) !important; } .monthlyPrayerTable tbody tr:nth-child(odd){ background:var(--panelBg,#ffffff) !important; } .monthlyPrayerTable tbody tr:nth-child(even){ background:var(--greenSoft,rgba(15,122,58,.075)) !important; } .monthlyPrayerTable tbody tr.isToday{ background:var(--greenSoft,rgba(15,122,58,.22)) !important; outline:2px solid var(--green2,#18a054) !important; outline-offset:-2px !important; } .dateCell{ color:var(--green,#0f7a3a) !important; } .todayMonthlyBadge{ background:#c62828 !important; color:#fff !important; } } /* Stage 53: enlarge astronomical hour boxes and description popup */ .planetsCapsulesList{ gap:8px!important; padding:6px 0 10px!important; } .planet-capsule{ min-height:74px!important; padding:10px 6px!important; border-radius:16px!important; justify-content:center!important; } .planet-capsule .cap-name{ font-size:clamp(18px,2.2vw,27px)!important; line-height:1.15!important; font-weight:1000!important; letter-spacing:.2px!important; text-shadow:0 1px 2px rgba(0,0,0,.25)!important; } .planet-capsule .cap-timer{ font-size:clamp(12px,1.4vw,16px)!important; margin-top:6px!important; padding:4px 8px!important; border-radius:999px!important; } .hour-popup{ max-width:min(92vw,620px)!important; min-width:min(86vw,430px)!important; padding:22px 26px!important; border-radius:24px!important; font-size:clamp(22px,2.2vw,32px)!important; line-height:1.9!important; font-weight:1000!important; box-shadow:0 22px 55px rgba(0,0,0,.38)!important; border-width:3px!important; } .hour-popup::before{ content:"وصف الساعة الفلكية"; display:block; font-size:clamp(15px,1.3vw,20px); line-height:1.2; margin-bottom:10px; opacity:.9; font-weight:1000; } @media(max-width:720px){ .planetsCapsulesList{gap:4px!important;} .planet-capsule{min-height:58px!important;padding:7px 3px!important;border-radius:12px!important;} .planet-capsule .cap-name{font-size:15px!important;} .planet-capsule .cap-timer{font-size:11px!important;padding:3px 6px!important;} .hour-popup{min-width:88vw!important;max-width:92vw!important;font-size:20px!important;padding:18px!important;} } .siteTitleLink{ color:inherit; text-decoration:none; font-weight:800; } .siteTitleLink:hover{ opacity:.9; } /* Stage 55: maximize astronomical hours area by using the spaces between capsules */ .planetsCapsulesList{ display:grid!important; grid-template-columns:repeat(7,minmax(0,1fr))!important; gap:2px!important; padding:2px 0 4px!important; margin:0!important; width:100%!important; } .planet-capsule{ min-width:0!important; width:100%!important; min-height:92px!important; padding:12px 2px!important; border-radius:14px!important; justify-content:center!important; align-items:center!important; } .planet-capsule .cap-name{ font-size:clamp(22px,2.75vw,34px)!important; line-height:1.05!important; font-weight:1000!important; transform:scaleX(.96)!important; max-width:100%!important; white-space:nowrap!important; } .planet-capsule .cap-timer{ font-size:clamp(13px,1.55vw,18px)!important; margin-top:8px!important; padding:5px 9px!important; } .nextPrayerChip{ gap:7px!important; } @media (max-width:1180px){ .planetsCapsulesList{gap:2px!important;} .planet-capsule{min-height:78px!important;padding:10px 1px!important;} .planet-capsule .cap-name{font-size:clamp(18px,2.25vw,28px)!important;} } @media (max-width:820px){ .planetsCapsulesList{gap:2px!important;} .planet-capsule{min-height:64px!important;padding:8px 1px!important;border-radius:11px!important;} .planet-capsule .cap-name{font-size:clamp(14px,3.6vw,20px)!important;} .planet-capsule .cap-timer{font-size:11px!important;margin-top:4px!important;padding:3px 5px!important;} } @media (max-width:520px){ .planetsCapsulesList{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:4px!important;} .planet-capsule{min-height:58px!important;} .planet-capsule .cap-name{font-size:18px!important;} } /* Stage59: smart text/number contrast by active theme */ :root{ --smart-text:#20160f; --smart-muted:#5f5147; --smart-strong:#0f0a06; --smart-number:#111827; --smart-card-text:#211812; --smart-table-text:#1f160f; } html[data-theme="dark"], body[data-theme="dark"], body.dark, .dark-theme, [data-theme_bg="dark"], [data-theme_bg="black"], [data-theme_bg="night"]{ --smart-text:#f7efe4; --smart-muted:#d8c8b6; --smart-strong:#fff8ef; --smart-number:#ffffff; --smart-card-text:#fff2df; --smart-table-text:#fff6e8; } html[data-theme="light"], body[data-theme="light"], body.light, .light-theme, [data-theme_bg="white"], [data-theme_bg="light"], [data-theme_bg="day"]{ --smart-text:#20160f; --smart-muted:#5c4d42; --smart-strong:#0d0906; --smart-number:#111111; --smart-card-text:#1d140e; --smart-table-text:#1c140d; } body, .app, .page, .card, .panel, .section, .global-header, .calendar-page, .monthly-prayers-page{ color:var(--smart-text) !important; } h1,h2,h3,h4,h5,h6, .global-header-title, .brand-title, .page-title, .section-title, .calMonthName, .prayer-name, .astro-hour-name, .clock-title{ color:var(--smart-strong) !important; text-shadow:0 1px 0 rgba(255,255,255,.08); } small, .meta, .subtitle, .muted, .calMonthMeta, .prayer-note, .clock-subtitle{ color:var(--smart-muted) !important; } td,th, .prayer-table td, .prayer-table th, .monthly-prayers-table td, .monthly-prayers-table th, .sun-info-table td, .sun-info-table th{ color:var(--smart-table-text) !important; } .digital-time, .digital-clock, .clock-digital, .countdown, .next-prayer-countdown, .prayer-countdown, .ghuroobi-time, .zawali-time, .number, .num, .badge, .time-value, td .time, td .ghuroobi, td .zawali{ color:var(--smart-number) !important; font-weight:800; } input,select,textarea,button{ color:var(--smart-text) !important; } button, .btn, .global-header button, .global-header a{ color:var(--smart-strong) !important; } /* Keep colored danger/current buttons readable */ .danger, .btn-danger, #todayBtn, .currentMonthBtn, .returnCurrentBtn, [style*="background:#c62828"], [style*="background: #c62828"]{ color:#fff !important; } /* Better readability on custom color palettes */ .palette-dark body, body.palette-dark{ --smart-text:#fff4e7; --smart-muted:#dfcdbb; --smart-strong:#fffaf2; --smart-number:#ffffff; --smart-card-text:#fff2df; --smart-table-text:#fff6e8; } .palette-light body, body.palette-light{ --smart-text:#20160f; --smart-muted:#65564b; --smart-strong:#0f0a06; --smart-number:#111111; --smart-card-text:#1d140e; --smart-table-text:#1c140d; } /* Stage60b: hide selected month info box safely without breaking calendar */ .selectedMonthBox, .selected-month-box, .selected-month-info, .monthSelectedBox, .month-selected-box, #selectedMonthBox, #selectedMonthInfo, #monthViewInfo, .calendar-selected-month-info{ display:none !important; } /* Stage61: merged selected month meta */ .calendarMergedMonthMeta{ margin-top:4px; font-size:clamp(12px,1.4vw,15px); font-weight:700; opacity:.9; text-align:center; } /* Stage62: fasting page and home fasting widget */ .fastingPage{ padding-block:18px 34px; } .pageCard{ background:var(--card); color:var(--text); border:1px solid var(--line); border-radius:22px; box-shadow:var(--shadow); } .fastingHero{ display:flex; align-items:center; justify-content:space-between; gap:14px; padding:18px; margin-bottom:14px; } .fastingHero h1{ margin:0; font-size:clamp(28px,4vw,44px); font-weight:1000; } .fastingHero p{ margin:6px 0 0; color:var(--muted); font-weight:800; } .eyebrow{ color:var(--green) !important; font-weight:1000; letter-spacing:.4px; } .fastingBtn{ border:1px solid var(--line); border-radius:999px; padding:10px 14px; font-weight:1000; cursor:pointer; background:var(--panelBg); color:var(--text); } .fastingBtn.primary{ background:var(--green); color:#fff !important; border-color:var(--green); } .fastingNext,.fastingListCard{ padding:16px; margin-top:14px; } .fastingNext h2,.fastingListCard h2{ margin:0 0 10px; font-size:clamp(21px,3vw,30px); font-weight:1000; } .fastingNextGrid,.homeFastingGrid,.fastingMonthGrid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; } .fastingMonthGrid{ grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); } .fastingList{ display:grid; gap:14px; } .fastingMonthGroup{ border:1px solid var(--line); border-radius:18px; padding:12px; background:var(--panelBg); } .fastingMonthGroup h3{ margin:0 0 10px; font-size:22px; font-weight:1000; color:var(--green); } .fastingCard{ display:block; text-decoration:none; color:var(--text); border:1px solid var(--line); border-radius:16px; padding:12px; background:linear-gradient(180deg,var(--card),var(--panelBg)); min-height:122px; } .fastingCard:hover{ transform:translateY(-1px); box-shadow:var(--pillShadow); } .fastingCardTop{ display:flex; align-items:flex-start; justify-content:space-between; gap:8px; } .fastingCardTop strong{ font-size:18px; font-weight:1000; color:var(--smart-strong,var(--text)); } .fastingCardTop span{ flex:0 0 auto; background:var(--green); color:#fff; border-radius:999px; padding:4px 8px; font-size:12px; font-weight:1000; } .fastingCard.soon{ border-color:var(--gold); } .fastingCard.today{ border-color:var(--warn-border); background:linear-gradient(180deg,rgba(220,38,38,.12),var(--card)); } .fastingHijri{ margin-top:8px; font-weight:1000; font-size:17px; } .fastingCard small{ display:block; margin-top:4px; color:var(--muted); font-weight:800; font-size:12px; } .fastingCard em{ display:block; margin-top:7px; font-style:normal; color:var(--green); font-weight:900; } .fastingReminder{ margin-top:8px; font-size:12px; color:var(--muted); font-weight:800; border-top:1px dashed var(--line); padding-top:7px; } .fastingEmpty{ padding:14px; border:1px dashed var(--line); border-radius:14px; color:var(--muted); font-weight:900; } .homeFastingWidget{ margin-top:12px; padding:12px; border:1px solid var(--line); border-radius:18px; background:var(--panelBg); } .homeFastingHead{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:10px; } .homeFastingHead strong{ font-size:18px; font-weight:1000; color:var(--smart-strong,var(--text)); } .homeFastingHead a{ color:var(--green); font-weight:1000; text-decoration:none; } .homeFastingWidget .fastingCard{ min-height:auto; padding:10px; } .homeFastingWidget .fastingCardTop strong{ font-size:15px; } .homeFastingWidget .fastingHijri{ font-size:14px; } @media (max-width:760px){ .fastingHero{ flex-direction:column; align-items:stretch; } .fastingNextGrid,.homeFastingGrid{ grid-template-columns:1fr; } } @media print{ .fastingHeroActions,.globalHeader,.topbar,footer{ display:none !important; } .fastingPage{ padding:0 !important; } .fastingCard{ break-inside:avoid; page-break-inside:avoid; } } /* Stage63: fasting names and wide home fasting row */ .homeFastingWidget.wide{ width:100%; max-width:none; margin:12px auto 0; grid-column:1 / -1; } .headerCenter .homeFastingWidget.wide{ width:100%; } .homeFastingWidget.wide .homeFastingGrid{ display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:8px; } .homeFastingWidget.wide .fastingCard{ padding:8px; min-height:96px; } .homeFastingWidget.wide .fastingCardTop{ flex-direction:column; gap:5px; } .homeFastingWidget.wide .fastingCardTop strong{ font-size:13px; line-height:1.25; } .homeFastingWidget.wide .fastingCardTop span{ align-self:flex-start; font-size:11px; padding:3px 7px; } .homeFastingWidget.wide .fastingHijri{ font-size:12px; line-height:1.2; } .homeFastingWidget.wide .fastingCard small{ font-size:10px; line-height:1.25; } @media (max-width:980px){ .homeFastingWidget.wide .homeFastingGrid{ grid-template-columns:repeat(3,minmax(0,1fr)); } } @media (max-width:560px){ .homeFastingWidget.wide .homeFastingGrid{ grid-template-columns:1fr; } } /* Stage64: keep home fasting cards outside prayer table and under both analog clocks */ .mainHeaderLayout{ position:relative; } .homeFastingUnderClocks{ grid-column:1 / -1 !important; width:100% !important; max-width:100% !important; margin:10px 0 0 !important; align-self:stretch; justify-self:stretch; clear:both; } .mainHeaderLayout > .homeFastingUnderClocks{ order:99; } .nextPrayerChip .homeFastingWidget, .headerCenter > .homeFastingWidget:not(.homeFastingUnderClocks){ display:none !important; } .homeFastingUnderClocks .homeFastingGrid{ display:grid !important; grid-template-columns:repeat(6,minmax(0,1fr)) !important; gap:8px !important; width:100% !important; } .homeFastingUnderClocks .fastingCard{ min-width:0 !important; overflow:hidden !important; padding:8px !important; min-height:92px !important; } .homeFastingUnderClocks .fastingCardTop strong{ font-size:clamp(11px,1.15vw,14px) !important; line-height:1.25 !important; } .homeFastingUnderClocks .fastingHijri{ font-size:clamp(11px,1.05vw,13px) !important; } .homeFastingUnderClocks .fastingCard small{ font-size:10px !important; } @media (max-width:980px){ .homeFastingUnderClocks .homeFastingGrid{ grid-template-columns:repeat(3,minmax(0,1fr)) !important; } } @media (max-width:560px){ .homeFastingUnderClocks .homeFastingGrid{ grid-template-columns:1fr !important; } } /* Stage65: JSON events builder and data-driven event colors */ .fastingCard{ border-inline-start:5px solid var(--eventColor,var(--green)) !important; } .fastingCard .fastingCardTop span{ background:var(--eventColor,var(--green)) !important; } .eventsBuilder{ padding-block:18px 34px; } .builderHero{ padding:18px; display:flex; align-items:center; justify-content:space-between; gap:14px; margin-bottom:14px; } .builderHero h1{ margin:0; font-size:clamp(25px,3.8vw,40px); font-weight:1000; } .builderHero p{ margin:6px 0 0; color:var(--muted); font-weight:800; } .builderActions,.builderFormActions{ display:flex; gap:8px; flex-wrap:wrap; } .builderBtn{ border:1px solid var(--line); border-radius:999px; padding:10px 14px; background:var(--panelBg); color:var(--text); font-weight:1000; cursor:pointer; } .builderBtn.primary{ background:var(--green); color:#fff !important; border-color:var(--green); } .builderGrid{ display:grid; grid-template-columns:minmax(280px,390px) 1fr; gap:14px; align-items:start; } .builderForm,.builderPreview,.jsonOutputCard{ padding:16px; } .builderForm h2,.builderPreview h2,.jsonOutputCard h2{ margin:0 0 12px; font-weight:1000; } .builderForm label{ display:block; margin-bottom:10px; font-weight:900; color:var(--smart-strong,var(--text)); } .builderForm input,.builderForm select,.builderForm textarea,.jsonOutputCard textarea{ width:100%; margin-top:5px; border:1px solid var(--line); border-radius:12px; padding:10px; background:var(--card); color:var(--text); font-family:inherit; font-weight:800; } .builderForm textarea{ direction:rtl; text-align:right; font-family:inherit; resize:vertical; } .jsonOutputCard textarea{ direction:ltr; text-align:left; font-family:ui-monospace,monospace; resize:vertical; } .twoCols{ display:grid; grid-template-columns:1fr 1fr; gap:10px; } .checks{ display:grid; grid-template-columns:1fr 1fr; gap:8px; margin:8px 0; } .checks label{ border:1px solid var(--line); border-radius:12px; padding:9px; background:var(--panelBg); } .builderSectionHead{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:10px; } .builderSectionHead span{ background:var(--greenSoft); border:1px solid var(--line); padding:5px 9px; border-radius:999px; font-weight:1000; } .builderPreviewList{ display:grid; gap:8px; } .builderItem{ display:grid; grid-template-columns:8px 1fr auto; gap:10px; align-items:center; border:1px solid var(--line); border-radius:14px; background:var(--panelBg); padding:10px; } .builderItemColor{ width:8px; height:100%; min-height:48px; border-radius:999px; background:var(--eventColor,var(--green)); } .builderItem strong{ display:block; font-size:16px; font-weight:1000; } .builderItem small{ display:block; color:var(--muted); font-weight:800; margin-top:3px; } .builderItem p{ margin:5px 0 0; color:var(--muted); font-size:13px; font-weight:800; } .builderItemActions{ display:flex; gap:5px; } .builderItemActions button{ border:1px solid var(--line); border-radius:999px; background:var(--card); color:var(--text); font-weight:900; padding:6px 9px; cursor:pointer; } .jsonOutputCard{ margin-top:14px; } @media(max-width:850px){ .builderHero{ flex-direction:column; align-items:stretch; } .builderGrid{ grid-template-columns:1fr; } } @media(max-width:520px){ .twoCols,.checks{ grid-template-columns:1fr; } .builderItem{ grid-template-columns:6px 1fr; } .builderItemActions{ grid-column:2; } } /* Stage66: occasions and nahusat pages */ .eventsPage{ padding-block:18px 34px; } .eventsHero,.eventsNext,.eventsListCard{ padding:16px; margin-bottom:14px; } .eventsHero h1{ margin:0; font-size:clamp(28px,4vw,44px); font-weight:1000; } .eventsHero p{ margin:6px 0 0; color:var(--muted); font-weight:800; } .eventsNext h2,.eventsListCard h2{ margin:0 0 10px; font-size:clamp(21px,3vw,30px); font-weight:1000; } .eventCard{ border-inline-start:5px solid var(--eventColor,var(--green)) !important; } .eventCard .fastingCardTop span{ background:var(--eventColor,var(--green)) !important; } /* Stage68: home event rows and non-clickable event cards */ .eventCard{ cursor:default !important; text-decoration:none !important; } .homeEventsStack{ grid-column:1 / -1 !important; width:100% !important; display:grid; gap:10px; margin-top:10px; } .homeEventsStack .homeFastingWidget{ margin:0 !important; } .homeEventsStack .homeFastingGrid{ grid-template-columns:repeat(6,minmax(0,1fr)) !important; } @media (max-width:980px){ .homeEventsStack .homeFastingGrid{ grid-template-columns:repeat(3,minmax(0,1fr)) !important; } } @media (max-width:560px){ .homeEventsStack .homeFastingGrid{ grid-template-columns:1fr !important; } } /* Stage69: one item per row inside fasting/occasion/nahusat pages */ .fastingPage .fastingMonthGrid, .eventsPage .fastingMonthGrid{ display:grid !important; grid-template-columns:1fr !important; gap:8px !important; } .fastingPage .fastingCard, .eventsPage .fastingCard{ min-height:auto !important; display:block !important; } .fastingPage .fastingCardTop, .eventsPage .fastingCardTop{ display:flex !important; align-items:center !important; justify-content:space-between !important; gap:12px !important; } .fastingPage .fastingCardTop strong, .eventsPage .fastingCardTop strong{ font-size:clamp(16px,2vw,21px) !important; } .fastingPage .fastingHijri, .eventsPage .fastingHijri{ font-size:clamp(14px,1.6vw,17px) !important; } .fastingPage .fastingCard small, .eventsPage .fastingCard small{ font-size:12px !important; } /* keep homepage widgets multi-column */ .homeEventsStack .fastingMonthGrid, .homeEventsStack .homeFastingGrid, .homeFastingWidget .homeFastingGrid{ grid-template-columns:repeat(6,minmax(0,1fr)) !important; } @media (max-width:980px){ .homeEventsStack .homeFastingGrid, .homeFastingWidget .homeFastingGrid{ grid-template-columns:repeat(3,minmax(0,1fr)) !important; } } @media (max-width:560px){ .homeEventsStack .homeFastingGrid, .homeFastingWidget .homeFastingGrid{ grid-template-columns:1fr !important; } } /* Stage70: event page card title on first line, all details on second line */ .fastingPage .fastingCard, .eventsPage .fastingCard{ padding:10px 12px !important; } .fastingPage .fastingCardTop, .eventsPage .fastingCardTop{ display:flex !important; align-items:center !important; justify-content:space-between !important; gap:12px !important; margin-bottom:6px !important; } .fastingPage .fastingCardTop strong, .eventsPage .fastingCardTop strong{ display:block !important; flex:1 1 auto !important; min-width:0 !important; font-size:clamp(17px,2vw,22px) !important; line-height:1.25 !important; } .fastingPage .fastingCardTop span, .eventsPage .fastingCardTop span{ flex:0 0 auto !important; white-space:nowrap !important; } .fastingPage .fastingHijri, .eventsPage .fastingHijri, .fastingPage .fastingCard small, .eventsPage .fastingCard small, .fastingPage .fastingCard em, .eventsPage .fastingCard em, .fastingPage .fastingReminder, .eventsPage .fastingReminder{ display:inline !important; margin:0 !important; padding:0 !important; border:0 !important; font-size:clamp(12px,1.35vw,15px) !important; line-height:1.6 !important; vertical-align:baseline !important; } .fastingPage .fastingHijri::after, .eventsPage .fastingHijri::after, .fastingPage .fastingCard small::after, .eventsPage .fastingCard small::after, .fastingPage .fastingCard em::after, .eventsPage .fastingCard em::after{ content:" · "; opacity:.65; font-weight:900; } .fastingPage .fastingReminder, .eventsPage .fastingReminder{ color:var(--muted) !important; font-weight:800 !important; } .fastingPage .fastingCard em, .eventsPage .fastingCard em{ color:var(--green) !important; font-weight:900 !important; font-style:normal !important; } /* keep homepage cards compact as before */ .homeEventsStack .fastingCard .fastingHijri, .homeEventsStack .fastingCard small, .homeEventsStack .fastingCard em, .homeEventsStack .fastingReminder{ display:block !important; } .homeEventsStack .fastingCard .fastingHijri::after, .homeEventsStack .fastingCard small::after, .homeEventsStack .fastingCard em::after{ content:"" !important; } /* Stage71: full-year nahusat colors */ .eventCard[data-type="nahs"]{ border-inline-start:0 !important; color:#fff !important; background:var(--eventColor) !important; border-color:rgba(255,255,255,.25) !important; } .eventCard[data-type="nahs"] .fastingCardTop strong, .eventCard[data-type="nahs"] .fastingHijri, .eventCard[data-type="nahs"] small, .eventCard[data-type="nahs"] em, .eventCard[data-type="nahs"] .fastingReminder{ color:#fff !important; } .eventCard[data-type="nahs"] .fastingCardTop span{ background:rgba(255,255,255,.22) !important; color:#fff !important; border:1px solid rgba(255,255,255,.35); } .eventCard[data-type="nahs"][data-status="ممتزج"]{ color:#fff !important; } .eventCard[data-type="nahs"][data-status="ممتزج"] .fastingCardTop span{ background:rgba(0,0,0,.18) !important; } /* Stage72: full box color for yearly nahusat from uploaded file */ .eventCard[data-type="nahs"]{ border-inline-start:0 !important; background:var(--eventColor) !important; border-color:rgba(255,255,255,.25) !important; color:#fff !important; } .eventCard[data-type="nahs"] .fastingCardTop strong, .eventCard[data-type="nahs"] .fastingHijri, .eventCard[data-type="nahs"] small, .eventCard[data-type="nahs"] em, .eventCard[data-type="nahs"] .fastingReminder{ color:#fff !important; } .eventCard[data-type="nahs"] .fastingCardTop span{ background:rgba(255,255,255,.24) !important; color:#fff !important; border:1px solid rgba(255,255,255,.35); } /* Stage75: nahusat card title centered and remove extra meta feel */ .eventCard[data-type="nahs"] .fastingCardTop{ justify-content:center !important; text-align:center !important; position:relative !important; padding-inline:72px !important; } .eventCard[data-type="nahs"] .fastingCardTop strong{ width:100% !important; text-align:center !important; font-size:clamp(22px,2.6vw,32px) !important; font-weight:1000 !important; line-height:1.2 !important; } .eventCard[data-type="nahs"] .fastingCardTop span{ position:absolute !important; inset-inline-start:0 !important; top:50% !important; transform:translateY(-50%) !important; } .eventCard[data-type="nahs"] .fastingReminder{ display:none !important; } /* remove category label feeling from nahusat cards */ .eventCard[data-type="nahs"] em{ opacity:.96 !important; } /* Stage76: nahusat detailed lines centered */ .eventCard[data-type="nahs"] .nahsDetails{ display:flex !important; flex-direction:column !important; gap:6px !important; margin-top:10px !important; text-align:center !important; align-items:center !important; width:100% !important; } .eventCard[data-type="nahs"] .nahsDetails span{ display:block !important; width:100% !important; text-align:center !important; font-size:clamp(14px,1.45vw,18px) !important; line-height:1.8 !important; font-weight:900 !important; color:#fff !important; background:rgba(255,255,255,.10) !important; border:1px solid rgba(255,255,255,.14) !important; border-radius:14px !important; padding:7px 10px !important; backdrop-filter:blur(2px); } .eventCard[data-type="nahs"] .nahsDetails::after, .eventCard[data-type="nahs"] .nahsDetails span::after{ content:none !important; } /* Stage77: full hijri year list, next focus, past cards, homepage nahusat 4 cards */ .eventCard.past, .fastingCard.past{ opacity:.58 !important; filter:saturate(.75) !important; } .eventCard.past .fastingCardTop span, .fastingCard.past .fastingCardTop span{ opacity:.72 !important; } .nextFocusCard{ outline:4px solid var(--gold, #d4a62a) !important; box-shadow:0 0 0 6px rgba(212,166,42,.22), var(--shadow) !important; transform:scale(1.01); position:relative; z-index:2; } .nextFocusCard::before{ content:"الحدث القادم"; display:inline-flex; align-items:center; justify-content:center; margin-bottom:8px; padding:5px 12px; border-radius:999px; background:var(--gold, #d4a62a); color:#111 !important; font-weight:1000; font-size:13px; } .homeEventsStack #homeNahusatWidget .homeFastingGrid{ grid-template-columns:repeat(4,minmax(0,1fr)) !important; } .homeEventsStack #homeNahusatWidget .fastingCardTop strong{ font-size:clamp(10px,1vw,13px) !important; line-height:1.25 !important; } .homeEventsStack #homeNahusatWidget .nahsDetails{ display:none !important; } @media (max-width:980px){ .homeEventsStack #homeNahusatWidget .homeFastingGrid{ grid-template-columns:repeat(2,minmax(0,1fr)) !important; } } @media (max-width:560px){ .homeEventsStack #homeNahusatWidget .homeFastingGrid{ grid-template-columns:1fr !important; } } /* Stage78: homepage occasions/nahusat exactly 4 cards, smaller titles */ .homeEventsStack #homeOccasionsWidget .homeFastingGrid, .homeEventsStack #homeNahusatWidget .homeFastingGrid{ display:grid !important; grid-template-columns:repeat(4,minmax(0,1fr)) !important; gap:8px !important; } .homeEventsStack #homeOccasionsWidget .fastingCardTop, .homeEventsStack #homeNahusatWidget .fastingCardTop{ padding-inline:0 !important; justify-content:space-between !important; text-align:start !important; } .homeEventsStack #homeOccasionsWidget .fastingCardTop strong, .homeEventsStack #homeNahusatWidget .fastingCardTop strong{ font-size:clamp(10px,0.95vw,13px) !important; line-height:1.25 !important; text-align:start !important; font-weight:900 !important; } .homeEventsStack #homeOccasionsWidget .fastingCardTop span, .homeEventsStack #homeNahusatWidget .fastingCardTop span{ position:static !important; transform:none !important; font-size:10px !important; padding:3px 6px !important; white-space:nowrap !important; } .homeEventsStack #homeOccasionsWidget .fastingHijri, .homeEventsStack #homeNahusatWidget .fastingHijri{ font-size:11px !important; } .homeEventsStack #homeOccasionsWidget small, .homeEventsStack #homeNahusatWidget small{ font-size:9px !important; } .homeEventsStack #homeNahusatWidget .nahsDetails, .homeEventsStack #homeOccasionsWidget .nahsDetails{ display:none !important; } @media (max-width:980px){ .homeEventsStack #homeOccasionsWidget .homeFastingGrid, .homeEventsStack #homeNahusatWidget .homeFastingGrid{ grid-template-columns:repeat(2,minmax(0,1fr)) !important; } } @media (max-width:560px){ .homeEventsStack #homeOccasionsWidget .homeFastingGrid, .homeEventsStack #homeNahusatWidget .homeFastingGrid{ grid-template-columns:1fr !important; } } /* Stage79 */ .homeFastingHead{justify-content:center!important;text-align:center!important;position:relative!important}.homeFastingHead strong{font-size:clamp(20px,2vw,30px)!important;font-weight:1000!important;text-align:center!important}.homeFastingHead a{position:absolute!important;inset-inline-start:0!important;top:50%!important;transform:translateY(-50%)!important}.fastingReminder{display:none!important} /* Stage83: larger centered home section titles and card titles */ .homeFastingHead{ display:flex !important; justify-content:center !important; align-items:center !important; text-align:center !important; } .homeFastingHead strong{ width:100% !important; text-align:center !important; font-size:clamp(24px,2.4vw,36px) !important; font-weight:1000 !important; letter-spacing:.3px !important; } .homeFastingWidget .fastingCardTop strong{ font-size:clamp(15px,1.35vw,19px) !important; font-weight:1000 !important; line-height:1.35 !important; } #homeOccasionsWidget .fastingCardTop strong, #homeNahusatWidget .fastingCardTop strong{ font-size:clamp(14px,1.2vw,17px) !important; } /* Stage84: flat larger global header title */ .global-header, .globalHeader, .siteHeader, [data-global-header], .fathGlobalHeader{ max-width:min(1180px,96vw) !important; width:min(1180px,96vw) !important; margin-inline:auto !important; } .global-header-title, .globalHeaderTitle, .brand-title, .brandTitle, .siteTitle, .site-title, .siteTitleLink, .global-header a.siteTitleLink, .globalHeader a.siteTitleLink, [data-global-header] a, [data-global-header] .siteTitleLink{ font-family:inherit !important; font-size:clamp(28px,3.6vw,48px) !important; font-weight:1000 !important; letter-spacing:0 !important; line-height:1.12 !important; text-align:center !important; text-decoration:none !important; background:transparent !important; border:0 !important; box-shadow:none !important; border-radius:0 !important; padding:0 !important; color:var(--smart-strong,var(--text,#24180f)) !important; display:inline-block !important; min-width:max-content !important; } .global-header-title:hover, .globalHeaderTitle:hover, .brand-title:hover, .brandTitle:hover, .siteTitle:hover, .site-title:hover, .siteTitleLink:hover, .global-header a.siteTitleLink:hover, .globalHeader a.siteTitleLink:hover, [data-global-header] a:hover, [data-global-header] .siteTitleLink:hover{ background:transparent !important; box-shadow:none !important; border:0 !important; text-decoration:none !important; filter:none !important; } /* Stage84: stronger homepage section titles */ body:not(.fastingPageBody) #homeEventsStack .homeFastingHead, body:not(.fastingPageBody) .homeEventsStack .homeFastingHead, body:not(.fastingPageBody) #homeFastingWidget .homeFastingHead, body:not(.fastingPageBody) #homeOccasionsWidget .homeFastingHead, body:not(.fastingPageBody) #homeNahusatWidget .homeFastingHead{ display:flex !important; justify-content:center !important; align-items:center !important; text-align:center !important; width:100% !important; min-height:42px !important; position:relative !important; } body:not(.fastingPageBody) #homeEventsStack .homeFastingHead strong, body:not(.fastingPageBody) .homeEventsStack .homeFastingHead strong, body:not(.fastingPageBody) #homeFastingWidget .homeFastingHead strong, body:not(.fastingPageBody) #homeOccasionsWidget .homeFastingHead strong, body:not(.fastingPageBody) #homeNahusatWidget .homeFastingHead strong{ display:block !important; width:100% !important; text-align:center !important; font-size:clamp(28px,3vw,42px) !important; font-weight:1000 !important; line-height:1.15 !important; color:var(--smart-strong,var(--text,#1f160f)) !important; } body:not(.fastingPageBody) #homeEventsStack .homeFastingHead a, body:not(.fastingPageBody) .homeEventsStack .homeFastingHead a{ position:absolute !important; inset-inline-start:0 !important; top:50% !important; transform:translateY(-50%) !important; font-size:13px !important; } /* Stage85: enlarge only header title, restore footer */ [data-global-header] .siteTitleLink, [data-global-header] .brandTitle, [data-global-header] .siteTitle, [data-global-header] .global-header-title, [data-global-header] .globalHeaderTitle{ font-size:clamp(34px,4vw,58px) !important; font-weight:1000 !important; line-height:1.05 !important; background:transparent !important; border:none !important; box-shadow:none !important; padding:0 !important; margin:0 auto !important; display:inline-flex !important; align-items:center !important; justify-content:center !important; } [data-global-header]{ width:min(1280px,98vw) !important; max-width:min(1280px,98vw) !important; } /* restore footer title normal size */ footer .siteTitleLink, footer a, footer{ font-size:inherit !important; line-height:inherit !important; font-weight:inherit !important; } /* Bigger card titles on homepage */ .homeFastingWidget .fastingCardTop strong, #homeOccasionsWidget .fastingCardTop strong, #homeNahusatWidget .fastingCardTop strong, #homeFastingWidget .fastingCardTop strong{ font-size:clamp(18px,1.6vw,24px) !important; line-height:1.35 !important; font-weight:1000 !important; } /* Stage86: larger home titles for occasions and nahusat cards only */ #homeOccasionsWidget .fastingCardTop strong, #homeNahusatWidget .fastingCardTop strong{ font-size:clamp(20px,1.8vw,28px) !important; line-height:1.35 !important; font-weight:1000 !important; } /* Stage87: force bigger homepage card titles in occasions and nahusat */ body #homeEventsStack #homeOccasionsWidget .homeFastingGrid .fastingCard .fastingCardTop strong, body #homeEventsStack #homeNahusatWidget .homeFastingGrid .fastingCard .fastingCardTop strong, body #homeEventsStack #homeOccasionsWidget .homeFastingGrid .eventCard .fastingCardTop strong, body #homeEventsStack #homeNahusatWidget .homeFastingGrid .eventCard .fastingCardTop strong{ font-size:clamp(22px,2.15vw,32px) !important; line-height:1.25 !important; font-weight:1000 !important; text-align:center !important; width:100% !important; display:block !important; } body #homeEventsStack #homeOccasionsWidget .fastingCardTop, body #homeEventsStack #homeNahusatWidget .fastingCardTop{ display:flex !important; flex-direction:column !important; align-items:center !important; justify-content:center !important; gap:6px !important; text-align:center !important; } body #homeEventsStack #homeOccasionsWidget .fastingCardTop span, body #homeEventsStack #homeNahusatWidget .fastingCardTop span{ align-self:center !important; position:static !important; transform:none !important; font-size:12px !important; } body #homeEventsStack #homeOccasionsWidget .fastingCard, body #homeEventsStack #homeNahusatWidget .fastingCard{ min-height:126px !important; } /* Stage88 updated in stage89 */ .dailyNahsFrame{ position:fixed; top:8px; left:50%; transform:translateX(-50%); z-index:9997; border:1px solid color-mix(in srgb, var(--dailyNahsColor,#6b7280), white 35%); background:color-mix(in srgb, var(--dailyNahsColor,#6b7280), #111 20%); color:#fff; border-radius:999px; padding:7px 18px; display:flex; align-items:center; justify-content:center; gap:10px; box-shadow:0 0 18px var(--dailyNahsColor,#6b7280); cursor:pointer; font-family:inherit; max-width:min(92vw,850px); line-height:1.2; } .dailyNahsFrame strong{ font-size:clamp(15px,1.8vw,22px); font-weight:1000; white-space:nowrap; } .dailyNahsFrameLabel, .dailyNahsFrameHint{ font-size:12px; font-weight:900; opacity:.92; white-space:nowrap; } .dailyNahsOverlay{ position:fixed; inset:0; z-index:9998; background:rgba(0,0,0,.55); display:none; align-items:center; justify-content:center; padding:18px; } .dailyNahsOverlay.open{ display:flex; } .dailyNahsModal{ width:min(720px,94vw); max-height:82vh; overflow:auto; background:var(--card,#fff); color:var(--text,#1f160f); border:4px solid var(--dailyNahsColor,#6b7280); border-radius:24px; box-shadow:0 0 32px var(--dailyNahsColor,#6b7280); padding:22px; text-align:center; position:relative; } .dailyNahsClose{ position:absolute; top:10px; inset-inline-start:12px; width:38px; height:38px; border-radius:50%; border:0; background:var(--dailyNahsColor,#6b7280); color:#fff; font-size:26px; font-weight:1000; cursor:pointer; } .dailyNahsModal h2{ margin:10px 42px 8px; font-size:clamp(24px,3vw,40px); font-weight:1000; color:var(--dailyNahsColor,#6b7280); } .dailyNahsModalDate{ font-weight:1000; margin-bottom:14px; opacity:.85; } .dailyNahsModalBody{ display:grid; gap:9px; } .dailyNahsModalBody p{ margin:0; padding:10px 12px; border-radius:14px; background:color-mix(in srgb, var(--dailyNahsColor,#6b7280), transparent 84%); border:1px solid color-mix(in srgb, var(--dailyNahsColor,#6b7280), transparent 60%); font-size:clamp(15px,1.8vw,20px); font-weight:900; line-height:1.8; } @media(max-width:680px){ .dailyNahsFrame{ top:5px; border-radius:18px; padding:6px 10px; gap:6px; flex-wrap:wrap; } .dailyNahsFrame strong{ white-space:normal; width:100%; } .dailyNahsFrameLabel, .dailyNahsFrameHint{ font-size:10px; } } /* Stage92: remove full-page frame and move daily color glow to selected boxes only */ body.hasDailyNahsFrame::before, body.hasDailyNahsFrame::after, body.hasDailyNahsGlowTargets::before, body.hasDailyNahsGlowTargets::after{ content:none !important; display:none !important; border:0 !important; box-shadow:none !important; background:transparent !important; } /* The clickable daily title is a small badge, not a page frame */ .dailyNahsFrame{ display:none !important; } .dailyNahsBadge{ position:fixed; top:8px; left:50%; transform:translateX(-50%); z-index:9997; border:1px solid color-mix(in srgb, var(--dailyNahsColor,#6b7280), white 35%); background:color-mix(in srgb, var(--dailyNahsColor,#6b7280), #111 18%); color:#fff; border-radius:999px; padding:6px 16px; display:flex; align-items:center; justify-content:center; gap:9px; box-shadow:0 0 14px color-mix(in srgb, var(--dailyNahsColor,#6b7280), transparent 10%); cursor:pointer; font-family:inherit; max-width:min(90vw,780px); line-height:1.2; } .dailyNahsBadge strong{ font-size:clamp(14px,1.5vw,20px); font-weight:1000; white-space:nowrap; } .dailyNahsBadge .dailyNahsFrameLabel, .dailyNahsBadge .dailyNahsFrameHint{ font-size:11px; font-weight:900; opacity:.92; white-space:nowrap; } @media(max-width:680px){ .dailyNahsBadge{ top:5px; border-radius:18px; padding:6px 10px; gap:6px; flex-wrap:wrap; } .dailyNahsBadge strong{ white-space:normal; width:100%; text-align:center; } } /* Stage94: only glowing badge below header */ body.hasDailyNahsGlowTargets{ padding-top:72px !important; } .dailyNahsBadge{ position:sticky !important; top:8px !important; left:auto !important; transform:none !important; margin:10px auto 12px auto !important; width:fit-content !important; max-width:min(94vw,920px) !important; z-index:120 !important; } @media(max-width:680px){ body.hasDailyNahsGlowTargets{ padding-top:86px !important; } .dailyNahsBadge{ margin-top:6px !important; max-width:96vw !important; } } /* Stage95: place daily nahusat badge inside date/month box, not over header */ body.hasDailyNahsGlowTargets{ padding-top:0 !important; } .dateRow{ display:flex !important; flex-direction:column !important; align-items:center !important; justify-content:center !important; gap:8px !important; } .dateRow .dailyNahsBadge, .headerMainStack > .dailyNahsBadge, .mainHeader .dailyNahsBadge{ position:static !important; top:auto !important; left:auto !important; right:auto !important; bottom:auto !important; transform:none !important; margin:6px auto 4px auto !important; width:auto !important; max-width:min(96%,920px) !important; z-index:1 !important; order:2 !important; } .dateRow #fullDateLine{ order:1 !important; } .dailyNahsBadge{ position:static !important; } /* Stage96: simplified daily badge */ .dailyNahsBadge{ padding:8px 18px !important; gap:0 !important; } .dailyNahsBadge strong{ margin:0 !important; } /* Stage97: larger centered remaining-days badge everywhere */ .fastingCardTop{ flex-direction:column !important; align-items:center !important; justify-content:center !important; text-align:center !important; gap:8px !important; } .fastingCardTop span{ align-self:center !important; position:static !important; transform:none !important; display:inline-flex !important; align-items:center !important; justify-content:center !important; text-align:center !important; min-width:96px !important; padding:8px 14px !important; border-radius:999px !important; font-size:clamp(15px,1.45vw,21px) !important; line-height:1.15 !important; font-weight:1000 !important; white-space:nowrap !important; } /* extra clarity on homepage cards */ .homeEventsStack .fastingCardTop span, .homeFastingWidget .fastingCardTop span{ font-size:clamp(14px,1.25vw,19px) !important; min-width:92px !important; padding:7px 12px !important; } /* pages: fasting / occasions / nahusat */ .fastingPage .fastingCardTop span, .eventsPage .fastingCardTop span{ font-size:clamp(17px,1.8vw,24px) !important; min-width:120px !important; padding:9px 18px !important; margin-inline:auto !important; } /* Stage98: force larger remaining badges in home occasions + nahusat */ body #homeOccasionsWidget .fastingCardTop span, body #homeNahusatWidget .fastingCardTop span, body #homeOccasionsWidget .eventCard .fastingCardTop span, body #homeNahusatWidget .eventCard .fastingCardTop span, body #homeOccasionsWidget .fastingCard .fastingCardTop span, body #homeNahusatWidget .fastingCard .fastingCardTop span{ display:inline-flex !important; align-items:center !important; justify-content:center !important; position:static !important; transform:none !important; margin-inline:auto !important; min-width:130px !important; padding:10px 18px !important; border-radius:999px !important; font-size:clamp(18px,1.9vw,26px) !important; line-height:1.1 !important; font-weight:1000 !important; text-align:center !important; white-space:nowrap !important; } body #homeOccasionsWidget .fastingCardTop, body #homeNahusatWidget .fastingCardTop{ display:flex !important; flex-direction:column !important; align-items:center !important; justify-content:center !important; gap:10px !important; } /* Stage99: show nahusat details as separate dash lines in page and homepage */ #homeNahusatWidget .nahsDetails, .homeEventsStack #homeNahusatWidget .nahsDetails{ display:flex !important; flex-direction:column !important; gap:5px !important; margin-top:8px !important; width:100% !important; text-align:center !important; align-items:center !important; } #homeNahusatWidget .nahsDetails span, .homeEventsStack #homeNahusatWidget .nahsDetails span{ display:block !important; width:100% !important; text-align:center !important; font-size:clamp(11px,1vw,14px) !important; line-height:1.55 !important; font-weight:900 !important; color:#fff !important; background:rgba(255,255,255,.10) !important; border:1px solid rgba(255,255,255,.14) !important; border-radius:10px !important; padding:5px 7px !important; } .eventsPage .eventCard[data-type="nahs"] .nahsDetails{ display:flex !important; flex-direction:column !important; gap:7px !important; margin-top:10px !important; } .eventsPage .eventCard[data-type="nahs"] .nahsDetails span{ display:block !important; width:100% !important; text-align:center !important; } /* Stage100: homepage fixed nahs badge, larger view-all buttons, mobile fit */ .dateRow{ display:flex !important; flex-direction:column !important; align-items:center !important; justify-content:center !important; gap:8px !important; } .dateRow .dailyNahsBadge{ order:1 !important; position:static !important; margin:0 auto 6px auto !important; max-width:min(96vw,760px) !important; width:auto !important; text-align:center !important; } .dateRow #fullDateLine{ order:1 !important; } .dateRow .dailyNahsBadge{ order:2 !important; } .jafarDailyStatusButton{ order:3 !important; width:min(100%,760px) !important; margin:0 auto !important; padding:8px 16px !important; border:1px solid rgba(201,162,39,.58) !important; border-radius:16px !important; background:linear-gradient(135deg,rgba(15,122,58,.96),rgba(9,72,42,.98)) !important; color:#fff !important; box-shadow:0 8px 20px rgba(4,48,27,.20),inset 0 1px 0 rgba(255,255,255,.18) !important; font-family:inherit !important; font-size:clamp(15px,1.35vw,20px) !important; font-weight:1000 !important; line-height:1.5 !important; text-align:center !important; cursor:pointer !important; transition:transform .18s ease,box-shadow .18s ease,filter .18s ease !important; } .dateRow .homeYearInfoTable{ order:4 !important; } .jafarDailyStatusButton:hover{ transform:translateY(-1px) !important; filter:brightness(1.06) !important; box-shadow:0 11px 24px rgba(4,48,27,.26),inset 0 1px 0 rgba(255,255,255,.22) !important; } .jafarDailyStatusButton:focus-visible{ outline:3px solid rgba(201,162,39,.42) !important; outline-offset:3px !important; } .jafarDailySecondaryPageButton{ display:flex !important; align-items:center !important; justify-content:center !important; width:min(100%,760px) !important; margin:7px auto 0 !important; box-sizing:border-box !important; } .calSubtitle .jafarDailySecondaryPageButton{ align-self:center; } .dnhHero > .jafarDailyHoursButton{ margin:7px auto 0 !important; } /* Stage342: عنوان التقويم في سطر واحد وبهوية بصرية موحّدة */ .calendarHeadingLine{ display:flex !important; align-items:baseline !important; justify-content:center !important; gap:.38em !important; width:100% !important; white-space:nowrap !important; color:var(--fc-green,#0f7a3a) !important; font-family:inherit !important; font-size:clamp(19px,2.45vw,32px) !important; font-weight:1000 !important; line-height:1.3 !important; } .calendarHeadingLine .breadcrumbs, .calendarHeadingLine .calTitle{ display:inline !important; margin:0 !important; padding:0 !important; color:inherit !important; -webkit-text-fill-color:currentColor !important; font:inherit !important; line-height:inherit !important; opacity:1 !important; letter-spacing:normal !important; } body[data-theme="dark"] .calendarHeadingLine, body.dark .calendarHeadingLine{ color:#9ff0b8 !important; } @media(max-width:560px){ .calendarHeadingLine{ gap:.25em !important; font-size:clamp(15px,4.2vw,20px) !important; } } .jafarDailyOverlay{ position:fixed; inset:0; z-index:10020; display:none; align-items:center; justify-content:center; padding:18px; background:rgba(2,12,8,.68); backdrop-filter:blur(6px); } .jafarDailyOverlay.open{display:flex;} body.jafarDailyModalOpen{overflow:hidden;} .jafarDailyModal{ position:relative; width:min(760px,94vw); max-height:min(82vh,760px); overflow:auto; padding:26px 24px 24px; border:2px solid rgba(201,162,39,.72); border-radius:26px; background:linear-gradient(145deg,var(--card,#fff),color-mix(in srgb,var(--card,#fff),#0f7a3a 7%)); color:var(--text,#20160f); box-shadow:0 26px 70px rgba(0,0,0,.36),inset 0 1px 0 rgba(255,255,255,.55); text-align:center; } .jafarDailyClose{ position:absolute; top:11px; inset-inline-start:12px; width:40px; height:40px; padding:0 !important; border:1px solid rgba(201,162,39,.52) !important; border-radius:50% !important; background:#0f6338 !important; color:#fff !important; font-size:27px !important; font-weight:1000 !important; line-height:36px !important; cursor:pointer; } .jafarDailyModal h2{ margin:5px 42px 8px; color:#0f6338 !important; font-size:clamp(21px,2.7vw,34px) !important; font-weight:1000 !important; line-height:1.55 !important; } .jafarDailyModalBody{ padding:18px 20px; border:1px solid rgba(15,122,58,.28); border-radius:18px; background:rgba(15,122,58,.075); font-size:clamp(17px,1.7vw,22px); font-weight:700; line-height:2; text-align:justify; } body[data-theme="dark"] .jafarDailyModal{ background:linear-gradient(145deg,#14241c,#0b1912); color:#f8f1e7; } body[data-theme="dark"] .jafarDailyModal h2{color:#e7c966 !important;} body[data-theme="dark"] .jafarDailyModalBody{ border-color:rgba(231,201,102,.30); background:rgba(255,255,255,.055); } @media(max-width:680px){ .jafarDailyStatusButton{ width:100% !important; padding:8px 10px !important; border-radius:14px !important; font-size:15px !important; } .jafarDailyOverlay{padding:10px;} .jafarDailyModal{ width:100%; max-height:88vh; padding:22px 14px 16px; border-radius:20px; } .jafarDailyModal h2{ margin:13px 34px 7px; font-size:20px !important; } .jafarDailyModalBody{ padding:14px; font-size:17px; line-height:1.9; } } .homeEventsStack .homeFastingHead, .homeFastingWidget .homeFastingHead{ display:grid !important; grid-template-columns:minmax(96px,auto) 1fr minmax(96px,auto) !important; align-items:center !important; width:100% !important; gap:8px !important; text-align:center !important; } .homeEventsStack .homeFastingHead strong, .homeFastingWidget .homeFastingHead strong{ grid-column:2 !important; justify-self:center !important; text-align:center !important; } .homeEventsStack .homeFastingHead a, .homeFastingWidget .homeFastingHead a{ grid-column:1 !important; position:static !important; transform:none !important; justify-self:start !important; font-size:clamp(15px,1.25vw,20px) !important; font-weight:1000 !important; padding:7px 12px !important; border-radius:999px !important; background:var(--panelBg,rgba(255,255,255,.35)) !important; border:1px solid var(--line,rgba(0,0,0,.1)) !important; text-decoration:none !important; } html,body{ max-width:100% !important; overflow-x:hidden !important; } .wrap, .pageW, .main, .mainHeader, .mainHeaderLayout, .homeEventsStack, .homeFastingWidget, .fastingPage, .eventsPage{ max-width:100% !important; box-sizing:border-box !important; } img,canvas,table{ max-width:100% !important; } @media(max-width:720px){ body{ margin:0 !important; padding-inline:6px !important; } .wrap, .pageW{ width:100% !important; padding-inline:4px !important; } .mainHeaderLayout{ display:grid !important; grid-template-columns:1fr !important; gap:10px !important; } .headerSide, .headerCenter{ width:100% !important; min-width:0 !important; } .homeEventsStack .homeFastingHead, .homeFastingWidget .homeFastingHead{ grid-template-columns:1fr !important; gap:6px !important; } .homeEventsStack .homeFastingHead strong, .homeFastingWidget .homeFastingHead strong, .homeEventsStack .homeFastingHead a, .homeFastingWidget .homeFastingHead a{ grid-column:1 !important; justify-self:center !important; } .homeEventsStack .homeFastingHead a, .homeFastingWidget .homeFastingHead a{ font-size:16px !important; padding:6px 12px !important; } .homeEventsStack #homeOccasionsWidget .homeFastingGrid, .homeEventsStack #homeNahusatWidget .homeFastingGrid, .homeEventsStack #homeFastingWidget .homeFastingGrid{ grid-template-columns:1fr !important; } .fastingCard{ width:100% !important; min-width:0 !important; } .dailyNahsBadge strong{ font-size:clamp(16px,4.5vw,22px) !important; white-space:normal !important; } .dateRow .dailyNahsBadge{ max-width:100% !important; } } @media(min-width:721px) and (max-width:1024px){ .homeEventsStack #homeOccasionsWidget .homeFastingGrid, .homeEventsStack #homeNahusatWidget .homeFastingGrid{ grid-template-columns:repeat(2,minmax(0,1fr)) !important; } } /* Stage101: home-only daily badge and force 'عرض الكل' far left */ .homeEventsStack .homeFastingHead, .homeFastingWidget .homeFastingHead{ display:grid !important; grid-template-columns:minmax(120px,auto) 1fr minmax(120px,auto) !important; align-items:center !important; width:100% !important; position:relative !important; } .homeEventsStack .homeFastingHead strong, .homeFastingWidget .homeFastingHead strong{ grid-column:2 !important; justify-self:center !important; text-align:center !important; } .homeEventsStack .homeFastingHead a, .homeFastingWidget .homeFastingHead a, #homeFastingWidget .homeFastingHead a, #homeOccasionsWidget .homeFastingHead a, #homeNahusatWidget .homeFastingHead a{ grid-column:1 !important; justify-self:start !important; margin-inline-start:0 !important; margin-inline-end:auto !important; position:static !important; transform:none !important; font-size:clamp(16px,1.35vw,22px) !important; font-weight:1000 !important; } /* ensure badge is never fixed/covering pages */ body:not(:has(.mainHeaderLayout)) .dailyNahsBadge{ display:none !important; } @media(max-width:720px){ .homeEventsStack .homeFastingHead, .homeFastingWidget .homeFastingHead{ grid-template-columns:1fr !important; } .homeEventsStack .homeFastingHead a, .homeFastingWidget .homeFastingHead a{ justify-self:center !important; } } /* Stage102: force 'عرض الكل' visually to far left in RTL */ .homeEventsStack .homeFastingHead, .homeFastingWidget .homeFastingHead, #homeFastingWidget .homeFastingHead, #homeOccasionsWidget .homeFastingHead, #homeNahusatWidget .homeFastingHead{ display:grid !important; grid-template-columns:120px 1fr 120px !important; direction:ltr !important; align-items:center !important; width:100% !important; } .homeEventsStack .homeFastingHead strong, .homeFastingWidget .homeFastingHead strong, #homeFastingWidget .homeFastingHead strong, #homeOccasionsWidget .homeFastingHead strong, #homeNahusatWidget .homeFastingHead strong{ grid-column:2 !important; direction:rtl !important; justify-self:center !important; text-align:center !important; } .homeEventsStack .homeFastingHead a, .homeFastingWidget .homeFastingHead a, #homeFastingWidget .homeFastingHead a, #homeOccasionsWidget .homeFastingHead a, #homeNahusatWidget .homeFastingHead a{ grid-column:1 !important; direction:rtl !important; justify-self:start !important; margin:0 !important; position:static !important; inset:auto !important; transform:none !important; left:auto !important; right:auto !important; } @media(max-width:720px){ .homeEventsStack .homeFastingHead, .homeFastingWidget .homeFastingHead, #homeFastingWidget .homeFastingHead, #homeOccasionsWidget .homeFastingHead, #homeNahusatWidget .homeFastingHead{ grid-template-columns:1fr !important; } .homeEventsStack .homeFastingHead strong, .homeFastingWidget .homeFastingHead strong, .homeEventsStack .homeFastingHead a, .homeFastingWidget .homeFastingHead a{ grid-column:1 !important; justify-self:center !important; } } /* Stage103: header width, plain title, theme switch */ .topbar.globalTopbar, .globalTopbar{ width:100% !important; max-width:100% !important; } .globalTopbar > .pageW, .topbar.globalTopbar > .pageW{ width:100% !important; max-width:var(--page-max, 1180px) !important; margin-inline:auto !important; padding-inline:clamp(8px,1.6vw,16px) !important; box-sizing:border-box !important; } .topbarCard{ width:100% !important; max-width:100% !important; box-sizing:border-box !important; border-radius:22px !important; } .globalHeaderGrid, .topbarInner.globalHeaderGrid{ min-height:clamp(78px,8vw,112px) !important; align-items:center !important; grid-template-columns:auto minmax(320px,1fr) auto !important; gap:clamp(8px,1.4vw,18px) !important; padding-block:clamp(10px,1.5vw,18px) !important; } .siteHeaderTitleLink, .topTitleOnly.siteHeaderTitleLink{ font-family:"Amiri", "Scheherazade New", "Noto Naskh Arabic", Tahoma, Arial, sans-serif !important; font-size:clamp(34px,4.2vw,60px) !important; font-weight:800 !important; line-height:1.05 !important; letter-spacing:0 !important; text-align:center !important; color:var(--smart-strong,var(--text,#1f160f)) !important; background:transparent !important; background-image:none !important; border:0 !important; box-shadow:none !important; border-radius:0 !important; padding:0 !important; margin:0 !important; min-height:auto !important; text-decoration:none !important; text-shadow:none !important; display:block !important; justify-self:center !important; } .siteHeaderTitleLink:hover, .topTitleOnly.siteHeaderTitleLink:hover{ background:transparent !important; border:0 !important; box-shadow:none !important; filter:none !important; text-decoration:none !important; transform:none !important; } .themeSwitchBtn, .themeTextBtn.themeSwitchBtn{ width:88px !important; height:38px !important; min-width:88px !important; padding:3px !important; border-radius:999px !important; border:1px solid var(--line,rgba(0,0,0,.18)) !important; background:#f3e6c7 !important; color:#24180f !important; box-shadow:inset 0 1px 4px rgba(0,0,0,.18) !important; position:relative !important; display:inline-flex !important; align-items:center !important; justify-content:center !important; overflow:hidden !important; font-size:13px !important; font-weight:1000 !important; line-height:1 !important; } .themeSwitchBtn .themeSwitchLabel{ position:relative !important; z-index:2 !important; pointer-events:none !important; } .themeSwitchBtn .themeSwitchKnob{ position:absolute !important; top:4px !important; right:4px !important; width:30px !important; height:30px !important; border-radius:50% !important; background:#fff !important; box-shadow:0 2px 8px rgba(0,0,0,.28) !important; transition:transform .2s ease, right .2s ease, left .2s ease !important; z-index:1 !important; } .themeSwitchBtn.isDark{ background:#172033 !important; color:#fff !important; } .themeSwitchBtn.isDark .themeSwitchKnob{ right:54px !important; background:#f5d47d !important; } .themeSwitchBtn.isLight{ background:#f3e6c7 !important; color:#24180f !important; } @media(max-width:760px){ .globalHeaderGrid, .topbarInner.globalHeaderGrid{ grid-template-columns:1fr !important; min-height:auto !important; gap:8px !important; } .siteHeaderTitleLink, .topTitleOnly.siteHeaderTitleLink{ font-size:clamp(30px,9vw,44px) !important; white-space:normal !important; } } /* Stage104: compact header, Islamic white title, real day/night switch */ .globalTopbar > .pageW, .topbar.globalTopbar > .pageW{ max-width:var(--page-max,1180px) !important; width:100% !important; padding-inline:clamp(8px,1.5vw,14px) !important; box-sizing:border-box !important; } .topbarCard{ border-radius:20px !important; padding:0 !important; background:linear-gradient(135deg, color-mix(in srgb, var(--green,#0f7a3a), #000 18%), color-mix(in srgb, var(--bg,#fffaf0), var(--green,#0f7a3a) 30%) ) !important; } body[data-theme="dark"] .topbarCard{ background:linear-gradient(135deg, color-mix(in srgb, var(--green,#0f7a3a), #000 45%), color-mix(in srgb, var(--bg,#111827), var(--green,#0f7a3a) 22%) ) !important; } .globalHeaderGrid, .topbarInner.globalHeaderGrid{ min-height:clamp(58px,5.2vw,78px) !important; padding-block:clamp(7px,1vw,11px) !important; align-items:center !important; } .siteHeaderTitleLink, .topTitleOnly.siteHeaderTitleLink{ font-family:"Aref Ruqaa","Amiri","Scheherazade New","Noto Naskh Arabic",serif !important; color:#fff !important; font-size:clamp(34px,3.5vw,54px) !important; font-weight:900 !important; line-height:1 !important; padding:0 8px !important; margin:0 !important; background:transparent !important; border:0 !important; box-shadow:none !important; text-shadow:0 2px 7px rgba(0,0,0,.45) !important; text-decoration:none !important; border-radius:0 !important; min-height:0 !important; } .siteHeaderTitleLink:hover, .topTitleOnly.siteHeaderTitleLink:hover{ color:#fff !important; background:transparent !important; border:0 !important; box-shadow:none !important; transform:none !important; filter:none !important; } .themeTextBtn.themeSwitchBtn, .themeSwitchBtn{ direction:ltr !important; width:94px !important; min-width:94px !important; height:40px !important; border-radius:999px !important; padding:0 !important; border:1px solid rgba(255,255,255,.38) !important; position:relative !important; display:inline-flex !important; align-items:center !important; justify-content:center !important; overflow:hidden !important; background:#e8d7a8 !important; color:#24180f !important; font-size:13px !important; font-weight:1000 !important; box-shadow:inset 0 2px 6px rgba(0,0,0,.22), 0 2px 8px rgba(0,0,0,.12) !important; } .themeSwitchBtn .themeSwitchLabel{ position:absolute !important; inset:0 !important; display:flex !important; align-items:center !important; justify-content:center !important; z-index:2 !important; padding-inline:26px !important; pointer-events:none !important; } .themeSwitchBtn .themeSwitchKnob{ position:absolute !important; top:4px !important; left:4px !important; width:32px !important; height:32px !important; border-radius:50% !important; background:#fff !important; box-shadow:0 2px 8px rgba(0,0,0,.32) !important; z-index:3 !important; transition:left .22s ease, background .22s ease !important; } .themeSwitchBtn.isDark, body[data-theme="dark"] .themeSwitchBtn{ background:#162033 !important; color:#fff !important; } .themeSwitchBtn.isDark .themeSwitchKnob, body[data-theme="dark"] .themeSwitchBtn .themeSwitchKnob{ left:58px !important; background:#f3c04d !important; } .themeSwitchBtn.isLight .themeSwitchKnob, body[data-theme="light"] .themeSwitchBtn .themeSwitchKnob{ left:4px !important; background:#fff !important; } @media(max-width:760px){ .globalHeaderGrid, .topbarInner.globalHeaderGrid{ min-height:auto !important; padding-block:8px !important; } .siteHeaderTitleLink, .topTitleOnly.siteHeaderTitleLink{ font-size:clamp(30px,8vw,42px) !important; } } /* Stage105: astronomical hour popup redesign */ .astroHourModalTitle, #astroHourModalTitle, .planetHourModal h2, .modalTitle{ text-align:center !important; font-size:clamp(30px,3.2vw,48px) !important; font-weight:1000 !important; line-height:1.1 !important; margin:4px auto 18px auto !important; color:var(--green,#0f7a3a) !important; } .astroHourModalBody, .planetHourModal .modalBody, .modalBody{ text-align:center !important; display:flex !important; flex-direction:column !important; align-items:center !important; justify-content:center !important; gap:14px !important; } .astroHourModalBody p, .planetHourModal .modalBody p, .modalBody p{ width:100% !important; text-align:center !important; font-size:clamp(18px,1.8vw,28px) !important; line-height:2 !important; font-weight:900 !important; margin:0 !important; } .astroHourModal, .planetHourModal, .modalCard{ border-radius:28px !important; padding:26px !important; } /* Stage106: astronomical hour modal popup */ .hour-popup{ display:none !important; } .astroHourOverlay{ position:fixed; inset:0; z-index:9999; display:none; align-items:center; justify-content:center; padding:18px; background:rgba(0,0,0,.55); } .astroHourOverlay.open{ display:flex; } .astroHourDialog{ width:min(720px,94vw); max-height:82vh; overflow:auto; background:var(--card,#fff); color:var(--text,#1f160f); border:4px solid var(--astroHourColor,var(--green,#0f7a3a)); border-radius:28px; box-shadow:0 0 34px var(--astroHourColor,var(--green,#0f7a3a)); padding:26px 22px; position:relative; text-align:center; } .astroHourClose{ position:absolute; top:10px; inset-inline-start:12px; width:38px; height:38px; border-radius:50%; border:0; background:var(--astroHourColor,var(--green,#0f7a3a)); color:#fff; font-size:26px; font-weight:1000; cursor:pointer; line-height:1; } .astroHourTitle{ margin:8px 44px 18px; text-align:center; color:var(--astroHourColor,var(--green,#0f7a3a)); font-size:clamp(34px,4vw,58px); font-weight:1000; line-height:1.1; } .astroHourDesc{ text-align:center; font-size:clamp(19px,2vw,30px); font-weight:900; line-height:2; padding:14px 16px; border-radius:18px; background:color-mix(in srgb, var(--astroHourColor,var(--green,#0f7a3a)), transparent 88%); border:1px solid color-mix(in srgb, var(--astroHourColor,var(--green,#0f7a3a)), transparent 60%); } /* Stage107: Day and night hours page */ .dayNightHoursPage{ padding-block:18px 34px; } .dnhHero,.dnhTableCard,.dnhLegend{ padding:16px; } .dnhTopRow{ display:grid; grid-template-columns:1fr auto; gap:12px; align-items:center; } .dnhDateBtn{ border:1px solid var(--line); border-radius:20px; background:linear-gradient(180deg,var(--card),var(--panelBg)); color:var(--text); padding:14px 16px; font-size:clamp(22px,3vw,36px); font-weight:1000; cursor:pointer; box-shadow:var(--shadow); } .dnhDigital{ min-width:220px; border:1px solid var(--line); border-radius:20px; padding:12px 16px; background:var(--panelBg); text-align:center; } .dnhDigital span{ display:block; font-weight:1000; color:var(--muted); margin-bottom:5px; } .dnhDigital strong{ direction:ltr; display:block; font-size:clamp(28px,3.4vw,44px); font-weight:1000; } .dnhLengthBtns{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:14px; } .dnhLengthBtn{ border:0; border-radius:22px; padding:16px; cursor:pointer; color:#fff; box-shadow:var(--shadow); } .dnhLengthBtn span{ display:block; font-size:clamp(19px,2.2vw,30px); font-weight:1000; margin-bottom:6px; } .dnhLengthBtn strong{ display:block; font-size:clamp(16px,1.8vw,24px); font-weight:1000; } .dnhLengthBtn.night{ background:linear-gradient(135deg,#172033,#0f172a); } .dnhLengthBtn.day{ background:linear-gradient(135deg,#0f7a3a,#b78319); } .dnhTableCard{ margin-top:14px; } .dnhTableHead{ text-align:center; margin-bottom:12px; } .dnhTableHead h1{ margin:0; font-size:clamp(28px,3.8vw,48px); font-weight:1000; } .dnhTableHead p{ margin:5px 0 0; color:var(--muted); font-weight:900; } .dnhTableWrap{ overflow:auto; border-radius:18px; border:1px solid var(--line); } .dnhTable{ width:100%; border-collapse:separate; border-spacing:0; min-width:720px; } .dnhTable th{ background:var(--green); color:#fff; padding:12px; font-size:18px; font-weight:1000; position:sticky; top:0; z-index:1; } .dnhTable td{ padding:11px; text-align:center; border-bottom:1px solid var(--line); background:var(--card); font-size:17px; font-weight:900; } .dnhTable tr.active td{ background:color-mix(in srgb, var(--green), transparent 84%); outline:2px solid var(--green); outline-offset:-2px; } .dnhHourNum{ font-size:20px !important; font-weight:1000 !important; } .dnhCountdown{ display:inline-flex; align-items:center; justify-content:center; margin-inline-start:8px; padding:5px 10px; border-radius:999px; background:var(--green); color:#fff; direction:ltr; font-weight:1000; font-size:16px; } .dnhPlanet{ border:0; border-radius:999px; color:#fff; padding:9px 18px; font-size:20px; font-weight:1000; cursor:pointer; min-width:92px; } .dnhPlanet.p-green{ background:#0f7a3a; } .dnhPlanet.p-blue{ background:#2876a8; } .dnhPlanet.p-red{ background:#c62828; } .dnhPlanet.p-gray{ background:#6b7280; } .dnhLegend{ margin-top:14px; display:grid; grid-template-columns:repeat(4,1fr); gap:10px; } .dnhLegendBox{ color:#fff; border-radius:20px; padding:22px 12px; text-align:center; font-size:clamp(22px,2.4vw,36px); font-weight:1000; box-shadow:var(--shadow); } .dnhLegendBox.goodMajor{ background:#0f7a3a; } .dnhLegendBox.goodMinor{ background:#2876a8; } .dnhLegendBox.bad{ background:#c62828; } .dnhLegendBox.mixed{ background:#6b7280; } .dnhOverlay{ position:fixed; inset:0; z-index:9998; background:rgba(0,0,0,.55); display:flex; align-items:center; justify-content:center; padding:18px; } .dnhOverlay[hidden]{ display:none !important; } .dnhDateModal{ width:min(620px,94vw); max-height:84vh; overflow:auto; border-radius:26px; background:var(--card); color:var(--text); border:3px solid var(--green); box-shadow:0 0 32px var(--green); padding:20px; position:relative; text-align:center; } .dnhDateModal h2{ margin:6px 42px 12px; font-size:clamp(24px,3vw,40px); font-weight:1000; color:var(--green); } .dnhClose{ position:absolute; top:10px; inset-inline-start:12px; width:38px; height:38px; border-radius:50%; border:0; background:var(--green); color:#fff; font-size:26px; font-weight:1000; cursor:pointer; } .dnhMonthNav{ display:grid; grid-template-columns:44px 1fr 44px; gap:8px; align-items:center; margin-bottom:12px; } .dnhMonthNav button{ border:0; border-radius:12px; background:var(--panelBg); color:var(--text); font-size:28px; font-weight:1000; cursor:pointer; } .dnhMonthNav strong{ font-size:22px; font-weight:1000; } .dnhDaysGrid{ display:grid; grid-template-columns:repeat(7,1fr); gap:7px; } .dnhDaysGrid button{ border:1px solid var(--line); border-radius:12px; background:var(--panelBg); color:var(--text); padding:10px 0; font-size:18px; font-weight:1000; cursor:pointer; } .dnhDaysGrid button.active{ background:var(--green); color:#fff; } @media(max-width:760px){ .dayNightHoursPage{ padding-inline:6px; } .dnhTopRow,.dnhLengthBtns,.dnhLegend{ grid-template-columns:1fr; } .dnhDigital{ min-width:0; } .dnhTable{ min-width:620px; } } /* Stage108: day/night hours refinements */ .dnhFixedNahsBadge{ position:static !important; transform:none !important; margin:0 auto 12px auto !important; display:flex !important; width:fit-content !important; max-width:min(96vw,760px) !important; background:color-mix(in srgb, var(--dailyNahsColor,#c62828), #111 18%) !important; color:#fff !important; } .dnhTableCard.nightMode{ background:linear-gradient(135deg,#111827,#172033) !important; color:#fff !important; } .dnhTableCard.nightMode .dnhTableHead h1, .dnhTableCard.nightMode .dnhTableHead p{ color:#fff !important; } .dnhTableCard.nightMode .dnhTable th{ background:#0f172a !important; color:#fff !important; } .dnhTableCard.nightMode .dnhTable td{ background:#172033 !important; color:#fff !important; border-bottom-color:rgba(255,255,255,.12) !important; } .dnhTableCard.nightMode .dnhTable tr.active td{ background:#26344f !important; outline-color:#f5d47d !important; } .dnhTableCard.dayMode{ background:linear-gradient(135deg,#eaf8ef,#fff6dc) !important; color:#173321 !important; } .dnhTableCard.dayMode .dnhTableHead h1{ color:#173321 !important; } .dnhTableCard.dayMode .dnhTableHead p{ color:#55705d !important; } .dnhTableCard.dayMode .dnhTable th{ background:linear-gradient(135deg,#0f7a3a,#b78319) !important; color:#fff !important; } .dnhTableCard.dayMode .dnhTable td{ background:rgba(255,255,255,.88) !important; color:#173321 !important; } .dnhTableCard.dayMode .dnhTable tr.active td{ background:#eaf8ef !important; outline-color:#0f7a3a !important; } /* countdown inside astronomical hour box */ .dnhPlanet{ display:inline-flex !important; flex-direction:column !important; align-items:center !important; justify-content:center !important; gap:5px !important; min-width:118px !important; } .dnhCountdown{ display:inline-flex !important; align-items:center !important; justify-content:center !important; margin:0 !important; padding:4px 10px !important; border-radius:999px !important; background:rgba(255,255,255,.22) !important; color:#fff !important; direction:ltr !important; font-weight:1000 !important; font-size:clamp(15px,1.5vw,21px) !important; line-height:1 !important; } .dnhTable tr.active .dnhPlanet{ box-shadow:0 0 0 3px #fff, 0 0 20px currentColor !important; transform:scale(1.03); } /* Stage109: confirm fixed nahs badge + clearer compact day/night hour tables */ .dnhHero .dnhFixedNahsBadge{ display:flex !important; align-items:center !important; justify-content:center !important; position:static !important; margin:0 auto 14px auto !important; max-width:min(96vw,820px) !important; width:fit-content !important; padding:10px 22px !important; border-radius:999px !important; background:color-mix(in srgb, var(--dailyNahsColor,#c62828), #111 15%) !important; color:#fff !important; box-shadow:0 0 16px color-mix(in srgb, var(--dailyNahsColor,#c62828), transparent 10%) !important; } .dnhHero .dnhFixedNahsBadge strong{ font-size:clamp(22px,2.7vw,38px) !important; font-weight:1000 !important; line-height:1.25 !important; text-align:center !important; } .dnhTableWrap{ border-radius:14px !important; border:1px solid color-mix(in srgb, var(--green,#0f7a3a), transparent 55%) !important; overflow:auto !important; } .dnhTable{ border-spacing:0 !important; border-collapse:separate !important; min-width:660px !important; } .dnhTable th{ padding:10px 8px !important; font-size:clamp(18px,1.65vw,25px) !important; line-height:1.25 !important; border-inline-end:1px solid rgba(255,255,255,.22) !important; } .dnhTable td{ padding:8px 7px !important; font-size:clamp(18px,1.65vw,24px) !important; line-height:1.35 !important; border-bottom:1px solid color-mix(in srgb, var(--line,rgba(0,0,0,.15)), transparent 20%) !important; border-inline-end:1px solid color-mix(in srgb, var(--line,rgba(0,0,0,.15)), transparent 35%) !important; } .dnhTable th:last-child, .dnhTable td:last-child{ border-inline-end:0 !important; } .dnhHourNum{ font-size:clamp(20px,1.9vw,28px) !important; white-space:nowrap !important; } .dnhPlanet{ min-width:108px !important; padding:8px 14px !important; font-size:clamp(19px,1.9vw,28px) !important; border:1px solid rgba(255,255,255,.28) !important; } .dnhCountdown{ font-size:clamp(17px,1.7vw,24px) !important; padding:5px 12px !important; min-width:76px !important; } .dnhTableCard{ padding:13px !important; border-radius:20px !important; } .dnhTableHead h1{ font-size:clamp(30px,3.6vw,50px) !important; } .dnhTableHead p{ font-size:clamp(16px,1.5vw,22px) !important; } .dnhLengthBtn span{ font-size:clamp(22px,2.5vw,34px) !important; } .dnhLengthBtn strong{ font-size:clamp(18px,2vw,28px) !important; } @media(max-width:760px){ .dnhTable{ min-width:560px !important; } .dnhTable th{ font-size:17px !important; padding:8px 5px !important; } .dnhTable td{ font-size:17px !important; padding:7px 5px !important; } .dnhPlanet{ min-width:92px !important; padding:7px 10px !important; } } /* Stage110: force visible fixed nahs badge on day/night page */ .dnhHero > #dnhFixedNahsBadge{ display:flex !important; visibility:visible !important; opacity:1 !important; position:static !important; z-index:5 !important; margin:0 auto 16px auto !important; } /* Stage111: mobile tuning for day/night page and global header */ @media(max-width:760px){ .globalHeaderGrid, .topbarInner.globalHeaderGrid{ display:grid !important; grid-template-columns:1fr !important; grid-template-areas: "title" "controls" !important; gap:8px !important; padding:8px !important; min-height:auto !important; } .topTitleOnly.siteHeaderTitleLink, .siteHeaderTitleLink{ grid-area:title !important; justify-self:center !important; text-align:center !important; width:100% !important; font-size:clamp(30px,8vw,44px) !important; line-height:1.05 !important; white-space:normal !important; } .topNav.calendarMenu{ grid-area:controls !important; justify-self:start !important; align-self:center !important; position:relative !important; } .topbarLeft.appLeftControls{ grid-area:controls !important; justify-self:end !important; align-self:center !important; display:flex !important; align-items:center !important; gap:6px !important; flex-wrap:wrap !important; } .hamburgerBtn{ min-width:42px !important; height:38px !important; } .pageMenuList{ display:none !important; } .menuHover.menuOpen .pageMenuList{ display:grid !important; position:absolute !important; top:calc(100% + 6px) !important; inset-inline-start:0 !important; min-width:220px !important; max-width:min(92vw,320px) !important; z-index:5000 !important; background:var(--card,#fff) !important; border:1px solid var(--line,rgba(0,0,0,.12)) !important; border-radius:16px !important; box-shadow:0 14px 40px rgba(0,0,0,.22) !important; padding:8px !important; } .themeSwitchBtn, .themeTextBtn.themeSwitchBtn{ width:82px !important; min-width:82px !important; height:36px !important; } .themeSwitchBtn .themeSwitchKnob{ width:28px !important; height:28px !important; } .themeSwitchBtn.isDark .themeSwitchKnob, body[data-theme="dark"] .themeSwitchBtn .themeSwitchKnob{ left:50px !important; } .dayNightHoursPage{ width:100% !important; max-width:100% !important; padding:8px 4px 26px !important; box-sizing:border-box !important; } .dnhHero, .dnhTableCard, .dnhLegend{ padding:10px !important; border-radius:18px !important; } .dnhTopRow{ grid-template-columns:1fr !important; gap:8px !important; } .dnhDateBtn{ width:100% !important; padding:10px !important; font-size:clamp(20px,6vw,30px) !important; line-height:1.35 !important; } .dnhDigital{ width:100% !important; min-width:0 !important; box-sizing:border-box !important; padding:10px !important; } .dnhDigital strong{ font-size:clamp(28px,9vw,40px) !important; } .dnhLengthBtns{ grid-template-columns:1fr !important; gap:8px !important; } .dnhLengthBtn{ padding:12px !important; border-radius:18px !important; } .dnhLengthBtn span{ font-size:clamp(20px,6vw,30px) !important; } .dnhLengthBtn strong{ font-size:clamp(17px,5vw,24px) !important; } .dnhTableWrap{ width:100% !important; overflow-x:auto !important; -webkit-overflow-scrolling:touch !important; border-radius:14px !important; } .dnhTable{ min-width:520px !important; width:100% !important; } .dnhTable th{ font-size:clamp(15px,4.2vw,18px) !important; padding:7px 4px !important; } .dnhTable td{ font-size:clamp(15px,4.2vw,18px) !important; padding:6px 4px !important; } .dnhHourNum{ font-size:clamp(16px,4.8vw,20px) !important; } .dnhPlanet{ min-width:86px !important; padding:6px 8px !important; font-size:clamp(16px,4.6vw,20px) !important; } .dnhCountdown{ font-size:clamp(14px,4vw,18px) !important; min-width:64px !important; padding:4px 8px !important; } .dnhLegend{ grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:8px !important; } .dnhLegendBox{ padding:16px 8px !important; border-radius:16px !important; font-size:clamp(20px,6vw,30px) !important; } .dnhFixedNahsBadge, .dnhHero > #dnhFixedNahsBadge{ max-width:100% !important; width:100% !important; box-sizing:border-box !important; padding:9px 10px !important; } .dnhHero .dnhFixedNahsBadge strong{ font-size:clamp(20px,6vw,30px) !important; } } /* make city modal solid and readable */ .cityModal, .cityPickerModal, .cityModalPanel, .cityPickerPanel, #cityModal .modalCard, #cityModal, .cityOverlay .modalCard{ background:var(--card,#fff) !important; opacity:1 !important; backdrop-filter:none !important; } .cityOverlay, .cityModalOverlay, #cityModalOverlay{ background:rgba(0,0,0,.62) !important; opacity:1 !important; } /* Stage112: home year information table below month-beginnings button */ .homeYearInfoTable{ order:3 !important; width:100%; display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:6px; margin-top:8px; direction:rtl; } .homeYearInfoTable .hyCell{ border:1px solid var(--line,rgba(0,0,0,.12)); background:var(--panelBg,rgba(255,255,255,.72)); border-radius:14px; overflow:hidden; text-align:center; box-shadow:0 4px 14px rgba(0,0,0,.06); } .homeYearInfoTable .hyHead{ background:var(--green,#0f7a3a); color:#fff; font-weight:1000; font-size:clamp(12px,1.05vw,16px); line-height:1.25; padding:6px 4px; } .homeYearInfoTable .hyVal{ color:var(--smart-strong,var(--text,#1f160f)); font-weight:1000; font-size:clamp(15px,1.35vw,22px); line-height:1.3; padding:8px 4px; min-height:34px; display:flex; align-items:center; justify-content:center; } @media(max-width:760px){ .homeYearInfoTable{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:5px; } .homeYearInfoTable .hyCell:last-child{ grid-column:1 / -1; } .homeYearInfoTable .hyHead{ font-size:13px; padding:6px 3px; } .homeYearInfoTable .hyVal{ font-size:17px; padding:7px 3px; } } /* Stage113: Year aya popup */ .homeYearInfoTable .hyAyaCell{ display:block; width:100%; padding:0; border:1px solid var(--line,rgba(0,0,0,.12)); background:var(--panelBg,rgba(255,255,255,.72)); color:inherit; border-radius:14px; overflow:hidden; text-align:center; box-shadow:0 4px 14px rgba(0,0,0,.06); cursor:pointer; font-family:inherit; } .homeYearInfoTable .hyAyaCell:hover{ transform:translateY(-1px); box-shadow:0 8px 22px rgba(0,0,0,.10); } .yearAyaOverlay{ position:fixed; inset:0; z-index:9999; display:none; align-items:center; justify-content:center; padding:18px; background:rgba(0,0,0,.58); } .yearAyaOverlay.open{ display:flex; } .yearAyaModal{ width:min(820px,94vw); max-height:84vh; overflow:auto; background:var(--card,#fff); color:var(--text,#1f160f); border:4px solid var(--green,#0f7a3a); border-radius:28px; box-shadow:0 0 34px var(--green,#0f7a3a); padding:24px; position:relative; text-align:center; } .yearAyaClose{ position:absolute; top:10px; inset-inline-start:12px; width:38px; height:38px; border-radius:50%; border:0; background:var(--green,#0f7a3a); color:#fff; font-size:26px; font-weight:1000; cursor:pointer; line-height:1; } .yearAyaModal h2{ margin:8px 44px 18px; text-align:center; color:var(--green,#0f7a3a); font-size:clamp(26px,3vw,46px); font-weight:1000; line-height:1.2; } #yearAyaBody{ text-align:center; font-size:clamp(17px,1.7vw,24px); font-weight:850; line-height:2; padding:14px 16px; border-radius:18px; background:color-mix(in srgb, var(--green,#0f7a3a), transparent 90%); border:1px solid color-mix(in srgb, var(--green,#0f7a3a), transparent 65%); } /* Stage115: compact astro row and year info row + clickable aya + solid city modal */ /* تصغير ارتفاع صف الساعات الفلكية في الصفحة الرئيسية */ .planetsCapsulesList{ gap:5px !important; padding:5px !important; margin-block:6px !important; } .planet-capsule{ min-height:34px !important; padding:5px 8px !important; border-radius:12px !important; line-height:1.05 !important; } .planet-capsule .cap-name{ font-size:clamp(13px,1.05vw,16px) !important; line-height:1.05 !important; } .planet-capsule .cap-timer{ font-size:clamp(12px,.95vw,15px) !important; line-height:1 !important; margin-top:2px !important; } /* تصغير ارتفاع جدول سنة / آية السنة */ .homeYearInfoTable{ gap:4px !important; margin-top:6px !important; } .homeYearInfoTable .hyCell, .homeYearInfoTable .hyAyaCell{ border-radius:11px !important; } .homeYearInfoTable .hyHead{ padding:4px 3px !important; font-size:clamp(11px,.9vw,14px) !important; line-height:1.15 !important; } .homeYearInfoTable .hyVal{ min-height:26px !important; padding:5px 3px !important; font-size:clamp(13px,1.15vw,18px) !important; line-height:1.15 !important; } /* تمييز آية السنة بشكل يوحي أنها قابلة للضغط */ .homeYearInfoTable .hyAyaCell{ position:relative !important; cursor:pointer !important; background: radial-gradient(circle at 15% 15%, color-mix(in srgb, var(--green,#0f7a3a), white 55%), transparent 28%), linear-gradient(180deg, color-mix(in srgb, var(--green,#0f7a3a), white 82%), var(--panelBg,rgba(255,255,255,.72))) !important; border:2px solid color-mix(in srgb, var(--green,#0f7a3a), transparent 20%) !important; box-shadow: 0 0 0 2px color-mix(in srgb, var(--green,#0f7a3a), transparent 78%), 0 6px 18px rgba(0,0,0,.10) !important; transform:translateY(-1px); } .homeYearInfoTable .hyAyaCell::after{ content:""; position:absolute; inset-inline-end:8px; top:8px; width:9px; height:9px; border-radius:50%; background:var(--green,#0f7a3a); box-shadow:0 0 10px var(--green,#0f7a3a); } .homeYearInfoTable .hyAyaCell:hover{ transform:translateY(-2px) scale(1.015) !important; box-shadow: 0 0 0 3px color-mix(in srgb, var(--green,#0f7a3a), transparent 72%), 0 10px 24px rgba(0,0,0,.16) !important; } .homeYearInfoTable .hyAyaCell:active{ transform:translateY(0) scale(.995) !important; } /* إلغاء شفافية مربع المدن خصوصاً في الوضع الليلي */ .cityModal, .cityPickerModal, .cityModalPanel, .cityPickerPanel, #cityModal, #cityModal .modalCard, .cityOverlay .modalCard, .cityModalOverlay .modalCard, .globalCityModal, .globalCityPanel, .cityPanel, .citySearchPanel{ background:var(--card,#ffffff) !important; opacity:1 !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important; color:var(--text,#1f160f) !important; } body[data-theme="dark"] .cityModal, body[data-theme="dark"] .cityPickerModal, body[data-theme="dark"] .cityModalPanel, body[data-theme="dark"] .cityPickerPanel, body[data-theme="dark"] #cityModal, body[data-theme="dark"] #cityModal .modalCard, body[data-theme="dark"] .cityOverlay .modalCard, body[data-theme="dark"] .cityModalOverlay .modalCard, body[data-theme="dark"] .globalCityModal, body[data-theme="dark"] .globalCityPanel, body[data-theme="dark"] .cityPanel, body[data-theme="dark"] .citySearchPanel{ background:#111827 !important; color:#f8fafc !important; border-color:rgba(255,255,255,.22) !important; opacity:1 !important; } .cityOverlay, .cityModalOverlay, #cityModalOverlay, .globalCityOverlay{ background:rgba(0,0,0,.72) !important; opacity:1 !important; } body[data-theme="dark"] .cityOverlay, body[data-theme="dark"] .cityModalOverlay, body[data-theme="dark"] #cityModalOverlay, body[data-theme="dark"] .globalCityOverlay{ background:rgba(0,0,0,.82) !important; } @media(max-width:760px){ .planetsCapsulesList{ gap:4px !important; padding:4px !important; } .planet-capsule{ min-height:32px !important; padding:4px 6px !important; } .homeYearInfoTable .hyHead{ font-size:12px !important; padding:4px 2px !important; } .homeYearInfoTable .hyVal{ font-size:15px !important; min-height:24px !important; padding:4px 2px !important; } } /* Stage116: compress top rows in home header area */ .headerMainStack{ gap:4px !important; } .dateRow{ gap:4px !important; margin:0 !important; } .fullDateLine{ min-height:0 !important; padding:6px 10px !important; border-radius:14px !important; font-size:clamp(15px,1.35vw,20px) !important; line-height:1.15 !important; margin:0 !important; } .dateRow .dailyNahsBadge{ margin:0 auto 4px auto !important; padding:6px 14px !important; min-height:0 !important; border-radius:999px !important; } .dateRow .dailyNahsBadge strong{ font-size:clamp(16px,1.65vw,24px) !important; line-height:1.15 !important; } .homeYearInfoTable{ margin-top:4px !important; gap:3px !important; } .homeYearInfoTable .hyCell, .homeYearInfoTable .hyAyaCell{ border-radius:9px !important; min-height:0 !important; } .homeYearInfoTable .hyHead{ padding:3px 2px !important; font-size:clamp(10px,.75vw,12px) !important; line-height:1.05 !important; } .homeYearInfoTable .hyVal{ min-height:20px !important; padding:3px 2px !important; font-size:clamp(12px,.95vw,15px) !important; line-height:1.05 !important; } .homeYearInfoTable .hyAyaCell::after{ width:6px !important; height:6px !important; top:5px !important; inset-inline-end:5px !important; } .nextPrayerChip{ gap:4px !important; padding:7px 8px !important; margin-top:4px !important; border-radius:16px !important; } .npcTopRow{ min-height:0 !important; gap:6px !important; padding:0 !important; } .npcTitle{ font-size:clamp(11px,.9vw,13px) !important; line-height:1 !important; } .npcName{ font-size:clamp(16px,1.5vw,22px) !important; line-height:1.05 !important; } .npcTimer{ font-size:clamp(14px,1.3vw,18px) !important; line-height:1 !important; padding:3px 8px !important; min-height:0 !important; } .planetsCapsulesList{ gap:3px !important; padding:3px !important; margin-block:3px !important; } .planet-capsule{ min-height:26px !important; padding:3px 5px !important; border-radius:9px !important; line-height:1 !important; } .planet-capsule .cap-name{ font-size:clamp(11px,.8vw,13px) !important; line-height:1 !important; } .planet-capsule .cap-timer{ font-size:clamp(10px,.72vw,12px) !important; line-height:1 !important; margin-top:1px !important; } .mergedPrGrid{ gap:3px !important; padding:3px !important; margin-top:3px !important; } .mPill, .prLabelsCol{ border-radius:8px !important; min-height:0 !important; } .mPName{ min-height:0 !important; padding:3px 2px !important; font-size:clamp(12px,.9vw,14px) !important; line-height:1 !important; } .mPTimes{ gap:2px !important; padding:2px !important; } .mPSolar, .mPGhuroobi, .prLabelText{ min-height:0 !important; padding:3px 2px !important; font-size:clamp(12px,.9vw,14px) !important; line-height:1 !important; } .prLabelText{ font-weight:1000 !important; } .headerClockTitle{ margin-bottom:4px !important; } .headerClockWrap{ padding:8px !important; gap:4px !important; } .headerClockBox{ margin-block:0 !important; } .miniDigital{ margin-top:4px !important; gap:4px !important; } @media(max-width:760px){ .fullDateLine{ padding:5px 7px !important; font-size:15px !important; } .homeYearInfoTable{ gap:3px !important; } .homeYearInfoTable .hyHead{ font-size:10px !important; padding:3px 1px !important; } .homeYearInfoTable .hyVal{ font-size:13px !important; min-height:18px !important; padding:3px 1px !important; } .nextPrayerChip{ padding:6px !important; } .planetsCapsulesList{ gap:2px !important; padding:2px !important; } .planet-capsule{ min-height:24px !important; padding:3px 4px !important; } .mergedPrGrid{ gap:2px !important; padding:2px !important; } .mPName, .mPSolar, .mPGhuroobi, .prLabelText{ font-size:11px !important; padding:3px 1px !important; } } /* Stage117: solid city modal, shorter clock titles, mobile menu inside viewport */ /* تأكيد إزالة الشفافية من صندوق المدن بالكامل */ .cityBackdrop, .cityModalBackdrop, .cityOverlay, .cityModalOverlay, .globalCityOverlay, #cityModalOverlay, #cityModal{ opacity:1 !important; background:rgba(0,0,0,.78) !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important; } .cityModal, .cityDialog, .cityPickerModal, .cityModalPanel, .cityPickerPanel, .globalCityModal, .globalCityPanel, .cityPanel, .citySearchPanel, #cityModal .modalCard, #cityModal [class*="Modal"], #cityModal [class*="Panel"], [class*="city"][class*="Modal"], [class*="city"][class*="Panel"], [class*="City"][class*="Modal"], [class*="City"][class*="Panel"]{ opacity:1 !important; background:var(--card,#ffffff) !important; background-color:var(--card,#ffffff) !important; color:var(--text,#1f160f) !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important; box-shadow:0 20px 60px rgba(0,0,0,.45) !important; } body[data-theme="dark"] .cityModal, body[data-theme="dark"] .cityDialog, body[data-theme="dark"] .cityPickerModal, body[data-theme="dark"] .cityModalPanel, body[data-theme="dark"] .cityPickerPanel, body[data-theme="dark"] .globalCityModal, body[data-theme="dark"] .globalCityPanel, body[data-theme="dark"] .cityPanel, body[data-theme="dark"] .citySearchPanel, body[data-theme="dark"] #cityModal .modalCard, body[data-theme="dark"] #cityModal [class*="Modal"], body[data-theme="dark"] #cityModal [class*="Panel"], body[data-theme="dark"] [class*="city"][class*="Modal"], body[data-theme="dark"] [class*="city"][class*="Panel"], body[data-theme="dark"] [class*="City"][class*="Modal"], body[data-theme="dark"] [class*="City"][class*="Panel"]{ background:#111827 !important; background-color:#111827 !important; color:#f8fafc !important; border-color:rgba(255,255,255,.24) !important; opacity:1 !important; } body[data-theme="dark"] .cityBackdrop, body[data-theme="dark"] .cityModalBackdrop, body[data-theme="dark"] .cityOverlay, body[data-theme="dark"] .cityModalOverlay, body[data-theme="dark"] .globalCityOverlay, body[data-theme="dark"] #cityModalOverlay, body[data-theme="dark"] #cityModal{ background:rgba(0,0,0,.86) !important; opacity:1 !important; } /* عناوين الساعات بعد تقصيرها */ .headerClockTitle{ font-size:clamp(18px,1.8vw,28px) !important; line-height:1.1 !important; } /* القائمة في الجوال لا تخرج خارج عرض الشاشة */ @media(max-width:760px){ .topNav.calendarMenu, .menuHover{ position:relative !important; max-width:100vw !important; } .menuHover.menuOpen .pageMenuList, .pageMenuList{ left:auto !important; right:0 !important; inset-inline-start:auto !important; inset-inline-end:0 !important; width:min(88vw,320px) !important; min-width:0 !important; max-width:calc(100vw - 16px) !important; box-sizing:border-box !important; overflow-x:hidden !important; } html[dir="rtl"] .menuHover.menuOpen .pageMenuList{ right:0 !important; left:auto !important; } .pageMenuList a{ white-space:normal !important; overflow-wrap:anywhere !important; max-width:100% !important; box-sizing:border-box !important; } .topbarCard, .globalHeaderGrid, .topbarInner.globalHeaderGrid{ overflow:visible !important; } } @media(max-width:420px){ .menuHover.menuOpen .pageMenuList, .pageMenuList{ width:calc(100vw - 12px) !important; max-width:calc(100vw - 12px) !important; } } /* Stage118: ACTUAL city picker opacity fix - #overlay + #cityModal */ #overlay{ background:rgba(0,0,0,.82) !important; opacity:1 !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important; } #overlay.open{ display:flex !important; background:rgba(0,0,0,.82) !important; opacity:1 !important; } #overlay #cityModal, #cityModal.modal{ background:#ffffff !important; background-color:#ffffff !important; opacity:1 !important; border:1px solid rgba(15,122,58,.24) !important; box-shadow:0 24px 70px rgba(0,0,0,.55) !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important; color:#173321 !important; } #overlay #cityModal .modalHeader, #overlay #cityModal .modalContent{ background:#ffffff !important; background-color:#ffffff !important; opacity:1 !important; color:#173321 !important; } #overlay #cityModal input, #overlay #cityModal select, #overlay #cityModal button{ opacity:1 !important; } body[data-theme="dark"] #overlay{ background:rgba(0,0,0,.90) !important; } body[data-theme="dark"] #overlay.open{ background:rgba(0,0,0,.90) !important; } body[data-theme="dark"] #overlay #cityModal, body[data-theme="dark"] #cityModal.modal{ background:#0f172a !important; background-color:#0f172a !important; color:#f8fafc !important; border-color:rgba(255,255,255,.24) !important; opacity:1 !important; } body[data-theme="dark"] #overlay #cityModal .modalHeader, body[data-theme="dark"] #overlay #cityModal .modalContent{ background:#0f172a !important; background-color:#0f172a !important; color:#f8fafc !important; opacity:1 !important; } body[data-theme="dark"] #overlay #cityModal label, body[data-theme="dark"] #overlay #cityModal .modalTitle{ color:#f8fafc !important; } body[data-theme="dark"] #overlay #cityModal input, body[data-theme="dark"] #overlay #cityModal select{ background:#111827 !important; color:#f8fafc !important; border-color:rgba(255,255,255,.28) !important; opacity:1 !important; } body[data-theme="dark"] #overlay #cityModal .search-suggestions-box{ background:#111827 !important; color:#f8fafc !important; border-color:rgba(255,255,255,.28) !important; opacity:1 !important; } body[data-theme="dark"] #overlay #cityModal .badge{ background:#1f2937 !important; color:#f8fafc !important; border-color:rgba(255,255,255,.22) !important; opacity:1 !important; } /* Stage119: ZERO transparency city modal */ #overlay, #overlay.open{ background:#000000 !important; opacity:1 !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important; } #overlay::before, #overlay::after{ content:none !important; display:none !important; } #overlay #cityModal, #cityModal.modal, #overlay.open #cityModal{ background:#ffffff !important; background-color:#ffffff !important; background-image:none !important; opacity:1 !important; filter:none !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important; color:#173321 !important; } #overlay #cityModal *, #cityModal.modal *{ backdrop-filter:none !important; -webkit-backdrop-filter:none !important; } #overlay #cityModal .modalHeader, #overlay #cityModal .modalContent, #overlay #cityModal .row, #overlay #cityModal label, #overlay #cityModal input, #overlay #cityModal select, #overlay #cityModal button, #overlay #cityModal .search-suggestions-box{ opacity:1 !important; } #overlay #cityModal .modalHeader, #overlay #cityModal .modalContent{ background:#ffffff !important; background-color:#ffffff !important; background-image:none !important; } body[data-theme="dark"] #overlay, body[data-theme="dark"] #overlay.open{ background:#000000 !important; opacity:1 !important; } body[data-theme="dark"] #overlay #cityModal, body[data-theme="dark"] #cityModal.modal, body[data-theme="dark"] #overlay.open #cityModal{ background:#0f172a !important; background-color:#0f172a !important; background-image:none !important; opacity:1 !important; color:#f8fafc !important; } body[data-theme="dark"] #overlay #cityModal .modalHeader, body[data-theme="dark"] #overlay #cityModal .modalContent{ background:#0f172a !important; background-color:#0f172a !important; background-image:none !important; } body[data-theme="dark"] #overlay #cityModal input, body[data-theme="dark"] #overlay #cityModal select, body[data-theme="dark"] #overlay #cityModal .search-suggestions-box{ background:#111827 !important; background-color:#111827 !important; background-image:none !important; color:#f8fafc !important; opacity:1 !important; } body[data-theme="dark"] #overlay #cityModal button{ opacity:1 !important; } /* Stage120: Guestbook */ .guestbookPage, .guestbookAdminPage{ padding-block:18px 36px; } .guestbookHero, .guestbookFormCard, .guestbookListCard, .adminLoginCard, .adminTopCard{ margin-bottom:14px; text-align:center; } .guestbookHero h1, .guestbookListCard h2, .adminLoginCard h1, .adminTopCard h1{ margin:0 0 8px; font-size:clamp(28px,3vw,46px); font-weight:1000; } .ratingSummary{ margin:12px auto 0; display:inline-flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:8px; padding:10px 16px; border-radius:999px; background:var(--panelBg); border:1px solid var(--line); font-weight:1000; } .guestbookFormCard form, .adminLoginCard form{ display:grid; gap:10px; max-width:720px; margin-inline:auto; text-align:right; } .guestbookFormCard input, .guestbookFormCard textarea, .adminLoginCard input{ width:100%; border:1px solid var(--line); border-radius:16px; padding:12px 14px; background:var(--card); color:var(--text); font-family:inherit; font-size:17px; } .guestbookFormCard textarea{ min-height:150px; resize:vertical; } .starRating{ display:flex; direction:ltr; justify-content:center; gap:6px; } .starRating button{ border:0; background:transparent; color:#b8a46b; font-size:34px; cursor:pointer; filter:grayscale(.65); } .starRating button.active{ color:#d8a420; filter:none; text-shadow:0 0 8px rgba(216,164,32,.4); } .guestbookSubmit, .adminLoginCard .primary{ justify-self:center; min-width:180px; border:0; border-radius:999px; padding:12px 22px; background:var(--green); color:#fff; font-weight:1000; font-family:inherit; cursor:pointer; } .guestbookNotice{ text-align:center; font-weight:1000; color:var(--green); min-height:24px; } .guestbookNotice.error{ color:#c62828; } .guestbookList{ display:grid; gap:10px; } .guestbookEntry{ text-align:right; border:1px solid var(--line); background:var(--panelBg); border-radius:20px; padding:14px; } .guestbookEntryHead{ display:flex; justify-content:space-between; gap:8px; align-items:center; flex-wrap:wrap; } .guestbookEntryHead strong{ font-size:20px; font-weight:1000; } .guestbookEntryMeta{ color:var(--muted); font-weight:900; margin-top:4px; } .starsText{ color:#d8a420; letter-spacing:1px; } .guestbookEntry p{ margin:10px 0 0; line-height:1.9; font-weight:850; } .guestbookEmpty{ text-align:center; padding:22px; color:var(--muted); font-weight:1000; } .adminActionsBar{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap; } .adminActionsBar .secondary, .adminEntryBtns button{ border:1px solid var(--line); background:var(--panelBg); color:var(--text); border-radius:999px; padding:9px 14px; font-family:inherit; font-weight:1000; cursor:pointer; text-decoration:none; } .adminGuestbookList{ display:grid; gap:14px; } .adminVisitorCard{ border:1px solid var(--line); border-radius:22px; background:var(--panelBg); padding:14px; } .adminVisitorCard header{ text-align:right; border-bottom:1px solid var(--line); padding-bottom:10px; margin-bottom:10px; } .adminVisitorCard h2{ margin:0 0 5px; font-size:24px; font-weight:1000; } .adminVisitorCard p{ margin:4px 0; line-height:1.7; font-weight:850; } .adminEntryGroup{ display:grid; gap:10px; } .adminEntry{ border:1px solid var(--line); background:var(--card); border-radius:18px; padding:12px; text-align:right; } .adminEntry.pending{ border-color:#d8a420; } .adminEntry.approved{ border-color:#0f7a3a; } .adminEntry.hidden, .adminEntry.rejected{ opacity:.72; } .adminEntryMeta{ display:flex; justify-content:space-between; gap:8px; flex-wrap:wrap; font-weight:1000; } .adminEntryMeta span{ color:var(--muted); } .adminEntryBtns{ display:flex; gap:8px; flex-wrap:wrap; margin-top:10px; } .adminEntryBtns .danger{ background:#c62828; color:#fff; } @media(max-width:760px){ .guestbookPage, .guestbookAdminPage{ padding-inline:6px; } .guestbookEntryHead, .adminEntryMeta{ display:grid; } .starRating button{ font-size:30px; } } /* Stage121: site visitor counter */ .siteVisitorCounter{ width:min(var(--page-max,1180px), calc(100% - 20px)); margin:18px auto 10px; display:flex; align-items:center; justify-content:center; gap:10px; padding:10px 16px; border-radius:999px; background:var(--panelBg,rgba(255,255,255,.82)); border:1px solid var(--line,rgba(0,0,0,.12)); box-shadow:0 8px 22px rgba(0,0,0,.08); font-weight:1000; text-align:center; } .siteVisitorCounter span{ color:var(--muted); } .siteVisitorCounter strong{ color:var(--green,#0f7a3a); font-size:clamp(20px,2vw,32px); direction:ltr; } .siteVisitorCounter.counterError{ opacity:.65; } .adminCounterCard{ text-align:center; margin-bottom:14px; } .adminCounterCard h2{ margin:0 0 10px; font-size:clamp(24px,2.4vw,36px); font-weight:1000; } #adminCounterInfo{ font-weight:1000; margin-bottom:12px; } .counterBaseForm{ display:flex; align-items:end; justify-content:center; gap:10px; flex-wrap:wrap; } .counterBaseForm label{ font-weight:1000; } .counterBaseForm input{ border:1px solid var(--line); background:var(--card); color:var(--text); border-radius:14px; padding:10px 12px; font-size:18px; font-weight:1000; max-width:180px; } .counterBaseForm .primary{ border:0; border-radius:999px; padding:11px 18px; background:var(--green); color:#fff; font-weight:1000; cursor:pointer; } @media(max-width:760px){ .siteVisitorCounter{ width:calc(100% - 12px); border-radius:18px; flex-direction:column; gap:3px; } } /* Stage122: mobile dropdown menu fixed to right and inside viewport */ @media(max-width:760px){ .globalHeaderGrid, .topbarInner.globalHeaderGrid{ overflow:visible !important; } .topNav.calendarMenu, .menuHover{ position:relative !important; justify-self:end !important; overflow:visible !important; } .hamburgerBtn{ position:relative !important; z-index:5100 !important; } .menuHover .pageMenuList{ display:none !important; } .menuHover.menuOpen .pageMenuList{ display:grid !important; position:fixed !important; top:var(--mobile-menu-top, 118px) !important; right:8px !important; left:auto !important; inset-inline-start:auto !important; inset-inline-end:8px !important; width:calc(100vw - 16px) !important; max-width:calc(100vw - 16px) !important; min-width:0 !important; box-sizing:border-box !important; overflow-x:hidden !important; overflow-y:auto !important; max-height:calc(100vh - 132px) !important; z-index:5200 !important; direction:rtl !important; text-align:right !important; background:var(--card,#fff) !important; border:1px solid var(--line,rgba(0,0,0,.12)) !important; border-radius:16px !important; box-shadow:0 14px 40px rgba(0,0,0,.28) !important; padding:8px !important; } .menuHover.menuOpen .pageMenuList a{ width:100% !important; max-width:100% !important; box-sizing:border-box !important; white-space:normal !important; overflow-wrap:anywhere !important; text-align:right !important; justify-content:flex-start !important; } } /* Stage123: mobile header layout and polished menu */ @media(max-width:760px){ .globalHeaderGrid, .topbarInner.globalHeaderGrid{ display:grid !important; grid-template-columns:1fr !important; grid-template-areas: "title" "mobilebar" !important; gap:8px !important; overflow:visible !important; } .topTitleOnly.siteHeaderTitleLink, .siteHeaderTitleLink{ grid-area:title !important; justify-self:center !important; width:100% !important; text-align:center !important; } .topNav.calendarMenu{ grid-area:mobilebar !important; justify-self:end !important; align-self:center !important; position:relative !important; z-index:5200 !important; } .topbarLeft.appLeftControls{ grid-area:mobilebar !important; justify-self:start !important; align-self:center !important; display:flex !important; flex-direction:row !important; align-items:center !important; justify-content:flex-start !important; gap:6px !important; max-width:calc(100vw - 74px) !important; overflow:visible !important; } .cityMiniBtn, .themeColorsBtn, .themeSwitchBtn, .themeTextBtn.themeSwitchBtn{ flex:0 0 auto !important; } .cityMiniBtn{ max-width:118px !important; min-width:0 !important; padding-inline:8px !important; } .cityMiniBtn span, #cityMiniText{ overflow:hidden !important; text-overflow:ellipsis !important; white-space:nowrap !important; max-width:78px !important; display:inline-block !important; } .themeColorsBtn{ width:38px !important; min-width:38px !important; height:36px !important; } .themeSwitchBtn, .themeTextBtn.themeSwitchBtn{ width:78px !important; min-width:78px !important; height:36px !important; } .themeSwitchBtn.isDark .themeSwitchKnob, body[data-theme="dark"] .themeSwitchBtn .themeSwitchKnob{ left:46px !important; } .hamburgerBtn{ width:44px !important; min-width:44px !important; height:38px !important; border-radius:14px !important; font-size:24px !important; display:flex !important; align-items:center !important; justify-content:center !important; } .menuHover.menuOpen .pageMenuList{ right:8px !important; left:auto !important; inset-inline-end:8px !important; inset-inline-start:auto !important; width:min(86vw,310px) !important; max-width:calc(100vw - 16px) !important; padding:10px !important; gap:6px !important; border-radius:20px !important; background: linear-gradient(180deg, color-mix(in srgb, var(--card,#fff), var(--green,#0f7a3a) 5%), var(--card,#fff)) !important; border:1px solid color-mix(in srgb, var(--green,#0f7a3a), transparent 70%) !important; box-shadow:0 18px 48px rgba(0,0,0,.34) !important; } body[data-theme="dark"] .menuHover.menuOpen .pageMenuList{ background: linear-gradient(180deg, color-mix(in srgb, #111827, var(--green,#0f7a3a) 14%), #111827) !important; border-color:rgba(255,255,255,.18) !important; } .menuHover.menuOpen .pageMenuList a{ display:flex !important; align-items:center !important; justify-content:center !important; min-height:42px !important; padding:10px 12px !important; border-radius:14px !important; background:color-mix(in srgb, var(--panelBg,rgba(255,255,255,.7)), transparent 8%) !important; border:1px solid var(--line,rgba(0,0,0,.10)) !important; font-size:16px !important; font-weight:1000 !important; text-align:center !important; line-height:1.3 !important; } .menuHover.menuOpen .pageMenuList a.active, .menuHover.menuOpen .pageMenuList a[aria-current="page"]{ background:var(--green,#0f7a3a) !important; color:#fff !important; border-color:transparent !important; box-shadow:0 8px 18px color-mix(in srgb, var(--green,#0f7a3a), transparent 55%) !important; } .menuHover.menuOpen .pageMenuList a:last-child{ margin-top:4px !important; background:linear-gradient(135deg, var(--green,#0f7a3a), var(--green2,#19a34a)) !important; color:#fff !important; border-color:transparent !important; } } @media(max-width:390px){ .topbarLeft.appLeftControls{ gap:4px !important; max-width:calc(100vw - 62px) !important; } .cityMiniBtn{ max-width:100px !important; padding-inline:6px !important; } .cityMiniBtn span, #cityMiniText{ max-width:62px !important; } .themeSwitchBtn, .themeTextBtn.themeSwitchBtn{ width:72px !important; min-width:72px !important; } .themeSwitchBtn.isDark .themeSwitchKnob, body[data-theme="dark"] .themeSwitchBtn .themeSwitchKnob{ left:40px !important; } } /* Stage126: definitive mobile prayer table only */ @media screen and (max-width:820px){ body .mainHeader .headerCenter .nextPrayerChip{ display:block !important; width:100% !important; max-width:100% !important; padding:8px !important; border-radius:18px !important; overflow:visible !important; } /* remove the separate next-prayer row on mobile */ body .mainHeader .headerCenter .nextPrayerChip > .npcTopRow{ display:none !important; } /* keep astronomical hours, then a clean prayer table */ body .mainHeader .headerCenter #mergedPrGrid.mergedPrGrid{ display:flex !important; flex-direction:column !important; gap:5px !important; width:100% !important; max-width:100% !important; min-width:0 !important; padding:6px !important; margin:5px 0 0 0 !important; border-radius:18px !important; overflow:visible !important; background:color-mix(in srgb, var(--panelBg,rgba(255,255,255,.72)), transparent 0%) !important; } body .mainHeader .headerCenter #mergedPrGrid .prLabelsCol{ display:none !important; } body .mainHeader .headerCenter #mergedPrGrid .mPill{ display:grid !important; grid-template-columns:minmax(86px,34%) minmax(120px,66%) !important; align-items:stretch !important; gap:0 !important; width:100% !important; max-width:100% !important; min-width:0 !important; min-height:0 !important; padding:0 !important; margin:0 !important; border-radius:14px !important; overflow:hidden !important; border:1px solid var(--line,rgba(0,0,0,.13)) !important; background:var(--card,#fff) !important; box-shadow:0 4px 12px rgba(0,0,0,.05) !important; } body .mainHeader .headerCenter #mergedPrGrid .mPill .mPName{ display:flex !important; flex-direction:column !important; align-items:center !important; justify-content:center !important; gap:5px !important; min-height:0 !important; height:auto !important; padding:8px 5px !important; margin:0 !important; border:0 !important; border-inline-end:1px solid var(--line,rgba(0,0,0,.13)) !important; font-size:clamp(17px,5vw,24px) !important; font-weight:1000 !important; line-height:1.15 !important; text-align:center !important; color:var(--smart-strong,var(--text,#1f160f)) !important; background:color-mix(in srgb, var(--panelBg,rgba(255,255,255,.72)), transparent 10%) !important; } body .mainHeader .headerCenter #mergedPrGrid .mPill .mPTimes{ display:block !important; min-width:0 !important; min-height:0 !important; padding:0 !important; margin:0 !important; } /* hide zawali time completely on mobile */ body .mainHeader .headerCenter #mergedPrGrid .mPill .mPSolar{ display:none !important; } /* show only the ghuroobi time as the second column */ body .mainHeader .headerCenter #mergedPrGrid .mPill .mPGhuroobi{ display:flex !important; align-items:center !important; justify-content:center !important; width:100% !important; min-height:100% !important; height:100% !important; padding:8px 6px !important; margin:0 !important; border:0 !important; border-radius:0 !important; font-size:clamp(20px,6.2vw,30px) !important; font-weight:1000 !important; line-height:1.1 !important; text-align:center !important; color:var(--green,#0f7a3a) !important; background:transparent !important; } /* next prayer highlight */ body .mainHeader .headerCenter #mergedPrGrid .mPill.next{ border-color:var(--green,#0f7a3a) !important; background:color-mix(in srgb, var(--green,#0f7a3a), transparent 86%) !important; box-shadow: 0 0 0 2px color-mix(in srgb, var(--green,#0f7a3a), transparent 70%) inset, 0 8px 18px rgba(0,0,0,.12) !important; } body .mainHeader .headerCenter #mergedPrGrid .mPill.next .mPName{ background:var(--green,#0f7a3a) !important; color:#fff !important; border-inline-end:0 !important; } body .mainHeader .headerCenter #mergedPrGrid .mPill.next .mPGhuroobi{ color:var(--green,#0f7a3a) !important; font-weight:1000 !important; background:#fff !important; } /* countdown under the prayer name */ body .mainHeader .headerCenter #mergedPrGrid .mPCountdown{ display:inline-flex !important; align-items:center !important; justify-content:center !important; direction:ltr !important; min-width:104px !important; max-width:100% !important; padding:5px 9px !important; border-radius:999px !important; background:#fff !important; color:var(--green,#0f7a3a) !important; font-size:clamp(15px,4.6vw,22px) !important; font-weight:1000 !important; line-height:1 !important; box-shadow:0 3px 10px rgba(0,0,0,.18) !important; } body .mainHeader .headerCenter #mergedPrGrid .mPCountdown.countdown-warning{ color:#c62828 !important; } body[data-theme="dark"] .mainHeader .headerCenter #mergedPrGrid .mPill{ background:#111827 !important; border-color:rgba(255,255,255,.16) !important; } body[data-theme="dark"] .mainHeader .headerCenter #mergedPrGrid .mPill .mPName{ background:#172033 !important; color:#f8fafc !important; border-color:rgba(255,255,255,.14) !important; } body[data-theme="dark"] .mainHeader .headerCenter #mergedPrGrid .mPill .mPGhuroobi{ color:#b7f7ce !important; } body[data-theme="dark"] .mainHeader .headerCenter #mergedPrGrid .mPill.next{ background:rgba(15,122,58,.25) !important; border-color:#65e692 !important; } body[data-theme="dark"] .mainHeader .headerCenter #mergedPrGrid .mPill.next .mPName{ background:#0f7a3a !important; color:#fff !important; } body[data-theme="dark"] .mainHeader .headerCenter #mergedPrGrid .mPill.next .mPGhuroobi{ background:#0b1220 !important; color:#b7f7ce !important; } body .mainHeader .headerCenter .fullDateLine{ font-size:clamp(18px,5.2vw,25px) !important; padding:9px 12px !important; line-height:1.3 !important; border-radius:16px !important; } } @media screen and (max-width:390px){ body .mainHeader .headerCenter #mergedPrGrid .mPill{ grid-template-columns:minmax(78px,34%) minmax(105px,66%) !important; } body .mainHeader .headerCenter #mergedPrGrid .mPill .mPName{ font-size:16px !important; padding:7px 4px !important; } body .mainHeader .headerCenter #mergedPrGrid .mPill .mPGhuroobi{ font-size:20px !important; padding:7px 4px !important; } body .mainHeader .headerCenter #mergedPrGrid .mPCountdown{ min-width:96px !important; font-size:15px !important; } } /* Stage127: taller mobile prayer rows */ @media screen and (max-width:820px){ body .mainHeader .headerCenter #mergedPrGrid.mergedPrGrid{ gap:7px !important; padding:8px !important; } body .mainHeader .headerCenter #mergedPrGrid .mPill{ min-height:64px !important; border-radius:16px !important; } body .mainHeader .headerCenter #mergedPrGrid .mPill .mPName{ padding:13px 8px !important; font-size:clamp(20px,5.8vw,28px) !important; line-height:1.22 !important; min-height:64px !important; } body .mainHeader .headerCenter #mergedPrGrid .mPill .mPGhuroobi{ padding:13px 8px !important; font-size:clamp(24px,7vw,36px) !important; line-height:1.22 !important; min-height:64px !important; } body .mainHeader .headerCenter #mergedPrGrid .mPCountdown{ min-width:124px !important; padding:7px 12px !important; font-size:clamp(18px,5.4vw,26px) !important; line-height:1.05 !important; } } @media screen and (max-width:390px){ body .mainHeader .headerCenter #mergedPrGrid .mPill{ min-height:58px !important; } body .mainHeader .headerCenter #mergedPrGrid .mPill .mPName{ padding:11px 6px !important; font-size:19px !important; min-height:58px !important; } body .mainHeader .headerCenter #mergedPrGrid .mPill .mPGhuroobi{ padding:11px 6px !important; font-size:24px !important; min-height:58px !important; } body .mainHeader .headerCenter #mergedPrGrid .mPCountdown{ min-width:112px !important; font-size:18px !important; padding:6px 10px !important; } } /* Stage128: mobile prayer table uses zawali times */ @media screen and (max-width:820px){ /* أظهر الزوالي كوقت الصلاة في جدول الجوال */ body .mainHeader .headerCenter #mergedPrGrid .mPill .mPSolar{ display:flex !important; align-items:center !important; justify-content:center !important; width:100% !important; min-height:64px !important; height:100% !important; padding:13px 8px !important; margin:0 !important; border:0 !important; border-radius:0 !important; font-size:clamp(24px,7vw,36px) !important; font-weight:1000 !important; line-height:1.22 !important; text-align:center !important; color:var(--green,#0f7a3a) !important; background:transparent !important; } /* أخفِ الغروبي في جدول الجوال */ body .mainHeader .headerCenter #mergedPrGrid .mPill .mPGhuroobi{ display:none !important; } body .mainHeader .headerCenter #mergedPrGrid .mPill.next .mPSolar{ color:var(--green,#0f7a3a) !important; font-weight:1000 !important; background:#fff !important; } body[data-theme="dark"] .mainHeader .headerCenter #mergedPrGrid .mPill .mPSolar{ color:#b7f7ce !important; } body[data-theme="dark"] .mainHeader .headerCenter #mergedPrGrid .mPill.next .mPSolar{ background:#0b1220 !important; color:#b7f7ce !important; } } @media screen and (max-width:390px){ body .mainHeader .headerCenter #mergedPrGrid .mPill .mPSolar{ padding:11px 6px !important; font-size:24px !important; min-height:58px !important; } } /* Stage129: fit day/night hours table to mobile width */ @media(max-width:760px){ .dayNightHoursPage{ width:100% !important; max-width:100% !important; padding-inline:4px !important; overflow-x:hidden !important; } .dnhTableCard{ padding:8px !important; border-radius:18px !important; overflow:hidden !important; } .dnhTableHead{ margin-bottom:8px !important; } .dnhTableHead h1{ font-size:clamp(24px,7vw,34px) !important; line-height:1.15 !important; } .dnhTableHead p{ font-size:clamp(13px,3.8vw,17px) !important; line-height:1.4 !important; margin-top:4px !important; } .dnhTableWrap{ width:100% !important; max-width:100% !important; overflow-x:hidden !important; border-radius:14px !important; } .dnhTable{ width:100% !important; min-width:0 !important; max-width:100% !important; table-layout:fixed !important; border-collapse:separate !important; border-spacing:0 !important; } .dnhTable th, .dnhTable td{ white-space:normal !important; overflow-wrap:anywhere !important; word-break:normal !important; padding:6px 3px !important; line-height:1.25 !important; vertical-align:middle !important; } .dnhTable th{ font-size:clamp(11px,3.2vw,14px) !important; font-weight:1000 !important; } .dnhTable td{ font-size:clamp(12px,3.5vw,16px) !important; font-weight:900 !important; } /* columns: hour / start / planet / end */ .dnhTable th:nth-child(1), .dnhTable td:nth-child(1){ width:24% !important; } .dnhTable th:nth-child(2), .dnhTable td:nth-child(2){ width:23% !important; } .dnhTable th:nth-child(3), .dnhTable td:nth-child(3){ width:28% !important; } .dnhTable th:nth-child(4), .dnhTable td:nth-child(4){ width:25% !important; } .dnhHourNum{ font-size:clamp(12px,3.6vw,16px) !important; line-height:1.2 !important; white-space:normal !important; } .dnhPlanet{ min-width:0 !important; width:100% !important; max-width:100% !important; padding:6px 4px !important; border-radius:12px !important; font-size:clamp(14px,4.2vw,19px) !important; line-height:1.15 !important; gap:4px !important; } .dnhCountdown{ min-width:0 !important; width:auto !important; max-width:100% !important; padding:4px 6px !important; font-size:clamp(12px,3.6vw,16px) !important; line-height:1 !important; } .dnhTable tr.active .dnhPlanet{ transform:none !important; box-shadow:0 0 0 2px #fff, 0 0 12px currentColor !important; } } @media(max-width:380px){ .dnhTable th, .dnhTable td{ padding:5px 2px !important; } .dnhTable th{ font-size:11px !important; } .dnhTable td{ font-size:12px !important; } .dnhPlanet{ font-size:14px !important; padding:5px 3px !important; } .dnhCountdown{ font-size:12px !important; padding:3px 5px !important; } } /* Stage130: preserve compact mobile fit after night-hours correction */ @media(max-width:760px){ .dnhTableHead h1{ font-size:clamp(22px,6.5vw,32px) !important; } .dnhTableHead p{ font-size:clamp(12px,3.5vw,16px) !important; } .dnhTable{ table-layout:fixed !important; min-width:0 !important; width:100% !important; } } /* Stage131: day/night page button labels, glow, and smart text */ .dnhLengthBtn.night{ background:linear-gradient(135deg,#050816,#172033) !important; border:2px solid #1f2a44 !important; box-shadow: 0 0 0 2px rgba(31,42,68,.35), 0 0 24px rgba(15,23,42,.75), 0 12px 28px rgba(0,0,0,.28) !important; color:#ffffff !important; } .dnhLengthBtn.day{ background:linear-gradient(135deg,#f6d878,#fff4c6) !important; border:2px solid #d8a420 !important; box-shadow: 0 0 0 2px rgba(216,164,32,.26), 0 0 26px rgba(255,215,105,.80), 0 12px 28px rgba(0,0,0,.16) !important; color:#2d1f08 !important; } .dnhLengthBtn.night span, .dnhLengthBtn.night strong{ color:#ffffff !important; text-shadow:0 2px 8px rgba(0,0,0,.55) !important; } .dnhLengthBtn.day span, .dnhLengthBtn.day strong{ color:#2d1f08 !important; text-shadow:0 1px 0 rgba(255,255,255,.55) !important; } /* النصوص داخل صفحة الساعات تتكيف مع الثيم ولا تختفي */ .dayNightHoursPage, .dayNightHoursPage .pageCard, .dayNightHoursPage .dnhTableCard, .dayNightHoursPage .dnhHero{ color:var(--smart-strong,var(--text,#1f160f)) !important; } .dnhTableHead h1, .dnhTableHead p, .dnhDateBtn, .dnhDigital span, .dnhDigital strong, .dnhMonthNav strong, .dnhDateModal h2{ color:var(--smart-strong,var(--text,#1f160f)) !important; } body[data-theme="dark"] .dayNightHoursPage, body[data-theme="dark"] .dayNightHoursPage .pageCard, body[data-theme="dark"] .dnhTableCard, body[data-theme="dark"] .dnhHero{ color:#f8fafc !important; } body[data-theme="dark"] .dnhTableHead h1, body[data-theme="dark"] .dnhTableHead p, body[data-theme="dark"] .dnhDateBtn, body[data-theme="dark"] .dnhDigital span, body[data-theme="dark"] .dnhDigital strong, body[data-theme="dark"] .dnhMonthNav strong, body[data-theme="dark"] .dnhDateModal h2{ color:#f8fafc !important; } /* إصلاح خاص لعناوين ساعات النهار/الليل عند تبديل الثيم */ .dnhTableCard.dayMode .dnhTableHead h1{ color:#173321 !important; } .dnhTableCard.dayMode .dnhTableHead p{ color:#365542 !important; } .dnhTableCard.nightMode .dnhTableHead h1, .dnhTableCard.nightMode .dnhTableHead p{ color:#ffffff !important; } /* في الوضع الليلي، إذا كان الجدول نهاريًا يبقى النص مقروءًا فوق الخلفية الفاتحة */ body[data-theme="dark"] .dnhTableCard.dayMode .dnhTableHead h1{ color:#102a1a !important; } body[data-theme="dark"] .dnhTableCard.dayMode .dnhTableHead p{ color:#284734 !important; } /* إذا غيّر المستخدم ألوان الثيم، نحافظ على وضوح خلايا الجدول */ .dnhTable td, .dnhTable th, .dnhHourNum, .dnhPlanet{ text-shadow:none !important; } body[data-theme="dark"] .dnhTableCard.nightMode .dnhTable td{ color:#f8fafc !important; } body[data-theme="dark"] .dnhTableCard.dayMode .dnhTable td{ color:#173321 !important; } @media(max-width:760px){ .dnhLengthBtn.night, .dnhLengthBtn.day{ border-width:2px !important; } .dnhLengthBtn span{ font-size:clamp(22px,6.4vw,32px) !important; } } /* Stage132: force day table title readable in day mode */ .dnhTableCard.dayMode .dnhTableHead h1, body .dnhTableCard.dayMode .dnhTableHead h1, body[data-theme="light"] .dnhTableCard.dayMode .dnhTableHead h1, body[data-theme="dark"] .dnhTableCard.dayMode .dnhTableHead h1{ color:#102a1a !important; -webkit-text-fill-color:#102a1a !important; text-shadow:0 1px 0 rgba(255,255,255,.65) !important; opacity:1 !important; visibility:visible !important; } .dnhTableCard.dayMode .dnhTableHead p, body .dnhTableCard.dayMode .dnhTableHead p, body[data-theme="light"] .dnhTableCard.dayMode .dnhTableHead p, body[data-theme="dark"] .dnhTableCard.dayMode .dnhTableHead p{ color:#284734 !important; -webkit-text-fill-color:#284734 !important; text-shadow:0 1px 0 rgba(255,255,255,.55) !important; opacity:1 !important; visibility:visible !important; } .dnhTableCard.dayMode{ background:linear-gradient(135deg,#eaf8ef,#fff6dc) !important; } /* Stage133: admin error details */ .adminLoadError{ color:#c62828 !important; background:rgba(198,40,40,.08) !important; border:1px solid rgba(198,40,40,.25) !important; border-radius:18px !important; line-height:1.8 !important; } .adminLoadError div{ direction:ltr; text-align:left; white-space:pre-wrap; overflow-wrap:anywhere; margin-top:8px; } .adminLoadError small{ display:block; margin-top:8px; color:var(--muted); direction:rtl; text-align:center; } /* Stage134: clearer guestbook star rating feedback */ .starRating{ background:var(--panelBg,rgba(255,255,255,.72)); border:1px solid var(--line,rgba(0,0,0,.12)); border-radius:18px; padding:8px 10px; width:fit-content; margin-inline:auto; } .starRating button{ width:42px; height:42px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; transition:transform .12s ease, background .12s ease, color .12s ease, filter .12s ease; color:#9b8b60 !important; background:transparent !important; opacity:.45; filter:grayscale(.8); } .starRating button.active{ color:#ffbf00 !important; background:rgba(255,191,0,.16) !important; opacity:1; filter:none; transform:scale(1.08); text-shadow:0 0 10px rgba(255,191,0,.55); } .starRating button:focus-visible{ outline:3px solid var(--green,#0f7a3a); outline-offset:2px; } .ratingValueText{ width:fit-content; margin:4px auto 0; padding:6px 14px; border-radius:999px; background:var(--green,#0f7a3a); color:#fff; font-weight:1000; font-size:clamp(18px,2vw,26px); line-height:1; direction:ltr; box-shadow:0 6px 16px color-mix(in srgb, var(--green,#0f7a3a), transparent 65%); } body[data-theme="dark"] .starRating{ background:#111827; border-color:rgba(255,255,255,.16); } body[data-theme="dark"] .starRating button.active{ color:#ffd65a !important; background:rgba(255,214,90,.18) !important; } /* Stage135: site owner replies in guestbook */ .siteOwnerReply{ margin-top:12px; margin-inline-start:18px; padding:12px 14px; border-radius:18px; border:2px solid var(--green,#0f7a3a); background:color-mix(in srgb, var(--green,#0f7a3a), transparent 90%); box-shadow:0 6px 18px color-mix(in srgb, var(--green,#0f7a3a), transparent 75%); text-align:right; } .siteOwnerReply strong{ display:inline-flex; align-items:center; gap:6px; padding:5px 12px; border-radius:999px; background:var(--green,#0f7a3a); color:#fff; font-weight:1000; margin-bottom:8px; } .siteOwnerReply strong::before{ content:"↳"; font-weight:1000; } .siteOwnerReply p{ margin:0; line-height:1.9; font-weight:900; } body[data-theme="dark"] .siteOwnerReply{ background:rgba(15,122,58,.18); border-color:#65e692; } .adminReplyBox{ margin-top:12px; padding:12px; border-radius:16px; background:color-mix(in srgb, var(--green,#0f7a3a), transparent 92%); border:1px solid color-mix(in srgb, var(--green,#0f7a3a), transparent 70%); } .adminReplyBox label{ font-weight:1000; color:var(--green,#0f7a3a); margin-bottom:6px; } .adminReplyBox textarea{ width:100%; min-height:90px; resize:vertical; border:1px solid var(--line); border-radius:14px; background:var(--card); color:var(--text); padding:10px 12px; font-family:inherit; font-size:16px; line-height:1.7; box-sizing:border-box; } .adminReplyExisting{ margin-top:8px; padding:10px; border-radius:12px; background:var(--card); border:1px dashed var(--green,#0f7a3a); line-height:1.8; } .adminReplyBtns{ display:flex; gap:8px; flex-wrap:wrap; margin-top:8px; } .adminReplyBtns button{ border:1px solid var(--line); background:var(--green,#0f7a3a); color:#fff; border-radius:999px; padding:8px 13px; font-family:inherit; font-weight:1000; cursor:pointer; } .adminReplyBtns button.danger{ background:#c62828; color:#fff; } body[data-theme="dark"] .adminReplyBox{ background:rgba(15,122,58,.16); border-color:rgba(101,230,146,.38); } /* Stage139: mobile home shows only centered ghuroobi analog clock */ @media(max-width:760px){ body .mainHeader, body .mainHeaderLayout, body .headerSide, body .headerClockWrap, body .headerClockBox{ box-sizing:border-box !important; } body .mainHeader{ width:100% !important; max-width:100% !important; overflow:hidden !important; } body .mainHeaderLayout{ width:100% !important; max-width:100% !important; min-width:0 !important; display:grid !important; grid-template-columns:1fr !important; grid-template-areas: "ghClock" "center" !important; justify-items:center !important; align-items:center !important; gap:10px !important; overflow:hidden !important; padding-inline:0 !important; } /* show ghuroobi clock only */ body .headerSide.rightSide{ grid-area:ghClock !important; display:block !important; width:100% !important; max-width:100% !important; min-width:0 !important; margin:0 auto !important; padding:0 !important; justify-self:center !important; overflow:visible !important; } body .headerSide.leftSide{ display:none !important; } body .headerCenter{ grid-area:center !important; width:100% !important; max-width:100% !important; min-width:0 !important; overflow:hidden !important; } body .headerSide.rightSide .headerClockWrap{ width:min(100%, 340px) !important; max-width:calc(100vw - 20px) !important; min-width:0 !important; margin:0 auto !important; padding:10px 8px !important; display:flex !important; flex-direction:column !important; align-items:center !important; justify-content:center !important; overflow:visible !important; } body .headerSide.rightSide .headerClockTitle{ text-align:center !important; width:100% !important; margin:0 auto 6px !important; font-size:clamp(20px,5.6vw,28px) !important; line-height:1.1 !important; } body .headerSide.rightSide .headerClockBox, body .headerSide.rightSide .headerClockBox.gh{ width:100% !important; max-width:320px !important; min-width:0 !important; aspect-ratio:1 / 1 !important; margin:0 auto !important; padding:0 !important; display:flex !important; align-items:center !important; justify-content:center !important; overflow:visible !important; transform:none !important; position:relative !important; } body canvas#ghuroobiClock{ display:block !important; box-sizing:border-box !important; width:min(82vw, 300px) !important; height:min(82vw, 300px) !important; max-width:300px !important; max-height:300px !important; min-width:230px !important; min-height:230px !important; aspect-ratio:1 / 1 !important; margin:0 auto !important; padding:0 !important; position:static !important; transform:none !important; object-fit:contain !important; flex:0 0 auto !important; } body .headerSide.rightSide .miniDigital{ width:100% !important; max-width:300px !important; margin:6px auto 0 !important; display:flex !important; align-items:center !important; justify-content:center !important; text-align:center !important; } body .headerSide.rightSide .timeBox{ justify-content:center !important; } /* Never force solar canvas size on mobile because solar clock is hidden */ body canvas#solarClock{ display:none !important; } } @media(max-width:380px){ body .headerSide.rightSide .headerClockWrap{ width:min(100%, 318px) !important; max-width:calc(100vw - 14px) !important; padding-inline:6px !important; } body .headerSide.rightSide .headerClockBox, body .headerSide.rightSide .headerClockBox.gh{ max-width:292px !important; } body canvas#ghuroobiClock{ width:min(84vw, 282px) !important; height:min(84vw, 282px) !important; max-width:282px !important; max-height:282px !important; min-width:218px !important; min-height:218px !important; } } /* Stage141: mobile ghuroobi and zawali digital labels */ .mobileSolarDigital{ display:none; } .mobileClockLabel{ display:none; } @media(max-width:760px){ body .headerSide.rightSide .ghMobileDigital, body .headerSide.rightSide .mobileSolarDigital{ width:min(100%, 310px) !important; max-width:calc(100vw - 24px) !important; margin:5px auto 0 !important; padding:0 !important; display:flex !important; align-items:center !important; justify-content:center !important; text-align:center !important; } body .headerSide.rightSide .mobileClockLine{ width:100% !important; display:flex !important; flex-direction:row !important; align-items:center !important; justify-content:center !important; gap:7px !important; direction:ltr !important; background:var(--panelBg,rgba(255,255,255,.78)) !important; border:1px solid var(--line,rgba(0,0,0,.12)) !important; border-radius:999px !important; padding:7px 12px !important; box-shadow:0 5px 14px rgba(0,0,0,.07) !important; } body .headerSide.rightSide .mobileClockLine .miniMain{ font-size:clamp(25px,7vw,36px) !important; line-height:1 !important; font-weight:1000 !important; } body .headerSide.rightSide .mobileClockLine .secondsMini{ font-size:clamp(16px,4.4vw,22px) !important; line-height:1 !important; font-weight:1000 !important; opacity:.9 !important; } body .headerSide.rightSide .mobileClockLabel{ display:inline-flex !important; align-items:center !important; justify-content:center !important; direction:rtl !important; padding:5px 9px !important; border-radius:999px !important; background:var(--green,#0f7a3a) !important; color:#fff !important; font-size:clamp(14px,4vw,18px) !important; font-weight:1000 !important; line-height:1 !important; white-space:nowrap !important; } body .headerSide.rightSide .mobileSolarDigital .mobileClockLine{ background:color-mix(in srgb, var(--green,#0f7a3a), transparent 90%) !important; } body .headerSide.rightSide .mobileSolarDigital .mobileClockLabel{ background:#2f6f91 !important; } body .headerSide.rightSide .phase{ display:none !important; } body[data-theme="dark"] .headerSide.rightSide .mobileClockLine{ background:#111827 !important; border-color:rgba(255,255,255,.16) !important; color:#f8fafc !important; } body[data-theme="dark"] .headerSide.rightSide .mobileSolarDigital .mobileClockLine{ background:#172033 !important; } } /* Stage143: added zawali digital row is mobile-only */ .mobileSolarDigital{ display:none !important; } @media(min-width:761px){ .mobileSolarDigital, #mobileSolarTimeMirror, #mobileSolarSecMirror{ display:none !important; } } @media(max-width:760px){ .headerSide.rightSide .mobileSolarDigital{ display:flex !important; } } /* Stage144: Fakkak page */ .fakkakPage{ padding-block:18px 36px; } .fakkakCard{ max-width:640px; margin:18px auto; text-align:center; padding:28px 22px; border-radius:24px; } .fakkakBadge{ display:inline-flex; align-items:center; justify-content:center; margin-bottom:12px; padding:8px 16px; border-radius:999px; background:color-mix(in srgb, var(--green,#0f7a3a), transparent 88%); color:var(--green,#0f7a3a); font-weight:1000; border:1px solid color-mix(in srgb, var(--green,#0f7a3a), transparent 70%); } .fakkakCard h1{ margin:8px 0 10px; font-size:clamp(32px,4vw,52px); line-height:1.1; font-weight:1000; color:var(--smart-strong,var(--text,#1f160f)); } .fakkakSubtitle{ margin:0 auto 20px; max-width:520px; color:var(--muted); line-height:1.8; font-weight:850; } .fakkakSilverPrice{ margin:18px auto 14px; font-size:clamp(18px,2vw,26px); font-weight:1000; color:var(--green,#0f7a3a); } .fakkakResults{ display:grid; grid-template-columns:1fr; gap:12px; margin-block:14px; } .fakkakResultBox{ border:1px solid color-mix(in srgb, var(--blue,#2876a8), transparent 78%); background:color-mix(in srgb, var(--blue,#2876a8), transparent 92%); border-radius:20px; padding:18px 14px; box-shadow:0 8px 22px rgba(0,0,0,.06); } .fakkakLabel{ font-size:clamp(22px,2.3vw,32px); font-weight:1000; margin-bottom:10px; color:var(--smart-strong,var(--text,#1f160f)); } .fakkakValue{ direction:rtl; font-size:clamp(26px,3vw,42px); line-height:1.2; font-weight:1000; color:var(--blue,#2876a8); } .fakkakReloadBtn{ margin-top:10px; border:0; border-radius:999px; padding:12px 22px; background:var(--green,#0f7a3a); color:#fff; font-family:inherit; font-weight:1000; font-size:17px; cursor:pointer; box-shadow:0 8px 18px color-mix(in srgb, var(--green,#0f7a3a), transparent 68%); } .fakkakReloadBtn:disabled{ opacity:.7; cursor:wait; } .fakkakStatus{ min-height:24px; margin-top:14px; color:var(--muted); font-weight:900; } .fakkakStatus.error{ color:#c62828; } body[data-theme="dark"] .fakkakResultBox{ background:rgba(40,118,168,.16); border-color:rgba(255,255,255,.14); } body[data-theme="dark"] .fakkakValue{ color:#93c5fd; } @media(max-width:760px){ .fakkakPage{ padding-inline:6px; } .fakkakCard{ margin:12px auto; padding:22px 14px; } } /* Stage156: Moon mansions rendered by app.js inside stable clocks area */ #moonMansionsDock.moonMansionsDock{ display:block !important; visibility:visible !important; opacity:1 !important; width:100% !important; max-width:100% !important; margin:8px auto 0 !important; padding:7px 6px !important; border-radius:16px !important; background:var(--panelBg,rgba(255,255,255,.72)) !important; border:1px solid var(--line,rgba(0,0,0,.12)) !important; box-shadow:0 6px 18px rgba(0,0,0,.06) !important; overflow:visible !important; position:relative !important; z-index:80 !important; } #moonMansionsDockGrid.moonMansionsDockGrid{ display:grid !important; grid-template-columns:repeat(14,minmax(0,1fr)) !important; gap:5px !important; width:100% !important; max-width:100% !important; overflow:visible !important; } #moonMansionsDockGrid .moonDockChip{ --moonDockColor:var(--green,#0f7a3a); display:inline-flex !important; align-items:center !important; justify-content:center !important; min-width:0 !important; min-height:31px !important; border:1px solid color-mix(in srgb, var(--moonDockColor), transparent 56%) !important; border-radius:11px !important; padding:6px 2px !important; background:color-mix(in srgb, var(--moonDockColor), transparent 88%) !important; color:var(--smart-strong,var(--text,#1f160f)) !important; font-family:inherit !important; font-size:clamp(10.5px,.82vw,14px) !important; line-height:1.12 !important; font-weight:1000 !important; cursor:pointer !important; text-align:center !important; box-shadow:0 3px 9px color-mix(in srgb, var(--moonDockColor), transparent 82%) !important; } #moonMansionsDockGrid .moonDockChip.isCurrent{ background:var(--moonDockColor) !important; color:#fff !important; box-shadow:0 0 0 2px #fff inset, 0 0 18px color-mix(in srgb, var(--moonDockColor), transparent 52%) !important; } .moonDockOverlay{ position:fixed !important; inset:0 !important; z-index:9600 !important; display:none !important; align-items:center !important; justify-content:center !important; padding:16px !important; background:rgba(0,0,0,.62) !important; backdrop-filter:blur(4px) !important; } .moonDockOverlay.open{ display:flex !important; } .moonDockModal{ position:relative !important; width:min(760px,96vw) !important; max-height:88vh !important; overflow:auto !important; background:var(--card,#fff) !important; color:var(--text,#1f160f) !important; border:1px solid var(--line,rgba(0,0,0,.12)) !important; border-radius:24px !important; padding:20px !important; box-shadow:0 24px 80px rgba(0,0,0,.35) !important; } .moonDockClose{ position:absolute !important; top:10px !important; left:12px !important; border:0 !important; width:38px !important; height:38px !important; border-radius:50% !important; background:#c62828 !important; color:#fff !important; font-size:26px !important; line-height:1 !important; cursor:pointer !important; } .moonDockDetailHeader{ --moonDockColor:var(--green,#0f7a3a); text-align:center !important; border-bottom:2px dashed var(--moonDockColor) !important; margin-bottom:14px !important; padding-bottom:12px !important; } .moonDockDetailHeader h2{ margin:0 !important; font-size:clamp(30px,4vw,48px) !important; color:var(--moonDockColor) !important; font-weight:1000 !important; } .moonDockDetailHeader p{ margin:8px 0 0 !important; color:var(--muted) !important; font-weight:1000 !important; } .moonDockAlt{ display:block !important; margin-top:4px !important; color:var(--muted) !important; font-size:.55em !important; font-weight:850 !important; } .moonDockDetailGrid{ display:grid !important; grid-template-columns:repeat(3,minmax(0,1fr)) !important; gap:8px !important; margin:12px 0 !important; } .moonDockDetailGrid div{ background:var(--card,rgba(255,255,255,.9)) !important; border:1px solid var(--line,rgba(0,0,0,.12)) !important; border-radius:16px !important; padding:10px 12px !important; line-height:1.7 !important; font-weight:900 !important; } .moonDockZodiacList{ margin:10px 0 !important; padding:10px !important; border-radius:16px !important; background:color-mix(in srgb,var(--green,#0f7a3a),transparent 92%) !important; border:1px solid color-mix(in srgb,var(--green,#0f7a3a),transparent 75%) !important; line-height:1.8 !important; text-align:center !important; } .moonDockZodiacItem{ display:inline-flex !important; margin:2px !important; padding:5px 9px !important; border-radius:999px !important; background:var(--card,rgba(255,255,255,.86)) !important; border:1px solid var(--line,rgba(0,0,0,.10)) !important; font-weight:900 !important; } .moonDockAstroBox{ background:color-mix(in srgb,var(--green,#0f7a3a),transparent 94%) !important; border:1px solid color-mix(in srgb,var(--green,#0f7a3a),transparent 75%) !important; border-radius:18px !important; padding:12px !important; line-height:1.9 !important; } .moonDockAstroBox p{ margin:0 0 8px !important; } .moonDockWeather{ margin-top:12px !important; padding:12px !important; border-radius:16px !important; background:rgba(198,40,40,.07) !important; border-right:5px solid #c62828 !important; color:#c62828 !important; line-height:1.9 !important; font-weight:1000 !important; } body[data-theme="dark"] #moonMansionsDock.moonMansionsDock{ background:#111827 !important; border-color:rgba(255,255,255,.16) !important; } body[data-theme="dark"] #moonMansionsDockGrid .moonDockChip{ color:#f8fafc !important; } body[data-theme="dark"] #moonMansionsDockGrid .moonDockChip.isCurrent{ color:#fff !important; } body[data-theme="dark"] .moonDockModal{ background:#111827 !important; color:#f8fafc !important; border-color:rgba(255,255,255,.15) !important; } @media(max-width:760px){ #moonMansionsDock.moonMansionsDock{ width:100% !important; max-width:100% !important; margin-top:8px !important; padding:8px 6px !important; } #moonMansionsDockGrid.moonMansionsDockGrid{ grid-template-columns:repeat(3,minmax(0,1fr)) !important; gap:6px !important; } #moonMansionsDockGrid .moonDockChip{ display:none !important; } #moonMansionsDockGrid .moonDockChip.mobileKeep{ display:flex !important; flex-direction:column !important; min-height:58px !important; padding:7px 4px !important; font-size:clamp(15px,4.2vw,19px) !important; gap:4px !important; } #moonMansionsDockGrid .moonDockChip.mobileKeep::before{ content:attr(data-mobile-label); display:block; font-size:11px; line-height:1; opacity:.82; font-weight:1000; } .moonDockDetailGrid{ grid-template-columns:1fr !important; } .moonDockModal{ width:96vw !important; max-height:86vh !important; padding:18px 12px !important; } } /* Stage157: stretch moon mansions across full analog clocks width */ .mainHeaderLayout > #moonMansionsDock.moonMansionsDock{ grid-column:1 / -1 !important; grid-row:auto !important; justify-self:stretch !important; align-self:stretch !important; width:100% !important; max-width:100% !important; box-sizing:border-box !important; margin:8px auto 0 !important; } .mainHeaderLayout > #moonMansionsDock #moonMansionsDockGrid{ width:100% !important; max-width:100% !important; } @media(max-width:760px){ .mainHeaderLayout > #moonMansionsDock.moonMansionsDock{ grid-area:auto !important; grid-column:1 / -1 !important; width:100% !important; max-width:100% !important; margin-top:8px !important; } } /* Stage158: moon mansions title */ .moonMansionsDockTitle{ margin:0 0 7px !important; padding:0 !important; text-align:center !important; font-size:clamp(20px,2.1vw,32px) !important; line-height:1.15 !important; font-weight:1000 !important; color:var(--smart-strong,var(--text,#1f160f)) !important; letter-spacing:0 !important; } body[data-theme="dark"] .moonMansionsDockTitle{ color:#f8fafc !important; } @media(max-width:760px){ .moonMansionsDockTitle{ font-size:clamp(18px,5vw,24px) !important; margin-bottom:7px !important; } } /* Stage159: traditional moon mansion number and direction */ .moonDockInfoRow{ display:grid !important; grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:8px !important; margin:12px 0 !important; } .moonDockInfoRow div{ background:color-mix(in srgb, var(--moonDockColor,var(--green,#0f7a3a)), transparent 90%) !important; border:1px solid color-mix(in srgb, var(--moonDockColor,var(--green,#0f7a3a)), transparent 68%) !important; border-radius:16px !important; padding:10px 12px !important; line-height:1.7 !important; font-weight:1000 !important; text-align:center !important; } body[data-theme="dark"] .moonDockInfoRow div{ background:rgba(255,255,255,.07) !important; border-color:rgba(255,255,255,.15) !important; } @media(max-width:760px){ .moonDockInfoRow{ grid-template-columns:1fr !important; } } /* Stage160: keep menus above moon mansions and polish moon modal */ .globalHeader, .siteHeader, .topbar, .headerGlobal, .ghHeader, .navWrap, .menuWrap, .dropdown, .dropdownMenu, .menuDropdown, .globalMenu, #globalMenu, #menuDropdown, [data-global-header], [data-global-header] *{ z-index:12000 !important; } #moonMansionsDock.moonMansionsDock{ z-index:10 !important; } .moonDockOverlay{ z-index:30000 !important; } .moonDockModal{ width:min(840px,96vw) !important; border-radius:28px !important; padding:0 !important; overflow:hidden !important; background: radial-gradient(circle at top right, color-mix(in srgb,var(--green,#0f7a3a),transparent 86%), transparent 34%), var(--card,#fff) !important; } .moonDockClose{ top:14px !important; left:14px !important; width:42px !important; height:42px !important; box-shadow:0 8px 18px rgba(198,40,40,.28) !important; z-index:2 !important; } .moonDockDetailHeader{ margin:0 !important; padding:26px 60px 20px 22px !important; border-bottom:0 !important; background: linear-gradient(135deg, color-mix(in srgb,var(--moonDockColor,var(--green,#0f7a3a)),transparent 80%), color-mix(in srgb,var(--moonDockColor,var(--green,#0f7a3a)),transparent 94%) ) !important; } .moonDockDetailHeader h2{ line-height:1.15 !important; margin-bottom:8px !important; } .moonDockDetailHeader p{ display:inline-flex !important; align-items:center !important; justify-content:center !important; padding:6px 14px !important; border-radius:999px !important; background:var(--moonDockColor,var(--green,#0f7a3a)) !important; color:#fff !important; margin:8px 0 0 !important; } .moonDockInfoRow, .moonDockDetailGrid, .moonDockZodiacList, .moonDockTextGrid, .moonDockWeather{ margin-left:18px !important; margin-right:18px !important; } .moonDockInfoRow{ margin-top:18px !important; } .moonDockInfoRow div, .moonDockDetailGrid div{ box-shadow:0 4px 14px rgba(0,0,0,.05) !important; } .moonDockSection, .moonDockTextCard, .moonDockWeather{ border-radius:20px !important; border:1px solid color-mix(in srgb,var(--moonDockColor,var(--green,#0f7a3a)),transparent 76%) !important; background:color-mix(in srgb,var(--moonDockColor,var(--green,#0f7a3a)),transparent 95%) !important; } .moonDockSection h3, .moonDockTextCard h3, .moonDockWeather h3{ margin:0 0 10px !important; font-size:clamp(18px,2vw,24px) !important; line-height:1.25 !important; font-weight:1000 !important; color:var(--moonDockColor,var(--green,#0f7a3a)) !important; text-align:center !important; } .moonDockZodiacList{ padding:14px !important; margin-top:12px !important; margin-bottom:12px !important; } .moonDockZodiacList strong{ display:none !important; } .moonDockTextGrid{ display:grid !important; grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:10px !important; margin-top:12px !important; margin-bottom:12px !important; } .moonDockTextCard{ padding:14px !important; min-height:112px !important; line-height:1.9 !important; } .moonDockTextCard.warning{ border-color:rgba(198,40,40,.28) !important; background:rgba(198,40,40,.06) !important; } .moonDockTextCard.warning h3{ color:#c62828 !important; } .moonDockTextCard p, .moonDockWeather p{ margin:0 0 7px !important; font-weight:900 !important; color:var(--smart-strong,var(--text,#1f160f)) !important; } .moonDockTextCard p:last-child, .moonDockWeather p:last-child{ margin-bottom:0 !important; } .moonDockWeather{ padding:16px !important; margin-top:12px !important; margin-bottom:18px !important; border-right:6px solid var(--moonDockColor,var(--green,#0f7a3a)) !important; color:inherit !important; } body[data-theme="dark"] .moonDockModal{ background: radial-gradient(circle at top right, color-mix(in srgb,var(--moonDockColor,var(--green,#0f7a3a)),transparent 84%), transparent 34%), #111827 !important; } body[data-theme="dark"] .moonDockSection, body[data-theme="dark"] .moonDockTextCard, body[data-theme="dark"] .moonDockWeather, body[data-theme="dark"] .moonDockInfoRow div, body[data-theme="dark"] .moonDockDetailGrid div{ background:rgba(255,255,255,.06) !important; border-color:rgba(255,255,255,.14) !important; } body[data-theme="dark"] .moonDockTextCard p, body[data-theme="dark"] .moonDockWeather p{ color:#f8fafc !important; } @media(max-width:760px){ .moonDockModal{ width:96vw !important; max-height:88vh !important; } .moonDockDetailHeader{ padding:24px 54px 18px 14px !important; } .moonDockInfoRow, .moonDockDetailGrid, .moonDockZodiacList, .moonDockTextGrid, .moonDockWeather{ margin-left:10px !important; margin-right:10px !important; } .moonDockTextGrid{ grid-template-columns:1fr !important; } .moonDockTextCard{ min-height:auto !important; } } /* Stage161: compact moon mansion modal */ .moonDockModal{ width:min(620px,94vw) !important; max-height:82vh !important; border-radius:18px !important; padding:0 !important; } .moonDockClose{ top:9px !important; left:9px !important; width:32px !important; height:32px !important; font-size:22px !important; } .moonDockDetailHeader{ padding:16px 48px 12px 14px !important; } .moonDockDetailHeader h2{ font-size:clamp(24px,3vw,34px) !important; margin-bottom:4px !important; } .moonDockDetailHeader p{ padding:4px 10px !important; font-size:14px !important; margin-top:4px !important; } .moonDockInfoRow, .moonDockDetailGrid, .moonDockZodiacList, .moonDockTextGrid, .moonDockWeather{ margin-left:10px !important; margin-right:10px !important; } .moonDockInfoRow{ gap:6px !important; margin-top:10px !important; margin-bottom:8px !important; } .moonDockInfoRow div, .moonDockDetailGrid div{ border-radius:12px !important; padding:7px 8px !important; line-height:1.45 !important; font-size:14px !important; } .moonDockDetailGrid{ gap:6px !important; margin-top:8px !important; margin-bottom:8px !important; } .moonDockZodiacList{ padding:8px !important; margin-top:8px !important; margin-bottom:8px !important; border-radius:12px !important; } .moonDockSection h3, .moonDockTextCard h3, .moonDockWeather h3{ font-size:clamp(16px,1.7vw,20px) !important; margin-bottom:6px !important; } .moonDockZodiacItem{ margin:1px !important; padding:4px 7px !important; font-size:13px !important; } .moonDockTextGrid{ grid-template-columns:1fr !important; gap:7px !important; margin-top:8px !important; margin-bottom:8px !important; } .moonDockTextCard{ min-height:0 !important; padding:9px 10px !important; border-radius:12px !important; line-height:1.55 !important; } .moonDockTextCard p, .moonDockWeather p{ margin:0 0 4px !important; font-size:14px !important; line-height:1.6 !important; font-weight:850 !important; } .moonDockWeather{ padding:10px !important; margin-top:8px !important; margin-bottom:10px !important; border-radius:12px !important; border-right-width:4px !important; } .moonDockOverlay{ padding:10px !important; } @media(max-width:760px){ .moonDockModal{ width:94vw !important; max-height:84vh !important; border-radius:16px !important; } .moonDockDetailHeader{ padding:14px 42px 10px 10px !important; } .moonDockInfoRow, .moonDockDetailGrid, .moonDockZodiacList, .moonDockTextGrid, .moonDockWeather{ margin-left:8px !important; margin-right:8px !important; } .moonDockInfoRow{ grid-template-columns:1fr !important; } .moonDockDetailGrid{ grid-template-columns:1fr !important; } } /* Stage162: compact one-line moon mansion modal rows */ .moonDockModal{ width:min(540px,92vw) !important; max-height:min(76vh,620px) !important; border-radius:16px !important; font-family:"Tahoma","Arial","Noto Naskh Arabic",sans-serif !important; } .moonDockDetailHeader{ padding:12px 44px 9px 12px !important; } .moonDockDetailHeader h2{ font-family:"Tahoma","Arial","Noto Naskh Arabic",sans-serif !important; font-size:clamp(22px,2.6vw,30px) !important; margin:0 0 3px !important; } .moonDockDetailHeader p{ font-size:13px !important; padding:3px 9px !important; } .moonDockClose{ width:30px !important; height:30px !important; top:8px !important; left:8px !important; font-size:20px !important; } .moonDockLinesWrap{ display:flex !important; flex-direction:column !important; gap:5px !important; padding:8px 10px 10px !important; } .moonDockLine{ display:flex !important; align-items:flex-start !important; gap:8px !important; border:1px solid color-mix(in srgb,var(--moonDockColor,var(--green,#0f7a3a)),transparent 68%) !important; background:color-mix(in srgb,var(--moonDockColor,var(--green,#0f7a3a)),transparent 96%) !important; border-radius:10px !important; padding:6px 7px !important; min-height:30px !important; line-height:1.45 !important; box-shadow:none !important; } .moonDockLine.warning{ border-color:rgba(198,40,40,.35) !important; background:rgba(198,40,40,.055) !important; } .moonDockLine.description{ border-right:4px solid var(--moonDockColor,var(--green,#0f7a3a)) !important; } .moonDockLineTitle{ flex:0 0 auto !important; min-width:116px !important; max-width:136px !important; display:inline-flex !important; justify-content:center !important; align-items:center !important; padding:4px 7px !important; border-radius:8px !important; background:var(--moonDockColor,var(--green,#0f7a3a)) !important; color:#fff !important; font-size:13px !important; font-weight:1000 !important; white-space:nowrap !important; line-height:1.1 !important; } .moonDockLineTitle:empty{ visibility:hidden !important; } .moonDockLine.warning .moonDockLineTitle{ background:#c62828 !important; } .moonDockLineValue{ flex:1 1 auto !important; color:var(--smart-strong,var(--text,#1f160f)) !important; font-size:14px !important; font-weight:850 !important; text-align:right !important; line-height:1.55 !important; } .moonDockLineValue .moonDockZodiacItem{ margin:0 1px 2px !important; padding:3px 6px !important; font-size:12px !important; border-radius:8px !important; } body[data-theme="dark"] .moonDockLine{ background:rgba(255,255,255,.055) !important; border-color:rgba(255,255,255,.13) !important; } body[data-theme="dark"] .moonDockLineValue{ color:#f8fafc !important; } @media(max-width:760px){ .moonDockModal{ width:92vw !important; max-height:78vh !important; border-radius:14px !important; } .moonDockLinesWrap{ padding:7px 8px 9px !important; gap:5px !important; } .moonDockLine{ gap:6px !important; padding:6px !important; } .moonDockLineTitle{ min-width:94px !important; max-width:108px !important; font-size:12px !important; padding:4px 5px !important; } .moonDockLineValue{ font-size:13px !important; } } /* Stage163: integrated Zakat calculator page */ .zakatPage{ padding-block:18px 38px; } .zakatHero{ text-align:center; margin:18px auto 14px; border-radius:24px; } .zakatHero h1{ margin:6px 0 10px; font-size:clamp(34px,4.2vw,58px); line-height:1.1; font-weight:1000; color:var(--smart-strong,var(--text,#1f160f)); } .zakatHero p:not(.eyebrow){ max-width:760px; margin:0 auto; line-height:1.9; color:var(--muted); font-weight:850; } .zakatTypeGrid{ width:min(100%,980px); margin:0 auto 14px; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; } .zakatTypeBtn, .zakatSubBtn{ border:1px solid var(--line,rgba(0,0,0,.12)); background:var(--panelBg,rgba(255,255,255,.9)); color:var(--smart-strong,var(--text,#1f160f)); border-radius:18px; padding:14px 8px; font-family:inherit; font-weight:1000; cursor:pointer; box-shadow:0 6px 16px rgba(0,0,0,.06); } .zakatTypeBtn span, .zakatSubBtn span{ display:block; font-size:26px; margin-bottom:5px; } .zakatTypeBtn.active, .zakatSubBtn.active{ background:color-mix(in srgb,var(--green,#0f7a3a),transparent 86%); border-color:color-mix(in srgb,var(--green,#0f7a3a),transparent 55%); color:var(--green,#0f7a3a); box-shadow:0 0 0 2px color-mix(in srgb,var(--green,#0f7a3a),transparent 80%) inset, 0 8px 18px color-mix(in srgb,var(--green,#0f7a3a),transparent 82%); } .zakatNote{ margin:0 auto 14px; border-radius:22px; padding:16px; } .zakatNote h2{ margin:0 0 10px; text-align:center; font-size:clamp(22px,2.5vw,34px); color:var(--gold,#b78319); font-weight:1000; } .zakatConditions{ display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:8px; } .zakatConditions div{ background:color-mix(in srgb,var(--gold,#b78319),transparent 90%); color:var(--gold,#b78319); border:1px solid color-mix(in srgb,var(--gold,#b78319),transparent 70%); border-radius:14px; padding:9px 10px; text-align:center; font-weight:1000; line-height:1.6; } .zakatLayout{ width:min(100%,980px); margin:0 auto; display:grid; grid-template-columns:1fr 1.12fr; gap:14px; align-items:start; } .zakatInputs, .zakatResultCard{ border-radius:24px; padding:18px; } .zakatInputGroup{ display:none; } .zakatInputGroup.active{ display:block; } .zakatInputs label{ display:block; margin:0 0 7px; color:var(--muted); font-weight:1000; line-height:1.4; } .zakatInput{ width:100%; min-height:50px; padding:12px 14px; margin-bottom:14px; border-radius:15px; border:1px solid var(--line,rgba(0,0,0,.12)); background:var(--card,#fff); color:var(--smart-strong,var(--text,#1f160f)); font-family:inherit; font-size:19px; font-weight:900; text-align:center; } .zakatInput:focus{ outline:none; border-color:color-mix(in srgb,var(--green,#0f7a3a),transparent 40%); box-shadow:0 0 0 4px color-mix(in srgb,var(--green,#0f7a3a),transparent 88%); } .zakatSubSelector{ display:flex; gap:8px; margin-bottom:14px; } .zakatSubBtn{ flex:1; padding:10px 8px; } .zakatTwoCols{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; } .zakatPriceStatus{ min-height:22px; margin:-4px 0 8px; text-align:center; color:var(--gold,#b78319); font-weight:900; line-height:1.6; } .zakatNisabInfo{ display:none; background:color-mix(in srgb,var(--green,#0f7a3a),transparent 90%); border:1px solid color-mix(in srgb,var(--green,#0f7a3a),transparent 72%); border-radius:14px; padding:10px; text-align:center; line-height:1.7; font-weight:900; color:var(--green,#0f7a3a); } .zakatActions{ display:flex; gap:10px; margin-top:8px; } .zakatActions button{ flex:1; border:0; border-radius:16px; padding:13px 14px; font-family:inherit; font-weight:1000; cursor:pointer; } .zakatCalcBtn{ background:var(--green,#0f7a3a); color:#fff; box-shadow:0 8px 18px color-mix(in srgb,var(--green,#0f7a3a),transparent 75%); } .zakatResetBtn{ background:var(--panelBg,rgba(255,255,255,.9)); color:var(--smart-strong,var(--text,#1f160f)); border:1px solid var(--line,rgba(0,0,0,.12)) !important; } .zakatDueBox{ background:color-mix(in srgb,var(--green,#0f7a3a),transparent 90%); border:1px solid color-mix(in srgb,var(--green,#0f7a3a),transparent 70%); border-radius:20px; padding:18px 14px; text-align:center; margin-bottom:12px; } .zakatDueHeader{ color:var(--muted); font-weight:1000; margin-bottom:8px; } .zakatDueText{ color:var(--green,#0f7a3a); font-size:clamp(26px,3vw,40px); line-height:1.35; font-weight:1000; } .zakatDescList{ list-style:none; padding:0; margin:0; } .zakatDescList li, .zakatPriceCard{ background:var(--panelBg,rgba(255,255,255,.9)); border:1px solid var(--line,rgba(0,0,0,.12)); border-right:5px solid var(--green,#0f7a3a); border-radius:16px; padding:12px; margin-bottom:8px; line-height:1.8; font-weight:850; } .zakatResultPrices{ display:none; margin-top:10px; } .zakatResultPrices.active{ display:block; } .zakatPriceCard{ border-right-color:var(--gold,#b78319); } .zakatPriceCard h4{ margin:0 0 6px; color:var(--gold,#b78319); font-size:17px; font-weight:1000; } .zakatPriceCard p{ margin:8px 0 0; color:var(--muted); line-height:1.7; } .zakatPrintBtn{ display:none; width:100%; margin-top:10px; border:0; border-radius:16px; padding:13px 14px; background:#2563eb; color:#fff; font-family:inherit; font-weight:1000; cursor:pointer; } .zakatPage .print-header{ display:none; } body[data-theme="dark"] .zakatInput, body[data-theme="dark"] .zakatTypeBtn, body[data-theme="dark"] .zakatSubBtn, body[data-theme="dark"] .zakatResetBtn, body[data-theme="dark"] .zakatDescList li, body[data-theme="dark"] .zakatPriceCard{ background:#111827; border-color:rgba(255,255,255,.14); } @media(max-width:760px){ .zakatPage{ padding-inline:6px; } .zakatTypeGrid{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; } .zakatLayout{ grid-template-columns:1fr; gap:10px; } .zakatTwoCols{ grid-template-columns:1fr; } .zakatSubSelector{ gap:6px; } .zakatTypeBtn, .zakatSubBtn{ border-radius:15px; padding:10px 6px; } .zakatInputs, .zakatResultCard{ border-radius:20px; padding:14px; } } @media print{ body{ background:#fff !important; color:#000 !important; } [data-global-header], .zakatHero, .zakatTypeGrid, .zakatNote, .zakatInputs, footer, .zakatPrintBtn{ display:none !important; } .zakatLayout{ display:block !important; width:100% !important; } .zakatResultCard{ box-shadow:none !important; border:0 !important; background:#fff !important; padding:0 !important; } .zakatPage .print-header{ display:block !important; text-align:center; border:2px solid #000; padding:12px; margin-bottom:14px; } .zakatDueBox, .zakatDescList li, .zakatPriceCard{ background:#fff !important; border:1px solid #000 !important; color:#000 !important; box-shadow:none !important; } .zakatDueText, .zakatDueHeader, .zakatPriceCard h4{ color:#000 !important; } } /* Stage164: redesigned Zakat page */ .zakatPage{ --zakat-green: var(--green,#0f7a3a); --zakat-gold: var(--gold,#b78319); padding-block:18px 42px; } .zakatHero{ position:relative; overflow:hidden; text-align:center; margin:18px auto 16px; border-radius:30px; padding:28px 22px !important; background: radial-gradient(circle at top right, color-mix(in srgb,var(--zakat-gold),transparent 82%), transparent 34%), radial-gradient(circle at bottom left, color-mix(in srgb,var(--zakat-green),transparent 84%), transparent 38%), var(--panelBg,rgba(255,255,255,.92)) !important; border:1px solid color-mix(in srgb,var(--zakat-green),transparent 78%) !important; box-shadow:0 18px 40px rgba(0,0,0,.08) !important; } .zakatHero::before{ content:""; position:absolute; inset:auto -80px -120px auto; width:240px; height:240px; border-radius:999px; background:color-mix(in srgb,var(--zakat-green),transparent 88%); pointer-events:none; } .zakatHero h1{ position:relative; margin:0 0 12px; font-size:clamp(30px,4vw,54px); line-height:1.25; font-weight:1000; color:var(--smart-strong,var(--text,#1f160f)); } .zakatHero p:not(.eyebrow){ position:relative; max-width:760px; margin:0 auto; line-height:1.9; color:var(--muted); font-weight:900; font-size:clamp(15px,1.5vw,19px); } .zakatTypeGrid{ width:min(100%,980px); margin:0 auto 14px; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; } .zakatTypeBtn{ min-height:102px; border:1px solid color-mix(in srgb,var(--zakat-green),transparent 78%); background: linear-gradient(180deg, rgba(255,255,255,.35), transparent), var(--panelBg,rgba(255,255,255,.9)); color:var(--smart-strong,var(--text,#1f160f)); border-radius:24px; padding:16px 10px 14px; font-family:inherit; font-weight:1000; cursor:pointer; box-shadow:0 10px 24px rgba(0,0,0,.07); position:relative; overflow:hidden; } .zakatTypeBtn::after{ content:""; position:absolute; inset:auto 12px 8px 12px; height:4px; border-radius:999px; background:color-mix(in srgb,var(--zakat-green),transparent 80%); } .zakatTypeBtn span{ display:block; font-size:34px; margin-bottom:7px; filter:drop-shadow(0 4px 8px rgba(0,0,0,.10)); } .zakatTypeBtn.active{ transform:translateY(-2px); background: radial-gradient(circle at top, color-mix(in srgb,var(--zakat-green),transparent 82%), transparent 62%), var(--panelBg,rgba(255,255,255,.96)); border-color:color-mix(in srgb,var(--zakat-green),transparent 42%); color:var(--zakat-green); box-shadow:0 0 0 2px color-mix(in srgb,var(--zakat-green),transparent 82%) inset, 0 14px 28px color-mix(in srgb,var(--zakat-green),transparent 78%); } .zakatTypeBtn.active::after{ background:var(--zakat-green); } .zakatNote{ margin:0 auto 16px; border-radius:24px; padding:18px !important; border-color:color-mix(in srgb,var(--zakat-gold),transparent 76%) !important; background: linear-gradient(135deg, color-mix(in srgb,var(--zakat-gold),transparent 92%), transparent), var(--panelBg,rgba(255,255,255,.9)) !important; } .zakatNote h2{ margin:0 0 12px; text-align:center; font-size:clamp(22px,2.6vw,36px); color:var(--zakat-gold); font-weight:1000; } .zakatConditions{ display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:10px; } .zakatConditions div{ background:color-mix(in srgb,var(--zakat-gold),transparent 91%); color:var(--zakat-gold); border:1px solid color-mix(in srgb,var(--zakat-gold),transparent 68%); border-radius:18px; padding:11px 12px; text-align:center; font-weight:1000; line-height:1.65; box-shadow:inset 0 1px 0 rgba(255,255,255,.25); } .zakatLayout{ width:min(100%,980px); margin:0 auto; display:grid; grid-template-columns:.95fr 1.15fr; gap:16px; align-items:start; } .zakatInputs, .zakatResultCard{ border-radius:28px !important; padding:20px !important; background: radial-gradient(circle at top left, color-mix(in srgb,var(--zakat-green),transparent 94%), transparent 35%), var(--panelBg,rgba(255,255,255,.92)) !important; border:1px solid color-mix(in srgb,var(--zakat-green),transparent 82%) !important; box-shadow:0 16px 34px rgba(0,0,0,.075) !important; } .zakatInputGroup{ display:none; } .zakatInputGroup.active{ display:block; animation:zakatFadeUp .22s ease both; } @keyframes zakatFadeUp{ from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:translateY(0);} } .zakatInputs label{ display:block; margin:0 0 8px; color:var(--muted); font-weight:1000; line-height:1.45; } .zakatInput{ width:100%; min-height:54px; padding:13px 15px; margin-bottom:15px; border-radius:18px; border:1px solid color-mix(in srgb,var(--zakat-green),transparent 78%); background:var(--card,#fff); color:var(--smart-strong,var(--text,#1f160f)); font-family:inherit; font-size:20px; font-weight:1000; text-align:center; box-shadow:inset 0 1px 2px rgba(0,0,0,.035); } .zakatInput:focus{ outline:none; border-color:color-mix(in srgb,var(--zakat-green),transparent 38%); box-shadow:0 0 0 4px color-mix(in srgb,var(--zakat-green),transparent 88%); } .zakatSubSelector{ display:flex; gap:10px; margin-bottom:16px; } .zakatSubBtn{ flex:1; border:1px solid color-mix(in srgb,var(--zakat-green),transparent 78%); background:var(--card,#fff); color:var(--smart-strong,var(--text,#1f160f)); border-radius:18px; padding:11px 8px; font-family:inherit; font-weight:1000; cursor:pointer; box-shadow:0 6px 14px rgba(0,0,0,.055); } .zakatSubBtn span{ display:block; font-size:25px; margin-bottom:4px; } .zakatSubBtn.active{ background:color-mix(in srgb,var(--zakat-green),transparent 88%); color:var(--zakat-green); border-color:color-mix(in srgb,var(--zakat-green),transparent 48%); } .zakatTwoCols{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; } .zakatPriceStatus{ min-height:24px; margin:-4px 0 8px; text-align:center; color:var(--zakat-gold); font-weight:1000; line-height:1.65; } .zakatNisabInfo{ display:none; background:color-mix(in srgb,var(--zakat-green),transparent 91%); border:1px solid color-mix(in srgb,var(--zakat-green),transparent 70%); border-radius:16px; padding:11px; text-align:center; line-height:1.7; font-weight:950; color:var(--zakat-green); } .zakatActions{ display:flex; gap:10px; margin-top:10px; } .zakatActions button{ flex:1; border:0; border-radius:18px; padding:14px; font-family:inherit; font-weight:1000; cursor:pointer; font-size:17px; } .zakatCalcBtn{ background:linear-gradient(135deg,var(--zakat-green),color-mix(in srgb,var(--zakat-green),#000 22%)); color:#fff; box-shadow:0 10px 20px color-mix(in srgb,var(--zakat-green),transparent 72%); } .zakatResetBtn{ background:var(--card,#fff); color:var(--smart-strong,var(--text,#1f160f)); border:1px solid var(--line,rgba(0,0,0,.12)) !important; } .zakatDueBox{ background: radial-gradient(circle at bottom right, color-mix(in srgb,var(--zakat-gold),transparent 88%), transparent 40%), color-mix(in srgb,var(--zakat-green),transparent 90%); border:1px solid color-mix(in srgb,var(--zakat-green),transparent 66%); border-radius:24px; padding:22px 16px; text-align:center; margin-bottom:14px; box-shadow:inset 0 1px 0 rgba(255,255,255,.22); } .zakatDueHeader{ color:var(--muted); font-weight:1000; margin-bottom:8px; font-size:17px; } .zakatDueText{ color:var(--zakat-green); font-size:clamp(28px,3.2vw,44px); line-height:1.35; font-weight:1000; } .zakatDescList{ list-style:none; padding:0; margin:0; } .zakatDescList li, .zakatPriceCard{ background:var(--card,#fff); border:1px solid color-mix(in srgb,var(--zakat-green),transparent 84%); border-right:6px solid var(--zakat-green); border-radius:18px; padding:13px; margin-bottom:10px; line-height:1.85; font-weight:900; box-shadow:0 6px 14px rgba(0,0,0,.045); } .zakatResultPrices{ display:none; margin-top:10px; } .zakatResultPrices.active{ display:block; } .zakatPriceCard{ border-right-color:var(--zakat-gold); } .zakatPriceCard h4{ margin:0 0 8px; color:var(--zakat-gold); font-size:18px; font-weight:1000; } .zakatPriceCard p{ margin:8px 0 0; color:var(--muted); line-height:1.75; } .zakatPrintBtn{ display:none; width:100%; margin-top:10px; border:0; border-radius:18px; padding:14px; background:linear-gradient(135deg,#2563eb,#1d4ed8); color:#fff; font-family:inherit; font-weight:1000; cursor:pointer; font-size:17px; box-shadow:0 10px 20px rgba(37,99,235,.22); } .zakatPage .print-header{ display:none; } body[data-theme="dark"] .zakatHero, body[data-theme="dark"] .zakatNote, body[data-theme="dark"] .zakatInputs, body[data-theme="dark"] .zakatResultCard, body[data-theme="dark"] .zakatTypeBtn, body[data-theme="dark"] .zakatSubBtn, body[data-theme="dark"] .zakatInput, body[data-theme="dark"] .zakatResetBtn, body[data-theme="dark"] .zakatDescList li, body[data-theme="dark"] .zakatPriceCard{ background:#111827 !important; border-color:rgba(255,255,255,.14) !important; } body[data-theme="dark"] .zakatDueBox, body[data-theme="dark"] .zakatConditions div, body[data-theme="dark"] .zakatNisabInfo{ background:rgba(255,255,255,.06) !important; } @media(max-width:760px){ .zakatPage{ padding-inline:6px; } .zakatHero{ border-radius:24px; padding:24px 14px !important; } .zakatTypeGrid{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; } .zakatTypeBtn{ min-height:92px; border-radius:20px; padding:12px 6px; } .zakatLayout{ grid-template-columns:1fr; gap:12px; } .zakatTwoCols{ grid-template-columns:1fr; } .zakatInputs, .zakatResultCard{ border-radius:22px !important; padding:15px !important; } .zakatSubSelector{ gap:7px; } .zakatSubBtn{ border-radius:16px; padding:10px 6px; } .zakatActions{ flex-direction:column; } } @media print{ body{ background:#fff !important; color:#000 !important; } [data-global-header], .zakatHero, .zakatTypeGrid, .zakatNote, .zakatInputs, footer, .zakatPrintBtn{ display:none !important; } .zakatLayout{ display:block !important; width:100% !important; } .zakatResultCard{ box-shadow:none !important; border:0 !important; background:#fff !important; padding:0 !important; } .zakatPage .print-header{ display:block !important; text-align:center; border:2px solid #000; padding:12px; margin-bottom:14px; } .zakatDueBox, .zakatDescList li, .zakatPriceCard{ background:#fff !important; border:1px solid #000 !important; color:#000 !important; box-shadow:none !important; } .zakatDueText, .zakatDueHeader, .zakatPriceCard h4{ color:#000 !important; } } /* Stage165: widen Zakat page evenly */ .zakatPage.pageW, .zakatPage{ width:min(100%,1280px) !important; max-width:1280px !important; margin-inline:auto !important; padding-inline:14px !important; box-sizing:border-box !important; } .zakatHero, .zakatNote, .zakatTypeGrid, .zakatLayout{ width:100% !important; max-width:100% !important; box-sizing:border-box !important; } .zakatLayout{ grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important; gap:18px !important; } .zakatInputs, .zakatResultCard{ width:100% !important; max-width:100% !important; box-sizing:border-box !important; } @media(min-width:1200px){ .zakatPage.pageW, .zakatPage{ max-width:1340px !important; } .zakatLayout{ gap:22px !important; } } @media(max-width:760px){ .zakatPage.pageW, .zakatPage{ width:100% !important; max-width:100% !important; padding-inline:6px !important; } .zakatLayout{ grid-template-columns:1fr !important; } } /* Stage166: Zakat disclaimer */ .zakatDisclaimer{ width:100% !important; max-width:100% !important; box-sizing:border-box !important; margin:16px auto 0 !important; padding:14px 16px !important; border-radius:18px !important; text-align:center !important; font-weight:1000 !important; line-height:1.8 !important; color:var(--gold,#b78319) !important; background:color-mix(in srgb,var(--gold,#b78319),transparent 90%) !important; border:1px solid color-mix(in srgb,var(--gold,#b78319),transparent 68%) !important; box-shadow:0 8px 18px rgba(0,0,0,.055) !important; } body[data-theme="dark"] .zakatDisclaimer{ background:rgba(251,191,36,.09) !important; border-color:rgba(251,191,36,.24) !important; color:#fbbf24 !important; } @media(max-width:760px){ .zakatDisclaimer{ margin-top:12px !important; padding:12px 10px !important; border-radius:15px !important; font-size:15px !important; } } /* Stage168: fix moon mansion modal scrolling on mobile */ body.moonDockModalOpen{ overflow:hidden !important; overscroll-behavior:none !important; } .moonDockOverlay.open{ overflow:hidden !important; touch-action:none !important; } .moonDockModal{ overflow-y:auto !important; overflow-x:hidden !important; -webkit-overflow-scrolling:touch !important; overscroll-behavior:contain !important; touch-action:pan-y !important; height:auto !important; max-height:min(76vh,620px) !important; } #moonDockModalBody{ max-height:none !important; overflow:visible !important; } @media(max-width:760px){ .moonDockOverlay{ align-items:center !important; justify-content:center !important; padding:8px !important; } .moonDockModal{ width:92vw !important; max-height:74dvh !important; max-height:74vh !important; overflow-y:auto !important; overflow-x:hidden !important; -webkit-overflow-scrolling:touch !important; overscroll-behavior:contain !important; touch-action:pan-y !important; } .moonDockLinesWrap{ padding-bottom:18px !important; } } /* Stage170: nahusat mobile scroll fix and floating close */ .nahusatFloatingClose{ position:fixed !important; top:calc(env(safe-area-inset-top, 0px) + 12px) !important; left:12px !important; z-index:50000 !important; width:42px !important; height:42px !important; display:flex !important; align-items:center !important; justify-content:center !important; border-radius:50% !important; background:#c62828 !important; color:#fff !important; text-decoration:none !important; font-size:30px !important; line-height:1 !important; font-weight:1000 !important; box-shadow:0 10px 22px rgba(198,40,40,.34) !important; border:2px solid rgba(255,255,255,.78) !important; } .nahusatFloatingClose:hover, .nahusatFloatingClose:focus-visible{ transform:scale(1.04); outline:none !important; box-shadow:0 0 0 4px rgba(198,40,40,.2), 0 10px 22px rgba(198,40,40,.34) !important; } @media(max-width:760px){ .nahusatFloatingClose{ width:40px !important; height:40px !important; top:calc(env(safe-area-inset-top, 0px) + 10px) !important; left:10px !important; font-size:28px !important; } } /* Stage171: use floating close button on fasting and occasions pages too */ .fastingPage .nahusatFloatingClose, .eventsPage .nahusatFloatingClose{ z-index:50000 !important; } /* Stage173: mobile home shows one fasting/occasion/nahusat card with smaller show-all button */ @media(max-width:760px){ #homeEventsStack{ gap:8px !important; } #homeEventsStack #homeFastingWidget, #homeEventsStack #homeOccasionsWidget, #homeEventsStack #homeNahusatWidget{ padding:9px !important; border-radius:16px !important; } #homeEventsStack #homeFastingWidget .homeFastingHead, #homeEventsStack #homeOccasionsWidget .homeFastingHead, #homeEventsStack #homeNahusatWidget .homeFastingHead{ display:flex !important; flex-direction:column !important; align-items:center !important; justify-content:center !important; gap:5px !important; margin-bottom:7px !important; text-align:center !important; } #homeEventsStack #homeFastingWidget .homeFastingHead strong, #homeEventsStack #homeOccasionsWidget .homeFastingHead strong, #homeEventsStack #homeNahusatWidget .homeFastingHead strong{ display:block !important; width:100% !important; text-align:center !important; font-size:clamp(18px,5vw,23px) !important; line-height:1.2 !important; } #homeEventsStack #homeFastingWidget .homeFastingHead a, #homeEventsStack #homeOccasionsWidget .homeFastingHead a, #homeEventsStack #homeNahusatWidget .homeFastingHead a{ display:inline-flex !important; align-items:center !important; justify-content:center !important; align-self:center !important; position:static !important; transform:none !important; width:auto !important; min-width:0 !important; padding:4px 10px !important; border-radius:999px !important; font-size:11px !important; line-height:1.1 !important; font-weight:1000 !important; color:#fff !important; background:var(--green,#0f7a3a) !important; text-decoration:none !important; box-shadow:0 4px 10px rgba(0,0,0,.12) !important; margin:0 !important; } #homeEventsStack #homeFastingWidget .homeFastingGrid, #homeEventsStack #homeOccasionsWidget .homeFastingGrid, #homeEventsStack #homeNahusatWidget .homeFastingGrid{ display:grid !important; grid-template-columns:1fr !important; gap:6px !important; } #homeEventsStack #homeFastingWidget .homeFastingGrid > .fastingCard:nth-of-type(n+2), #homeEventsStack #homeFastingWidget .homeFastingGrid > .eventCard:nth-of-type(n+2), #homeEventsStack #homeOccasionsWidget .homeFastingGrid > .fastingCard:nth-of-type(n+2), #homeEventsStack #homeOccasionsWidget .homeFastingGrid > .eventCard:nth-of-type(n+2), #homeEventsStack #homeNahusatWidget .homeFastingGrid > .fastingCard:nth-of-type(n+2), #homeEventsStack #homeNahusatWidget .homeFastingGrid > .eventCard:nth-of-type(n+2){ display:none !important; } #homeEventsStack #homeFastingWidget .fastingCard, #homeEventsStack #homeOccasionsWidget .fastingCard, #homeEventsStack #homeNahusatWidget .fastingCard, #homeEventsStack #homeFastingWidget .eventCard, #homeEventsStack #homeOccasionsWidget .eventCard, #homeEventsStack #homeNahusatWidget .eventCard{ min-height:auto !important; padding:9px !important; border-radius:14px !important; } #homeEventsStack #homeFastingWidget .fastingCardTop, #homeEventsStack #homeOccasionsWidget .fastingCardTop, #homeEventsStack #homeNahusatWidget .fastingCardTop{ display:flex !important; flex-direction:column !important; align-items:center !important; justify-content:center !important; gap:4px !important; text-align:center !important; } #homeEventsStack #homeFastingWidget .fastingCardTop strong, #homeEventsStack #homeOccasionsWidget .fastingCardTop strong, #homeEventsStack #homeNahusatWidget .fastingCardTop strong{ width:100% !important; display:block !important; font-size:clamp(17px,4.7vw,22px) !important; line-height:1.22 !important; text-align:center !important; padding:0 !important; margin:0 !important; } #homeEventsStack #homeFastingWidget .fastingCardTop span, #homeEventsStack #homeOccasionsWidget .fastingCardTop span, #homeEventsStack #homeNahusatWidget .fastingCardTop span{ align-self:center !important; position:static !important; transform:none !important; flex:0 0 auto !important; padding:3px 7px !important; font-size:10px !important; line-height:1.1 !important; margin:0 !important; max-width:100% !important; white-space:normal !important; } #homeEventsStack #homeFastingWidget .fastingHijri, #homeEventsStack #homeOccasionsWidget .fastingHijri, #homeEventsStack #homeNahusatWidget .fastingHijri{ font-size:14px !important; line-height:1.35 !important; margin-top:5px !important; text-align:center !important; } #homeEventsStack #homeFastingWidget .fastingCard small, #homeEventsStack #homeOccasionsWidget .fastingCard small, #homeEventsStack #homeNahusatWidget .fastingCard small, #homeEventsStack #homeFastingWidget .fastingCard em, #homeEventsStack #homeOccasionsWidget .fastingCard em, #homeEventsStack #homeNahusatWidget .fastingCard em{ font-size:11px !important; line-height:1.35 !important; text-align:center !important; margin-top:4px !important; } } /* Stage174: Nahusat page mobile badge below card title */ @media(max-width:760px){ .eventsPage[data-event-type="nahs"] .fastingCardTop, .eventsPage[data-event-type="nahs"] .eventCard .fastingCardTop{ display:flex !important; flex-direction:column !important; align-items:center !important; justify-content:center !important; gap:6px !important; text-align:center !important; } .eventsPage[data-event-type="nahs"] .fastingCardTop strong, .eventsPage[data-event-type="nahs"] .eventCard .fastingCardTop strong{ display:block !important; width:100% !important; order:1 !important; text-align:center !important; font-size:clamp(19px,5.3vw,25px) !important; line-height:1.28 !important; padding:0 !important; margin:0 !important; } .eventsPage[data-event-type="nahs"] .fastingCardTop span, .eventsPage[data-event-type="nahs"] .eventCard .fastingCardTop span{ order:2 !important; position:static !important; transform:none !important; align-self:center !important; flex:0 0 auto !important; display:inline-flex !important; align-items:center !important; justify-content:center !important; max-width:100% !important; margin:0 !important; padding:4px 9px !important; border-radius:999px !important; font-size:11px !important; line-height:1.15 !important; white-space:normal !important; text-align:center !important; } .eventsPage[data-event-type="nahs"] .fastingCard, .eventsPage[data-event-type="nahs"] .eventCard{ overflow:visible !important; } } /* Stage175: Nahusat focus label text */ .eventsPage[data-event-type="nahs"] .nextFocusCard::before{ content:"اليوم الحالي" !important; } /* Stage176: guestbook pagination and admin new-entry notifications */ .guestbookPager{ margin-top:16px !important; padding:12px !important; border:1px solid var(--line,rgba(0,0,0,.12)) !important; border-radius:18px !important; background:var(--panelBg,rgba(255,255,255,.72)) !important; display:flex !important; flex-wrap:wrap !important; align-items:center !important; justify-content:center !important; gap:8px !important; text-align:center !important; } .guestbookPagerNums{ display:flex !important; flex-wrap:wrap !important; align-items:center !important; justify-content:center !important; gap:6px !important; } .guestbookPager button{ border:1px solid var(--line,rgba(0,0,0,.14)) !important; background:var(--card,#fff) !important; color:var(--smart-strong,var(--text,#1f160f)) !important; border-radius:999px !important; padding:7px 12px !important; font-weight:1000 !important; cursor:pointer !important; min-width:40px !important; } .guestbookPager button.active{ background:var(--green,#0f7a3a) !important; color:#fff !important; border-color:var(--green,#0f7a3a) !important; } .guestbookPager button:disabled{ opacity:.45 !important; cursor:not-allowed !important; } .guestbookPager small{ flex-basis:100% !important; color:var(--muted,#6b7280) !important; font-weight:900 !important; margin-top:2px !important; } .adminNewEntryAlert{ position:sticky !important; top:10px !important; z-index:3000 !important; margin:12px auto !important; padding:12px 14px !important; border-radius:18px !important; border:2px solid rgba(212,166,42,.85) !important; background:linear-gradient(180deg,rgba(255,244,190,.98),rgba(255,255,255,.95)) !important; color:#21160c !important; box-shadow:0 14px 30px rgba(0,0,0,.16) !important; display:flex !important; align-items:center !important; justify-content:space-between !important; gap:10px !important; font-weight:1000 !important; } .adminNewEntryAlert[hidden]{ display:none !important; } .adminNewEntryAlert strong{ color:#8a5a00 !important; font-size:18px !important; } .adminNewEntryAlert span{ flex:1 1 auto !important; } .adminNewEntryAlert button{ flex:0 0 auto !important; border:0 !important; border-radius:999px !important; padding:7px 12px !important; background:#0f7a3a !important; color:#fff !important; font-weight:1000 !important; cursor:pointer !important; } @media(max-width:760px){ .guestbookPager{ padding:10px 8px !important; gap:6px !important; } .guestbookPager button{ padding:6px 9px !important; min-width:34px !important; font-size:12px !important; } .adminNewEntryAlert{ position:sticky !important; top:6px !important; flex-direction:column !important; align-items:stretch !important; text-align:center !important; } } /* Stage184: desktop moon mansion modal wider with no internal scrollbar */ @media(min-width:761px){ .moonDockOverlay.open{ align-items:flex-start !important; justify-content:center !important; overflow-y:auto !important; overflow-x:hidden !important; padding:24px 18px !important; touch-action:auto !important; } .moonDockModal{ width:min(1180px,96vw) !important; max-width:1180px !important; max-height:none !important; height:auto !important; overflow:visible !important; overflow-y:visible !important; overflow-x:visible !important; border-radius:22px !important; } #moonDockModalBody{ max-height:none !important; overflow:visible !important; } .moonDockDetailHeader{ padding:18px 64px 14px 22px !important; } .moonDockDetailHeader h2{ font-size:clamp(30px,3vw,42px) !important; } .moonDockLinesWrap{ padding:14px 18px 18px !important; gap:8px !important; } .moonDockLine{ padding:8px 10px !important; min-height:34px !important; line-height:1.6 !important; } .moonDockLineTitle{ min-width:190px !important; max-width:230px !important; font-size:14px !important; padding:5px 10px !important; align-self:stretch !important; display:flex !important; align-items:center !important; justify-content:center !important; } .moonDockLineValue{ font-size:15.5px !important; line-height:1.75 !important; font-weight:900 !important; } .moonDockLineValue .moonDockZodiacItem{ font-size:13px !important; padding:4px 8px !important; } } /* Stage200 unified planet countdown marker */ #planetsCapsulesList[data-stage="200"] .cap-timer{ outline:1px solid rgba(255,255,255,.22); } /* Stage202 boundary source marker */ #planetsCapsulesList[data-stage="202"] .cap-timer{ outline:1px solid rgba(255,255,255,.22); } /* Stage203: year calendar weekday headers */ .yearMonthAlignedGrid{ display:grid!important; grid-template-columns:repeat(7,minmax(0,1fr))!important; gap:3px!important; align-items:stretch!important; } .yearWeekName{ min-height:34px!important; border-radius:7px!important; display:flex!important; align-items:center!important; justify-content:center!important; background:rgba(15,122,58,.10)!important; color:var(--fc-green,#0f7a3a)!important; font-size:10px!important; font-weight:1000!important; line-height:1!important; writing-mode:vertical-rl!important; text-orientation:mixed!important; transform:rotate(180deg)!important; overflow:hidden!important; user-select:none!important; } .dayMiniBlank{ visibility:hidden!important; pointer-events:none!important; } .dark .yearWeekName, body.dark .yearWeekName, body[data-theme="dark"] .yearWeekName{ background:rgba(255,255,255,.08)!important; color:#9ff0b8!important; } @media(max-width:560px){ .yearWeekName{min-height:30px!important;font-size:9px!important;border-radius:6px!important} .yearMonthAlignedGrid{gap:2px!important} } /* Stage339: مؤشر التحديث بالسحب من أعلى الصفحة على الأجهزة اللمسية. */ .pullRefreshIndicator{ --pull-distance:0px; position:fixed; top:8px; left:50%; z-index:10050; display:flex; align-items:center; justify-content:center; gap:7px; min-height:38px; padding:7px 14px; border:1px solid rgba(255,255,255,.30); border-radius:999px; background:linear-gradient(135deg,var(--green,#0f7a3a),var(--green2,#16894a)); color:#fff; box-shadow:0 10px 28px rgba(0,0,0,.23); opacity:0; pointer-events:none; transform:translate(-50%,calc(-60px + min(var(--pull-distance),60px))); transition:opacity .14s ease,transform .16s ease; } .pullRefreshIndicator.visible{ opacity:1; transform:translate(-50%,0); } .pullRefreshIndicator strong{ color:#fff!important; font-size:13px; font-weight:1000; white-space:nowrap; } .pullRefreshIcon{ display:inline-grid; place-items:center; width:20px; height:20px; color:#fff; font-size:18px; font-weight:1000; line-height:1; transition:transform .16s ease; } .pullRefreshIndicator.ready .pullRefreshIcon{transform:rotate(180deg);} .pullRefreshIndicator.refreshing .pullRefreshIcon{animation:pullRefreshSpin .72s linear infinite;} @keyframes pullRefreshSpin{to{transform:rotate(360deg);}} @media(min-width:901px) and (hover:hover){.pullRefreshIndicator{display:none!important;}} @media(pointer:coarse){html,body{overscroll-behavior-y:contain;}} /* Stage205 Tasbeeh Widget */ .tasbeehFloatBtn{position:fixed;right:18px;bottom:88px;z-index:9998;width:58px;height:58px;border:0;border-radius:20px;background:linear-gradient(135deg,var(--fc-green,#0f7a3a),#0b5d30);color:#fff;box-shadow:0 18px 38px rgba(0,0,0,.22);cursor:pointer;display:grid;place-items:center} .tasbeehIcon{font-size:30px;line-height:1}.tasbeehBadge{position:absolute;top:-7px;left:-7px;min-width:24px;height:24px;border-radius:999px;background:#d40022;color:#fff;font-weight:1000;font-size:12px;display:grid;place-items:center;border:2px solid #fff} .tasbeehOverlay{position:fixed;inset:0;background:rgba(0,0,0,.46);z-index:9999;display:none;align-items:center;justify-content:center;padding:16px}.tasbeehOverlay.open{display:flex} .tasbeehModal{direction:rtl;width:min(940px,100%);max-height:88vh;overflow:auto;border-radius:28px;background:linear-gradient(180deg,#fff,#f7fcf8);color:#16351f;box-shadow:0 28px 80px rgba(0,0,0,.30);padding:18px;position:relative} .tasbeehClose{position:sticky;top:0;float:left;z-index:2;width:42px;height:42px;border:0;border-radius:14px;background:#edf8f1;color:#0f7a3a;font-size:24px;font-weight:1000;cursor:pointer} .tasbeehHead{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;margin-bottom:14px}.tasbeehEyebrow{color:#b78319;font-weight:1000;font-size:12px}.tasbeehHead h2{margin:4px 0;font-size:26px}.tasbeehHead p{margin:0;color:#6b7280;font-weight:800}.tasbeehHead button,.tasbeehAddGrid button,.tasbeehCounter button{border:0;border-radius:14px;background:#0f7a3a;color:#fff;font-weight:1000;padding:10px 14px;cursor:pointer} .tasbeehTodayEvents{display:grid;gap:8px;margin-bottom:12px}.tasbeehTodayEvents h3,.tasbeehAddBox h3,.tasbeehSettings h3{margin:8px 0;color:#0f7a3a}.tasbeehEvent{border-right:5px solid var(--c,#0f7a3a);background:#fff;border-radius:16px;padding:10px;display:grid;gap:3px;box-shadow:0 8px 20px rgba(0,0,0,.055)}.tasbeehEvent span{color:#806019;font-weight:900}.tasbeehEvent small{color:#55615a} .tasbeehList{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px}.tasbeehItem{background:#fff;border:1px solid rgba(15,122,58,.14);border-radius:22px;padding:14px;box-shadow:0 10px 28px rgba(0,0,0,.055)}.tasbeehItem.done{opacity:.72;background:linear-gradient(180deg,#ecfff1,#fff)}.tasbeehItemTop{display:flex;justify-content:space-between;gap:8px;color:#806019;font-size:12px;font-weight:1000}.tasbeehItemTop b{color:#0f7a3a}.tasbeehItem h3{margin:10px 0;font-size:18px;line-height:1.7}.tasbeehNote{margin:0 0 8px;color:#6b7280;font-weight:800}.tasbeehCounter{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap;margin-top:10px}.tasbeehCounter span{font-weight:900}.tasbeehCounter strong{font-size:22px;color:#0f7a3a}.tasbeehCounter button:disabled{background:#95a39a;cursor:default}.tasbeehResetOne{background:#b78319!important}.tasbeehDua{background:#f7faf8;border-radius:16px;padding:10px;margin:8px 0}.tasbeehDua summary{cursor:pointer;font-weight:1000;color:#0f7a3a}.tasbeehDua div{margin-top:10px;line-height:2;max-height:260px;overflow:auto} .tasbeehAddBox,.tasbeehSettings{margin-top:14px;border-radius:20px;background:#f4faf6;padding:12px;border:1px solid rgba(15,122,58,.12)}.tasbeehAddGrid{display:grid;grid-template-columns:2fr 120px 120px auto;gap:8px}.tasbeehAddGrid input,.tasbeehAddGrid select,.tasbeehSettings select{border:1px solid rgba(15,122,58,.2);border-radius:14px;padding:10px;background:#fff}.tasbeehSettings{display:grid;gap:9px}.tasbeehEmpty{text-align:center;padding:28px;color:#6b7280;font-weight:900} body.dark .tasbeehModal,body[data-theme="dark"] .tasbeehModal{background:linear-gradient(180deg,#102119,#08130d);color:#e8f1ea}body.dark .tasbeehItem,body[data-theme="dark"] .tasbeehItem,body.dark .tasbeehEvent,body[data-theme="dark"] .tasbeehEvent{background:#102119;border-color:rgba(255,255,255,.12)}body.dark .tasbeehAddBox,body.dark .tasbeehSettings,body.dark .tasbeehDua,body[data-theme="dark"] .tasbeehAddBox,body[data-theme="dark"] .tasbeehSettings,body[data-theme="dark"] .tasbeehDua{background:#0b1810} @media(max-width:640px){.tasbeehFloatBtn{right:12px;bottom:78px;width:52px;height:52px}.tasbeehModal{padding:13px;border-radius:22px}.tasbeehHead{display:block}.tasbeehList{grid-template-columns:1fr}.tasbeehAddGrid{grid-template-columns:1fr}.tasbeehHead h2{font-size:22px}} /* Stage206 Tasbeeh UI adjustments */ .tasbeehFloatBtn{touch-action:none;user-select:none} .tasbeehFloatBtn.dragging{opacity:.82;transform:scale(.96)} .tasbeehHeadBtns{display:flex;gap:8px;flex-wrap:wrap} .tasbeehHeadBtns button{border:0;border-radius:14px;background:#0f7a3a;color:#fff;font-weight:1000;padding:10px 14px;cursor:pointer} .tasbeehTodayEvents{display:flex!important;flex-wrap:wrap;gap:7px;margin:8px 0 12px!important} .tasbeehMiniEvent{display:inline-flex;border-radius:999px;background:#fff3d4;color:#7a5100;font-weight:1000;font-size:12px;padding:7px 10px} .tasbeehOtherPanel{margin:10px 0 14px;border-radius:20px;background:#f4faf6;border:1px solid rgba(15,122,58,.13);padding:12px} .tasbeehOtherPanel h3{margin:0 0 10px;color:#0f7a3a} .tasbeehOtherItem{display:grid;grid-template-columns:110px 1fr;gap:8px;align-items:center;background:#fff;border-radius:14px;padding:9px 10px;margin-top:7px} .tasbeehOtherItem strong{color:#0f7a3a}.tasbeehOtherItem span{font-weight:900}.tasbeehOtherItem small{grid-column:2;color:#6b7280} .tasbeehList.singleList{display:flex!important;flex-direction:column!important;gap:8px!important;max-height:38vh;overflow:auto;padding-inline-end:4px} .tasbeehChoice{width:100%;text-align:right;border:1px solid rgba(15,122,58,.15);background:#fff;border-radius:18px;padding:12px 14px;display:flex;justify-content:space-between;gap:10px;align-items:center;cursor:pointer;color:#17351f} .tasbeehChoice span{font-size:16px;font-weight:1000;line-height:1.6}.tasbeehChoice small{white-space:nowrap;color:#806019;font-weight:900}.tasbeehChoice.selected{background:linear-gradient(135deg,#eaffef,#fff);box-shadow:inset 0 0 0 2px #0f7a3a}.tasbeehChoice.complete{opacity:.66}.tasbeehChoice.complete small{color:#0f7a3a} .tasbeehBigCounter{position:sticky;bottom:-18px;margin:14px -18px -18px;padding:12px 18px 18px;background:linear-gradient(180deg,rgba(255,255,255,.82),#fff);border-top:1px solid rgba(15,122,58,.13);display:grid;gap:7px} #tasbeehBigBtn{width:100%;min-height:72px;border:0;border-radius:24px;background:linear-gradient(135deg,#0f7a3a,#0b5d30);color:#fff;font-size:24px;font-weight:1000;line-height:1.5;cursor:pointer;padding:12px 18px} #tasbeehBigBtn:disabled{background:#8ca195;cursor:default} #tasbeehBigRemain{text-align:center;font-size:18px;font-weight:1000;color:#806019} .tasbeehSettings{display:grid;gap:10px} .tasbeehAddSettings{display:grid;grid-template-columns:1fr 110px auto;gap:8px;align-items:center}.tasbeehAddSettings h4{grid-column:1/-1;margin:6px 0;color:#0f7a3a}.tasbeehAddSettings input{border:1px solid rgba(15,122,58,.2);border-radius:14px;padding:10px;background:#fff}.tasbeehAddSettings button{border:0;border-radius:14px;background:#0f7a3a;color:#fff;font-weight:1000;padding:10px 14px;cursor:pointer} body.dark .tasbeehBigCounter,body[data-theme="dark"] .tasbeehBigCounter{background:linear-gradient(180deg,rgba(8,19,13,.82),#08130d)} body.dark .tasbeehChoice,body[data-theme="dark"] .tasbeehChoice,body.dark .tasbeehOtherItem,body[data-theme="dark"] .tasbeehOtherItem{background:#102119;color:#e8f1ea;border-color:rgba(255,255,255,.12)} body.dark .tasbeehOtherPanel,body[data-theme="dark"] .tasbeehOtherPanel{background:#0b1810} @media(max-width:640px){.tasbeehOtherItem{grid-template-columns:1fr}.tasbeehOtherItem small{grid-column:auto}.tasbeehChoice{display:grid}.tasbeehChoice small{white-space:normal}.tasbeehAddSettings{grid-template-columns:1fr}#tasbeehBigBtn{font-size:20px;min-height:64px}} /* Stage207 Tasbeeh compact modal and clearer counter */ .tasbeehModal{width:min(620px,96vw)!important;max-height:86vh!important;padding:14px!important;border-radius:24px!important} .tasbeehHead{align-items:center!important;margin-bottom:8px!important} .tasbeehTitleRow{display:flex!important;align-items:baseline!important;gap:8px!important;flex-wrap:wrap!important} .tasbeehTitleRow .tasbeehEyebrow{display:none!important} .tasbeehTitleRow h2{margin:0!important;font-size:22px!important;white-space:nowrap!important} .tasbeehTitleRow p{margin:0!important;font-size:13px!important;font-weight:1000!important;color:#806019!important} .tasbeehMiniEvent{padding:4px 9px!important;font-size:12px!important;background:#ffe8e8!important;color:#b00020!important} .tasbeehList.singleList{max-height:34vh!important;gap:6px!important} .tasbeehChoice{padding:9px 11px!important;border-radius:15px!important} .tasbeehChoice span{font-size:15px!important} .tasbeehChoice small{display:flex!important;align-items:center!important;gap:2px!important;font-style:normal!important} .tasbeehRemainNumber{color:#d40022!important;font-size:24px!important;font-weight:1000!important;line-height:1!important} .tasbeehChoice small em{font-style:normal!important;color:#d40022!important;font-weight:1000!important;font-size:15px!important} .tasbeehCompleteText{color:#078334!important;font-size:18px!important;font-weight:1000!important} .tasbeehChoice.complete{opacity:1!important;background:linear-gradient(135deg,#eaffef,#fff)!important} .tasbeehBigCounter{margin:10px -14px -14px!important;padding:10px 14px 14px!important} #tasbeehBigBtn{min-height:62px!important;border-radius:20px!important;font-size:21px!important} #tasbeehBigBtn:disabled{background:#078334!important;color:#fff!important} #tasbeehBigRemain{font-size:16px!important} .tasbeehSettingsOverlay{position:absolute;inset:0;display:none;align-items:center;justify-content:center;background:rgba(0,0,0,.38);z-index:5;border-radius:24px;padding:14px} .tasbeehSettingsOverlay.open{display:flex} .tasbeehSettings{width:min(460px,100%);max-height:76vh;overflow:auto;background:#fff!important;border-radius:22px!important;padding:16px!important;box-shadow:0 20px 60px rgba(0,0,0,.28);position:relative} .tasbeehSettingsClose{position:absolute;left:10px;top:10px;width:36px;height:36px;border:0;border-radius:12px;background:#edf8f1;color:#0f7a3a;font-size:22px;font-weight:1000;cursor:pointer} .tasbeehSettings h3{margin-top:0!important;padding-left:44px} body.dark .tasbeehSettings,body[data-theme="dark"] .tasbeehSettings{background:#102119!important;color:#e8f1ea!important} body.dark .tasbeehTitleRow p,body[data-theme="dark"] .tasbeehTitleRow p{color:#e8c966!important} body.dark .tasbeehChoice.complete,body[data-theme="dark"] .tasbeehChoice.complete{background:#0e2a17!important} @media(max-width:640px){.tasbeehModal{width:94vw!important;padding:12px!important}.tasbeehTitleRow h2{font-size:20px!important}.tasbeehTitleRow p{font-size:12px!important}.tasbeehRemainNumber{font-size:22px!important}} /* Stage208 Tasbeeh floating icon, close button dark fix, centered weekday title */ .tasbeehFloatBtn{ background:transparent!important; box-shadow:none!important; border:0!important; width:54px!important; height:54px!important; border-radius:0!important; padding:0!important; } .tasbeehFloatBtn:hover, .tasbeehFloatBtn:focus{ background:transparent!important; box-shadow:none!important; outline:none!important; } .tasbeehIcon{ font-size:42px!important; filter:drop-shadow(0 8px 12px rgba(0,0,0,.28))!important; } .tasbeehBadge{ top:-2px!important; left:-2px!important; } .tasbeehClose{ background:#0f7a3a!important; color:#fff!important; border:2px solid rgba(255,255,255,.9)!important; text-shadow:none!important; box-shadow:0 8px 18px rgba(0,0,0,.18)!important; } body.dark .tasbeehClose, body[data-theme="dark"] .tasbeehClose{ background:#0f7a3a!important; color:#ffffff!important; border-color:rgba(255,255,255,.55)!important; } .tasbeehHead{ justify-content:center!important; position:relative!important; padding-top:4px!important; } .tasbeehTitleRow{ width:100%!important; justify-content:center!important; text-align:center!important; display:flex!important; } .tasbeehTitleRow h2{ width:100%!important; text-align:center!important; font-size:28px!important; line-height:1.35!important; font-weight:1000!important; margin:0 auto!important; white-space:nowrap!important; color:#0f7a3a!important; } .tasbeehTitleRow p{ display:none!important; } .tasbeehHeadBtns{ position:absolute!important; left:0!important; top:0!important; } body.dark .tasbeehTitleRow h2, body[data-theme="dark"] .tasbeehTitleRow h2{ color:#9ff0b8!important; } @media(max-width:640px){ .tasbeehTitleRow h2{font-size:23px!important} .tasbeehHead{padding-top:42px!important} .tasbeehHeadBtns{left:0!important;right:0!important;justify-content:center!important} .tasbeehIcon{font-size:38px!important} } /* Stage209 Tasbeeh label colors and settings close visibility */ .tasbeehSettingsClose{ background:#0f7a3a!important; color:#fff!important; border:2px solid rgba(255,255,255,.85)!important; text-shadow:none!important; box-shadow:0 8px 18px rgba(0,0,0,.20)!important; line-height:1!important; } body.dark .tasbeehSettingsClose, body[data-theme="dark"] .tasbeehSettingsClose{ background:#0f7a3a!important; color:#ffffff!important; border-color:rgba(255,255,255,.55)!important; } .tasbeehMiniEvent.nahs{ background:#ffe5e5!important; color:#b00020!important; } .tasbeehMiniEvent.saad{ background:#e8fff0!important; color:#078334!important; } .tasbeehMiniEvent.mixed{ background:#eeeeee!important; color:#666666!important; } .tasbeehMiniEvent.fasting{ background:#e8f3ff!important; color:#1b5f9e!important; } body.dark .tasbeehMiniEvent.mixed, body[data-theme="dark"] .tasbeehMiniEvent.mixed{ background:#2a2f2c!important; color:#c9d0cb!important; } body.dark .tasbeehMiniEvent.nahs, body[data-theme="dark"] .tasbeehMiniEvent.nahs{ background:#3a1118!important; color:#ff8a9d!important; } body.dark .tasbeehMiniEvent.saad, body[data-theme="dark"] .tasbeehMiniEvent.saad{ background:#0e2a17!important; color:#9ff0b8!important; } /* Stage210: force centered colored tasbeeh status badges */ #tasbeehTodayEvents.tasbeehTodayEvents{ display:flex!important; justify-content:center!important; align-items:center!important; text-align:center!important; gap:8px!important; width:100%!important; margin:8px auto 12px!important; } #tasbeehTodayEvents .tasbeehMiniEvent, #tasbeehTodayEvents .tasbeehStatusBadge, .tasbeehModal #tasbeehTodayEvents .tasbeehMiniEvent, .tasbeehModal #tasbeehTodayEvents .tasbeehStatusBadge{ display:inline-flex!important; align-items:center!important; justify-content:center!important; text-align:center!important; min-width:74px!important; min-height:30px!important; padding:6px 14px!important; border-radius:999px!important; font-size:14px!important; font-weight:1000!important; line-height:1!important; white-space:nowrap!important; margin:0 auto!important; box-sizing:border-box!important; } #tasbeehTodayEvents .tasbeehStatus-nahs, #tasbeehTodayEvents .tasbeehMiniEvent.nahs{ background:#ffe1e1!important; color:#b00020!important; border:1px solid rgba(176,0,32,.22)!important; } #tasbeehTodayEvents .tasbeehStatus-saad, #tasbeehTodayEvents .tasbeehMiniEvent.saad{ background:#e4ffed!important; color:#078334!important; border:1px solid rgba(7,131,52,.22)!important; } #tasbeehTodayEvents .tasbeehStatus-mixed, #tasbeehTodayEvents .tasbeehMiniEvent.mixed{ background:#eeeeee!important; color:#555!important; border:1px solid rgba(80,80,80,.20)!important; } #tasbeehTodayEvents .tasbeehStatus-fasting, #tasbeehTodayEvents .tasbeehMiniEvent.fasting{ background:#e6f2ff!important; color:#1b5f9e!important; border:1px solid rgba(27,95,158,.22)!important; } body.dark #tasbeehTodayEvents .tasbeehStatus-nahs, body[data-theme="dark"] #tasbeehTodayEvents .tasbeehStatus-nahs, body.dark #tasbeehTodayEvents .tasbeehMiniEvent.nahs, body[data-theme="dark"] #tasbeehTodayEvents .tasbeehMiniEvent.nahs{ background:#3a1118!important; color:#ff8a9d!important; border-color:rgba(255,138,157,.28)!important; } body.dark #tasbeehTodayEvents .tasbeehStatus-saad, body[data-theme="dark"] #tasbeehTodayEvents .tasbeehStatus-saad, body.dark #tasbeehTodayEvents .tasbeehMiniEvent.saad, body[data-theme="dark"] #tasbeehTodayEvents .tasbeehMiniEvent.saad{ background:#0e2a17!important; color:#9ff0b8!important; border-color:rgba(159,240,184,.28)!important; } body.dark #tasbeehTodayEvents .tasbeehStatus-mixed, body[data-theme="dark"] #tasbeehTodayEvents .tasbeehStatus-mixed, body.dark #tasbeehTodayEvents .tasbeehMiniEvent.mixed, body[data-theme="dark"] #tasbeehTodayEvents .tasbeehMiniEvent.mixed{ background:#2a2f2c!important; color:#cfd6d1!important; border-color:rgba(207,214,209,.22)!important; } body.dark #tasbeehTodayEvents .tasbeehStatus-fasting, body[data-theme="dark"] #tasbeehTodayEvents .tasbeehStatus-fasting, body.dark #tasbeehTodayEvents .tasbeehMiniEvent.fasting, body[data-theme="dark"] #tasbeehTodayEvents .tasbeehMiniEvent.fasting{ background:#10263a!important; color:#9fd0ff!important; border-color:rgba(159,208,255,.25)!important; } /* Stage211: inline status badge colors fallback + tighter spacing */ #tasbeehTodayEvents.tasbeehTodayEvents{ justify-content:center!important; gap:4px!important; column-gap:4px!important; row-gap:4px!important; } #tasbeehTodayEvents .tasbeehMiniEvent, #tasbeehTodayEvents .tasbeehStatusBadge{ margin:0!important; min-width:58px!important; min-height:28px!important; padding:6px 10px!important; border-width:1px!important; border-style:solid!important; } #tasbeehTodayEvents .tasbeehStatusBadge + .tasbeehStatusBadge{ margin-inline-start:0!important; } #tasbeehTodayEvents .tasbeehStatusBadge[data-status="nahs"]{ background:#ffe1e1!important; color:#b00020!important; border-color:rgba(176,0,32,.28)!important; } #tasbeehTodayEvents .tasbeehStatusBadge[data-status="saad"]{ background:#e4ffed!important; color:#078334!important; border-color:rgba(7,131,52,.28)!important; } #tasbeehTodayEvents .tasbeehStatusBadge[data-status="mixed"]{ background:#eeeeee!important; color:#555!important; border-color:rgba(80,80,80,.24)!important; } #tasbeehTodayEvents .tasbeehStatusBadge[data-status="fasting"]{ background:#e6f2ff!important; color:#1b5f9e!important; border-color:rgba(27,95,158,.28)!important; } body.dark #tasbeehTodayEvents .tasbeehStatusBadge[data-status="nahs"], body[data-theme="dark"] #tasbeehTodayEvents .tasbeehStatusBadge[data-status="nahs"]{ background:#3a1118!important; color:#ff8a9d!important; border-color:rgba(255,138,157,.30)!important; } body.dark #tasbeehTodayEvents .tasbeehStatusBadge[data-status="saad"], body[data-theme="dark"] #tasbeehTodayEvents .tasbeehStatusBadge[data-status="saad"]{ background:#0e2a17!important; color:#9ff0b8!important; border-color:rgba(159,240,184,.30)!important; } body.dark #tasbeehTodayEvents .tasbeehStatusBadge[data-status="mixed"], body[data-theme="dark"] #tasbeehTodayEvents .tasbeehStatusBadge[data-status="mixed"]{ background:#2a2f2c!important; color:#cfd6d1!important; border-color:rgba(207,214,209,.25)!important; } body.dark #tasbeehTodayEvents .tasbeehStatusBadge[data-status="fasting"], body[data-theme="dark"] #tasbeehTodayEvents .tasbeehStatusBadge[data-status="fasting"]{ background:#10263a!important; color:#9fd0ff!important; border-color:rgba(159,208,255,.28)!important; } /* Stage212: show surahs/duas always above tasbeeh list */ .tasbeehOtherPanel{ display:block!important; margin:6px 0 10px!important; } .tasbeehOtherPanel[hidden]{ display:none!important; } .tasbeehOtherPanel h3{ text-align:center!important; font-size:15px!important; margin:0 0 8px!important; } .tasbeehOtherItem{ grid-template-columns:90px 1fr!important; padding:7px 9px!important; margin-top:5px!important; } .tasbeehOtherItem strong, .tasbeehOtherItem span{ font-size:13px!important; } .tasbeehHeadBtns{ gap:0!important; } /* Stage214: clear today's tasbeeh notifications button */ .tasbeehClearTodayBtn{ border:0!important; border-radius:14px!important; background:#b00020!important; color:#fff!important; font-weight:1000!important; padding:11px 14px!important; cursor:pointer!important; width:100%!important; } .tasbeehClearHint{ display:block!important; color:#6b7280!important; font-weight:800!important; line-height:1.7!important; margin-top:-4px!important; } body.dark .tasbeehClearHint, body[data-theme="dark"] .tasbeehClearHint{ color:#c9d0cb!important; } /* Stage215: delete button for user-added tasbeeh only */ .tasbeehChoiceWrap{ display:flex!important; align-items:stretch!important; gap:6px!important; width:100%!important; } .tasbeehChoiceWrap .tasbeehChoice{ flex:1 1 auto!important; } .tasbeehDeleteCustom{ flex:0 0 36px!important; width:36px!important; min-width:36px!important; border:0!important; border-radius:14px!important; background:#d40022!important; color:#fff!important; font-size:24px!important; font-weight:1000!important; line-height:1!important; cursor:pointer!important; display:flex!important; align-items:center!important; justify-content:center!important; box-shadow:0 6px 14px rgba(212,0,34,.20)!important; } .tasbeehDeleteCustom:hover, .tasbeehDeleteCustom:focus{ background:#a9001b!important; outline:none!important; } body.dark .tasbeehDeleteCustom, body[data-theme="dark"] .tasbeehDeleteCustom{ background:#ff3954!important; color:#fff!important; } /* Stage216: mobile tap-open fix for floating tasbeeh icon */ .tasbeehFloatBtn{ z-index:2147483000!important; pointer-events:auto!important; -webkit-tap-highlight-color:transparent!important; } .tasbeehOverlay{ z-index:2147483001!important; } @media(max-width:640px){ .tasbeehFloatBtn{ width:62px!important; height:62px!important; min-width:62px!important; min-height:62px!important; } .tasbeehIcon{ font-size:44px!important; } } /* Stage217: tasbeeh dark/mobile smart text + number-only badge + home events refresh styling */ .tasbeehOverlay, .tasbeehModal, .tasbeehModal *{ -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; } .tasbeehModal{ color:var(--tasbeeh-text,#17351f)!important; } .tasbeehModal, .tasbeehModal .tasbeehChoice, .tasbeehModal .tasbeehOtherItem, .tasbeehModal .tasbeehSettings{ --tasbeeh-text:#17351f; --tasbeeh-muted:#5b6b5f; --tasbeeh-strong:#0f7a3a; } body.dark .tasbeehModal, body[data-theme="dark"] .tasbeehModal, body.dark .tasbeehModal .tasbeehChoice, body[data-theme="dark"] .tasbeehModal .tasbeehChoice, body.dark .tasbeehModal .tasbeehOtherItem, body[data-theme="dark"] .tasbeehModal .tasbeehOtherItem, body.dark .tasbeehModal .tasbeehSettings, body[data-theme="dark"] .tasbeehModal .tasbeehSettings{ --tasbeeh-text:#f3fff6; --tasbeeh-muted:#d7e6dc; --tasbeeh-strong:#9ff0b8; color:#f3fff6!important; } .tasbeehModal p, .tasbeehModal span, .tasbeehModal small, .tasbeehModal label, .tasbeehModal input, .tasbeehModal select, .tasbeehModal .tasbeehChoice span, .tasbeehModal .tasbeehOtherItem span{ color:var(--tasbeeh-text)!important; } .tasbeehModal .tasbeehChoice small, .tasbeehModal .tasbeehOtherItem small, .tasbeehModal .tasbeehClearHint{ color:var(--tasbeeh-muted)!important; } .tasbeehModal h2, .tasbeehModal h3, .tasbeehModal h4, .tasbeehModal .tasbeehOtherItem strong{ color:var(--tasbeeh-strong)!important; } .tasbeehRemainNumber, .tasbeehChoice small em{ color:#d40022!important; } .tasbeehCompleteText{ color:#078334!important; } body.dark .tasbeehCompleteText, body[data-theme="dark"] .tasbeehCompleteText{ color:#9ff0b8!important; } .tasbeehBadge{ background:transparent!important; border:0!important; box-shadow:none!important; color:#d40022!important; font-size:20px!important; font-weight:1000!important; min-width:auto!important; width:auto!important; height:auto!important; line-height:1!important; padding:0!important; text-shadow:0 1px 2px rgba(255,255,255,.85),0 2px 6px rgba(0,0,0,.22)!important; } .tasbeehBadge[hidden], .tasbeehBadge.isZero{ display:none!important; } body.dark .tasbeehBadge, body[data-theme="dark"] .tasbeehBadge{ color:#ff4962!important; text-shadow:0 2px 7px rgba(0,0,0,.65)!important; } @media(max-width:640px){ .tasbeehModal, .tasbeehModal *{ color:var(--tasbeeh-text,#17351f); } body.dark .tasbeehModal, body[data-theme="dark"] .tasbeehModal{ background:#08130d!important; color:#f3fff6!important; } } /* Stage222 standalone Tasbeeh page */ .tasbeehPageBody{ min-height:100vh; background:var(--page-bg,#f6faf7); color:#17351f; } .tasbeehPageShell{ width:min(1180px,94vw); margin:22px auto 56px; display:grid; gap:16px; } .tasbeehPageHero, .tasbeehPageStatsCard, .tasbeehPageOther, .tasbeehPageListCard, .tasbeehPageCounterCard, .tasbeehPageSettingsCard, .tasbeehPageAddCard{ background:rgba(255,255,255,.92); border:1px solid rgba(15,122,58,.13); border-radius:28px; box-shadow:0 18px 50px rgba(15,58,31,.08); } .tasbeehPageHero{ padding:22px 24px; display:flex; align-items:center; justify-content:space-between; gap:14px; } .tasbeehPageEyebrow{ display:inline-flex; color:#806019; font-weight:1000; margin-bottom:6px; } .tasbeehPageHero h1{ margin:0; color:#0f7a3a; font-size:clamp(28px,5vw,48px); line-height:1.25; font-weight:1000; } .tasbeehPageHero p{ margin:7px 0 0; color:#5b6b5f; font-weight:900; } #tasbeehPageRefresh{ border:0; border-radius:18px; background:#0f7a3a; color:#fff; padding:12px 16px; font-weight:1000; cursor:pointer; } .tasbeehPageStatuses{ display:flex; justify-content:center; align-items:center; gap:6px; flex-wrap:wrap; } .tasbeehPageStatus{ min-width:70px; min-height:30px; display:inline-flex; align-items:center; justify-content:center; border-radius:999px; padding:6px 13px; font-weight:1000; border:1px solid transparent; } .tasbeehPageStatus.tasbeehStatus-nahs{background:#ffe1e1;color:#b00020;border-color:rgba(176,0,32,.28)} .tasbeehPageStatus.tasbeehStatus-saad{background:#e4ffed;color:#078334;border-color:rgba(7,131,52,.28)} .tasbeehPageStatus.tasbeehStatus-mixed{background:#eee;color:#555;border-color:rgba(80,80,80,.24)} .tasbeehPageStatus.tasbeehStatus-fasting{background:#e6f2ff;color:#1b5f9e;border-color:rgba(27,95,158,.28)} .tasbeehPageStatsCard{ padding:16px; } .tasbeehPageStats{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; } .tasbeehPageStats div{ text-align:center; background:rgba(15,122,58,.07); border-radius:20px; padding:14px 10px; } .tasbeehPageStats strong{ display:block; color:#0f7a3a; font-size:30px; font-weight:1000; line-height:1; } .tasbeehPageStats span{ display:block; margin-top:6px; font-weight:900; color:#5b6b5f; } .tasbeehPageProgress{ margin-top:12px; height:12px; border-radius:999px; background:rgba(15,122,58,.12); overflow:hidden; } .tasbeehPageProgress span{ display:block; height:100%; width:0%; border-radius:inherit; background:linear-gradient(90deg,#0f7a3a,#55b56f); transition:width .25s ease; } .tasbeehPageOther{ padding:16px; } .tasbeehPageOther h2, .tasbeehPageListCard h2, .tasbeehPageCounterCard h2, .tasbeehPageSettingsCard h2, .tasbeehPageAddCard h2{ margin:0 0 12px; color:#0f7a3a; font-size:20px; font-weight:1000; } .tasbeehPageOther article{ display:grid; grid-template-columns:115px 1fr; gap:8px; align-items:center; background:rgba(15,122,58,.06); border-radius:18px; padding:10px 12px; margin-top:8px; } .tasbeehPageOther strong{ color:#0f7a3a; font-weight:1000; } .tasbeehPageOther span{ font-weight:1000; } .tasbeehPageOther small{ grid-column:2; color:#6b7280; font-weight:800; } .tasbeehPageGrid{ display:grid; grid-template-columns:minmax(0,1fr) 360px; gap:16px; align-items:start; } .tasbeehPageListCard, .tasbeehPageCounterCard, .tasbeehPageSettingsCard, .tasbeehPageAddCard{ padding:16px; } .tasbeehPageSide{ display:grid; gap:16px; position:sticky; top:14px; } .tasbeehPageList{ display:grid; gap:8px; } .tasbeehPageChoiceWrap{ display:flex; gap:7px; align-items:stretch; } .tasbeehPageChoice{ flex:1; border:1px solid rgba(15,122,58,.14); border-radius:20px; background:#fff; color:#17351f; padding:12px 14px; display:flex; align-items:center; justify-content:space-between; gap:12px; text-align:right; cursor:pointer; } .tasbeehPageChoice span{ font-weight:1000; line-height:1.7; } .tasbeehPageChoice small{ white-space:nowrap; color:#d40022; font-weight:1000; } .tasbeehPageChoice small em{ font-style:normal; font-size:25px; } .tasbeehPageChoice small b{ color:#078334; font-size:19px; } .tasbeehPageChoice.selected{ background:linear-gradient(135deg,#eaffef,#fff); box-shadow:inset 0 0 0 2px #0f7a3a; } .tasbeehPageChoice.complete{ background:#f2fff5; } .tasbeehPageDelete{ width:38px; border:0; border-radius:16px; background:#d40022; color:#fff; font-size:25px; font-weight:1000; cursor:pointer; } #tasbeehPageBigBtn{ width:100%; min-height:116px; border:0; border-radius:30px; background:linear-gradient(135deg,#0f7a3a,#0a5d30); color:#fff; font-size:clamp(22px,3vw,30px); font-weight:1000; line-height:1.6; padding:18px; cursor:pointer; } #tasbeehPageBigBtn:disabled{ background:#078334; } #tasbeehPageBigSub{ margin:12px 0 0; text-align:center; color:#806019; font-weight:1000; font-size:18px; } .tasbeehPageSettingsCard, .tasbeehPageAddCard{ display:grid; gap:10px; } .tasbeehPageSettingsCard label, .tasbeehPageAddCard label, .tasbeehPageCheck{ display:grid; gap:6px; font-weight:1000; color:#17351f; } .tasbeehPageSettingsCard select, .tasbeehPageAddCard input{ width:100%; box-sizing:border-box; border:1px solid rgba(15,122,58,.18); border-radius:16px; padding:12px; background:#fff; color:#17351f; font-weight:900; } .tasbeehPageCheck{ display:flex!important; align-items:center; gap:8px; } .tasbeehPageClearToday, #tasbeehPageAddBtn{ border:0; border-radius:16px; padding:12px 14px; color:#fff; font-weight:1000; cursor:pointer; } .tasbeehPageClearToday{background:#b00020} #tasbeehPageAddBtn{background:#0f7a3a} body.dark .tasbeehPageBody, body[data-theme="dark"].tasbeehPageBody{ background:#07120c; color:#f3fff6; } body.dark .tasbeehPageHero, body.dark .tasbeehPageStatsCard, body.dark .tasbeehPageOther, body.dark .tasbeehPageListCard, body.dark .tasbeehPageCounterCard, body.dark .tasbeehPageSettingsCard, body.dark .tasbeehPageAddCard, body[data-theme="dark"] .tasbeehPageHero, body[data-theme="dark"] .tasbeehPageStatsCard, body[data-theme="dark"] .tasbeehPageOther, body[data-theme="dark"] .tasbeehPageListCard, body[data-theme="dark"] .tasbeehPageCounterCard, body[data-theme="dark"] .tasbeehPageSettingsCard, body[data-theme="dark"] .tasbeehPageAddCard{ background:#0d1f14; border-color:rgba(255,255,255,.10); color:#f3fff6; } body.dark .tasbeehPageHero h1, body.dark .tasbeehPageOther h2, body.dark .tasbeehPageListCard h2, body.dark .tasbeehPageCounterCard h2, body.dark .tasbeehPageSettingsCard h2, body.dark .tasbeehPageAddCard h2, body[data-theme="dark"] .tasbeehPageHero h1, body[data-theme="dark"] .tasbeehPageOther h2, body[data-theme="dark"] .tasbeehPageListCard h2, body[data-theme="dark"] .tasbeehPageCounterCard h2, body[data-theme="dark"] .tasbeehPageSettingsCard h2, body[data-theme="dark"] .tasbeehPageAddCard h2{ color:#9ff0b8; } body.dark .tasbeehPageChoice, body[data-theme="dark"] .tasbeehPageChoice, body.dark .tasbeehPageSettingsCard select, body[data-theme="dark"] .tasbeehPageSettingsCard select, body.dark .tasbeehPageAddCard input, body[data-theme="dark"] .tasbeehPageAddCard input{ background:#102119; color:#f3fff6; border-color:rgba(255,255,255,.12); } body.dark .tasbeehPageHero p, body.dark .tasbeehPageStats span, body.dark .tasbeehPageSettingsCard label, body.dark .tasbeehPageAddCard label, body[data-theme="dark"] .tasbeehPageHero p, body[data-theme="dark"] .tasbeehPageStats span, body[data-theme="dark"] .tasbeehPageSettingsCard label, body[data-theme="dark"] .tasbeehPageAddCard label{ color:#d7e6dc; } @media(max-width:900px){ .tasbeehPageGrid{ grid-template-columns:1fr; } .tasbeehPageSide{ position:static; } } @media(max-width:640px){ .tasbeehPageShell{ width:94vw; margin-top:12px; gap:12px; } .tasbeehPageHero{ display:grid; text-align:center; justify-items:center; padding:18px 14px; } .tasbeehPageStats{ grid-template-columns:repeat(3,1fr); gap:6px; } .tasbeehPageStats strong{ font-size:24px; } .tasbeehPageOther article{ grid-template-columns:1fr; } .tasbeehPageOther small{ grid-column:auto; } .tasbeehPageChoice{ display:grid; } .tasbeehPageChoice small{ white-space:normal; } #tasbeehPageBigBtn{ min-height:92px; } } /* Stage223 standalone Tasbeeh page layout/audio/text polish */ .tasbeehPageDateRow{ display:flex; align-items:center; justify-content:center; gap:8px; flex-wrap:wrap; margin-top:8px; } .tasbeehPageDateRow #tasbeehPageDate{ margin:0!important; } .tasbeehPageDateRow .tasbeehPageStatuses{ display:inline-flex!important; margin:0!important; } .tasbeehPageDateRow .tasbeehPageStatuses[hidden]{ display:none!important; } .tasbeehPageOther{ width:min(720px,100%)!important; justify-self:center!important; padding:10px 12px!important; border-radius:22px!important; } .tasbeehPageOther h2{ font-size:16px!important; text-align:center!important; margin-bottom:7px!important; } .tasbeehPageOther article{ grid-template-columns:95px 1fr!important; padding:7px 9px!important; margin-top:6px!important; border-radius:14px!important; } .tasbeehPageOther strong, .tasbeehPageOther span, .tasbeehPageOther small{ font-size:13px!important; } .tasbeehPageStatsBottom{ order:99!important; margin-top:4px!important; } .tasbeehPageStatsBottom h2{ margin:0 0 12px!important; color:#0f7a3a!important; font-size:22px!important; font-weight:1000!important; text-align:center!important; } .tasbeehPageChoice span{ font-size:20px!important; font-weight:1000!important; letter-spacing:.01em!important; color:#082d16!important; } .tasbeehPageChoice small{ font-size:18px!important; } .tasbeehPageChoice small em{ font-size:30px!important; } .tasbeehPageListCard h2, .tasbeehPageCounterCard h2, .tasbeehPageSettingsCard h2, .tasbeehPageAddCard h2{ font-size:23px!important; } #tasbeehPageBigBtn{ font-size:clamp(24px,3.5vw,34px)!important; } .tasbeehPageSettingsCard select, .tasbeehPageSettingsCard input, .tasbeehPageAddCard input{ background:#fff!important; color:#17351f!important; border:1px solid rgba(15,122,58,.28)!important; } .tasbeehPageSettingsCard select option{ background:#fff!important; color:#17351f!important; } .tasbeehPageCustomSoundName{ display:block; color:#5b6b5f; font-weight:900; line-height:1.6; } body.dark .tasbeehPageChoice span, body[data-theme="dark"] .tasbeehPageChoice span{ color:#f3fff6!important; } body.dark .tasbeehPageSettingsCard select, body[data-theme="dark"] .tasbeehPageSettingsCard select, body.dark .tasbeehPageSettingsCard input, body[data-theme="dark"] .tasbeehPageSettingsCard input, body.dark .tasbeehPageAddCard input, body[data-theme="dark"] .tasbeehPageAddCard input{ background:#ffffff!important; color:#17351f!important; border-color:rgba(159,240,184,.45)!important; } body.dark .tasbeehPageSettingsCard select option, body[data-theme="dark"] .tasbeehPageSettingsCard select option{ background:#ffffff!important; color:#17351f!important; } body.dark .tasbeehPageCustomSoundName, body[data-theme="dark"] .tasbeehPageCustomSoundName{ color:#d7e6dc!important; } body.dark .tasbeehPageStatsBottom h2, body[data-theme="dark"] .tasbeehPageStatsBottom h2{ color:#9ff0b8!important; } @media(max-width:640px){ .tasbeehPageChoice span{font-size:19px!important} .tasbeehPageOther{width:100%!important} .tasbeehPageOther article{grid-template-columns:1fr!important;text-align:center!important} .tasbeehPageDateRow{gap:6px!important} } /* Stage224: professional standalone tasbeeh layout and sound picker */ .tasbeehPageGrid{ display:grid!important; grid-template-columns:minmax(0,1fr) 390px!important; gap:18px!important; align-items:start!important; direction:ltr!important; } .tasbeehPageGrid > *{ direction:rtl!important; } .tasbeehPageRight{ grid-column:2!important; display:grid!important; gap:16px!important; position:sticky!important; top:14px!important; } .tasbeehPageListCard{ grid-column:1!important; } .tasbeehPageOther{ width:100%!important; justify-self:stretch!important; padding:16px!important; border-radius:28px!important; } .tasbeehPageOther h2{ font-size:24px!important; text-align:right!important; margin-bottom:12px!important; } .tasbeehPageOther article{ grid-template-columns:125px 1fr!important; padding:13px 14px!important; margin-top:9px!important; border-radius:20px!important; } .tasbeehPageOther strong, .tasbeehPageOther span{ font-size:20px!important; line-height:1.7!important; } .tasbeehPageOther small{ font-size:17px!important; line-height:1.7!important; } .tasbeehPageControls{ display:grid!important; grid-template-columns:minmax(0,1fr) minmax(280px,380px)!important; gap:16px!important; align-items:start!important; } .tasbeehPageSettingsCard, .tasbeehPageAddCard{ min-height:100%!important; } .tasbeehPageSoundPanel{ display:grid!important; gap:12px!important; padding:14px!important; border-radius:24px!important; background:linear-gradient(135deg,rgba(15,122,58,.08),rgba(255,255,255,.78))!important; border:1px solid rgba(15,122,58,.16)!important; } .tasbeehPageSoundHead{ display:flex!important; align-items:center!important; justify-content:space-between!important; gap:10px!important; } .tasbeehPageSoundHead strong{ color:#0f7a3a!important; font-size:20px!important; font-weight:1000!important; } .tasbeehPageSoundHead span{ color:#806019!important; font-size:14px!important; font-weight:900!important; } .tasbeehPageSoundNative{ position:absolute!important; width:1px!important; height:1px!important; opacity:0!important; pointer-events:none!important; } .tasbeehPageSoundGrid{ display:grid!important; grid-template-columns:repeat(4,minmax(0,1fr))!important; gap:8px!important; } .tasbeehPageSoundChoice{ border:1px solid rgba(15,122,58,.18)!important; background:#fff!important; color:#17351f!important; border-radius:18px!important; min-height:72px!important; padding:9px 6px!important; cursor:pointer!important; display:grid!important; place-items:center!important; gap:4px!important; box-shadow:0 8px 20px rgba(15,58,31,.06)!important; } .tasbeehPageSoundChoice b{ width:30px!important; height:30px!important; border-radius:50%!important; display:grid!important; place-items:center!important; background:rgba(15,122,58,.10)!important; color:#0f7a3a!important; font-size:18px!important; line-height:1!important; } .tasbeehPageSoundChoice span{ color:#17351f!important; font-weight:1000!important; font-size:13px!important; line-height:1.25!important; text-align:center!important; } .tasbeehPageSoundChoice.selected{ background:linear-gradient(135deg,#0f7a3a,#0a5d30)!important; color:#fff!important; border-color:transparent!important; box-shadow:0 12px 28px rgba(15,122,58,.22)!important; } .tasbeehPageSoundChoice.selected b{ background:rgba(255,255,255,.18)!important; color:#fff!important; } .tasbeehPageSoundChoice.selected span{ color:#fff!important; } .tasbeehPageCustomSoundBox{ display:flex!important; align-items:center!important; justify-content:center!important; min-height:52px!important; border:1px dashed rgba(15,122,58,.38)!important; border-radius:18px!important; background:rgba(15,122,58,.06)!important; color:#0f7a3a!important; font-weight:1000!important; cursor:pointer!important; text-align:center!important; padding:10px!important; } .tasbeehPageCustomSoundBox input{ display:none!important; } .tasbeehPageSoundToggle{ background:rgba(15,122,58,.07)!important; border-radius:18px!important; padding:12px 14px!important; } .tasbeehPageSoundToggle span{ color:#17351f!important; font-weight:1000!important; } .tasbeehPageChoice span{ font-size:22px!important; line-height:1.9!important; } .tasbeehPageListCard h2, .tasbeehPageCounterCard h2, .tasbeehPageSettingsCard h2, .tasbeehPageAddCard h2{ font-size:25px!important; } body.dark .tasbeehPageSoundPanel, body[data-theme="dark"] .tasbeehPageSoundPanel{ background:linear-gradient(135deg,rgba(159,240,184,.10),rgba(13,31,20,.95))!important; border-color:rgba(159,240,184,.18)!important; } body.dark .tasbeehPageSoundChoice, body[data-theme="dark"] .tasbeehPageSoundChoice{ background:#fff!important; color:#17351f!important; } body.dark .tasbeehPageSoundChoice span, body[data-theme="dark"] .tasbeehPageSoundChoice span{ color:#17351f!important; } body.dark .tasbeehPageSoundChoice.selected, body[data-theme="dark"] .tasbeehPageSoundChoice.selected{ background:linear-gradient(135deg,#0f7a3a,#063d22)!important; } body.dark .tasbeehPageSoundChoice.selected span, body[data-theme="dark"] .tasbeehPageSoundChoice.selected span{ color:#fff!important; } body.dark .tasbeehPageCustomSoundBox, body[data-theme="dark"] .tasbeehPageCustomSoundBox, body.dark .tasbeehPageSoundToggle, body[data-theme="dark"] .tasbeehPageSoundToggle{ background:rgba(159,240,184,.10)!important; border-color:rgba(159,240,184,.22)!important; } body.dark .tasbeehPageSoundToggle span, body[data-theme="dark"] .tasbeehPageSoundToggle span{ color:#f3fff6!important; } @media(max-width:980px){ .tasbeehPageGrid, .tasbeehPageControls{ grid-template-columns:1fr!important; direction:rtl!important; } .tasbeehPageRight, .tasbeehPageListCard{ grid-column:auto!important; position:static!important; } .tasbeehPageSoundGrid{ grid-template-columns:repeat(3,minmax(0,1fr))!important; } } @media(max-width:640px){ .tasbeehPageGrid{ gap:12px!important; } .tasbeehPageRight{ order:1!important; } .tasbeehPageListCard{ order:2!important; } .tasbeehPageControls{ gap:12px!important; } .tasbeehPageSoundGrid{ grid-template-columns:repeat(2,minmax(0,1fr))!important; } .tasbeehPageOther article{ grid-template-columns:1fr!important; text-align:center!important; } .tasbeehPageOther strong, .tasbeehPageOther span{ font-size:20px!important; } } /* Stage225: balanced standalone tasbeeh page layout - fill blanks */ .tasbeehPageBody{ overflow-x:hidden!important; } .tasbeehPageShell{ width:min(1280px,96vw)!important; margin:16px auto 40px!important; gap:14px!important; } .tasbeehPageHero{ min-height:128px!important; padding:22px 28px!important; display:grid!important; grid-template-columns:1fr auto!important; align-items:center!important; } .tasbeehPageHero > div{ display:grid!important; gap:4px!important; } .tasbeehPageHero h1{ font-size:clamp(34px,4vw,58px)!important; } .tasbeehPageDateRow{ justify-content:flex-start!important; } .tasbeehPageGrid{ display:grid!important; grid-template-columns:minmax(0,1.55fr) minmax(350px,.9fr)!important; grid-template-areas:"list right"!important; gap:14px!important; align-items:stretch!important; direction:ltr!important; } .tasbeehPageGrid > *{ direction:rtl!important; } .tasbeehPageListCard{ grid-area:list!important; min-height:640px!important; padding:18px!important; display:flex!important; flex-direction:column!important; } .tasbeehPageRight{ grid-area:right!important; display:grid!important; grid-template-rows:minmax(220px,.72fr) minmax(300px,1fr)!important; gap:14px!important; position:static!important; height:100%!important; } .tasbeehPageOther, .tasbeehPageCounterCard{ height:100%!important; box-sizing:border-box!important; } .tasbeehPageOther{ width:100%!important; overflow:auto!important; max-height:none!important; padding:18px!important; } .tasbeehPageOther h2{ font-size:26px!important; text-align:center!important; } .tasbeehPageOther article{ grid-template-columns:1fr!important; text-align:center!important; padding:12px 14px!important; } .tasbeehPageOther strong, .tasbeehPageOther span{ font-size:22px!important; } .tasbeehPageCounterCard{ display:flex!important; flex-direction:column!important; justify-content:space-between!important; padding:18px!important; } #tasbeehPageBigBtn{ flex:1!important; min-height:220px!important; display:flex!important; align-items:center!important; justify-content:center!important; text-align:center!important; } #tasbeehPageBigSub{ min-height:42px!important; } .tasbeehPageList{ flex:1!important; display:grid!important; gap:10px!important; align-content:start!important; } .tasbeehPageChoice{ min-height:72px!important; padding:14px 16px!important; } .tasbeehPageChoice span{ font-size:23px!important; } .tasbeehPageChoice small{ min-width:94px!important; text-align:center!important; } .tasbeehPageControls{ display:grid!important; grid-template-columns:minmax(0,1.35fr) minmax(260px,.72fr) minmax(300px,.85fr)!important; gap:14px!important; align-items:stretch!important; } .tasbeehPageSettingsCard, .tasbeehPageAddCard, .tasbeehPageStatsCard{ height:100%!important; min-height:285px!important; box-sizing:border-box!important; } .tasbeehPageSettingsCard{ grid-column:auto!important; } .tasbeehPageSoundPanel{ height:auto!important; } .tasbeehPageSoundGrid{ grid-template-columns:repeat(6,minmax(0,1fr))!important; } .tasbeehPageSoundChoice{ min-height:66px!important; } .tasbeehPageAddCard{ display:grid!important; grid-template-rows:auto 1fr auto auto!important; gap:12px!important; } .tasbeehPageAddCard input{ min-height:50px!important; font-size:18px!important; } #tasbeehPageAddBtn{ min-height:50px!important; } .tasbeehPageStatsBottom{ margin-top:0!important; display:flex!important; flex-direction:column!important; justify-content:space-between!important; } .tasbeehPageStats{ grid-template-columns:1fr!important; gap:8px!important; } .tasbeehPageStats div{ display:flex!important; align-items:center!important; justify-content:space-between!important; text-align:initial!important; padding:13px 16px!important; } .tasbeehPageStats strong{ font-size:32px!important; } .tasbeehPageProgress{ height:16px!important; } .tasbeehPageStatuses{ justify-content:flex-start!important; } @media(min-width:1100px){ .tasbeehPageList{ grid-template-columns:1fr 1fr!important; } .tasbeehPageChoiceWrap{ min-width:0!important; } .tasbeehPageChoice{ min-width:0!important; } } @media(max-width:1080px){ .tasbeehPageGrid{ grid-template-columns:1fr!important; grid-template-areas:"right" "list"!important; direction:rtl!important; } .tasbeehPageRight{ grid-template-columns:1fr 1fr!important; grid-template-rows:auto!important; } .tasbeehPageListCard{ min-height:auto!important; } #tasbeehPageBigBtn{ min-height:160px!important; } .tasbeehPageControls{ grid-template-columns:1fr!important; } .tasbeehPageSettingsCard, .tasbeehPageAddCard, .tasbeehPageStatsCard{ min-height:auto!important; } .tasbeehPageStats{ grid-template-columns:repeat(3,1fr)!important; } .tasbeehPageStats div{ display:block!important; text-align:center!important; } } @media(max-width:700px){ .tasbeehPageShell{ width:94vw!important; margin-top:10px!important; } .tasbeehPageHero{ min-height:auto!important; grid-template-columns:1fr!important; justify-items:center!important; text-align:center!important; padding:18px 14px!important; } .tasbeehPageDateRow, .tasbeehPageStatuses{ justify-content:center!important; } .tasbeehPageRight{ grid-template-columns:1fr!important; } .tasbeehPageOther{ order:1!important; } .tasbeehPageCounterCard{ order:2!important; } .tasbeehPageListCard{ order:3!important; } .tasbeehPageList{ grid-template-columns:1fr!important; } .tasbeehPageChoice{ min-height:68px!important; } .tasbeehPageChoice span{ font-size:21px!important; } .tasbeehPageSoundGrid{ grid-template-columns:repeat(2,minmax(0,1fr))!important; } .tasbeehPageStats{ grid-template-columns:1fr!important; } } /* Stage226: tasbeeh requested UI refinements */ #tasbeehPageTopClear{ border:0!important; border-radius:18px!important; background:#b00020!important; color:#fff!important; padding:12px 16px!important; font-weight:1000!important; cursor:pointer!important; box-shadow:0 10px 24px rgba(176,0,32,.18)!important; } .tasbeehPageList{ grid-template-columns:1fr!important; } .tasbeehPageChoiceWrap{ width:100%!important; } .tasbeehPageChoice{ width:100%!important; min-height:76px!important; border-color:rgba(15,122,58,.12)!important; box-shadow:none!important; } .tasbeehPageChoiceWrap:nth-child(odd) .tasbeehPageChoice{ background:#ffffff!important; } .tasbeehPageChoiceWrap:nth-child(even) .tasbeehPageChoice{ background:#eeeeee!important; } .tasbeehPageChoice.selected{ box-shadow:inset 0 0 0 3px #0f7a3a!important; background:linear-gradient(135deg,#eaffef,#fff)!important; } .tasbeehPageChoice.complete{ opacity:.86!important; } body.dark .tasbeehPageChoiceWrap:nth-child(odd) .tasbeehPageChoice, body[data-theme="dark"] .tasbeehPageChoiceWrap:nth-child(odd) .tasbeehPageChoice{ background:#ffffff!important; } body.dark .tasbeehPageChoiceWrap:nth-child(even) .tasbeehPageChoice, body[data-theme="dark"] .tasbeehPageChoiceWrap:nth-child(even) .tasbeehPageChoice{ background:#eeeeee!important; } body.dark .tasbeehPageChoice span, body[data-theme="dark"] .tasbeehPageChoice span{ color:#082d16!important; } .tasbeehPageStats{ grid-template-columns:repeat(3,1fr)!important; gap:10px!important; } .tasbeehPageStats div{ display:block!important; text-align:center!important; background:rgba(15,122,58,.07)!important; border-radius:20px!important; padding:14px 10px!important; } .tasbeehPageStats strong{ display:block!important; font-size:30px!important; } .tasbeehPageStats span{ display:block!important; margin-top:6px!important; } .tasbeehPageSoundGrid{ display:flex!important; overflow-x:auto!important; gap:8px!important; padding:8px 2px 12px!important; scroll-snap-type:x proximity!important; } .tasbeehPageSoundChoice{ flex:0 0 92px!important; min-height:64px!important; scroll-snap-align:center!important; } .tasbeehPageSoundToggleRow{ display:flex!important; align-items:center!important; justify-content:space-between!important; gap:12px!important; background:rgba(15,122,58,.07)!important; border-radius:18px!important; padding:12px 14px!important; } .tasbeehPageSoundToggleRow > span{ color:#17351f!important; font-size:17px!important; font-weight:1000!important; } .tasbeehPageSwitch{ position:relative!important; display:inline-block!important; width:70px!important; height:36px!important; flex:0 0 auto!important; } .tasbeehPageSwitch input{ opacity:0!important; width:0!important; height:0!important; } .tasbeehPageSwitch b{ position:absolute!important; cursor:pointer!important; inset:0!important; background:#b8b8b8!important; border-radius:999px!important; transition:.2s!important; box-shadow:inset 0 2px 6px rgba(0,0,0,.18)!important; } .tasbeehPageSwitch b:before{ content:"OFF"!important; position:absolute!important; width:30px!important; height:30px!important; right:3px!important; top:3px!important; background:#fff!important; border-radius:50%!important; display:grid!important; place-items:center!important; color:#777!important; font-size:8px!important; font-weight:1000!important; transition:.2s!important; } .tasbeehPageSwitch input:checked + b{ background:#0f7a3a!important; } .tasbeehPageSwitch input:checked + b:before{ transform:translateX(-34px)!important; content:"ON"!important; color:#0f7a3a!important; } .tasbeehPageCustomSoundRow{ display:grid!important; grid-template-columns:1fr auto!important; align-items:center!important; gap:12px!important; padding:12px!important; border:1px dashed rgba(15,122,58,.32)!important; border-radius:18px!important; background:rgba(15,122,58,.05)!important; } .tasbeehPageCustomSoundRow > span{ color:#17351f!important; font-weight:1000!important; line-height:1.6!important; } .tasbeehPageCustomSoundBox{ min-height:46px!important; padding:0!important; border:0!important; background:transparent!important; } .tasbeehPageCustomSoundBox b{ display:inline-flex!important; align-items:center!important; justify-content:center!important; min-height:46px!important; padding:0 18px!important; border-radius:16px!important; background:#0f7a3a!important; color:#fff!important; font-weight:1000!important; box-shadow:0 8px 20px rgba(15,122,58,.18)!important; } body.dark .tasbeehPageSoundToggleRow, body[data-theme="dark"] .tasbeehPageSoundToggleRow, body.dark .tasbeehPageCustomSoundRow, body[data-theme="dark"] .tasbeehPageCustomSoundRow{ background:rgba(159,240,184,.10)!important; border-color:rgba(159,240,184,.22)!important; } body.dark .tasbeehPageSoundToggleRow > span, body[data-theme="dark"] .tasbeehPageSoundToggleRow > span, body.dark .tasbeehPageCustomSoundRow > span, body[data-theme="dark"] .tasbeehPageCustomSoundRow > span{ color:#f3fff6!important; } @media(min-width:1100px){ .tasbeehPageList{ grid-template-columns:1fr!important; } } @media(max-width:640px){ .tasbeehPageCustomSoundRow{ grid-template-columns:1fr!important; text-align:center!important; } .tasbeehPageCustomSoundBox b{ width:100%!important; } .tasbeehPageStats{ grid-template-columns:1fr!important; } } /* Stage227: tasbeeh page global header + advanced add form */ .tasbeehPageBody .globalTopbar{ margin-bottom:10px!important; } .tasbeehPageControls{ grid-template-columns:minmax(0,1.1fr) minmax(340px,.9fr)!important; align-items:start!important; } .tasbeehPageAddStack{ display:grid!important; gap:14px!important; } .tasbeehPageAddCard{ display:grid!important; gap:12px!important; grid-template-rows:auto!important; } .tasbeehPageAddGrid{ display:grid!important; grid-template-columns:repeat(2,minmax(0,1fr))!important; gap:10px!important; } .tasbeehPageAddGrid:has(label:nth-child(3)){ grid-template-columns:repeat(3,minmax(0,1fr))!important; } .tasbeehPageAddCard label{ display:grid!important; gap:6px!important; color:#17351f!important; font-weight:1000!important; } .tasbeehPageAddCard textarea, .tasbeehPageAddCard select, .tasbeehPageAddCard input{ width:100%!important; box-sizing:border-box!important; border:1px solid rgba(15,122,58,.20)!important; border-radius:16px!important; padding:12px!important; background:#fff!important; color:#17351f!important; font-weight:900!important; font-size:16px!important; } .tasbeehPageAddCard textarea{ resize:vertical!important; min-height:84px!important; line-height:1.7!important; } .tasbeehPageAddCard label.isDisabled, .tasbeehPageAddCard label.isDimmed{ opacity:.55!important; } .tasbeehPageAddCard label.isDisabled input{ background:#eee!important; } .tasbeehPageStatsBottom{ min-height:auto!important; } body.dark .tasbeehPageAddCard label, body[data-theme="dark"] .tasbeehPageAddCard label{ color:#f3fff6!important; } body.dark .tasbeehPageAddCard textarea, body.dark .tasbeehPageAddCard select, body.dark .tasbeehPageAddCard input, body[data-theme="dark"] .tasbeehPageAddCard textarea, body[data-theme="dark"] .tasbeehPageAddCard select, body[data-theme="dark"] .tasbeehPageAddCard input{ background:#fff!important; color:#17351f!important; } @media(max-width:1080px){ .tasbeehPageControls{ grid-template-columns:1fr!important; } } @media(max-width:640px){ .tasbeehPageAddGrid, .tasbeehPageAddGrid:has(label:nth-child(3)){ grid-template-columns:1fr!important; } } /* Stage228: readable rulers + delete all custom additions + remaining-only count polish */ .tasbeehPageSoundGrid, .tasbeehPageSoundPanel, .tasbeehPageAddCard, .tasbeehPageSettingsCard{ color:#17351f!important; } .tasbeehPageSoundChoice, .tasbeehPageSoundChoice *, .tasbeehPageSoundChoice span, .tasbeehPageSoundChoice b{ color:#17351f!important; } .tasbeehPageSoundChoice{ background:#ffffff!important; } .tasbeehPageSoundChoice b{ background:rgba(15,122,58,.10)!important; color:#0f7a3a!important; } .tasbeehPageSoundChoice.selected, .tasbeehPageSoundChoice.selected *{ color:#ffffff!important; } .tasbeehPageSoundChoice.selected b{ background:rgba(255,255,255,.18)!important; color:#ffffff!important; } .tasbeehPageAddCard select, .tasbeehPageAddCard option, .tasbeehPageAddCard input, .tasbeehPageAddCard textarea, .tasbeehPageSettingsCard select, .tasbeehPageSettingsCard option, .tasbeehPageSettingsCard input{ background:#ffffff!important; color:#17351f!important; -webkit-text-fill-color:#17351f!important; } body.dark .tasbeehPageSoundChoice, body[data-theme="dark"] .tasbeehPageSoundChoice, body.dark .tasbeehPageSoundChoice *, body[data-theme="dark"] .tasbeehPageSoundChoice *, body.dark .tasbeehPageAddCard select, body.dark .tasbeehPageAddCard option, body.dark .tasbeehPageAddCard input, body.dark .tasbeehPageAddCard textarea, body[data-theme="dark"] .tasbeehPageAddCard select, body[data-theme="dark"] .tasbeehPageAddCard option, body[data-theme="dark"] .tasbeehPageAddCard input, body[data-theme="dark"] .tasbeehPageAddCard textarea{ color:#17351f!important; -webkit-text-fill-color:#17351f!important; } body.dark .tasbeehPageSoundChoice.selected, body.dark .tasbeehPageSoundChoice.selected *, body[data-theme="dark"] .tasbeehPageSoundChoice.selected, body[data-theme="dark"] .tasbeehPageSoundChoice.selected *{ color:#ffffff!important; -webkit-text-fill-color:#ffffff!important; } .tasbeehPageChoice small{ min-width:58px!important; display:flex!important; align-items:center!important; justify-content:center!important; } .tasbeehPageChoice small em{ font-size:34px!important; color:#d40022!important; font-weight:1000!important; } .tasbeehPageOther article.custom{ position:relative!important; padding-inline-start:48px!important; } .tasbeehPageDeleteOther{ position:absolute!important; left:10px!important; top:10px!important; width:32px!important; height:32px!important; border:0!important; border-radius:12px!important; background:#d40022!important; color:#ffffff!important; -webkit-text-fill-color:#ffffff!important; font-size:22px!important; font-weight:1000!important; line-height:1!important; cursor:pointer!important; } /* Stage229: next tasbeeh confirmation popup */ .tasbeehNextConfirmOverlay{ position:fixed!important; inset:0!important; z-index:999999!important; display:grid!important; place-items:center!important; background:rgba(0,0,0,.45)!important; padding:18px!important; } .tasbeehNextConfirmOverlay[hidden]{ display:none!important; } .tasbeehNextConfirmBox{ width:min(420px,94vw)!important; border-radius:28px!important; background:#ffffff!important; color:#17351f!important; border:1px solid rgba(15,122,58,.16)!important; box-shadow:0 30px 80px rgba(0,0,0,.28)!important; padding:24px!important; text-align:center!important; } .tasbeehNextConfirmBox h2{ margin:0 0 10px!important; color:#0f7a3a!important; font-size:28px!important; font-weight:1000!important; } .tasbeehNextConfirmBox p{ margin:0 0 18px!important; font-size:19px!important; font-weight:900!important; line-height:1.8!important; } .tasbeehNextConfirmActions{ display:grid!important; grid-template-columns:1fr 1fr!important; gap:10px!important; } .tasbeehNextConfirmActions button{ border:0!important; border-radius:18px!important; min-height:50px!important; font-size:19px!important; font-weight:1000!important; cursor:pointer!important; } #tasbeehNextYes{ background:#0f7a3a!important; color:#ffffff!important; } #tasbeehNextNo{ background:#eeeeee!important; color:#17351f!important; } body.dark .tasbeehNextConfirmBox, body[data-theme="dark"] .tasbeehNextConfirmBox{ background:#0d1f14!important; color:#f3fff6!important; border-color:rgba(159,240,184,.20)!important; } body.dark .tasbeehNextConfirmBox h2, body[data-theme="dark"] .tasbeehNextConfirmBox h2{ color:#9ff0b8!important; } /* Stage231: smart readable texts in tasbeeh add-form selects */ .tasbeehPageAddCard, .tasbeehPageAddCard *, .tasbeehPageAddCard label, .tasbeehPageAddCard select, .tasbeehPageAddCard option, .tasbeehPageAddCard input, .tasbeehPageAddCard textarea{ color:#17351f!important; -webkit-text-fill-color:#17351f!important; } .tasbeehPageAddCard select, .tasbeehPageAddCard input, .tasbeehPageAddCard textarea{ background:#ffffff!important; border-color:rgba(15,122,58,.26)!important; } .tasbeehPageAddCard select option{ background:#ffffff!important; color:#17351f!important; -webkit-text-fill-color:#17351f!important; } body.dark .tasbeehPageAddCard, body[data-theme="dark"] .tasbeehPageAddCard{ color:#f3fff6!important; } body.dark .tasbeehPageAddCard label, body[data-theme="dark"] .tasbeehPageAddCard label{ color:#f3fff6!important; -webkit-text-fill-color:#f3fff6!important; } body.dark .tasbeehPageAddCard select, body.dark .tasbeehPageAddCard option, body.dark .tasbeehPageAddCard input, body.dark .tasbeehPageAddCard textarea, body[data-theme="dark"] .tasbeehPageAddCard select, body[data-theme="dark"] .tasbeehPageAddCard option, body[data-theme="dark"] .tasbeehPageAddCard input, body[data-theme="dark"] .tasbeehPageAddCard textarea{ background:#ffffff!important; color:#17351f!important; -webkit-text-fill-color:#17351f!important; } .tasbeehPageAddCard select:disabled, .tasbeehPageAddCard input:disabled{ opacity:.72!important; background:#eeeeee!important; color:#334155!important; -webkit-text-fill-color:#334155!important; } /* Stage231: local JSON builder tasbeeh editor */ .builderTasbeehEditor{ margin-top:18px; } .builderTasbeehHead{ display:flex; align-items:flex-start; justify-content:space-between; gap:14px; flex-wrap:wrap; } .builderTasbeehHead h2{ margin:0 0 6px; color:#0f7a3a; font-weight:1000; } .builderTasbeehHead p, .builderHint{ margin:0; color:#5b6b5f; font-weight:800; line-height:1.8; } .builderTasbeehActions{ display:flex; gap:8px; flex-wrap:wrap; } #tasbeehJsonEditor{ width:100%; box-sizing:border-box; margin-top:12px; border:1px solid rgba(15,122,58,.22); border-radius:18px; padding:14px; background:#fff; color:#17351f; -webkit-text-fill-color:#17351f; font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size:13px; line-height:1.6; direction:ltr; } #tasbeehJsonEditor.jsonError{ border-color:#d40022!important; box-shadow:0 0 0 3px rgba(212,0,34,.12); } body.dark #tasbeehJsonEditor, body[data-theme="dark"] #tasbeehJsonEditor{ background:#fff!important; color:#17351f!important; -webkit-text-fill-color:#17351f!important; } body.dark .builderTasbeehHead p, body.dark .builderHint, body[data-theme="dark"] .builderTasbeehHead p, body[data-theme="dark"] .builderHint{ color:#d7e6dc; } /* Stage232: remove stats scrollbar, unify tasbeeh rows, make counter button obvious */ .tasbeehPageStatsCard, .tasbeehPageStatsBottom, .tasbeehPageControls, .tasbeehPageAddStack{ overflow:visible!important; } .tasbeehPageStatsCard{ width:100%!important; max-width:100%!important; } .tasbeehPageStats{ overflow:visible!important; } .tasbeehPageStats div{ min-width:0!important; } .tasbeehPageProgress{ overflow:hidden!important; } /* Daily tasbeeh rows: one strong, noticeable background instead of alternating colors */ .tasbeehPageChoiceWrap:nth-child(odd) .tasbeehPageChoice, .tasbeehPageChoiceWrap:nth-child(even) .tasbeehPageChoice, body.dark .tasbeehPageChoiceWrap:nth-child(odd) .tasbeehPageChoice, body.dark .tasbeehPageChoiceWrap:nth-child(even) .tasbeehPageChoice, body[data-theme="dark"] .tasbeehPageChoiceWrap:nth-child(odd) .tasbeehPageChoice, body[data-theme="dark"] .tasbeehPageChoiceWrap:nth-child(even) .tasbeehPageChoice{ background:linear-gradient(135deg,#fff8df 0%, #fffef8 58%, #eefaf1 100%)!important; border:1px solid rgba(183,131,25,.22)!important; box-shadow:0 8px 22px rgba(183,131,25,.08)!important; } .tasbeehPageChoice.selected{ background:linear-gradient(135deg,#e7ffed 0%, #ffffff 60%, #fff6d8 100%)!important; box-shadow:inset 0 0 0 3px #0f7a3a, 0 10px 26px rgba(15,122,58,.14)!important; } .tasbeehPageChoice span{ color:#102a18!important; text-shadow:0 1px 0 rgba(255,255,255,.55)!important; } body.dark .tasbeehPageChoice span, body[data-theme="dark"] .tasbeehPageChoice span{ color:#102a18!important; } /* Counter as a clear pressable tasbeeh button */ #tasbeehPageBigBtn{ position:relative!important; isolation:isolate!important; border:3px solid rgba(255,255,255,.45)!important; box-shadow: 0 20px 45px rgba(15,122,58,.28), inset 0 4px 0 rgba(255,255,255,.28), inset 0 -8px 18px rgba(0,0,0,.16)!important; transform:translateY(0)!important; transition:transform .12s ease, box-shadow .12s ease, filter .12s ease!important; padding-top:54px!important; } #tasbeehPageBigBtn::before{ content:"اضغط للتسبيح"!important; position:absolute!important; top:18px!important; left:50%!important; transform:translateX(-50%)!important; display:inline-flex!important; align-items:center!important; justify-content:center!important; gap:6px!important; min-height:34px!important; padding:0 16px!important; border-radius:999px!important; background:rgba(255,255,255,.20)!important; color:#ffffff!important; font-size:16px!important; font-weight:1000!important; line-height:1!important; white-space:nowrap!important; } #tasbeehPageBigBtn::after{ content:"👆"!important; position:absolute!important; right:18px!important; bottom:14px!important; width:44px!important; height:44px!important; border-radius:50%!important; display:grid!important; place-items:center!important; background:rgba(255,255,255,.18)!important; color:#ffffff!important; font-size:25px!important; box-shadow:inset 0 0 0 1px rgba(255,255,255,.22)!important; } #tasbeehPageBigBtn:not(:disabled):hover{ filter:brightness(1.06)!important; transform:translateY(-2px)!important; } #tasbeehPageBigBtn:not(:disabled):active{ transform:translateY(3px) scale(.99)!important; box-shadow: 0 9px 22px rgba(15,122,58,.22), inset 0 2px 0 rgba(255,255,255,.18), inset 0 8px 20px rgba(0,0,0,.18)!important; } #tasbeehPageBigBtn:disabled::before{ content:"تم الاكتمال"!important; } #tasbeehPageBigSub{ position:relative!important; padding-top:8px!important; } #tasbeehPageBigSub::before{ content:"زر العدّاد يعمل بالضغط المتكرر"!important; display:block!important; margin-bottom:4px!important; color:#0f7a3a!important; font-size:14px!important; font-weight:1000!important; } body.dark #tasbeehPageBigSub::before, body[data-theme="dark"] #tasbeehPageBigSub::before{ color:#9ff0b8!important; } @media(max-width:640px){ #tasbeehPageBigBtn{ padding-top:50px!important; } #tasbeehPageBigBtn::before{ top:14px!important; font-size:14px!important; } } /* Stage233: global daily alerts popup */ .dailyAlertsBtn{ border:0!important; border-radius:999px!important; min-height:38px!important; padding:0 12px!important; display:inline-flex!important; align-items:center!important; justify-content:center!important; gap:6px!important; background:rgba(15,122,58,.10)!important; color:#0f7a3a!important; font-weight:1000!important; cursor:pointer!important; white-space:nowrap!important; } .dailyAlertsBtn span{ font-size:13px!important; } .dailyAlertsOverlay{ position:fixed!important; inset:0!important; z-index:999998!important; display:grid!important; place-items:center!important; background:rgba(0,0,0,.46)!important; padding:18px!important; } .dailyAlertsOverlay[hidden]{ display:none!important; } .dailyAlertsBox{ width:min(560px,94vw)!important; max-height:min(78vh,720px)!important; overflow:auto!important; border-radius:30px!important; background:#fff!important; color:#17351f!important; border:1px solid rgba(15,122,58,.16)!important; box-shadow:0 28px 80px rgba(0,0,0,.28)!important; padding:18px!important; } .dailyAlertsHead{ display:flex!important; align-items:center!important; justify-content:space-between!important; gap:14px!important; margin-bottom:12px!important; } .dailyAlertsHead small{ display:block!important; color:#806019!important; font-weight:1000!important; } .dailyAlertsHead h2{ margin:0!important; color:#0f7a3a!important; font-size:28px!important; font-weight:1000!important; } #dailyAlertsClose{ width:42px!important; height:42px!important; border:0!important; border-radius:14px!important; background:#d40022!important; color:#fff!important; font-size:28px!important; font-weight:1000!important; line-height:1!important; cursor:pointer!important; } .dailyAlertsContent{ display:grid!important; gap:10px!important; } .dailyAlertItem{ display:grid!important; gap:5px!important; border-radius:20px!important; padding:14px 16px!important; background:linear-gradient(135deg,#fff8df,#eefaf1)!important; border:1px solid rgba(183,131,25,.18)!important; } .dailyAlertItem b{ color:#17351f!important; font-size:18px!important; font-weight:1000!important; } .dailyAlertItem span{ color:#5b6b5f!important; font-weight:900!important; line-height:1.7!important; } .dailyAlertItem.fasting{background:linear-gradient(135deg,#e8f6ff,#ffffff)!important} .dailyAlertItem.nahs{background:linear-gradient(135deg,#ffecef,#ffffff)!important} .dailyAlertItem.occasion{background:linear-gradient(135deg,#eaffef,#ffffff)!important} .dailyAlertItem.tasbeeh{background:linear-gradient(135deg,#fff8df,#ffffff)!important} .dailyAlertsEmpty, .dailyAlertsLoading{ text-align:center!important; padding:26px 12px!important; color:#5b6b5f!important; font-weight:1000!important; } body.dark .dailyAlertsBtn, body[data-theme="dark"] .dailyAlertsBtn{ background:rgba(159,240,184,.12)!important; color:#9ff0b8!important; } body.dark .dailyAlertsBox, body[data-theme="dark"] .dailyAlertsBox{ background:#0d1f14!important; color:#f3fff6!important; border-color:rgba(159,240,184,.20)!important; } body.dark .dailyAlertItem, body[data-theme="dark"] .dailyAlertItem{ background:#ffffff!important; } @media(max-width:760px){ .dailyAlertsBtn span{display:none!important} .dailyAlertsBtn{min-width:40px!important;padding:0 10px!important} } /* Stage234: refined daily alerts contrast + hidden scrollbars */ .dailyAlertsBox, .dailyAlertsContent{ scrollbar-width:none!important; -ms-overflow-style:none!important; } .dailyAlertsBox::-webkit-scrollbar, .dailyAlertsContent::-webkit-scrollbar{ width:0!important; height:0!important; display:none!important; } .dailyAlertsBox{ background:var(--panel,#ffffff)!important; color:var(--text,#17351f)!important; } .dailyAlertsHead small{ color:var(--muted,#6b5b2b)!important; } .dailyAlertsHead h2{ color:var(--accent,#0f7a3a)!important; } .dailyAlertItem{ background:var(--panel,#ffffff)!important; border:1px solid var(--line,rgba(15,122,58,.18))!important; box-shadow:0 8px 22px rgba(0,0,0,.05)!important; } .dailyAlertItem b{ color:var(--text,#17351f)!important; -webkit-text-fill-color:var(--text,#17351f)!important; } .dailyAlertItem span{ color:var(--muted,#5b6b5f)!important; -webkit-text-fill-color:var(--muted,#5b6b5f)!important; } .dailyAlertItem.fasting{ border-inline-start:6px solid #2876a8!important; } .dailyAlertItem.nahs{ border-inline-start:6px solid #d40022!important; } .dailyAlertItem.occasion{ border-inline-start:6px solid #0f7a3a!important; } .dailyAlertItem.tasbeeh, .dailyAlertItem.tasbeeh-done{ border-inline-start:6px solid #b78319!important; } .dailyAlertsFoot{ margin-top:14px!important; display:flex!important; justify-content:center!important; } #dailyAlertsSeen{ border:0!important; border-radius:18px!important; min-height:48px!important; padding:0 28px!important; background:var(--accent,#0f7a3a)!important; color:#ffffff!important; -webkit-text-fill-color:#ffffff!important; font-size:18px!important; font-weight:1000!important; cursor:pointer!important; } body.dark .dailyAlertsBox, body[data-theme="dark"] .dailyAlertsBox{ background:var(--panel,#0d1f14)!important; color:var(--text,#f3fff6)!important; } body.dark .dailyAlertItem, body[data-theme="dark"] .dailyAlertItem{ background:rgba(255,255,255,.06)!important; } body.dark .dailyAlertItem b, body[data-theme="dark"] .dailyAlertItem b{ color:var(--text,#f3fff6)!important; -webkit-text-fill-color:var(--text,#f3fff6)!important; } body.dark .dailyAlertItem span, body[data-theme="dark"] .dailyAlertItem span{ color:var(--muted,#d7e6dc)!important; -webkit-text-fill-color:var(--muted,#d7e6dc)!important; } /* Stage235: stronger light-theme contrast for daily alerts header button */ .dailyAlertsBtn{ background:linear-gradient(135deg,#0f7a3a,#16894a)!important; color:#ffffff!important; -webkit-text-fill-color:#ffffff!important; border:2px solid rgba(255,255,255,.85)!important; box-shadow:0 8px 18px rgba(15,122,58,.22), inset 0 1px 0 rgba(255,255,255,.28)!important; text-shadow:0 1px 1px rgba(0,0,0,.24)!important; } .dailyAlertsBtn span, .dailyAlertsBtn *{ color:#ffffff!important; -webkit-text-fill-color:#ffffff!important; } .dailyAlertsBtn:hover{ filter:brightness(1.08)!important; transform:translateY(-1px)!important; } body.dark .dailyAlertsBtn, body[data-theme="dark"] .dailyAlertsBtn{ background:linear-gradient(135deg,#9ff0b8,#43b86d)!important; color:#082412!important; -webkit-text-fill-color:#082412!important; border:2px solid rgba(159,240,184,.35)!important; box-shadow:0 8px 18px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.22)!important; text-shadow:none!important; } body.dark .dailyAlertsBtn span, body.dark .dailyAlertsBtn *, body[data-theme="dark"] .dailyAlertsBtn span, body[data-theme="dark"] .dailyAlertsBtn *{ color:#082412!important; -webkit-text-fill-color:#082412!important; } /* Stage236: alerts count badge, groups, single dismiss */ .dailyAlertsBtn{ position:relative!important; } .dailyAlertsBtn.hasAlerts{ box-shadow:0 10px 22px rgba(15,122,58,.30), inset 0 1px 0 rgba(255,255,255,.28)!important; } .dailyAlertsBadge{ position:absolute!important; top:-9px!important; left:-8px!important; min-width:22px!important; height:22px!important; padding:0 6px!important; border-radius:999px!important; display:inline-flex!important; align-items:center!important; justify-content:center!important; background:#d40022!important; color:#ffffff!important; -webkit-text-fill-color:#ffffff!important; border:2px solid #ffffff!important; font-size:12px!important; font-weight:1000!important; line-height:1!important; box-shadow:0 6px 14px rgba(212,0,34,.30)!important; } .dailyAlertsBadge[hidden]{ display:none!important; } .dailyAlertGroup{ display:grid!important; gap:9px!important; } .dailyAlertGroup + .dailyAlertGroup{ margin-top:12px!important; } .dailyAlertGroup h3{ margin:4px 2px 2px!important; color:var(--accent,#0f7a3a)!important; font-size:18px!important; font-weight:1000!important; } .dailyAlertItem{ grid-template-columns:1fr auto!important; align-items:center!important; gap:10px!important; } .dailyAlertItem > div{ display:grid!important; gap:5px!important; } .dailyAlertHideOne{ border:0!important; border-radius:14px!important; min-height:38px!important; padding:0 13px!important; background:rgba(212,0,34,.10)!important; color:#d40022!important; -webkit-text-fill-color:#d40022!important; font-weight:1000!important; cursor:pointer!important; white-space:nowrap!important; } .dailyAlertHideOne:hover{ background:#d40022!important; color:#ffffff!important; -webkit-text-fill-color:#ffffff!important; } body.dark .dailyAlertsBadge, body[data-theme="dark"] .dailyAlertsBadge{ border-color:#0d1f14!important; } body.dark .dailyAlertHideOne, body[data-theme="dark"] .dailyAlertHideOne{ background:rgba(255,255,255,.10)!important; color:#ff9aaa!important; -webkit-text-fill-color:#ff9aaa!important; } body.dark .dailyAlertHideOne:hover, body[data-theme="dark"] .dailyAlertHideOne:hover{ background:#d40022!important; color:#ffffff!important; -webkit-text-fill-color:#ffffff!important; } @media(max-width:560px){ .dailyAlertItem{ grid-template-columns:1fr!important; } .dailyAlertHideOne{ justify-self:start!important; } } /* Stage237: home quick links only */ .homeQuickLinks{ width:min(920px,94vw)!important; margin:14px auto 8px!important; display:grid!important; grid-template-columns:repeat(4,minmax(0,1fr))!important; gap:10px!important; } .homeQuickLinks a{ min-height:48px!important; border-radius:18px!important; display:flex!important; align-items:center!important; justify-content:center!important; text-decoration:none!important; background:linear-gradient(135deg,var(--accent,#0f7a3a),#16894a)!important; color:#ffffff!important; -webkit-text-fill-color:#ffffff!important; border:2px solid rgba(255,255,255,.75)!important; box-shadow:0 10px 22px rgba(15,122,58,.16), inset 0 1px 0 rgba(255,255,255,.24)!important; font-weight:1000!important; font-size:16px!important; text-align:center!important; } .homeQuickLinks a:hover{ filter:brightness(1.08)!important; transform:translateY(-1px)!important; } body.dark .homeQuickLinks a, body[data-theme="dark"] .homeQuickLinks a{ background:linear-gradient(135deg,#9ff0b8,#43b86d)!important; color:#082412!important; -webkit-text-fill-color:#082412!important; border-color:rgba(159,240,184,.35)!important; } @media(max-width:760px){ .homeQuickLinks{ grid-template-columns:repeat(2,minmax(0,1fr))!important; margin-top:10px!important; } .homeQuickLinks a{ min-height:44px!important; font-size:15px!important; } } /* Stage238: quick links belong inside daily alerts popup */ .homeQuickLinks{ display:none!important; } .dailyAlertsFoot{ display:grid!important; gap:12px!important; justify-items:center!important; } .dailyAlertsQuickLinks{ width:100%!important; display:grid!important; grid-template-columns:repeat(4,minmax(0,1fr))!important; gap:8px!important; } .dailyAlertsQuickLinks a{ min-height:42px!important; border-radius:15px!important; display:flex!important; align-items:center!important; justify-content:center!important; text-align:center!important; text-decoration:none!important; background:linear-gradient(135deg,var(--accent,#0f7a3a),#16894a)!important; color:#ffffff!important; -webkit-text-fill-color:#ffffff!important; border:1px solid rgba(255,255,255,.65)!important; box-shadow:0 8px 16px rgba(15,122,58,.13)!important; font-size:14px!important; font-weight:1000!important; } body.dark .dailyAlertsQuickLinks a, body[data-theme="dark"] .dailyAlertsQuickLinks a{ background:linear-gradient(135deg,#9ff0b8,#43b86d)!important; color:#082412!important; -webkit-text-fill-color:#082412!important; border-color:rgba(159,240,184,.35)!important; } @media(max-width:560px){ .dailyAlertsQuickLinks{ grid-template-columns:repeat(2,minmax(0,1fr))!important; } } /* Stage239: contextual open buttons inside each alert only */ .dailyAlertsQuickLinks{ display:none!important; } .dailyAlertActions{ display:flex!important; align-items:center!important; justify-content:flex-end!important; gap:8px!important; flex-wrap:wrap!important; } .dailyAlertOpenLink{ min-height:38px!important; padding:0 14px!important; border-radius:14px!important; display:inline-flex!important; align-items:center!important; justify-content:center!important; text-decoration:none!important; background:var(--accent,#0f7a3a)!important; color:#ffffff!important; -webkit-text-fill-color:#ffffff!important; font-weight:1000!important; white-space:nowrap!important; } .dailyAlertOpenLink:hover{ filter:brightness(1.08)!important; } body.dark .dailyAlertOpenLink, body[data-theme="dark"] .dailyAlertOpenLink{ background:#9ff0b8!important; color:#082412!important; -webkit-text-fill-color:#082412!important; } @media(max-width:560px){ .dailyAlertActions{ justify-content:flex-start!important; } } /* Stage240: calm pulse + priority badge colors for daily alerts */ @keyframes dailyAlertsCalmPulse{ 0%,100%{ transform:translateY(0) scale(1); box-shadow:0 10px 22px rgba(15,122,58,.24), inset 0 1px 0 rgba(255,255,255,.28); } 50%{ transform:translateY(-1px) scale(1.025); box-shadow:0 14px 30px rgba(15,122,58,.34), 0 0 0 5px rgba(15,122,58,.08), inset 0 1px 0 rgba(255,255,255,.32); } } .dailyAlertsBtn.hasAlerts{ animation:dailyAlertsCalmPulse 2.8s ease-in-out infinite!important; } .dailyAlertsBtn:not(.hasAlerts){ animation:none!important; } .dailyAlertsBtn.alertsUrgent .dailyAlertsBadge{ background:#d40022!important; color:#ffffff!important; -webkit-text-fill-color:#ffffff!important; box-shadow:0 6px 16px rgba(212,0,34,.36)!important; } .dailyAlertsBtn.alertsTasbeeh .dailyAlertsBadge{ background:#b78319!important; color:#ffffff!important; -webkit-text-fill-color:#ffffff!important; box-shadow:0 6px 16px rgba(183,131,25,.36)!important; } .dailyAlertsBtn.alertsOccasion .dailyAlertsBadge, .dailyAlertsBtn.alertsNormal .dailyAlertsBadge{ background:#0f7a3a!important; color:#ffffff!important; -webkit-text-fill-color:#ffffff!important; box-shadow:0 6px 16px rgba(15,122,58,.30)!important; } .dailyAlertsBtn.alertsUrgent{ background:linear-gradient(135deg,#b8001e,#e04259)!important; } .dailyAlertsBtn.alertsTasbeeh{ background:linear-gradient(135deg,#b78319,#d9a935)!important; } .dailyAlertsBtn.alertsOccasion, .dailyAlertsBtn.alertsNormal{ background:linear-gradient(135deg,#0f7a3a,#16894a)!important; } body.dark .dailyAlertsBtn.alertsUrgent, body[data-theme="dark"] .dailyAlertsBtn.alertsUrgent{ background:linear-gradient(135deg,#ff8da0,#d40022)!important; color:#1f0509!important; -webkit-text-fill-color:#1f0509!important; } body.dark .dailyAlertsBtn.alertsTasbeeh, body[data-theme="dark"] .dailyAlertsBtn.alertsTasbeeh{ background:linear-gradient(135deg,#ffd36c,#b78319)!important; color:#2a1b00!important; -webkit-text-fill-color:#2a1b00!important; } body.dark .dailyAlertsBtn.alertsOccasion, body.dark .dailyAlertsBtn.alertsNormal, body[data-theme="dark"] .dailyAlertsBtn.alertsOccasion, body[data-theme="dark"] .dailyAlertsBtn.alertsNormal{ background:linear-gradient(135deg,#9ff0b8,#43b86d)!important; color:#082412!important; -webkit-text-fill-color:#082412!important; } body.dark .dailyAlertsBtn.alertsUrgent span, body.dark .dailyAlertsBtn.alertsUrgent *, body[data-theme="dark"] .dailyAlertsBtn.alertsUrgent span, body[data-theme="dark"] .dailyAlertsBtn.alertsUrgent *{ color:#1f0509!important; -webkit-text-fill-color:#1f0509!important; } body.dark .dailyAlertsBtn.alertsTasbeeh span, body.dark .dailyAlertsBtn.alertsTasbeeh *, body[data-theme="dark"] .dailyAlertsBtn.alertsTasbeeh span, body[data-theme="dark"] .dailyAlertsBtn.alertsTasbeeh *{ color:#2a1b00!important; -webkit-text-fill-color:#2a1b00!important; } body.dark .dailyAlertsBtn.alertsOccasion span, body.dark .dailyAlertsBtn.alertsOccasion *, body.dark .dailyAlertsBtn.alertsNormal span, body.dark .dailyAlertsBtn.alertsNormal *, body[data-theme="dark"] .dailyAlertsBtn.alertsOccasion span, body[data-theme="dark"] .dailyAlertsBtn.alertsOccasion *, body[data-theme="dark"] .dailyAlertsBtn.alertsNormal span, body[data-theme="dark"] .dailyAlertsBtn.alertsNormal *{ color:#082412!important; -webkit-text-fill-color:#082412!important; } @media (prefers-reduced-motion: reduce){ .dailyAlertsBtn.hasAlerts{ animation:none!important; } } /* Stage241: hide seen button when no alerts */ #dailyAlertsSeen[hidden]{ display:none!important; } /* Stage242: daily alerts inner polish */ .dailyAlertsScope{ margin:4px 0 0!important; color:var(--muted,#5b6b5f)!important; -webkit-text-fill-color:var(--muted,#5b6b5f)!important; font-size:13px!important; font-weight:900!important; } .dailyAlertDayTag{ width:max-content!important; display:inline-flex!important; align-items:center!important; justify-content:center!important; min-height:24px!important; padding:0 10px!important; border-radius:999px!important; font-style:normal!important; font-size:12px!important; font-weight:1000!important; margin-bottom:3px!important; } .dailyAlertDayTag.today{ background:rgba(15,122,58,.12)!important; color:#0f7a3a!important; -webkit-text-fill-color:#0f7a3a!important; } .dailyAlertDayTag.tomorrow{ background:rgba(183,131,25,.14)!important; color:#8a5d07!important; -webkit-text-fill-color:#8a5d07!important; } .dailyAlertHideOne{ min-height:30px!important; padding:0 10px!important; border-radius:11px!important; font-size:12px!important; opacity:.78!important; } .dailyAlertHideOne:hover{ opacity:1!important; } .dailyAlertOpenLink{ min-height:38px!important; padding:0 16px!important; font-size:14px!important; } body.dark .dailyAlertsScope, body[data-theme="dark"] .dailyAlertsScope{ color:var(--muted,#d7e6dc)!important; -webkit-text-fill-color:var(--muted,#d7e6dc)!important; } body.dark .dailyAlertDayTag.today, body[data-theme="dark"] .dailyAlertDayTag.today{ background:rgba(159,240,184,.14)!important; color:#9ff0b8!important; -webkit-text-fill-color:#9ff0b8!important; } body.dark .dailyAlertDayTag.tomorrow, body[data-theme="dark"] .dailyAlertDayTag.tomorrow{ background:rgba(255,211,108,.16)!important; color:#ffd36c!important; -webkit-text-fill-color:#ffd36c!important; } /* Stage243: restore hidden daily alerts button */ #dailyAlertsRestore[hidden]{ display:none!important; } #dailyAlertsRestore{ border:0!important; border-radius:16px!important; min-height:38px!important; padding:0 18px!important; background:rgba(183,131,25,.12)!important; color:#8a5d07!important; -webkit-text-fill-color:#8a5d07!important; font-size:14px!important; font-weight:1000!important; cursor:pointer!important; } #dailyAlertsRestore:hover{ background:#b78319!important; color:#ffffff!important; -webkit-text-fill-color:#ffffff!important; } body.dark #dailyAlertsRestore, body[data-theme="dark"] #dailyAlertsRestore{ background:rgba(255,211,108,.16)!important; color:#ffd36c!important; -webkit-text-fill-color:#ffd36c!important; } body.dark #dailyAlertsRestore:hover, body[data-theme="dark"] #dailyAlertsRestore:hover{ background:#ffd36c!important; color:#2a1b00!important; -webkit-text-fill-color:#2a1b00!important; } /* Stage244: today/tomorrow sections inside daily alerts */ .dailyAlertsTimeSection{ display:grid!important; gap:10px!important; margin:0 0 14px!important; } .dailyAlertsTimeSection:last-child{ margin-bottom:0!important; } .dailyAlertsTimeTitle{ margin:2px 0 0!important; padding:8px 12px!important; border-radius:16px!important; background:rgba(15,122,58,.10)!important; color:#0f7a3a!important; -webkit-text-fill-color:#0f7a3a!important; font-size:17px!important; font-weight:1000!important; text-align:center!important; } .dailyAlertsTime-tomorrow .dailyAlertsTimeTitle{ background:rgba(183,131,25,.13)!important; color:#8a5d07!important; -webkit-text-fill-color:#8a5d07!important; } body.dark .dailyAlertsTimeTitle, body[data-theme="dark"] .dailyAlertsTimeTitle{ background:rgba(159,240,184,.13)!important; color:#9ff0b8!important; -webkit-text-fill-color:#9ff0b8!important; } body.dark .dailyAlertsTime-tomorrow .dailyAlertsTimeTitle, body[data-theme="dark"] .dailyAlertsTime-tomorrow .dailyAlertsTimeTitle{ background:rgba(255,211,108,.15)!important; color:#ffd36c!important; -webkit-text-fill-color:#ffd36c!important; } .dailyAlertsTimeSection .dailyAlertGroup{ margin-top:0!important; } /* Stage245: tasbeeh remaining/done/all tabs */ .tasbeehPageListHead{ display:flex!important; align-items:center!important; justify-content:space-between!important; gap:12px!important; flex-wrap:wrap!important; margin-bottom:12px!important; } .tasbeehPageListHead h2{ margin:0!important; } .tasbeehPageTabs{ display:flex!important; align-items:center!important; gap:8px!important; flex-wrap:wrap!important; } .tasbeehPageTabs button{ border:0!important; border-radius:999px!important; min-height:38px!important; padding:0 14px!important; background:rgba(15,122,58,.10)!important; color:#0f7a3a!important; -webkit-text-fill-color:#0f7a3a!important; font-weight:1000!important; cursor:pointer!important; } .tasbeehPageTabs button b{ display:inline-flex!important; align-items:center!important; justify-content:center!important; min-width:24px!important; height:24px!important; margin-inline-start:6px!important; border-radius:999px!important; background:rgba(255,255,255,.68)!important; color:inherit!important; -webkit-text-fill-color:inherit!important; } .tasbeehPageTabs button.active{ background:linear-gradient(135deg,#0f7a3a,#16894a)!important; color:#ffffff!important; -webkit-text-fill-color:#ffffff!important; box-shadow:0 8px 18px rgba(15,122,58,.16)!important; } .tasbeehPageEmptyTab{ grid-column:1/-1!important; min-height:88px!important; border-radius:18px!important; display:flex!important; align-items:center!important; justify-content:center!important; text-align:center!important; background:rgba(15,122,58,.08)!important; color:var(--smart-muted,#5f5147)!important; -webkit-text-fill-color:var(--smart-muted,#5f5147)!important; font-weight:1000!important; } body.dark .tasbeehPageTabs button, body[data-theme="dark"] .tasbeehPageTabs button{ background:rgba(159,240,184,.12)!important; color:#9ff0b8!important; -webkit-text-fill-color:#9ff0b8!important; } body.dark .tasbeehPageTabs button.active, body[data-theme="dark"] .tasbeehPageTabs button.active{ background:linear-gradient(135deg,#9ff0b8,#43b86d)!important; color:#082412!important; -webkit-text-fill-color:#082412!important; } body.dark .tasbeehPageEmptyTab, body[data-theme="dark"] .tasbeehPageEmptyTab{ background:rgba(159,240,184,.10)!important; color:var(--smart-muted,#d8c8b6)!important; -webkit-text-fill-color:var(--smart-muted,#d8c8b6)!important; } @media(max-width:760px){ .tasbeehPageListHead{ justify-content:center!important; text-align:center!important; } .tasbeehPageTabs{ width:100%!important; justify-content:center!important; } .tasbeehPageTabs button{ flex:1 1 30%!important; padding-inline:8px!important; } } /* Stage247: focus counter when opening tasbeeh from alerts */ .tasbeehPageCounterCard.tasbeehPageCounterFocus{ animation:tasbeehCounterFocusGlow 1.15s ease-in-out 3!important; outline:3px solid rgba(15,122,58,.42)!important; outline-offset:5px!important; } @keyframes tasbeehCounterFocusGlow{ 0%,100%{ box-shadow:0 10px 28px rgba(15,122,58,.14)!important; transform:translateY(0) scale(1)!important; } 50%{ box-shadow:0 18px 42px rgba(15,122,58,.30),0 0 0 7px rgba(15,122,58,.10)!important; transform:translateY(-2px) scale(1.012)!important; } } body.dark .tasbeehPageCounterCard.tasbeehPageCounterFocus, body[data-theme="dark"] .tasbeehPageCounterCard.tasbeehPageCounterFocus{ outline-color:rgba(159,240,184,.46)!important; } @media (prefers-reduced-motion: reduce){ .tasbeehPageCounterCard.tasbeehPageCounterFocus{ animation:none!important; } } /* Stage248: clearer selected tasbeeh item highlight */ .tasbeehPageChoice.selected{ position:relative!important; isolation:isolate!important; border:2px solid rgba(15,122,58,.72)!important; box-shadow:0 12px 26px rgba(15,122,58,.18),0 0 0 5px rgba(15,122,58,.08)!important; transform:translateY(-1px)!important; } .tasbeehPageChoice.selected::before{ content:"الحالي"!important; position:absolute!important; top:8px!important; inset-inline-start:10px!important; min-height:24px!important; padding:0 10px!important; border-radius:999px!important; display:inline-flex!important; align-items:center!important; justify-content:center!important; background:#0f7a3a!important; color:#ffffff!important; -webkit-text-fill-color:#ffffff!important; font-size:12px!important; font-weight:1000!important; z-index:2!important; } .tasbeehPageChoice.selected span{ padding-inline-start:58px!important; } .tasbeehPageChoice.selected.complete::before{ content:"مكتمل"!important; background:#b78319!important; } body.dark .tasbeehPageChoice.selected, body[data-theme="dark"] .tasbeehPageChoice.selected{ border-color:rgba(159,240,184,.72)!important; box-shadow:0 12px 26px rgba(0,0,0,.22),0 0 0 5px rgba(159,240,184,.10)!important; } body.dark .tasbeehPageChoice.selected::before, body[data-theme="dark"] .tasbeehPageChoice.selected::before{ background:#9ff0b8!important; color:#082412!important; -webkit-text-fill-color:#082412!important; } body.dark .tasbeehPageChoice.selected.complete::before, body[data-theme="dark"] .tasbeehPageChoice.selected.complete::before{ background:#ffd36c!important; color:#2a1b00!important; -webkit-text-fill-color:#2a1b00!important; } @media(max-width:560px){ .tasbeehPageChoice.selected span{ padding-inline-start:52px!important; } .tasbeehPageChoice.selected::before{ top:7px!important; inset-inline-start:8px!important; min-height:22px!important; padding:0 8px!important; font-size:11px!important; } } /* Stage249: Quran and duas done buttons */ .tasbeehPageOther h2, #tasbeehOtherPanel h3{ text-align:center!important; } .tasbeehPageOther article, .tasbeehOtherItem{ position:relative!important; display:grid!important; grid-template-columns:1fr auto!important; align-items:center!important; gap:10px!important; } .tasbeehPageOther article > span, .tasbeehOtherItem > span{ font-weight:1000!important; line-height:1.5!important; } .tasbeehPageOther article > small, .tasbeehOtherItem > small{ grid-column:1/-1!important; } .tasbeehOtherDoneBtn{ border:0!important; border-radius:999px!important; min-height:34px!important; padding:0 14px!important; background:linear-gradient(135deg,#0f7a3a,#16894a)!important; color:#ffffff!important; -webkit-text-fill-color:#ffffff!important; font-weight:1000!important; cursor:pointer!important; white-space:nowrap!important; } .tasbeehOtherDoneBtn:hover{ filter:brightness(1.08)!important; transform:translateY(-1px)!important; } .tasbeehOtherCompleted{ grid-column:1/-1!important; margin-top:12px!important; padding-top:10px!important; border-top:1px dashed rgba(15,122,58,.24)!important; display:grid!important; gap:8px!important; } .tasbeehOtherCompleted h3, .tasbeehOtherCompleted h4{ margin:0!important; font-size:16px!important; text-align:center!important; color:#0f7a3a!important; -webkit-text-fill-color:#0f7a3a!important; } .tasbeehPageOther article.done, .tasbeehOtherItem.done{ opacity:.72!important; background:rgba(15,122,58,.07)!important; } .tasbeehPageOther article.done b, .tasbeehOtherItem.done b{ width:max-content!important; border-radius:999px!important; padding:5px 10px!important; background:rgba(15,122,58,.13)!important; color:#0f7a3a!important; -webkit-text-fill-color:#0f7a3a!important; font-size:12px!important; font-weight:1000!important; } .tasbeehOtherEmpty{ min-height:44px!important; display:flex!important; align-items:center!important; justify-content:center!important; text-align:center!important; border-radius:14px!important; background:rgba(15,122,58,.07)!important; color:var(--smart-muted,#5f5147)!important; -webkit-text-fill-color:var(--smart-muted,#5f5147)!important; font-weight:900!important; } body.dark .tasbeehOtherDoneBtn, body[data-theme="dark"] .tasbeehOtherDoneBtn{ background:linear-gradient(135deg,#9ff0b8,#43b86d)!important; color:#082412!important; -webkit-text-fill-color:#082412!important; } body.dark .tasbeehOtherCompleted h3, body.dark .tasbeehOtherCompleted h4, body[data-theme="dark"] .tasbeehOtherCompleted h3, body[data-theme="dark"] .tasbeehOtherCompleted h4{ color:#9ff0b8!important; -webkit-text-fill-color:#9ff0b8!important; } body.dark .tasbeehPageOther article.done b, body.dark .tasbeehOtherItem.done b, body[data-theme="dark"] .tasbeehPageOther article.done b, body[data-theme="dark"] .tasbeehOtherItem.done b{ background:rgba(159,240,184,.15)!important; color:#9ff0b8!important; -webkit-text-fill-color:#9ff0b8!important; } @media(max-width:560px){ .tasbeehPageOther article, .tasbeehOtherItem{ grid-template-columns:1fr!important; } .tasbeehOtherDoneBtn{ justify-self:start!important; } } /* Stage250: popup add form readability + Quran/dua undo/stats polish */ .tasbeehSettings, .tasbeehSettings label, .tasbeehSettings small, .tasbeehAddSettings, .tasbeehAddSettings h4, .tasbeehPageSoundPanel, .tasbeehPageSoundPanel *, .tasbeehPageAddCard, .tasbeehPageAddCard *{ color:var(--smart-text,#20160f)!important; -webkit-text-fill-color:var(--smart-text,#20160f)!important; } .tasbeehSettings input, .tasbeehSettings select, .tasbeehAddSettings input, .tasbeehAddSettings select, .tasbeehPageAddCard input, .tasbeehPageAddCard select, .tasbeehPageAddCard textarea, .tasbeehPageSoundNative{ background:#ffffff!important; color:#111827!important; -webkit-text-fill-color:#111827!important; border:1px solid rgba(15,122,58,.28)!important; opacity:1!important; } .tasbeehSettings input::placeholder, .tasbeehAddSettings input::placeholder, .tasbeehPageAddCard textarea::placeholder, .tasbeehPageAddCard input::placeholder{ color:#5b6472!important; -webkit-text-fill-color:#5b6472!important; opacity:1!important; } .tasbeehSoundGrid button, .tasbeehPageSoundGrid button{ color:#111827!important; -webkit-text-fill-color:#111827!important; background:#ffffff!important; border:1px solid rgba(15,122,58,.22)!important; } .tasbeehSoundGrid button.active, .tasbeehPageSoundGrid button.active{ color:#ffffff!important; -webkit-text-fill-color:#ffffff!important; background:linear-gradient(135deg,#0f7a3a,#16894a)!important; } .tasbeehAddSettings{ display:grid!important; gap:9px!important; } .tasbeehAddSettings select, .tasbeehAddSettings input{ min-height:40px!important; border-radius:12px!important; padding:0 12px!important; font-weight:900!important; } .tasbeehOtherDoneActions{ display:flex!important; align-items:center!important; justify-content:flex-end!important; gap:8px!important; flex-wrap:wrap!important; } .tasbeehOtherUndoBtn{ border:0!important; border-radius:999px!important; min-height:30px!important; padding:0 12px!important; background:rgba(183,131,25,.14)!important; color:#8a5d07!important; -webkit-text-fill-color:#8a5d07!important; font-weight:1000!important; cursor:pointer!important; } .tasbeehOtherUndoBtn:hover{ background:#b78319!important; color:#ffffff!important; -webkit-text-fill-color:#ffffff!important; } body.dark .tasbeehSettings, body.dark .tasbeehSettings label, body.dark .tasbeehSettings small, body.dark .tasbeehAddSettings, body.dark .tasbeehAddSettings h4, body.dark .tasbeehPageSoundPanel, body.dark .tasbeehPageSoundPanel *, body.dark .tasbeehPageAddCard, body.dark .tasbeehPageAddCard *, body[data-theme="dark"] .tasbeehSettings, body[data-theme="dark"] .tasbeehSettings label, body[data-theme="dark"] .tasbeehSettings small, body[data-theme="dark"] .tasbeehAddSettings, body[data-theme="dark"] .tasbeehAddSettings h4, body[data-theme="dark"] .tasbeehPageSoundPanel, body[data-theme="dark"] .tasbeehPageSoundPanel *, body[data-theme="dark"] .tasbeehPageAddCard, body[data-theme="dark"] .tasbeehPageAddCard *{ color:#fff6e8!important; -webkit-text-fill-color:#fff6e8!important; } body.dark .tasbeehSettings input, body.dark .tasbeehSettings select, body.dark .tasbeehAddSettings input, body.dark .tasbeehAddSettings select, body.dark .tasbeehPageAddCard input, body.dark .tasbeehPageAddCard select, body.dark .tasbeehPageAddCard textarea, body.dark .tasbeehPageSoundNative, body[data-theme="dark"] .tasbeehSettings input, body[data-theme="dark"] .tasbeehSettings select, body[data-theme="dark"] .tasbeehAddSettings input, body[data-theme="dark"] .tasbeehAddSettings select, body[data-theme="dark"] .tasbeehPageAddCard input, body[data-theme="dark"] .tasbeehPageAddCard select, body[data-theme="dark"] .tasbeehPageAddCard textarea, body[data-theme="dark"] .tasbeehPageSoundNative{ background:#ffffff!important; color:#111827!important; -webkit-text-fill-color:#111827!important; } body.dark .tasbeehSoundGrid button, body.dark .tasbeehPageSoundGrid button, body[data-theme="dark"] .tasbeehSoundGrid button, body[data-theme="dark"] .tasbeehPageSoundGrid button{ background:#ffffff!important; color:#111827!important; -webkit-text-fill-color:#111827!important; } body.dark .tasbeehOtherUndoBtn, body[data-theme="dark"] .tasbeehOtherUndoBtn{ background:rgba(255,211,108,.16)!important; color:#ffd36c!important; -webkit-text-fill-color:#ffd36c!important; } @media(max-width:560px){ .tasbeehOtherDoneActions{ justify-content:flex-start!important; } } /* Stage251: high contrast descriptions + undo completed tasbeeh */ .tasbeehPageAddCard label, .tasbeehPageAddCard .tasbeehPageAddGrid label, .tasbeehPageAddCard h2, .tasbeehAddSettings h4, .tasbeehAddSettings label, .tasbeehSettings label, .tasbeehSettings h3, .tasbeehSettings small{ color:#ffffff!important; -webkit-text-fill-color:#ffffff!important; opacity:1!important; text-shadow:0 1px 2px rgba(0,0,0,.42)!important; } .tasbeehPageAddCard input, .tasbeehPageAddCard select, .tasbeehPageAddCard textarea, .tasbeehAddSettings input, .tasbeehAddSettings select, .tasbeehSettings input, .tasbeehSettings select{ background:rgba(255,255,255,.96)!important; color:#102016!important; -webkit-text-fill-color:#102016!important; border:1px solid rgba(255,255,255,.55)!important; opacity:1!important; font-weight:900!important; } .tasbeehPageAddCard input::placeholder, .tasbeehPageAddCard textarea::placeholder, .tasbeehAddSettings input::placeholder, .tasbeehSettings input::placeholder{ color:#3b4a40!important; -webkit-text-fill-color:#3b4a40!important; opacity:1!important; font-weight:900!important; } .tasbeehPageAddCard option, .tasbeehAddSettings option, .tasbeehSettings option{ color:#102016!important; background:#ffffff!important; } .tasbeehPageSoundGrid button, .tasbeehSoundGrid button{ color:#102016!important; -webkit-text-fill-color:#102016!important; background:#ffffff!important; opacity:1!important; font-weight:900!important; } .tasbeehPageSoundGrid button.active, .tasbeehSoundGrid button.active{ color:#ffffff!important; -webkit-text-fill-color:#ffffff!important; background:linear-gradient(135deg,#0f7a3a,#16894a)!important; } .tasbeehPageChoiceWrap, .tasbeehChoiceWrap{ position:relative!important; } .tasbeehPageChoiceWrap.isDone, .tasbeehChoiceWrap.isDone{ display:grid!important; grid-template-columns:1fr auto!important; align-items:center!important; gap:8px!important; } .tasbeehPageChoiceWrap.isDone .tasbeehPageChoice, .tasbeehChoiceWrap.isDone .tasbeehChoice{ min-width:0!important; } .tasbeehUndoDoneBtn{ border:0!important; border-radius:999px!important; min-height:34px!important; padding:0 13px!important; background:rgba(183,131,25,.15)!important; color:#8a5d07!important; -webkit-text-fill-color:#8a5d07!important; font-size:13px!important; font-weight:1000!important; cursor:pointer!important; white-space:nowrap!important; } .tasbeehUndoDoneBtn:hover{ background:#b78319!important; color:#ffffff!important; -webkit-text-fill-color:#ffffff!important; } body.dark .tasbeehUndoDoneBtn, body[data-theme="dark"] .tasbeehUndoDoneBtn{ background:rgba(255,211,108,.18)!important; color:#ffd36c!important; -webkit-text-fill-color:#ffd36c!important; } body.dark .tasbeehUndoDoneBtn:hover, body[data-theme="dark"] .tasbeehUndoDoneBtn:hover{ background:#ffd36c!important; color:#2a1b00!important; -webkit-text-fill-color:#2a1b00!important; } @media(max-width:560px){ .tasbeehPageChoiceWrap.isDone, .tasbeehChoiceWrap.isDone{ grid-template-columns:1fr!important; } .tasbeehUndoDoneBtn{ justify-self:start!important; } } /* Stage252: exact dark-theme readability fix for tasbeeh add form and sound ruler */ /* Sound ruler: never white text on white background */ body .tasbeehPageSoundGrid button, body .tasbeehSoundGrid button, html body .tasbeehPageSoundGrid button, html body .tasbeehSoundGrid button{ background:#ffffff!important; color:#102016!important; -webkit-text-fill-color:#102016!important; border:1px solid rgba(15,122,58,.32)!important; opacity:1!important; text-shadow:none!important; } body .tasbeehPageSoundGrid button *, body .tasbeehSoundGrid button *, html body .tasbeehPageSoundGrid button *, html body .tasbeehSoundGrid button *{ color:#102016!important; -webkit-text-fill-color:#102016!important; text-shadow:none!important; } body .tasbeehPageSoundGrid button.active, body .tasbeehSoundGrid button.active, html body .tasbeehPageSoundGrid button.active, html body .tasbeehSoundGrid button.active, body .tasbeehPageSoundGrid button[aria-selected="true"], body .tasbeehSoundGrid button[aria-selected="true"]{ background:linear-gradient(135deg,#0f7a3a,#16894a)!important; color:#ffffff!important; -webkit-text-fill-color:#ffffff!important; } body .tasbeehPageSoundGrid button.active *, body .tasbeehSoundGrid button.active *, body .tasbeehPageSoundGrid button[aria-selected="true"] *, body .tasbeehSoundGrid button[aria-selected="true"] *{ color:#ffffff!important; -webkit-text-fill-color:#ffffff!important; } /* Add-form labels: force bright readable text on dark cards */ body .tasbeehPageAddCard h2, body .tasbeehPageAddCard label, body .tasbeehPageAddCard .tasbeehPageAddGrid label, body .tasbeehPageAddCard .tasbeehPageAddStack label, body .tasbeehPageAddCard .tasbeehPageCustomLabel, body .tasbeehAddSettings h4, body .tasbeehAddSettings label, body .tasbeehSettings h3, body .tasbeehSettings label, body .tasbeehSettings small{ color:#fff6e8!important; -webkit-text-fill-color:#fff6e8!important; opacity:1!important; text-shadow:0 2px 3px rgba(0,0,0,.58)!important; font-weight:1000!important; } /* Add-form fields: force dark readable text inside fields */ body .tasbeehPageAddCard input, body .tasbeehPageAddCard select, body .tasbeehPageAddCard textarea, body .tasbeehAddSettings input, body .tasbeehAddSettings select, body .tasbeehSettings input, body .tasbeehSettings select{ background:#ffffff!important; color:#102016!important; -webkit-text-fill-color:#102016!important; border:1px solid rgba(255,255,255,.72)!important; box-shadow:inset 0 1px 0 rgba(0,0,0,.04)!important; opacity:1!important; text-shadow:none!important; font-weight:900!important; } body .tasbeehPageAddCard input::placeholder, body .tasbeehPageAddCard textarea::placeholder, body .tasbeehAddSettings input::placeholder, body .tasbeehSettings input::placeholder{ color:#405145!important; -webkit-text-fill-color:#405145!important; opacity:1!important; text-shadow:none!important; font-weight:900!important; } body .tasbeehPageAddCard select option, body .tasbeehAddSettings select option, body .tasbeehSettings select option{ background:#ffffff!important; color:#102016!important; -webkit-text-fill-color:#102016!important; } /* Labels around fields in the exact night theme */ body.dark .tasbeehPageAddCard h2, body.dark .tasbeehPageAddCard label, body.dark .tasbeehPageAddCard .tasbeehPageAddGrid label, body.dark .tasbeehAddSettings h4, body.dark .tasbeehAddSettings label, body.dark .tasbeehSettings h3, body.dark .tasbeehSettings label, body.dark .tasbeehSettings small, body[data-theme="dark"] .tasbeehPageAddCard h2, body[data-theme="dark"] .tasbeehPageAddCard label, body[data-theme="dark"] .tasbeehPageAddCard .tasbeehPageAddGrid label, body[data-theme="dark"] .tasbeehAddSettings h4, body[data-theme="dark"] .tasbeehAddSettings label, body[data-theme="dark"] .tasbeehSettings h3, body[data-theme="dark"] .tasbeehSettings label, body[data-theme="dark"] .tasbeehSettings small{ color:#fff6e8!important; -webkit-text-fill-color:#fff6e8!important; opacity:1!important; text-shadow:0 2px 3px rgba(0,0,0,.68)!important; } /* Disabled/dimmed labels should remain visible, not nearly black */ body .tasbeehPageAddCard label.isDimmed, body .tasbeehPageAddCard label.isDisabled, body.dark .tasbeehPageAddCard label.isDimmed, body.dark .tasbeehPageAddCard label.isDisabled, body[data-theme="dark"] .tasbeehPageAddCard label.isDimmed, body[data-theme="dark"] .tasbeehPageAddCard label.isDisabled{ opacity:.86!important; color:#f2eadf!important; -webkit-text-fill-color:#f2eadf!important; } /* Avoid inherited -webkit fill causing invisible field text */ body .tasbeehPageAddCard input *, body .tasbeehPageAddCard select *, body .tasbeehPageAddCard textarea *, body .tasbeehAddSettings input *, body .tasbeehAddSettings select *, body .tasbeehSettings input *, body .tasbeehSettings select *{ color:#102016!important; -webkit-text-fill-color:#102016!important; } /* Stage253: exact fix for tasbeeh add-form labels and sound ruler */ body.tasbeehPageBody .tasbeehFormLabelText, body .tasbeehSettings .tasbeehFormLabelText, body .tasbeehAddSettings .tasbeehFormLabelText, body.tasbeehPageBody .tasbeehPageAddCard label > .tasbeehFormLabelText, body.dark .tasbeehFormLabelText, body[data-theme="dark"] .tasbeehFormLabelText{ display:block!important; margin:0 0 7px!important; color:#fff7e8!important; -webkit-text-fill-color:#fff7e8!important; opacity:1!important; font-weight:1000!important; text-shadow:0 2px 4px rgba(0,0,0,.85)!important; letter-spacing:.01em!important; } /* The textarea has no label in HTML, so make its text/placeholder crystal clear */ body.tasbeehPageBody #tasbeehPageCustomText, body #tasbeehCustomText{ background:#ffffff!important; color:#07170e!important; -webkit-text-fill-color:#07170e!important; opacity:1!important; font-weight:900!important; text-shadow:none!important; } body.tasbeehPageBody #tasbeehPageCustomText::placeholder, body #tasbeehCustomText::placeholder{ color:#26382d!important; -webkit-text-fill-color:#26382d!important; opacity:1!important; font-weight:900!important; text-shadow:none!important; } /* Exact field IDs in standalone tasbeeh page */ body.tasbeehPageBody #tasbeehPageCustomType, body.tasbeehPageBody #tasbeehPageCustomRepeat, body.tasbeehPageBody #tasbeehPageCustomCount, body.tasbeehPageBody #tasbeehPageCustomWeekday, body.tasbeehPageBody #tasbeehPageCustomHijriDay, body.tasbeehPageBody #tasbeehPageCustomHijriMonth, body.tasbeehPageBody #tasbeehPageCustomHijriYear, body #tasbeehCustomType, body #tasbeehCustomCount, body #tasbeehSound{ background:#ffffff!important; color:#07170e!important; -webkit-text-fill-color:#07170e!important; opacity:1!important; font-weight:900!important; text-shadow:none!important; border:1px solid rgba(255,255,255,.82)!important; } /* Exact option contrast */ body.tasbeehPageBody #tasbeehPageCustomType option, body.tasbeehPageBody #tasbeehPageCustomRepeat option, body.tasbeehPageBody #tasbeehPageCustomWeekday option, body #tasbeehCustomType option, body #tasbeehSound option{ background:#ffffff!important; color:#07170e!important; -webkit-text-fill-color:#07170e!important; } /* Sound ruler exact buttons */ body.tasbeehPageBody #tasbeehPageSoundGrid button, body #tasbeehSoundGrid button, body.tasbeehPageBody .tasbeehPageSoundGrid button, body .tasbeehSoundGrid button{ background:#ffffff!important; color:#07170e!important; -webkit-text-fill-color:#07170e!important; opacity:1!important; font-weight:1000!important; text-shadow:none!important; border:1px solid rgba(15,122,58,.35)!important; } body.tasbeehPageBody #tasbeehPageSoundGrid button *, body #tasbeehSoundGrid button *, body.tasbeehPageBody .tasbeehPageSoundGrid button *, body .tasbeehSoundGrid button *{ color:#07170e!important; -webkit-text-fill-color:#07170e!important; text-shadow:none!important; } body.tasbeehPageBody #tasbeehPageSoundGrid button.active, body #tasbeehSoundGrid button.active, body.tasbeehPageBody .tasbeehPageSoundGrid button.active, body .tasbeehSoundGrid button.active, body.tasbeehPageBody #tasbeehPageSoundGrid button[aria-selected="true"], body #tasbeehSoundGrid button[aria-selected="true"]{ background:linear-gradient(135deg,#0f7a3a,#16894a)!important; color:#ffffff!important; -webkit-text-fill-color:#ffffff!important; } body.tasbeehPageBody #tasbeehPageSoundGrid button.active *, body #tasbeehSoundGrid button.active *, body.tasbeehPageBody .tasbeehPageSoundGrid button.active *, body .tasbeehSoundGrid button.active *{ color:#ffffff!important; -webkit-text-fill-color:#ffffff!important; } /* Make dimmed labels still readable */ body.tasbeehPageBody .tasbeehPageAddCard label.isDimmed .tasbeehFormLabelText, body.tasbeehPageBody .tasbeehPageAddCard label.isDisabled .tasbeehFormLabelText{ opacity:.92!important; color:#fff7e8!important; -webkit-text-fill-color:#fff7e8!important; } /* Stage254: experimental astronomy daily page */ .astronomyPageBody{ min-height:100vh!important; background:var(--page-bg,var(--bg,#f7f0e6))!important; } .astronomyPageShell{ width:min(1180px,94vw)!important; margin:22px auto 38px!important; display:grid!important; gap:18px!important; } .astronomyHero{ display:flex!important; justify-content:space-between!important; align-items:stretch!important; gap:14px!important; padding:22px!important; border-radius:28px!important; background:linear-gradient(135deg,rgba(15,122,58,.96),rgba(19,91,50,.92))!important; color:#fff!important; box-shadow:0 18px 42px rgba(15,122,58,.22)!important; } .astronomyHero h1{ margin:5px 0 8px!important; font-size:clamp(28px,5vw,46px)!important; line-height:1.1!important; color:#fff!important; -webkit-text-fill-color:#fff!important; } .astronomyHero p, .astronomyEyebrow, .astronomyHeroBadge span{ color:#fff5df!important; -webkit-text-fill-color:#fff5df!important; font-weight:900!important; } .astronomyEyebrow{ display:inline-flex!important; padding:6px 12px!important; border-radius:999px!important; background:rgba(255,255,255,.14)!important; } .astronomyHeroBadge{ min-width:170px!important; display:grid!important; place-items:center!important; text-align:center!important; padding:14px!important; border-radius:22px!important; background:rgba(255,255,255,.12)!important; border:1px solid rgba(255,255,255,.18)!important; } .astronomyHeroBadge strong{ color:#fff!important; -webkit-text-fill-color:#fff!important; font-size:20px!important; } .astronomyNotice, .astronomyExplain, .astronomyMoonMansionCard, .planetCard{ border-radius:24px!important; background:var(--panel-bg,var(--card,#fffaf3))!important; border:1px solid rgba(15,122,58,.16)!important; box-shadow:0 12px 30px rgba(46,32,15,.08)!important; } .astronomyNotice{ padding:14px 18px!important; color:var(--smart-text,#2c2016)!important; -webkit-text-fill-color:var(--smart-text,#2c2016)!important; font-weight:900!important; line-height:1.7!important; } .astronomyMoonMansionCard, .astronomyExplain{ padding:18px!important; } .astronomySectionTitle{ display:flex!important; justify-content:space-between!important; align-items:end!important; gap:12px!important; margin-bottom:12px!important; } .astronomySectionTitle h2{ margin:0!important; color:var(--green,#0f7a3a)!important; -webkit-text-fill-color:var(--green,#0f7a3a)!important; font-size:clamp(22px,4vw,34px)!important; } .astronomySectionTitle span{ color:var(--smart-muted,#6b5a4d)!important; -webkit-text-fill-color:var(--smart-muted,#6b5a4d)!important; font-weight:900!important; } .astronomyPlanetsTitle{ margin:8px 4px 0!important; } .moonMansionBox{ display:grid!important; gap:14px!important; } .moonMansionMain{ display:flex!important; align-items:center!important; justify-content:space-between!important; gap:10px!important; padding:18px!important; border-radius:22px!important; background:linear-gradient(135deg,rgba(15,122,58,.12),rgba(183,131,25,.10))!important; } .moonMansionMain strong{ font-size:clamp(26px,6vw,46px)!important; color:var(--green,#0f7a3a)!important; -webkit-text-fill-color:var(--green,#0f7a3a)!important; } .moonMansionMain span{ font-weight:1000!important; color:var(--smart-text,#2c2016)!important; -webkit-text-fill-color:var(--smart-text,#2c2016)!important; } .moonMansionMeta{ display:grid!important; grid-template-columns:repeat(3,1fr)!important; gap:10px!important; } .moonMansionMeta div{ border-radius:18px!important; padding:12px!important; background:rgba(15,122,58,.07)!important; display:grid!important; gap:5px!important; } .moonMansionMeta b{ color:var(--smart-muted,#6b5a4d)!important; -webkit-text-fill-color:var(--smart-muted,#6b5a4d)!important; } .moonMansionMeta span{ color:var(--smart-text,#2c2016)!important; -webkit-text-fill-color:var(--smart-text,#2c2016)!important; font-weight:1000!important; } .moonMansionProgress{ height:12px!important; border-radius:999px!important; background:rgba(15,122,58,.10)!important; overflow:hidden!important; } .moonMansionProgress span{ display:block!important; height:100%!important; border-radius:inherit!important; background:linear-gradient(90deg,#0f7a3a,#b78319)!important; } .planetCards{ display:grid!important; grid-template-columns:repeat(4,1fr)!important; gap:14px!important; } .planetCard{ padding:16px!important; display:flex!important; gap:13px!important; align-items:center!important; min-height:128px!important; } .planetIcon{ width:52px!important; height:52px!important; border-radius:18px!important; display:grid!important; place-items:center!important; background:rgba(15,122,58,.10)!important; color:var(--green,#0f7a3a)!important; -webkit-text-fill-color:var(--green,#0f7a3a)!important; font-size:30px!important; font-weight:1000!important; flex:0 0 auto!important; } .planetCard h3{ margin:0 0 5px!important; color:var(--smart-muted,#6b5a4d)!important; -webkit-text-fill-color:var(--smart-muted,#6b5a4d)!important; font-size:15px!important; } .planetCard strong{ display:block!important; color:var(--green,#0f7a3a)!important; -webkit-text-fill-color:var(--green,#0f7a3a)!important; font-size:23px!important; } .planetCard p, .astronomyExplain p{ margin:5px 0 0!important; color:var(--smart-text,#2c2016)!important; -webkit-text-fill-color:var(--smart-text,#2c2016)!important; font-weight:900!important; line-height:1.65!important; } .astronomyExplain h2{ margin:0 0 8px!important; color:var(--green,#0f7a3a)!important; -webkit-text-fill-color:var(--green,#0f7a3a)!important; } body.dark .astronomyNotice, body.dark .astronomyExplain, body.dark .astronomyMoonMansionCard, body.dark .planetCard, body[data-theme="dark"] .astronomyNotice, body[data-theme="dark"] .astronomyExplain, body[data-theme="dark"] .astronomyMoonMansionCard, body[data-theme="dark"] .planetCard{ background:rgba(13,20,16,.88)!important; border-color:rgba(159,240,184,.16)!important; } body.dark .astronomySectionTitle h2, body.dark .moonMansionMain strong, body.dark .planetIcon, body.dark .planetCard strong, body.dark .astronomyExplain h2, body[data-theme="dark"] .astronomySectionTitle h2, body[data-theme="dark"] .moonMansionMain strong, body[data-theme="dark"] .planetIcon, body[data-theme="dark"] .planetCard strong, body[data-theme="dark"] .astronomyExplain h2{ color:#9ff0b8!important; -webkit-text-fill-color:#9ff0b8!important; } body.dark .astronomyNotice, body.dark .moonMansionMain span, body.dark .moonMansionMeta span, body.dark .planetCard p, body.dark .astronomyExplain p, body[data-theme="dark"] .astronomyNotice, body[data-theme="dark"] .moonMansionMain span, body[data-theme="dark"] .moonMansionMeta span, body[data-theme="dark"] .planetCard p, body[data-theme="dark"] .astronomyExplain p{ color:#fff6e8!important; -webkit-text-fill-color:#fff6e8!important; } body.dark .astronomySectionTitle span, body.dark .moonMansionMeta b, body.dark .planetCard h3, body[data-theme="dark"] .astronomySectionTitle span, body[data-theme="dark"] .moonMansionMeta b, body[data-theme="dark"] .planetCard h3{ color:#d7c7b8!important; -webkit-text-fill-color:#d7c7b8!important; } @media(max-width:980px){ .planetCards{grid-template-columns:repeat(2,1fr)!important;} } @media(max-width:680px){ .astronomyPageShell{width:min(96vw,680px)!important;margin-top:12px!important;gap:12px!important;} .astronomyHero{display:grid!important;padding:16px!important;border-radius:22px!important;} .astronomyHeroBadge{min-width:0!important;} .astronomySectionTitle{display:grid!important;align-items:start!important;} .moonMansionMeta{grid-template-columns:1fr!important;} .planetCards{grid-template-columns:1fr!important;gap:10px!important;} .planetCard{min-height:104px!important;border-radius:18px!important;padding:13px!important;} .moonMansionMain{display:grid!important;text-align:center!important;} } /* Stage255: interactive astronomy SVG wheel */ .astroWheelCard{ border-radius:26px!important; padding:18px!important; background:var(--panel-bg,var(--card,#fffaf3))!important; border:1px solid rgba(15,122,58,.16)!important; box-shadow:0 12px 30px rgba(46,32,15,.08)!important; } .astroWheelWrap{ display:grid!important; grid-template-columns:minmax(320px,1fr) 310px!important; gap:16px!important; align-items:stretch!important; } .astroWheel{ min-height:420px!important; display:grid!important; place-items:center!important; border-radius:24px!important; background:radial-gradient(circle at center,rgba(15,122,58,.10),rgba(183,131,25,.06) 48%,rgba(15,122,58,.04))!important; overflow:hidden!important; } .astroWheelSvg{ width:min(100%,560px)!important; height:auto!important; display:block!important; } .astroOuterCircle{ fill:rgba(255,255,255,.42)!important; stroke:rgba(15,122,58,.38)!important; stroke-width:2!important; } .astroSignBand{ fill:rgba(255,255,255,.34)!important; stroke:rgba(15,122,58,.16)!important; stroke-width:1!important; } .astroSignBand:nth-of-type(odd){ fill:rgba(15,122,58,.08)!important; } .astroSignLabel{ font-size:13px!important; font-weight:900!important; fill:var(--smart-text,#2c2016)!important; paint-order:stroke!important; stroke:rgba(255,255,255,.65)!important; stroke-width:3px!important; } .astroTick{ stroke:rgba(15,122,58,.22)!important; stroke-width:1!important; } .astroTick.major{ stroke:rgba(183,131,25,.55)!important; stroke-width:2!important; } .astroInnerCircle{ fill:rgba(255,255,255,.74)!important; stroke:rgba(183,131,25,.34)!important; stroke-width:2!important; } .astroCenterTitle{ font-size:18px!important; font-weight:1000!important; fill:var(--green,#0f7a3a)!important; } .astroCenterSub{ font-size:13px!important; font-weight:900!important; fill:var(--smart-muted,#6b5a4d)!important; } .astroBodyNode{ cursor:pointer!important; outline:none!important; filter:drop-shadow(0 6px 8px rgba(0,0,0,.18))!important; } .astroBodyNode circle{ fill:#fff!important; stroke:var(--green,#0f7a3a)!important; stroke-width:2.5!important; } .astroBodyNode text{ fill:var(--green,#0f7a3a)!important; font-size:24px!important; font-weight:1000!important; } .astroBodyNode:hover circle, .astroBodyNode.active circle, .astroBodyNode:focus-visible circle{ fill:var(--green,#0f7a3a)!important; stroke:#b78319!important; stroke-width:3.5!important; filter:url(#astroGlow)!important; } .astroBodyNode:hover text, .astroBodyNode.active text, .astroBodyNode:focus-visible text{ fill:#fff!important; } .astroBodyInfo{ border-radius:24px!important; padding:18px!important; background:linear-gradient(135deg,rgba(15,122,58,.12),rgba(183,131,25,.08))!important; border:1px solid rgba(15,122,58,.16)!important; display:grid!important; align-content:center!important; text-align:center!important; min-height:240px!important; } .astroInfoIcon{ width:74px!important; height:74px!important; margin:0 auto 8px!important; border-radius:24px!important; display:grid!important; place-items:center!important; background:#fff!important; color:var(--green,#0f7a3a)!important; -webkit-text-fill-color:var(--green,#0f7a3a)!important; font-size:44px!important; box-shadow:0 10px 24px rgba(15,122,58,.16)!important; } .astroBodyInfo h3{ margin:0 0 12px!important; color:var(--green,#0f7a3a)!important; -webkit-text-fill-color:var(--green,#0f7a3a)!important; font-size:28px!important; } .astroBodyInfo dl{ margin:0!important; display:grid!important; gap:8px!important; } .astroBodyInfo dl div{ display:flex!important; justify-content:space-between!important; gap:10px!important; padding:9px 11px!important; border-radius:14px!important; background:rgba(255,255,255,.62)!important; } .astroBodyInfo dt{ color:var(--smart-muted,#6b5a4d)!important; -webkit-text-fill-color:var(--smart-muted,#6b5a4d)!important; font-weight:900!important; } .astroBodyInfo dd{ margin:0!important; color:var(--smart-text,#2c2016)!important; -webkit-text-fill-color:var(--smart-text,#2c2016)!important; font-weight:1000!important; } .astroWheelLegend{ margin-top:12px!important; display:flex!important; flex-wrap:wrap!important; gap:8px!important; justify-content:center!important; } .astroWheelLegend button{ border:1px solid rgba(15,122,58,.22)!important; background:#fff!important; color:var(--smart-text,#2c2016)!important; -webkit-text-fill-color:var(--smart-text,#2c2016)!important; border-radius:999px!important; min-height:36px!important; padding:0 12px!important; display:inline-flex!important; align-items:center!important; gap:6px!important; font-weight:900!important; cursor:pointer!important; } .astroWheelLegend button b{ color:var(--green,#0f7a3a)!important; -webkit-text-fill-color:var(--green,#0f7a3a)!important; font-size:20px!important; } .astroWheelLegend button.active{ background:var(--green,#0f7a3a)!important; color:#fff!important; -webkit-text-fill-color:#fff!important; } .astroWheelLegend button.active b, .astroWheelLegend button.active span{ color:#fff!important; -webkit-text-fill-color:#fff!important; } body.dark .astroWheelCard, body[data-theme="dark"] .astroWheelCard{ background:rgba(13,20,16,.88)!important; border-color:rgba(159,240,184,.16)!important; } body.dark .astroWheel, body[data-theme="dark"] .astroWheel{ background:radial-gradient(circle at center,rgba(159,240,184,.10),rgba(183,131,25,.10) 48%,rgba(255,255,255,.03))!important; } body.dark .astroOuterCircle, body[data-theme="dark"] .astroOuterCircle{ fill:rgba(255,255,255,.06)!important; stroke:rgba(159,240,184,.34)!important; } body.dark .astroSignBand, body[data-theme="dark"] .astroSignBand{ fill:rgba(255,255,255,.05)!important; stroke:rgba(159,240,184,.12)!important; } body.dark .astroSignBand:nth-of-type(odd), body[data-theme="dark"] .astroSignBand:nth-of-type(odd){ fill:rgba(159,240,184,.08)!important; } body.dark .astroSignLabel, body[data-theme="dark"] .astroSignLabel{ fill:#fff6e8!important; stroke:rgba(0,0,0,.75)!important; } body.dark .astroInnerCircle, body[data-theme="dark"] .astroInnerCircle{ fill:rgba(0,0,0,.35)!important; stroke:rgba(255,211,108,.28)!important; } body.dark .astroCenterTitle, body.dark .astroBodyInfo h3, body[data-theme="dark"] .astroCenterTitle, body[data-theme="dark"] .astroBodyInfo h3{ fill:#9ff0b8!important; color:#9ff0b8!important; -webkit-text-fill-color:#9ff0b8!important; } body.dark .astroCenterSub, body[data-theme="dark"] .astroCenterSub{ fill:#d7c7b8!important; } body.dark .astroBodyInfo, body[data-theme="dark"] .astroBodyInfo{ background:linear-gradient(135deg,rgba(159,240,184,.10),rgba(255,211,108,.08))!important; border-color:rgba(159,240,184,.15)!important; } body.dark .astroBodyInfo dl div, body[data-theme="dark"] .astroBodyInfo dl div{ background:rgba(255,255,255,.08)!important; } body.dark .astroBodyInfo dt, body[data-theme="dark"] .astroBodyInfo dt{ color:#d7c7b8!important; -webkit-text-fill-color:#d7c7b8!important; } body.dark .astroBodyInfo dd, body[data-theme="dark"] .astroBodyInfo dd{ color:#fff6e8!important; -webkit-text-fill-color:#fff6e8!important; } @media(max-width:900px){ .astroWheelWrap{ grid-template-columns:1fr!important; } .astroBodyInfo{ min-height:0!important; } } @media(max-width:560px){ .astroWheelCard{ padding:12px!important; border-radius:20px!important; } .astroWheel{ min-height:320px!important; border-radius:18px!important; } .astroSignLabel{ font-size:11px!important; } .astroBodyNode text{ font-size:22px!important; } .astroBodyNode circle{ r:16!important; } .astroWheelLegend{ justify-content:flex-start!important; overflow-x:auto!important; flex-wrap:nowrap!important; padding-bottom:4px!important; } .astroWheelLegend button{ flex:0 0 auto!important; } } /* Stage256: moon mansion range source note */ .moonMansionSource{ margin:0!important; padding:10px 12px!important; border-radius:14px!important; background:rgba(183,131,25,.10)!important; color:var(--smart-muted,#6b5a4d)!important; -webkit-text-fill-color:var(--smart-muted,#6b5a4d)!important; font-weight:900!important; line-height:1.65!important; text-align:center!important; } body.dark .moonMansionSource, body[data-theme="dark"] .moonMansionSource{ background:rgba(255,211,108,.12)!important; color:#d7c7b8!important; -webkit-text-fill-color:#d7c7b8!important; } @media(max-width:900px){ .moonMansionMeta{grid-template-columns:repeat(2,1fr)!important;} } @media(max-width:560px){ .moonMansionMeta{grid-template-columns:1fr!important;} } /* Stage257: planet image-like orbs with Arabic labels */ .astroBodyNode .planetOrbCircle{ stroke:#ffffff!important; stroke-width:2.2!important; filter:drop-shadow(0 5px 8px rgba(0,0,0,.28))!important; } .astroBodyNode .planetOrbRing{ fill:none!important; stroke:#d8a84b!important; stroke-width:4!important; opacity:.92!important; transform:rotate(-18deg)!important; } .astroBodyNode .planetOrbBand{ fill:none!important; stroke:rgba(120,53,15,.55)!important; stroke-width:3!important; stroke-linecap:round!important; } .astroBodyNode .planetOrbBand.lower{ stroke:rgba(255,255,255,.38)!important; stroke-width:2!important; } .astroBodyNode .astroBodyName{ font-size:12px!important; font-weight:1000!important; fill:var(--smart-text,#2c2016)!important; paint-order:stroke!important; stroke:rgba(255,255,255,.86)!important; stroke-width:4px!important; pointer-events:none!important; } .astroBodyNode:hover .planetOrbCircle, .astroBodyNode.active .planetOrbCircle, .astroBodyNode:focus-visible .planetOrbCircle{ stroke:#b78319!important; stroke-width:3.2!important; filter:url(#astroGlow) drop-shadow(0 8px 14px rgba(15,122,58,.32))!important; } .astroBodyNode:hover .astroBodyName, .astroBodyNode.active .astroBodyName, .astroBodyNode:focus-visible .astroBodyName{ fill:var(--green,#0f7a3a)!important; stroke:#ffffff!important; } .astroBodyNode circle:not(.planetOrbCircle){ display:none!important; } .astroBodyNode > text:not(.astroBodyName){ display:none!important; } .astroInfoIcon{ background:radial-gradient(circle at 32% 24%,#f8fafc 0%,#cbd5e1 58%,#64748b 100%)!important; color:transparent!important; -webkit-text-fill-color:transparent!important; border:3px solid rgba(255,255,255,.9)!important; } .astroInfoIcon.planetInfo-sun{background:radial-gradient(circle at 32% 24%,#fff176 0%,#f59e0b 58%,#f97316 100%)!important;} .astroInfoIcon.planetInfo-moon{background:radial-gradient(circle at 32% 24%,#f8fafc 0%,#cbd5e1 58%,#94a3b8 100%)!important;} .astroInfoIcon.planetInfo-mercury{background:radial-gradient(circle at 32% 24%,#e5e7eb 0%,#9ca3af 58%,#6b7280 100%)!important;} .astroInfoIcon.planetInfo-venus{background:radial-gradient(circle at 32% 24%,#fde68a 0%,#f59e0b 58%,#b45309 100%)!important;} .astroInfoIcon.planetInfo-mars{background:radial-gradient(circle at 32% 24%,#fb923c 0%,#dc2626 58%,#7f1d1d 100%)!important;} .astroInfoIcon.planetInfo-jupiter{background:radial-gradient(circle at 32% 24%,#fed7aa 0%,#c08457 58%,#7c2d12 100%)!important;position:relative!important;} .astroInfoIcon.planetInfo-saturn{background:radial-gradient(circle at 32% 24%,#fde68a 0%,#b78319 58%,#765314 100%)!important;position:relative!important;} .astroInfoIcon.planetInfo-saturn::before{ content:""!important; position:absolute!important; left:-16px!important; right:-16px!important; top:50%!important; height:18px!important; border:5px solid #d8a84b!important; border-left-color:transparent!important; border-right-color:transparent!important; border-radius:50%!important; transform:translateY(-50%) rotate(-18deg)!important; z-index:-1!important; } .planetLegendOrb{ width:20px!important; height:20px!important; border-radius:50%!important; display:inline-block!important; flex:0 0 auto!important; border:2px solid rgba(255,255,255,.9)!important; box-shadow:0 2px 6px rgba(0,0,0,.18)!important; background:radial-gradient(circle at 32% 24%,#f8fafc 0%,#cbd5e1 58%,#64748b 100%)!important; } .planetLegend-sun{background:radial-gradient(circle at 32% 24%,#fff176 0%,#f59e0b 58%,#f97316 100%)!important;} .planetLegend-moon{background:radial-gradient(circle at 32% 24%,#f8fafc 0%,#cbd5e1 58%,#94a3b8 100%)!important;} .planetLegend-mercury{background:radial-gradient(circle at 32% 24%,#e5e7eb 0%,#9ca3af 58%,#6b7280 100%)!important;} .planetLegend-venus{background:radial-gradient(circle at 32% 24%,#fde68a 0%,#f59e0b 58%,#b45309 100%)!important;} .planetLegend-mars{background:radial-gradient(circle at 32% 24%,#fb923c 0%,#dc2626 58%,#7f1d1d 100%)!important;} .planetLegend-jupiter{background:radial-gradient(circle at 32% 24%,#fed7aa 0%,#c08457 58%,#7c2d12 100%)!important;} .planetLegend-saturn{background:radial-gradient(circle at 32% 24%,#fde68a 0%,#b78319 58%,#765314 100%)!important;} .astroWheelLegend button.active .planetLegendOrb{ border-color:#ffffff!important; box-shadow:0 0 0 3px rgba(255,255,255,.24)!important; } body.dark .astroBodyNode .astroBodyName, body[data-theme="dark"] .astroBodyNode .astroBodyName{ fill:#fff6e8!important; stroke:rgba(0,0,0,.88)!important; } body.dark .astroBodyNode:hover .astroBodyName, body.dark .astroBodyNode.active .astroBodyName, body.dark .astroBodyNode:focus-visible .astroBodyName, body[data-theme="dark"] .astroBodyNode:hover .astroBodyName, body[data-theme="dark"] .astroBodyNode.active .astroBodyName, body[data-theme="dark"] .astroBodyNode:focus-visible .astroBodyName{ fill:#9ff0b8!important; stroke:rgba(0,0,0,.9)!important; } @media(max-width:560px){ .astroBodyNode .astroBodyName{ font-size:11px!important; stroke-width:3.5px!important; } } /* Stage258: astronomy page = interactive wheel only, polished display */ .astronomyWheelOnlyPage{ width:min(1280px,96vw)!important; margin:18px auto 36px!important; } .astroWheelOnlyCard{ padding:20px!important; border-radius:32px!important; background: radial-gradient(circle at 18% 12%,rgba(255,211,108,.20),transparent 28%), radial-gradient(circle at 82% 20%,rgba(88,166,255,.16),transparent 28%), linear-gradient(135deg,rgba(255,250,243,.96),rgba(239,248,241,.93))!important; border:1px solid rgba(15,122,58,.18)!important; box-shadow:0 24px 60px rgba(38,25,12,.14)!important; } .astroWheelOnlyHead{ align-items:center!important; margin-bottom:16px!important; } .astroWheelOnlyHead h1{ margin:6px 0!important; font-size:clamp(30px,5.2vw,54px)!important; line-height:1.05!important; color:var(--green,#0f7a3a)!important; -webkit-text-fill-color:var(--green,#0f7a3a)!important; } .astroWheelOnlyHead #astronomyDateLine{ margin:0!important; color:var(--smart-muted,#6b5a4d)!important; -webkit-text-fill-color:var(--smart-muted,#6b5a4d)!important; font-weight:1000!important; } .astroWheelOnlyHead .astronomyEyebrow{ background:rgba(15,122,58,.10)!important; color:var(--green,#0f7a3a)!important; -webkit-text-fill-color:var(--green,#0f7a3a)!important; } .astroWheelHint{ display:inline-flex!important; align-items:center!important; justify-content:center!important; padding:10px 14px!important; border-radius:999px!important; background:rgba(15,122,58,.10)!important; color:var(--smart-text,#2c2016)!important; -webkit-text-fill-color:var(--smart-text,#2c2016)!important; font-weight:1000!important; text-align:center!important; } .astroWheelOnlyWrap{ grid-template-columns:minmax(420px,1fr) 360px!important; gap:18px!important; } .astroWheelOnlyCard .astroWheel{ min-height:610px!important; background: radial-gradient(circle at center,rgba(255,255,255,.88) 0 11%,transparent 12%), radial-gradient(circle at center,rgba(15,122,58,.15),rgba(183,131,25,.09) 52%,rgba(20,83,45,.08))!important; border:1px solid rgba(15,122,58,.16)!important; box-shadow:inset 0 0 0 1px rgba(255,255,255,.36), inset 0 0 65px rgba(15,122,58,.12)!important; } .astroWheelOnlyCard .astroWheelSvg{ width:min(100%,650px)!important; } .astroWheelOnlyCard .astroOuterCircle{ fill:rgba(255,255,255,.34)!important; stroke:rgba(15,122,58,.45)!important; stroke-width:2.4!important; } .astroWheelOnlyCard .astroSignBand{ fill:rgba(255,255,255,.36)!important; stroke:rgba(15,122,58,.18)!important; } .astroWheelOnlyCard .astroSignBand:nth-of-type(odd){ fill:rgba(15,122,58,.09)!important; } .astroWheelOnlyCard .astroSignLabel{ font-size:14px!important; fill:#1e2f23!important; stroke:rgba(255,255,255,.92)!important; stroke-width:4px!important; } .astroBodyOrbitLine line{ stroke:rgba(15,122,58,.14)!important; stroke-width:1.4!important; stroke-dasharray:4 6!important; } .astroBodyOrbitLine.active line{ stroke:#b78319!important; stroke-width:3!important; stroke-dasharray:none!important; } .astroBodyNode .planetOrbCircle{ stroke:#fff!important; stroke-width:2.8!important; filter:drop-shadow(0 7px 10px rgba(0,0,0,.30))!important; } .astroBodyNode .planetOrbRing{ stroke:#f0c260!important; stroke-width:5!important; } .astroBodyNode .astroBodyName{ font-size:13px!important; stroke-width:4.2px!important; } .astroBodyNode.active .planetOrbCircle{ stroke:#ffde7a!important; stroke-width:4.6!important; filter:url(#astroGlow) drop-shadow(0 0 16px rgba(255,198,84,.80)) drop-shadow(0 8px 14px rgba(0,0,0,.34))!important; } .astroBodyNode.active .astroBodyName{ fill:#0f7a3a!important; stroke:#fff8dc!important; font-size:15px!important; } .astroBodyInfo{ min-height:610px!important; align-content:start!important; text-align:initial!important; padding:16px!important; background: radial-gradient(circle at 50% 0%,rgba(255,211,108,.22),transparent 28%), linear-gradient(180deg,rgba(255,255,255,.78),rgba(255,250,243,.72))!important; border:1px solid rgba(15,122,58,.18)!important; box-shadow:inset 0 0 40px rgba(255,255,255,.28)!important; } .astroInfoSpaceArt{ height:150px!important; border-radius:22px!important; position:relative!important; overflow:hidden!important; margin-bottom:14px!important; background: radial-gradient(circle at 22% 30%,#fff 0 2px,transparent 3px), radial-gradient(circle at 68% 24%,#fff 0 1.5px,transparent 2.5px), radial-gradient(circle at 82% 70%,#fff 0 2px,transparent 3px), linear-gradient(135deg,#0b1f33,#123b2a 58%,#462b10)!important; box-shadow:inset 0 0 40px rgba(255,255,255,.10),0 10px 26px rgba(0,0,0,.16)!important; } .astroInfoSpaceArt span{ position:absolute!important; width:88px!important; height:88px!important; border-radius:50%!important; left:22px!important; bottom:20px!important; background:radial-gradient(circle at 34% 28%,#fff7c2 0%,#f59e0b 44%,#9a3412 100%)!important; box-shadow:0 0 28px rgba(245,158,11,.55)!important; } .astroInfoSpaceArt i{ position:absolute!important; width:78px!important; height:78px!important; border-radius:50%!important; right:42px!important; top:30px!important; background:radial-gradient(circle at 32% 26%,#f8fafc 0%,#94a3b8 55%,#334155 100%)!important; box-shadow:0 0 20px rgba(203,213,225,.34)!important; } .astroInfoSpaceArt em{ position:absolute!important; width:130px!important; height:34px!important; border:6px solid rgba(240,194,96,.85)!important; border-left-color:transparent!important; border-right-color:transparent!important; border-radius:50%!important; right:16px!important; top:52px!important; transform:rotate(-16deg)!important; } .astroInfoTop{ display:flex!important; align-items:center!important; gap:13px!important; margin-bottom:14px!important; padding:12px!important; border-radius:20px!important; background:rgba(15,122,58,.08)!important; } .astroInfoTop .astroInfoIcon{ width:76px!important; height:76px!important; margin:0!important; flex:0 0 auto!important; } .astroInfoLabel{ display:block!important; color:var(--smart-muted,#6b5a4d)!important; -webkit-text-fill-color:var(--smart-muted,#6b5a4d)!important; font-weight:1000!important; margin-bottom:4px!important; } .astroInfoTop h3{ margin:0!important; font-size:34px!important; } .astroBodyInfo dl{ gap:10px!important; } .astroBodyInfo dl div{ background:rgba(255,255,255,.70)!important; border:1px solid rgba(15,122,58,.10)!important; border-radius:16px!important; padding:11px 12px!important; } .astroWheelLegend{ margin-top:16px!important; } .astroWheelLegend button{ min-height:42px!important; padding:0 14px!important; background:rgba(255,255,255,.74)!important; border-color:rgba(15,122,58,.20)!important; box-shadow:0 6px 16px rgba(46,32,15,.06)!important; } .astroWheelLegend button.active{ background:linear-gradient(135deg,#0f7a3a,#16894a)!important; box-shadow:0 9px 20px rgba(15,122,58,.22)!important; } body.dark .astroWheelOnlyCard, body[data-theme="dark"] .astroWheelOnlyCard{ background: radial-gradient(circle at 18% 12%,rgba(255,211,108,.12),transparent 28%), radial-gradient(circle at 82% 20%,rgba(88,166,255,.12),transparent 28%), linear-gradient(135deg,rgba(6,16,12,.96),rgba(12,24,17,.94))!important; border-color:rgba(159,240,184,.18)!important; box-shadow:0 24px 60px rgba(0,0,0,.34)!important; } body.dark .astroWheelOnlyHead h1, body.dark .astroWheelOnlyHead .astronomyEyebrow, body.dark .astroBodyNode.active .astroBodyName, body[data-theme="dark"] .astroWheelOnlyHead h1, body[data-theme="dark"] .astroWheelOnlyHead .astronomyEyebrow, body[data-theme="dark"] .astroBodyNode.active .astroBodyName{ color:#9ff0b8!important; -webkit-text-fill-color:#9ff0b8!important; fill:#9ff0b8!important; } body.dark .astroWheelOnlyHead #astronomyDateLine, body.dark .astroWheelHint, body.dark .astroInfoLabel, body[data-theme="dark"] .astroWheelOnlyHead #astronomyDateLine, body[data-theme="dark"] .astroWheelHint, body[data-theme="dark"] .astroInfoLabel{ color:#d7c7b8!important; -webkit-text-fill-color:#d7c7b8!important; } body.dark .astroWheelHint, body[data-theme="dark"] .astroWheelHint{ background:rgba(159,240,184,.10)!important; } body.dark .astroWheelOnlyCard .astroWheel, body[data-theme="dark"] .astroWheelOnlyCard .astroWheel{ background: radial-gradient(circle at center,rgba(255,255,255,.06) 0 11%,transparent 12%), radial-gradient(circle at center,rgba(159,240,184,.12),rgba(255,211,108,.08) 52%,rgba(255,255,255,.03))!important; border-color:rgba(159,240,184,.15)!important; } body.dark .astroWheelOnlyCard .astroSignLabel, body[data-theme="dark"] .astroWheelOnlyCard .astroSignLabel{ fill:#fff6e8!important; stroke:rgba(0,0,0,.9)!important; } body.dark .astroBodyInfo, body[data-theme="dark"] .astroBodyInfo{ background: radial-gradient(circle at 50% 0%,rgba(255,211,108,.13),transparent 28%), linear-gradient(180deg,rgba(255,255,255,.07),rgba(0,0,0,.16))!important; border-color:rgba(159,240,184,.16)!important; } body.dark .astroInfoTop, body[data-theme="dark"] .astroInfoTop{ background:rgba(159,240,184,.09)!important; } body.dark .astroBodyInfo dl div, body[data-theme="dark"] .astroBodyInfo dl div{ background:rgba(255,255,255,.08)!important; border-color:rgba(255,255,255,.10)!important; } @media(max-width:980px){ .astroWheelOnlyWrap{ grid-template-columns:1fr!important; } .astroWheelOnlyCard .astroWheel, .astroBodyInfo{ min-height:auto!important; } .astroBodyInfo{ text-align:initial!important; } } @media(max-width:620px){ .astronomyWheelOnlyPage{ width:96vw!important; margin-top:10px!important; } .astroWheelOnlyCard{ padding:12px!important; border-radius:22px!important; } .astroWheelOnlyHead{ display:grid!important; } .astroWheelOnlyCard .astroWheel{ min-height:365px!important; } .astroWheelOnlyCard .astroWheelSvg{ width:112%!important; max-width:none!important; } .astroWheelOnlyCard .astroSignLabel{ font-size:11px!important; } .astroBodyNode .astroBodyName{ font-size:10.5px!important; } .astroBodyNode.active .astroBodyName{ font-size:12px!important; } .astroInfoSpaceArt{ height:120px!important; } } /* Stage259: earth center, real-style planet images, full 360 degree hands */ .astroEarthCenter{ filter:drop-shadow(0 0 16px rgba(68,160,255,.55)) drop-shadow(0 8px 14px rgba(0,0,0,.28))!important; pointer-events:none!important; } .astroWheelOnlyCard .astroInnerCircle{ fill:rgba(255,255,255,.62)!important; stroke:rgba(43,125,210,.35)!important; stroke-width:2.5!important; } .astroDegreeLabel{ font-size:10px!important; font-weight:1000!important; fill:#69430e!important; paint-order:stroke!important; stroke:rgba(255,255,255,.86)!important; stroke-width:3px!important; } .astroTick{ stroke:rgba(15,122,58,.12)!important; stroke-width:.65!important; } .astroTick.medium{ stroke:rgba(15,122,58,.25)!important; stroke-width:1.15!important; } .astroTick.major{ stroke:rgba(183,131,25,.68)!important; stroke-width:2.4!important; } .astroBodyOrbitLine line{ stroke:rgba(15,122,58,.22)!important; stroke-width:1.7!important; stroke-dasharray:none!important; stroke-linecap:round!important; } .astroBodyOrbitLine circle{ fill:rgba(183,131,25,.75)!important; stroke:#fff!important; stroke-width:1.2!important; } .astroBodyOrbitLine.active line{ stroke:#f4b83f!important; stroke-width:4.2!important; filter:drop-shadow(0 0 7px rgba(244,184,63,.72))!important; } .astroBodyOrbitLine.active circle{ fill:#f4b83f!important; r:5!important; } .astroBodyNode .planetPhoto{ filter:drop-shadow(0 8px 10px rgba(0,0,0,.32))!important; pointer-events:none!important; } .astroBodyNode:hover .planetPhoto, .astroBodyNode.active .planetPhoto, .astroBodyNode:focus-visible .planetPhoto{ filter:drop-shadow(0 0 14px rgba(255,215,115,.85)) drop-shadow(0 10px 14px rgba(0,0,0,.36))!important; } .astroBodyNode.active::after{ content:""!important; } .astroBodyNode.active .astroBodyName{ fill:#0f7a3a!important; stroke:#fff8dc!important; font-size:16px!important; } .astroInfoIcon.planetInfo-sun{background-image:url("./assets/planets/sun.png")!important;background-size:cover!important;background-position:center!important;} .astroInfoIcon.planetInfo-moon{background-image:url("./assets/planets/moon.png")!important;background-size:cover!important;background-position:center!important;} .astroInfoIcon.planetInfo-mercury{background-image:url("./assets/planets/mercury.png")!important;background-size:cover!important;background-position:center!important;} .astroInfoIcon.planetInfo-venus{background-image:url("./assets/planets/venus.png")!important;background-size:cover!important;background-position:center!important;} .astroInfoIcon.planetInfo-mars{background-image:url("./assets/planets/mars.png")!important;background-size:cover!important;background-position:center!important;} .astroInfoIcon.planetInfo-jupiter{background-image:url("./assets/planets/jupiter.png")!important;background-size:cover!important;background-position:center!important;} .astroInfoIcon.planetInfo-saturn{background-image:url("./assets/planets/saturn.png")!important;background-size:contain!important;background-repeat:no-repeat!important;background-position:center!important;background-color:transparent!important;border-color:transparent!important;} .planetLegend-sun{background-image:url("./assets/planets/sun.png")!important;background-size:cover!important;background-position:center!important;} .planetLegend-moon{background-image:url("./assets/planets/moon.png")!important;background-size:cover!important;background-position:center!important;} .planetLegend-mercury{background-image:url("./assets/planets/mercury.png")!important;background-size:cover!important;background-position:center!important;} .planetLegend-venus{background-image:url("./assets/planets/venus.png")!important;background-size:cover!important;background-position:center!important;} .planetLegend-mars{background-image:url("./assets/planets/mars.png")!important;background-size:cover!important;background-position:center!important;} .planetLegend-jupiter{background-image:url("./assets/planets/jupiter.png")!important;background-size:cover!important;background-position:center!important;} .planetLegend-saturn{background-image:url("./assets/planets/saturn.png")!important;background-size:contain!important;background-repeat:no-repeat!important;background-position:center!important;background-color:transparent!important;border-color:transparent!important;box-shadow:none!important;} body.dark .astroDegreeLabel, body[data-theme="dark"] .astroDegreeLabel{ fill:#ffe0a3!important; stroke:rgba(0,0,0,.88)!important; } body.dark .astroEarthCenter, body[data-theme="dark"] .astroEarthCenter{ filter:drop-shadow(0 0 18px rgba(88,166,255,.72)) drop-shadow(0 8px 14px rgba(0,0,0,.42))!important; } body.dark .astroBodyOrbitLine line, body[data-theme="dark"] .astroBodyOrbitLine line{ stroke:rgba(159,240,184,.22)!important; } body.dark .astroBodyOrbitLine.active line, body[data-theme="dark"] .astroBodyOrbitLine.active line{ stroke:#ffd76b!important; } @media(max-width:620px){ .astroDegreeLabel{ font-size:8.5px!important; stroke-width:2.4px!important; } .astroBodyNode.active .astroBodyName{ font-size:12.5px!important; } } /* Stage260: restore clickable planets, keep earth clean, show edge degree markers */ .astroEarthCenter{ pointer-events:none!important; } .astroBodyOrbitLine{ pointer-events:none!important; } .astroBodyOrbitLine line{ stroke:rgba(15,122,58,.24)!important; stroke-width:1.8!important; stroke-linecap:round!important; } .astroBodyOrbitLine.active line{ stroke:#f4b83f!important; stroke-width:4.4!important; filter:drop-shadow(0 0 8px rgba(244,184,63,.82))!important; } .astroEdgePoint{ fill:#ffffff!important; stroke:#b78319!important; stroke-width:2.4!important; filter:drop-shadow(0 2px 5px rgba(0,0,0,.25))!important; } .astroBodyOrbitLine.active .astroEdgePoint{ fill:#f4b83f!important; stroke:#ffffff!important; stroke-width:3!important; filter:drop-shadow(0 0 8px rgba(244,184,63,.95))!important; } .astroEdgeDegree{ font-size:10.5px!important; font-weight:1000!important; fill:#5c3908!important; paint-order:stroke!important; stroke:rgba(255,255,255,.92)!important; stroke-width:3.2px!important; opacity:.92!important; } .astroBodyOrbitLine.active .astroEdgeDegree{ font-size:13px!important; fill:#0f7a3a!important; stroke:#fff6cf!important; opacity:1!important; } .astroBodyNode{ pointer-events:auto!important; cursor:pointer!important; } .astroBodyNode .planetPhoto, .astroBodyNode .astroBodyName{ pointer-events:none!important; } .astroBodyHitArea{ fill:transparent!important; stroke:transparent!important; pointer-events:all!important; } .astroBodyNode:hover .astroBodyHitArea, .astroBodyNode:focus-visible .astroBodyHitArea, .astroBodyNode.active .astroBodyHitArea{ stroke:rgba(244,184,63,.55)!important; stroke-width:2!important; } body.dark .astroEdgeDegree, body[data-theme="dark"] .astroEdgeDegree{ fill:#ffe0a3!important; stroke:rgba(0,0,0,.9)!important; } body.dark .astroBodyOrbitLine line, body[data-theme="dark"] .astroBodyOrbitLine line{ stroke:rgba(159,240,184,.25)!important; } body.dark .astroEdgePoint, body[data-theme="dark"] .astroEdgePoint{ fill:#102018!important; stroke:#ffd76b!important; } body.dark .astroBodyOrbitLine.active .astroEdgeDegree, body[data-theme="dark"] .astroBodyOrbitLine.active .astroEdgeDegree{ fill:#9ff0b8!important; stroke:rgba(0,0,0,.9)!important; } @media(max-width:620px){ .astroEdgeDegree{ font-size:8.5px!important; stroke-width:2.4px!important; } .astroBodyOrbitLine.active .astroEdgeDegree{ font-size:10px!important; } } /* Stage261: robust click layer, radial zodiac labels, degree intersection markers */ .astroWheelSvg, .astroWheelSvg *{ -webkit-tap-highlight-color:transparent!important; } .astroSignLabelRotated{ font-size:15px!important; font-weight:1000!important; fill:#b16f10!important; stroke:rgba(255,255,255,.94)!important; stroke-width:4.6px!important; letter-spacing:.02em!important; } .astroWheelOnlyCard .astroSignLabelRotated{ fill:#b16f10!important; } .astroSignBand{ transition:fill .18s ease, opacity .18s ease!important; } .astroSignBand:nth-of-type(odd){ fill:rgba(183,131,25,.10)!important; } .astroBodyNode, .astroBodyOrbitLine{ cursor:pointer!important; pointer-events:auto!important; } .astroBodyNode .planetPhoto, .astroBodyNode .astroBodyName{ pointer-events:none!important; } .astroBodyHitArea{ fill:rgba(255,255,255,.001)!important; stroke:transparent!important; pointer-events:all!important; } .astroBodyNode:hover .astroBodyHitArea, .astroBodyNode:focus-visible .astroBodyHitArea, .astroBodyNode.active .astroBodyHitArea{ stroke:rgba(244,184,63,.58)!important; stroke-width:2.4!important; } .astroBodyOrbitLine{ outline:none!important; } .astroBodyOrbitLine .astroEdgeHalo{ fill:rgba(255,255,255,.001)!important; stroke:rgba(183,131,25,.22)!important; stroke-width:4!important; pointer-events:all!important; } .astroBodyOrbitLine .astroEdgePoint{ fill:#fff8dc!important; stroke:#b78319!important; stroke-width:3!important; } .astroBodyOrbitLine .astroEdgeDegree{ font-size:11.5px!important; font-weight:1000!important; fill:#5d3a09!important; stroke:rgba(255,255,255,.96)!important; stroke-width:3.5px!important; opacity:1!important; } .astroBodyOrbitLine.active .astroEdgeHalo{ fill:rgba(255,215,107,.18)!important; stroke:#ffd76b!important; stroke-width:5.4!important; filter:drop-shadow(0 0 10px rgba(255,215,107,.85))!important; } .astroBodyOrbitLine.active .astroEdgePoint{ fill:#ffd76b!important; stroke:#ffffff!important; stroke-width:3.4!important; r:7!important; } .astroBodyOrbitLine.active .astroEdgeDegree{ font-size:14px!important; fill:#0f7a3a!important; stroke:#fff8dc!important; } /* ألوان خفيفة لكل نقطة تقاطع حسب الجرم */ .astroLine-sun .astroEdgePoint{stroke:#f59e0b!important;} .astroLine-moon .astroEdgePoint{stroke:#94a3b8!important;} .astroLine-mercury .astroEdgePoint{stroke:#6b7280!important;} .astroLine-venus .astroEdgePoint{stroke:#d97706!important;} .astroLine-mars .astroEdgePoint{stroke:#dc2626!important;} .astroLine-jupiter .astroEdgePoint{stroke:#92400e!important;} .astroLine-saturn .astroEdgePoint{stroke:#b78319!important;} body.dark .astroSignLabelRotated, body[data-theme="dark"] .astroSignLabelRotated{ fill:#ffd76b!important; stroke:rgba(0,0,0,.92)!important; } body.dark .astroBodyOrbitLine .astroEdgeDegree, body[data-theme="dark"] .astroBodyOrbitLine .astroEdgeDegree{ fill:#ffe0a3!important; stroke:rgba(0,0,0,.92)!important; } body.dark .astroBodyOrbitLine .astroEdgeHalo, body[data-theme="dark"] .astroBodyOrbitLine .astroEdgeHalo{ stroke:rgba(255,215,107,.34)!important; } body.dark .astroBodyOrbitLine.active .astroEdgeDegree, body[data-theme="dark"] .astroBodyOrbitLine.active .astroEdgeDegree{ fill:#9ff0b8!important; stroke:rgba(0,0,0,.92)!important; } @media(max-width:620px){ .astroSignLabelRotated{ font-size:12px!important; stroke-width:3.8px!important; } .astroBodyOrbitLine .astroEdgeDegree{ font-size:9px!important; stroke-width:2.7px!important; } .astroBodyOrbitLine.active .astroEdgeDegree{ font-size:10.5px!important; } } /* Stage262: selected planet detail image, reliable planet click, outside degree */ .astroBodyHitAreaFront{ fill:rgba(255,255,255,.001)!important; stroke:transparent!important; pointer-events:all!important; cursor:pointer!important; } .astroBodyNode:hover .astroBodyHitAreaFront, .astroBodyNode.active .astroBodyHitAreaFront, .astroBodyNode:focus-visible .astroBodyHitAreaFront{ stroke:rgba(255,215,107,.68)!important; stroke-width:2.6!important; } .astroBodyNode .planetPhoto, .astroBodyNode .astroBodyName{ pointer-events:none!important; } .astroBodyOrbitLine line{ stroke-width:2.1px!important; } .astroBodyOrbitLine.active line{ stroke-width:4.8px!important; } .astroBodyOrbitLine .astroEdgeHalo{ fill:rgba(255,215,107,.10)!important; stroke:rgba(183,131,25,.40)!important; stroke-width:4.6px!important; } .astroBodyOrbitLine .astroEdgePoint{ r:6.6!important; fill:#fff8dc!important; stroke:#b78319!important; stroke-width:3.2px!important; } .astroBodyOrbitLine .astroEdgeDegree{ font-size:12.5px!important; font-weight:1000!important; fill:#083f24!important; stroke:rgba(255,255,255,.96)!important; stroke-width:4px!important; paint-order:stroke!important; } .astroBodyOrbitLine.active .astroEdgeHalo{ fill:rgba(255,215,107,.25)!important; stroke:#ffd76b!important; stroke-width:6.2px!important; filter:drop-shadow(0 0 12px rgba(255,215,107,.9))!important; } .astroBodyOrbitLine.active .astroEdgePoint{ r:8.3!important; fill:#ffd76b!important; stroke:#ffffff!important; } .astroBodyOrbitLine.active .astroEdgeDegree{ font-size:15px!important; fill:#0f7a3a!important; stroke:#fff8dc!important; } .astroSelectedBodyArt{ height:174px!important; border-radius:24px!important; position:relative!important; overflow:hidden!important; margin-bottom:14px!important; display:grid!important; place-items:center!important; background: radial-gradient(circle at 22% 28%,#fff 0 2px,transparent 3px), radial-gradient(circle at 68% 20%,#fff 0 1.5px,transparent 2.5px), radial-gradient(circle at 82% 68%,#fff 0 2px,transparent 3px), linear-gradient(135deg,#07182c,#0b2c22 58%,#2b1808)!important; box-shadow:inset 0 0 44px rgba(255,255,255,.10),0 10px 26px rgba(0,0,0,.16)!important; } .astroSelectedBodyArt img{ max-width:78%!important; max-height:142px!important; object-fit:contain!important; filter:drop-shadow(0 0 20px rgba(255,255,255,.25)) drop-shadow(0 10px 18px rgba(0,0,0,.42))!important; } .astroSelectedBodyArt.planetSelected-sun img{ max-height:150px!important; filter:drop-shadow(0 0 28px rgba(255,181,54,.80)) drop-shadow(0 10px 18px rgba(0,0,0,.40))!important; } .astroSelectedBodyArt.planetSelected-saturn img{ max-width:94%!important; max-height:150px!important; } .astroSelectedBodyArt.planetSelected-jupiter img{ max-height:154px!important; } .astroInfoSpaceArt{ display:none!important; } /* تمييز أسماء الأبراج بلون مستقل عن كل النصوص */ .astroSignLabelRotated, .astroWheelOnlyCard .astroSignLabelRotated{ fill:#0f5f9e!important; stroke:rgba(255,248,220,.96)!important; stroke-width:4.8px!important; font-weight:1000!important; } .astroSignLabelRotated:nth-of-type(odd){ fill:#8a3ffc!important; } body.dark .astroSignLabelRotated, body[data-theme="dark"] .astroSignLabelRotated, body.dark .astroWheelOnlyCard .astroSignLabelRotated, body[data-theme="dark"] .astroWheelOnlyCard .astroSignLabelRotated{ fill:#7dd3fc!important; stroke:rgba(0,0,0,.94)!important; } body.dark .astroSignLabelRotated:nth-of-type(odd), body[data-theme="dark"] .astroSignLabelRotated:nth-of-type(odd){ fill:#c4b5fd!important; } body.dark .astroBodyOrbitLine .astroEdgeDegree, body[data-theme="dark"] .astroBodyOrbitLine .astroEdgeDegree{ fill:#ffe0a3!important; stroke:rgba(0,0,0,.94)!important; } @media(max-width:620px){ .astroSelectedBodyArt{ height:132px!important; } .astroSelectedBodyArt img{ max-height:108px!important; } .astroBodyOrbitLine .astroEdgeDegree{ font-size:9.5px!important; stroke-width:3px!important; } .astroBodyOrbitLine.active .astroEdgeDegree{ font-size:11px!important; } } /* Stage263: layout, hit target, zodiac rotation, degree clarity */ .astroWheelOnlyWrap{ grid-template-columns:minmax(520px,1fr) 380px!important; } .astroWheelOnlyCard{ overflow:visible!important; } .astroWheelOnlyCard .astroWheel{ min-height:700px!important; overflow:visible!important; padding:22px!important; } .astroWheelOnlyCard .astroWheelSvg{ width:min(100%,760px)!important; overflow:visible!important; } .astroBodyHitAreaFront{ fill:rgba(255,255,255,.001)!important; stroke:rgba(255,215,107,.0)!important; pointer-events:all!important; cursor:pointer!important; } .astroBodyNode:hover .astroBodyHitAreaFront, .astroBodyNode.active .astroBodyHitAreaFront, .astroBodyNode:focus-visible .astroBodyHitAreaFront{ stroke:rgba(255,215,107,.50)!important; stroke-width:3px!important; } .astroBodyNode .planetPhoto{ pointer-events:none!important; } .astroBodyNode .astroBodyName{ pointer-events:none!important; } .astroSignLabelRotated, .astroWheelOnlyCard .astroSignLabelRotated{ fill:#7c2d12!important; stroke:#fff7d6!important; stroke-width:5px!important; font-size:15.5px!important; font-weight:1000!important; paint-order:stroke!important; letter-spacing:.03em!important; } .astroSignLabelRotated:nth-of-type(odd){ fill:#0f766e!important; } .astroSelectedBodyArt{ height:190px!important; min-height:190px!important; max-height:190px!important; display:flex!important; align-items:center!important; justify-content:center!important; } .astroSelectedBodyArt img{ width:180px!important; height:150px!important; max-width:180px!important; max-height:150px!important; object-fit:contain!important; display:block!important; } .astroSelectedBodyArt.planetSelected-saturn img{ width:250px!important; max-width:250px!important; } .astroSelectedBodyArt.planetSelected-sun img, .astroSelectedBodyArt.planetSelected-jupiter img{ width:190px!important; max-width:190px!important; } .astroInfoTop{ min-height:104px!important; } .astroBodyInfo dl{ min-height:0!important; } .astroDegreeExplain{ margin:12px 0 0!important; padding:10px 12px!important; border-radius:14px!important; background:rgba(15,122,58,.08)!important; color:var(--smart-muted,#6b5a4d)!important; -webkit-text-fill-color:var(--smart-muted,#6b5a4d)!important; font-weight:900!important; line-height:1.6!important; text-align:center!important; } .astroBodyOrbitLine .astroEdgeDegree{ transform-box:fill-box!important; transform-origin:center!important; } body.dark .astroSignLabelRotated, body[data-theme="dark"] .astroSignLabelRotated, body.dark .astroWheelOnlyCard .astroSignLabelRotated, body[data-theme="dark"] .astroWheelOnlyCard .astroSignLabelRotated{ fill:#fbbf24!important; stroke:rgba(0,0,0,.96)!important; } body.dark .astroSignLabelRotated:nth-of-type(odd), body[data-theme="dark"] .astroSignLabelRotated:nth-of-type(odd){ fill:#5eead4!important; } body.dark .astroDegreeExplain, body[data-theme="dark"] .astroDegreeExplain{ background:rgba(159,240,184,.09)!important; color:#d7c7b8!important; -webkit-text-fill-color:#d7c7b8!important; } @media(max-width:1100px){ .astroWheelOnlyWrap{ grid-template-columns:1fr!important; } .astroWheelOnlyCard .astroWheel{ min-height:620px!important; } } @media(max-width:620px){ .astroWheelOnlyCard .astroWheel{ min-height:450px!important; padding:12px!important; } .astroWheelOnlyCard .astroWheelSvg{ width:125%!important; } .astroSignLabelRotated, .astroWheelOnlyCard .astroSignLabelRotated{ font-size:12px!important; stroke-width:4px!important; } .astroSelectedBodyArt{ height:150px!important; min-height:150px!important; max-height:150px!important; } .astroSelectedBodyArt img{ width:140px!important; height:112px!important; max-width:140px!important; max-height:112px!important; } .astroSelectedBodyArt.planetSelected-saturn img{ width:210px!important; max-width:210px!important; } } /* Stage264: closer zodiac labels, stable selection, better mobile layout */ .astroSignLabelRotated, .astroWheelOnlyCard .astroSignLabelRotated{ font-size:13.5px!important; stroke-width:4.2px!important; fill:#7c2d12!important; stroke:#fff7d6!important; } .astroSignLabelRotated:nth-of-type(odd){ fill:#0f766e!important; } .astroBodyNode.active .astroBodyName, .astroBodyOrbitLine.active .astroEdgeDegree{ /* لا نغير حجم النص عند الاختيار حتى لا تتحرك الرسمة */ font-size:inherit!important; } .astroBodyNode.active .astroBodyName{ fill:#0f7a3a!important; stroke:#fff8dc!important; stroke-width:4.2px!important; } .astroBodyOrbitLine.active .astroEdgeDegree{ fill:#0f7a3a!important; stroke:#fff8dc!important; stroke-width:4px!important; } .astroBodyNode.active .planetPhoto{ transform:none!important; } .astroWheelOnlyCard .astroWheel{ contain:layout paint!important; } .astroWheelOnlyCard .astroWheelSvg{ display:block!important; margin:auto!important; } .astroSelectedBodyArt, .astroInfoTop, .astroBodyInfo dl, .astroDegreeExplain{ flex-shrink:0!important; } .astroBodyInfo{ overflow:hidden!important; } body.dark .astroSignLabelRotated, body[data-theme="dark"] .astroSignLabelRotated, body.dark .astroWheelOnlyCard .astroSignLabelRotated, body[data-theme="dark"] .astroWheelOnlyCard .astroSignLabelRotated{ fill:#fbbf24!important; stroke:rgba(0,0,0,.96)!important; } body.dark .astroSignLabelRotated:nth-of-type(odd), body[data-theme="dark"] .astroSignLabelRotated:nth-of-type(odd){ fill:#5eead4!important; } @media(max-width:1100px){ .astroWheelOnlyWrap{ grid-template-columns:1fr!important; } .astroWheelOnlyCard .astroWheel{ min-height:640px!important; width:100%!important; } .astroWheelOnlyCard .astroWheelSvg{ width:min(100%,680px)!important; } .astroBodyInfo{ min-height:auto!important; } } @media(max-width:720px){ .astronomyWheelOnlyPage{ width:100%!important; padding:0 8px!important; box-sizing:border-box!important; } .astroWheelOnlyCard{ padding:10px!important; border-radius:20px!important; } .astroWheelOnlyHead h1{ font-size:28px!important; } .astroWheelHint{ width:100%!important; box-sizing:border-box!important; font-size:13px!important; } .astroWheelOnlyCard .astroWheel{ min-height:520px!important; padding:8px!important; border-radius:18px!important; overflow:visible!important; } .astroWheelOnlyCard .astroWheelSvg{ width:112%!important; transform:translateX(0)!important; } .astroSignLabelRotated, .astroWheelOnlyCard .astroSignLabelRotated{ font-size:10.5px!important; stroke-width:3.3px!important; } .astroBodyNode .astroBodyName{ font-size:10px!important; stroke-width:3px!important; } .astroBodyOrbitLine .astroEdgeDegree{ font-size:8.5px!important; stroke-width:2.5px!important; } .astroBodyInfo{ padding:12px!important; border-radius:20px!important; } .astroSelectedBodyArt{ height:128px!important; min-height:128px!important; max-height:128px!important; border-radius:18px!important; } .astroSelectedBodyArt img{ width:122px!important; height:100px!important; max-width:122px!important; max-height:100px!important; } .astroSelectedBodyArt.planetSelected-saturn img{ width:178px!important; max-width:178px!important; } .astroInfoTop{ min-height:82px!important; gap:9px!important; padding:9px!important; } .astroInfoTop .astroInfoIcon{ width:56px!important; height:56px!important; } .astroInfoTop h3{ font-size:25px!important; } .astroBodyInfo dl div{ padding:8px 9px!important; font-size:13px!important; } } @media(max-width:420px){ .astroWheelOnlyCard .astroWheel{ min-height:470px!important; padding:4px!important; } .astroWheelOnlyCard .astroWheelSvg{ width:122%!important; } .astroSignLabelRotated, .astroWheelOnlyCard .astroSignLabelRotated{ font-size:9.5px!important; stroke-width:3px!important; } .astroWheelLegend{ justify-content:flex-start!important; overflow-x:auto!important; flex-wrap:nowrap!important; padding-bottom:6px!important; } } /* Stage265: professional degree colors, fixed detail column, wider click targets */ .astroWheelOnlyWrap{ align-items:start!important; } .astroWheelOnlyCard .astroWheel{ height:700px!important; min-height:700px!important; max-height:700px!important; } .astroBodyInfo{ height:700px!important; min-height:700px!important; max-height:700px!important; overflow-y:auto!important; overscroll-behavior:contain!important; align-content:start!important; } .astroBodyInfo::-webkit-scrollbar{ width:8px!important; } .astroBodyInfo::-webkit-scrollbar-thumb{ background:rgba(15,122,58,.28)!important; border-radius:999px!important; } .astroBodyHitAreaFront{ fill:rgba(255,255,255,.012)!important; stroke:transparent!important; pointer-events:all!important; cursor:pointer!important; } .astroBodyNode:hover .astroBodyHitAreaFront, .astroBodyNode.active .astroBodyHitAreaFront, .astroBodyNode:focus-visible .astroBodyHitAreaFront{ stroke:rgba(255,215,107,.42)!important; stroke-width:2.6px!important; } .astroBodyNode .planetPhoto, .astroBodyNode .astroBodyName{ pointer-events:none!important; } .astroEdgeDegree{ font-weight:1000!important; paint-order:stroke!important; } .astroEdgeDegreeNumber{ fill:#14532d!important; stroke:rgba(255,255,255,.96)!important; stroke-width:4px!important; } .astroEdgeDegreeMark{ fill:#d11f1f!important; stroke:rgba(255,255,255,.96)!important; stroke-width:3.6px!important; } .astroBodyOrbitLine.active .astroEdgeDegreeNumber{ fill:#064e3b!important; stroke:#fff8dc!important; } .astroBodyOrbitLine.active .astroEdgeDegreeMark{ fill:#d11f1f!important; stroke:#fff8dc!important; } /* منع أي تغيير حجمي عند الاختيار حتى لا تتحرك الرسمة */ .astroBodyNode.active .astroBodyName, .astroBodyOrbitLine.active .astroEdgeDegree, .astroBodyOrbitLine.active .astroEdgeDegreeNumber, .astroBodyOrbitLine.active .astroEdgeDegreeMark{ font-size:inherit!important; } .astroBodyOrbitLine.active .astroEdgePoint{ /* تمييز النقطة فقط بدون تغيير كبير في الحجم */ fill:#fff8dc!important; stroke:#d11f1f!important; stroke-width:3.5px!important; } body.dark .astroEdgeDegreeNumber, body[data-theme="dark"] .astroEdgeDegreeNumber{ fill:#7dd3fc!important; stroke:rgba(0,0,0,.94)!important; } body.dark .astroEdgeDegreeMark, body[data-theme="dark"] .astroEdgeDegreeMark{ fill:#ff5555!important; stroke:rgba(0,0,0,.94)!important; } body.dark .astroBodyOrbitLine.active .astroEdgeDegreeNumber, body[data-theme="dark"] .astroBodyOrbitLine.active .astroEdgeDegreeNumber{ fill:#9ff0b8!important; stroke:rgba(0,0,0,.94)!important; } body.dark .astroBodyOrbitLine.active .astroEdgeDegreeMark, body[data-theme="dark"] .astroBodyOrbitLine.active .astroEdgeDegreeMark{ fill:#ff6b6b!important; stroke:rgba(0,0,0,.94)!important; } @media(max-width:1100px){ .astroWheelOnlyCard .astroWheel{ height:640px!important; min-height:640px!important; max-height:640px!important; } .astroBodyInfo{ height:auto!important; min-height:0!important; max-height:none!important; overflow:visible!important; } } @media(max-width:720px){ .astroWheelOnlyCard .astroWheel{ height:520px!important; min-height:520px!important; max-height:520px!important; } } @media(max-width:420px){ .astroWheelOnlyCard .astroWheel{ height:470px!important; min-height:470px!important; max-height:470px!important; } } /* Stage266: buttons-only selection, better detail fitting, no clipping */ .astroWheelOnlyCard{ overflow:visible!important; } .astroWheelLegendTop{ order:0!important; margin:4px 0 18px!important; padding:12px!important; border-radius:22px!important; background: linear-gradient(135deg,rgba(15,122,58,.10),rgba(183,131,25,.09))!important; border:1px solid rgba(15,122,58,.18)!important; box-shadow:inset 0 0 0 1px rgba(255,255,255,.26),0 10px 24px rgba(46,32,15,.07)!important; justify-content:center!important; } .astroWheelLegendTop .astroPlanetPickBtn, .astroWheelLegendTop button{ min-height:48px!important; padding:0 16px!important; border-radius:18px!important; background:rgba(255,255,255,.88)!important; border:1px solid rgba(15,122,58,.24)!important; color:#203025!important; -webkit-text-fill-color:#203025!important; font-size:15px!important; font-weight:1000!important; box-shadow:0 8px 18px rgba(0,0,0,.08)!important; transition:transform .15s ease, box-shadow .15s ease, background .15s ease!important; } .astroWheelLegendTop .astroPlanetPickBtn:hover, .astroWheelLegendTop button:hover{ transform:translateY(-1px)!important; box-shadow:0 12px 24px rgba(15,122,58,.16)!important; } .astroWheelLegendTop .astroPlanetPickBtn.active, .astroWheelLegendTop button.active{ background:linear-gradient(135deg,#0f7a3a,#126c47)!important; border-color:#ffd76b!important; color:#fff!important; -webkit-text-fill-color:#fff!important; box-shadow:0 0 0 3px rgba(255,215,107,.30),0 14px 26px rgba(15,122,58,.26)!important; } .astroWheelLegendTop .planetLegendOrb{ width:28px!important; height:28px!important; } .astroWheelLegendTop button.active .planetLegendOrb{ box-shadow:0 0 0 3px rgba(255,255,255,.22),0 0 12px rgba(255,215,107,.55)!important; } .astroWheelOnlyWrap{ align-items:start!important; grid-template-columns:minmax(620px,1fr) 380px!important; } .astroWheelOnlyCard .astroWheel{ width:100%!important; height:760px!important; min-height:760px!important; max-height:760px!important; padding:38px!important; overflow:visible!important; contain:none!important; box-sizing:border-box!important; } .astroWheelOnlyCard .astroWheelSvg{ width:min(100%,820px)!important; max-width:820px!important; overflow:visible!important; } .astroBodyNode, .astroBodyOrbitLine, .astroBodyHitAreaFront, .astroBodyOrbitLine .astroEdgeHalo{ pointer-events:none!important; cursor:default!important; } .astroBodyNode .planetPhoto, .astroBodyNode .astroBodyName{ pointer-events:none!important; } .astroBodyInfo{ height:760px!important; min-height:760px!important; max-height:760px!important; overflow-y:auto!important; padding:14px!important; box-sizing:border-box!important; } .astroSelectedBodyArt{ height:160px!important; min-height:160px!important; max-height:160px!important; margin-bottom:10px!important; } .astroSelectedBodyArt img{ width:150px!important; height:125px!important; max-width:150px!important; max-height:125px!important; } .astroSelectedBodyArt.planetSelected-saturn img{ width:220px!important; max-width:220px!important; } .astroInfoTop{ min-height:78px!important; padding:9px!important; gap:10px!important; margin-bottom:10px!important; } .astroInfoTop .astroInfoIcon{ width:58px!important; height:58px!important; } .astroInfoLabel{ font-size:12px!important; } .astroInfoTop h3{ font-size:26px!important; line-height:1.1!important; } .astroBodyInfo dl{ gap:7px!important; } .astroBodyInfo dl div{ display:grid!important; grid-template-columns:1fr auto!important; align-items:center!important; gap:8px!important; min-width:0!important; padding:8px 10px!important; font-size:13px!important; } .astroBodyInfo dt{ min-width:0!important; white-space:normal!important; overflow-wrap:anywhere!important; line-height:1.35!important; } .astroBodyInfo dd{ min-width:0!important; max-width:190px!important; white-space:normal!important; overflow-wrap:anywhere!important; text-align:left!important; direction:rtl!important; line-height:1.35!important; } .astroDegreeExplain{ font-size:12.5px!important; line-height:1.55!important; padding:8px 10px!important; } body.dark .astroWheelLegendTop, body[data-theme="dark"] .astroWheelLegendTop{ background:linear-gradient(135deg,rgba(159,240,184,.10),rgba(255,215,107,.08))!important; border-color:rgba(159,240,184,.16)!important; } body.dark .astroWheelLegendTop button, body[data-theme="dark"] .astroWheelLegendTop button{ background:rgba(255,255,255,.08)!important; border-color:rgba(159,240,184,.20)!important; color:#fff6e8!important; -webkit-text-fill-color:#fff6e8!important; } body.dark .astroWheelLegendTop button.active, body[data-theme="dark"] .astroWheelLegendTop button.active{ background:linear-gradient(135deg,#125f3b,#0f7a3a)!important; border-color:#ffd76b!important; color:#fff!important; -webkit-text-fill-color:#fff!important; } @media(max-width:1180px){ .astroWheelOnlyWrap{ grid-template-columns:1fr!important; } .astroWheelOnlyCard .astroWheel{ height:700px!important; min-height:700px!important; max-height:700px!important; } .astroBodyInfo{ height:auto!important; min-height:0!important; max-height:none!important; overflow:visible!important; } } @media(max-width:720px){ .astroWheelLegendTop{ justify-content:flex-start!important; overflow-x:auto!important; flex-wrap:nowrap!important; padding:10px!important; margin-bottom:12px!important; } .astroWheelLegendTop button{ flex:0 0 auto!important; min-height:44px!important; font-size:14px!important; padding:0 13px!important; } .astroWheelLegendTop .planetLegendOrb{ width:24px!important; height:24px!important; } .astroWheelOnlyCard .astroWheel{ height:560px!important; min-height:560px!important; max-height:560px!important; padding:18px!important; } .astroWheelOnlyCard .astroWheelSvg{ width:118%!important; max-width:none!important; } .astroBodyInfo dl div{ grid-template-columns:1fr!important; text-align:center!important; } .astroBodyInfo dd{ max-width:none!important; text-align:center!important; } } @media(max-width:420px){ .astroWheelOnlyCard .astroWheel{ height:500px!important; min-height:500px!important; max-height:500px!important; padding:10px!important; } .astroWheelOnlyCard .astroWheelSvg{ width:128%!important; } } /* Stage267: centered astronomy page header, remove instruction hint */ .astroWheelOnlyHead{ display:block!important; text-align:center!important; justify-content:center!important; } .astroWheelOnlyHead > div{ width:100%!important; text-align:center!important; } .astroWheelOnlyHead .astronomyEyebrow{ margin-inline:auto!important; } .astroWheelOnlyHead h1, .astroWheelOnlyHead #astronomyDateLine{ text-align:center!important; } .astroWheelHint{ display:none!important; } @media(max-width:720px){ .astroWheelOnlyHead h1{ font-size:26px!important; } .astroWheelOnlyHead #astronomyDateLine{ font-size:13px!important; line-height:1.6!important; } } /* Stage268: bigger detail/description box, remove degree explanation */ .astroDegreeExplain{ display:none!important; } .astroWheelOnlyWrap{ grid-template-columns:minmax(620px,1fr) 440px!important; gap:22px!important; } .astroBodyInfo{ padding:20px!important; border-radius:28px!important; } .astroSelectedBodyArt{ height:190px!important; min-height:190px!important; max-height:190px!important; margin-bottom:14px!important; } .astroSelectedBodyArt img{ width:178px!important; height:148px!important; max-width:178px!important; max-height:148px!important; } .astroSelectedBodyArt.planetSelected-saturn img{ width:260px!important; max-width:260px!important; } .astroInfoTop{ min-height:98px!important; padding:14px!important; gap:14px!important; border-radius:22px!important; } .astroInfoTop .astroInfoIcon{ width:72px!important; height:72px!important; flex:0 0 72px!important; } .astroInfoLabel{ font-size:14px!important; } .astroInfoTop h3{ font-size:34px!important; line-height:1.12!important; } .astroBodyInfo dl{ gap:10px!important; } .astroBodyInfo dl div{ padding:12px 14px!important; border-radius:17px!important; font-size:15px!important; grid-template-columns:1fr auto!important; } .astroBodyInfo dt{ font-size:15px!important; font-weight:1000!important; } .astroBodyInfo dd{ font-size:16px!important; font-weight:1000!important; max-width:230px!important; } @media(max-width:1180px){ .astroWheelOnlyWrap{ grid-template-columns:1fr!important; } .astroBodyInfo{ width:100%!important; } } @media(max-width:720px){ .astroBodyInfo{ padding:14px!important; border-radius:22px!important; } .astroSelectedBodyArt{ height:150px!important; min-height:150px!important; max-height:150px!important; } .astroSelectedBodyArt img{ width:140px!important; height:112px!important; max-width:140px!important; max-height:112px!important; } .astroSelectedBodyArt.planetSelected-saturn img{ width:205px!important; max-width:205px!important; } .astroInfoTop{ min-height:86px!important; padding:11px!important; } .astroInfoTop .astroInfoIcon{ width:60px!important; height:60px!important; flex-basis:60px!important; } .astroInfoTop h3{ font-size:28px!important; } .astroBodyInfo dl div{ padding:11px 12px!important; font-size:14px!important; grid-template-columns:1fr!important; text-align:center!important; } .astroBodyInfo dt, .astroBodyInfo dd{ font-size:14px!important; max-width:none!important; text-align:center!important; } } /* Stage271: astronomy details symbols, no zodiac direction note */ .astroWheelOnlyCard .astroWheelLegendTop::after{ content:none!important; display:none!important; } .astroDegSymbol{ color:#d11f1f!important; -webkit-text-fill-color:#d11f1f!important; font-weight:1000!important; font-size:1.12em!important; padding-inline:1px 4px!important; } .astroMinSymbol{ color:#0f766e!important; -webkit-text-fill-color:#0f766e!important; font-weight:1000!important; font-size:1.12em!important; padding-inline:1px 0!important; } .astroDegValue,.astroMinValue{ color:inherit!important; -webkit-text-fill-color:inherit!important; } body.dark .astroDegSymbol, body[data-theme="dark"] .astroDegSymbol{ color:#ff6b6b!important; -webkit-text-fill-color:#ff6b6b!important; } body.dark .astroMinSymbol, body[data-theme="dark"] .astroMinSymbol{ color:#5eead4!important; -webkit-text-fill-color:#5eead4!important; } /* Stage271: tasbeeh popup completed tab and counter focus */ .tasbeehPopupTabsStage271{ display:flex!important; gap:8px!important; align-items:center!important; justify-content:center!important; margin:10px 0 12px!important; padding:7px!important; border-radius:18px!important; background:rgba(15,122,58,.08)!important; border:1px solid rgba(15,122,58,.14)!important; } .tasbeehPopupTabsStage271 button{ flex:1 1 0!important; min-height:38px!important; border-radius:14px!important; border:1px solid rgba(15,122,58,.22)!important; background:rgba(255,255,255,.78)!important; color:#203025!important; -webkit-text-fill-color:#203025!important; font-weight:1000!important; cursor:pointer!important; } .tasbeehPopupTabsStage271 button.active{ background:linear-gradient(135deg,#0f7a3a,#126c47)!important; color:#fff!important; -webkit-text-fill-color:#fff!important; border-color:#ffd76b!important; box-shadow:0 0 0 3px rgba(255,215,107,.22)!important; } .tasbeehCounterFocus, .tasbeehPageCounterFocus{ animation:tasbeehStage271Focus 1.4s ease both!important; } @keyframes tasbeehStage271Focus{ 0%,100%{box-shadow:0 0 0 rgba(255,215,107,0)} 35%{box-shadow:0 0 0 6px rgba(255,215,107,.35),0 0 24px rgba(15,122,58,.30)} } body.dark .tasbeehPopupTabsStage271, body[data-theme="dark"] .tasbeehPopupTabsStage271{ background:rgba(159,240,184,.08)!important; border-color:rgba(159,240,184,.16)!important; } body.dark .tasbeehPopupTabsStage271 button, body[data-theme="dark"] .tasbeehPopupTabsStage271 button{ background:rgba(255,255,255,.08)!important; color:#fff6e8!important; -webkit-text-fill-color:#fff6e8!important; border-color:rgba(159,240,184,.18)!important; } body.dark .tasbeehPopupTabsStage271 button.active, body[data-theme="dark"] .tasbeehPopupTabsStage271 button.active{ background:linear-gradient(135deg,#125f3b,#0f7a3a)!important; color:#fff!important; -webkit-text-fill-color:#fff!important; border-color:#ffd76b!important; } /* Stage272: global header title without separate background */ .globalHeaderBrand, .global-header-brand, .headerBrand, .siteBrand, .site-title, .header-title, .globalHeaderTitle, .global-header-title, .appBrandTitle, .app-title, .alfathHeaderTitle, [data-global-header] .brand, [data-global-header] .title, #globalHeader .brand, #globalHeader .title, #siteHeader .brand, #siteHeader .title{ background:transparent!important; background-color:transparent!important; box-shadow:none!important; border-color:transparent!important; backdrop-filter:none!important; -webkit-backdrop-filter:none!important; } .globalHeaderBrand::before, .globalHeaderBrand::after, .global-header-brand::before, .global-header-brand::after, .headerBrand::before, .headerBrand::after, .siteBrand::before, .siteBrand::after, .site-title::before, .site-title::after, .header-title::before, .header-title::after, .globalHeaderTitle::before, .globalHeaderTitle::after, .global-header-title::before, .global-header-title::after, .appBrandTitle::before, .appBrandTitle::after, .app-title::before, .app-title::after, .alfathHeaderTitle::before, .alfathHeaderTitle::after{ background:transparent!important; background-color:transparent!important; box-shadow:none!important; border-color:transparent!important; } .globalHeaderBrand a, .global-header-brand a, .headerBrand a, .siteBrand a, .site-title a, .header-title a, .globalHeaderTitle a, .global-header-title a, .appBrandTitle a, .app-title a, .alfathHeaderTitle a, [data-global-header] .brand a, [data-global-header] .title a, #globalHeader .brand a, #globalHeader .title a, #siteHeader .brand a, #siteHeader .title a{ background:transparent!important; background-color:transparent!important; box-shadow:none!important; border-color:transparent!important; text-decoration:none!important; } /* Stage273: exact global header brand/title transparent */ .alfathTopTitle, .alfathBrand, .alfathBrandTitle, .alfathHeaderBrand, .globalHeader .alfathTopTitle, .globalHeader .alfathBrand, .globalHeader .brandTitle, .globalHeader .siteTitle, .globalHeader .headerTitle, .globalHeader-title, .global-header .alfathTopTitle, .global-header .alfathBrand, .global-header .brandTitle, .global-header .siteTitle, .global-header .headerTitle, .fathGlobalHeader .alfathTopTitle, .fathGlobalHeader .alfathBrand, .fathGlobalHeader .brandTitle, .fathGlobalHeader .siteTitle, .fathGlobalHeader .headerTitle, #fathGlobalHeader .alfathTopTitle, #fathGlobalHeader .alfathBrand, #fathGlobalHeader .brandTitle, #fathGlobalHeader .siteTitle, #fathGlobalHeader .headerTitle, #alfathGlobalHeader .alfathTopTitle, #alfathGlobalHeader .alfathBrand, #alfathGlobalHeader .brandTitle, #alfathGlobalHeader .siteTitle, #alfathGlobalHeader .headerTitle{ background:transparent!important; background-color:transparent!important; background-image:none!important; border:0!important; box-shadow:none!important; outline:0!important; backdrop-filter:none!important; -webkit-backdrop-filter:none!important; filter:none!important; } .alfathTopTitle *, .alfathBrand *, .alfathBrandTitle *, .alfathHeaderBrand *, .globalHeader .brandTitle *, .globalHeader .siteTitle *, .globalHeader .headerTitle *, .global-header .brandTitle *, .global-header .siteTitle *, .global-header .headerTitle *, .fathGlobalHeader .brandTitle *, .fathGlobalHeader .siteTitle *, .fathGlobalHeader .headerTitle *, #fathGlobalHeader .brandTitle *, #fathGlobalHeader .siteTitle *, #fathGlobalHeader .headerTitle *{ background:transparent!important; background-color:transparent!important; background-image:none!important; border:0!important; box-shadow:none!important; outline:0!important; backdrop-filter:none!important; -webkit-backdrop-filter:none!important; } .alfathTopTitle::before, .alfathTopTitle::after, .alfathBrand::before, .alfathBrand::after, .alfathBrandTitle::before, .alfathBrandTitle::after, .alfathHeaderBrand::before, .alfathHeaderBrand::after, .globalHeader .brandTitle::before, .globalHeader .brandTitle::after, .globalHeader .siteTitle::before, .globalHeader .siteTitle::after, .globalHeader .headerTitle::before, .globalHeader .headerTitle::after, .global-header .brandTitle::before, .global-header .brandTitle::after, .global-header .siteTitle::before, .global-header .siteTitle::after, .global-header .headerTitle::before, .global-header .headerTitle::after{ content:none!important; display:none!important; background:transparent!important; box-shadow:none!important; border:0!important; } /* fallback: if the title is rendered as a pill/link inside the global header */ .globalHeader a[href="index.html"]:has(.siteTitle), .globalHeader a[href="./index.html"]:has(.siteTitle), .global-header a[href="index.html"]:has(.siteTitle), .global-header a[href="./index.html"]:has(.siteTitle), .fathGlobalHeader a[href="index.html"], .fathGlobalHeader a[href="./index.html"], #fathGlobalHeader a[href="index.html"], #fathGlobalHeader a[href="./index.html"]{ background:transparent!important; background-color:transparent!important; background-image:none!important; border-color:transparent!important; box-shadow:none!important; } /* Stage273 extracted title/brand classes */ .dailyAlertsTimeTitle, .dailyAlertsTimeTitle *, .dailyAlertsTimeTitle::before, .dailyAlertsTimeTitle::after, .modalTitle, .modalTitle *, .modalTitle::before, .modalTitle::after, .siteHeaderTitleLink, .siteHeaderTitleLink *, .siteHeaderTitleLink::before, .siteHeaderTitleLink::after, .topTitleOnly, .topTitleOnly *, .topTitleOnly::before, .topTitleOnly::after{ background:transparent!important; background-color:transparent!important; background-image:none!important; box-shadow:none!important; border-color:transparent!important; backdrop-filter:none!important; -webkit-backdrop-filter:none!important; } /* Stage274: remove faint rectangle from title AND its parent wrappers */ .alfathHeaderTitleNoBox, .alfathHeaderTitleNoBox *, .alfathHeaderTitleNoBox::before, .alfathHeaderTitleNoBox::after, .alfathHeaderTitleParentNoBox, .alfathHeaderTitleParentNoBox::before, .alfathHeaderTitleParentNoBox::after{ background:transparent!important; background-color:transparent!important; background-image:none!important; box-shadow:none!important; border:0!important; outline:0!important; filter:none!important; backdrop-filter:none!important; -webkit-backdrop-filter:none!important; } /* Exact known title classes and their immediate containers */ .siteHeaderTitleLink, .siteHeaderTitleLink *, .siteHeaderTitleLink::before, .siteHeaderTitleLink::after, .siteHeaderTitleLink + *, .topTitleOnly, .topTitleOnly *, .topTitleOnly::before, .topTitleOnly::after{ background:transparent!important; background-color:transparent!important; background-image:none!important; box-shadow:none!important; border:0!important; outline:0!important; filter:none!important; backdrop-filter:none!important; -webkit-backdrop-filter:none!important; } /* If the faint rectangle is on the link's parent or grandparent */ :where(.siteHeaderTitleLink,.topTitleOnly,.alfathHeaderTitleNoBox):where(a,span,div){ isolation:auto!important; } :where(.siteHeaderTitleLink,.topTitleOnly,.alfathHeaderTitleNoBox):not(img){ mix-blend-mode:normal!important; } /* Strong parent selector support for modern browsers */ *:has(> .siteHeaderTitleLink), *:has(> .topTitleOnly), *:has(> .alfathHeaderTitleNoBox){ background:transparent!important; background-color:transparent!important; background-image:none!important; box-shadow:none!important; border-color:transparent!important; backdrop-filter:none!important; -webkit-backdrop-filter:none!important; } *:has(> .siteHeaderTitleLink)::before, *:has(> .siteHeaderTitleLink)::after, *:has(> .topTitleOnly)::before, *:has(> .topTitleOnly)::after, *:has(> .alfathHeaderTitleNoBox)::before, *:has(> .alfathHeaderTitleNoBox)::after{ content:none!important; display:none!important; background:transparent!important; box-shadow:none!important; border:0!important; } /* Keep only the actual text visible */ .siteHeaderTitleLink, .topTitleOnly, .alfathHeaderTitleNoBox{ padding:0!important; margin:0!important; min-height:0!important; border-radius:0!important; } /* Stage275: deep source fix for the faint rectangle behind the global header title */ /* The title itself must be pure text, not a chip/pill/card. */ .globalHeaderTitleBare, .globalHeaderTitleBare:link, .globalHeaderTitleBare:visited, .globalHeaderTitleBare:hover, .globalHeaderTitleBare:focus, .globalHeaderTitleBare:active, .topbar .globalHeaderTitleBare, .globalTopbar .globalHeaderTitleBare, .topbarCard .globalHeaderTitleBare, .topbarInner .globalHeaderTitleBare, .appTopbarV7 .globalHeaderTitleBare, .globalHeaderGrid .globalHeaderTitleBare, a.topTitleOnly.siteHeaderTitleLink, a.topTitleOnly.siteHeaderTitleLink:link, a.topTitleOnly.siteHeaderTitleLink:visited, a.topTitleOnly.siteHeaderTitleLink:hover, a.topTitleOnly.siteHeaderTitleLink:focus, a.topTitleOnly.siteHeaderTitleLink:active{ background:transparent!important; background-color:transparent!important; background-image:none!important; box-shadow:none!important; border:none!important; outline:none!important; border-radius:0!important; padding:0!important; margin:0!important; min-width:0!important; min-height:0!important; height:auto!important; line-height:1.25!important; backdrop-filter:none!important; -webkit-backdrop-filter:none!important; filter:none!important; isolation:auto!important; transform:none!important; } /* Kill all decorative pseudo layers that earlier stages may have used under the title. */ .globalHeaderTitleBare::before, .globalHeaderTitleBare::after, .topTitleOnly::before, .topTitleOnly::after, .siteHeaderTitleLink::before, .siteHeaderTitleLink::after, a.topTitleOnly.siteHeaderTitleLink::before, a.topTitleOnly.siteHeaderTitleLink::after{ content:none!important; display:none!important; width:0!important; height:0!important; background:transparent!important; background-color:transparent!important; background-image:none!important; box-shadow:none!important; border:none!important; opacity:0!important; } /* If the rectangle is coming from the center grid area, make only the title cell transparent. */ .globalHeaderGrid > .globalHeaderTitleBare, .appTopbarV7 > .globalHeaderTitleBare, .topbarInner > .globalHeaderTitleBare{ place-self:center!important; justify-self:center!important; align-self:center!important; grid-column:2!important; z-index:2!important; } /* Remove background from any wrapper injected around the title, but do not flatten the whole topbar card. */ .globalHeaderGrid > :has(> .globalHeaderTitleBare), .appTopbarV7 > :has(> .globalHeaderTitleBare), .topbarInner > :has(> .globalHeaderTitleBare), .globalHeaderGrid > :has(.topTitleOnly.siteHeaderTitleLink), .appTopbarV7 > :has(.topTitleOnly.siteHeaderTitleLink), .topbarInner > :has(.topTitleOnly.siteHeaderTitleLink){ background:transparent!important; background-color:transparent!important; background-image:none!important; box-shadow:none!important; border:none!important; outline:none!important; border-radius:0!important; padding:0!important; backdrop-filter:none!important; -webkit-backdrop-filter:none!important; } /* Important: older rules may target .topTitleOnly specifically with a gradient/card. Neutralize every visual property. */ .topTitleOnly{ background:transparent!important; background-color:transparent!important; background-image:none!important; box-shadow:none!important; border:none!important; outline:none!important; border-radius:0!important; padding:0!important; backdrop-filter:none!important; -webkit-backdrop-filter:none!important; } /* Keep the text color and shadow only; no fill rectangle. */ .topTitleOnly, .siteHeaderTitleLink, .globalHeaderTitleBare{ text-shadow:0 1px 0 rgba(255,255,255,.18)!important; -webkit-box-decoration-break:clone!important; box-decoration-break:clone!important; } /* If browser paints an anchor tap highlight/selection as a rectangle on mobile. */ .siteHeaderTitleLink{ -webkit-tap-highlight-color:transparent!important; } /* Emergency exact selector for the known generated header structure. */ header.globalTopbar .pageW .topbarCard .topbarInner.appTopbarV7.globalHeaderGrid > a.topTitleOnly.siteHeaderTitleLink{ background:transparent!important; background-color:transparent!important; background-image:none!important; box-shadow:none!important; border:0!important; border-radius:0!important; padding:0!important; } /* Stage276: mobile astronomy and tasbeeh compact fixes */ /* Astronomy: keep the whole interactive chart inside mobile viewport */ @media(max-width:720px){ .astronomyPageBody, .astronomyWheelOnlyPage{ overflow-x:hidden!important; } .astronomyWheelOnlyPage{ padding-inline:6px!important; width:100%!important; max-width:100vw!important; } .astroWheelOnlyCard{ width:100%!important; max-width:100%!important; padding:8px!important; border-radius:18px!important; overflow:hidden!important; } .astroWheelOnlyHead{ margin-bottom:8px!important; } .astroWheelOnlyHead h1{ font-size:clamp(22px,7vw,28px)!important; line-height:1.18!important; } .astroWheelOnlyHead #astronomyDateLine{ font-size:12px!important; line-height:1.5!important; } .astroWheelLegendTop{ margin:6px 0 8px!important; padding:8px!important; gap:7px!important; overflow-x:auto!important; flex-wrap:nowrap!important; justify-content:flex-start!important; -webkit-overflow-scrolling:touch!important; } .astroWheelLegendTop button{ flex:0 0 auto!important; min-height:40px!important; padding:0 10px!important; font-size:12.5px!important; border-radius:14px!important; } .astroWheelLegendTop .planetLegendOrb{ width:22px!important; height:22px!important; } .astroWheelOnlyWrap{ display:grid!important; grid-template-columns:1fr!important; gap:10px!important; width:100%!important; max-width:100%!important; } .astroWheelOnlyCard .astroWheel{ width:100%!important; height:auto!important; min-height:0!important; max-height:none!important; aspect-ratio:1/1!important; padding:18px!important; overflow:visible!important; border-radius:16px!important; box-sizing:border-box!important; } .astroWheelOnlyCard .astroWheelSvg{ width:100%!important; max-width:100%!important; height:auto!important; display:block!important; overflow:visible!important; transform:none!important; margin:auto!important; } .astroSignLabelRotated, .astroWheelOnlyCard .astroSignLabelRotated{ font-size:9px!important; stroke-width:2.7px!important; } .astroDegreeLabel{ font-size:7.5px!important; stroke-width:2px!important; } .astroBodyNode .astroBodyName{ font-size:8.8px!important; stroke-width:2.4px!important; } .astroBodyOrbitLine .astroEdgeDegree{ font-size:7.4px!important; stroke-width:2.1px!important; } .astroBodyInfo{ width:100%!important; height:auto!important; min-height:0!important; max-height:none!important; overflow:visible!important; padding:12px!important; border-radius:18px!important; box-sizing:border-box!important; } .astroSelectedBodyArt{ height:118px!important; min-height:118px!important; max-height:118px!important; } .astroSelectedBodyArt img{ width:120px!important; height:95px!important; max-width:120px!important; max-height:95px!important; } .astroSelectedBodyArt.planetSelected-saturn img{ width:165px!important; max-width:165px!important; } .astroInfoTop{ min-height:72px!important; padding:9px!important; gap:9px!important; } .astroInfoTop .astroInfoIcon{ width:50px!important; height:50px!important; flex-basis:50px!important; } .astroInfoTop h3{ font-size:24px!important; } .astroBodyInfo dl{ gap:7px!important; } .astroBodyInfo dl div{ padding:9px 10px!important; font-size:13px!important; border-radius:14px!important; } .astroBodyInfo dt, .astroBodyInfo dd{ font-size:13px!important; line-height:1.35!important; } } @media(max-width:420px){ .astroWheelOnlyCard .astroWheel{ padding:12px!important; } .astroSignLabelRotated, .astroWheelOnlyCard .astroSignLabelRotated{ font-size:8px!important; stroke-width:2.4px!important; } .astroBodyNode .astroBodyName{ font-size:7.8px!important; } .astroBodyOrbitLine .astroEdgeDegree{ font-size:6.8px!important; } } /* Tasbeeh page: mobile selection scrolls to counter cleanly */ @media(max-width:720px){ .tasbeehPageCounterCard, #tasbeehPageCounter, .tasbeehPageCounter{ scroll-margin-top:88px!important; } } /* Tasbeeh popup on mobile: no completed tab, compact Quran/Dua area */ @media(max-width:720px){ .tasbeehPopupTabsStage271{ display:none!important; } .tasbeehPanel, .tasbeehPopup, .tasbeehWidgetPanel{ max-height:calc(100dvh - 18px)!important; overflow-y:auto!important; -webkit-overflow-scrolling:touch!important; } .tasbeehPanel [class*="Quran"], .tasbeehPanel [class*="quran"], .tasbeehPanel [class*="Dua"], .tasbeehPanel [class*="dua"], .tasbeehPopup [class*="Quran"], .tasbeehPopup [class*="quran"], .tasbeehPopup [class*="Dua"], .tasbeehPopup [class*="dua"]{ max-height:none!important; } .tasbeehOtherList, .tasbeehDoneOtherList, .tasbeehQuranDuaList, .tasbeehSurahList, .tasbeehDuaList, .tasbeehPanel .otherItems, .tasbeehPopup .otherItems{ display:grid!important; grid-template-columns:repeat(2,minmax(0,1fr))!important; gap:7px!important; max-height:170px!important; overflow-y:auto!important; padding:4px!important; -webkit-overflow-scrolling:touch!important; } .tasbeehOtherList > *, .tasbeehDoneOtherList > *, .tasbeehQuranDuaList > *, .tasbeehSurahList > *, .tasbeehDuaList > *, .tasbeehPanel .otherItems > *, .tasbeehPopup .otherItems > *, .tasbeehOtherItem, .tasbeehOtherDoneItem, .tasbeehDoneItem{ min-height:38px!important; padding:7px 8px!important; border-radius:13px!important; font-size:12px!important; line-height:1.25!important; display:flex!important; align-items:center!important; justify-content:center!important; text-align:center!important; gap:5px!important; } .tasbeehOtherList button, .tasbeehDoneOtherList button, .tasbeehQuranDuaList button, .tasbeehSurahList button, .tasbeehDuaList button, .tasbeehOtherUndoBtn, .tasbeehOtherDoneBtn, .tasbeehDoneBtn{ min-height:30px!important; padding:5px 8px!important; border-radius:11px!important; font-size:11.5px!important; font-weight:1000!important; } .tasbeehOtherDoneBtn::before, .tasbeehDoneBtn::before{ content:"إرجاع"!important; font-size:11.5px!important; } .tasbeehOtherDoneBtn, .tasbeehDoneBtn{ font-size:0!important; } } @media(max-width:390px){ .tasbeehOtherList, .tasbeehDoneOtherList, .tasbeehQuranDuaList, .tasbeehSurahList, .tasbeehDuaList, .tasbeehPanel .otherItems, .tasbeehPopup .otherItems{ grid-template-columns:1fr 1fr!important; max-height:145px!important; } } /* Stage277: degree remaining and change time in astronomy details */ .astroDegreeRemainRow, .astroDegreeChangeRow{ background:linear-gradient(135deg,rgba(255,215,107,.14),rgba(15,122,58,.08))!important; border-color:rgba(255,215,107,.32)!important; } .astroDegreeRemainRow dd, .astroDegreeChangeRow dd{ font-weight:1000!important; } .astroDegreeChangeRow small{ display:inline-flex!important; align-items:center!important; justify-content:center!important; margin-inline-start:6px!important; padding:2px 7px!important; border-radius:999px!important; font-size:.78em!important; font-weight:1000!important; color:#0f7a3a!important; -webkit-text-fill-color:#0f7a3a!important; background:rgba(15,122,58,.10)!important; border:1px solid rgba(15,122,58,.16)!important; } body.dark .astroDegreeChangeRow small, body[data-theme="dark"] .astroDegreeChangeRow small{ color:#a7f3d0!important; -webkit-text-fill-color:#a7f3d0!important; background:rgba(167,243,208,.10)!important; border-color:rgba(167,243,208,.20)!important; } @media(max-width:720px){ .astroDegreeChangeRow small{ display:block!important; width:max-content!important; margin:4px 0 0!important; font-size:10.5px!important; } } /* Stage278: astronomy details use unified Arabic numerals and robust tappable buttons */ .astroBodyInfo dl, .astroBodyInfo dd, .astroBodyInfo dt, .astroDegreeRemainRow, .astroDegreeChangeRow{ font-variant-numeric:normal!important; } .astroPlanetPickBtn{ touch-action:manipulation!important; cursor:pointer!important; } /* Stage279: remove text caret/I-beam cursor from non-editable page text */ html, body, body *:not(input):not(textarea):not(select):not(option):not([contenteditable="true"]):not([contenteditable=""]){ cursor:default!important; caret-color:transparent!important; } a, button, summary, [role="button"], .astroPlanetPickBtn, .pageMenuList a, .hamburgerBtn, .themeTextBtn, .themeColorsBtn, .cityMiniBtn, .dailyAlertsBtn{ cursor:pointer!important; } input, textarea, select, option, [contenteditable="true"], [contenteditable=""]{ cursor:text!important; caret-color:auto!important; user-select:text!important; -webkit-user-select:text!important; } .astroPlanetPickBtn, .astroPlanetPickBtn *{ pointer-events:auto!important; } /* Stage280: astronomy planets summary table */ .astroPlanetsSummaryCard{ margin-top:18px!important; padding:16px!important; border-radius:26px!important; background:rgba(255,255,255,.72)!important; border:1px solid rgba(15,122,58,.16)!important; box-shadow:0 18px 50px rgba(0,0,0,.08)!important; } .astroSummaryHead{ display:flex!important; align-items:flex-end!important; justify-content:space-between!important; gap:12px!important; margin-bottom:12px!important; } .astroSummaryHead h2{ margin:0!important; font-size:clamp(20px,2.2vw,28px)!important; font-weight:1000!important; color:var(--smart-strong,#173321)!important; -webkit-text-fill-color:var(--smart-strong,#173321)!important; } .astroSummaryHead p{ margin:0!important; font-size:13px!important; font-weight:800!important; color:var(--smart-muted,#6b5a4d)!important; -webkit-text-fill-color:var(--smart-muted,#6b5a4d)!important; } .astroSummaryScroll{ width:100%!important; overflow-x:auto!important; -webkit-overflow-scrolling:touch!important; border-radius:20px!important; } .astroPlanetsSummaryTable{ width:100%!important; min-width:940px!important; border-collapse:separate!important; border-spacing:0 8px!important; } .astroPlanetsSummaryTable th{ padding:8px 10px!important; text-align:center!important; font-size:13px!important; font-weight:1000!important; color:var(--smart-muted,#6b5a4d)!important; -webkit-text-fill-color:var(--smart-muted,#6b5a4d)!important; white-space:nowrap!important; } .astroPlanetsSummaryTable td{ padding:10px 12px!important; text-align:center!important; font-size:14px!important; font-weight:900!important; color:var(--smart-strong,#173321)!important; -webkit-text-fill-color:var(--smart-strong,#173321)!important; background:rgba(255,255,255,.82)!important; border-top:1px solid rgba(15,122,58,.12)!important; border-bottom:1px solid rgba(15,122,58,.12)!important; white-space:nowrap!important; } .astroPlanetsSummaryTable td:first-child{ border-radius:16px 0 0 16px!important; border-left:1px solid rgba(15,122,58,.12)!important; } .astroPlanetsSummaryTable td:last-child{ border-radius:0 16px 16px 0!important; border-right:1px solid rgba(15,122,58,.12)!important; } .astroSummaryPlanetBtn{ display:inline-flex!important; align-items:center!important; justify-content:center!important; gap:8px!important; min-height:36px!important; border-radius:14px!important; border:1px solid rgba(15,122,58,.16)!important; background:rgba(15,122,58,.06)!important; color:inherit!important; -webkit-text-fill-color:inherit!important; padding:5px 10px!important; font-weight:1000!important; cursor:pointer!important; } .astroSummaryPlanetBtn .planetLegendOrb{ width:24px!important; height:24px!important; } .astroPlanetsSummaryTable small{ display:inline-flex!important; margin-inline-start:5px!important; padding:2px 7px!important; border-radius:999px!important; font-size:11px!important; color:#0f7a3a!important; -webkit-text-fill-color:#0f7a3a!important; background:rgba(15,122,58,.10)!important; border:1px solid rgba(15,122,58,.16)!important; } .astroPlanetsSummaryTable tr.astroSummaryActive td{ background:linear-gradient(135deg,rgba(255,215,107,.22),rgba(15,122,58,.11))!important; border-color:rgba(255,215,107,.50)!important; } .astroPlanetsSummaryTable tr.astroSummaryActive .astroSummaryPlanetBtn{ background:linear-gradient(135deg,#0f7a3a,#126c47)!important; color:#fff!important; -webkit-text-fill-color:#fff!important; border-color:#ffd76b!important; } body.dark .astroPlanetsSummaryCard, body[data-theme="dark"] .astroPlanetsSummaryCard{ background:rgba(15,23,42,.72)!important; border-color:rgba(167,243,208,.16)!important; } body.dark .astroPlanetsSummaryTable td, body[data-theme="dark"] .astroPlanetsSummaryTable td{ background:rgba(255,255,255,.07)!important; border-color:rgba(167,243,208,.13)!important; color:#fff6e8!important; -webkit-text-fill-color:#fff6e8!important; } body.dark .astroSummaryPlanetBtn, body[data-theme="dark"] .astroSummaryPlanetBtn{ background:rgba(167,243,208,.08)!important; border-color:rgba(167,243,208,.18)!important; } @media(max-width:720px){ .astroPlanetsSummaryCard{ margin-top:12px!important; padding:10px!important; border-radius:18px!important; } .astroSummaryHead{ display:block!important; text-align:center!important; margin-bottom:8px!important; } .astroSummaryHead h2{ font-size:20px!important; } .astroSummaryHead p{ margin-top:4px!important; font-size:11.5px!important; } .astroPlanetsSummaryTable{ min-width:820px!important; border-spacing:0 6px!important; } .astroPlanetsSummaryTable th{ font-size:11.5px!important; padding:6px!important; } .astroPlanetsSummaryTable td{ font-size:12px!important; padding:8px!important; } .astroSummaryPlanetBtn{ min-height:32px!important; font-size:12px!important; padding:4px 8px!important; } .astroSummaryPlanetBtn .planetLegendOrb{ width:20px!important; height:20px!important; } } /* Stage281: highlight current zodiac sign for selected body */ .astroSignBand.activeSign{ fill:rgba(255,215,107,.42)!important; stroke:#ffd76b!important; stroke-width:2.2px!important; filter:drop-shadow(0 0 12px rgba(255,215,107,.55))!important; } .astroSignLabel.activeSignLabel{ fill:#7c2d12!important; stroke:rgba(255,255,255,.92)!important; stroke-width:4px!important; font-weight:1000!important; filter:drop-shadow(0 0 8px rgba(255,215,107,.65))!important; } .astroSelectedSignNote{ background:linear-gradient(135deg,rgba(255,215,107,.25),rgba(15,122,58,.10))!important; border-color:rgba(255,215,107,.48)!important; } body.dark .astroSignBand.activeSign, body[data-theme="dark"] .astroSignBand.activeSign{ fill:rgba(255,215,107,.30)!important; stroke:#ffe08a!important; filter:drop-shadow(0 0 14px rgba(255,215,107,.45))!important; } body.dark .astroSignLabel.activeSignLabel, body[data-theme="dark"] .astroSignLabel.activeSignLabel{ fill:#fff1b8!important; stroke:rgba(15,23,42,.85)!important; } @media(max-width:720px){ .astroSignBand.activeSign{ stroke-width:1.8px!important; } .astroSignLabel.activeSignLabel{ stroke-width:3px!important; } } /* Stage282: motion badges and now refresh button */ .astroDateLineWrap{ display:flex!important; align-items:center!important; justify-content:center!important; gap:10px!important; flex-wrap:wrap!important; margin-top:6px!important; } .astroDateLineWrap #astronomyDateLine{ margin:0!important; } .astroNowBtn{ display:inline-flex!important; align-items:center!important; justify-content:center!important; gap:5px!important; min-height:32px!important; padding:5px 12px!important; border-radius:999px!important; border:1px solid rgba(255,215,107,.45)!important; background:linear-gradient(135deg,rgba(255,215,107,.95),rgba(255,244,184,.85))!important; color:#173321!important; -webkit-text-fill-color:#173321!important; font-size:12.5px!important; font-weight:1000!important; cursor:pointer!important; box-shadow:0 8px 20px rgba(0,0,0,.10)!important; } .astroNowBtn.isRefreshing{ animation:astroNowSpin .65s ease both!important; } @keyframes astroNowSpin{ 0%{transform:rotate(0deg) scale(1)} 50%{transform:rotate(180deg) scale(1.06)} 100%{transform:rotate(360deg) scale(1)} } .astroMotionBadge{ display:inline-flex!important; align-items:center!important; justify-content:center!important; gap:5px!important; min-height:26px!important; padding:3px 9px!important; border-radius:999px!important; font-size:12px!important; font-weight:1000!important; white-space:nowrap!important; border:1px solid transparent!important; } .astroMotionBadge b{ font-size:15px!important; line-height:1!important; } .astroMotion-direct{ color:#0f7a3a!important; -webkit-text-fill-color:#0f7a3a!important; background:rgba(15,122,58,.10)!important; border-color:rgba(15,122,58,.22)!important; } .astroMotion-retro{ color:#b42318!important; -webkit-text-fill-color:#b42318!important; background:rgba(244,63,94,.10)!important; border-color:rgba(244,63,94,.25)!important; } .astroMotion-still{ color:#7c3aed!important; -webkit-text-fill-color:#7c3aed!important; background:rgba(124,58,237,.10)!important; border-color:rgba(124,58,237,.22)!important; } .astroMotionRow{ background:linear-gradient(135deg,rgba(124,58,237,.10),rgba(255,215,107,.10))!important; border-color:rgba(124,58,237,.20)!important; } body.dark .astroNowBtn, body[data-theme="dark"] .astroNowBtn{ background:linear-gradient(135deg,rgba(255,215,107,.92),rgba(146,101,26,.88))!important; color:#101827!important; -webkit-text-fill-color:#101827!important; } body.dark .astroMotion-direct, body[data-theme="dark"] .astroMotion-direct{ color:#a7f3d0!important; -webkit-text-fill-color:#a7f3d0!important; background:rgba(167,243,208,.10)!important; border-color:rgba(167,243,208,.20)!important; } body.dark .astroMotion-retro, body[data-theme="dark"] .astroMotion-retro{ color:#fecdd3!important; -webkit-text-fill-color:#fecdd3!important; background:rgba(251,113,133,.12)!important; border-color:rgba(251,113,133,.24)!important; } body.dark .astroMotion-still, body[data-theme="dark"] .astroMotion-still{ color:#ddd6fe!important; -webkit-text-fill-color:#ddd6fe!important; background:rgba(167,139,250,.12)!important; border-color:rgba(167,139,250,.24)!important; } @media(max-width:720px){ .astroDateLineWrap{ gap:6px!important; } .astroNowBtn{ min-height:30px!important; font-size:11.5px!important; padding:4px 10px!important; } .astroMotionBadge{ min-height:24px!important; padding:2px 7px!important; font-size:10.8px!important; } } /* Stage283: day/date below degree change time */ .astroDegreeChangeRow em, .astroSummaryChangeDay{ display:block!important; width:max-content!important; margin:5px auto 0!important; padding:3px 9px!important; border-radius:999px!important; font-style:normal!important; font-size:12px!important; font-weight:1000!important; line-height:1.25!important; color:#7c2d12!important; -webkit-text-fill-color:#7c2d12!important; background:rgba(255,215,107,.22)!important; border:1px solid rgba(255,215,107,.38)!important; } .astroDegreeChangeRow .astroChangeTime, .astroPlanetsSummaryTable .astroChangeTime{ font-weight:1000!important; } body.dark .astroDegreeChangeRow em, body[data-theme="dark"] .astroDegreeChangeRow em, body.dark .astroSummaryChangeDay, body[data-theme="dark"] .astroSummaryChangeDay{ color:#fff1b8!important; -webkit-text-fill-color:#fff1b8!important; background:rgba(255,215,107,.14)!important; border-color:rgba(255,215,107,.26)!important; } @media(max-width:720px){ .astroDegreeChangeRow em, .astroSummaryChangeDay{ font-size:10.5px!important; padding:2px 7px!important; margin-top:4px!important; } } /* Stage284: remove image above astronomy details to save space */ .astroBodyInfo > .astroSelectedBodyArt{ display:none!important; } .astroInfoTopNoImage, .astroBodyInfo > .astroInfoTop{ margin-top:0!important; } .astroBodyInfo{ gap:10px!important; } .astroInfoTopNoImage{ min-height:auto!important; padding:12px 14px!important; } @media(max-width:720px){ .astroBodyInfo{ padding:10px!important; } .astroInfoTopNoImage{ padding:9px 10px!important; min-height:0!important; } } /* Stage285: city time line in astronomy header */ .astroDateLineWrap #astronomyDateLine{ max-width:min(100%, 760px)!important; text-align:center!important; } @media(max-width:720px){ .astroDateLineWrap #astronomyDateLine{ font-size:11.5px!important; line-height:1.55!important; } } /* Stage286: city line sync emphasis */ .astroDateLineWrap #astronomyDateLine{ font-weight:900!important; } /* Stage287: mobile astronomy layout repair + centered tasbeeh counts */ @media(max-width:720px){ html,body{ width:100%!important; max-width:100%!important; overflow-x:hidden!important; } body[data-page="astronomy"] main, main:has(.astroWheelOnlyCard){ width:100%!important; max-width:100vw!important; overflow-x:hidden!important; padding-inline:8px!important; box-sizing:border-box!important; } .astroWheelOnlyCard, .astroWheelOnlyWrap, .astroWheelPanel, .astroBodyInfo, .astroPlanetsSummaryCard{ width:100%!important; max-width:100%!important; min-width:0!important; box-sizing:border-box!important; } .astroWheelOnlyCard{ padding:10px!important; border-radius:20px!important; margin-inline:auto!important; } .astroWheelOnlyHead{ padding-inline:2px!important; gap:6px!important; text-align:center!important; } .astroWheelOnlyHead h1, .astroWheelOnlyHead .pageTitle, .astroWheelOnlyHeadTitle{ font-size:clamp(20px,7vw,28px)!important; line-height:1.2!important; text-align:center!important; } .astroDateLineWrap{ width:100%!important; max-width:100%!important; display:flex!important; justify-content:center!important; align-items:center!important; gap:6px!important; padding-inline:2px!important; } .astroDateLineWrap #astronomyDateLine{ flex:1 1 100%!important; max-width:100%!important; font-size:11px!important; line-height:1.55!important; text-align:center!important; white-space:normal!important; } .astroNowBtn{ flex:0 0 auto!important; margin-inline:auto!important; } .astroWheelOnlyWrap{ display:flex!important; flex-direction:column!important; gap:10px!important; overflow:visible!important; } .astroWheelPanel{ order:1!important; padding:8px!important; border-radius:18px!important; overflow:hidden!important; } .astroBodyInfo{ order:2!important; padding:9px!important; border-radius:18px!important; overflow:hidden!important; } #astroWheelLegend, .astroWheelLegend{ width:100%!important; max-width:100%!important; display:flex!important; flex-wrap:nowrap!important; justify-content:flex-start!important; gap:6px!important; overflow-x:auto!important; overflow-y:hidden!important; padding:4px 2px 8px!important; -webkit-overflow-scrolling:touch!important; scroll-snap-type:x proximity!important; } #astroWheelLegend button, .astroPlanetPickBtn{ flex:0 0 auto!important; min-width:88px!important; max-width:112px!important; min-height:34px!important; padding:5px 8px!important; font-size:11.5px!important; line-height:1.15!important; border-radius:999px!important; white-space:nowrap!important; scroll-snap-align:start!important; } .astroWheelBox, #astroWheelBox, .astroWheelSvgWrap{ width:100%!important; max-width:100%!important; min-width:0!important; aspect-ratio:1/1!important; margin-inline:auto!important; overflow:visible!important; } .astroWheelBox svg, #astroWheelBox svg, .astroWheelSvg, svg.astroWheelSvg{ width:100%!important; max-width:100%!important; height:auto!important; display:block!important; margin-inline:auto!important; overflow:visible!important; } .astroSignLabel{font-size:8.8px!important;} .astroBodyLabel{font-size:7.8px!important;} .astroBodyDegreeLabel, .astroEdgeDegreeText{font-size:7.4px!important;} .astroInfoTop, .astroInfoTopNoImage{ width:100%!important; display:flex!important; align-items:center!important; justify-content:center!important; gap:8px!important; padding:8px 9px!important; border-radius:15px!important; box-sizing:border-box!important; } .astroInfoTop h2, .astroInfoTop .astroInfoTitle{ font-size:18px!important; line-height:1.2!important; text-align:center!important; } .astroInfoRows, .astroBodyInfo dl, .astroDetailsGrid{ width:100%!important; max-width:100%!important; min-width:0!important; display:grid!important; grid-template-columns:1fr!important; gap:6px!important; } .astroInfoRows > div, .astroBodyInfo dl > div, .astroDetailsGrid > div{ min-width:0!important; width:100%!important; padding:8px 9px!important; border-radius:14px!important; box-sizing:border-box!important; } .astroInfoRows dt, .astroBodyInfo dt, .astroDetailsGrid dt{font-size:11px!important;} .astroInfoRows dd, .astroBodyInfo dd, .astroDetailsGrid dd{ font-size:13px!important; white-space:normal!important; overflow-wrap:anywhere!important; } .astroPlanetsSummaryCard{ padding:9px!important; border-radius:18px!important; overflow:hidden!important; } .astroSummaryScroll{ width:100%!important; max-width:100%!important; overflow-x:auto!important; overflow-y:hidden!important; border-radius:15px!important; -webkit-overflow-scrolling:touch!important; } .astroPlanetsSummaryTable{min-width:760px!important;} .astroPlanetsSummaryTable th{ font-size:10.5px!important; padding:5px!important; } .astroPlanetsSummaryTable td{ font-size:11px!important; padding:6px!important; } } /* Stage287: center tasbeeh target/count numbers everywhere */ .tasbeehTarget, .tasbeehCount, .tasbeehGoal, .tasbeehItemCount, .tasbeehPageCount, .tasbeehPageTarget, .tasbeehPageGoal, .tasbeehPopupCount, .tasbeehPopupTarget, .tasbeehPopupGoal, [data-tasbeeh-count], [data-count], [data-goal], .tasbeehPageChoice .count, .tasbeehPageChoice .goal, .tasbeehPageChoice .target, .tasbeehPageChoice small, .tasbeehItem small, .tasbeehPopupItem small, .tasbeehWidgetItem small, .tasbeehRemainingItem small{ display:flex!important; align-items:center!important; justify-content:center!important; text-align:center!important; min-width:42px!important; min-height:28px!important; margin-inline:auto!important; font-variant-numeric:tabular-nums!important; direction:rtl!important; } .tasbeehPageChoice, .tasbeehItem, .tasbeehPopupItem, .tasbeehWidgetItem, .tasbeehRemainingItem{ align-items:center!important; } .tasbeehPageChoice [class*="count"], .tasbeehPageChoice [class*="goal"], .tasbeehPageChoice [class*="target"], .tasbeehItem [class*="count"], .tasbeehItem [class*="goal"], .tasbeehItem [class*="target"], .tasbeehPopupItem [class*="count"], .tasbeehPopupItem [class*="goal"], .tasbeehPopupItem [class*="target"], .tasbeehWidgetItem [class*="count"], .tasbeehWidgetItem [class*="goal"], .tasbeehWidgetItem [class*="target"]{ display:flex!important; align-items:center!important; justify-content:center!important; text-align:center!important; } @media(max-width:720px){ .tasbeehTarget, .tasbeehCount, .tasbeehGoal, .tasbeehItemCount, .tasbeehPageCount, .tasbeehPageTarget, .tasbeehPageGoal, .tasbeehPopupCount, .tasbeehPopupTarget, .tasbeehPopupGoal, [data-tasbeeh-count], [data-count], [data-goal], .tasbeehPageChoice .count, .tasbeehPageChoice .goal, .tasbeehPageChoice .target, .tasbeehPageChoice small, .tasbeehItem small, .tasbeehPopupItem small, .tasbeehWidgetItem small, .tasbeehRemainingItem small{ min-width:38px!important; min-height:26px!important; font-size:12px!important; line-height:1.1!important; } } /* Stage288: degree change row keeps only time + day/date; motion remains in its own row */ .astroDegreeChangeRow dd > small{ display:none!important; } .astroMotionRow dd > .astroMotionBadge{ display:inline-flex!important; } /* Stage289: summary table change-time cell keeps time + day/date only */ .astroPlanetsSummaryTable td > .astroChangeTime + small{ display:none!important; } /* Stage290: simple tasbeeh popup counter */ .tasbeehModal{ max-width:520px!important; } .tasbeehModal .tasbeehTodayEvents, .tasbeehModal .tasbeehOtherPanel{ display:none!important; } .tasbeehModal .tasbeehList{ max-height:92px!important; overflow:auto!important; opacity:.92!important; } .tasbeehSimpleCounterStage290{ display:grid!important; gap:10px!important; text-align:center!important; margin-top:10px!important; } .tasbeehSimpleCounterStage290 #tasbeehBigBtn{ width:100%!important; min-height:142px!important; border-radius:28px!important; padding:18px!important; display:flex!important; align-items:center!important; justify-content:center!important; text-align:center!important; white-space:normal!important; line-height:1.65!important; font-size:clamp(18px,4vw,28px)!important; font-weight:1000!important; } .tasbeehSimpleTextStage290{ display:block!important; width:100%!important; text-align:center!important; } .tasbeehSimpleCounterStage290 #tasbeehBigRemain{ display:flex!important; align-items:center!important; justify-content:center!important; gap:8px!important; flex-wrap:wrap!important; min-height:44px!important; padding:8px 12px!important; border-radius:18px!important; font-weight:1000!important; text-align:center!important; background:rgba(15,122,58,.08)!important; border:1px solid rgba(15,122,58,.16)!important; } .tasbeehSimpleCounterStage290 #tasbeehBigRemain b{ font-size:28px!important; min-width:58px!important; text-align:center!important; } .tasbeehSimpleCounterStage290 #tasbeehBigRemain span, .tasbeehSimpleCounterStage290 #tasbeehBigRemain em{ font-style:normal!important; font-size:15px!important; } .tasbeehSimpleNavStage290{ display:grid!important; grid-template-columns:1fr 1fr!important; gap:8px!important; } .tasbeehSimpleNavStage290 button, .tasbeehCompleteChoiceStage290 button{ min-height:40px!important; border-radius:999px!important; font-weight:1000!important; cursor:pointer!important; } .tasbeehCompleteChoiceStage290{ padding:12px!important; border-radius:20px!important; background:rgba(255,215,107,.16)!important; border:1px solid rgba(255,215,107,.38)!important; display:grid!important; gap:8px!important; text-align:center!important; } .tasbeehCompleteChoiceStage290[hidden]{ display:none!important; } .tasbeehCompleteChoiceStage290 > b{ font-size:18px!important; } .tasbeehCompleteChoiceStage290 > div{ display:grid!important; grid-template-columns:1fr 1fr!important; gap:8px!important; } @media(max-width:720px){ .tasbeehModal{ width:min(94vw,520px)!important; max-height:88vh!important; padding:12px!important; } .tasbeehModal .tasbeehHead{ margin-bottom:6px!important; } .tasbeehModal .tasbeehList{ max-height:72px!important; } .tasbeehSimpleCounterStage290 #tasbeehBigBtn{ min-height:150px!important; font-size:20px!important; line-height:1.7!important; padding:16px!important; } .tasbeehSimpleCounterStage290 #tasbeehBigRemain b{ font-size:30px!important; } .tasbeehCompleteChoiceStage290 > div{ grid-template-columns:1fr!important; } } body.dark .tasbeehSimpleCounterStage290 #tasbeehBigRemain, body[data-theme="dark"] .tasbeehSimpleCounterStage290 #tasbeehBigRemain{ background:rgba(167,243,208,.08)!important; border-color:rgba(167,243,208,.18)!important; } /* Stage291: popup contains only one big tasbeeh button */ .tasbeehOverlay.open{ display:flex!important; align-items:center!important; justify-content:center!important; } .tasbeehOverlay .tasbeehModal{ width:min(92vw,460px)!important; max-width:460px!important; padding:0!important; margin:0!important; border:0!important; background:transparent!important; box-shadow:none!important; overflow:visible!important; } .tasbeehOverlay .tasbeehModal > *:not(.tasbeehOnlyButtonCounterStage291), .tasbeehOverlay .tasbeehClose, .tasbeehOverlay .tasbeehHead, .tasbeehOverlay .tasbeehTodayEvents, .tasbeehOverlay .tasbeehOtherPanel, .tasbeehOverlay .tasbeehList, .tasbeehOverlay .tasbeehSettingsOverlay{ display:none!important; } .tasbeehOnlyButtonCounterStage291{ width:100%!important; margin:0!important; padding:0!important; display:block!important; } .tasbeehOnlyBigBtnStage291{ position:relative!important; width:100%!important; min-height:360px!important; border-radius:36px!important; padding:58px 22px 76px!important; display:flex!important; align-items:center!important; justify-content:center!important; text-align:center!important; overflow:hidden!important; cursor:pointer!important; user-select:none!important; border:2px solid rgba(255,215,107,.55)!important; background:linear-gradient(145deg,rgba(15,122,58,.96),rgba(12,91,65,.96))!important; color:#fff!important; -webkit-text-fill-color:#fff!important; box-shadow:0 24px 70px rgba(0,0,0,.32), inset 0 0 0 1px rgba(255,255,255,.15)!important; } .tasbeehOnlyBigBtnStage291:disabled{ opacity:1!important; } .tasbeehInsideCloseStage291{ position:absolute!important; top:14px!important; inset-inline-end:14px!important; width:38px!important; height:38px!important; border-radius:999px!important; display:flex!important; align-items:center!important; justify-content:center!important; font-size:26px!important; font-weight:1000!important; line-height:1!important; background:rgba(255,255,255,.18)!important; border:1px solid rgba(255,255,255,.28)!important; color:#fff!important; -webkit-text-fill-color:#fff!important; cursor:pointer!important; z-index:5!important; } .tasbeehButtonMainTextStage291{ display:block!important; width:100%!important; max-height:210px!important; overflow:auto!important; font-size:clamp(24px,5vw,36px)!important; line-height:1.75!important; font-weight:1000!important; text-align:center!important; padding:0 6px!important; } .tasbeehInsideNavStage291{ position:absolute!important; left:14px!important; right:14px!important; bottom:14px!important; min-height:50px!important; display:grid!important; grid-template-columns:1fr auto 1fr!important; align-items:center!important; gap:8px!important; padding:8px!important; border-radius:22px!important; background:rgba(255,255,255,.16)!important; border:1px solid rgba(255,255,255,.23)!important; z-index:4!important; } .tasbeehInsideNavStage291 span, .tasbeehInsideQuestionStage291 i span{ display:flex!important; align-items:center!important; justify-content:center!important; min-height:36px!important; border-radius:999px!important; padding:4px 10px!important; background:rgba(255,255,255,.18)!important; border:1px solid rgba(255,255,255,.24)!important; font-size:14px!important; font-weight:1000!important; cursor:pointer!important; color:#fff!important; -webkit-text-fill-color:#fff!important; } .tasbeehInsideNavStage291 strong{ min-width:92px!important; min-height:42px!important; display:flex!important; align-items:center!important; justify-content:center!important; border-radius:18px!important; background:rgba(255,215,107,.95)!important; color:#173321!important; -webkit-text-fill-color:#173321!important; font-size:20px!important; font-weight:1000!important; padding:4px 10px!important; direction:ltr!important; } .tasbeehInsideNavStage291 .disabled, .tasbeehInsideQuestionStage291 .disabled{ opacity:.45!important; pointer-events:none!important; } .tasbeehInsideQuestionStage291{ position:absolute!important; inset:58px 18px 76px!important; display:grid!important; align-content:center!important; justify-items:center!important; gap:12px!important; padding:20px!important; border-radius:28px!important; background:linear-gradient(145deg,rgba(11,72,57,.98),rgba(21,128,61,.96))!important; border:1px solid rgba(255,215,107,.42)!important; z-index:3!important; color:#fff!important; -webkit-text-fill-color:#fff!important; } .tasbeehInsideQuestionStage291[hidden]{ display:none!important; } .tasbeehInsideQuestionStage291 b{ font-size:24px!important; font-weight:1000!important; } .tasbeehInsideQuestionStage291 em{ font-style:normal!important; font-size:18px!important; font-weight:900!important; line-height:1.5!important; } .tasbeehInsideQuestionStage291 i{ display:grid!important; grid-template-columns:1fr 1fr!important; gap:10px!important; width:100%!important; max-width:260px!important; font-style:normal!important; } .tasbeehInsideQuestionStage291 i span{ min-height:44px!important; background:rgba(255,215,107,.20)!important; border-color:rgba(255,215,107,.36)!important; } @media(max-width:720px){ .tasbeehOverlay .tasbeehModal{ width:min(94vw,430px)!important; } .tasbeehOnlyBigBtnStage291{ min-height:70vh!important; max-height:78vh!important; border-radius:30px!important; padding:58px 16px 74px!important; } .tasbeehButtonMainTextStage291{ font-size:clamp(22px,8vw,34px)!important; line-height:1.8!important; } .tasbeehInsideNavStage291{ left:10px!important; right:10px!important; bottom:10px!important; gap:5px!important; padding:6px!important; } .tasbeehInsideNavStage291 span{ font-size:12px!important; padding:3px 7px!important; } .tasbeehInsideNavStage291 strong{ min-width:78px!important; font-size:17px!important; padding:3px 6px!important; } } /* Stage292: تحسين شكل زر التسبيح المنبثق ورسالة الانتقال بدون حذف بنية Stage291 */ .tasbeehOnlyBigBtnStage291{ min-height:clamp(360px, 58vh, 620px)!important; padding:54px 22px 82px!important; overflow:visible!important; border-radius:48px!important; transform:translateZ(0)!important; background: radial-gradient(circle at 50% 18%, rgba(255,255,255,.22), transparent 30%), linear-gradient(145deg, rgba(18,132,65,.98), rgba(7,84,71,.98))!important; } .tasbeehOnlyBigBtnStage291:not(.isCompletedStage292):not(.hasNoTasbeehStage292)::before{ content:""; position:absolute!important; inset:10px!important; border-radius:28px!important; border:1px dashed rgba(255,255,255,.38)!important; pointer-events:none!important; } .tasbeehOnlyBigBtnStage291:not(.isCompletedStage292):not(.hasNoTasbeehStage292)::after{ content:""; display:none!important; } .tasbeehOnlyBigBtnStage291:active:not(.isCompletedStage292):not(.hasNoTasbeehStage292){ transform:scale(.985)!important; } .tasbeehOnlyBigBtnStage291.isCompletedStage292, .tasbeehOnlyBigBtnStage291.hasNoTasbeehStage292{ cursor:default!important; } .tasbeehButtonHintStage292{ position:absolute!important; top:24px!important; left:50%!important; transform:translateX(-50%)!important; z-index:2!important; display:inline-flex!important; align-items:center!important; justify-content:center!important; min-height:30px!important; padding:4px 14px!important; border-radius:999px!important; background:rgba(255,255,255,.16)!important; border:1px solid rgba(255,255,255,.24)!important; color:#fff!important; -webkit-text-fill-color:#fff!important; font-size:14px!important; font-weight:900!important; pointer-events:none!important; white-space:nowrap!important; } .tasbeehOnlyBigBtnStage291.textShortStage292 .tasbeehButtonMainTextStage291{ font-size:clamp(32px, 7vw, 52px)!important; } .tasbeehOnlyBigBtnStage291.textMediumStage292 .tasbeehButtonMainTextStage291{ font-size:clamp(27px, 5.6vw, 40px)!important; } .tasbeehOnlyBigBtnStage291.textLongStage292 .tasbeehButtonMainTextStage291{ font-size:clamp(23px, 4.6vw, 34px)!important; } .tasbeehOnlyBigBtnStage291.textVeryLongStage292 .tasbeehButtonMainTextStage291{ font-size:clamp(19px, 3.8vw, 28px)!important; line-height:1.65!important; } .tasbeehButtonMainTextStage291{ max-height:calc(100% - 150px)!important; padding:6px 8px!important; } .tasbeehInsideNavStage291{ left:18px!important; right:18px!important; bottom:18px!important; grid-template-columns:minmax(64px,.75fr) auto minmax(64px,.75fr)!important; gap:8px!important; min-height:46px!important; padding:7px!important; border-radius:19px!important; background:rgba(4,45,38,.36)!important; backdrop-filter:blur(8px)!important; } .tasbeehInsideNavStage291 span{ min-height:34px!important; min-width:64px!important; padding:4px 10px!important; font-size:13px!important; border-radius:14px!important; background:rgba(255,255,255,.92)!important; color:#174131!important; -webkit-text-fill-color:#174131!important; box-shadow:0 4px 10px rgba(0,0,0,.14)!important; } .tasbeehInsideNavStage291 strong{ min-width:88px!important; min-height:38px!important; font-size:18px!important; border-radius:15px!important; } .tasbeehInsideQuestionStage291{ inset:70px 18px 82px!important; z-index:10!important; border-radius:28px!important; background:#fff!important; color:#173321!important; -webkit-text-fill-color:#173321!important; border:2px solid rgba(255,215,107,.9)!important; box-shadow:0 16px 40px rgba(0,0,0,.30)!important; padding:22px!important; } .tasbeehInsideQuestionStage291 b{ color:#07543f!important; -webkit-text-fill-color:#07543f!important; } .tasbeehInsideQuestionStage291 em{ color:#26382f!important; -webkit-text-fill-color:#26382f!important; } .tasbeehInsideQuestionStage291 i span{ min-height:46px!important; background:#0b7a42!important; border-color:#0b7a42!important; color:#fff!important; -webkit-text-fill-color:#fff!important; box-shadow:0 8px 16px rgba(0,0,0,.16)!important; } .tasbeehInsideQuestionStage291 i span#tasbeehCompleteStopBtn{ background:#fff4df!important; border-color:rgba(120,72,0,.26)!important; color:#5a3510!important; -webkit-text-fill-color:#5a3510!important; } .tasbeehInsideQuestionStage291 i span.disabled{ background:#e8e8e8!important; color:#777!important; -webkit-text-fill-color:#777!important; opacity:1!important; } @media(max-width:720px){ .tasbeehOnlyBigBtnStage291{ min-height:clamp(430px, 72vh, 680px)!important; max-height:86vh!important; padding:54px 14px 82px!important; border-radius:42px!important; } .tasbeehButtonHintStage292{ top:22px!important; font-size:12px!important; min-height:27px!important; padding:3px 11px!important; } .tasbeehOnlyBigBtnStage291::after{ top:16px!important; font-size:12px!important; } .tasbeehInsideNavStage291{ left:10px!important; right:10px!important; bottom:10px!important; grid-template-columns:minmax(56px,.7fr) auto minmax(56px,.7fr)!important; } .tasbeehInsideNavStage291 span{ min-width:56px!important; font-size:12px!important; padding:3px 7px!important; } .tasbeehInsideNavStage291 strong{ min-width:76px!important; font-size:16px!important; } .tasbeehInsideQuestionStage291{ inset:72px 12px 84px!important; padding:18px 14px!important; } } /* Stage292 refinement: واجهة مستديرة ونظيفة */ .tasbeehOnlyBigBtnStage291{ border-radius:clamp(34px, 8vw, 76px)!important; } .tasbeehOnlyBigBtnStage291:not(.isCompletedStage292):not(.hasNoTasbeehStage292)::after{ content:""!important; display:none!important; } .tasbeehStatus-saad{ display:none!important; } /* Stage292: floating tasbeeh badge as white circle with red border */ #tasbeehFloatBtn.tasbeehFloatBtn, .tasbeehFloatBtn{ overflow:visible!important; } #tasbeehBadge.tasbeehBadge, .tasbeehFloatBtn .tasbeehBadge{ position:absolute!important; top:-10px!important; left:-10px!important; right:auto!important; bottom:auto!important; display:flex!important; align-items:center!important; justify-content:center!important; width:28px!important; height:28px!important; min-width:28px!important; max-width:28px!important; min-height:28px!important; padding:0!important; box-sizing:border-box!important; border-radius:50%!important; background:#ffffff!important; color:#d40022!important; border:2px solid #d40022!important; box-shadow:0 3px 8px rgba(0,0,0,.18)!important; font-size:15px!important; line-height:1!important; font-weight:1000!important; text-align:center!important; text-shadow:none!important; z-index:3!important; pointer-events:none!important; } #tasbeehBadge.tasbeehBadge[hidden], #tasbeehBadge.tasbeehBadge.isZero, .tasbeehFloatBtn .tasbeehBadge[hidden], .tasbeehFloatBtn .tasbeehBadge.isZero{ display:none!important; } body.dark #tasbeehBadge.tasbeehBadge, body[data-theme="dark"] #tasbeehBadge.tasbeehBadge, body.dark .tasbeehFloatBtn .tasbeehBadge, body[data-theme="dark"] .tasbeehFloatBtn .tasbeehBadge{ background:#ffffff!important; color:#d40022!important; border-color:#d40022!important; text-shadow:none!important; } @media(max-width:640px){ #tasbeehBadge.tasbeehBadge, .tasbeehFloatBtn .tasbeehBadge{ top:-9px!important; left:-9px!important; width:27px!important; height:27px!important; min-width:27px!important; max-width:27px!important; min-height:27px!important; font-size:14px!important; } } /* Stage292: align tasbeeh remaining-count numbers at the far left */ .tasbeehChoice{ position:relative!important; padding-left:112px!important; padding-right:12px!important; } .tasbeehChoice span{ display:block!important; text-align:right!important; padding-inline-end:0!important; } .tasbeehChoice small{ position:absolute!important; left:12px!important; right:auto!important; top:50%!important; transform:translateY(-50%)!important; width:92px!important; min-width:92px!important; max-width:92px!important; display:flex!important; justify-content:flex-start!important; align-items:center!important; text-align:left!important; direction:ltr!important; white-space:nowrap!important; } .tasbeehChoice small b, .tasbeehChoice small em{ direction:ltr!important; text-align:left!important; } .tasbeehChoice.complete small{ justify-content:flex-start!important; } @media(max-width:640px){ .tasbeehChoice{ padding-left:104px!important; padding-right:11px!important; } .tasbeehChoice small{ left:10px!important; width:86px!important; min-width:86px!important; max-width:86px!important; } } /* Stage292: ordered daily tasbeeh sequence - keep group visually connected and numbers aligned */ body .tasbeehPageChoice{ position:relative!important; display:block!important; padding:12px 14px 12px 82px!important; min-height:54px!important; text-align:right!important; direction:rtl!important; } body .tasbeehPageChoice span{ display:block!important; width:100%!important; padding:0!important; margin:0!important; text-align:right!important; line-height:1.7!important; } body .tasbeehPageChoice small{ position:absolute!important; left:14px!important; right:auto!important; top:50%!important; transform:translateY(-50%)!important; width:54px!important; min-width:54px!important; max-width:54px!important; min-height:30px!important; margin:0!important; padding:0!important; display:flex!important; align-items:center!important; justify-content:center!important; text-align:center!important; direction:rtl!important; unicode-bidi:isolate!important; font-variant-numeric:tabular-nums!important; } body .tasbeehPageChoice small em, body .tasbeehPageChoice small b{ display:block!important; width:100%!important; text-align:center!important; } .tasbeehLockedSequence .tasbeehPageChoice, .tasbeehLockedSequence .tasbeehChoice{ border:2px solid rgba(178,34,34,.42)!important; background:linear-gradient(180deg, rgba(255,255,255,.98), rgba(255,245,245,.96))!important; } .tasbeehLockedSequence + .tasbeehLockedSequence{ margin-top:4px!important; } .tasbeehLockedSequence .tasbeehPageChoice::after, .tasbeehLockedSequence .tasbeehChoice::after{ content:""; position:absolute; right:8px; top:10px; bottom:10px; width:4px; border-radius:999px; background:#b22222; opacity:.85; } .tasbeehSequenceBadge{ display:inline-flex!important; align-items:center!important; justify-content:center!important; margin-inline-start:8px!important; padding:2px 8px!important; border-radius:999px!important; border:1px solid #b22222!important; background:#fff!important; color:#b22222!important; font-size:12px!important; font-style:normal!important; font-weight:800!important; white-space:nowrap!important; } body.dark .tasbeehLockedSequence .tasbeehPageChoice, body.dark .tasbeehLockedSequence .tasbeehChoice, body[data-theme="dark"] .tasbeehLockedSequence .tasbeehPageChoice, body[data-theme="dark"] .tasbeehLockedSequence .tasbeehChoice{ background:linear-gradient(180deg, rgba(45,30,30,.98), rgba(58,34,34,.96))!important; } @media(max-width:720px){ body .tasbeehPageChoice{padding:11px 12px 11px 76px!important;} body .tasbeehPageChoice small{left:12px!important;width:50px!important;min-width:50px!important;max-width:50px!important;} .tasbeehSequenceBadge{display:flex!important;width:max-content;margin-top:4px!important;margin-inline-start:0!important;font-size:11px!important;} } /* Stage292 notification restore state */ #tasbeehPageTopClear.restore, .tasbeehPageClearToday.restore, .tasbeehClearTodayBtn.restore{ background:#ffffff !important; color:#b00020 !important; border:2px solid #b00020 !important; } /* Stage294: ordered daily wird as one 100-click tasbeeh */ .tasbeehOrderedWird .tasbeehPageChoice, .tasbeehOrderedWird .tasbeehChoice{ border-color:rgba(178,34,34,.42)!important; box-shadow:0 8px 22px rgba(178,34,34,.10)!important; } .tasbeehSequenceCurrentText{ display:block!important; margin-top:6px!important; color:#3b2a16!important; font-size:14px!important; font-style:normal!important; font-weight:800!important; line-height:1.7!important; } body.dark .tasbeehSequenceCurrentText, body[data-theme="dark"] .tasbeehSequenceCurrentText{ color:#fff3dc!important; } /* Stage295: keep previous/next controls fixed while tasbeeh text changes */ .tasbeehOverlay.open .tasbeehOnlyButtonCounterStage291{ display:block!important; width:100%!important; } .tasbeehOverlay.open .tasbeehOnlyBigBtnStage291{ /* Use a stable button box so the bottom control bar does not jump between tasbeeh parts. */ height:clamp(430px, 64vh, 620px)!important; min-height:clamp(430px, 64vh, 620px)!important; max-height:clamp(430px, 64vh, 620px)!important; box-sizing:border-box!important; display:block!important; padding:66px 22px 100px!important; overflow:hidden!important; } .tasbeehOverlay.open .tasbeehButtonMainTextStage291{ position:absolute!important; left:22px!important; right:22px!important; top:66px!important; bottom:104px!important; width:auto!important; height:auto!important; max-height:none!important; min-height:0!important; display:flex!important; align-items:center!important; justify-content:center!important; text-align:center!important; overflow:auto!important; padding:8px 10px!important; box-sizing:border-box!important; } .tasbeehOverlay.open .tasbeehInsideNavStage291{ position:absolute!important; left:18px!important; right:18px!important; bottom:18px!important; top:auto!important; transform:none!important; margin:0!important; width:auto!important; box-sizing:border-box!important; z-index:12!important; } .tasbeehOverlay.open .tasbeehInsideQuestionStage291{ inset:70px 18px 104px!important; } @media(max-width:720px){ .tasbeehOverlay.open .tasbeehOnlyBigBtnStage291{ height:clamp(500px, 78vh, 700px)!important; min-height:clamp(500px, 78vh, 700px)!important; max-height:clamp(500px, 78vh, 700px)!important; padding:62px 14px 96px!important; } .tasbeehOverlay.open .tasbeehButtonMainTextStage291{ left:14px!important; right:14px!important; top:62px!important; bottom:100px!important; } .tasbeehOverlay.open .tasbeehInsideNavStage291{ left:10px!important; right:10px!important; bottom:10px!important; } .tasbeehOverlay.open .tasbeehInsideQuestionStage291{ inset:72px 12px 102px!important; } } /* Stage297: ضغطة نغمة الانتقال غير المحسوبة تظهر باللون الأحمر فقط أثناء الانتقال */ #tasbeehPageBigBtn.isOrderedWirdCueStage297{ background:linear-gradient(135deg,#d40022,#8f0018)!important; box-shadow: 0 20px 45px rgba(212,0,34,.28), inset 0 4px 0 rgba(255,255,255,.24), inset 0 -8px 18px rgba(0,0,0,.20)!important; } #tasbeehPageBigBtn.isOrderedWirdCueStage297::before{ content:"ضغطة نغمة فقط"!important; } .tasbeehOnlyBigBtnStage291.isOrderedWirdCueStage297{ background: radial-gradient(circle at 50% 18%, rgba(255,255,255,.20), transparent 30%), linear-gradient(145deg, rgba(212,0,34,.98), rgba(142,0,24,.98))!important; border-color:rgba(255,255,255,.58)!important; box-shadow:0 24px 70px rgba(142,0,24,.34), inset 0 0 0 1px rgba(255,255,255,.18)!important; } .tasbeehOnlyBigBtnStage291.isOrderedWirdCueStage297 .tasbeehButtonHintStage292{ background:rgba(255,255,255,.24)!important; border-color:rgba(255,255,255,.42)!important; } /* Stage298: stronger mobile selected zodiac band for astronomy wheel */ @media(max-width:720px){ .astroWheelOnlyCard .astroSignBand.activeSign, .astroSignBand.activeSign{ fill:rgba(255,215,107,.56)!important; stroke:#f59e0b!important; stroke-width:2.6px!important; filter:drop-shadow(0 0 13px rgba(245,158,11,.70))!important; } .astroWheelOnlyCard .astroSignLabel.activeSignLabel, .astroSignLabel.activeSignLabel{ fill:#7c2d12!important; stroke:#ffffff!important; stroke-width:3.4px!important; } } /* Stage299: easy ordered wird builder inside events-builder.html */ .orderedWirdBuilder{ margin-top:14px; padding:14px; border:1px solid rgba(15,122,58,.22); border-radius:22px; background:linear-gradient(180deg,rgba(15,122,58,.07),rgba(255,255,255,.82)); } .orderedWirdBuilderHead{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:12px; } .orderedWirdBuilderHead h3{ margin:0 0 5px; font-weight:1000; color:#0f7a3a; } .orderedWirdBuilderHead p, .orderedWirdTransitionBox p{ margin:0; color:#647067; font-weight:800; line-height:1.7; } #orderedWirdSummary{ flex:0 0 auto; border-radius:999px; padding:8px 12px; background:#0f7a3a; color:#fff; font-weight:1000; white-space:nowrap; } .orderedWirdGrid{ display:grid; grid-template-columns:repeat(4,minmax(130px,1fr)); gap:10px; } .orderedWirdBuilder label{ display:block; font-weight:1000; color:#17351f; } .orderedWirdBuilder input, .orderedWirdBuilder select, .orderedWirdBuilder textarea{ width:100%; box-sizing:border-box; margin-top:6px; border:1px solid rgba(15,122,58,.24); border-radius:14px; padding:10px; background:#fff; color:#17351f; -webkit-text-fill-color:#17351f; font-family:inherit; font-weight:900; } .orderedWirdPartsLabel{ margin-top:12px; } .orderedWirdBuilder textarea{ resize:vertical; line-height:1.8; direction:rtl; text-align:right; } .orderedWirdTransitionBox{ display:grid; grid-template-columns:minmax(210px,.75fr) 1fr; gap:10px; align-items:end; margin-top:12px; padding:12px; border-radius:18px; background:rgba(255,255,255,.65); border:1px dashed rgba(185,28,28,.28); } .orderedWirdTransitionBox p{ grid-column:1 / -1; } .orderedWirdCheck{ display:flex!important; align-items:center; gap:8px; min-height:48px; padding:10px; border-radius:14px; background:#fff; border:1px solid rgba(185,28,28,.2); } .orderedWirdCheck input{ width:auto!important; margin:0!important; } .orderedWirdActions{ margin-top:12px; } body.dark .orderedWirdBuilder, body[data-theme="dark"] .orderedWirdBuilder{ background:rgba(255,255,255,.08)!important; border-color:rgba(255,255,255,.16)!important; } @media (max-width: 760px){ .orderedWirdBuilderHead{ display:block; } #orderedWirdSummary{ display:inline-flex; margin-top:10px; } .orderedWirdGrid, .orderedWirdTransitionBox{ grid-template-columns:1fr; } } /* Stage300: قائمة اختيار داخل زر التسبيح، وسطر عدد الإشعارات، مع الحفاظ على شكل المربع */ .tasbeehChooserToggleStage300{ position:absolute!important; top:14px!important; inset-inline-start:14px!important; width:38px!important; height:38px!important; border-radius:999px!important; display:flex!important; align-items:center!important; justify-content:center!important; font-size:24px!important; font-weight:1000!important; line-height:1!important; background:rgba(255,255,255,.18)!important; border:1px solid rgba(255,255,255,.30)!important; color:#fff!important; -webkit-text-fill-color:#fff!important; cursor:pointer!important; z-index:14!important; animation:tasbeehChooserBlinkStage300 1.45s ease-in-out infinite; box-shadow:0 0 0 0 rgba(255,255,255,.35)!important; } .tasbeehChooserToggleStage300.open{ background:#fff!important; color:#0b7a42!important; -webkit-text-fill-color:#0b7a42!important; animation:none!important; } @keyframes tasbeehChooserBlinkStage300{ 0%,100%{opacity:.72;transform:scale(1)} 50%{opacity:1;transform:scale(1.08);box-shadow:0 0 0 8px rgba(255,255,255,.12)!important} } .tasbeehNotificationLineStage300{ position:absolute!important; top:60px!important; left:50%!important; transform:translateX(-50%)!important; z-index:2!important; display:inline-flex!important; align-items:center!important; justify-content:center!important; min-height:24px!important; max-width:82%!important; padding:2px 12px!important; border-radius:999px!important; background:rgba(255,255,255,.12)!important; border:1px solid rgba(255,255,255,.18)!important; color:#fff!important; -webkit-text-fill-color:#fff!important; font-size:12px!important; font-weight:900!important; line-height:1.4!important; pointer-events:none!important; white-space:nowrap!important; overflow:hidden!important; text-overflow:ellipsis!important; } .tasbeehNotificationLineStage300.isComplete{ background:rgba(255,215,107,.22)!important; border-color:rgba(255,215,107,.34)!important; } .tasbeehInlineChooserStage300{ position:absolute!important; inset:92px 18px 84px!important; z-index:12!important; display:flex!important; flex-direction:column!important; gap:7px!important; padding:12px!important; border-radius:28px!important; background:rgba(255,255,255,.96)!important; border:2px solid rgba(255,215,107,.88)!important; box-shadow:0 16px 38px rgba(0,0,0,.28)!important; overflow:auto!important; color:#173321!important; -webkit-text-fill-color:#173321!important; } .tasbeehInlineChooserStage300[hidden]{display:none!important} .tasbeehInlineChoiceStage300{ display:grid!important; gap:3px!important; width:100%!important; padding:9px 12px!important; border-radius:16px!important; background:#f8fff9!important; border:1px solid rgba(15,122,58,.18)!important; text-align:right!important; cursor:pointer!important; color:#173321!important; -webkit-text-fill-color:#173321!important; } .tasbeehInlineChoiceStage300.selected{ background:#eaffef!important; box-shadow:inset 0 0 0 2px #0f7a3a!important; } .tasbeehInlineChoiceStage300 b{ font-size:14px!important; line-height:1.55!important; font-weight:1000!important; color:#173321!important; -webkit-text-fill-color:#173321!important; } .tasbeehInlineChoiceStage300 small{ font-size:11px!important; font-weight:900!important; color:#b00020!important; -webkit-text-fill-color:#b00020!important; } .tasbeehInlineEmptyStage300{ display:grid!important; place-items:center!important; min-height:100%!important; font-style:normal!important; font-size:15px!important; font-weight:1000!important; line-height:1.8!important; color:#0f7a3a!important; -webkit-text-fill-color:#0f7a3a!important; } .tasbeehOnlyBigBtnStage291.isChooserOpenStage300 .tasbeehButtonMainTextStage291{ opacity:.08!important; } @media(max-width:720px){ .tasbeehChooserToggleStage300{ top:13px!important; inset-inline-start:13px!important; width:34px!important; height:34px!important; font-size:21px!important; } .tasbeehNotificationLineStage300{ top:54px!important; max-width:78%!important; font-size:11px!important; padding:2px 9px!important; } .tasbeehInlineChooserStage300{ inset:84px 12px 84px!important; padding:10px!important; border-radius:24px!important; } .tasbeehInlineChoiceStage300{ padding:8px 10px!important; } } /* Stage301: تمكين تمرير قائمة الاختيار داخل زر التسبيح على الجوال بدون تحريك الزر نفسه */ .tasbeehInlineChooserStage300{ overflow-y:auto!important; overflow-x:hidden!important; -webkit-overflow-scrolling:touch!important; touch-action:pan-y!important; overscroll-behavior:contain!important; pointer-events:auto!important; scrollbar-gutter:stable!important; } .tasbeehOnlyBigBtnStage291.isChooserOpenStage300{ touch-action:auto!important; } .tasbeehOnlyBigBtnStage291.isChooserOpenStage300 .tasbeehInlineChooserStage300, .tasbeehOnlyBigBtnStage291.isChooserOpenStage300 .tasbeehInlineChooserStage300 *{ pointer-events:auto!important; } @media(max-width:720px){ .tasbeehInlineChooserStage300{ overflow-y:scroll!important; max-height:calc(100% - 168px)!important; padding-bottom:14px!important; } } /* Stage302: إصلاح عميق لتمرير قائمة الاختيار داخل مربع التسبيح على الجوال. السبب: كانت القائمة داخل عنصر button، وبعض متصفحات الجوال لا تسمح بتمرير عنصر داخلي داخل button. بعد تحويل الزر إلى حاوية role=button، نثبت مساحة القائمة ونمنحها تمرير لمس مستقل. */ .tasbeehOnlyBigBtnStage291[role="button"]{ -webkit-tap-highlight-color:transparent!important; } .tasbeehOnlyBigBtnStage291[aria-disabled="true"]{ cursor:default!important; } .tasbeehOnlyBigBtnStage291.isChooserOpenStage300{ overflow:hidden!important; } .tasbeehOnlyBigBtnStage291.isChooserOpenStage300 .tasbeehInlineChooserStage300{ display:flex!important; position:absolute!important; min-height:0!important; height:auto!important; overflow-y:auto!important; overflow-x:hidden!important; -webkit-overflow-scrolling:touch!important; touch-action:pan-y!important; overscroll-behavior-y:contain!important; z-index:30!important; contain:content!important; } .tasbeehOnlyBigBtnStage291.isChooserOpenStage300 .tasbeehInlineChoiceStage300{ flex:0 0 auto!important; } @media(max-width:720px){ .tasbeehOnlyBigBtnStage291.isChooserOpenStage300 .tasbeehInlineChooserStage300{ inset:82px 10px 78px!important; max-height:none!important; overflow-y:auto!important; } } /* Stage303: fix mobile scroll by detaching popup chooser from the clickable big tasbeeh surface */ .tasbeehOnlyButtonCounterStage291{ position:relative!important; overflow:visible!important; } .tasbeehInlineChooserDetachedStage303{ position:absolute!important; left:18px!important; right:18px!important; top:92px!important; bottom:84px!important; z-index:80!important; display:block!important; overflow-y:auto!important; overflow-x:hidden!important; -webkit-overflow-scrolling:touch!important; touch-action:pan-y!important; overscroll-behavior:contain!important; max-height:none!important; min-height:0!important; box-sizing:border-box!important; pointer-events:auto!important; transform:translateZ(0)!important; } .tasbeehInlineChooserDetachedStage303[hidden]{ display:none!important; } .tasbeehInlineChooserDetachedStage303 .tasbeehInlineChoiceStage300{ touch-action:manipulation!important; } .tasbeehOnlyBigBtnStage291.isChooserOpenStage300 .tasbeehInlineChooserDetachedStage303, .tasbeehOnlyBigBtnStage291.isChooserOpenStage300 .tasbeehInlineChooserDetachedStage303 *{ pointer-events:auto!important; } @media(max-width:720px){ .tasbeehInlineChooserDetachedStage303{ left:10px!important; right:10px!important; top:82px!important; bottom:78px!important; overflow-y:scroll!important; max-height:none!important; padding-bottom:18px!important; } } /* Stage116: year aya ghuroobi rollover + Safar 6 note */ #yearAyaBody{ display:grid !important; gap:14px !important; } #yearAyaBody .yearAyaMeta{ font-size:clamp(15px,1.25vw,20px); font-weight:1000; line-height:1.8; color:var(--green,#0f7a3a); background:rgba(255,255,255,.72); border:1px solid color-mix(in srgb, var(--green,#0f7a3a), transparent 62%); border-radius:16px; padding:10px 12px; } #yearAyaBody .yearAyaMainText{ margin:0; text-align:center; white-space:normal; } #yearAyaBody .yearAyaSafarNote{ border:2px solid var(--gold,#c9a227); border-radius:18px; padding:14px 16px; background:color-mix(in srgb, var(--gold,#c9a227), transparent 84%); box-shadow:0 10px 24px rgba(201,162,39,.16); } #yearAyaBody .yearAyaSafarNote strong{ display:block; margin-bottom:8px; color:#8a5a00; font-size:clamp(18px,1.65vw,25px); font-weight:1000; } #yearAyaBody .yearAyaSafarNote p{ margin:0; line-height:2; font-weight:900; } body[data-theme="dark"] #yearAyaBody .yearAyaMeta{ background:rgba(255,255,255,.05); } body[data-theme="dark"] #yearAyaBody .yearAyaSafarNote strong{ color:#ffe7a2; } /* Stage302: homepage nahusat date centered under remaining-days badge */ body #homeEventsStack #homeNahusatWidget .eventCard[data-type="nahs"], body #homeEventsStack #homeNahusatWidget .fastingCard[data-type="nahs"]{ text-align:center !important; } body #homeEventsStack #homeNahusatWidget .eventCard[data-type="nahs"] .fastingCardTop, body #homeEventsStack #homeNahusatWidget .fastingCard[data-type="nahs"] .fastingCardTop{ display:flex !important; flex-direction:column !important; align-items:center !important; justify-content:center !important; gap:8px !important; text-align:center !important; padding-inline:0 !important; } body #homeEventsStack #homeNahusatWidget .eventCard[data-type="nahs"] .fastingCardTop span, body #homeEventsStack #homeNahusatWidget .fastingCard[data-type="nahs"] .fastingCardTop span{ order:2 !important; align-self:center !important; margin-inline:auto !important; position:static !important; transform:none !important; font-size:clamp(18px,1.9vw,26px) !important; line-height:1.15 !important; } body #homeEventsStack #homeNahusatWidget .eventCard[data-type="nahs"] .fastingHijri, body #homeEventsStack #homeNahusatWidget .fastingCard[data-type="nahs"] .fastingHijri{ display:flex !important; align-items:center !important; justify-content:center !important; width:100% !important; max-width:100% !important; margin:8px auto 0 !important; padding:0 !important; text-align:center !important; font-size:clamp(18px,1.9vw,26px) !important; line-height:1.25 !important; font-weight:1000 !important; color:#fff !important; white-space:normal !important; } @media(max-width:760px){ body #homeEventsStack #homeNahusatWidget .eventCard[data-type="nahs"] .fastingCardTop, body #homeEventsStack #homeNahusatWidget .fastingCard[data-type="nahs"] .fastingCardTop{ gap:6px !important; } body #homeEventsStack #homeNahusatWidget .eventCard[data-type="nahs"] .fastingCardTop span, body #homeEventsStack #homeNahusatWidget .fastingCard[data-type="nahs"] .fastingCardTop span, body #homeEventsStack #homeNahusatWidget .eventCard[data-type="nahs"] .fastingHijri, body #homeEventsStack #homeNahusatWidget .fastingCard[data-type="nahs"] .fastingHijri{ font-size:clamp(18px,5.2vw,24px) !important; line-height:1.22 !important; } body #homeEventsStack #homeNahusatWidget .eventCard[data-type="nahs"] .fastingHijri, body #homeEventsStack #homeNahusatWidget .fastingCard[data-type="nahs"] .fastingHijri{ margin-top:6px !important; } } /* Stage308 — floating tasbeeh matched to the previously approved Quran popup, adapted to Al-Fath theme. */ /* v186 — مواءمة زر ومربع التسبيح مع ثيم القرآن ودفتر الأدعية */ body{ --tasbeeh-host-bg:var(--card,#ffffff); --tasbeeh-host-bg-soft:var(--panelBg,#fbfbfb); --tasbeeh-host-text:var(--text,#0f172a); --tasbeeh-host-muted:var(--muted,#475569); --tasbeeh-host-accent:var(--green,#0f7a3a); --tasbeeh-host-border:var(--line,#e5e7eb); --tasbeeh-host-glow:color-mix(in srgb,var(--green,#0f7a3a) 14%,transparent); } body[data-theme="dark"]{ --tasbeeh-host-bg:var(--card,#0b1a10); --tasbeeh-host-bg-soft:var(--panelBg,rgba(255,255,255,.04)); --tasbeeh-host-text:var(--text,#e8f1ea); --tasbeeh-host-muted:var(--muted,#a7c0b0); --tasbeeh-host-accent:var(--green2,#19a34a); --tasbeeh-host-border:var(--line,rgba(232,241,234,.12)); --tasbeeh-host-glow:color-mix(in srgb,var(--green2,#19a34a) 16%,transparent); } /* الزر العائم نفسه بلا حواف بيضاء أو وهج غريب عند اللمس */ .tasbeehFloatBtn{ width:58px!important; height:58px!important; min-width:58px!important; min-height:58px!important; padding:0!important; border-radius:50%!important; border:2px solid var(--tasbeeh-host-accent)!important; background:var(--tasbeeh-host-bg)!important; color:var(--tasbeeh-host-text)!important; box-shadow:0 12px 28px rgba(0,0,0,.18),inset 0 0 0 4px var(--tasbeeh-host-glow)!important; outline:0!important; -webkit-tap-highlight-color:transparent!important; transform:none!important; overflow:visible!important; } .tasbeehFloatBtn:hover, .tasbeehFloatBtn:focus, .tasbeehFloatBtn:focus-visible, .tasbeehFloatBtn:active{ border-color:var(--tasbeeh-host-accent)!important; background:var(--tasbeeh-host-bg)!important; box-shadow:0 12px 28px rgba(0,0,0,.18),inset 0 0 0 4px var(--tasbeeh-host-glow)!important; outline:0!important; transform:none!important; } .tasbeehFloatBtn.dragging{opacity:.9!important;transform:none!important} .tasbeehIcon{ color:var(--tasbeeh-host-text)!important; filter:drop-shadow(0 3px 5px rgba(0,0,0,.16))!important; } .tasbeehBadge{ border-color:var(--tasbeeh-host-bg)!important; box-shadow:0 3px 8px rgba(0,0,0,.18)!important; } /* لا يظهر أي وصف لليوم أو نحس/سعد خارج مربع العدّاد. */ .tasbeehTodayEvents, #tasbeehTodayEvents, .tasbeehModal .tasbeehMiniEvent, .tasbeehModal .tasbeehStatusBadge{ display:none!important; } /* مربع العدّاد يأخذ لون خلفية المصحف أو ثيم دفتر الأدعية مباشرة. */ .tasbeehOnlyBigBtnStage291{ color:var(--tasbeeh-host-text)!important; -webkit-text-fill-color:var(--tasbeeh-host-text)!important; border:3px double var(--tasbeeh-host-accent)!important; background:var(--tasbeeh-host-bg)!important; background-image:linear-gradient(145deg,color-mix(in srgb,var(--tasbeeh-host-bg) 92%,var(--tasbeeh-host-bg-soft) 8%),var(--tasbeeh-host-bg))!important; box-shadow:0 22px 58px rgba(0,0,0,.24),inset 0 0 0 8px var(--tasbeeh-host-glow)!important; outline:0!important; transform:none!important; -webkit-tap-highlight-color:transparent!important; padding-top:74px!important; } .tasbeehOnlyBigBtnStage291:focus, .tasbeehOnlyBigBtnStage291:focus-visible, .tasbeehOnlyBigBtnStage291:active{ color:var(--tasbeeh-host-text)!important; -webkit-text-fill-color:var(--tasbeeh-host-text)!important; border-color:var(--tasbeeh-host-accent)!important; background:var(--tasbeeh-host-bg)!important; background-image:linear-gradient(145deg,color-mix(in srgb,var(--tasbeeh-host-bg) 92%,var(--tasbeeh-host-bg-soft) 8%),var(--tasbeeh-host-bg))!important; box-shadow:0 22px 58px rgba(0,0,0,.24),inset 0 0 0 8px var(--tasbeeh-host-glow)!important; outline:0!important; transform:none!important; } .tasbeehOnlyBigBtnStage291:not(.isCompletedStage292):not(.hasNoTasbeehStage292)::before, .tasbeehOnlyBigBtnStage291:not(.isCompletedStage292):not(.hasNoTasbeehStage292)::after{ display:none!important; content:none!important; } /* عنوان اليوم داخل أعلى مربع التسبيح. */ .tasbeehDayTitleStage186{ position:absolute!important; top:16px!important; left:50%!important; transform:translateX(-50%)!important; z-index:6!important; display:block!important; max-width:calc(100% - 118px)!important; padding:5px 14px!important; border:1px solid var(--tasbeeh-host-border)!important; border-radius:999px!important; background:var(--tasbeeh-host-bg-soft)!important; color:var(--tasbeeh-host-text)!important; -webkit-text-fill-color:var(--tasbeeh-host-text)!important; font-size:clamp(15px,3.6vw,20px)!important; font-weight:1000!important; line-height:1.35!important; white-space:nowrap!important; overflow:hidden!important; text-overflow:ellipsis!important; pointer-events:none!important; box-shadow:none!important; } .tasbeehButtonHintStage292{display:none!important} .tasbeehButtonMainTextStage291{ color:var(--tasbeeh-host-text)!important; -webkit-text-fill-color:var(--tasbeeh-host-text)!important; text-shadow:none!important; } .tasbeehInsideCloseStage291, .tasbeehChooserToggleStage300, .tasbeehInsideNavStage291 span, .tasbeehInsideQuestionStage291 i span{ color:var(--tasbeeh-host-text)!important; -webkit-text-fill-color:var(--tasbeeh-host-text)!important; background:color-mix(in srgb,var(--tasbeeh-host-bg-soft) 86%,transparent)!important; border-color:var(--tasbeeh-host-border)!important; box-shadow:none!important; outline:0!important; -webkit-tap-highlight-color:transparent!important; } .tasbeehInsideCloseStage291:focus, .tasbeehInsideCloseStage291:active, .tasbeehChooserToggleStage300:focus, .tasbeehChooserToggleStage300:active, .tasbeehInsideNavStage291 span:focus, .tasbeehInsideNavStage291 span:active{ outline:0!important; box-shadow:none!important; border-color:var(--tasbeeh-host-accent)!important; } .tasbeehInsideNavStage291{ background:color-mix(in srgb,var(--tasbeeh-host-bg-soft) 86%,transparent)!important; border-color:var(--tasbeeh-host-border)!important; box-shadow:none!important; } .tasbeehInsideNavStage291 strong{ background:var(--tasbeeh-host-accent)!important; color:var(--tasbeeh-host-bg)!important; -webkit-text-fill-color:var(--tasbeeh-host-bg)!important; box-shadow:none!important; } .tasbeehNotificationLineStage300{ color:var(--tasbeeh-host-muted)!important; -webkit-text-fill-color:var(--tasbeeh-host-muted)!important; background:var(--tasbeeh-host-bg-soft)!important; border-color:var(--tasbeeh-host-border)!important; box-shadow:none!important; } .tasbeehInlineChooserStage300, .tasbeehInlineChooserDetachedStage303{ background:var(--tasbeeh-host-bg-soft)!important; color:var(--tasbeeh-host-text)!important; -webkit-text-fill-color:var(--tasbeeh-host-text)!important; border-color:var(--tasbeeh-host-accent)!important; box-shadow:0 16px 38px rgba(0,0,0,.18)!important; } .tasbeehInlineChoiceStage300{ background:var(--tasbeeh-host-bg)!important; color:var(--tasbeeh-host-text)!important; -webkit-text-fill-color:var(--tasbeeh-host-text)!important; border-color:var(--tasbeeh-host-border)!important; } .tasbeehInlineChoiceStage300 b{ color:var(--tasbeeh-host-text)!important; -webkit-text-fill-color:var(--tasbeeh-host-text)!important; } .tasbeehInlineChoiceStage300.selected{ background:color-mix(in srgb,var(--tasbeeh-host-bg) 82%,var(--tasbeeh-host-accent) 18%)!important; box-shadow:inset 0 0 0 2px var(--tasbeeh-host-accent)!important; } @media(max-width:720px){ .tasbeehFloatBtn{ width:56px!important; height:56px!important; min-width:56px!important; min-height:56px!important; } .tasbeehOnlyBigBtnStage291{padding-top:70px!important} .tasbeehDayTitleStage186{ top:14px!important; max-width:calc(100% - 108px)!important; font-size:16px!important; padding:4px 10px!important; } } /* v187 — مربع تسبيح عائم صافي بلا أي طبقة أو أثر خلفه */ .tasbeehOverlay, .tasbeehOverlay.open{ background:transparent!important; background-color:transparent!important; background-image:none!important; backdrop-filter:none!important; -webkit-backdrop-filter:none!important; box-shadow:none!important; filter:none!important; isolation:auto!important; } .tasbeehOverlay::before, .tasbeehOverlay::after, .tasbeehModal::before, .tasbeehModal::after, .tasbeehOnlyButtonCounterStage291::before, .tasbeehOnlyButtonCounterStage291::after{ display:none!important; content:none!important; background:none!important; box-shadow:none!important; filter:none!important; } .tasbeehOverlay .tasbeehModal, .tasbeehOverlay.open .tasbeehModal, .tasbeehOnlyButtonCounterStage291{ background:transparent!important; background-color:transparent!important; background-image:none!important; border:0!important; outline:0!important; box-shadow:none!important; filter:none!important; backdrop-filter:none!important; -webkit-backdrop-filter:none!important; } /* العنصر المرئي الوحيد هو مربع العدّاد نفسه، بلون الصفحة الحالي. */ .tasbeehOnlyBigBtnStage291, .tasbeehOnlyBigBtnStage291:hover, .tasbeehOnlyBigBtnStage291:focus, .tasbeehOnlyBigBtnStage291:focus-visible, .tasbeehOnlyBigBtnStage291:active, .tasbeehOverlay.open .tasbeehOnlyBigBtnStage291{ background:var(--tasbeeh-host-bg)!important; background-color:var(--tasbeeh-host-bg)!important; background-image:none!important; border:2px solid var(--tasbeeh-host-accent)!important; outline:0!important; box-shadow:none!important; filter:none!important; backdrop-filter:none!important; -webkit-backdrop-filter:none!important; text-shadow:none!important; transform:none!important; opacity:1!important; background-clip:padding-box!important; contain:paint!important; } .tasbeehOnlyBigBtnStage291::before, .tasbeehOnlyBigBtnStage291::after, .tasbeehOnlyBigBtnStage291:hover::before, .tasbeehOnlyBigBtnStage291:hover::after, .tasbeehOnlyBigBtnStage291:focus::before, .tasbeehOnlyBigBtnStage291:focus::after, .tasbeehOnlyBigBtnStage291:active::before, .tasbeehOnlyBigBtnStage291:active::after{ display:none!important; content:none!important; background:none!important; border:0!important; box-shadow:none!important; filter:none!important; } /* لا ظل خارجي ولا حلقة بيضاء للزر العائم أو شارة العدد. */ .tasbeehFloatBtn, .tasbeehFloatBtn:hover, .tasbeehFloatBtn:focus, .tasbeehFloatBtn:focus-visible, .tasbeehFloatBtn:active, .tasbeehFloatBtn.dragging{ box-shadow:none!important; filter:none!important; outline:0!important; -webkit-tap-highlight-color:transparent!important; } .tasbeehIcon{ filter:none!important; text-shadow:none!important; } .tasbeehBadge{ box-shadow:none!important; text-shadow:none!important; } /* Stage335: تثبيت زر المسبحة داخل الهدر بين التنبيهات ولوحة الثيم. */ .globalTopbar .topbarLeft.appLeftControls > #tasbeehFloatBtn.tasbeehHeaderBtn{ position:relative!important; inset:auto!important; transform:none!important; flex:0 0 auto!important; display:inline-grid!important; place-items:center!important; width:34px!important; height:34px!important; min-width:34px!important; min-height:34px!important; margin:0!important; padding:0!important; border:0!important; border-radius:999px!important; background:transparent!important; background-color:transparent!important; background-image:none!important; color:#fff!important; box-shadow:none!important; filter:none!important; cursor:pointer!important; touch-action:manipulation!important; user-select:none!important; } .globalTopbar .topbarLeft.appLeftControls > #tasbeehFloatBtn.tasbeehHeaderBtn:hover, .globalTopbar .topbarLeft.appLeftControls > #tasbeehFloatBtn.tasbeehHeaderBtn:focus, .globalTopbar .topbarLeft.appLeftControls > #tasbeehFloatBtn.tasbeehHeaderBtn:focus-visible, .globalTopbar .topbarLeft.appLeftControls > #tasbeehFloatBtn.tasbeehHeaderBtn:active{ position:relative!important; inset:auto!important; transform:none!important; border:0!important; background:transparent!important; background-color:transparent!important; background-image:none!important; box-shadow:none!important; filter:none!important; outline:0!important; } .globalTopbar #tasbeehFloatBtn.tasbeehHeaderBtn .tasbeehIcon{ display:block!important; font-size:25px!important; line-height:1!important; filter:none!important; text-shadow:none!important; } .globalTopbar #tasbeehFloatBtn.tasbeehHeaderBtn .tasbeehBadge{ top:-4px!important; left:-5px!important; width:18px!important; height:18px!important; min-width:18px!important; max-width:18px!important; min-height:18px!important; border-width:1.5px!important; font-size:10px!important; line-height:1!important; } @media(max-width:560px){ .globalTopbar .topbarLeft.appLeftControls > #tasbeehFloatBtn.tasbeehHeaderBtn{ width:30px!important; height:30px!important; min-width:30px!important; min-height:30px!important; } .globalTopbar #tasbeehFloatBtn.tasbeehHeaderBtn .tasbeehIcon{font-size:22px!important;} .globalTopbar #tasbeehFloatBtn.tasbeehHeaderBtn .tasbeehBadge{ top:-4px!important; left:-4px!important; width:17px!important; height:17px!important; min-width:17px!important; max-width:17px!important; min-height:17px!important; font-size:9px!important; } } /* v278 — تحسين مربع التسبيح: عداد كبير، صوت سريع، تخطي، وقائمة الورد */ .tasbeehOnlyBigBtnStage291{ flex-direction:column!important; gap:10px!important; padding-top:108px!important; padding-bottom:82px!important; } .tasbeehPrimaryCountStage278{ display:flex!important; align-items:baseline!important; justify-content:center!important; gap:8px!important; width:min(92%,420px)!important; margin:4px auto 0!important; color:var(--tasbeeh-host-accent)!important; -webkit-text-fill-color:var(--tasbeeh-host-accent)!important; font-weight:1000!important; line-height:1!important; direction:ltr!important; pointer-events:none!important; } .tasbeehPrimaryCountStage278 b{ font-size:clamp(56px,11vw,86px)!important; line-height:.95!important; font-weight:1000!important; color:var(--tasbeeh-host-accent)!important; -webkit-text-fill-color:var(--tasbeeh-host-accent)!important; } .tasbeehPrimaryCountStage278 small{ font-size:clamp(20px,4.4vw,31px)!important; line-height:1!important; font-weight:1000!important; color:var(--tasbeeh-host-muted)!important; -webkit-text-fill-color:var(--tasbeeh-host-muted)!important; } .tasbeehQuickSoundStage278{ position:absolute!important; top:58px!important; left:50%!important; transform:translateX(-50%)!important; z-index:8!important; display:flex!important; align-items:center!important; justify-content:center!important; gap:7px!important; max-width:calc(100% - 116px)!important; min-height:36px!important; padding:4px 8px!important; border:1px solid var(--tasbeeh-host-border)!important; border-radius:14px!important; background:var(--tasbeeh-host-bg-soft)!important; color:var(--tasbeeh-host-text)!important; -webkit-text-fill-color:var(--tasbeeh-host-text)!important; font-size:12px!important; font-weight:1000!important; cursor:default!important; } .tasbeehQuickSoundStage278 > span:first-child{ white-space:nowrap!important; pointer-events:none!important; } .tasbeehQuickSoundStage278 select{ min-width:96px!important; max-width:142px!important; height:28px!important; padding:1px 6px!important; border:1px solid var(--tasbeeh-host-border)!important; border-radius:9px!important; background:var(--tasbeeh-host-bg)!important; color:var(--tasbeeh-host-text)!important; -webkit-text-fill-color:var(--tasbeeh-host-text)!important; font:inherit!important; font-size:12px!important; font-weight:900!important; outline:0!important; cursor:pointer!important; } .tasbeehQuickSoundToggleStage278{ display:flex!important; align-items:center!important; justify-content:center!important; width:30px!important; height:28px!important; border:1px solid var(--tasbeeh-host-border)!important; border-radius:9px!important; background:var(--tasbeeh-host-bg)!important; color:var(--tasbeeh-host-text)!important; -webkit-text-fill-color:var(--tasbeeh-host-text)!important; font-size:16px!important; cursor:pointer!important; user-select:none!important; } .tasbeehQuickSoundToggleStage278.muted{opacity:.72!important} .tasbeehInsideNavStage291{ grid-template-columns:repeat(3,minmax(0,1fr))!important; } .tasbeehInsideNavStage291 .tasbeehSkipBtnStage278{ background:color-mix(in srgb,var(--tasbeeh-host-bg) 78%,var(--tasbeeh-host-accent) 22%)!important; border-color:var(--tasbeeh-host-accent)!important; color:var(--tasbeeh-host-text)!important; -webkit-text-fill-color:var(--tasbeeh-host-text)!important; } .tasbeehWirdPartsStage278{ display:flex!important; flex-direction:column!important; align-items:stretch!important; justify-content:flex-start!important; gap:3px!important; width:min(94%,520px)!important; max-height:min(35vh,260px)!important; overflow:auto!important; margin:0 auto!important; padding:6px!important; border:1px solid var(--tasbeeh-host-border)!important; border-radius:18px!important; background:color-mix(in srgb,var(--tasbeeh-host-bg-soft) 84%,transparent)!important; scrollbar-width:thin!important; } .tasbeehWirdPartsStage278[hidden]{display:none!important} .tasbeehWirdPartStage278{ display:grid!important; grid-template-columns:24px minmax(0,1fr)!important; align-items:center!important; gap:6px!important; min-height:24px!important; padding:2px 7px!important; border-radius:9px!important; color:var(--tasbeeh-host-muted)!important; -webkit-text-fill-color:var(--tasbeeh-host-muted)!important; font-size:12px!important; line-height:1.3!important; text-align:right!important; } .tasbeehWirdPartStage278 i{ display:flex!important; align-items:center!important; justify-content:center!important; width:22px!important; height:22px!important; border-radius:999px!important; background:var(--tasbeeh-host-bg)!important; border:1px solid var(--tasbeeh-host-border)!important; color:var(--tasbeeh-host-muted)!important; -webkit-text-fill-color:var(--tasbeeh-host-muted)!important; font-size:10px!important; font-style:normal!important; font-weight:1000!important; } .tasbeehWirdPartStage278 b{ color:inherit!important; -webkit-text-fill-color:inherit!important; font:inherit!important; font-weight:900!important; } .tasbeehWirdPartStage278.done{opacity:.58!important} .tasbeehWirdPartStage278.current{ grid-template-columns:34px minmax(0,1fr)!important; min-height:48px!important; padding:8px 10px!important; border:2px solid var(--tasbeeh-host-accent)!important; background:var(--tasbeeh-host-bg)!important; color:var(--tasbeeh-host-text)!important; -webkit-text-fill-color:var(--tasbeeh-host-text)!important; font-size:clamp(24px,5.8vw,36px)!important; line-height:1.35!important; font-weight:1000!important; opacity:1!important; } .tasbeehWirdPartStage278.current i{ width:30px!important; height:30px!important; border-color:var(--tasbeeh-host-accent)!important; color:var(--tasbeeh-host-accent)!important; -webkit-text-fill-color:var(--tasbeeh-host-accent)!important; font-size:13px!important; } .tasbeehOnlyBigBtnStage291.hasWirdPartsStage278:not(.isOrderedWirdCueStage297) .tasbeehButtonMainTextStage291{ display:none!important; } @media(max-width:720px){ .tasbeehOnlyBigBtnStage291{ padding-top:104px!important; padding-bottom:78px!important; } .tasbeehQuickSoundStage278{ top:54px!important; max-width:calc(100% - 92px)!important; gap:5px!important; padding:3px 6px!important; } .tasbeehQuickSoundStage278 > span:first-child{display:none!important} .tasbeehQuickSoundStage278 select{ min-width:96px!important; max-width:120px!important; } .tasbeehPrimaryCountStage278 b{font-size:clamp(52px,16vw,76px)!important} .tasbeehPrimaryCountStage278 small{font-size:clamp(18px,6vw,26px)!important} .tasbeehWirdPartsStage278{ width:96%!important; max-height:min(38vh,285px)!important; } .tasbeehWirdPartStage278.current{font-size:clamp(22px,7vw,32px)!important} .tasbeehInsideNavStage291{grid-template-columns:repeat(3,minmax(0,1fr))!important} .tasbeehInsideNavStage291 span{ min-width:0!important; padding-inline:4px!important; } } /* v279 — ترتيب نافذة التسبيح: عداد كبير أعلى النص، عدد التسبيحات أسفل المربع، وقائمة نغمات مخفية */ .tasbeehOnlyBigBtnStage291{ padding-top:158px!important; padding-bottom:118px!important; gap:10px!important; } .tasbeehDayTitleStage186{ max-width:calc(100% - 176px)!important; } .tasbeehSoundMenuToggleStage279{ position:absolute!important; top:14px!important; inset-inline-end:58px!important; width:38px!important; height:38px!important; border-radius:999px!important; display:flex!important; align-items:center!important; justify-content:center!important; z-index:16!important; background:color-mix(in srgb,var(--tasbeeh-host-bg-soft) 86%,transparent)!important; border:1px solid var(--tasbeeh-host-border)!important; color:var(--tasbeeh-host-text)!important; -webkit-text-fill-color:var(--tasbeeh-host-text)!important; font-size:27px!important; font-weight:1000!important; line-height:1!important; cursor:pointer!important; user-select:none!important; box-shadow:none!important; transform:none!important; transition:transform .16s ease, border-color .16s ease!important; } .tasbeehSoundMenuToggleStage279.open{ transform:none!important; border-color:var(--tasbeeh-host-accent)!important; } .tasbeehSoundMenuToggleStage279:focus, .tasbeehSoundMenuToggleStage279:active{ outline:0!important; box-shadow:none!important; border-color:var(--tasbeeh-host-accent)!important; } .tasbeehPrimaryCountStage278{ position:absolute!important; top:58px!important; left:50%!important; transform:translateX(-50%)!important; z-index:7!important; width:min(88%,460px)!important; margin:0!important; gap:10px!important; } .tasbeehPrimaryCountStage278 b{ font-size:clamp(72px,14vw,108px)!important; line-height:.84!important; } .tasbeehPrimaryCountStage278 small{ font-size:clamp(22px,4.8vw,34px)!important; } .tasbeehQuickSoundPanelStage279{ position:absolute!important; top:58px!important; inset-inline-end:14px!important; left:auto!important; transform:none!important; z-index:22!important; display:flex!important; max-width:min(88%,250px)!important; min-height:38px!important; margin:0!important; box-shadow:0 10px 28px rgba(0,0,0,.18)!important; } .tasbeehQuickSoundPanelStage279[hidden]{ display:none!important; } .tasbeehNotificationLineStage300{ top:auto!important; left:50%!important; bottom:78px!important; transform:translateX(-50%)!important; z-index:8!important; max-width:72%!important; min-height:26px!important; padding:3px 13px!important; font-size:12px!important; white-space:nowrap!important; } .tasbeehButtonMainTextStage291{ max-height:calc(100% - 230px)!important; } .tasbeehWirdPartsStage278{ max-height:min(31vh,235px)!important; } @media(max-width:720px){ .tasbeehOnlyBigBtnStage291{ padding-top:146px!important; padding-bottom:102px!important; } .tasbeehDayTitleStage186{ max-width:calc(100% - 160px)!important; } .tasbeehSoundMenuToggleStage279{ top:13px!important; inset-inline-end:52px!important; width:34px!important; height:34px!important; font-size:24px!important; } .tasbeehPrimaryCountStage278{ top:54px!important; width:90%!important; } .tasbeehPrimaryCountStage278 b{ font-size:clamp(68px,21vw,96px)!important; } .tasbeehPrimaryCountStage278 small{ font-size:clamp(20px,6vw,28px)!important; } .tasbeehQuickSoundPanelStage279{ top:54px!important; inset-inline-end:10px!important; max-width:min(86%,224px)!important; gap:5px!important; padding:4px 6px!important; } .tasbeehQuickSoundPanelStage279 > span:first-child{display:none!important} .tasbeehNotificationLineStage300{ bottom:67px!important; max-width:76%!important; font-size:11px!important; padding:2px 9px!important; } .tasbeehWirdPartsStage278{ max-height:min(30vh,230px)!important; } } /* v280 — توضيح عدد تكرار التسبيح الحالي وإغلاق قائمة النغمات تلقائيًا */ .tasbeehSoundMenuToggleStage279{ font-family:system-ui,-apple-system,"Segoe UI",sans-serif!important; font-size:24px!important; } .tasbeehNotificationLineStage300{ font-weight:1000!important; } /* v281 — العداد العلوي رقم فقط، وقائمة النغمات تظهر في المنتصف */ .tasbeehPrimaryCountStage278{ gap:0!important; } .tasbeehPrimaryCountStage278 small{ display:none!important; } .tasbeehQuickSoundPanelStage279{ top:158px!important; left:50%!important; right:auto!important; inset-inline-start:auto!important; inset-inline-end:auto!important; transform:translateX(-50%)!important; width:max-content!important; max-width:min(88%,280px)!important; justify-content:center!important; } @media(max-width:720px){ .tasbeehQuickSoundPanelStage279{ top:148px!important; left:50%!important; right:auto!important; inset-inline-start:auto!important; inset-inline-end:auto!important; transform:translateX(-50%)!important; max-width:min(90%,250px)!important; } } /* v283 — الورد المرتب كأسطوانة منحنية: عنصران سابقان، الحالي، وعنصران تاليان فقط */ .tasbeehWirdPartsStage278.tasbeehWirdCylinderStage283{ position:relative!important; display:block!important; width:min(94%,520px)!important; height:286px!important; max-height:none!important; overflow:hidden!important; margin:2px auto 4px!important; padding:0!important; border-radius:32px!important; border:1px solid color-mix(in srgb,var(--tasbeeh-host-border) 78%,var(--tasbeeh-host-accent) 22%)!important; background: linear-gradient(90deg, color-mix(in srgb,var(--tasbeeh-host-bg) 72%,var(--tasbeeh-host-bg-soft) 28%) 0%, color-mix(in srgb,var(--tasbeeh-host-bg) 88%,var(--tasbeeh-host-bg-soft) 12%) 13%, color-mix(in srgb,var(--tasbeeh-host-bg) 96%,var(--tasbeeh-host-bg-soft) 4%) 50%, color-mix(in srgb,var(--tasbeeh-host-bg) 88%,var(--tasbeeh-host-bg-soft) 12%) 87%, color-mix(in srgb,var(--tasbeeh-host-bg) 72%,var(--tasbeeh-host-bg-soft) 28%) 100%), linear-gradient(180deg, color-mix(in srgb,var(--tasbeeh-host-bg-soft) 42%,transparent), transparent 26%, transparent 74%, color-mix(in srgb,var(--tasbeeh-host-bg-soft) 34%,transparent))!important; box-shadow: inset 34px 0 42px color-mix(in srgb,var(--tasbeeh-host-text) 6%,transparent), inset -34px 0 42px color-mix(in srgb,var(--tasbeeh-host-text) 6%,transparent), inset 0 18px 28px color-mix(in srgb,var(--tasbeeh-host-bg-soft) 22%,transparent), inset 0 -18px 28px color-mix(in srgb,var(--tasbeeh-host-bg-soft) 18%,transparent)!important; perspective:700px!important; scrollbar-width:none!important; isolation:isolate!important; } .tasbeehWirdPartsStage278.tasbeehWirdCylinderStage283::-webkit-scrollbar{display:none!important} /* حافتا الأسطوانة العلوية والسفلية تعطيان انطباع السطح المنحني دون تحويلها إلى كرة. */ .tasbeehWirdCylinderStage283::before, .tasbeehWirdCylinderStage283::after{ content:""!important; position:absolute!important; left:6%!important; right:6%!important; height:30px!important; z-index:1!important; pointer-events:none!important; border-radius:50%!important; } .tasbeehWirdCylinderStage283::before{ top:-17px!important; border-bottom:1px solid color-mix(in srgb,var(--tasbeeh-host-accent) 26%,var(--tasbeeh-host-border) 74%)!important; box-shadow:0 8px 20px color-mix(in srgb,var(--tasbeeh-host-bg-soft) 20%,transparent)!important; } .tasbeehWirdCylinderStage283::after{ bottom:-17px!important; border-top:1px solid color-mix(in srgb,var(--tasbeeh-host-accent) 22%,var(--tasbeeh-host-border) 78%)!important; box-shadow:0 -8px 20px color-mix(in srgb,var(--tasbeeh-host-bg-soft) 18%,transparent)!important; } .tasbeehWirdCylinderStage283 .tasbeehWirdPartStage278{ position:absolute!important; left:50%!important; top:50%!important; z-index:2!important; display:block!important; width:82%!important; min-height:0!important; padding:2px 8px!important; margin:0!important; border:0!important; border-radius:0!important; background:transparent!important; color:var(--tasbeeh-host-text)!important; -webkit-text-fill-color:var(--tasbeeh-host-text)!important; text-align:center!important; line-height:1.35!important; white-space:normal!important; overflow:visible!important; pointer-events:none!important; transform-origin:50% 50%!important; backface-visibility:hidden!important; transition: top .42s cubic-bezier(.22,.78,.2,1), transform .42s cubic-bezier(.22,.78,.2,1), opacity .38s ease, filter .38s ease, font-size .42s cubic-bezier(.22,.78,.2,1)!important; } .tasbeehWirdCylinderStage283 .tasbeehWirdPartStage278 b{ display:block!important; color:inherit!important; -webkit-text-fill-color:inherit!important; font:inherit!important; font-weight:1000!important; text-align:center!important; } .tasbeehWirdCylinderStage283 .tasbeehWirdPartStage278 i{display:none!important} .tasbeehWirdCylinderStage283 .tasbeehWirdFaceStage282{ top:50%!important; width:88%!important; z-index:7!important; opacity:1!important; filter:none!important; transform:translate(-50%,-50%) translateZ(38px) scale(1)!important; font-size:clamp(29px,6.2vw,43px)!important; line-height:1.42!important; color:var(--tasbeeh-host-text)!important; -webkit-text-fill-color:var(--tasbeeh-host-text)!important; text-shadow:0 1px 0 color-mix(in srgb,var(--tasbeeh-host-bg) 75%,transparent)!important; } .tasbeehWirdCylinderStage283 .tasbeehWirdPrev1Stage282, .tasbeehWirdCylinderStage283 .tasbeehWirdNext1Stage282{ width:77%!important; z-index:5!important; opacity:.58!important; filter:saturate(.72)!important; font-size:clamp(15px,3.3vw,20px)!important; color:var(--tasbeeh-host-muted)!important; -webkit-text-fill-color:var(--tasbeeh-host-muted)!important; } .tasbeehWirdCylinderStage283 .tasbeehWirdPrev1Stage282{ top:27%!important; transform:translate(-50%,-50%) translateZ(-18px) rotateX(-31deg) scale(.88)!important; } .tasbeehWirdCylinderStage283 .tasbeehWirdNext1Stage282{ top:73%!important; transform:translate(-50%,-50%) translateZ(-18px) rotateX(31deg) scale(.88)!important; } .tasbeehWirdCylinderStage283 .tasbeehWirdPrev2Stage282, .tasbeehWirdCylinderStage283 .tasbeehWirdNext2Stage282{ width:69%!important; z-index:3!important; opacity:.27!important; filter:saturate(.45) blur(.15px)!important; font-size:clamp(11px,2.7vw,15px)!important; color:var(--tasbeeh-host-muted)!important; -webkit-text-fill-color:var(--tasbeeh-host-muted)!important; } .tasbeehWirdCylinderStage283 .tasbeehWirdPrev2Stage282{ top:9%!important; transform:translate(-50%,-50%) translateZ(-48px) rotateX(-53deg) scale(.72)!important; } .tasbeehWirdCylinderStage283 .tasbeehWirdNext2Stage282{ top:91%!important; transform:translate(-50%,-50%) translateZ(-48px) rotateX(53deg) scale(.72)!important; } .tasbeehWirdCylinderStage283 .tasbeehWirdFarStage282{ top:50%!important; opacity:0!important; filter:blur(1px)!important; transform:translate(-50%,-50%) translateZ(-90px) scale(.48)!important; font-size:10px!important; visibility:hidden!important; } .tasbeehWirdCylinderStage283 .tasbeehWirdPartStage278.done:not(.tasbeehWirdFaceStage282){ text-decoration:none!important; } /* رسالة الانتقال مستقلة وبارزة فوق الأسطوانة، بدل تلوين مربع التسبيح كله. */ .tasbeehTransitionCueStage283{ position:absolute!important; top:151px!important; left:50%!important; transform:translateX(-50%)!important; z-index:16!important; display:flex!important; align-items:center!important; justify-content:center!important; width:max-content!important; max-width:min(86%,390px)!important; min-height:36px!important; padding:6px 16px!important; border-radius:15px!important; border:2px solid color-mix(in srgb,var(--tasbeeh-host-accent) 76%,white 24%)!important; background:var(--tasbeeh-host-accent)!important; color:var(--tasbeeh-host-bg)!important; -webkit-text-fill-color:var(--tasbeeh-host-bg)!important; box-shadow:0 8px 24px color-mix(in srgb,var(--tasbeeh-host-accent) 38%,transparent)!important; font-size:clamp(14px,3.3vw,18px)!important; font-weight:1000!important; line-height:1.35!important; text-align:center!important; pointer-events:none!important; } .tasbeehTransitionCueStage283[hidden]{display:none!important} /* في الورد، النص الحالي موجود على واجهة الأسطوانة؛ لا نكرر رسالة الانتقال كنص كبير آخر. */ .tasbeehOnlyBigBtnStage291.hasWirdPartsStage278 .tasbeehButtonMainTextStage291{ display:none!important; } /* ألغِ الخلفية الحمراء العامة القديمة لحالة الانتقال: البروز أصبح في مربع الرسالة فقط. */ .tasbeehOnlyBigBtnStage291.isOrderedWirdCueStage297, .tasbeehOnlyBigBtnStage291.isOrderedWirdCueStage297:focus, .tasbeehOnlyBigBtnStage291.isOrderedWirdCueStage297:active{ color:var(--tasbeeh-host-text)!important; -webkit-text-fill-color:var(--tasbeeh-host-text)!important; border-color:var(--tasbeeh-host-accent)!important; background:var(--tasbeeh-host-bg)!important; background-image:linear-gradient(145deg,color-mix(in srgb,var(--tasbeeh-host-bg) 92%,var(--tasbeeh-host-bg-soft) 8%),var(--tasbeeh-host-bg))!important; box-shadow:0 22px 58px rgba(0,0,0,.24),inset 0 0 0 8px var(--tasbeeh-host-glow)!important; } /* امنح الأسطوانة مساحة كافية داخل مربع العد، مع إبقاء العداد أعلى والعدد المطلوب فوق أزرار التنقل. */ .tasbeehOnlyBigBtnStage291.hasWirdPartsStage278{ min-height:500px!important; padding-top:188px!important; padding-bottom:112px!important; } .tasbeehOnlyBigBtnStage291.hasWirdPartsStage278 .tasbeehWirdCylinderStage283{ flex:0 0 286px!important; } @media(max-width:720px){ .tasbeehWirdPartsStage278.tasbeehWirdCylinderStage283{ width:97%!important; height:268px!important; border-radius:28px!important; } .tasbeehOnlyBigBtnStage291.hasWirdPartsStage278{ min-height:620px!important; max-height:82vh!important; padding-top:178px!important; padding-bottom:100px!important; } .tasbeehOnlyBigBtnStage291.hasWirdPartsStage278 .tasbeehWirdCylinderStage283{ flex-basis:268px!important; } .tasbeehTransitionCueStage283{ top:143px!important; max-width:84%!important; min-height:34px!important; padding:5px 12px!important; } .tasbeehWirdCylinderStage283 .tasbeehWirdFaceStage282{ font-size:clamp(28px,9vw,39px)!important; } .tasbeehWirdCylinderStage283 .tasbeehWirdPrev1Stage282, .tasbeehWirdCylinderStage283 .tasbeehWirdNext1Stage282{ font-size:clamp(14px,4.4vw,19px)!important; } .tasbeehWirdCylinderStage283 .tasbeehWirdPrev2Stage282, .tasbeehWirdCylinderStage283 .tasbeehWirdNext2Stage282{ font-size:clamp(10px,3.4vw,14px)!important; } } @media(prefers-reduced-motion:reduce){ .tasbeehWirdCylinderStage283 .tasbeehWirdPartStage278{transition:none!important} } /* Stage308 — standalone Tasbeeh page shares popup order/edit controls and tone state. */ .tasbeehPageItemToolsStage308{ width:46px; flex:0 0 46px; display:grid; grid-template-columns:1fr 1fr; gap:4px; align-content:center; } .tasbeehPageItemToolsStage308 button{ min-width:0; min-height:30px; border:1px solid var(--line,rgba(15,122,58,.18)); border-radius:10px; background:var(--panelBg,#fff); color:var(--green,#0f7a3a); font-weight:1000; cursor:pointer; padding:3px; } .tasbeehPageItemToolsStage308 .tasbeehPageEditStage308{ grid-column:1/-1; font-size:11px; } .tasbeehPageItemToolsStage308 .tasbeehPageDelete{ grid-column:1/-1; width:100%; min-height:30px; font-size:20px; background:#d40022; color:#fff; border-color:#d40022; } .tasbeehPageEditActionsStage308{ display:flex; gap:8px; align-items:center; } .tasbeehPageEditActionsStage308 #tasbeehPageAddBtn{flex:1} #tasbeehPageEditCancel{ border:1px solid var(--line,rgba(15,122,58,.18)); border-radius:16px; padding:12px 14px; background:var(--panelBg,#fff); color:var(--text,#17351f); font-weight:1000; cursor:pointer; } #tasbeehPageEditCancel[hidden]{display:none!important} body[data-theme="dark"] .tasbeehPageItemToolsStage308 button, body[data-theme="dark"] #tasbeehPageEditCancel{ background:var(--panelBg,#0b1a10); color:var(--text,#e8f1ea); border-color:var(--line,rgba(232,241,234,.12)); } body[data-theme="dark"] .tasbeehPageItemToolsStage308 .tasbeehPageDelete{color:#fff} @media(max-width:640px){ .tasbeehPageChoiceWrap{align-items:stretch} .tasbeehPageItemToolsStage308{width:42px;flex-basis:42px} } /* Stage310 — إبراز عدد الهدف أسفل مربع التسبيح */ .tasbeehNotificationLineStage300{ min-height:42px!important; padding:5px 16px!important; display:flex!important; align-items:center!important; justify-content:center!important; gap:9px!important; font-size:15px!important; line-height:1.1!important; font-weight:900!important; white-space:nowrap!important; border-width:2px!important; } .tasbeehNotificationLineStage300 > span{ font-size:15px!important; font-weight:900!important; } .tasbeehNotificationLineStage300 > b{ display:inline-flex!important; align-items:center!important; justify-content:center!important; min-width:52px!important; min-height:32px!important; padding:1px 9px!important; border-radius:999px!important; font-size:26px!important; line-height:1!important; font-weight:1000!important; color:var(--tasbeeh-host-text)!important; -webkit-text-fill-color:var(--tasbeeh-host-text)!important; background:color-mix(in srgb,var(--tasbeeh-host-accent) 22%,var(--tasbeeh-host-bg) 78%)!important; border:1px solid var(--tasbeeh-host-accent)!important; } @media(max-width:720px){ .tasbeehNotificationLineStage300{ min-height:38px!important; padding:4px 12px!important; gap:7px!important; font-size:14px!important; max-width:86%!important; } .tasbeehNotificationLineStage300 > span{font-size:14px!important} .tasbeehNotificationLineStage300 > b{ min-width:46px!important; min-height:29px!important; font-size:23px!important; } } /* Stage311: intelligent contrast for day/night table subtitle */ #dnhTableSubtitle{ color:var(--smart-muted,var(--muted,#5f5147)) !important; -webkit-text-fill-color:var(--smart-muted,var(--muted,#5f5147)) !important; opacity:1 !important; font-weight:900 !important; text-wrap:balance; } /* The card backgrounds are mode-specific, so the subtitle gets a guaranteed high-contrast foreground while still following the page's smart typography. */ .dnhTableCard.nightMode #dnhTableSubtitle, body[data-theme="light"] .dnhTableCard.nightMode #dnhTableSubtitle, body[data-theme="dark"] .dnhTableCard.nightMode #dnhTableSubtitle{ color:#f8fafc !important; -webkit-text-fill-color:#f8fafc !important; text-shadow:0 1px 2px rgba(0,0,0,.72) !important; } .dnhTableCard.dayMode #dnhTableSubtitle, body[data-theme="light"] .dnhTableCard.dayMode #dnhTableSubtitle, body[data-theme="dark"] .dnhTableCard.dayMode #dnhTableSubtitle{ color:#284734 !important; -webkit-text-fill-color:#284734 !important; text-shadow:0 1px 0 rgba(255,255,255,.72) !important; } @media(max-width:760px){ #dnhTableSubtitle{ max-width:100% !important; margin-inline:auto !important; padding-inline:4px !important; line-height:1.5 !important; overflow-wrap:anywhere !important; } } /* Stage317 — private pending guestbook entries + inline moderation */ .guestbookPrivateSection{ border:2px solid rgba(216,164,32,.58)!important; background:linear-gradient(135deg,rgba(216,164,32,.10),var(--panelBg))!important; } .guestbookPrivateHint{ margin:0 0 12px; color:var(--muted); font-weight:900; line-height:1.7; } .guestbookPendingEntry{ position:relative; border:2px solid rgba(216,164,32,.72)!important; background:rgba(216,164,32,.09)!important; box-shadow:0 10px 26px rgba(138,74,0,.08); } .guestbookPendingBadge{ display:inline-flex; align-items:center; justify-content:center; margin-top:9px; padding:6px 11px; border-radius:999px; background:#d8a420; color:#2d2100!important; font-size:14px; font-weight:1000; } .guestbookPendingReply small{ display:block; margin-top:6px; color:var(--muted); font-weight:850; line-height:1.6; } .guestbookInlineAdmin{ margin-top:12px; padding-top:12px; border-top:1px solid rgba(216,164,32,.40); display:grid; gap:8px; } .guestbookInlineAdmin label{ font-weight:1000; } .guestbookInlineAdmin textarea{ width:100%; min-height:92px; resize:vertical; border:1px solid var(--line); border-radius:14px; padding:10px 12px; background:var(--card); color:var(--text); font:inherit; line-height:1.7; } .guestbookInlineAdminBtns{ display:flex; flex-wrap:wrap; gap:8px; } .guestbookInlineAdminBtns button{ border:1px solid var(--line); border-radius:999px; padding:9px 14px; background:var(--card); color:var(--text); font:inherit; font-weight:1000; cursor:pointer; } .guestbookInlineAdminBtns .approve{ background:var(--green); border-color:var(--green); color:#fff!important; } .guestbookInlineAdminBtns .danger{ background:#c62828; border-color:#c62828; color:#fff!important; } body[data-theme="dark"] .guestbookPrivateSection{ background:linear-gradient(135deg,rgba(216,164,32,.16),var(--panelBg))!important; border-color:rgba(255,214,117,.48)!important; } body[data-theme="dark"] .guestbookPendingEntry{ background:rgba(216,164,32,.13)!important; border-color:rgba(255,214,117,.54)!important; } @media(max-width:700px){ .guestbookInlineAdminBtns{ display:grid; grid-template-columns:1fr 1fr; } .guestbookInlineAdminBtns button{ min-height:44px; width:100%; } } @media(max-width:420px){ .guestbookInlineAdminBtns{grid-template-columns:1fr;} } /* v732: let touch scrolling reach the page root from the full-height home body. Keep the root pull-to-refresh boundary and real modal locks unchanged. */ @media(pointer:coarse){ body.fath-home-page:not(.moonDockModalOpen):not(.jafarDailyModalOpen){ overscroll-behavior-y:auto; } }