/**
 * Custom Size Pricing for WooCommerce - product page styles.
 *
 * This file is loaded by CSP_Frontend::enqueue_assets(). Previously these rules
 * were printed inline as a <style> block on every product page; now the browser
 * can cache them.
 */

.csp-fx-warning{background:#fff3cd;border:1px solid #ffe69c;color:#664d03;padding:8px 12px;border-radius:4px;margin-bottom:10px;font-size:0.9em;max-width:520px;}
.csp-fields-wrapper{margin:15px 0;padding:15px;border:1px solid #e0e0e0;border-radius:6px;background:#fafafa;max-width:520px;}
.csp-fields-wrapper .csp-field{margin:0 0 12px 0;}
.csp-fields-wrapper label{display:block;font-weight:600;margin-bottom:4px;}
.csp-fields-wrapper input[type="number"],
.csp-fields-wrapper input[type="text"],
.csp-fields-wrapper input[type="file"],
.csp-fields-wrapper textarea,
.csp-fields-wrapper select{width:100%;padding:8px 10px;border:1px solid #ccc;border-radius:4px;box-sizing:border-box;}
.csp-swatches{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:4px;}
.csp-swatch{width:34px;height:34px;border-radius:50%;border:2px solid #fff;outline:1px solid #ccc;cursor:pointer;padding:0;box-sizing:border-box;}
.csp-swatch.is-selected{outline:2px solid #333;outline-offset:1px;}
.csp-swatch.is-transparent{background-image:linear-gradient(45deg,#ccc 25%,transparent 25%,transparent 75%,#ccc 75%),linear-gradient(45deg,#ccc 25%,transparent 25%,transparent 75%,#ccc 75%);background-size:8px 8px;background-position:0 0,4px 4px;border-style:dashed;}
.csp-swatch-label{font-size:0.75em;color:#666;margin-top:2px;}
#csp_color{display:none;}
.csp-shape-row{display:flex;flex-wrap:wrap;gap:8px;}
.csp-shape-btn{flex:1 1 auto;min-width:110px;padding:8px 10px;border:1px solid #ccc;border-radius:4px;background:#fff;cursor:pointer;text-align:center;font-size:0.85em;}
.csp-shape-btn.is-selected{border-color:#333;background:#f0f0f0;font-weight:600;}
.csp-file-field, .csp-radius-field{display:none;}
.csp-section{padding:0;overflow:visible;border:none;background:transparent;box-shadow:none;margin-bottom:14px;}
.csp-section-head{display:flex !important;align-items:center;gap:10px;width:100%;padding:12px 14px !important;background:#f1f4f7 !important;border:none !important;border-radius:10px !important;cursor:pointer;text-align:left;font:inherit;color:inherit;box-shadow:none !important;margin:0 0 2px !important;}
.csp-section-head:hover{background:#e9eef3 !important;}
.csp-section-status{flex:0 0 auto;width:20px;height:20px;border-radius:50%;border:2px solid #b9d4e8;background:#fff;position:relative;}
.csp-section.is-done .csp-section-status{background:#2f9be3;border-color:#2f9be3;}
.csp-section.is-done .csp-section-status:after{content:'';position:absolute;left:5px;top:1px;width:5px;height:10px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg);}
.csp-section-titles{flex:1 1 auto;display:flex;flex-direction:column;gap:2px;min-width:0;}
.csp-section-title{font-weight:600;font-size:1em;color:#2271b1;}
.csp-section-summary{font-size:0.82em;color:#6b7b88;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.csp-section-summary:empty{display:none;}
.csp-section-chevron{flex:0 0 auto;width:10px;height:10px;border:solid #9bb4c6;border-width:0 2px 2px 0;transform:rotate(-135deg);margin-right:4px;transition:transform .2s;}
.csp-section.is-collapsed .csp-section-chevron{transform:rotate(45deg);}
.csp-section-body{padding:14px 2px 4px;}
.csp-section.is-collapsed .csp-section-body{display:none;}
.csp-mode-cards{display:flex;gap:10px;margin-bottom:12px;}
.csp-mode-card{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;padding:14px 6px;border:1px solid #ccd6e0;border-radius:8px;background:#fff;color:#2271b1;cursor:pointer;font-size:0.85em;}
.csp-mode-card.is-selected{border-color:#2271b1;background:#f0f7fc;box-shadow:0 0 0 1px #2271b1;}
.csp-shape-tabs{display:flex;gap:4px;margin-bottom:8px;flex-wrap:wrap;}
.csp-shape-tab{padding:6px 14px;border:none;border-radius:5px;background:transparent;color:#2271b1;cursor:pointer;font-size:0.85em;}
.csp-shape-tab.is-selected{background:#2271b1;color:#fff;}
.csp-shape-grid-wrap{background:#f4f9fd;border-radius:8px;padding:10px;margin-bottom:12px;}
.csp-shape-grid{display:flex;flex-wrap:wrap;gap:8px;}
.csp-shape-cell{width:56px;height:56px;display:flex;align-items:center;justify-content:center;border:1px solid transparent;border-radius:6px;background:transparent;color:#5b7f9d;cursor:pointer;}
.csp-shape-cell:hover{border-color:#a8c4da;background:#fff;}
.csp-shape-cell.is-selected{border-color:#2271b1;background:#fff;color:#2271b1;box-shadow:0 0 0 1px #2271b1;}
.csp-size-row{display:flex;gap:10px;}
.csp-size-row .csp-field{flex:1;}
.csp-size-row label small{font-weight:400;color:#888;}
.csp-drop-area{display:flex;flex-direction:column;align-items:center;gap:2px;border:2px dashed #a8c4da;border-radius:8px;padding:26px 10px;background:#f4f9fd;color:#2271b1;cursor:pointer;text-align:center;}
.csp-drop-area.is-dragover{background:#e2f0fa;border-color:#2271b1;}
#csp_custom_file{display:none;}
.csp-pattern-card{display:flex;flex-direction:column;align-items:center;gap:4px;padding:10px 14px;border:1px solid #ccd6e0;border-radius:8px;background:#fff;color:#2271b1;cursor:pointer;font-size:0.8em;}
.csp-pattern-card.is-selected{border-color:#2271b1;background:#f0f7fc;box-shadow:0 0 0 1px #2271b1;}
.csp-pattern-form{border:1px solid #cfe3f2;border-radius:8px;padding:10px;margin-bottom:10px;background:#f4f9fd;}
.csp-pattern-apply{width:100%;padding:9px;border:none;border-radius:6px;background:#2f9be3;color:#fff;font-weight:600;cursor:pointer;}
.csp-pattern-apply:hover{background:#2271b1;}
.csp-file-preview{display:block;margin-top:8px;}
.csp-file-preview embed{width:100%;height:220px;border:1px solid #ddd;border-radius:4px;}
.csp-file-preview .csp-file-name-box{display:block;padding:8px 10px;background:#fff;border:1px solid #ddd;border-radius:4px;font-size:0.85em;color:#555;}
.csp-hole-patterns{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-bottom:8px;font-size:0.85em;}
.csp-pattern-btn{padding:6px 10px;border:1px solid #ccc;border-radius:4px;background:#fff;cursor:pointer;font-size:0.95em;}
.csp-pattern-btn:hover{border-color:#333;}
.csp-pattern-edge{display:inline-flex;align-items:center;gap:4px;color:#555;}
.csp-pattern-edge input{padding:4px 6px !important;width:64px !important;}
.csp-radius-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px 12px;}
.csp-hole-box{border:1px dashed #ccc;border-radius:6px;padding:10px;margin:6px 0 12px;background:#fff;}
.csp-hole-box label{font-weight:600;}
.csp-hole-corner-row{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px;}
.csp-hole-corner-btn{flex:1 1 auto;min-width:80px;padding:6px 8px;border:1px solid #ccc;border-radius:4px;background:#fff;cursor:pointer;font-size:0.8em;}
.csp-hole-corner-btn.is-selected{border-color:#333;background:#f0f0f0;font-weight:600;}
.csp-hole-offsets{display:flex;gap:8px;}
.csp-hole-mode-row{display:flex;gap:14px;margin-bottom:8px;font-weight:400;}
.csp-hole-mode-row label{display:inline-flex;align-items:center;gap:4px;font-weight:400;}
.csp-hole-row-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px;}
.csp-hole-row-header strong{font-size:0.85em;}
.csp-remove-hole-btn{background:none;border:none;color:#c0392b;cursor:pointer;font-size:0.8em;text-decoration:underline;padding:0;}
.csp-add-hole-btn{margin-top:4px;padding:8px 14px;border:1px dashed #999;border-radius:4px;background:#fff;cursor:pointer;font-size:0.85em;width:100%;}
.csp-diagram-wrap{margin:0;text-align:center;}
.csp-preview-block{margin:18px 0 12px;border:1px solid #dbe4ec;border-radius:10px;background:#fbfdff;overflow:hidden;}
.csp-preview-head{padding:9px 14px;background:#eef4fa;border-bottom:1px solid #dbe4ec;font-weight:600;font-size:0.9em;color:#2271b1;}
.csp-preview-block .csp-diagram-wrap{padding:14px;}
.csp-live-price{font-size:1.1em;margin:12px 0 4px 0;}
.csp-live-price-note{font-size:0.85em;color:#666;margin:0;}
@media (max-width: 600px) {
	.csp-fields-wrapper{padding:10px;max-width:100%;}
	.csp-shape-btn{min-width:90px;font-size:0.8em;padding:6px 8px;}
	.csp-swatch{width:30px;height:30px;}
}

/* --- Inline notice / error display (instead of window.alert) --- */
.csp-notice{display:flex;align-items:flex-start;gap:10px;background:#fdecea;border:1px solid #f5c2c0;border-left:4px solid #d63638;color:#8a1f1d;padding:11px 13px;border-radius:6px;margin:0 0 14px;font-size:0.9em;line-height:1.45;max-width:520px;}
.csp-notice-text{flex:1 1 auto;}
.csp-notice-close{flex:0 0 auto;background:none;border:none;color:#8a1f1d;font-size:1.25em;line-height:1;cursor:pointer;padding:0 2px;opacity:.65;}
.csp-notice-close:hover{opacity:1;}
.csp-fields-wrapper .csp-field-invalid{border-color:#d63638 !important;box-shadow:0 0 0 1px #d63638;}

/* --- Main price area below the product title (updated live as dimensions change) --- */
.csp-price-html{display:inline-flex;flex-wrap:wrap;align-items:baseline;gap:6px;}
.csp-price-html .csp-price-main{font:inherit;color:inherit;}
/* Before any dimensions are entered: show a prompt, not something that looks like a price. */
.csp-price-html .csp-price-main.csp-price-empty{font-size:0.62em;font-weight:400;opacity:.75;letter-spacing:0;}
.csp-price-html .csp-price-suffix{font-size:0.6em;font-weight:400;opacity:.8;}
.csp-price-html .csp-price-total{flex-basis:100%;font-size:0.42em;font-weight:400;opacity:.85;line-height:1.4;}
.csp-price-html .csp-price-total[hidden]{display:none;}

/* --- "Price by size" label shown instead of a base price in listings --- */
.csp-price-by-size{font-size:0.95em;opacity:0.85;}