/* Podstawowa stylizacja wyszukiwarki */
.fav-popup {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.8);
    z-index: 9999;
    display: none; /* Ustaw na 'flex' do celów testowych */
    justify-content: center;
    align-items: center;
    padding: 2vw;
}

.fav-popup-body {
    background-color: #fff;
    width: 100%;
    height: 100%;
    padding: 20px;
    display: flex;
    flex-direction: column;
    position: relative;
}

.fp-heading {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
}

.fav-popup-desc {
    margin-bottom: 12px;
    display: block;
}

.fp-heading h3 {
    margin: 0;
}

.fp-search-bar {
    position: relative;
    margin-bottom: 12px;
}

.fp-search-bar input {
    width: 100%;
    height: 48px;
    padding: 0 12px 0 35px;
    border: 1px solid #282828;
    border-radius: 50px;
    background-color: #f6f6f6;
    font-size: 16px;
    color: #282828;
    font-family: 'Kanit', sans-serif;
    font-weight: 300;
}

.fp-search-bar input:focus-visible {
    border: 1px solid #dc3545;
    outline: 1px solid #dc3545;
}

.fp-search-bar::before {
    content: '';
    position: absolute;
    left: 12px;
    top: 50%;
    background-image: url("data:image/svg+xml,%3Csvg width='17' height='17' viewBox='0 0 17 17' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M15.3784 14.3726L12.7505 11.7659C13.7706 10.494 14.2645 8.87965 14.1309 7.25474C13.9972 5.62982 13.2461 4.11787 12.0319 3.02977C10.8177 1.94167 9.23276 1.36013 7.60297 1.40473C5.97318 1.44933 4.42241 2.11667 3.26954 3.26954C2.11667 4.42241 1.44933 5.97318 1.40473 7.60297C1.36013 9.23276 1.94167 10.8177 3.02977 12.0319C4.11787 13.2461 5.62982 13.9972 7.25474 14.1309C8.87965 14.2645 10.494 13.7706 11.7659 12.7505L14.3726 15.3571C14.4384 15.4235 14.5168 15.4762 14.6031 15.5122C14.6894 15.5482 14.782 15.5667 14.8755 15.5667C14.969 15.5667 15.0616 15.5482 15.1479 15.5122C15.2342 15.4762 15.3125 15.4235 15.3784 15.3571C15.5061 15.2251 15.5774 15.0486 15.5774 14.8649C15.5774 14.6812 15.5061 14.5046 15.3784 14.3726ZM7.79215 12.7505C6.81148 12.7505 5.85284 12.4597 5.03745 11.9149C4.22205 11.37 3.58653 10.5956 3.21125 9.68962C2.83596 8.7836 2.73777 7.78665 2.92909 6.82483C3.12041 5.863 3.59264 4.97951 4.28608 4.28608C4.97951 3.59264 5.863 3.12041 6.82483 2.92909C7.78665 2.73777 8.7836 2.83596 9.68962 3.21125C10.5956 3.58653 11.37 4.22205 11.9149 5.03745C12.4597 5.85284 12.7505 6.81148 12.7505 7.79215C12.7505 9.10718 12.2281 10.3684 11.2982 11.2982C10.3684 12.2281 9.10718 12.7505 7.79215 12.7505Z' fill='%23282828'/%3E%3C/svg%3E%0A");
    transform: translateY(-50%);
    width: 17px;
    height: 17px;
    background-position: center;
    background-repeat: no-repeat;
}

.fp-result-item-remove {
    background-color: #dc3545;
    transition: all .3s ease-in-out;
}

.fp-result-item-remove:hover {
    opacity: 0.8;
}

.fav-popup-open-icon-btn {
    position: relative;
}

.svg-fav-popup-icon-count {
    position: absolute;
    top: -20px;
    left: 50%;
    transform: translateX(-50%);
    font-weight: 400;
}

.fav-add-page-icon-btn {
    position: fixed;
    right: 0;
    top: 35vh;
    z-index: 9999;
    background-color: var(--wp--preset--color--base);
    width: 42px;
    height: 42px;
    padding: 7px;
    transition: all .3s ease-in-out;
}

.fav-add-page-icon-btn:hover {
    background-color: var(--wp--preset--color--red);
    cursor: pointer;
}

.fp-info-warning {
    text-align: center;
    font-size: 16px;
    color: #808080;
    margin: 20px 0;
}

@media (max-width: 991px) {
    .fav-popup-body {
        display: block;
        overflow-y: auto;
    }

    .fp-result-item {
        flex-direction: column;
    }

    .fp-result-item * {
        width: 100%;
    }

    .fp-result-item .wp-block-buttons {
        margin-top: 12px;
    }
}

.fp-results-count {
    font-weight: 300;
}

.fp-results-list {
    list-style: none;
    padding: 0 12px 0 0;
    margin: 0;
}

.fp-result-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid #ddd;
}

.fp-result-item h6 {
    margin: 0;
}

.fp-result-title {
    color: #000;
    text-decoration: none;
}

.fp-result-title:hover {
    text-decoration: underline;
}

.fav-info-warning {
    display: flex;
    flex-direction: column;
    text-align: center;
    max-width: 200px;
    color: #808080;
    font-weight: 500;
    margin: 4vw auto 0 auto;
    align-items: center;
    gap: 24px;
}

.fav-popup-open-icon-btn:hover {
    cursor: pointer;
}

.fav-popup-open-icon-btn svg path {
    transition: all .3s ease-in-out;
}

.fav-popup-open-icon-btn:hover svg path {
    fill: #dc3545;
}

/* Kontener na alerty */
.alert-container {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 9998;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Stylizacja alertów */
.alert {
    position: relative;
    padding: 10px 20px;
    border-radius: 5px;
    font-size: 14px;
    font-family: Arial, sans-serif;
    color: #fff;
    background-color: #28a745; /* Zielony dla success */
    opacity: 1;
    animation: fadeIn 0.5s ease-in-out;
    margin-bottom: 10px;
}

.alert-success {
    background-color: #28a745; /* Zielony */
}

.alert-warning {
    background-color: #ffc107; /* Żółty */
    color: #212529;
}

.alert-info {
    background-color: #17a2b8; /* Niebieski */
}

.alert-close:hover {
	cursor: pointer;
}

/* Animacje */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeOut {
    from {
        opacity: 1;
        transform: translateY(0);
    }
    to {
        opacity: 0;
        transform: translateY(-10px);
    }
}

/* Dodaj animację fade-out tylko po czasie określonym w JS */
.alert.fade-out {
    animation: fadeOut 0.5s ease-in-out;
    opacity: 0;
}