/* SHADA-LANGUAGE-SELECTOR-TIGHT-R3V16 START */ /* * One consistent language-selector presentation at * every viewport width. * * The active-language button and alternative-language * panel have identical computed outer dimensions. */ html body .container-header #shada-language-selector-138 { --shada-language-r3v16-width: 9.25rem; --shada-language-r3v16-height: 2.85rem; --shada-language-r3v16-radius: 14px; box-sizing: border-box !important; position: relative !important; width: var(--shada-language-r3v16-width) !important; min-width: var(--shada-language-r3v16-width) !important; max-width: var(--shada-language-r3v16-width) !important; inline-size: var(--shada-language-r3v16-width) !important; min-inline-size: var(--shada-language-r3v16-width) !important; max-inline-size: var(--shada-language-r3v16-width) !important; overflow: visible !important; } /* * Exact shared outer box. */ html body .container-header #shada-language-selector-138 > .shada-language-selector__toggle, html body .container-header #shada-language-selector-138 > .shada-language-selector__menu { box-sizing: border-box !important; width: var(--shada-language-r3v16-width) !important; min-width: var(--shada-language-r3v16-width) !important; max-width: var(--shada-language-r3v16-width) !important; inline-size: var(--shada-language-r3v16-width) !important; min-inline-size: var(--shada-language-r3v16-width) !important; max-inline-size: var(--shada-language-r3v16-width) !important; height: var(--shada-language-r3v16-height) !important; min-height: var(--shada-language-r3v16-height) !important; max-height: var(--shada-language-r3v16-height) !important; block-size: var(--shada-language-r3v16-height) !important; min-block-size: var(--shada-language-r3v16-height) !important; max-block-size: var(--shada-language-r3v16-height) !important; margin: 0 !important; padding: 0 !important; border: 2px solid rgba(0, 132, 137, 0.58) !important; border-radius: var(--shada-language-r3v16-radius) !important; background: #ffffff !important; transform: none !important; } /* * Active-language button. */ html body .container-header #shada-language-selector-138 > .shada-language-selector__toggle { display: flex !important; align-items: center !important; justify-content: center !important; gap: 0.35rem !important; padding: 0 0.45rem !important; overflow: hidden !important; box-shadow: 0 0 0 0.28rem rgba(0, 132, 137, 0.10) !important; } /* * Alternative-language panel. */ html body .container-header #shada-language-selector-138 > .shada-language-selector__menu { position: absolute !important; top: calc( var(--shada-language-r3v16-height) + 0.4rem ) !important; right: 0 !important; bottom: auto !important; left: auto !important; inset-inline-start: auto !important; inset-inline-end: auto !important; overflow: hidden !important; box-shadow: 0 0.45rem 1.1rem rgba(17, 59, 62, 0.16) !important; z-index: 13000 !important; } html body .container-header #shada-language-selector-138 > .shada-language-selector__menu[hidden] { display: none !important; } html body .container-header #shada-language-selector-138 > .shada-language-selector__menu > li { box-sizing: border-box !important; display: block !important; width: 100% !important; min-width: 100% !important; max-width: 100% !important; height: 100% !important; min-height: 100% !important; max-height: 100% !important; margin: 0 !important; padding: 0 !important; border: 0 !important; background: transparent !important; list-style: none !important; overflow: hidden !important; } /* * Actual alternative-language element generated by * the Joomla override. */ html body .container-header #shada-language-selector-138 > .shada-language-selector__menu > li > .shada-language-selector__item, html body .container-header #shada-language-selector-138 > .shada-language-selector__menu > li > a, html body .container-header #shada-language-selector-138 > .shada-language-selector__menu > li > button { box-sizing: border-box !important; display: flex !important; align-items: center !important; justify-content: center !important; gap: 0.35rem !important; width: 100% !important; min-width: 100% !important; max-width: 100% !important; height: 100% !important; min-height: 100% !important; max-height: 100% !important; margin: 0 !important; padding: 0 0.45rem !important; border: 0 !important; border-radius: calc( var(--shada-language-r3v16-radius) - 2px ) !important; background: #ffffff !important; color: #1f2933 !important; font-size: 1rem !important; font-weight: 700 !important; line-height: 1.2 !important; text-align: center !important; text-decoration: none !important; white-space: nowrap !important; overflow: hidden !important; transform: none !important; } /* * Matching flag dimensions. */ html body .container-header #shada-language-selector-138 > .shada-language-selector__toggle img, html body .container-header #shada-language-selector-138 > .shada-language-selector__menu img { box-sizing: border-box !important; display: block !important; width: 1.95rem !important; min-width: 1.95rem !important; max-width: 1.95rem !important; height: 1.28rem !important; min-height: 1.28rem !important; max-height: 1.28rem !important; flex: 0 0 1.95rem !important; margin: 0 !important; padding: 0 !important; object-fit: cover !important; border-radius: 0.2rem !important; } /* * Matching language typography. */ html body .container-header #shada-language-selector-138 .shada-language-selector__current, html body .container-header #shada-language-selector-138 .shada-language-selector__item { font-size: 1rem !important; font-weight: 700 !important; line-height: 1.2 !important; } html[lang^="fa"] .container-header #shada-language-selector-138 > .shada-language-selector__toggle, html[lang^="fa"] .container-header #shada-language-selector-138 .shada-language-selector__item { font-family: "ShadaIRANSans", Arial, sans-serif !important; } /* SHADA-LANGUAGE-SELECTOR-TIGHT-R3V16 END */ /* SHADA-HEADER-COMPACT-GRID-R4 START */ /* * Stable bilingual header: * * Physical left: * - active English or Persian branding * * Physical right: * - telephone * - language selector underneath * * Navigation and server-rendered search remain below. * The language dropdown overlays the navigation and * does not increase the white header height. */ html body .container-header .container-topbar { display: grid !important; grid-template-columns: minmax(0, 1fr) 9.25rem !important; grid-template-rows: 2.2rem 2.85rem !important; column-gap: clamp( 0.5rem, 2vw, 1.25rem ) !important; row-gap: 0.25rem !important; align-items: center !important; align-content: center !important; box-sizing: border-box !important; width: 100% !important; min-height: 6.1rem !important; height: auto !important; margin: 0 !important; padding: 0.4rem clamp( 0.6rem, 2.5vw, 2rem ) !important; direction: ltr !important; background: #ffffff !important; overflow: visible !important; isolation: isolate !important; z-index: 3000 !important; } /* * Remove the old nested layout boxes so the existing * logo and actions can become direct grid items. */ html body .container-header .container-topbar #mod-custom121, html body .container-header .container-topbar #mod-custom121 .shada-site-header, html body .container-header .container-topbar #mod-custom121 .shada-site-header-inner { display: contents !important; } /* * Where Joomla adds module chrome around module 138, * remove only that wrapper's layout box. */ html body .container-header .container-topbar > *:has( #shada-language-selector-138 ) { display: contents !important; } /* Branding: permanent physical left. */ html body .container-header .container-topbar .shada-header-logo { grid-column: 1 !important; grid-row: 1 / 3 !important; justify-self: start !important; align-self: center !important; position: static !important; top: auto !important; right: auto !important; bottom: auto !important; left: auto !important; inset: auto !important; width: auto !important; min-width: 0 !important; height: auto !important; margin: 0 !important; padding: 0 !important; transform: none !important; z-index: 2 !important; } html body .container-header .container-topbar .shada-header-logo--en img { display: block !important; width: auto !important; max-width: 13rem !important; height: auto !important; max-height: 4.4rem !important; margin: 0 !important; object-fit: contain !important; } /* * Existing Persian markup is text followed by icon. * row-reverse places the S/bird physically on the * left and the Persian wording physically on its right. */ html[lang^="fa"] body .container-header .container-topbar .shada-header-logo--fa { display: inline-flex !important; flex-direction: row-reverse !important; align-items: center !important; justify-content: flex-start !important; gap: 0.55rem !important; direction: ltr !important; max-width: min( 25rem, calc( 100vw - 11rem ) ) !important; color: #087c83 !important; text-decoration: none !important; } html[lang^="fa"] body .container-header .container-topbar .shada-header-logo-fa__text { display: block !important; min-width: 0 !important; direction: rtl !important; unicode-bidi: isolate !important; text-align: right !important; white-space: nowrap !important; font-family: "ShadaIRANSans", Arial, sans-serif !important; font-size: clamp( 1rem, 2vw, 1.45rem ) !important; font-weight: 700 !important; line-height: 1.15 !important; } html[lang^="fa"] body .container-header .container-topbar .shada-header-logo-fa__icon { display: block !important; flex: 0 0 auto !important; width: auto !important; height: 3.5rem !important; max-width: 4.5rem !important; margin: 0 !important; object-fit: contain !important; } /* Telephone: physical right, upper row. */ html body .container-header .container-topbar .shada-header-actions { grid-column: 2 !important; grid-row: 1 !important; justify-self: end !important; align-self: center !important; display: flex !important; align-items: center !important; justify-content: flex-end !important; position: static !important; width: 9.25rem !important; margin: 0 !important; padding: 0 !important; transform: none !important; z-index: 5 !important; } html body .container-header .container-topbar .shada-phone-button { position: static !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; box-sizing: border-box !important; width: 9.25rem !important; height: 2.15rem !important; margin: 0 !important; padding: 0.25rem 0.55rem !important; border-radius: 0.7rem !important; direction: ltr !important; unicode-bidi: isolate !important; font-size: 0.88rem !important; font-weight: 700 !important; line-height: 1 !important; white-space: nowrap !important; transform: none !important; } /* * The approved search control is rendered in the * navigation. Hide only any residual copy while it * remains inside the topbar actions container. */ html body .container-header .container-topbar .shada-header-actions .shada-search-toggle { display: none !important; } /* Language selector: physical right, lower row. */ html body .container-header .container-topbar #shada-language-selector-138 { grid-column: 2 !important; grid-row: 2 !important; justify-self: end !important; align-self: center !important; position: relative !important; top: auto !important; right: auto !important; bottom: auto !important; left: auto !important; inset: auto !important; width: 9.25rem !important; min-width: 9.25rem !important; max-width: 9.25rem !important; margin: 0 !important; padding: 0 !important; transform: none !important; overflow: visible !important; z-index: 13000 !important; } /* * Dropdown remains attached to the selector and * overlays the teal navigation rather than pushing it. */ html body .container-header .container-topbar #shada-language-selector-138 > .shada-language-selector__menu { position: absolute !important; top: calc( 2.85rem + 0.3rem ) !important; right: 0 !important; bottom: auto !important; left: auto !important; margin: 0 !important; z-index: 14000 !important; } /* Navigation remains immediately below the compact topbar. */ html body .container-header .container-nav { position: relative !important; margin-top: 0 !important; z-index: 100 !important; } /* Narrow phones. */ @media (max-width: 600px) { html body .container-header .container-topbar { column-gap: 0.35rem !important; padding: 0.35rem 0.4rem !important; } html body .container-header .container-topbar .shada-header-logo--en img { max-width: min( 8.75rem, calc( 100vw - 10.25rem ) ) !important; max-height: 3.5rem !important; } html[lang^="fa"] body .container-header .container-topbar .shada-header-logo--fa { gap: 0.25rem !important; max-width: calc( 100vw - 10.25rem ) !important; } html[lang^="fa"] body .container-header .container-topbar .shada-header-logo-fa__text { font-size: clamp( 0.72rem, 3.3vw, 0.94rem ) !important; } html[lang^="fa"] body .container-header .container-topbar .shada-header-logo-fa__icon { height: 2.5rem !important; max-width: 3rem !important; } html body .container-header .container-topbar .shada-phone-button { font-size: 0.8rem !important; padding-inline: 0.3rem !important; } } /* SHADA-HEADER-COMPACT-GRID-R4 END */ /* SHADA-HEADER-CONTROLS-R6 START */ /* * Final approved utility-control dimensions: * * Phone: * width 10.5rem * height 2.7rem * text 16px * * Language selector: * width 7.75rem * height 2.2rem * text 13px * flag 23px × 15px * * Vertical gap: * 0.55rem */ /* ======================================================== COMPACT TOPBAR GRID ======================================================== */ html body .container-header .container-topbar { grid-template-columns: minmax(0, 1fr) 10.5rem !important; grid-template-rows: 2.7rem 2.2rem !important; column-gap: 1rem !important; row-gap: 0.55rem !important; align-items: center !important; align-content: center !important; box-sizing: border-box !important; min-height: 6.15rem !important; height: auto !important; padding: 0.35rem clamp( 0.6rem, 2.5vw, 2rem ) !important; overflow: visible !important; } /* ======================================================== ENGLISH LOGO VISIBILITY ======================================================== */ html:not([lang^="fa"]) body .container-header .container-topbar .shada-header-logo--en { display: inline-flex !important; align-items: center !important; justify-content: flex-start !important; grid-column: 1 !important; grid-row: 1 / 3 !important; justify-self: start !important; align-self: center !important; position: static !important; top: auto !important; right: auto !important; bottom: auto !important; left: auto !important; inset: auto !important; width: auto !important; min-width: 0 !important; max-width: min( 24rem, calc( 100vw - 12rem ) ) !important; height: auto !important; margin: 0 !important; padding: 0 !important; opacity: 1 !important; visibility: visible !important; overflow: visible !important; transform: none !important; z-index: 20 !important; } html:not([lang^="fa"]) body .container-header .container-topbar .shada-header-logo--en img { display: block !important; width: auto !important; min-width: 0 !important; max-width: 13rem !important; height: auto !important; max-height: 4.25rem !important; margin: 0 !important; padding: 0 !important; opacity: 1 !important; visibility: visible !important; object-fit: contain !important; transform: none !important; } html:not([lang^="fa"]) body .container-header .container-topbar .shada-header-logo--fa { display: none !important; } /* ======================================================== PERSIAN LOGO ======================================================== */ html[lang^="fa"] body .container-header .container-topbar .shada-header-logo--en { display: none !important; } html[lang^="fa"] body .container-header .container-topbar .shada-header-logo--fa { display: inline-flex !important; flex-direction: row-reverse !important; align-items: center !important; justify-content: flex-start !important; grid-column: 1 !important; grid-row: 1 / 3 !important; justify-self: start !important; align-self: center !important; gap: 0.55rem !important; position: static !important; width: auto !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; direction: ltr !important; opacity: 1 !important; visibility: visible !important; transform: none !important; z-index: 20 !important; } html[lang^="fa"] body .container-header .container-topbar .shada-header-logo-fa__text { display: block !important; direction: rtl !important; unicode-bidi: isolate !important; text-align: right !important; opacity: 1 !important; visibility: visible !important; } html[lang^="fa"] body .container-header .container-topbar .shada-header-logo-fa__icon { display: block !important; opacity: 1 !important; visibility: visible !important; } /* ======================================================== PHONE BUTTON ======================================================== */ html body .container-header .container-topbar .shada-header-actions { grid-column: 2 !important; grid-row: 1 !important; justify-self: end !important; align-self: center !important; display: flex !important; align-items: center !important; justify-content: flex-end !important; width: 10.5rem !important; height: 2.7rem !important; margin: 0 !important; padding: 0 !important; } html body .container-header .container-topbar .shada-phone-button { box-sizing: border-box !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 10.5rem !important; min-width: 10.5rem !important; max-width: 10.5rem !important; height: 2.7rem !important; min-height: 2.7rem !important; max-height: 2.7rem !important; margin: 0 !important; padding: 0.35rem 0.65rem !important; border-radius: 0.75rem !important; direction: ltr !important; unicode-bidi: isolate !important; font-size: 1rem !important; font-weight: 700 !important; line-height: 1 !important; white-space: nowrap !important; transform: none !important; } /* ======================================================== LANGUAGE SELECTOR OUTER BOX ======================================================== */ html body .container-header .container-topbar #shada-language-selector-138 { --shada-language-r6-width: 7.75rem; --shada-language-r6-height: 2.2rem; --shada-language-r6-radius: 0.65rem; grid-column: 2 !important; grid-row: 2 !important; justify-self: end !important; align-self: center !important; position: relative !important; top: auto !important; right: auto !important; bottom: auto !important; left: auto !important; inset: auto !important; box-sizing: border-box !important; width: var(--shada-language-r6-width) !important; min-width: var(--shada-language-r6-width) !important; max-width: var(--shada-language-r6-width) !important; inline-size: var(--shada-language-r6-width) !important; min-inline-size: var(--shada-language-r6-width) !important; max-inline-size: var(--shada-language-r6-width) !important; margin: 0 !important; padding: 0 !important; overflow: visible !important; transform: none !important; z-index: 13000 !important; } /* Active selector and dropdown use identical dimensions. */ html body .container-header .container-topbar #shada-language-selector-138 > .shada-language-selector__toggle, html body .container-header .container-topbar #shada-language-selector-138 > .shada-language-selector__menu { box-sizing: border-box !important; width: var(--shada-language-r6-width) !important; min-width: var(--shada-language-r6-width) !important; max-width: var(--shada-language-r6-width) !important; inline-size: var(--shada-language-r6-width) !important; min-inline-size: var(--shada-language-r6-width) !important; max-inline-size: var(--shada-language-r6-width) !important; height: var(--shada-language-r6-height) !important; min-height: var(--shada-language-r6-height) !important; max-height: var(--shada-language-r6-height) !important; block-size: var(--shada-language-r6-height) !important; min-block-size: var(--shada-language-r6-height) !important; max-block-size: var(--shada-language-r6-height) !important; margin: 0 !important; padding: 0 !important; border: 1.5px solid rgba(0, 132, 137, 0.68) !important; border-radius: var(--shada-language-r6-radius) !important; background: #ffffff !important; transform: none !important; } /* Active language control. */ html body .container-header .container-topbar #shada-language-selector-138 > .shada-language-selector__toggle { display: flex !important; align-items: center !important; justify-content: center !important; gap: 0.3rem !important; padding: 0 0.35rem !important; overflow: hidden !important; box-shadow: 0 0 0 2px rgba(0, 132, 137, 0.08) !important; font-size: 13px !important; font-weight: 700 !important; line-height: 1 !important; } /* Dropdown overlays the navigation. */ html body .container-header .container-topbar #shada-language-selector-138 > .shada-language-selector__menu { position: absolute !important; top: calc( var(--shada-language-r6-height) + 0.3rem ) !important; right: 0 !important; bottom: auto !important; left: auto !important; inset-inline-start: auto !important; inset-inline-end: auto !important; overflow: hidden !important; box-shadow: 0 0.35rem 0.8rem rgba(17, 59, 62, 0.15) !important; z-index: 14000 !important; } html body .container-header .container-topbar #shada-language-selector-138 > .shada-language-selector__menu[hidden] { display: none !important; } html body .container-header .container-topbar #shada-language-selector-138 > .shada-language-selector__menu > li { box-sizing: border-box !important; display: block !important; width: 100% !important; height: 100% !important; margin: 0 !important; padding: 0 !important; border: 0 !important; background: transparent !important; list-style: none !important; overflow: hidden !important; } html body .container-header .container-topbar #shada-language-selector-138 > .shada-language-selector__menu > li > a, html body .container-header .container-topbar #shada-language-selector-138 > .shada-language-selector__menu > li > button { box-sizing: border-box !important; display: flex !important; align-items: center !important; justify-content: center !important; gap: 0.3rem !important; width: 100% !important; min-width: 100% !important; max-width: 100% !important; height: 100% !important; min-height: 100% !important; max-height: 100% !important; margin: 0 !important; padding: 0 0.35rem !important; border: 0 !important; border-radius: calc( var(--shada-language-r6-radius) - 2px ) !important; background: #ffffff !important; font-size: 13px !important; font-weight: 700 !important; line-height: 1 !important; text-align: center !important; text-decoration: none !important; white-space: nowrap !important; overflow: hidden !important; } /* Current-language and alternative-language text. */ html body .container-header .container-topbar #shada-language-selector-138 .shada-language-selector__current, html body .container-header .container-topbar #shada-language-selector-138 .shada-language-selector__item { font-size: 13px !important; font-weight: 700 !important; line-height: 1 !important; } /* Approved flag dimensions: approximately 23px × 15px. */ html body .container-header .container-topbar #shada-language-selector-138 > .shada-language-selector__toggle img, html body .container-header .container-topbar #shada-language-selector-138 > .shada-language-selector__menu img { box-sizing: border-box !important; display: block !important; width: 23px !important; min-width: 23px !important; max-width: 23px !important; height: 15px !important; min-height: 15px !important; max-height: 15px !important; flex: 0 0 23px !important; margin: 0 !important; padding: 0 !important; object-fit: cover !important; border-radius: 2px !important; } /* Persian selector text retains the Persian font. */ html[lang^="fa"] body .container-header #shada-language-selector-138 .shada-language-selector__current, html[lang^="fa"] body .container-header #shada-language-selector-138 .shada-language-selector__item { font-family: "ShadaIRANSans", Arial, sans-serif !important; } /* Narrow-screen logo scaling only. */ @media (max-width: 600px) { html:not([lang^="fa"]) body .container-header .container-topbar .shada-header-logo--en img { max-width: min( 8.5rem, calc( 100vw - 11.5rem ) ) !important; max-height: 3.5rem !important; } html[lang^="fa"] body .container-header .container-topbar .shada-header-logo--fa { gap: 0.25rem !important; max-width: calc( 100vw - 11.5rem ) !important; } html[lang^="fa"] body .container-header .container-topbar .shada-header-logo-fa__text { font-size: clamp( 0.7rem, 3.1vw, 0.92rem ) !important; } } /* SHADA-HEADER-CONTROLS-R6 END */ /* SHADA-HEADER-CONTROLS-R8 START */ /* * Final approved utility dimensions. * * Phone: 174px × 45px; text/icon 18px * Language: 124px × 35px; text 13px * Flag: 23px × 15px * Vertical separation: 9px */ /* -------------------------------------------------------- HEADER GRID -------------------------------------------------------- */ html body .container-header .container-topbar { grid-template-columns: minmax(0, 1fr) 174px !important; grid-template-rows: 45px 35px !important; column-gap: 12px !important; row-gap: 9px !important; align-items: center !important; align-content: center !important; box-sizing: border-box !important; width: 100% !important; min-height: 101px !important; height: auto !important; margin: 0 !important; padding: 6px clamp( 8px, 2.5vw, 32px ) !important; direction: ltr !important; overflow: visible !important; } /* -------------------------------------------------------- ENGLISH LOGO -------------------------------------------------------- */ html:not([lang^="fa"]) body .container-header .shada-header-logo--en { display: inline-flex !important; align-items: center !important; justify-content: flex-start !important; grid-column: 1 !important; grid-row: 1 / 3 !important; justify-self: start !important; align-self: center !important; position: static !important; top: auto !important; right: auto !important; bottom: auto !important; left: auto !important; inset: auto !important; width: auto !important; min-width: 1px !important; max-width: calc(100vw - 196px) !important; height: auto !important; min-height: 1px !important; margin: 0 !important; padding: 0 !important; opacity: 1 !important; visibility: visible !important; clip: auto !important; clip-path: none !important; overflow: visible !important; transform: none !important; filter: none !important; z-index: 30 !important; } html:not([lang^="fa"]) body .container-header .shada-header-logo--en img { display: block !important; width: 208px !important; min-width: 1px !important; max-width: 208px !important; height: auto !important; min-height: 1px !important; max-height: 68px !important; margin: 0 !important; padding: 0 !important; opacity: 1 !important; visibility: visible !important; clip: auto !important; clip-path: none !important; object-fit: contain !important; transform: none !important; filter: none !important; } html:not([lang^="fa"]) body .container-header .shada-header-logo--fa { display: none !important; } /* Preserve the approved Persian logo arrangement. */ html[lang^="fa"] body .container-header .shada-header-logo--en { display: none !important; } html[lang^="fa"] body .container-header .shada-header-logo--fa { display: inline-flex !important; flex-direction: row-reverse !important; grid-column: 1 !important; grid-row: 1 / 3 !important; justify-self: start !important; align-self: center !important; direction: ltr !important; opacity: 1 !important; visibility: visible !important; } /* -------------------------------------------------------- PHONE -------------------------------------------------------- */ html body .container-header .container-topbar .shada-header-actions { grid-column: 2 !important; grid-row: 1 !important; justify-self: end !important; align-self: center !important; display: flex !important; align-items: center !important; justify-content: flex-end !important; position: static !important; width: 174px !important; min-width: 174px !important; max-width: 174px !important; height: 45px !important; min-height: 45px !important; max-height: 45px !important; margin: 0 !important; padding: 0 !important; transform: none !important; } html body .container-header .container-topbar .shada-phone-button { box-sizing: border-box !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 7px !important; width: 174px !important; min-width: 174px !important; max-width: 174px !important; height: 45px !important; min-height: 45px !important; max-height: 45px !important; margin: 0 !important; padding: 6px 10px !important; border-radius: 12px !important; direction: ltr !important; unicode-bidi: isolate !important; font-size: 18px !important; font-weight: 700 !important; line-height: 1 !important; white-space: nowrap !important; transform: none !important; } /* * Covers either the existing literal phone glyph or * any nested icon/number spans. */ html body .container-header .container-topbar .shada-phone-button *, html body .container-header .container-topbar .shada-phone-icon, html body .container-header .container-topbar .shada-phone-number { font-size: 18px !important; font-weight: 700 !important; line-height: 1 !important; } /* -------------------------------------------------------- LANGUAGE SELECTOR -------------------------------------------------------- */ html body .container-header .container-topbar #shada-language-selector-138 { --shada-language-r8-width: 124px; --shada-language-r8-height: 35px; --shada-language-r8-radius: 10px; grid-column: 2 !important; grid-row: 2 !important; justify-self: end !important; align-self: center !important; position: relative !important; inset: auto !important; box-sizing: border-box !important; width: var(--shada-language-r8-width) !important; min-width: var(--shada-language-r8-width) !important; max-width: var(--shada-language-r8-width) !important; height: var(--shada-language-r8-height) !important; min-height: var(--shada-language-r8-height) !important; max-height: var(--shada-language-r8-height) !important; margin: 0 !important; padding: 0 !important; overflow: visible !important; transform: none !important; z-index: 13000 !important; } html body .container-header .container-topbar #shada-language-selector-138 > .shada-language-selector__toggle, html body .container-header .container-topbar #shada-language-selector-138 > .shada-language-selector__menu { box-sizing: border-box !important; width: var(--shada-language-r8-width) !important; min-width: var(--shada-language-r8-width) !important; max-width: var(--shada-language-r8-width) !important; height: var(--shada-language-r8-height) !important; min-height: var(--shada-language-r8-height) !important; max-height: var(--shada-language-r8-height) !important; margin: 0 !important; padding: 0 !important; border: 1.5px solid rgba(0, 132, 137, 0.68) !important; border-radius: var(--shada-language-r8-radius) !important; background: #ffffff !important; transform: none !important; } html body .container-header .container-topbar #shada-language-selector-138 > .shada-language-selector__toggle { display: flex !important; align-items: center !important; justify-content: center !important; gap: 5px !important; padding: 0 6px !important; overflow: hidden !important; box-shadow: 0 0 0 2px rgba(0, 132, 137, 0.08) !important; } html body .container-header .container-topbar #shada-language-selector-138 > .shada-language-selector__menu { position: absolute !important; top: 40px !important; right: 0 !important; bottom: auto !important; left: auto !important; overflow: hidden !important; box-shadow: 0 6px 13px rgba(17, 59, 62, 0.15) !important; z-index: 14000 !important; } html body .container-header .container-topbar #shada-language-selector-138 > .shada-language-selector__menu[hidden] { display: none !important; } html body .container-header .container-topbar #shada-language-selector-138 > .shada-language-selector__menu > li { box-sizing: border-box !important; display: block !important; width: 100% !important; height: 100% !important; margin: 0 !important; padding: 0 !important; list-style: none !important; } html body .container-header .container-topbar #shada-language-selector-138 > .shada-language-selector__menu > li > a { box-sizing: border-box !important; display: flex !important; align-items: center !important; justify-content: center !important; gap: 5px !important; width: 100% !important; height: 100% !important; margin: 0 !important; padding: 0 6px !important; border: 0 !important; border-radius: 8px !important; background: #ffffff !important; text-decoration: none !important; white-space: nowrap !important; } html body .container-header #shada-language-selector-138 .shada-language-selector__current, html body .container-header #shada-language-selector-138 .shada-language-selector__label, html body .container-header #shada-language-selector-138 .shada-language-selector__item, html body .container-header #shada-language-selector-138 .shada-language-selector__item span { font-size: 13px !important; font-weight: 700 !important; line-height: 1 !important; } html body .container-header #shada-language-selector-138 img { display: block !important; box-sizing: border-box !important; flex: 0 0 23px !important; width: 23px !important; min-width: 23px !important; max-width: 23px !important; height: 15px !important; min-height: 15px !important; max-height: 15px !important; margin: 0 !important; padding: 0 !important; object-fit: cover !important; border-radius: 2px !important; } /* Narrow-screen English-logo scaling. */ @media (max-width: 600px) { html:not([lang^="fa"]) body .container-header .shada-header-logo--en img { width: clamp( 110px, 36vw, 140px ) !important; min-width: clamp( 110px, 36vw, 140px ) !important; max-width: clamp( 110px, 36vw, 140px ) !important; max-height: 56px !important; } } /* SHADA-HEADER-CONTROLS-R8 END */ /* SHADA-HEADER-REFINEMENT-R9D START */ /* * Final approved dimensions: * * Phone: * 186px × 50px * text and icon 20px * * Language selector: * 108px × 31px * text 12px * flag 20px × 13px * * Vertical separation: * 10px */ /* Header utility grid. */ html body .container-header .container-topbar { grid-template-columns: minmax(0, 1fr) 186px !important; grid-template-rows: 50px 31px !important; column-gap: 12px !important; row-gap: 10px !important; align-items: center !important; align-content: center !important; box-sizing: border-box !important; width: 100% !important; min-height: 103px !important; height: auto !important; margin: 0 !important; padding: 6px clamp(8px, 2.5vw, 32px) !important; direction: ltr !important; overflow: visible !important; } /* * English logo: * render the verified SVG directly on the English * home link rather than relying on its hidden image. */ html[lang^="en"] body .container-header .container-topbar #mod-custom121 .shada-header-logo--en, html[lang^="en"] body .container-header .container-topbar .shada-header-logo--en { display: block !important; grid-column: 1 !important; grid-row: 1 / 3 !important; justify-self: start !important; align-self: center !important; position: static !important; top: auto !important; right: auto !important; bottom: auto !important; left: auto !important; inset: auto !important; box-sizing: border-box !important; width: 220px !important; min-width: 220px !important; max-width: 220px !important; height: 72px !important; min-height: 72px !important; max-height: 72px !important; margin: 0 !important; padding: 0 !important; opacity: 1 !important; visibility: visible !important; background-image: url("/images/branding/Shada-Migration-Logo.svg") !important; background-position: left center !important; background-repeat: no-repeat !important; background-size: contain !important; clip: auto !important; clip-path: none !important; overflow: visible !important; transform: none !important; filter: none !important; z-index: 40 !important; } html[lang^="en"] body .container-header .container-topbar .shada-header-logo--en img { display: none !important; } html[lang^="en"] body .container-header .container-topbar .shada-header-logo--fa { display: none !important; } html[lang^="fa"] body .container-header .container-topbar .shada-header-logo--en { display: none !important; } /* Phone container. */ html body .container-header .container-topbar .shada-header-actions { grid-column: 2 !important; grid-row: 1 !important; justify-self: end !important; align-self: center !important; display: flex !important; align-items: center !important; justify-content: flex-end !important; position: static !important; width: 186px !important; min-width: 186px !important; max-width: 186px !important; height: 50px !important; min-height: 50px !important; max-height: 50px !important; margin: 0 !important; padding: 0 !important; transform: none !important; } /* Phone button. */ html body .container-header .container-topbar .shada-phone-button { box-sizing: border-box !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 7px !important; width: 186px !important; min-width: 186px !important; max-width: 186px !important; height: 50px !important; min-height: 50px !important; max-height: 50px !important; margin: 0 !important; padding: 6px 10px !important; border-radius: 13px !important; font-size: 20px !important; font-weight: 700 !important; line-height: 1 !important; direction: ltr !important; unicode-bidi: isolate !important; white-space: nowrap !important; transform: none !important; } html body .container-header .container-topbar .shada-phone-button *, html body .container-header .container-topbar .shada-phone-icon, html body .container-header .container-topbar .shada-phone-number { font-size: 20px !important; font-weight: 700 !important; line-height: 1 !important; } /* Language selector container. */ html body .container-header .container-topbar #shada-language-selector-138 { --shada-language-r9d-width: 108px; --shada-language-r9d-height: 31px; --shada-language-r9d-radius: 9px; grid-column: 2 !important; grid-row: 2 !important; justify-self: end !important; align-self: center !important; position: relative !important; inset: auto !important; box-sizing: border-box !important; width: var(--shada-language-r9d-width) !important; min-width: var(--shada-language-r9d-width) !important; max-width: var(--shada-language-r9d-width) !important; height: var(--shada-language-r9d-height) !important; min-height: var(--shada-language-r9d-height) !important; max-height: var(--shada-language-r9d-height) !important; margin: 0 !important; padding: 0 !important; overflow: visible !important; transform: none !important; z-index: 13000 !important; } /* Active and alternative language controls. */ html body .container-header #shada-language-selector-138 > .shada-language-selector__toggle, html body .container-header #shada-language-selector-138 > .shada-language-selector__menu { box-sizing: border-box !important; width: var(--shada-language-r9d-width) !important; min-width: var(--shada-language-r9d-width) !important; max-width: var(--shada-language-r9d-width) !important; height: var(--shada-language-r9d-height) !important; min-height: var(--shada-language-r9d-height) !important; max-height: var(--shada-language-r9d-height) !important; margin: 0 !important; padding: 0 !important; border-radius: var(--shada-language-r9d-radius) !important; } html body .container-header #shada-language-selector-138 > .shada-language-selector__toggle { gap: 4px !important; padding: 0 5px !important; } html body .container-header #shada-language-selector-138 > .shada-language-selector__menu { position: absolute !important; top: 36px !important; right: 0 !important; bottom: auto !important; left: auto !important; z-index: 14000 !important; } html body .container-header #shada-language-selector-138 > .shada-language-selector__menu > li > a { gap: 4px !important; padding: 0 5px !important; } /* Language text. */ html body .container-header #shada-language-selector-138 .shada-language-selector__current, html body .container-header #shada-language-selector-138 .shada-language-selector__label, html body .container-header #shada-language-selector-138 .shada-language-selector__item, html body .container-header #shada-language-selector-138 .shada-language-selector__item span { font-size: 12px !important; font-weight: 700 !important; line-height: 1 !important; } /* Flags. */ html body .container-header #shada-language-selector-138 img { display: block !important; flex: 0 0 20px !important; width: 20px !important; min-width: 20px !important; max-width: 20px !important; height: 13px !important; min-height: 13px !important; max-height: 13px !important; margin: 0 !important; padding: 0 !important; object-fit: cover !important; } /* Mobile English logo. */ @media (max-width: 600px) { html[lang^="en"] body .container-header .container-topbar .shada-header-logo--en { width: clamp(108px, 35vw, 140px) !important; min-width: clamp(108px, 35vw, 140px) !important; max-width: clamp(108px, 35vw, 140px) !important; height: 58px !important; min-height: 58px !important; max-height: 58px !important; } } /* SHADA-HEADER-REFINEMENT-R9D END */ /* SHADA-HEADER-BALANCE-R9E START */ /* * Final hierarchy: * * Logo unchanged. * Phone 174px × 45px. * Phone text and icon 18px. * Language selector remains 108px × 31px. * Physical vertical gap 8px. */ html body .container-header .container-topbar { grid-template-columns: minmax(0, 1fr) 174px !important; grid-template-rows: 45px 31px !important; row-gap: 8px !important; min-height: 96px !important; } /* Phone container. */ html body .container-header .container-topbar .shada-header-actions { width: 174px !important; min-width: 174px !important; max-width: 174px !important; height: 45px !important; min-height: 45px !important; max-height: 45px !important; } /* Phone button. */ html body .container-header .container-topbar .shada-phone-button { width: 174px !important; min-width: 174px !important; max-width: 174px !important; height: 45px !important; min-height: 45px !important; max-height: 45px !important; padding: 6px 9px !important; border-radius: 12px !important; font-size: 18px !important; line-height: 1 !important; gap: 6px !important; } /* Phone number and icon. */ html body .container-header .container-topbar .shada-phone-button *, html body .container-header .container-topbar .shada-phone-icon, html body .container-header .container-topbar .shada-phone-number { font-size: 18px !important; line-height: 1 !important; } /* SHADA-HEADER-BALANCE-R9E END */ /* SHADA-LANGUAGE-ALIGN-MOBILE-R10 START */ /* * Selector: * 96px × 28px * text 11px * flag 18px × 12px * * Desktop: * centred directly beneath the phone control. * * Mobile: * opened menu is displayed as a viewport-level * portal to prevent header clipping. */ html body .container-header .container-topbar, html body .container-header .container-topbar > *, html body .container-header .container-topbar #mod-languages138 { overflow: visible !important; } /* Compact selector dimensions at all screen sizes. */ html body .container-header #shada-language-selector-138 { --shada-language-r10-width: 96px; --shada-language-r10-height: 28px; --shada-language-r10-radius: 8px; box-sizing: border-box !important; width: var(--shada-language-r10-width) !important; min-width: var(--shada-language-r10-width) !important; max-width: var(--shada-language-r10-width) !important; height: var(--shada-language-r10-height) !important; min-height: var(--shada-language-r10-height) !important; max-height: var(--shada-language-r10-height) !important; margin: 0 !important; padding: 0 !important; overflow: visible !important; z-index: 15000 !important; } html body .container-header #shada-language-selector-138 > .shada-language-selector__toggle { box-sizing: border-box !important; display: flex !important; align-items: center !important; justify-content: center !important; gap: 4px !important; width: var(--shada-language-r10-width) !important; min-width: var(--shada-language-r10-width) !important; max-width: var(--shada-language-r10-width) !important; height: var(--shada-language-r10-height) !important; min-height: var(--shada-language-r10-height) !important; max-height: var(--shada-language-r10-height) !important; margin: 0 !important; padding: 0 5px !important; border-radius: var(--shada-language-r10-radius) !important; font-size: 11px !important; line-height: 1 !important; overflow: hidden !important; } html body .container-header #shada-language-selector-138 .shada-language-selector__current, html body .container-header #shada-language-selector-138 .shada-language-selector__label, html body .container-header #shada-language-selector-138 .shada-language-selector__item, html body .container-header #shada-language-selector-138 .shada-language-selector__item span { font-size: 11px !important; font-weight: 700 !important; line-height: 1 !important; } /* Matching compact flags. */ html body .container-header #shada-language-selector-138 img, body > .shada-language-selector__menu--portal img { display: block !important; flex: 0 0 18px !important; width: 18px !important; min-width: 18px !important; max-width: 18px !important; height: 12px !important; min-height: 12px !important; max-height: 12px !important; margin: 0 !important; padding: 0 !important; object-fit: cover !important; border-radius: 2px !important; } /* * Centre the selector beneath the phone column * on desktop and larger tablet layouts. */ @media (min-width: 992px) { html body .container-header .container-topbar #shada-language-selector-138 { grid-column: 2 !important; grid-row: 2 !important; justify-self: center !important; align-self: center !important; } } /* * Retain its top-right mobile-header location while * using the smaller dimensions. */ @media (max-width: 991.98px) { html body .container-header .container-topbar #shada-language-selector-138 { justify-self: end !important; align-self: center !important; } } /* * Mobile portal menu. * * The script moves the opened UL directly under BODY. * It therefore cannot be clipped by the white header, * module wrappers, or the teal mobile navigation. */ body > .shada-language-selector__menu--portal { box-sizing: border-box !important; display: block !important; position: fixed !important; right: auto !important; bottom: auto !important; width: 96px !important; min-width: 96px !important; max-width: 96px !important; height: auto !important; min-height: 28px !important; max-height: none !important; margin: 0 !important; padding: 0 !important; border: 1.5px solid rgba(0, 132, 137, 0.72) !important; border-radius: 8px !important; background: #ffffff !important; overflow: visible !important; opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; box-shadow: 0 8px 22px rgba(15, 65, 68, 0.22) !important; transform: none !important; z-index: 2147483000 !important; } body > .shada-language-selector__menu--portal[hidden] { display: none !important; } body > .shada-language-selector__menu--portal > li { box-sizing: border-box !important; display: block !important; width: 100% !important; height: 28px !important; margin: 0 !important; padding: 0 !important; list-style: none !important; } body > .shada-language-selector__menu--portal > li > a { box-sizing: border-box !important; display: flex !important; align-items: center !important; justify-content: center !important; gap: 4px !important; width: 100% !important; height: 28px !important; margin: 0 !important; padding: 0 5px !important; border: 0 !important; border-radius: 7px !important; background: #ffffff !important; color: #087d82 !important; font-size: 11px !important; font-weight: 700 !important; line-height: 1 !important; text-align: center !important; text-decoration: none !important; white-space: nowrap !important; pointer-events: auto !important; } body > .shada-language-selector__menu--portal > li > a:hover, body > .shada-language-selector__menu--portal > li > a:focus { background: rgba(0, 132, 137, 0.08) !important; } /* SHADA-LANGUAGE-ALIGN-MOBILE-R10 END */ /* SHADA-MOBILE-BRANDING-R16 START */ /* * Mobile-only Persian branding, based on the former live header: * large centred wording with the Shada bird/S on the physical right. * Desktop begins at 601px and is intentionally untouched. */ @media (max-width: 600px) { html[lang^="fa"] body .container-header .container-topbar { min-height: 122px !important; padding: 14px 12px !important; grid-template-columns: minmax(0, 1fr) !important; justify-items: center !important; align-items: center !important; } html[lang^="fa"] body .container-header .container-topbar #mod-custom121, html[lang^="fa"] body .container-header .shada-site-header, html[lang^="fa"] body .container-header .shada-site-header-inner { box-sizing: border-box !important; width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important; } html[lang^="fa"] body .container-header .container-topbar #mod-custom121 { grid-column: 1 / -1 !important; justify-self: stretch !important; } html[lang^="fa"] body .container-header .shada-site-header-inner { display: flex !important; align-items: center !important; justify-content: center !important; } html[lang^="fa"] body .container-header .shada-header-logo--fa { box-sizing: border-box !important; display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: center !important; gap: clamp(10px, 3.2vw, 16px) !important; width: 100% !important; max-width: 370px !important; min-width: 0 !important; margin: 0 auto !important; padding: 0 !important; direction: ltr !important; text-align: center !important; transform: none !important; } html[lang^="fa"] body .container-header .shada-header-logo--fa .shada-header-logo-fa__text { order: 1 !important; display: block !important; flex: 0 1 auto !important; margin: 0 !important; padding: 0 !important; color: #087f83 !important; font-family: "ShadaIRANSans", Arial, sans-serif !important; font-size: clamp(22px, 6.4vw, 28px) !important; font-weight: 700 !important; line-height: 1.25 !important; direction: rtl !important; text-align: center !important; white-space: nowrap !important; } html[lang^="fa"] body .container-header .shada-header-logo--fa .shada-header-logo-fa__icon { order: 2 !important; display: block !important; flex: 0 0 clamp(62px, 17vw, 72px) !important; width: clamp(62px, 17vw, 72px) !important; min-width: clamp(62px, 17vw, 72px) !important; max-width: clamp(62px, 17vw, 72px) !important; height: clamp(62px, 17vw, 72px) !important; min-height: clamp(62px, 17vw, 72px) !important; max-height: clamp(62px, 17vw, 72px) !important; margin: 0 !important; padding: 0 !important; object-fit: contain !important; transform: none !important; } } /* SHADA-MOBILE-BRANDING-R16 END */ /* SHADA-MOBILE-HEADER-R20 START */ /* * This rule lives in the established R8 asset, which is present * in the rendered page. It affects only screens below 992px. */ @media (max-width: 991.98px) { html[lang^="fa"] body .container-header .container-topbar.container-topbar { position: relative !important; min-height: 122px !important; overflow: visible !important; } html[lang^="fa"] body .container-header .container-topbar.container-topbar .shada-site-header, html[lang^="fa"] body .container-header .container-topbar.container-topbar .shada-site-header-inner { position: static !important; } /* Full-width physical positioning, independent of RTL flow. */ html[lang^="fa"] body .container-header .container-topbar.container-topbar .shada-header-logo.shada-header-logo--fa { box-sizing: border-box !important; position: absolute !important; inset: 0 !important; top: 0 !important; right: 0 !important; bottom: 0 !important; left: 0 !important; display: block !important; width: 100% !important; min-width: 0 !important; max-width: none !important; height: 100% !important; margin: 0 !important; padding: 0 !important; direction: ltr !important; transform: none !important; overflow: visible !important; z-index: 40 !important; } /* Persian wording is centred in the left/middle brand area. */ html[lang^="fa"] body .container-header .container-topbar.container-topbar .shada-header-logo.shada-header-logo--fa .shada-header-logo-fa__text.shada-header-logo-fa__text { box-sizing: border-box !important; position: absolute !important; top: 50% !important; right: auto !important; bottom: auto !important; left: 41% !important; display: block !important; width: max-content !important; min-width: 0 !important; max-width: calc(100vw - 150px) !important; margin: 0 !important; padding: 0 !important; color: #087f83 !important; -webkit-text-fill-color: #087f83 !important; font-family: "ShadaIRANSans", Arial, sans-serif !important; font-size: clamp(18px, 5vw, 42px) !important; font-weight: 700 !important; line-height: 1.2 !important; direction: rtl !important; text-align: center !important; white-space: nowrap !important; float: none !important; translate: none !important; transform: translate(-50%, -50%) !important; } /* The S is anchored to the physical right of the viewport. */ html[lang^="fa"] body .container-header .container-topbar.container-topbar .shada-header-logo.shada-header-logo--fa .shada-header-logo-fa__icon.shada-header-logo-fa__icon { box-sizing: border-box !important; position: absolute !important; top: 50% !important; right: clamp(20px, 6vw, 60px) !important; bottom: auto !important; left: auto !important; display: block !important; width: clamp(64px, 16vw, 126px) !important; min-width: clamp(64px, 16vw, 126px) !important; max-width: clamp(64px, 16vw, 126px) !important; height: clamp(64px, 16vw, 126px) !important; min-height: clamp(64px, 16vw, 126px) !important; max-height: clamp(64px, 16vw, 126px) !important; margin: 0 !important; padding: 0 !important; float: none !important; translate: none !important; transform: translateY(-50%) !important; object-fit: contain !important; } /* Retain the close-button clearance using higher specificity. */ html body .shada-mobile-menu-drawer.shada-mobile-menu-drawer { position: fixed !important; padding-top: 18px !important; } html body .shada-mobile-menu-drawer.shada-mobile-menu-drawer .shada-mobile-menu-close.shada-mobile-menu-close { position: absolute !important; top: 18px !important; right: 18px !important; left: auto !important; margin: 0 !important; z-index: 30 !important; } html body .shada-mobile-menu-drawer.shada-mobile-menu-drawer .shada-mobile-language-switcher.shada-mobile-language-switcher { box-sizing: border-box !important; position: relative !important; width: 100% !important; margin: 76px auto 16px !important; clear: both !important; z-index: 5 !important; } } /* SHADA-MOBILE-HEADER-R20 END */ /* SHADA-PERSIAN-DESKTOP-MENU-R23 START */ /* * Retain the compact English desktop dropdown proportions while giving the * Persian dropdown a very light blue-grey surface and English-style row * separators. Persian RTL alignment and single-line labels remain unchanged. */ @media (min-width: 992px) { html[lang^="fa"] body .container-header .container-nav > .mod-menu .mod-menu__sub { box-sizing: border-box !important; width: max-content !important; min-width: 16rem !important; max-width: none !important; background-color: #f7fafb !important; } html[lang^="fa"] body .container-header .container-nav > .mod-menu .mod-menu__sub > li { margin: 0 !important; border-bottom: 1px solid #e1eaec !important; } html[lang^="fa"] body .container-header .container-nav > .mod-menu .mod-menu__sub > li:last-child { border-bottom: 0 !important; } html[lang^="fa"] body .container-header .container-nav > .mod-menu .mod-menu__sub > li > a { display: block !important; box-sizing: border-box !important; padding: .5rem 1rem !important; font-size: 1rem !important; font-weight: 400 !important; line-height: 1.5 !important; text-align: right !important; white-space: nowrap !important; background-color: #f7fafb !important; } html[lang^="fa"] body .container-header .container-nav > .mod-menu .mod-menu__sub > li > a:hover, html[lang^="fa"] body .container-header .container-nav > .mod-menu .mod-menu__sub > li > a:focus-visible { background-color: #edf4f5 !important; } } /* SHADA-PERSIAN-DESKTOP-MENU-R23 END */ /* SHADA-FRONTEND-STABILITY-R4 START */ /* * Keep the desktop navigation within its full-width header parent. This * overrides the audited legacy 100vw rule without global overflow clipping. */ @media (min-width: 992px) { html body .container-header .container-nav { box-sizing: border-box !important; width: 100% !important; max-width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; } } /* * .site-grid is a wrapper below body in the live Cassiopeia markup. Target * its direct footer child, neutralise the legacy 100vw margins and span the * existing full-start/full-end grid lines. */ html body .site-grid > .grid-child.container-bottom-a:has(.shada-global-footer) { box-sizing: border-box !important; grid-column: full-start / full-end !important; width: auto !important; min-width: 0 !important; max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; } /* SHADA-FRONTEND-STABILITY-R4 END */ /* SHADA-MOBILE-DRAWER-LANGUAGE-R13C START */ /* * Mobile drawer language options: * * 132px × 42px * 14px dark-teal text * 22px × 14px flags * * Desktop language selector is not affected. */ @media (max-width: 991.98px) { html body .shada-mobile-menu-drawer .shada-mobile-language-switcher { box-sizing: border-box !important; display: grid !important; grid-template-columns: repeat(2, 132px) !important; justify-content: center !important; align-items: center !important; gap: 10px !important; width: 100% !important; margin: 2px 0 14px !important; padding: 0 0 14px !important; direction: ltr !important; } html body .shada-mobile-menu-drawer .shada-mobile-language-option { box-sizing: border-box !important; display: flex !important; align-items: center !important; justify-content: center !important; gap: 7px !important; width: 132px !important; min-width: 132px !important; max-width: 132px !important; height: 42px !important; min-height: 42px !important; max-height: 42px !important; margin: 0 !important; padding: 5px 8px !important; border: 2px solid rgba( 255, 255, 255, 0.92 ) !important; border-radius: 11px !important; background: #ffffff !important; color: #075d61 !important; -webkit-text-fill-color: #075d61 !important; font-size: 14px !important; font-weight: 700 !important; line-height: 1 !important; text-align: center !important; text-decoration: none !important; text-shadow: none !important; white-space: nowrap !important; opacity: 1 !important; visibility: visible !important; overflow: visible !important; } html body .shada-mobile-menu-drawer .shada-mobile-language-option.is-current { border-color: #9fcacc !important; background: #e8f3f3 !important; color: #075d61 !important; -webkit-text-fill-color: #075d61 !important; } html body .shada-mobile-menu-drawer a.shada-mobile-language-option.is-alternative { background: #ffffff !important; color: #075d61 !important; -webkit-text-fill-color: #075d61 !important; cursor: pointer !important; } html body .shada-mobile-menu-drawer a.shada-mobile-language-option.is-alternative:hover, html body .shada-mobile-menu-drawer a.shada-mobile-language-option.is-alternative:focus { border-color: #87bfc2 !important; background: #effafa !important; color: #054f53 !important; -webkit-text-fill-color: #054f53 !important; outline: none !important; } /* * Override the mobile drawer's global white-text * rules for both language labels. */ html body .shada-mobile-menu-drawer .shada-mobile-language-label, html body .shada-mobile-menu-drawer .shada-mobile-language-option .shada-mobile-language-label { display: inline-block !important; width: auto !important; min-width: 0 !important; max-width: none !important; margin: 0 !important; padding: 0 !important; color: #075d61 !important; -webkit-text-fill-color: #075d61 !important; font-size: 14px !important; font-weight: 700 !important; line-height: 1 !important; text-align: center !important; text-shadow: none !important; white-space: nowrap !important; opacity: 1 !important; visibility: visible !important; overflow: visible !important; text-overflow: clip !important; } html body .shada-mobile-menu-drawer .shada-mobile-language-option[ lang="en" ] { direction: ltr !important; font-family: Arial, sans-serif !important; } html body .shada-mobile-menu-drawer .shada-mobile-language-option[ lang="fa" ] { direction: rtl !important; font-family: "ShadaIRANSans", Arial, sans-serif !important; } html body .shada-mobile-menu-drawer .shada-mobile-language-flag { box-sizing: border-box !important; display: block !important; flex: 0 0 22px !important; width: 22px !important; min-width: 22px !important; max-width: 22px !important; height: 14px !important; min-height: 14px !important; max-height: 14px !important; margin: 0 !important; padding: 0 !important; border-radius: 2px !important; object-fit: cover !important; opacity: 1 !important; visibility: visible !important; } } /* SHADA-MOBILE-DRAWER-LANGUAGE-R13C END */ /* SHADA-MOBILE-HEADER-R17 START */ /* * One mobile breakpoint shared with the existing Shada drawer. * Desktop begins at 992px and is not changed by this file. */ @media (max-width: 991.98px) { /* -------------------------------------------------------- FARSI MOBILE BRANDING — LIVE-SITE ARRANGEMENT -------------------------------------------------------- */ html[lang^="fa"] body .container-header .container-topbar { position: relative !important; min-height: 122px !important; padding: 12px !important; overflow: visible !important; } /* * Centre the branding against the physical viewport rather * than against the desktop header grid. This reproduces the * former live mobile header regardless of RTL page direction. */ html[lang^="fa"] body .container-header .shada-header-logo--fa { box-sizing: border-box !important; position: absolute !important; top: 50% !important; left: 50% !important; right: auto !important; display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: center !important; gap: clamp(16px, 3vw, 32px) !important; width: max-content !important; min-width: 0 !important; max-width: calc(100vw - 40px) !important; margin: 0 !important; padding: 0 !important; direction: ltr !important; text-align: center !important; transform: translate(-50%, -50%) !important; z-index: 40 !important; } html[lang^="fa"] body .container-header .shada-header-logo--fa .shada-header-logo-fa__text { order: 1 !important; display: block !important; flex: 0 1 auto !important; margin: 0 !important; padding: 0 !important; color: #087f83 !important; -webkit-text-fill-color: #087f83 !important; font-family: "ShadaIRANSans", Arial, sans-serif !important; font-size: clamp(24px, 5.3vw, 46px) !important; font-weight: 700 !important; line-height: 1.2 !important; direction: rtl !important; text-align: center !important; white-space: nowrap !important; } html[lang^="fa"] body .container-header .shada-header-logo--fa .shada-header-logo-fa__icon { order: 2 !important; display: block !important; flex: 0 0 clamp(72px, 13vw, 126px) !important; width: clamp(72px, 13vw, 126px) !important; min-width: clamp(72px, 13vw, 126px) !important; max-width: clamp(72px, 13vw, 126px) !important; height: clamp(72px, 13vw, 126px) !important; min-height: clamp(72px, 13vw, 126px) !important; max-height: clamp(72px, 13vw, 126px) !important; margin: 0 !important; padding: 0 !important; object-fit: contain !important; transform: none !important; } /* -------------------------------------------------------- DRAWER CLOSE BUTTON AND LANGUAGE CONTROLS -------------------------------------------------------- */ html body .shada-mobile-menu-drawer { position: fixed !important; padding-top: 18px !important; } html body .shada-mobile-menu-drawer .shada-mobile-menu-close { position: absolute !important; top: 18px !important; right: 18px !important; left: auto !important; margin: 0 !important; z-index: 20 !important; } /* * The close button is absolute, so reserve its own top row. * The language controls begin below it and cannot cover it. */ html body .shada-mobile-menu-drawer .shada-mobile-language-switcher { box-sizing: border-box !important; width: 100% !important; margin: 76px auto 16px !important; padding: 0 0 14px !important; clear: both !important; position: relative !important; z-index: 5 !important; } } /* SHADA-MOBILE-HEADER-R17 END */ /* SHADA-MOBILE-HEADER-R18 START */ /* * Correct the Farsi mobile logo composition only. * Desktop begins at 992px and is not affected. */ @media (max-width: 991.98px) { html[lang^="fa"] body .container-header .shada-header-logo--fa { box-sizing: border-box !important; display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; align-items: center !important; justify-content: center !important; gap: clamp(14px, 4vw, 28px) !important; width: calc(100vw - 48px) !important; min-width: 0 !important; max-width: 860px !important; direction: ltr !important; overflow: visible !important; } /* * Older header CSS positioned one or both children outside * normal flex flow. Reset those coordinates so flex order is * actually visible: text first, S second (physical right). */ html[lang^="fa"] body .container-header .shada-header-logo--fa .shada-header-logo-fa__text { position: static !important; inset: auto !important; top: auto !important; right: auto !important; bottom: auto !important; left: auto !important; order: 1 !important; flex: 0 1 auto !important; min-width: 0 !important; float: none !important; translate: none !important; transform: none !important; margin: 0 !important; text-align: center !important; white-space: nowrap !important; } html[lang^="fa"] body .container-header .shada-header-logo--fa .shada-header-logo-fa__icon { position: static !important; inset: auto !important; top: auto !important; right: auto !important; bottom: auto !important; left: auto !important; order: 2 !important; flex: 0 0 clamp(72px, 13vw, 126px) !important; float: none !important; translate: none !important; transform: none !important; margin: 0 !important; object-fit: contain !important; } } /* SHADA-MOBILE-HEADER-R18 END */ /* === SHADA MOBILE HEADER CLEARANCE + POINTSVIEW POLISH V1 START === */ /* * Mobile only. * Desktop >= 992px is deliberately untouched. */ /* * The mobile navigation shell is inserted immediately * after the Joomla header. Give the English logo enough * white-header clearance so the teal control strip no * longer covers its lower edge. */ @media (max-width: 600px) { html[lang^="en"] body.site header.header.container-header.full-width { padding-bottom: 24px !important; } } @media (min-width: 601px) and (max-width: 991.98px) { html[lang^="en"] body.site header.header.container-header.full-width { padding-bottom: 14px !important; } } /* * Compact PointsView treatment inside the mobile drawer. * Keep the CTA and supporting description, but make it * read like a refined menu action instead of a large card. */ @media (max-width: 991.98px) { .shada-mobile-menu-drawer .shada-mobile-pointsview-cta-item { box-sizing: border-box !important; width: 100% !important; margin: .22rem 0 .48rem !important; padding: 0 !important; border: 0 !important; list-style: none !important; } .shada-mobile-menu-drawer .shada-mobile-pointsview-cta { box-sizing: border-box !important; position: relative !important; display: block !important; width: 100% !important; min-height: 0 !important; margin: 0 !important; padding: .62rem 2.15rem .60rem .72rem !important; border: 1px solid rgba(255,255,255,.20) !important; border-radius: 7px !important; background: rgba(255,255,255,.065) !important; color: #ffffff !important; box-shadow: none !important; text-decoration: none !important; } .shada-mobile-menu-drawer .shada-mobile-pointsview-cta::after { content: "›" !important; position: absolute !important; top: 50% !important; right: .72rem !important; transform: translateY(-50%) !important; color: rgba(255,255,255,.76) !important; font-family: Arial, sans-serif !important; font-size: 1.35rem !important; font-weight: 400 !important; line-height: 1 !important; } .shada-mobile-menu-drawer .shada-mobile-pointsview-cta:hover, .shada-mobile-menu-drawer .shada-mobile-pointsview-cta:focus-visible, .shada-mobile-menu-drawer .shada-mobile-pointsview-cta:active { border-color: rgba(255,255,255,.30) !important; background: rgba(255,255,255,.10) !important; color: #ffffff !important; } .shada-mobile-menu-drawer .shada-mobile-pointsview-cta__label { display: block !important; margin: 0 !important; color: #ffffff !important; font-size: .96rem !important; font-weight: 760 !important; line-height: 1.18 !important; } .shada-mobile-menu-drawer .shada-mobile-pointsview-cta__description { display: block !important; margin: .14rem 0 0 !important; color: rgba(255,255,255,.72) !important; font-size: .70rem !important; font-weight: 500 !important; line-height: 1.24 !important; } } /* === SHADA MOBILE HEADER CLEARANCE + POINTSVIEW POLISH V1 END === */ /* SHADA-PERFORMANCE-STAGE2I-TINY-CRITICAL-CSS START */ /* Joomla Cassiopeia standard colour variables */ :root{--cassiopeia-color-primary:#112855;--cassiopeia-color-link:#224faa;--link-color:#224faa;--link-color-rgb:34, 79, 170;--cassiopeia-color-hover:#424077;--link-hover-color:#424077;--link-hover-color-rgb:66, 64, 119} /* Joomla mod_menu critical submenu state */ :where(.mod-menu__toggle-sub){color:currentColor;background-color:#0000;border:none;align-items:center;padding:0;display:inline-flex;&[aria-expanded=true] .icon-chevron-down{transform:rotate(180deg)}}:where(.mod-menu [class*=icon-]){margin-inline-start:.5rem;transition:all .2s,background-color .2s}:where(.mod-menu__sub[aria-hidden=true]){display:none}:where(.mod-menu__sub[aria-hidden=false]){display:block} /* SHADA-PERFORMANCE-STAGE2I-TINY-CRITICAL-CSS END */