/* Shimmer/Skeleton Loaders dla PsiaPsi Shortcodes */

/* Base shimmer animation */
@keyframes psiapsi-shimmer {
    0% {
        background-position: -1000px 0;
    }
    100% {
        background-position: 1000px 0;
    }
}

.psiapsi-shimmer {
    background: linear-gradient(
        90deg,
        #f0f0f0 0%,
        #f0f0f0 40%,
        #e0e0e0 50%,
        #f0f0f0 60%,
        #f0f0f0 100%
    );
    background-size: 1000px 100%;
    animation: psiapsi-shimmer 1.5s infinite linear;
    border-radius: 4px;
}

/* Dog Name Shimmer */
.psiapsi-shimmer-dog-name {
    display: inline-block;
    width: 120px;
    height: 1.2em;
    margin: 0.2em 0;
    vertical-align: middle;
}

/* Ingredient Slider Shimmer */
.psiapsi-shimmer-ingredient-slider {
    padding: 0;
    box-sizing: border-box;
}

.psiapsi-shimmer-slider-container {
    position: relative;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 10px;
}

.psiapsi-shimmer-slider-wrapper {
    display: flex;
    gap: 15px;
    overflow: hidden;
}

.psiapsi-shimmer-slide {
    min-width: 0;
}

/* Domyślne wartości dla base state - przed media queries */
.psiapsi-shimmer-slider-wrapper[data-columns="3"] .psiapsi-shimmer-slide {
    flex: 0 0 calc(33.333% - 10px);
}

.psiapsi-shimmer-slider-wrapper[data-columns="2"] .psiapsi-shimmer-slide {
    flex: 0 0 calc(50% - 7.5px);
}

.psiapsi-shimmer-slider-wrapper[data-columns="1"] .psiapsi-shimmer-slide {
    flex: 0 0 100%;
}

.psiapsi-shimmer-slide-inner {
    border-radius: 20px;
    padding: 15px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
    display: flex;
    flex-direction: column;
    gap: 10px;
    background: #fff;
}

.psiapsi-shimmer-slide-header {
    display: flex;
    align-items: center;
    gap: 15px;
}

.psiapsi-shimmer-slide-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
}

.psiapsi-shimmer-slide-title {
    flex: 1;
    height: 16px;
}

