.elementor-1773 .elementor-element.elementor-element-29e32d1{--display:flex;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--justify-content:center;--gap:0px 0px;--row-gap:0px;--column-gap:0px;--overlay-opacity:0.53;--margin-top:-135px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:140px;--padding-bottom:60px;--padding-left:0px;--padding-right:0px;}.elementor-1773 .elementor-element.elementor-element-29e32d1:not(.elementor-motion-effects-element-type-background), .elementor-1773 .elementor-element.elementor-element-29e32d1 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://hazaardastaan.co.in/wp-content/uploads/2026/02/DSC05805-HDR-Edit-scaled.jpg");background-position:center center;background-repeat:no-repeat;background-size:cover;}.elementor-1773 .elementor-element.elementor-element-29e32d1::before, .elementor-1773 .elementor-element.elementor-element-29e32d1 > .elementor-background-video-container::before, .elementor-1773 .elementor-element.elementor-element-29e32d1 > .e-con-inner > .elementor-background-video-container::before, .elementor-1773 .elementor-element.elementor-element-29e32d1 > .elementor-background-slideshow::before, .elementor-1773 .elementor-element.elementor-element-29e32d1 > .e-con-inner > .elementor-background-slideshow::before, .elementor-1773 .elementor-element.elementor-element-29e32d1 > .elementor-motion-effects-container > .elementor-motion-effects-layer::before{background-color:#000000;--background-overlay:'';}.elementor-1773 .elementor-element.elementor-element-f5a238a{--display:flex;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:center;--align-items:flex-start;}.elementor-1773 .elementor-element.elementor-element-f5a238a.e-con{--align-self:center;}.elementor-widget-text-editor{font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );color:var( --e-global-color-text );}.elementor-widget-text-editor.elementor-drop-cap-view-stacked .elementor-drop-cap{background-color:var( --e-global-color-primary );}.elementor-widget-text-editor.elementor-drop-cap-view-framed .elementor-drop-cap, .elementor-widget-text-editor.elementor-drop-cap-view-default .elementor-drop-cap{color:var( --e-global-color-primary );border-color:var( --e-global-color-primary );}.elementor-1773 .elementor-element.elementor-element-1490378 > .elementor-widget-container{margin:0px 0px 0px 0px;}.elementor-1773 .elementor-element.elementor-element-1490378{text-align:start;font-family:"Cormorant Garamond", Sans-serif;font-size:36px;font-weight:600;text-transform:capitalize;color:#FFFFFF;}.elementor-1773 .elementor-element.elementor-element-1490378 p{margin-block-end:0px;}.elementor-1773 .elementor-element.elementor-element-e35f33c{width:var( --container-widget-width, 90% );max-width:90%;--container-widget-width:90%;--container-widget-flex-grow:0;text-align:start;font-family:"Times New Roman", Sans-serif;font-size:19px;font-weight:500;line-height:30px;color:#FFFFFF;}.elementor-1773 .elementor-element.elementor-element-e35f33c.elementor-element{--align-self:flex-start;}.elementor-1773 .elementor-element.elementor-element-0d10f42{--display:flex;--flex-direction:column;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:center;--align-items:center;--border-radius:10px 10px 10px 10px;--margin-top:50px;--margin-bottom:50px;--margin-left:0px;--margin-right:0px;--padding-top:40px;--padding-bottom:40px;--padding-left:40px;--padding-right:40px;}.elementor-1773 .elementor-element.elementor-element-0d10f42:not(.elementor-motion-effects-element-type-background), .elementor-1773 .elementor-element.elementor-element-0d10f42 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#FEEDE0D6;}.elementor-1773 .elementor-element.elementor-element-0d10f42.e-con{--align-self:center;}.elementor-1773 .elementor-element.elementor-element-778fefe > .elementor-widget-container{margin:0px 0px 0px 0px;}.elementor-1773 .elementor-element.elementor-element-778fefe{text-align:start;font-family:"Cormorant Garamond", Sans-serif;font-size:36px;font-weight:600;text-transform:capitalize;color:#444444;}.elementor-1773 .elementor-element.elementor-element-778fefe p{margin-block-end:0px;}.elementor-1773 .elementor-element.elementor-element-95dcd5d{width:100%;max-width:100%;}@media(max-width:767px){.elementor-1773 .elementor-element.elementor-element-1490378{font-size:28px;}.elementor-1773 .elementor-element.elementor-element-e35f33c{--container-widget-width:100%;--container-widget-flex-grow:0;width:var( --container-widget-width, 100% );max-width:100%;font-size:16px;line-height:26px;}.elementor-1773 .elementor-element.elementor-element-778fefe{font-size:28px;}}@media(min-width:768px){.elementor-1773 .elementor-element.elementor-element-f5a238a{--width:70%;}.elementor-1773 .elementor-element.elementor-element-0d10f42{--width:70%;}}@media(min-width:1025px){.elementor-1773 .elementor-element.elementor-element-29e32d1:not(.elementor-motion-effects-element-type-background), .elementor-1773 .elementor-element.elementor-element-29e32d1 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-attachment:fixed;}}/* Start custom CSS for container, class: .elementor-element-29e32d1 *//* =========================================================
   Make each Room look clean + Calendar aligned (like screenshot)
   Goal: Room details on LEFT, calendar on RIGHT (not jumbled)
   Works when the availability calendar shortcode is placed
   inside each .mphb-room-type (recommended in Elementor)
   ========================================================= */

