.tabsitempackage {
    padding: 0px 0px;
    cursor: pointer;
    font-family: 'Roboto', sans-serif; /* Font family */
    font-weight: 700; /* Font weight */
    font-size: 30px; /* Font size */
    line-height: 35.16px; /* Line height */
    letter-spacing: 0px; /* Letter spacing */
    border-bottom: 3px solid transparent;
    text-decoration: none; /* Remove underline */
    margin-left: 20px;
    color: gray; /* Inactive tab color is gray */
    position: relative; /* Needed for the pseudo-element */
    padding-right: 20px; /* Space for the vertical line */
}

.tabsitempackage::after {
    content: "";
    position: absolute;
    right: 0;
    top: 0px;
    height: 40px; /* Height of the vertical line */
    width: 2px;
    
    background-color: gray;
}

/* Remove the vertical line from the last tab */
.tabsitempackage:last-child::after {
  display: none;
}

/* Remove the vertical line from the second-to-last tab */
.tabsitempackage:nth-last-child(2)::after {
  display: none;
}

.active-tabpackage {
    color: black; /* Active tab color is black */
}

.tabspackage {
    display: flex;
    justify-content: start;
    margin-top: 0px;
    margin-left: 30px; 
    padding-left: 20px;
   
}





.capack {
    position: relative; /* Ensure the parent div is positioned */
    display: inline-block;
}

.capack {
   
    margin-left: 20px;
    margin-top: 20px;
    cursor: pointer;
}
.capaaa{
    width: 30px;
    height: 30px;
}


/* --------------------------calemdar popup---------------------------------- */
.calendar-popuppa {
    display: none;
    position: absolute;
   right: 0;
   top: 50%; /* Start at 50% of the image's height */
   transform: translate(0%, -30%); /* Move left and center vertically */
    z-index: 999;
    background: white;
    border: 1px solid #ccc;
    padding: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    border-radius: 4px;
   
}
.calendar-headerpa {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
  
}
.calendar-headerpa button {
    background: none;
    border: none;
    cursor: pointer;
    
    font-size: 16px;
}
.calendar-titlepa {
    font-weight: bold;

}
.calendar-dayspa {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    text-align: center;
    font-weight: 600;
    font-size: 15px;
    line-height: 15px;
    padding: 5px 0px;
    margin: 5px 2px;
   
    color: #00000066;

}
.calendarpa {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 5px;
    text-align: center;
    padding: 10px;
    font-weight: 800;
}
.calendarpa div {
    padding: 10px;
   
    cursor: pointer;
}
.selecteddefault {
    background-color: #85B7CC;
    color: #666666;
    
    border-radius: 50%;
}



.selected{
    color: #85B7CC;
    background-color: white;
}
.calendar-dayspa div.selected {
    background-color: #85B7CC;
    border-radius: 5px;
    color: white;
    font-weight: 500;
    font-size: 15px;
    line-height: 15px;
    padding: 5px 2px;
}

.prev-month {

    color: #888;
}
.next-month {
  
    color: #888;
}


.nextandprepa{
    width: 14px;
    height: 18px;
    cursor: pointer;
}



.form-container-packages {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr  0.001fr; /* Different widths for each column */
    gap: 10px;

    margin-left: 50px;
  
    margin-right: 20px;
    max-width: 100%;
  margin-bottom: 30px;
}

.input-group-packages {
    display: flex;
    flex-direction: column;
 
 
}

.input-group-packages label {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 5px;
}

.input-wrapper-packages {
    display: flex;
    align-items: center;
    border: 1px solid #85B7CC;
    padding-top: 20px;
    
    padding-bottom: 20px;
    border-radius: 15px;
    width: 100%;
    position: relative; /* Allows absolute positioning for the icon */
    
}


.input-wrapper-packagesim {
    display: flex;
    align-items: center;
    padding: 10px; /* Reduced padding */
    padding-right: 10px;
    border: 1px solid #85B7CC;
    border-radius: 15px;
    width: 100%;
    position: relative; /* Allows absolute positioning for the icon */
    
}
.input-wrapper-packagesim input {
    border: none;
    outline: none;
    font-size: 16px;
    background: transparent;
    width: 100%;
    
}
.gtt{
    padding-left: 20px;
}
.input-wrapper-packages input {
    border: none;
    outline: none;
    font-size: 16px;
    background: transparent;
    width: 100%;

}
.input-wrapper-packages select {
    border: none;
    outline: none;
    font-size: 16px;
    background: transparent;
    width: 100%;
    appearance: none; /* Hides default select arrow */
    padding-right: 30px; /* Space for the custom icon */
    cursor: pointer;
}
/* Custom dropdown arrow */
.input-wrapper-packages  img{
    width: 14.3px;
    height: 14.3px;
}
.input-wrapper-packagesim img {
    width: 34px;
    height: 34px;
}

.file-upload-packages .input-wrapper-packagesim {
    border: 2px dashed #85B7CC;
    cursor: pointer;
    justify-content: space-between;
}

#imageUpload {
    display: none;
}

.upload-btn-packages {
    background-color: #85B7CC;
    color: white;
    padding: 5px 10px;
    border: none;
    cursor: pointer;
    border-radius: 5px;
}




#dropdown-icon {
    position: absolute;
    right: 10px;
    cursor: pointer;
  
    
}

#dropdown-menu {
    display: none; /* Initially hidden */
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background: white;
    border: 1px solid #85B7CC;
    border-radius: 8px;
    z-index: 10;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

#dropdown-icon-destination {
    position: absolute;
    right: 10px;
    cursor: pointer;
  
    
}

#dropdown-menu-destination {
    display: none; /* Initially hidden */
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background: white;
    border: 1px solid #85B7CC;
    border-radius: 8px;
    z-index: 10;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.dropdown-item {
    padding: 8px;
    cursor: pointer;
}

.dropdown-item:hover {
    background-color: #f0f0f0;
}













/* ----------------------------------about npage---------------------------------------------- */


.containeraboutpackage {
   margin-top: 30px;
    margin-left: 50px;
    text-align: center;
    margin-right: 20px;
}

.input-upload-wrapper {
    display: flex;
    align-items: start;
    justify-content: space-between;
}

.inputboxaboutpackage {
 
    padding-top: 20px;
    padding-bottom: 20px;
    padding-left: 20px;
    background: #D3EEFF;
    border: none;
    border-radius: 24px;
    font-size: 16px;
    width: 100%;
    font-weight: 700;
}
.inputboxaboutpackage ::placeholder{
    font-weight: 700;
    font-size: 24px;
    font-family: ROBOTO;
}

.inputboxaboutpackagecl {
    padding: 20px;
    background: #D3EEFF;
    border: none;
    border-radius: 24px;
    font-size: 16px;
    width: 100%;
    font-weight: 700;
    resize: none; /* prevent user resizing */
    height: 150px; /* enough for 3 lines */
    box-sizing: border-box;
    font-family: 'Roboto', sans-serif;
}

.inputboxaboutpackagecl::placeholder {
    font-weight: 700;
    font-size: 18px;
    font-family: 'Roboto', sans-serif;
    line-height: 1.4;
    white-space: pre-wrap;
}
.upload-sectionaboutpackage {
    display: flex;
    justify-content: center; /* Aligns items in the center */
    gap: 10px; /* Adjusts spacing between items */
    margin-left: 20px;
}
.text111{
    font-size: 400;
    font-size: 16px;
    padding-bottom: 0px;
    margin-bottom: 0px;
}
.text222{
    font-size: 400;
    font-size: 16px;
    padding-top: 10px;
    margin-top: 0px;
}
.uploadboxaboutpackage {
    width: 165px;
    height: 186px;
    border: 2px dashed #D3EEFF;
    display: flex;
    flex-direction: column;
    border-radius: 24px;
    align-items: center;
    justify-content: center;
    padding: 10px;
}
.uploadboxaboutpackage img{
    width: 34px;
    height: 34px;
}

.text-places {
  color: #FF8682;
  font-weight: 600;
}


.uploadboxaboutpackagepa {
    width: 165px;
    height: 186px;
    border: 2px dashed #D3EEFF;
    display: flex;
    flex-direction: column;
    border-radius: 24px;
    align-items: center;
    justify-content: center;
    padding: 10px;
}
.uploadboxaboutpackagepa img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.uploadboxaboutpackaga img{
    max-width: auto;
    height: auto;
}
.selectfileaboutpackage {
    background: #85B7CC;
    color: white;
    border: none;
    padding: 5px 10px;
    cursor: pointer;
    font-size: 14.5px;
    border-radius: 8px;
    font-weight: 700;
}

