{"version":3,"file":"blocks/ImageHotspots/style-index.css","mappings":";;;AAGC;EACC;EACA;EACA;EACA;EAGA;AAJF;AAOC;EACC;EACA;EACA;EAEA;AANF;;AAWA;EACC;EACA;AARD;;AAYA;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AATD;AAWC;EAEC;EACA;EACA;EACA;AAVF;AAaC;EACC;AAXF;;AAiBC;EACC;EACA;EACA;EACA;EACA;EACA;AAdF;AAiBC;EACC;IACC;EAfD;AACF;;AAmBA;EACC;IAAW;IAAY;EAdtB;EAeD;IAAY;IAAc;EAXzB;AACF;AAeC;EACC;EACA;EACA;EACA;EACA;AAbF;;AAmBC;EAIC;EACA;EACA;AAnBF;;AAwBA;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AArBD;AAwBC;EACC;EACA;EACA;EACA;EACA;EACA;EACA;AAtBF;AAyBC;EACC;AAvBF;;AA2BA;EACC;EACA;EACA;EACA;AAxBD;;AA2BA;EACC;EACA;AAxBD;AA0BC;EACC;AAxBF;;AA8BA;;EAEC;AA3BD;;AA+BA;EACC;EACA;EACA;EACA;EACA;EACA;AA5BD;;AAgCC;EACC;EACA;EACA;EACA;AA7BF;;AAiCA;EACC;EACA;EACA;AA9BD;;AAiCA;EACC;EACA;EACA;EACA;AA9BD;;AAiCA;EACC;EACA;EACA;AA9BD,C","sources":["webpack://brandy-blocks/./src/blocks/ImageHotspots/style.scss"],"sourcesContent":["// Image Hotspots Block - Frontend Styles\n\n.brandy-image-hotspots {\n\t.brandy-image-hotspots__stage {\n\t\tposition: relative;\n\t\tdisplay: block;\n\t\twidth: 100%;\n\t\tline-height: 0; // remove inline-block gap under image\n\t\t// Border radius comes from the block wrapper (Gutenberg border support).\n\t\t// No overflow:hidden here — tooltips sit outside the image bounds.\n\t\tborder-radius: inherit;\n\t}\n\n\t.brandy-image-hotspots__image {\n\t\tdisplay: block;\n\t\twidth: 100%;\n\t\theight: auto;\n\t\t// The img clips itself, so radius needs no overflow on an ancestor.\n\t\tborder-radius: inherit;\n\t}\n}\n\n// Hotspot wrapper — positioned over the image\n.brandy-hotspot-wrap {\n\tposition: absolute;\n\ttransform: translate(-50%, -50%);\n}\n\n// Marker button\n.brandy-hotspot-marker {\n\tposition: relative;\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: center;\n\twidth: 28px;\n\theight: 28px;\n\tborder: 2px solid #fff;\n\tborder-radius: 50%;\n\tbackground: var(--brandy-marker-color, #0061fe);\n\tcursor: pointer;\n\tpadding: 0;\n\tbox-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);\n\ttransition: transform 0.15s ease, box-shadow 0.15s ease;\n\n\t&:hover,\n\t&:focus-visible {\n\t\ttransform: scale(1.15);\n\t\tbox-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);\n\t\toutline: 2px solid #fff;\n\t\toutline-offset: 2px;\n\t}\n\n\t&.is-open {\n\t\tbox-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--brandy-marker-color, #0061fe);\n\t}\n}\n\n// Dot marker with pulse animation\n.brandy-hotspot-marker--dot {\n\t.brandy-hotspot-marker__dot {\n\t\tdisplay: block;\n\t\twidth: 10px;\n\t\theight: 10px;\n\t\tborder-radius: 50%;\n\t\tbackground: #fff;\n\t\tanimation: brandy-hotspot-pulse 2s ease-in-out infinite;\n\t}\n\n\t@media (prefers-reduced-motion: reduce) {\n\t\t.brandy-hotspot-marker__dot {\n\t\t\tanimation: none;\n\t\t}\n\t}\n}\n\n@keyframes brandy-hotspot-pulse {\n\t0%, 100% { opacity: 1; transform: scale(1); }\n\t50%       { opacity: 0.6; transform: scale(0.75); }\n}\n\n// Number marker\n.brandy-hotspot-marker--number {\n\t.brandy-hotspot-marker__number {\n\t\tfont-size: 12px;\n\t\tfont-weight: 700;\n\t\tcolor: #fff;\n\t\tline-height: 1;\n\t\tfont-family: sans-serif;\n\t}\n}\n\n// Icon marker\n.brandy-hotspot-marker--icon {\n\ti {\n\t\t// The glyph, not the button, is what should read as the marker's size,\n\t\t// and Phosphor draws on the text box — so this is a font size, not a\n\t\t// width. The 28px button leaves room for the disc around it.\n\t\tfont-size: 16px;\n\t\tline-height: 1;\n\t\tcolor: #fff;\n\t}\n}\n\n// Tooltip\n.brandy-hotspot-tooltip {\n\tposition: absolute;\n\tbottom: calc(100% + 10px);\n\tleft: 50%;\n\ttransform: translateX(-50%);\n\tmin-width: 200px;\n\tmax-width: 280px;\n\tbackground: #fff;\n\tborder-radius: 8px;\n\tbox-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);\n\tpadding: 14px;\n\tz-index: 100;\n\tfont-size: 14px;\n\tline-height: 1.5;\n\n\t// Caret pointing down\n\t&::after {\n\t\tcontent: '';\n\t\tposition: absolute;\n\t\ttop: 100%;\n\t\tleft: 50%;\n\t\ttransform: translateX(-50%);\n\t\tborder: 6px solid transparent;\n\t\tborder-top-color: #fff;\n\t}\n\n\t&[hidden] {\n\t\tdisplay: none;\n\t}\n}\n\n.brandy-hotspot-tooltip__title {\n\tmargin: 0 0 6px;\n\tfont-weight: 700;\n\tfont-size: 14px;\n\tcolor: #1a1a1a;\n}\n\n.brandy-hotspot-tooltip__description {\n\tmargin: 0 0 8px;\n\tcolor: #444;\n\n\tp:last-child {\n\t\tmargin-bottom: 0;\n\t}\n}\n\n// Button wrappers — Gutenberg wp-block-button handles actual button styling.\n// Small top margin so buttons sit below the tooltip content.\n.brandy-hotspot-tooltip__button-wrap,\n.brandy-hotspot-product__button-wrap {\n\tmargin-top: 8px;\n}\n\n// Product card inside tooltip\n.brandy-hotspot-product {\n\tdisplay: flex;\n\tflex-direction: column;\n\tgap: 8px;\n\tmargin-top: 8px;\n\tpadding-top: 8px;\n\tborder-top: 1px solid #eee;\n}\n\n.brandy-hotspot-product__thumbnail {\n\timg {\n\t\tdisplay: block;\n\t\twidth: 100%;\n\t\theight: auto;\n\t\tborder-radius: 4px;\n\t}\n}\n\n.brandy-hotspot-product__info {\n\tdisplay: flex;\n\tflex-direction: column;\n\tgap: 2px;\n}\n\n.brandy-hotspot-product__name {\n\tmargin: 0;\n\tfont-weight: 600;\n\tfont-size: 13px;\n\tcolor: #1a1a1a;\n}\n\n.brandy-hotspot-product__price {\n\tmargin: 0;\n\tfont-size: 13px;\n\tcolor: #555;\n}\n"],"names":[],"sourceRoot":""}