/* ================================================================= ANTI-FLASH: Hide translatable elements until i18n.js applies translations. The i18n-loading class is added to by the inline anti-flash script when the user has selected a non-Turkish language. It is removed by i18n.js after translations are applied. Using visibility:hidden (not display:none) preserves layout so there is no content jump. ================================================================= */ html.i18n-loading [data-i18n], html.i18n-loading [data-i18n-html] { visibility: hidden !important; } /* ================================================================= LANGUAGE SWITCHER (Astra Header / Dashboard Integration) Standalone CSS — isolated with high specificity & !important overrides ================================================================= */ .ielts-lang-switcher { position: relative !important; display: inline-flex !important; align-items: center !important; z-index: 100 !important; font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif !important; } /* Base button styling overrides theme global buttons */ .ielts-lang-switcher .ielts-lang-switcher-btn, .monsfer-header-actions .ielts-lang-switcher-btn { display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 6px !important; padding: 8px 16px !important; border: 1px solid rgba(0, 0, 0, 0.08) !important; border-radius: 9999px !important; /* matches var(--radius-pill) / capsule */ background: #ffffff !important; color: #475569 !important; /* slate-600 */ cursor: pointer !important; font-family: inherit !important; font-size: 13px !important; font-weight: 600 !important; transition: all 0.2s ease !important; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05) !important; line-height: 1.2 !important; height: auto !important; min-height: unset !important; text-transform: none !important; letter-spacing: normal !important; margin: 0 !important; width: auto !important; } /* Hover state overrides */ .ielts-lang-switcher .ielts-lang-switcher-btn:hover, .monsfer-header-actions .ielts-lang-switcher-btn:hover { background: #f8fafc !important; /* slate-50 */ color: #1e293b !important; /* slate-800 */ border-color: rgba(0, 0, 0, 0.15) !important; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.08) !important; } /* Active/Open dropdown state */ .ielts-lang-switcher.open .ielts-lang-switcher-btn { border-color: #2563eb !important; /* brand-primary */ background: #f8fafc !important; color: #1e293b !important; box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1) !important; } /* Inner elements */ .ielts-lang-flag { font-size: 15px !important; line-height: 1 !important; display: inline-block !important; } .ielts-lang-label { letter-spacing: normal !important; font-size: 13px !important; font-weight: 600 !important; } .ielts-lang-chevron { transition: transform 0.2s ease !important; opacity: 0.6 !important; stroke-width: 2.5 !important; margin-left: 2px !important; stroke: currentColor !important; fill: none !important; display: inline-block !important; vertical-align: middle !important; } .ielts-lang-switcher.open .ielts-lang-chevron { transform: rotate(180deg) !important; } /* Dropdown menu overrides */ .ielts-lang-switcher .ielts-lang-dropdown { position: absolute !important; top: calc(100% + 6px) !important; right: 0 !important; display: none; flex-direction: column !important; min-width: 140px !important; padding: 6px !important; border: 1px solid rgba(0, 0, 0, 0.08) !important; border-radius: 12px !important; background: #ffffff !important; box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.05) !important; animation: ieltsLangDropIn 0.15s ease-out !important; z-index: 9999 !important; } @keyframes ieltsLangDropIn { from { opacity: 0; transform: translateY(-6px) scale(0.97); } to { opacity: 1; transform: translateY(0) scale(1); } } /* Dropdown option overrides */ .ielts-lang-switcher .ielts-lang-option { display: flex !important; align-items: center !important; gap: 8px !important; width: 100% !important; padding: 8px 12px !important; border: none !important; border-radius: 8px !important; background: transparent !important; cursor: pointer !important; font-family: inherit !important; font-size: 13px !important; font-weight: 500 !important; color: #475569 !important; transition: all 0.15s ease !important; text-align: left !important; text-transform: none !important; letter-spacing: normal !important; margin: 0 !important; } .ielts-lang-switcher .ielts-lang-option:hover { background: rgba(37, 99, 235, 0.06) !important; color: #2563eb !important; } .ielts-lang-switcher .ielts-lang-option.active { background: rgba(37, 99, 235, 0.08) !important; color: #2563eb !important; font-weight: 600 !important; } .ielts-lang-option-flag { font-size: 18px !important; line-height: 1 !important; } .ielts-lang-option-name { flex: 1 !important; } /* Mobile adjustments */ @media (max-width: 768px) { .ielts-lang-switcher .ielts-lang-switcher-btn, .monsfer-header-actions .ielts-lang-switcher-btn { padding: 6px 12px !important; font-size: 12px !important; border-radius: 9999px !important; } .ielts-lang-flag { font-size: 14px !important; } .ielts-lang-switcher .ielts-lang-dropdown { min-width: 130px !important; } } /* ================================================================= GOOGLE TRANSLATE WIDGET HIDING & OVERRIDES ================================================================= */ .goog-te-banner-frame, .goog-te-banner-frame.skiptranslate, iframe.goog-te-banner-frame, .goog-te-balloon-frame { display: none !important; } body { top: 0 !important; } #goog-gt-tt { display: none !important; visibility: hidden !important; } .goog-text-highlight { background-color: transparent !important; box-shadow: none !important; }