/* CSS for Home/Index.cshtml */

/* CUSTOM CURSOR */
html, body {
    cursor: url('/assets/cursors/default_cursor.webp'), auto !important;
}

.gallery-container{
    width: 100dvw;
    height: 100dvh;
    overflow: hidden;
}

.gallery-container .gallery{
    width: 100%;
    height: 100%;
}

.gallery-container .gallery .gallery-item{
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    
    &.hidden{
        display: none;
    }
}

.gallery-container .gallery .gallery-item img{
    width: 100%;
    height: 100%;
    object-fit: cover; 
    transition: opacity 0.3s ease;
}

.gallery-container .gallery .gallery-item img.loading {
    opacity: 0; /* Start fully transparent */
}

.gallery-container .gallery .gallery-item img[src] {
    opacity: 1; /* Once src is set, fade in the image */
}

.overlay-container{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;;
    z-index: 2;
    pointer-events: none; /* Make overlay transparent to clicks/touches by default */
    background-color: rgba(0, 0, 0, 0.22);
    display: flex;
    justify-content: center;
    align-items: center;
}

.overlay-container > *{ /* all childs of overlay-container */
    position: absolute;
    width: 98%;
    height: fit-content;
}

.overlay-container .top{
    top: 2rem;
    display: flex;
    justify-content: space-between;
}

.overlay-container .top-left{
    width: clamp(322px, 14%, 14%);
}

.overlay-container .top-left img{
    width: 100%;
    height: auto;
    filter: invert(1);
}

.overlay-container .top-right{
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.89rem;
}

/* MUSIC BARS START */

