/**
 * InoriWeb SEO - Content Classes
 *
 * Pre-defined CSS classes for AI-generated content
 * Uses CSS variables set by plugin settings (theme mode + primary color)
 *
 * @since 1.2.7
 */

/* =============================================================================
   GRID LAYOUTS - Fix display: grid being stripped by WordPress KSES
   ============================================================================= */

.inoriweb-grid-2 {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 20px !important;
    margin: 32px 0 !important;
}

.inoriweb-grid-3 {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 20px !important;
    margin: 32px 0 !important;
}

/* Smart fix: If grid-3 has exactly 4 children, use 2 columns (2x2 layout) */
.inoriweb-grid-3 > *:nth-child(4):last-child {
    grid-column: auto;
}
.inoriweb-grid-3:has(> *:nth-child(4):last-child) {
    grid-template-columns: repeat(2, 1fr) !important;
}

.inoriweb-grid-4 {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 20px !important;
    margin: 32px 0 !important;
}

/* Mobile: Stack all grids into single column */
@media screen and (max-width: 768px) {
    .inoriweb-grid-2,
    .inoriweb-grid-3,
    .inoriweb-grid-4 {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
        margin: 20px 0 !important;
        max-width: 100% !important;
        overflow: hidden !important;
    }
}

/* Tablet: 2 columns for 3/4 column grids */
@media screen and (min-width: 769px) and (max-width: 1024px) {
    .inoriweb-grid-3,
    .inoriweb-grid-4 {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* Reset margins and tighten padding on cards/callouts/CTAs inside grids */
[class*="inoriweb-grid-"] > .inoriweb-card,
[class*="inoriweb-grid-"] > .inoriweb-card-glass,
[class*="inoriweb-grid-"] > .inoriweb-card-compact,
[class*="inoriweb-grid-"] > .inoriweb-callout,
[class*="inoriweb-grid-"] > .inoriweb-callout-info,
[class*="inoriweb-grid-"] > .inoriweb-callout-warning,
[class*="inoriweb-grid-"] > .inoriweb-callout-success,
[class*="inoriweb-grid-"] > .inoriweb-cta,
[class*="inoriweb-grid-"] > .inoriweb-cta-gradient {
    margin: 0 !important;
    padding: 28px !important;
    display: flex !important;
    flex-direction: column !important;
}

/* Push CTA button to bottom of grid cell */
[class*="inoriweb-grid-"] > .inoriweb-cta .inoriweb-cta-btn,
[class*="inoriweb-grid-"] > .inoriweb-cta .inoriweb-cta-button,
[class*="inoriweb-grid-"] > .inoriweb-cta-gradient .inoriweb-cta-btn,
[class*="inoriweb-grid-"] > .inoriweb-cta-gradient .inoriweb-cta-button,
[class*="inoriweb-grid-"] > .inoriweb-cta div:last-child,
[class*="inoriweb-grid-"] > .inoriweb-cta-gradient div:last-child {
    margin-top: auto !important;
}

/* Tighter heading spacing inside grid children */
[class*="inoriweb-grid-"] > * h1,
[class*="inoriweb-grid-"] > * h2,
[class*="inoriweb-grid-"] > * h3,
[class*="inoriweb-grid-"] > * h4,
[class*="inoriweb-grid-"] > * h5,
[class*="inoriweb-grid-"] > * h6 {
    margin-bottom: 8px !important;
}

/* Tighter button spacing inside grid children */
[class*="inoriweb-grid-"] .inoriweb-cta-btn,
[class*="inoriweb-grid-"] .inoriweb-cta-button {
    margin-top: 12px !important;
    padding: 10px 24px !important;
}

/* Last element in grid children should have no bottom margin */
[class*="inoriweb-grid-"] > * > *:last-child {
    margin-bottom: 0 !important;
}

/* =============================================================================
   CARDS - Consistent card styling with theme awareness
   ============================================================================= */

.inoriweb-card {
    background: var(--inoriweb-card-bg) !important;
    /* Border and shadow controlled by PHP dynamic CSS based on card style setting */
    border-radius: 12px;
    padding: 24px;
    box-sizing: border-box;
    /* Ensure raw text nodes (when Elementor strips <p> tags) inherit card colors */
    color: var(--inoriweb-card-text) !important;
}

/* Override ANY heading colors in cards (including inline styles from agents) */
.inoriweb-card h1,
.inoriweb-card h2,
.inoriweb-card h3,
.inoriweb-card h4,
.inoriweb-card h5,
.inoriweb-card h6,
.inoriweb-card-glass h1,
.inoriweb-card-glass h2,
.inoriweb-card-glass h3,
.inoriweb-card-glass h4,
.inoriweb-card-glass h5,
.inoriweb-card-glass h6,
.inoriweb-card-compact h1,
.inoriweb-card-compact h2,
.inoriweb-card-compact h3,
.inoriweb-card-compact h4,
.inoriweb-card-compact h5,
.inoriweb-card-compact h6 {
    color: var(--inoriweb-card-heading) !important;
    margin-top: 0 !important;
    margin-bottom: 12px !important;
    padding: 0 !important; /* Remove any theme padding */
}

/* Last element in card should have no bottom margin */
.inoriweb-card > *:last-child,
.inoriweb-card-glass > *:last-child,
.inoriweb-card-compact > *:last-child {
    margin-bottom: 0 !important;
}

/* Override ANY text colors in cards (including inline styles from agents) */
.inoriweb-card p,
.inoriweb-card li,
.inoriweb-card span,
.inoriweb-card strong,
.inoriweb-card code,
.inoriweb-card kbd,
.inoriweb-card pre,
.inoriweb-card-glass p,
.inoriweb-card-glass li,
.inoriweb-card-glass span,
.inoriweb-card-glass strong,
.inoriweb-card-glass code,
.inoriweb-card-glass kbd,
.inoriweb-card-glass pre,
.inoriweb-card-compact p,
.inoriweb-card-compact li,
.inoriweb-card-compact span,
.inoriweb-card-compact strong,
.inoriweb-card-compact code,
.inoriweb-card-compact kbd,
.inoriweb-card-compact pre {
    color: var(--inoriweb-card-text) !important;
}

/* Style code blocks inside cards - override theme styles */
.inoriweb-card code,
.inoriweb-card-glass code,
.inoriweb-card-compact code {
    background: rgba(0, 0, 0, 0.2) !important; /* Slightly darker than card bg */
    padding: 2px 6px !important;
    border-radius: 4px !important;
    font-family: 'Courier New', Courier, monospace !important;
    font-size: 0.9em !important;
}

.inoriweb-card pre,
.inoriweb-card-glass pre,
.inoriweb-card-compact pre {
    background: rgba(0, 0, 0, 0.2) !important; /* Slightly darker than card bg */
    padding: 12px !important;
    border-radius: 6px !important;
    overflow-x: auto !important;
}

.inoriweb-card pre code,
.inoriweb-card-glass pre code,
.inoriweb-card-compact pre code {
    background: none !important; /* Remove double background */
    padding: 0 !important;
}

/* Override link colors in cards (user-controlled via settings) */
.inoriweb-card a,
.inoriweb-card-glass a,
.inoriweb-card-compact a {
    color: var(--inoriweb-card-link) !important;
    text-decoration: underline !important;
    text-underline-offset: 2px !important;
    transition: color 0.2s ease !important;
}

.inoriweb-card a:hover,
.inoriweb-card-glass a:hover,
.inoriweb-card-compact a:hover {
    color: var(--inoriweb-card-link-hover) !important;
}

.inoriweb-card p:last-child {
    margin-bottom: 0;
}

/* Glassmorphic card variant */
.inoriweb-card-glass {
    background: var(--inoriweb-card-bg) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    /* Border and shadow controlled by PHP dynamic CSS based on card style setting */
    border-radius: 12px;
    padding: 32px;
    box-sizing: border-box;
    color: var(--inoriweb-card-text) !important;
}

/* Compact card variant (less padding) */
.inoriweb-card-compact {
    background: var(--inoriweb-card-bg) !important;
    /* Border and shadow controlled by PHP dynamic CSS based on card style setting */
    border-radius: 12px;
    padding: 24px;
    box-sizing: border-box;
    color: var(--inoriweb-card-text) !important;
}

/* Mobile: Reduce padding */
@media screen and (max-width: 768px) {
    .inoriweb-card,
    .inoriweb-card-glass {
        padding: 16px;
        max-width: 100% !important;
        overflow-wrap: break-word !important;
        word-wrap: break-word !important;
    }

    .inoriweb-card-compact {
        padding: 12px;
    }
}

/* =============================================================================
   CALLOUTS - Highlight boxes with colored borders and glassmorphism
   ============================================================================= */

.inoriweb-callout {
    background: var(--inoriweb-callout-bg) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid var(--inoriweb-card-border) !important;
    border-left: 4px solid var(--inoriweb-callout-border) !important;
    border-radius: 12px;
    padding: 24px;
    margin: 30px 0;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    /* Ensure raw text nodes (when Elementor strips <p> tags) inherit callout colors */
    color: var(--inoriweb-callout-text) !important;
}

/* Override ANY heading colors in callouts (including inline styles from agents) */
/* NOTE: -info/-warning/-success are separate class names, not inoriweb-callout plus a
   modifier, so this margin/padding reset must list them explicitly - it does NOT cascade
   to them from the plain .inoriweb-callout rule above. */
.inoriweb-callout h1,
.inoriweb-callout h2,
.inoriweb-callout h3,
.inoriweb-callout h4,
.inoriweb-callout h5,
.inoriweb-callout h6,
.inoriweb-callout-info h1,
.inoriweb-callout-info h2,
.inoriweb-callout-info h3,
.inoriweb-callout-info h4,
.inoriweb-callout-info h5,
.inoriweb-callout-info h6,
.inoriweb-callout-warning h1,
.inoriweb-callout-warning h2,
.inoriweb-callout-warning h3,
.inoriweb-callout-warning h4,
.inoriweb-callout-warning h5,
.inoriweb-callout-warning h6,
.inoriweb-callout-success h1,
.inoriweb-callout-success h2,
.inoriweb-callout-success h3,
.inoriweb-callout-success h4,
.inoriweb-callout-success h5,
.inoriweb-callout-success h6 {
    color: var(--inoriweb-callout-heading) !important;
    margin-top: 0 !important;
    margin-bottom: 12px !important;
    padding: 0 !important; /* Remove any theme padding */
}

/* Last element in callout should have no bottom margin */
.inoriweb-callout > *:last-child,
.inoriweb-callout-info > *:last-child,
.inoriweb-callout-warning > *:last-child,
.inoriweb-callout-success > *:last-child {
    margin-bottom: 0 !important;
}

/* Variant-specific heading colors (override base callout colors) */
.inoriweb-callout-info h1,
.inoriweb-callout-info h2,
.inoriweb-callout-info h3,
.inoriweb-callout-info h4,
.inoriweb-callout-info h5,
.inoriweb-callout-info h6 {
    color: var(--inoriweb-info-heading) !important;
}

.inoriweb-callout-warning h1,
.inoriweb-callout-warning h2,
.inoriweb-callout-warning h3,
.inoriweb-callout-warning h4,
.inoriweb-callout-warning h5,
.inoriweb-callout-warning h6 {
    color: var(--inoriweb-warning-heading) !important;
}

.inoriweb-callout-success h1,
.inoriweb-callout-success h2,
.inoriweb-callout-success h3,
.inoriweb-callout-success h4,
.inoriweb-callout-success h5,
.inoriweb-callout-success h6 {
    color: var(--inoriweb-success-heading) !important;
}

/* Override ANY text colors in callouts (including inline styles from agents) */
.inoriweb-callout p,
.inoriweb-callout li,
.inoriweb-callout span,
.inoriweb-callout strong,
.inoriweb-callout code,
.inoriweb-callout kbd,
.inoriweb-callout pre {
    color: var(--inoriweb-callout-text) !important;
}

/* Variant-specific text colors (override base callout colors) */
.inoriweb-callout-info p,
.inoriweb-callout-info li,
.inoriweb-callout-info span,
.inoriweb-callout-info strong,
.inoriweb-callout-info code,
.inoriweb-callout-info kbd,
.inoriweb-callout-info pre {
    color: var(--inoriweb-info-text) !important;
}

.inoriweb-callout-warning p,
.inoriweb-callout-warning li,
.inoriweb-callout-warning span,
.inoriweb-callout-warning strong,
.inoriweb-callout-warning code,
.inoriweb-callout-warning kbd,
.inoriweb-callout-warning pre {
    color: var(--inoriweb-warning-text) !important;
}

.inoriweb-callout-success p,
.inoriweb-callout-success li,
.inoriweb-callout-success span,
.inoriweb-callout-success strong,
.inoriweb-callout-success code,
.inoriweb-callout-success kbd,
.inoriweb-callout-success pre {
    color: var(--inoriweb-success-text) !important;
}

/* Style code blocks inside callouts - override theme styles */
.inoriweb-callout code,
.inoriweb-callout-info code,
.inoriweb-callout-warning code,
.inoriweb-callout-success code {
    background: rgba(0, 0, 0, 0.2) !important; /* Slightly darker than callout bg */
    padding: 2px 6px !important;
    border-radius: 4px !important;
    font-family: 'Courier New', Courier, monospace !important;
    font-size: 0.9em !important;
}

.inoriweb-callout pre,
.inoriweb-callout-info pre,
.inoriweb-callout-warning pre,
.inoriweb-callout-success pre {
    background: rgba(0, 0, 0, 0.2) !important; /* Slightly darker than callout bg */
    padding: 12px !important;
    border-radius: 6px !important;
    overflow-x: auto !important;
}

.inoriweb-callout pre code,
.inoriweb-callout-info pre code,
.inoriweb-callout-warning pre code,
.inoriweb-callout-success pre code {
    background: none !important; /* Remove double background */
    padding: 0 !important;
}

/* Override link colors in callouts (user-controlled via settings) */
/* Base callout uses general callout link color */
.inoriweb-callout a {
    color: var(--inoriweb-callout-link) !important;
    text-decoration: underline !important;
    text-underline-offset: 2px !important;
    transition: color 0.2s ease !important;
}

.inoriweb-callout a:hover {
    color: var(--inoriweb-callout-link-hover) !important;
}

/* Info callout uses variant-specific link color */
.inoriweb-callout-info a {
    color: var(--inoriweb-info-link) !important;
    text-decoration: underline !important;
    text-underline-offset: 2px !important;
    transition: color 0.2s ease !important;
}

.inoriweb-callout-info a:hover {
    color: var(--inoriweb-info-link-hover) !important;
}

/* Warning callout uses variant-specific link color */
.inoriweb-callout-warning a {
    color: var(--inoriweb-warning-link) !important;
    text-decoration: underline !important;
    text-underline-offset: 2px !important;
    transition: color 0.2s ease !important;
}

.inoriweb-callout-warning a:hover {
    color: var(--inoriweb-warning-link-hover) !important;
}

/* Success callout uses variant-specific link color */
.inoriweb-callout-success a {
    color: var(--inoriweb-success-link) !important;
    text-decoration: underline !important;
    text-underline-offset: 2px !important;
    transition: color 0.2s ease !important;
}

.inoriweb-callout-success a:hover {
    color: var(--inoriweb-success-link-hover) !important;
}

.inoriweb-callout p,
.inoriweb-callout-info p,
.inoriweb-callout-warning p,
.inoriweb-callout-success p {
    margin: 0;
}

.inoriweb-callout strong {
    /* Color handled by rule above */
}

/* Info callout (blue) - INHERITS all base styles */
.inoriweb-callout-info {
    /* Inherit base callout styles */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid var(--inoriweb-card-border) !important;
    border-radius: 12px;
    padding: 24px;
    margin: 30px 0;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);

    /* Variant-specific overrides (user-controlled) */
    border-left: 4px solid var(--inoriweb-info) !important;
    background: var(--inoriweb-info-bg) !important;
    color: var(--inoriweb-info-text) !important;
}

/* Warning callout (accent/yellow) - INHERITS all base styles */
.inoriweb-callout-warning {
    /* Inherit base callout styles */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid var(--inoriweb-card-border) !important;
    border-radius: 12px;
    padding: 24px;
    margin: 30px 0;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);

    /* Variant-specific overrides (user-controlled) */
    border-left: 4px solid var(--inoriweb-warning) !important;
    background: var(--inoriweb-warning-bg) !important;
    color: var(--inoriweb-warning-text) !important;
}

