@font-face 
{
  font-family: 'OpenSans-All';
  src: url(betuk/OpenSans-VariableFont_wdth,wght.ttf) format('truetype');
}

@font-face {
  font-family: 'Calibri';
  src: url(betuk/calibri.ttf) format('truetype');
}

@font-face {
  font-family: 'CalibriB';
  src: url(betuk/calibrib.ttf) format('truetype');
}

@font-face {
  font-family: 'CalibriL';
  src: url(betuk/calibril.ttf) format('truetype');
}

@font-face {
  font-family: 'NotoSans';
  src: url(betuk/NotoSans-Thin.ttf) format('truetype');
}

@font-face {
  font-family: 'NotoSansL';
  src: url(betuk/NotoSans-Light.ttf) format('truetype');
}

/* CSS Color Variables */
:root {
  /* Text colors */
  --white: rgba(255, 255, 255, 0.95);
  --white-pure: white;
  --blue: #1f206b;
  --blue2: #111245;
  --blue2-transparent: #11124591;
  --blue-transparent: #1f206b80;
  
  /* Accent colors */
  --gold: #caac02;
  --gold-border: rgba(255, 176, 28, 0.7);
  --hatter: #EDEAE1; /*#d1cebf*/
  --hatterrooms: #ada187eb;/*#a19374cc;*/
  --hatterextended: #ada187eb;/*#a1937496;
  
  /* Background colors */
  --backforrooms: #39341e75;
  --beige: #dbd2aa;
  --beige-light: #cac4a9d8;
  --beige-light2: #cac4a98c;
  --beige-yellow: #fffde60c;
  --button-bg: #afa98e42;
  --button-bg-hover: #afa98e69;
  --button-bg-hover-mobile: #a76f14;
  
  /* Shadow and hover colors */
  --shadow: rgba(0, 0, 0, 0.3);
  --purple: #2d2f9e;
  
  /* Font Variables - consistent across all devices */
  --font-room-details: 'CalibriL';
  --font-flip-text: 'NotoSans';
  --font-button-secondary: 'NotoSansL';
  
  /* Section height for ajanlat */
  --section-height: clamp(400px, 50vw, 900px);
}

/* Reset and base styles */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  overflow-x: hidden;
  width: 100%;
}

/* Rooms page: match body background to header (#overlap-group) on all devices */
body[data-page="rooms"] {
  background-color: var(--hatter);
}

/* Main rooms section - responsive for all devices */
#szobak {
  box-sizing: border-box;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  position: relative;
  background-color: #edeae1;
  min-height: 100vh;
  padding: clamp(3rem, 8vw, 6rem) clamp(1rem, 3vw, 2rem);
  padding-top: clamp(8rem, 12vw, 12rem);
}

/* Mobile - smaller background pattern */
@media screen and (max-width: 767px) {

  #szobak {
    background-color: #edeae1;
  }
}

/* Room intro SVG container - simplified */
#room-video-container {
  position: relative;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: clamp(2rem, 4vw, 3rem);
  z-index: 1;
}

#room-intro-video {
  /* Initial state: centered, full size */
  width: clamp(300px, 90vw, 600px);
  height: auto;
  object-fit: contain;
  display: block;
  margin: 0 auto;
  /* No transition initially */
}

/* When animation starts - add transition */
#room-intro-video.animate {
  transition: all 1.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Final state: smaller, moved up */
#room-intro-video.animation-complete {
  width: clamp(200px, 40%, 400px);
  margin-top: clamp(-15vh, -200px, -150px);
}

/* Mobile - bigger SVG */
@media screen and (max-width: 767px) {
  #room-intro-video {
    width: clamp(250px, 85vw, 500px);
  }

  #room-intro-video.animation-complete {
    width: clamp(180px, 45%, 350px);
    margin-top: clamp(-5vh, -60px, -40px);
  }

  #szlista {
    transform: translateY(clamp(5vh, 60px, 40px));
  }
}

/* Tablet - medium size */
@media screen and (min-width: 768px) and (max-width: 1023px) {
  #room-intro-video {
    width: clamp(300px, 80vw, 550px);
  }

  #room-intro-video.animation-complete {
    width: clamp(220px, 42%, 380px);
    margin-top: clamp(-14vh, -180px, -160px);
  }

  #szlista {
    transform: translateY(clamp(14vh, 180px, 160px));
  }
}

#szlista {
  width: 100%;
  max-width: 1200px;
  margin: clamp(1rem, 3vw, 2rem) auto;
  margin-top: 0;
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(3rem, 7vw, 6rem);
  position: relative;
  z-index: 0;
  /* Start below viewport by the same amount SVG will move up */
  transform: translateY(clamp(15vh, 200px, 150px));
  opacity: 0;
  visibility: hidden;
  transition: transform 1.2s cubic-bezier(0.4, 0, 0.2, 1), 
              opacity 0.8s ease 0.4s, 
              visibility 0.8s ease 0.4s;
}

#szlista.visible {
  transform: translateY(0);
  opacity: 1;
  visibility: visible;
}

#szlista li {
  width: 100%;
  max-width: clamp(600px, 60vw, 900px);
  height: clamp(350px, 45vh, 420px);
  display: flex;
  list-style: none;
  margin: 0 auto;
  border: clamp(0.05rem, 0.1vw, 0.1rem) solid var(--blue-transparent);
  border-radius: clamp(0.15rem, 0.25vw, 0.25rem);
  opacity: 0;
  transform: translateY(clamp(20px, 3vw, 40px));
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
  align-items: stretch;
  position: relative;
}

#szlista li.visible {
  opacity: 1;
  transform: translateY(0);
}

.szdetails {
  flex: 1;
  border-top-left-radius: clamp(0.15rem, 0.25vw, 0.25rem);
  padding: clamp(1rem, 2vw, 1.5rem);
  padding-top: clamp(1.5rem, 3vw, 2.5rem);
  background-color: var(--hatterrooms);
  color: white;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  position: relative;
}

.szdetails h2 {
  font-weight: 100;
  text-align: center;
  font-family: var(--font-room-details);
  font-size: clamp(1.1rem, 2vw, 1.3rem);
  letter-spacing: clamp(0.02rem, 0.05vw, 0.05rem);
  text-transform: uppercase;
  text-decoration: underline;
  text-decoration-thickness: clamp(0.03rem, 0.08vw, 0.08rem);
  text-underline-offset: clamp(0.2rem, 0.5vw, 0.5rem);
  text-decoration-color: var(--blue2);
  line-height: 1.4;
}