/* ---------- Theme vars (match your screenshot vibe) ---------- */
:root{
  --hz-navy:#13264c;
  --hz-navy-2:#0f1f3f;
  --hz-text:#0b1220;
  --hz-muted:#667085;
  --hz-border:#e6e8ee;
  --hz-soft:#f6f7fb;
  --hz-shadow: 0 12px 30px rgba(16,24,40,.10);
  --hz-radius: 16px;
  --hz-radius-sm: 12px;
  --hz-gap: 22px;
  --hz-pad: 18px;
}

/* =========================================================
   1) ROOM CARD (overall)
   ========================================================= */
.mphb_sc_rooms-wrapper.mphb-room-types{
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: var(--hz-gap) !important;
}

.mphb-room-type{
  border: 1px solid var(--hz-border) !important;
  border-radius: var(--hz-radius) !important;
  background: #fff !important;
  box-shadow: var(--hz-shadow) !important;
  overflow: hidden !important;
}

/* Remove random padding on children; we’ll control it */
.mphb-room-type > *{
  padding-left: var(--hz-pad) !important;
  padding-right: var(--hz-pad) !important;
}

/* ---------- Room Images (full-bleed like modern cards) ---------- */
.mphb-room-type-images{
  padding: 0 !important;
}
.mphb-gallery-main-slider .slides img{
  width: 100% !important;
  height: 360px !important;
  object-fit: cover !important;
  display: block !important;
}

/* Thumbs row */
.mphb-gallery-thumbnails-slider{
  padding: 12px !important;
  background: #fff !important;
  border-top: 1px solid var(--hz-border) !important;
}
.mphb-gallery-thumbnails-slider .gallery-item{
  border-radius: 12px !important;
  overflow: hidden !important;
  border: 2px solid transparent !important;
  opacity: .85 !important;
  transition: .2s ease !important;
}
.mphb-gallery-thumbnails-slider .gallery-item:hover{
  opacity: 1 !important;
  transform: translateY(-1px) !important;
  border-color: rgba(19,38,76,.25) !important;
}
.mphb-gallery-thumbnails-slider .flex-active-slide{
  opacity: 1 !important;
  border-color: rgba(19,38,76,.50) !important;
}
.mphb-gallery-thumbnails-slider img{
  height: 86px !important;
  object-fit: cover !important;
}

/* ---------- Title + text ---------- */
.mphb-room-type-title{
  margin: 0 !important;
  padding-top: 18px !important;
  font-size: 22px !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
}
.mphb-room-type-title a{
  color: var(--hz-text) !important;
  text-decoration: none !important;
}
.mphb-room-type > p{
  margin: 0 !important;
  padding-top: 8px !important;
  padding-bottom: 14px !important;
  color: var(--hz-muted) !important;
  line-height: 1.6 !important;
}

/* ---------- Details blocks ---------- */
.mphb-room-type-details-title{
  margin: 0 !important;
  padding-top: 8px !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  color: var(--hz-muted) !important;
}

.mphb-loop-room-type-attributes{
  list-style: none !important;
  margin: 12px 0 0 !important;
  padding: 0 !important;
  display: grid !important;
  grid-template-columns: repeat(12, 1fr) !important;
  gap: 10px 12px !important;
}
.mphb-loop-room-type-attributes li{
  grid-column: span 12 !important;
  border: 1px solid var(--hz-border) !important;
  background: var(--hz-soft) !important;
  border-radius: var(--hz-radius-sm) !important;
  padding: 12px 12px !important;
  display: flex !important;
  gap: 8px !important;
}
.mphb-attribute-title{
  font-weight: 800 !important;
  color: var(--hz-text) !important;
}
.mphb-attribute-value{
  color: var(--hz-muted) !important;
  font-weight: 600 !important;
}

/* ---------- Buttons ---------- */
.mphb-view-details-button-wrapper{
  margin: 0 !important;
  padding: 16px 0 10px !important;
}

.mphb-to-book-btn-wrapper{
  padding: 0 0 18px !important;
}
.mphb-to-book-btn-wrapper br{display:none !important;}