.cards-containeraboutpackage {
    display: flex;
    justify-content: space-around;
    margin-top: 60px;
    gap: 15px;
}

.cardaboutpackage {
    width: 254px;
    height: 238px;
    background: #D3EEFF;
    padding: 20px;
    border-radius: 24px;
    text-align: center;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end; /* Ensures content fills the card properly */
}

.iconaboutpackage {
    width: 63px;
    height: 63px;
    position: absolute;
    top: -25px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
   
}

.contentaboutpackage {
  flex-grow: 1;
  background: white;
  padding: 10px;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
}

.titleofcard {
  font-weight: 600;
  font-size: 18px;
  color: black;
  margin-bottom: 10px;
}

.description-wrapper {
  flex-grow: 1;
  display: flex;
  align-items: center; /* by default */
  justify-content: center;
  flex-direction: column;
  justify-content: center; /* center vertically */
}

.textofcard {
  font-weight: 400;
  font-size: 14px;
  line-height: 130%;
  color: black;
}



/* ---------------------------------------------------------------------------------------------- */
.card-pac111s {
    display: flex;
    flex-direction: column;
    background: white;
    border-radius: 15.8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    height: 100%; /* Ensures all cards have equal height */
}
.container-pac1113s {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
 
    margin-left: 50px;
    margin-right: 30px;
}
/* Container */
.container-pac111s {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
 
    margin-left: 50px;
    margin-right: 30px;
}
.card-pac1112s {
  width: calc((100% - 40px) / 3); /* 3 cards per view */
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  background: white;
  border-radius: 15.8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  /* Remove fixed height */
}
.container-wrapper2121 {
    position: relative;
    margin-left: 50px;
margin-top: 0px;
    margin-right: 30px;
}

.nav-buttons {
    /* Remove position, top, right */
    display: flex;
    gap: 10px;
    align-items: center; /* Ensure vertical alignment with title */
}

.nav-buttons button {
    background-color: #85B7CC;
    border: none;
    padding: 5px 10px;
    cursor: pointer;
    font-size: 20px;
    border-radius: 5px;
}
.container-pac1112s {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch; /* Ensures children stretch to the same height */
  gap: 20px;
  overflow-x: auto;
  scroll-behavior: smooth;
  margin-top: 0px;
  padding-top: 20px;
  padding-bottom: 20px;
   direction: ltr;
}

.container-pac1112s::-webkit-scrollbar {
    display: none; /* Optional: hides the scrollbar */
}


/* Card */


/* Image Section */
.image-container-pac111s {
    position: relative;
}

.image-pac111s {
    width: 100%;
    height: 115px;
    object-fit: cover;
}

/* Price Badge */
.price-pac111s {
    position: absolute;
    top: 10px;
    right: 10px;
    background: #85B7CC;
    color: white;
    padding: 5px 10px;
    border-radius: 3.95px;
    font-weight: bold;
    font-size: 19px;
}

/* Card Content */
.content-pac111s {
    padding-left: 15px;
    margin-top: 0px;
    padding-top: 0px;
    padding-bottom: 15px;
    flex-grow: 1; /* Pushes buttons to the bottom */
}

/* Title */
.title-pac111s {
    padding-top: 0px;
    margin-top: 0px;
    font-size: 19px;
    font-weight: bold;
    margin-bottom: 5px;
}

/* Location */
.location-pac111s {
    display: flex;
    align-items: center;
    font-size: 13px;
    font-weight: 700;
    color: #112211;
    margin-bottom: 10px;
}

.icon-pac111s {
    margin-right: 5px;
}

/* Description */
.description-pac111s {
    font-size: 13px;
    font-weight: 400;
    color: #000000;
    line-height: 1.5;
}

/* Buttons */
.buttons-pac111s {
    display: flex;
    flex-direction: row; /* Stack buttons vertically */
    padding: 15px;
    gap: 10px;
    margin-top: auto; /* Push to bottom */
}

/* Button Styles */
.edit-pac111s,
.delete-pac111s {
    width: 100%;
    padding: 10px;
    font-size: 16px;
    font-weight: 400;
    border: none;
    border-radius: 7.9px;
    cursor: pointer;
    transition: 0.3s;
}
.edit-pac111s {
    background: #85B7CC;
    color: black;
   
}

.delete-pac111s {
    background: #FF7B70;
    color: black;
}

.edit-pac111s:hover {
    background: #0056b3;
}

.delete-pac111s:hover {
    background: #b02a37;
}
















/* ---------------------------------acccomondation css------------------------------------------------------------------------- */

.tabsitemnavaccom {
    padding: 5px;
    cursor: pointer;
    font-family: 'Roboto', sans-serif; /* Font family */
    font-weight: 700; /* Font weight */
    font-size: 22px; /* Font size */
    line-height: 35.16px; /* Line height */
    letter-spacing: 0px; /* Letter spacing */
    background-color: white;
    margin-top: 0px;
    border-radius: 16px;
    border: 3px solid transparent;
    text-decoration: none; /* Remove underline */
    margin-left: 25px;
    color: gray; /* Inactive tab color is gray */
    box-shadow: 0px 0px 15px 0px #00000040;

  
}



.active-tabaccom {
    border: 3px solid #85B7CC;

    color: #85B7CC; /* Inactive tab color is gray */

}

.inactive-tabaccom {
    color: gray; /* Inactive tab color is gray */
}



.containeronelocation {
    display: flex;
    padding-left: 30px;
   
    flex-direction: column;
    align-items: center; /* Centers the city box */
    width: auto; /* Width adjusts automatically */
    max-width: 100%; /* Prevents it from exceeding screen width */
 

}

.city-boxonelocation {
    padding: 10px;
    display: flex;
    flex-direction: column;
    margin-bottom: 30px;
    align-items: center;
    box-shadow: 0px 0px 20px 0px #00000040;
    border-radius: 24px;
    background-color: white;

    min-width: 350px; /* Ensures it has a minimum width */
    max-width: 100%; /* Prevents it from exceeding the screen */
}
.hotels-containeronelocation {
    display: flex;
    gap: 10px;
    flex-wrap: wrap; /* Ensures cards wrap instead of shrinking */
    justify-content: flex-start;
    width: 100%;
}

.hotel-cardonelocation {
    box-shadow: 0px 0px 24.4px 0px #00000040;
    border-radius: 16px;
    background-color: white;
    padding: 15px;
    gap: 10px;
    display: flex;
    min-width: 310px; /* Ensure minimum width */
    max-width: 310px; /* Prevent shrinking */
    width: 310px; /* Ensure fixed width */
}
.city-titleonelocation {
    text-align: center;
    font-size: 23px;
    color: gray;
    font-weight: bold;
    margin-bottom: 10px;
    padding-top: 0px;
    margin-top: 0px;
}





/* .add-cardonelocation {
    cursor: pointer;
    background: #88b6d6;
    color: white;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
} */

/* Left Column */
.hotel-infoonelocation {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 100%; /* Takes half of the card width */
}

/* Right Column */
.hotel-extraonelocation {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 100%; /* Takes half of the card width */
  
}

/* Header */
.hotel-headeronelocation {
    font-size: 14px;
    font-weight: 500;
    color: gray;
    text-align: left;
}
.imarac{
    padding-left: 5px;
    width: 14.39px;
    height: 7.79px;
}

/* Stars */
.hotel-starsonelocation {
    margin-top: 8px;
    font-size: 14px;
}
.hotel-starsonelocation img{
    width: 20.7px;
    padding-left: 3px;
    height: 19.7px;
}
.room-typeonelocation{
    font-size: 14px;
    font-weight: 400;

    color: #666;
    margin-top: 12px;
    white-space: nowrap; /* Prevents text from wrapping */
    overflow-x: auto; /* Enables horizontal scrolling */
    display: block; /* Ensures proper scrolling behavior */
    padding: 2px; /* Optional: Better appearance */
}


.room-typeonelocation a{
    font-size: 14px;
    font-weight: 400;
    text-decoration: underline;

    color: #666;

  }
.servicesonelocation{
    font-size: 14px;
    font-weight: 400;
    color: gray;
    width: 100%; /* Adjust this if needed */
    max-width: 150px; /* Set a limit for text width */
    white-space: nowrap; /* Prevents text from wrapping */
    overflow-x: auto; /* Enables horizontal scrolling */
    display: block; /* Ensures proper scrolling behavior */
    padding: 2px; /* Optional: Better appearance */
}
/* Upload Box */
.upload-boxonelocation {
    border: 2px dashed #ccc;
    padding: 5px;
    text-align: center;
    border-radius: 10px;
    
}
.upload-boxonelocation p{
    font-weight: 400;
    font-size: 14px;
    color: gray;
}

