/* Product Card Styles - Extracted from Product.cshtml */

/* Product Card - Base styles */
.product-card {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 8px 8px 16px;
    gap: 12.6px;
    width: 251.1px;
    height: 355.5px;
    background: #F8F3F9;
    border-radius: 16.2px;
    flex: none;
    order: 0;
    flex-grow: 0;
    cursor: pointer;
    transition: all 0.3s ease;
}

.product-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 25px rgba(120, 31, 149, 0.15);
}

/* Product Image */
.product-card-img {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-end;
    padding: 32.4px;
    gap: 18.9px;
    isolation: isolate;
    width: 238.5px;
    height: 229.5px;
    background-size: cover;
    background-position: center;
    border-radius: 16.2px;
    flex: none;
    order: 0;
    align-self: stretch;
    flex-grow: 0;
    position: relative;
}

.product-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 16.2px;
}

/* Product Category Container */
.product-category-container {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 1.8px 6.3px;
    gap: 8.1px;
    position: absolute;
    min-width: 64.8px;
    max-width: 113.4px;
    height: 19.8px;
    left: 16.2px;
    top: 16.2px;
    background: #FCE6F4;
    border-radius: 90px;
    flex: none;
    order: 0;
    flex-grow: 0;
    z-index: 0;
}

/* Product Category */
.product-category {
    font-family: 'Lexend', sans-serif;
    font-style: normal;
    font-weight: 500;
    font-size: 9.9px;
    line-height: 12.6px;
    text-transform: uppercase;
    color: #DE008C;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
}

/* Promotional Badges */
.product-discount-badge,
.product-new-badge,
.product-custom-badge {
    position: absolute;
    top: 16.2px;
    right: 16.2px;
    padding: 1.8px 6.3px;
    border-radius: 90px;
    font-family: 'Lexend', sans-serif;
    font-style: normal;
    font-weight: 500;
    font-size: 9.9px;
    line-height: 12.6px;
    text-transform: uppercase;
    color: white;
    z-index: 2;
    min-width: 64.8px;
    max-width: 113.4px;
    height: 19.8px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.product-discount-badge {
    background-color: #e74c3c;
    box-shadow: 0 2px 4px rgba(231, 76, 60, 0.3);
}

.product-new-badge {
    background-color: #2ecc71;
    box-shadow: 0 2px 4px rgba(46, 204, 113, 0.3);
}

.product-custom-badge {
    background-color: #781F95;
    box-shadow: 0 2px 4px rgba(120, 31, 149, 0.3);
}

/* Position badges when multiple exist */
.product-card-img .product-discount-badge + .product-new-badge,
.product-card-img .product-new-badge + .product-discount-badge,
.product-card-img .product-discount-badge + .product-custom-badge,
.product-card-img .product-custom-badge + .product-discount-badge,
.product-card-img .product-new-badge + .product-custom-badge,
.product-card-img .product-custom-badge + .product-new-badge {
    top: 45px;
}

/* Product Info Container */
.product-info-container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px 0px 0px 6.3px;
    gap: 3.6px;
    width: 238.5px;
    height: 52.2px;
    flex: none;
    order: 1;
    align-self: stretch;
    flex-grow: 0;
}

/* Product Name */
.product-name {
    width: 231.3px;
    max-height: 28.8px;
    font-family: 'Lexend', sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 1;
    color: #25242A;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
    flex: 1;
    order: 0;
    align-self: stretch;
    margin: 0;
    padding: 0;
}

/* Product Price */
.product-price {
    width: 231.3px;
    height: 19.8px;
    font-family: 'Noto Sans', sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 12.6px;
    line-height: 19.8px;
    color: #25242A;
    flex: none;
    order: 1;
    align-self: stretch;
    flex-grow: 0;
}

/* Cart Button Container */
.cart-button-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    height: 36px;
    flex: none;
    order: 2;
    flex-grow: 0;
    position: relative;
    overflow: hidden;
}

/* Initial Button (visible by default) */
.initial-button {
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 8.1px 12.6px;
    gap: 18.9px;
    width: 225px;
    height: 36px;
    border: 1px solid #781F95;
    border-radius: 8.1px;
    background: transparent;
    cursor: pointer;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    transition: transform 0.3s ease;
    z-index: 2;
    text-decoration: none;
}

.initial-button.hidden {
    transform: translateX(-50%) translateY(100%);
}

.initial-button:hover {
    background: #781F95;
    box-shadow: 0 4px 12px rgba(120, 31, 149, 0.3);
}

.initial-button:hover .add-to-cart-text {
    color: #FFFFFF;
}

/* Add to Cart Text */
.add-to-cart-text {
    width: 134.1px;
    height: 19.8px;
    font-family: 'Noto Sans', sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 12.6px;
    line-height: 19.8px;
    text-align: center;
    text-transform: uppercase;
    color: #781F95;
    flex: none;
    order: 0;
    flex-grow: 0;
}

/* Quantity Controls Area (hidden initially) */
.quantity-controls-area {
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 4.5px 9.9px;
    width: 225px;
    height: 36px;
    border: 1px solid #781F95;
    border-radius: 8.1px;
    background: #F8F3F9;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%) translateY(-100%);
    transition: transform 0.3s ease;
    z-index: 1;
}

