* {
   box-sizing: border-box;
   margin: 0;
   padding: 0;
   font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
   list-style: none;
   text-decoration: none;
 }

 a {
   text-decoration: none;
 }

 :root {
   --airbnb-pink: #008efe;
   --text-color: #222222;
   --light-gray: #dddddd;
   --extra-light-gray: #f7f7f7;
   --shadow-color: rgba(0, 0, 0, 0.1);
 }

 body {
   padding-top: 0;
   background-color: #fff;
 }

 .container-rentii {
   width: 95%;
   margin: 0 auto;
 }


 /* Header Styles */
 .header-nav {
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: 16px 80px;
   border-bottom: 1px solid #08131747;
   height: 80px;
   background: #f5f2f2;
   position: sticky;
   top: 0;
   z-index: 99;
 }

 .logo {
   width: 17%;
 }

 .logo img {
   width: 50%;
 }

 .nav-center {
   display: flex;
   align-items: flex-end;
   height: 100%;
 }

 .nav-link-group {
   display: flex;
   flex-direction: column;
   align-items: center;
   margin: 0 15px;
   padding: 0 8px;
   position: relative;
   cursor: pointer;
   color: #717171;
   font-weight: 600;
   font-size: 14px;
   height: 100%;
   justify-content: center;
   border-bottom: 2px solid transparent;
 }

 .nav-link-group.active {
   color: var(--text-color);
   border-bottom: 2px solid var(--text-color);
 }




 /* Dropdown Panel */
 .profile-panel {
   display: none;
   position: absolute;
   top: 65px;
   right: 30px;
   width: 250px;
   background: #fff;
   border-radius: 12px;
   box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
   overflow-y: auto;
   max-height: 80vh;
   padding: 10px 0;
   z-index: 999;
 }

 .profile-panel.show {
   display: block;
 }

 .panel-item {
   display: flex;
   align-items: center;
   gap: 10px;
   padding: 10px 20px;
   color: #222;
   text-decoration: none;
   font-size: 15px;
   transition: background 0.2s;
 }

 .panel-item:hover {
   background-color: #f5f5f5;
 }

 .panel-divider {
   border: none;
   border-top: 1px solid #eee;
   margin: 8px 0;
 }

 .panel-note {
   font-size: 13px;
   color: #666;
   margin-left: 40px;
 }

 .panel-item img {
   width: 25px;
   height: 25px;
 }

 .logout-link {
   color: #d33;
   font-weight: 800;
 }

 /* Scrollbar */
 .profile-panel::-webkit-scrollbar {
   width: 5px;
 }

 .profile-panel::-webkit-scrollbar-thumb {
   background-color: #ccc;
   border-radius: 5px;
 }




 .badge {
   position: absolute;
   top: 5px;
   right: -5px;
   font-size: 10px;
   color: white;
   background-color: var(--airbnb-pink);
   padding: 2px 4px;
   border-radius: 4px;
   font-weight: bold;
   line-height: 1;
 }

 .nav-right {
   display: flex;
   align-items: center;
   gap: 8px;
 }

 .host-link {
   padding: 10px 12px;
   border-radius: 20px;
   font-size: 14px;
   font-weight: 600;
   transition: background-color 0.2s;
   cursor: pointer;
 }

 .host-link:hover {
   background-color: #f7f7f7;
 }

 .profile-menu {
   display: flex;
   align-items: center;
   border: 1px solid var(--light-gray);
   border-radius: 30px;
   padding: 5px 10px;
   cursor: pointer;
   transition: box-shadow 0.2s;
 }

 .profile-menu:hover {
   box-shadow: 0 2px 4px var(--shadow-color);
 }

 .profile-menu i {
   margin: 0 4px;
   font-size: 18px;
 }

 /* Search Section */
 .search-area-container {
   display: flex;
   justify-content: center;
   position: relative;
   padding: 30px 0;
   /* margin-top: 16px; */
   z-index: 9;
   background: #f5f2f2;
   /* border-bottom: 1px solid #08131747; */
 }

 .search-bar-wrapper {
   width: 100%;
   display: flex;
   justify-content: center;
   position: relative;
   z-index: 10;
   /* top: -40px; */
 }

 .search-bar {
   display: flex;
   align-items: center;
   width: 850px;
   height: 66px;
   border: 1px solid var(--light-gray);
   border-radius: 32px;
   box-shadow: 0 1px 2px var(--shadow-color),
     0 4px 12px rgba(0, 0, 0, 0.05);
   background-color: white;
   z-index: 10;
 }

 .search-input-group {
   display: flex;
   flex-direction: column;
   justify-content: center;
   padding: 8px 24px;
   min-width: 0;
   height: 100%;
   cursor: pointer;
   flex-grow: 1;
   border-radius: 32px;
   transition: background-color 0.2s;
 }

 .search-input-group:hover:not(.active) {
   background-color: var(--extra-light-gray);
 }

 .search-input-group.active {
   background-color: var(--extra-light-gray);
 }

 .input-title {
   font-size: 12px;
   font-weight: 800;
   line-height: 1.5;
 }

 .input-placeholder {
   font-size: 14px;
   color: #717171;
   line-height: 1.5;
 }

 .search-input-group-last {
   display: flex;
   align-items: center;
   padding: 8px 0 8px 24px;
   flex-grow: 1.5;
 }

 .guest-text {
   flex-grow: 1;
 }

 .search-button {
   width: 100px;
   height: 52px;
   background-color: var(--airbnb-pink);
   color: white;
   border: none;
   border-radius: 30px;
   display: flex;
   justify-content: center;
   align-items: center;
   cursor: pointer;
   font-size: 16px;
   margin-right: 9px;
 }

 /* Dropdown container */
 .dropdown-container {
   position: absolute;
   top: 100px;
   left: 50%;
   transform: translateX(-50%);
   width: 850px;
   z-index: 5;
   display: none;
 }

 .dropdown-content {
   background: white;
   border-radius: 32px;
   box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.04),
     0 8px 16px rgba(0, 0, 0, 0.15);
   padding: 32px;
 }

 /* Flatpickr custom styles */
 .flatpickr-innerContainer {
   justify-content: center;
 }

 .flatpickr-calendar {
   box-shadow: none !important;
   border: none !important;
   width: 100% !important;
 }

 .flatpickr-months {
   margin-bottom: 20px;
 }

 .flatpickr-month {
   height: 40px;
 }

 .flatpickr-weekdays {
   margin-bottom: 10px;
 }

 .flatpickr-weekday {
   font-weight: 600;
   color: #717171;
 }

 .flatpickr-day {
   border-radius: 50%;
   height: 40px;
   line-height: 40px;
   font-weight: 500;
   gap: 10px;
 }

 .flatpickr-day.today {
   border: 1px solid var(--airbnb-pink);
   color: var(--text-color);
 }

 .flatpickr-day.today:hover {
   background: var(--airbnb-pink);
   color: white;
   border-color: var(--airbnb-pink);
 }

 .flatpickr-day.inRange {
   background: #0090fe38 !important;
   border-color: #0090fe38 !important;
   box-shadow: -5px 0 0 #0090fe38, 5px 0 0 #0090fe38 !important;
 }

 .flatpickr-day.selected.startRange,
 .flatpickr-day.selected.endRange,
 .flatpickr-day.selected.startRange:hover,
 .flatpickr-day.selected.endRange:hover {
   background: var(--airbnb-pink) !important;
   border-color: var(--airbnb-pink) !important;
   color: white !important;
 }

 .flatpickr-day.flatpickr-disabled,
 .flatpickr-day.prevMonthDay,
 .flatpickr-day.nextMonthDay {
   color: #ccc !important;
 }

 .flatpickr-day.flatpickr-disabled {
   cursor: not-allowed;
 }

 /* Guest rows */
 .guest-row {
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: 16px 0;
   border-bottom: 1px solid #ebebeb;
 }

 .guest-row:last-child {
   border-bottom: none;
 }

 .guest-info h4 {
   font-size: 16px;
   font-weight: 600;
 }

 .guest-info p {
   font-size: 14px;
   color: #717171;
 }

 .counter {
   display: flex;
   align-items: center;
   gap: 10px;
 }

 .counter-button {
   width: 32px;
   height: 32px;
   border: 1px solid #b0b0b0;
   border-radius: 50%;
   font-size: 20px;
   cursor: pointer;
   display: flex;
   align-items: center;
   justify-content: center;
   color: #717171;
   background: white;
 }

 .counter-button:disabled {
   opacity: 0.4;
   cursor: not-allowed;
 }





 /* Popular homes section css start */


 .section-header {
   margin-bottom: 20px;
   display: flex;
   justify-content: space-between;
   align-items: center;
 }

 .section-title {
   font-weight: 600;
   font-size: 18px;
   margin: 0;
   text-transform: capitalize;
 }

 .section-title a {
   text-decoration: none;
   color: #000;
   font-weight: 500;
   font-size: 18px;
   cursor: pointer;
 }

 .swiper {
   width: 100%;
   padding: 10px 5px 30px;
 }

 .property-card {
   border-radius: 12px;
   overflow: hidden;
   cursor: pointer;
   transition: transform 0.2s ease;
 }

 .property-card:hover {
   transform: scale(1.02);
 }

 .property-image-wrapper {
   position: relative;
   border-radius: 12px;
   overflow: hidden;
   margin-bottom: 10px;
 }

 .property-image {
   width: 100%;
   height: 200px;
   object-fit: cover;
   display: block;
 }

 .property-badge {
   position: absolute;
   top: 10px;
   left: 10px;
   background: white;
   padding: 5px 10px;
   border-radius: 4px;
   font-size: 12px;
   font-weight: 500;
   color: #222;
 }

 .favorite-button {
   position: absolute;
   top: 6px;
   right: 10px;
   width: 30px;
   height: 30px;
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   cursor: pointer;
   transition: all 0.2s ease;
   font-size: 30px;
 }

 .favorite-button:hover {
   background: white;
   transform: scale(1.1);
 }

 .favorite-button.active {
   color: #ff385c;
 }

 .property-details {
   padding: 0 5px;
 }

 .property-name {
   font-weight: 500;
   margin-bottom: 5px;
   font-size: 16px;
   color: #000;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }

 .property-details a {
   text-decoration: none;
 }

 .property-meta {
   color: #717171;
   font-size: 16px;
   margin-bottom: 5px;
 }

 .rating-star {
   color: #000;
   font-weight: 600;
 }

 .swiper-pagination {
   position: relative;
   margin-top: 20px;
 }

 /* Navigation container for positioning arrows at top right */
 .navigation-container {
   position: relative;
   display: flex;
   justify-content: space-between;
   align-items: center;
   margin-bottom: 20px;
 }

 .swiper-navigation {
   display: flex;
   gap: 10px;
 }

 .swiper-button-next,
 .swiper-button-prev {
   color: #000 !important;
   background: white !important;
   width: 30px !important;
   height: 30px !important;
   font-size: 20px !important;
   border-radius: 50%;
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.18);
   display: flex;
   align-items: center;
   justify-content: center;
   position: static;
   margin-top: 0;
 }

 .swiper-button-next:after,
 .swiper-button-prev:after {
   font-size: 18px;
   font-weight: bold;
 }

 .swiper-button-prev:after,
 .swiper-rtl .swiper-button-next:after {
   content: 'prev';
   font-size: 17px !important;
 }

 .swiper-button-next:after,
 .swiper-rtl .swiper-button-prev:after {
   content: 'next';
   font-size: 17px !important;
 }

 .swiper-button-next {
   position: absolute !important;
   right: -80px !important;
 }

 .swiper-navigation {
   position: absolute;
   right: 90px;
 }

 @media (max-width: 768px) {
   .section-title {
     font-size: 18px;
   }

   .swiper-navigation {
     display: none;
   }

   .property-image {
     height: 220px;
   }

   .property-meta {
     font-size: 17px;
   }

   .property-name {
     font-size: 17px;
   }

   .property-details a {
     text-decoration: none;
   }

   div#propertyWrapper {
     display: flex !important;
     column-gap: 20px;
     padding-top: 25px;
     row-gap: 20px;
     flex-wrap: wrap !important;
   }
 }

 /* Popular homes section css end */












 /* property-view page css start  */

 /* Main Content */
 .main-content {
   display: flex;
   padding: 0 40px;
   margin-top: 24px;
   gap: 64px;
 }

 .property-details {
   flex: 1;
 }

 .booking-widget {
   width: 400px;
   position: sticky;
   top: 100px;
   height: fit-content;
 }



 .image-gallery {
   display: grid;
   grid-template-columns: 2fr 1fr;
   grid-template-rows: 250px 250px;
   gap: 10px;
   border-radius: 13px;
   overflow: hidden;
   margin-bottom: 20px;
 }

 /* LEFT MAIN IMAGE */
 .main-image {
   grid-row: 1 / 3;
   position: relative;
   cursor: pointer;
 }

 .main-image img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   /* Crop to fit area */
 }

 /* RIGHT IMAGES */
 .side-image {
   position: relative;
   cursor: pointer;
 }

 .side-image img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   /* Makes all images same size */
 }

 /* Button */
 .view-all-photos {
   position: absolute;
   bottom: 10px;
   right: 10px;
   background: rgba(0, 0, 0, 0.6);
   color: white;
   padding: 6px 12px;
   border: none;
   border-radius: 5px;
 }


 /* .side-image:nth-child(2) {
   background: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)),
     url('https://images.unsplash.com/photo-1586023492125-27b2c045efd7?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1558&q=80');
 } */

 /* .side-image:nth-child(3) {
   background: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)),
     url('https://images.unsplash.com/photo-1564013799919-ab600027ffc6?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80');
 } */

 .view-all-photos {
   color: black;
   position: absolute;
   bottom: 20px;
   right: 20px;
   background-color: white;
   border: none;
   padding: 10px 16px;
   border-radius: 8px;
   font-weight: 600;
   cursor: pointer;
   display: flex;
   align-items: center;
   gap: 8px;
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
   z-index: 10;
 }

 .view-all-photos:hover {
   background-color: #f7f7f7;
 }

 /* Property Header */
 .property-header {
   margin-bottom: 24px;
 }

 .property-title {
   font-size: 26px;
   font-weight: 600;
   margin-bottom: 8px;
 }

 .property-highlights {
   display: flex;
   gap: 16px;
   color: #717171;
   font-size: 14px;
   margin-bottom: 16px;
 }

 .rating {
   display: flex;
   align-items: center;
   gap: 4px;
 }

 .rating i {
   color: #FF385C;
 }

 .host-info {
   display: flex;
   align-items: center;
   gap: 12px;
   margin-bottom: 24px;
 }

 .host-avatar {
   width: 56px;
   height: 56px;
   border-radius: 50%;
   background-color: #DDDDDD;
   display: flex;
   align-items: center;
   justify-content: center;
   color: #717171;
   overflow: hidden;
 }

 .host-avatar img {
   width: 100%;
   height: 100%;
   object-fit: cover;
 }

 /* Property Features */
 .property-features {
   display: flex;
   gap: 32px;
   padding: 24px 0;
   border-top: 1px solid #DDDDDD;
   border-bottom: 1px solid #DDDDDD;
   margin-bottom: 32px;
 }

 .feature {
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 8px;
 }

 .feature-icon {
   font-size: 24px;
   color: #717171;
 }

 .feature-text {
   font-size: 14px;
   text-align: center;
 }

 /* Property Description */
 .property-description {
   margin-bottom: 32px;
 }

 .section-title {
   font-size: 22px;
   margin-bottom: 16px;
 }

 .description-text {
   color: #484848;
   margin-bottom: 16px;
 }

 .show-more {
   color: #222222;
   font-weight: 600;
   text-decoration: underline;
   cursor: pointer;
 }

 /* Sleeping Arrangements */
 .sleeping-arrangements {
   margin-bottom: 32px;
 }

 .arrangements-grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 16px;
 }

 .arrangement {
   border: 1px solid #DDDDDD;
   border-radius: 8px;
   padding: 16px;
 }

 .arrangement-icon {
   font-size: 24px;
   margin-bottom: 8px;
   color: #222222;
 }

 .arrangement-title {
   font-weight: 600;
   margin-bottom: 4px;
 }

 .arrangement-desc {
   color: #717171;
   font-size: 14px;
 }

 /* Amenities */
 .amenities {
   margin-bottom: 32px;
 }

 .amenities-grid {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   gap: 16px;
 }

 .amenity {
   display: flex;
   align-items: center;
   gap: 12px;
 }

 .amenity i {
   width: 24px;
   color: #222222;
 }

 /* Booking Widget */
 .booking-card {
   border: 1px solid #DDDDDD;
   border-radius: 12px;
   padding: 24px;
   box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
 }

 .price-per-night {
   font-size: 22px;
   font-weight: 600;
   margin-bottom: 4px;
 }

 .price-period {
   color: #717171;
   font-size: 14px;
 }

 .date-selector {
   margin: 24px 0;
   border: 1px solid #DDDDDD;
   border-radius: 8px;
   overflow: hidden;
 }

 .date-row {
   display: flex;
   border-bottom: 1px solid #DDDDDD;
 }

 .date-row:last-child {
   border-bottom: none;
 }

 .date-field {
   flex: 1;
   padding: 12px;
   border-right: 1px solid #DDDDDD;
   cursor: pointer;
 }

 .date-field:last-child {
   border-right: none;
 }

 .date-label {
   font-size: 10px;
   font-weight: 600;
   margin-bottom: 4px;
 }

 .date-value {
   font-size: 14px;
   color: #717171;
 }

 .date-value.selected {
   color: #000;
   font-weight: 500;
 }

 .guests-selector {
   padding: 12px;
   border: 1px solid #DDDDDD;
   border-radius: 8px;
   margin-bottom: 16px;
   cursor: pointer;
 }

 .guests-label {
   font-size: 10px;
   font-weight: 600;
   margin-bottom: 4px;
 }

 .guests-value {
   font-size: 14px;
   color: #717171;
 }

 .guests-value.selected {
   color: #000;
   font-weight: 500;
 }

 .reserve-button {
   width: 100%;
   background: linear-gradient(135deg, #E61E4D 0%, #E31C5F 50%, #D70466 100%);
   color: white;
   border: none;
   padding: 14px;
   border-radius: 8px;
   font-size: 16px;
   font-weight: 600;
   cursor: pointer;
   margin-bottom: 16px;
 }

 .no-charge-notice {
   text-align: center;
   color: #717171;
   font-size: 14px;
   margin-bottom: 16px;
 }

 .price-breakdown {
   margin-top: 16px;
 }

 .price-row {
   display: flex;
   justify-content: space-between;
   margin-bottom: 12px;
 }

 .price-total {
   display: flex;
   justify-content: space-between;
   padding-top: 16px;
   border-top: 1px solid #DDDDDD;
   font-weight: 600;
 }

 /* Reviews */
 .reviews {
   margin-bottom: 32px;
 }

 .reviews-header {
   display: flex;
   align-items: center;
   gap: 8px;
   margin-bottom: 24px;
 }

 .review-score {
   font-size: 24px;
   font-weight: 600;
 }

 .review-count {
   color: #717171;
 }

 .reviews-grid {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   gap: 24px;
 }

 .review-card {
   margin-bottom: 24px;
 }

 .reviewer {
   display: flex;
   align-items: center;
   gap: 12px;
   margin-bottom: 12px;
 }

 .reviewer-avatar {
   width: 40px;
   height: 40px;
   border-radius: 50%;
   background-color: #DDDDDD;
   display: flex;
   align-items: center;
   justify-content: center;
   color: #717171;
   overflow: hidden;
 }

 .reviewer-avatar img {
   width: 100%;
   height: 100%;
   object-fit: cover;
 }

 .reviewer-name {
   font-weight: 600;
 }

 .review-date {
   color: #717171;
   font-size: 14px;
 }

 .review-text {
   color: #484848;
 }

 /* Location */
 .location {
   margin-bottom: 32px;
 }

 .location-map {
   height: auto;
   background: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)),
     url('https://images.unsplash.com/photo-1571772996211-2f02c9727629?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1470&q=80');
   background-size: cover;
   background-position: center;
   border-radius: 12px;
   margin-top: 16px;
   display: flex;
   align-items: center;
   justify-content: center;
   color: white;
   font-weight: 600;
   position: relative;
 }

 .map-overlay {
   position: absolute;
   bottom: 10px;
   left: 10px;
   background: white;
   padding: 8px 12px;
   border-radius: 8px;
   font-size: 14px;
   color: #222222;
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
 }

 /* Host Info */
 .host-details {
   padding: 32px 0;
   border-top: 1px solid #DDDDDD;
   border-bottom: 1px solid #DDDDDD;
   margin-bottom: 32px;
 }

 .host-header {
   display: flex;
   align-items: center;
   gap: 16px;
   margin-bottom: 16px;
 }

 .host-stats {
   display: flex;
   gap: 16px;
   margin-bottom: 16px;
 }

 .host-stat {
   display: flex;
   flex-direction: column;
 }

 .stat-value {
   font-weight: 600;
 }

 .stat-label {
   color: #717171;
   font-size: 14px;
 }

 /* Things to Know */
 .things-to-know {
   margin-bottom: 64px;
 }

 .rules-grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 32px;
 }

 .rules-category h3 {
   margin-bottom: 16px;
 }

 .rules-list {
   list-style: none;
 }

 .rules-list li {
   margin-bottom: 12px;
   color: #484848;
 }

 /* Footer */
 footer {
   border-top: 1px solid #DDDDDD;
   padding: 24px 40px;
 }

 .footer-content {
   display: flex;
   justify-content: space-between;
   align-items: center;
 }

 .footer-links {
   display: flex;
   gap: 24px;
 }

 .footer-links a {
   text-decoration: none;
   color: #222222;
   font-size: 14px;
 }

 .footer-legal {
   display: flex;
   gap: 16px;
   color: #717171;
   font-size: 14px;
 }

 /* Full Screen Image Modal */
 .image-modal {
   display: none;
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background-color: rgba(0, 0, 0, 0.95);
   z-index: 1000;
   justify-content: center;
   align-items: center;
   flex-direction: column;
 }

 .modal-header {
   width: 100%;
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: 20px;
   color: white;
   position: absolute;
   top: 0;
 }

 .close-modal {
   color: white;
   font-size: 30px;
   font-weight: bold;
   cursor: pointer;
   background: none;
   border: none;
   padding: 10px;
 }

 .photo-count {
   font-size: 16px;
   font-weight: 500;
 }

 .modal-content {
   max-width: 80%;
   max-height: 80%;
   display: flex;
   justify-content: center;
   align-items: center;
 }

 .modal-content img {
   max-width: 100%;
   max-height: 100%;
   object-fit: contain;
   border-radius: 8px;
 }

 .modal-nav {
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
   background: rgba(255, 255, 255, 0.9);
   color: #222222;
   border: none;
   width: 50px;
   height: 50px;
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   cursor: pointer;
   font-size: 20px;
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
 }

 .prev-btn {
   left: 30px;
 }

 .next-btn {
   right: 30px;
 }

 .thumbnail-container {
   position: absolute;
   bottom: 20px;
   left: 0;
   right: 0;
   display: flex;
   justify-content: center;
   gap: 10px;
   padding: 10px;
   overflow-x: auto;
 }

 .thumbnail {
   width: 60px;
   height: 60px;
   border-radius: 4px;
   background-size: cover;
   background-position: center;
   cursor: pointer;
   border: 2px solid transparent;
   opacity: 0.7;
 }

 .thumbnail.active {
   border-color: white;
   opacity: 1;
 }

 /* Date Picker Modal */
 .date-modal {
   display: none;
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background-color: rgba(0, 0, 0, 0.5);
   z-index: 1000;
   justify-content: center;
   align-items: center;
 }

 .date-picker {
   background: white;
   border-radius: 12px;
   width: 800px;
   max-width: 90%;
   box-shadow: 0 8px 28px rgba(0, 0, 0, 0.28);
   overflow: hidden;
 }

 .date-header {
   padding: 24px;
   border-bottom: 1px solid #DDDDDD;
 }

 .date-title {
   font-size: 22px;
   font-weight: 600;
   margin-bottom: 16px;
 }

 .date-range-display {
   display: flex;
   gap: 16px;
 }

 .date-input {
   flex: 1;
   padding: 16px;
   border: 1px solid #DDDDDD;
   border-radius: 8px;
   cursor: pointer;
 }

 .date-input.active {
   border-color: #000;
 }

 .date-label {
   font-size: 12px;
   font-weight: 600;
   margin-bottom: 4px;
 }

 .calendar-container {
   padding: 24px;
   display: flex;
   gap: 40px;
 }

 .calendar {
   flex: 1;
 }

 .calendar-header {
   display: flex;
   justify-content: space-between;
   align-items: center;
   margin-bottom: 16px;
 }

 .calendar-title {
   font-size: 18px;
   font-weight: 600;
 }

 .calendar-nav {
   display: flex;
   gap: 12px;
 }

 .nav-button {
   background: none;
   border: none;
   cursor: pointer;
   padding: 8px;
   border-radius: 50%;
 }

 .nav-button:hover {
   background-color: #f7f7f7;
 }

 .week-days {
   display: grid;
   grid-template-columns: repeat(7, 1fr);
   text-align: center;
   margin-bottom: 8px;
 }

 .week-day {
   font-size: 12px;
   color: #717171;
   font-weight: 500;
   padding: 8px 0;
 }

 .calendar-days {
   display: grid;
   grid-template-columns: repeat(7, 1fr);
   gap: 4px;
 }

 .calendar-day {
   height: 40px;
   display: flex;
   align-items: center;
   justify-content: center;
   border-radius: 50%;
   cursor: pointer;
   font-size: 14px;
   position: relative;
 }

 .calendar-day:hover {
   background-color: #f7f7f7;
 }

 .calendar-day.other-month {
   color: #DDDDDD;
 }

 .calendar-day.past-date {
   color: #DDDDDD;
   cursor: not-allowed;
 }

 .calendar-day.past-date:hover {
   background-color: transparent;
 }

 .calendar-day.selected {
   background-color: #000;
   color: white;
 }

 .calendar-day.in-range {
   background-color: #f7f7f7;
   border-radius: 0;
 }

 .calendar-day.range-start {
   background-color: #000;
   color: white;
   border-top-right-radius: 0;
   border-bottom-right-radius: 0;
 }

 .calendar-day.range-end {
   background-color: #000;
   color: white;
   border-top-left-radius: 0;
   border-bottom-left-radius: 0;
 }

 .date-footer {
   padding: 16px 24px;
   border-top: 1px solid #DDDDDD;
   display: flex;
   justify-content: space-between;
   align-items: center;
 }

 .clear-dates {
   background: none;
   border: none;
   text-decoration: underline;
   cursor: pointer;
   font-size: 14px;
 }

 .close-dates {
   background: #000;
   color: white;
   border: none;
   padding: 12px 24px;
   border-radius: 8px;
   cursor: pointer;
   font-weight: 600;
 }

 /* Guest Picker Modal */
 .guest-modal {
   display: none;
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background-color: rgba(0, 0, 0, 0.5);
   z-index: 1000;
   justify-content: center;
   align-items: center;
 }

 .guest-picker {
   background: white;
   border-radius: 12px;
   width: 400px;
   max-width: 90%;
   box-shadow: 0 8px 28px rgba(0, 0, 0, 0.28);
   overflow: hidden;
 }

 .guest-header {
   padding: 24px;
   border-bottom: 1px solid #DDDDDD;
 }

 .guest-title {
   font-size: 22px;
   font-weight: 600;
 }

 .guest-types {
   padding: 24px;
 }

 .guest-type {
   display: flex;
   justify-content: space-between;
   align-items: center;
   margin-bottom: 32px;
 }

 .guest-info h3 {
   font-size: 16px;
   font-weight: 600;
   margin-bottom: 4px;
 }

 .guest-info p {
   font-size: 14px;
   color: #717171;
 }

 .guest-counter {
   display: flex;
   align-items: center;
   gap: 16px;
 }

 .counter-button {
   width: 32px;
   height: 32px;
   border: 1px solid #B0B0B0;
   border-radius: 50%;
   background: none;
   display: flex;
   align-items: center;
   justify-content: center;
   cursor: pointer;
   font-size: 16px;
   color: #717171;
 }

 .counter-button:disabled {
   border-color: #DDDDDD;
   color: #DDDDDD;
   cursor: not-allowed;
 }

 .counter-value {
   font-size: 16px;
   font-weight: 600;
   min-width: 20px;
   text-align: center;
 }

 .guest-footer {
   padding: 16px 24px;
   border-top: 1px solid #DDDDDD;
   display: flex;
   justify-content: flex-end;
 }

 .close-guests {
   background: #000;
   color: white;
   border: none;
   padding: 12px 24px;
   border-radius: 8px;
   cursor: pointer;
   font-weight: 600;
 }

 /* Responsive Design */
 @media (max-width: 1120px) {
   .main-content {
     flex-direction: column;
   }

   .booking-widget {
     width: 100%;
     position: static;
   }

   .image-gallery {
     height: 400px;
   }
 }

 @media (max-width: 768px) {
   .header-nav {
     padding: 16px 6px !important;
   }

   .logo img {
     width: 100%;
   }

   .logo {
     width: 25% !important;
   }

   .nav-link-group {
     margin: 0 0;
   }

   .search-area-container {
     padding: 30px 5px;
   }

   .main-content {
     padding: 0px 10px !important;
   }

   .host-link {
     display: none;
   }


   .search-input-group {
     height: auto;
   }

   .search-bar {
     height: 175px;
     flex-wrap: wrap;
   }

   .search-input-group-last {
     padding: 8px 0 8px 0px;
   }

   .search-button {
     width: 95px;
     height: 40px;

   }

   .nav-links {
     display: none;
   }

   .main-content {
     padding: 0 20px;
   }

   .image-gallery {
     grid-template-columns: 1fr;
     grid-template-rows: 300px 150px 150px;
     height: auto;
   }

   .main-image {
     grid-row: 1;
   }

   .property-features {
     flex-wrap: wrap;
     gap: 16px;
   }

   .arrangements-grid,
   .amenities-grid,
   .reviews-grid,
   .rules-grid {
     grid-template-columns: 1fr;
   }

   .footer-content {
     flex-direction: column;
     gap: 16px;
     text-align: center;
   }
 }









 /* profile page css start */

 /* Main Content Styles */
 .main-content {
   display: flex;
   gap: 40px;
   padding: 40px 10px;
 }

 .sidebar {
   flex: 0 0 240px;
 }

 .sidebar-menu {
   list-style: none;
   position: sticky;
   top: 80px;
   padding: 0;
 }

 a.panel-item.logouts-link {
   color: #007f4b;
   font-weight: 800;
 }

 .sidebar-menu li {
   margin-bottom: 8px;
   border: 1px solid #008efe;
   border-radius: 10px;
 }

 .sidebar-menu a {
   display: block;
   padding: 12px 16px;
   text-decoration: none;
   color: #222222;
   border-radius: 8px;
   transition: background-color 0.2s;
   display: flex;
   justify-content: space-between;
   align-items: center;
 }

 .sidebar-menu a.active {
   /* background-color: #f7f7f7; */
   font-weight: 600;
   background: #008efe;
   color: white;
 }

 .sidebar-menu a:hover:not(.active) {
   background-color: #f7f7f7;
 }

 .menu-status {
   width: 8px;
   height: 8px;
   border-radius: 50%;
   background-color: #FF5A5F;
 }

 .menu-status.complete {
   background-color: #00a69800;
   background-image: url("../images/checkmark.png");
   background-size: contain;
   background-repeat: no-repeat;
   background-position: center;
   width: 20px;
   height: 20px;
   display: inline-block;
   /* Important */
 }

 .profile-content {
   flex: 1;
   background-color: white;
   border-radius: 12px;
   padding: 32px;
   box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
 }

 .profile-header {
   margin-bottom: 32px;
 }

 .profile-header h1 {
   font-size: 2rem;
   margin-bottom: 8px;
 }

 .profile-header p {
   color: #717171;
   font-size: 1rem;
 }

 /* Profile Form Styles - Image Layout */
 .profile-form {
   max-width: 100%;
 }

 .form-section {
   margin-bottom: 40px;
 }

 .form-section h2 {
   font-size: 1.375rem;
   margin-bottom: 24px;
   color: #222222;
   font-weight: 600;
 }

 .two-column-layout {
   display: flex;
   gap: 40px;
 }

 .column {
   flex: 1;
 }

 .profile-item {
   display: flex;
   align-items: center;
   padding: 16px 0;
   border-bottom: 1px solid #ebebeb;
   cursor: pointer;
   transition: background-color 0.2s;
 }

 .profile-item:last-child {
   border-bottom: none;
 }

 .profile-item:hover {
   background-color: #f9f9f9;
   border-radius: 8px;
   padding-left: 12px;
   padding-right: 12px;
 }

 .item-icon {
   width: 32px;
   height: 32px;
   border-radius: 8px;
   margin-right: 16px;
   display: flex;
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
   font-size: 14px;
   transition: all 0.3s ease;
 }

 .item-icon.empty {
   background-color: #f0f0f0;
   color: #717171;
 }

 .item-icon.filled {
   background-color: #008efe;
   color: white;
 }

 .item-content {
   flex: 1;
 }

 .item-content h3 {
   font-size: 1rem;
   font-weight: 500;
   margin-bottom: 4px;
   color: #222222;
 }

 .item-value {
   font-size: 0.9rem;
   color: #717171;
 }

 /* Section Styles */
 .section {
   display: none;
 }

 .section.active {
   display: block;
 }

 .form-grid {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 20px;
   margin-bottom: 24px;
 }

 .form-group {
   margin-bottom: 20px;
 }

 .form-group label {
   display: block;
   margin-bottom: 8px;
   font-weight: 500;
   color: #222222;
 }

 .form-group input,
 .form-group textarea,
 .form-group select {
   width: 100%;
   padding: 12px 16px;
   border: 1px solid #ebebeb;
   border-radius: 8px;
   font-size: 1rem;
   transition: border-color 0.2s;
 }

 .form-group input:focus,
 .form-group textarea:focus,
 .form-group select:focus {
   outline: none;
   border-color: #222222;
 }

 .checkbox-group {
   display: flex;
   align-items: center;
   gap: 12px;
   margin-bottom: 16px;
 }

 .checkbox-group input {
   width: auto;
 }

 .checkbox-group label {
   margin-bottom: 0;
   font-weight: normal;
 }

 .about-me-section {
   margin-top: 40px;
   padding-top: 32px;
   border-top: 1px solid #ebebeb;
 }

 .about-me-section h2 {
   font-size: 1.375rem;
   margin-bottom: 16px;
   color: #222222;
   font-weight: 600;
 }

 .about-me-section textarea {
   width: 100%;
   min-height: 120px;
   padding: 16px;
   border: 1px solid #ebebeb;
   border-radius: 8px;
   font-size: 1rem;
   resize: vertical;
 }

 .about-me-section textarea:focus {
   outline: none;
   border-color: #222222;
 }

 .form-actions {
   display: flex;
   justify-content: flex-end;
   margin-top: 32px;
   gap: 16px;
 }

 .btn {
   padding: 12px 24px;
   border-radius: 8px;
   font-weight: 600;
   cursor: pointer;
   transition: all 0.2s;
 }

 .btn-secondary {
   background-color: white;
   border: 1px solid #222222;
   color: #222222;
 }

 .btn-secondary:hover {
   background-color: #f7f7f7;
 }

 .btn-primary {
   background-color: #FF5A5F;
   border: 1px solid #FF5A5F;
   color: white;
 }

 .btn-primary:hover {
   background-color: #e14b50;
 }

 /* Popup Styles */
 .popup-overlay {
   position: fixed;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   background-color: rgba(0, 0, 0, 0.5);
   display: flex;
   align-items: center;
   justify-content: center;
   z-index: 1000;
   opacity: 0;
   visibility: hidden;
   transition: all 0.3s ease;
 }

 .popup-overlay.active {
   opacity: 1;
   visibility: visible;
 }

 .popup {
   background-color: white;
   border-radius: 12px;
   width: 90%;
   max-width: 500px;
   max-height: 90vh;
   overflow-y: auto;
   box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
   transform: translateY(20px);
   transition: transform 0.3s ease;
 }

 .popup-overlay.active .popup {
   transform: translateY(0);
 }

 .popup-header {
   padding: 20px 24px;
   border-bottom: 1px solid #ebebeb;
   display: flex;
   justify-content: space-between;
   align-items: center;
 }

 .popup-header h2 {
   font-size: 1.25rem;
   font-weight: 600;
 }

 .popup-close {
   background: none;
   border: none;
   font-size: 1.5rem;
   cursor: pointer;
   color: #717171;
   width: 32px;
   height: 32px;
   display: flex;
   align-items: center;
   justify-content: center;
   border-radius: 50%;
 }

 .popup-close:hover {
   background-color: #f7f7f7;
 }

 .popup-body {
   padding: 24px;
 }

 .popup-body p {
   margin-bottom: 20px;
   color: #717171;
   line-height: 1.5;
 }

 .popup-footer {
   padding: 16px 24px;
   border-top: 1px solid #ebebeb;
   display: flex;
   justify-content: flex-end;
   gap: 12px;
 }

 /* Success Message */
 .success-message {
   background-color: #f0f9f0;
   border: 1px solid #00A699;
   border-radius: 8px;
   padding: 16px;
   margin-bottom: 24px;
   display: none;
 }

 .success-message.active {
   display: block;
 }

 .success-message p {
   color: #00A699;
   font-weight: 500;
   margin: 0;
 }


 /* Responsive Styles */
 @media (max-width: 768px) {
   .two-column-layout {
     flex-direction: column;
     gap: 0;
   }

   .form-grid {
     grid-template-columns: 1fr;
   }

   .main-content {
     flex-direction: column;
   }


 }






 /* messages page css start         */


 /* Main Content Styles */
 .rentii-main-content {
   display: flex;
   height: calc(100vh - 80px);
 }

 /* Sidebar Styles - Fixed */
 .rentii-sidebar {
   width: 380px;
   border-right: 1px solid #ebebeb;
   background-color: white;
   display: flex;
   flex-direction: column;
   height: 100%;
   position: fixed;
   left: 0;
   top: 80px;
   bottom: 0;
   overflow: hidden;
 }

 .rentii-sidebar.hidden {
   width: 0;
   overflow: hidden;
 }

 .rentii-sidebar-header {
   padding: 24px;
   border-bottom: 1px solid #ebebeb;
   flex-shrink: 0;
 }

 .rentii-sidebar-header h1 {
   font-size: 1.625rem;
   font-weight: 600;
   margin-bottom: 16px;
 }

 .rentii-tab-buttons {
   display: flex;
   gap: 8px;
 }

 .rentii-tab-btn {
   padding: 8px 16px;
   background: none;
   border: none;
   border-radius: 20px;
   font-weight: 500;
   cursor: pointer;
   transition: all 0.2s;
 }

 .rentii-tab-btn.rentii-active {
   background-color: #222222;
   color: white;
 }

 .rentii-tab-btn:not(.rentii-active):hover {
   background-color: #f7f7f7;
 }

 .rentii-search-section {
   padding: 16px 24px;
   border-bottom: 1px solid #ebebeb;
   flex-shrink: 0;
 }

 .rentii-search-box {
   position: relative;
 }

 .rentii-search-input {
   width: 100%;
   padding: 12px 40px 12px 16px;
   border: 1px solid #ebebeb;
   border-radius: 8px;
   font-size: 0.95rem;
   transition: border-color 0.2s;
 }

 .rentii-search-input:focus {
   outline: none;
   border-color: #222222;
 }

 .rentii-search-icon {
   position: absolute;
   right: 12px;
   top: 50%;
   transform: translateY(-50%);
   color: #717171;
 }

 /* Messages List - Scrollable */
 .rentii-messages-list {
   display: none;
   flex-direction: column;
   flex: 1;
   overflow-y: auto;
 }

 .rentii-messages-list.rentii-active {
   display: flex;
 }

 .rentii-message-item {
   padding: 20px 24px;
   border-bottom: 1px solid #ebebeb;
   cursor: pointer;
   transition: background-color 0.2s;
   display: flex;
   gap: 16px;
 }

 .rentii-message-item:hover {
   background-color: #f7f7f7;
 }

 .rentii-message-item.rentii-unread {
   background-color: #f0f8ff;
 }

 .rentii-message-item.rentii-active {
   background-color: #e8f4fd;
   border-left: 4px solid #FF5A5F;
 }

 .rentii-message-avatar {
   width: 48px;
   height: 48px;
   border-radius: 50%;
   background-color: #e4e4e4;
   display: flex;
   align-items: center;
   justify-content: center;
   font-weight: 600;
   color: #717171;
   flex-shrink: 0;
 }

 .rentii-message-content {
   flex: 1;
   min-width: 0;
 }

 .rentii-message-header {
   display: flex;
   justify-content: space-between;
   align-items: flex-start;
   margin-bottom: 4px;
 }

 .rentii-message-sender {
   font-weight: 600;
   font-size: 0.95rem;
 }

 .rentii-message-time {
   color: #717171;
   font-size: 0.85rem;
 }

 .rentii-message-preview {
   color: #717171;
   font-size: 0.9rem;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
   margin-bottom: 4px;
 }

 .rentii-message-type {
   display: inline-block;
   padding: 2px 8px;
   background-color: #f0f0f0;
   border-radius: 12px;
   font-size: 0.75rem;
   color: #717171;
 }

 .rentii-message-type.rentii-hosting {
   background-color: #e8f5e8;
   color: #2e7d32;
 }

 .rentii-message-type.rentii-travelling {
   background-color: #e3f2fd;
   color: #1565c0;
 }

 .rentii-message-type.rentii-support {
   background-color: #fff3e0;
   color: #ef6c00;
 }

 /* Conversation View - Full Width */
 .rentii-conversation-view {
   flex: 1;
   display: none;
   flex-direction: column;
   background-color: #f0f2f5;
   position: relative;
   margin-left: 380px;
   height: 100%;
 }

 .rentii-conversation-view.active {
   display: flex;
 }

 .rentii-conversation-view.full-width {
   margin-left: 0;
 }

 .rentii-conversation-header {
   background-color: #f0f2f5;
   padding: 16px 24px;
   border-bottom: 1px solid #e0e0e0;
   display: flex;
   align-items: center;
   gap: 16px;
   flex-shrink: 0;
 }

 .rentii-back-button {
   background: none;
   border: none;
   font-size: 18px;
   cursor: pointer;
   color: #54656f;
   padding: 8px;
   border-radius: 50%;
   transition: background-color 0.2s;
 }

 .rentii-back-button:hover {
   background-color: #e0e0e0;
 }

 .rentii-conversation-avatar {
   width: 40px;
   height: 40px;
   border-radius: 50%;
   background-color: #25d366;
   display: flex;
   align-items: center;
   justify-content: center;
   color: white;
   font-weight: 600;
   font-size: 16px;
 }

 .rentii-conversation-info {
   flex: 1;
 }

 .rentii-conversation-name {
   font-weight: 600;
   font-size: 16px;
 }

 .rentii-conversation-status {
   color: #667781;
   font-size: 13px;
 }

 .rentii-conversation-actions {
   display: flex;
   gap: 16px;
 }

 .rentii-conversation-action {
   background: none;
   border: none;
   color: #54656f;
   font-size: 18px;
   cursor: pointer;
   padding: 8px;
   border-radius: 50%;
   transition: background-color 0.2s;
 }

 .rentii-conversation-action:hover {
   background-color: #e0e0e0;
 }

 .rentii-messages-container {
   flex: 1;
   padding: 20px;
   overflow-y: auto;
   display: flex;
   flex-direction: column;
   gap: 16px;
   background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" opacity="0.05"><path fill="%23007AFF" d="M30,30 C40,20 60,20 70,30 C80,40 80,60 70,70 C60,80 40,80 30,70 C20,60 20,40 30,30 Z"/></svg>');
 }

 .rentii-message-bubble {
   max-width: 65%;
   padding: 12px 16px;
   border-radius: 8px;
   position: relative;
   animation: fadeIn 0.3s ease;
 }

 @keyframes fadeIn {
   from {
     opacity: 0;
     transform: translateY(10px);
   }

   to {
     opacity: 1;
     transform: translateY(0);
   }
 }

 .rentii-message-bubble.received {
   background-color: white;
   align-self: flex-start;
   border-top-left-radius: 2px;
   box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
 }

 .rentii-message-bubble.sent {
   background-color: #d9fdd3;
   align-self: flex-end;
   border-top-right-radius: 2px;
   box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
 }

 .rentii-message-text {
   font-size: 14px;
   line-height: 1.4;
   margin-bottom: 4px;
 }

 .rentii-message-time-small {
   font-size: 11px;
   color: #667781;
   text-align: right;
 }

 .rentii-input-container {
   background-color: #f0f2f5;
   padding: 16px 24px;
   border-top: 1px solid #e0e0e0;
   display: flex;
   align-items: center;
   gap: 16px;
   position: sticky;
   bottom: 0;
   z-index: 10;
   flex-shrink: 0;
 }

 .rentii-input-actions {
   display: flex;
   gap: 16px;
 }

 .rentii-input-action {
   background: none;
   border: none;
   color: #54656f;
   font-size: 20px;
   cursor: pointer;
   padding: 8px;
   border-radius: 50%;
   transition: background-color 0.2s;
 }

 .rentii-input-action:hover {
   background-color: #e0e0e0;
 }

 .rentii-message-input {
   flex: 1;
   padding: 12px 16px;
   border: none;
   border-radius: 24px;
   background-color: white;
   font-size: 14px;
   resize: none;
   max-height: 120px;
 }

 .rentii-message-input:focus {
   outline: none;
 }

 .rentii-send-button {
   background: none;
   border: none;
   color: #54656f;
   font-size: 20px;
   cursor: pointer;
   padding: 8px;
   border-radius: 50%;
   transition: background-color 0.2s;
 }

 .rentii-send-button:hover {
   background-color: #e0e0e0;
 }

 .rentii-send-button.active {
   color: #007AFF;
 }

 /* Messages Content - Hide when conversation is active */
 .rentii-messages-content {
   flex: 1;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   padding: 40px;
   background-color: #f7f7f7;
   transition: all 0.3s ease;
   margin-left: 380px;
   height: 100%;
 }

 .rentii-messages-content.hidden {
   display: none;
 }

 .rentii-no-messages {
   text-align: center;
   max-width: 400px;
 }

 .rentii-no-messages-icon {
   font-size: 4rem;
   color: #b0b0b0;
   margin-bottom: 24px;
 }

 .rentii-no-messages h2 {
   font-size: 1.375rem;
   font-weight: 600;
   margin-bottom: 8px;
 }

 .rentii-no-messages p {
   color: #717171;
   margin-bottom: 24px;
 }

 .rentii-switch-hosting {
   background-color: #222222;
   color: white;
   border: none;
   border-radius: 8px;
   padding: 12px 24px;
   font-weight: 600;
   cursor: pointer;
   transition: background-color 0.2s;
 }

 .nav-link-group a {
   text-decoration: none;
   color: black;
 }

 .rentii-switch-hosting:hover {
   background-color: #000000;
 }


 div#propertyWrapper {
   display: grid;
   grid-template-columns: 1fr 1fr 1fr 1fr;
   column-gap: 20px;
   padding-top: 25px;
   row-gap: 20px;
 }

 /* Responsive Styles */
 @media (max-width: 768px) {
   .rentii-main-content {
     flex-direction: column;
   }

   .rentii-sidebar {
     width: 100%;
     position: static;
     height: auto;
   }

   .rentii-sidebar.hidden {
     display: none;
   }

   .rentii-nav-links {
     display: none;
   }

   .rentii-conversation-view {
     margin-left: 0;
   }

   .rentii-messages-content {
     margin-left: 0;
   }

   .rentii-message-bubble {
     max-width: 85%;
   }

   .property-highlights {
     flex-wrap: wrap;
     gap: 17px;
     font-size: 16px;
   }

   footer {
     border-top: 1px solid #DDDDDD;
     padding: 24px 15px;
   }


   .footer-content {
     flex-direction: column;
     gap: 15px;
     text-align: center;
     flex-wrap: wrap;
   }

   .footer-links {
     display: flex;
     gap: 20px;
   }

   .booking-widget {
     width: 100%;
     position: static;
     margin-bottom: 30px;
   }


   .sidebar-menu {
     list-style: none;
     position: sticky;
     top: 80px;
     padding: 0;
   }


   .profile-content {
     padding: 0;
   }

   .profile-header h1 {
     font-size: 26px;
     margin-bottom: 8px;
   }

   .form-actions {
     margin-top: 15px;
     margin-bottom: 15px;
   }

   .profile-panel {
     top: 81px;
     width: 280px;
   }

   .booking-card {
     border: 1px solid #DDDDDD;
     border-radius: 12px;
     padding: 15px;
     box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
   }



   .dropdown-container {
     position: absolute;
     left: 0px;
     top: 85%;
     transform: translateX(5%);
     width: 90%;
     z-index: 999;
   }

   .calendar {
     flex: none;
     width: 100% !important;
   }

   .calendar-container {
     padding: 24px;
     display: flex;
     gap: 40px;
     overflow: scroll;
   }

   .dropdown-content {
     padding: 7px 20px;
   }

   .flatpickr-months .flatpickr-month {
     height: 50px !important;
   }


   .flatpickr-innerContainer {
     display: -ms-flexbox;
     display: flow !important;
     -webkit-box-sizing: border-box;
     box-sizing: border-box;
     overflow: scroll !important;
   }

   .things-to-know {
     margin-bottom: 0;
   }


 }

 @media (max-width: 480px) {
   .rentii-message-bubble {
     max-width: 90%;
   }

   .rentii-tab-buttons {
     flex-wrap: wrap;
   }
 }















 /* pagnaction  */
 .pagination-wrapper {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin: 30px 0;
}

.pagination-wrapper button {
  padding: 8px 14px;
  border: 1px solid #ddd;
  background: #fff;
  cursor: pointer;
  border-radius: 4px;
}

.pagination-wrapper button.active {
  background: #ff385c;
  color: #fff;
  border-color: #ff385c;
}

.pagination-wrapper button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}