/* Source: framework/variables.css */
/**
 * Design Token System
 * AI Image SEO WordPress Plugin
 *
 * This file defines all CSS custom properties (design tokens) used throughout the plugin.
 * Organized into logical categories for easy maintenance and consistency.
 *
 * Token Naming Convention:
 * --infyp-{category}-{property}-{variant}
 *
 * Categories:
 * - color-*     : Color palette
 * - text-*      : Text/typography colors
 * - bg-*        : Background colors
 * - border-*    : Border colors
 * - spacing-*   : Spacing scale
 * - radius-*    : Border radius
 * - shadow-*    : Box shadows
 * - font-*      : Typography
 * - transition-*: Animations/transitions
 * - z-*         : Z-index layers
 */

:root {
    /* ========================================================================
       1. COLOR PALETTE - Core Colors
       ======================================================================== */

    /* Primary - Fallback values (overridden by body block below when WP admin vars available) */
    --infyp-primary: #3858e9;
    --infyp-primary-hover: #2c46ba;
    --infyp-primary-light: #42a5f5;
    --infyp-primary-dark: #21358c;
    --infyp-primary-bg: #f0f6fc;
    --infyp-primary-alt: #007cba;

    /* Success - Green */
    --infyp-success: #10b981;
    --infyp-success-hover: #059669;
    --infyp-success-dark: #15803d;
    --infyp-success-light: #a7f3d0;
    --infyp-success-lighter: #86efac;
    --infyp-success-lightest: #bbf7d0;
    --infyp-success-bg: #d1fae5;
    --infyp-success-bg-light: #f0fdf4;
    --infyp-success-bg-lighter: #ecfdf5;
    --infyp-success-text: #065f46;
    --infyp-success-text-darker: #166534;
    --infyp-success-hover-dark: #047857;
    /* Secondary success (Bootstrap-like) */
    --infyp-success-secondary: #28a745;
    --infyp-success-secondary-bg: #d4edda;
    --infyp-success-secondary-text: #155724;

    /* Error/Danger - Red */
    --infyp-error: #dc3232;
    --infyp-error-hover: #b91c1c;
    --infyp-error-dark: #dc2626;
    --infyp-error-light: #ef4444;
    --infyp-error-bg: #fee2e2;
    --infyp-error-bg-lighter: #fef2f2;
    --infyp-error-bg-lightest: #fff5f5;
    --infyp-error-text: #991b1b;
    --infyp-error-text-dark: #721c24;
    --infyp-error-text-darker: #842029;
    --infyp-error-border: #f8d7da;
    --infyp-error-border-light: #f5c6cb;

    /* Warning - Amber/Orange */
    --infyp-warning: #f59e0b;
    --infyp-warning-light: #fde68a;
    --infyp-warning-yellow: #fcd34d;
    --infyp-warning-alt: #f0ad4e;
    --infyp-warning-cream: #ffeaa7;
    --infyp-warning-bg: #fef3c7;
    --infyp-warning-bg-light: #fffbeb;
    --infyp-warning-bg-lighter: #fff8e5;
    --infyp-warning-bg-lightest: #fffaf0;
    --infyp-warning-text: #92400e;
    --infyp-warning-text-dark: #856404;
    --infyp-warning-border: #fff3cd;

    /* Info - Blue */
    --infyp-info: #0d6efd;
    --infyp-info-dark: #1d4ed8;
    --infyp-info-darker: #005a87;
    --infyp-info-light: #3b82f6;
    --infyp-info-bg: #dbeafe;
    --infyp-info-bg-light: #e5f3ff;
    --infyp-info-bg-lighter: #cfe2ff;
    --infyp-info-text: #1e40af;
    --infyp-info-text-alt: #084298;
    --infyp-info-border: #93c5fd;

    /* Neutral - Black & White */
    --infyp-white: #ffffff;
    --infyp-black: #000000;

    /* ========================================================================
       2. TEXT COLORS
       ======================================================================== */

    --infyp-text-primary: #23282d;      /* Main text */
    --infyp-text-secondary: #646970;    /* Secondary text */
    --infyp-text-muted: #6c757d;        /* Muted/disabled text */
    --infyp-text-light: #999999;        /* Light text */
    --infyp-text-lighter: #999999;      /* Lighter text */
    --infyp-text-dark: #333333;         /* Dark text */
    --infyp-text-darker: #2c3338;       /* Darker text */
    --infyp-text-darkest: #0f172a;      /* Darkest text */
    --infyp-text-medium: #666666;       /* Medium text */
    /* Slate text variants */
    --infyp-text-slate: #64748b;
    --infyp-text-dark-slate: #334155;

    /* ========================================================================
       3. BACKGROUND COLORS
       ======================================================================== */

    --infyp-bg-white: #ffffff;
    --infyp-bg-card: #ffffff;
    --infyp-bg-light: #f8f9fa;
    --infyp-bg-lighter: #fafafa;
    --infyp-bg-secondary: #f5f5f5;
    --infyp-bg-hover: #f0f0f1;
    --infyp-bg-gray: #f7f7f7;
    /* Slate backgrounds */
    --infyp-bg-slate-light: #f8fafc;
    --infyp-bg-slate: #f1f5f9;
    /* Blue backgrounds */
    --infyp-bg-blue-light: #f0f9ff;
    --infyp-bg-blue: #e0f2fe;

    /* ========================================================================
       4. BORDER COLORS
       ======================================================================== */

    --infyp-border: #ccd0d4;
    --infyp-border-primary: #ccd0d4;
    --infyp-border-light: #e1e5e9;
    --infyp-border-lighter: #e5e5e5;
    --infyp-border-lightest: #eeeeee;
    --infyp-border-medium: #cccccc;
    --infyp-border-dark: #bbbbbb;
    --infyp-border-slate: #e2e8f0;
    --infyp-border-gray: #e0e0e0;

    /* ========================================================================
       5. SPACING SCALE (4px base)
       ======================================================================== */

    --infyp-spacing-xxs: 2px;   /* 0.5x */
    --infyp-spacing-xs: 4px;    /* 1x   */
    --infyp-spacing-sm: 8px;    /* 2x   */
    --infyp-spacing-md: 16px;   /* 4x   */
    --infyp-spacing-lg: 20px;   /* 5x   */
    --infyp-spacing-xl: 24px;   /* 6x   */
    --infyp-spacing-2xl: 32px;  /* 8x   */
    --infyp-spacing-3xl: 48px;  /* 12x  */

    /* ========================================================================
       5.1 RESPONSIVE BREAKPOINTS
       ======================================================================== */

    --infyp-breakpoint-mobile: 782px;
    --infyp-breakpoint-tablet: 1024px;
    --infyp-breakpoint-laptop: 1400px;
    --infyp-breakpoint-desktop: 1600px;

    /* ========================================================================
       6. BORDER RADIUS
       ======================================================================== */

    --infyp-radius-sm: 2px;
    --infyp-radius-md: 4px;
    --infyp-radius-lg: 8px;
    --infyp-radius-xl: 12px;
    --infyp-radius-full: 9999px;  /* Pill shape */

    /* ========================================================================
       7. BOX SHADOWS
       ======================================================================== */

    --infyp-shadow-sm: 0 1px 1px rgba(0, 0, 0, 0.04);
    --infyp-shadow-md: 0 2px 8px rgba(0, 0, 0, 0.08);
    --infyp-shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.12);
    --infyp-shadow-hover: 0 2px 8px rgba(34, 113, 177, 0.1);

    /* ========================================================================
       8. TYPOGRAPHY
       ======================================================================== */

    /* Font Sizes */
    --infyp-font-size-xs: 11px;
    --infyp-font-size-sm: 12px;
    --infyp-font-size-md: 13px;
    --infyp-font-size-base: 14px;
    --infyp-font-size-lg: 16px;
    --infyp-font-size-xl: 18px;
    --infyp-font-size-2xl: 24px;
    --infyp-font-size-3xl: 32px;

    /* Font Weights */
    --infyp-font-weight-normal: 400;
    --infyp-font-weight-medium: 500;
    --infyp-font-weight-semibold: 600;
    --infyp-font-weight-bold: 700;

    /* Line Heights */
    --infyp-line-height-tight: 1.2;
    --infyp-line-height-normal: 1.4;
    --infyp-line-height-relaxed: 1.6;

    /* ========================================================================
       9. TRANSITIONS
       ======================================================================== */

    --infyp-transition-fast: 0.2s ease;
    --infyp-transition-normal: 0.3s ease;
    --infyp-transition-slow: 0.6s ease;

    /* ========================================================================
       10. Z-INDEX LAYERS
       ======================================================================== */

    --infyp-z-dropdown: 1000;
    --infyp-z-sticky: 1020;
    --infyp-z-modal-backdrop: 1040;
    --infyp-z-modal: 1050;
    --infyp-z-tooltip: 1060;
    --infyp-z-toast: 1070;

    /* ========================================================================
       11. GRADIENTS
       ======================================================================== */

    --infyp-gradient-start: #374151;
    --infyp-gradient-end: #111827;
    --infyp-gradient-hover-start: #4b5563;
    --infyp-gradient-hover-end: #1f2937;
    --infyp-gradient-disabled-start: #6b7280;
    --infyp-gradient-disabled-end: #4b5563;

    /* ========================================================================
       12. GRAY SCALE
       ======================================================================== */

    --infyp-gray-100: #f3f4f6;
    --infyp-gray-200: #e8e8e9;
    --infyp-gray-300: #e1e1e1;
    --infyp-gray-500: #787c82;
    --infyp-gray-600: #72777c;
    --infyp-gray-700: #5a5a5a;

    /* Slate Scale */
    --infyp-slate-300: #cbd5e1;
    --infyp-slate-400: #94a3b8;
    --infyp-slate-600: #475569;

    /* Blue Scale */
    --infyp-blue-50: #eff6ff;

    /* Amber Scale */
    --infyp-amber-400: #fbbf24;
    --infyp-amber-500: #ffd23f;

    /* ========================================================================
       13. COMPONENT-SPECIFIC TOKENS
       ======================================================================== */

    /* Alerts */
    --infyp-alert-success-bg: #edfaef;
    --infyp-alert-warning-bg: #fcf9e8;
    --infyp-alert-warning-text: #b45309;

    /* Badges - Usage Types */
    --infyp-badge-featured-bg: #e3f2fd;
    --infyp-badge-content-bg: #f3e5f5;
    --infyp-badge-content-text: #7b1fa2;
    --infyp-badge-builder-bg: #fff3e0;
    --infyp-badge-builder-text: #ef6c00;

    /* Score Circles - Success */
    --infyp-score-success-bg: #d4f4dd;
    --infyp-score-success-text: #00691e;
    --infyp-score-success-stroke: #8ed9a8;

    /* Score Circles - Error */
    --infyp-score-error-bg: #fce4e4;
    --infyp-score-error-text: #8a0000;
    --infyp-score-error-stroke: #f0b9b9;

    /* Score Circles - Warning */
    --infyp-score-warning-text: #664d03;
    --infyp-score-warning-stroke: #ffecb5;

    /* Score Circles - Info/Good */
    --infyp-score-info-bg: #e7f3ff;
    --infyp-score-info-text: #0c5460;
    --infyp-score-info-stroke: #b8daff;
    --infyp-score-info-bg-light: #f0f8ff;
    --infyp-score-info-border: #bfdbfe;

    /* Log Entries */
    --infyp-log-error: #dc3545;
    --infyp-log-warning: #ffc107;

    /* Dashboard */
    --infyp-dashicon-color: #646970;

    /* ========================================================================
       14. BRAND COLORS
       ======================================================================== */

    --infyp-brand-google: #4285f4;
    --infyp-brand-amber: #d97706;
    --infyp-brand-openai: #10a37f;
    --infyp-brand-openai-hover: #0d8c6b;
    --infyp-brand-elementor: #92003b;
    --infyp-brand-violet: #8b5cf6;
    --infyp-brand-cyan: #4bbeff;
    --infyp-brand-teal: #0b7cac;
    --infyp-brand-turquoise: #20c4cb;
    --infyp-brand-dark: #141923;
    --infyp-brand-woo: #7f54b3;
}

