/**
 * Choose Your Product Block Styles
 *
 * @package AmericanEagleCore\Acf\Blocks\ChooseYourProduct
 */

.cyp-visible {
    opacity: 1;
}

.cyp-hidden {
    opacity: 0;
}

/* Choose your product block */
.cyp-categories-grid,
.cyp-child-terms-grid,
.cyp-products-grid,
.cyp-skeleton-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--wp--preset--spacing--gap-lg);
    padding-bottom: var(--wp--preset--spacing--lg);
    transition: opacity 0.5s ease;
}

@media screen and (min-width: 768px) {
    .cyp-categories-grid,
    .cyp-child-terms-grid,
    .cyp-products-grid,
    .cyp-skeleton-grid {
        grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    }
}

@media screen and (min-width: 1500px) {
    .cyp-categories-grid {
        grid-template-columns: repeat(6, 1fr);
    }
}

.cyp-category-item,
.cyp-child-term-item,
.cyp-product-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: var(--global-palette9);
    border: 1px solid var(--global-palette7);
    border-radius: 4px;
    padding: var(--wp--preset--spacing--xs);
    text-decoration: none;
    transition: all 0.3s ease;
}

.cyp-category-item {
    padding: var(--wp--preset--spacing--md) var(--wp--preset--spacing--xs) var(--wp--preset--spacing--sm);
}

.cyp-category-item:hover,
.cyp-child-term-item:hover,
.cyp-product-item:hover {
    background-color: var(--global-palette8);
    border: solid 1px var(--global-palette5);
}

.cyp-category-item img {
    max-width: 100%;
    height: 100px;
    object-fit: contain;
}

.cyp-category-item .cyp-item-image {
    width: 100%;
    height: 100px;
    border-radius: 4px;
    overflow: hidden;
    background-color: var(--global-palette9);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

.cyp-child-term-item img,
.cyp-product-item img {
    max-width: 100%;
    height: auto;
    border-radius: 4px;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    object-position: center;
}

.cyp-child-term-item .cyp-item-image,
.cyp-product-item .cyp-item-image {
    width: 100%;
    aspect-ratio: 4 / 3;
    border-radius: 4px;
    overflow: hidden;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

.cyp-item-image--placeholder {
    background-image: url(../../img/image-placeholder.svg);
}

body .choose-your-product-block h3,
body .choose-your-product-block h4 {
    margin-top: var(--wp--preset--spacing--sm);
    font-family: var(--global-body-font-family);
    font-size: var(--wp--preset--font-size--large);
    text-transform: none;
}

body .choose-your-product-block .cyp-product-item h4 {
    margin-bottom: var(--wp--preset--spacing--xxs);
}

.cyp-back-button {
    background: var(--global-palette9);
    color: var(--global-palette1);
    border: none;
    padding: 0;
    margin-bottom: var(--wp--preset--spacing--xs);
    display: flex;
    align-items: center;
    width: fit-content;
    font-family: var(--global-body-font-family);
    text-transform: none;
}

.cyp-back-button::before {
    content: "";
    display: inline-block;
    width: 10px;
    height: 16px;
    margin-right: 10px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='16' viewBox='0 0 11 16' fill='none'%3E%3Cpath d='M8 15C7.71875 15 7.46875 14.9062 7.28125 14.7188L1.28125 8.71875C0.875 8.34375 0.875 7.6875 1.28125 7.3125L7.28125 1.3125C7.65625 0.90625 8.3125 0.90625 8.6875 1.3125C9.09375 1.6875 9.09375 2.34375 8.6875 2.71875L3.40625 8L8.6875 13.3125C9.09375 13.6875 9.09375 14.3438 8.6875 14.7188C8.5 14.9062 8.25 15 8 15Z' fill='%23092947'/%3E%3C/svg%3E");
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}

.cyp-back-button:hover,
.cyp-back-button:focus {
    background-color: transparent;
    text-decoration: underline;
    color: var(--global-palette1);
}

.cyp-block-header {
    text-align: center;
    margin: 0 auto var(--wp--preset--spacing--sm);
    max-width: 900px;
}
.cyp-block-header .cyp-block-title {
    font-size: var(--wp--preset--font-size--xxxlarge);
}


/* Add extra spacing when heading is present to prevent overlap with back button. */
@media screen and (min-width: 1025px) {
   .has-cpy-heading .cyp-block-header {
        margin-bottom: 30px;
    }
    .has-cpy-heading .cyp-back-button {
        margin-top: -70px;
        margin-bottom: 50px;
    }
}

.cyp-view-all-container {
    border-top: 1px solid var(--global-palette7);
    padding-top: var(--wp--preset--spacing--md);
    text-align: center;
}
.cyp-view-all-button {
    display: inline-block;
    border: 2px solid var(--global-palette-btn-bg);
    padding: clamp(9px, calc(-3.478px + 1.014vw), 16px) clamp(18px, calc(5.522px + 1.014vw), 25px);
    font-family: Rajdhani, sans-serif;
    font-size: var(--wp--preset--font-size--medium);
    line-height: 1.2;
    border-radius: 4px;
    text-transform: uppercase;
    text-decoration: none;
}

@media screen and (max-width: 600px) {
    .cyp-view-all-button {
        width: 100%;
    }
}

.cyp-view-all-button:hover,
.cyp-view-all-button:focus {
    background: var(--global-palette-btn-bg-hover);
    border-color: var(--global-palette-btn-bg-hover);
    color: var(--global-palette-btn-hover);
}

/* Skeleton Styles */

.cyp-skeleton-item {
    background: #f8f8f8;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 10px;
    height: 250px; /* Approximate height to prevent jitter */
}

.cyp-skeleton-image {
    width: 100%;
    height: 150px;
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: skeleton-loading 1.5s infinite linear;
    border-radius: 4px;
}

.cyp-skeleton-text {
    width: 80%;
    height: 20px;
    margin: 10px auto 0;
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: skeleton-loading 1.5s infinite linear;
    border-radius: 4px;
}

@keyframes skeleton-loading {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}