/* Specific styles for room description */
.room-description {
  font-size: clamp(0.85rem, 1.5vw, 1.1rem);
  font-weight: 100;
  font-family: var(--font-room-details);
  margin-top: clamp(0.5rem, 1.5vw, 1rem);
  margin-left: clamp(0.5rem, 2vw, 1.5rem);
  margin-right: clamp(0.5rem, 2vw, 1.5rem);
  line-height: 1.3;
}

#szinfok {
  font-family: var(--font-room-details);
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 0.8rem;
  align-items: center;
  margin-top: clamp(1rem, 2vw, 1.5rem);
  margin-left: clamp(0.5rem, 2vw, 1.5rem);
  margin-right: clamp(0.5rem, 2vw, 1.5rem);
}

.facility-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.25rem;
  white-space: nowrap;
}

.facility-item > span {
  order: 1;
}

.facility-icon {
  width: 1.1rem !important;
  height: 1.9rem !important;
  max-width: 1.1rem !important;
  max-height: 1.5rem !important;
  display: block;
  object-fit: contain;
  flex-shrink: 0;
  order: 0;
}

/*#szlista li img {
  border-top-right-radius: clamp(0.15rem, 0.25vw, 0.25rem);
  border-bottom-right-radius: clamp(0.15rem, 0.25vw, 0.25rem);
  width: clamp(280px, 40vw, 500px);
  height: 100%;
  object-fit: cover;
  display: block;
  margin: 0;
  padding: 0;
  flex-shrink: 0;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  cursor: pointer;
}*/

/* Room Action Bar - Contains button and price side by side */
.room-action-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: clamp(1rem, 2vw, 1.5rem);
  margin-top: clamp(1rem, 2vw, 1.5rem);
  margin-bottom: clamp(0.5rem, 1vw, 1rem);
  padding: 0 clamp(0.5rem, 1.5vw, 1rem);
}



.price-icons-row {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: flex-start;
  width: 100%;
  gap: clamp(0.5rem, 1.5vw, 1rem);
  margin-bottom: clamp(0.5rem, 1vw, 1rem);
}

.price-icon-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  flex: 1;
  gap: clamp(0.2rem, 0.5vw, 0.4rem);
}

.price-icon {
  width: clamp(2rem, 4vw, 3rem);
  height: clamp(2rem, 4vw, 3rem);
  object-fit: contain;
  display: block;
}

.price-label {
  font-size: clamp(0.7rem, 1.2vw, 0.9rem);
  font-family: var(--font-room-details);
  font-weight: 100;
  color: var(--white-pure);
  text-align: center;
  white-space: nowrap;
}

.price-value {
  font-size: clamp(1rem, 1.8vw, 1.3rem);
  font-family: var(--font-room-details);
  font-weight: 100;
  color: var(--white-pure);
  text-align: center;
  text-decoration: underline;
  text-decoration-thickness: clamp(0.03rem, 0.08vw, 0.08rem);
  text-underline-offset: clamp(0.2rem, 0.5vw, 0.5rem);
  text-decoration-color: var(--blue2);
}

.price-suffix {
  font-size: clamp(0.85rem, 1.5vw, 1.1rem);
  font-family: var(--font-room-details);
  font-weight: 100;
  color: var(--white-pure);
  text-align: center;
  margin-top: auto;
  padding-top: clamp(0.5rem, 1vw, 1rem);
}

.bnyil, .jnyil {
  border-radius: 100%;
  width: clamp(2rem, 3.5vw, 3rem);
  height: clamp(2rem, 3.5vw, 3rem);
  background-color: transparent;
  border: none;
  position: absolute;
  cursor: pointer;
  background-repeat: no-repeat;
  background-size: clamp(1.2rem, 2.2vw, 1.8rem);
  background-position: center;
  transition: all 0.3s ease;
  z-index: 10;
  top: 50%;
  transform: translateY(-50%);
}

.bnyil {
  background-image: url(icons/arrowicon2.svg);
  right: calc(clamp(280px, 40vw, 500px) - clamp(2rem, 3.5vw, 3rem) - clamp(0.5rem, 2vw, 1.5rem));
}

.bnyil:hover {
  background-color: rgba(0, 0, 0, 0.15);
}

.jnyil {
  background-image: url(icons/arrowicon1.svg);
  right: clamp(0.5rem, 2vw, 1.5rem);
}

.jnyil:hover {
  background-color: rgba(0, 0, 0, 0.15);
}

/* Offer section */
#ajanlat {
     width: 100%;
     min-height: var(--section-height);
     margin-top: clamp(2.5rem, 6vw, 5rem); /* Space between room list and services section */
     background-image: url("./estimainiris.avif");
     background-size: cover;
     background-position: center center;
     display: flex;
     align-items: center;
     justify-content: center;
     transition: transform 0.3s ease;
     overflow: hidden;
  }

  .ajanlat-tartalom {
     text-align: center;
     width: 100%;
     /*max-width: 1400px;*/
     padding: clamp(1rem, 3vw, 2rem);
  }

  .text-wrapper {
     display: flex;
     justify-content: center;
     align-items: center;
     gap: clamp(0.8rem, 1.5vw, 2rem);
     flex-wrap: wrap;
  }

  .flip-text {
     color: var(--white-pure);
     font-family: var(--font-flip-text);
     font-size: clamp(1.8rem, 3vw, 5rem);
     letter-spacing: clamp(0.05rem, 0.08vw, 0.1rem);
     text-transform: uppercase;
     opacity: 0;
     transform: rotateX(30deg);
     transform-origin: bottom;
     margin: 0;
  }

  .flip-text.animate {
     animation: flipIn 0.5s forwards;
  }

  .flip-text.delayed {
     animation-delay: 0.5s;
  }

  @keyframes flipIn {
     0% {
        opacity: 0;
        transform: rotateX(30deg);
     }
     100% {
        opacity: 1;
        transform: rotateX(0deg);
     }
  }

  #agomb {
     border: solid clamp(0.05rem, 0.12vw, 0.2rem) #c4bda0;
     background-color: var(--button-bg);
     color: var(--white-pure);
     text-decoration: none;
     padding: clamp(1rem, 1.1vw, 1.5rem) clamp(1.5rem, 1.2vw, 2.5rem);
     border-radius: clamp(0.4rem, 0.6vw, 0.8rem);
     font-family: var(--font-button-secondary);
     font-size: clamp(1rem, 1vw, 1.3rem);
     text-transform: uppercase;
     transition: all 0.6s ease;
     opacity: 0;
     display: inline-block;
     margin-top: clamp(1.5rem, 8vw, 8.5rem);
  }

  #agomb.show {
     animation: fadeIn 0.5s forwards;
     animation-delay: 1.5s;
  }

  @keyframes fadeIn {
     0% {
        opacity: 0;
     }
     100% {
        opacity: 1;
     }
  }

  #agomb:hover {
     background-color: var(--button-bg-hover);
     transform: translateY(-2px);
  }

