{"version":3,"file":"blocks/CompareTable/style-index.css","mappings":";;;AACA;EACE;AAAF;AAEE;EACE;EACA;AAAJ;AAIM;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAFR;AAOE;EACE;EACA;EACA;EACA;AALJ;AAQI;EACE;AANN;AASI;EACE;AAPN;AAYM;EACE;EACA;EACA;AAVR;AAcI;EACE;EACA;EACA;EACA;EACA;EACA;EACA;AAZN;AAeI;EACE;EACA;EACA;EACA;AAbN;AAgBI;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAdN;AAgBM;EACE;EACA;EACA;AAdR;AAmBM;EACE;EACA;AAjBR;AAsBI;EAII;IAEE;IACA;IACA;EAxBR;EA4BI;IACE;IACA;IACA;EA1BN;EA4BM;IACE;IACA;EA1BR;AACF;AA+BI;EACE;IACE;IACA;IACA;EA7BN;AACF;AAkCE;EACE;EACA;EACA;EACA;AAhCJ;AAkCI;EACE;EACA;EACA;KAAA;EACA;AAhCN;AAoCE;EACE;EACA;EACA;EACA;AAlCJ;AAoCI;EACE;EACA;AAlCN;AAqCI;EACE;EACA;AAnCN;AAuCE;EACE;AArCJ;AAwCE;EACE;AAtCJ;;AA4CA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAzCF;AA2CE;EACE;AAzCJ;AA4CE;EACE;EACA;AA1CJ;AA6CE;EACE;EACA;EACA;AA3CJ;;AAgDA;EACE;EACA;EACA;EACA;EACA;EACA;AA7CF;AA+CE;EACE;EACA;AA7CJ;AAgDE;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AA9CJ;AAgDI;EACE;AA9CN;AAiDI;EACE;EACA;AA/CN;AAkDI;EACE;EACA;EACA;AAhDN;;AAuDE;EACE;AApDJ;AAsDI;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AApDN;AAsDM;EACE;AApDR;AAuDM;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AArDR;AAuDQ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AArDV;AAuDU;EACE;EACA;AArDZ;AAwDU;EACE;EACA;AAtDZ;AA6DE;EACE;AA3DJ;;AAkEI;EACE;EACA;AA/DN;AAiEM;EACE;EACA;EACA;EACA;EACA;AA/DR;AAiEQ;EACE;EACA;EAIA;EACA;EACA;EACA;AAlEV;AAoEU;EACE;AAlEZ;AAqEU;EACE;AAnEZ;AAwEU;EACE;EACA;EACA;EAIA;EACA;EACA;AAzEZ;AA8EU;EACE;EACA;EACA;AA5EZ;AA8EY;EACE;EACA;EACA;EAIA;EACA;EACA;EACA;AA/Ed;AAkFY;EACE;AAhFd;AAmFY;EACE;AAjFd;AAoFY;EACE;AAlFd;AAqFY;EACE;AAnFd;AAsFY;EACE;AApFd;AA0FU;EACE;EACA;EACA;EAIA;EACA;EACA;AA3FZ;AA+FQ;EACE;AA7FV;AA+FU;EACE;AA7FZ;AAkGU;EACE;EACA;AAhGZ;;AAwGA;EACE;IACE;EArGF;EAwGA;IACE;EAtGF;AACF;AA0GA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;AAxGF;AA0GE;EACE;EACA;EACA;AAxGJ;AA2GE;EACE;EACA;EACA;EACA;EACA;EACA;EACA;AAzGJ;AA4GE;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AA1GJ;AA6GE;EACE;EACA;EACA;EACA;EACA;EACA;AA3GJ;AA6GI;EACE;EACA;AA3GN;AA6GM;EACE;EACA;EACA;EACA;EACA;EACA;EACA,mDACE;EAEF;EACA;EACA;AA7GR;AA+GQ;EACE;AA7GV;AA4GQ;EACE;AA7GV;AAgHQ;EACE;EACA;AA9GV;AAiHQ;EACE;EACA;AA/GV;AAkHQ;EACE;AAhHV;AA+GQ;EACE;AAhHV;AAoHM;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAlHR;AAsHM;;;EAGE;AApHR;AAwHI;EACE;EACA;EACA;EACA;AAtHN;AAyHI;EACE;EACA;EACA;EACA;EACA;EACA;EACA;AAvHN;AA0HM;EACE;AAxHR;AA2HM;EACE;AAzHR;AA4HM;EACE;EACA;AA1HR;AA4HQ;EACE;AA1HV;AA8HM;;;EAGE;EACA;EACA;EACA;AA5HR;AA+HM;EACE;EACA;EACA;EACA;EACA;EACA,4DACE;AA9HV;AAkIQ;EACE;AAhIV;AAmIQ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAjIV;AAmIU;EACE;EACA;EACA;KAAA;AAjIZ;AAoIU;EACE;EACA;AAlIZ;AAsIQ;EACE;EACA;AApIV;AAsIU;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AApIZ;AAuIU;EACE;EACA;EACA;EACA;AArIZ;AAyIQ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAvIV;AAyIU;EACE;EACA;AAvIZ;AA0IU;EACE;EACA;EACA;AAxIZ;;AAiJA;EAEI;IACE;EA/IJ;EAkJE;IACE;EAhJJ;EAmJE;IACE;EAjJJ;EAoJM;IACE;IACA;EAlJR;EAoJQ;IACE;EAlJV;AACF;AA8JE;;EACE;AA3JJ;AA+JE;;EACE;AA5JJ;;AAsKE;;;;;;;;EAIE;EACA;AA/JJ;;AAoKA;EACE;IACE;EAjKF;EAoKA;IACE;EAlKF;AACF;AA0KA;EACE;EACA;EACA;EACA;EACA;EACA;AAxKF;AA0KE;;EAEE;EACA;EACA;AAxKJ;AA2KE;EACE;EACA;EACA;EACA;AAzKJ;;AA8KA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AA3KF;AA6KE;EACE;EACA;AA3KJ;AA8KE;EACE;EACA;EACA;AA5KJ;;AAiLA;EACE;EACA;EACA;EACA;EACA;KAAA;UAAA;AA9KF;AAgLE;EACE;AA9KJ;AAiLE;EACE;EACA;EACA;EACA;EACA;EACA;AA/KJ;AAiLI;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AA/KN;AAmLE;EACE;AAjLJ;AAmLI;EACE;AAjLN;AAqLE;EACE;EACA;EACA;AAnLJ;;AAwLA;EACE;EACA;EACA;EACA;AArLF;AAuLE;EACE;AArLJ;;AAyLA;EACE;AAtLF;;AAyLA;EACE;AAtLF;;AA0LA;EACE;AAvLF;;AA6LE;;EAEE;EACA;AA1LJ;;AAgME;EACE;EACA;EACA;AA7LJ;AAiME;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AA/LJ;AAiMI;EACE;EACA;AA/LN;AAkMI;EACE;EACA;EACA;AAhMN;AAmMI;EACE;AAjMN;AAuMI;EACE;EACA;EACA;EACA;AArMN;;AA4ME;EACE;AAzMJ;AA4ME;EACE;AA1MJ;;AA+MA;EACE;EACA;AA5MF;;AAiNE;EACE;AA9MJ;;AAmNA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAhNF;AAkNE;EACE;AAhNJ;AAmNE;EACE;EACA;EACA;EACA;EACA;EACA;EACA;AAjNJ;AAoNE;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAlNJ;AAqNE;EACE;EACA;EACA;EACA;AAnNJ;;AAwNA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AArNF;AAuNE;EACE;AArNJ;AAwNE;EACE;EACA;EACA;EACA;EACA;EACA;EACA;AAtNJ;AAyNE;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAvNJ;AA0NE;EACE;EACA;EACA;EACA;AAxNJ;;AA6NA;EACE;EACA;AA1NF;AA4NE;EACE;AA1NJ;AA6NE;EACE;EACA;EACA;EACA;EACA;EACA;EACA;AA3NJ,C","sources":["webpack://brandy-blocks/./src/blocks/CompareTable/style.scss"],"sourcesContent":["// Compare Table Block Styles\n.brandy-compare-table {\n margin: 20px 0;\n\n .compare-table-container {\n overflow-x: auto;\n position: relative;\n\n // Shadow effect when scrolled\n &.scrolled {\n &::before {\n content: \"\";\n position: absolute;\n top: 0;\n left: 0;\n width: 8px;\n height: 100%;\n background: linear-gradient(to right, rgba(0, 0, 0, 0.1), transparent);\n z-index: 10;\n pointer-events: none;\n }\n }\n }\n\n .compare-table {\n width: 100%;\n border-collapse: collapse;\n min-width: 900px;\n table-layout: fixed;\n\n // Equal width columns: label (150px) + 4 product columns (equal)\n .compare-field-label {\n width: 150px;\n }\n\n .compare-product-cell {\n width: calc((100% - 150px) / 4);\n }\n\n // Sticky first column styles\n &.sticky-first-column {\n .sticky-cell {\n position: sticky;\n left: 0;\n z-index: 5;\n }\n }\n\n .compare-field-label {\n padding: 16px;\n font-weight: 600;\n color: #202124;\n min-width: 150px;\n vertical-align: middle;\n text-align: left;\n background: inherit;\n }\n\n .compare-product-cell {\n padding: 16px;\n vertical-align: middle;\n text-align: center;\n position: relative;\n }\n\n .compare-remove-button {\n position: absolute;\n top: 8px;\n right: 8px;\n width: 24px;\n height: 24px;\n border: none;\n background: #FFFFFF;\n color: #122940;\n border-radius: 50%;\n cursor: pointer;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 14px;\n line-height: 1;\n transition: all 0.2s ease;\n z-index: 10;\n opacity: 0;\n visibility: hidden;\n box-shadow: 0px 5px 35px 0px #0000000A;\n\n svg {\n width: 14px;\n height: 14px;\n fill: currentColor;\n }\n }\n\n .compare-product-image:hover {\n .compare-remove-button {\n opacity: 1;\n visibility: visible;\n }\n }\n\n // Responsive adjustments for remove button\n @media (max-width: 768px) {\n .compare-product-header {\n\n // On mobile, show remove button on tap/touch\n &:active .compare-remove-button,\n &.touch-active .compare-remove-button {\n opacity: 1;\n visibility: visible;\n transform: scale(1);\n }\n }\n\n .compare-remove-button {\n width: 20px;\n height: 20px;\n font-size: 12px;\n\n svg {\n width: 10px;\n height: 10px;\n }\n }\n }\n\n // For touch devices, show remove button more easily\n @media (hover: none) and (pointer: coarse) {\n .compare-product-header:active .compare-remove-button {\n opacity: 1;\n visibility: visible;\n transform: scale(1);\n }\n }\n\n }\n\n .compare-product-image {\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\n\n img {\n width: 100%;\n height: auto;\n object-fit: contain;\n border-radius: 4px;\n }\n }\n\n .compare-product-rating {\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 8px;\n\n .stars {\n color: #fbbc04;\n font-size: 18px;\n }\n\n .rating-value {\n font-size: 14px;\n color: #5f6368;\n }\n }\n\n .compare-add-to-cart-btn {\n margin-top: 30px;\n }\n\n .compare-product-name {\n margin-top: 16px;\n }\n\n}\n\n// External Add Product Button (outside table)\n.add-product-button-external {\n display: inline-flex;\n align-items: center;\n gap: 8px;\n background-color: #1a73e8;\n color: white;\n border: none;\n padding: 12px 24px;\n border-radius: 6px;\n font-size: 14px;\n font-weight: 500;\n cursor: pointer;\n transition: background-color 0.2s ease;\n margin-top: 16px;\n\n &:hover {\n background-color: #1557b0;\n }\n\n &:focus {\n outline: 2px solid #1a73e8;\n outline-offset: 2px;\n }\n\n svg {\n width: 16px;\n height: 16px;\n fill: currentColor;\n }\n}\n\n// Placeholder state\n.compare-table-placeholder {\n padding: 40px 20px;\n text-align: center;\n background-color: #f8f9fa;\n border: 2px dashed #dadce0;\n border-radius: 8px;\n color: #5f6368;\n\n p {\n margin: 0 0 20px 0;\n font-size: 16px;\n }\n\n .add-product-button {\n display: inline-flex;\n align-items: center;\n gap: 8px;\n background-color: #1a73e8;\n color: white;\n border: none;\n padding: 12px 24px;\n border-radius: 6px;\n font-size: 14px;\n font-weight: 500;\n cursor: pointer;\n transition: background-color 0.2s ease;\n\n &:hover {\n background-color: #1557b0;\n }\n\n &:focus {\n outline: 2px solid #1a73e8;\n outline-offset: 2px;\n }\n\n svg {\n width: 16px;\n height: 16px;\n fill: currentColor;\n }\n }\n}\n\n// Popup specific styles\n.compare-table-wrapper {\n &.is-popup {\n display: none; // Hidden by default, shown via JS when popup is triggered\n\n &.is-active {\n display: flex;\n align-items: center;\n justify-content: center;\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background-color: rgba(0, 0, 0, 0.8);\n z-index: 160001;\n padding: 20px;\n box-sizing: border-box;\n\n &.remove-popup-background {\n background-color: rgba(0, 0, 0, 0.4);\n }\n\n .brandy-compare-table {\n max-width: 1200px;\n width: 100%;\n max-height: 90vh;\n overflow-y: auto;\n background: white;\n border-radius: 12px;\n padding: 20px;\n position: relative;\n margin: 0;\n\n .popup-close-btn {\n position: absolute;\n top: 15px;\n right: 15px;\n background: none;\n border: none;\n font-size: 24px;\n color: #5f6368;\n cursor: pointer;\n padding: 5px;\n line-height: 1;\n border-radius: 50%;\n width: 35px;\n height: 35px;\n display: flex;\n align-items: center;\n justify-content: center;\n transition: background-color 0.2s ease;\n\n &:hover {\n background-color: #f1f3f4;\n color: #202124;\n }\n\n &:focus {\n outline: 2px solid #1a73e8;\n outline-offset: 2px;\n }\n }\n }\n }\n }\n\n &.is-inline {\n display: block;\n }\n}\n\n// Loading Skeleton Styles\n.brandy-compare-table {\n .skeleton-row {\n .skeleton-cell {\n position: relative;\n overflow: hidden;\n\n .skeleton-field {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n min-height: 40px;\n\n .skeleton-line {\n height: 12px;\n background: linear-gradient(90deg,\n #f0f0f0 25%,\n #e0e0e0 50%,\n #f0f0f0 75%);\n background-size: 200% 100%;\n border-radius: 6px;\n margin: 4px 0;\n animation: skeleton-loading 1.5s infinite;\n\n &.skeleton-line-short {\n width: 60%;\n }\n\n &.skeleton-line-medium {\n width: 80%;\n }\n }\n\n &.skeleton-image {\n .skeleton-image-placeholder {\n width: 80px;\n height: 80px;\n background: linear-gradient(90deg,\n #f0f0f0 25%,\n #e0e0e0 50%,\n #f0f0f0 75%);\n background-size: 200% 100%;\n border-radius: 8px;\n animation: skeleton-loading 1.5s infinite;\n }\n }\n\n &.skeleton-rating {\n .skeleton-stars {\n display: flex;\n gap: 4px;\n align-items: center;\n\n .skeleton-star {\n width: 16px;\n height: 16px;\n background: linear-gradient(90deg,\n #f0f0f0 25%,\n #e0e0e0 50%,\n #f0f0f0 75%);\n background-size: 200% 100%;\n border-radius: 2px;\n animation: skeleton-loading 1.5s infinite;\n animation-delay: calc(var(--star-index) * 0.1s);\n }\n\n .skeleton-star:nth-child(1) {\n --star-index: 0;\n }\n\n .skeleton-star:nth-child(2) {\n --star-index: 1;\n }\n\n .skeleton-star:nth-child(3) {\n --star-index: 2;\n }\n\n .skeleton-star:nth-child(4) {\n --star-index: 3;\n }\n\n .skeleton-star:nth-child(5) {\n --star-index: 4;\n }\n }\n }\n\n &.skeleton-button {\n .skeleton-button-placeholder {\n width: 120px;\n height: 40px;\n background: linear-gradient(90deg,\n #f0f0f0 25%,\n #e0e0e0 50%,\n #f0f0f0 75%);\n background-size: 200% 100%;\n border-radius: 6px;\n animation: skeleton-loading 1.5s infinite;\n }\n }\n\n &.skeleton-name {\n align-items: flex-start;\n\n .skeleton-line {\n height: 16px;\n }\n }\n\n &.skeleton-price {\n .skeleton-line {\n height: 20px;\n width: 70%;\n }\n }\n }\n }\n }\n}\n\n@keyframes skeleton-loading {\n 0% {\n background-position: -200% 0;\n }\n\n 100% {\n background-position: 200% 0;\n }\n}\n\n// Product Selection Modal Styles\n.product-selection-modal {\n display: none;\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n z-index: 500000;\n\n &.is-active {\n display: flex;\n align-items: center;\n justify-content: center;\n }\n\n .modal-backdrop {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background-color: rgba(0, 0, 0, 0.7);\n cursor: pointer;\n }\n\n .modal-content {\n position: relative;\n background: white;\n border-radius: 12px;\n max-width: 800px;\n width: 100%;\n max-height: 80vh;\n overflow: hidden;\n box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);\n display: flex;\n flex-direction: column;\n }\n\n .modal-body {\n padding: 20px;\n display: flex;\n flex-direction: column;\n overflow: hidden;\n min-height: 0;\n flex: 1;\n\n .search-container {\n position: relative;\n margin-bottom: 24px;\n\n .product-search-input {\n width: 100%;\n padding: 15px 48px 15px 16px;\n border: 1px solid #e1e5e9;\n border-radius: 8px;\n font-size: 14px;\n outline: none;\n transition:\n border-color 0.2s ease,\n color 0.2s ease;\n box-sizing: border-box;\n color: #122940;\n background: white;\n\n &::placeholder {\n color: #9aa0a6;\n }\n\n &:hover {\n border-color: #122940 !important;\n box-shadow: 0px 5px 35px 0px #0000000d;\n }\n\n &:focus {\n border-color: #122940 !important;\n box-shadow: 0px 5px 35px 0px #0000000d;\n }\n\n &:focus::placeholder {\n color: #9aa0a6;\n }\n }\n\n .search-icon {\n position: absolute;\n right: 16px;\n top: 50%;\n transform: translateY(-50%);\n width: 18px;\n height: 19px;\n color: #5a6d80;\n cursor: pointer;\n pointer-events: auto;\n transition: fill 0.2s ease;\n }\n\n // Keep icon color consistent when input is focused\n &:has(.product-search-input:focus) .search-icon,\n .product-search-input:focus~.search-icon,\n .product-search-input:hover~.search-icon {\n color: #122940;\n }\n }\n\n .suggestions-heading {\n margin: 0 0 16px 0;\n font-size: 16px;\n font-weight: 500;\n color: #122940;\n }\n\n .products-list {\n display: flex;\n flex-direction: column;\n gap: 6px;\n flex: 1;\n overflow-y: auto;\n padding-right: 8px;\n min-height: 0;\n\n // Custom scrollbar styling\n &::-webkit-scrollbar {\n width: 8px;\n }\n\n &::-webkit-scrollbar-track {\n background: #f1f3f4;\n }\n\n &::-webkit-scrollbar-thumb {\n background: #dadce0;\n border-radius: 4px;\n\n &:hover {\n background: #bdc1c6;\n }\n }\n\n .loading-products,\n .no-products,\n .error-message {\n text-align: center;\n padding: 40px 20px;\n color: #5f6368;\n font-size: 16px;\n }\n\n .product-item {\n display: flex;\n align-items: center;\n gap: 10px;\n padding: 6px;\n border-radius: 6px;\n transition:\n background-color 0.2s ease,\n box-shadow 0.2s ease;\n // background: white;\n\n &:hover {\n background-color: #fafafa;\n }\n\n .product-image {\n flex-shrink: 0;\n width: 50px;\n height: 60px;\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: #f8f9fa;\n border-radius: 6px;\n overflow: hidden;\n\n img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n }\n\n .no-image {\n color: #5f6368;\n font-size: 12px;\n }\n }\n\n .product-info {\n flex: 1;\n min-width: 0;\n\n .product-name {\n margin: 0 0 8px 0;\n font-size: 14px;\n font-weight: 400;\n color: #122940;\n line-height: 1.4;\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n overflow: hidden;\n }\n\n .product-price {\n margin: 0;\n font-size: 14px;\n font-weight: 500;\n color: #122940;\n }\n }\n\n .select-product-btn {\n flex-shrink: 0;\n margin-right: 18px;\n padding: 10px 20px;\n color: #122940;\n border: 1px solid #122940;\n background-color: #fff;\n border-radius: 8px;\n font-size: 14px;\n font-weight: 600;\n cursor: pointer;\n transition: background-color 0.2s ease;\n white-space: nowrap;\n\n &:hover {\n background-color: #122940;\n color: #fff;\n }\n\n &:disabled {\n background-color: #dadce0;\n color: #5f6368;\n cursor: not-allowed;\n }\n }\n }\n }\n }\n}\n\n// Responsive modal styles\n@media (max-width: 768px) {\n .product-selection-modal {\n &.is-active {\n align-items: flex-end;\n }\n\n .modal-content {\n border-radius: 12px 12px 0 0;\n }\n\n .modal-body {\n padding: 16px;\n\n .products-list {\n .product-item {\n padding: 12px;\n gap: 12px;\n\n .select-product-btn {\n margin-right: 4px;\n }\n }\n }\n }\n }\n}\n\n// Editor specific styles\n.wp-block-brandy-compare-table,\n.brandy-compare-table-editor {\n\n // Hide compare table content wrapper when no products in compare list\n .compare-table-content-wrapper {\n display: none;\n }\n\n // Show compare table content wrapper only when products exist\n &.has-products .compare-table-content-wrapper {\n display: block;\n }\n\n // Note: Disabled styles moved to editor-specific section below\n}\n\n// Only disable add product functionality in editor mode\n.block-editor-page .wp-block-brandy-compare-table,\n.wp-admin .wp-block-brandy-compare-table {\n\n .add-product-button,\n .add-product-placeholder,\n .add-product-button-external,\n .add-product-slot-button {\n pointer-events: none;\n opacity: 0.6;\n }\n}\n\n// Loading spinner animation\n@keyframes brandy-spin {\n 0% {\n transform: rotate(0deg);\n }\n\n 100% {\n transform: rotate(360deg);\n }\n}\n\n// ===========================================\n// Compare Table v2.0 Styles\n// ===========================================\n\n// Toolbar with category badge and highlight toggle\n.compare-table-toolbar {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 12px 16px;\n gap: 16px;\n flex-wrap: wrap;\n\n .compare-toolbar-left,\n .compare-toolbar-right {\n display: flex;\n align-items: center;\n gap: 16px;\n }\n\n .compare-toolbar-right {\n border: 1px solid #E4E4E7;\n border-radius: 8px;\n box-shadow: 0 1px 2px 0 #0000000D;\n padding: 11px;\n }\n}\n\n// Category badge\n.compare-categories-badge {\n display: inline-flex;\n align-items: center;\n gap: 6px;\n padding: 6px 12px;\n background: #fff;\n border: 1px solid #e1e5e9;\n border-radius: 20px;\n font-size: 13px;\n font-weight: 500;\n color: #202124;\n\n svg {\n fill: #5f6368;\n flex-shrink: 0;\n }\n\n &.empty {\n color: #5f6368;\n background: #f1f3f4;\n border-color: #dadce0;\n }\n}\n\n// Highlight differences toggle switch\n.highlight-toggle-wrapper {\n display: inline-flex;\n align-items: center;\n gap: 6px;\n cursor: pointer;\n user-select: none;\n\n .highlight-toggle-checkbox {\n display: none !important;\n }\n\n .highlight-toggle-slider {\n position: relative;\n width: 37px;\n height: 20px;\n background: #E4E4E7;\n border-radius: 11px;\n transition: background-color 0.2s ease;\n\n &::after {\n content: \"\";\n position: absolute;\n top: 2px;\n left: 2px;\n width: 16px;\n height: 16px;\n background: white;\n border-radius: 50%;\n transition: transform 0.2s ease;\n box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);\n }\n }\n\n .highlight-toggle-checkbox:checked + .highlight-toggle-slider {\n background: #122940;\n\n &::after {\n transform: translateX(18px);\n }\n }\n\n .highlight-toggle-label {\n font-size: 14px;\n font-weight: 500;\n color: #122940;\n }\n}\n\n// Toolbar action buttons\n.toolbar-btn {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n background: none;\n\n svg {\n flex-shrink: 0;\n }\n}\n\n.brandy-compare-table .compare-table .compare-row-main .compare-product-cell {\n padding-bottom: 40px;\n}\n\n.compare-row {\n background-color: #ffffff;\n}\n\n// Row styling\n.compare-row:nth-child(even) {\n background-color: #FCFCFC;\n}\n\n// Cell borders - except main row\n.compare-row:not(.compare-row-main) {\n\n .compare-field-label,\n .compare-product-cell {\n border: 1px solid #F6F6F7;\n border-collapse: collapse;\n }\n}\n\n// Empty slot styles\n.compare-empty-slot {\n .compare-empty-slot-content {\n display: flex;\n align-items: center;\n justify-content: center;\n }\n\n // Add Product button in main row empty slots\n .add-product-slot-button {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n gap: 12px;\n width: 100%;\n height: 100%;\n min-height: 160px;\n background: #ffffff;\n border: 1px dashed #D3DCE5;\n border-radius: 4px;\n color: #5A6D80;\n cursor: pointer;\n transition: all 0.2s ease;\n font-family: inherit;\n font-size: 14px;\n font-weight: 500;\n\n &:hover {\n border-color: #122940;\n color: #122940;\n }\n\n svg {\n width: 20px;\n height: 20px;\n fill: currentColor;\n }\n\n span {\n font-size: 14px;\n }\n }\n\n // Static placeholder for empty slots (no animation - animation is only for actual loading state)\n .compare-skeleton-slot {\n .skeleton-line {\n width: 60%;\n height: 16px;\n background: #f0f0f0;\n border-radius: 4px;\n }\n }\n}\n\n// Highlight differences row styling\n.compare-row.highlight-difference {\n .compare-field-label {\n background-color: #f6fdff ;\n }\n\n .compare-product-cell:not(.compare-empty-slot) {\n background-color: #f6fdff;\n }\n}\n\n// N/A value styling\n.compare-product-cell.is-na {\n color: #9aa0a6;\n font-style: italic;\n}\n\n// When toolbar exists, adjust table container border-radius\n.brandy-compare-table:has(.compare-table-toolbar) {\n .compare-table-container {\n border-radius: 0 0 8px 8px;\n }\n}\n\n// Category warning modal styles\n.compare-category-warning-modal {\n display: none;\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n z-index: 500001;\n align-items: center;\n justify-content: center;\n\n &.is-active {\n display: flex;\n }\n\n .modal-backdrop {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background-color: rgba(0, 0, 0, 0.6);\n cursor: pointer;\n }\n\n .modal-content {\n position: relative;\n background: white;\n border-radius: 12px;\n max-width: 420px;\n width: 90%;\n padding: 24px;\n box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);\n text-align: center;\n }\n\n .modal-message {\n margin: 0;\n font-size: 14px;\n color: #5f6368;\n line-height: 1.5;\n }\n}\n\n// Max limit warning modal\n.compare-max-limit-modal {\n display: none;\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n z-index: 500001;\n align-items: center;\n justify-content: center;\n\n &.is-active {\n display: flex;\n }\n\n .modal-backdrop {\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background-color: rgba(0, 0, 0, 0.6);\n cursor: pointer;\n }\n\n .modal-content {\n position: relative;\n background: white;\n border-radius: 12px;\n max-width: 380px;\n width: 90%;\n padding: 24px;\n box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);\n text-align: center;\n }\n\n .modal-message {\n margin: 0;\n font-size: 14px;\n color: #5f6368;\n line-height: 1.5;\n }\n\n}\n\n.compare-modal__header {\n position: relative;\n padding: 20px;\n\n h3 {\n margin: 0;\n }\n\n .compare-modal__close {\n width: 20px;\n height: 20px;\n background: none;\n position: absolute;\n right: 20px;\n top: 50%;\n transform: translateY(-50%);\n }\n}"],"names":[],"sourceRoot":""}