.upload-btnonelocation {
    background: #85B7CC;
    border: none;
    color: white;
    border-radius: 5px;
    padding: 5px;
    font-weight: 700;
    font-size: 12px;
    cursor: pointer;
}
.preview-imageonelocation img {
    max-width: 100%; /* Ensure the image fits */
    max-height: 100px; /* Set a max height */
    margin-top: 10px;
    border-radius: 5px;
}
.pricing-wrapperonelocationss {
  display: flex;
  flex-direction: row;
  width: 100%;
  gap: 20px;
}

.pricingonelocation {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  width: 100px; /* or max-width: 120px; adjust as needed */
}

.pricingonelocation input[type="number"] {
  color: #55ACEE;
  font-weight: 500;
  font-size: 14px;
  width: 60px;
  height: 28px;
  padding: 2px 6px;
  border: 1px solid #ccc;
  border-radius: 5px;
  box-sizing: border-box;
}

.pricingonelocation button {
  background: white;
  border: 1px solid #ccc;
  padding: 2px 8px;
  cursor: pointer;
  font-weight: bold;
  font-size: 13px;
  border-radius: 6px;
  color: gray;
  height: 28px;
  min-width: 60px;
  box-sizing: border-box;
}

/* Details button style */
.details-btn {
  margin-top: 12px;
  padding: 4px 14px;
  font-size: 13px;
  border-radius: 7px;
  background: #55ACEE;
  color: #fff;
  border: none;
  cursor: pointer;
  height: 32px;
  min-width: 80px;
  transition: background 0.2s;
}
.details-btn:hover {
  background: #3399dd;
}

.add-hotel-btnonelocation {
    background: #88b6d6;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 20px;
    cursor: pointer;
    margin-left: 50px;
    margin-bottom: 15px;
}
.detaildivbutton {
    display: flex;
    justify-content: center; /* This centers the buttons horizontally */
    gap: 20px; /* Optional: space between buttons */
    flex-wrap: wrap; /* Optional: wraps buttons on smaller screens */
    margin-top: 30px;
}

/* Cancel Button */
.cancel-btnoneloca {
    display: inline-flex; /* Ensure button resizes to fit content */
    align-items: center;
    gap: 8px;
    padding:20px 56px;
    border-radius: 15px;
   color: #000000;
   border: none;
    cursor: pointer;
    margin-left: 30px;
    margin-bottom: 20px;
    margin-top: 15px;
    background-color: rgba(229, 229, 229, 1);
    font-size: 20px;
    font-weight: 600;
    white-space: nowrap; /* Prevent text from wrapping */
    text-align: center;
}
/* Add Button */
.adddetail-btnoneloca {
    display: inline-flex; /* Ensure button resizes to fit content */
    align-items: center;
    gap: 8px;
    padding: 20px 26px;
    border-radius: 15px;
   color: #000000;
   border: none;
    cursor: pointer;
    margin-left: 30px;
    margin-bottom: 20px;
    margin-top: 15px;
    background-color: #85B7CC;
    font-size: 20px;
    font-weight: 600;
    white-space: nowrap; /* Prevent text from wrapping */
    text-align: center;
}
/* Add Button */
.add-btnoneloca {
    display: inline-flex; /* Ensure button resizes to fit content */
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border-radius: 15px;
   color: #000000;
   border: none;
    cursor: pointer;
    margin-left: 30px;
    margin-bottom: 20px;
    margin-top: 15px;
    background-color: #85B7CC;
    font-size: 20px;
    font-weight: 600;
    white-space: nowrap; /* Prevent text from wrapping */
    text-align: center;
}

.add-btnoneloca img {
    width: 25px; /* Adjust size as needed */
    height: 25px;
    display: inline-block;
    pointer-events: none; /* Prevent image from interfering with button click */
}
/* ---------------------------------Details css------------------------------------------------------------------------- */




.cards-containerdetailpackage {
    display: flex;
    justify-content: space-around;
    margin-top: 60px;
    gap: 15px;
}

.carddetailpackage {
    width: 500px;
    min-height: 271px;
    background: #D3EEFF;
    padding: 20px;
    border-radius: 24px;
    text-align: center;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end; /* Ensures content fills the card properly */
}

.icondetailpackage {
    width: 63px;
    height: 63px;
    position: absolute;
    top: -25px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
   
}

.contentdetailpackage {
    flex-grow: 1; /* Makes the content fill the available space */
    background: white;
    padding: 20px; /* Adds padding on all sides */
    border-radius: 8px;
    display: flex;
    flex-direction: column;
   
}
.titleofcarddetail{
font-weight: 700;
font-size: 20px;
color: black;
outline: none; /* Removes default browser outline */
    cursor: text; /* Shows text cursor */
}
.textofcarddetail{
    font-weight: 500;
    font-size: 15px;
    color: gray;
    outline: none; /* Removes default browser outline */
    cursor: text; /* Shows text cursor */
}









/* ---------------------------------------------------Multiple Location css ------------------------------------------------------------------------------------ */



.package-multilocation {
    background: rgba(255, 255, 255, 1);
    padding: 20px;
    border-radius: 24.4px;
    box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.25);
    margin-bottom: 20px;
    width: 90%;
    margin-left: auto;
    margin-right: auto;
  }

  .title-multilocation {
    text-align: center;
    font-weight: bold;
    color: gray;
    font-size: 23px;
    margin-bottom: 0px;
  }

  .row-multilocation {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    flex-wrap: nowrap; /* Optional: Set to wrap if you want it responsive */
    gap: 20px;
  }

.hotelallmultilocation{
    flex: 2;
    display: flex;
    margin-top: 20px;
    gap: 5px;
    width: 100%;
}

.hotel-card-multilocation {
    width: 100%;
  
    background: rgba(255, 255, 255, 1);
    padding: 7px;
    margin: 10px;
    border-radius: 16.27px;
    box-shadow: 0px 0px 24.4px 0px rgba(0, 0, 0, 0.25);
  
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* or use 'gap' below */
    gap: 5px; /* Space between inner rows */
  }
  

  .hotel-card-multilocation h4 {
    font-size: 14px;
    font-weight: 500;
    color: gray;
    line-height: 100%;
    margin: 0 0 4px 0;
  }

  .dropdown-icon-multilocation {
    float: right;
  }

  .stars-multilocation img{
    width: 16.55px;
    height: 15.72px;
    padding-left: 5px;
    color: #ccc;
  }

  .hotel-info-multilocation {
    font-size: 14px;
    font-weight: 400;
  
    color: #666;
  }
   .hotel-info-multilocation  img{
    width: 17px;
    height: 17px;
    padding-right: 7px;

  }
  .hotel-info-multilocation  a{
    font-size: 14px;
    font-weight: 400;

    color: #666;

  }


  /* --------------------------------------------------------cleint part------------------------------------------------------ */
.package-multilocationcl {
  background: rgba(255, 255, 255, 1);
  padding: 20px;
  border-radius: 24.4px;
  box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.25);
  margin-bottom: 20px;
  width: 90%;
  margin-left: auto;
  margin-right: auto;
  border: 5px solid transparent; /* Default border */
  cursor: pointer;
  transition: border 0.3s ease;
}
 .title-multilocationcl {
  text-align: center;
  font-weight: 500; /* Medium weight for Lato */
  color: black;
  font-size: 28px;
  margin-bottom: 0px;
  font-family: 'Lato', sans-serif;
}

.package-multilocationcl.selected {
  border: 5px solid #85B7CC;
}
.hotelallclientacc {
  flex: 2;
  display: flex;
  margin-top: 20px;
  gap: 5px;
  width: 100%;
}

.hotelcardclientacc {
  width: 100%;
  background: rgba(255, 255, 255, 1);
  padding: 7px;
  margin: 10px;
  border-radius: 16.27px;
  box-shadow: 0px 0px 24.4px 0px rgba(0, 0, 0, 0.25);
    justify-content: space-between; /* or use 'gap' below */

  display: flex;
  text-align: center;
  flex-direction: column;
  gap: 5px;
}

.hotelcardclientacc h4 {
  font-size: 22px;
  font-weight: 600;
  color: black;
  line-height: 100%;
  margin: 0 0 4px 0;
}

.hotelinfoclientacc {
  font-size: 20px;
  font-weight: 500;
  color: #55ACEE;
  display: flex;
  align-items: center;
}

.hotelinfoclientaccse {
  font-size: 18px;
  font-weight: 400;
  color: gray;
  display: flex;
  align-items: center;
}

.hotelinfoclientacc img {
  width: 24px;
  height: 23px;
  padding-right: 7px;
}