/* ===========================================
   EXPANDABLE ROOM CARD STYLES
   =========================================== */

/* View Details & Close Buttons */
.view-details-btn,
.close-details-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: clamp(0.7rem, 1.5vw, 1rem) clamp(1.2rem, 2.5vw, 1.8rem);
  background-color: var(--blue2);
  color: var(--white-pure);
  border: none;
  border-radius: clamp(0.3rem, 0.5vw, 0.5rem);
  font-family: var(--font-room-details);
  font-size: clamp(0.85rem, 1.5vw, 1.05rem);
  font-weight: 100;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.3s ease;
  margin: 0;
  flex-shrink: 0;
}

.view-details-btn:hover,
.close-details-btn:hover {
  background-color: rgb(20, 22, 80);
  transform: translateY(-2px);
  box-shadow: 0 4px 8px var(--shadow);
}

.view-details-btn:focus {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

.close-details-btn:focus {
  outline: none;
}

.btn-icon {
  font-size: clamp(0.8rem, 1.2vw, 1rem);
  line-height: 1;
}

/* Close button specific styles */
.close-details-btn {
  position: absolute;
  top: clamp(1rem, 2vw, 1.5rem);
  right: clamp(1rem, 2vw, 1.5rem);
  z-index: 20;
  margin-top: 0;
  padding: clamp(0.5rem, 1vw, 0.7rem) clamp(0.8rem, 1.5vw, 1.2rem);
  outline: none;
}

.close-details-btn .btn-icon {
  font-size: clamp(1.5rem, 2.5vw, 2rem);
}

.close-details-btn:active,
.close-details-btn:hover,
.close-details-btn:visited {
  outline: none;
}

/* Expanded State - Inline Expansion */
#szlista li.expanded {
  /* Same max-width as normal view (#szlista li) - no width: 100% / max-width: 100% override */
  width: 100%;
  height: auto;
  min-height: clamp(700px, 80vh, 1000px);
  max-height: none;
  margin: 0 auto;
  overflow: visible;
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  display: flex;
  flex-direction: column;
}

/* Order elements in expanded view: image section first, then details */
#szlista li.expanded .room-image-section {
  order: 1;
}

#szlista li.expanded .szdetails {
  order: 2;
}

/* Expanding animation */
#szlista li.expanding {
  animation: expandCard 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes expandCard {
  from {
    transform: scale(0.98);
    opacity: 0.9;
    height: clamp(350px, 45vh, 420px);
  }
  to {
    transform: scale(1);
    opacity: 1;
    height: auto;
  }
}

/* Collapsing animation */
#szlista li.collapsing {
  animation: collapseCard 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes collapseCard {
  from {
    transform: scale(1);
    opacity: 1;
    height: auto;
  }
  to {
    transform: scale(0.98);
    opacity: 0.9;
    height: clamp(350px, 45vh, 420px);
  }
}

/* Ensure proper stacking of rooms */
/* Removed - using flexbox gap instead */

#szlista li.expanded .szdetails {
  flex: none;
  display: flex;
  flex-direction: column;
  gap: clamp(0.8rem, 1.5vw, 1.2rem);
  overflow-y: visible;
  padding: clamp(1.5rem, 3vw, 2.5rem);
  padding-top: clamp(3.5rem, 5vw, 4.5rem);
  border-radius: 0 0 clamp(0.15rem, 0.25vw, 0.25rem) clamp(0.15rem, 0.25vw, 0.25rem);
  position: relative;
  background-color: var(--hatterextended);
  margin-top: 0;
}

/* Ensure proper ordering in expanded view: h2, detailed description, facilities, pricing */
#szlista li.expanded .szdetails .expanded-content:not(.facilities-expanded-content) {
  order: 2;
}

#szlista li.expanded .szdetails .facilities-expanded-content {
  order: 3;
}

/* Pricing section comes after facilities */
.expanded-pricing-section {
  display: none;
}

#szlista li.expanded .szdetails .expanded-pricing-section {
  order: 4;
  display: block !important;
}

/* More space before and after room name in expanded view */
#szlista li.expanded .szdetails h2 {
  margin-top: clamp(2rem, 4vw, 3rem);
  margin-bottom: clamp(2rem, 4vw, 3rem);
  font-size: clamp(1.4rem, 2.5vw, 1.8rem);
}

#szlista li.expanded .room-image-section {
  flex: none;
  display: flex;
  flex-direction: column;
  position: relative;
  background-color: var(--hatterextended);
  border-radius: clamp(0.15rem, 0.25vw, 0.25rem) clamp(0.15rem, 0.25vw, 0.25rem) 0 0;
  min-height: clamp(450px, 50vh, 650px);
  max-height: none;
  overflow: visible;
  margin-bottom: 0;
}

/* Hide room action bar when expanded */
#szlista li.expanded .room-action-bar {
  display: none;
}

/* Show expanded content when expanded */
#szlista li.expanded .expanded-content {
  display: block !important;
  animation: fadeInContent 0.4s ease 0.2s forwards;
  opacity: 0;
}

/* Make expanded-content containing facilities always visible */
.facilities-expanded-content {
  display: block !important;
  opacity: 1;
  animation: none;
}

/* Remove container styling from facilities-expanded-content in collapsed view */
#szlista li:not(.expanded) .facilities-expanded-content {
  background: none;
  padding: 0;
  border: none;
}

@keyframes fadeInContent {
  to {
    opacity: 1;
  }
}

/* Room Image Section */
.room-image-section {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* Main room image - collapsed state */
.room-image-section > .main-room-image {
  width: clamp(280px, 40vw, 500px);
  height: 100%;
  object-fit: cover;
  border-top-right-radius: clamp(0.15rem, 0.25vw, 0.25rem);
  border-bottom-right-radius: clamp(0.15rem, 0.25vw, 0.25rem);
  display: block;
  margin: 0;
  padding: 0;
  flex-shrink: 0;
}

/* Hide previous image during switch until new one has loaded (avoids old image lingering, especially on mobile) */
.room-image-section > .main-room-image.main-room-image-loading {
  opacity: 0;
  transition: opacity 0.15s ease;
}

/* Expanded room - main image takes flex space */
#szlista li.expanded .room-image-section {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  position: relative;
  background-color: var(--hatterextended);
  border-radius: clamp(0.15rem, 0.25vw, 0.25rem) clamp(0.15rem, 0.25vw, 0.25rem) 0 0;
  min-height: clamp(450px, 50vh, 650px);
  max-height: none;
  overflow: visible;
  padding: clamp(0.5rem, 1vw, 1rem) clamp(0.5rem, 1vw, 1rem) 0 clamp(0.5rem, 1vw, 1rem);
  margin-bottom: 0;
  isolation: isolate;
}

