/* ═══════════════════════════════════════════════════
   FXDetails Layout v6.0.0
   ForexFactory-Inspired: Header, Nav, Grid, Footer
   ═══════════════════════════════════════════════════ */

/* ══════════════════════════════════════
   GENERATEPRESS OVERRIDES — AGGRESSIVE
   Kill ALL white backgrounds from parent
   ══════════════════════════════════════ */

/* Page-level containers */
#page,
.site,
.site-content,
#content,
.container,
.grid-container,
.inside-page-header {
    background: transparent !important;
    background-color: transparent !important;
}

.site-content,
#content {
    display: block !important;
    max-width: none !important;
    padding: 0 !important;
}

/* Article containers */
.inside-article,
.site-main,
article,
.entry-content,
.page-content {
    padding: 0 !important;
    margin: 0 !important;
    max-width: none !important;
    width: 100% !important;
    background: transparent !important;
    background-color: transparent !important;
}

/* GP separate-containers layout */
.separate-containers .inside-article,
.separate-containers .comments-area,
.separate-containers .page-header,
.separate-containers .paging-navigation,
.one-container .site-content {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    margin-bottom: 0 !important;
}

#primary {
    width: 100% !important;
    max-width: none !important;
}

.grid-container {
    max-width: var(--fx-max-width) !important;
}

/* Hide GP's default entry header and right sidebar */
body.home .entry-header,
body.archive .entry-header,
body.single .entry-header,
body.search .entry-header {
    display: none !important;
}

body.home #right-sidebar,
body.archive #right-sidebar,
body.single #right-sidebar,
body.search #right-sidebar {
    display: none !important;
}

/* Any remaining GP white backgrounds */
.page-header,
.gen-sidebar-nav,
.widget-area,
#secondary {
    background: transparent !important;
}

/* ══════════════════════════════════════
   HEADER — Professional dark trading bar
   ══════════════════════════════════════ */

