/**
 * Web App Shell - Elementor Overrides
 *
 * Ensures Elementor content integrates seamlessly with the App Shell.
 * Removes unwanted margins, padding, and container widths.
 *
 * @package WebAppTheme
 */

/* ==========================================================================
   Elementor Global Resets
   ========================================================================== */

/* Remove default Elementor page padding */
.webapp-content .elementor-kit-* {
    --page-padding-top: 0;
    --page-padding-bottom: 0;
}

/* Elementor containers should be full width within app content */
.webapp-content .elementor {
    width: 100%;
}

.webapp-content .elementor-inner,
.webapp-content .elementor-section-wrap {
    width: 100%;
}

/* ==========================================================================
   Section Resets
   ========================================================================== */

/* Remove boxed container max-width */
.webapp-content .elementor-section.elementor-section-boxed > .elementor-container {
    max-width: 100%;
}

/* Full width sections */
.webapp-content .elementor-section.elementor-section-full_width {
    width: 100%;
}

/* Remove section default padding */
.webapp-content .elementor-section {
    padding: 0;
}

/* Remove gaps between sections */
.webapp-content .elementor > .elementor-section:first-child {
    margin-top: 0;
}

.webapp-content .elementor-section + .elementor-section {
    margin-top: 0;
}

/* ==========================================================================
   Container (Flexbox) Resets
   ========================================================================== */

/* Modern Elementor containers */
.webapp-content .e-con {
    --container-max-width: 100%;
    --container-default-padding-inline: 0;
    --container-default-padding-block: 0;
    max-width: 100%;
}

/* Remove container padding from app content */
.webapp-content .e-con-inner {
    padding: 0;
}

/* First container has no top margin */
.webapp-content .elementor > .e-con:first-child,
.webapp-content .elementor > .elementor-element:first-child {
    margin-top: 0;
}

/* ==========================================================================
   Widget Spacing
   ========================================================================== */

/* Reset widget margins - let app components handle spacing */
.webapp-content .elementor-widget:not(:last-child) {
    margin-bottom: 0;
}

/* Grid gaps are handled by app-grid classes */
.webapp-content .e-con[data-element_type="container"] {
    gap: 0;
}

/* ==========================================================================
   Typography Reset
   ========================================================================== */

/* Inherit app typography */
.webapp-content .elementor-widget-text-editor,
.webapp-content .elementor-widget-heading {
    font-family: var(--font-family);
}

/* Heading styles */
.webapp-content .elementor-heading-title {
    font-family: var(--font-family);
    color: var(--text);
}

/* Text editor content */
.webapp-content .elementor-text-editor {
    color: var(--text);
    font-size: var(--text-base);
    line-height: var(--leading-normal);
}

.webapp-content .elementor-text-editor p {
    margin-bottom: var(--space-4);
}

.webapp-content .elementor-text-editor p:last-child {
    margin-bottom: 0;
}

/* ==========================================================================
   Button Widget
   ========================================================================== */

/* Apply app button styles */
.webapp-content .elementor-button {
    font-family: var(--font-family);
    font-weight: var(--font-medium);
    border-radius: var(--radius-md);
    transition: all var(--transition-fast);
}

/* ==========================================================================
   Image Widget
   ========================================================================== */

.webapp-content .elementor-widget-image img {
    border-radius: var(--radius-md);
}

/* ==========================================================================
   Divider Widget
   ========================================================================== */

.webapp-content .elementor-divider-separator {
    border-top-color: var(--border);
}

/* ==========================================================================
   Form Widgets
   ========================================================================== */

/* Elementor Forms compatibility */
.webapp-content .elementor-field-textual {
    font-family: var(--font-family);
    font-size: var(--text-sm);
    color: var(--text);
    background-color: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: var(--space-2) var(--space-3);
}

.webapp-content .elementor-field-textual:focus {
    border-color: var(--primary);
    outline: none;
    box-shadow: 0 0 0 3px var(--primary-soft);
}