.hotelinfoclientacc a {
  font-size: 18px;
  font-weight: 400;
  text-decoration: underline;
  color: #0000FF;
}

.starsclientacc {
  display: flex;
  align-items: center;
}

.starsclientacc img {
  width: 22px;
  height: 19px;
  padding-left: 5px;
}
.starsclientaccono {
  display: flex;
    justify-content: center; /* Center horizontally */
  align-items: center;
    border-bottom: 3px dotted #85B7CC;
}

.starsclientaccono img {
  width: 22px;
  height: 19px;
  padding-left: 5px;
}


.price-section-clientacc {

  display: flex;
  justify-content: space-between;
  gap: 20px;
  width: 100%;
  flex-wrap: nowrap; /* prevent wrapping */
}

.top-message-clientacc {
  width: 100%;
  text-align: center;
  font-size: 16px;
  font-weight: 500;
  color: #000000;
  margin-bottom: 20px;
}

.price-column-clientacc {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: calc((100% - 40px) / 3); /* 3 columns with 2 gaps of 20px */
  gap: 10px;
}

.price-container-clientacc {
  width: 35%;
  display: flex;
  flex-direction: column; /* stack the message above the row */
  align-items: center; /* optional: center horizontally */
}


.price-card-clientacc {
  border: 2px solid rgba(133, 183, 204, 1);
  box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.25);
  width: 100%;
  border-radius: 20px;
  text-align: center;
  padding-top: 10px;
   padding-bottom: 10px;
}

.price-card-clientacc h4 {
  font-size: 20px;
  font-weight: bold;
  margin: 5px 0;
}

.pricemultilocationtext-clientacc {
  font-size: 20px;
  font-weight: bold;
  margin: 5px 0;
  color: gray;
}

.price-card-clientacc p {
  font-size: 16px;
  font-weight: 400;
}

.counter-controls-clientacc {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.icon-btn-clientacc {
  width: 24px;
  height: 24px;
  cursor: pointer;
   pointer-events: auto;
}

.number-clientacc {
  font-size: 18px;
  font-weight: bold;
  color: #333;
}

.icon-label-clientacc {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 18px;
  font-weight: 400;
  text-align: center;
  height: 30px;
}

.icon-clientacc {
  display: inline-block;
  padding-right: 8px;
}

.adpa-clientacc {
  width: 28.5px;
  height: 17.8px;
}

.chpa-clientacc {
  width: 31.2px;
  height: 23px;
}

.inpa-clientacc {
  width: 30px;
  height: 23.6px;
}


    /* --------------------------------------------------------cleint part------------------------------------------------------ */

  .plus-icon-multilocation {
    text-align: right;
    font-size: 20px;
    color: #409ac1;
    cursor: pointer;
  }

  .price-section-multilocation {
    flex: 1;
    display: flex;
    justify-content: space-between;
    gap: 20px;
    width: 100%;
   
    margin-top: 0px;
    padding-top: 0px;
  }
  
  .price-column-multilocation {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    justify-content: flex-start; /* Ensures everything starts from the top */
  }
  .icon-label-multilocation {
    display: flex;
    justify-content: center;
    align-items: center; /* Vertically center image and text */
    font-size: 18px;
    font-weight: 400;
    text-align: center;
    margin-bottom: 6px;
    height: 30px;
  }
  
  .icon-multilocation {
    display: inline-block;
    padding-right: 8px;
  }
  
  
  
  /* Optional: individual icon sizes */
  .adpa {
    width: 18.5px;
    height: 17.8px;
  }
  
  .chpa {
    width: 20.2px;
    height: 27px;
  }
  
  .inpa {
    width: 27px;
    height: 19.6px;
  }
  
  .price-card-multilocation {
    border: 2px solid rgba(133, 183, 204, 1);
    box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.25);


    width: 100%;
    border-radius: 20px;
    text-align: center;
  }
  
  .price-card-multilocation h4 {
    font-size: 20px;
    font-weight: bold;
    margin: 5px 0;
  }
  .pricemultilocationtext{
    font-size: 20px;
    font-weight: bold;
    margin: 5px 0;
    color: gray;
  }
  
  .price-card-multilocation p {
    font-size: 16px;

    font-weight: 400;
  }
  
  .add-button-multilocation {
    background: rgba(133, 183, 204, 1);
    border: none;
    padding: 10px 20px;
    border-radius: 16.25px;
    color: black;
    font-size: 20px;
    font-weight: 600;
    margin: 20px auto;
    display: flex; /* Flex container */
    align-items: center; /* Vertical alignment */
    gap: 10px; /* Space between icon and text */
    cursor: pointer;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
  }
  
  .addmultilocationimg {
    width: 25px;
    height: 25px;
  }
  










  /* --------------------------papapa-------------------------------------- */

.containerpapapa {
    display: flex;
    margin-left: 25px;
    gap: 40px;
  }
  
  .formpapapa {
    background: white;
    padding: 20px;
    border-radius: 25px;
    box-shadow: 0px 0px 25.13px 0px rgba(133, 183, 204, 0.7);

    width: 345px;
    min-height: 360px;
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  .point-containerpapapa{
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
  
  }
  .inputpapapapa {
    padding: 10px;
    border: 1px solid rgba(133, 183, 204, 1);
    border-radius: 11.6px;

  }
  .inputpapapa {
    padding-top: 10px;
    padding-bottom: 10px;
    border: 1px solid rgba(133, 183, 204, 1);
    border-radius: 11.6px;
    width: 100%;

  }
  .buttonpapapa {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border-radius: 15px;
    color: #000000;
    border: none;
    cursor: pointer;
    margin-left: 30px;
    margin-bottom: 20px;
    margin-top: 15px;
    background-color: #85B7CC;
    font-size: 20px;
    font-weight: 600;
    white-space: nowrap;
    text-align: center;
    width: auto; /* Ensure it only takes the necessary width */
    max-width: fit-content; /* Optional for modern browsers */
  }
  
.buttonpapapa img {
  width: 25px; /* Adjust size as needed */
  height: 25px;
  display: inline-block;
  pointer-events: none; /* Prevent image from interfering with button click */
}
.bottom-rowpapapa {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    margin-top: auto; /* Pushes this div to the bottom of the container */
  }
  .save-buttonpapapa {
    padding: 10px 15px;
    background-color: rgba(133, 183, 204, 1);
    border: none;
    color: white;
    font-weight: 700;
    border-radius: 10px;
    cursor: pointer;
  }
  
  .cardpapapa {
    background: white;
    padding: 20px;
    border-radius: 20px;
    box-shadow: 0 0 20px rgba(0,0,0,0.1);
    width: 300px;
  }
  
  .titlepapapa {
    color: #49a5e6;
    font-size: 22px;
    font-weight: bold;
    margin-bottom: 10px;
  }
  
  .listpapapa {
    padding-left: 20px;
    margin-bottom: 15px;
  }
  
  .price-buttonpapapa {
    background-color: #49a5e6;
    color: white;
    padding: 10px 20px;
    border-radius: 10px;
    font-weight: bold;
    border: none;
    margin-right: 10px;
  }
  
  .edit-buttonpapapa {
    background-color: #a5d1dd;
    border: none;
    border-radius: 10px;
    padding: 10px 20px;
  }
  /* Cards side by side */
.card-containerpapapa {
    display: flex;
    flex-wrap: wrap;
    margin-top: 20px;
    margin-left: 25px;

    gap: 20px;
  }
  
  /* Remove border from saved points (new span) */
  .point-textpapapa {
    display: block;
    color: #333;
    padding: 5px 0;
  }
  
  /* Optional: override borders from disabled inputs if still used */
  .cardpapapa input[disabled] {
    border: none;
    background: transparent;
    color: #333;
    font-weight: normal;
    padding: 0;
  }
  .titlepapapa {
    color: #49a5e6; /* blue color */
  }







/* -------------------------------detail package client ---------------------------------- */
.flight-schedule-wrapper {
  width: 100%;
padding-bottom: 20px;
  margin: 0 0; /* This centers it horizontally */
  margin-top: 40px; /* mt-10 equivalent */
  box-shadow: 0px 0px 20px 0px #85B7CCB2;
  border-radius: 30px;
  background-color: white;
 
  padding-top: 20px;
}

.flight-title {
  color: #55ACEE;
  font-family: Arial, sans-serif;
  font-weight: 700;
  font-size: 32px;
  line-height: 100%;
  letter-spacing: 0%;
  text-align: center;
  margin-bottom: 24px;
}

/* .flight-card {
  border: 2px solid #85B7CC;
  border-radius: 1rem;
  padding: 12px;
  width: 370px;
  background-color: white;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
  position: relative;
} */

/* Dotted line between flight cards */
.dotted-separator {
  border-left: 1px dotted #85B7CC;
  height: auto;
  width: 0px;
  margin: 0 0px;
}

/* Dotted semi-circle around the icon */
.semi-circle-wrapper {
  position: relative;
  width: fit-content;
  margin: 0 auto;
}

.semi-circle-wrapper::before {
  content: "";
  position: absolute;
  top: -12px;
  left: -15px;
  width: 60px;
  height: 40px;
  border-top: 2px dotted #000000;
  border-left: 2px dotted #000000;
  border-right: 2px dotted #000000;
  border-bottom: none;
  border-top-left-radius: 40px;
  border-top-right-radius: 40px;
  z-index: 0;
}

.semi-circle-wrapper img {
  position: relative;
  width: 30px;
  height: 30px;
  z-index: 1;
}



.titleofcarddetailth{
font-weight: 700;
font-size: 18px;
margin-top: 30px;
color: black;
outline: none; /* Removes default browser outline */
    cursor: text; /* Shows text cursor */
}

.titleofcarddetailtht{
font-weight: 700;
font-size: 24px;
margin-bottom: 20px;
color: black;
outline: none; /* Removes default browser outline */
    cursor: text; /* Shows text cursor */
}
.textofcarddetailter {
  font-weight: 500;
  font-size: 18px;
  line-height: 1.1; /* You can reduce this value to decrease space */
  color: black;
  outline: none;
  cursor: text;
}

.terms-checkbox-wrapper {
  text-align: center;
  margin-top: 20px;
}

.custom-checkbox {
  position: relative;
  padding-left: 30px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 400;
  color: gray;
  display: inline-block;
  user-select: none;
}

/* Hide the default checkbox */
.checkbox-input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}