.mphb-room-type .button,
.mphb-room-type button.button{
  border-radius: 12px !important;
  padding: 12px 16px !important;
  font-weight: 800 !important;
  transition: .2s ease !important;
}

/* View Details = light */
.mphb-view-details-button{
  background: #fff !important;
  color: var(--hz-text) !important;
  border: 1px solid var(--hz-border) !important;
}
.mphb-view-details-button:hover{
  background: var(--hz-soft) !important;
  border-color: #d7dbe6 !important;
  transform: translateY(-1px) !important;
}

/* Book = Navy primary */
.mphb-book-button{
  background: var(--hz-navy) !important;
  border: 1px solid var(--hz-navy) !important;
  color: #fff !important;
}
.mphb-book-button:hover{
  background: var(--hz-navy-2) !important;
  border-color: var(--hz-navy-2) !important;
  transform: translateY(-1px) !important;
}

/* =========================================================
   2) KEY FIX: Layout = LEFT content + RIGHT calendar (clean)
   This requires the calendar shortcode to be inside .mphb-room-type
   ========================================================= */

/* Wrap the card content into a 2-column grid when calendar exists */
.mphb-room-type:has(.mphb_sc_availability_calendar-wrapper){
  display: grid !important;
  grid-template-columns: 1.05fr .95fr !important;
  grid-template-areas:
    "images images"
    "content calendar" !important;
}

/* Assign areas */
.mphb-room-type:has(.mphb_sc_availability_calendar-wrapper) .mphb-room-type-images{
  grid-area: images !important;
}
.mphb-room-type:has(.mphb_sc_availability_calendar-wrapper) h2.mphb-room-type-title,
.mphb-room-type:has(.mphb_sc_availability_calendar-wrapper) p,
.mphb-room-type:has(.mphb_sc_availability_calendar-wrapper) h3.mphb-room-type-details-title,
.mphb-room-type:has(.mphb_sc_availability_calendar-wrapper) ul.mphb-loop-room-type-attributes,
.mphb-room-type:has(.mphb_sc_availability_calendar-wrapper) .mphb-view-details-button-wrapper,
.mphb-room-type:has(.mphb_sc_availability_calendar-wrapper) .mphb-to-book-btn-wrapper{
  grid-area: content !important;
}

/* Calendar area */
.mphb-room-type:has(.mphb_sc_availability_calendar-wrapper) .mphb_sc_availability_calendar-wrapper{
  grid-area: calendar !important;
  align-self: start !important;
  margin: 18px var(--hz-pad) 18px 0 !important;
}

/* If browser doesn’t support :has(), fallback to flex (still better) */
@supports not .elementor-1773 .elementor-element.elementor-element-29e32d1(:has(*)){
  .mphb-room-type .mphb_sc_availability_calendar-wrapper{
    margin-top: 18px !important;
  }
}

/* Make spacing nicer inside grid card */
.mphb-room-type:has(.mphb_sc_availability_calendar-wrapper) > h2,
.mphb-room-type:has(.mphb_sc_availability_calendar-wrapper) > p,
.mphb-room-type:has(.mphb_sc_availability_calendar-wrapper) > h3,
.mphb-room-type:has(.mphb_sc_availability_calendar-wrapper) > ul,
.mphb-room-type:has(.mphb_sc_availability_calendar-wrapper) > .mphb-view-details-button-wrapper,
.mphb-room-type:has(.mphb_sc_availability_calendar-wrapper) > .mphb-to-book-btn-wrapper{
  padding-left: var(--hz-pad) !important;
  padding-right: 0 !important;   /* content column ends before calendar */
}

/* =========================================================
   3) CALENDAR STYLING (match screenshot, not messy)
   ========================================================= */
.mphb-room-type .mphb_sc_availability_calendar-wrapper{
  background: #fff !important;
  border: 1px solid var(--hz-border) !important;
  border-radius: var(--hz-radius) !important;
  box-shadow: var(--hz-shadow) !important;
  padding: 16px !important;
}

/* Make calendar full width inside its panel */
.mphb-room-type .mphb-calendar,
.mphb-room-type .mphb-calendar .datepick,
.mphb-room-type .mphb-calendar .datepick-multi{
  width: 100% !important;
  max-width: 100% !important;
}

/* Nav */
.mphb-room-type .mphb-calendar .datepick-nav{
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 10px 8px 14px !important;
  border-bottom: 1px solid var(--hz-border) !important;
  margin-bottom: 14px !important;
}

.mphb-room-type .mphb-calendar .datepick-cmd{
  border: 1px solid var(--hz-border) !important;
  background: var(--hz-soft) !important;
  color: var(--hz-text) !important;
  border-radius: 10px !important;
  padding: 10px 12px !important;
  font-weight: 800 !important;
  text-decoration: none !important;
  transition: .2s ease !important;
}
.mphb-room-type .mphb-calendar .datepick-cmd:hover{
  background: #eef1f7 !important;
  transform: translateY(-1px) !important;
}