.webapp-content .elementor-field-label {
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    color: var(--text);
}

/* ==========================================================================
   Inner Section
   ========================================================================== */

.webapp-content .elementor-inner-section {
    margin: 0;
    padding: 0;
}

/* ==========================================================================
   Column Gaps
   ========================================================================== */

/* Let containers handle their own gaps via app-grid */
.webapp-content .elementor-column-gap-default > .elementor-column > .elementor-element-populated {
    padding: 0;
}

.webapp-content .elementor-column-gap-narrow > .elementor-column > .elementor-element-populated,
.webapp-content .elementor-column-gap-extended > .elementor-column > .elementor-element-populated,
.webapp-content .elementor-column-gap-wide > .elementor-column > .elementor-element-populated,
.webapp-content .elementor-column-gap-wider > .elementor-column > .elementor-element-populated {
    padding: 0;
}

/* ==========================================================================
   Background Overlays
   ========================================================================== */

/* Ensure overlays respect border radius */
.webapp-content .elementor-background-overlay {
    border-radius: inherit;
}

/* ==========================================================================
   Icon Widget
   ========================================================================== */

.webapp-content .elementor-icon {
    color: var(--text-secondary);
}

.webapp-content .elementor-icon:hover {
    color: var(--primary);
}

/* ==========================================================================
   Social Icons
   ========================================================================== */

.webapp-content .elementor-social-icon {
    border-radius: var(--radius-md);
}

/* ==========================================================================
   Tabs Widget (if used)
   ========================================================================== */

