/* ============================================
   ROOM DETAILS PAGE RESPONSIVE STYLES
   ============================================ */

/* 🔵 Desktop – 1024px to 1439px */
@media (max-width: 1439px) {
  /* Main Content */
  .main-content {
    margin-top: 85px;
  }

  .mobile-sticky-bottom {
    display: none;
  }

  .sticky-bottom-content {
    display: none;
  }

  /* Room Details Header */
  .room-details-header {
    padding: 40px 30px;
  }

  .room-name {
    font-size: 36px;
  }

  .room-reference {
    font-size: 14px;
  }

  .room-description {
    font-size: 20px;
  }

  /* Room Info Section */
  .room-info-container {
    max-width: 1200px;
    padding: 0 30px;
  }

  /* Room Tabs */
  .room-tabs {
    gap: 15px;
  }

  .room-tab {
    font-size: 19px;
    padding: 10px 20px;
  }

  .room-tab.active {
    color: var(--blue);
    font-size: 20px;
    font-weight: var(--font-semibold);
  }

  .characteristic-text {
    font-size: 18px;
  }

  /* Images Gallery */
  .main-image-container {
    height: 400px;
  }

  /* Pricing Section */
  .main-price {
    font-size: 32px;
  }

  .price-subtitle {
    font-size: 15px;
  }

  /* Renting Reservation Section */
  .renting-reservation-section {
    padding: 0 40px;
  }

  .renting-reservation-container {
    max-width: 1100px;
    padding: 0 30px;
  }

  .reservation-title {
    font-size: 24px;
  }

  .form-block {
    width: 100%;
    max-width: 500px;
  }

  .reservation-form-detailed {
    width: 100% !important;
    max-width: 500px !important;
    height: 850px !important;
  }

  .reservation-form-detailed.collapsed {
    height: 900px !important;
    min-height: 900px !important;
  }

  .room-info-right {
    height: 560px;
  }

  /* Rental Conditions */
  .rental-conditions-block,
  .availability-block,
  .zona-block,
  .location-block {
    width: 100%;
  }

  .availability-title {
    font-size: 22px;
  }

  .conditions-title,
  .zona-title,
  .location-title {
    font-size: 26px;
  }

  .location-map-container {
    width: 100%;
    max-width: 540px;
  }

  /* Reserve Button */
  .reserve-trigger-button {
    width: 200px;
    height: 50px;
    font-size: 18px;
  }
}

