/* ==========================================================================
   Tawi Header Studio — Frontend Production Stylesheet
   Zapier-inspired modern header architecture.
   Includes: Unified Button Design System, SVG Hamburger, Off-Canvas Drawer,
   Accordion Navigation, and Theme Isolation.
   ========================================================================== */

#tawi-header-root {
    width: 100%;
    position: relative;
    z-index: 9999;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    color: #2b2c2c;
    background: transparent;
    -webkit-font-smoothing: antialiased;
}

#tawi-header-root *, #tawi-header-root *::before, #tawi-header-root *::after {
    box-sizing: border-box;
}

/* ==========================================================================
   CRITICAL THEME ISOLATION & BUTTON RESET
   Neutralizes BrightHub's global 'button:not(.btn)' style to prevent dark squares
   ========================================================================== */
#tawi-header-root button.tawi-btn-reset,
.tawi-mobile-header button.tawi-btn-reset,
.tawi-drawer-panel button.tawi-btn-reset,
.tawi-hamburger-btn.tawi-btn-reset {
    background-color: transparent !important;
    background: transparent !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 0 !important;
    font-family: inherit !important;
    font-size: inherit !important;
    color: inherit !important;
    line-height: inherit !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
    overflow: visible !important;
    vertical-align: middle !important;
}

/* Body Scroll Lock when Drawer is Active */
body.tawi-drawer-open {
    overflow: hidden !important;
    touch-action: none !important;
}

/* ==========================================================================
   BUTTON & ACTION DESIGN SYSTEM — CSS Variable-Driven
   Every property is a CSS custom property so the PHP/JS inspector
   changes are instantly visible without cache.
   ========================================================================== */
.tawi-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: var(--btn-justify, center) !important;
    gap: var(--btn-icon-gap, 8px) !important;
    text-decoration: none !important;
    border-radius: var(--btn-radius, var(--tawi-primary-radius, 8px)) !important;
    font-family: var(--btn-font-family, inherit) !important;
    font-size: var(--btn-font-size, 14px) !important;
    font-weight: var(--btn-font-weight, 600) !important;
    line-height: var(--btn-line-height, 1) !important;
    letter-spacing: var(--btn-letter-spacing, normal) !important;
    text-transform: var(--btn-text-transform, none) !important;
    cursor: pointer !important;
    white-space: nowrap !important;
    transition: var(--btn-transition, all 0.2s cubic-bezier(0.16, 1, 0.3, 1)) !important;
    user-select: none !important;
    border-width: var(--btn-border-width, 1px) !important;
    border-style: var(--btn-border-style, solid) !important;
    border-color: var(--btn-border-color, transparent) !important;
    width: var(--btn-width, auto) !important;
    min-width: var(--btn-min-width, 0) !important;
    max-width: var(--btn-max-width, none) !important;
    height: var(--btn-height, auto) !important;
    padding-top: var(--btn-padding-y, 9px) !important;
    padding-bottom: var(--btn-padding-y, 9px) !important;
    padding-left: var(--btn-padding-x, 18px) !important;
    padding-right: var(--btn-padding-x, 18px) !important;
    box-shadow: var(--btn-shadow, none) !important;
    background-color: var(--btn-bg, var(--tawi-primary-bg, var(--tawi-brand-primary))) !important;
    color: var(--btn-text, #ffffff) !important;
}

.tawi-btn svg, .tawi-btn i {
    color: var(--btn-icon-color, currentColor) !important;
    flex-shrink: 0;
}

