/* Random Facts — front.css */

/* ── Основний блок ── */
.rf-block {
    background:       linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    background-color: #764ba2 !important;
    border:           none !important;
    border-radius:    10px !important;
    padding:          12px 16px !important;
    color:            #fff !important;
    box-shadow:       0 4px 12px rgba(0, 0, 0, .15) !important;
    font-family:      -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
    position:         relative !important;
    overflow:         hidden !important;
    line-height:      1.6 !important;
}

/* ── Мітка (label) ── */
.rf-block .rf-label {
    display:        block !important;
    font-size:      11px !important;
    font-weight:    700 !important;
    letter-spacing: .05em !important;
    text-transform: uppercase !important;
    color:          rgba(255, 255, 255, .75) !important;
    margin-bottom:  8px !important;
    padding-bottom: 8px !important;
    border-bottom:  1px solid rgba(255, 255, 255, .2) !important;
    background:     none !important;
}

/* ── Текст факту ── */
.rf-block .rf-text {
    display:    block !important;
    font-size:  .9rem !important;
    color:      rgba(255, 255, 255, .95) !important;
    margin:     0 !important;
    padding:    0 !important;
    position:   relative !important;
    z-index:    1 !important;
    background: none !important;
    font-style: normal !important;
}

/* ── Стан завантаження ── */
.rf-block .rf-loading {
    opacity:    .5 !important;
    font-style: italic !important;
}

/* ── Анімація під час авто-ротації ── */
.rf-fade {
    opacity:    0 !important;
    transition: opacity .35s ease !important;
}

/* ── Плавна поява після завантаження ── */
@keyframes rf-fadein {
    from { opacity: 0; transform: translateY(5px); }
    to   { opacity: 1; transform: translateY(0);   }
}

.rf-block.rf-loaded {
    animation: rf-fadein .4s ease;
}