/* 🟡 Tablet – 768px to 1023px */
@media (max-width: 1023px) {
  /* Main Content */
  .main-content {
    margin-top: 80px;
  }

  .mobile-sticky-bottom {
    display: none;
  }

  .sticky-bottom-content {
    display: none;
  }

  /* Room Details Header */
  .room-details-header {
    padding: 30px 20px;
  }

  /* Room Name and Reference Section */
  .room-name-section {
    margin-left: 150px;
    margin-bottom: 15px;
  }

  .room-name {
    font-size: 32px;
  }

  .room-reference {
    font-size: 13px;
  }

  /* Room Description Section */
  .room-description-section {
    margin-left: 110px;
  }

  .room-description {
    font-size: 18px;
  }

  /* Room Info Section */
  .room-info-section {
    padding: 30px 0;
  }

  .room-info-container {
    max-width: 100%;
    padding: 0 20px;
    flex-direction: column;
  }

  /* Left Column - Full Width */
  .room-info-left {
    max-width: 900px;
    width: 100%;
    order: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  /* Right Column - Full Width and First */
  .right-column-container {
    width: 100%;
    order: 1;
    margin-bottom: 30px;
    display: flex;
    justify-content: center;
  }

  .room-info-right {
    width: 580px;
    max-width: 90%;
    height: auto;
  }

  /* Room Tabs */
  .room-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 20px;
  }

  .room-tab {
    flex: 1;
    min-width: 150px;
    font-size: 17px;
    padding: 10px 15px;
  }

  .room-tab.active {
    color: var(--blue);
    font-size: 18px;
    font-weight: var(--font-semibold);
  }

  /* Characteristics Grid - 2 columns */
  .characteristics-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
  }

  .characteristics-col {
    grid-column: span 1;
  }

  /* Images Gallery */
  .room-images-gallery {
    width: 100%;
  }

  .main-image-container {
    width: 100%;
    max-width: 550px;
    height: 350px;
    margin: 0 auto;
  }

  .thumbnail-gallery {
    margin-top: 15px;
    width: 100%;
    max-width: 550px;
    margin-left: auto;
    margin-right: auto;
  }

  .thumbnails-container {
    width: 100%;
    overflow: hidden;
  }

  .thumbnail-item {
    width: 80px;
    height: 80px;
  }

  /* Pricing Section */
  .pricing-section {
    margin-top: 20px;
    width: 100%;
  }

  .pricing-container {
    flex-direction: column;
    gap: 20px;
    padding: 25px 20px;
    max-width: 550px;
    margin: 0 auto;
  }

  .pricing-separator {
    display: none;
  }

  .pricing-col {
    width: 100%;
  }

  /* Other Rooms Section */
  .other-rooms-section {
    width: 48%;
    margin-top: 25px;
  }

  /* Apartment Description */
  .apartment-description-section {
    width: 48%;
    margin-top: 25px;
  }

  /* Container for side-by-side layout */
  .room-info-left > .other-rooms-section,
  .room-info-left > .apartment-description-section {
    display: inline-block;
    vertical-align: top;
  }

  .room-info-left {
    width: 100%;
    display: block;
    text-align: justify;
  }

  .second-form {
    width: 100%;
  }

  .room-info-left::after {
    content: "";
    display: inline-block;
    width: 100%;
  }

  .other-rooms-list {
    grid-template-columns: 1fr;
    gap: 15px;
  }

  .apartment-description-paragraph {
  }

  /* Renting Reservation Section */
  .renting-reservation-section {
    padding-bottom: 40px;
  }

  .renting-reservation-container {
    max-width: 100%;
    padding: 0 20px;
    flex-direction: column;
    align-items: center;
  }

  .reservation-form-detailed {
    max-width: 650px !important;
    height: 970px !important;
  }

  .reservation-form-detailed {
    height: 950px !important;
    min-height: 950px !important;
    max-width: 650px !important;
    width: 100%;
  }

  .form-block {
    max-width: 650px;
    width: 100%;
    margin: 0 auto;
  }

  .renting-left,
  .renting-right {
    width: 100%;
    max-width: 700px;
  }

  .reservation-forms {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .renting-left {
    order: 2;
  }

  .renting-right {
    order: 1;
    margin-top: 0;
    margin-bottom: 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .characteristics-title,
  .other-rooms-title,
  .apartment-description-title,
  .conditions-title,
  .zona-title,
  .location-title {
    font-size: 22px;
  }

  /* Reservation Form */
  .date-selection-row {
    flex-direction: column;
    gap: 15px;
  }

  .date-col {
    width: 100%;
  }

  /* Rental Conditions Block */
  .rental-conditions-block,
  .availability-block,
  .zona-block,
  .location-block {
    margin-top: 10px;
    margin-bottom: 25px;
    max-width: 650px;
    width: 100%;
  }

  /* Months Grid */
  .months-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    max-width: 600px;
    margin: 0 auto;
  }

  .month-item {
    width: 100%;
  }

  /* Location Map */
  .location-map-container {
    height: 300px;
    max-width: 650px;
    width: 100%;
  }

  /* Reserve Button */
  .reserve-trigger-button {
    width: 200px;
    height: 50px;
    font-size: 18px;
  }
}

