/* ============================================================
   Akbar Training Center Translator v2.3.0
   Widget is now JS-injected with inline styles.
   This CSS handles: RTL overrides, GT suppression, animations,
   and Arabic content blocks. No layout-critical rules here.
   ============================================================ */

/* ---- Google Translate UI suppression ---- */
.goog-te-banner-frame,
.goog-te-banner-frame.skiptranslate,
iframe.goog-te-menu-frame,
#goog-gt-tt,
.goog-te-balloon-frame { display: none !important; }
body { top: 0 !important; }
.goog-tooltip         { display: none !important; }
.goog-te-spinner-pos  { display: none !important; }
.goog-te-gadget-icon  { display: none !important; }
.goog-te-gadget       { font-size: 0 !important; }
.goog-logo-link       { display: none !important; }
font[size="1"]        { display: none !important; }
.goog-text-highlight  { background: none !important; box-shadow: none !important; }

/* ---- RTL body class ---- */
body.akbar-rtl {
    direction: rtl;
}

/* Keep widget always in LTR even when body is RTL */
#atc-trans-widget,
#atc-topbar {
    direction: ltr !important;
}

/* ---- Arabic content blocks ---- */
.akbar-content-ar {
    direction: rtl;
    text-align: right;
    font-family: 'Segoe UI', 'Cairo', 'Tajawal', 'Noto Sans Arabic', sans-serif;
}

/* ---- Scrollbar for language list ---- */
#atc-lang-list::-webkit-scrollbar { width: 5px; }
#atc-lang-list::-webkit-scrollbar-track { background: transparent; }
#atc-lang-list::-webkit-scrollbar-thumb { background: #c0cde0; border-radius: 3px; }

/* ---- Search focus ring ---- */
#atc-search:focus {
    border-color: #1a3c6e !important;
    box-shadow: 0 0 0 3px rgba(26,60,110,.1) !important;
}

/* ---- Button hover (CSS hover for smoothness) ---- */
#atc-btn:hover {
    transform: translateY(-2px) scale(1.04) !important;
    box-shadow: 0 8px 28px rgba(26,60,110,.55) !important;
    background: #235091 !important;
}
#atc-btn:active { transform: scale(.97) !important; }
#atc-btn:focus-visible {
    outline: 3px solid #c9942a !important;
    outline-offset: 3px !important;
}

/* ---- Mobile ---- */
@media (max-width: 600px) {
    #atc-dropdown { width: 260px !important; }
}