/* Expanded main image - original size with constraints */
#szlista li.expanded .room-image-section > .main-room-image {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: clamp(450px, 58vh, 720px);
  flex: none;
  object-fit: contain;
  background-color: var(--hatterextended);
  border-radius: clamp(0.15rem, 0.25vw, 0.25rem);
  transition: opacity 0.2s ease;
  margin-bottom: clamp(0.8rem, 1.5vw, 1.2rem);
}

/* Pricing Section */
.pricing-section {
  margin-top: clamp(1.2rem, 2.5vw, 1.8rem);
  padding-top: clamp(0.8rem, 1.5vw, 1.2rem);
  border-top: 1px solid rgba(255, 255, 255, 0.15);
}

.pricing-blocks {
  display: flex;
  justify-content: space-around;
  gap: clamp(0.6rem, 4vw, 4rem);
  margin-bottom: clamp(0.8rem, 1.5vw, 1.2rem);
}

.pricing-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(0.3rem, 0.6vw, 0.5rem);
  flex: 1;
  padding: clamp(0.6rem, 1vw, 0.8rem);
  transition: all 0.3s ease;
  max-width: clamp(90px, 12vw, 130px);
}

/* Single price block - centered and larger since it's the only one */
.pricing-block-single {
  max-width: clamp(150px, 25vw, 250px);
  flex: none;
  padding: clamp(1rem, 1.5vw, 1.5rem);
}

.pricing-block-single .pricing-icon {
  width: clamp(2.5rem, 6vw, 4rem) !important;
  height: clamp(2.5rem, 6vw, 4rem) !important;
}

.pricing-block-single .pricing-label {
  font-size: clamp(0.85rem, 1.3vw, 1rem);
}

.pricing-block-single .pricing-value {
  font-size: clamp(1.3rem, 2vw, 1.6rem);
}

.pricing-icon {
  width: clamp(1.5rem, 4vw, 6rem) !important;
  height: clamp(1.5rem, 4vw, 6rem) !important;
  object-fit: contain;
  filter: brightness(1.1);
  display: block;
  flex-shrink: 0;
  order: 1;
}

.pricing-label {
  font-size: clamp(0.7rem, 1vw, 0.8rem);
  font-family: var(--font-room-details);
  color: rgba(255, 255, 255, 0.9);
  text-align: center;
  font-weight: 100;
  letter-spacing: 0.02em;
  line-height: 1.2;
  white-space: nowrap;
  order: 2;
}

.pricing-value {
  font-size: clamp(1rem, 1.5vw, 1.2rem);
  font-family: var(--font-room-details);
  color: var(--white-pure);
  font-weight: 100;
  text-align: center;
  line-height: 1;
  order: 3;
}

.pricing-value::after {
  content: ' / RON';
  font-size: 0.75em;
  opacity: 0.8;
}

.pricing-value[data-active-currency="EUR"]::after {
  content: ' / EUR';
}

/* Currency Selector */
.currency-selector {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(0.5rem, 1vw, 0.8rem);
  flex-wrap: wrap;
  padding-top: clamp(0.5rem, 1vw, 0.8rem);
}

.currency-btn {
  padding: clamp(0.4rem, 0.8vw, 0.6rem) clamp(0.9rem, 1.6vw, 1.3rem);
  background-color: rgba(255, 255, 255, 0.08);
  color: var(--white-pure);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: clamp(0.25rem, 0.35vw, 0.35rem);
  font-family: var(--font-room-details);
  font-size: clamp(0.8rem, 1.2vw, 0.9rem);
  font-weight: 100;
  cursor: pointer;
  transition: all 0.3s ease;
}

.currency-btn:hover {
  background-color: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.3);
  transform: translateY(-1px);
}

.currency-btn.active {
  background-color: var(--blue2);
  border-color: var(--blue2);
  font-weight: 400;
  box-shadow: 0 2px 8px rgba(17, 18, 69, 0.4);
}

.currency-suffix {
  font-size: clamp(0.75rem, 1.1vw, 0.85rem);
  font-family: var(--font-room-details);
  color: var(--white-pure);
  font-weight: 100;
}

/* Thumbnail Gallery - hidden by default */
.thumbnail-gallery {
  display: none;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: clamp(0.4rem, 0.8vw, 0.6rem);
  padding: clamp(0.7rem, 1.3vw, 1rem);
  overflow-x: scroll;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 100%);
  flex-shrink: 0;
  height: clamp(80px, 10vh, 110px);
  align-items: center;
  justify-content: flex-start;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  /* Hide scrollbar but keep scrolling functionality */
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE and Edge */
  width: 100%;
  max-width: 100%;
  position: relative;
}

/* Hide scrollbar for WebKit browsers (Chrome, Safari, Edge) */
.thumbnail-gallery::-webkit-scrollbar {
  display: none;
}

/* Show thumbnail gallery only in expanded state */
#szlista li.expanded .thumbnail-gallery {
  display: flex !important;
}

/* Webkit scrollbar styling removed - scrollbar is now hidden */

/* Thumbnail images - specific sizing */
.thumbnail-gallery > .thumbnail {
  width: clamp(50px, 6vw, 75px) !important;
  height: clamp(50px, 6vw, 75px) !important;
  min-width: clamp(50px, 6vw, 75px) !important;
  min-height: clamp(50px, 6vw, 75px) !important;
  max-width: clamp(50px, 6vw, 75px) !important;
  max-height: clamp(50px, 6vw, 75px) !important;
  object-fit: cover;
  border-radius: clamp(0.15rem, 0.25vw, 0.25rem);
  cursor: pointer;
  transition: all 0.3s ease;
  border: 1.5px solid rgba(255, 255, 255, 0.2);
  flex-shrink: 0;
  opacity: 0.7;
  display: block;
  background-color: rgba(255, 255, 255, 0.05);
}