/* Success callout (green) - INHERITS all base styles */
.inoriweb-callout-success {
    /* Inherit base callout styles */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid var(--inoriweb-card-border) !important;
    border-radius: 12px;
    padding: 24px;
    margin: 30px 0;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);

    /* Variant-specific overrides (user-controlled) */
    border-left: 4px solid var(--inoriweb-success) !important;
    background: var(--inoriweb-success-bg) !important;
    color: var(--inoriweb-success-text) !important;
}

/* Mobile: Reduce callout padding */
@media screen and (max-width: 768px) {
    .inoriweb-callout,
    .inoriweb-callout-info,
    .inoriweb-callout-warning,
    .inoriweb-callout-success {
        padding: 16px;
        margin: 20px 0;
        max-width: 100% !important;
        overflow-wrap: break-word !important;
        word-wrap: break-word !important;
    }
}

/* =============================================================================
   TABLES - Theme-aware table styling
   ============================================================================= */

/* FIX AGENT MISTAKE: They wrap tables in <div class="inoriweb-table"> instead of adding class to <table> */
div.inoriweb-table {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 20px 0;
}

div.inoriweb-table > table {
    width: 100% !important;
    border-collapse: collapse !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    margin: 0 !important;
    border: 1px solid var(--inoriweb-table-border) !important;
    background: var(--inoriweb-table-body-bg) !important;
    font-size: 16px !important;
}

