/* Digital Modern Clock Style */
.jbs-clock.digital-modern .jbs-time {
    font-family: 'Inter', monospace;
    font-weight: 700;
    color: var(--primary-color);
}

/* Flip Clock Style */
.jbs-clock.flip-clock .jbs-time {
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
    align-items: center;
}

.jbs-clock.flip-clock .jbs-time > span {
    background: var(--bg-tertiary);
    padding: 20px 15px;
    border-radius: 8px;
    box-shadow: var(--shadow);
    min-width: 80px;
    display: inline-block;
    text-align: center;
    font-size: inherit;
}

.jbs-clock.flip-clock .jbs-separator {
    background: transparent;
    padding: 0;
    min-width: auto;
    box-shadow: none;
}

/* Neon Clock Style */
.jbs-clock.neon .jbs-time {
    color: #00ff41;
    text-shadow: 
        0 0 10px #00ff41,
        0 0 20px #00ff41,
        0 0 30px #00ff41,
        0 0 40px #00ff41;
    font-family: 'Courier New', monospace;
    background: rgba(0, 0, 0, 0.8);
    padding: 30px 60px;
    border-radius: 16px;
    border: 2px solid #00ff41;
    display: inline-block;
}

[data-theme="light"] .jbs-clock.neon .jbs-time {
    color: #ff006e;
    text-shadow: 
        0 0 10px #ff006e,
        0 0 20px #ff006e,
        0 0 30px #ff006e,
        0 0 40px #ff006e;
    border-color: #ff006e;
    background: rgba(255, 255, 255, 0.9);
}

/* Minimal Clock Style */
.jbs-clock.minimal .jbs-time {
    font-family: 'Inter', sans-serif;
    font-weight: 300;
    color: var(--text-primary);
    letter-spacing: 8px;
}

.jbs-clock.minimal .jbs-separator {
    font-weight: 100;
    animation: none;
    opacity: 0.3;
}

/* Widget Clock */
.jbs-widget-clock {
    font-size: 28px;
    font-weight: 600;
    color: var(--primary-color);
    text-align: center;
    padding: 15px;
    background: var(--bg-secondary);
    border-radius: 8px;
    margin-top: 10px;
}

.jbs-widget-city {
    text-align: center;
    font-size: 14px;
    color: var(--text-secondary);
    font-weight: 500;
}

/* ===========================
   RESPONSIVE STYLES FOR CLOCKS
   =========================== */

/* Tablet (768px and below) */
@media (max-width: 768px) {
    /* Flip Clock - Reduce size */
    .jbs-clock.flip-clock .jbs-time > span {
        min-width: 60px;
        padding: 15px 10px;
        font-size: 32px;
    }
    
    .jbs-clock.flip-clock .jbs-time {
        gap: 8px;
    }
    
    /* Neon Clock - Reduce padding */
    .jbs-clock.neon .jbs-time {
        padding: 20px 40px;
        font-size: 40px;
    }
    
    /* Minimal Clock - Reduce letter spacing */
    .jbs-clock.minimal .jbs-time {
        letter-spacing: 4px;
    }
    
    /* Widget Clock */
    .jbs-widget-clock {
        font-size: 24px;
        padding: 12px;
    }
}

/* Mobile (480px and below) */
@media (max-width: 480px) {
    /* Flip Clock - Mobile optimized */
    .jbs-clock.flip-clock .jbs-time {
        gap: 5px;
        max-width: 100%;
    }
    
    .jbs-clock.flip-clock .jbs-time > span {
        min-width: 45px;
        padding: 10px 8px;
        font-size: 24px;
        border-radius: 6px;
    }
    
    /* Neon Clock - Mobile optimized */
    .jbs-clock.neon .jbs-time {
        padding: 15px 25px;
        font-size: 28px;
        text-shadow: 
            0 0 5px #00ff41,
            0 0 10px #00ff41,
            0 0 15px #00ff41;
    }
    
    [data-theme="light"] .jbs-clock.neon .jbs-time {
        text-shadow: 
            0 0 5px #ff006e,
            0 0 10px #ff006e,
            0 0 15px #ff006e;
    }
    
    /* Minimal Clock - Mobile optimized */
    .jbs-clock.minimal .jbs-time {
        letter-spacing: 2px;
    }
    
    /* Widget Clock */
    .jbs-widget-clock {
        font-size: 20px;
        padding: 10px;
    }
    
    .jbs-widget-city {
        font-size: 12px;
    }
}

/* Extra Small Mobile (360px and below) */
@media (max-width: 360px) {
    .jbs-clock.flip-clock .jbs-time > span {
        min-width: 38px;
        padding: 8px 6px;
        font-size: 20px;
    }
    
    .jbs-clock.flip-clock .jbs-time {
        gap: 4px;
    }
    
    .jbs-clock.neon .jbs-time {
        padding: 12px 20px;
        font-size: 24px;
    }
    
    .jbs-clock.minimal .jbs-time {
        letter-spacing: 1px;
    }
}