@bigz-app/booking-widget 0.1.16 → 0.1.18

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -421,6 +421,232 @@
421
421
  y(() => {
422
422
  setIsHydrated(true);
423
423
  }, []);
424
+ // CSS Reset styles to isolate the widget from external styles
425
+ const cssReset = `
426
+ /* CSS Reset for Booking Widget - Prevents external styles from affecting the widget */
427
+ .booking-widget-container,
428
+ .booking-widget-container *,
429
+ .booking-widget-container *::before,
430
+ .booking-widget-container *::after {
431
+ /* Box model reset */
432
+ box-sizing: border-box;
433
+ margin: 0;
434
+ padding: 0;
435
+ border: 0;
436
+
437
+ /* Typography reset */
438
+ font-size: 100%;
439
+ font-family: inherit;
440
+ font-weight: inherit;
441
+ font-style: inherit;
442
+ line-height: inherit;
443
+ color: inherit;
444
+ text-decoration: none;
445
+ text-transform: none;
446
+ letter-spacing: normal;
447
+ word-spacing: normal;
448
+
449
+ /* Layout reset */
450
+ vertical-align: baseline;
451
+ background: transparent;
452
+ outline: none;
453
+
454
+ /* Appearance reset */
455
+ border-radius: 0;
456
+ box-shadow: none;
457
+ text-shadow: none;
458
+ opacity: 1;
459
+ visibility: visible;
460
+
461
+ /* Interactive elements reset */
462
+ cursor: inherit;
463
+ user-select: inherit;
464
+
465
+ /* Animation reset */
466
+ transition: none;
467
+ transform: none;
468
+ animation: none;
469
+
470
+ /* Flexbox/Grid reset */
471
+ flex: none;
472
+ align-self: auto;
473
+ justify-self: auto;
474
+
475
+ /* Position reset */
476
+ position: static;
477
+ top: auto;
478
+ right: auto;
479
+ bottom: auto;
480
+ left: auto;
481
+ z-index: auto;
482
+
483
+ /* Display reset */
484
+ float: none;
485
+ clear: none;
486
+
487
+ /* Overflow reset */
488
+ overflow: visible;
489
+
490
+ /* Table reset */
491
+ border-collapse: separate;
492
+ border-spacing: 0;
493
+ caption-side: top;
494
+ empty-cells: show;
495
+ table-layout: auto;
496
+
497
+ /* List reset */
498
+ list-style: none;
499
+
500
+ /* Form reset */
501
+ resize: none;
502
+
503
+ /* Misc reset */
504
+ quotes: none;
505
+ content: normal;
506
+ }
507
+
508
+ /* Specific element resets */
509
+ .booking-widget-container input,
510
+ .booking-widget-container textarea,
511
+ .booking-widget-container select,
512
+ .booking-widget-container button {
513
+ background: transparent;
514
+ border: none;
515
+ outline: none;
516
+ appearance: none;
517
+ -webkit-appearance: none;
518
+ -moz-appearance: none;
519
+ font-family: inherit;
520
+ font-size: inherit;
521
+ line-height: inherit;
522
+ }
523
+
524
+ .booking-widget-container button {
525
+ cursor: pointer;
526
+ background: transparent;
527
+ border: none;
528
+ padding: 0;
529
+ }
530
+
531
+ .booking-widget-container a {
532
+ color: inherit;
533
+ text-decoration: none;
534
+ }
535
+
536
+ .booking-widget-container img {
537
+ border-style: none;
538
+ vertical-align: middle;
539
+ max-width: 100%;
540
+ height: auto;
541
+ }
542
+
543
+ .booking-widget-container table {
544
+ border-collapse: collapse;
545
+ border-spacing: 0;
546
+ }
547
+
548
+ .booking-widget-container ol,
549
+ .booking-widget-container ul {
550
+ list-style: none;
551
+ }
552
+
553
+ .booking-widget-container blockquote,
554
+ .booking-widget-container q {
555
+ quotes: none;
556
+ }
557
+
558
+ .booking-widget-container blockquote::before,
559
+ .booking-widget-container blockquote::after,
560
+ .booking-widget-container q::before,
561
+ .booking-widget-container q::after {
562
+ content: '';
563
+ content: none;
564
+ }
565
+
566
+ /* Ensure the container itself has proper defaults */
567
+ .booking-widget-container {
568
+ /* Set container defaults that should not be inherited */
569
+ display: block;
570
+ position: relative;
571
+ width: auto;
572
+ height: auto;
573
+ max-width: none;
574
+ max-height: none;
575
+ min-width: 0;
576
+ min-height: 0;
577
+
578
+ /* Typography defaults */
579
+ font-family: var(--bw-font-family, system-ui, -apple-system, sans-serif);
580
+ font-size: var(--bw-font-size, 14px);
581
+ line-height: 1.5;
582
+ color: var(--bw-text-color, #1e293b);
583
+
584
+ /* Layout defaults */
585
+ text-align: left;
586
+ direction: ltr;
587
+
588
+ /* Ensure isolation */
589
+ isolation: isolate;
590
+ }
591
+
592
+ /* Prevent external CSS from affecting portals */
593
+ #booking-widget-portal,
594
+ #booking-widget-portal *,
595
+ #booking-widget-portal *::before,
596
+ #booking-widget-portal *::after {
597
+ box-sizing: border-box;
598
+ margin: 0;
599
+ padding: 0;
600
+ border: 0;
601
+ font-size: 100%;
602
+ font-family: inherit;
603
+ font-weight: inherit;
604
+ font-style: inherit;
605
+ line-height: inherit;
606
+ color: inherit;
607
+ text-decoration: none;
608
+ vertical-align: baseline;
609
+ background: transparent;
610
+ outline: none;
611
+ border-radius: 0;
612
+ box-shadow: none;
613
+ text-shadow: none;
614
+ opacity: 1;
615
+ visibility: visible;
616
+ cursor: inherit;
617
+ user-select: inherit;
618
+ transition: none;
619
+ transform: none;
620
+ animation: none;
621
+ }
622
+
623
+ #booking-widget-portal {
624
+ font-family: var(--bw-font-family, system-ui, -apple-system, sans-serif);
625
+ font-size: var(--bw-font-size, 14px);
626
+ line-height: 1.5;
627
+ color: var(--bw-text-color, #1e293b);
628
+ text-align: left;
629
+ direction: ltr;
630
+ isolation: isolate;
631
+ }
632
+ `;
633
+ // Inject CSS reset styles
634
+ y(() => {
635
+ const existingStyle = document.getElementById("booking-widget-reset");
636
+ if (!existingStyle) {
637
+ const style = document.createElement("style");
638
+ style.id = "booking-widget-reset";
639
+ style.textContent = cssReset;
640
+ document.head.appendChild(style);
641
+ }
642
+ // Cleanup function to remove styles when component unmounts
643
+ return () => {
644
+ const styleElement = document.getElementById("booking-widget-reset");
645
+ if (styleElement) {
646
+ styleElement.remove();
647
+ }
648
+ };
649
+ }, [cssReset]);
424
650
  // PERFORMANCE OPTIMIZATION: Memoize style calculations