/* 🟠 Large Phones – 480px to 767px */
@media (max-width: 767px) {
  /* Main Content */
  .main-content {
    margin-top: 70px;
  }

  .room-info-left {
    padding: 0 12px;
  }

  /* Hide original header on mobile, show mobile duplicate */
  .room-details-header:not(.room-details-header-mobile) {
    display: none;
  }

  .room-details-header-mobile {
    display: block;
    padding: 25px 0 15px 0;
    /* Adjust padding for mobile placement */
  }

  /* Room Details Header */
  .room-details-header {
    padding: 8px 15px;
  }

  .room-name-section {
    margin-left: 25px;
    margin-bottom: 8px;
  }

  .room-name {
    font-size: 26px;
    margin-bottom: 8px;
  }

  .room-description-section {
    margin-left: 25px;
  }

  .room-description {
    font-size: 16px;
    line-height: 1.4;
  }

  /* Room Info Section */
  .room-info-section {
    padding-top: 25px;
    padding-bottom: 0;
  }

  .room-info-container {
    padding: 0 0;
  }

  /* Room Tabs - Stack Vertically */
  .room-tabs {
    gap: 8px;
    margin-bottom: 0px;
  }

  .room-tab {
    width: 100%;
    font-size: 15px;
    padding: 12px 15px;
    text-align: center;
  }

  .room-tab.active {
    font-size: 16px;
    font-weight: var(--font-medium);
  }

  .room-tab.active::after {
    height: 2px;
  }

  /* Tab Content */
  .room-tab-content {
    padding: 8px 10px;
  }

  .characteristics-title {
    font-size: 20px;
    margin-bottom: 5px;
  }

  /* Characteristics Grid - 1 column on mobile */
  .characteristics-grid {
    gap: 12px;
  }

  .characteristic-item {
    padding: 10px 0;
  }

  .characteristic-icon {
    width: 29px;
    height: 29px;
  }

  .characteristic-text {
    font-size: 16px;
  }

  /* Floor Plan */
  .floor-plan-container {
    padding: 15px 0;
  }

  .floor-plan-image {
    max-height: 300px;
    cursor: pointer;
  }

  /* Other Rooms Section */
  .other-rooms-section {
    margin-top: 0;
    padding: 10px 10px;
  }

  .other-rooms-title {
    font-size: 20px;
    margin-bottom: 15px;
  }

  .other-rooms-list {
    grid-template-columns: 1fr;
    gap: 0px;
  }

  .other-room-item {
    padding: 12px 0px;
    font-size: 13px;
    gap: 0;
  }

  /* Apartment Description */
  .apartment-description-section {
    margin-top: 0;
    padding: 10px 10px;
    padding-bottom: 0px;
    padding-left: 0px;
  }

  .apartment-description-title {
    font-size: 20px;
    margin-bottom: 15px;
  }

  .apartment-description-paragraph {
    line-height: 1.5;
    margin-bottom: 0px;
  }

  /* Images Gallery */
  .right-column-container {
    margin-bottom: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
  }

  .room-info-right {
    margin-bottom: 20px;
    width: 100%;
    /* Full width on mobile */
    max-width: 100%;
    /* Override any max-width */
    padding: 0;
    /* Remove padding to eliminate white space */
    background-color: transparent;
    /* Remove background if needed */
  }

  .room-images-gallery {
    width: 100%;
    /* Full width */
    gap: 8px;
    /* Reduce gap between main image and thumbnails */
  }

  .main-image-container {
    width: 100%;
    /* Full width */
    max-width: 100%;
    /* Override desktop max-width */
    height: 280px;
    border-radius: 10px;
    touch-action: pan-x;
    /* Enable horizontal swipe */
    cursor: grab;
  }

  .main-image-container:active {
    cursor: grabbing;
  }

  /* Hide navigation arrows on mobile */
  .main-image-nav {
    display: none !important;
  }

  .main-room-image {
    border-radius: 10px;
  }

  /* Thumbnail Gallery */
  .thumbnail-gallery {
    margin-top: 12px;
    padding: 0;
    /* Remove padding for full width */
    width: 100%;
    /* Full width */
  }

  .thumbnails-container {
    padding: 0;
    /* Remove padding for full width */
    width: 100%;
    /* Full width */
    overflow-x: hidden;
    overflow-y: hidden;
  }

  .thumbnails-track {
    /* Faster transitions on mobile for snappier feel */
    transition: transform 0.25s cubic-bezier(0.2, 0.65, 0.3, 0.95);
  }

  .thumbnail-item {
    width: 90px;
    /* Increased from 70px */
    height: 90px;
    /* Increased from 70px */
    transition: all 0.15s cubic-bezier(0.2, 0.65, 0.3, 0.95);
  }

  .gallery-nav {
    width: 32px;
    height: 32px;
  }

  /* Pricing Section */
  .pricing-section {
    margin-top: 15px;
    width: 100%;
    max-width: 450px;
  }

  .pricing-container {
    flex-direction: row;
    gap: 5px;
    padding: 20px 15px;
    border-radius: 15px;
  }

  .pricing-separator {
    display: block;
    align-self: center;
    margin-top: 0;
  }

  .pricing-col {
    width: auto;
    flex: 1;
    gap: 0;
  }

  .second-form {
    width: 95%;
  }

  /* Renting Reservation Section */
  .renting-reservation-section {
    padding: 0 0;
  }

  .renting-reservation-container {
    padding: 0 15px;
  }

  /* Reservation Form */
  .renting-left {
    margin-bottom: 30px;
  }

  .reservation-title {
    font-size: 22px;
    margin-bottom: 20px;
  }

  .reservation-forms {
    gap: 20px;
  }

  .reservation-form-detailed {
    height: 1000px !important;
    gap: 6px !important;
  }

  .reservation-form-detailed.collapsed {
    height: 900px !important;
    min-height: 900px !important;
  }

  .form-block {
    padding: 20px 15px;
    border-radius: 15px;
  }

  /* Date Selection */
  .date-label {
    margin-bottom: 8px;
  }

  .date-input,
  .salida-select {
    padding: 10px 12px;
    font-size: 14px;
  }

  /* Servicios Section */
  .servicios-title {
    margin-bottom: 10px;
  }

  .servicios-subtitle {
    font-size: 17px;
  }

  .checkbox-section-title {
    font-size: 18px;
    margin-bottom: 12px;
  }

  .checkbox-item {
    padding: 0 0;
  }

  .pack-item .checkbox-label {
    font-size: 17px;
  }

  .pack-subtitle {
    font-weight: var(--font-medium);
  }

  .checkbox-label {
    font-size: 17px;
  }

  .pack-info-item {
    font-size: 13px;
    font-weight: var(--font-medium);
  }

  .price-text {
    font-size: 17px;
  }

  .pack-details {
    margin-bottom: 0px;
    padding: 10px;
    font-size: 12px;
  }

  /* Continue Button */
  .continue-button,
  .send-button {
    width: 100%;
    padding: 14px;
    font-size: 15px;
  }

  /* Personal Data Form */
  .form-title {
    font-size: 20px;
    margin-bottom: 15px;
  }

  .form-subtitle {
    font-size: 14px;
    margin: 15px 0 10px;
  }

  .row-two {
    flex-direction: column;
    gap: 12px;
  }

  .input-small,
  .input-smaller,
  .input-big {
    width: 100%;
    padding: 12px;
    font-size: 16px;
    /* Prevent zoom on iOS */
    height: 45px;
    box-sizing: border-box;
    /* Ensure padding is included in width */
  }

  /* Specific styling for date and select inputs to match text inputs */
  input[type="date"],
  select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: white;
    color: #333;
    font-family: inherit;
    font-size: 16px !important;
    /* Prevent zoom */
    padding: 12px;
    height: 45px;
    border: 1px solid var(--pink);
    border-radius: 50px;
    width: 100%;
    box-sizing: border-box;
    /* Ensure padding is included in width */
  }

  /* Show placeholder text for empty date inputs */
  input[type="date"]:not(:focus):invalid {
    color: #999;
  }

  input[type="date"]:not(:focus):invalid::-webkit-datetime-edit {
    color: transparent;
  }

  input[type="date"]:not(:focus):invalid::before {
    content: attr(placeholder);
    color: #999;
    margin-right: 0.5em;
  }

  /* Fix date input placeholder/label visibility */
  input[type="date"]::-webkit-datetime-edit-text,
  input[type="date"]::-webkit-datetime-edit-month-field,
  input[type="date"]::-webkit-datetime-edit-day-field,
  input[type="date"]::-webkit-datetime-edit-year-field {
    color: #333;
  }

  input[type="date"]::-webkit-calendar-picker-indicator {
    filter: invert(0.5);
    cursor: pointer;
  }

  /* Style select dropdown arrow */
  select {
    background-image: url('data:image/svg+xml;utf8,<svg fill="%23FF69B4" height="24" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M7 10l5 5 5-5z"/></svg>');
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 20px;
    padding-right: 40px;
  }

  /* Ensure select text is visible */
  select option {
    color: #333;
    background-color: white;
  }

  /* Fix row containers to prevent overflow */
  .row-one,
  .row-two {
    width: 100%;
    box-sizing: border-box;
  }

  /* Mobile-only label for date input */
  .mobile-input-label {
    display: block;
    font-size: 12px;
    color: #999;
    margin-bottom: 5px;
    padding-left: 12px;
    font-weight: 400;
  }

  /* Input wrapper to contain label and input */
  .input-wrapper {
    display: flex;
    flex-direction: column;
    width: 100%;
  }

  .section-block {
    margin: 0 0;
    padding: 5px 15px 5px 15px;
  }

  .section-title {
    font-size: 17px;
    margin-bottom: 12px;
  }

  .radio-row {
    gap: 20px;
  }

  /* Rental Conditions */
  .renting-right {
  }

  .rental-conditions-block,
  .availability-block,
  .zona-block,
  .location-block {
    margin-top: 0;
    margin-bottom: 0;
    padding-top: 0;
    padding: 20px 15px;
    border-radius: 15px;
  }

  .conditions-title,
  .availability-title,
  .zona-title,
  .location-title {
    font-size: 20px;
    margin-bottom: 15px;
  }

  .conditions-list {
    gap: 3px;
  }

  .condition-item {
    font-size: 13px;

    gap: 5px;
  }

  .condition-label {
    font-weight: var(--font-regular);
  }

  .condition-value {
    display: block;
  }

  /* Availability */
  .availability-header {
    flex-direction: column;
    gap: 15px;
    margin-bottom: 15px;
  }

  .availability-guide {
    justify-content: center;
    gap: 20px;
  }

  .guide-text {
  }

  .months-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }

  .month-item {
  }

  /* La Zona */
  .zona-list {
    gap: 3px;
  }

  .zona-item {
    font-size: 12px;
    display: contents;
    gap: 5px;
  }

  .zona-label {
    font-weight: 600;
  }

  .zona-value {
    display: block;
    margin-bottom: 10px;
  }

  .zona-transport-detail {
    padding-left: 15px;
  }

  /* Location Map */
  .location-map-container {
    height: 250px;
    border-radius: 10px;
  }

  /* Floor Plan Modal */
  .floor-plan-modal .modal-content {
    width: 95%;
    max-width: 95%;
    padding: 15px;
  }

  .modal-close {
    top: 10px;
    right: 10px;
    font-size: 28px;
  }

  /* Mobile Sticky Bottom Bar */
  .mobile-sticky-bottom {
    display: block;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 60px;
    background: var(--white);
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
    z-index: 999;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
  }

  .sticky-bottom-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
    padding: 0 15px;
    max-width: 100%;
  }

  .sticky-price-info {
    display: flex;
    align-items: center;
    gap: 10px;
    position: relative;
    cursor: pointer;
    transition: all 0.3s ease;
  }

  /* Only add cursor pointer when couple is allowed */
  .mobile-sticky-bottom.couple-not-allowed .sticky-price-info {
    cursor: default;
  }

  /* Person Icon */
  .sticky-person-icon {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
  }

  /* Price Text Container */
  .sticky-price-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
  }

  .sticky-price-label {
    font-size: 10px;
    color: var(--gray);
    font-weight: var(--font-medium);
    line-height: 1.2;
  }

  .sticky-price-amount {
    font-size: 20px;
    color: var(--black);
    font-weight: var(--font-bold);
    line-height: 1;
    display: flex;
    align-items: center;
    gap: 8px;
  }

  /* Price Arrow Indicator */
  .sticky-price-arrow {
    display: none;
    /* Hidden by default */
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease;
    color: var(--pink);
  }

  .sticky-price-arrow svg {
    width: 16px;
    height: 16px;
  }

  /* Show arrow only when couple is allowed */
  .mobile-sticky-bottom.couple-allowed .sticky-price-arrow {
    display: inline-flex;
  }

  /* Rotate arrow when submenu is expanded */
  .mobile-sticky-bottom.expanded .sticky-price-arrow {
    transform: rotate(180deg);
  }

  /* Pricing Submenu */
  .sticky-pricing-submenu {
    position: absolute;
    bottom: 60px;
    left: 0;
    width: 100%;
    background: var(--white);
    box-shadow: 0 -4px 15px rgba(0, 0, 0, 0.15);
    border-top: 1px solid rgba(0, 0, 0, 0.05);
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all 0.3s ease;
    z-index: 998;
  }

  /* Show submenu when expanded */
  .mobile-sticky-bottom.expanded .sticky-pricing-submenu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }

  /* Hide submenu when couple not allowed */
  .mobile-sticky-bottom.couple-not-allowed .sticky-pricing-submenu {
    display: none;
  }

  .sticky-submenu-content {
    padding: 15px;
  }

  .sticky-submenu-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px;
    background: rgba(208, 66, 120, 0.05);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
  }

  .sticky-submenu-item:hover {
    background: rgba(208, 66, 120, 0.12);
    transform: translateY(-1px);
  }

  .sticky-submenu-item:active {
    transform: translateY(0);
  }

  .sticky-couple-icon {
    width: 50px;
    height: 31px;
    flex-shrink: 0;
  }

  .sticky-submenu-price-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
  }

  .sticky-submenu-label {
    font-size: 10px;
    color: var(--gray);
    font-weight: var(--font-medium);
    line-height: 1.2;
  }

  .sticky-submenu-amount {
    font-size: 18px;
    color: var(--pink);
    font-weight: var(--font-bold);
    line-height: 1;
  }

  .sticky-reserve-button {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 44px;
    padding: 0 25px;
    background: linear-gradient(135deg, var(--pink) 0%, #b8396a 100%);
    border: none;
    border-radius: 50px;
    font-size: 15px;
    font-weight: var(--font-bold);
    color: var(--white);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 4px 12px rgba(208, 66, 120, 0.3);
    cursor: pointer;
    transition: all 0.3s ease;
  }

  .sticky-reserve-button:active {
    transform: scale(0.98);
    box-shadow: 0 2px 8px rgba(208, 66, 120, 0.3);
  }

  /* Add padding to main content to prevent content from being hidden behind sticky bar */
  .main-content {
    padding-bottom: 15px;
  }

  .pricing-container.couple-allowed .couple-allowed-content {
    gap: 0;
    padding-left: 27px;
  }

  .pricing-row {
    gap: 0;
  }

  /* Mobile Gallery Navigation - Show on mobile 
  .mobile-gallery-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 0 10px;
  }

  .mobile-gallery-btn {
    display: flex;
    align-items: center;
    gap: 4px;
    background: none;
    border: none;
    color: #000;
    font-size: 14px;
    font-weight: var(--font-regular);
    cursor: pointer;
    padding: 5px;
    transition: opacity 0.3s ease;
  }

  .mobile-gallery-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
  }

  .mobile-gallery-btn svg {
    width: 20px;
    height: 20px;
  }

  .mobile-gallery-prev {
    justify-content: flex-start;
  }

  .mobile-gallery-next {
    justify-content: flex-end;
  }*/

  /* Hide desktop circular gallery navigation buttons on mobile */
  .gallery-nav {
    display: none !important;
  }

  .characteristics-col {
    gap: 0px;
  }
}