/* Thumbnail loading state */
.thumbnail-gallery > .thumbnail.thumbnail-loading {
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.05) 0%,
    rgba(255, 255, 255, 0.15) 50%,
    rgba(255, 255, 255, 0.05) 100%
  );
  background-size: 200% 100%;
  animation: thumbnailShimmer 1.5s ease-in-out infinite;
  opacity: 0.5;
  cursor: wait;
}

@keyframes thumbnailShimmer {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

/* Thumbnail loaded state */
.thumbnail-gallery > .thumbnail.thumbnail-loaded {
  animation: thumbnailFadeIn 0.3s ease-in;
}

@keyframes thumbnailFadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 0.7;
  }
}

.thumbnail-gallery > .thumbnail:hover {
  transform: scale(1.08);
  border-color: var(--gold);
  opacity: 1;
}

.thumbnail-gallery > .thumbnail.active {
  border-color: var(--blue2);
  border-width: 2px;
  box-shadow: 0 0 8px rgba(17, 18, 69, 0.6);
  opacity: 1;
}

/* Prevent hover effects while loading */
.thumbnail-gallery > .thumbnail.thumbnail-loading:hover {
  transform: none;
  border-color: rgba(255, 255, 255, 0.2);
}

/* Adjust arrow buttons in expanded state */
#szlista li.expanded .bnyil,
#szlista li.expanded .jnyil {
  top: 50%;
  transform: translateY(-50%);
  background-color: rgba(0, 0, 0, 0);
}

#szlista li.expanded .bnyil {
  left: clamp(0.5rem, 1vw, 1rem);
}

#szlista li.expanded .jnyil {
  right: clamp(0.5rem, 1vw, 1rem);
}

#szlista li.expanded .bnyil:hover,
#szlista li.expanded .jnyil:hover {
  background-color: rgba(0, 0, 0, 0.055);
}

/* Room description styling update */
.room-description {
  font-size: clamp(0.85rem, 1.5vw, 1.1rem);
  font-weight: 100;
  font-family: var(--font-room-details);
  margin-top: clamp(0.5rem, 1.5vw, 1rem);
  margin-left: clamp(0.5rem, 2vw, 1.5rem);
  margin-right: clamp(0.5rem, 2vw, 1.5rem);
  line-height: 1.3;
}

/* Hide short description when expanded */
#szlista li.expanded .room-description-short {
  display: none;
}

/* Show and style detailed description in expanded view - styled box like offers */
#szlista li.expanded .room-description-detailed {
  display: block;
  font-size: clamp(0.85rem, 1.1vw, 1.15rem);
  line-height: 1.7;
  color: #333;
  margin-top: clamp(1rem, 2vw, 1.5rem);
  margin-left: 0;
  margin-right: 0;
  margin-bottom: clamp(0.8rem, 1.2vw, 1.2rem);
  text-align: justify;
  padding: clamp(1rem, 2vw, 1.5rem);
  background: rgba(255, 255, 255, 0.5);
  border-radius: clamp(0.3rem, 0.5vw, 0.5rem);
  border-left: 4px solid var(--blue2);
}

/* Hide detailed description when collapsed */
.room-description-detailed {
  display: none;
}

/* Room facilities container - same styling as detailed description, but only in expanded view */
.room-facilities-container {
  font-family: var(--font-room-details);
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 0.8rem;
  align-items: center;
}

/* Apply container styling only in expanded view */
#szlista li.expanded .room-facilities-container {
  font-size: clamp(0.85rem, 1.1vw, 1.15rem);
  line-height: 1.7;
  color: #333;
  margin-top: clamp(0.5rem, 0.8vw, 0.8rem);
  margin-left: 0;
  margin-right: 0;
  margin-bottom: clamp(0.5rem, 1vw, 0.8rem);
  padding: clamp(1rem, 2vw, 1.5rem);
  background: rgba(255, 255, 255, 0.5);
  border-radius: clamp(0.3rem, 0.5vw, 0.5rem);
  border-left: 4px solid var(--blue2);
}

/* In collapsed view, remove container styling and use default #szinfok styles */
#szlista li:not(.expanded) .room-facilities-container {
  font-size: inherit;
  line-height: inherit;
  color: inherit;
  margin-top: clamp(1rem, 2vw, 1.5rem);
  margin-left: clamp(0.5rem, 2vw, 1.5rem);
  margin-right: clamp(0.5rem, 2vw, 1.5rem);
  margin-bottom: 0;
  padding: 0;
  background: none;
  border-radius: 0;
  border-left: none;
}

/* Smooth scroll behavior when expanding/collapsing */
html {
  scroll-behavior: smooth;
}

/* ===========================================
   RESPONSIVE: DESKTOP
   =========================================== */
@media screen and (min-width: 1024px) {
  #szlista li.expanded {
    min-height: clamp(750px, 85vh, 1100px);
  }
  
  #szlista li.expanded .room-image-section {
    min-width: 600px;
    flex: 1 1 55%; /* Take at least 55% of card, don't shrink below 600px */
    min-height: clamp(500px, 55vh, 700px);
    max-height: none;
  }
  
  /* Fixed image area so section doesn't jump when switching images */
  #szlista li.expanded .room-image-section > .main-room-image {
    width: 100%;
    height: clamp(450px, 58vh, 720px);
    max-width: 100%;
    max-height: none;
    object-fit: contain;
  }
  
  .thumbnail {
    width: clamp(55px, 6.5vw, 80px) !important;
    height: clamp(55px, 6.5vw, 80px) !important;
    max-width: clamp(55px, 6.5vw, 80px) !important;
    max-height: clamp(55px, 6.5vw, 80px) !important;
  }
  
  .pricing-icon {
    width: clamp(1.8rem, 2vw, 6rem) !important;
    height: clamp(1.8rem, 2vw, 6rem) !important;
  }
  
  /* Larger font size for detailed description on desktop */
  #szlista li.expanded .room-description-detailed {
    font-size: clamp(1rem, 1.25vw, 1.1rem);
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
  }
  
  /* Smaller h2 in expanded view on desktop */
  #szlista li.expanded .szdetails h2 {
    font-size: clamp(1.2rem, 2vw, 1.4rem);
  }
  
  /* Larger font size for facilities container on desktop, and make it wider */
  #szlista li.expanded .room-facilities-container {
    font-size: clamp(1rem, 1.25vw, 1.1rem);
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
  }
  
  /* Smaller facility item text on desktop in collapsed view */
  #szlista li:not(.expanded) .facility-item > span {
    font-size: clamp(0.75rem, 1vw, 0.85rem);
  }
  
  /* Reorder elements in expanded view: description before facilities */
  #szlista li.expanded .szdetails {
    padding-left: clamp(2.5rem, 4vw, 4rem);
    padding-right: clamp(2.5rem, 4vw, 4rem);
  }
  
  #szlista li.expanded .szdetails h2 {
    order: 1;
  }
  
  #szlista li.expanded .szdetails .room-description-short {
    order: 0;
  }
  
  #szlista li.expanded .szdetails .room-action-bar {
    order: 4;
  }
}