.tawi-btn:hover,
.tawi-btn:hover .tawi-btn-label,
.tawi-btn:hover span {
    color: var(--btn-hover-text, var(--btn-text, #ffffff)) !important;
}

.tawi-btn:hover {
    background-color: var(--btn-hover-bg, var(--btn-bg, var(--tawi-primary-hover-bg, var(--tawi-color-hover)))) !important;
    border-color: var(--btn-hover-border, var(--btn-border-color, transparent)) !important;
    box-shadow: var(--btn-hover-shadow, var(--btn-shadow, none)) !important;
    transform: translateY(-1px) !important;
}

.tawi-btn:focus-visible {
    outline: 2px solid var(--btn-focus-color, var(--btn-bg, var(--tawi-color-focus, var(--tawi-brand-primary)))) !important;
    outline-offset: 2px !important;
}

.tawi-btn:active {
    transform: translateY(0) !important;
    background-color: var(--btn-active-bg, var(--btn-hover-bg, var(--btn-bg, var(--tawi-color-active, var(--tawi-brand-primary))))) !important;
    opacity: 0.95 !important;
}

.tawi-btn[disabled], .tawi-btn.is-disabled {
    opacity: 0.45 !important;
    pointer-events: none !important;
    cursor: not-allowed !important;
}

.tawi-btn-size-xs {
    --btn-height: 28px;
    --btn-padding-y: 5px;
    --btn-padding-x: 10px;
    --btn-font-size: 12px;
}

/* Size Variant Defaults (overridden per-element by inline --btn-* vars) */
.tawi-btn-size-sm {
    --btn-height: 34px;
    --btn-padding-y: 7px;
    --btn-padding-x: 14px;
    --btn-font-size: 13px;
}

.tawi-btn-size-md {
    --btn-height: 40px;
    --btn-padding-y: 9px;
    --btn-padding-x: 18px;
    --btn-font-size: 14px;
}

.tawi-btn-size-lg {
    --btn-height: 48px;
    --btn-padding-y: 12px;
    --btn-padding-x: 24px;
    --btn-font-size: 15px;
}

/* Preset: Primary CTA — defaults; overridden by inline style vars */
.tawi-btn-preset-primary {
    --btn-bg: var(--tawi-primary-bg, var(--tawi-brand-primary));
    --btn-text: var(--tawi-primary-text, #ffffff);
    --btn-hover-bg: var(--tawi-primary-hover-bg, var(--tawi-color-hover));
    --btn-hover-text: var(--tawi-primary-hover-text, #ffffff);
    --btn-shadow: var(--tawi-primary-shadow, 0 2px 8px rgba(86, 75, 164, 0.25));
    --btn-hover-shadow: 0 4px 14px var(--tawi-color-focus, rgba(86, 75, 164, 0.35));
    --btn-radius: var(--tawi-primary-radius, 8px);
    --btn-border-color: transparent;
}

/* Preset: Secondary Dark */
.tawi-btn-preset-secondary {
    --btn-bg: var(--tawi-secondary-bg, #111827);
    --btn-text: var(--tawi-secondary-text, #ffffff);
    --btn-hover-bg: var(--tawi-secondary-hover-bg, #1f2937);
    --btn-hover-text: var(--tawi-secondary-hover-text, #ffffff);
    --btn-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    --btn-hover-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    --btn-border-color: transparent;
}

/* Preset: Outline Clean */
.tawi-btn-preset-outline {
    --btn-bg: transparent;
    --btn-text: var(--tawi-text-color, #1f2937);
    --btn-hover-bg: var(--tawi-color-focus, rgba(86, 75, 164, 0.05));
    --btn-hover-text: var(--tawi-color-hover, var(--tawi-brand-primary));
    --btn-border-color: var(--tawi-border-color, #d1d5db);
    --btn-hover-border: var(--tawi-color-hover, var(--tawi-brand-primary));
    --btn-shadow: none;
}

/* Preset: Ghost Subtle */
.tawi-btn-preset-ghost {
    --btn-bg: transparent;
    --btn-text: var(--tawi-text-muted, #4b5563);
    --btn-hover-bg: var(--tawi-hover-state, #f3f4f6);
    --btn-hover-text: var(--tawi-text-color, #111827);
    --btn-border-color: transparent;
    --btn-shadow: none;
}

/* Preset: Soft Tint */
.tawi-btn-preset-soft {
    --btn-bg: var(--tawi-soft-bg);
    --btn-text: var(--tawi-soft-text, var(--tawi-brand-primary));
    --btn-hover-bg: var(--tawi-soft-hover-bg);
    --btn-hover-text: var(--tawi-soft-hover-text, var(--tawi-color-hover));
    --btn-border-color: var(--tawi-soft-border);
    --btn-border-width: 1px;
    --btn-shadow: none;
}

/* Preset: Custom — all CSS vars come from per-element inline style attribute */
.tawi-btn-preset-custom { --btn-font-weight: 600; }

/* Icon support inside buttons */
.tawi-btn-icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
    flex-shrink: 0 !important;
}

.tawi-btn-icon svg {
    width: var(--btn-icon-size, 16px) !important;
    height: var(--btn-icon-size, 16px) !important;
}

/* Text Link (Login / Account) */
.tawi-text-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: var(--tawi-control-height, 40px);
    font-size: 14px;
    font-weight: 500;
    color: var(--tawi-text-color, #4a4b4d);
    text-decoration: none;
    transition: color 0.2s ease, background 0.2s ease;
    cursor: pointer;
    padding: 0 10px;
    border-radius: var(--tawi-control-radius, 8px);
    box-sizing: border-box;
}

.tawi-text-link:hover {
    color: var(--tawi-color-hover, var(--tawi-brand-primary)) !important;
    background: rgba(0, 0, 0, 0.03);
}

/* ==========================================================================
   DESKTOP HEADER
   ========================================================================== */
.tawi-desktop-header {
    width: 100%;
    transition: all 0.25s ease;
}

.tawi-header-row {
    width: 100%;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

.tawi-row-topbar {
    background-color: #111827;
    color: #9ca3af;
    font-size: 13px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.tawi-row-main_header {
    background-color: #ffffff;
    border-bottom: 1px solid #eef0f2;
}

.tawi-container {
    margin: 0 auto;
    padding: 0 24px;
    width: 100%;
}

.tawi-row-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: var(--tawi-main-height, 72px);
    gap: 16px;
}

.tawi-row-topbar .tawi-row-inner {
    min-height: 36px;
}

.tawi-col {
    display: flex;
    align-items: center;
    gap: 16px;
}

/* Left Section: Logo + Navigation directly adjacent */
.tawi-col-left {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 32px;
}

.tawi-col-center {
    flex: 1 1 auto;
    justify-content: center;
}

.tawi-col-right {
    flex: 0 0 auto;
    justify-content: flex-end;
    gap: 14px;
}

/* ==========================================================================
   LOGO
   ========================================================================== */
.tawi-el-logo {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.tawi-logo-link {
    display: flex;
    align-items: center;
    text-decoration: none;
    color: inherit;
}

.tawi-logo-img {
    height: auto;
    max-height: 38px;
    object-fit: contain;
    transition: opacity 0.2s ease;
}

.tawi-logo-link:hover .tawi-logo-img {
    opacity: 0.9;
}

/* ==========================================================================
   NAVIGATION MENU
   ========================================================================== */
.tawi-el-menu {
    display: flex;
    align-items: center;
}

.tawi-nav-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    gap: var(--nav-item-gap, 22px);
}

.tawi-nav-item {
    position: relative;
    padding: 24px 0;
}

.tawi-nav-link {
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: var(--nav-font-family, inherit) !important;
    font-size: var(--nav-font-size, 15px) !important;
    font-weight: var(--nav-font-weight, 500) !important;
    line-height: var(--nav-line-height, 1.4) !important;
    letter-spacing: var(--nav-letter-spacing, normal) !important;
    text-transform: var(--nav-text-transform, none) !important;
    color: var(--nav-text-color, #2b2c2c) !important;
    padding: var(--nav-item-padding, 0) !important;
    height: var(--nav-item-height, auto);
    text-decoration: none;
    transition: color 0.2s ease;
    cursor: pointer;
}

.tawi-nav-link:hover, .tawi-nav-item:hover > .tawi-nav-link {
    color: var(--nav-hover-color, var(--tawi-color-hover, var(--tawi-brand-primary))) !important;
}

.tawi-nav-item.current-menu-item > .tawi-nav-link,
.tawi-nav-item.current_page_item > .tawi-nav-link,
.tawi-nav-item.current-menu-ancestor > .tawi-nav-link,
.tawi-nav-link.active,
.tawi-nav-link:active {
    color: var(--nav-active-color, var(--tawi-color-active, var(--tawi-brand-primary))) !important;
}

.tawi-nav-link:focus-visible {
    outline: 2px solid var(--nav-focus-color, var(--tawi-color-focus, var(--tawi-brand-primary)));
    outline-offset: 2px;
}

.tawi-caret {
    transition: transform 0.2s ease;
    color: var(--nav-caret-color, #6b7280);
    width: var(--nav-caret-size, 14px);
    height: var(--nav-caret-size, 14px);
}

.tawi-nav-item:hover > .tawi-nav-link .tawi-caret {
    transform: rotate(180deg);
    color: var(--nav-hover-color, var(--tawi-color-hover, var(--tawi-brand-primary)));
}

/* Standard Dropdown — CSS Variable-Driven */
.tawi-dropdown-menu {
    position: absolute;
    top: 100%;
    left: var(--dd-offset-x, 0);
    min-width: var(--dd-min-width, 220px);
    max-width: var(--dd-max-width, 420px);
    width: var(--dd-width, auto);
    background: var(--dd-bg, #ffffff);
    border-radius: var(--dd-radius, 12px);
    padding: var(--dd-padding, 8px);
    margin: var(--dd-margin-top, 0) 0 0 0;
    list-style: none;
    box-shadow: var(--dd-shadow, 0 12px 32px rgba(0, 0, 0, 0.12), 0 2px 6px rgba(0, 0, 0, 0.04));
    border: var(--dd-border-width, 1px) var(--dd-border-style, solid) var(--dd-border-color, rgba(0, 0, 0, 0.06));
    opacity: 0;
    visibility: hidden;
    transform: translateY(var(--dd-animation-offset, 8px));
    transition: opacity var(--dd-transition, 0.2s) cubic-bezier(0.16, 1, 0.3, 1),
                visibility var(--dd-transition, 0.2s),
                transform var(--dd-transition, 0.2s) cubic-bezier(0.16, 1, 0.3, 1);
    z-index: 100;
    gap: var(--dd-gap, 2px);
    display: flex;
    flex-direction: column;
}

.tawi-nav-item:hover > .tawi-dropdown-menu,
.tawi-nav-item:focus-within > .tawi-dropdown-menu,
.tawi-nav-item.is-open > .tawi-dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
}

.tawi-dropdown-item {
    list-style: none;
}

.tawi-dropdown-link {
    display: flex;
    align-items: center;
    gap: var(--dd-item-gap, 8px);
    padding: var(--dd-item-padding, 10px 14px);
    font-size: var(--dd-font-size, 14px);
    font-weight: var(--dd-font-weight, 400);
    color: var(--dd-text, #374151);
    text-decoration: none;
    border-radius: var(--dd-item-radius, 8px);
    transition: background var(--dd-transition, 0.15s) ease, color var(--dd-transition, 0.15s) ease;
}

.tawi-dropdown-link:hover {
    background: var(--dd-hover-bg, var(--tawi-hover-state, #f9fafb));
    color: var(--dd-hover-text, var(--tawi-color-hover, var(--tawi-brand-primary)));
}

/* Mega Menu Panel */
.tawi-megamenu-panel {
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    background: var(--mm-bg, var(--tawi-megamenu-surface, #ffffff));
    border-bottom: 1px solid var(--mm-footer-border, var(--tawi-divider-color, #e5e7eb));
    box-shadow: var(--mm-shadow, 0 20px 40px rgba(0, 0, 0, 0.08));
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity 0.25s cubic-bezier(0.16, 1, 0.3, 1),
                visibility 0.25s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: 1000;
    pointer-events: none;
}

.tawi-has-megamenu:hover .tawi-megamenu-panel,
.tawi-has-megamenu:focus-within .tawi-megamenu-panel,
.tawi-has-megamenu.is-open .tawi-megamenu-panel {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
}

/* Navigation Plus/Minus Dropdown Indicator */
.tawi-nav-indicator {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    margin-left: 6px;
    flex-shrink: 0;
    color: var(--nav-caret-color, var(--tawi-text-muted, #6b7280));
    transition: color 0.2s ease;
    vertical-align: middle;
}

.tawi-indicator-icon {
    width: 12px;
    height: 12px;
    display: block;
    color: inherit;
    overflow: visible;
}

.tawi-indicator-h {
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

.tawi-indicator-v {
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    transform-origin: 6px 6px;
    transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.18s ease;
}

/* Desktop: Expand to Minus (-) on hover, focus, or click (.is-open) */
.tawi-has-dropdown:hover > .tawi-nav-link .tawi-indicator-v,
.tawi-has-dropdown:focus-within > .tawi-nav-link .tawi-indicator-v,
.tawi-has-dropdown.is-open > .tawi-nav-link .tawi-indicator-v,
.tawi-has-megamenu:hover > .tawi-nav-link .tawi-indicator-v,
.tawi-has-megamenu:focus-within > .tawi-nav-link .tawi-indicator-v,
.tawi-has-megamenu.is-open > .tawi-nav-link .tawi-indicator-v {
    transform: rotate(90deg);
    opacity: 0;
}

.tawi-has-dropdown:hover > .tawi-nav-link .tawi-nav-indicator,
.tawi-has-dropdown:focus-within > .tawi-nav-link .tawi-nav-indicator,
.tawi-has-dropdown.is-open > .tawi-nav-link .tawi-nav-indicator,
.tawi-has-megamenu:hover > .tawi-nav-link .tawi-nav-indicator,
.tawi-has-megamenu:focus-within > .tawi-nav-link .tawi-nav-indicator,
.tawi-has-megamenu.is-open > .tawi-nav-link .tawi-nav-indicator {
    color: var(--nav-hover-color, var(--tawi-color-hover, var(--tawi-brand-primary)));
}

.tawi-caret {
    display: inline-block;
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), color 0.2s ease;
    vertical-align: middle;
}

.tawi-megamenu-inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 36px 24px;
}

.tawi-megamenu-columns {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 40px;
}

.tawi-megamenu-heading {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--mm-heading-color, #9ca3af);
    margin: 0 0 16px 0;
}

.tawi-megamenu-links {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.tawi-megamenu-link-item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 12px 14px;
    border-radius: 10px;
    text-decoration: none;
    transition: background 0.15s ease;
}

.tawi-megamenu-link-item:hover,
.tawi-megamenu-link-item:focus,
.tawi-megamenu-link-item:active,
.tawi-megamenu-link-item.is-active {
    background: var(--mm-item-hover-bg, #f9fafb);
}

.tawi-megamenu-link-icon {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: var(--mm-icon-bg, var(--tawi-soft-bg));
    color: var(--mm-icon-color, var(--tawi-icon-color, var(--tawi-brand-primary)));
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s ease, background 0.2s ease, color 0.2s ease, stroke 0.2s ease, fill 0.2s ease;
}

.tawi-megamenu-link-icon svg {
    width: 18px;
    height: 18px;
    display: block;
    color: inherit;
    transition: stroke 0.2s ease, fill 0.2s ease, color 0.2s ease;
}

.tawi-megamenu-link-icon svg:not([stroke="none"]) {
    stroke: currentColor;
}

.tawi-megamenu-link-icon svg[fill]:not([fill="none"]) {
    fill: currentColor;
}

.tawi-megamenu-link-icon i {
    color: inherit;
    font-size: 18px;
    transition: color 0.2s ease;
}

.tawi-custom-icon-img {
    object-fit: contain;
    display: block;
    filter: none !important;
}

.tawi-megamenu-link-icon .tawi-custom-icon-img,
.tawi-sublink-icon .tawi-custom-icon-img {
    max-width: 100%;
    max-height: 100%;
    filter: none !important;
}

.tawi-megamenu-card-icon {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    background: var(--mm-card-icon-bg, var(--tawi-soft-bg, rgba(86, 75, 164, 0.08)));
    color: var(--mm-card-icon-color, var(--tawi-brand-primary, #564BA4));
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
    flex-shrink: 0;
}

.tawi-megamenu-card-icon svg {
    width: 20px;
    height: 20px;
    display: block;
    color: inherit;
}

.tawi-megamenu-card-icon .tawi-custom-icon-img {
    max-width: 28px;
    max-height: 28px;
    filter: none !important;
}

.tawi-megamenu-link-item:hover .tawi-megamenu-link-icon,
.tawi-megamenu-link-item:focus .tawi-megamenu-link-icon,
.tawi-megamenu-link-item:focus-within .tawi-megamenu-link-icon,
.tawi-megamenu-link-item:active .tawi-megamenu-link-icon,
.tawi-megamenu-link-item.is-active .tawi-megamenu-link-icon {
    background: var(--mm-icon-hover-bg, var(--mm-icon-bg, var(--tawi-soft-hover-bg)));
    color: var(--mm-icon-hover-color, var(--mm-icon-color, var(--tawi-icon-hover, var(--tawi-color-hover, var(--tawi-brand-primary)))));
    transform: scale(1.05);
}

.tawi-megamenu-link-item:hover .tawi-megamenu-link-icon svg,
.tawi-megamenu-link-item:focus .tawi-megamenu-link-icon svg,
.tawi-megamenu-link-item:focus-within .tawi-megamenu-link-icon svg,
.tawi-megamenu-link-item:active .tawi-megamenu-link-icon svg,
.tawi-megamenu-link-item.is-active .tawi-megamenu-link-icon svg {
    color: var(--mm-icon-hover-color, var(--mm-icon-color, var(--tawi-icon-hover, var(--tawi-color-hover, var(--tawi-brand-primary)))));
}

.tawi-megamenu-link-item:hover .tawi-megamenu-link-icon svg:not([stroke="none"]),
.tawi-megamenu-link-item:focus .tawi-megamenu-link-icon svg:not([stroke="none"]),
.tawi-megamenu-link-item:focus-within .tawi-megamenu-link-icon svg:not([stroke="none"]),
.tawi-megamenu-link-item:active .tawi-megamenu-link-icon svg:not([stroke="none"]),
.tawi-megamenu-link-item.is-active .tawi-megamenu-link-icon svg:not([stroke="none"]) {
    stroke: currentColor;
}

.tawi-megamenu-link-item:hover .tawi-megamenu-link-icon svg[fill]:not([fill="none"]),
.tawi-megamenu-link-item:focus .tawi-megamenu-link-icon svg[fill]:not([fill="none"]),
.tawi-megamenu-link-item:focus-within .tawi-megamenu-link-icon svg[fill]:not([fill="none"]),
.tawi-megamenu-link-item:active .tawi-megamenu-link-icon svg[fill]:not([fill="none"]),
.tawi-megamenu-link-item.is-active .tawi-megamenu-link-icon svg[fill]:not([fill="none"]) {
    fill: currentColor;
}

.tawi-megamenu-link-item:hover .tawi-megamenu-link-icon i,
.tawi-megamenu-link-item:focus .tawi-megamenu-link-icon i,
.tawi-megamenu-link-item:focus-within .tawi-megamenu-link-icon i,
.tawi-megamenu-link-item:active .tawi-megamenu-link-icon i,
.tawi-megamenu-link-item.is-active .tawi-megamenu-link-icon i {
    color: var(--mm-icon-hover-color, var(--mm-icon-color, var(--tawi-icon-hover, var(--tawi-color-hover, var(--tawi-brand-primary)))));
}

.tawi-megamenu-link-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--mm-title-color, #111827);
    margin-bottom: 3px;
    transition: color 0.15s ease;
}

.tawi-megamenu-link-item:hover .tawi-megamenu-link-title {
    color: var(--mm-title-hover-color, var(--tawi-color-hover, var(--tawi-brand-primary)));
}

.tawi-megamenu-link-desc {
    font-size: 13px;
    color: var(--mm-desc-color, #6b7280);
    line-height: 1.4;
}

.tawi-megamenu-footer {
    margin-top: 24px;
    padding-top: 18px;
    border-top: 1px solid var(--mm-footer-border, #f3f4f6);
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 13px;
    color: var(--mm-footer-text, #6b7280);
}

.tawi-megamenu-footer a {
    color: var(--mm-footer-link, var(--tawi-brand-primary));
    text-decoration: none;
    font-weight: 600;
    transition: color 0.15s ease;
}

.tawi-megamenu-footer a:hover {
    color: var(--mm-footer-link-hover, var(--tawi-color-hover));
}

/* Mega-Menu Featured Cards & Badges */
.tawi-megamenu-card-item {
    display: flex;
    flex-direction: column;
    padding: 14px;
    border-radius: 12px;
    background: var(--mm-card-bg, #fbfcfd);
    border: 1px solid var(--mm-card-border, #eef0f2);
    text-decoration: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
    margin-bottom: 8px;
}
.tawi-megamenu-card-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
    border-color: var(--mm-card-title-hover-color, var(--tawi-card-border, var(--tawi-border-color)));
}
.tawi-megamenu-card-img {
    width: 100%;
    height: 110px;
    border-radius: 8px;
    background-size: cover;
    background-position: center;
    margin-bottom: 12px;
}
.tawi-megamenu-card-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--mm-card-title-color, #111827);
    margin-bottom: 4px;
    transition: color 0.15s ease;
}
.tawi-megamenu-card-item:hover .tawi-megamenu-card-title {
    color: var(--mm-card-title-hover-color, var(--tawi-color-hover, var(--tawi-brand-primary)));
}
.tawi-megamenu-card-desc {
    font-size: 13px;
    color: var(--mm-card-desc-color, #6b7280);
    line-height: 1.4;
}
.tawi-megamenu-badge {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 2px 7px;
    border-radius: 9999px;
    background: var(--mm-badge-bg, var(--tawi-soft-bg));
    color: var(--mm-badge-color, var(--tawi-brand-primary));
    margin-left: 6px;
    vertical-align: middle;
}

/* Dropdown Animation Presets */
.tawi-dropdown-anim-fade {
    transform: none !important;
}
.tawi-dropdown-anim-slide_down {
    transform: translateY(-12px);
}
.tawi-dropdown-anim-scale_up {
    transform: scale(0.95);
    transform-origin: top center;
}
.tawi-nav-item:hover > .tawi-dropdown-anim-scale_up,
.tawi-nav-item:focus-within > .tawi-dropdown-anim-scale_up {
    transform: scale(1);
}

/* Mobile Quick CTA interactive states */
.tawi-mobile-quick-btn {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: var(--cta-gap, 6px);
    transition: var(--cta-transition, all 0.2s cubic-bezier(0.16, 1, 0.3, 1));
}
.tawi-mobile-quick-btn:hover {
    background-color: var(--cta-hover-bg, var(--tawi-primary-hover-bg, var(--tawi-color-hover))) !important;
    color: var(--cta-hover-text, #ffffff) !important;
}
.tawi-mobile-quick-btn:focus-visible {
    outline: 2px solid var(--cta-focus, var(--tawi-color-focus, var(--tawi-brand-primary))) !important;
    outline-offset: 2px;
}
.tawi-mobile-quick-btn:active {
    background-color: var(--cta-active-bg, var(--tawi-color-active, var(--tawi-brand-primary))) !important;
    transform: scale(0.98);
}

/* Active hamburger dynamic color/background */
.tawi-hamburger-btn.is-active {
    color: var(--hamb-open-color, var(--hamb-color, #1f2937)) !important;
    background-color: var(--hamb-open-bg, var(--hamb-bg, transparent)) !important;
}

/* ==========================================================================
   TAWI AI PILL
   ========================================================================== */
.tawi-ai-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    height: var(--tawi-control-height, 40px);
    padding: 0 14px;
    border-radius: var(--tawi-control-radius, 8px);
    background: var(--tawi-soft-bg);
    border: 1px solid var(--tawi-soft-border);
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
    color: var(--tawi-text-color, #1f2937);
    box-sizing: border-box;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
    white-space: nowrap;
}

.tawi-ai-pill:hover {
    border-color: var(--tawi-color-hover, var(--tawi-brand-primary));
    background: var(--tawi-soft-hover-bg);
    transform: translateY(-1px);
}

.tawi-ai-sparkle {
    font-size: 14px;
    line-height: 1;
}

.tawi-ai-badge {
    font-size: 10px;
    font-weight: 700;
    background: var(--tawi-brand-primary);
    color: var(--tawi-primary-text, #ffffff);
    padding: 1px 6px;
    border-radius: 6px;
    letter-spacing: 0.04em;
    line-height: 1.3;
}

/* ==========================================================================
   SEARCH (INLINE & TRIGGER)
   ========================================================================== */
.tawi-el-search-inline {
    width: var(--tawi-input-width, 190px);
    max-width: 100%;
}

.tawi-inline-search-form {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
}

.tawi-inline-search-input {
    width: 100%;
    height: var(--tawi-input-height, var(--tawi-control-height, 40px));
    padding: 0 34px 0 34px;
    font-size: 13px;
    font-weight: 500;
    color: var(--tawi-search-text, var(--tawi-text-color, #1f2937));
    background: var(--tawi-search-bg, #f3f4f6);
    border: 1px solid var(--tawi-search-border, transparent);
    border-radius: var(--tawi-control-radius, 8px);
    outline: none;
    box-sizing: border-box;
    transition: all 0.2s ease;
}

.tawi-inline-search-input:focus {
    background: var(--tawi-surface-bg, #ffffff);
    border-color: var(--tawi-search-focus-border, var(--tawi-brand-primary));
    box-shadow: 0 0 0 3px var(--tawi-color-focus, rgba(86, 75, 164, 0.15));
}

.tawi-search-icon {
    position: absolute;
    left: 10px;
    color: #9ca3af;
    display: flex;
    align-items: center;
    pointer-events: none;
}

.tawi-search-kbd {
    position: absolute;
    right: 8px;
    font-size: 10px;
    font-family: inherit;
    font-weight: 600;
    color: #9ca3af;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 4px;
    padding: 1px 4px;
    line-height: 1.2;
    pointer-events: none;
}

.tawi-search-trigger {
    background: transparent;
    border: none;
    color: #4b5563;
    padding: 8px;
    border-radius: var(--tawi-control-radius, 8px);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    height: var(--tawi-control-height, 40px);
    box-sizing: border-box;
    transition: color 0.15s ease, background 0.15s ease;
}

.tawi-search-trigger:hover {
    color: #111827;
    background: #f3f4f6;
}

/* ==========================================================================
   PREMIUM SAAS LANGUAGE & CURRENCY SWITCHERS
   ========================================================================== */
.tawi-el-lang-switcher,
.tawi-el-curr-switcher {
    position: relative;
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
}

/* Base Switcher Toggle Button */
.tawi-switcher-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--tawi-switcher-gap, 7px);
    height: var(--tawi-selector-height, 36px);
    min-height: var(--tawi-selector-height, 36px);
    padding: var(--tawi-switcher-padding-y, 0) var(--tawi-switcher-padding-x, 11px);
    font-size: var(--tawi-switcher-font-size, 13px);
    font-weight: var(--tawi-switcher-font-weight, 500);
    line-height: 1;
    color: var(--tawi-switcher-text, #374151);
    background-color: var(--tawi-switcher-bg, #ffffff);
    border: var(--tawi-switcher-border-width, 1px) solid var(--tawi-switcher-border, #e5e7eb);
    border-radius: var(--tawi-switcher-radius, var(--tawi-control-radius, 12px));
    cursor: pointer;
    box-sizing: border-box;
    white-space: nowrap;
    user-select: none;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}

.tawi-switcher-toggle:hover {
    color: var(--tawi-switcher-hover-text, #111827) !important;
    background-color: var(--tawi-switcher-hover-bg, #f9fafb) !important;
    border-color: var(--tawi-switcher-hover-border, #d1d5db) !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.tawi-switcher-toggle:focus-visible {
    outline: 2px solid var(--tawi-accent-color, var(--tawi-brand-primary, #087A49)) !important;
    outline-offset: 2px;
}

.tawi-switcher-toggle[aria-expanded="true"] {
    background-color: var(--tawi-switcher-bg, #ffffff) !important;
    border-color: var(--tawi-accent-color, var(--tawi-brand-primary, #087A49)) !important;
    color: var(--tawi-accent-color, var(--tawi-brand-primary, #087A49)) !important;
    box-shadow: 0 0 0 3px rgba(8, 122, 73, 0.12);
}

/* Switcher Icons */
.tawi-switcher-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #6b7280;
    flex-shrink: 0;
    transition: color 0.18s ease;
}

.tawi-switcher-toggle:hover .tawi-switcher-icon,
.tawi-switcher-toggle[aria-expanded="true"] .tawi-switcher-icon {
    color: var(--tawi-accent-color, var(--tawi-brand-primary, #564BA4));
}

/* Flag Icon in Toggle and Menu */
.tawi-switcher-flag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: var(--tawi-switcher-flag-size, 16px);
    line-height: 1;
    flex-shrink: 0;
    user-select: none;
}

/* Currency Symbol in Toggle */
.tawi-curr-sym {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: var(--tawi-switcher-font-size, 12px);
    color: var(--tawi-accent-color, var(--tawi-brand-primary, #087A49));
    line-height: 1;
}

/* Current Value Label */
.tawi-switcher-current-label {
    font-weight: 600;
    font-size: var(--tawi-switcher-font-size, 13px);
    letter-spacing: 0.01em;
}

/* Caret / Chevron */
.tawi-switcher-chevron {
    color: var(--tawi-switcher-caret-color, #9ca3af);
    width: var(--tawi-switcher-caret-size, 10px);
    height: var(--tawi-switcher-caret-size, 10px);
    transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), color 0.18s ease;
    flex-shrink: 0;
    margin-left: 1px;
}

.tawi-switcher-toggle:hover .tawi-switcher-chevron {
    color: var(--tawi-switcher-hover-text, #4b5563);
}

.tawi-switcher-toggle[aria-expanded="true"] .tawi-switcher-chevron {
    transform: rotate(180deg);
    color: var(--tawi-accent-color, var(--tawi-brand-primary, #087A49));
}

/* Popover Dropdown Menu (Desktop) */
.tawi-switcher-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 240px;
    max-width: 320px;
    background: var(--tawi-dd-bg, #ffffff) !important;
    border: 1px solid var(--tawi-dd-border, rgba(0, 0, 0, 0.08)) !important;
    border-radius: var(--tawi-dd-radius, 12px) !important;
    box-shadow: var(--tawi-dd-shadow, 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.04), 0 0 1px rgba(0, 0, 0, 0.12)) !important;
    padding: var(--tawi-dd-padding, 6px) !important;
    z-index: 100002;
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
    pointer-events: none;
    transition: opacity 0.18s cubic-bezier(0.16, 1, 0.3, 1),
                visibility 0.18s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}

.tawi-switcher-dropdown.is-open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
}

/* Dropdown Menu Header */
.tawi-switcher-menu-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 7px 10px 7px 10px;
    border-bottom: 1px solid #f3f4f6;
    margin-bottom: 4px;
}

.tawi-switcher-menu-title {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #9ca3af;
}

.tawi-switcher-menu-badge {
    font-size: 10px;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 9999px;
    background: rgba(86, 75, 164, 0.08);
    color: var(--tawi-brand-primary, #564BA4);
    letter-spacing: 0.03em;
}

/* Option List */
.tawi-switcher-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.tawi-switcher-item {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Option Interactive Elements (Link / Button) */
.tawi-switcher-link,
.tawi-switcher-btn-action {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 8px 10px;
    border-radius: 8px;
    border: none;
    background: transparent;
    cursor: pointer;
    text-align: left;
    text-decoration: none;
    color: #374151;
    box-sizing: border-box;
    transition: background 0.15s ease, color 0.15s ease;
}

.tawi-switcher-link:hover,
.tawi-switcher-btn-action:hover,
.tawi-switcher-link:focus-visible,
.tawi-switcher-btn-action:focus-visible {
    background: var(--tawi-dd-hover-bg, #f5f3ff) !important;
    color: var(--tawi-dd-hover-text, #111827) !important;
    outline: none;
}

.tawi-switcher-item.is-active .tawi-switcher-link,
.tawi-switcher-item.is-active .tawi-switcher-btn-action {
    background: var(--tawi-dd-active-bg, #f5f3ff) !important;
    color: var(--tawi-dd-active-text, var(--tawi-accent-color, #087A49)) !important;
}

/* Item Content Layout */
.tawi-switcher-item-main {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.tawi-switcher-native {
    font-size: 13.5px;
    font-weight: 600;
    color: #1f2937;
    line-height: 1.25;
}

.tawi-switcher-item.is-active .tawi-switcher-native {
    color: var(--tawi-dd-active-text, var(--tawi-accent-color, #087A49)) !important;
}

.tawi-switcher-sub {
    font-size: 11px;
    color: #6b7280;
    line-height: 1.2;
}

/* Currency Item Layout */
.tawi-switcher-curr-left {
    display: flex;
    align-items: center;
    gap: 10px;
}

.tawi-switcher-sym-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 6px;
    background: #f3f4f6;
    color: #4b5563;
    font-size: 12px;
    font-weight: 700;
    flex-shrink: 0;
    transition: background 0.15s ease, color 0.15s ease;
}

.tawi-switcher-item:hover .tawi-switcher-sym-badge,
.tawi-switcher-item.is-active .tawi-switcher-sym-badge {
    background: rgba(86, 75, 164, 0.12);
    color: var(--tawi-brand-primary, #564BA4);
}

.tawi-switcher-curr-code {
    font-size: 13px;
    font-weight: 600;
    color: #1f2937;
    line-height: 1.2;
}

.tawi-switcher-item.is-active .tawi-switcher-curr-code {
    color: var(--tawi-brand-primary, #564BA4);
}

.tawi-switcher-curr-name {
    font-size: 11.5px;
    color: #6b7280;
    line-height: 1.2;
    white-space: nowrap;
}

/* Checkmark Icon */
.tawi-switcher-check {
    color: var(--tawi-brand-primary, #564BA4);
    opacity: 0;
    visibility: hidden;
    transform: scale(0.85);
    transition: opacity 0.15s ease, transform 0.15s ease;
    flex-shrink: 0;
    margin-left: 8px;
}

.tawi-switcher-item.is-active .tawi-switcher-check {
    opacity: 1;
    visibility: visible;
    transform: scale(1);
}


/* ==========================================================================
   MOBILE HEADER & SVG HAMBURGER
   ========================================================================== */
.tawi-mobile-header {
    width: 100%;
    position: relative;
    background: #ffffff;
}

.tawi-mobile-bar {
    width: 100%;
    background: #ffffff;
    border-bottom: 1px solid #eef0f2;
    padding: 0 16px;
    position: relative;
    z-index: 99991;
}

.tawi-mobile-bar-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
    min-height: 62px;
}

/* Centered Logo Layout */
.tawi-mobile-layout-centered_logo .tawi-mobile-bar-inner {
    display: grid;
    grid-template-columns: 44px 1fr 44px;
    align-items: center;
}

.tawi-mobile-logo, .tawi-drawer-logo {
    display: flex;
    align-items: center;
}

.tawi-mobile-logo a, .tawi-drawer-logo a {
    display: inline-flex;
    align-items: center;
    line-height: 1;
}

.tawi-mobile-logo img, .tawi-drawer-logo img {
    height: var(--mob-logo-height, auto);
    max-height: var(--mob-logo-max-height, 32px);
    width: var(--mob-logo-width, auto);
    max-width: var(--mob-logo-max-width, none);
    object-fit: var(--mob-logo-fit, contain);
    display: block;
}

.tawi-mobile-layout-centered_logo .tawi-mobile-logo.tawi-logo-center {
    display: flex;
    justify-content: center;
    text-align: center;
}

.tawi-mobile-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    justify-content: flex-end;
}

.tawi-mobile-quick-btn {
    font-size: 12px;
    font-weight: 600;
    background: var(--tawi-primary-bg, var(--tawi-brand-primary));
    color: var(--tawi-primary-text, #ffffff);
    padding: 6px 12px;
    border-radius: 6px;
    text-decoration: none;
    transition: background 0.2s ease;
    white-space: nowrap;
}

.tawi-mobile-icon-btn {
    background: transparent;
    border: none;
    color: #4b5563;
    cursor: pointer;
    padding: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    border-radius: 6px;
    line-height: 1;
}

/* SVG HAMBURGER BUTTON — Accessible, Transparent, Fully Styled */
.tawi-hamburger-btn {
    width: var(--tawi-hamb-touch-size, 44px) !important;
    height: var(--tawi-hamb-touch-size, 44px) !important;
    min-width: 44px !important;
    min-height: 44px !important;
    background-color: var(--tawi-hamb-bg, transparent) !important;
    color: var(--tawi-hamb-color, #1f2937) !important;
    border: none !important;
    outline: none !important;
    border-radius: var(--tawi-hamb-radius, 8px) !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    position: relative !important;
    overflow: hidden !important;
    z-index: 10 !important;
    flex-shrink: 0 !important;
    transition: background-color 0.2s ease, color 0.2s ease !important;
}

.tawi-hamburger-btn:hover {
    background-color: var(--tawi-hamb-hover-bg, #f3f4f6) !important;
    color: var(--tawi-hamb-hover-color, var(--tawi-color-hover, var(--tawi-brand-primary))) !important;
}

/* Hamburger icon wrap — position-based toggle immune to theme display overrides */
.tawi-hamb-icon-wrap {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
    pointer-events: none !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) rotate(0deg) scale(1) !important;
    transition: opacity 0.22s cubic-bezier(0.16, 1, 0.3, 1), transform 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
    width: auto !important;
    height: auto !important;
}

/* Default state: hamburger lines visible, X hidden */
.tawi-hamb-state-default {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translate(-50%, -50%) rotate(0deg) scale(1) !important;
    z-index: 2 !important;
}

.tawi-hamb-state-active {
    opacity: 0 !important;
    visibility: hidden !important;
    transform: translate(-50%, -50%) rotate(-90deg) scale(0.7) !important;
    z-index: 1 !important;
}

/* Active/open state: X visible, hamburger lines hidden */
.tawi-hamburger-btn.is-active .tawi-hamb-state-default {
    opacity: 0 !important;
    visibility: hidden !important;
    transform: translate(-50%, -50%) rotate(90deg) scale(0.7) !important;
    z-index: 1 !important;
}

.tawi-hamburger-btn.is-active .tawi-hamb-state-active {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translate(-50%, -50%) rotate(0deg) scale(1) !important;
    z-index: 2 !important;
}

/* ==========================================================================
   OFF-CANVAS MOBILE DRAWER
   ========================================================================== */
.tawi-drawer-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(4px);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.3s;
    z-index: 99990;
}

.tawi-drawer-backdrop.is-visible {
    opacity: 1;
    visibility: visible;
}

.tawi-drawer-panel {
    position: fixed;
    top: 0;
    bottom: 0;
    width: var(--tawi-drawer-width, 340px);
    max-width: var(--tawi-drawer-max-width, 86vw);
    background: var(--tawi-drawer-bg, #ffffff);
    color: var(--tawi-drawer-text, #1f2937);
    box-shadow: -10px 0 40px rgba(0, 0, 0, 0.2);
    z-index: 99999;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.35s ease;
}

/* Slide Right (Default) */
.tawi-drawer-slide_right {
    right: 0;
    left: auto;
    transform: translateX(100%);
}

.tawi-drawer-slide_right.is-open {
    transform: translateX(0);
}

/* Slide Left */
.tawi-drawer-slide_left {
    left: 0;
    right: auto;
    transform: translateX(-100%);
}

.tawi-drawer-slide_left.is-open {
    transform: translateX(0);
}

/* Fullscreen Overlay */
.tawi-drawer-fullscreen {
    inset: 0;
    width: 100vw;
    max-width: 100vw;
    opacity: 0;
    transform: scale(0.96);
    visibility: hidden;
}

.tawi-drawer-fullscreen.is-open {
    opacity: 1;
    visibility: visible;
    transform: scale(1);
}

/* Dropdown Panel */
.tawi-drawer-dropdown {
    top: 62px;
    left: 0;
    right: 0;
    bottom: auto;
    width: 100%;
    max-width: 100%;
    max-height: calc(100vh - 62px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.15);
    opacity: 0;
    transform: translateY(-12px);
    visibility: hidden;
}

.tawi-drawer-dropdown.is-open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.tawi-drawer-header {
    height: 64px;
    padding: 0 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #f3f4f6;
    flex-shrink: 0;
}

.tawi-drawer-close {
    width: var(--tawi-drawer-close-size, 38px);
    height: var(--tawi-drawer-close-size, 38px);
    border-radius: 8px;
    color: var(--tawi-drawer-close-color, #4b5563);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s ease, color 0.15s ease;
}

.tawi-drawer-close:hover {
    color: var(--tawi-drawer-close-hover, #111827);
    background: #f3f4f6;
}

.tawi-drawer-body {
    padding: 20px 20px 14px 20px;
    display: flex;
    flex-direction: column;
    gap: 18px;
    flex: 1 1 auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    min-height: 0;
}

.tawi-drawer-ai-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-radius: 10px;
    background: var(--tawi-soft-bg);
    border: 1px solid var(--tawi-soft-border);
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    color: var(--tawi-text-color, #1f2937);
    transition: all 0.2s ease;
}

.tawi-drawer-ai-btn:hover {
    background: var(--tawi-soft-hover-bg);
}

.tawi-drawer-search .tawi-search-field-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.tawi-drawer-search .tawi-search-field-icon {
    position: absolute;
    left: 12px;
    color: var(--tawi-search-icon, #9ca3af);
    pointer-events: none;
}

.tawi-drawer-search .tawi-search-input {
    width: 100%;
    padding: 10px 12px 10px 38px;
    font-size: 14px;
    border: 1px solid var(--tawi-border-color, #e5e7eb);
    border-radius: 8px;
    background: var(--tawi-search-bg, #f9fafb);
    color: var(--tawi-search-text, var(--tawi-text-color, #1f2937));
    outline: none;
    transition: all 0.2s ease;
}

.tawi-drawer-search .tawi-search-input:focus {
    border-color: var(--tawi-search-focus-border, var(--tawi-brand-primary));
    background: var(--tawi-surface-bg, #ffffff);
    box-shadow: 0 0 0 3px var(--tawi-color-focus, rgba(86, 75, 164, 0.15));
}

/* ==========================================================================
   MOBILE ACCORDION NAVIGATION
   ========================================================================== */
.tawi-mobile-accordion-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}

.tawi-mobile-acc-item {
    border-bottom: var(--tawi-drawer-divider-thickness, 1px) solid var(--tawi-drawer-divider, #f3f4f6);
}

.tawi-mobile-acc-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.tawi-mobile-acc-link {
    flex: 1 1 auto;
    padding: var(--tawi-drawer-item-padding, 14px 0);
    font-size: var(--tawi-drawer-font-size, 15px);
    font-weight: var(--tawi-drawer-font-weight, 500);
    color: var(--tawi-drawer-text, #1f2937);
    text-decoration: none;
    transition: color 0.15s ease;
}

.tawi-mobile-acc-link:hover,
.tawi-mobile-acc-link.is-active {
    color: var(--tawi-drawer-link-hover, var(--tawi-color-hover, var(--tawi-brand-primary)));
}

.tawi-accordion-toggle {
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
    color: var(--tawi-drawer-indicator-color, #6b7280);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: 4px;
    transition: color 0.2s ease;
}

.tawi-accordion-toggle .tawi-nav-indicator {
    margin-left: 0;
    color: inherit;
}

.tawi-accordion-toggle:hover {
    color: var(--tawi-drawer-link-hover, var(--tawi-color-hover, var(--tawi-brand-primary)));
}

.tawi-accordion-toggle.is-expanded {
    color: var(--tawi-drawer-link-hover, var(--tawi-color-hover, var(--tawi-brand-primary)));
}

.tawi-accordion-toggle.is-expanded .tawi-indicator-v {
    transform: rotate(90deg);
    opacity: 0;
}

.tawi-mobile-sublist {
    list-style: none;
    margin: 0;
    padding: 6px 0 14px 10px;
    display: none;
    flex-direction: column;
    gap: 4px;
    background: var(--tawi-accordion-bg, var(--tawi-soft-bg, #fafafa));
    border-radius: 8px;
    margin-bottom: 8px;
}

.tawi-mobile-sublist.is-open {
    display: flex;
    animation: tawiAccordionFade 0.25s ease;
}

@keyframes tawiAccordionFade {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}

.tawi-mobile-subgroup-title {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--mm-heading-color, var(--tawi-text-muted, #9ca3af));
    letter-spacing: 0.05em;
    padding: 8px 10px 4px 10px;
    list-style: none;
}

.tawi-mobile-subitem {
    list-style: none;
}

.tawi-mobile-sublink {
    display: block;
    font-size: 14px;
    color: var(--mm-link-color, var(--tawi-text-color, #4b5563));
    text-decoration: none;
    padding: 8px 10px;
    border-radius: 6px;
    transition: color 0.15s ease, background 0.15s ease;
}

.tawi-mobile-sublink:hover,
.tawi-mobile-sublink:focus,
.tawi-mobile-sublink:active {
    color: var(--mm-link-hover, var(--tawi-drawer-link-hover, var(--tawi-color-hover, var(--tawi-brand-primary))));
    background: var(--mm-item-hover-bg, var(--tawi-accordion-hover-bg, rgba(86, 75, 164, 0.05)));
}

.tawi-mobile-sublink-rich {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.tawi-sublink-icon {
    width: 32px;
    height: 32px;
    border-radius: 6px;
    background: var(--mm-icon-bg, var(--tawi-accordion-hover-bg, var(--tawi-soft-bg)));
    color: var(--mm-icon-color, var(--tawi-icon-color, var(--tawi-brand-primary)));
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.tawi-sublink-icon svg {
    width: 16px;
    height: 16px;
    display: block;
    color: inherit;
}

.tawi-sublink-icon svg:not([stroke="none"]) {
    stroke: currentColor;
}

.tawi-sublink-icon svg[fill]:not([fill="none"]) {
    fill: currentColor;
}

.tawi-sublink-info {
    display: flex;
    flex-direction: column;
}

.tawi-sublink-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--mm-link-color, var(--tawi-drawer-text, #1f2937));
}

.tawi-sublink-desc {
    font-size: 12px;
    color: var(--mm-desc-color, var(--tawi-text-muted, #6b7280));
    line-height: 1.3;
}

/* Mobile Drawer Preferences Section (Language & Currency) */
.tawi-drawer-preferences {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 16px 0;
    border-top: 1px solid var(--tawi-drawer-divider, #f3f4f6);
    margin-top: 4px;
}

.tawi-drawer-pref-header {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #9ca3af;
    padding: 0 2px;
}

.tawi-pref-icon {
    color: #9ca3af;
}

.tawi-drawer-pref-grid {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.tawi-drawer-pref-item {
    display: flex;
    flex-direction: column;
    gap: 5px;
    width: 100%;
}

.tawi-drawer-pref-field-title {
    font-size: 11.5px;
    font-weight: 600;
    color: #6b7280;
    letter-spacing: 0.02em;
}

.tawi-drawer-pref-item .tawi-el-lang-switcher,
.tawi-drawer-pref-item .tawi-el-curr-switcher {
    width: 100%;
    display: block;
    position: relative;
}

.tawi-drawer-pref-item .tawi-switcher-toggle {
    width: 100%;
    height: 44px;
    min-height: 44px;
    padding: 0 14px;
    border-radius: 10px;
    justify-content: space-between;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    font-size: 14px;
    font-weight: 500;
}

.tawi-drawer-pref-item .tawi-switcher-toggle:hover {
    border-color: #d1d5db;
    background: #f9fafb;
}

/* In-Flow Dropdown Inside Mobile Drawer */
.tawi-drawer-preferences .tawi-switcher-dropdown {
    position: static !important;
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04) !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 10px !important;
    margin-top: 6px;
    max-height: 250px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    transform: none !important;
}

.tawi-drawer-preferences .tawi-switcher-link,
.tawi-drawer-preferences .tawi-switcher-btn-action {
    padding: 10px 12px;
    min-height: 44px; /* Touch-friendly tap targets */
}

/* Hide switchers from narrow mobile topbar to avoid crowding */
@media (max-width: 1024px) {
    .tawi-mobile-bar .tawi-el-lang-switcher,
    .tawi-mobile-bar .tawi-el-curr-switcher {
        display: none !important;
    }
}

/* Drawer Action Links & Bottom CTA */
.tawi-drawer-links {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--tawi-drawer-divider, #f3f4f6);
}

.tawi-drawer-action-link {
    font-size: 14px;
    font-weight: 500;
    color: var(--tawi-drawer-text, #4b5563);
    text-decoration: none;
    padding: 6px 0;
    transition: color 0.15s ease;
}

.tawi-drawer-action-link:hover {
    color: var(--tawi-drawer-link-hover, var(--tawi-color-hover, var(--tawi-brand-primary)));
}

/* Style Login as secondary action button */
.tawi-drawer-login-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    padding: 10px 16px !important;
    border-radius: 8px !important;
    border: 1px solid var(--tawi-drawer-divider, #d1d5db) !important;
    background: var(--tawi-card-bg, #ffffff) !important;
    color: var(--tawi-drawer-text, #374151) !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    text-align: center !important;
    box-sizing: border-box !important;
    transition: all 0.2s ease !important;
}

.tawi-drawer-login-btn:hover {
    background: var(--tawi-hover-state, #f9fafb) !important;
    border-color: var(--tawi-color-focus, var(--tawi-brand-primary)) !important;
    color: var(--tawi-drawer-link-hover, var(--tawi-color-hover, var(--tawi-brand-primary))) !important;
}

.tawi-drawer-cta-wrap {
    margin-top: auto;
    padding-top: 12px;
}

.tawi-drawer-cta-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    padding: 13px 20px !important;
    border-radius: 8px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    line-height: 1 !important;
    box-sizing: border-box !important;
    box-shadow: var(--tawi-primary-shadow, 0 4px 12px rgba(86, 75, 164, 0.25)) !important;
    transition: all 0.2s ease !important;
}

/* Sticky Drawer Footer with Side-by-Side Login & CTA */
.tawi-drawer-bottom-bar {
    flex-shrink: 0;
    margin-top: auto;
    position: sticky;
    bottom: 0;
    background: var(--tawi-drawer-bg, #ffffff);
    border-top: 1px solid var(--tawi-drawer-divider, #f3f4f6);
    padding: 12px 20px;
    padding-bottom: max(12px, env(safe-area-inset-bottom, 12px));
    z-index: 10;
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.05);
}

.tawi-drawer-actions-row {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    box-sizing: border-box;
}

.tawi-drawer-btn-secondary {
    flex: 0 0 38%;
    max-width: 42%;
    min-width: 0;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 10px !important;
    border-radius: 8px;
    border: 1px solid var(--tawi-drawer-divider, #d1d5db) !important;
    background: var(--tawi-card-bg, #ffffff) !important;
    color: var(--tawi-drawer-text, #1f2937) !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    text-align: center !important;
    text-decoration: none !important;
    box-sizing: border-box !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    transition: all 0.2s ease !important;
}

.tawi-drawer-btn-secondary:hover {
    background: var(--tawi-hover-state, #f9fafb) !important;
    border-color: var(--tawi-color-focus, var(--tawi-brand-primary)) !important;
    color: var(--tawi-drawer-link-hover, var(--tawi-color-hover, var(--tawi-brand-primary))) !important;
}

.tawi-drawer-actions-row .tawi-drawer-cta-btn {
    flex: 1 1 62%;
    min-width: 0;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background-color: var(--cta-bg, var(--tawi-primary-bg, var(--tawi-brand-primary))) !important;
    color: var(--cta-text, #ffffff) !important;
    padding: 0 14px !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    text-align: center !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    box-sizing: border-box !important;
    text-decoration: none !important;
    box-shadow: var(--tawi-primary-shadow, 0 4px 12px rgba(86, 75, 164, 0.25)) !important;
    transition: all 0.2s ease !important;
}

.tawi-drawer-actions-row .tawi-drawer-cta-btn:hover {
    background-color: var(--cta-hover-bg, var(--tawi-primary-hover-bg, var(--tawi-color-hover))) !important;
    color: var(--cta-hover-text, #ffffff) !important;
    opacity: 0.96;
    transform: translateY(-1px);
}

.tawi-drawer-footer {
    margin-top: 8px;
    text-align: center;
    font-size: 12px;
    color: #9ca3af;
}

@media (max-width: 360px) {
    .tawi-drawer-bottom-bar {
        padding: 10px 14px;
        padding-bottom: max(10px, env(safe-area-inset-bottom, 10px));
    }
    .tawi-drawer-actions-row {
        gap: 6px;
    }
    .tawi-drawer-btn-secondary {
        font-size: 13px !important;
        padding: 0 6px !important;
    }
    .tawi-drawer-actions-row .tawi-drawer-cta-btn {
        font-size: 13px !important;
        padding: 0 8px !important;
    }
}

/* ==========================================================================
   SEARCH MODAL
   ========================================================================== */
.tawi-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(11, 15, 25, 0.7);
    backdrop-filter: blur(8px);
    z-index: 999999;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 100px 20px 20px 20px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease, visibility 0.25s ease;
}

.tawi-modal-backdrop.is-visible {
    opacity: 1;
    visibility: visible;
}

.tawi-modal-card {
    background: #ffffff;
    border-radius: 16px;
    width: 100%;
    max-width: 600px;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.3);
    overflow: hidden;
    transform: translateY(-20px);
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

.tawi-modal-backdrop.is-visible .tawi-modal-card {
    transform: translateY(0);
}

.tawi-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid #f3f4f6;
}

.tawi-modal-title {
    font-size: 14px;
    font-weight: 600;
    color: #374151;
}

.tawi-modal-close {
    width: 32px;
    height: 32px;
    border-radius: 6px;
    color: #9ca3af;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: color 0.15s ease;
}

.tawi-modal-close:hover {
    color: #111827;
}

.tawi-modal-form {
    padding: 20px;
}

.tawi-modal-input-wrap {
    display: flex;
    align-items: center;
    position: relative;
}

.tawi-modal-search-icon {
    position: absolute;
    left: 14px;
    color: var(--tawi-search-icon, var(--tawi-brand-primary));
    pointer-events: none;
}

.tawi-modal-input {
    width: 100%;
    padding: 14px 16px 14px 44px;
    font-size: 16px;
    border: 1px solid var(--tawi-search-border, #e5e7eb);
    border-radius: 10px;
    background: var(--tawi-search-bg, #ffffff);
    color: var(--tawi-search-text, var(--tawi-text-color, #1f2937));
    outline: none;
    transition: all 0.2s ease;
}

.tawi-modal-input:focus {
    border-color: var(--tawi-search-focus-border, var(--tawi-brand-primary));
    box-shadow: 0 0 0 3px var(--tawi-color-focus, rgba(86, 75, 164, 0.15));
}

.tawi-modal-quick-suggestions {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 14px;
    font-size: 12px;
}

.tawi-suggestion-label {
    color: var(--tawi-text-muted, #9ca3af);
    font-weight: 600;
}

.tawi-modal-quick-suggestions a {
    color: var(--tawi-text-color, #4b5563);
    text-decoration: none;
    background: var(--tawi-hover-state, #f3f4f6);
    padding: 3px 8px;
    border-radius: 6px;
    transition: all 0.15s ease;
}

.tawi-modal-quick-suggestions a:hover {
    background: var(--tawi-soft-bg);
    color: var(--tawi-color-hover, var(--tawi-brand-primary));
}

/* ==========================================================================
   RESPONSIVE REFINEMENTS ACROSS ALL BREAKPOINTS
   320px, 360px, 375px, 390px, 430px, 768px, 1024px, 1200px, 1440px
   ========================================================================== */
@media (max-width: 480px) {
    .tawi-mobile-bar {
        padding: 0 12px;
    }
    .tawi-mobile-logo img, .tawi-drawer-logo img {
        max-height: var(--mob-logo-max-height, 28px);
        max-width: var(--mob-logo-max-width, 120px);
        object-fit: var(--mob-logo-fit, contain);
    }
    .tawi-mobile-actions {
        gap: 6px;
    }
    .tawi-mobile-quick-btn {
        font-size: 11px;
        padding: 5px 10px;
    }
}

@media (max-width: 360px) {
    .tawi-mobile-bar {
        padding: 0 8px;
    }
    .tawi-mobile-logo img, .tawi-drawer-logo img {
        max-height: var(--mob-logo-max-height, 24px);
        max-width: var(--mob-logo-max-width, 95px);
    }
    .tawi-mobile-quick-btn {
        font-size: 10px;
        padding: 4px 7px;
    }
}

/* ==========================================================================
   CORE RESPONSIVE DISPLAY & MEGA-MENU FULL-WIDTH POSITIONING
   ========================================================================== */
@media (min-width: 1025px) {
    .tawi-desktop-header { display: block !important; }
    .tawi-mobile-header { display: none !important; }
}

@media (max-width: 1024px) {
    .tawi-desktop-header { display: none !important; }
    .tawi-mobile-header { display: block !important; }
}

.tawi-desktop-header .tawi-has-megamenu {
    position: static !important;
}

.tawi-row-main_header {
    position: relative !important;
}

.tawi-megamenu-panel {
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
}

/* Responsive Visibility Utility Classes */
@media (min-width: 1025px) {
    .tawi-hide-desktop { display: none !important; }
}
@media (min-width: 768px) and (max-width: 1024px) {
    .tawi-hide-tablet { display: none !important; }
}
@media (max-width: 767px) {
    .tawi-hide-mobile { display: none !important; }
}