div.inoriweb-table > table thead {
    background: var(--inoriweb-table-header-bg) !important;
}

div.inoriweb-table > table thead th {
    color: var(--inoriweb-table-header-text) !important;
    font-weight: 600 !important;
    text-align: left !important;
    padding: 12px !important;
    border: 1px solid var(--inoriweb-table-border) !important;
    border-bottom: 2px solid var(--inoriweb-table-border) !important;
}

div.inoriweb-table > table tbody tr {
    border-bottom: 1px solid var(--inoriweb-table-border) !important;
}

div.inoriweb-table > table tbody td {
    padding: 12px !important;
    border: 1px solid var(--inoriweb-table-border) !important;
    color: var(--inoriweb-table-body-text) !important;
}

/* Corner radius */
div.inoriweb-table > table thead th:first-child {
    border-top-left-radius: 11px !important;
}

div.inoriweb-table > table thead th:last-child {
    border-top-right-radius: 11px !important;
}

div.inoriweb-table > table tbody tr:last-child td:first-child {
    border-bottom-left-radius: 11px !important;
}

div.inoriweb-table > table tbody tr:last-child td:last-child {
    border-bottom-right-radius: 11px !important;
}

/* Remove double borders on edges */
div.inoriweb-table > table tbody tr:last-child td {
    border-bottom: none !important;
}

