/*
 * ELBC Global Style Overrides
 * Prevents Hello Elementor and Elementor from overriding theme styles
 * ================================================================== */

/* ==========================================================
   NUMBERS ALWAYS LTR (Phone, Dates, etc.)
   Forces numbers to display left-to-right even in RTL mode
   ========================================================== */

/* Phone numbers - always LTR */
a[href^="tel:"],
a[href^="tel:"] *,
.elbc-table-phone,
.elbc-partner-phone,
.elbc-phone,
[class*="phone"],
[class*="Phone"] {
    direction: ltr !important;
    unicode-bidi: embed;
    text-align: left;
}

/* In RTL, align phone to the right but keep number LTR */
[dir="rtl"] a[href^="tel:"],
[dir="rtl"] .elbc-table-phone,
[dir="rtl"] .elbc-partner-phone,
[dir="rtl"] .elbc-phone,
[dir="rtl"] [class*="phone"],
[dir="rtl"] [class*="Phone"] {
    text-align: right;
    display: inline-block;
}

/* Email addresses - always LTR */
a[href^="mailto:"],
a[href^="mailto:"] *,
.elbc-table-email,
.elbc-partner-email,
.elbc-email,
[class*="email"],
[class*="Email"] {
    direction: ltr !important;
    unicode-bidi: embed;
}

/* Numbers in general */
.ltr-number,
.elbc-number,
time,
.col-year,
.col-date,
.col-number,
.col-leg-number {
    direction: ltr !important;
    unicode-bidi: embed;
}

/* ==========================================================
   RESET ELEMENTOR GLOBAL COLORS
   ========================================================== */

:root {
    /* Override Elementor's global color system with ELBC colors */
    --e-global-color-primary: var(--color-secondary) !important;
    --e-global-color-secondary: var(--color-primary) !important;
    --e-global-color-text: var(--color-text-main) !important;
    --e-global-color-accent: var(--color-secondary) !important;
    
    /* Override Elementor typography */
    --e-global-typography-primary-font-family: var(--font-primary) !important;
    --e-global-typography-secondary-font-family: var(--font-primary) !important;
    --e-global-typography-text-font-family: var(--font-primary) !important;
    --e-global-typography-accent-font-family: var(--font-primary) !important;
}

/* ==========================================================
   LINK STYLES - GLOBAL RESET
   ========================================================== */

/* Base link reset - remove Elementor/Hello Elementor inheritance */
a {
    color: inherit;
    text-decoration: none;
    transition: color var(--transition-base);
}

a:hover,
a:focus {
    color: var(--color-secondary);
    text-decoration: none;
}

/* Elementor specific link overrides */
.elementor a,
.elementor-widget a,
.elementor-element a,
.elementor-widget-container a {
    color: inherit;
    text-decoration: none !important;
}

.elementor a:hover,
.elementor-widget a:hover,
.elementor-element a:hover,
.elementor-widget-container a:hover {
    color: var(--color-secondary-dark) !important;
}

/* ==========================================================
   BUTTON STYLES - GLOBAL RESET
   ========================================================== */

/* Base button reset */
button,
.button,
.btn,
input[type="submit"],
input[type="button"] {
    background-color: var(--color-secondary);
    color: var(--color-text-light);
    border: none;
    border-radius: var(--radius-md);
    padding: var(--spacing-md) var(--spacing-xl);
    font-family: var(--font-primary);
    font-weight: var(--font-weight-semibold);
    cursor: pointer;
    transition: all var(--transition-base);
}

button:hover,
.button:hover,
.btn:hover,
input[type="submit"]:hover,
input[type="button"]:hover {
    background-color: var(--color-primary);
    color: var(--color-text-light);
}

/* Elementor button overrides */
.elementor-button,
.elementor-button-link,
.e-button,
.elementor-widget-button .elementor-button {
    background-color: var(--color-secondary) !important;
    color: var(--color-text-light) !important;
    border-color: var(--color-secondary) !important;
    font-family: var(--font-primary) !important;
}

.elementor-button:hover,
.elementor-button-link:hover,
.e-button:hover,
.elementor-widget-button .elementor-button:hover {
    background-color: var(--color-primary) !important;
    color: var(--color-text-light) !important;
    border-color: var(--color-primary) !important;
}

/* Elementor button text/icon */
.elementor-button .elementor-button-text,
.elementor-button .elementor-button-icon {
    color: inherit !important;
}

/* Secondary/outline button variant */
.elementor-button.elementor-button-outline,
.btn-outline,
.button-outline {
    background-color: transparent !important;
    color: var(--color-secondary) !important;
    border: 2px solid var(--color-secondary) !important;
}

.elementor-button.elementor-button-outline:hover,
.btn-outline:hover,
.button-outline:hover {
    background-color: var(--color-secondary) !important;
    color: var(--color-text-light) !important;
}

/* ==========================================================
   HEADING STYLES
   ========================================================== */

h1, h2, h3, h4, h5, h6,
.elementor-heading-title,
.elementor-widget-heading .elementor-heading-title {
    font-family: var(--font-primary) !important;
    color: inherit;
}

/* ==========================================================
   TEXT/PARAGRAPH STYLES
   ========================================================== */

p,
.elementor-widget-text-editor p,
.elementor-text-editor p {
    font-family: var(--font-primary);
    color: inherit;
}

/* ==========================================================
   FORM ELEMENTS
   ========================================================== */

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
textarea,
select {
    font-family: var(--font-primary);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: var(--spacing-sm) var(--spacing-md);
    transition: border-color var(--transition-base);
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="number"]:focus,
textarea:focus,
select:focus {
    border-color: var(--color-secondary);
    outline: none;
}