.playing {
    width: 3rem;
    height: 1.5rem;
    overflow: hidden;
    margin: 0 1.41rem;
    cursor: pointer;
  }
  .paused.playing{
    background-image: url('/assets/images/play-icon.webp'); /* Adjust as needed */
    background-repeat: no-repeat;
    background-size: auto 50%;
    background-position: top center;
  }
  .now.playing .bar {
    display: inline-block;
    position: relative;
    margin-right: 1px;
    width: 2px;
    height: 1px;
    overflow: hidden;
    background: linear-gradient(to bottom, #ffffffd8, #ffffff);
    color: transparent;
    animation-name: pulse;
    animation-duration: 1.4s;
    animation-iteration-count: infinite;
  }
  .paused.playing .bar {
    animation-iteration-count: 0;
  }
  .n1 {
    animation-delay: 0.5s;
  }
  .n2 {
    animation-delay: 0.2s;
  }
  .n3 {
    animation-delay: 1.2s;
  }
  .n4 {
    animation-delay: 0.9s;
  }
  .n5 {
    animation-delay: 2.3s;
  }
  .n6 {
    animation-delay: 1.3s;
  }
  .n7 {
    animation-delay: 3.1s;
  }
  .n8 {
    animation-delay: 1.9s;
  }
  @keyframes pulse {
    0% {
      height: 1px;
      margin-top: 0;
    }
    10% {
      height: 10px;
      margin-top: -10px;
    }
    50% {
      height: 5px;
      margin-top: -5px;
    }
    60% {
      height: 6px;
      margin-top: -6px;
    }
    80% {
      height: 16px;
      margin-top: -16px;
    }
    100% {
      height: 1px;
      margin-top: 0;
    }
  }

/* MUSIC BARS END */

.overlay-container .middle{
    width: calc(100% - 8rem);
    margin: 0 auto;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.overlay-container .middle.hidden {
    display: none;
}

.overlay-container .middle .arrow {
  transform: translate(-50%, -50%);
  cursor: pointer;
}

.overlay-container .middle .arrow-left{
  transform: rotate(90deg);
}

.overlay-container .middle .arrow-right{
  transform: rotate(-90deg);
}

.overlay-container .middle .arrow span {
  display: block;
  width: .66rem;
  height: .66rem;
  border-bottom: 2px solid white;
  border-right: 2px solid white;
  transform: rotate(45deg);
  margin: -10px;
  animation: animate 2.6s infinite;
}

.overlay-container .middle .arrow span:nth-child(2) {
  animation-delay: -0.26s;
}

.overlay-container .middle .arrow span:nth-child(3) {
  animation-delay: -0.52s;
}

@keyframes animate {
  0% {
      opacity: 0;
      transform: rotate(45deg) translate(-20px, -20px);
  }
  50% {
      opacity: .89;
  }
  100% {
      opacity: 0;
      transform: rotate(45deg) translate(20px, 20px);
  }
}

.overlay-container .bottom{
    bottom: .66rem;
}

.overlay-container .bottom .bottom-upper{
    display: flex;
    justify-content: center;
    border-bottom: 1px solid white;
    width: 100%;
}

.overlay-container .bottom .bottom-upper a{
    pointer-events: auto;
    max-width: 100%;
    text-decoration: none;
    cursor: pointer;
    text-align: center;
    overflow-wrap: break-word;
    font-size: 1rem;
    @media screen and (max-width: 690px) {
        font-size: .89rem;
    }
}

.overlay-container .bottom .bottom-upper .newsletter-form-modal{
    pointer-events: auto;
    position: absolute;
    left: 50%;
    bottom: 166px;
    width: -moz-fit-content; /* Firefox fallback */
    width: fit-content;
    height: fit-content;
    padding: 0.89rem 1.41rem;
    display: none; /* Initially hidden */
    flex-direction: column;
    gap: 0.66rem;
    justify-content: center;
    align-items: center;
    background: rgba(255, 255, 255, 0.04);
    backdrop-filter: blur(0.41rem);
    border: none;
    border-radius: 7px;
    transform: translate(-50%, 0); /* Default final state transform */
    opacity: 0; /* Default opacity, animation will override */
}

.overlay-container .bottom .bottom-upper .newsletter-form-modal.open {
    display: flex !important; /* Override display: none */
    animation: slideInFromBottomModal 0.4s ease-out forwards;
}

.overlay-container .bottom .bottom-upper .newsletter-form-modal.closing {
    display: flex !important; /* Ensure visibility during closing animation */
    animation: slideOutToBottomModal 0.4s ease-out forwards;
    /* JavaScript will set display: none after this animation completes */
}

.overlay-container .bottom .bottom-upper .newsletter-form-modal .title-section{
    display: flex;
    width: 100%;
    justify-content: space-between;
    align-items: center;
    font-weight: bold;
}

.overlay-container .bottom .bottom-upper .newsletter-form-modal .title-section #newsletter-modal-close-button{
    background: transparent;
    border: none;
    color: white;
    padding: 0 0.66rem;
}

.overlay-container .bottom .bottom-upper .newsletter-form-modal form{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 1.41rem;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.overlay-container .bottom .bottom-upper .newsletter-form-modal #email-input{
    width: 200px; /* Use a fixed width for simplicity and consistency */
    background: transparent;
    border: none;
    color: white;
    border-bottom: 1px solid white;
}

.overlay-container .bottom .bottom-upper .newsletter-form-modal #email-input:focus{
    outline: none;
    border-bottom: 2px solid white;
}

.overlay-container .bottom .bottom-upper .newsletter-form-modal #email-input::placeholder {
    color: rgba(255, 255, 255, 0.89); /* Adjust the alpha value for desired transparency */
    opacity: 1; /* Some browsers require this to ensure the color is applied */
}

.overlay-container .bottom .bottom-upper .newsletter-form-modal #newsletter-modal-submit-button{
    margin: 0 auto;
    width: -moz-fit-content; /* Firefox fallback */
    width: fit-content;
    height: fit-content;
    background: transparent;
    border: none;
    color: white;
    font-size: 1rem;
    cursor: pointer;
}

.overlay-container .bottom .bottom-upper .newsletter-form-modal #newsletter-modal-submit-button:active{
    transform: scale(0.89);
}

.overlay-container .bottom .bottom-upper .newsletter-form-modal .msg-section{
  text-align: center;
}

.overlay-container .bottom .bottom-upper .newsletter-form-modal .msg-section .error-msg{
    display: none;
    color: rgba(255, 255, 255, 0.89);
    text-shadow: 0 0 10px rgba(255, 0, 0, 0.5), red 0.25rem 0.25rem 0.6rem;
}