425
651
  const themedStyles = T$1(() => {
426
652
  const themeName = config.theme || "light-fresh";
@@ -6579,10 +6805,132 @@
6579
6805
  }
6580
6806
  const IconCheck$1 = ({ size = 16, color = "#10b981" }) => (u$1("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: color, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: u$1("polyline", { points: "20 6 9 17 4 12" }) }));
6581
6807
  const IconWave$1 = ({ size = 20, color = "#0ea5e9" }) => (u$1("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", stroke: color, strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [u$1("path", { d: "M2 18c2-2 6-2 8 0s6 2 8 0 6-2 8 0" }), u$1("path", { d: "M2 12c2-2 6-2 8 0s6 2 8 0 6-2 8 0" }), u$1("path", { d: "M2 6c2-2 6-2 8 0s6 2 8 0 6-2 8 0" })] }));
6808
+ // Portal component that renders dialog at document body level
6809
+ function DialogPortal({ children, isOpen }) {
6810
+ const [portalRoot, setPortalRoot] = Rn.useState(null);
6811
+ Rn.useEffect(() => {
6812
+ if (!isOpen)
6813
+ return;
6814
+ // Find the booking widget container to copy CSS custom properties
6815
+ const widgetContainer = document.querySelector(".booking-widget-container");
6816
+ let cssProperties = "";
6817
+ if (widgetContainer) {
6818
+ const computedStyles = getComputedStyle(widgetContainer);
6819
+ // List of all CSS custom properties used in the booking widget
6820
+ const bwProperties = [
6821
+ "--bw-highlight-color",
6822
+ "--bw-highlight-color-rgb",
6823
+ "--bw-background-color",
6824
+ "--bw-surface-color",
6825
+ "--bw-text-color",
6826
+ "--bw-text-muted",
6827
+ "--bw-border-color",
6828
+ "--bw-success-color",
6829
+ "--bw-warning-color",
6830
+ "--bw-error-color",
6831
+ "--bw-border-radius",
6832
+ "--bw-border-radius-small",
6833
+ "--bw-spacing",
6834
+ "--bw-spacing-large",
6835
+ "--bw-font-family",
6836
+ "--bw-font-size",
6837
+ "--bw-font-size-large",
6838
+ "--bw-shadow-lg",
6839
+ "--bw-shadow-md",
6840
+ "--bw-highlight-muted",
6841
+ "--bw-highlight-subtle",
6842
+ "--bw-text-subtle",
6843
+ ];
6844
+ // Copy each property directly
6845
+ for (const property of bwProperties) {
6846
+ const value = computedStyles.getPropertyValue(property).trim();
6847
+ if (value) {
6848
+ cssProperties += `${property}: ${value}; `;
6849
+ }
6850
+ }
6851
+ }
6852
+ // Create portal root
6853
+ const portal = document.createElement("div");
6854
+ portal.id = "booking-widget-portal";
6855
+ portal.style.cssText = `
6856
+ position: fixed;
6857
+ top: 0;
6858
+ left: 0;
6859
+ width: 100%;
6860
+ height: 100%;
6861
+ z-index: 999999;
6862
+ pointer-events: none;
6863
+ ${cssProperties}
6864
+ `;
6865
+ // Insert at the beginning of body
6866
+ document.body.insertBefore(portal, document.body.firstChild);
6867
+ setPortalRoot(portal);
6868
+ // Prevent body scroll
6869
+ document.body.style.overflow = "hidden";
6870
+ return () => {
6871
+ // Cleanup
6872
+ if (portal.parentNode) {
6873
+ portal.parentNode.removeChild(portal);
6874
+ }
6875
+ document.body.style.overflow = "";
6876
+ setPortalRoot(null);
6877
+ };
6878
+ }, [isOpen]);
6879
+ if (!isOpen || !portalRoot)
6880
+ return null;
6881
+ // Render children into portal using a ref callback
6882
+ const renderIntoPortal = Rn.useCallback((element) => {
6883
+ if (element && portalRoot) {
6884
+ portalRoot.appendChild(element);
6885
+ }
6886
+ }, [portalRoot]);
6887
+ return (u$1("div", { ref: renderIntoPortal, style: {
6888
+ pointerEvents: "auto",
6889
+ width: "100%",
6890
+ height: "100%",
6891
+ }, children: children }));
6892
+ }
6582
6893
  function EventTypeDetailsDialog({ isOpen, onClose, eventType, onEventTypeSelect, }) {
6583
6894
  if (!isOpen || !eventType)
6584
6895
  return null;
6585
6896
  const isAvailable = eventType.hasAvailableInstances;
6897
+ // Get fallback styles from the widget container for cases where CSS variables aren't available
6898
+ const [fallbackStyles, setFallbackStyles] = Rn.useState({});
6899
+ Rn.useEffect(() => {
6900
+ if (!isOpen)
6901
+ return;
6902
+ const handleEscape = (event) => {
6903
+ if (event.key === "Escape") {
6904
+ onClose();
6905
+ }
6906
+ };
6907
+ document.addEventListener("keydown", handleEscape);
6908
+ const widgetContainer = document.querySelector(".booking-widget-container");
6909
+ if (widgetContainer) {
6910
+ const computedStyles = getComputedStyle(widgetContainer);
6911
+ // Extract fallback values
6912
+ const fallbacks = {
6913
+ "--bw-highlight-color": computedStyles.getPropertyValue("--bw-highlight-color").trim() || "#3b82f6",
6914
+ "--bw-background-color": computedStyles.getPropertyValue("--bw-background-color").trim() || "#f8fafc",
6915
+ "--bw-surface-color": computedStyles.getPropertyValue("--bw-surface-color").trim() || "#ffffff",
6916
+ "--bw-text-color": computedStyles.getPropertyValue("--bw-text-color").trim() || "#1e293b",
6917
+ "--bw-text-muted": computedStyles.getPropertyValue("--bw-text-muted").trim() || "#64748b",
6918
+ "--bw-border-color": computedStyles.getPropertyValue("--bw-border-color").trim() || "#e2e8f0",
6919
+ "--bw-success-color": computedStyles.getPropertyValue("--bw-success-color").trim() || "#10b981",
6920
+ "--bw-error-color": computedStyles.getPropertyValue("--bw-error-color").trim() || "#ef4444",
6921
+ "--bw-border-radius": computedStyles.getPropertyValue("--bw-border-radius").trim() || "8px",
6922
+ "--bw-spacing": computedStyles.getPropertyValue("--bw-spacing").trim() || "16px",
6923
+ "--bw-spacing-large": computedStyles.getPropertyValue("--bw-spacing-large").trim() || "24px",
6924
+ "--bw-font-family": computedStyles.getPropertyValue("--bw-font-family").trim() || "system-ui, sans-serif",
6925
+ "--bw-shadow-md": computedStyles.getPropertyValue("--bw-shadow-md").trim() ||
6926
+ "0 4px 6px -1px rgba(0, 0, 0, 0.1)",
6927
+ };
6928
+ setFallbackStyles(fallbacks);
6929
+ }
6930
+ return () => {
6931
+ document.removeEventListener("keydown", handleEscape);
6932
+ };
6933
+ }, [isOpen]);
6586
6934
  // Memoize the complete HTML including styles to prevent DOM updates
6587
6935
  const descriptionHtml = Rn.useMemo(() => {
6588
6936
  if (!eventType.description)
@@ -6626,150 +6974,153 @@
6626
6974
  onEventTypeSelect(eventType);
6627
6975
  onClose();
6628
6976
  };
6629
- return (u$1("div", { style: {
6630
- position: "fixed",
6631
- top: 0,
6632
- left: 0,
6633
- right: 0,
6634
- bottom: 0,
6635
- zIndex: 10000,
6636
- display: "flex",
6637
- alignItems: "center",
6638
- justifyContent: "center",
6639
- padding: "var(--bw-spacing)",
6640
- }, onClick: onClose, children: u$1("div", { style: {
6641
- backgroundColor: "var(--bw-surface-color)",
6642
- borderRadius: "var(--bw-border-radius)",
6643
- maxWidth: "700px",
6644
- width: "100%",
6645
- maxHeight: "90vh",
6646
- overflow: "auto",
6647
- position: "relative",
6648
- border: `1px solid var(--bw-border-color)`,
6649
- boxShadow: "0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)",
6650
- fontFamily: "var(--bw-font-family)",
6651
- }, onClick: (e) => e.stopPropagation(), children: [u$1("button", { onClick: onClose, style: {
6652
- position: "absolute",
6653
- top: "var(--bw-spacing)",
6654
- right: "var(--bw-spacing)",
6977
+ return (u$1(DialogPortal, { isOpen: isOpen, children: u$1("div", { style: fallbackStyles, children: u$1("div", { style: {
6978
+ position: "fixed",
6979
+ top: 0,
6980
+ left: 0,
6981
+ right: 0,
6982
+ bottom: 0,
6983
+ backgroundColor: "rgba(0, 0, 0, 0.5)",
6984
+ backdropFilter: "blur(8px)",
6985
+ WebkitBackdropFilter: "blur(8px)",
6986
+ display: "flex",
6987
+ alignItems: "center",
6988
+ justifyContent: "center",
6989
+ padding: "var(--bw-spacing)",
6990
+ zIndex: 999999,
6991
+ }, onClick: onClose, children: u$1("div", { style: {
6655
6992
  backgroundColor: "var(--bw-surface-color)",
6656
- border: "1px solid var(--bw-border-color)",
6657
- fontSize: "24px",
6658
- cursor: "pointer",
6659
- color: "var(--bw-text-muted)",
6660
- width: "32px",
6661
- height: "32px",
6662
- display: "flex",
6663
- alignItems: "center",
6664
- justifyContent: "center",
6665
6993
  borderRadius: "var(--bw-border-radius)",
6666
- zIndex: 10,
6667
- }, onMouseEnter: (e) => {
6668
- e.currentTarget.style.backgroundColor = "var(--bw-border-color)";
6669
- }, onMouseLeave: (e) => {
6670
- e.currentTarget.style.backgroundColor = "var(--bw-surface-color)";
6671
- }, children: "\u00D7" }), u$1("div", { style: { padding: "var(--bw-spacing-large)" }, children: [u$1("div", { style: {
6672
- marginBottom: "24px",
6673
- padding: "16px",
6674
- backgroundColor: "var(--bw-background-color)",
6675
- borderRadius: "var(--bw-border-radius)",
6676
- border: `1px solid var(--bw-border-color)`,
6677
- }, children: [u$1("div", { children: [u$1("div", { style: {
6678
- fontSize: "14px",
6679
- fontWeight: "600",
6680
- color: "var(--bw-highlight-color)",
6681
- marginBottom: "8px",
6682
- fontFamily: "var(--bw-font-family)",
6683
- }, children: eventType.category.name }), u$1("h2", { style: {
6684
- fontSize: "28px",
6685
- fontWeight: "700",
6686
- color: "var(--bw-text-color)",
6687
- marginBottom: "16px",
6688
- lineHeight: "1.3",
6689
- fontFamily: "var(--bw-font-family)",
6690
- margin: "0 0 16px 0",
6691
- }, children: eventType.name })] }), eventType.highlights && eventType.highlights.length > 0 && (u$1("div", { style: { display: "flex", alignItems: "center", gap: "8px" }, children: u$1("div", { style: { marginBottom: "24px" }, children: u$1("ul", { style: {
6692
- listStyle: "none",
6693
- padding: "0",
6694
- margin: "0",
6695
- display: "flex",
6696
- flexDirection: "column",
6697
- gap: "3px",
6698
- }, children: eventType.highlights
6699
- .filter((highlight) => highlight.trim())
6700
- .map((highlight, index) => (u$1("li", { style: {
6701
- display: "flex",
6702
- alignItems: "flex-start",
6703
- gap: "10px",
6704
- fontFamily: "var(--bw-font-family)",
6705
- fontSize: "16px",
6706
- lineHeight: "1.6",
6707
- color: "var(--bw-text-color)",
6708
- }, children: [u$1("div", { style: { marginTop: "4px", flexShrink: 0 }, children: u$1(IconCheck$1, { size: 16, color: "var(--bw-success-color)" }) }), u$1("span", { children: highlight.trim() })] }, index))) }) }) }))] }), eventType.description && (u$1("div", { style: {
6709
- marginBottom: "24px",
6994
+ maxWidth: "700px",
6995
+ width: "100%",
6996
+ maxHeight: "90vh",
6997
+ overflow: "auto",
6998
+ position: "relative",
6999
+ border: `1px solid var(--bw-border-color)`,
7000
+ boxShadow: "0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)",
7001
+ fontFamily: "var(--bw-font-family)",
7002
+ }, onClick: (e) => e.stopPropagation(), children: [u$1("button", { onClick: onClose, style: {
7003
+ position: "absolute",
7004
+ top: "var(--bw-spacing)",
7005
+ right: "var(--bw-spacing)",
7006
+ backgroundColor: "var(--bw-surface-color)",
7007
+ border: "1px solid var(--bw-border-color)",
7008
+ fontSize: "24px",
7009
+ cursor: "pointer",
6710
7010
  color: "var(--bw-text-muted)",
6711
- fontSize: "16px",
6712
- lineHeight: "1.6",
6713
- fontFamily: "var(--bw-font-family)",
6714
- padding: "0px 20px",
6715
- }, dangerouslySetInnerHTML: { __html: descriptionHtml } })), u$1("div", { style: {
7011
+ width: "32px",
7012
+ height: "32px",
6716
7013
  display: "flex",
6717
- justifyContent: "space-between",
6718
7014
  alignItems: "center",
6719
- marginTop: "32px",
6720
- padding: "20px",
6721
- backgroundColor: "var(--bw-background-color)",
7015
+ justifyContent: "center",
6722
7016
  borderRadius: "var(--bw-border-radius)",
6723
- border: `1px solid var(--bw-border-color)`,
6724
- }, children: [u$1("div", { children: [u$1("div", { style: {
6725
- fontSize: "14px",
6726
- color: "var(--bw-text-muted)",
6727
- fontFamily: "var(--bw-font-family)",
6728
- marginBottom: "4px",
6729
- }, children: "Preis ab" }), u$1("div", { style: {
6730
- fontSize: "32px",
6731
- fontWeight: "700",
6732
- color: "var(--bw-text-color)",
6733
- fontFamily: "var(--bw-font-family)",
6734
- }, children: formatCurrency(eventType.basePrice) })] }), isAvailable && (u$1("button", { onClick: handleBookingClick, style: {
6735
- backgroundColor: "var(--bw-highlight-color)",
6736
- color: "white",
6737
- padding: "14px 28px",
6738
- border: "none",
7017
+ zIndex: 10,
7018
+ }, onMouseEnter: (e) => {
7019
+ e.currentTarget.style.backgroundColor = "var(--bw-border-color)";
7020
+ }, onMouseLeave: (e) => {
7021
+ e.currentTarget.style.backgroundColor = "var(--bw-surface-color)";
7022
+ }, children: "\u00D7" }), u$1("div", { style: { padding: "var(--bw-spacing-large)" }, children: [u$1("div", { style: {
7023
+ marginBottom: "24px",
7024
+ padding: "16px",
7025
+ backgroundColor: "var(--bw-background-color)",
6739
7026
  borderRadius: "var(--bw-border-radius)",
7027
+ border: `1px solid var(--bw-border-color)`,
7028
+ }, children: [u$1("div", { children: [u$1("div", { style: {
7029
+ fontSize: "14px",
7030
+ fontWeight: "600",
7031
+ color: "var(--bw-highlight-color)",
7032
+ marginBottom: "8px",
7033
+ fontFamily: "var(--bw-font-family)",
7034
+ }, children: eventType.category.name }), u$1("h2", { style: {
7035
+ fontSize: "28px",
7036
+ fontWeight: "700",
7037
+ color: "var(--bw-text-color)",
7038
+ marginBottom: "16px",
7039
+ lineHeight: "1.3",
7040
+ fontFamily: "var(--bw-font-family)",
7041
+ margin: "0 0 16px 0",
7042
+ }, children: eventType.name })] }), eventType.highlights && eventType.highlights.length > 0 && (u$1("div", { style: { display: "flex", alignItems: "center", gap: "8px" }, children: u$1("div", { style: { marginBottom: "24px" }, children: u$1("ul", { style: {
7043
+ listStyle: "none",
7044
+ padding: "0",
7045
+ margin: "0",
7046
+ display: "flex",
7047
+ flexDirection: "column",
7048
+ gap: "3px",
7049
+ }, children: eventType.highlights
7050
+ .filter((highlight) => highlight.trim())
7051
+ .map((highlight, index) => (u$1("li", { style: {
7052
+ display: "flex",
7053
+ alignItems: "flex-start",
7054
+ gap: "10px",
7055
+ fontFamily: "var(--bw-font-family)",
7056
+ fontSize: "16px",
7057
+ lineHeight: "1.6",
7058
+ color: "var(--bw-text-color)",
7059
+ }, children: [u$1("div", { style: { marginTop: "4px", flexShrink: 0 }, children: u$1(IconCheck$1, { size: 16, color: "var(--bw-success-color)" }) }), u$1("span", { children: highlight.trim() })] }, index))) }) }) }))] }), eventType.description && (u$1("div", { style: {
7060
+ marginBottom: "24px",
7061
+ color: "var(--bw-text-muted)",
6740
7062
  fontSize: "16px",
6741
- fontWeight: "600",
7063
+ lineHeight: "1.6",
6742
7064
  fontFamily: "var(--bw-font-family)",
7065
+ padding: "0px 20px",
7066
+ }, dangerouslySetInnerHTML: { __html: descriptionHtml } })), u$1("div", { style: {
6743
7067
  display: "flex",
7068
+ justifyContent: "space-between",
6744
7069
  alignItems: "center",
6745
- gap: "8px",
6746
- cursor: "pointer",
6747
- transition: "all 0.2s ease",
6748
- }, onMouseEnter: (e) => {
6749
- e.currentTarget.style.opacity = "0.9";
6750
- e.currentTarget.style.transform = "translateY(-1px)";
6751
- }, onMouseLeave: (e) => {
6752
- e.currentTarget.style.opacity = "1";
6753
- e.currentTarget.style.transform = "translateY(0)";
6754
- }, children: [u$1(IconWave$1, { size: 20, color: "white" }), "Jetzt buchen"] }))] })] }), !isAvailable && (u$1("div", { style: {
6755
- position: "absolute",
6756
- inset: 0,
6757
- backgroundColor: "rgba(0, 0, 0, 0.3)",
6758
- backdropFilter: "blur(2px)",
6759
- display: "flex",
6760
- alignItems: "center",
6761
- justifyContent: "center",
6762
- borderRadius: "var(--bw-border-radius)",
6763
- }, children: u$1("div", { style: {
6764
- backgroundColor: "rgba(255, 255, 255, 0.9)",
6765
- padding: "16px 32px",
6766
- borderRadius: "var(--bw-border-radius)",
6767
- color: "var(--bw-text-color)",
6768
- fontWeight: "600",
6769
- fontSize: "18px",
6770
- fontFamily: "var(--bw-font-family)",
6771
- boxShadow: "var(--bw-shadow-md)",
6772
- }, children: "Ausgebucht" }) }))] }) }));
7070
+ marginTop: "32px",
7071
+ padding: "20px",
7072
+ backgroundColor: "var(--bw-background-color)",
7073
+ borderRadius: "var(--bw-border-radius)",
7074
+ border: `1px solid var(--bw-border-color)`,
7075
+ }, children: [u$1("div", { children: [u$1("div", { style: {
7076
+ fontSize: "14px",
7077
+ color: "var(--bw-text-muted)",
7078
+ fontFamily: "var(--bw-font-family)",
7079
+ marginBottom: "4px",
7080
+ }, children: "Preis ab" }), u$1("div", { style: {
7081
+ fontSize: "32px",
7082
+ fontWeight: "700",
7083
+ color: "var(--bw-text-color)",
7084
+ fontFamily: "var(--bw-font-family)",
7085
+ }, children: formatCurrency(eventType.basePrice) })] }), isAvailable && (u$1("button", { onClick: handleBookingClick, style: {
7086
+ backgroundColor: "var(--bw-highlight-color)",
7087
+ color: "white",
7088
+ padding: "14px 28px",
7089
+ border: "none",
7090
+ borderRadius: "var(--bw-border-radius)",
7091
+ fontSize: "16px",
7092
+ fontWeight: "600",
7093
+ fontFamily: "var(--bw-font-family)",
7094
+ display: "flex",
7095
+ alignItems: "center",
7096
+ gap: "8px",
7097
+ cursor: "pointer",
7098
+ transition: "all 0.2s ease",
7099
+ }, onMouseEnter: (e) => {
7100
+ e.currentTarget.style.opacity = "0.9";
7101
+ e.currentTarget.style.transform = "translateY(-1px)";
7102
+ }, onMouseLeave: (e) => {
7103
+ e.currentTarget.style.opacity = "1";
7104
+ e.currentTarget.style.transform = "translateY(0)";
7105
+ }, children: [u$1(IconWave$1, { size: 20, color: "white" }), "Jetzt buchen"] }))] })] }), !isAvailable && (u$1("div", { style: {
7106
+ position: "absolute",
7107
+ inset: 0,
7108
+ backgroundColor: "rgba(0, 0, 0, 0.3)",
7109
+ backdropFilter: "blur(2px)",
7110
+ display: "flex",
7111
+ alignItems: "center",
7112
+ justifyContent: "center",
7113
+ borderRadius: "var(--bw-border-radius)",
7114
+ }, children: u$1("div", { style: {
7115
+ backgroundColor: "rgba(255, 255, 255, 0.9)",
7116
+ padding: "16px 32px",
7117
+ borderRadius: "var(--bw-border-radius)",
7118
+ color: "var(--bw-text-color)",
7119
+ fontWeight: "600",
7120
+ fontSize: "18px",
7121
+ fontFamily: "var(--bw-font-family)",
7122
+ boxShadow: "var(--bw-shadow-md)",
7123
+ }, children: "Ausgebucht" }) }))] }) }) }) }));
6773
7124
  }
6774
7125
 
6775
7126
  // Carousel navigation icons
@@ -6821,13 +7172,6 @@
6821
7172
  if (images.length === 0) {
6822
7173
  return u$1(EventImagePlaceholder, {});
6823
7174
  }
6824
- if (images.length === 1) {
6825
- return (u$1("img", { src: images[0], alt: eventName, style: {
6826
- width: "100%",
6827
- height: "100%",
6828
- objectFit: "cover",
6829
- } }));
6830
- }
6831
7175
  return (u$1("div", { style: { position: "relative", width: "100%", height: "100%", overflow: "hidden" }, children: [u$1("div", { style: {
6832
7176
  display: "flex",
6833
7177
  width: `${images.length * 100}%`,
@@ -6838,11 +7182,16 @@
6838
7182
  width: `${100 / images.length}%`,
6839
7183
  height: "100%",
6840
7184
  flexShrink: 0,
7185
+ overflow: "hidden",
7186
+ position: "relative",
6841
7187
  }, children: u$1("img", { src: image, alt: `${eventName} - Bild ${index + 1}`, style: {
6842
7188
  width: "100%",
6843
7189
  height: "100%",
6844
7190
  objectFit: "cover",
6845
7191
  display: "block",
7192
+ position: "absolute",
7193
+ top: 0,
7194
+ left: 0,
6846
7195
  } }) }, index))) }), images.length > 1 && (u$1(k$2, { children: [u$1("button", { onClick: prevImage, disabled: isTransitioning, style: {
6847
7196
  position: "absolute",
6848
7197
  left: "12px",
@@ -6990,11 +7339,11 @@
6990
7339
  height: 28px !important;
6991
7340
  }
6992
7341
  }
6993
- ` }), u$1("div", { className: "bw-skeleton-list bw-event-type-list", style: { padding: "24px" }, children: u$1("div", { style: {
7342
+ ` }), u$1("div", { className: "bw-skeleton-list bw-event-type-list", style: { padding: "0px" }, children: u$1("div", { style: {
6994
7343
  display: "flex",
6995
7344
  flexWrap: "wrap",
6996
7345
  justifyContent: "center",
6997
- gap: "32px",
7346
+ gap: "24px",
6998
7347
  }, children: Array.from({ length: count }).map((_, idx) => (u$1("div", { className: "bw-skeleton-card bw-skeleton-shimmer bw-event-type-card", style: {
6999
7348
  position: "relative",
7000
7349
  backgroundColor: "var(--bw-surface-color)",
@@ -7017,7 +7366,7 @@
7017
7366
  width: "100%",
7018
7367
  height: "300px",
7019
7368
  backgroundColor: "var(--bw-border-color)",
7020
- } }), u$1("div", { className: "bw-skeleton-content bw-event-type-content", style: { padding: "24px", flex: 1 }, children: [u$1("div", { style: {
7369
+ } }), u$1("div", { className: "bw-skeleton-content bw-event-type-content", style: { padding: "16px 24px", flex: 1 }, children: [u$1("div", { style: {
7021
7370
  width: "60%",
7022
7371
  height: "14px",
7023
7372
  backgroundColor: "var(--bw-border-color)",
@@ -7081,16 +7430,19 @@
7081
7430
  borderRadius: "4px",
7082
7431
  } })] }, lineIdx))) }), u$1("div", { style: {
7083
7432
  display: "flex",
7084
- justifyContent: "space-between",
7433
+ justifyContent: "flex-end",
7085
7434
  alignItems: "center",
7086
- marginTop: "20px",
7435
+ gap: "12px",
7436
+ marginTop: "32px",
7087
7437
  }, children: [u$1("div", { children: u$1("div", { className: "bw-skeleton-price bw-event-type-price", style: {
7088
- width: "80px",
7089
- height: "32px",
7090
- backgroundColor: "var(--bw-border-color)",
7091
- borderRadius: "4px",
7438
+ width: "120px",
7439
+ height: "48px",
7440
+ border: "1px solid var(--bw-border-color)",
7441
+ borderRadius: "var(--bw-border-radius)",
7442
+ alignItems: "center",
7443
+ justifyContent: "center",
7092
7444
  } }) }), u$1("div", { style: {
7093
- width: "120px",
7445
+ width: "170px",
7094
7446
  height: "48px",
7095
7447
  backgroundColor: "var(--bw-highlight-color)",
7096
7448
  borderRadius: "var(--bw-border-radius)",
@@ -7140,7 +7492,7 @@
7140
7492
  max-height: 100px !important;
7141
7493
  }
7142
7494
  .bw-event-type-content {
7143
- padding: 12px !important;
7495
+ padding: 16px 24px !important;
7144
7496
  }
7145
7497
  }
7146
7498
  ` }), eventTypes.length === 0 ? (u$1("div", { style: { maxWidth: "600px", margin: "0 auto", padding: "24px" }, children: u$1("div", { style: {
@@ -7202,11 +7554,11 @@
7202
7554
  e.currentTarget.style.backgroundColor = "var(--bw-surface-color)";
7203
7555
  e.currentTarget.style.color = "var(--bw-highlight-color)";
7204
7556
  e.currentTarget.style.transform = "translateY(0)";
7205
- }, children: [u$1("span", { style: { fontSize: "16px" }, children: "\uD83D\uDD04" }), "Seite neu laden"] })] }) })) : (u$1("div", { className: "bw-event-type-list", style: { padding: "24px" }, children: u$1("div", { style: {
7557
+ }, children: [u$1("span", { style: { fontSize: "16px" }, children: "\uD83D\uDD04" }), "Seite neu laden"] })] }) })) : (u$1("div", { className: "bw-event-type-list", style: { padding: "0px 0px" }, children: u$1("div", { style: {
7206
7558
  display: "flex",
7207
7559
  flexWrap: "wrap",
7208
7560
  justifyContent: "center",
7209
- gap: "32px",
7561
+ gap: "24px",
7210
7562
  }, children: eventTypes.map((eventType) => {
7211
7563
  const isAvailable = eventType.hasAvailableInstances;
7212
7564
  return (u$1("div", { className: "bw-event-type-card", style: {
@@ -7250,7 +7602,7 @@
7250
7602
  padding: "3px 8px",
7251
7603
  borderRadius: "var(--bw-border-radius)",
7252
7604
  fontFamily: "var(--bw-font-family)",
7253
- }, children: eventType.category.name }) }), u$1("div", { className: "bw-event-type-img", style: { position: "relative", width: "100%", height: "300px" }, children: u$1(ImageCarousel, { images: eventType.images, eventName: eventType.name }) }), u$1("div", { className: "bw-event-type-content", style: { padding: "12px 24px 18px 24px" }, children: [u$1("h2", { className: "bw-event-type-title", style: {
7605
+ }, children: eventType.category.name }) }), u$1("div", { className: "bw-event-type-img", style: { position: "relative", width: "100%", height: "300px" }, children: u$1(ImageCarousel, { images: eventType.images, eventName: eventType.name }) }), u$1("div", { className: "bw-event-type-content", style: { padding: "12px 18px" }, children: [u$1("h2", { className: "bw-event-type-title", style: {
7254
7606
  fontSize: "clamp(1.1rem, 2.5vw, 24px)",
7255
7607
  fontWeight: "700",
7256
7608
  color: "var(--bw-text-color)",
@@ -7261,14 +7613,13 @@
7261
7613
  display: "flex",
7262
7614
  alignItems: "center",
7263
7615
  gap: "6px",
7264
- marginLeft: "10px",
7265
7616
  }, children: [u$1(IconCalendar, { size: 17, color: "var(--bw-text-color)" }), u$1("span", { style: {
7266
7617
  fontFamily: "var(--bw-font-family)",
7267
7618
  fontSize: "14px",
7268
7619
  color: "var(--bw-text-muted)",
7269
7620
  }, children: eventType.nextAvailableDate
7270
7621
  ? `Freie Plätze ab ${formatDate(eventType.nextAvailableDate)}`
7271
- : "Keine Termine frei" })] }), u$1("div", { style: { marginLeft: "10px", cursor: "pointer" }, onClick: (e) => {
7622
+ : "Keine Termine frei" })] }), u$1("div", { style: { cursor: "pointer" }, onClick: (e) => {
7272
7623
  e.stopPropagation();
7273
7624
  handleShowDetails(eventType);
7274
7625
  }, children: eventType.highlights && eventType.highlights.length > 0 ? (
@@ -7282,13 +7633,12 @@
7282
7633
  display: "-webkit-box",
7283
7634
  WebkitLineClamp: 5,
7284
7635
  WebkitBoxOrient: "vertical",
7285
- overflow: "hidden",
7286
7636
  maxHeight: "128px",
7287
- textOverflow: "ellipsis",
7288
7637
  padding: "0",
7289
7638
  margin: "0",
7290
7639
  flexDirection: "column",
7291
7640
  gap: "3px",
7641
+ position: "relative",
7292
7642
  }, children: eventType.highlights
7293
7643
  .filter((highlight) => highlight.trim())
7294
7644
  .map((highlight, index) => (u$1("li", { style: {
@@ -7296,9 +7646,16 @@
7296
7646
  alignItems: "flex-start",
7297
7647
  gap: "8px",
7298
7648
  fontFamily: "var(--bw-font-family)",
7299
- lineHeight: "1.6",
7649
+ lineHeight: "1.55",
7300
7650
  color: "var(--bw-text-muted)",
7301
- }, children: [u$1("div", { style: { marginTop: "4px", flexShrink: 0 }, children: u$1(IconCheck, { size: 16, color: "var(--bw-success-color)" }) }), u$1("span", { children: highlight.trim() })] }, index))) }) })) : (
7651
+ position: "relative",
7652
+ maxWidth: "100%",
7653
+ }, children: [u$1("div", { style: { marginTop: "4px", flexShrink: 0 }, children: u$1(IconCheck, { size: 16, color: "var(--bw-success-color)" }) }), u$1("span", { style: {
7654
+ textOverflow: "ellipsis",
7655
+ overflow: "hidden",
7656
+ whiteSpace: "nowrap",
7657
+ flex: "1",
7658
+ }, children: highlight.trim() })] }, index))) }) })) : (
7302
7659
  // Fallback to description
7303
7660
  u$1(k$2, { children: u$1("p", { className: "bw-event-type-desc", style: {
7304
7661
  color: "var(--bw-text-muted)",
@@ -7313,6 +7670,7 @@
7313
7670
  textOverflow: "ellipsis",
7314
7671
  minHeight: "128px",
7315
7672
  maxHeight: "128px",
7673
+ textAlign: "left",
7316
7674
  }, children: eventType.description || " " }) })) }), u$1("div", { children: [u$1("div", { className: "bw-event-type-price", style: {
7317
7675
  fontSize: "clamp(1.72rem, 4vw, 32px)",
7318
7676
  fontWeight: "700",
@@ -7323,7 +7681,7 @@
7323
7681
  display: "flex",
7324
7682
  justifyContent: "flex-end",
7325
7683
  alignItems: "center",
7326
- marginTop: "20px",
7684
+ marginTop: "10px",
7327
7685
  gap: "12px",
7328
7686
  }, children: [(eventType.description || eventType.highlights?.length) && (u$1("button", { onClick: (e) => {
7329
7687
  e.stopPropagation();