/* --- Podstawowe style slidera --- */
#occasional-poster-slider {
    position  : relative;
    width     : 550px;
    /* Szerokość zgodna z wymiarami obrazka */
    height    : 425px;
    /* Wysokość zgodna z wymiarami obrazka */
    overflow  : hidden;
    /* Ukrywa wszystko, co wychodzi poza ramkę */
    margin    : 0 auto;
    /* Wyśrodkowanie panelu */
}
.opp-slide {
    position    : absolute;
    top         : 0;
    left        : 0;
    width       : 100%;
    height      : 100%;
    opacity     : 0;
    /* Domyślnie wszystkie slajdy są niewidoczne */
    z-index     : 1;
}
.opp-slide.active {
    opacity     : 1;
    /* Aktywny slajd jest widoczny */
    z-index     : 2;
}
.opp-slide img {
    width       : 100%;
    height      : 100%;
    object-fit  : cover;
    /* Dopasowuje obrazek do ramki */
}
/* --- Style dla panelu administracyjnego --- */
.opp-admin-nav {
    text-align: center;
    margin-bottom: 10px;
}
.opp-form-label {
    width: 150px;
}
.opp-input-long {
    width: 200px; /* Zmniejszone, aby zrobić miejsce na licznik znaków */
}
.opp-input-short {
    width: 100px;
}
.opp-no-items {
    text-align: center;
    padding: 20px;
}
.opp-preview-container {
    text-align: center;
    padding: 10px;
}
.opp-preview-image-large {
    max-width: 250px;
    border: 1px solid #ccc;
    padding: 2px;
}
.opp-preview-image-small {
    max-width: 90px;
    max-height: 50px;
}
.opp-tooltip {
    cursor: help;
    font-weight: bold;
    color: #007bff;
    margin-left: 5px;
}
.opp-month-header {
    text-align: center;
    font-weight: bold;
}
.opp-status-dot {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
}
.opp-status-active {
    background-color: #28a745; /* Zielony */
}
.opp-status-upcoming {
    background-color: #007bff; /* Niebieski */
}
.opp-status-past {
    background-color: #dc3545; /* Czerwony */
}
.opp-recurring-label {
    font-size: 9px;
    font-weight: bold;
    color: #555;
    margin-top: 3px;
    line-height: 1;
}
.opp-char-counter {
    font-size: 11px;
    color: #666;
    vertical-align: middle;
}
/* Dodatkowe style dla tabeli listy */
.opp-list-table .tbl1 {
    padding: 5px;
}
.opp-col-preview { width: 100px; text-align: center; }
.opp-col-status  { width: 40px; text-align: center; }
.opp-col-title   { width: 300px; }
.opp-col-prio    { width: 40px; text-align: center; }
.opp-col-date    { width: 85px; text-align: center; }
.opp-col-options { width: 100px; text-align: center; }
/* --- Style dla przełącznika on/off --- */
.opp-switch {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 24px;
}
.opp-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}
.opp-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: .4s;
    border-radius: 24px;
}
.opp-slider:before {
    position: absolute;
    content: "";
    height: 16px;
    width: 16px;
    left: 4px;
    bottom: 4px;
    background-color: white;
    transition: .4s;
    border-radius: 50%;
}
input:checked + .opp-slider {
    background-color: #28a745;
}
input:checked + .opp-slider:before {
    transform: translateX(26px);
}
/* --- Definicje animacji (Keyframes) --- */
.anim-slide-from-right { animation: slideFromRight 1s forwards; }
.anim-slide-from-right { animation: slideFromRight 1s forwards; }
.anim-slide-to-left { animation: slideToLeft 1s forwards; }
@keyframes slideFromRight {
    from { transform: translateX(100%); }
    to { transform: translateX(0); }
}
@keyframes slideToLeft {
    from { transform: translateX(0); }
    to { transform: translateX(-100%); }
}
.anim-slide-from-left { animation: slideFromLeft 1s forwards; }
.anim-slide-to-right { animation: slideToRight 1s forwards; }
@keyframes slideFromLeft {
    from { transform: translateX(-100%); }
    to { transform: translateX(0); }
}
@keyframes slideToRight {
    from { transform: translateX(0); }
    to { transform: translateX(100%); }
}
.anim-zoom-in { animation: zoomIn 1s forwards; }
.anim-zoom-out { animation: zoomOut 1s forwards; }
@keyframes zoomIn {
    from { transform: scale(0.5); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}
@keyframes zoomOut {
    from { transform: scale(1); opacity: 1; }
    to { transform: scale(0.5); opacity: 0; }
}
.anim-flip-y { animation: flipInY 1s forwards; }
.anim-flip-y-out { animation: flipOutY 1s forwards; }
@keyframes flipInY {
    from {
        transform: perspective(800px) rotateY(90deg);
        opacity: 0;
    }
    to {
        transform: perspective(800px) rotateY(0);
        opacity: 1;
    }
}
@keyframes flipOutY {
    from {
        transform: perspective(800px) rotateY(0);
        opacity: 1;
    }
    to {
        transform: perspective(800px) rotateY(-90deg);
        opacity: 0;
    }
}
/* NOWE ANIMACJE */
/* Wjazd/Wyjazd w pionie */
.anim-slide-from-top { animation: slideFromTop 1s forwards; }
.anim-slide-to-bottom { animation: slideToBottom 1s forwards; }
@keyframes slideFromTop {
    from { transform: translateY(-100%); }
    to { transform: translateY(0); }
}
@keyframes slideToBottom {
    from { transform: translateY(0); }
    to { transform: translateY(100%); }
}
.anim-slide-from-bottom { animation: slideFromBottom 1s forwards; }
.anim-slide-to-top { animation: slideToTop 1s forwards; }
@keyframes slideFromBottom {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
}
@keyframes slideToTop {
    from { transform: translateY(0); }
    to { transform: translateY(-100%); }
}
/* Wjazd z rogów */
.anim-corner-tr-in { animation: cornerTrIn 1s forwards; }
.anim-corner-tr-out { animation: cornerTrOut 1s forwards; }
@keyframes cornerTrIn {
    from { transform: translate(100%, -100%); opacity: 0; }
    to { transform: translate(0, 0); opacity: 1; }
}
@keyframes cornerTrOut {
    from { transform: translate(0, 0); opacity: 1; }
    to { transform: translate(-100%, 100%); opacity: 0; }
}
.anim-corner-bl-in { animation: cornerBlIn 1s forwards; }
.anim-corner-bl-out { animation: cornerBlOut 1s forwards; }
@keyframes cornerBlIn {
    from { transform: translate(-100%, 100%); opacity: 0; }
    to { transform: translate(0, 0); opacity: 1; }
}
@keyframes cornerBlOut {
    from { transform: translate(0, 0); opacity: 1; }
    to { transform: translate(100%, -100%); opacity: 0; }
}
/* Obrót i skalowanie */
.anim-scale-rotate-in { animation: scaleRotateIn 1s forwards; }
.anim-scale-rotate-out { animation: scaleRotateOut 1s forwards; }
@keyframes scaleRotateIn {
    from { transform: scale(0) rotate(360deg); opacity: 0; }
    to { transform: scale(1) rotate(0deg); opacity: 1; }
}
@keyframes scaleRotateOut {
    from { transform: scale(1) rotate(0deg); opacity: 1; }
    to { transform: scale(0) rotate(-360deg); opacity: 0; }
}
/* Obrót 3D (drzwi) */
.anim-door-in { animation: doorIn 1s forwards; }
.anim-door-out { animation: doorOut 1s forwards; }
@keyframes doorIn {
    from { transform: perspective(1200px) rotateY(90deg); transform-origin: left; opacity: 0; }
    to { transform: perspective(1200px) rotateY(0deg); transform-origin: left; opacity: 1; }
}
@keyframes doorOut {
    from { transform: perspective(1200px) rotateY(0deg); transform-origin: right; opacity: 1; }
    to { transform: perspective(1200px) rotateY(-90deg); transform-origin: right; opacity: 0; }
}
/* Obrót 3D (kostka) */
.anim-cube-in { animation: cubeIn 1s forwards; }
.anim-cube-out { animation: cubeOut 1s forwards; }
@keyframes cubeIn {
    from {
        transform: perspective(1200px) translateX(100%) rotateY(90deg);
        opacity: 0.5;
    }
    to {
        transform: perspective(1200px) translateX(0) rotateY(0deg);
        opacity: 1;
    }
}
@keyframes cubeOut {
    from {
        transform: perspective(1200px) translateX(0) rotateY(0deg);
        opacity: 1;
    }
    to {
        transform: perspective(1200px) translateX(-100%) rotateY(-90deg);
        opacity: 0.5;
    }
}
/* --- Style dla animacji złożonych (paski, kwadraty) --- */
.opp-anim-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 3;
}
.opp-slice, .opp-box {
    position: absolute;
    opacity: 0;
    background-size: 550px 425px; /* Musi być zgodne z rozmiarem slidera */
}
/* Animacja wyjścia dla slajdu pod spodem */
.anim-fade-out-fast { animation: fadeOut 0.5s forwards; }
/* --- Animacje pasków (Slice) --- */
.opp-slice {
    height: 100%;
}
.slice-down-right { animation: sliceDown 1s forwards; }
.slice-up-left { animation: sliceUp 1s forwards; }
.slice-up-down:nth-child(2n+1) { animation: sliceUp 1s forwards; }
.slice-up-down:nth-child(2n) { animation: sliceDown 1s forwards; }
@keyframes sliceDown {
    from { transform: translateY(-100%); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}
@keyframes sliceUp {
    from { transform: translateY(100%); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}
/* --- Animacje kwadratów (Box) --- */
.opp-box {
    overflow: hidden;
}
.box-random {
    animation: boxRandom 1s forwards;
}
.box-rain:nth-child(8n+1) { animation-delay: 0.1s !important; }
.box-rain:nth-child(8n+2) { animation-delay: 0.2s !important; }
.box-rain:nth-child(8n+3) { animation-delay: 0.3s !important; }
.box-rain:nth-child(8n+4) { animation-delay: 0.4s !important; }
.box-rain:nth-child(8n+5) { animation-delay: 0.5s !important; }
.box-rain:nth-child(8n+6) { animation-delay: 0.6s !important; }
.box-rain:nth-child(8n+7) { animation-delay: 0.7s !important; }
.box-rain:nth-child(8n+8) { animation-delay: 0.8s !important; }
.box-rain {
    animation: boxRandom 1s forwards;
}
@keyframes boxRandom {
    from {
        transform: scale(0) rotate(360deg);
        opacity: 0;
    }
    to {
        transform: scale(1) rotate(0deg);
        opacity: 1;
    }
}
/* --- Styl dla kontenera slidera --- */
.obwodka {
    display: flex;
    flex-direction: column;
    align-items: center;
}
/* --- Styl dla kontrolki pauzy --- */
.opp-pause-control {
    width: 550px; /* Szerokość taka sama jak slider */
    height: 30px;
    background-color: rgba(0, 0, 0, 0.4);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.5);
    font-size: 14px;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
    transition: background-color 0.3s, color 0.3s;
}
.opp-pause-control:hover {
    background-color: rgba(0, 0, 0, 0.7);
    color: rgba(255, 255, 255, 1);
}