.overlay-container .bottom .bottom-upper .newsletter-form-modal .msg-section .success-msg{
    display: none;
    color: rgba(255, 255, 255, 0.89);
    text-shadow: 0 0 10px rgba(0, 128, 0, 0.5), green 0.25rem 0.25rem 0.6rem;
}

.overlay-container .bottom .bottom-middle{
    display: flex;
    border-bottom: 1px solid white;
}

.overlay-container .bottom .bottom-middle > *{
    width: 33.3%;
    height: fit-content;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 0.5rem 0;
    font-size: 1rem;
    text-align: center;
}

.overlay-container .bottom .bottom-middle .bottom-middle-mid .name-slider{
    cursor: url('/assets/cursors/default_cursor.webp'), auto;
}

.overlay-container .bottom .bottom-middle .bottom-middle-left,
.overlay-container .bottom .bottom-middle .bottom-middle-right{
    cursor: pointer;
}

/* Add these styles for the sliding name effect */
.name-slider {
    position: relative; /* Needed for absolute positioning of children */
    height: 1.2em; /* Adjust based on your font size, ensures container height */
    overflow: hidden; /* Hides the text sliding out */
    display: inline-block; /* Or block, depending on layout needs */
    width: 100%; /* *** ADD THIS: Make slider take full width of its container *** */
    vertical-align: middle; /* Align with surrounding text if needed */
    font-weight: bold; /* Keep the bold style */
    cursor: pointer; 
    margin-top: 0; /* Adjust if spacing is off */
    margin-bottom: 0; /* Adjust if spacing is off */
}

.name-slider span {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%; /* Ensure spans take full width */
    white-space: nowrap; /* Prevent wrapping during animation */
    transition: top 0.3s ease-in-out; /* Animation for the slide */
    text-align: center; /* Center text within the span */
    color: white; /* Explicitly set text color */
    line-height: 1.2em; /* Ensure line height matches container */
}

.name-slider .name-secondary {
    top: 100%; /* Start below the visible area */
}

.name-slider:hover .name-primary {
    top: -100%; /* Slide primary name up */
}

.name-slider:hover .name-secondary {
    top: 0; /* Slide secondary name into view */
}

/* Adjust existing styles if needed */
.overlay-container .bottom .bottom-middle .bottom-middle-mid {
    pointer-events: auto; /* Allow hover on this section */
    line-height: 1.2em; /* Match the slider height */
}

.overlay-container .bottom .bottom-under{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: 1rem;
    padding: 0.5rem 1rem; /* Add horizontal padding */
    word-spacing: 0.14rem;
    @media screen and (max-width: 524px) {
        font-size: 0.66rem;
        word-spacing: normal;
        
    }
}

.overlay-container .bottom .bottom-under .bottom-under-first-row {
    display: flex;
    flex-wrap: wrap; /* Allow items to wrap */
    justify-content: center; /* Center items horizontally */
    text-align: center; /* Center text within items */
    width: 100%; /* Ensure it takes full width */
    gap: 0.5rem; /* Add gap between wrapped items */
}

.overlay-container .bottom .bottom-under .bottom-under-first-row a{
    text-decoration: none;
    white-space: nowrap; /* Prevent links from breaking mid-word */
}

.overlay-container .bottom .bottom-under .bottom-under-first-row .spacer{
    padding: 0 0.25rem; /* Slightly reduce spacer padding */
    @media screen and (max-width: 450px) {
        display: none; /* Hide spacers on very small screens */
    }
}

.overlay-container .bottom .bottom-under .bottom-under-first-row #subscribe-open-button{
    color: white;
    background: transparent; 
    border: none; 
    margin: 0;
    padding: 0;
    pointer-events: auto; 
}

.overlay-container .bottom .bottom-under .bottom-under-first-row .social-share-container {
    display: none; /* Initially hidden */
    max-width: 1px;
    align-items: center;
    gap: 0.5rem; 
}

.overlay-container .bottom .bottom-under .bottom-under-first-row .copied-warn{
    position: fixed;
    top: 66%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 15;
    color: var(--primary-color);
    animation: fadeIn 0.5s ease-out forwards;
    padding: 1rem 2rem;
    border-radius: 5px;
    text-align: center;
    text-decoration: underline;
}