.site-header {
    background: linear-gradient(to bottom, #37548a, #283e66) !important;
    border-bottom: 4px solid var(--fx-accent) !important;
    padding: 0 !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
    /* Phase 8 (owner sign-off): truly sticky — GeneratePress forces
       position:relative, so !important is required. Keeps the nav (and the
       mobile hamburger) always reachable while scrolling. */
    position: sticky !important;
    top: 0 !important;
    /* Must sit ABOVE the drawer scrim (z 998): the mobile drawer <ul> lives
       INSIDE this header, so making the header sticky turned it into a stacking
       context — at z-index:100 the body-level scrim covered the open menu and
       swallowed every tap. 1000 keeps the header (and the drawer it contains)
       above the scrim while the scrim still dims the page content below. */
    z-index: 1000;
}

.inside-header {
    max-width: var(--fx-max-width);
    margin: 0 auto;
    padding: 0 var(--fx-sp-4) !important;
    display: flex !important;
    align-items: center;
    /* Uniform vertical centering */
    flex-wrap: nowrap !important;
    height: 50px;
    /* Fixed height, no stretching */
}

/* Logo / Branding — compact, angled like FF */
.site-branding {
    flex-shrink: 0;
    margin-right: 0 !important;
    background: linear-gradient(#37548a, #283e66);
    padding: 0 45px 0 20px;
    clip-path: polygon(0 0, 100% 0, calc(100% - 27px) 100%, 0 100%);
    display: flex;
    align-items: center;
    height: 100%;
    /* Fill the 50px header */
}

.site-header .main-title,
.site-header .site-title {
    margin: 0 !important;
    font-size: 16px !important;
    line-height: 1 !important;
    white-space: nowrap;
}

/* Truncate branding to just "FXDetails" — hide the long subtitle */
.site-header .site-title a,
.site-header .main-title a {
    color: #ffffff !important;
    font-weight: 700;
    text-decoration: none !important;
    font-family: var(--fx-font);
    font-size: 16px !important;
    letter-spacing: -0.3px;
    display: block;
    /* Crop guards against the full site-title string ever rendering here,
       but 80px sheared 2px off the final "s" of FXDetails — keep headroom. */
    max-width: 92px;
    overflow: hidden;
    text-overflow: clip;
    white-space: nowrap;
}

/* Accent "FX" span */
.fxd-brand-fx {
    color: #7dbb42;
    /* FF Green accent on the FX */
    background: transparent !important;
    padding: 0;
    font-size: 16px !important;
}

.site-header .site-description {
    display: none !important;
}

/* Hide uploaded custom logo image — use styled text logo instead */
.site-branding-container .site-logo {
    display: none !important;
}

.header-image {
    margin: 0 !important;
}

/* ══════════════════════════════════════
   NAVIGATION — FF-style tabs with dots
   ══════════════════════════════════════ */

.inside-header .main-navigation {
    flex: 1;
    background: transparent !important;
    border: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.main-navigation {
    background: transparent !important;
    border-bottom: none !important;
}

.main-navigation .inside-navigation,
.inside-header .main-navigation .inside-navigation {
    max-width: none;
    margin: 0;
    padding: 0 !important;
    width: 100%;
    /* Fill navigation container */
}

#primary-menu,
.main-navigation .main-nav {
    width: 100% !important;
    /* Fill inside-navigation */
}

.main-navigation .main-nav>ul {
    display: flex !important;
    align-items: stretch;
    flex-wrap: nowrap;
    justify-content: flex-start;
    /* Changed from flex-end so margin-left:auto works */
    width: 100%;
    /* Fill the navigation container */
    gap: 0;
}

.main-navigation .main-nav ul li {
    position: relative;
    white-space: nowrap;
}

/* ── Nav links with separators ── */
.main-navigation .main-nav>ul>li>a {
    background: transparent !important;
    color: #dde4ec !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    font-family: var(--fx-font) !important;
    padding: 0 18px !important;
    text-transform: none;
    letter-spacing: 0;
    transition: background 0.15s ease, color 0.15s ease;
    line-height: 50px !important;
    /* Match header height for vertical centering */
    height: 50px;
    border-right: 1px solid rgba(255, 255, 255, 0.1) !important;
    position: relative;
    display: flex !important;
    align-items: center;
    gap: 6px;
}

.main-navigation .main-nav>ul>li:first-child>a {
    border-left: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.main-navigation .main-nav>ul>li>a:hover,
.main-navigation .main-nav>ul>li.current-menu-item>a,
.main-navigation .main-nav>ul>li.current-menu-parent>a {
    background: transparent !important;
    color: #ffffff !important;
}

/* Active indicator bar - Top Border instead of bottom */
.main-navigation .main-nav>ul>li.current-menu-item>a::after,
.main-navigation .main-nav>ul>li.current-menu-parent>a::after {
    content: '';
    position: absolute;
    top: -27px;
    /* Align to the top of the header container */
    left: 0;
    right: 0;
    height: 3px;
    background: #37548a;
    /* FF typical active tab accent color */
    display: none;
    /* FF usually places the active tab indicator on the content area, keeping this hidden for now unless requested */
}

/* ── Removed Colored dots (ForexFactory classic nav doesn't use these colored dots) ── */
.main-navigation .main-nav>ul>li>a::before {
    display: none !important;
}

/* Phase 8 (owner sign-off): restrained active-section indicator on the desktop
   nav — a 3px green underline on the current item, matching the mobile drawer's
   green accent. Desktop only (the mobile drawer has its own left-bar). */
@media (min-width: 961px) {
    .main-navigation .main-nav>ul>li.current-menu-item>a,
    .main-navigation .main-nav>ul>li.current-menu-parent>a,
    .main-navigation .main-nav>ul>li.current-menu-ancestor>a {
        box-shadow: inset 0 -3px 0 var(--fx-accent);
    }
}

/* Phase 8 (owner sign-off): cap the article reading measure to ~72ch on desktop
   (lines were ~85-95 chars). Text blocks only — images, ad banners and tables
   keep the full column width. */
@media (min-width: 961px) {
    .fxd-article-content p,
    .fxd-article-content ul,
    .fxd-article-content ol,
    .fxd-article-content blockquote {
        max-width: 72ch;
    }
}

/* Dropdown arrow */
.main-navigation .main-nav>ul>li>a .dropdown-menu-toggle {
    margin-left: 3px;
    padding: 2px 4px;
}

.main-navigation .main-nav>ul>li>a .dropdown-menu-toggle .gp-icon svg {
    fill: #9fb0c8;
    width: 9px;
    height: 9px;
}

.main-navigation .main-nav>ul>li>a:hover .dropdown-menu-toggle .gp-icon svg {
    fill: #e2e8f0;
}

.main-navigation .menu-item-has-children>a::after {
    display: none !important;
}

/* ── Dropdown submenu ── */
.main-navigation .main-nav ul ul {
    background: var(--fx-bg-panel) !important;
    border: 1px solid var(--fx-border);
    border-radius: 0 0 var(--fx-radius) var(--fx-radius);
    box-shadow: var(--fx-shadow-lg);
    min-width: 200px;
    padding: 2px 0;
    margin-top: 0 !important;
    border-top: 2px solid var(--fx-accent);
}

.main-navigation .main-nav ul ul li a {
    background: transparent !important;
    color: var(--fx-text) !important;
    font-size: var(--fx-font-xs) !important;
    font-weight: 500 !important;
    padding: 7px 14px !important;
    border: none !important;
    line-height: 1.4 !important;
    display: block !important;
    text-transform: none;
    letter-spacing: 0;
}

.main-navigation .main-nav ul ul li a::before {
    display: none !important;
}

.main-navigation .main-nav ul ul li a:hover {
    background: var(--fx-bg-hover) !important;
    color: var(--fx-accent) !important;
    padding-left: 18px !important;
}

.main-navigation .main-nav ul ul li {
    border-bottom: 1px solid var(--fx-border);
}

.main-navigation .main-nav ul ul li:last-child {
    border-bottom: none;
}

/* ── User Menu — pushed right, next to language switcher ── */
.fxd-user-menu {
    position: relative;
    list-style: none;
    margin-left: auto !important;
}

.fxd-user-trigger {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    color: #fff;
    text-decoration: none;
    font-size: 12px;
    height: 50px;
    border-left: 1px solid rgba(255,255,255,0.15);
    transition: background var(--fx-transition);
}

.fxd-user-trigger img {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.3);
}

.fxd-user-trigger:hover {
    background: rgba(255,255,255,0.1);
    color: #fff;
}

.fxd-user-name {
    max-width: 80px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* User dropdown */
.fxd-user-dropdown {
    display: none;
    position: absolute;
    right: 0;
    top: 100%;
    min-width: 160px;
    background: #fff;
    border: 1px solid var(--fx-border);
    border-radius: var(--fx-radius);
    box-shadow: var(--fx-shadow-lg);
    z-index: 9999;
    padding: 4px 0;
}

.fxd-user-menu:hover .fxd-user-dropdown,
.fxd-user-menu.open .fxd-user-dropdown {
    display: block;
}

.fxd-user-dropdown li {
    list-style: none;
}

.fxd-user-dropdown a {
    display: block;
    padding: 8px 14px;
    color: var(--fx-text);
    text-decoration: none;
    font-size: 12px;
    white-space: nowrap;
}

.fxd-user-dropdown a:hover {
    background: var(--fx-bg-hover);
    color: var(--fx-accent);
}

.fxd-user-divider {
    border-top: 1px solid var(--fx-border);
    margin: 4px 0;
}

/* Login button (guest) */
.fxd-login-btn {
    display: flex;
    align-items: center;
    padding: 4px 14px;
    color: #fff !important;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    height: 50px;
    border-left: 1px solid rgba(255,255,255,0.15);
    transition: all var(--fx-transition);
}

.fxd-login-btn:hover {
    background: rgba(255,255,255,0.08);
    color: #fff !important;
}

/* ── Language switcher — far right of nav ── */
.fxd-lang-menu {
    margin-left: 0 !important;
    /* Sits next to user menu (user menu has margin-left:auto) */
}

.fxd-lang-menu>a::before {
    display: none !important;
}

.fxd-lang-menu>a,
.fxd-lang-menu>a.fxd-lang-trigger {
    padding: 0 16px !important;
    display: flex !important;
    align-items: center !important;
    border-left: 1px solid rgba(255, 255, 255, 0.15) !important;
    border-right: none !important;
    height: 50px !important;
    line-height: 50px !important;
}

/* Flag icon — bigger for clickability */
.fxd-lang-menu>a img {
    width: 24px !important;
    height: 16px !important;
    border-radius: 2px;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.25);
    display: block !important;
}

.fxd-lang-menu>a:hover {
    background: rgba(255, 255, 255, 0.08) !important;
}

/* Dropdown */
.fxd-lang-dropdown {
    right: 0 !important;
    left: auto !important;
    min-width: 170px !important;
    background: #ffffff !important;
    border: 1px solid var(--fx-border) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
    border-radius: 0 0 4px 4px !important;
    padding: 4px 0 !important;
}

.fxd-lang-dropdown li a {
    display: flex !important;
    align-items: center;
    gap: 10px;
    padding: 8px 14px !important;
    font-size: 12px !important;
    color: #333333 !important;
    line-height: 1.4 !important;
    height: auto !important;
    border: none !important;
    margin: 0 !important;
    text-decoration: none !important;
    white-space: nowrap;
}

.fxd-lang-dropdown li a:hover {
    background: #ebeef2 !important;
    color: #0e5094 !important;
}

.fxd-lang-dropdown li a::before {
    display: none !important;
}

.fxd-lang-dropdown img {
    width: 18px;
    height: auto;
    border-radius: 2px;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1);
    flex-shrink: 0;
}

.fxd-lang-dropdown .current-lang a {
    color: #0e5094 !important;
    font-weight: 700 !important;
    background: #ebeef2 !important;
}

/* Language code label next to flag */
.fxd-lang-code {
    font-size: 10px;
    font-weight: 700;
    color: #8b9cb5;
    letter-spacing: 0.05em;
}

/* Grid layout for 7+ languages */
.fxd-lang-grid {
    display: flex !important;
    flex-wrap: wrap !important;
    min-width: 320px !important;
    max-width: 400px !important;
    max-height: 70vh;
    overflow-y: auto;
    padding: 8px !important;
    gap: 2px;
}

.fxd-lang-grid li {
    flex: 0 0 calc(50% - 1px) !important;
    border-bottom: none !important;
}

.fxd-lang-grid li a {
    padding: 6px 10px !important;
    border-radius: 4px !important;
    font-size: 11px !important;
}

.fxd-lang-grid li a:hover {
    background: #ebeef2 !important;
}

.fxd-lang-grid .current-lang a {
    background: #e8edf4 !important;
    font-weight: 700 !important;
}

/* Scrollbar for long language lists */
.fxd-lang-grid::-webkit-scrollbar {
    width: 4px;
}

.fxd-lang-grid::-webkit-scrollbar-thumb {
    background: #c4cdd5;
    border-radius: 2px;
}

.fxd-lang-grid {
    scrollbar-width: thin;
    scrollbar-color: #c4cdd5 transparent;
}

/* ── Header right actions ── */

.fxd-header-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--fx-radius-sm);
    color: #8b9cb5;
    cursor: pointer;
    transition: all var(--fx-transition);
}