/* Inherit primary color from WordPress admin theme.
   Scoped to #wpbody-content to avoid leaking into admin bar or other WP core UI. */
#wpbody-content {
    --infyp-primary: var(--wp-admin-theme-color, #3858e9);
    --infyp-primary-hover: var(--wp-admin-theme-color-darker-10, #2c46ba);
    --infyp-primary-dark: var(--wp-admin-theme-color-darker-20, #21358c);
}

/* ==========================================================================
   BASE COMPONENT STYLES
   These provide sensible defaults using the design tokens above
   ========================================================================== */

/* Card Component */
.infyp-card {
    background: var(--infyp-bg-card);
    border: 1px solid var(--infyp-border-primary);
    border-radius: var(--infyp-radius-md);
    box-shadow: var(--infyp-shadow-sm);
    margin-bottom: var(--infyp-spacing-lg);
    overflow: hidden;
}

.infyp-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--infyp-spacing-sm);
    border-bottom: 1px solid var(--infyp-border-lighter);
    padding: var(--infyp-spacing-md) var(--infyp-spacing-lg);
    background: var(--infyp-bg-lighter);
}

.infyp-card-header h3,
.infyp-card-title {
    margin: 0;
    font-size: var(--infyp-font-size-base);
    font-weight: var(--infyp-font-weight-semibold);
    color: var(--infyp-text-primary);
}