/* 🔴 Small Phones – up to 479px */
@media (max-width: 479px) {
  /* Main Content */
  .main-content {
    margin-top: 60px;
  }

  .room-title-line {
    gap: 5px;
  }

  /* Room Details Header */
  .room-details-header {
    padding-top: 8px;
    padding-left: 12px;
    padding-right: 12px;
  }

  .room-name {
    font-size: 22px;
    margin-bottom: 6px;
  }

  .room-description {
    font-size: 12px;
    font-weight: var(--font-semibold);
    line-height: 1.4;
  }

  /* Room Info Section */
  .room-info-section {
    padding-top: 20px;
    padding-bottom: 0;
  }

  .room-info-container {
    padding: 0 0;
    gap: 5px;
  }

  /* Room Tabs */
  .room-tab {
    font-size: 15px;
    padding: 10px 12px;
  }

  .room-tab.active {
    font-size: 16px;
  }

  /* Tab Content */
  .room-tab-content {
    padding: 15px 5px;
  }

  .characteristics-title {
    margin-bottom: 6px;
  }

  /* Characteristics */
  .characteristic-item {
    padding: 8px 0;
  }

  .characteristic-icon {
  }

  .characteristic-text {
  }

  /* Floor Plan */
  .floor-plan-image {
    max-height: 250px;
  }

  /* Other Rooms */
  .other-rooms-section {
    width: 100%;
    padding: 15px 5px;
    margin-top: 5px;
  }

  .other-rooms-title {
    margin-bottom: 5px;
  }

  .other-room-item {
    padding: 10px 0;
    font-size: 12px;
  }

  .room-code {
  }

  .pricing-container.couple-allowed .couple-allowed-content {
    gap: 0;
    padding-left: 15px;
  }

  /* Apartment Description */
  .apartment-description-section {
    width: 100%;
    padding: 15px 5px;
    padding-bottom: 0px;
    margin-top: 0;
  }

  .apartment-description-title {
    margin-bottom: 5px;
  }

  .apartment-description-paragraph {
    line-height: 1.5;
    margin-bottom: 10px;
  }

  /* Images Gallery */
  .main-image-container {
    height: 240px;
    border-radius: 8px;
  }

  /* Thumbnail Gallery */
  .thumbnail-gallery {
    margin-top: 10px;
  }

  .thumbnail-item {
    width: 80px;
    height: 80px;
  }

  .gallery-nav {
    width: 28px;
    height: 28px;
  }

  .gallery-nav svg {
    width: 16px;
    height: 16px;
  }

  /* Pricing Section */
  .pricing-container {
    padding: 18px 10px;
  }

  .main-price {
    font-size: 20px;
  }

  .price-subtitle {
    font-size: 13px;
  }

  .expenses-icon {
    width: 20px;
    height: 20px;
  }

  .expenses-price {
    font-size: 15px;
    font-weight: var(--font-regular);
  }

  .expenses-subtitle {
    font-size: 13px;
    font-weight: var(--font-light);
  }

  .expenses-line {
    margin-bottom: 0;
  }

  .individual-price-line {
    gap: 0;
  }

  .couple-price-line {
    gap: 0;
  }

  .couple-price-line .couple-icon {
    height: 35px;
  }

  .individual-icon {
    height: 35px;
    flex-shrink: 0;
    touch-action: manipulation;
  }

  .no-couple-icon {
    width: 50px;
    height: 50px;
  }

  .no-couple-text {
    font-size: 12px;
  }

  /* Renting Reservation Section */
  .renting-reservation-section {
    padding-top: 0;
    padding-bottom: 25px;
  }

  .renting-reservation-container {
    padding: 0 12px;
  }

  /* Reservation Form */
  .reservation-title {
    font-size: 20px;
    margin-bottom: 18px;
  }

  .form-block {
    padding: 18px 12px;
  }

  .date-label {
    margin-bottom: 6px;
  }

  .date-input,
  .salida-select {
    padding: 10px;
  }

  .calendar-icon {
    width: 16px;
    height: 16px;
  }

  /* Servicios */
  .servicios-title {
    font-size: 18px;

    margin-bottom: 8px;
  }

  .servicios-subtitle {
    font-size: 17px;
  }

  .checkbox-section-title {
    font-size: 17px;
    margin-bottom: 10px;
  }

  .checkbox-label {
    font-size: 17px;
  }

  .price-text {
    font-size: 17px;
  }

  .info-icon {
    width: 14px;
    height: 14px;
  }

  .pack-details {
    padding: 8px;
    font-size: 11px;
  }

  /* Buttons */
  .continue-button,
  .send-button {
    padding: 12px;
    font-size: 14px;
  }

  .arrow-down {
    margin-top: 8px;
  }

  .arrow-down svg {
    width: 14px;
    height: 14px;
  }

  /* Personal Data Form */
  .form-title {
    font-size: 20px;
    margin-bottom: 12px;
  }

  .form-subtitle {
    font-size: 13px;
    margin: 12px 0 8px;
  }

  .pareja-item {
    margin-bottom: 15px;
  }

  .input-small,
  .input-smaller,
  .input-big {
    padding: 10px;
    font-size: 12px;
  }

  .section-block {
    margin: 0 0;
    padding: 5px 15px 5px 15px;
  }

  .section-title {
    font-size: 17px;
    margin-bottom: 10px;
  }

  .radio-row {
    gap: 15px;
  }

  .radio-row label {
    font-size: 12px;
  }

  .rental-conditions-block {
    padding-left: 0;
    margin-bottom: 5px;
  }

  /* Rental Conditions */
  .availability-block,
  .zona-block,
  .location-block {
    margin-bottom: 20px;
    padding: 0 12px 18px 12px;
  }

  .conditions-title,
  .availability-title,
  .zona-title,
  .location-title {
    margin-bottom: 12px;
  }

  .condition-item,
  .zona-item {
    font-size: 12px;
  }

  /* Availability */
  .availability-guide {
    gap: 15px;
  }

  .guide-color {
    width: 12px;
    height: 12px;
  }

  .guide-text {
  }

  .months-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
  }

  .month-item {
  }

  /* Location Map */
  .location-map-container {
    height: 220px;
  }

  /* Floor Plan Modal */
  .floor-plan-modal .modal-content {
    width: 98%;
    padding: 10px;
  }

  .modal-close {
    top: 5px;
    right: 5px;
    font-size: 24px;
    width: 30px;
    height: 30px;
  }

  .modal-image {
    max-height: 70vh;
  }

  /* Mobile Sticky Bottom Bar - Adjustments for small phones */
  .sticky-person-icon {
    width: 35px;
    height: 35px;
  }

  .sticky-price-label {
    font-size: 9px;
  }

  .sticky-price-amount {
    font-size: 18px;
    gap: 6px;
  }

  .sticky-price-arrow svg {
    width: 14px;
    height: 14px;
  }

  .sticky-bottom-content {
    padding: 0 12px;
  }

  .sticky-submenu-content {
    padding: 12px;
  }

  .sticky-submenu-item {
    padding: 8px;
  }

  .sticky-couple-icon {
    width: 45px;
    height: 28px;
  }

  .sticky-submenu-label {
    font-size: 9px;
  }

  .sticky-submenu-amount {
    font-size: 16px;
  }

  .zona-label {
    font-size: 16px;
  }

  .zona-value {
    margin-bottom: 8px;
  }

  .room-name-section {
    padding-left: 5px;
    padding-bottom: 5px;
    margin-left: 0;
    margin-bottom: 0px;
  }

  .room-description-section {
    padding-left: 5px;
    margin-left: 0;
    margin-bottom: 0;
  }
}

