/**
Author: UI Team
Version: 1.0.10
Last Update: 23 Apr 2025
File Name: cms-product-card.css
**/

/* Import CSS from CDN */
@import url('https://www.nykaa.com/media/wysiwyg/2024/cms/beauty/cms-product-helper.css');

.card-slider {
    display: flex;
    overflow: auto;
    gap: 10px;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.card-slider::-webkit-scrollbar {
    display: none;
}

/* Card base styling */
.pr-card {
    color: var(--primary-text-color);
}

/* Image container */
.pr-card .pr-image-box {
    position: relative;
    width: 166px;
    margin: 0 auto;
    padding-bottom: 30px;
}

.pr-psize {
    position: absolute;
    top: -25px;
    right: 0;
    background: url(https://images-static.naikaa.com/media/wysiwyg/2024/pack-size.svg) no-repeat;
    padding-left: 15px;
    background-position: left center;
}

.pr-card .pr-image-box .pr-image {
    width: 100%;
    max-height: 272px;
    max-height: 175px;
}

/* Product details section */
.pr-card .pr-details {
    text-align: left;
    position: relative;
    margin: 0 auto;
    width: 100%;
}

/* Rating styling */
.pr-card .pr-rating {
    letter-spacing: 0.6px;
    color: var(--secondary-text-color);
    display: inline-block;
    left: 0;
    top: -25px;
    text-transform: lowercase;
    margin-left: 0px;
    position: absolute;
}

.pr-card .rating-actual {
    font-weight: 600;
    color: var(--primary-text-color);
}

/* Brand and product info */
.pr-card .pr-brand {
    font-weight: 500;
    letter-spacing: -0.1px;
}

.pr-card .pr-name {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    white-space: inherit;
    color: var(--secondary-text-color);
    min-height: 40px;
    margin: 4px 0;
}

/* Add fixed height for shade element */
.pr-card .pr-shade {
    min-height: 14px;
    box-sizing: border-box;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pr-card .pr-size {
    color: var(--secondary-text-color);
    min-height: var(--pc-line-height-normal);
}

.pr-card .pr-mrp {
    text-decoration: line-through;
    color: var(--tertiary-text-color);
}

.pr-card .pr-discount {
    color: var(--color-discount);
}

/* Button styling */
.pr-card .pr-button {
    background: var(--primary-color);
    color: var(--color-white);
    padding: 8px 4px;
    border-radius: 8px;
    margin-top: 16px;
    display: block;
    text-align: center;
    text-decoration: none;
    border: none;
    width: 100%;
    cursor: pointer;
    box-sizing: border-box;
}

.pr-card .pr-button::after {
    content: '';
    width: 20px;
    height: 18px;
    background: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M17.4555 5.81027H13.6836V5.54572C13.7713 3.42932 12.1046 1.66565 9.99935 1.66565C7.89409 1.75383 6.31514 3.42932 6.31514 5.54572V5.81027H2.54321C2.01689 5.81027 1.66602 6.163 1.66602 6.6921V13.9231C1.66602 16.3923 3.59584 18.3323 6.05198 18.3323H13.9467C16.4029 18.3323 18.3327 16.3923 18.3327 13.9231V6.6921C18.3327 6.25119 17.9818 5.81027 17.4555 5.81027ZM7.63093 5.54572C7.63093 4.22297 8.68356 3.07658 9.99935 2.9884C11.3151 3.07658 12.3678 4.22297 12.3678 5.54572V5.81027H7.63093V5.54572ZM17.0169 14.0113C17.0169 15.6868 15.6134 17.0977 13.9467 17.0977H6.05198C4.38531 17.0977 2.98181 15.6868 2.98181 14.0113V7.13302H6.31514V8.89669C6.1397 9.07306 6.05198 9.33761 6.05198 9.51397C6.05198 10.0431 6.49058 10.3958 6.92917 10.3958C7.36777 10.3958 7.80637 9.95489 7.80637 9.51397C7.80637 9.24942 7.71865 9.07306 7.54321 8.89669V7.13302H12.2801V8.80851C12.1046 8.98487 12.0169 9.24942 12.0169 9.51397C12.0169 10.0431 12.3678 10.484 12.8941 10.484C13.4204 10.484 13.859 10.1313 13.859 9.60216C13.859 9.33761 13.7713 9.16124 13.5958 8.98487V7.22121H17.0169V14.0113Z' fill='white'/%3E%3C/svg%3E%0A");
    display: inline-block;
    margin-left: 4px;
}

/* Horizontal card layout */
.product-card.horizontal {
    display: flex;
    width: 312px;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    min-height: 200px;
}

.product-card.horizontal .pr-image-box {
    margin-right: 20px;
    width: 85px;
}

.product-card.horizontal .pr-details {
    width: 100%;
    width: 181px;
}

.product-card.horizontal .pr-rating {
    position: inherit;
    padding: 5px;
    margin-bottom: 5px;
}

.product-card.horizontal .pr-psize {
    top: 0;
    position: relative;
    left: 0;
    margin-bottom: 5px;
}

.inner-card {
    display: flex;
    flex-direction: row;
}

/* Design system overrides */
.product-card .product-button::after {
    width: 16px;
    height: 16px;
    background-size: 100%;
}

.product-card .product-info {
    padding: 0;
}

.product-card .product-button {
    border-radius: 20px;
}

.product-card {
    margin: 0;
    padding: 12px;
    border: 1px solid lightgray;
    border-radius: 14px;
    margin-top: 20px;
    width: 190px;
    box-sizing: border-box;
    flex-shrink: 0;
    background: var(--color-white);
    background: var(--color-white);
}

.pr-action-buttons{
    display: flex;
    gap: 4px;
    position: relative;
    z-index: 2;
}

.pr-action-buttons button {
    cursor: pointer;
}

.styled-cart{
    background-color: var(--primary-color);
    color: var(--color-white);
    width: calc(157px - 2rem);
    border-radius: 8px;
}

/* Disabled button state */
.styled-cart.disabled {
    background-color: var(--secondary-text-color);
    opacity: 0.7;
    cursor: not-allowed;
}

.styled-wishlist{
    border-radius: 8px;
}

/* Shimmer Effect Styles */
@keyframes shimmer {
    0% {
        background-position: -468px 0;
    }
    100% {
        background-position: 468px 0;
    }
}

.shimmer {
    background: var(--shimmer-background);
    background-image: linear-gradient(
        to right,
        var(--shimmer-background) 0%,
        var(--shimmer-animation-color) 20%,
        var(--shimmer-background) 40%,
        var(--shimmer-background) 100%
    );
    background-repeat: no-repeat;
    background-size: 800px 100%;
    animation: shimmer 1.5s infinite linear;
    border-radius: 4px;
}

.shimmer-wrapper {
    width: 100%;
    height: 100%;
}

.shimmer-image {
    width: 100%;
    height: 175px;
    margin-bottom: 10px;
}

.shimmer-rating {
    width: 80px;
    height: 16px;
    margin-bottom: 8px;
}

.shimmer-brand {
    width: 75%;
    height: 20px;
    margin-bottom: 8px;
}

.shimmer-name {
    width: 100%;
    height: 40px;
    margin-bottom: 8px;
}

.shimmer-price {
    width: 60%;
    height: 18px;
    margin-bottom: 12px;
}

.shimmer-button {
    width: 100%;
    height: 36px;
}

/* Horizontal card shimmer adjustments */
.product-card.horizontal .shimmer-image {
    width: 85px;
    height: 85px;
    margin-right: 20px;
}

.product-card.horizontal .shimmer-details {
    width: 190px;
    min-width: 190px;
}

.product-card .shimmer-details {
    width: 190px;
    min-width: 190px;
}

/* Product card loading state */
.product-card.loading .pr-details {
    display: none;
}

.product-card:not(.loading) .shimmer-wrapper {
    display: none;
}

.pr-priceDetails {
    margin-top: 4px;
    margin-bottom: 8px;
}