div.inoriweb-table > table thead th:last-child,
div.inoriweb-table > table tbody td:last-child {
    border-right: none !important;
}

/* Mobile styles for agent-wrapped tables */
@media screen and (max-width: 768px) {
    div.inoriweb-table {
        margin-right: 0;
    }

    div.inoriweb-table > table {
        margin-right: 20px !important;
        min-width: 500px !important;
        font-size: 13px !important;
    }

    div.inoriweb-table > table th,
    div.inoriweb-table > table td {
        padding: 10px 8px !important;
        white-space: nowrap !important;
    }

    div.inoriweb-table > table thead th:last-child,
    div.inoriweb-table > table tbody td:last-child {
        padding-right: 16px !important;
    }

    div.inoriweb-table > table thead th:first-child,
    div.inoriweb-table > table tbody td:first-child {
        white-space: normal !important;
        min-width: 120px !important;
    }
}

/* CORRECT USAGE: class on <table> element itself */
/* Ultra-high specificity to override ALL theme styles */
table.inoriweb-table,
.entry-content table.inoriweb-table,
.post-content table.inoriweb-table,
article table.inoriweb-table {
    width: 100% !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    margin: 32px 0 !important;
    border-radius: 12px !important;
    border: 1px solid var(--inoriweb-table-border) !important;
    background: transparent !important;
    overflow: hidden !important; /* Clip backgrounds to border-radius */
}