.fxd-header-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #e2e8f0;
    border-color: rgba(255, 255, 255, 0.15);
}

/* FIX: Ensure SVG icons are visible */
.fxd-header-btn svg {
    display: block !important;
    width: 14px !important;
    height: 14px !important;
    stroke: currentColor;
    fill: none;
    visibility: visible !important;
    opacity: 1 !important;
}

/* ══════════════════════════════════════
   TICKER TAPE
   ══════════════════════════════════════ */

.fxd-ticker-wrap {
    width: 100%;
    overflow: hidden;
    background: var(--fx-bg-panel);
    border-bottom: 1px solid var(--fx-border);
}

/* ══════════════════════════════════════
   BREADCRUMBS — Compact, professional
   ══════════════════════════════════════ */

.fxd-breadcrumb-bar {
    max-width: var(--fx-max-width);
    margin: var(--fx-sp-3) auto 0;
    padding: 0 var(--fx-sp-4);
}

.fxd-breadcrumb-inner {
    font-size: var(--fx-font-xs);
    color: var(--fx-text-muted);
    padding: 7px 12px;
    background: var(--fx-bg-panel);
    border: 1px solid var(--fx-border);
    border-radius: var(--fx-radius);
}

.fxd-breadcrumb-inner a {
    color: var(--fx-text-secondary);
    font-weight: 500;
}

.fxd-breadcrumb-inner a:hover {
    color: var(--fx-accent);
}

.fxd-breadcrumb-current {
    color: var(--fx-text);
    font-weight: 500;
}

/* ══════════════════════════════════════
   3-COLUMN GRID SYSTEM
   ══════════════════════════════════════ */

.fxd-layout {
    display: grid;
    grid-template-columns: var(--fx-left-sidebar) 1fr var(--fx-right-sidebar);
    gap: var(--fx-gap);
    max-width: var(--fx-max-width);
    margin: var(--fx-sp-3) auto 0;
    padding: 0 var(--fx-sp-4);
}

.fxd-layout--2col {
    grid-template-columns: 1fr var(--fx-right-sidebar);
}

.fxd-layout--full {
    grid-template-columns: 1fr;
}

/* Left sidebar */
.fxd-left-sidebar {
    position: sticky;
    /* Sits below the now-sticky header (~54px) plus a small breathing gap. */
    top: 62px;
    height: fit-content;
    max-height: calc(100vh - 74px);
    overflow-y: auto;
    scrollbar-width: thin;
}

.fxd-left-sidebar::-webkit-scrollbar {
    width: 3px;
}

.fxd-left-sidebar::-webkit-scrollbar-thumb {
    background: var(--fx-border);
    border-radius: 2px;
}

/* Main column */
.fxd-main-col {
    min-width: 0;
}

/* Right sidebar */
.fxd-right-sidebar {
    min-width: 0;
}

/* Phase 8: sticky right sidebar (with the max-height/overflow companion the left
   rail uses) so long single articles don't leave a tall empty right gutter.
   Only >960, where it is a real side column (stacked below content <=960). */
@media (min-width: 961px) {
    .fxd-right-sidebar {
        position: sticky;
        top: 62px;
        height: fit-content;
        max-height: calc(100vh - 74px);
        overflow-y: auto;
        scrollbar-width: thin;
    }
}

/* Phase 8: lift the support FAB above the cookie bar on desktop too (the lift
   rule previously lived only in the mobile block, so on desktop first visit the
   FAB covered the cookie Accept/Dismiss buttons). */
@media (min-width: 769px) {
    body.fxd-cookie-visible .fxd-support-widget { bottom: 88px; }
}

/* ══════════════════════════════════════
   FOOTER — Matching header
   ══════════════════════════════════════ */

.fxd-home-footer-space {
    height: 20px;
}

.site-info {
    background: var(--fx-primary-dark) !important;
    color: #667085 !important;
    font-size: var(--fx-font-xs);
    border-top: 1px solid var(--fx-border) !important;
    padding: 0 !important;
}

.site-info a {
    color: #8b9cb5 !important;
}

.site-info a:hover {
    color: #e2e8f0 !important;
}

/* ── Footer Bottom ── */
.fxd-footer-bottom {
    background: var(--fx-primary-dark);
    border-top: 1px solid var(--fx-border);
    padding: 30px 0 20px;
}

.fxd-footer-inner {
    max-width: var(--fx-max-width);
    margin: 0 auto;
    padding: 0 var(--fx-sp-4);
    display: flex;
    gap: 40px;
}

.fxd-footer-left {
    flex: 0 0 200px;
}

.fxd-footer-brand {
    margin-bottom: 16px;
}

.fxd-footer-logo {
    display: block;
    font-size: 18px;
    font-weight: 700;
    color: #ffffff;
    font-family: var(--fx-font);
    letter-spacing: -0.3px;
}

.fxd-footer-tagline {
    display: block;
    font-size: 11px;
    color: #8b9cb5;
    margin-top: 4px;
    line-height: 1.4;
}

/* Social icons */
.fxd-footer-social {
    display: flex;
    gap: 8px;
    margin-top: 12px;
}

.fxd-social-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 6px;
    color: #8b9cb5 !important;
    background: rgba(255, 255, 255, 0.05);
    transition: all 0.2s ease;
}

.fxd-social-icon svg {
    width: 16px;
    height: 16px;
}