/* Elementor form overrides */
.elementor-field-textual,
.elementor-field-group input,
.elementor-field-group textarea {
    font-family: var(--font-primary) !important;
}

.elementor-field-group .elementor-button {
    background-color: var(--color-secondary) !important;
}

/* ==========================================================
   ICON STYLES
   ========================================================== */

.elementor-icon,
.elementor-icon i,
.elementor-icon svg {
    color: inherit !important;
    fill: currentColor !important;
}

/* ==========================================================
   SOCIAL ICONS
   ========================================================== */

.elementor-social-icon,
.elementor-widget-social-icons a {
    background-color: var(--color-secondary) !important;
    color: var(--color-text-light) !important;
}

.elementor-social-icon:hover,
.elementor-widget-social-icons a:hover {
    background-color: var(--color-primary) !important;
}

/* ==========================================================
   NAVIGATION/MENU OVERRIDES
   ========================================================== */

.elementor-nav-menu a,
.elementor-widget-nav-menu a {
    color: inherit;
}

.elementor-nav-menu a:hover,
.elementor-widget-nav-menu a:hover,
.elementor-nav-menu .current-menu-item a,
.elementor-nav-menu .current_page_item a {
    color: var(--color-secondary) !important;
}

/* ==========================================================
   IMAGE & MEDIA
   ========================================================== */

.elementor-image img,
.elementor-widget-image img {
    max-width: 100%;
    height: auto;
}

/* ==========================================================
   DIVIDER/SEPARATOR
   ========================================================== */

.elementor-divider-separator,
.elementor-widget-divider .elementor-divider-separator {
    border-color: var(--color-secondary) !important;
}

/* ==========================================================
   ACCORDION & TABS
   ========================================================== */

.elementor-accordion .elementor-tab-title,
.elementor-toggle .elementor-tab-title {
    font-family: var(--font-primary) !important;
}

.elementor-accordion .elementor-tab-title.elementor-active,
.elementor-toggle .elementor-tab-title.elementor-active {
    color: var(--color-secondary) !important;
}

.elementor-tab-desktop-title.elementor-active,
.elementor-tab-mobile-title.elementor-active {
    color: var(--color-secondary) !important;
}

/* ==========================================================
   TESTIMONIALS & REVIEWS
   ========================================================== */

.elementor-testimonial-content,
.elementor-widget-testimonial .elementor-testimonial-content {
    font-family: var(--font-primary) !important;
}

/* ==========================================================
   PRICING TABLES
   ========================================================== */

.elementor-price-table__button,
.elementor-widget-price-table .elementor-price-table__button {
    background-color: var(--color-secondary) !important;
    color: var(--color-text-light) !important;
}

/* ==========================================================
   COUNTER & PROGRESS
   ========================================================== */

.elementor-counter-number,
.elementor-widget-counter .elementor-counter-number {
    color: var(--color-secondary) !important;
}

.elementor-progress-bar,
.elementor-widget-progress .elementor-progress-bar {
    background-color: var(--color-secondary) !important;
}

/* ==========================================================
   STAR RATING
   ========================================================== */

.elementor-star-rating i,
.elementor-widget-star-rating i {
    color: var(--color-secondary) !important;
}

/* ==========================================================
   BLOCKQUOTE
   ========================================================== */

blockquote,
.elementor-blockquote {
    border-inline-start-color: var(--color-secondary) !important;
    font-family: var(--font-primary) !important;
}

/* ==========================================================
   ELBC CUSTOM BUTTON CLASSES
   ========================================================== */

.elbc-btn,
.elbc-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    background-color: var(--color-secondary);
    color: var(--color-text-light);
    padding: var(--spacing-md) var(--spacing-xl);
    border-radius: var(--radius-md);
    font-family: var(--font-primary);
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-base);
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: all var(--transition-base);
}

.elbc-btn:hover,
.elbc-button:hover {
    background-color: var(--color-primary);
    color: var(--color-text-light);
    transform: translateY(-2px);
}

.elbc-btn-secondary,
.elbc-button-secondary {
    background-color: var(--color-primary);
}

.elbc-btn-secondary:hover,
.elbc-button-secondary:hover {
    background-color: var(--color-secondary);
}

.elbc-btn-outline,
.elbc-button-outline {
    background-color: transparent;
    color: var(--color-secondary);
    border: 2px solid var(--color-secondary);
}

.elbc-btn-outline:hover,
.elbc-button-outline:hover {
    background-color: var(--color-secondary);
    color: var(--color-text-light);
}

/* ==========================================================
   ELBC CUSTOM LINK CLASSES
   ========================================================== */

.elbc-link {
    color: var(--color-secondary);
    text-decoration: none;
    transition: color var(--transition-base);
}

.elbc-link:hover {
    color: var(--color-primary);
}

.elbc-link-underline {
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* ==========================================================
   UTILITY: DESIGN SYSTEM COLOR CLASSES
   Use these classes to force elements to use design system colors
   ========================================================== */

.elbc-color-primary,
.color-primary {
    color: var(--color-primary) !important;
}

.elbc-color-secondary,
.color-secondary {
    color: var(--color-secondary) !important;
}

.elbc-color-accent,
.color-accent {
    color: var(--color-accent) !important;
}

.elbc-color-alert,
.color-alert {
    color: var(--color-alert) !important;
}

.elbc-bg-primary,
.bg-primary {
    background-color: var(--color-primary) !important;
}

.elbc-bg-secondary,
.bg-secondary {
    background-color: var(--color-secondary) !important;
}

.elbc-bg-accent,
.bg-accent {
    background-color: var(--color-accent) !important;
}

.elbc-border-primary,
.border-primary {
    border-color: var(--color-primary) !important;
}

.elbc-border-secondary,
.border-secondary {
    border-color: var(--color-secondary) !important;
}