/**
 * Product Field Shortcodes Styles
 * Styled to match Ashrey Natural brand design
 * 
 * @package Ashrey_Natural
 * @version 1.0.0
 */

/* ========================================
   Base Shortcode Styles - Brand Font & Colors
   ======================================== */

/* All shortcodes use brand font */
.product-title-shortcode,
.product-benefits-shortcode,
.product-usage-instructions-shortcode,
.product-safety-warnings-shortcode,
.product-salla-link-shortcode,
.product-hyaluronic-acid-shortcode,
.product-formula-type-shortcode,
.product-price-saudi-shortcode,
.product-country-origin-shortcode,
.product-paraben-free-shortcode,
.product-sensitive-skin-shortcode,
.product-related-ingredients-list,
.product-related-articles-list,
.product-related-routines-list,
.product-related-competitors-list,
.product-faqs-shortcode {
    font-family: var(--font-family-main, var(--font-family-primary, 'Almarai', sans-serif));
}

/* Title Shortcode */
.product-title-shortcode {
    color: var(--color-primary, #911b30);
    font-family: var(--font-family-main, var(--font-family-primary, 'Almarai', sans-serif));
    font-weight: var(--font-weight-bold, 700);
    font-size: var(--font-size-2xl, 1.5rem);
    line-height: var(--line-height-tight, 1.25);
    margin-bottom: 1rem;
}

.product-title-shortcode h1,
.product-title-shortcode h2,
.product-title-shortcode h3 {
    color: var(--color-primary, #911b30);
    font-weight: var(--font-weight-bold, 700);
}

/* Benefits Shortcode */
.product-benefits-shortcode {
    font-family: var(--font-family-main, var(--font-family-primary, 'Almarai', sans-serif)) !important;
    background: var(--color-background-pink-50, #fef5f7);
    border-right: 4px solid var(--color-primary, #911b30);
    padding: 1.25rem 1.5rem;
    border-radius: 8px;
    margin: 1.5rem 0;
    color: var(--color-text-primary, #000000);
    line-height: var(--line-height-relaxed, 1.75);
    font-size: var(--font-size-base, 1rem);
    direction: rtl;
    text-align: right;
}

/* Override code tag styling within benefits shortcode - Must override .rtl code rule */
.product-benefits-shortcode code,
.rtl .product-benefits-shortcode code,
.rtl code.product-benefits-shortcode code,
[dir="rtl"] .product-benefits-shortcode code,
body.rtl .product-benefits-shortcode code {
    font-family: var(--font-family-main, var(--font-family-primary, 'Almarai', sans-serif)) !important;
    background: transparent !important;
    padding: 0 !important;
    border: none !important;
    font-size: inherit !important;
    color: inherit !important;
    white-space: normal !important;
    word-break: normal !important;
    display: block;
    direction: rtl !important;
    text-align: right !important;
}

.product-benefits-shortcode p {
    margin: 0.75rem 0;
    font-family: var(--font-family-main, var(--font-family-primary, 'Almarai', sans-serif));
    direction: rtl;
    text-align: right;
}

.product-benefits-shortcode p:first-child {
    margin-top: 0;
}

.product-benefits-shortcode p:last-child {
    margin-bottom: 0;
}

/* Usage Instructions Shortcode */
.product-usage-instructions-shortcode {
    font-family: var(--font-family-main, var(--font-family-primary, 'Almarai', sans-serif)) !important;
    background: var(--color-background-blue-light, #f0f7ff);
    border-left: 4px solid var(--color-info, #3b82f6);
    padding: 1.25rem 1.5rem;
    border-radius: 8px;
    margin: 1.5rem 0;
    color: var(--color-text-primary, #000000);
    line-height: var(--line-height-relaxed, 1.75);
    font-size: var(--font-size-base, 1rem);
}

/* Override code tag styling within usage instructions shortcode - Must override .rtl code rule */
.product-usage-instructions-shortcode code,
.rtl .product-usage-instructions-shortcode code,
.rtl code.product-usage-instructions-shortcode code,
[dir="rtl"] .product-usage-instructions-shortcode code,
body.rtl .product-usage-instructions-shortcode code {
    font-family: var(--font-family-main, var(--font-family-primary, 'Almarai', sans-serif)) !important;
    background: transparent !important;
    padding: 0 !important;
    border: none !important;
    font-size: inherit !important;
    color: inherit !important;
    white-space: normal !important;
    word-break: normal !important;
    display: block;
    direction: rtl !important;
    text-align: right !important;
}

.product-usage-instructions-shortcode p {
    margin: 0.75rem 0;
    font-family: var(--font-family-main, var(--font-family-primary, 'Almarai', sans-serif));
}

.product-usage-instructions-shortcode p:first-child {
    margin-top: 0;
}

.product-usage-instructions-shortcode p:last-child {
    margin-bottom: 0;
}

/* Safety Warnings Shortcode */
.product-safety-warnings-shortcode {
    font-family: var(--font-family-main, var(--font-family-primary, 'Almarai', sans-serif)) !important;
    background: var(--color-error-light, #fee2e2);
    border-left: 4px solid var(--color-error, #ef4444);
    padding: 1.25rem 1.5rem;
    border-radius: 8px;
    margin: 1.5rem 0;
    color: var(--color-text-primary, #000000);
    line-height: var(--line-height-relaxed, 1.75);
    font-size: var(--font-size-base, 1rem);
}

/* Override code tag styling within safety warnings shortcode - Must override .rtl code rule */
.product-safety-warnings-shortcode code,
.rtl .product-safety-warnings-shortcode code,
.rtl code.product-safety-warnings-shortcode code,
[dir="rtl"] .product-safety-warnings-shortcode code,
body.rtl .product-safety-warnings-shortcode code {
    font-family: var(--font-family-main, var(--font-family-primary, 'Almarai', sans-serif)) !important;
    background: transparent !important;
    padding: 0 !important;
    border: none !important;
    font-size: inherit !important;
    color: inherit !important;
    white-space: normal !important;
    word-break: normal !important;
    display: block;
    direction: rtl !important;
    text-align: right !important;
}

.product-safety-warnings-shortcode p {
    margin: 0.75rem 0;
    font-family: var(--font-family-main, var(--font-family-primary, 'Almarai', sans-serif));
}

.product-safety-warnings-shortcode p:first-child {
    margin-top: 0;
}

.product-safety-warnings-shortcode p:last-child {
    margin-bottom: 0;
}

/* Salla Store Link Shortcode */
.product-salla-link-shortcode {
    font-family: var(--font-family-main, var(--font-family-primary, 'Almarai', sans-serif));
    display: inline-block;
    background: linear-gradient(135deg, var(--color-primary, #911b30) 0%, var(--color-primary-light, #b74156) 100%);
    color: var(--color-text-on-primary, #ffffff);
    padding: 0.875rem 1.75rem;
    border-radius: 8px;
    text-decoration: none;
    font-weight: var(--font-weight-semibold, 600);
    font-size: var(--font-size-base, 1rem);
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(145, 27, 48, 0.2);
    margin: 1rem 0;
}

.product-salla-link-shortcode:hover {
    background: linear-gradient(135deg, var(--color-primary-dark, #6b000a) 0%, var(--color-primary, #911b30) 100%);
    color: var(--color-text-on-primary, #ffffff);
    text-decoration: none;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(145, 27, 48, 0.3);
}

.product-salla-link-shortcode:active {
    transform: translateY(0);
    box-shadow: 0 2px 6px rgba(145, 27, 48, 0.2);
}

/* Technical Specification Shortcodes */
.product-hyaluronic-acid-shortcode,
.product-formula-type-shortcode,
.product-price-saudi-shortcode,
.product-country-origin-shortcode {
    font-family: var(--font-family-main, var(--font-family-primary, 'Almarai', sans-serif));
    display: inline-block;
    background: var(--color-background-pink-100, #fce8ed);
    color: var(--color-primary, #911b30);
    padding: 0.5rem 1rem;
    border-radius: 6px;
    font-weight: var(--font-weight-medium, 500);
    font-size: var(--font-size-base, 1rem);
    margin: 0.25rem 0.5rem 0.25rem 0;
    border: 1px solid var(--color-primary-light, #b74156);
}

/* Price Badge Special Styling */
.product-price-saudi-shortcode {
    background: linear-gradient(135deg, var(--color-primary, #911b30) 0%, var(--color-primary-light, #b74156) 100%);
    color: var(--color-text-on-primary, #ffffff);
    border: none;
    font-weight: var(--font-weight-bold, 700);
    padding: 0.625rem 1.25rem;
}

/* Boolean Field Shortcodes */
.product-paraben-free-shortcode,
.product-sensitive-skin-shortcode {
    font-family: var(--font-family-main, var(--font-family-primary, 'Almarai', sans-serif));
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border-radius: 6px;
    font-weight: var(--font-weight-medium, 500);
    font-size: var(--font-size-sm, 0.875rem);
}

.product-paraben-free-shortcode .checkmark-yes,
.product-sensitive-skin-shortcode .checkmark-yes {
    background: var(--color-success-light, #d1fae5);
    color: var(--color-success, #10b981);
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-weight: var(--font-weight-semibold, 600);
}

.product-paraben-free-shortcode .checkmark-no,
.product-sensitive-skin-shortcode .checkmark-no {
    background: var(--color-error-light, #fee2e2);
    color: var(--color-error, #ef4444);
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-weight: var(--font-weight-semibold, 600);
}

.product-paraben-free-shortcode .checkmark-maybe,
.product-sensitive-skin-shortcode .checkmark-maybe {
    background: var(--color-warning-light, #fef3c7);
    color: var(--color-warning, #f59e0b);
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    font-weight: var(--font-weight-medium, 500);
    font-style: italic;
}

/* Related Content Lists */
.product-related-ingredients-list,
.product-related-articles-list,
.product-related-routines-list,
.product-related-competitors-list {
    font-family: var(--font-family-main, var(--font-family-primary, 'Almarai', sans-serif));
    list-style: none;
    padding: 0;
    margin: 1.5rem 0;
}

.product-related-ingredients-list li,
.product-related-articles-list li,
.product-related-routines-list li,
.product-related-competitors-list li {
    margin: 0.75rem 0;
    padding: 0.875rem 1rem;
    background: var(--color-background-primary, #ffffff);
    border: 1px solid var(--color-border-subtle, #f5f5f5);
    border-left: 4px solid var(--color-primary, #911b30);
    border-radius: 6px;
    transition: all 0.2s ease;
}

.product-related-ingredients-list li:hover,
.product-related-articles-list li:hover,
.product-related-routines-list li:hover,
.product-related-competitors-list li:hover {
    background: var(--color-background-pink-50, #fef5f7);
    border-left-color: var(--color-primary-light, #b74156);
    transform: translateX(4px);
    box-shadow: 0 2px 8px rgba(145, 27, 48, 0.1);
}

.product-related-ingredients-links {
    list-style: none;
    padding: 0;
    margin: 1.5rem 0;
}

.product-related-ingredients-links li {
    margin: 0.5rem 0;
}

.product-related-ingredients-links a {
    color: var(--color-primary, #911b30);
    text-decoration: none;
    font-weight: var(--font-weight-medium, 500);
    padding: 0.5rem 0;
    display: inline-block;
    border-bottom: 2px solid transparent;
    transition: all 0.2s ease;
}

.product-related-ingredients-links a:hover {
    color: var(--color-primary-light, #b74156);
    border-bottom-color: var(--color-primary-light, #b74156);
}

.product-related-articles-list a,
.product-related-routines-list a,
.product-related-competitors-list a {
    color: var(--color-primary, #911b30);
    text-decoration: none;
    font-weight: var(--font-weight-medium, 500);
    transition: color 0.2s ease;
}

.product-related-articles-list a:hover,
.product-related-routines-list a:hover,
.product-related-competitors-list a:hover {
    color: var(--color-primary-light, #b74156);
    text-decoration: underline;
}

/* Product FAQs Shortcode */
.product-faqs-shortcode {
    font-family: var(--font-family-main, var(--font-family-primary, 'Almarai', sans-serif));
    margin: 2rem 0;
}

.product-faq-item {
    font-family: var(--font-family-main, var(--font-family-primary, 'Almarai', sans-serif));
    background: var(--color-background-primary, #ffffff);
    border: 1px solid var(--color-border-subtle, #f5f5f5);
    border-left: 4px solid var(--color-primary, #911b30);
    border-radius: 8px;
    margin-bottom: 1rem;
    overflow: hidden;
    transition: all 0.3s ease;
}

.product-faq-item:hover {
    border-left-color: var(--color-primary-light, #b74156);
    box-shadow: 0 4px 12px rgba(145, 27, 48, 0.1);
}

.product-faq-question {
    font-family: var(--font-family-main, var(--font-family-primary, 'Almarai', sans-serif));
    background: var(--color-background-pink-50, #fef5f7);
    color: var(--color-primary, #911b30);
    padding: 1.25rem 1.5rem;
    margin: 0;
    font-size: var(--font-size-lg, 1.125rem);
    font-weight: var(--font-weight-semibold, 600);
    border-bottom: 2px solid var(--color-primary-light, #b74156);
    cursor: pointer;
    position: relative;
    padding-right: 3rem;
    user-select: none;
    transition: all 0.2s ease;
}

.product-faq-question:hover {
    background: var(--color-background-pink-100, #fce8ed);
}

.product-faq-question::after {
    content: "+";
    position: absolute;
    right: 1.5rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.5rem;
    font-weight: var(--font-weight-bold, 700);
    color: var(--color-primary, #911b30);
    transition: transform 0.3s ease;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(145, 27, 48, 0.1);
}

.product-faq-item.active .product-faq-question {
    border-bottom-color: var(--color-primary, #911b30);
}

.product-faq-item.active .product-faq-question::after {
    content: "−";
    transform: translateY(-50%) rotate(0deg);
    background: var(--color-primary, #911b30);
    color: var(--color-text-on-primary, #ffffff);
}

.product-faq-answer {
    font-family: var(--font-family-main, var(--font-family-primary, 'Almarai', sans-serif));
    padding: 1.25rem 1.5rem;
    color: var(--color-text-primary, #000000);
    line-height: var(--line-height-relaxed, 1.75);
    font-size: var(--font-size-base, 1rem);
    display: none;
    animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.product-faq-item.active .product-faq-answer {
    display: block;
}

.product-faq-answer p {
    margin: 0.75rem 0;
}

.product-faq-answer p:first-child {
    margin-top: 0;
}

.product-faq-answer p:last-child {
    margin-bottom: 0;
}

.product-faq-answer a {
    color: var(--color-primary, #911b30);
    text-decoration: underline;
    font-weight: var(--font-weight-medium, 500);
}

.product-faq-answer a:hover {
    color: var(--color-primary-light, #b74156);
}

/* RTL Support */
[dir="rtl"] .product-faq-question {
    padding-right: 1.5rem;
    padding-left: 3rem;
}

[dir="rtl"] .product-faq-question::after {
    right: auto;
    left: 1.5rem;
}

[dir="rtl"] .product-related-ingredients-list li:hover,
[dir="rtl"] .product-related-articles-list li:hover,
[dir="rtl"] .product-related-routines-list li:hover,
[dir="rtl"] .product-related-competitors-list li:hover {
    transform: translateX(-4px);
}

[dir="rtl"] .product-related-ingredients-list li,
[dir="rtl"] .product-related-articles-list li,
[dir="rtl"] .product-related-routines-list li,
[dir="rtl"] .product-related-competitors-list li {
    border-left: 1px solid var(--color-border-subtle, #f5f5f5);
    border-right: 4px solid var(--color-primary, #911b30);
}

[dir="rtl"] .product-related-ingredients-list li:hover,
[dir="rtl"] .product-related-articles-list li:hover,
[dir="rtl"] .product-related-routines-list li:hover,
[dir="rtl"] .product-related-competitors-list li:hover {
    border-left-color: var(--color-border-subtle, #f5f5f5);
    border-right-color: var(--color-primary-light, #b74156);
}

/* RTL Support for Benefits Shortcode */
[dir="ltr"] .product-benefits-shortcode {
    border-right: none;
    border-left: 4px solid var(--color-primary, #911b30);
    text-align: left;
    direction: ltr;
}

[dir="ltr"] .product-benefits-shortcode code,
[dir="ltr"] .product-benefits-shortcode p {
    text-align: left;
    direction: ltr;
}

/* Responsive Design */
@media (max-width: 768px) {
    .product-title-shortcode {
        font-size: var(--font-size-xl, 1.25rem);
    }
    
    .product-benefits-shortcode,
    .product-usage-instructions-shortcode,
    .product-safety-warnings-shortcode {
        padding: 1rem;
        margin: 1rem 0;
    }
    
    .product-salla-link-shortcode {
        padding: 0.75rem 1.5rem;
        font-size: var(--font-size-sm, 0.875rem);
        display: block;
        text-align: center;
    }
    
    .product-hyaluronic-acid-shortcode,
    .product-formula-type-shortcode,
    .product-price-saudi-shortcode,
    .product-country-origin-shortcode {
        font-size: var(--font-size-sm, 0.875rem);
        padding: 0.375rem 0.75rem;
    }
    
    .product-faq-question {
        font-size: var(--font-size-base, 1rem);
        padding: 1rem 1.25rem;
        padding-right: 2.5rem;
    }
    
    [dir="rtl"] .product-faq-question {
        padding-left: 2.5rem;
        padding-right: 1.25rem;
    }
}

/* Print Styles */
@media print {
    .product-salla-link-shortcode {
        background: transparent;
        color: var(--color-primary, #911b30);
        border: 1px solid var(--color-primary, #911b30);
        box-shadow: none;
    }
    
    .product-faq-item {
        break-inside: avoid;
        page-break-inside: avoid;
    }
    
    .product-faq-answer {
        display: block !important;
    }
    
    .product-benefits-shortcode,
    .product-usage-instructions-shortcode,
    .product-safety-warnings-shortcode {
        border-left-width: 2px;
        page-break-inside: avoid;
    }
}

/* Accessibility Enhancements */
.product-faq-question:focus {
    outline: 2px solid var(--color-primary, #911b30);
    outline-offset: 2px;
    border-radius: 4px;
}

.product-faq-question[aria-expanded="true"] {
    border-bottom-color: var(--color-primary, #911b30);
}

/* Loading States */
.product-faq-answer {
    transition: max-height 0.3s ease, opacity 0.3s ease;
}

/* Smooth Scroll for FAQ Links */
.product-faq-answer a {
    scroll-margin-top: 20px;
}