/* ===========================================
   RESPONSIVE: TABLET
   =========================================== */
@media screen and (min-width: 768px) and (max-width: 1023px) {
  #szlista li.expanded {
    min-height: clamp(650px, 75vh, 900px);
  }
  
  #szlista li.expanded .room-image-section {
    min-height: clamp(450px, 50vh, 600px);
    max-height: none;
  }
  
  .pricing-blocks {
    flex-direction: row;
  }
  
  .thumbnail {
    width: clamp(52px, 7vw, 70px) !important;
    height: clamp(52px, 7vw, 70px) !important;
    max-width: clamp(52px, 7vw, 70px) !important;
    max-height: clamp(52px, 7vw, 70px) !important;
  }
  
  .pricing-icon {
    width: clamp(1.6rem, 2.4vw, 2.1rem) !important;
    height: clamp(1.6rem, 2.4vw, 2.1rem) !important;
    max-width: clamp(1.6rem, 2.4vw, 2.1rem) !important;
    max-height: clamp(1.6rem, 2.4vw, 2.1rem) !important;
  }
  
  /* Bigger h2 in expanded view on tablet */
  #szlista li.expanded .szdetails h2 {
    font-size: clamp(1.3rem, 2.2vw, 1.6rem);
  }
  
  
  /* Bigger facility item text on tablet in collapsed view */
  #szlista li:not(.expanded) .facility-item > span {
    font-size: clamp(0.85rem, 1.3vw, 0.95rem);
  }
  
  /* Bigger facilities container text on tablet in collapsed view */
  #szlista li:not(.expanded) .room-facilities-container {
    font-size: clamp(0.9rem, 1.4vw, 1rem);
  }
  
  /* Make containers tighter on tablet in expanded view */
  #szlista li.expanded .room-description-detailed {
    max-width: 550px;
    margin-left: auto;
    margin-right: auto;
  }
  
  #szlista li.expanded .room-facilities-container {
    max-width: 550px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: clamp(0.5rem, 1vw, 0.8rem);
  }
}

/* ===========================================
   RESPONSIVE: MOBILE
   =========================================== */
@media screen and (max-width: 767px) {
  #szlista li.expanded {
    flex-direction: column;
    width: 100%;
    max-width: 95%; /* Expanded view can be wider than normal cards (80%) on mobile */
    min-height: clamp(550px, 65vh, 750px);
  }
  
  /* Mobile: Keep image section first, details second */
  #szlista li.expanded .room-image-section {
    flex: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    border-radius: clamp(0.3rem, 1vw, 0.5rem) clamp(0.3rem, 1vw, 0.5rem) 0 0;
    min-height: clamp(350px, 40vh, 500px);
    max-height: none;
    overflow: visible;
    order: 1;
    padding: clamp(0.5rem, 1vw, 1rem) clamp(0.5rem, 1vw, 1rem) 0;
  }
  
  /* Mobile: Main image comes first within room-image-section */
  #szlista li.expanded .room-image-section > .main-room-image {
    order: 1;
    width: 100%;
    height: auto;
    max-height: clamp(250px, 35vh, 400px);
  }
  
  /* Mobile: Navigation buttons in the middle (overlaid on image) */
  #szlista li.expanded .room-image-section > .bnyil,
  #szlista li.expanded .room-image-section > .jnyil {
    order: 2;
  }
  
  /* Mobile: Thumbnail gallery comes last (below main image) */
  #szlista li.expanded .room-image-section > .thumbnail-gallery {
    order: 3;
  }
  
  #szlista li.expanded .szdetails {
    flex: none;
    border-radius: 0 0 clamp(0.3rem, 1vw, 0.5rem) clamp(0.3rem, 1vw, 0.5rem);
    padding: clamp(1rem, 3vw, 1.5rem);
    padding-top: clamp(3.5rem, 6vw, 4rem);
    gap: clamp(0.6rem, 2vw, 1rem);
    overflow-y: visible;
    order: 2;
  }
  
  /* Bigger h2 in expanded view on mobile */
  #szlista li.expanded .szdetails h2 {
    font-size: clamp(1.2rem, 4vw, 1.5rem);
  }
  
  
  /* Mobile: Place thumbnail gallery below main image */
  #szlista li.expanded .thumbnail-gallery {
    width: 100%;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 0 0 clamp(0.3rem, 1vw, 0.5rem) clamp(0.3rem, 1vw, 0.5rem);
    padding: clamp(0.8rem, 2vw, 1.2rem);
    height: clamp(70px, 12vh, 95px);
  }
  
  /* Mobile scrollbar - hidden (scrollbar removed) */
  
  .pricing-blocks {
    flex-direction: row;
    gap: clamp(0.5rem, 2vw, 1rem);
  }
  
  .pricing-block {
    padding: clamp(0.8rem, 1.5vw, 0.7rem);
    max-width: clamp(95px, 15vw, 140px);
  }
  
  .pricing-icon {
    width: clamp(1.4rem, 5vw, 1.8rem) !important;
    height: clamp(1.4rem, 5vw, 1.8rem) !important;
    max-width: clamp(1.4rem, 5vw, 1.8rem) !important;
    max-height: clamp(1.4rem, 5vw, 1.8rem) !important;
  }
  
  .pricing-label {
    font-size: clamp(0.6rem, 2.5vw, 0.75rem);
    white-space: nowrap;
  }
  
  .pricing-value {
    font-size: clamp(1rem, 3vw, 1.5rem);
  }
  
  .thumbnail-gallery > .thumbnail {
    width: clamp(45px, 12vw, 60px) !important;
    height: clamp(45px, 12vw, 60px) !important;
    min-width: clamp(45px, 12vw, 60px) !important;
    min-height: clamp(45px, 12vw, 60px) !important;
    max-width: clamp(45px, 12vw, 60px) !important;
    max-height: clamp(45px, 12vw, 60px) !important;
  }
  
  .thumbnail-gallery {
    height: clamp(65px, 8vh, 90px);
  }
  
  .close-details-btn {
    top: clamp(1rem, 3vw, 1.5rem);
    right: clamp(0.5rem, 2vw, 0.8rem);
    padding: clamp(0.5rem, 1.5vw, 0.7rem) clamp(0.8rem, 2vw, 1rem);
  }
  
  #szlista li.expanded .bnyil,
  #szlista li.expanded .jnyil {
    width: clamp(2rem, 8vw, 2.5rem);
    height: clamp(2rem, 8vw, 2.5rem);
    background-size: clamp(1.2rem, 5vw, 1.5rem);
  }
}

