/**
 * TehranSite Elementor Widgets - Styles
 */

/* Discount Badge */
.ts-discount-badge { display: inline-block; padding: 5px 10px; border-radius: 4px; font-weight: 500; }

/* Sale Badge */
.ts-sale-badge { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 20px; font-weight: 500; }
.ts-badge-icon { display: inline-flex; }

/* FAQ Accordion */
.ts-faq-accordion { width: 100%; }
.ts-faq-item { margin-bottom: 10px; border: 1px solid #e5e7eb; border-radius: 8px; overflow: hidden; }
.ts-faq-header { display: flex; align-items: center; padding: 15px 20px; cursor: pointer; transition: background-color 0.3s; background-color: #f8f9fa; }
.ts-faq-header:hover { background-color: #e9ecef; }
.ts-faq-item[aria-expanded="true"] .ts-faq-header { background-color: #e9ecef; }
.ts-faq-index { width: 32px; height: 32px; line-height: 32px; text-align: center; background-color: #007bff; color: #fff; border-radius: 50%; margin-left: 12px; flex-shrink: 0; font-weight: 500; }
.ts-faq-title { flex: 1; font-weight: 500; color: #333; }
.ts-faq-arrow { margin-right: 10px; transition: transform 0.3s; }
.ts-faq-item[aria-expanded="true"] .ts-faq-arrow { transform: rotate(180deg); }
.ts-faq-content { max-height: 0; overflow: hidden; transition: max-height 0.3s ease-out; }
.ts-faq-item[aria-expanded="true"] .ts-faq-content { max-height: 1000px; }
.ts-faq-content-inner { padding: 15px 20px; color: #666; line-height: 1.7; }
.ts-faq-empty { text-align: center; padding: 20px; color: #888; }

/* Review Box */
.ts-review-box { display: flex; gap: 30px; padding: 20px; background: #fff; border-radius: 10px; }
.ts-rating-scores { text-align: center; min-width: 100px; }
.ts-rating-score { display: flex; align-items: baseline; justify-content: center; gap: 5px; }
.ts-rating-score .rating { font-size: 48px; font-weight: 700; color: #f59e0b; }
.ts-rating-score .max { font-size: 16px; color: #888; }
.ts-rating-count { font-size: 14px; color: #888; margin-top: 5px; }
.ts-progress-bars { flex: 1; display: flex; flex-direction: column; gap: 8px; }
.ts-progress-item { display: flex; align-items: center; gap: 10px; }
.ts-progress-item span { min-width: 60px; font-size: 14px; color: #374151; }
.ts-progress-bar { flex: 1; height: 8px; background: #e5e7eb; border-radius: 4px; overflow: hidden; }
.ts-progress-fill { height: 100%; background: #f59e0b; border-radius: 4px; transition: width 0.5s; }

/* Review Box Responsive */
@media (max-width: 640px) {
    .ts-review-box { flex-direction: column; gap: 16px; padding: 16px; }
    .ts-rating-scores { min-width: unset; }
    .ts-rating-score .rating { font-size: 36px; }
    .ts-progress-item span { min-width: 50px; font-size: 13px; }
}

/* Post Views */
.ts-views-container { display: inline-block; }
.ts-views-wrapper { display: inline-flex; align-items: center; gap: 6px; }
.ts-views-icon { display: inline-flex; }

/* Product Filters */
.ts-product-filters { width: 100%; }
.ts-filters-list,
.woo-filters-list { display: flex; flex-wrap: wrap; gap: 24px; }
.ts-filter-item,
.woo-filter-item { text-decoration: none; padding: 4px 14px; border-radius: 4px; font-size: 14px; font-weight: 500; transition: all 0.3s; }

@media (max-width: 991px) {
    .ts-filters-list,
    .woo-filters-list { gap: 5px; flex-direction: column; flex-wrap: nowrap; }
    .ts-filter-item,
    .woo-filter-item { font-size: 12px; padding: 4px 10px; line-height: 24px; }
}

/* Stock Toggle */
.ts-stock-toggle { width: 100%; }
.ts-toggle-label { display: flex; align-items: center; gap: 10px; cursor: pointer; padding: 15px; flex-direction: row-reverse; justify-content: space-between; }
.ts-toggle-input { cursor: pointer; width: 18px; height: 18px; }
.ts-toggle-text { font-size: 16px; font-weight: 500; }

/* Variation Colors */
.ts-variation-colors { display: flex; flex-wrap: wrap; gap: 5px; }
.ts-color-circle { width: 20px; height: 20px; border-radius: 50%; border: 1px solid #e5e7eb; display: inline-block; }

/* Related Products */
.ts-related-products { display: flex; flex-wrap: wrap; gap: 10px; }
.ts-related-item img { width: 100px; height: auto; border-radius: 8px; transition: transform 0.3s; }
.ts-related-item:hover img { transform: scale(1.05); }

/* Express Shipping */
.ts-express-badge { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 400; }
.ts-express-icon { width: 16px; height: 16px; }

/* Category Grid */
.ts-cat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 15px; }
.ts-cat-item { position: relative; overflow: hidden; border-radius: 10px; aspect-ratio: 1; }
.ts-cat-item a { display: block; width: 100%; height: 100%; text-decoration: none; }
.ts-cat-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s; }
.ts-cat-item:hover img { transform: scale(1.1); }
.ts-cat-overlay { position: absolute; inset: 0; background: rgba(0,0,0,0.4); display: flex; align-items: flex-end; padding: 15px; }
.ts-cat-content { width: 100%; }
.ts-cat-title { color: #fff; font-size: 16px; font-weight: 600; margin-bottom: 5px; }
.ts-cat-count { color: rgba(255,255,255,0.8); font-size: 13px; }

/* RTL */
[dir="rtl"] .ts-faq-index { margin-left: 0; margin-right: 12px; }
[dir="rtl"] .ts-faq-arrow { margin-right: 0; margin-left: 10px; }

/* Reading Time */
.ts-reading-wrapper { display: flex; }
.ts-reading-time { display: inline-flex; align-items: center; gap: 6px; }
.ts-reading-icon { display: inline-flex; align-items: center; }
.ts-reading-number { font-weight: 600; }

/* ==================== Advanced Reviews V2 ==================== */
.ts-reviews-widget { width: 100%; font-family: inherit; }

/* Header */
.tsr-header { display: flex; justify-content: space-between; align-items: center; padding: 16px 20px; background: #fff; border: 1px solid #e5e7eb; border-radius: 12px 12px 0 0; }
.tsr-header-right { }
.tsr-title { margin: 0; font-size: 18px; font-weight: 600; color: #1f2937; }
.tsr-header-center { display: flex; align-items: baseline; gap: 4px; }
.tsr-score-value { font-size: 20px; font-weight: 700; color: #1f2937; }
.tsr-score-suffix { font-size: 14px; color: #6b7280; }
.tsr-header-left { }
.tsr-btn-add { display: inline-flex; align-items: center; gap: 8px; padding: 10px 20px; background: #0ea5e9; color: #fff; border: none; border-radius: 8px; cursor: pointer; font-size: 14px; font-weight: 500; transition: all 0.3s; }
.tsr-btn-add:hover { background: #0284c7; }
.tsr-btn-add svg { flex-shrink: 0; }
.tsr-subheader { padding: 12px 20px; background: #fff; border: 1px solid #e5e7eb; border-top: none; }
.tsr-count { font-size: 13px; color: #6b7280; }

/* Body */
.tsr-body { background: #fff; border: 1px solid #e5e7eb; border-top: none; padding: 30px 20px; }

/* Empty State */
.tsr-empty { text-align: center; padding: 40px 20px; }
.tsr-empty-icon { width: 90px; height: 90px; margin: 0 auto 20px; background: #e0f2fe; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.tsr-empty-icon svg { fill: #0ea5e9; }
.tsr-empty-title { font-size: 18px; font-weight: 600; color: #1f2937; margin: 0 0 10px; }
.tsr-empty-text { font-size: 14px; color: #6b7280; margin: 0 0 15px; line-height: 1.6; }
.tsr-empty-product { color: #ef4444; font-weight: 600; }
.tsr-empty-cta { display: inline-block; color: #0ea5e9; font-size: 14px; text-decoration: none; font-weight: 500; }
.tsr-empty-cta:hover { text-decoration: underline; }

/* Filters */
.tsr-filters { margin-bottom: 24px; }
.tsr-bar-row { display: flex; align-items: center; gap: 12px; padding: 8px 0; cursor: pointer; transition: opacity 0.3s; }
.tsr-bar-row:hover { opacity: 0.8; }
.tsr-bar-row.active { opacity: 1; }
.tsr-bar-row.active .tsr-bar-fill { background: #0ea5e9; }
.tsr-bar-label { min-width: 50px; font-size: 13px; color: #4b5563; }
.tsr-bar-bg { flex: 1; height: 8px; background: #e5e7eb; border-radius: 4px; overflow: hidden; }
.tsr-bar-fill { height: 100%; background: #fbbf24; border-radius: 4px; transition: width 0.5s; }
.tsr-bar-count { min-width: 30px; text-align: left; font-size: 13px; color: #6b7280; }

/* List */
.tsr-list { display: flex; flex-direction: column; gap: 16px; }

/* Item */
.tsr-item { padding: 20px; background: #fff; border: 1px solid #e5e7eb; border-radius: 12px; }
.tsr-item-header { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.tsr-avatar { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; }
.tsr-meta { flex: 1; }
.tsr-author-name { display: block; font-weight: 600; color: #1f2937; font-size: 15px; }
.tsr-date { font-size: 12px; color: #9ca3af; }
.tsr-rating { display: flex; gap: 2px; }
.tsr-star { color: #e5e7eb; }
.tsr-star.active { color: #fbbf24; }
.tsr-content { color: #4b5563; font-size: 14px; line-height: 1.7; margin-bottom: 12px; }

/* Images */
.tsr-images { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.tsr-images a { display: block; width: 70px; height: 70px; border-radius: 8px; overflow: hidden; }
.tsr-images img { width: 100%; height: 100%; object-fit: cover; }

/* Footer */
.tsr-footer { display: flex; align-items: center; justify-content: space-between; padding-top: 12px; border-top: 1px solid #f3f4f6; font-size: 13px; color: #6b7280; }
.tsr-helpful-btns { display: flex; gap: 8px; }
.tsr-btn-helpful { display: inline-flex; align-items: center; gap: 4px; padding: 6px 10px; border: 1px solid #e5e7eb; border-radius: 6px; background: #fff; cursor: pointer; font-size: 13px; color: #6b7280; transition: all 0.3s; }
.tsr-btn-helpful.up:hover, .tsr-btn-helpful.up.voted { border-color: #10b981; color: #10b981; background: #ecfdf5; }
.tsr-btn-helpful.down:hover, .tsr-btn-helpful.down.voted { border-color: #ef4444; color: #ef4444; background: #fef2f2; }

/* Admin Reply */
.tsr-admin-reply { margin-top: 16px; padding: 16px; background: #f0f9ff; border-radius: 8px; border-right: 3px solid #0ea5e9; }
.tsr-reply-header { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.tsr-admin-badge { background: #0ea5e9; color: #fff; padding: 3px 10px; border-radius: 4px; font-size: 12px; font-weight: 500; }
.tsr-reply-date { font-size: 12px; color: #6b7280; }
.tsr-reply-content { color: #4b5563; font-size: 14px; line-height: 1.6; }

/* More */
.tsr-more-wrapper { padding: 16px 20px; background: #fff; border: 1px solid #e5e7eb; border-top: none; border-radius: 0 0 12px 12px; text-align: center; }
.tsr-btn-more { display: inline-flex; align-items: center; gap: 6px; background: none; border: none; cursor: pointer; font-size: 14px; font-weight: 500; color: #1f2937; transition: color 0.3s; }
.tsr-btn-more:hover { color: #0ea5e9; }

/* Popup */
.tsr-popup-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.5); display: flex; align-items: center; justify-content: center; z-index: 99999; }
.tsr-popup-content { background: #fff; border-radius: 16px; width: 500px; max-width: 95%; max-height: 90vh; overflow-y: auto; animation: tsrPopupIn 0.3s ease; }
@keyframes tsrPopupIn { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: scale(1); } }
.tsr-popup-header { display: flex; justify-content: space-between; align-items: center; padding: 20px 24px; border-bottom: 1px solid #e5e7eb; }
.tsr-popup-header h4 { margin: 0; font-size: 18px; font-weight: 600; color: #1f2937; }
.tsr-popup-close { background: none; border: none; cursor: pointer; color: #9ca3af; padding: 4px; }
.tsr-popup-close:hover { color: #ef4444; }

/* Form */
.tsr-form { padding: 24px; }
.tsr-form-group { margin-bottom: 16px; }
.tsr-form-group label { display: block; margin-bottom: 8px; font-size: 14px; font-weight: 500; color: #374151; }
.tsr-star-select { display: flex; gap: 4px; }
.tsr-star-btn { cursor: pointer; color: #e5e7eb; transition: all 0.2s; }
.tsr-star-btn:hover, .tsr-star-btn.hover { color: #fbbf24; transform: scale(1.1); }
.tsr-star-btn.active { color: #fbbf24; }
.tsr-form textarea, .tsr-form input[type="text"], .tsr-form input[type="email"] { width: 100%; padding: 12px 14px; border: 1px solid #e5e7eb; border-radius: 8px; font-size: 14px; background: #f9fafb; transition: all 0.3s; }
.tsr-form textarea:focus, .tsr-form input:focus { outline: none; border-color: #0ea5e9; background: #fff; box-shadow: 0 0 0 3px rgba(14,165,233,0.1); }
.tsr-form textarea { resize: vertical; min-height: 100px; }
.tsr-form-row { display: flex; gap: 12px; }
.tsr-form-row input { flex: 1; }

/* Upload */
.tsr-upload input[type="file"] { display: none; }
.tsr-upload-label span { display: inline-flex; align-items: center; gap: 6px; padding: 10px 16px; border: 1px dashed #d1d5db; border-radius: 8px; cursor: pointer; font-size: 14px; color: #6b7280; transition: all 0.3s; }
.tsr-upload-label span:hover { border-color: #0ea5e9; color: #0ea5e9; }
.tsr-upload-preview { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.tsr-upload-preview .preview-img { width: 70px; height: 70px; border-radius: 8px; overflow: hidden; }
.tsr-upload-preview img { width: 100%; height: 100%; object-fit: cover; }

/* Submit */
.tsr-btn-submit { width: 100%; padding: 14px 20px; background: #10b981; color: #fff; border: none; border-radius: 8px; font-size: 15px; font-weight: 500; cursor: pointer; transition: all 0.3s; display: flex; align-items: center; justify-content: center; gap: 8px; }
.tsr-btn-submit:hover { background: #059669; }
.tsr-btn-submit .loading { display: inline-flex; align-items: center; gap: 8px; }
.tsr-btn-submit .spinner { animation: tsrSpin 1s linear infinite; }
@keyframes tsrSpin { to { transform: rotate(360deg); } }

/* Message */
.tsr-form-msg { margin-top: 16px; padding: 12px 16px; border-radius: 8px; font-size: 14px; }
.tsr-form-msg.success { background: #d1fae5; color: #065f46; }
.tsr-form-msg.error { background: #fee2e2; color: #991b1b; }

/* Responsive */
@media (max-width: 640px) {
    .tsr-header { flex-direction: column; gap: 12px; align-items: flex-start; }
    .tsr-header-center { order: 3; }
    .tsr-form-row { flex-direction: column; }
    .tsr-item { padding: 16px; }
    .tsr-item-header { flex-direction: column; gap: 8px; }
    .tsr-replies { margin-right: 12px; padding-right: 10px; }
    .tsr-footer { flex-wrap: wrap; gap: 8px; }
}

/* ==================== Post Comments V2 ==================== */
.ts-comments-widget { width: 100%; font-family: inherit; }

/* Header */
.tsc-header { display: flex; justify-content: space-between; align-items: center; padding: 16px 20px; background: #fff; border: 1px solid #e5e7eb; border-radius: 12px 12px 0 0; }
.tsc-header-right { display: flex; align-items: center; gap: 12px; }
.tsc-title { margin: 0; font-size: 18px; font-weight: 600; color: #1f2937; }
.tsc-count { background: #0ea5e9; color: #fff; padding: 4px 12px; border-radius: 20px; font-size: 13px; font-weight: 500; }
.tsc-btn-add { display: inline-flex; align-items: center; gap: 8px; padding: 10px 20px; background: #0ea5e9; color: #fff; border: none; border-radius: 8px; cursor: pointer; font-size: 14px; font-weight: 500; transition: all 0.3s; }
.tsc-btn-add:hover { background: #0284c7; }

/* Body */
.tsc-body { background: #fff; border: 1px solid #e5e7eb; border-top: none; padding: 30px 20px; }

/* Empty */
.tsc-empty { text-align: center; padding: 40px 20px; }
.tsc-empty-icon { width: 90px; height: 90px; margin: 0 auto 20px; background: #e0f2fe; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.tsc-empty-icon svg { fill: #0ea5e9; }
.tsc-empty-title { font-size: 18px; font-weight: 600; color: #1f2937; margin: 0 0 10px; }
.tsc-empty-text { font-size: 14px; color: #6b7280; margin: 0 0 15px; line-height: 1.6; }
.tsc-empty-post { color: #ef4444; font-weight: 600; }
.tsc-empty-cta { display: inline-block; color: #0ea5e9; font-size: 14px; text-decoration: none; font-weight: 500; }
.tsc-empty-cta:hover { text-decoration: underline; }

/* List */
.tsc-list { display: flex; flex-direction: column; gap: 16px; }

/* Item */
.tsc-item { padding: 20px; background: #fff; border: 1px solid #e5e7eb; border-radius: 12px; }
.tsc-item-header { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.tsc-avatar { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; }
.tsc-meta { flex: 1; }
.tsc-author { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tsc-author-name { font-weight: 600; color: #1f2937; font-size: 15px; }
.tsc-date { font-size: 12px; color: #9ca3af; display: block; margin-top: 2px; }
.tsc-badge { padding: 2px 8px; border-radius: 4px; font-size: 11px; font-weight: 500; }
.tsc-badge-author { background: #8b5cf6; color: #fff; }
.tsc-badge-admin { background: #0ea5e9; color: #fff; }
.tsc-content { color: #4b5563; font-size: 14px; line-height: 1.7; margin-bottom: 12px; }

/* Images */
.tsc-images { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.tsc-images a { display: block; width: 70px; height: 70px; border-radius: 8px; overflow: hidden; }
.tsc-images img { width: 100%; height: 100%; object-fit: cover; }

/* Footer */
.tsc-footer { display: flex; align-items: center; gap: 16px; padding-top: 12px; border-top: 1px solid #f3f4f6; }
.tsc-likes { display: flex; gap: 8px; }
.tsc-btn-like { display: inline-flex; align-items: center; gap: 4px; padding: 6px 10px; border: 1px solid #e5e7eb; border-radius: 6px; background: #fff; cursor: pointer; font-size: 13px; color: #6b7280; transition: all 0.3s; }
.tsc-btn-like.up:hover, .tsc-btn-like.up.voted { border-color: #10b981; color: #10b981; background: #ecfdf5; }
.tsc-btn-like.down:hover, .tsc-btn-like.down.voted { border-color: #ef4444; color: #ef4444; background: #fef2f2; }
.tsc-btn-reply { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: none; background: none; cursor: pointer; font-size: 13px; color: #6b7280; transition: all 0.3s; }
.tsc-btn-reply:hover { color: #0ea5e9; }

/* Replies */
.tsc-replies { margin-top: 16px; margin-right: 30px; padding-right: 20px; border-right: 2px solid #e5e7eb; display: flex; flex-direction: column; gap: 12px; }
.tsc-replies .tsc-item { background: #f9fafb; }

/* More */
.tsc-more-wrapper { padding: 16px 20px; background: #fff; border: 1px solid #e5e7eb; border-top: none; border-radius: 0 0 12px 12px; text-align: center; }
.tsc-btn-more { display: inline-flex; align-items: center; gap: 6px; background: none; border: none; cursor: pointer; font-size: 14px; font-weight: 500; color: #1f2937; transition: color 0.3s; }
.tsc-btn-more:hover { color: #0ea5e9; }

/* Popup */
.tsc-popup-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.5); display: flex; align-items: center; justify-content: center; z-index: 99999; }
.tsc-popup-content { background: #fff; border-radius: 16px; width: 500px; max-width: 95%; max-height: 90vh; overflow-y: auto; animation: tscPopupIn 0.3s ease; }
@keyframes tscPopupIn { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: scale(1); } }
.tsc-popup-header { display: flex; justify-content: space-between; align-items: center; padding: 20px 24px; border-bottom: 1px solid #e5e7eb; }
.tsc-popup-header h4 { margin: 0; font-size: 18px; font-weight: 600; color: #1f2937; }
.tsc-popup-close { background: none; border: none; cursor: pointer; color: #9ca3af; padding: 4px; }
.tsc-popup-close:hover { color: #ef4444; }
.tsc-reply-to { display: flex; align-items: center; gap: 10px; padding: 12px 24px; background: #eff6ff; font-size: 14px; color: #1e40af; }
.tsc-cancel-reply { background: none; border: none; color: #ef4444; cursor: pointer; font-size: 13px; margin-right: auto; }

/* Form */
.tsc-form { padding: 24px; }
.tsc-form-group { margin-bottom: 16px; }
.tsc-form textarea, .tsc-form input[type="text"], .tsc-form input[type="email"] { width: 100%; padding: 12px 14px; border: 1px solid #e5e7eb; border-radius: 8px; font-size: 14px; background: #f9fafb; transition: all 0.3s; }
.tsc-form textarea:focus, .tsc-form input:focus { outline: none; border-color: #0ea5e9; background: #fff; box-shadow: 0 0 0 3px rgba(14,165,233,0.1); }
.tsc-form textarea { resize: vertical; min-height: 100px; }
.tsc-form-row { display: flex; gap: 12px; }
.tsc-form-row input { flex: 1; }

/* Upload */
.tsc-upload input[type="file"] { display: none; }
.tsc-upload-label span { display: inline-flex; align-items: center; gap: 6px; padding: 10px 16px; border: 1px dashed #d1d5db; border-radius: 8px; cursor: pointer; font-size: 14px; color: #6b7280; transition: all 0.3s; }
.tsc-upload-label span:hover { border-color: #0ea5e9; color: #0ea5e9; }
.tsc-upload-preview { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.tsc-upload-preview .preview-img { width: 70px; height: 70px; border-radius: 8px; overflow: hidden; }
.tsc-upload-preview img { width: 100%; height: 100%; object-fit: cover; }

/* Submit */
.tsc-btn-submit { width: 100%; padding: 14px 20px; background: #10b981; color: #fff; border: none; border-radius: 8px; font-size: 15px; font-weight: 500; cursor: pointer; transition: all 0.3s; display: flex; align-items: center; justify-content: center; gap: 8px; }
.tsc-btn-submit:hover { background: #059669; }
.tsc-btn-submit .loading { display: inline-flex; align-items: center; gap: 8px; }
.tsc-btn-submit .spinner { animation: tscSpin 1s linear infinite; }
@keyframes tscSpin { to { transform: rotate(360deg); } }

/* Message */
.tsc-form-msg { margin-top: 16px; padding: 12px 16px; border-radius: 8px; font-size: 14px; }
.tsc-form-msg.success { background: #d1fae5; color: #065f46; }
.tsc-form-msg.error { background: #fee2e2; color: #991b1b; }

/* Responsive */
@media (max-width: 640px) {
    .tsc-header { flex-direction: column; gap: 12px; align-items: flex-start; }
    .tsc-form-row { flex-direction: column; }
    .tsc-replies { margin-right: 15px; padding-right: 12px; }
}

/* ==================== Post Comments ==================== */
.ts-post-comments { width: 100%; }

/* Header */
.ts-comments-header { display: flex; justify-content: space-between; align-items: center; background: #f8f9fa; padding: 16px 20px; border-radius: 12px 12px 0 0; flex-wrap: wrap; gap: 12px; }
.ts-comments-title-wrap { display: flex; align-items: center; gap: 12px; }
.ts-comments-title { margin: 0; font-size: 18px; font-weight: 600; color: #1f2937; }
.ts-comments-count { background: #3b82f6; color: #fff; padding: 4px 12px; border-radius: 20px; font-size: 13px; font-weight: 500; }
.ts-btn-add-comment { display: inline-flex; align-items: center; gap: 8px; background: #3b82f6; color: #fff; border: none; padding: 10px 20px; border-radius: 8px; cursor: pointer; font-size: 14px; font-weight: 500; transition: all 0.3s; }
.ts-btn-add-comment:hover { background: #2563eb; }

/* List */
.ts-comments-list { display: flex; flex-direction: column; gap: 16px; padding: 20px; background: #fff; border: 1px solid #e5e7eb; border-top: none; border-radius: 0 0 12px 12px; }

/* Comment Item */
.ts-comment-item { background: #fff; padding: 20px; border-radius: 12px; border: 1px solid #e5e7eb; }
.ts-comment-header { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.ts-comment-avatar { width: 48px; height: 48px; border-radius: 50%; overflow: hidden; flex-shrink: 0; }
.ts-comment-avatar img { width: 100%; height: 100%; object-fit: cover; }
.ts-comment-meta { flex: 1; }
.ts-comment-author { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ts-comment-author-name { font-weight: 600; color: #1f2937; font-size: 15px; }
.ts-comment-date { font-size: 13px; color: #9ca3af; display: block; margin-top: 2px; }

/* Badges */
.ts-badge { padding: 3px 10px; border-radius: 4px; font-size: 11px; font-weight: 500; }
.ts-badge-author { background: #8b5cf6; color: #fff; }
.ts-badge-admin { background: #3b82f6; color: #fff; }

/* Content */
.ts-comment-content { color: #4b5563; line-height: 1.8; font-size: 14px; margin-bottom: 12px; }

/* Images */
.ts-comment-images { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.ts-comment-image { width: 70px; height: 70px; border-radius: 8px; overflow: hidden; }
.ts-comment-image img { width: 100%; height: 100%; object-fit: cover; }

/* Footer */
.ts-comment-footer { display: flex; align-items: center; gap: 16px; padding-top: 12px; border-top: 1px solid #f3f4f6; }
.ts-comment-likes { display: flex; gap: 8px; }
.ts-btn-like, .ts-btn-dislike { display: inline-flex; align-items: center; gap: 4px; padding: 6px 10px; border: 1px solid #e5e7eb; border-radius: 6px; background: #fff; cursor: pointer; font-size: 13px; color: #6b7280; transition: all 0.3s; }
.ts-btn-like:hover, .ts-btn-like.voted { border-color: #10b981; color: #10b981; background: #ecfdf5; }
.ts-btn-dislike:hover, .ts-btn-dislike.voted { border-color: #ef4444; color: #ef4444; background: #fef2f2; }
.ts-btn-reply { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: none; background: none; cursor: pointer; font-size: 13px; color: #6b7280; transition: all 0.3s; }
.ts-btn-reply:hover { color: #3b82f6; }

/* Replies */
.ts-comment-replies { margin-top: 16px; margin-right: 30px; padding-right: 20px; border-right: 2px solid #e5e7eb; display: flex; flex-direction: column; gap: 12px; }
.ts-comment-replies .ts-comment-item { background: #f9fafb; }

/* Empty */
.ts-comments-empty { text-align: center; padding: 40px 20px; }
.ts-comments-empty .ts-empty-image { margin-bottom: 16px; }
.ts-comments-empty .ts-empty-image img { max-width: 120px; }
.ts-comments-empty .ts-empty-title { font-size: 16px; color: #1f2937; margin-bottom: 8px; }
.ts-comments-empty .ts-empty-text { color: #6b7280; font-size: 14px; }

/* Form */
.ts-comment-form-wrapper { background: #fff; padding: 24px; border-radius: 12px; border: 1px solid #e5e7eb; margin-top: 20px; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1); }
.ts-comment-form-wrapper .ts-form-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.ts-comment-form-wrapper .ts-form-title { margin: 0; font-size: 16px; font-weight: 600; color: #1f2937; }
.ts-comment-form-wrapper .ts-btn-close { background: none; border: none; cursor: pointer; color: #9ca3af; padding: 4px; }
.ts-comment-form-wrapper .ts-btn-close:hover { color: #ef4444; }

.ts-reply-to { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: #eff6ff; border-radius: 8px; margin-bottom: 16px; font-size: 14px; color: #1e40af; }
.ts-btn-cancel-reply { background: none; border: none; color: #ef4444; cursor: pointer; font-size: 13px; margin-right: auto; }

.ts-comment-form .ts-form-group { margin-bottom: 14px; }
.ts-comment-form .ts-form-row { display: flex; gap: 14px; }
.ts-comment-form .ts-form-half { flex: 1; }
.ts-comment-input, .ts-comment-textarea { width: 100%; padding: 12px 14px; border: 1px solid #e5e7eb; border-radius: 8px; font-size: 14px; background: #f9fafb; transition: all 0.3s; }
.ts-comment-input:focus, .ts-comment-textarea:focus { outline: none; border-color: #3b82f6; background: #fff; box-shadow: 0 0 0 3px rgba(59,130,246,0.1); }
.ts-comment-textarea { resize: vertical; min-height: 100px; }

.ts-btn-submit-comment { width: 100%; padding: 12px 20px; background: #10b981; color: #fff; border: none; border-radius: 8px; font-size: 15px; font-weight: 500; cursor: pointer; transition: all 0.3s; display: flex; align-items: center; justify-content: center; gap: 8px; }
.ts-btn-submit-comment:hover { background: #059669; }

/* Post Comments Responsive */
@media (max-width: 768px) {
    .ts-comments-header { flex-direction: column; align-items: flex-start; }
    .ts-comment-form .ts-form-row { flex-direction: column; }
    .ts-comment-replies { margin-right: 15px; padding-right: 12px; }
}

/* ═══════════════════════════════════════
   Ajax Search Widget
   ═══════════════════════════════════════ */

/* ── Reset & Container ── */
.ts-search-widget { direction: rtl; position: relative; font-family: inherit; }
.ts-search-form-wrap { position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.ts-search-popup-box .ts-search-form-wrap { width: 100%; }

/* ── Search Form ── */
.ts-search-form {
    display: flex;
    align-items: center;
    position: relative;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    transition: all 0.25s ease;
    overflow: hidden;
}
.ts-search-form:focus-within {
    border-color: #0ea5e9;
    box-shadow: 0 0 0 3px rgba(14,165,233,0.1);
}
.ts-search-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 12px 0 0;
    color: #9ca3af;
    flex-shrink: 0;
}
.ts-search-input {
    flex: 1;
    height: 48px;
    border: none !important;
    outline: none !important;
    background: transparent !important;
    font-size: 14px;
    color: #111827;
    padding: 0 12px;
    min-width: 0;
    box-shadow: none !important;
}
.ts-search-input::placeholder { color: #9ca3af; }
.ts-search-input::-webkit-search-cancel-button { display: none; }

/* ── Category Dropdown ── */
.ts-search-cat-wrap {
    flex-shrink: 0;
    border-right: 1px solid #e5e7eb;
    display: flex;
    align-items: center;
}
.ts-search-cat-select {
    height: 100%;
    border: none !important;
    outline: none !important;
    background: transparent !important;
    padding: 0 12px 0 8px;
    font-size: 13px;
    color: #6b7280;
    cursor: pointer;
    min-width: 100px;
    appearance: auto;
    box-shadow: none !important;
}

/* ── Spinner & Clear ── */
.ts-search-spinner {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 8px;
    color: #9ca3af;
    flex-shrink: 0;
    animation: ts-spin-in 0.2s ease;
}
.ts-search-clear {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    margin-left: 8px;
    border: none;
    background: #e5e7eb;
    border-radius: 50%;
    color: #6b7280;
    font-size: 16px;
    cursor: pointer;
    flex-shrink: 0;
    transition: all 0.2s;
}
.ts-search-clear:hover { background: #d1d5db; color: #374151; }

/* ── Results Dropdown ── */
.ts-search-results {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    left: 0;
    z-index: 99999;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.12);
    max-height: 440px;
    overflow-y: auto;
    overflow-x: hidden;
    animation: ts-fade-down 0.2s ease;
}
.ts-search-results::-webkit-scrollbar { width: 5px; }
.ts-search-results::-webkit-scrollbar-track { background: transparent; }
.ts-search-results::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 10px; }

/* ── Result Item ── */
.ts-result-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    text-decoration: none !important;
    color: inherit !important;
    transition: background 0.15s;
    border-bottom: 1px solid #f3f4f6;
    cursor: pointer;
}
.ts-result-item:last-of-type { border-bottom: none; }
.ts-result-item:hover,
.ts-result-item.active { background: #f3f4f6; }
.ts-result-img {
    width: 52px;
    height: 52px;
    border-radius: 8px;
    overflow: hidden;
    flex-shrink: 0;
    background: #f3f4f6;
}
.ts-result-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.ts-result-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.ts-result-title {
    font-size: 14px;
    font-weight: 500;
    color: #111827;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ts-result-title mark {
    background: none;
    color: #0ea5e9;
    font-weight: 600;
}
.ts-result-cat {
    font-size: 12px;
    color: #6b7280;
}
.ts-result-price {
    font-size: 13px;
    font-weight: 600;
    color: #059669;
    direction: ltr;
    text-align: right;
}

/* ── Empty State ── */
.ts-result-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 36px 20px;
    color: #9ca3af;
    text-align: center;
    font-size: 14px;
}

/* ── View All ── */
.ts-result-viewall {
    display: block;
    text-align: center;
    padding: 12px;
    font-size: 14px;
    font-weight: 500;
    color: #0ea5e9 !important;
    text-decoration: none !important;
    border-top: 1px solid #e5e7eb;
    transition: background 0.2s;
    cursor: pointer;
}
.ts-result-viewall:hover { background: #f0f9ff; }

/* ── Popup Mode ── */
.ts-search-trigger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    color: #374151;
    transition: all 0.2s;
    font-size: 22px;
    line-height: 1;
}
.ts-search-trigger i { transition: color 0.2s; }
.ts-search-trigger svg { transition: fill 0.2s; }
.ts-search-trigger:hover { color: #0ea5e9; }

.ts-search-overlay {
    position: fixed;
    inset: 0;
    z-index: 99999999999;
    background: rgba(0,0,0,0.45);
    align-items: flex-start;
    justify-content: center;
    padding-top: 0;
    animation: ts-fade-in 0.2s ease;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
.ts-search-popup-inner {
    width: 100%;
    min-height: 100%;
    display: flex;
    align-items: start;
    justify-content: center;
    padding: 70px;
}
.ts-search-popup-box {
    width: 620px;
    max-width: 95vw;
    position: relative;
    animation: ts-slide-down 0.3s cubic-bezier(0.16,1,0.3,1);
}
.ts-search-popup-box .ts-search-form {
    width: 100%;
    background: #fff;
    border: none;
    box-shadow: 0 8px 32px rgba(0,0,0,0.12);
    border-radius: 16px;
}
.ts-search-popup-box .ts-search-form:focus-within {
    box-shadow: 0 8px 40px rgba(0,0,0,0.16);
}
.ts-search-popup-box .ts-search-input { height: 56px; font-size: 16px; }
.ts-search-popup-box .ts-search-results {
    border: none;
    border-radius: 16px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.12);
    max-height: 50vh;
    margin-top: 8px;
}

/* ── Result Meta ── */
.ts-result-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.ts-result-dot { color: #d1d5db; font-size: 10px; }

/* ── View All ── */
.ts-result-viewall-wrap {
    border-top: 1px solid #f3f4f6;
    padding: 0;
}
.ts-result-viewall {
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 14px;
    font-size: 14px;
    font-weight: 500;
    color: #374151 !important;
    text-decoration: none !important;
    transition: background 0.2s;
    cursor: pointer;
}
.ts-result-viewall:hover { background: #f9fafb; }
.ts-result-viewall-count { color: #9ca3af; font-weight: 400; }

/* ── Animations ── */
@keyframes ts-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes ts-fade-down { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes ts-slide-down { from { opacity: 0; transform: translateY(-20px); } to { opacity: 1; transform: translateY(0); } }
@keyframes ts-spin-in { from { opacity: 0; transform: scale(0.8); } to { opacity: 1; transform: scale(1); } }

/* ── Responsive ── */
@media (max-width: 1024px) {
    .ts-search-popup-box { width: 540px; }
    .ts-search-popup-inner { padding: 70px 30px; }
}
@media (max-width: 768px) {
    .ts-search-popup-box { width: 100%; max-width: 100%; }
    .ts-search-popup-box .ts-search-input { height: 48px; font-size: 15px; }
    .ts-search-cat-wrap { display: none; }
    .ts-search-popup-inner { padding: 60px 16px 16px; }
    .ts-search-popup-close { top: 12px; right: 12px; width: 32px; height: 32px; font-size: 20px; }
    .ts-result-img { width: 44px; height: 44px; }
}
@media (max-width: 480px) {
    .ts-search-results { max-height: 60vh; }
    .ts-result-item { padding: 8px 12px; gap: 10px; }
    .ts-result-title { font-size: 13px; }
}


/* ═══════════════════════════════════════
   Cart Buttons — Minimal Design
   ═══════════════════════════════════════ */

/* ── Shared ── */
.tsl-wrap, .tss-wrap { direction: rtl; font-family: inherit; }

/* ══ LOOP CART BUTTON ══ */
.tsl-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    border: none; cursor: pointer; font-family: inherit; font-weight: 600;
    text-decoration: none !important; line-height: 1.6; transition: all .2s;
}
.tsl-btn:hover:not(:disabled) { opacity: .9; }
.tsl-btn:disabled { cursor: not-allowed; opacity: .5; }
.tsl-btn.tsl-loading { pointer-events: none; opacity: .6; }
.tsl-btn-unavail { background: #f4f4f5 !important; color: #a1a1aa !important; cursor: not-allowed; }

/* Qty wrap */
.tsl-qty-wrap { display: flex; flex-direction: column; gap: 4px; }
.tsl-in-cart-text { font-size: 12px; font-weight: 500; color: #71717a; }
.tsl-cart-link { font-size: 11px; text-decoration: none !important; font-weight: 500; }
.tsl-cart-link:hover { text-decoration: underline !important; }

.tsl-qty {
    display: flex; align-items: center; justify-content: space-between;
    border: 1.5px solid #e4e4e7; background: #fff;
    padding: 2px 4px; transition: opacity .2s;
}
.tsl-qty.tsl-busy { opacity: .5; pointer-events: none; }

.tsl-qty-btn {
    width: 32px; height: 32px; border: none; background: none;
    border-radius: 6px; cursor: pointer; display: flex; align-items: center;
    justify-content: center; padding: 0; color: #52525b; font-size: 18px;
    font-weight: 600; transition: all .15s;
}
.tsl-qty-btn:hover:not(:disabled) { background: #fef2f2; }
.tsl-qty-btn:disabled { opacity: .3; cursor: not-allowed; }
.tsl-qty-trash { color: #ef4444; }
.tsl-qty-trash:hover:not(:disabled) { background: #fef2f2; }
.tsl-qty-trash svg { width: 16px; height: 16px; }

.tsl-qty-center { display: flex; flex-direction: column; align-items: center; min-width: 32px; }
.tsl-qty-num { font-size: 16px; font-weight: 700; line-height: 1.2; }
.tsl-qty-max { font-size: 9px; color: #a1a1aa; font-weight: 500; }
.tsl-qty-plus { color: #417F56; font-size: 18px; }
.tsl-qty-plus:hover:not(:disabled) { background: #f0fdf4; }

/* ══ SINGLE CART BUTTON ══ */
.tss-wrap { display: flex; flex-direction: column; }

/* Attribute row */
.tss-attr-row { margin-bottom: 16px; }
.tss-attr-label { font-size: 14px; font-weight: 700; margin-bottom: 10px; display: flex; align-items: center; gap: 4px; }
.tss-attr-name::after { content: ':'; }
.tss-attr-val { font-weight: 400; }

.tss-attr-options { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

/* Color swatches — matches reference image exactly */
.tss-swatch-color {
    width: 40px; height: 40px; border-radius: 50%; border: 2px solid #e4e4e7;
    cursor: pointer; position: relative; display: flex; align-items: center;
    justify-content: center; padding: 0; transition: all .2s; outline: none;
}
.tss-swatch-color:hover:not(:disabled) { transform: scale(1.08); }
.tss-swatch-color .tss-check { display: none; width: 16px; height: 16px; stroke: #fff; filter: drop-shadow(0 1px 2px rgba(0,0,0,.3)); }
.tss-swatch-color.active { border-color: transparent; box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px #0ea5e9; }
.tss-swatch-color.active .tss-check { display: block; }
.tss-swatch-color.unavail { opacity: .25; cursor: not-allowed; }
.tss-swatch-color.unavail::after {
    content: ''; position: absolute; top: 50%; left: -1px; right: -1px;
    height: 2px; background: #dc2626; transform: rotate(-45deg); border-radius: 1px;
}

/* Box swatches — matches reference */
.tss-swatch-box {
    padding: 6px 16px; border-radius: 8px; border: 1.5px solid #e4e4e7;
    background: #f4f4f5; cursor: pointer; font-size: 14px; font-weight: 600;
    color: #3f3f46; transition: all .15s; font-family: inherit; outline: none;
}
.tss-swatch-box:hover:not(:disabled) { border-color: #a1a1aa; }
.tss-swatch-box.active { background: #18181b; color: #fff; border-color: #18181b; }
.tss-swatch-box.unavail { opacity: .3; cursor: not-allowed; text-decoration: line-through; }

/* Dropdown */
.tss-dropdown {
    width: 100%; max-width: 280px; padding: 10px 14px;
    border: 1.5px solid #e4e4e7; border-radius: 10px; background: #fff;
    font-size: 14px; font-family: inherit; color: #3f3f46; cursor: pointer;
    transition: border-color .2s; outline: none;
}
.tss-dropdown:focus { border-color: #0ea5e9; box-shadow: 0 0 0 3px rgba(14,165,233,.1); }
.tss-dropdown option:disabled { color: #d4d4d8; }

/* Price */
.tss-price { font-size: 18px; font-weight: 700; margin: 8px 0 4px; min-height: 24px; }
.tss-price del { color: #a1a1aa; font-weight: 400; font-size: 14px; margin-left: 6px; }
.tss-price ins { text-decoration: none; }

/* Stock */
.tss-stock { font-size: 13px; font-weight: 600; margin-bottom: 8px; min-height: 18px; transition: color .2s; }
.tss-stock:empty { display: none; }

/* Add button */
.tss-btn-add {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    border: none; cursor: pointer; font-family: inherit; font-weight: 700;
    font-size: 15px; transition: all .2s; line-height: 1.6; position: relative;
}
.tss-btn-add:hover:not(:disabled) { opacity: .9; }
.tss-btn-add:disabled { cursor: not-allowed; }
.tss-btn-add.tss-disabled { opacity: .45; }
.tss-btn-add.tss-out-of-stock { opacity: .6; background: #9ca3af !important; cursor: not-allowed; }
.tss-btn-add.tss-loading { pointer-events: none; }
.tss-btn-add.tss-loading::after {
    content: ''; position: absolute; width: 18px; height: 18px;
    border: 2px solid rgba(255,255,255,.3); border-top-color: #fff;
    border-radius: 50%; animation: tssSpin .5s linear infinite; right: 14px;
}
@keyframes tssSpin { to { transform: rotate(360deg); } }

/* Qty - single */
.tss-qty-wrap { display: flex; flex-direction: column; gap: 4px; }
.tss-qty-meta { display: flex; align-items: center; justify-content: space-between; }
.tss-in-cart { font-size: 12px; font-weight: 500; }
.tss-cart-link { font-size: 11px; text-decoration: none !important; font-weight: 500; }
.tss-cart-link:hover { text-decoration: underline !important; }

.tss-qty {
    display: flex; align-items: center; justify-content: space-between;
    border: 1.5px solid #e4e4e7; background: #fff; transition: opacity .2s;
    padding: 2px 4px;
}
.tss-qty.tss-busy { opacity: .5; pointer-events: none; }

.tss-qty-btn {
    width: 32px; height: 32px; border: none; background: none;
    border-radius: 6px; cursor: pointer; display: flex; align-items: center;
    justify-content: center; padding: 0; color: #52525b; font-size: 18px;
    font-weight: 600; transition: all .15s;
}
.tss-qty-btn:hover:not(:disabled) { background: #f4f4f5; }
.tss-qty-btn:disabled { opacity: .3; cursor: not-allowed; }
.tss-qty-trash { color: #ef4444; }
.tss-qty-trash:hover:not(:disabled) { background: #fef2f2; }
.tss-qty-trash svg { width: 16px; height: 16px; }

.tss-qty-center { display: flex; flex-direction: column; align-items: center; min-width: 32px; }
.tss-qty-num { font-size: 16px; font-weight: 700; line-height: 1.2; }
.tss-qty-max { font-size: 9px; color: #a1a1aa; font-weight: 500; }
.tss-qty-plus { color: #417F56; font-size: 18px; }
.tss-qty-plus:hover:not(:disabled) { background: #f0fdf4; }

/* ══ CART TOAST NOTIFICATION ══ */
.ts-cart-toast {
    position: fixed;
    top: 30px;
    right: 30px;
    background: #4CAF50;
    color: white;
    padding: 18px 30px;
    border-radius: 10px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.25);
    z-index: 999999;
    font-size: 15px;
    font-weight: bold;
    font-family: inherit;
    direction: rtl;
    animation: tsCartToastIn 0.4s ease;
}
.ts-cart-toast.error { background: #f44336; }
@keyframes tsCartToastIn {
    from { transform: translateX(500px); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

/* ═══════════════════════════════════════════════
   Price Range Filter Widget  v1.6
   ═══════════════════════════════════════════════ */
.ts-price-range {
    direction: rtl;
    font-family: inherit;
    box-sizing: border-box;
}
.ts-price-range *, .ts-price-range *::before, .ts-price-range *::after { box-sizing: border-box; }

/* Header */
.ts-pr-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.ts-pr-collapsible { cursor:pointer; user-select:none; }
.ts-pr-title { font-size:15px; font-weight:600; color:#111827; }
.ts-pr-chevron { color:#9ca3af; transition:transform .25s; display:flex; }
.ts-pr-chevron.open { transform:rotate(180deg); }

/* Values */
.ts-pr-values { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:18px; gap:8px; }
.ts-pr-value-box { display:flex; align-items:baseline; gap:4px; }
.ts-pr-label-txt { font-size:12px; color:#9ca3af; }
.ts-pr-value { font-size:20px; font-weight:700; color:#111827; line-height:1; }
.ts-pr-currency { font-size:11px; color:#9ca3af; }

/* slider outer - clip کنترل می‌شود با overflow:visible */
.ts-pr-slider-outer { overflow: visible; }
.ts-pr-rail { overflow: visible !important; }

/* Labels */
.ts-pr-labels { display:flex; justify-content:space-between; }
.ts-pr-slider-label { font-size:11px; color:#9ca3af; }

/* لودر انیمیشنی */
@keyframes ts-pr-slide {
    0%   { left:-30%; }
    100% { left:110%; }
}

/* ═══════════════════════════════════════════════
   Category Filter Widget  v2
   ═══════════════════════════════════════════════ */
.ts-category-filter { direction:rtl; font-family:inherit; }

/* Header */
.ts-cf-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.ts-cf-collapsible { cursor:pointer; user-select:none; }
.ts-cf-title { font-size:15px; font-weight:600; color:#111827; }
.ts-cf-chevron { color:#9ca3af; transition:transform .25s; display:flex; }
.ts-cf-chevron.open { transform:rotate(180deg); }

/* Scroll container */
.ts-cf-scroll { overflow:hidden; }

/* List */
.ts-cf-list,
.ts-cf-children { list-style:none; margin:0; padding:0; }
.ts-cf-children { padding-right:16px; }

/* Row — link + toggle button */
.ts-cf-row { display:flex; align-items:stretch; }

/* Link */
.ts-cf-link {
    flex:1; display:flex; align-items:center; gap:8px;
    text-decoration:none; color:#374151;
    padding:8px 10px 8px 4px;
    border-right:3px solid transparent;
    transition:color .15s, border-color .15s;
    min-width:0;
}
.ts-cf-link:hover { color:#111827; }
.ts-cf-name { flex:1; min-width:0; }

/* Badge تعداد */
.ts-cf-count {
    display:inline-flex; align-items:center; justify-content:center;
    min-width:22px; height:22px; padding:0 5px; border-radius:11px;
    border:1px solid #e5e7eb; background:transparent; color:#6b7280;
    font-size:11px; font-weight:500; flex-shrink:0;
    transition:background .15s, color .15s, border-color .15s;
}

/* Toggle button زیردسته */
.ts-cf-toggle {
    background:none; border:none; cursor:pointer;
    padding:0 8px; color:#9ca3af; display:flex; align-items:center;
    transition:color .15s, transform .2s; flex-shrink:0;
}
.ts-cf-toggle:hover { color:#374151; }
.ts-cf-toggle.open svg { transform:rotate(180deg); }
.ts-cf-toggle svg { transition:transform .2s; display:block; }

/* دسته فعال */
.ts-cf-item.ts-active > .ts-cf-row > .ts-cf-link {
    color:#111827; font-weight:600;
    border-right-color:#10b981;
}
.ts-cf-item.ts-active > .ts-cf-row > .ts-cf-link .ts-cf-count {
    background:#10b981; color:#fff; border-color:#10b981;
}

/* Divider */
.ts-cf-item + .ts-cf-item { border-top:1px solid #f3f4f6; }
.ts-cf-children .ts-cf-item + .ts-cf-item { border-top:none; }

/* ── فیلتر دسته‌بندی: لودر overlay ── */
.ts-category-filter.ts-cf-loading .ts-cf-scroll { opacity:.35; pointer-events:none; transition:opacity .12s; }

/* ══════════════════════════════════════════════
   Overlay + Skeleton گرید محصولات
   (مشترک بین price-range و category-filter)
   ══════════════════════════════════════════════ */

/* Wrap */
.ts-filter-overlay-wrap { position:relative; }

/* Overlay شفاف روی گرید */
.ts-filter-overlay {
    position:absolute; inset:0; z-index:10;
    background:rgba(255,255,255,0.0);
    pointer-events:none;
    opacity:0;
    transition:opacity .2s ease;
    border-radius:8px;
}
.ts-filter-overlay.active {
    opacity:1;
    pointer-events:auto;
    background:rgba(255,255,255,0.0);
}

/* ── Skeleton گرید محصولات ── */
.ts-prod-skeleton {
    gap: 16px;
    padding: 4px 0;
    grid-template-columns: repeat(4, 1fr) !important;
    display: grid;
}
/* تعداد ستون‌ها را از والد به ارث می‌برد */
.ts-prod-skeleton.cols-2 { grid-template-columns:repeat(2,1fr); }
.ts-prod-skeleton.cols-3 { grid-template-columns:repeat(3,1fr); }
.ts-prod-skeleton.cols-4 { grid-template-columns:repeat(4,1fr); }
.ts-prod-skeleton.cols-5 { grid-template-columns:repeat(5,1fr); }

.ts-prod-sk-card {
    width: 250px !important;
    border-radius:12px;
    overflow:hidden;
    border:1px solid #f3f4f6;
    background:#fff;
    animation:ts-sk-fade-in .25s ease both;
}
.ts-prod-sk-card:nth-child(2) { animation-delay:.04s; }
.ts-prod-sk-card:nth-child(3) { animation-delay:.08s; }
.ts-prod-sk-card:nth-child(4) { animation-delay:.12s; }
.ts-prod-sk-card:nth-child(5) { animation-delay:.16s; }
.ts-prod-sk-card:nth-child(6) { animation-delay:.20s; }
.ts-prod-sk-card:nth-child(7) { animation-delay:.24s; }
.ts-prod-sk-card:nth-child(8) { animation-delay:.28s; }
.ts-prod-sk-img   { height:160px; width:100%; }
.ts-prod-sk-body  { padding:12px; display:flex; flex-direction:column; gap:8px; }
.ts-prod-sk-title { height:14px; width:75%; border-radius:4px; }
.ts-prod-sk-price { height:16px; width:45%; border-radius:4px; }
.ts-prod-sk-btn   { height:36px; width:100%; border-radius:8px; margin-top:4px; }

@keyframes ts-sk-fade-in {
    from { opacity:0; transform:translateY(6px); }
    to   { opacity:1; transform:translateY(0); }
}

/* نوار پیشرفت بالای گرید */
.ts-filter-progress {
    position:absolute; top:0; left:0; right:0;
    height:3px; z-index:20; overflow:hidden;
    border-radius:0 0 2px 2px;
    opacity:0; transition:opacity .15s;
}
.ts-filter-progress.active { opacity:1; }
.ts-filter-progress-bar {
    height:100%;
    width:30%;
    border-radius:2px;
    background:linear-gradient(90deg,transparent,#10b981,transparent);
    animation:ts-progress-run .9s ease-in-out infinite;
}
@keyframes ts-progress-run {
    0%   { transform:translateX(350%); }
    100% { transform:translateX(-150%); }
}

@keyframes ts-spin-filter { to { transform:rotate(360deg); } }

/* ── Skeleton Loading — مشترک ── */
@keyframes ts-shimmer {
    0%   { background-position: 200% center; }
    100% { background-position: -200% center; }
}
.ts-skeleton {
    background: linear-gradient(90deg,
        #f3f4f6 0%,
        #ebebeb 40%,
        #f3f4f6 80%
    );
    background-size: 300% 100%;
    animation: ts-shimmer 1.6s ease-in-out infinite;
    border-radius: 6px;
}

/* ── Skeleton Search ── */
.ts-search-skeleton { padding:8px 16px; display:flex; flex-direction:column; gap:2px; }
.ts-search-sk-item { display:flex; align-items:center; gap:12px; padding:8px 0; border-bottom:1px solid #f3f4f6; }
.ts-search-sk-item:last-child { border-bottom:none; }
.ts-search-sk-img { width:52px; height:52px; border-radius:8px; flex-shrink:0; }
.ts-search-sk-lines { flex:1; display:flex; flex-direction:column; gap:8px; }
.ts-search-sk-title { height:14px; width:70%; border-radius:4px; }
.ts-search-sk-meta  { height:11px; width:40%; border-radius:4px; }

/* ── Skeleton Wishlist ── */
.ts-wish-skeleton { display:flex; flex-direction:column; gap:12px; padding:12px 0; }
.ts-wish-sk-item  { display:flex; align-items:center; gap:12px; padding:10px; border:1px solid #f3f4f6; border-radius:10px; }
.ts-wish-sk-img   { width:70px; height:70px; border-radius:8px; flex-shrink:0; }
.ts-wish-sk-body  { flex:1; display:flex; flex-direction:column; gap:8px; }
.ts-wish-sk-name  { height:14px; width:60%; border-radius:4px; }
.ts-wish-sk-price { height:13px; width:35%; border-radius:4px; }
.ts-wish-sk-btn   { height:32px; width:100%; border-radius:6px; margin-top:4px; }

/* ── Skeleton Compare ── */
.ts-cmp-skeleton  { overflow-x:auto; }
.ts-cmp-sk-table  { width:100%; border-collapse:collapse; }
.ts-cmp-sk-table td { padding:12px 10px; border:1px solid #f3f4f6; vertical-align:top; min-width:120px; }
.ts-cmp-sk-img    { height:80px; border-radius:8px; margin-bottom:8px; }
.ts-cmp-sk-name   { height:13px; width:80%; border-radius:4px; margin-bottom:6px; }
.ts-cmp-sk-price  { height:12px; width:55%; border-radius:4px; }
.ts-cmp-sk-cell   { height:13px; width:65%; border-radius:4px; }
.ts-cmp-sk-label  { height:13px; width:70%; border-radius:4px; }

/* Empty */
.ts-cf-empty { color:#9ca3af; font-size:13px; margin:0; padding:8px 0; }

/* Scrollbar custom */
.ts-cf-scroll::-webkit-scrollbar { width:4px; }
.ts-cf-scroll::-webkit-scrollbar-track { background:#f3f4f6; border-radius:2px; }
.ts-cf-scroll::-webkit-scrollbar-thumb { background:#d1d5db; border-radius:2px; }
.ts-cf-scroll::-webkit-scrollbar-thumb:hover { background:#9ca3af; }

/* ══════════════════════════════════════════════
   Attribute Filter (ts-attribute-filter)
══════════════════════════════════════════════ */
.ts-af { direction:rtl; font-family:inherit; }
.ts-af-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; cursor:default; }
.ts-af-header.ts-af-collapsible { cursor:pointer; user-select:none; }
.ts-af-title { font-size:15px; font-weight:600; color:#111827; }
.ts-af-chevron { color:#9ca3af; transition:transform .25s; display:flex; }
.ts-af-chevron.open { transform:rotate(180deg); }
.ts-af-scroll { overflow:hidden; }

/* ── لیست ── */
.ts-af-list { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:2px; }

/* ── آیتم لینکی ── */
.ts-af-item-link { display:flex; align-items:center; justify-content:space-between; padding:7px 4px; border-right:3px solid transparent; text-decoration:none; color:#374151; transition:color .15s, border-color .15s; gap:8px; }
.ts-af-item-link:hover { color:#111827; }
.ts-af-item-link.ts-active { color:#111827; border-right-color:#10b981; font-weight:500; }
.ts-af-item-name { flex:1; text-align:right; font-size:14px; }
.ts-af-item-count { font-size:12px; color:#9ca3af; background:#f3f4f6; border:1px solid #e5e7eb; border-radius:10px; padding:1px 7px; line-height:1.6; white-space:nowrap; flex-shrink:0; }
.ts-af-item-link.ts-active .ts-af-item-count { background:#10b981; color:#fff; border-color:#10b981; }

/* ── آیتم checkbox ── */
.ts-af-item-cb { display:flex; align-items:center; justify-content:space-between; padding:7px 4px; gap:8px; cursor:pointer; border-radius:6px; transition:background .12s; }
.ts-af-item-cb:hover { background:#f9fafb; }
.ts-af-item-cb input[type=checkbox] { display:none; }
.ts-af-cb-box { width:18px; height:18px; border:2px solid #d1d5db; border-radius:4px; flex-shrink:0; display:flex; align-items:center; justify-content:center; transition:background .15s, border-color .15s; }
.ts-af-cb-box svg { display:none; }
.ts-af-item-cb.ts-checked .ts-af-cb-box { background:#10b981; border-color:#10b981; }
.ts-af-item-cb.ts-checked .ts-af-cb-box svg { display:block; }
.ts-af-item-cb.ts-checked .ts-af-item-name { font-weight:500; color:#111827; }
.ts-af-item-cb.ts-checked .ts-af-item-count { background:#10b981; color:#fff; border-color:#10b981; }

/* ── دکمه اعمال / ریست ── */
.ts-af-actions { display:flex; gap:8px; margin-top:12px; }
.ts-af-btn-apply { flex:1; padding:8px 14px; background:#10b981; color:#fff; border:none; border-radius:8px; font-size:13px; font-weight:600; cursor:pointer; font-family:inherit; transition:background .15s; }
.ts-af-btn-apply:hover { background:#059669; }
.ts-af-btn-reset { padding:8px 12px; background:#f3f4f6; color:#6b7280; border:1px solid #e5e7eb; border-radius:8px; font-size:13px; cursor:pointer; font-family:inherit; transition:background .15s; }
.ts-af-btn-reset:hover { background:#e5e7eb; color:#374151; }
.ts-af-btn-reset:disabled { opacity:0.4; cursor:default; }

/* ── loading ── */
.ts-af.ts-af-loading .ts-af-list { opacity:0.5; pointer-events:none; }

/* scrollbar */
.ts-af-scroll::-webkit-scrollbar { width:4px; }
.ts-af-scroll::-webkit-scrollbar-track { background:#f3f4f6; border-radius:2px; }
.ts-af-scroll::-webkit-scrollbar-thumb { background:#d1d5db; border-radius:2px; }

/* Collapse closed state */
.ts-cf-closed, .ts-af-closed { display: none !important; }

/* ── رنگ‌ها در attribute-filter ── */
.ts-af-item-cb .ts-af-cb-color { transition: border-color .15s, box-shadow .15s; }
.ts-af-item-cb.ts-checked .ts-af-cb-color { box-shadow: 0 0 0 2px #fff, 0 0 0 3.5px #10b981; border-color: transparent !important; }