/* Custom checkbox style */
.checkbox-box {
  position: absolute;
  left: 0;
  top: 2px;
  height: 20px;
  width: 20px;
  background-color: white;
  border: 2px solid #85B7CC;
  border-radius: 4px;
  box-sizing: border-box;
}

.checkbox-box::after {
  content: "";
  position: absolute;
  display: none;
  left: 5px;
  top: 1px;
  width: 6px;
  height: 12px;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* Show the checkmark when checked */
.checkbox-input:checked + .checkbox-box::after {
  display: block;
}

/* Checked style */
.checkbox-input:checked + .checkbox-box {
  background-color: #85B7CC;
}
.textofcarddetailpay{
    font-weight: 500;
    font-size: 18px;
    text-decoration: dotted;
    color: black;
    outline: none; /* Removes default browser outline */
    cursor: text; /* Shows text cursor */
}



.carddetailpackageclio {
    width: 600px;
    /* Remove fixed height */
    min-height: 271px; /* Optional: keeps it at least 271px tall */
    background: #D3EEFF;
    padding: 20px;
    border-radius: 24px;
    text-align: center;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end; /* You can adjust this if needed */
}

.totalpayxlipack {
  font-size: 30px;
  font-weight: 400;
  color: #000000;
}

.amountpayxlipack {
  color: #FF8682;
  font-weight: 700;
}
  /*----------------------------------------------- package client ------------------------------------- */

.card-containerpapapacli {
  display: flex;
  flex-wrap: wrap;
  margin-top: 20px;
  margin-left: 25px;
  margin-bottom: 30px;
  gap: 20px;
}

.cardpapapacli {
  background: white;
  padding: 20px;
  border-radius: 20px;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
  width: 400px;
  height: 430px;
  cursor: pointer;
  position: relative;
  display: flex;
  flex-direction: column;
}

.cardpapapacli.selected {
  border: 5px solid #85B7CC;
}

.listpapapacli {
  padding-left: 20px;
  margin-bottom: 5px;
}

.listpapapacli li {
  font-family: Roboto, sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 100%;
  letter-spacing: 0%;
  margin-bottom: 0px;
  list-style-type: disc;
  color: #333;
  white-space: normal;        /* Allow text to wrap */
  word-break: break-word;     /* Break long words */
}

.listpapapacli li input {
  font-family: Roboto, sans-serif;
  font-weight: 400;
  font-size: 18px;
  line-height: 100%;
  letter-spacing: 0%;
  background: transparent;
  border: none;
  white-space: normal;        /* Allow input text to wrap */
  word-break: break-word;     /* Break long words */
}

.price-button-container {
  position: absolute;
  bottom: 20px;
  left: 20px;
}

.price-buttonpapapacli {
  background-color: rgba(85, 172, 238, 1);
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 10px;
  font-weight: bold;
  font-size: 14px;
}

.title-input {
  font-family: Arial, sans-serif;
  font-weight: 700;
  font-size: 28px;
  line-height: 100%;
  letter-spacing: 0%;
  color: #55ACEE;
  border: none;
  background: transparent;
  margin-bottom: 10px;
  white-space: normal;        /* Allow title to wrap */
  word-break: break-word;     /* Break long words */
}

  /* -------------------------------------------------------package flight ------------------------------------------------------------------------- */







.cards-wrapper-flightcardpa1 {
  display: flex;
  gap: 20px; /* Optional spacing between the two cards */
}



  .card-flightcardpa1 {
    border: 1px solid rgba(133, 183, 204, 1);
    border-radius: 20px;
    padding: 20px;
    margin-left: 25px;
    max-width: 500px;
    font-family: Arial, sans-serif;
    box-shadow: 0 0 4px rgba(0,0,0,0.1);
  }
  
  .title-flightcardpa1 {
    font-size: 20px;
    font-weight: 700;
    margin-left: 30px;
    margin-bottom: 15px;
  }
  
  .top-section-flightcardpa1 {
    display: flex;
    gap: 20px;
    margin-bottom: 20px;
    flex-wrap: wrap;
    align-items: stretch; /* makes both children the same height */
  }
  
  .upload-flightcardpa1 {
    width: 200px;
  }
  
 
.dashed-box-flightcardpa1 {
    border: 2px dashed #85B7CC;
    padding: 10px;
    text-align: center;
    border-radius: 10px;
    font-size: 12px;
   
    display: flex;
    flex-direction: column;
    justify-content: center; /* center content vertically */
  }
  .upload-icon-flightcardpa1 {
   
    margin-bottom: 5px;
  }

  .upload-icon-flightcardpa1 img{
    width:28px;
    height: 28px;
  }
  .dr123{
    font-size: 11.75px;
    font-weight: 400;
  }
  .upload-btn-flightcardpa1 {
    background-color: rgba(133, 183, 204, 1);
    border: none;
    color: white;
    padding: 5px 10px;
    border-radius: 6.74px;
    font-size: 11.75px;
    font-weight: 700;
    cursor: pointer;
  }
  
  .form-flightcardpa1 {
    flex: 1;
    min-width: 250px;
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* space out inputs */
  }
  .input-group-flightcardpa1 {
    display: flex;
    flex-direction: column;
    margin-bottom: 10px;
  }
  
  .input-group-flightcardpa1 label {
    font-size: 18px;
    font-weight: 400;
    color: gray;
    margin-bottom: 2px;
  }
  
  .input-flightcardpa1 {
    border: none;
    border-bottom: 1.5px solid rgba(133, 183, 204, 1);
    outline: none;
    padding: 4px;
    font-size: 14px;
  }
  
  .dropdown-icon-flightcardpa1 {
    float: right;
    font-size: 12px;
    color: #85B7CC;
  }
  
  .row-flightcardpa1 {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
  }
  
  .col-flightcardpa1 {
    flex: 1;
    min-width: 100px;
  }
  
.ttf{
    font-weight: 400;
    font-size: 16px;
    color: #000000;
    margin-bottom: 10px;
}



    /* -------------------------------------------------------package flight ------------------------------------------------------------------------- */


.navfirst{
  margin-left: 50px;
  margin-bottom: 20px;
  font-weight: 600;
  padding-left: 25px;
  font-size: 30px;
  color: #000000;
  font-family: 'Roboto', Arial, sans-serif;
}

























.flights-list-fldepo {
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
  width: 100%;
}

.flight-card-fldepo {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 0 10px rgba(0,0,0,0.08);
  border: 1px solid #e5e7eb;
  transition: width 0.4s cubic-bezier(.4,0,.2,1), order 0.4s, border 0.2s;
  display: flex;
  width: 48%;
  padding: 24px;
  min-width: 340px;
  margin-bottom: 32px;
  position: relative;
  order: 1;
}

.flight-card-open-fldepo {
  width: 100% !important;
  order: 0;
  z-index: 2;
}

.flight-card-selected-fldepo {
  border: 5px solid #85B7CC !important;
}

@media (max-width: 900px) {
  .flight-card-fldepo,
  .flight-card-open-fldepo {
    width: 100% !important;
    min-width: 0;
  }
}

    /* -----------------------------------------------------------------------description hotel --------------------------------------------- */


      #totalPay .label {
  font-family: Arial;
  font-weight: 400;
  font-size: 25px;
 
  color: rgba(0, 0, 0, 1);
}

