/**
 * Product Reviews Modal Styles
 * 
 * Styles for product reviews modal window
 * 
 * @package Merch.v3
 */

/* Modal Overlay */
.product-reviews-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9999;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.product-reviews-modal[aria-hidden="false"] {
    display: flex;
}

/* Modal Overlay Background */
.product-reviews-modal__overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(4px);
    cursor: pointer;
}

/* Modal Content */
.product-reviews-modal__content {
    position: relative;
    background-color: var(--wp--preset--color--dark-variant, var(--merch-v3-footer-bg, #1a1a1a));
    border-radius: 12px;
    width: 100%;
    max-width: 600px;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.3), 0 10px 10px -5px rgba(0, 0, 0, 0.2);
    z-index: 1;
}

/* Modal Header */
.product-reviews-modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    border-bottom: 1px solid color-mix(in srgb, var(--merch-v3-footer-text) 10%, transparent);
}

/* Modal Title */
.product-reviews-modal__title {
    font-size: 20px;
    font-weight: 600;
    margin: 0;
    color: var(--merch-v3-footer-text, var(--wp--preset--color--white, #ffffff));
}

/* Modal Close Button */
.product-reviews-modal__close {
    background: none;
    border: none;
    padding: 8px;
    cursor: pointer;
    color: var(--merch-v3-footer-text, var(--wp--preset--color--white, #ffffff));
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    transition: background-color 0.2s ease;
}

.product-reviews-modal__close:hover {
    background-color: color-mix(in srgb, var(--merch-v3-footer-text) 10%, transparent);
}

.product-reviews-modal__close svg {
    width: 24px;
    height: 24px;
    stroke: currentColor;
}

/* Modal Body */
.product-reviews-modal__body {
    padding: 24px;
    overflow-y: auto;
    flex: 1;
}

/* Modal Form */
.product-reviews-modal__form {
    color: var(--merch-v3-footer-text, var(--wp--preset--color--white, #ffffff));
}

.product-reviews-modal__comment-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.product-reviews-modal__rating-field,
.product-reviews-modal__comment-field,
.product-reviews-modal__field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.product-reviews-modal__rating-label,
.product-reviews-modal__comment-label,
.product-reviews-modal__field-label {
    font-size: 14px;
    font-weight: 500;
    color: var(--merch-v3-footer-text, var(--wp--preset--color--white, #ffffff));
}

.product-reviews-modal__rating-label .required,
.product-reviews-modal__comment-label .required,
.product-reviews-modal__field-label .required {
    color: var(--wp--preset--color--danger-red, #ff4444);
}

.product-reviews-modal__rating-input {
    display: none;
}

.product-reviews-modal__stars-wrapper {
    display: flex;
    gap: 8px;
    align-items: center;
}

.product-reviews-modal__star-btn {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.product-reviews-modal__star-btn:hover {
    transform: scale(1.1);
}

.product-reviews-modal__star-btn:active {
    transform: scale(0.95);
}

.product-reviews-modal__star-btn svg {
    width: 100%;
    height: 100%;
    display: block;
    transition: opacity 0.2s ease;
}

.product-reviews-modal__star-btn--selected svg,
.product-reviews-modal__star-btn--hover svg {
    opacity: 1;
}

.product-reviews-modal__star-btn:not(.product-reviews-modal__star-btn--selected):not(.product-reviews-modal__star-btn--hover) svg {
    opacity: 0.3;
}

.product-reviews-modal__star-btn--selected svg path {
    fill: var(--wp--preset--color--warning-gold, #FFCC00);
}

.product-reviews-modal__star-btn--hover svg path {
    fill: var(--wp--preset--color--warning-gold, #FFCC00);
    opacity: 0.7;
}

.product-reviews-modal__comment-textarea {
    padding: 12px;
    background-color: var(--wp--preset--color--background-dark-rgb-33, var(--wp--preset--color--dark, #212121));
    border: 1px solid color-mix(in srgb, var(--merch-v3-footer-text) 10%, transparent);
    border-radius: 8px;
    color: var(--merch-v3-footer-text, var(--wp--preset--color--white, #ffffff));
    font-size: 14px;
    font-family: inherit;
    resize: vertical;
    min-height: 120px;
    transition: border-color 0.3s ease;
}

.product-reviews-modal__comment-textarea:focus {
    outline: none;
    border-color: var(--wp--preset--color--primary-500, #2437A4);
}

.product-reviews-modal__comment-textarea::placeholder {
    color: var(--wp--preset--color--gray-400, var(--merch-v3-text-secondary, #808080));
}

.product-reviews-modal__field-input {
    padding: 10px 12px;
    background-color: var(--wp--preset--color--background-dark-rgb-33, var(--wp--preset--color--dark, #212121));
    border: 1px solid color-mix(in srgb, var(--merch-v3-footer-text) 10%, transparent);
    border-radius: 8px;
    color: var(--merch-v3-footer-text, var(--wp--preset--color--white, #ffffff));
    font-size: 14px;
    font-family: inherit;
    transition: border-color 0.3s ease;
}

.product-reviews-modal__field-input:focus {
    outline: none;
    border-color: var(--wp--preset--color--primary-500, #2437A4);
}

.product-reviews-modal__field-input::placeholder {
    color: var(--wp--preset--color--gray-400, var(--merch-v3-text-secondary, #808080));
}

.product-reviews-modal__submit-wrapper {
    display: flex;
    justify-content: flex-end;
    margin-top: 8px;
}

.product-reviews-modal__submit {
    background-color: var(--wp--preset--color--primary-500, #2437A4);
    color: var(--merch-v3-bg-white, var(--wp--preset--color--white, #ffffff));
    border: none;
    border-radius: 8px;
    padding: 12px 24px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease;
    font-family: inherit;
}

.product-reviews-modal__submit:hover {
    background-color: var(--wp--preset--color--primary-600, #1B2E8C);
    transform: translateY(-1px);
}

.product-reviews-modal__submit:active {
    transform: translateY(0);
}

.product-reviews-modal__message {
    color: var(--merch-v3-text-secondary, var(--wp--preset--color--gray-13, #c8c8c8));
    font-size: 14px;
    line-height: 1.6;
    margin: 0;
}

.product-reviews-modal__message a {
    color: var(--wp--preset--color--primary-light, #6BA0FF);
    text-decoration: none;
}

.product-reviews-modal__message a:hover {
    text-decoration: underline;
}

/* WooCommerce Star Rating Styles */
.product-reviews-modal p.stars {
    display: flex;
    gap: 8px;
    margin: 0;
}

.product-reviews-modal p.stars a {
    position: relative;
    width: 32px;
    height: 32px;
    text-indent: -9999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    box-shadow: none;
    transition: transform 0.2s ease;
}

.product-reviews-modal p.stars a::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11.999 17.2781L7.84904 19.7781C7.66571 19.8948 7.47404 19.9448 7.27404 19.9281C7.07404 19.9115 6.89904 19.8448 6.74904 19.7281C6.59904 19.6115 6.48237 19.4656 6.39904 19.2906C6.31571 19.1156 6.29904 18.9198 6.34904 18.7031L7.44904 13.9781L3.77404 10.8031C3.60737 10.6531 3.50321 10.4823 3.46154 10.2906C3.41987 10.099 3.43237 9.91146 3.49904 9.72812C3.56571 9.54479 3.66571 9.39479 3.79904 9.27812C3.93237 9.16146 4.11571 9.08646 4.34904 9.05312L9.19904 8.62812L11.074 4.17812C11.1574 3.97812 11.2865 3.82812 11.4615 3.72812C11.6365 3.62812 11.8157 3.57812 11.999 3.57812C12.1824 3.57812 12.3615 3.62812 12.5365 3.72812C12.7115 3.82812 12.8407 3.97812 12.924 4.17812L14.799 8.62812L19.649 9.05312C19.8824 9.08646 20.0657 9.16146 20.199 9.27812C20.3324 9.39479 20.4324 9.54479 20.499 9.72812C20.5657 9.91146 20.5782 10.099 20.5365 10.2906C20.4949 10.4823 20.3907 10.6531 20.224 10.8031L16.549 13.9781L17.649 18.7031C17.699 18.9198 17.6824 19.1156 17.599 19.2906C17.5157 19.4656 17.399 19.6115 17.249 19.7281C17.099 19.8448 16.924 19.9115 16.724 19.9281C16.524 19.9448 16.3324 19.8948 16.149 19.7781L11.999 17.2781Z' fill='rgba(255, 255, 255, 0.1)'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

.product-reviews-modal p.stars:hover a::before {
    background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11.999 17.2781L7.84904 19.7781C7.66571 19.8948 7.47404 19.9448 7.27404 19.9281C7.07404 19.9115 6.89904 19.8448 6.74904 19.7281C6.59904 19.6115 6.48237 19.4656 6.39904 19.2906C6.31571 19.1156 6.29904 18.9198 6.34904 18.7031L7.44904 13.9781L3.77404 10.8031C3.60737 10.6531 3.50321 10.4823 3.46154 10.2906C3.41987 10.099 3.43237 9.91146 3.49904 9.72812C3.56571 9.54479 3.66571 9.39479 3.79904 9.27812C3.93237 9.16146 4.11571 9.08646 4.34904 9.05312L9.19904 8.62812L11.074 4.17812C11.1574 3.97812 11.2865 3.82812 11.4615 3.72812C11.6365 3.62812 11.8157 3.57812 11.999 3.57812C12.1824 3.57812 12.3615 3.62812 12.5365 3.72812C12.7115 3.82812 12.8407 3.97812 12.924 4.17812L14.799 8.62812L19.649 9.05312C19.8824 9.08646 20.0657 9.16146 20.199 9.27812C20.3324 9.39479 20.4324 9.54479 20.499 9.72812C20.5657 9.91146 20.5782 10.099 20.5365 10.2906C20.4949 10.4823 20.3907 10.6531 20.224 10.8031L16.549 13.9781L17.649 18.7031C17.699 18.9198 17.6824 19.1156 17.599 19.2906C17.5157 19.4656 17.399 19.6115 17.249 19.7281C17.099 19.8448 16.924 19.9115 16.724 19.9281C16.524 19.9448 16.3324 19.8948 16.149 19.7781L11.999 17.2781Z' fill='%23FFCC00'/%3E%3C/svg%3E");
}

.product-reviews-modal p.stars a:hover ~ a::before {
    background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11.999 17.2781L7.84904 19.7781C7.66571 19.8948 7.47404 19.9448 7.27404 19.9281C7.07404 19.9115 6.89904 19.8448 6.74904 19.7281C6.59904 19.6115 6.48237 19.4656 6.39904 19.2906C6.31571 19.1156 6.29904 18.9198 6.34904 18.7031L7.44904 13.9781L3.77404 10.8031C3.60737 10.6531 3.50321 10.4823 3.46154 10.2906C3.41987 10.099 3.43237 9.91146 3.49904 9.72812C3.56571 9.54479 3.66571 9.39479 3.79904 9.27812C3.93237 9.16146 4.11571 9.08646 4.34904 9.05312L9.19904 8.62812L11.074 4.17812C11.1574 3.97812 11.2865 3.82812 11.4615 3.72812C11.6365 3.62812 11.8157 3.57812 11.999 3.57812C12.1824 3.57812 12.3615 3.62812 12.5365 3.72812C12.7115 3.82812 12.8407 3.97812 12.924 4.17812L14.799 8.62812L19.649 9.05312C19.8824 9.08646 20.0657 9.16146 20.199 9.27812C20.3324 9.39479 20.4324 9.54479 20.499 9.72812C20.5657 9.91146 20.5782 10.099 20.5365 10.2906C20.4949 10.4823 20.3907 10.6531 20.224 10.8031L16.549 13.9781L17.649 18.7031C17.699 18.9198 17.6824 19.1156 17.599 19.2906C17.5157 19.4656 17.399 19.6115 17.249 19.7281C17.099 19.8448 16.924 19.9115 16.724 19.9281C16.524 19.9448 16.3324 19.8948 16.149 19.7781L11.999 17.2781Z' fill='rgba(255, 255, 255, 0.1)'/%3E%3C/svg%3E");
}

.product-reviews-modal p.stars.selected a.active::before {
    background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11.999 17.2781L7.84904 19.7781C7.66571 19.8948 7.47404 19.9448 7.27404 19.9281C7.07404 19.9115 6.89904 19.8448 6.74904 19.7281C6.59904 19.6115 6.48237 19.4656 6.39904 19.2906C6.31571 19.1156 6.29904 18.9198 6.34904 18.7031L7.44904 13.9781L3.77404 10.8031C3.60737 10.6531 3.50321 10.4823 3.46154 10.2906C3.41987 10.099 3.43237 9.91146 3.49904 9.72812C3.56571 9.54479 3.66571 9.39479 3.79904 9.27812C3.93237 9.16146 4.11571 9.08646 4.34904 9.05312L9.19904 8.62812L11.074 4.17812C11.1574 3.97812 11.2865 3.82812 11.4615 3.72812C11.6365 3.62812 11.8157 3.57812 11.999 3.57812C12.1824 3.57812 12.3615 3.62812 12.5365 3.72812C12.7115 3.82812 12.8407 3.97812 12.924 4.17812L14.799 8.62812L19.649 9.05312C19.8824 9.08646 20.0657 9.16146 20.199 9.27812C20.3324 9.39479 20.4324 9.54479 20.499 9.72812C20.5657 9.91146 20.5782 10.099 20.5365 10.2906C20.4949 10.4823 20.3907 10.6531 20.224 10.8031L16.549 13.9781L17.649 18.7031C17.699 18.9198 17.6824 19.1156 17.599 19.2906C17.5157 19.4656 17.399 19.6115 17.249 19.7281C17.099 19.8448 16.924 19.9115 16.724 19.9281C16.524 19.9448 16.3324 19.8948 16.149 19.7781L11.999 17.2781Z' fill='%23FFCC00'/%3E%3C/svg%3E");
}

.product-reviews-modal p.stars.selected a.active ~ a::before {
    background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11.999 17.2781L7.84904 19.7781C7.66571 19.8948 7.47404 19.9448 7.27404 19.9281C7.07404 19.9115 6.89904 19.8448 6.74904 19.7281C6.59904 19.6115 6.48237 19.4656 6.39904 19.2906C6.31571 19.1156 6.29904 18.9198 6.34904 18.7031L7.44904 13.9781L3.77404 10.8031C3.60737 10.6531 3.50321 10.4823 3.46154 10.2906C3.41987 10.099 3.43237 9.91146 3.49904 9.72812C3.56571 9.54479 3.66571 9.39479 3.79904 9.27812C3.93237 9.16146 4.11571 9.08646 4.34904 9.05312L9.19904 8.62812L11.074 4.17812C11.1574 3.97812 11.2865 3.82812 11.4615 3.72812C11.6365 3.62812 11.8157 3.57812 11.999 3.57812C12.1824 3.57812 12.3615 3.62812 12.5365 3.72812C12.7115 3.82812 12.8407 3.97812 12.924 4.17812L14.799 8.62812L19.649 9.05312C19.8824 9.08646 20.0657 9.16146 20.199 9.27812C20.3324 9.39479 20.4324 9.54479 20.499 9.72812C20.5657 9.91146 20.5782 10.099 20.5365 10.2906C20.4949 10.4823 20.3907 10.6531 20.224 10.8031L16.549 13.9781L17.649 18.7031C17.699 18.9198 17.6824 19.1156 17.599 19.2906C17.5157 19.4656 17.399 19.6115 17.249 19.7281C17.099 19.8448 16.924 19.9115 16.724 19.9281C16.524 19.9448 16.3324 19.8948 16.149 19.7781L11.999 17.2781Z' fill='rgba(255, 255, 255, 0.1)'/%3E%3C/svg%3E");
}

.product-reviews-modal p.stars.selected a:not(.active)::before {
    background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11.999 17.2781L7.84904 19.7781C7.66571 19.8948 7.47404 19.9448 7.27404 19.9281C7.07404 19.9115 6.89904 19.8448 6.74904 19.7281C6.59904 19.6115 6.48237 19.4656 6.39904 19.2906C6.31571 19.1156 6.29904 18.9198 6.34904 18.7031L7.44904 13.9781L3.77404 10.8031C3.60737 10.6531 3.50321 10.4823 3.46154 10.2906C3.41987 10.099 3.43237 9.91146 3.49904 9.72812C3.56571 9.54479 3.66571 9.39479 3.79904 9.27812C3.93237 9.16146 4.11571 9.08646 4.34904 9.05312L9.19904 8.62812L11.074 4.17812C11.1574 3.97812 11.2865 3.82812 11.4615 3.72812C11.6365 3.62812 11.8157 3.57812 11.999 3.57812C12.1824 3.57812 12.3615 3.62812 12.5365 3.72812C12.7115 3.82812 12.8407 3.97812 12.924 4.17812L14.799 8.62812L19.649 9.05312C19.8824 9.08646 20.0657 9.16146 20.199 9.27812C20.3324 9.39479 20.4324 9.54479 20.499 9.72812C20.5657 9.91146 20.5782 10.099 20.5365 10.2906C20.4949 10.4823 20.3907 10.6531 20.224 10.8031L16.549 13.9781L17.649 18.7031C17.699 18.9198 17.6824 19.1156 17.599 19.2906C17.5157 19.4656 17.399 19.6115 17.249 19.7281C17.099 19.8448 16.924 19.9115 16.724 19.9281C16.524 19.9448 16.3324 19.8948 16.149 19.7781L11.999 17.2781Z' fill='%23FFCC00'/%3E%3C/svg%3E");
}

.product-reviews-modal p.stars a:hover {
    transform: scale(1.1);
}

/* Mobile Styles */
@media (max-width: 1023px) {
    .product-reviews-modal__content {
        max-width: 100%;
        max-height: 90vh;
        margin: 0;
        border-radius: 12px 12px 0 0;
    }

    .product-reviews-modal__body {
        padding: 20px;
    }

    .product-reviews-modal__submit-wrapper {
        justify-content: stretch;
    }

    .product-reviews-modal__submit {
        width: 100%;
    }
}