table.inoriweb-table thead tr,
.entry-content table.inoriweb-table thead tr {
    background: var(--inoriweb-table-header-bg) !important;
}

table.inoriweb-table thead th,
.entry-content table.inoriweb-table thead th {
    color: var(--inoriweb-table-header-text) !important;
    font-weight: 600 !important;
    text-align: left !important;
    padding: 12px !important;
    border-bottom: 1px solid var(--inoriweb-table-border) !important;
    background: var(--inoriweb-table-header-bg) !important;
}

table.inoriweb-table thead th:not(:last-child),
.entry-content table.inoriweb-table thead th:not(:last-child) {
    border-right: 1px solid var(--inoriweb-table-border) !important;
}

/* Explicitly remove right border from last column - table border provides it */
table.inoriweb-table thead th:last-child,
.entry-content table.inoriweb-table thead th:last-child {
    border-right: none !important;
}

table.inoriweb-table tbody,
.entry-content table.inoriweb-table tbody {
    background: var(--inoriweb-table-body-bg) !important;
}

table.inoriweb-table tbody tr,
.entry-content table.inoriweb-table tbody tr {
    background: var(--inoriweb-table-body-bg) !important;
}

table.inoriweb-table tbody td,
.entry-content table.inoriweb-table tbody td {
    color: var(--inoriweb-table-body-text) !important;
    padding: 12px !important;
    border-bottom: 1px solid var(--inoriweb-table-border) !important;
    background: var(--inoriweb-table-body-bg) !important;
}

table.inoriweb-table tbody td:not(:last-child),
.entry-content table.inoriweb-table tbody td:not(:last-child) {
    border-right: 1px solid var(--inoriweb-table-border) !important;
}

/* Explicitly remove right border from last column - table border provides it */
table.inoriweb-table tbody td:last-child,
.entry-content table.inoriweb-table tbody td:last-child {
    border-right: none !important;
}

/* Remove bottom border from last row - table border provides it */
table.inoriweb-table tbody tr:last-child td,
.entry-content table.inoriweb-table tbody tr:last-child td {
    border-bottom: none !important;
}

table.inoriweb-table tbody tr:nth-child(even),
.entry-content table.inoriweb-table tbody tr:nth-child(even) {
    background: var(--inoriweb-table-row-even) !important;
}

table.inoriweb-table tbody tr:nth-child(even) td,
.entry-content table.inoriweb-table tbody tr:nth-child(even) td {
    background: var(--inoriweb-table-row-even) !important;
}

/* Rounded corners for table - Match table's 12px radius */
.inoriweb-table thead th:first-child {
    border-top-left-radius: 11px !important; /* Slightly less than table to fit inside border */
}

.inoriweb-table thead th:last-child {
    border-top-right-radius: 11px !important;
}

.inoriweb-table tbody tr:last-child td:first-child {
    border-bottom-left-radius: 11px !important;
}

.inoriweb-table tbody tr:last-child td:last-child {
    border-bottom-right-radius: 11px !important;
}