@keyframes fadeIn {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.9);
    }
    100% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
}

.overlay-container .bottom .bottom-under .bottom-under-first-row .share-buttons {
    display: flex;
    gap: 0.5rem; /* Reduced gap */
    align-items: center;
}

.overlay-container .bottom .bottom-under .bottom-under-first-row .share-btn {
    display: flex;
    align-items: center;
    justify-content: center; /* Center icon */
    width: 26px; /* Fixed width for circle */
    height: 26px; /* Fixed height for circle */
    padding: 0; /* Remove padding */
    border-radius: 14px; 
    text-decoration: none;
    transition: all 0.3s ease;
    color: white;
}

.overlay-container .bottom .bottom-under .bottom-under-first-row .share-btn svg {
    width: 18px;
    height: 18px;
    fill: currentColor;
}

.overlay-container .bottom .bottom-under .bottom-under-first-row .share-btn.twitter {
    background: #000000;
}

.overlay-container .bottom .bottom-under .bottom-under-first-row .share-btn.twitter:hover {
    background: #333333;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.overlay-container .bottom .bottom-under .bottom-under-first-row .share-btn.facebook {
    background: #1877F2;
}

.overlay-container .bottom .bottom-under .bottom-under-first-row .share-btn.facebook:hover {
    background: #166FE5;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(24, 119, 242, 0.4);
}

.overlay-container .bottom .bottom-under .bottom-under-first-row .share-btn.whatsapp {
    background: #34d314;
}

.overlay-container .bottom .bottom-under .bottom-under-first-row .share-btn.whatsapp:hover {
    background: #37e714;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(10, 102, 194, 0.4);
}

.overlay-container .bottom .bottom-under .bottom-under-first-row .share-btn.email {
    background: black;
}

.overlay-container .bottom .bottom-under .bottom-under-first-row .share-btn.email:hover {
    background: #333333;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}



.overlay-container .bottom .bottom-under .bottom-under-second-row {
    width: 100%;
    text-align: center; /* Ensure copyright text is centered */
    margin-top: 0.5rem; /* Add some space above the copyright */
    font-size: 0.9em; /* Slightly smaller font size for copyright */
    text-decoration: none;
}

.overlay-container .bottom .bottom-under .bottom-under-second-row a{
    text-decoration: none;
    color: inherit; /* Inherit color from parent */
}

.overlay-container .top-right,
.overlay-container .bottom .bottom-middle-left,
.overlay-container .bottom .bottom-middle-right,
.overlay-container .bottom .bottom-under a {
    pointer-events: auto; /* Re-enable pointer events for interactive elements */
}

/* Ensure specific interactive elements within top-right also get pointer events */
.overlay-container .top-right > * { /* Target direct children like music toggle and link wrapper */
    pointer-events: auto;
}

[data-open-modal]{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 41px; /* Adjust size as needed */
  height: 41px; /* Adjust size as needed */
  /* Add styles for the button itself if needed, e.g., background, padding */
  background: transparent; /* Assuming you want the circle to be the main visual */
  border: none;
  cursor: pointer;
  outline: none; /* Remove default focus outline if you have a custom one */
  font: 1.4rem 'Arial', sans-serif;
  font-weight: bold;
}

/* Styles for the Pannellum custom hotspot */
.custom-hotspot-modal-trigger {
    width: 41px; 
    height: 41px; 
    background: transparent;
    background-color: transparent!important; /* Ensure the background is transparent */
    border: none!important;
    cursor: pointer;
    font: 1.4rem 'Arial', sans-serif;
    font-weight: bold;
    color: white; /* Or your desired icon color */
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%; /* If you want a circular background for the aura */
}

.custom-hotspot-modal-trigger::before, [data-open-modal]::before,
.custom-hotspot-modal-trigger::after, [data-open-modal]::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%; /* Adjusted top to 50% for better centering with flex */
    transform: translate(-50%, -50%);
    width: 41px; 
    height: 41px; 
    background-color: transparent; 
    border: 2px solid white; 
    border-radius: 50%;
    animation-name: auraRipple;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in;
    z-index: -1; /* Ensure it's behind the icon if you add one */
    opacity: 0; 
}