.quantity-controls-area.visible {
    transform: translateX(-50%) translateY(0%);
}

/* Registration Link Styles */
.registration-link {
    text-decoration: none;
}

.quantity-btn,
.js-min-plus-btn {
    width: 26.1px;
    height: 26.1px;
    border-radius: 4.5px;
    background: transparent;
    color: #000;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 600;
    transition: all 0.2s ease;
    border: none;
}

.quantity-btn:hover,
.js-min-plus-btn:hover {
    background: #781F95;
    color: #FFFFFF;
}

.quantity-input {
    flex: 1;
    text-align: center;
    font-family: 'Noto Sans', sans-serif;
    font-size: 10.8px;
    color: #25242A;
    font-weight: 600;
    background: transparent;
    border: none;
    outline: none;
    padding: 0;
    margin: 0;
    width: 100%;
    -moz-appearance: textfield;
}

.quantity-input::-webkit-outer-spin-button,
.quantity-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.remove-from-cart-btn {
    width: 26.1px;
    height: 26.1px;
    border-radius: 4.5px;
    background: #dc3545;
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    transition: all 0.2s ease;
    border: none;
    margin-left: 4px;
}

.remove-from-cart-btn:hover {
    background: #c82333;
}

/* Responsive styles */
@media (max-width: 768px) {
    .product-card {
        width: calc(50% - 8px);
        height: auto;
        min-height: 320px;
    }
    
    .product-card-img {
        width: 100%;
        padding: 16px;
    }
    
    .product-info-container,
    .product-name,
    .product-price {
        width: 100%;
    }
    
    .initial-button,
    .quantity-controls-area {
        width: calc(100% - 16px);
        max-width: 200px;
    }
}

@media (max-width: 480px) {
    .product-card {
        width: 100%;
        margin: 0 auto;
        max-width: 280px;
    }
}

/* ==============================================
   NEW CART FUNCTIONALITY STYLES
   ============================================== */

/* Add to Cart Button */
.add-to-cart-button {
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 8.1px 12.6px;
    gap: 18.9px;
    width: 225px;
    height: 36px;
    border: 1px solid #781F95;
    border-radius: 8.1px;
    background: transparent;
    cursor: pointer;
    position: relative;
    transition: all 0.3s ease;
    font-family: 'Noto Sans', sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 12.6px;
    line-height: 19.8px;
    text-align: center;
    text-transform: uppercase;
    color: #781F95;
    text-decoration: none;
}

.add-to-cart-button:hover {
    background: #781F95;
    color: #FFFFFF;
    box-shadow: 0 4px 12px rgba(120, 31, 149, 0.3);
}

/* Quantity Container */
.quantity-container {
    display: none;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    width: 225px;
    height: 36px;
}

/* Quantity Input Group */
.quantity-input-group {
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 4.5px 9.9px;
    width: 100%;
    height: 36px;
    border: 1px solid #781F95;
    border-radius: 8.1px;
    background: #F8F3F9;
    gap: 8px;
}

/* Quantity Buttons */
.quantity-btn {
    width: 26.1px;
    height: 26.1px;
    border-radius: 4.5px;
    background: transparent;
    color: #781F95;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 600;
    transition: all 0.2s ease;
    border: none;
    position: relative;
}

.quantity-btn:hover {
    background: #781F95;
    color: #FFFFFF;
}

.quantity-btn i {
    font-size: 12px;
}

/* Quantity Input */
.quantity-input {
    flex: 1;
    text-align: center;
    font-family: 'Noto Sans', sans-serif;
    font-size: 12px;
    color: #25242A;
    font-weight: 600;
    background: transparent;
    border: none;
    outline: none;
    padding: 0;
    margin: 0 8px;
    width: 40px;
    max-width: 60px;
    -moz-appearance: textfield;
}

.quantity-input::-webkit-outer-spin-button,
.quantity-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Trash Icon Styles */
.quantity-trash {
    color: #dc3545;
    font-size: 12px;
}

.quantity-btn:hover .quantity-trash {
    color: #FFFFFF;
}

.quantity-minus {
    color: #781F95;
    font-size: 12px;
}

.quantity-btn:hover .quantity-minus {
    color: #FFFFFF;
}

/* Sold Out and Contact Styles */
.sold-out-indicator,
.contact-for-price {
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 8.1px 12.6px;
    gap: 18.9px;
    width: 225px;
    height: 36px;
    border: 1px solid #ccc;
    border-radius: 8.1px;
    background: #f8f9fa;
    font-family: 'Noto Sans', sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 12.6px;
    line-height: 19.8px;
    text-align: center;
    text-transform: uppercase;
    color: #6c757d;
}

/* Hidden cart tracking input */
.js-quantity-item-cart {
    display: none;
}

/* Responsive adjustments for new cart functionality */
@media (max-width: 768px) {
    .add-to-cart-button,
    .quantity-container {
        width: calc(100% - 16px);
        max-width: 200px;
    }
    
    .quantity-input-group {
        width: 100%;
    }
}

@media (max-width: 480px) {
    .add-to-cart-button,
    .quantity-container {
        width: 90%;
        max-width: none;
    }
    
    .quantity-btn {
        width: 24px;
        height: 24px;
    }
    
    .quantity-input {
        font-size: 11px;
        margin: 0 4px;
    }
}