#totalPay .amount {
  font-family: Arial;
  font-weight: 600;
  font-size: 25px;


  color: rgba(255, 134, 130, 1);
}
.gradient-border {
  position: relative;
  background: linear-gradient(0deg,  rgba(0,0,0,0), rgba(1,1,1,0), rgba(4,4,4,1), rgba(0,0,0,0), rgba(0,0,0,0));
  padding-top: 0px; /* Adjust padding to control border thickness */
  padding-bottom: 0px;
  padding-left: 2px;
  padding-right:2px;
  border-radius: 0px; /* Adjust border-radius to match the inner element */
}

.gradient-border::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: inherit;
  border-radius: inherit;
  z-index: -1;
}
.summary-dropprice {
  position: absolute;
  right: 0rem;
  margin-top: 0.5rem;
  width: 270px;
  background-color: white;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  border-radius: 1rem;
  border: 2px solid rgba(133, 183, 204, 1);
  padding: 1rem;
  font-family: Arial, sans-serif;
  font-size: 14px;
  color: #2f2f2f;
  z-index: 50;
}

.summary-title-dropprice {
  font-weight: bold;
  text-align: center;
  color: #4a5568;
  margin-bottom: 0.5rem;
}

.section-dropprice {
  margin-bottom: 0.5rem;
  margin-left: 0.5rem;
  width: 100%;
}

.line-dropprice {
  font-weight: bold;
  color: #4a5568;
}

.subline-dropprice {
  margin: 0.5rem;
}

.indented-dropprice {
  padding-left: 1rem;
}

.right-dropprice {
  float: right;
  font-weight: 500;
  color: black;
}

/* Add to your CSS file or in a <style> block */
.hotel-modal-clientacc {
  position: fixed;
  z-index: 9999;
  left: 0; top: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0,0,0,0.45);
  display: flex;
  align-items: center;
  justify-content: center;
}
.hotel-modal-content-clientacc {
  background: #fff;
  border-radius: 0;
  width: 100vw;
  height: 100vh;
  max-width: 100vw;
  max-height: 100vh;
  overflow: hidden;
  position: relative;
  padding: 0;
  box-shadow: none;
}
.hotel-modal-close-clientacc {
  position: absolute;
  top: 16px;
  right: 16px;
  background: none;
  border: none;
  cursor: pointer;
  z-index: 2;
}
#hotelDescModalIframe {
  width: 100vw;
  height: 100vh;
  border: none;
  display: block;
} 

/* deschotel.css */
body.body-deschotel {
  font-family: 'Roboto', Arial, sans-serif;
  background: #F7FAFC;
  margin: 0;
  color: #222;
}

.header-deschotel {
  background: #E6F2F8;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 32px;
  border-bottom: 1px solid #dbeafe;
}

.logo-deschotel {
  font-size: 2rem;
  font-weight: 700;
  color: #3A7CA5;
  letter-spacing: 2px;
}

.header-right-deschotel {
  display: flex;
  align-items: center;
  gap: 24px;
}

.notif-deschotel img {
  width: 28px;
  height: 28px;
}

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

.avatar-deschotel {
  width: 36px;
  height: 36px;
  border-radius: 50%;
}

.username-deschotel {
  font-weight: 500;
  color: #222;
}

.account-deschotel {
  color: #888;
  font-size: 0.95em;
}

.main-deschotel {
  max-width: 1200px;
  margin: 32px auto 0 auto;
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 2px 12px 0 #e0e7ef;
  padding: 32px 32px 32px 32px;
}

.toprow-deschotel {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 32px;
  margin-bottom: 20px;
}

.hotelinfo-deschotel {
  flex: 2;
}

.hotel-title-deschotel {
  display: flex;
  align-items: center;
  font-size: 32px;
  font-weight: 600;
  color: #112211;
  gap: 10px;
  font-family: 'Roboto', sans-serif;
  margin-bottom: 8px;
}

.hotel-title-deschotel .icon-deschotel {
  width: 39px;
  height: 39px;
}

.hotel-address-deschotel {
  display: flex;
  align-items: center; /* vertically center the text with the image */
  color: #6B7280;
   font-weight: 600;
   font-family: 'Roboto', sans-serif;
  font-size: 28px;
  margin-bottom: 18px;
}
.icon-loa {
  width: 20px; /* adjust as needed */
  height: 26px;
  margin-right: 10px;
}

.icon-deschotel {
  width: 20px; /* adjust as needed */
  height: 26px;
  margin-right: 10px;
}

.icon-true {
  width: 15.3px; /* adjust as needed */
  height: 10.4px;
  margin-right: 10px;
}


.hotel-detailsrow-deschotel {
  display: flex;
  gap: 32px;
  margin-bottom: 8px;
}

.hotel-detailitem-deschotel {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 30px;
   font-family: 'Roboto', sans-serif;
  font-weight: 400;
  color: #222;
}

.hotel-detailitem-deschotel .icon-deschotel {
  width: 28px;
  height: 28px;
}

.text-wrapper-deschotel {
  display: flex;
  flex-direction: column;
}

.hotel-detailitem-deschotel .sub-deschotel {
  color: #888;
  font-size: 26px;
  margin-left: 0; /* Remove margin-left since it's in a column */
}
.hotel-detailitem-deschotel .icon-bed{
   width: 50px;
  height: 40px;
}

.hotel-detailitem-deschotel .icon-me{
   width: 50px;
  height: 36px;
}
.hotel-ratingmap-deschotel {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
}

.starsreviews-deschotel {
  display: flex;
  flex-direction: column;
  align-items: center; /* this centers both stars and text */
}

.stars-deschotel {
  display: flex;
  align-items: center;
}

.stars-deschotel img {
  width: 39.4px;
  height: 37px;
  margin-right: 10px;
}

.reviews-count-deschotel {
  color: gray;
  font-size: 24px;
  font-family: 'Roboto', sans-serif;
  font-weight: 400;
  text-align: center;
  margin-top: 4px;
}


.mapbox-deschotel {
  position: relative;
 margin-top: 20px;
  width: 350px;
  height: 250px;
  border: 2px solid #85B7CC;
  border-radius: 12px;
  overflow: hidden;
}

.mapiframe-deschotel {
  width: 100%;
  height: 100%;
  border: none;
}

.map-overlay-deschotel {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  background: rgba(255, 255, 255, 0.0); /* transparent overlay */
  pointer-events: none; /* so map stays clickable unless you want to disable it */
}

.mapimg-deschotel {
  width: 45px;
  height: 61px;
  border-radius: 8px;
  object-fit: cover;
  margin-bottom: 10px;
  pointer-events: auto;
}

.showmap-deschotel {
  background: #85B7CC;
  color: #000000;
  border: none;
  border-radius: 10px;
  font-family: 'Roboto', sans-serif;
  padding: 6px 18px;
  font-size: 18px;
  cursor: pointer;
  pointer-events: auto;
}

.descblock-deschotel {
  margin-top: 32px;
  
  border-radius: 12px;

}

.desc-title-deschotel {
  font-size: 30px;
  font-weight: 600;
  color: #85B7CC;
  margin-bottom: 18px;
   font-family: 'Roboto', sans-serif;
}

.desc-section-deschotel {
 
}

.desc-sectiontitle-deschotel {
   font-size: 30px;
  font-weight: 600;
  color: #85B7CC;
  margin-bottom: 18px;
   font-family: 'Roboto', sans-serif;
  display: flex;
  align-items: center;
  gap: 8px;
}

.arrow-deschotel {
  font-size: 1.1em;
  color: #3A7CA5;
}

.desc-sectioncontent-deschotel {
  color: #222;
  font-size: 1.05rem;
}

.desc-location-deschotel {
  display: flex;
  align-items: center;
  gap: 8px;

  margin-top: 10px;
  margin-bottom: 4px;
}

.desc-locationicon-deschotel {
  font-size: 1.2em;
}

.desc-locationtitle-deschotel {
  font-size: 30px;
  font-weight: 600;
  color: #85B7CC;
  margin-bottom: 8px;
   font-family: 'Roboto', sans-serif;
}

.desc-locationtext-deschotel {
  color: #222;
  font-size: 20px;
  font-weight: 400;
    font-family: 'Roboto', sans-serif;
  margin-bottom: 12px;
  margin-left: 18px;
}