.custom-hotspot-modal-trigger::after, [data-open-modal]::after {
    animation-delay: 1s; /* Delay for the second ripple */
}

/* The 'ὶ' character should be added by Pannellum if using default hotspot text 
   or via createTooltipFunc for custom HTML. 
   If Pannellum simply uses the cssClass, you might need to adjust the hotspot creation in JS 
   to include the character if it doesn't appear. */

@keyframes auraRipple {
  0% {
    transform: translate(-50%, -50%) scale(1.4);
    opacity: 0;
  }
  50% {
    opacity: 0.89; /* Peak visibility */
  }
  100% {
    transform: translate(-50%, -50%) scale(0.41); /* Expand significantly */
    opacity: 0; /* Fade out */
  }
}

@keyframes zoomOutEffect {
  0% {
    transform: scale(.89); /* Start slightly larger */
    opacity: 0;
  }
  100% {
    transform: scale(1); /* End at normal size */
    opacity: 1;
  }
}

@keyframes zoomInCloseEffect {
  0% {
    transform: scale(1);
    opacity: 1;
  }
  100% {
    transform: scale(.89); 
    opacity: 0;
  }
}

@keyframes slideInFromBottomModal {
    from {
        opacity: 0;
        transform: translate(-50%, 30px); /* Start 30px below its final position, combined with existing translateX */
    }
    to {
        opacity: 1;
        transform: translate(-50%, 0);   /* End at its final position */
    }
}

@keyframes slideOutToBottomModal {
    from {
        opacity: 1;
        transform: translate(-50%, 0);
    }
    to {
        opacity: 0;
        transform: translate(-50%, 30px); /* Slide 30px down */
    }
}

dialog::backdrop{
    background-color: rgba(0, 0, 0, 0.22);
    backdrop-filter: blur(2px);
}

dialog{
    z-index: 14;
    flex-direction: column;
    width: 89%;
    max-height: 89vh;
    overflow: hidden;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: 0;
    translate: -50% -50%;
    background-color: rgba(104, 39, 1, 0.14);
    backdrop-filter: blur(6rem);
    border: none;
    border-radius: 4px;
    padding: 1rem 2rem 2rem 3rem;
}

dialog[open] {
    display: flex;
}

/* Apply opening animation when dialog is open and not in the process of closing */
dialog[open]:not(.closing) {
  animation: zoomOutEffect 0.41s ease-out forwards;
  /* Opacity is handled by the zoomOutEffect animation */
}

/* Apply closing animation when .closing class is added */
dialog.closing {
  animation: zoomInCloseEffect 0.26s ease-in forwards;
  /* Opacity is handled by the zoomOutCloseEffect animation */
}

dialog button{ /* Close button */
    width: fit-content;
    height: fit-content;
    align-self: flex-end;
    background-color: transparent;
    border: none;
    color: white;
    font-size: 1.5rem;
    cursor: pointer;
}

dialog .dialog-content{
    width: 100%;
    display: flex;
    justify-content: center;
    gap: 4rem;
    @media screen and (max-width: 789px) {
        flex-direction: column;
        gap: 0.5rem;
    }
    overflow: hidden; 
}

dialog .dialog-content .dialog-content-left,
dialog .dialog-content .dialog-content-right{
    box-sizing: border-box;
    display: flex;
}

dialog .dialog-content .dialog-content-left{
  justify-content: center;
  align-items: center;
  overflow: hidden;
}
dialog .dialog-content .dialog-content-left img{
  object-fit: contain;
  max-width: 100%;
  max-height: 100%;
}

dialog .dialog-content .dialog-content-right{
    flex-direction: column;
    overflow-y: scroll;
    padding: 0 2.6rem;
    max-width: 50%;
}

@media screen and (max-width: 789px) {
    dialog .dialog-content .dialog-content-right{
        max-width: 100%;
        padding: 0;
        max-height: 50vh; /* Limit height on small screens */
    }

    dialog .dialog-content .dialog-content-left{
        height: 189px;
    }

    dialog .dialog-content .dialog-content-left img{
        height: 189px;
    }
}