.psiapsi-shimmer-slide-content {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.psiapsi-shimmer-slide-content-line {
    height: 12px;
    border-radius: 2px;
}

.psiapsi-shimmer-slide-content-line:first-child {
    width: 80%;
}

.psiapsi-shimmer-slide-content-line:nth-child(2) {
    width: 100%;
}

.psiapsi-shimmer-slide-content-line:nth-child(3) {
    width: 60%;
}

/* Base state - domyślnie 2 kolumny dla większych ekranów */
.psiapsi-shimmer-slider-wrapper[data-columns="3"] .psiapsi-shimmer-slide {
    flex: 0 0 calc(33.333% - 10px);
}

.psiapsi-shimmer-slider-wrapper[data-columns="2"] .psiapsi-shimmer-slide {
    flex: 0 0 calc(50% - 7.5px);
}

.psiapsi-shimmer-slider-wrapper[data-columns="1"] .psiapsi-shimmer-slide {
    flex: 0 0 100%;
}

/* Desktop - 3 columns */
@media (min-width: 992px) {
    .psiapsi-shimmer-slider-wrapper[data-columns="3"] .psiapsi-shimmer-slide {
        flex: 0 0 calc(33.333% - 10px);
    }
    
    .psiapsi-shimmer-slider-wrapper[data-columns="2"] .psiapsi-shimmer-slide {
        flex: 0 0 calc(50% - 7.5px);
    }
    
    .psiapsi-shimmer-slider-wrapper[data-columns="1"] .psiapsi-shimmer-slide {
        flex: 0 0 100%;
    }
}

/* Tablet - 2 columns */
@media (min-width: 768px) and (max-width: 991px) {
    .psiapsi-shimmer-slider-wrapper[data-columns="1"] .psiapsi-shimmer-slide {
        flex: 0 0 100%;
    }
    
    .psiapsi-shimmer-slider-wrapper[data-columns="2"],
    .psiapsi-shimmer-slider-wrapper[data-columns="3"] {
        gap: 20px;
    }
    
    .psiapsi-shimmer-slider-wrapper[data-columns="2"] .psiapsi-shimmer-slide,
    .psiapsi-shimmer-slider-wrapper[data-columns="3"] .psiapsi-shimmer-slide {
        flex: 0 0 calc(50% - 10px);
    }
}

/* Mobile - 1 column (zawsze, niezależnie od data-columns) */
@media (max-width: 767px) {
    .psiapsi-shimmer-slider-wrapper {
        padding: 0 10px;
        gap: 15px;
    }
    
    .psiapsi-shimmer-slider-wrapper[data-columns="1"] .psiapsi-shimmer-slide,
    .psiapsi-shimmer-slider-wrapper[data-columns="2"] .psiapsi-shimmer-slide,
    .psiapsi-shimmer-slider-wrapper[data-columns="3"] .psiapsi-shimmer-slide {
        flex: 0 0 90% !important;
        max-width: 340px;
    }
}

/* Result Side Panel Shimmer */
.psiapsi-shimmer-side-panel {
    background: #fff;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.psiapsi-shimmer-side-panel-header {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.psiapsi-shimmer-side-panel-title {
    height: 24px;
    width: 60%;
    border-radius: 4px;
}

.psiapsi-shimmer-side-panel-subtitle {
    height: 16px;
    width: 40%;
    border-radius: 4px;
}

.psiapsi-shimmer-side-panel-products {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.psiapsi-shimmer-side-panel-product {
    display: flex;
    gap: 12px;
    padding: 12px;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
}

.psiapsi-shimmer-side-panel-product-image {
    width: 60px;
    height: 60px;
    border-radius: 8px;
    flex-shrink: 0;
}

.psiapsi-shimmer-side-panel-product-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.psiapsi-shimmer-side-panel-product-name {
    height: 16px;
    width: 70%;
    border-radius: 2px;
}

.psiapsi-shimmer-side-panel-product-price {
    height: 20px;
    width: 50%;
    border-radius: 2px;
}

.psiapsi-shimmer-side-panel-button {
    width: 100%;
    height: 48px;
    border-radius: 8px;
    margin-top: 10px;
    border: 1px solid #e0e0e0;
}

.psiapsi-shimmer-side-panel-cta-button {
    width: 100%;
    height: 52px;
    border-radius: 8px;
    margin-top: 5px;
    border: 1px solid #e0e0e0;
}

/* Fade out animation when content loads */
.psiapsi-shimmer-fade-out {
    opacity: 0;
    transition: opacity 0.3s ease-out;
}

/* Kokpit Shortcodes Shimmer Loaders */

/* User Name Shimmer */
.psiapsi-shimmer-kokpit-user-name {
    display: inline-block;
    width: 150px;
    height: 1.5em;
    margin: 0.2em 0;
    vertical-align: middle;
}

/* Psicoin Points Shimmer */
.psiapsi-shimmer-kokpit-psicoin-points {
    display: inline-block;
    width: 120px;
    height: 1.5em;
    margin: 0.2em 0;
    vertical-align: middle;
}

/* Affiliate Coupon Shimmer - taki sam jak psicoin points */
.psiapsi-shimmer-kokpit-affiliate-coupon {
    display: inline-block;
    width: 120px;
    height: 1.5em;
    margin: 0.2em 0;
    vertical-align: middle;
}

/* Pets List Shimmer - kółko po lewej i 2 paski w linii */
.psiapsi-shimmer-kokpit-pets-list {
    display: block;
    padding: 15px 20px;
    border-radius: 12px;
}