/* 🔴 Extra Small Phones – up to 450px */
@media (max-width: 450px) {
  /* Reservation Form Height Adjustment */
  .reservation-form-detailed {
    height: 1075px !important;
    min-height: 1075px !important;
  }

  .reservation-form-detailed.collapsed {
    height: 975px !important;
    min-height: 975px !important;
  }
}

/* ============================================
   BUTTON RESERVE ON MOBILE STYLES
   ============================================ */

/* Show button only on mobile (max-width: 767px) */
@media (max-width: 767px) {
  .reserve-button-container {
    display: flex;
  }
}

/* Small Phones Adjustment */
@media (max-width: 479px) {
  .reserve-trigger-button {
    max-width: 280px;
    height: 52px;
    font-size: 16px;
    padding: 0 25px;
    gap: 10px;
  }

  .reserve-button-icon svg {
    width: 22px;
    height: 22px;
  }

  .reserve-button-container {
    margin-bottom: 25px;
    padding: 0 12px;
  }
}

/* Extra Small Phones */
@media (max-width: 380px) {
  .reserve-trigger-button {
    max-width: 100%;
    height: 50px;
    font-size: 15px;
    padding: 0 20px;
  }
}

/* ============================================
   UTILITY CLASSES FOR RESPONSIVE
   ============================================ */

