/**
 * UT Compliance Expiry Days Widget Styles
 * 
 * Base styles only - detailed styling controlled via Elementor
 */

.ut-expiry-widget {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    display: block;
    position: relative;
    background: transparent !important;
    background-color: transparent !important;
}

/* Ensure widget wrapper is always transparent */
.ut-expiry-widget,
.ut-expiry-widget.ut-expiry-green,
.ut-expiry-widget.ut-expiry-amber,
.ut-expiry-widget.ut-expiry-red,
.ut-expiry-widget.expired {
    background: transparent !important;
    background-color: transparent !important;
}

/* Status text container - always transparent */
.ut-expiry-widget.ut-status-text-container {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Content styling - basic structure only */
.ut-expiry-widget .ut-expiry-date,
.ut-expiry-widget .ut-expiry-days,
.ut-expiry-widget .ut-expiry-custom {
    display: block;
}

/* Default state classes - Elementor controls will override these */
.ut-expiry-widget.ut-expiry-green {
    /* Green state - controlled by Elementor */
    background: transparent !important;
}

.ut-expiry-widget.ut-expiry-amber {
    /* Amber state - controlled by Elementor */
    background: transparent !important;
}

.ut-expiry-widget.ut-expiry-red {
    /* Red state - controlled by Elementor */
    background: transparent !important;
}

/* Expired state */
.ut-expiry-widget.expired {
    font-weight: 600;
}

/* Expired icon - controlled by Elementor */
.ut-expiry-widget.expired::before {
    margin-right: 5px;
}

/* Status Badges */
.ut-status-badge {
    display: inline-block;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 10px;
    transition: all 0.3s ease;
    text-align: center;
}

.ut-status-badge.ut-status-open {
    background-color: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

.ut-status-badge.ut-status-closing-soon {
    background-color: #fff3cd;
    color: #856404;
    border: 1px solid #ffeaa7;
}

.ut-status-badge.ut-status-expired {
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

/* Badge positioning */
.ut-expiry-widget .ut-status-badge {
    display: block;
    max-width: fit-content;
}

.ut-expiry-widget .ut-status-badge:only-child {
    margin-bottom: 0;
}

/* Inline badge styling */
.ut-expiry-widget .ut-status-badge + * {
    display: inline-block;
    vertical-align: middle;
    margin-left: 8px;
}

/* Status Text Only */
.ut-status-text {
    display: inline-block;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 6px 12px;
    border-radius: 20px;
    border: 1px solid;
    transition: all 0.3s ease;
    width: fit-content;
    max-width: fit-content;
    box-sizing: border-box;
}

.ut-status-text.ut-status-open {
    background-color: #d4edda;
    color: #155724;
    border-color: #c3e6cb;
}

.ut-status-text.ut-status-closing-soon {
    background-color: #fff3cd !important;
    color: #856404 !important;
    border-color: #f0c14b !important;
    /* Ensure no green styling */
    border: 1px solid #f0c14b !important;
}

.ut-status-text.ut-status-expired {
    background-color: #f8d7da;
    color: #721c24;
    border-color: #f5c6cb;
}

/* Responsive Design */
@media (max-width: 768px) {
    .ut-status-badge {
        font-size: 11px;
        padding: 4px 8px;
        margin-bottom: 8px;
    }
    
    .ut-status-text {
        font-size: 14px;
    }
}

/* Print styles */
@media print {
    .ut-expiry-widget {
        border: 1px solid #000 !important;
        background: #fff !important;
        color: #000 !important;
        box-shadow: none !important;
        transform: none !important;
    }
    
    .ut-expiry-widget.expired::before {
        content: "⚠️ " !important;
    }
    
    .ut-status-badge {
        background: #fff !important;
        color: #000 !important;
        border: 1px solid #000 !important;
    }
    
    .ut-status-text {
        color: #000 !important;
    }
}