dialog .dialog-content .dialog-content-right .dialog-title-section #modal-read-time{
    font-size: 0.8rem;
    font-weight: 400;
    color: #ffffffbb;
    margin: 0.26rem 0;
}

#modal-open-btn{
    color: white;
}

/* Styling for the custom Pannellum hotspot that triggers the modal */
.custom-hotspot-modal-trigger {
    width: 30px;
    height: 30px;
    background-color: rgba(255, 255, 255, 0.8);
    border-radius: 50%;
    border: 2px solid rgba(0, 0, 0, 0.7);
    box-shadow: 0 0 5px rgba(0,0,0,0.5);
    cursor: pointer;
    /* Pannellum will position this, so no top/left needed here */
}

.custom-hotspot-modal-trigger:hover {
    background-color: white;
    border-color: black;
}

/* Ensure Pannellum's default hotspot tooltip is hidden if we're not using its text property */
.pnlm-hotspot-debug .pnlm-tooltip {
    display: none;
}

.custom-hotspot-modal-trigger .pnlm-tooltip {
    display: none; /* Hide default tooltip for our custom hotspot */
}

.share-buttons {
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.share-buttons.hidden {
    transform: translateX(-100%);
    opacity: 0;
}

.share-buttons.revealed {
    transform: translateX(0);
    opacity: 1;
}

.share-buttons.revealed .share-btn {
    animation: jump 0.5s ease forwards;
}

.share-buttons.revealed .share-btn:nth-child(1) {
    animation-delay: 0s;
}

.share-buttons.revealed .share-btn:nth-child(2) {
    animation-delay: 0.1s;
}

.share-buttons.revealed .share-btn:nth-child(3) {
    animation-delay: 0.2s;
}

.share-buttons.revealed .share-btn:nth-child(4) {
    animation-delay: 0.3s;
}

.share-buttons.hiding .share-btn {
    animation: hideJump 0.5s ease forwards;
}

.share-buttons.hiding .share-btn:nth-child(1) {
    animation-delay: 0.3s;
}

.share-buttons.hiding .share-btn:nth-child(2) {
    animation-delay: 0.2s;
}

.share-buttons.hiding .share-btn:nth-child(3) {
    animation-delay: 0.1s;
}

.share-buttons.hiding .share-btn:nth-child(4) {
    animation-delay: 0s;
}

@keyframes jump {
    0% {
        transform: scale(0);
    }
    50% {
        transform: scale(1.2);
    }
    100% {
        transform: scale(1);
    }
}

@keyframes hideJump {
    0% {
        transform: scale(1);
    }
    100% {
        transform: scale(0);
    }
}

#subscribe-close-button {
    background: transparent;
    border: none;
    color: white;
    cursor: pointer;
    font-size: 1rem;
    padding: 0 0.5rem;
}

/* Action Buttons */
.overlay-container .hotspot-btn {
    opacity: 0.89;
    position: absolute;
    top: 41%;
    transform: translate(-50%, -50%);
    width: 54px;
    height: 54px;
    background: transparent;
    border: none;
    cursor: pointer;
    outline: none;
    font: 1.4rem 'Arial', sans-serif;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    pointer-events: auto; /* Enable pointer events */
}

.overlay-container .hotspot-btn::before,
.overlay-container .hotspot-btn::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 54px;
    height: 54px;
    background-color: transparent;
    border: 2px solid white;
    border-radius: 50%;
    animation-name: auraRipple;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in;
    z-index: -1;
    opacity: 0;
}

.overlay-container .hotspot-btn::after {
    animation-delay: 1s;
}

.overlay-container .hotspot-btn span {
    font-size: 24px;
    font-weight: bold;
    line-height: 1;
    color: white;
}

.overlay-container .hotspot-btn .hotspot-title{
    position: absolute;
    top: 66px;
    
    font-size: 1.14rem;
    line-height: 1.22;
    text-align: center;
    color: white;
    text-transform: uppercase;
    hyphens: auto;
    white-space: wrap;
}