/* Hidden class for mobile */
@media (max-width: 767px) {
  .hidden {
    display: none !important;
  }

  .visible-mobile {
    display: block !important;
  }
}

/* Ensure proper spacing on all devices */
@media (max-width: 1023px) {
  .form-section {
    margin-bottom: 20px;
  }

  .checkbox-list {
    margin-top: 12px;
  }
}

/* Touch-friendly click areas on mobile */
@media (max-width: 767px) {
  button,
  .room-tab,
  .thumbnail-item,
  input[type="checkbox"],
  input[type="radio"] {
    min-height: 44px;
    min-width: 44px;
  }

  /* Exception for checkboxes/radios - just the label needs to be clickable */
  input[type="checkbox"],
  input[type="radio"] {
    min-height: 20px;
    min-width: 20px;
  }

  /* Smooth horizontal scroll gallery for main image on mobile */
  .main-image-container {
    overflow-x: scroll;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    /* Firefox */
    -ms-overflow-style: none;
    /* IE/Edge */
    display: flex;
    scroll-behavior: smooth;
  }

  /* Hide scrollbar for Chrome/Safari */
  .main-image-container::-webkit-scrollbar {
    display: none;
  }

  /* Make images fill container and snap */
  .main-image-container .main-room-image {
    min-width: 100%;
    width: 100%;
    flex-shrink: 0;
    scroll-snap-align: start;
    object-fit: cover;
  }

  /* Prevent iOS zoom on form inputs with scale transform trick */
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="number"],
  input[type="date"],
  select,
  textarea,
  .date-input-wrapper,
  .date-input-wrapper input,
  .date-input-wrapper *[contenteditable],
  *[class*="input"],
  *[class*="Input"],
  *[class*="field"] input,
  *[class*="Field"] input {
    font-size: 16px !important;
    /* transform: scale(0.875);*/
    transform-origin: left top;
  }

  /* Adjust container widths to compensate for scale 
  .date-input-wrapper,
  *[class*="input-wrapper"],
  *[class*="field-wrapper"] {
    width: 114.28%;
  }*/

  /* Ensure calendar popup appears above all other elements on mobile */
  .calendar-popup,
  .calendar-popup-entrada,
  .calendar-popup-salida,
  .reservation-form-detailed .calendar-popup {
    z-index: 9999 !important;
  }

  /* Ensure date input wrapper has proper stacking */
  .date-input-wrapper {
    position: relative;
    z-index: 100;
  }

  /* When calendar is active, increase wrapper z-index */
  .date-input-wrapper:has(.calendar-popup.active) {
    z-index: 10000;
  }

  /* Fallback for browsers that don't support :has() */
  .date-input-wrapper .calendar-popup.active {
    z-index: 10001 !important;
  }

  /* Prevent parent containers from creating stacking context */
  .reservation-form-detailed,
  .form-row,
  .date-col,
  .form-block {
    isolation: auto !important;
    transform: none !important;
  }
}