.webapp-content .elementor-tabs {
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.webapp-content .elementor-tab-title {
    font-family: var(--font-family);
    font-weight: var(--font-medium);
    color: var(--text-secondary);
    border-color: var(--border);
}

.webapp-content .elementor-tab-title.elementor-active {
    color: var(--text);
}

.webapp-content .elementor-tab-content {
    padding: var(--space-5);
    border-color: var(--border);
}

/* ==========================================================================
   Accordion Widget
   ========================================================================== */

.webapp-content .elementor-accordion {
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.webapp-content .elementor-accordion-item {
    border-bottom: 1px solid var(--border);
}

.webapp-content .elementor-accordion-item:last-child {
    border-bottom: none;
}

.webapp-content .elementor-tab-title {
    padding: var(--space-4) var(--space-5);
}

.webapp-content .elementor-tab-content {
    padding: var(--space-4) var(--space-5);
    padding-top: 0;
}

/* ==========================================================================
   Toggle Widget
   ========================================================================== */

.webapp-content .elementor-toggle {
    border: none;
}

.webapp-content .elementor-toggle-item {
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-3);
    overflow: hidden;
}

.webapp-content .elementor-toggle-item:last-child {
    margin-bottom: 0;
}

/* ==========================================================================
   Progress Bar Widget
   ========================================================================== */

.webapp-content .elementor-progress-wrapper {
    background-color: var(--gray-200);
    border-radius: var(--radius-full);
    overflow: hidden;
}

.webapp-content .elementor-progress-bar {
    background-color: var(--primary);
    border-radius: var(--radius-full);
}

/* ==========================================================================
   Counter Widget
   ========================================================================== */

.webapp-content .elementor-counter-number-wrapper {
    font-family: var(--font-family);
    font-weight: var(--font-bold);
    color: var(--text);
}

.webapp-content .elementor-counter-title {
    font-family: var(--font-family);
    color: var(--text-muted);
}

/* ==========================================================================
   Spacer Widget
   ========================================================================== */

/* Spacer is acceptable for manual spacing control */
.webapp-content .elementor-widget-spacer {
    /* No overrides needed */
}

/* ==========================================================================
   Editor Mode Indicators
   ========================================================================== */

/* Visual hints in Elementor editor for app-card containers */
.elementor-editor-active .app-card {
    position: relative;
}

.elementor-editor-active .app-card::before {
    content: 'App Card';
    position: absolute;
    top: -20px;
    left: 0;
    font-size: 10px;
    font-weight: 600;
    color: var(--primary);
    background-color: var(--primary-soft);
    padding: 2px 6px;
    border-radius: 4px;
    z-index: 10;
}

.elementor-editor-active .app-card-header::before {
    content: 'Header';
}

.elementor-editor-active .app-card-body::before {
    content: 'Body';
}

/* ==========================================================================
   Print Styles
   ========================================================================== */

@media print {
    .webapp-content .elementor-section,
    .webapp-content .e-con {
        break-inside: avoid;
    }

    .webapp-content .app-card {
        break-inside: avoid;
        box-shadow: none;
        border: 1px solid #ddd;
    }
}

/* ==========================================================================
   Responsive Adjustments
   ========================================================================== */

@media (max-width: 1024px) {
    .webapp-content .elementor-section.elementor-section-boxed > .elementor-container {
        padding-left: 0;
        padding-right: 0;
    }
}

@media (max-width: 767px) {
    .webapp-content .e-con {
        --container-default-padding-inline: 0;
    }

    /* Stack grids on mobile */
    .webapp-content .app-grid-2,
    .webapp-content .app-grid-3,
    .webapp-content .app-grid-4,
    .webapp-content .app-grid-2-1,
    .webapp-content .app-grid-1-2,
    .webapp-content .app-grid-sidebar,
    .webapp-content .app-grid-sidebar-left {
        grid-template-columns: 1fr;
    }

    .webapp-content .app-col-span-2,
    .webapp-content .app-col-span-3 {
        grid-column: span 1;
    }

    /* ========== Mobile Overflow Prevention ========== */

    /* Force all Elementor containers to respect viewport */
    .webapp-content .elementor,
    .webapp-content .elementor-inner,
    .webapp-content .elementor-section-wrap,
    .webapp-content .elementor-section,
    .webapp-content .elementor-section-full_width,
    .webapp-content .elementor-container,
    .webapp-content .e-con,
    .webapp-content .e-con-inner,
    .webapp-content .e-con-full,
    .webapp-content .elementor-column-wrap,
    .webapp-content .elementor-widget-wrap {
        max-width: 100% !important;
        width: 100% !important;
        overflow-x: hidden !important;
    }

    /* Elementor row/column overflow */
    .webapp-content .elementor-row,
    .webapp-content .elementor-column {
        max-width: 100% !important;
        overflow-x: hidden !important;
    }

    /* Widget content containers */
    .webapp-content .elementor-widget-container {
        max-width: 100% !important;
        overflow: hidden;
        word-wrap: break-word;
        overflow-wrap: break-word;
    }

    /* Text widgets */
    .webapp-content .elementor-text-editor,
    .webapp-content .elementor-heading-title,
    .webapp-content .elementor-widget-text-editor {
        max-width: 100% !important;
        word-wrap: break-word;
        overflow-wrap: break-word;
    }

    /* Image widgets - responsive */
    .webapp-content .elementor-image,
    .webapp-content .elementor-image img,
    .webapp-content .elementor-widget-image img {
        max-width: 100% !important;
        height: auto !important;
    }

    /* Video widgets */
    .webapp-content .elementor-video-container,
    .webapp-content .elementor-custom-embed,
    .webapp-content .elementor-widget-video {
        max-width: 100% !important;
    }

    .webapp-content .elementor-video-container iframe,
    .webapp-content .elementor-custom-embed iframe {
        max-width: 100% !important;
    }

    /* Button widgets - prevent overflow */
    .webapp-content .elementor-button-wrapper {
        max-width: 100%;
    }

    .webapp-content .elementor-button {
        max-width: 100%;
        white-space: normal;
        word-wrap: break-word;
    }

    /* Form widgets */
    .webapp-content .elementor-form,
    .webapp-content .elementor-field-group {
        max-width: 100% !important;
    }

    .webapp-content .elementor-field-textual {
        max-width: 100% !important;
        width: 100% !important;
    }

    /* Social icons */
    .webapp-content .elementor-social-icons-wrapper {
        flex-wrap: wrap;
    }

    /* Icon boxes */
    .webapp-content .elementor-icon-box-wrapper {
        max-width: 100%;
    }

    /* Tabs/Accordion - full width */
    .webapp-content .elementor-tabs,
    .webapp-content .elementor-accordion,
    .webapp-content .elementor-toggle {
        max-width: 100% !important;
    }

    /* Prevent any inline styles from breaking layout */
    .webapp-content [style*="width: 100vw"],
    .webapp-content [style*="width:100vw"] {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Fix negative margins that might cause overflow */
    .webapp-content [style*="margin-left: -"],
    .webapp-content [style*="margin-right: -"] {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}

/* ==========================================================================
   Icon List Widget - Elite Card Style
   ========================================================================== */

/* Card container for Icon List */
.webapp-content .elementor-widget-icon-list .elementor-widget-container {
    background-color: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 16px;
    padding: 1.5rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 4px 12px rgba(0, 0, 0, 0.03);
}

/* Icon List Items */
.webapp-content .elementor-icon-list-items {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* Individual List Item */
.webapp-content .elementor-icon-list-item {
    display: flex;
    align-items: flex-start;
    gap: 0.875rem;
    padding: 0;
    margin: 0 !important;
}

/* Icon Container */
.webapp-content .elementor-icon-list-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    min-width: 40px;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.1) 0%, rgba(99, 102, 241, 0.05) 100%);
    border-radius: 10px;
    transition: all 0.2s ease;
}

.webapp-content .elementor-icon-list-icon i,
.webapp-content .elementor-icon-list-icon svg {
    font-size: 18px !important;
    width: 18px !important;
    height: 18px !important;
    color: #6366F1 !important;
    fill: #6366F1 !important;
}

/* Icon List Text */
.webapp-content .elementor-icon-list-text {
    font-size: 0.9375rem;
    font-weight: 500;
    color: #1E293B;
    line-height: 1.5;
    padding-top: 0.5rem;
}

/* Hover Effect */
.webapp-content .elementor-icon-list-item:hover .elementor-icon-list-icon {
    background: linear-gradient(135deg, #6366F1 0%, #4F46E5 100%);
    transform: scale(1.05);
}

.webapp-content .elementor-icon-list-item:hover .elementor-icon-list-icon i,
.webapp-content .elementor-icon-list-item:hover .elementor-icon-list-icon svg {
    color: #FFFFFF !important;
    fill: #FFFFFF !important;
}

/* Links in Icon List */
.webapp-content .elementor-icon-list-item a {
    display: flex;
    align-items: flex-start;
    gap: 0.875rem;
    text-decoration: none;
    color: inherit;
    width: 100%;
}

.webapp-content .elementor-icon-list-item a:hover .elementor-icon-list-text {
    color: #6366F1;
}

/* Divider between items (if enabled) */
.webapp-content .elementor-icon-list-items.elementor-inline-items .elementor-icon-list-item:not(:last-child)::after {
    display: none;
}

/* Remove default list margins */
.webapp-content .elementor-icon-list-items.elementor-icon-list-items {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Responsive - Mobile */
@media (max-width: 767px) {
    .webapp-content .elementor-widget-icon-list .elementor-widget-container {
        padding: 1.25rem;
    }

    .webapp-content .elementor-icon-list-icon {
        width: 36px;
        height: 36px;
        min-width: 36px;
    }

    .webapp-content .elementor-icon-list-icon i,
    .webapp-content .elementor-icon-list-icon svg {
        font-size: 16px !important;
        width: 16px !important;
        height: 16px !important;
    }

    .webapp-content .elementor-icon-list-text {
        font-size: 0.875rem;
        padding-top: 0.375rem;
    }
}