/* Mobile: Simple, clean responsive tables */
@media screen and (max-width: 768px) {
    .inoriweb-table-wrapper {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        margin: 20px 0;
    }

    .inoriweb-table {
        margin: 0;
        margin-right: 20px; /* Add space on right side so last column isn't cut off */
        min-width: 500px; /* Reduced from 600px - less aggressive */
        font-size: 13px; /* Smaller text on mobile */
        /* The base (desktop) rule sets `overflow: hidden !important` to clip
           row/header backgrounds to the 12px border-radius. On mobile, nowrap
           cell content can need more width than this table's own box (e.g.
           821px of real content inside a 500px min-width box, confirmed on a
           live page) — with overflow:hidden on the TABLE itself, that content
           was silently clipped and unreachable, even though the wrapper above
           is horizontally scrollable. Must override the shorthand `overflow`
           (not just overflow-x): setting only overflow-x here while
           overflow-y stays hidden hits a real CSS spec quirk where a mixed
           visible/non-visible pair computes overflow-x to `auto` instead of
           `visible`, and — verified live — that does NOT make the wrapper
           recalculate its scrollable width, so the extra content stays
           unreachable anyway. The shorthand override does correctly expand
           the wrapper's scrollWidth to match the table's true content width
           (confirmed 500px -> 821px on the live page this was diagnosed on).
           The minor cost is square-ish corners peeking past the radius on
           mobile only — strictly smaller than invisibly cut-off text. */
        overflow: visible !important;
    }

    /* Reduce padding on mobile - makes tables more compact */
    .inoriweb-table th,
    .inoriweb-table td {
        padding: 10px 8px !important; /* Reduced from 12px, vertical slightly more than horizontal */
        white-space: nowrap; /* Prevent text wrapping for cleaner appearance */
    }

    /* Extra padding on last column to ensure visibility */
    .inoriweb-table thead th:last-child,
    .inoriweb-table tbody td:last-child {
        padding-right: 16px !important; /* Extra padding on right to prevent cutoff */
    }

    /* Allow text wrapping in first column (usually product names/labels) */
    .inoriweb-table thead th:first-child,
    .inoriweb-table tbody td:first-child {
        white-space: normal;
        min-width: 120px; /* Ensure first column has minimum readable width */
    }
}

/* =============================================================================
   FLEX LAYOUTS - Fix display: flex being stripped by WordPress KSES
   ============================================================================= */