/* Accessibility - Reduced Motion */
@media (prefers-reduced-motion: reduce) {
  #szlista li.expanding,
  #szlista li.collapsing {
    animation-duration: 0.01ms !important;
  }
  
  .pricing-block:hover,
  .thumbnail:hover,
  .view-details-btn:hover,
  .close-details-btn:hover {
    transform: none;
  }
  
  #szlista li.expanded {
    transition-duration: 0.01ms !important;
  }
}

/* Desktop-specific styles */
@media screen and (min-width: 1024px) {
  #szobak {
    background-attachment: fixed;
    padding-top: 10rem; /* Match header height so content starts right below overlap-group */
  }
  
  #room-video-container {
    min-height: clamp(420px, 55vh, 520px); /* Enough height for logo + padding so it stays visible */
    padding-top: clamp(7rem, 11vh, 9rem); /* Push logo down so negative margin doesn't hide it under header */
    margin-bottom: clamp(0.2rem, 1vw, 0.5rem);
  }

  #szlista li {
    max-width: 1100px;
    height: 420px;
  }

  #szlista li .room-image-section > img,
  #szlista li .main-room-image {
    width: 600px;
    height: 100%;
  }

  .bnyil {
    right: calc(600px - clamp(2rem, 3.5vw, 3rem) - clamp(0.5rem, 2vw, 1.5rem));
  }
}

/* Tablet adjustments */
@media screen and (min-width: 768px) and (max-width: 1023px) {
  #szobak {
    background-attachment: fixed;
  }

  #szlista li {
    max-width: 760px;
    height: 370px;
  }

  #szlista li .room-image-section > img,
  #szlista li .main-room-image {
    width: 400px;
    height: 100%;
  }

  .bnyil {
    right: calc(400px - clamp(2rem, 3.5vw, 3rem) - clamp(0.5rem, 2vw, 1.5rem));
  }

  .facility-icon {
    width: 0.95rem !important;
    height: 1.6rem !important;
    max-width: 0.95rem !important;
    max-height: 1.3rem !important;
  }

  .text-wrapper {
    flex-direction: row;
  }
}

/* Mobile ajanlat section */
@media screen and (max-width: 767px) {
  #ajanlat {
    width: 100%;
    height: auto;
    min-height: clamp(400px, 90vh, 650px);
    background-image: url("./estimainiris.avif");
    background-size: cover;
    background-position: center center;
    background-attachment: scroll;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease;
    overflow: hidden;
    padding: clamp(3rem, 5vw, 4rem) clamp(1rem, 3vw, 2rem);
  }

 .ajanlat-tartalom {
    text-align: center;
    width: 100%;
    max-width: 90%;
    padding: clamp(1rem, 3vw, 2rem);
  }

 .flip-container {
    margin-bottom: clamp(2rem, 5vw, 4rem);
 }

 .text-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(1rem, 3vw, 2rem);
    margin-bottom: clamp(5rem, 5vw, 3rem);
  }

 .flip-text {
    color: var(--white-pure);
    font-family: var(--font-flip-text);
    font-size: clamp(1.5rem, 6vmin, 2rem);
    text-transform: uppercase;
    margin: 0;
    opacity: 0;
    transform: rotateX(90deg);
    transform-origin: bottom;
    width: 100%;
    line-height: 1.3;
  }

 .flip-text.animate {
    animation: flipIn 0.5s forwards;
  }

 .flip-text.delayed {
    animation-delay: 0.5s;
  }

 @keyframes flipIn {
    0% {
       opacity: 0;
       transform: rotateX(90deg);
    }
    100% {
       opacity: 1;
       transform: rotateX(0deg);
    }
  }  

 #agomb {
    border: solid clamp(0.05rem, 0.1vmin, 0.1rem) #c4bda0;
    background-color: var(--button-bg);
    color: var(--white-pure);
    text-decoration: none;
    padding: clamp(0.8rem, 2vw, 1.5rem) clamp(1rem, 4vw, 2rem);
    border-radius: clamp(0.4rem, 0.8vw, 0.8rem);
    font-family: var(--font-button-secondary);
    font-size: clamp(0.7rem, 2vmin, 1.1rem);
    text-transform: uppercase;
    transition: all 0.6s ease;
    opacity: 0;
    display: inline-block;
  }

 #agomb.show {
    animation: fadeIn 0.5s forwards;
    animation-delay: 1.5s;
  }  

 @keyframes fadeIn {
    0% {
       opacity: 0;
    }
    100% {
       opacity: 1;
    }
  }

 #agomb:hover {
    background-color: var(--button-bg);
    transform: translateY(-2px);
  }
}

/* Small tablet adjustments */
@media screen and (min-width: 481px) and (max-width: 767px) {
  #szlista li {
    flex-direction: column;
    max-width: 95%; /* Match expanded card width on mobile */
    height: auto;
    margin: clamp(3.5rem, 8vw, 5.5rem) auto;
  }

  #szlista li img {
    width: 100%;
    height: clamp(250px, 50vw, 350px);
    border-radius: 0;
    border-top-left-radius: clamp(0.3rem, 0.5vw, 0.5rem);
    border-top-right-radius: clamp(0.3rem, 0.5vw, 0.5rem);
    order: 1;
  }

  .szdetails {
    border-radius: 0;
    border-bottom-left-radius: clamp(0.3rem, 0.5vw, 0.5rem);
    border-bottom-right-radius: clamp(0.3rem, 0.5vw, 0.5rem);
    order: 2;
  }

  .szdetails h2 {
    position: static;
    margin-top: 0;
    margin-bottom: clamp(1.2rem, 3vw, 1.8rem);
    transform: none;
  }

  .room-description {
    margin-bottom: clamp(0.8rem, 2.5vw, 1.2rem);
  }

  #szinfok {
    margin-top: clamp(1.2rem, 3vw, 1.8rem);
    margin-bottom: clamp(0.8rem, 2.5vw, 1.2rem);
  }

  .facility-item {
    flex-direction: row;
    font-size: clamp(0.8rem, 2.5vw, 1rem);
  }

  .facility-icon {
    width: clamp(0.85rem, 2.8vw, 1rem) !important;
    height: clamp(0.85rem, 2.8vw, 1rem) !important;
    max-width: clamp(0.85rem, 2.8vw, 1rem) !important;
    max-height: clamp(0.85rem, 2.8vw, 1rem) !important;
    order: -1;
    flex-shrink: 0;
  }

  .bnyil, .jnyil {
    width: clamp(2rem, 6vw, 2.5rem);
    height: clamp(2rem, 6vw, 2.5rem);
    background-size: clamp(1.2rem, 4vw, 1.5rem);
    top: calc(clamp(250px, 50vw, 350px) - clamp(2rem, 6vw, 2.5rem) - clamp(0.8rem, 3vw, 1.5rem));
    transform: none;
    bottom: auto;
    order: 3;
  }

  .bnyil {
    left: clamp(1rem, 5vw, 2rem);
    right: auto;
  }

  .jnyil {
    right: clamp(1rem, 5vw, 2rem);
  }

}