/* Months in a neat 2-column grid (prevents “jumbled” rows) */
.mphb-room-type .mphb-calendar .datepick-month-row{
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 14px !important;
}
.mphb-room-type .mphb-calendar .datepick-month{
  border: 1px solid var(--hz-border) !important;
  border-radius: var(--hz-radius-sm) !important;
  overflow: hidden !important;
}

/* Month header */
.mphb-room-type .mphb-calendar .datepick-month-header{
  background: var(--hz-soft) !important;
  border-bottom: 1px solid var(--hz-border) !important;
  padding: 12px !important;
  font-weight: 900 !important;
  color: var(--hz-text) !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 10px !important;
}
.mphb-room-type .mphb-calendar .datepick-month-header select{
  border: 1px solid var(--hz-border) !important;
  border-radius: 10px !important;
  padding: 8px 10px !important;
  font-weight: 800 !important;
}

/* Days table */
.mphb-room-type .mphb-calendar table{
  width: 100% !important;
  border-collapse: collapse !important;
}
.mphb-room-type .mphb-calendar thead th{
  background: #fff !important;
  border-bottom: 1px solid var(--hz-border) !important;
  padding: 10px 0 !important;
  color: var(--hz-muted) !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  text-transform: uppercase !important;
}
.mphb-room-type .mphb-calendar tbody td{
  padding: 6px 0 !important;
  text-align: center !important;
}

/* Date cells */
.mphb-room-type .mphb-calendar .mphb-date-cell{
  display: inline-flex !important;
  width: 40px !important;
  height: 40px !important;
  border-radius: 12px !important;
  align-items: center !important;
  justify-content: center !important;
  font-weight: 900 !important;
  font-size: 13px !important;
  border: 1px solid transparent !important;
  transition: .2s ease !important;
}

/* Other month */
.mphb-room-type .mphb-calendar .datepick-other-month{
  opacity: .35 !important;
}

/* Available look (navy chips like screenshot) */
.mphb-room-type .mphb-calendar .mphb-available-date{
  background: rgba(19,38,76,.08) !important;
  border-color: rgba(19,38,76,.18) !important;
  color: var(--hz-text) !important;
}
.mphb-room-type .mphb-calendar .mphb-available-date:hover{
  background: rgba(19,38,76,.14) !important;
  transform: translateY(-1px) !important;
}

/* If plugin marks selected dates, make them solid navy */
.mphb-room-type .mphb-calendar .datepick-selected,
.mphb-room-type .mphb-calendar .mphb-booking-date,
.mphb-room-type .mphb-calendar .mphb-selected-date{
  background: var(--hz-navy) !important;
  border-color: var(--hz-navy) !important;
  color: #fff !important;
}

/* Not available (light grey) */
.mphb-room-type .mphb-calendar .mphb-not-available-date{
  background: #f1f2f6 !important;
  border-color: #eef0f4 !important;
  color: #b0b6c3 !important;
}

/* =========================================================
   4) RESPONSIVE
   ========================================================= */
@media (min-width: 768px){
  .mphb-loop-room-type-attributes li{ grid-column: span 6 !important; }
}

@media (max-width: 1024px){
  .mphb-room-type:has(.mphb_sc_availability_calendar-wrapper){
    grid-template-columns: 1fr !important;
    grid-template-areas:
      "images"
      "content"
      "calendar" !important;
  }
  .mphb-room-type:has(.mphb_sc_availability_calendar-wrapper) .mphb_sc_availability_calendar-wrapper{
    margin: 0 var(--hz-pad) 18px !important;
  }
  .mphb-room-type:has(.mphb_sc_availability_calendar-wrapper) > h2,
  .mphb-room-type:has(.mphb_sc_availability_calendar-wrapper) > p,
  .mphb-room-type:has(.mphb_sc_availability_calendar-wrapper) > h3,
  .mphb-room-type:has(.mphb_sc_availability_calendar-wrapper) > ul,
  .mphb-room-type:has(.mphb_sc_availability_calendar-wrapper) > .mphb-view-details-button-wrapper,
  .mphb-room-type:has(.mphb_sc_availability_calendar-wrapper) > .mphb-to-book-btn-wrapper{
    padding-right: var(--hz-pad) !important;
  }

  /* calendar months 1-column on small */
  .mphb-room-type .mphb-calendar .datepick-month-row{
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 767px){
  .mphb-gallery-main-slider .slides img{ height: 260px !important; }
  .mphb-room-type .mphb-calendar .mphb-date-cell{
    width: 36px !important;
    height: 36px !important;
    border-radius: 10px !important;
  }
}/* End custom CSS */