.inoriweb-flex-center {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.inoriweb-flex-start {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
}

.inoriweb-flex-between {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
}

.inoriweb-flex-wrap {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 20px !important;
}

/* =============================================================================
   FAQ STYLING - Clean accordions (no inline styles needed)
   ============================================================================= */

.inoriweb-faq details {
    margin: 15px 0 !important;
    border: var(--inoriweb-faq-border-thickness, 1px) solid var(--inoriweb-faq-border) !important;
    border-radius: 8px !important;
    padding: 16px 20px !important; /* Symmetric padding for balanced look when closed/open */
    background: var(--inoriweb-faq-bg) !important;
}

.inoriweb-faq summary {
    cursor: pointer !important;
    font-weight: 600 !important;
    user-select: none;
    list-style: none;
    color: var(--inoriweb-faq-heading) !important;
    margin: 0 !important;
    padding: 0 !important;
}

.inoriweb-faq summary::-webkit-details-marker {
    display: none;
}

.inoriweb-faq summary::before {
    content: '▶';
    display: inline-block;
    margin-right: 8px;
    transition: transform 0.2s;
    color: var(--inoriweb-faq-icon-color);
}

.inoriweb-faq details[open] summary::before {
    transform: rotate(90deg);
}

.inoriweb-faq summary:hover {
    opacity: 0.8;
}

.inoriweb-faq details p {
    margin-top: 12px !important;
    margin-bottom: 0 !important; /* Remove default browser bottom margin */
    color: var(--inoriweb-faq-text) !important;
    line-height: 1.6 !important;
}

/* FAQ link colors (user-controlled via settings) */
.inoriweb-faq a {
    color: var(--inoriweb-faq-link) !important;
    text-decoration: underline !important;
    text-underline-offset: 2px !important;
    transition: color 0.2s ease !important;
}

.inoriweb-faq a:hover {
    color: var(--inoriweb-faq-link-hover) !important;
}

/* Mobile: Reduce FAQ padding */
@media screen and (max-width: 768px) {
    .inoriweb-faq details {
        padding: 12px 16px !important;
        margin: 10px 0 !important;
    }
}

/* =============================================================================
   HERO SECTIONS - Full-width headers
   ============================================================================= */

.inoriweb-hero {
    padding: 60px 40px;
    margin: -20px -20px 40px -20px;
    border-radius: 0 0 16px 16px;
    background: linear-gradient(135deg, var(--inoriweb-primary) 0%, var(--inoriweb-card-bg) 100%);
}

.inoriweb-hero h1 {
    margin: 0 0 16px 0;
    font-size: clamp(2em, 5vw, 2.5em);
    font-weight: 800;
    line-height: 1.2;
    color: #ffffff;
}

.inoriweb-hero p {
    margin: 0;
    font-size: clamp(1.1em, 2.5vw, 1.2em);
    opacity: 0.95;
    line-height: 1.6;
    color: #ffffff;
}

@media screen and (max-width: 768px) {
    .inoriweb-hero {
        padding: 40px 24px;
    }
}

/* =============================================================================
   PILLAR HERO (shortcode wrapper — v2.7.8)
   Emitted by [inoriweb_pillar field="pillar_hero"]. Sensible defaults only:
   centered, with the H1 inheriting the theme's global heading typography
   (e.g. Astra Customizer). Font-family / size / weight are intentionally
   NOT set so the theme controls them. No !important — theme/Elementor can
   fully override every rule here.
   ============================================================================= */

.inoriweb-pillar-hero {
    text-align: center;
    margin: 0 0 40px 0;
}

.inoriweb-pillar-hero h1 {
    margin: 0 0 16px 0;
    /* font-family / size / weight deliberately omitted — inherits the
       theme's global H1 typography (Astra Customizer → Headings). */
}

.inoriweb-pillar-hero p {
    margin: 0 auto;
    max-width: 960px;
}

@media screen and (max-width: 768px) {
    .inoriweb-pillar-hero {
        margin-bottom: 24px;
    }
}

/* =============================================================================
   UTILITY CLASSES
   ============================================================================= */

.inoriweb-text-center {
    text-align: center !important;
}

.inoriweb-mt-0 {
    margin-top: 0 !important;
}

.inoriweb-mb-0 {
    margin-bottom: 0 !important;
}

/* =============================================================================
   UTILITY CLASSES - Flexbox layouts and buttons
   ============================================================================= */

/* Icon centering - replaces inline display: inline-flex */
.inoriweb-icon-center {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Button styling - replaces inline display: inline-block */
.inoriweb-btn-primary {
    display: inline-block !important;
    text-decoration: none !important;
    cursor: pointer !important;
}

/* =============================================================================
   CTA SECTIONS - Call-to-action boxes with gradient backgrounds
   ============================================================================= */

.inoriweb-cta {
    border-radius: 12px;
    padding: 40px;
    text-align: center;
    margin: 40px 0;
    box-sizing: border-box;
    /* Ensure raw text nodes (when Elementor strips <p> tags) inherit CTA colors */
    color: var(--inoriweb-cta-text) !important;
    line-height: 1.7 !important;
    font-size: 1.05em !important;
}

/* Gradient CTA variant - background controlled by plugin settings (gradient/solid/custom CSS) */
.inoriweb-cta-gradient {
    /* Background is set dynamically by class-settings.php based on user selection */
    /* DO NOT add background here - it will override custom CSS! */
    color: var(--inoriweb-cta-text) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
}

/* Override heading colors in CTAs - force CTA text color */
.inoriweb-cta h1,
.inoriweb-cta h2,
.inoriweb-cta h3,
.inoriweb-cta h4,
.inoriweb-cta h5,
.inoriweb-cta h6,
.inoriweb-cta-gradient h1,
.inoriweb-cta-gradient h2,
.inoriweb-cta-gradient h3,
.inoriweb-cta-gradient h4,
.inoriweb-cta-gradient h5,
.inoriweb-cta-gradient h6 {
    color: var(--inoriweb-cta-text) !important;
    margin: 0 0 16px 0 !important;
}

/* Override text colors in CTAs - force CTA text color */
.inoriweb-cta p,
.inoriweb-cta li,
.inoriweb-cta span,
.inoriweb-cta strong,
.inoriweb-cta-gradient p,
.inoriweb-cta-gradient li,
.inoriweb-cta-gradient span,
.inoriweb-cta-gradient strong {
    color: var(--inoriweb-cta-text) !important;
    margin: 0 0 24px 0 !important;
    opacity: 0.95;
}

/* Override inline link colors in CTAs — excludes the CTA button itself */
.inoriweb-cta a:not(.inoriweb-cta-btn):not(.inoriweb-cta-button),
.inoriweb-cta-gradient a:not(.inoriweb-cta-btn):not(.inoriweb-cta-button) {
    color: var(--inoriweb-cta-link, var(--inoriweb-cta-text)) !important;
    text-decoration: underline !important;
    transition: color 0.2s ease !important;
}

.inoriweb-cta a:not(.inoriweb-cta-btn):not(.inoriweb-cta-button):hover,
.inoriweb-cta-gradient a:not(.inoriweb-cta-btn):not(.inoriweb-cta-button):hover {
    color: var(--inoriweb-cta-link-hover, var(--inoriweb-cta-link, var(--inoriweb-cta-text))) !important;
}

.inoriweb-cta p:last-child {
    margin-bottom: 0 !important;
}

/* CTA button styling - background/colors controlled by plugin settings (solid/gradient/custom CSS) */
/* Support both .inoriweb-cta-btn and .inoriweb-cta-button (agents may use either) */
.inoriweb-cta-btn,
.inoriweb-cta-button {
    display: block !important;
    width: fit-content !important;
    margin-left: auto !important;
    margin-right: auto !important;
    margin-top: 24px !important;
    /* Background and color set dynamically by class-settings.php based on user selection */
    /* DO NOT add background/color here - it will override custom CSS with animations! */
    padding: 14px 35px !important;
    border-radius: 8px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
    transition: all 0.3s ease !important;
    cursor: pointer !important;
}

.inoriweb-cta-btn:hover,
.inoriweb-cta-button:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2) !important;
}

