/**
 * Shipping Countdown for WooCommerce - Frontend Styles v2.0.10
 * Enhanced universal shortcode support with consistent styling
 */

/* CSS Custom Properties (CSS Variables) with Theme Integration */
:root {
    /* Theme-aware color system */
    --scwc-bg-color: light-dark(
        var(--wp--preset--color--base, var(--wp--preset--color--background, #ffffff)),
        var(--wp--preset--color--contrast, #1a1a1a)
    );
    --scwc-text-color: light-dark(
        var(--wp--preset--color--contrast, var(--wp--preset--color--foreground, #000000)),
        var(--wp--preset--color--base, #ffffff)
    );
    --scwc-highlight-color: var(--wp--preset--color--primary, var(--wp--preset--color--accent, #0073aa));
    --scwc-border-color: light-dark(
        color-mix(in srgb, var(--scwc-text-color) 20%, transparent 80%),
        color-mix(in srgb, var(--scwc-text-color) 30%, transparent 70%)
    );
    
    /* Fallback colors for older themes */
    --scwc-bg-fallback: #f8f9fa;
    --scwc-text-fallback: #333333;
    --scwc-highlight-fallback: #0073aa;
    
    /* Design system variables */
    --scwc-shadow: 0 2px 4px rgba(0,0,0,0.1);
    --scwc-shadow-hover: 0 4px 8px rgba(0,0,0,0.15);
    --scwc-radius: var(--wp--custom--border--radius, 6px);
    --scwc-transition: all 0.3s ease;
    --scwc-font-size-base: var(--wp--preset--font-size--medium, 16px);
    --scwc-font-size-timer: var(--wp--preset--font-size--large, 24px);
    --scwc-spacing-sm: var(--wp--preset--spacing--20, 8px);
    --scwc-spacing-md: var(--wp--preset--spacing--30, 15px);
    --scwc-spacing-lg: var(--wp--preset--spacing--40, 20px);
}

/* Theme integration - detect theme colors */
.wp-site-blocks,
.editor-styles-wrapper {
    /* WordPress theme colors integration */
    --scwc-bg-color: var(--wp--preset--color--background, var(--scwc-bg-fallback));
    --scwc-text-color: var(--wp--preset--color--foreground, var(--scwc-text-fallback));
    --scwc-highlight-color: var(--wp--preset--color--primary, var(--scwc-highlight-fallback));
}

/* Dark theme detection (WordPress 6.3+) */
:root:has(.is-dark-theme),
.is-dark-theme {
    --scwc-bg-color: var(--wp--preset--color--contrast, #2d3748);
    --scwc-text-color: var(--wp--preset--color--base, #e2e8f0);
    --scwc-highlight-color: var(--wp--preset--color--primary, #60a5fa);
    --scwc-border-color: color-mix(in srgb, var(--scwc-text-color) 30%, transparent 70%);
    --scwc-shadow: 0 2px 4px rgba(0,0,0,0.3);
    --scwc-shadow-hover: 0 4px 8px rgba(0,0,0,0.4);
}

/* Automatic dark mode detection */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --scwc-bg-color: var(--wp--preset--color--contrast, #2d3748);
        --scwc-text-color: var(--wp--preset--color--base, #e2e8f0);
        --scwc-highlight-color: var(--wp--preset--color--primary, #60a5fa);
        --scwc-border-color: color-mix(in srgb, var(--scwc-text-color) 30%, transparent 70%);
        --scwc-shadow: 0 2px 4px rgba(0,0,0,0.3);
        --scwc-shadow-hover: 0 4px 8px rgba(0,0,0,0.4);
    }
}

/* Manual theme override classes */
.scwc-theme-auto {
    /* Uses theme colors automatically */
}

.scwc-theme-light {
    --scwc-bg-color: var(--wp--preset--color--background, #ffffff);
    --scwc-text-color: var(--wp--preset--color--foreground, #000000);
    --scwc-highlight-color: var(--wp--preset--color--primary, #0073aa);
    --scwc-border-color: color-mix(in srgb, var(--scwc-text-color) 20%, transparent 80%);
}

.scwc-theme-dark {
    --scwc-bg-color: var(--wp--preset--color--contrast, #1a1a1a);
    --scwc-text-color: var(--wp--preset--color--base, #ffffff);
    --scwc-highlight-color: var(--wp--preset--color--primary, #60a5fa);
    --scwc-border-color: color-mix(in srgb, var(--scwc-text-color) 30%, transparent 70%);
}

/* Custom color overrides (when user sets specific colors) */
.scwc-countdown-wrapper[style*="background-color"] {
    /* When inline styles are applied, they take precedence */
}

/* Main countdown wrapper - Universal consistency */
.scwc-countdown-wrapper {
    background: var(--scwc-bg-color);
    border: 1px solid var(--scwc-border-color);
    border-radius: var(--scwc-radius);
    padding: var(--scwc-spacing-md) var(--scwc-spacing-lg);
    margin: var(--scwc-spacing-md) 0;
    text-align: center;
    font-family: var(--wp--preset--font-family--base, inherit);
    line-height: 1.4;
    box-shadow: var(--scwc-shadow);
    transition: var(--scwc-transition);
    container-type: inline-size;
    position: relative;
    color: var(--scwc-text-color);
    
    /* Theme integration */
    font-size: var(--scwc-font-size-base);
    
    /* Respect theme spacing if available */
    margin-block: var(--wp--preset--spacing--30, var(--scwc-spacing-md));
    
    /* Ensure consistent display */
    display: block;
    width: 100%;
    box-sizing: border-box;
}

.scwc-countdown-wrapper:hover {
    box-shadow: var(--scwc-shadow-hover);
    transform: translateY(-1px);
}

/* Alignment classes for shortcode - consistent across all instances */
.scwc-align-left {
    text-align: left !important;
}

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

.scwc-align-right {
    text-align: right !important;
}

/* Font family classes for shortcode - ensure consistency */
.scwc-font-theme-default {
    font-family: var(--wp--preset--font-family--base, inherit) !important;
}

.scwc-font-arial {
    font-family: Arial, sans-serif !important;
}

.scwc-font-helvetica {
    font-family: Helvetica, Arial, sans-serif !important;
}

.scwc-font-times-new-roman {
    font-family: "Times New Roman", serif !important;
}

.scwc-font-georgia {
    font-family: Georgia, serif !important;
}

.scwc-font-verdana {
    font-family: Verdana, sans-serif !important;
}

.scwc-font-courier-new {
    font-family: "Courier New", monospace !important;
}

.scwc-font-trebuchet-ms {
    font-family: "Trebuchet MS", sans-serif !important;
}

.scwc-font-arial-black {
    font-family: "Arial Black", sans-serif !important;
}

.scwc-font-impact {
    font-family: Impact, sans-serif !important;
}

.scwc-font-comic-sans-ms {
    font-family: "Comic Sans MS", cursive !important;
}

.scwc-font-palatino {
    font-family: Palatino, serif !important;
}

.scwc-font-garamond {
    font-family: Garamond, serif !important;
}

.scwc-font-bookman {
    font-family: Bookman, serif !important;
}

.scwc-font-avant-garde {
    font-family: "Avant Garde", sans-serif !important;
}

/* Apply font family to all child elements for consistency */
.scwc-countdown-wrapper[class*="scwc-font-"] * {
    font-family: inherit !important;
}

/* Shortcode error and notice styles */
.scwc-shortcode-error {
    background: #fff2f2;
    border: 1px solid #dc3545;
    border-left: 4px solid #dc3545;
    color: #dc3545;
    padding: 12px 16px;
    border-radius: 4px;
    margin: 16px 0;
    font-size: 14px;
    font-weight: 500;
}

.scwc-shortcode-error::before {
    content: "âš ï¸ ";
    font-weight: bold;
}

.scwc-shortcode-notice {
    background: #fff3cd;
    border: 1px solid #ffc107;
    border-left: 4px solid #ffc107;
    color: #664d03;
    padding: 12px 16px;
    border-radius: 4px;
    margin: 16px 0;
    font-size: 14px;
    font-weight: 500;
}

.scwc-shortcode-notice::before {
    content: "â„¹ï¸ ";
    font-weight: bold;
}

/* Content container */
.scwc-countdown-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--scwc-spacing-sm);
    width: 100%;
}

/* Countdown text */
.scwc-countdown-text {
    font-size: var(--scwc-font-size-base);
    font-weight: 500;
    margin-bottom: 5px;
    color: var(--scwc-text-color);
    line-height: 1.4;
    font-family: inherit;
}

/* Countdown timer container */
.scwc-countdown-timer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--scwc-spacing-sm);
    font-weight: bold;
    font-size: 18px;
    color: var(--scwc-highlight-color);
    flex-wrap: wrap;
    font-family: inherit;
}

/* Individual time parts */
.scwc-time-part {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 45px;
}

/* Time numbers - Enhanced for consistency */
.scwc-number {
    font-size: var(--scwc-font-size-timer);
    font-weight: bold;
    line-height: 1;
    display: block;
    padding: var(--scwc-spacing-sm) 12px;
    background: color-mix(in srgb, var(--scwc-bg-color) 90%, var(--scwc-text-color) 5%);
    border-radius: calc(var(--scwc-radius) * 0.6);
    border: 1px solid var(--scwc-border-color);
    box-shadow: var(--scwc-shadow);
    min-width: 40px;
    text-align: center;
    transition: var(--scwc-transition);
    font-variant-numeric: tabular-nums;
    color: var(--scwc-highlight-color);
    font-family: inherit;
}

.scwc-number:hover {
    transform: translateY(-1px);
    box-shadow: var(--scwc-shadow-hover);
    background: color-mix(in srgb, var(--scwc-highlight-color) 10%, var(--scwc-bg-color) 90%);
}

/* Time labels */
.scwc-label {
    font-size: 12px;
    font-weight: normal;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 4px;
    opacity: 0.8;
    color: var(--scwc-text-color);
    font-family: inherit;
}

/* Separators between time parts */
.scwc-separator {
    font-size: 20px;
    font-weight: bold;
    margin: 0 4px;
    opacity: 0.6;
    color: var(--scwc-highlight-color);
    animation: blink 2s infinite;
    font-family: inherit;
}

@keyframes blink {
    0%, 50% { opacity: 0.6; }
    51%, 100% { opacity: 0.2; }
}

/* Next shipping day message */
.scwc-next-shipping {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--scwc-spacing-sm);
    font-size: 15px;
    font-weight: 500;
    color: color-mix(in srgb, var(--scwc-text-color) 70%, transparent 30%);
    font-family: inherit;
}

/* Shipping closed message */
.scwc-shipping-closed {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--scwc-spacing-sm);
    font-size: 15px;
    font-weight: 500;
    color: color-mix(in srgb, var(--scwc-text-color) 70%, transparent 30%);
    font-family: inherit;
}

/* Icons */
.scwc-icon-clock::before {
    content: "ðŸ•'";
    margin-right: 5px;
}

.scwc-icon-info::before {
    content: "ℹï¸";
    margin-right: 5px;
}

/* Loading state for AJAX requests */
.scwc-loading {
    opacity: 0.6;
    pointer-events: none;
    position: relative;
}

.scwc-loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 20px;
    margin: -10px 0 0 -10px;
    border: 2px solid rgba(0,0,0,0.1);
    border-top: 2px solid var(--scwc-highlight-color);
    border-radius: 50%;
    animation: spin 1s linear infinite;
    z-index: 10;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Container Queries for Responsive Design */
@container (max-width: 400px) {
    .scwc-countdown-timer {
        font-size: 16px;
        gap: 6px;
    }
    
    .scwc-number {
        font-size: calc(var(--scwc-font-size-timer) * 0.85);
        padding: 6px 10px;
        min-width: 35px;
    }
    
    .scwc-label {
        font-size: 11px;
    }
}

@container (max-width: 300px) {
    .scwc-countdown-timer {
        font-size: 14px;
        gap: 4px;
    }
    
    .scwc-time-part {
        min-width: 35px;
    }
    
    .scwc-number {
        font-size: calc(var(--scwc-font-size-timer) * 0.75);
        padding: 5px 8px;
        min-width: 30px;
    }
    
    .scwc-separator {
        font-size: 16px;
        margin: 0 2px;
    }
}

/* Theme-specific enhancements */
.wp-block-group .scwc-countdown-wrapper,
.wp-block-columns .scwc-countdown-wrapper {
    /* Better integration with block themes */
    border-radius: var(--wp--custom--border--radius, var(--scwc-radius));
    margin-block: var(--wp--preset--spacing--30, var(--scwc-spacing-md));
}

/* Loading skeleton animation */
.scwc-loading .scwc-countdown-content {
    background: linear-gradient(90deg, 
        var(--scwc-bg-color) 25%, 
        color-mix(in srgb, var(--scwc-bg-color) 90%, var(--scwc-text-color) 5%) 50%, 
        var(--scwc-bg-color) 75%);
    background-size: 200% 100%;
    animation: shimmer 2s infinite;
}

@keyframes shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

/* Animation for countdown update */
.scwc-number.updating {
    transform: scale(1.1);
    background: color-mix(in srgb, var(--scwc-highlight-color) 15%, var(--scwc-bg-color) 85%);
    border-color: color-mix(in srgb, var(--scwc-highlight-color) 40%, transparent 60%);
}

/* Fade in animation for initial load */
.scwc-countdown-wrapper {
    animation: fadeIn 0.5s ease-in;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Urgent countdown styling (less than 1 hour) */
.scwc-countdown-wrapper.urgent {
    background: color-mix(in srgb, var(--scwc-highlight-color) 8%, var(--scwc-bg-color) 92%);
    border-color: color-mix(in srgb, var(--scwc-highlight-color) 30%, var(--scwc-border-color) 70%);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--scwc-highlight-color) 20%, transparent 80%);
}

.scwc-countdown-wrapper.urgent .scwc-number {
    background: color-mix(in srgb, var(--scwc-highlight-color) 15%, var(--scwc-bg-color) 85%);
    border-color: color-mix(in srgb, var(--scwc-highlight-color) 40%, transparent 60%);
    color: var(--scwc-highlight-color);
    box-shadow: 0 2px 8px color-mix(in srgb, var(--scwc-highlight-color) 25%, transparent 75%);
}

.scwc-countdown-wrapper.urgent .scwc-countdown-timer {
    animation: pulse 1s infinite alternate;
}

@keyframes pulse {
    from { transform: scale(1); }
    to { transform: scale(1.02); }
}

/* Block editor specific styles */
.scwc-block-editor {
    border-style: dashed !important;
    border-width: 2px !important;
    position: relative;
}

.scwc-block-editor::before {
    content: "Shipping Countdown Block";
    position: absolute;
    top: -12px;
    left: 10px;
    background: var(--wp--preset--color--primary, #0073aa);
    color: var(--wp--preset--color--background, white);
    padding: 2px 8px;
    font-size: 11px;
    border-radius: 2px;
    z-index: 1;
}

/* Gutenberg alignment classes */
.has-text-align-left { text-align: left; }
.has-text-align-center { text-align: center; }
.has-text-align-right { text-align: right; }

/* High contrast mode support */
@media (prefers-contrast: high) {
    :root {
        --scwc-border-color: color-mix(in srgb, var(--scwc-text-color) 50%, transparent 50%);
        --scwc-shadow: none;
        --scwc-shadow-hover: none;
    }
    
    .scwc-countdown-wrapper {
        border-width: 2px;
        box-shadow: none;
    }
    
    .scwc-number {
        border-width: 2px;
        box-shadow: none;
    }
    
    .scwc-shortcode-error,
    .scwc-shortcode-notice {
        border-width: 2px;
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    * {
        --scwc-transition: none;
    }
    
    .scwc-separator {
        animation: none;
        opacity: 0.6;
    }
    
    .scwc-countdown-wrapper {
        animation: none;
    }
    
    .scwc-countdown-wrapper.urgent .scwc-countdown-timer {
        animation: none;
    }
    
    .scwc-number:hover {
        transform: none;
    }
    
    .scwc-number.updating {
        transform: none;
    }
    
    .scwc-loading .scwc-countdown-content {
        animation: none;
    }
}

/* Print styles */
@media print {
    .scwc-countdown-wrapper {
        background: white !important;
        color: black !important;
        box-shadow: none !important;
        border: 1px solid #000 !important;
        page-break-inside: avoid;
    }
    
    .scwc-number {
        background: white !important;
        color: black !important;
        border: 1px solid #000 !important;
        box-shadow: none !important;
    }
    
    .scwc-separator {
        animation: none !important;
    }
    
    .scwc-shortcode-error,
    .scwc-shortcode-notice {
        background: white !important;
        color: black !important;
        border: 1px solid #000 !important;
    }
}

/* Focus styles for accessibility */
.scwc-countdown-wrapper:focus-within {
    outline: 2px solid var(--scwc-highlight-color);
    outline-offset: 2px;
}

/* Scroll-driven animations (modern browsers) */
@supports (animation-timeline: scroll()) {
    .scwc-countdown-wrapper {
        animation: fadeInUp linear;
        animation-timeline: view();
        animation-range: entry 0% entry 50%;
    }
    
    @keyframes fadeInUp {
        from {
            opacity: 0;
            transform: translateY(20px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
}

/* Legacy browser fallbacks */
@supports not (color: color-mix(in srgb, red 50%, blue)) {
    :root {
        --scwc-bg-color: var(--scwc-bg-fallback);
        --scwc-text-color: var(--scwc-text-fallback);
        --scwc-highlight-color: var(--scwc-highlight-fallback);
        --scwc-border-color: rgba(0,0,0,0.1);
    }
    
    @media (prefers-color-scheme: dark) {
        :root {
            --scwc-bg-color: #2d3748;
            --scwc-text-color: #e2e8f0;
            --scwc-highlight-color: #60a5fa;
            --scwc-border-color: rgba(255,255,255,0.2);
        }
    }
}

/* Ensure consistent font inheritance across all elements */
.scwc-countdown-wrapper,
.scwc-countdown-wrapper * {
    font-family: inherit;
}

/* Override any theme styles that might interfere */
.scwc-countdown-wrapper .scwc-countdown-content * {
    margin: 0;
    padding: 0;
}

.scwc-countdown-wrapper .scwc-countdown-content .scwc-countdown-text {
    margin-bottom: 5px;
}

.scwc-countdown-wrapper .scwc-countdown-content .scwc-label {
    margin-top: 4px;
}

.scwc-countdown-wrapper .scwc-countdown-content .scwc-number {
    padding: var(--scwc-spacing-sm) 12px;
}