.desc-sectiontitle2-deschotel {
  font-weight: 600;
  color: #3A7CA5;
  margin-top: 12px;
  margin-bottom: 4px;
}

.amenitiesblock-deschotel {
  margin-top: 32px;

  border-radius: 12px;

}

.amenities-title-deschotel {
  font-size: 30px;
  font-weight: 600;
  color: #85B7CC;
  margin-bottom: 18px;
   font-family: 'Roboto', sans-serif;
}

.amenities-grid-deschotel {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  font-size: 0.98rem;
}

.amenitycat-deschotel {
  display: flex;
  align-items: center;
  font-weight: 500;
  font-size: 23px;
  font-family: 'Roboto', sans-serif;
  color: #85B7CC;
  margin-bottom: 6px;
  margin-top: 10px;
  gap: 8px;
}


.amenities-grid-deschotel ul {
  list-style: none;
  padding: 0;
  margin: 0 0 10px 0;
}

.amenities-grid-deschotel li {
  display: flex;
  align-items: center; /* vertically center the image and text */
  gap: 6px; /* space between image and text */
  margin-bottom: 4px;
    font-family: 'Roboto', sans-serif;
  color: #000000;
  font-weight: 400;
  font-size: 15px;
}
.reviewsblock-deschotel {
  margin-top: 32px;

  border-radius: 12px;
 
}

.reviews-title-deschotel {
   font-size: 30px;
  font-weight: 600;
  color: #85B7CC;
  margin-bottom: 18px;
   font-family: 'Roboto', sans-serif;
}



.addreview-deschotel {
  background: #fff;
  border: 2px solid #85B7CC;
  border-radius: 20px;
  padding: 18px;
  box-shadow: 0 1px 4px #e0e7ef;
  margin-bottom: 18px;
  width: 100%;
}