.overlay-container .booking-btn {
    left: 26%;
}

.overlay-container .special-decor-btn {
    left: 74%;
}

/* Special Decor Modal */
.special-decor-modal {
    position: fixed;
    top: 0;
    right: -689px;
    width: 689px;
    max-width: 100%;
    height: 100%;
    padding: .89rem 2.41rem;
    background-color: #ffffffbd;
    backdrop-filter: blur(7px);
    box-shadow: -2px 0 5px rgba(0,0,0,0.26);
    transition: right 0.3s ease-in-out;
    z-index: 1050;
    overflow-y: auto;
}

.special-decor-modal button,
.special-decor-modal h1,
.special-decor-modal h2,
.special-decor-modal h3,
.special-decor-modal span,
.special-decor-modal p,
.special-decor-modal li,
.special-decor-modal ul,
.special-decor-modal ol {
    color: #555;
}

.special-decor-modal.is-open {
    right: 0;
}

.special-decor-modal .first-line{
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    width: 100%;
    margin: 2.1rem 0;
    gap: 1.4rem;

}

.special-decor-modal .first-line img{
    width: 41px;
    height: auto;
}

.special-decor-modal .first-line .close-special-decor-modal {
    font-size: 22px;
    border: none;
    background: none;
    cursor: pointer;
}

.special-decor-modal .other-lines{
    padding: 0 0.89rem;
}

.special-decor-modal .other-lines .title-section {
    display: grid;
    place-items: center;
    overflow: hidden;
    margin-bottom: 1rem;
    text-align: center;
}

.special-decor-modal .other-lines .title-section h2 {
    grid-area: 1 / 1;
    width: 100%;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.5s ease;
    font-size: 2.2rem;
    font-weight: bold;
    text-transform: uppercase;
}

.special-decor-modal .other-lines .title-section .title-initial {
    transform: translateY(0);
}

.special-decor-modal .other-lines .title-section .title-hover {
    transform: translateY(100%);
    opacity: 0;
}

.special-decor-modal .other-lines .title-section:hover .title-initial {
    transform: translateY(-100%);
    opacity: 0;
}

.special-decor-modal .other-lines .title-section:hover .title-hover {
    transform: translateY(0);
    opacity: 1;
}

.special-decor-modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1040;
}

.special-decor-modal-overlay.is-open {
    display: block;
}

.special-decor-modal .special-decor-cta{
    margin: 3.41rem 0 1.89rem 0;
    font-size: 1.14rem;
    font-weight: bold;
    width: 100%;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(166px, 1fr));
    gap: 1.4rem 1rem;
}

.special-decor-modal .set-special-decor-btn{
    display: inline-block;
    padding: 0.89rem 1.41rem;
    border: 1px solid #555;
    border-radius: 4px;
    color: #555;
    text-decoration: none;
    text-align: center;

}

.special-decor-modal .set-special-decor-btn:hover {
    background-color: #555;
    color: #fff;
}

.special-decor-modal .bento-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin-top: 2rem;
}

.special-decor-modal .bento-card {
    overflow: hidden;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.special-decor-modal .bento-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.special-decor-modal .bento-card.vertical {
    grid-row: span 2;
}

.special-decor-modal p, .special-decor-modal ul, .special-decor-modal ol{
    margin: 1.41rem 0;
    line-height: 1.6;
}

@media screen and (max-width: 468px) {
    .overlay-container .hotspot-btn .hotspot-title{
        font-size: 0.89rem;
        top: 54px;
    }

    .overlay-container .hotspot-btn::before,
    .overlay-container .hotspot-btn::after {
        width: 41px;
        height: 41px;
    }

    .special-decor-modal .bento-cards {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.5rem;
    }

    .special-decor-modal .bento-card:last-child{
        display: none;
    }
}

.hotspot-btn {
    transition: opacity 0.66s ease-in, filter 0.66s ease-in, transform 0.66s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.hotspot-btn.swiping {
    opacity: 0.14;
    filter: blur(14px);
    transform: scale(1.66);
    pointer-events: none;
    transition: opacity 0.6s ease-out, filter 0.6s ease-out, transform 0.6s ease-out;
}