.fxd-social-icon:hover {
    transform: translateY(-1px);
}

.fxd-social-facebook:hover {
    color: #1877f2 !important;
    background: rgba(24, 119, 242, 0.12);
}

.fxd-social-telegram:hover {
    color: #26a5e4 !important;
    background: rgba(38, 165, 228, 0.12);
}

.fxd-social-discord:hover {
    color: #5865f2 !important;
    background: rgba(88, 101, 242, 0.12);
}

.fxd-social-x:hover {
    color: #ffffff !important;
    background: rgba(255, 255, 255, 0.1);
}

.fxd-social-linkedin:hover {
    color: #0a66c2 !important;
    background: rgba(10, 102, 194, 0.12);
}

/* Link columns */
.fxd-footer-columns {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

.fxd-footer-col-title {
    font-size: 10px;
    font-weight: 700;
    color: #ffffff;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin: 0 0 10px;
    padding: 0;
}

.fxd-footer-col ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.fxd-footer-col li {
    margin-bottom: 6px;
}

.fxd-footer-col a {
    color: #8b9cb5 !important;
    font-size: 12px;
    text-decoration: none;
    transition: color 0.15s ease;
    line-height: 1.5;
}

.fxd-footer-col a:hover {
    color: #ffffff !important;
}

/* Divider */
.fxd-footer-divider {
    max-width: var(--fx-max-width);
    margin: 20px auto 0;
    padding: 0 var(--fx-sp-4);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

/* Copyright */
.fxd-footer-copyright {
    max-width: var(--fx-max-width);
    margin: 14px auto 0;
    padding: 0 var(--fx-sp-4);
    text-align: center;
    font-size: 11px;
    color: #667085;
}

.fxd-footer-legal-links {
    margin-left: 8px;
}

.fxd-footer-legal-links a {
    color: #667085 !important;
    text-decoration: none;
    transition: color 0.15s ease;
}

.fxd-footer-legal-links a:hover {
    color: #8b9cb5 !important;
}

.fxd-footer-dot {
    margin: 0 4px;
    color: #4a5568;
}

/* ══════════════════════════════════════
   MOBILE HAMBURGER
   ══════════════════════════════════════ */

.menu-toggle,
.main-navigation .menu-toggle {
    background: rgba(255, 255, 255, 0.06) !important;
    color: #e2e8f0 !important;
    font-size: var(--fx-font-xs);
    padding: 6px 12px;
    border-radius: var(--fx-radius-sm);
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    cursor: pointer;
    line-height: 1;
}

/* ══════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════ */

/* Tablet: hide left sidebar (2-col) */
@media (max-width: 1024px) {
    .fxd-layout {
        grid-template-columns: 1fr var(--fx-right-sidebar);
    }

    .fxd-left-sidebar {
        display: none;
    }

    /* Footer: columns wrap 2x2 */
    .fxd-footer-inner {
        flex-wrap: wrap;
        gap: 24px;
    }

    .fxd-footer-left {
        flex: 0 0 100%;
        display: flex;
        align-items: center;
        gap: 24px;
    }

    .fxd-footer-brand {
        margin-bottom: 0;
    }

    .fxd-footer-social {
        margin-top: 0;
    }

    .fxd-footer-columns {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Mobile: single column */
@media (max-width: 768px) {

    /* .fxd-layout + .fxd-right-sidebar now collapse at 960 (mobile-header block)
       so the grid and the nav break together — nothing to repeat here. */
    .fxd-breadcrumb-bar {
        padding: 0 var(--fx-sp-2);
    }

    /* Long trails (Home / Category / Parent / long title) stay on one line and
       scroll horizontally instead of wrapping to 2-3 lines on a phone. */
    .fxd-breadcrumb-inner {
        white-space: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
    }
    .fxd-breadcrumb-inner::-webkit-scrollbar { display: none; }

    /* Footer: single column stack */
    .fxd-footer-inner {
        flex-direction: column;
        gap: 20px;
    }

    .fxd-footer-left {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .fxd-footer-columns {
        grid-template-columns: 1fr 1fr;
        gap: 20px;
    }

    .fxd-footer-copyright {
        font-size: 10px;
    }

    .fxd-footer-legal-links {
        display: block;
        margin-left: 0;
        margin-top: 6px;
    }

    /* Phase 8: bigger footer tap targets on phones (were ~18px, easy to misfire) */
    .fxd-footer-col a {
        display: block;
        padding: 8px 0;
    }
    .fxd-footer-legal-links a {
        display: inline-block;
        padding: 6px 4px;
    }
    .fxd-footer-copyright {
        font-size: 11px;
    }

    /* Phase 8: LATEST ticker — no auto-scroll on touch (a moving link is hard to
       tap); let the strip scroll by swipe instead. */
    .fxd-ticker-track {
        animation: none !important;
        transform: none !important;
    }
    .fxd-ticker-viewport {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }
}

/* ══════════════════════════════════════
   ADS STACK — compact repeatable banners
   ══════════════════════════════════════ */
.fxd-ads-stack {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 10px;
}

.fxd-ad {
    cursor: pointer;
    border-radius: 3px;
    overflow: hidden;
    transition: opacity 0.15s ease;
}

.fxd-ad:hover {
    opacity: 0.85;
}

.fxd-ad img {
    width: 100%;
    height: auto;
    aspect-ratio: 234 / 65;
    object-fit: cover;
    object-position: center;
    display: block;
}

/* ══════════════════════════════════════
   MOBILE DRAWER — scrim, scroll-lock, motion, language filter (v10.27)
   ══════════════════════════════════════ */
.fxd-drawer-scrim {
    position: fixed;
    top: var(--fxd-drawer-top, 0px);
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(10, 18, 30, 0.5);
    z-index: 998;
    -webkit-tap-highlight-color: transparent;
}
.fxd-drawer-scrim[hidden] { display: none; }
body.fxd-drawer-open { overflow: hidden; }
@media (min-width: 961px) {
    .fxd-drawer-scrim { display: none !important; }
}
@keyframes fxdDrawerIn {
    from { transform: translateY(-8px); opacity: 0.6; }
    to { transform: none; opacity: 1; }
}

/* Type-to-filter box for the 23-language grid (mobile only, shown when open) */
.fxd-lang-search { display: none; }
@media (max-width: 960px) {
    .main-navigation .fxd-lang-menu:has(.fxd-lang-dropdown.toggled-on) .fxd-lang-search {
        display: block;
        padding: 9px 10px 3px;
        background: rgba(0, 0, 0, 0.22);
    }
    .fxd-lang-search input {
        width: 100%;
        box-sizing: border-box;
        padding: 10px 12px;
        font-size: 16px;
        color: #e6ecf3;
        background: rgba(255, 255, 255, 0.06);
        border: 1px solid rgba(255, 255, 255, 0.14);
        border-radius: 8px;
        font-family: var(--fx-font);
    }
    .fxd-lang-search input::placeholder { color: #8fa0b8; }
    .fxd-lang-search input:focus {
        outline: none;
        border-color: var(--fx-accent);
        box-shadow: 0 0 0 3px rgba(125, 187, 66, 0.2);
    }
}

/* Mobile header */
@media (max-width: 960px) {
    /* Content grid collapses to ONE column here (960), matching the hamburger,
       so the 769–960 band is never "a mobile hamburger over a 2-col layout". */
    .fxd-layout,
    .fxd-layout--2col {
        grid-template-columns: 1fr;
        padding: 0 var(--fx-sp-2);
        gap: 10px;
    }
    .fxd-right-sidebar {
        order: 2;
    }

    .inside-header {
        padding: 0 10px !important;
        flex-wrap: wrap !important;
        min-height: 42px;
        height: auto !important;
    }

    .site-branding {
        flex: 1;
        margin-right: 0 !important;
        clip-path: none !important;
        padding: 0 6px !important;
    }

    .inside-header .main-navigation {
        flex: 0 0 100% !important;
        order: 2;
    }

    /* The wired hamburger (control-wrapper) sits inline top-right next to the
       brand instead of on its own wasted full-width row. The menu nav stays
       full-width order:2, but its ul is a fixed overlay so it takes no space. */
    .inside-header nav.mobile-menu-control-wrapper {
        flex: 0 0 auto !important;
        order: 1 !important;
        width: auto !important;
        margin-left: auto !important;
    }

    /* Reset nav container widths for mobile */
    .main-navigation .inside-navigation,
    .inside-header .main-navigation .inside-navigation {
        width: auto !important;
    }

    #primary-menu,
    .main-navigation .main-nav {
        width: auto !important;
    }

    /* GP core only reveals its hamburger at ITS breakpoint (768px), but we
       collapse the menu at 960px — without this, 769-960px viewports had
       NO navigation at all. GP prints TWO toggles: the one inside
       nav.mobile-menu-control-wrapper is the one its menu.js drives; the
       inner main-nav toggle is inert. Show the wired one, hide the inert
       duplicate (both visible = stacked double hamburger on phones). */
    nav.mobile-menu-control-wrapper {
        display: block !important;
    }

    nav.mobile-menu-control-wrapper .menu-toggle {
        display: inline-flex !important;
        align-items: center;
        gap: 6px;
    }

    .main-navigation:not(.mobile-menu-control-wrapper) .menu-toggle {
        display: none !important;
    }

    /* Hide menu by default — GP JS toggles via .toggled class */
    .main-navigation .main-nav>ul {
        display: none !important;
        width: 100% !important;
        flex-direction: column !important;
        flex-wrap: nowrap !important;
        justify-content: flex-start !important;
        align-items: stretch !important;
        background: #1e2d4a !important;
        border: none !important;
        border-radius: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    .main-navigation.toggled .main-nav>ul {
        display: block !important;
    }

    /* Reset ALL desktop nav link styles for mobile */
    .main-navigation .main-nav>ul>li {
        display: block !important;
        width: 100% !important;
        white-space: normal !important;
        float: none !important;
        position: relative !important;
    }

    .main-navigation .main-nav>ul>li>a {
        display: block !important;
        width: 100% !important;
        /* Consolidated top-level row — single source of truth. Previously
           re-declared across three layers (padding 12→15→13, font 14→15). */
        padding: 13px 18px !important;
        font-size: 15px !important;
        font-weight: 600 !important;
        line-height: 1.35 !important;
        letter-spacing: .005em !important;
        min-height: 0 !important;
        transition: background .12s ease, box-shadow .12s ease !important;
        height: auto !important;
        color: #dde4ec !important;
        background: transparent !important;
        border: none !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
        border-right: none !important;
        border-left: none !important;
        text-decoration: none !important;
        box-sizing: border-box !important;
        gap: 0 !important;
        align-items: initial !important;
        flex-direction: row !important;
    }

    .main-navigation .main-nav>ul>li:first-child>a {
        border-left: none !important;
    }

    .main-navigation .main-nav>ul>li>a:hover {
        background: rgba(255, 255, 255, 0.05) !important;
        color: #ffffff !important;
    }

    /* Active indicator — hide on mobile */
    .main-navigation .main-nav>ul>li.current-menu-item>a::after,
    .main-navigation .main-nav>ul>li.current-menu-parent>a::after {
        display: none !important;
    }

    /* Dropdown arrows */
    .main-navigation .main-nav>ul>li>a .dropdown-menu-toggle {
        position: absolute !important;
        right: 0 !important;
        top: 0 !important;
        padding: 12px 16px !important;
    }

    /* Sub-menus */
    .main-navigation .main-nav ul ul {
        position: relative !important;
        width: 100% !important;
        top: auto !important;
        left: auto !important;
        border: none !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        background: rgba(0, 0, 0, 0.15) !important;
        padding: 0 !important;
    }

    .main-navigation .main-nav ul ul li a {
        padding: 10px 16px 10px 32px !important;
        font-size: 13px !important;
        line-height: 1.4 !important;
        height: auto !important;
        display: block !important;
        color: #b0bec5 !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
        border-right: none !important;
        border-left: none !important;
    }

    .main-navigation .main-nav ul ul li a:hover {
        color: #ffffff !important;
        background: rgba(255, 255, 255, 0.05) !important;
    }

    /* User menu in mobile */
    .fxd-user-menu {
        margin-left: 0 !important;
        display: block !important;
        width: 100% !important;
        order: 2;
    }

    .fxd-user-menu .fxd-user-trigger {
        display: block !important;
        padding: 12px 16px !important;
        height: auto !important;
        line-height: 1.4 !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
        border-right: none !important;
    }

    .fxd-user-name {
        display: none;
    }

    .fxd-user-dropdown {
        position: relative !important;
        box-shadow: none !important;
        border: none !important;
        background: rgba(0, 0, 0, 0.15) !important;
        border-radius: 0 !important;
        top: auto !important;
        right: auto !important;
        width: 100% !important;
        min-width: auto !important;
    }

    .fxd-user-dropdown a {
        color: #b0bec5 !important;
        padding: 10px 16px 10px 32px !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
    }

    .fxd-user-dropdown a:hover {
        color: #ffffff !important;
        background: rgba(255, 255, 255, 0.05) !important;
    }

    .fxd-login-btn {
        display: block !important;
        padding: 12px 16px !important;
        background: transparent !important;
        border-radius: 0 !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    }

    /* ══════════════════════════════════════
       MOBILE MENU + LANGUAGE — redesigned (v10.24)
       (all scoped inside this max-width:768px block; desktop untouched)
       ══════════════════════════════════════ */

    /* Active page + press feedback (row sizing lives in the base rule above) */
    .main-navigation .main-nav > ul > li.current-menu-item > a,
    .main-navigation .main-nav > ul > li.current-menu-parent > a,
    .main-navigation .main-nav > ul > li.current-menu-ancestor > a {
        color: #ffffff !important;
        background: rgba(125, 187, 66, .10) !important;
        box-shadow: inset 3px 0 0 var(--fx-accent) !important;
    }
    .main-navigation .main-nav > ul > li > a:active {
        background: rgba(255, 255, 255, .09) !important;
    }

    /* Bigger, easier-to-hit dropdown chevron */
    .main-navigation .main-nav > ul > li > a .dropdown-menu-toggle {
        width: 54px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 15px 16px !important;
        opacity: .85 !important;
    }

    .main-navigation .main-nav ul ul li a {
        padding: 12px 16px 12px 30px !important;
        font-size: 14px !important;
    }
    .main-navigation .main-nav ul ul li a:active {
        background: rgba(255, 255, 255, .09) !important;
    }

    /* ── Language selector ── */
    .fxd-lang-menu {
        margin-left: 0 !important;
        display: block !important;
        width: 100% !important;
        border-top: 1px solid rgba(255, 255, 255, .14) !important;
    }

    /* Trigger reads as a real control: flag + code + chevron, accent-tinted */
    .main-navigation .main-nav .fxd-lang-menu > a,
    .main-navigation .main-nav .fxd-lang-menu > a.fxd-lang-trigger {
        display: flex !important;
        align-items: center !important;
        gap: 11px !important;
        padding: 15px 18px !important;
        height: auto !important;
        line-height: 1.3 !important;
        font-size: 15px !important;
        font-weight: 600 !important;
        color: #e6ecf3 !important;
        background: rgba(125, 187, 66, .08) !important;
        border-left: none !important;
        border-right: none !important;
        border-bottom: 1px solid rgba(255, 255, 255, .08) !important;
    }
    .main-navigation .main-nav .fxd-lang-menu > a.fxd-lang-trigger img {
        width: 27px !important;
        height: 18px !important;
        border-radius: 3px !important;
        box-shadow: 0 0 0 1px rgba(255, 255, 255, .25) !important;
    }
    .main-navigation .main-nav .fxd-lang-menu > a.fxd-lang-trigger .fxd-lang-code {
        font-size: 14px !important;
        font-weight: 700 !important;
        color: #e6ecf3 !important;
        letter-spacing: .04em !important;
    }
    /* Chevron, rotates when the grid is open */
    .main-navigation .main-nav .fxd-lang-menu > a.fxd-lang-trigger::after {
        content: "" !important;
        margin-left: auto !important;
        width: 9px !important;
        height: 9px !important;
        border-right: 2px solid #9fb0c8 !important;
        border-bottom: 2px solid #9fb0c8 !important;
        transform: rotate(45deg) !important;
        transition: transform .18s ease !important;
    }
    .main-navigation .main-nav .fxd-lang-menu:has(.fxd-lang-dropdown.toggled-on) > a.fxd-lang-trigger::after {
        transform: rotate(-135deg) !important;
    }

    /* Dropdown = compact 2-column chip grid, current language in accent */
    .fxd-lang-dropdown {
        position: relative !important;
        box-shadow: none !important;
        border: none !important;
        background: rgba(0, 0, 0, .22) !important;
        border-radius: 0 !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        width: 100% !important;
        min-width: auto !important;
    }
    .fxd-lang-dropdown.fxd-lang-grid {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 6px !important;
        padding: 10px !important;
        max-width: none !important;
        max-height: 48vh !important;
        overflow-y: auto !important;
    }
    .fxd-lang-grid li {
        width: auto !important;
        flex: initial !important;
        border-bottom: none !important;
    }
    .main-navigation .main-nav .fxd-lang-grid li a {
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
        min-height: 42px !important;
        padding: 9px 10px !important;
        font-size: 12.5px !important;
        font-weight: 500 !important;
        color: #cdd6e2 !important;
        background: rgba(255, 255, 255, .05) !important;
        border: 1px solid rgba(255, 255, 255, .09) !important;
        border-radius: 8px !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        box-sizing: border-box !important;
    }
    .main-navigation .main-nav .fxd-lang-grid li a img {
        width: 21px !important;
        height: 14px !important;
        border-radius: 2px !important;
        flex-shrink: 0 !important;
        box-shadow: 0 0 0 1px rgba(0, 0, 0, .2) !important;
    }
    .main-navigation .main-nav .fxd-lang-grid li a:hover,
    .main-navigation .main-nav .fxd-lang-grid li a:active {
        background: rgba(255, 255, 255, .12) !important;
        color: #ffffff !important;
    }
    .main-navigation .main-nav .fxd-lang-grid .current-lang a {
        background: var(--fx-accent) !important;
        border-color: var(--fx-accent) !important;
        color: #ffffff !important;
        font-weight: 700 !important;
    }

    /* ══════════════════════════════════════
       MOBILE MENU REWORK (v10.25)
       Language pulled to the TOP (was buried at the bottom), tighter list-like
       rows, clearer expandable sections. Flex column enables the reorder.
       ══════════════════════════════════════ */
    .main-navigation.toggled #primary-menu > ul {
        display: flex !important;
        flex-direction: column !important;
        padding-bottom: 6px !important;
        /* Overlay drawer: fixed panel anchored under the header, self-scrolling,
           over a scrim — never an in-flow accordion that shoves the page down. */
        position: fixed !important;
        top: var(--fxd-drawer-top, 52px) !important;
        left: 0 !important;
        right: 0 !important;
        max-height: calc(100dvh - var(--fxd-drawer-top, 52px)) !important;
        overflow-y: auto !important;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
        z-index: 999 !important;
        box-shadow: 0 16px 36px rgba(0, 0, 0, 0.45) !important;
    }
    @media (prefers-reduced-motion: no-preference) {
        .main-navigation.toggled #primary-menu > ul {
            animation: fxdDrawerIn 0.22s ease;
        }
    }
    /* Order: language first, nav in the middle, account/login last */
    .main-navigation.toggled .main-nav > ul > li.fxd-lang-menu { order: -3 !important; }
    .main-navigation.toggled .main-nav > ul > li.fxd-user-menu { order: 6 !important; }
    .main-navigation.toggled .main-nav > ul > li.menu-item { order: 0; }

    /* Chevron hit area (row sizing lives in the base rule above) */
    .main-navigation .main-nav > ul > li > a .dropdown-menu-toggle {
        padding: 13px 16px !important;
    }

    /* Language bar sits at the very top: distinct, obviously the language control */
    .main-navigation .main-nav .fxd-lang-menu {
        order: -3 !important;
        border-top: none !important;
        border-bottom: 2px solid rgba(125, 187, 66, .35) !important;
        background: rgba(0, 0, 0, .18) !important;
    }
    .main-navigation .main-nav .fxd-lang-menu > a.fxd-lang-trigger {
        border-bottom: none !important;
        background: transparent !important;
        padding: 14px 18px !important;
    }
    /* Expandable parents: subtle accent when their sub-menu is open */
    .main-navigation .main-nav > ul > li:has(.sub-menu.toggled-on) > a {
        background: rgba(255, 255, 255, .04) !important;
        box-shadow: inset 3px 0 0 rgba(125, 187, 66, .5) !important;
    }
    .main-navigation .main-nav ul ul {
        border-left: 3px solid rgba(125, 187, 66, .25) !important;
    }

    .fxd-header-actions {
        order: 3;
    }
}

@media (max-width: 600px) {
    .inside-header {
        min-height: 40px;
    }

    .site-header .site-title a,
    .site-header .main-title a {
        font-size: var(--fx-font-md) !important;
    }
}

/* ══════════════════════════════════════
   FLOATING SUPPORT WIDGET
   ══════════════════════════════════════ */

.fxd-support-widget {
    position: fixed;
    right: 20px;
    bottom: 20px;
    /* above the cookie bar (9999) so an opened panel is never buried */
    z-index: 10000;
    font-family: var(--fx-font);
}

/* FAB — chat pill (label on desktop), hidden when panel is open */
.fxd-support-fab {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    height: 52px;
    padding: 0 20px 0 15px;
    border-radius: 999px;
    background: linear-gradient(135deg, #2f527d 0%, #1e3a5f 55%, #16304f 100%);
    color: #ffffff;
    border: none;
    cursor: pointer;
    font-family: var(--fx-font);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.01em;
    -webkit-tap-highlight-color: transparent;
    box-shadow: 0 8px 22px rgba(22, 48, 79, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.14);
    transition: transform 0.2s ease, opacity 0.2s ease, box-shadow 0.2s ease;
}

.fxd-support-fab-ico {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.fxd-support-fab-label {
    white-space: nowrap;
    line-height: 1;
}

/* Live "online" dot on the icon corner */
.fxd-support-fab-ico::after {
    content: "";
    position: absolute;
    top: -2px;
    right: -2px;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: #7dbb42;
    box-shadow: 0 0 0 2.5px #1e3a5f;
}

/* Idle attention pulse (halo), disabled under reduced-motion */
@media (prefers-reduced-motion: no-preference) {
    .fxd-support-widget:not(.open) .fxd-support-fab::before {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: 999px;
        box-shadow: 0 0 0 0 rgba(125, 187, 66, 0.5);
        animation: fxdFabPulse 2.4s ease-out infinite;
    }
}
@keyframes fxdFabPulse {
    0% { box-shadow: 0 0 0 0 rgba(125, 187, 66, 0.45); }
    70%, 100% { box-shadow: 0 0 0 14px rgba(125, 187, 66, 0); }
}

.fxd-support-fab:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 30px rgba(22, 48, 79, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.16);
}
.fxd-support-fab:active {
    transform: translateY(0);
}

.fxd-support-fab-icon {
    pointer-events: none;
}

.fxd-support-widget.open .fxd-support-fab {
    opacity: 0;
    pointer-events: none;
    transform: scale(0.3);
}

/* Panel */
.fxd-support-panel {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 250px;
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(0, 0, 0, 0.06);
    transform: scale(0);
    transform-origin: bottom right;
    opacity: 0;
    transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.15s ease;
    pointer-events: none;
    overflow: hidden;
}

.fxd-support-widget.open .fxd-support-panel {
    transform: scale(1);
    opacity: 1;
    pointer-events: auto;
}

/* Header */
.fxd-support-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    background: #1e3a5f;
    color: #ffffff;
}

.fxd-support-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.01em;
}

.fxd-support-title svg {
    flex-shrink: 0;
    color: #7dbb42;
}

.fxd-support-close {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: rgba(255, 255, 255, 0.7);
    cursor: pointer;
    line-height: 1;
    padding: 3px;
    border-radius: 50%;
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
}

.fxd-support-close:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.4);
    color: #ffffff;
}

/* Body */
.fxd-support-body {
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.fxd-support-channel {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    font-size: 13px;
    font-weight: 600;
    color: #333333;
    text-decoration: none;
    border-radius: 8px;
    border-left: 3px solid transparent;
    transition: all 0.15s ease;
}

.fxd-support-channel svg {
    flex-shrink: 0;
}

.fxd-support-channel:hover {
    transform: translateX(2px);
}

/* WhatsApp */
.fxd-support-whatsapp svg { color: #25D366; }
.fxd-support-whatsapp {
    border-left-color: #25D366;
}
.fxd-support-whatsapp:hover {
    background: #f0faf4;
    color: #128C7E;
}

/* Telegram */
.fxd-support-telegram svg { color: #0088CC; }
.fxd-support-telegram {
    border-left-color: #0088CC;
}
.fxd-support-telegram:hover {
    background: #eef6fb;
    color: #006699;
}

/* Discord */
.fxd-support-discord svg { color: #5865F2; }
.fxd-support-discord {
    border-left-color: #5865F2;
}
.fxd-support-discord:hover {
    background: #f0f1fe;
    color: #4752c4;
}

/* RTL support for widget */
html[dir="rtl"] .fxd-support-widget {
    left: auto;
    right: 20px;
}

html[dir="rtl"] .fxd-support-fab {
    flex-direction: row-reverse;
    padding: 0 15px 0 20px;
}
html[dir="rtl"] .fxd-support-fab-ico::after {
    right: auto;
    left: -2px;
}

html[dir="rtl"] .fxd-support-panel {
    left: auto;
    right: 0;
    transform-origin: bottom right;
}

html[dir="rtl"] .fxd-support-channel {
    border-left: none;
    border-right: 3px solid transparent;
}
html[dir="rtl"] .fxd-support-whatsapp { border-right-color: #25D366; }
html[dir="rtl"] .fxd-support-telegram { border-right-color: #0088CC; }
html[dir="rtl"] .fxd-support-discord  { border-right-color: #5865F2; }

html[dir="rtl"] .fxd-support-channel:hover {
    transform: translateX(-2px);
}

@media (max-width: 768px) {
    /* Keep the FAB bottom-right (same side as desktop). It was bottom-left,
       where it floated over charts, the calendar and the clock's market list. */
    .fxd-support-widget {
        left: auto;
        right: 12px;
        bottom: 12px;
    }

    /* Collapse to a clean icon-only circle on phones (56px = comfortable tap). */
    .fxd-support-fab {
        width: 56px;
        height: 56px;
        padding: 0;
        gap: 0;
        justify-content: center;
        border-radius: 50%;
    }

    .fxd-support-fab-label {
        display: none;
    }

    .fxd-support-fab svg {
        width: 24px;
        height: 24px;
    }

    .fxd-support-panel {
        width: min(84vw, 240px);
    }

    /* While the cookie bar is up, lift the FAB clear of it so neither hides
       the other's tap target. Body class is toggled by the cookie JS. */
    body.fxd-cookie-visible .fxd-support-widget {
        bottom: 128px;
    }

    html[dir="rtl"] .fxd-support-widget {
        left: auto;
        right: 12px;
    }
}

/* ══════════════════════════════════════
   RTL SUPPORT — Arabic, Urdu, Persian
   Polylang adds dir="rtl" to <html>
   ══════════════════════════════════════ */

html[dir="rtl"] .fxd-layout {
    grid-template-columns: var(--fx-right-sidebar) 1fr var(--fx-left-sidebar);
}

html[dir="rtl"] .fxd-left-sidebar { order: 3; }
html[dir="rtl"] .fxd-main-col { order: 2; }
html[dir="rtl"] .fxd-right-sidebar { order: 1; }

html[dir="rtl"] .fxd-breadcrumb-item + .fxd-breadcrumb-item::before {
    content: "\25C0";
}

html[dir="rtl"] .site-branding {
    margin-right: 0 !important;
    margin-left: 0 !important;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 27px 100%);
    padding: 0 20px 0 45px;
}

html[dir="rtl"] .fxd-user-menu {
    margin-left: 0 !important;
    margin-right: auto !important;
}

html[dir="rtl"] .fxd-user-dropdown {
    right: auto;
    left: 0;
}

html[dir="rtl"] .fxd-lang-dropdown {
    right: auto !important;
    left: 0 !important;
}

html[dir="rtl"] .fxd-footer-legal-links {
    margin-left: 0;
    margin-right: 8px;
}

@media (max-width: 1024px) {
    html[dir="rtl"] .fxd-layout {
        grid-template-columns: var(--fx-right-sidebar) 1fr;
    }
}

@media (max-width: 768px) {
    html[dir="rtl"] .fxd-layout,
    html[dir="rtl"] .fxd-layout--2col {
        grid-template-columns: 1fr;
    }
}
/* ── Cookie Consent Banner ── */
.fxd-cookie-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: #0f1f35;
    color: #cbd5e1;
    padding: 14px 24px;
    display: flex;
    align-items: center;
    gap: 16px;
    z-index: 9999;
    border-top: 2px solid var(--fx-accent);
    flex-wrap: wrap;
    transform: translateY(100%);
    transition: transform .3s ease;
}
.fxd-cookie-bar.visible { transform: translateY(0); }

/* Mobile: the bar wrapped to ~4 rows and ate the bottom of a phone screen */
@media (max-width: 600px) {
    .fxd-cookie-bar {
        padding: 10px 14px;
        gap: 8px;
    }

    .fxd-cookie-text {
        font-size: .75rem;
        line-height: 1.4;
        flex-basis: 100%;
    }

    .fxd-cookie-actions {
        width: 100%;
        justify-content: flex-end;
    }
}
.fxd-cookie-text { flex: 1; margin: 0; font-size: .85rem; line-height: 1.5; }
.fxd-cookie-text a { color: var(--fx-accent); text-decoration: underline; }
.fxd-cookie-actions { display: flex; gap: 8px; flex-shrink: 0; }
.fxd-cookie-accept {
    background: var(--fx-accent);
    color: #fff;
    border: none;
    padding: 7px 18px;
    border-radius: 4px;
    cursor: pointer;
    font-size: .85rem;
    font-weight: 600;
}
.fxd-cookie-accept:hover { background: var(--fx-accent-hover); }
.fxd-cookie-dismiss {
    background: transparent;
    color: #94a3b8;
    border: 1px solid #334155;
    padding: 7px 14px;
    border-radius: 4px;
    cursor: pointer;
    font-size: .85rem;
}
.fxd-cookie-dismiss:hover { color: #e2e8f0; border-color: #64748b; }

/* ── Quick Support / Sales lead form ── */
.fxd-support-panel { width: 320px; }
.fxd-support-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; }

.fxd-support-intro {
    margin: 0;
    padding: 13px 15px 3px;
    font-size: 12.5px;
    line-height: 1.45;
    color: #6b7280;
}

.fxd-support-form { display: flex; flex-direction: column; gap: 11px; padding: 11px 15px 15px; }

.fxd-support-field { display: block; }
.fxd-support-flabel {
    display: block;
    font-size: 11.5px;
    font-weight: 600;
    color: #4b5563;
    margin-bottom: 5px;
    letter-spacing: .01em;
}
.fxd-support-flabel em { color: #d0342c; font-style: normal; }

.fxd-support-form input[type="text"], .fxd-support-form input[type="email"], .fxd-support-form select, .fxd-support-form textarea {
    width: 100%; padding: 10px 12px; font-size: 13px; line-height: 1.3;
    border: 1px solid #d1d5db; border-radius: 8px;
    background: #fff; color: #1f2937; box-sizing: border-box; font-family: inherit;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.fxd-support-form input::placeholder, .fxd-support-form textarea::placeholder { color: #9ca3af; }
.fxd-support-form textarea { resize: vertical; min-height: 58px; }
.fxd-support-form input:focus, .fxd-support-form select:focus, .fxd-support-form textarea:focus {
    outline: none; border-color: #7dbb42; box-shadow: 0 0 0 3px rgba(125,187,66,.15);
}

.fxd-support-row { display: grid; grid-template-columns: 118px 1fr; gap: 7px; }

/* Interests as tappable chips */
.fxd-support-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.fxd-support-chip { cursor: pointer; }
.fxd-support-chip input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.fxd-support-chip span {
    display: inline-block; padding: 7px 12px; font-size: 12px; font-weight: 600;
    color: #4b5563; background: #fff; border: 1px solid #d1d5db; border-radius: 999px;
    user-select: none; transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.fxd-support-chip:hover span { border-color: #1e3a5f; }
.fxd-support-chip input:checked + span { background: #1e3a5f; border-color: #1e3a5f; color: #fff; }
.fxd-support-chip input:focus-visible + span { box-shadow: 0 0 0 3px rgba(125,187,66,.3); }

.fxd-support-submit {
    margin-top: 3px; width: 100%; padding: 12px; font-size: 13.5px; font-weight: 700;
    color: #fff; cursor: pointer; letter-spacing: .01em;
    background: linear-gradient(135deg, #2f527d 0%, #1e3a5f 60%, #16304f 100%);
    border: none; border-radius: 9px;
    box-shadow: 0 4px 12px rgba(22,48,79,.28);
    transition: transform .15s ease, box-shadow .15s ease;
}
.fxd-support-submit:hover { transform: translateY(-1px); box-shadow: 0 8px 18px rgba(22,48,79,.36); }
.fxd-support-submit:active { transform: translateY(0); }
.fxd-support-submit:disabled { opacity: .6; cursor: default; transform: none; box-shadow: none; }

.fxd-support-msg { margin: 6px 0 0; font-size: 12px; font-weight: 600; }
.fxd-support-msg.is-ok { color: #1a8a4a; }
.fxd-support-msg.is-err { color: #d0342c; }
@media (max-width: 360px) { .fxd-support-panel { width: 90vw; } }