/**
 * CodeAppSec — Elementor Widget Styles
 * Overrides and compatibility for Elementor widgets
 */

/* ── Elementor Typography Sync ─────────────────────────── */
.elementor-widget-heading .elementor-heading-title {
    font-family: var(--font-heading) !important;
    letter-spacing: 0.02em;
}

.elementor-widget-text-editor {
    color: var(--clr-text);
    line-height: 1.8;
}

/* ── Elementor Button Styles ───────────────────────────── */
.elementor-button {
    font-family: var(--font-heading) !important;
    font-weight: 600 !important;
    letter-spacing: 0.05em !important;
    text-transform: uppercase !important;
    border-radius: var(--radius) !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.elementor-button.elementor-button-primary,
.elementor-button[style*="background-color"] {
    box-shadow: 0 0 20px rgba(0, 102, 255, 0.3) !important;
}

/* ── Elementor Forms ────────────────────────────────────── */
.elementor-form .elementor-field-group input,
.elementor-form .elementor-field-group select,
.elementor-form .elementor-field-group textarea {
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid var(--clr-border) !important;
    border-radius: var(--radius) !important;
    color: var(--clr-white) !important;
    font-family: var(--font-body) !important;
    transition: all 0.2s ease !important;
}

.elementor-form .elementor-field-group input:focus,
.elementor-form .elementor-field-group textarea:focus {
    border-color: var(--clr-primary) !important;
    box-shadow: 0 0 0 3px rgba(0, 102, 255, 0.1) !important;
    outline: none !important;
}

.elementor-form label {
    color: var(--clr-text-muted) !important;
    font-family: var(--font-heading) !important;
    font-weight: 600 !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;
    font-size: 0.85rem !important;
}

/* ── Elementor Card / Box ───────────────────────────────── */
.elementor-widget-image-box .elementor-image-box-content h3,
.elementor-widget-icon-box .elementor-icon-box-title {
    font-family: var(--font-heading) !important;
    color: var(--clr-white) !important;
}

.elementor-widget-icon-box .elementor-icon-box-description,
.elementor-widget-image-box .elementor-image-box-description {
    color: var(--clr-text-muted) !important;
    line-height: 1.7 !important;
}

/* ── Elementor Icon Color ──────────────────────────────── */
.elementor-icon i,
.elementor-icon svg {
    color: var(--clr-primary);
    fill: var(--clr-primary);
}

/* ── Elementor Divider ─────────────────────────────────── */
.elementor-divider-separator {
    border-color: var(--clr-border) !important;
}

/* ── Elementor Testimonials ────────────────────────────── */
.elementor-testimonial-content {
    font-style: italic;
    color: var(--clr-text) !important;
    line-height: 1.8;
}

.elementor-testimonial-name {
    font-family: var(--font-heading) !important;
    font-weight: 700 !important;
    color: var(--clr-white) !important;
}

/* ── Elementor Tabs ────────────────────────────────────── */
.elementor-tab-title.elementor-active {
    color: var(--clr-primary) !important;
    border-bottom-color: var(--clr-primary) !important;
}

/* ── Elementor Accordion ────────────────────────────────── */
.elementor-accordion .elementor-tab-title {
    background: rgba(7, 15, 30, 0.8) !important;
    border: 1px solid var(--clr-border) !important;
    color: var(--clr-text) !important;
    transition: all 0.2s ease;
}

.elementor-accordion .elementor-tab-title.elementor-active {
    background: rgba(0, 102, 255, 0.08) !important;
    border-color: var(--clr-primary) !important;
    color: var(--clr-white) !important;
}

.elementor-accordion .elementor-tab-content {
    background: rgba(7, 15, 30, 0.5) !important;
    border: 1px solid var(--clr-border) !important;
    border-top: none !important;
    color: var(--clr-text-muted) !important;
}

/* ── Elementor Counter ─────────────────────────────────── */
.elementor-counter .elementor-counter-number-wrapper {
    font-family: var(--font-heading) !important;
    background: linear-gradient(135deg, var(--clr-primary), var(--clr-accent));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ── Elementor Progress Bar ─────────────────────────────── */
.elementor-progress-bar {
    background: var(--clr-primary) !important;
    box-shadow: 0 0 10px rgba(0, 102, 255, 0.4);
}

/* ── Elementor Section BG ──────────────────────────────── */
.elementor-section {
    position: relative;
    z-index: 1;
}

/* ── Elementor Popup ────────────────────────────────────── */
.elementor-popup-modal .dialog-widget-content {
    background: var(--clr-bg-3) !important;
    border: 1px solid var(--clr-border) !important;
    border-radius: var(--radius-xl) !important;
}

/* ── WooCommerce Basic Styles (if needed) ────────────────── */
.woocommerce .button,
.woocommerce button.button {
    background: var(--clr-primary) !important;
    color: var(--clr-white) !important;
    font-family: var(--font-heading) !important;
    border-radius: var(--radius) !important;
}

/* ── Theme Custom Classes for Elementor Builder ─────────── */

/* Use these as custom CSS classes in Elementor widgets */

/* .cas-card — Dark card style */
.cas-card {
    background: var(--clr-card) !important;
    border: 1px solid var(--clr-border) !important;
    border-radius: var(--radius-lg) !important;
    padding: 36px 30px !important;
    transition: all 0.35s ease !important;
}

.cas-card:hover {
    border-color: rgba(0, 102, 255, 0.35) !important;
    transform: translateY(-6px) !important;
    box-shadow: 0 4px 40px rgba(0,0,0,0.6), 0 0 30px rgba(0,102,255,0.25) !important;
}

/* .cas-glow-btn — Glowing primary button */
.cas-glow-btn {
    box-shadow: 0 0 20px rgba(0, 102, 255, 0.4) !important;
}

/* .cas-cyber-card — Green-accented security card */
.cas-cyber-card {
    background: var(--clr-card) !important;
    border: 1px solid rgba(0, 255, 135, 0.1) !important;
    border-radius: var(--radius-lg) !important;
    transition: all 0.35s ease !important;
}

.cas-cyber-card:hover {
    border-color: rgba(0, 255, 135, 0.3) !important;
    transform: translateY(-6px) !important;
}

/* .cas-section-label — Monospace section badge */
.cas-section-label {
    display: inline-flex !important;
    align-items: center !important;
    font-family: var(--font-mono) !important;
    font-size: 0.78rem !important;
    letter-spacing: 0.2em !important;
    text-transform: uppercase !important;
    color: var(--clr-accent) !important;
    background: rgba(0, 229, 255, 0.08) !important;
    border: 1px solid rgba(0, 229, 255, 0.2) !important;
    padding: 6px 16px !important;
    border-radius: 100px !important;
}