/* Mobile-specific adjustments */
@media screen and (max-width: 480px) {
  #szobak {
    padding: clamp(1.5rem, 4vw, 2rem);
  }

  #szlista {
    margin: clamp(1rem, 3vw, 2rem) auto;
  }

  #szlista li {
    margin: clamp(4rem, 10vw, 7rem) auto;
    flex-direction: column;
    max-width: 95%; /* Match expanded card width on mobile */
    height: auto;
  }

  #szlista li img {
    width: 100%;
    height: clamp(200px, 50vw, 300px);
    border-radius: 0;
    border-top-left-radius: clamp(0.3rem, 1vw, 0.5rem);
    border-top-right-radius: clamp(0.3rem, 1vw, 0.5rem);
    order: 1;
  }

  .szdetails {
    padding: clamp(1rem, 3vw, 1.5rem);
    border-radius: 0;
    border-bottom-left-radius: clamp(0.3rem, 1vw, 0.5rem);
    border-bottom-right-radius: clamp(0.3rem, 1vw, 0.5rem);
    background-color: var(--hatterrooms);
    order: 2;
  }

  .szdetails h2 {
    position: static;
    margin-top: clamp(1.5rem, 4vw, 2rem);
    margin-bottom: clamp(1.5rem, 4vw, 2rem);
    transform: none;
    font-size: clamp(0.9rem, 3.8vw, 1.5rem);
  }

  .room-description {
    font-size: clamp(0.8rem, 3vw, 1.1rem);
    margin-left: 0;
    margin-right: 0;
    margin-bottom: clamp(1rem, 3vw, 1.5rem);
  }
  
  #szinfok {
    margin-left: 0;
    margin-right: 0;
    margin-bottom: clamp(0.5rem, 2vw, 1rem);
  }
  
  /* Mobile styles for facilities container */
  .room-facilities-container {
    margin-top: clamp(1rem, 3vw, 1.5rem);
    margin-left: 0;
    margin-right: 0;
    margin-bottom: clamp(0.5rem, 1.5vw, 0.8rem);
    padding: clamp(0.8rem, 2vw, 1.2rem);
  }

  /* Mobile action bar styling */
  .room-action-bar {
    flex-direction: column;
    gap: clamp(0.8rem, 2vw, 1rem);
    padding: 0;
    align-items: stretch;
  }
  
  .view-details-btn,
  .close-details-btn {
    font-size: clamp(0.8rem, 3.5vw, 1rem);
  }

  .view-details-btn {
    width: 100%;
    justify-content: center;
  }
  

  #szinfok {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: clamp(1.5rem, 4vw, 2rem);
    margin-bottom: clamp(0.5rem, 2vw, 1rem);
  }

  .facility-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.1rem;
    font-size: clamp(0.75rem, 2.8vw, 0.95rem);
  }

  .facility-icon {
    width: clamp(0.9rem, 3vw, 1rem) !important;
    height: clamp(0.9rem, 3vw, 1rem) !important;
    order: -1;
    flex-shrink: 0;
  }

  .bnyil, .jnyil {
    width: clamp(2rem, 7vw, 2.8rem);
    height: clamp(2rem, 7vw, 2.8rem);
    background-size: clamp(1.2rem, 4.5vw, 1.8rem);
    top: calc(clamp(200px, 50vw, 300px) - clamp(2rem, 7vw, 2.8rem) - clamp(0.5rem, 2vw, 1rem));
    transform: none;
    bottom: auto;
    order: 3;
  }

  .bnyil {
    left: clamp(0.5rem, 3vw, 1rem);
    right: auto;
  }

  .jnyil {
    right: clamp(0.5rem, 3vw, 1rem);
  }
}

/* Image animations */
@keyframes szkepb0 {
  from {
    opacity: 0;
    transform: translateX(30%);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes szkepb1 {
  from {
    opacity: 0;
    transform: translateX(30%);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes szkepb2 {
  from {
    opacity: 0;
    transform: translateX(30%);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes szkepb3 {
  from {
    opacity: 0;
    transform: translateX(30%);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes szkepb4 {
  from {
    opacity: 0;
    transform: translateX(30%);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes szkepj0 {
  from {
    opacity: 0;
    transform: translateX(-30%);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes szkepj1 {
  from {
    opacity: 0;
    transform: translateX(-30%);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes szkepj2 {
  from {
    opacity: 0;
    transform: translateX(-30%);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes szkepj3 {
  from {
    opacity: 0;
    transform: translateX(-30%);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes szkepj4 {
  from {
    opacity: 0;
    transform: translateX(-30%);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Extra small viewports - rooms */
@media screen and (max-width: 360px) {
  #szobak {
    padding: clamp(1rem, 3vw, 1.5rem);
  }
  #szlista li {
    margin: clamp(3rem, 8vw, 5rem) auto;
  }
  .szdetails {
    padding: clamp(0.75rem, 2.5vw, 1.25rem);
  }
  .szdetails h2 {
    font-size: clamp(0.85rem, 3.5vw, 1.35rem);
  }
}

@media screen and (max-width: 320px) {
  #szobak {
    padding: 1rem;
  }
  #szlista li {
    margin: clamp(2.5rem, 7vw, 4rem) auto;
  }
}

/* Smooth scrolling */
html {
  scroll-behavior: smooth;
}

/* Accessibility improvements */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Print styles */
@media print {
  #szobak {
    background-image: none;
    background-color: var(--white-pure);
  }
  
  .desktop {
    display: none;
  }
}