.infyp-card-body {
    padding: var(--infyp-spacing-lg);
}

.infyp-card-body > p:first-child {
    margin-top: 0;
}

.infyp-card-footer {
    display: flex;
    align-items: center;
    gap: var(--infyp-spacing-sm);
    padding: var(--infyp-spacing-md) var(--infyp-spacing-lg);
    border-top: 1px solid var(--infyp-border-lighter);
    background: var(--infyp-bg-lighter);
}

/* Button Component */
.infyp-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--infyp-spacing-sm);
    padding: var(--infyp-spacing-sm) var(--infyp-spacing-md);
    border-radius: var(--infyp-radius-md);
    font-weight: var(--infyp-font-weight-medium);
    text-decoration: none;
    transition: all var(--infyp-transition-fast);
    cursor: pointer;
    border: 1px solid transparent;
}

/* Form Components */
.infyp-form-group {
    margin-bottom: var(--infyp-spacing-lg);
}

.infyp-form-label {
    display: block;
    margin-bottom: var(--infyp-spacing-sm);
    font-weight: var(--infyp-font-weight-semibold);
    color: var(--infyp-text-primary);
}

.infyp-form-description {
    margin-bottom: var(--infyp-spacing-sm);
    color: var(--infyp-text-secondary);
    font-size: var(--infyp-font-size-md);
}