/* -----------------------------------------------------------------------------
   Multi-button CTA rows (v2.7.9)
   When a CTA paragraph contains TWO OR MORE adjacent buttons, lay them out
   side by side instead of stacked. Scoped via :has() + adjacent-sibling so:
     - single-button CTAs keep the centered one-per-line block layout
     - the v2.7.0 Elementor "<p> stripped" fix is untouched (only fires when
       a <p> wrapper with 2+ buttons actually exists in the markup)
   Works on already-published content — pure CSS, no post edits needed.
   ----------------------------------------------------------------------------- */
.inoriweb-cta p:has(.inoriweb-cta-btn ~ .inoriweb-cta-btn),
.inoriweb-cta p:has(.inoriweb-cta-button ~ .inoriweb-cta-button),
.inoriweb-cta-gradient p:has(.inoriweb-cta-btn ~ .inoriweb-cta-btn),
.inoriweb-cta-gradient p:has(.inoriweb-cta-button ~ .inoriweb-cta-button) {
    display: flex !important;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 16px;
}

/* Inside that flex row, drop the auto side-margins / top-margin that the
   base .inoriweb-cta-btn rule uses to force one button per line. */
.inoriweb-cta p:has(.inoriweb-cta-btn ~ .inoriweb-cta-btn) .inoriweb-cta-btn,
.inoriweb-cta p:has(.inoriweb-cta-btn ~ .inoriweb-cta-btn) .inoriweb-cta-button,
.inoriweb-cta p:has(.inoriweb-cta-button ~ .inoriweb-cta-button) .inoriweb-cta-btn,
.inoriweb-cta p:has(.inoriweb-cta-button ~ .inoriweb-cta-button) .inoriweb-cta-button,
.inoriweb-cta-gradient p:has(.inoriweb-cta-btn ~ .inoriweb-cta-btn) .inoriweb-cta-btn,
.inoriweb-cta-gradient p:has(.inoriweb-cta-btn ~ .inoriweb-cta-btn) .inoriweb-cta-button,
.inoriweb-cta-gradient p:has(.inoriweb-cta-button ~ .inoriweb-cta-button) .inoriweb-cta-btn,
.inoriweb-cta-gradient p:has(.inoriweb-cta-button ~ .inoriweb-cta-button) .inoriweb-cta-button {
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-top: 0 !important;
}

/* Mobile: stack the multi-button row back to one button per line. */
@media screen and (max-width: 768px) {
    .inoriweb-cta p:has(.inoriweb-cta-btn ~ .inoriweb-cta-btn),
    .inoriweb-cta p:has(.inoriweb-cta-button ~ .inoriweb-cta-button),
    .inoriweb-cta-gradient p:has(.inoriweb-cta-btn ~ .inoriweb-cta-btn),
    .inoriweb-cta-gradient p:has(.inoriweb-cta-button ~ .inoriweb-cta-button) {
        flex-direction: column;
    }
}

/* Mobile: Reduce padding */
@media screen and (max-width: 768px) {
    .inoriweb-cta,
    .inoriweb-cta-gradient {
        padding: 24px 16px;
        max-width: 100% !important;
        overflow-wrap: break-word !important;
    }
}

/* =============================================================================
   LEGACY SUPPORT - Fix old inline-style content
   ============================================================================= */

/* Auto-fix grids that are missing display property (old content) */
.entry-content div[style*="grid-template-columns"],
.post-content div[style*="grid-template-columns"],
article div[style*="grid-template-columns"] {
    display: grid !important;
}

/* Auto-fix flex containers that are missing display property (old content) */
.entry-content div[style*="align-items"][style*="center"],
.entry-content div[style*="justify-content"][style*="center"],
.post-content div[style*="align-items"][style*="center"],
.post-content div[style*="justify-content"][style*="center"],
article div[style*="align-items"][style*="center"],
article div[style*="justify-content"][style*="center"] {
    display: flex !important;
}