#pogoda_carousel {
    visibility   : hidden;
    position     : relative;
    width        : 160px;
    height       : 160px;
    margin-top   : 0px;
    margin-bottom: 5px;
    margin-left  : 5px;
    margin-right : -5px;
    perspective  : 1200px;
    /* Ważne dla efektu 3D */
}

#pogoda_slides {
    position       : relative;
    width          : 100%;
    height         : 100%;
    transform-style: preserve-3d;
    /* Ważne dla efektu 3D */
}

#pogoda_slides ul {
    list-style: none;
    margin    : 0;
    padding   : 0;
    width     : 100%;
    height    : 100%;
}

#pogoda_slides .slide {
    position            : absolute;
    top                 : 0;
    left                : 0;
    width               : 100%;
    height              : 100%;
    display             : flex;
    justify-content     : center;
    align-items         : center;
    /* Stan początkowy  : niewidoczny i obrócony */
    opacity             : 0;
    transform           : rotateY(-90deg);
    transition          : transform 1.5s ease-in-out, opacity 1s ease-in-out;
}

#pogoda_slides .slide.active {
    /* Stan aktywny: widoczny i wyprostowany */
    opacity  : 1;
    transform: rotateY(0deg);
    z-index  : 2;
}

.weather-wrapper {
    width   : 160px;
    height  : 160px;
    overflow: hidden;
}

/* nowy element: własna karta pogodowa */
.custom-weather {
    margin-top     : 20px;
    width          : 160px;
    height         : 160px;
    display        : flex;
    flex-direction : column;
    align-items    : center;
    justify-content: center;
    color          : #fff;
    background     : rgba(0, 0, 0, 0.3);
    font-family    : Tinos, sans-serif;
    text-align     : center;
}

.custom-weather .weather-icon {
    width : 80px;
    height: 80px;
}

.custom-weather .temp {
    font-size  : 24px;
    font-weight: bold;
    margin-top : 5px;
}

.custom-weather .city {
    font-size : 14px;
    margin-top: 3px;
}

.city.missing {
    color      : #f88;
    font-size  : 12px;
    line-height: 1.2;
}

.weather-widget-link {
    display        : block;
    position       : relative;
    height         : 160px;
    padding        : 0px;
    margin         : 0px;
    text-decoration: none;
    width          : 160px;
    pointer-events : none;
}

/* --- Style przeniesione z pogoda_panel.php (uzupełnienie) --- */

/* --- Lista rozwijana (select) --- */
.pogoda-select-container {
    margin-bottom: 0px;
    position     : relative;
    z-index      : 100;
    /* Zapewnia, że lista jest nad karuzelą */
}

.pogoda-city-select {
    width : 100%;
    cursor: pointer;
}

/* --- Dodatkowe style karty pogody --- */
.custom-weather .desc {
    font-size : 11px;
    margin-top: 2px;
}

.pogoda-api-error-msg {
    font-size: 10px;
    color    : #f88;
}

/* --- Formularz propozycji --- */
.pogoda-suggestion-form-container {
    margin-top : 10px;
    text-align : center;
    border-top : 1px solid #ddd;
    padding-top: 5px;
}

.pogoda-suggestion-input {
    width    : 100px;
    font-size: 10px;
}

.pogoda-suggestion-submit {
    font-size: 10px;
}

/* --- Style dla okienka popup (SweetAlert2) --- */
.swal2-weather-icon {
    width : 80px;
    height: 80px;
}

.swal2-weather-temp {
    font-size  : 32px;
    font-weight: bold;
    margin     : 10px 0;
}

.swal2-weather-desc {
    font-size: 16px;
}

/* --- Admin Info --- */
.pogoda-admin-info {
    display         : flex;
    justify-content : space-between;
    align-items     : center;
    font-size       : 12px;
    color           : #f88;
    margin-bottom   : 5px;
    padding         : 5px;
    border          : 1px solid #444;
    border-radius   : 4px;
    background-color: #2a2a2a;
}

.pogoda-admin-eye-link {
    font-size      : 20px;
    text-decoration: none;
    color          : #87ceeb;
    /* Kolor niebieski dla kontrastu */
    margin-left    : 10px;
    line-height    : 1;
    display        : flex;
    align-items    : center;
}