.addreview-header-deschotel {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.addreview-title-deschotel {
  font-size: 20px;
  color: #000000;
  font-weight: 600;
  margin: 0;
}
.addreview-headerstars-deschotel {
  display: flex;               /* Align images in a row */
  align-items: center;         /* Vertically center them */
  gap: 4px;                    /* Optional spacing between stars */
}

.addreview-headerstars-deschotel img {
  width: 24px;
  height: 24px;
  margin-left: 4px;
}

.addreview-divider-deschotel {
  height: 1px;
  background-color: #85B7CC;
  margin: 10px 0;
}

.addreview-label-deschotel {
  display: block;
  font-size: 1rem;
  color: #444;
  margin-bottom: 6px;
  margin-top: 8px;
}

.addreview-input-deschotel {
  width: 100%;
  min-height: 80px;
  border: none;
  border-radius: 10px;
  background: #F7FAFC;
  padding: 10px;
  font-size: 1.05rem;
  resize: vertical;
  margin-bottom: 14px;
}

.addreview-footer-deschotel {
  display: flex;
  justify-content: flex-end;
}

.addreview-post-deschotel {
  background: #D3EEFF;
  color: #000;
  border: none;
  border-radius: 10px;
  padding: 8px 20px;
  font-size: 1rem;
  cursor: pointer;
}



.reviewitem-deschotel {
  background: #fff;
  border-radius: 20px;
  border: 2px solid #85B7CC;
  padding: 14px 18px 10px 18px;
  box-shadow: 0 1px 4px #e0e7ef;
  margin-bottom: 16px;
}

.reviewtop-deschotel {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 10px;
}

.reviewuserinfo-deschotel {
  display: flex;
  flex-direction: column;
}

.reviewuser-deschotel {
  font-weight: 600;
  color: #000000;
  font-size: 20px;
}

.reviewdate-deschotel {
  color: #888;
  font-size: 18px;
  margin-top: 2px;
  font-family: 'Roboto', sans-serif;
}

.reviewstars-deschotel {
  display: inline-flex;
  align-items: center;
}

.reviewstars-deschotel img {
  width: 25.8px;
  height: 24.5px;
  margin-right: 1px;
}

.reviewdivider-deschotel {
  height: 1px;
  background-color: #85B7CC;
  margin: 0 -18px 10px -18px; /* extend line to edges of parent box */
}

.reviewtext-deschotel {
  color: #222;
  font-family: 'Roboto', sans-serif;
  font-size: 20px;
  line-height: 1.5;
}





        /* -----------------------------------------------------------------------description hotel --------------------------------------------- */
















        /* ------------------------one location hotel client pqrt --------------------------------------------------- */



.containeronelocationcli {
    display: flex;
    padding-left: 30px;
   
    flex-direction: column;
    align-items: center; /* Centers the city box */
   
    max-width: 100%; /* Prevents it from exceeding screen width */
 

}

.city-boxonelocationcli {
    padding: 10px;
    display: flex;
    flex-direction: column;
    margin-bottom: 30px;
    align-items: center;
    box-shadow: 0px 0px 20px 0px #00000040;
    border-radius: 24px;
    background-color: white;

    width: 90%; /* Prevents it from exceeding the screen */
}
.hotels-containeronelocationcli {
    display: flex;
    gap: 80px;
    flex-wrap: wrap; /* Ensures cards wrap instead of shrinking */
    justify-content: flex-start;
    width: 100%;
}

.hotel-cardonelocationcli {
    box-shadow: 0px 0px 24.4px 0px #00000040;
    border-radius: 16px;
    background-color: white;
    padding-bottom: 15px;
    gap: 10px;
    display: flex;
    min-width: 470px; /* Ensure minimum width */
    max-width: 470px; /* Prevent shrinking */
    width: 470px; /* Ensure fixed width */
}
.city-titleonelocationcli {
    text-align: center;
    font-size: 34px;
    color: #000000;
    font-weight: bold;
    margin-bottom: 10px;
    padding-top: 0px;
    margin-top: 0px;
}

/* Left Column */
.hotel-infoonelocationcli {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 100%; /* Takes half of the card width */
}

/* Right Column */
/* .hotel-extraonelocation {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 100%; 
  
} */

/* Header */
.hotel-headeronelocationcli {
    font-size: 17px;
    font-weight: 600;
    color: black;
    text-align: center;
   border-top-left-radius: 16px;
border-top-right-radius: 16px;
background-color: #85B7CC;
    border-bottom: 4px dotted gray; /* dotted bottom border */
    padding-bottom: 6px;               /* optional spacing */
}

/* .imarac{
    padding-left: 5px;
    width: 14.39px;
    height: 7.79px;
} */

/* Stars */
.hotel-starsonelocationcli {
    display: flex;
    justify-content: center;  /* <-- center horizontally */
    align-items: center;      /* <-- optional: center vertically if needed */
    margin-top: 8px;
    font-size: 14px;
}

.hotel-starsonelocationclipri {
    display: flex;
    justify-content: left;  /* <-- center horizontally */
    align-items: left;      /* <-- optional: center vertically if needed */
    margin-top: 8px;
    font-size: 14px;
    padding-left: 15px;
        padding-right: 15px;
}

.hotel-starsonelocationcli img{
    width: 20.7px;
    padding-left: 3px;
    height: 19.7px;
}
.room-typeonelocationcli{
    font-size: 14px;
    font-weight: 400;

    color: #666;
    margin-top: 12px;
    white-space: nowrap; /* Prevents text from wrapping */
    overflow-x: auto; /* Enables horizontal scrolling */
    display: block; /* Ensures proper scrolling behavior */
    padding: 2px; /* Optional: Better appearance */
}


.room-typeonelocationcli a{
    font-size: 18px;
    font-weight: 400;
    text-decoration: underline;

    color: #0000FF;

  }
.servicesonelocationcli{
    font-size: 18px;
    font-weight: 400;
    color: gray;
  
    white-space: nowrap; /* Prevents text from wrapping */
    overflow-x: auto; /* Enables horizontal scrolling */
    display: block; /* Ensures proper scrolling behavior */
    padding-left: 15px; /* Optional: Better appearance */
     padding-right: 15px; /* Optional: Better appearance */
}

.pricing-wrapperonelocationsscli {
    display: flex;
    flex-direction: row;
    padding-left: 15px; /* Optional: Better appearance */
     padding-right: 15px; /* Optional: Better appearance */
    width: 100%;
    gap: 20px; /* space between the boxes */
  }
  
/* Pricing */
.pricingonelocationcli {
    display: flex;
    flex-direction: column;
  width: 100%;
    margin-top: 5px;
}

.pricingonelocationcli p {
    color: #55ACEE;
    font-weight: 500;
    font-size: 18px;
    text-decoration: none;
}

.pricingonelocationcli button {
    background: white;
    border: 1px solid #ccc;
    padding: 3px 8px;
    cursor: pointer;
    font-weight: bold;
    font-size: 18px;
    border-radius: 6.5px;
    color: gray;
}





/* Add these styles */
.city-boxonelocationcli.selected {
  border: 4px solid #85B7CC !important;
}
.hotel-cardonelocationcli.selected {
  border: 4px solid #85B7CC !important;
}
.pricingonelocationcli button.selected {
  background: #85B7CC !important;
  color: #fff !important;
  border: 1px solid #85B7CC !important;
}


/* Upload Box */
/* .upload-boxonelocation {
    border: 2px dashed #ccc;
    padding: 5px;
    text-align: center;
    border-radius: 10px;
    
}
.upload-boxonelocation p{
    font-weight: 400;
    font-size: 14px;
    color: gray;
}

.upload-btnonelocation {
    background: #85B7CC;
    border: none;
    color: white;
    border-radius: 5px;
    padding: 5px;
    font-weight: 700;
    font-size: 12px;
    cursor: pointer;
}
.preview-imageonelocation img {
    max-width: 100%; 
    max-height: 100px; 
    margin-top: 10px;
    border-radius: 5px;
} */






.flight-card234{
     width: 100%;
    border: 2.9px solid #85B7CC;
    border-radius: 18px;
    box-shadow: 0px 0px 17.84px 0px #85B7CCB2;
    padding: 10px;
}








/* Add to your main CSS file */
.calendar-popup-pa {
  z-index: 20000 !important;
  position: absolute !important;
  left: 0; top: 0;
  width: 100%;
  min-height: 100px;
  background: white;
  box-shadow: 0 8px 32px rgba(0,0,0,0.18);
}









/* ------------------------popup title ---------------------------------------- */
/* Modal Overlay */
.modal-titmod {
  display: none; position: fixed; z-index: 9999; left: 0; top: 0; width: 100vw; height: 100vh;
  background: rgba(0,0,0,0.5); justify-content: center; align-items: center;
}

/* Modal Content */
.modal-content-titmod {
  background: #fff; border-radius: 14px; max-width: 400px; width: 96vw; padding: 32px 24px 24px 24px;
  position: relative; box-shadow: 0 8px 32px rgba(0,0,0,0.18);
  display: flex; flex-direction: column; gap: 18px;
}

.close-titmod {
  position: absolute; top: 12px; right: 18px; font-size: 32px; cursor: pointer; color: #888;
}

.modal-title-titmod {
  font-size: 22px; font-weight: 700; margin-bottom: 0;
}

.add-title-row-titmod {
  display: flex; gap: 8px; align-items: center;
}

.input-titmod {
  flex: 1; padding: 8px 12px; border-radius: 7px; border: 1px solid #c7d6e6; font-size: 16px;
}

.add-btn-titmod {
  background: #0077ff; color: #fff; border: none; border-radius: 7px; padding: 8px 18px;
  font-size: 16px; font-weight: 600; cursor: pointer; transition: background 0.2s;
}
.add-btn-titmod:hover { background: #005fcc; }

.titles-list-titmod {
  max-height: 180px; overflow-y: auto; margin-top: 8px; display: flex; flex-direction: column; gap: 8px;
}

.title-item-titmod {
  padding: 10px 14px; border: 2px solid #e5eaf0; border-radius: 8px; cursor: pointer;
  background: #fafbfc; font-size: 16px; transition: border-color 0.2s, background 0.2s;
}
.title-item-titmod.selected-titmod {
  border-color: #0077ff; background: #f0f6ff;
}

.confirm-btn-titmod {
  margin-top: 16px; width: 100%; background: #0077ff; color: #fff; border: none; border-radius: 8px;
  padding: 12px 0; font-size: 17px; font-weight: 600; cursor: pointer; transition: background 0.2s;
}
.confirm-btn-titmod:disabled { background: #b5c9e6; cursor: not-allowed; }
.confirm-btn-titmod:not(:disabled):hover { background: #005fcc; }






























.hidden-package-details {
    display: none;
}

.extra-package-details {
  
    padding: 16px;
    margin-top: 12px;
}

.package-grid {
    width: 100%;
    border: 2.9px solid #85B7CC;
    border-radius: 18px;
    box-shadow: 0px 0px 17.84px 0px #85B7CCB2;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: repeat(2, auto);
    gap: 8px 12px;
    padding: 16px;
}

.package-grid div {
    font-family: Arial, sans-serif;
    font-size: 14px;
}







   .flights-container-packbooind {
  display: flex;
  flex-direction: row;
  gap: 12px;
  margin-bottom: 16px;
  align-items: flex-start;
  justify-content: center;
}

.flight-card-packbooind {
  width: 100%;
  display: flex;
  flex-direction: column;
}

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

.flight-logo-packbooind {
  height: 30px;
  width: 30px;
}

.flight-title-packbooind {
  font-size: 22px;
  font-weight: 700;
  color: #000000;
  margin: 0;
}

.flight-body-packbooind {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.flight-info-packbooind {
  text-align: left;
}

.flight-code-packbooind {
  font-size: 20px;
  font-weight: 600;
  color: #000000;
  margin: 0;
}

.flight-city-packbooind {
  font-size: 17px;
  font-weight: 400;
  color: gray;
  margin: 0;
}

.flight-time-packbooind {
  font-size: 18px;
  font-weight: 400;
  color: #000000;
  margin-top: 4px;
}

.flight-duration-packbooind {
  text-align: center;
}

.duration-text-packbooind {
  font-size: 18px;
  font-weight: 700;
  color: #000000;
  margin: 0;
}

/* Dotted Separator */
.dotted-separator-packbooind {
  border-left: 2px dotted #85B7CC;
  height: auto;
  margin: 0 10px;
}

/* Semi-circle wrapper */
.semi-circle-wrapper-packbooind {
  position: relative;
  width: 100%;
  max-width: 60px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.semi-circle-wrapper-packbooind::before {
  content: "";
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 40px;
  border-top: 2px dotted #000000;
  border-left: 2px dotted #000000;
  border-right: 2px dotted #000000;
  border-bottom: none;
  border-top-left-radius: 45px;
  border-top-right-radius: 45px;
  z-index: 0;
}

.semi-circle-wrapper-packbooind img {
  position: relative;
  z-index: 1;
  max-height: 20px;
}



.flights-container-packbooind {
  display: flex;
  flex-direction: row;
  gap: 6px;
  margin-bottom: 16px;
  align-items: flex-start;
  justify-content: center;
}

.flight-card-packbooind {
  display: flex;
  flex-direction: column;
  border: 0.72px solid #85B7CC;
  border-radius: 15px;
  padding: 6px; /* optional, to give some spacing inside the card */
  box-sizing: border-box;
}

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

.flight-logo-packbooind {
  height: 30px;
  width: 30px;
}

.flight-title-packbooind {
  font-size: 22px;
  font-weight: 700;
  color: #000000;
  margin: 0;
}

.flight-body-packbooind {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.flight-info-packbooind {
  text-align: left;
}

.flight-code-packbooind {
  font-size: 22px;
  font-weight: 700;
  padding-bottom: 8px;
  color: #000000;
  margin: 0;
}

.flight-city-packbooind {
  font-size: 19px;
  font-weight: 400;
  color: gray;
  padding-bottom: 8px;
  margin: 0;
}

.flight-time-packbooind {
  font-size: 17px;
  font-weight: 400;
  color: #000000;
  margin-top: 4px;
}

.flight-duration-packbooind {
  text-align: center;
}

.semi-circle-wrapper-packbooind {
  margin-bottom: 4px;
}

.semi-circle-wrapper-packbooind img {
  display: block;
  margin: 0 auto;
}

.duration-text-packbooind {
  font-size: 18px;
  font-weight: 700;
  color: #000000;
  margin: 0;
}

.dotted-separator-packbooind {
  border-left: 2px dotted #ccc;
  margin: 0 8px;
}



/* ------------popup error ,msg--------------------------- */
/* Styles for the custom pop-up */
.custom-popup-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
  transition: opacity 0.3s ease;
}

.custom-popup-content {
  color: #fff;
  padding: 30px;
  border-radius: 10px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  text-align: center;
  max-width: 400px;
  width: 90%;
  font-family: Arial, sans-serif;
  
}

.custom-popup-content p {
  font-size: 1.2rem;
  margin-bottom: 20px;
  font-weight: 600;
}

.custom-popup-content button {
  background-color: #fff;
  color: #85B7CC;
  border: none;
  padding: 10px 20px;
  border-radius: 5px;
  cursor: pointer;
  font-size: 1rem;
  font-weight: bold;
}
.custom-popup-overlay.hidden {
  display: none !important;
}