/* Global header single-source styling - stage21 */ :root{--header-title-font:"Aref Ruqaa","Diwani Letter","Arabic Typesetting","Traditional Arabic",serif;} .globalTopbar{position:sticky!important;top:0!important;z-index:80!important;padding:12px 0!important;background:transparent!important;backdrop-filter:none!important;} .globalTopbar .pageW{width:min(1080px, calc(100% - 24px))!important;margin-inline:auto!important;} .globalTopbar .topbarCard{max-width:none!important;margin:0!important;padding:8px 12px!important;border-radius:18px!important;border:1px solid rgba(255,255,255,.14)!important;background:linear-gradient(90deg,var(--green,#0f7a3a),var(--green2,#16a34a))!important;color:#fff!important;box-shadow:0 10px 20px rgba(15,122,58,.20)!important;} .globalTopbar .globalHeaderGrid{display:grid!important;grid-template-columns:auto minmax(80px,1fr) auto!important;grid-template-areas:"left title menu"!important;direction:ltr!important;align-items:center!important;gap:10px!important;min-height:36px!important;padding:0!important;} .globalTopbar .appLeftControls{grid-area:left!important;justify-self:start!important;direction:rtl!important;display:flex!important;align-items:center!important;justify-content:flex-start!important;gap:8px!important;min-width:0!important;flex-wrap:nowrap!important;} .globalTopbar .topTitleOnly{grid-area:title!important;justify-self:center!important;direction:rtl!important;text-align:center!important;color:#fff!important;background:linear-gradient(180deg,rgba(255,255,255,.22),rgba(255,255,255,.09))!important;border:1px solid rgba(255,255,255,.28)!important;border-radius:999px!important;padding:6px 20px 8px!important;font-family:var(--header-title-font)!important;font-size:22px!important;font-weight:900!important;letter-spacing:.2px!important;line-height:1.05!important;text-shadow:0 2px 8px rgba(0,0,0,.22)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 6px 16px rgba(0,0,0,.08)!important;max-width:100%!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important;} .globalTopbar .calendarMenu{grid-area:menu!important;justify-self:end!important;direction:rtl!important;width:auto!important;display:flex!important;align-items:center!important;justify-content:flex-end!important;position:relative!important;z-index:90!important;} .globalTopbar .hamburgerBtn{width:40px!important;height:40px!important;border:1px solid rgba(255,255,255,.22)!important;border-radius:15px!important;background:rgba(255,255,255,.16)!important;color:#fff!important;font-size:25px!important;font-weight:1000!important;line-height:1!important;cursor:pointer!important;box-shadow:none!important;} .globalTopbar .pageMenuList{position:absolute!important;top:calc(100% + 6px)!important;right:0!important;min-width:220px!important;display:grid!important;gap:8px!important;padding:10px!important;border-radius:22px!important;background:rgba(255,255,255,.98)!important;border:1px solid rgba(15,122,58,.18)!important;box-shadow:0 24px 60px rgba(0,0,0,.18)!important;opacity:0!important;visibility:hidden!important;pointer-events:none!important;transform:translateY(-6px)!important;transition:opacity .18s ease,transform .18s ease,visibility 0s linear .35s!important;} .globalTopbar .calendarMenu::after{content:""!important;position:absolute!important;right:0!important;top:100%!important;width:230px!important;height:14px!important;display:block!important;} .globalTopbar .menuHover:hover .pageMenuList,.globalTopbar .menuHover:focus-within .pageMenuList,.globalTopbar .menuHover.menuOpen .pageMenuList{opacity:1!important;visibility:visible!important;pointer-events:auto!important;transform:translateY(0)!important;transition-delay:0s!important;} .globalTopbar .pageMenuList a{text-decoration:none!important;color:#163821!important;padding:13px 14px!important;border-radius:15px!important;font-weight:950!important;background:rgba(15,122,58,.055)!important;text-align:right!important;} .globalTopbar .pageMenuList a:hover,.globalTopbar .pageMenuList a.active{background:linear-gradient(135deg,var(--green,#0f7a3a),var(--green2,#16a34a))!important;color:#fff!important;} .globalTopbar .themeTextBtn,.globalTopbar .topbarCityBtn{border-radius:999px!important;border:1px solid rgba(255,255,255,.22)!important;background:rgba(255,255,255,.14)!important;color:#fff!important;font-weight:1000!important;font-size:12px!important;box-shadow:none!important;white-space:nowrap!important;} .globalTopbar .themeTextBtn{padding:6px 9px!important;} .globalTopbar .topbarCityBtn{max-width:155px!important;padding:6px 8px!important;display:inline-flex!important;align-items:center!important;gap:6px!important;overflow:hidden!important;} .globalTopbar .topbarCityBtn svg{width:14px!important;height:14px!important;opacity:.92!important;flex-shrink:0!important;} .globalTopbar .topbarCityBtn span{overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important;} body.dark .globalTopbar .topbarCard,body[data-theme="dark"] .globalTopbar .topbarCard{background:linear-gradient(90deg,#123520,#0d2418)!important;border-color:rgba(255,255,255,.13)!important;} body.dark .globalTopbar .pageMenuList,body[data-theme="dark"] .globalTopbar .pageMenuList{background:#102119!important;border-color:rgba(255,255,255,.15)!important;} body.dark .globalTopbar .pageMenuList a,body[data-theme="dark"] .globalTopbar .pageMenuList a{color:#eaffef!important;background:rgba(255,255,255,.06)!important;} @media(max-width:560px){.globalTopbar .pageW{width:min(100% - 14px,1080px)!important}.globalTopbar .globalHeaderGrid{gap:5px!important;grid-template-columns:auto minmax(40px,1fr) auto!important}.globalTopbar .hamburgerBtn{width:34px!important;height:34px!important;font-size:21px!important;border-radius:11px!important}.globalTopbar .topTitleOnly{font-size:15px!important;padding:5px 10px 6px!important}.globalTopbar .appLeftControls{gap:5px!important}.globalTopbar .topbarCityBtn{max-width:92px!important;font-size:10px!important;padding:5px 6px!important}.globalTopbar .themeTextBtn{font-size:10px!important;padding:5px 6px!important}.globalTopbar .pageMenuList{min-width:180px!important}} @media print{.globalTopbar{display:none!important}} /* Stage25 global theme color palette */ .globalTopbar .themeColorsBtn{width:34px!important;height:34px!important;border-radius:999px!important;border:1px solid rgba(255,255,255,.24)!important;background:rgba(255,255,255,.16)!important;color:#fff!important;display:inline-grid!important;place-items:center!important;font-size:17px!important;line-height:1!important;cursor:pointer!important;box-shadow:none!important;padding:0!important;flex:0 0 auto!important} .globalTopbar .themeColorsBtn:hover{background:rgba(255,255,255,.26)!important;transform:translateY(-1px)} .themeColorsPanel{position:fixed!important;inset:0!important;z-index:999!important;display:none!important;align-items:flex-start!important;justify-content:flex-start!important;padding:76px 18px 18px!important;background:rgba(0,0,0,.20)!important;direction:rtl!important} .themeColorsPanel.open{display:flex!important} .themeColorsCard{width:min(420px,calc(100vw - 36px))!important;border-radius:24px!important;background:var(--custom-panel-bg,#fff)!important;color:var(--custom-text,var(--text,#173321))!important;border:1px solid var(--custom-line,var(--line,rgba(15,122,58,.16)))!important;box-shadow:0 28px 80px rgba(0,0,0,.26)!important;padding:14px!important;backdrop-filter:blur(14px)!important} .themeColorsHead{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:10px!important;margin-bottom:8px!important}.themeColorsHead strong{font-size:18px!important;font-weight:1000!important;color:var(--green,#0f7a3a)!important}.themeColorsHead button{width:34px!important;height:34px!important;border-radius:12px!important;border:1px solid var(--custom-line,var(--line,rgba(15,122,58,.16)))!important;background:rgba(255,255,255,.12)!important;color:inherit!important;font-size:24px!important;line-height:1!important;cursor:pointer!important}.themeColorsHint{font-size:12px!important;font-weight:850!important;color:var(--custom-muted,var(--muted,#66776b))!important;margin:0 0 12px!important}.themeColorsSection{padding:12px!important;border-radius:18px!important;background:color-mix(in srgb, var(--green,#0f7a3a) 7%, transparent)!important;border:1px solid var(--custom-line,var(--line,rgba(15,122,58,.12)))!important;margin-top:10px!important}.themeColorsLabel{font-weight:1000!important;margin-bottom:9px!important;color:var(--green,#0f7a3a)!important}.themeSwatches{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important}.colorSwatch{display:flex!important;align-items:center!important;gap:8px!important;text-align:right!important;border:1px solid var(--custom-line,var(--line,rgba(15,122,58,.16)))!important;border-radius:14px!important;padding:8px!important;background:rgba(255,255,255,.14)!important;color:inherit!important;cursor:pointer!important;font-weight:900!important;min-height:46px!important}.colorSwatch span{width:28px!important;height:28px!important;border-radius:10px!important;border:1px solid rgba(0,0,0,.12)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.24)!important;flex:0 0 auto!important}.colorSwatch b{font-size:12px!important;line-height:1.25!important}.colorSwatch.active{outline:3px solid color-mix(in srgb, var(--green,#0f7a3a) 45%, transparent)!important;border-color:var(--green,#0f7a3a)!important}.colorSwatch:hover{transform:translateY(-1px)!important} body.hasCustomPalette{background:var(--custom-page-bg,var(--bg))!important;color:var(--custom-text,var(--text))!important}body.hasCustomPalette footer{background:var(--custom-page-bg,var(--bg))!important;color:var(--custom-muted,var(--muted))!important}body.hasCustomPalette .main,body.hasCustomPalette .ghCard,body.hasCustomPalette .kv,body.hasCustomPalette .calendarPanel,body.hasCustomPalette .calToolbar,body.hasCustomPalette .calMonth,body.hasCustomPalette .dayLarge,body.hasCustomPalette .hourSlot{border-color:var(--custom-line,var(--line))!important}body.hasCustomPalette .calendarPanel,body.hasCustomPalette .calToolbar{background:var(--custom-panel-bg,var(--panelBg))!important}body.hasCustomPalette .calMonth,body.hasCustomPalette .dayLarge,body.hasCustomPalette .hourSlot{background:var(--custom-panel-bg,var(--panelBg))!important;color:var(--custom-text,var(--text))!important}body.hasCustomPalette .calTitle,body.hasCustomPalette .calMonthName,body.hasCustomPalette .datePair,body.hasCustomPalette .prLabelText{color:var(--green)!important}body.hasCustomPalette .dayMini,body.hasCustomPalette .weekName,body.hasCustomPalette .dayNum,body.hasCustomPalette .hourTitle{background:var(--greenSoft)!important;color:var(--custom-text,var(--text))!important}body.hasCustomPalette .topbarCard{background:linear-gradient(90deg,var(--green),var(--green2))!important} @media(max-width:560px){.globalTopbar .themeColorsBtn{width:30px!important;height:30px!important;font-size:14px!important}.themeColorsPanel{padding-top:66px!important}.themeSwatches{grid-template-columns:1fr!important}.themeColorsCard{width:min(360px,calc(100vw - 24px))!important}} @media print{.themeColorsPanel{display:none!important}} /* Stage26: force custom element colors to be visible in dark theme */ body.hasCustomPalette[data-theme="dark"] .globalTopbar .topbarCard, body.hasCustomPalette[data-theme="dark"] .topbarCard{ background:linear-gradient(90deg,var(--green),var(--green2))!important; border-color:color-mix(in srgb, var(--green2) 55%, rgba(255,255,255,.18))!important; } body.hasCustomPalette[data-theme="dark"] .themeTextBtn, body.hasCustomPalette[data-theme="dark"] .themeColorsBtn, body.hasCustomPalette[data-theme="dark"] .topbarCityBtn, body.hasCustomPalette[data-theme="dark"] .hamburgerBtn{ background:color-mix(in srgb, var(--green2) 22%, rgba(255,255,255,.10))!important; border-color:color-mix(in srgb, var(--green2) 58%, rgba(255,255,255,.20))!important; color:#fff!important; } body.hasCustomPalette[data-theme="dark"] .themeTextBtn:hover, body.hasCustomPalette[data-theme="dark"] .themeColorsBtn:hover, body.hasCustomPalette[data-theme="dark"] .topbarCityBtn:hover, body.hasCustomPalette[data-theme="dark"] .hamburgerBtn:hover{ background:color-mix(in srgb, var(--green2) 38%, rgba(255,255,255,.12))!important; } body.hasCustomPalette[data-theme="dark"] .topTitleOnly{ border-color:color-mix(in srgb, var(--green2) 42%, rgba(255,255,255,.22))!important; background:color-mix(in srgb, var(--green) 22%, rgba(255,255,255,.12))!important; } body.hasCustomPalette[data-theme="dark"] .pageMenuList a:hover, body.hasCustomPalette[data-theme="dark"] .pageMenuList a.active{ background:linear-gradient(135deg,var(--green),var(--green2))!important; color:#fff!important; } body.hasCustomPalette[data-theme="dark"] .main, body.hasCustomPalette[data-theme="dark"] .ghCard, body.hasCustomPalette[data-theme="dark"] .kv, body.hasCustomPalette[data-theme="dark"] .modal, body.hasCustomPalette[data-theme="dark"] .calendarPanel, body.hasCustomPalette[data-theme="dark"] .calToolbar, body.hasCustomPalette[data-theme="dark"] .calMonth, body.hasCustomPalette[data-theme="dark"] .dayLarge, body.hasCustomPalette[data-theme="dark"] .hourSlot, body.hasCustomPalette[data-theme="dark"] .monthEntryStandalone{ background:var(--custom-panel-bg,var(--panelBg))!important; color:var(--custom-text,var(--text))!important; border-color:var(--custom-line,var(--line))!important; } body.hasCustomPalette[data-theme="dark"] .mainHeader, body.hasCustomPalette[data-theme="dark"] .fullDateLine, body.hasCustomPalette[data-theme="dark"] .nextPrayerChip, body.hasCustomPalette[data-theme="dark"] .mergedPrGrid, body.hasCustomPalette[data-theme="dark"] .prLabelsCol, body.hasCustomPalette[data-theme="dark"] .npcTimer, body.hasCustomPalette[data-theme="dark"] .ampm, body.hasCustomPalette[data-theme="dark"] .phase, body.hasCustomPalette[data-theme="dark"] .headerClockTitle{ background:var(--greenSoft)!important; border-color:var(--custom-line,var(--line))!important; color:var(--custom-text,var(--text))!important; } body.hasCustomPalette[data-theme="dark"] .calTitle, body.hasCustomPalette[data-theme="dark"] .calMonthName, body.hasCustomPalette[data-theme="dark"] .datePair, body.hasCustomPalette[data-theme="dark"] .prLabelText, body.hasCustomPalette[data-theme="dark"] .monthGregorianStandalone, body.hasCustomPalette[data-theme="dark"] .themeColorsHead strong, body.hasCustomPalette[data-theme="dark"] .themeColorsLabel{ color:var(--green2)!important; } body.hasCustomPalette[data-theme="dark"] .dayMini.today, body.hasCustomPalette[data-theme="dark"] .calBtn, body.hasCustomPalette[data-theme="dark"] button.primary, body.hasCustomPalette[data-theme="dark"] .closeMonthsBtnStandalone, body.hasCustomPalette[data-theme="dark"] .monthEntryNumberStandalone{ background:linear-gradient(135deg,var(--green),var(--green2))!important; color:#fff!important; border-color:var(--green2)!important; } body.hasCustomPalette[data-theme="dark"] .calBtn.secondary, body.hasCustomPalette[data-theme="dark"] button.secondary, body.hasCustomPalette[data-theme="dark"] .dayMini, body.hasCustomPalette[data-theme="dark"] .weekName, body.hasCustomPalette[data-theme="dark"] .dayNum, body.hasCustomPalette[data-theme="dark"] .hourTitle, body.hasCustomPalette[data-theme="dark"] .suggestion-item:hover{ background:var(--greenSoft)!important; color:var(--custom-text,var(--text))!important; border-color:var(--custom-line,var(--line))!important; } body.hasCustomPalette[data-theme="dark"] input, body.hasCustomPalette[data-theme="dark"] select, body.hasCustomPalette[data-theme="dark"] textarea{ background:color-mix(in srgb, var(--custom-panel-bg) 82%, var(--greenSoft))!important; color:var(--custom-text,var(--text))!important; border-color:var(--custom-line,var(--line))!important; } body.hasCustomPalette[data-theme="dark"] .colorSwatch.active{ outline-color:color-mix(in srgb, var(--green2) 65%, transparent)!important; border-color:var(--green2)!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; } } /* 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; } } .siteTitleLink{ color:inherit; text-decoration:none; font-weight:800; } .siteTitleLink:hover{ opacity:.9; } /* Stage57: header title link */ .globalTopbar .siteHeaderTitleLink{ text-decoration:none!important; color:#fff!important; display:flex!important; align-items:center!important; justify-content:center!important; } .globalTopbar .siteHeaderTitleLink:hover{ filter:brightness(1.08); transform:translateY(-1px); } /* 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; } /* 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; } /* 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; } } /* 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; } /* 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; } /* 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; } } /* Stage344: زر الثيم رمز واحد في جميع المقاسات مع بقاء وظائفه كما هي */ .globalTopbar .themeSwitchBtn, .globalTopbar .themeTextBtn.themeSwitchBtn{ width:40px !important; min-width:40px !important; height:40px !important; padding:0 !important; border-radius:50% !important; display:inline-flex !important; align-items:center !important; justify-content:center !important; direction:rtl !important; overflow:visible !important; } .globalTopbar .themeSwitchBtn .themeSwitchLabel{ position:static !important; inset:auto !important; display:block !important; padding:0 !important; font-size:22px !important; line-height:1 !important; transform:none !important; } .globalTopbar .themeSwitchBtn .themeSwitchKnob{ display:none !important; } @media(max-width:760px){ .globalTopbar .themeSwitchBtn, .globalTopbar .themeTextBtn.themeSwitchBtn{ width:36px !important; min-width:36px !important; height:36px !important; } .globalTopbar .themeSwitchBtn .themeSwitchLabel{ font-size:20px !important; } }