/* Status Components */
.infyp-status {
    display: inline-flex;
    align-items: center;
    gap: var(--infyp-spacing-xs);
    padding: var(--infyp-spacing-xs) var(--infyp-spacing-sm);
    border-radius: var(--infyp-radius-sm);
    font-size: var(--infyp-font-size-sm);
    font-weight: var(--infyp-font-weight-medium);
}

.infyp-status-success {
    background: var(--infyp-success-secondary-bg);
    color: var(--infyp-success-secondary-text);
}

.infyp-status-error {
    background: var(--infyp-error-bg);
    color: var(--infyp-error-text);
}



/* Source: framework/components/forms.css */
/**
 * Form Component
 * Reusable form styles for WordPress plugins
 */

.infyp-form-group {
    margin-bottom: var(--infyp-spacing-lg, 16px);
}

.infyp-form-label {
    display: block;
    margin-bottom: var(--infyp-spacing-xs, 4px);
    font-size: var(--infyp-font-size-md, 13px);
    font-weight: 500;
    color: var(--infyp-text-dark, #333333);
}

.infyp-form-control {
    display: block;
    width: 100%;
    padding: var(--infyp-spacing-sm, 8px) var(--infyp-spacing-md, 12px);
    font-family: inherit;
    font-size: var(--infyp-font-size-md, 13px);
    line-height: 1.5;
    color: var(--infyp-text-dark, #333333);
    background: var(--infyp-white, #ffffff);
    border: 1px solid var(--infyp-border-medium, #cccccc);
    border-radius: var(--infyp-radius-md, 4px);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.infyp-form-control:focus {
    border-color: var(--infyp-primary, #3858e9);
    outline: none;
    box-shadow: 0 0 0 3px rgba(34, 113, 177, 0.15);
}

.infyp-form-control:disabled {
    background: var(--infyp-bg-light, #f5f5f5);
    cursor: not-allowed;
}

.infyp-form-control::placeholder {
    color: var(--infyp-text-lighter, #999999);
}

/* Form Hint */
.infyp-form-hint {
    margin-top: var(--infyp-spacing-xs, 4px);
    font-size: var(--infyp-font-size-sm, 12px);
    color: var(--infyp-text-light, #888888);
}


/* Source: framework/components/modals.css */
/**
 * Modal/Lightbox Component
 * Unified reusable modal styles for WordPress plugins
 *
 * Uses CSS Grid for explicit row sizing:
 * - Header: auto (fits content)
 * - Body: 1fr (fills remaining space, scrollable)
 * - Footer: auto (fits content)
 *
 * State management via .is-open class (not inline styles)
 *
 * Usage:
 * <div class="infyp-lightbox" id="my-lightbox">
 *   <div class="infyp-lightbox-header">
 *     <h3>Title</h3>
 *     <button class="infyp-lightbox-close">&times;</button>
 *   </div>
 *   <div class="infyp-lightbox-body">Content</div>
 *   <div class="infyp-lightbox-footer">Actions</div>
 * </div>
 * <div class="infyp-lightbox-overlay" id="infyp-lightbox-overlay"></div>
 */

/* ==========================================================================
   Overlay
   ========================================================================== */

.infyp-lightbox-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 159999;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.infyp-lightbox-overlay.is-visible,
.infyp-lightbox-overlay.active {
    opacity: 1;
}

/* Prevent body scroll when lightbox is open */
body.infyp-lightbox-open {
    overflow: hidden;
}

/* ==========================================================================
   Base Lightbox Container - CSS Grid Layout
   ========================================================================== */

.infyp-lightbox {
    /* Hidden by default */
    display: none;

    /* Positioning */
    position: fixed;
    top: calc(32px + 24px); /* WP admin bar (32px) + margin */
    left: 50%;
    transform: translateX(-50%);

    /* Sizing */
    width: 90%;
    max-width: 700px;
    max-height: calc(100vh - 32px - 48px);

    /* Appearance */
    background: var(--infyp-bg-white, #ffffff);
    border-radius: var(--infyp-radius-lg, 8px);
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.2);
    z-index: 160000;
    overflow: hidden;

    /* Animation */
    opacity: 0;
    transition: opacity 0.2s ease;
}

/* Open state - CSS Grid layout for header/body/footer */
.infyp-lightbox.is-open {
    display: grid !important;
    grid-template-rows: auto 1fr auto;
    grid-template-areas:
        "header"
        "body"
        "footer";
    opacity: 1;
}

/* Legacy support for inline styles (jQuery fadeIn) */
.infyp-lightbox[style*="display:block"],
.infyp-lightbox[style*="display:flex"],
.infyp-lightbox[style*="display: block"],
.infyp-lightbox[style*="display: flex"],
.infyp-lightbox.active {
    display: grid !important;
    grid-template-rows: auto 1fr auto;
    grid-template-areas:
        "header"
        "body"
        "footer";
    opacity: 1;
}

/* ==========================================================================
   Legacy Modal Support (for backwards compatibility)
   These map old class names to the new system
   ========================================================================== */

/* Modal overlay (alternative naming) */
.infyp-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
}

.infyp-modal-overlay.is-open,
.infyp-modal-overlay.active {
    opacity: 1;
    visibility: visible;
}

.infyp-modal {
    position: relative;
    width: 100%;
    max-width: 500px;
    max-height: calc(100vh - 32px - 48px); /* Account for WP admin bar */
    margin: var(--infyp-spacing-lg, 16px);
    background: var(--infyp-white, #ffffff);
    border-radius: var(--infyp-radius-lg, 8px);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    display: flex;
    flex-direction: column;
    transform: scale(0.95);
    transition: transform 0.2s ease;
}

.infyp-modal-overlay.is-open .infyp-modal,
.infyp-modal-overlay.active .infyp-modal {
    transform: scale(1);
}

.infyp-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--infyp-spacing-lg, 16px);
    border-bottom: 1px solid var(--infyp-border-light, #dddddd);
}

.infyp-modal-title {
    margin: 0;
    font-size: var(--infyp-font-size-xl, 16px);
    font-weight: 600;
    color: var(--infyp-text-dark, #333333);
}

/* ==========================================================================
   Legacy Lightbox Class Aliases
   Map old specific class names to the unified system
   ========================================================================== */

/* All field lightboxes - unified viewport-aware positioning */
.infyp-filename-lightbox,
.infyp-alt-text-lightbox,
.infyp-title-lightbox,
.infyp-keywords-lightbox,
.infyp-usage-lightbox,
.infyp-image-preview-lightbox,
.infyp-custom-prompt-lightbox {
    display: none;
    position: fixed;
    top: calc(32px + 24px);
    left: 50%;
    transform: translateX(-50%);
    background: var(--infyp-bg-white, #ffffff);
    width: 90%;
    max-width: 700px;
    max-height: calc(100vh - 32px - 48px);
    border-radius: var(--infyp-radius-lg, 8px);
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.2);
    z-index: 160000;
    flex-direction: column;
    overflow: hidden;
}

.infyp-keywords-lightbox {
    max-width: 600px;
    /* Center vertically like other modals */
    top: 50%;
    transform: translate(-50%, -50%);
}

.infyp-image-preview-lightbox,
.infyp-custom-prompt-lightbox {
    /* Center vertically */
    top: 50%;
    transform: translate(-50%, -50%);
}

.infyp-custom-prompt-lightbox {
    max-width: 500px;
}

/* Legacy lightboxes - CSS Grid when visible */
.infyp-filename-lightbox[style*="display:block"],
.infyp-filename-lightbox[style*="display:flex"],
.infyp-filename-lightbox[style*="display: block"],
.infyp-filename-lightbox[style*="display: flex"],
.infyp-filename-lightbox.is-open,
.infyp-alt-text-lightbox[style*="display:block"],
.infyp-alt-text-lightbox[style*="display:flex"],
.infyp-alt-text-lightbox[style*="display: block"],
.infyp-alt-text-lightbox[style*="display: flex"],
.infyp-alt-text-lightbox.is-open,
.infyp-title-lightbox[style*="display:block"],
.infyp-title-lightbox[style*="display:flex"],
.infyp-title-lightbox[style*="display: block"],
.infyp-title-lightbox[style*="display: flex"],
.infyp-title-lightbox.is-open,
.infyp-keywords-lightbox[style*="display:block"],
.infyp-keywords-lightbox[style*="display:flex"],
.infyp-keywords-lightbox[style*="display: block"],
.infyp-keywords-lightbox[style*="display: flex"],
.infyp-keywords-lightbox.is-open,
.infyp-usage-lightbox[style*="display:block"],
.infyp-usage-lightbox[style*="display:flex"],
.infyp-usage-lightbox[style*="display: block"],
.infyp-usage-lightbox[style*="display: flex"],
.infyp-usage-lightbox.is-open,
.infyp-image-preview-lightbox[style*="display:block"],
.infyp-image-preview-lightbox[style*="display:flex"],
.infyp-image-preview-lightbox[style*="display: block"],
.infyp-image-preview-lightbox[style*="display: flex"],
.infyp-image-preview-lightbox.is-open,
.infyp-custom-prompt-lightbox[style*="display:block"],
.infyp-custom-prompt-lightbox[style*="display:flex"],
.infyp-custom-prompt-lightbox[style*="display: block"],
.infyp-custom-prompt-lightbox[style*="display: flex"],
.infyp-custom-prompt-lightbox.is-open {
    display: grid !important;
    grid-template-rows: auto 1fr auto;
    grid-template-areas:
        "header"
        "body"
        "footer";
}

/* Lightbox headers */
.infyp-filename-lightbox-header,
.infyp-alt-text-lightbox-header,
.infyp-title-lightbox-header,
.infyp-keywords-lightbox-header,
.infyp-usage-lightbox-header,
.infyp-image-preview-lightbox-header,
.infyp-custom-prompt-lightbox-header {
    grid-area: header;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--infyp-spacing-lg, 16px);
    border-bottom: 1px solid var(--infyp-border-light, #e0e0e0);
    background: var(--infyp-bg-lighter, #f9f9f9);
}

.infyp-filename-lightbox-header h3,
.infyp-alt-text-lightbox-header h3,
.infyp-title-lightbox-header h3,
.infyp-keywords-lightbox-header h3,
.infyp-usage-lightbox-header h3,
.infyp-image-preview-lightbox-header h3,
.infyp-custom-prompt-lightbox-header h3 {
    margin: 0;
    font-size: var(--infyp-font-size-lg, 16px);
    font-weight: var(--infyp-font-weight-semibold, 600);
    color: var(--infyp-text-primary, #23282d);
}

/* Lightbox close buttons */
.infyp-filename-lightbox-close,
.infyp-alt-text-lightbox-close,
.infyp-title-lightbox-close,
.infyp-keywords-lightbox-close,
.infyp-usage-lightbox-close,
.infyp-image-preview-lightbox-close,
.infyp-custom-prompt-lightbox-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: var(--infyp-radius-md, 4px);
    font-size: 1.5rem;
    color: var(--infyp-text-secondary, #646970);
    cursor: pointer;
    transition: background-color 0.2s;
}

.infyp-filename-lightbox-close:hover,
.infyp-alt-text-lightbox-close:hover,
.infyp-title-lightbox-close:hover,
.infyp-keywords-lightbox-close:hover,
.infyp-usage-lightbox-close:hover,
.infyp-image-preview-lightbox-close:hover,
.infyp-custom-prompt-lightbox-close:hover {
    background-color: var(--infyp-bg-light, #f5f5f5);
}

/* Lightbox content/body - scrollable */
.infyp-filename-lightbox-content,
.infyp-alt-text-lightbox-content,
.infyp-title-lightbox-content,
.infyp-keywords-lightbox-content,
.infyp-usage-lightbox-content,
.infyp-image-preview-lightbox-content,
.infyp-custom-prompt-lightbox-content {
    grid-area: body;
    min-height: 0; /* Critical for grid row shrinking */
    padding: var(--infyp-spacing-lg, 16px);
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

/* Lightbox footers */
.infyp-filename-lightbox-footer,
.infyp-alt-text-lightbox-footer,
.infyp-title-lightbox-footer,
.infyp-keywords-lightbox-footer,
.infyp-usage-lightbox-footer,
.infyp-image-preview-lightbox-footer,
.infyp-custom-prompt-lightbox-footer {
    grid-area: footer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--infyp-spacing-sm, 8px);
    padding: var(--infyp-spacing-lg, 16px);
    border-top: 1px solid var(--infyp-border-light, #e0e0e0);
    background: var(--infyp-bg-lighter, #f9f9f9);
    border-radius: 0 0 var(--infyp-radius-lg, 8px) var(--infyp-radius-lg, 8px);
}

.infyp-keywords-lightbox-footer {
    justify-content: flex-end;
}

/* SEO Score Modal */
.infyp-score-modal {
    display: none;
    position: fixed;
    z-index: 100000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    opacity: 0;
    transition: opacity 0.2s ease;
}

.infyp-score-modal.is-open {
    display: block !important;
    opacity: 1;
}

.infyp-score-modal-content {
    background-color: var(--infyp-bg-white, #ffffff);
    position: absolute;
    top: calc(32px + 24px);
    left: 50%;
    transform: translateX(-50%);
    padding: 0;
    border-radius: var(--infyp-radius-lg, 8px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    width: 90%;
    max-width: 800px;
    max-height: calc(100vh - 32px - 48px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    opacity: 0;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.infyp-score-modal.is-open .infyp-score-modal-content {
    opacity: 1;
}

.infyp-score-modal-header {
    padding: var(--infyp-spacing-lg, 20px);
    border-bottom: 1px solid var(--infyp-border-light, #e0e0e0);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--infyp-spacing-md);
    flex-shrink: 0;
}

.infyp-score-modal-header h2 {
    margin: 0;
    font-size: var(--infyp-font-size-xl);
    color: var(--infyp-text-primary, #23282d);
}

.infyp-score-modal-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: var(--infyp-radius-md, 4px);
    font-size: 1.5rem;
    color: var(--infyp-text-secondary, #646970);
    cursor: pointer;
    transition: background-color 0.2s;
}

.infyp-score-modal-close:hover {
    background-color: var(--infyp-bg-light, #f5f5f5);
    color: var(--infyp-text-primary, #23282d);
}

.infyp-score-modal-body {
    padding: var(--infyp-spacing-lg, 20px);
    overflow-y: auto;
    flex: 1 1 auto;
    min-height: 0;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

/* Responsive for legacy lightboxes - laptop height */
@media screen and (max-height: 800px) {
    .infyp-filename-lightbox,
    .infyp-alt-text-lightbox,
    .infyp-title-lightbox,
    .infyp-usage-lightbox,
    .infyp-score-modal-content {
        top: calc(32px + 12px);
        max-height: calc(100vh - 32px - 24px);
    }

    /* Vertically centered lightboxes */
    .infyp-keywords-lightbox,
    .infyp-image-preview-lightbox,
    .infyp-custom-prompt-lightbox {
        top: 50%;
        max-height: calc(100vh - 32px - 24px);
    }

    .infyp-filename-lightbox-header,
    .infyp-alt-text-lightbox-header,
    .infyp-title-lightbox-header,
    .infyp-keywords-lightbox-header,
    .infyp-usage-lightbox-header,
    .infyp-image-preview-lightbox-header,
    .infyp-custom-prompt-lightbox-header,
    .infyp-filename-lightbox-footer,
    .infyp-alt-text-lightbox-footer,
    .infyp-title-lightbox-footer,
    .infyp-keywords-lightbox-footer,
    .infyp-usage-lightbox-footer,
    .infyp-image-preview-lightbox-footer,
    .infyp-custom-prompt-lightbox-footer {
        padding: var(--infyp-spacing-md, 12px) var(--infyp-spacing-lg, 16px);
    }

    .infyp-filename-lightbox-content,
    .infyp-alt-text-lightbox-content,
    .infyp-title-lightbox-content,
    .infyp-keywords-lightbox-content,
    .infyp-usage-lightbox-content,
    .infyp-image-preview-lightbox-content,
    .infyp-custom-prompt-lightbox-content {
        padding: var(--infyp-spacing-md, 12px) var(--infyp-spacing-lg, 16px);
    }
}

/* Responsive for legacy lightboxes - small height */
@media screen and (max-height: 600px) {
    .infyp-filename-lightbox,
    .infyp-alt-text-lightbox,
    .infyp-title-lightbox,
    .infyp-usage-lightbox,
    .infyp-score-modal-content {
        top: calc(32px + 8px);
        max-height: calc(100vh - 32px - 16px);
    }

    /* Vertically centered lightboxes */
    .infyp-keywords-lightbox,
    .infyp-image-preview-lightbox,
    .infyp-custom-prompt-lightbox {
        top: 50%;
        max-height: calc(100vh - 32px - 16px);
    }

    .infyp-filename-lightbox-header,
    .infyp-alt-text-lightbox-header,
    .infyp-title-lightbox-header,
    .infyp-keywords-lightbox-header,
    .infyp-usage-lightbox-header,
    .infyp-image-preview-lightbox-header,
    .infyp-custom-prompt-lightbox-header,
    .infyp-filename-lightbox-footer,
    .infyp-alt-text-lightbox-footer,
    .infyp-title-lightbox-footer,
    .infyp-keywords-lightbox-footer,
    .infyp-usage-lightbox-footer,
    .infyp-image-preview-lightbox-footer,
    .infyp-custom-prompt-lightbox-footer {
        padding: var(--infyp-spacing-sm, 8px) var(--infyp-spacing-md, 12px);
    }

    .infyp-filename-lightbox-content,
    .infyp-alt-text-lightbox-content,
    .infyp-title-lightbox-content,
    .infyp-keywords-lightbox-content,
    .infyp-usage-lightbox-content,
    .infyp-image-preview-lightbox-content,
    .infyp-custom-prompt-lightbox-content {
        padding: var(--infyp-spacing-sm, 8px) var(--infyp-spacing-md, 12px);
    }
}

/* Mobile - taller admin bar */
@media screen and (max-width: 782px) {
    .infyp-filename-lightbox,
    .infyp-alt-text-lightbox,
    .infyp-title-lightbox,
    .infyp-usage-lightbox,
    .infyp-score-modal-content {
        width: 95%;
        max-width: none;
        top: calc(46px + 12px);
        max-height: calc(100vh - 46px - 24px);
    }

    /* Vertically centered lightboxes on mobile */
    .infyp-keywords-lightbox,
    .infyp-image-preview-lightbox,
    .infyp-custom-prompt-lightbox {
        width: 95%;
        max-width: none;
        top: 50%;
        max-height: calc(100vh - 46px - 24px);
    }
}

/* Common trigger styles */
.infyp-filename-trigger,
.infyp-alt-text-trigger,
.infyp-title-trigger {
    background: var(--infyp-bg-white, #ffffff) !important;
    cursor: pointer !important;
    transition: all var(--infyp-transition-fast, 0.2s ease);
}

.infyp-filename-trigger:hover,
.infyp-alt-text-trigger:hover,
.infyp-title-trigger:hover {
    background: var(--infyp-bg-light, #f8f9fa) !important;
    border-color: var(--infyp-primary, #3858e9) !important;
    box-shadow: 0 0 0 1px var(--infyp-primary, #3858e9);
}



/* Source: framework/components/badges.css */
/**
 * Badge Component
 * Reusable badge/tag styles for WordPress plugins
 *
 * Usage:
 * <span class="infyp-badge infyp-badge-success">Success</span>
 * <span class="infyp-badge infyp-badge-sm">Small</span>
 * <span class="infyp-points-badge infyp-badge-success">+5</span>
 */

/* ==========================================================================
   Base Badge
   ========================================================================== */

.infyp-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--infyp-spacing-xs) var(--infyp-spacing-sm);
    font-size: var(--infyp-font-size-xs);
    font-weight: var(--infyp-font-weight-semibold);
    line-height: 1.2;
    border-radius: var(--infyp-radius-full);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
}

/* ==========================================================================
   Badge Sizes
   ========================================================================== */

/* ==========================================================================
   Status Badge Variants
   ========================================================================== */

.infyp-badge-success {
    background: var(--infyp-success-secondary-bg);
    color: var(--infyp-success-secondary-text);
}

.infyp-badge-error {
    background: var(--infyp-error-bg-lightest);
    color: var(--infyp-error);
}

.infyp-badge-warning {
    background: var(--infyp-warning-border);
    color: var(--infyp-warning-text-dark);
}

/* Badge with Dashicons */
.infyp-badge .dashicons {
    font-size: 14px;
    width: 14px;
    height: 14px;
    line-height: 14px;
    margin-right: 4px;
}

/* ==========================================================================
   Points Badge (Score display)
   ========================================================================== */

.infyp-points-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--infyp-spacing-xs) var(--infyp-spacing-sm);
    border-radius: var(--infyp-radius-full);
    font-weight: var(--infyp-font-weight-semibold);
    font-size: var(--infyp-font-size-xs);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.infyp-points-badge-small {
    font-size: 9px;
    padding: 2px var(--infyp-spacing-xs);
    letter-spacing: 0.3px;
}

.infyp-points-earned {
    background: var(--infyp-success-secondary-bg);
    color: var(--infyp-success-secondary-text);
}

.infyp-points-total {
    background: var(--infyp-bg-light);
    color: var(--infyp-text-secondary);
}

.infyp-points-total.infyp-badge-success {
    background: var(--infyp-success-secondary-bg);
    color: var(--infyp-success-secondary-text);
}

/* ==========================================================================
   Usage Type Badges
   ========================================================================== */

.infyp-usage-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--infyp-spacing-xs) var(--infyp-spacing-sm);
    border-radius: var(--infyp-radius-full);
    font-size: var(--infyp-font-size-xs);
    font-weight: var(--infyp-font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.infyp-usage-badge.featured {
    background: var(--infyp-badge-featured-bg);
    color: var(--infyp-primary-dark);
}

.infyp-usage-badge.content {
    background: var(--infyp-badge-content-bg);
    color: var(--infyp-badge-content-text);
}

.infyp-usage-badge.builder {
    background: var(--infyp-badge-builder-bg);
    color: var(--infyp-badge-builder-text);
}


/* Source: framework/components/info-boxes.css */
/* ==========================================================================
   Intro Box (minimal info box)
   ========================================================================== */

.infyp-intro-box {
    display: flex;
    align-items: center;
    gap: var(--infyp-spacing-sm);
    padding: var(--infyp-spacing-md);
    background: var(--infyp-bg-lighter);
    border-radius: var(--infyp-radius-md);
    margin-bottom: var(--infyp-spacing-lg);
}

.infyp-intro-box .dashicons {
    color: var(--infyp-primary);
    flex-shrink: 0;
}

.infyp-intro-box p {
    margin: 0;
    color: var(--infyp-text-primary);
    font-size: var(--infyp-font-size-md);
    line-height: 1.5;
}

/* ==========================================================================
   Info Grid Component
   ========================================================================== */

.infyp-info-grid {
    display: grid;
    gap: var(--infyp-spacing-md);
}

.infyp-info-grid.infyp-grid-2 {
    grid-template-columns: repeat(2, 1fr);
}

.infyp-info-grid.infyp-grid-3 {
    grid-template-columns: repeat(3, 1fr);
}

/* ==========================================================================
   Info Item (card within the grid)
   ========================================================================== */

.infyp-info-item {
    border: 1px solid var(--infyp-border-light);
    padding: var(--infyp-spacing-md);
    border-radius: var(--infyp-radius-md);
    background: var(--infyp-bg-white);
}

.infyp-info-item .infyp-badge {
    margin-bottom: var(--infyp-spacing-xs);
}

.infyp-info-item .infyp-badge .dashicons {
    font-size: var(--infyp-font-size-sm);
    margin-right: var(--infyp-spacing-xxs);
}

.infyp-card-header .infyp-badge .dashicons {
    font-size: var(--infyp-font-size-sm);
    width: 14px;
    height: 14px;
    margin-right: var(--infyp-spacing-xxs);
}

/* ==========================================================================
   Typography helpers used inside info items
   ========================================================================== */

.infyp-font-semibold {
    font-weight: var(--infyp-font-weight-semibold);
    color: var(--infyp-text-primary);
}

.infyp-text-sm {
    font-size: var(--infyp-font-size-sm);
    line-height: 1.5;
}

.infyp-text-muted {
    color: var(--infyp-text-muted, #6c757d);
}

.infyp-mb-sm {
    margin-bottom: var(--infyp-spacing-sm);
}

.infyp-mt-xs {
    margin-top: var(--infyp-spacing-xs);
}

.infyp-mt-lg {
    margin-top: var(--infyp-spacing-lg);
}

/* ==========================================================================
   Responsive grid adjustments
   ========================================================================== */

@media (max-width: 1200px) {
    .infyp-info-grid.infyp-grid-3 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .infyp-info-grid.infyp-grid-3,
    .infyp-info-grid.infyp-grid-2 {
        grid-template-columns: 1fr;
    }
}