/* ==========================================================================
   IVY Booking Wizard — Stylesheet (organized)
   NOTE: Duplicates are NOT deleted — they are commented and marked.
   ========================================================================== */


/* ==========================================================================
   1) Base / Wrapper
   ========================================================================== */

div#ivy-bw{
  position: relative;
  font-family: "Open Sans Hebrew", Sans-serif;
}
div#ivy-bw input {
    font-family: "Open Sans Hebrew", Sans-serif;
}
/* Fade only wizard content, NOT the progress bar */
#ivy-bw{ position: relative; }
#ivy-bw .ivy-bw__stage{ position: relative; }

#ivy-bw .ivy-bw__stage{
  transition: opacity .18s ease, transform .18s ease;
  will-change: opacity, transform;
}

#ivy-bw.is-fading .ivy-bw__stage{
  opacity: 0;
  transform: translateY(8px);
}



div#ivy-bw__rooms-warning{ width: 100%; }

#ivy-bw .ivy-bw__room.is-disabled{ opacity: 0.3; }
#ivy-bw .ivy-bw__room.is-disabled .ivy-bw__select{ pointer-events: none; }


/* ==========================================================================
   2) Steps header (top navigation)
   ========================================================================== */

.ivy-bw__steps{
  display: flex;
  gap: 0;
  justify-content: center;
  padding: 24px 0;
  font-size: clamp(13px, 1.39vw, 24px);
  font-weight: 700;
  border-bottom: 1px solid #8C8C8C;
  border-top: 1px solid #8C8C8C;
}

.ivy-bw__steps span.step-wrapper{
  width: 20%;
  padding: 0 8px;
  opacity: 0.6;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: center;
  position: relative;
}

.ivy-bw__steps span.step-wrapper:not(:last-child)::after{
  position: absolute;
  left: 0;
  top: 13px;
  content:"";
  width: clamp(8px, 0.93vw, 16px);
  height: clamp(8px, 0.93vw, 16px);
  display:inline-block;
  background: no-repeat center/contain url('../assets/images/angle.svg');
}

span.number-step{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  margin: 0 4px;
  font-size: clamp(16px, 1.39vw, 24px);
  font-weight: 600;
  line-height: 1;
  border-radius: 50%;
  border: 1px solid #D9D9D9;
  background: transparent;
  color: #fff;
  transition: all 0.3s ease-in-out;
}

.is-complete span.number-step,
.is-active span.number-step{
  background: linear-gradient(90deg, #4FABBF 0%, #78C68D 100%);
  color: #0b0b0b;
  border: 0;
}

span.title-step{ white-space: nowrap; }

.is-complete span.title-step{ color:#78C68D; opacity: 1; }
.is-active span.title-step{ color:#fff; opacity: 1; }

.ivy-bw__steps span.step-wrapper{ opacity: 0.6; }
.ivy-bw__steps span.step-wrapper.is-active{ opacity: 1; color: #fff; }
.ivy-bw__steps span.step-wrapper.is-complete{ opacity: 1; color: #78C68D; }


/* ==========================================================================
   3) Step container / Titles / Actions
   ========================================================================== */

.ivy-bw__step{
  display: none;
  max-width: 1120px;
  margin: auto;
  color: #fff;
}

.ivy-bw__step.is-active{ display: block; }

.ivy-bw__actions{
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  align-items: center;
  margin-top: clamp(20px, 2.78vw, 48px);
}

.step-title{
  margin-top: clamp(20px, 1.39vw, 24px);
  margin-bottom: clamp(20px, 1.39vw, 24px);
  font-size: clamp(28px, 2.78vw, 48px);
  font-weight: 700;
  text-align: center;
}

.step-subtitle{
  margin-top: 0;
  margin-bottom: 20px;
  font-size: clamp(26px, 2.08vw, 36px);
  font-weight: 400;
  text-align: center;
}

.ivy-bw__step[data-step="1"] .step-title{ text-align: center; }
.ivy-bw__step[data-step="1"] .ivy-bw__actions{ display:none; }

.step-logo__wrap{ display: flex; justify-content: center; }
.step-logo{ width: 200px; }


/* ==========================================================================
   4) Micro-interactions / Ripple / Loading guards
   ========================================================================== */

.ivy-bw__people button{ position:relative; overflow:hidden; }

.ivy-bw__people button .ripple{
  position:absolute;
  width:15px; height:15px;
  border-radius:50%;
  transform:translate(-50%,-50%);
  pointer-events:none;
  opacity:.35;
  background:currentColor;
  animation:ivy-ripple .6s ease-out forwards;
}

@keyframes ivy-ripple{
  from{ transform:translate(-50%,-50%) scale(.2); opacity:.35; }
  to  { transform:translate(-50%,-50%) scale(12); opacity:0; }
}

.ivy-bw.is-loading{ position:relative; }
.ivy-bw.is-loading::after{
  content:"";
  position:absolute;
  inset:0;
  background:rgba(0,0,0,0);
  z-index:10;
}


/* ==========================================================================
   5) Buttons
   ========================================================================== */

.is-primary{
  background-color: transparent;
  font-family: "Open Sans Hebrew", Sans-serif;
  font-size: 18px;
  font-weight: 700;
  line-height: 1em;
  color: #1E1E1E;
  background-image: linear-gradient(90deg, #4FABBF 0%, #78C68D 100%);
  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
  border-radius: 10px;
  border: 1px solid transparent;
}

button.ivy-bw__prev{
  background-color: transparent;
  font-family: "Open Sans Hebrew", Sans-serif;
  font-size: 18px;
  font-weight: 700;
  line-height: 1em;
  color: #fff;
  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
  border-radius: 10px;
  border: 1px solid #D5D4DF;
}

button.ivy-bw__next,
button.ivy-bw__prev,
button.ivy-bw__to-checkout{
  z-index: 9999;
}

button.ivy-bw__to-checkout{
  padding: .5rem 1rem;
  background-color: transparent;
  font-family: "Open Sans Hebrew", Sans-serif;
  font-size: 18px;
  font-weight: 700;
  line-height: 1em;
  color: #1E1E1E;
  background-image: linear-gradient(90deg, #4FABBF 0%, #78C68D 100%);
  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
  border-radius: 10px;
  border: 1px solid transparent;
}


/* ==========================================================================
   6) Step 1 — People
   ========================================================================== */

.ivy-bw__people{
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  justify-content: center;
}

.ivy-bw__people button{
  width: clamp(46px, 5.56vw, 96px);
  height: clamp(46px, 5.56vw, 96px);
  font-size: clamp(24px, 2.08vw, 36px);
  font-weight: 700;
  line-height: 1;
  border-radius: 50%;
  border: 1px solid #D9D9D9;
  background: transparent;
  color: #fff;
  transition: all 0.3s ease-in-out;
}

.ivy-bw__people button.is-primary,
.ivy-bw__people button:hover,
.ivy-bw__people button:active,
.ivy-bw__people button:focus{
  background: linear-gradient(90deg, #4FABBF 0%, #78C68D 100%) !important;
  color: #0b0b0b;
  border: 0;
}

.ivy-bw__people button.loading{ filter:brightness(1.1); }


/* ==========================================================================
   7) Step 2 — Rooms
   ========================================================================== */

div#ivy-bw__rooms{
  margin: auto;
  display: flex;
  width: 100%;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(20px, 1.62vw, 28px);
}

/* Main room card (base) */
.ivy-bw__room{
  padding: clamp(30px, 2.89vw, 50px) clamp(15px, 2.03vw, 35px);
  width: calc(50% - clamp(10px, 3.47vw, 60px));
  background:#20222A;
  border-radius:20px;
  color:#fff;
  display:flex;
  flex-direction:column;
  gap:10px;
  text-align:right;
  justify-content: flex-start;
  position: relative;
  border: 1px solid transparent; 
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  overflow: hidden;
}

/* Hover (new) */
.ivy-bw__room:hover:not(.is-selected){
  transform: translateY(-4px);
  border-style: solid;
  border-color: #6BC7A3;
  box-shadow:
    0 0 0 1px rgba(107,199,163,.8),
    0 12px 30px rgba(0,0,0,.35),
    0 0 24px rgba(107,199,163,.25);
}

.ivy-bw__room-img img{ transition: transform .4s ease; }
.ivy-bw__room:hover:not(.is-selected) .ivy-bw__room-img img{ transform: scale(1.04); }
.ivy-bw__room:hover:not(.is-selected) .ivy-bw__select{ background: #6BC7A3; color: #0b1e18; }

.ivy-bw__room.is-selected{
  border: 2px solid #6BC7A3;
  box-shadow:
    0 0 0 2px rgba(107,199,163,.35),
    0 10px 28px rgba(0,0,0,.4);
}

.ivy-bw__room-title{
  margin-top: 0;
  margin-bottom: 8px;
  display: inline-flex;
  align-items: center;
  line-height: 1;
  font-weight:700;
  font-size: clamp(24px, 2.08vw, 36px);
}

.ivy-bw__room-capacity{
  padding: 0 8px;
  font-size: clamp(18px, 1.39vw, 24px);
  color: #78C68D;
}

.ivy-bw__room img{
  width: 100%;
  height: 215px;
  max-height: 250px;
  border-radius: 15px !important;
  object-fit: cover;
}

.ivy-bw__room-actions{ margin-top: auto; }

button.ivy-bw__select.button-primary{
  color: #fff;
  border-radius: 15px;
  width: 100%;
  border: 1px solid #D5D4DF;
  font-size: clamp(18px, 1.5vw, 24px);
  transition: all 0.3s ease-in-out;
}

button.ivy-bw__select.button-primary:hover,
button.ivy-bw__select.button-primary:active,
button.ivy-bw__select.button-primary:focus{
  background: linear-gradient(90deg, #4FABBF 0%, #78C68D 100%) !important;
  border: 1px solid transparent !important;
}

/* ⚠️ Looks like a selector typo in original — kept as-is but moved here.
   Original:
   button.ivy-bw__select.button-primary 
   .ivy-bw__room.is-selected { outline: 2px solid #78C68D; }
*/
button.ivy-bw__select.button-primary 
.ivy-bw__room.is-selected{
  outline: 2px solid #78C68D;
}

.ivy-bw__room-desc p{ margin-bottom: 0; }
.ivy-bw__room-desc,
.ivy-bw__room-desc p{
  font-size: clamp(18px, 1.39vw, 24px);
}


/* ==========================================================================
   8) Shared grids / Cards (Plan, Services, Addons)
   ========================================================================== */

.ivy-bw__loading{ opacity: 0.8; }

.ivy-bw__addons{
  display: grid;
  gap: 10px;
}

.ivy-bw__addon{
  display: flex;
  align-items: center;
  gap: 8px;
  background: #1b1b1b;
  border: 1px solid #2b2b2b;
  border-radius: 10px;
  padding: 10px;
}

/* grid */
.ivy-bw__addons,
#ivy-bw__plan,
#ivy-bw__services,
.ivy-bw__services-list{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 18px;
}

/* card */
.ivy-card,
.ivy-bw2-card,
.ivy-bw__plan .ivy-bw__card,
.ivy-bw__addons .ivy-bw__card{
  position: relative;
  border-radius: 15px;
  background: #1f2227;
  box-shadow: 0 4px 20px rgba(0,0,0,.25);
  overflow: hidden;
  padding: 20px;
}

#ivy-bw__services label.ivy-bw__card{ padding-top: 30px !important; }
.ivy-bw__addons .ivy-bw__card{ display: flex; flex-direction: column; }

/* header-image */
.ivy-card img,
.ivy-bw2-card img,
.ivy-bw__card img{
  width: 100%;
  height: 160px;
  object-fit: cover;
  border-radius: 10px;
  display: block;
  margin-bottom: 15px;
}

/* title/price */
.ivy-card__title,
.ivy-bw__card .title{
  font-size: clamp(24px, 1.62vw, 28px);
  font-weight: 700;
  line-height: 1.3;
  margin-bottom: 10px;
}

.ivy-card__price,
.ivy-bw__card .price{
  font-weight: 700;
  margin: 10px 0;
}

/* list */
.ivy-card__list{
  margin: 0 0 15px;
  padding: 0;
  list-style: none;
}

.ivy-card__list li{
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 4px 0;
}

/* radio/checkbox visuals */
.ivy-card input[type="radio"],
.ivy-bw__card input[type="radio"],
.ivy-card input[type="checkbox"],
.ivy-bw__card input[type="checkbox"]{
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

.ivy-card:has(input:checked),
.ivy-bw__card:has(input:checked){
  position: relative;
  outline: 2px solid #78C68D;
  box-shadow: 0 0 0 3px rgba(98,210,111,.25);
}

.ivy-card:has(input:checked)::after,
.ivy-bw__card:has(input:checked)::after{
  content: "✔";
  position: absolute;
  top: 10px;
  right: 10px;
  width: 22px;
  height: 22px;
  background-color: #78C68D;
  color: #fff;
  font-size: 14px;
  font-weight: bold;
  text-align: center;
  line-height: 22px;
  border-radius: 50%;
  box-shadow: 0 0 0 2px #fff, 0 2px 4px rgba(0,0,0,.25);
  pointer-events: none;
}

/* button at bottom */
.ivy-bw__to-checkout{
  padding: 15px 18px;
  background: #62d26f;
  color: #0f1215;
  border-radius: 10px;
  border: none;
  cursor: pointer;
  font-weight: 700;
}

/* Services label tweaks (kept as in original) */
label.ivy-bw__card.ivy-bw__service img{
  margin-bottom: 20px;
  width:100%;
  aspect-ratio:16/9;
  border-radius:15px;
  background:linear-gradient(90deg,#23282f 25%,#2a3037 37%,#23282f 63%);
  background-size:400% 100%;
  animation: shine 1.1s infinite linear;
  border-radius: 15px;
}

label.ivy-bw__card.ivy-bw__service .price{
  margin-top: auto;
  margin-bottom: 20px;
  display: flex;
  font-size: 20px;
  padding: 15px;
}

label.ivy-bw__card.ivy-bw__service .desc{
  margin-bottom: 20px;
  font-size: 16px;
  line-height: 1.3;
}

label.ivy-bw__card.ivy-bw__service .title{ margin-bottom: 10px; }

.ivy-bw__service .price--top{
  margin: 10px 0 15px;
  font-size: 18px;
  font-weight: 700;
  color: #78C68D;
  text-align: center;
}

.ivy-bw__service .service-action{
  margin-top: auto;
  padding-top: 15px;
}

.ivy-bw__service .service-action__btn{
  display: block;
  width: 100%;
  text-align: center;
  padding: 14px 16px;
  font-weight: 700;
  font-size: 16px;
  border: 1px solid #D5D4DF;
  border-radius: 15px;
  color: #fff;
  transition: all .2s ease;
}

.ivy-bw__service:hover .service-action__btn{
  background: linear-gradient(90deg, #4FABBF 0%, #78C68D 100%);
  color: #0b0b0b;
  border-color: transparent;
}

.ivy-bw__service:has(input:checked) .service-action__btn{
  background: linear-gradient(90deg, #4FABBF 0%, #78C68D 100%);
  color: #0b0b0b;
}





/* ==========================================================================
   9) Calendar / PluginHive (Single Product)
   ========================================================================== */

#ivy-bw__calendar form.cart{ padding: 0 !important; }
.ph-bookings-calendar-from-shortcode form.cart{ padding: 20px !important; }
#ivy-bw__calendar .product-type-phive_booking .product_title.entry-title{ display: none !important; }

.ivy-bw__calendar .product-type-phive_booking{ display: flex; }

.booking-wraper > div:nth-child(2){
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.booking-info-wraper{
  order: 1;
  width: 100%;
}

.time-picker-wraper{
  order: 2;
  width: 100%;
}

p.additional-notes{ order: 3; }

p.additional-notes textarea.phive_book_additional_notes_text{
  background: #20222A !important;
  color:#fff;
}

.time-calendar-date-section{ border-radius: 15px; }

li.ph-calendar-date{ line-height: 2.5!important; }

p#booking_info_text{ width: 100%; }

ul.ph-calendar-weekdays{
  border-top: 1px solid #8C8C8C;
  border-bottom: 1px solid #8C8C8C;
}

.ph-calendar-month{ width: 100%; }
.ph-calendar-month > ul{ display: flex; width: 100%; justify-content: space-between; }
.ph-calendar-month .ph-prev{
    order:1;
}
.ph-calendar-month .ph-month {
    order:2;
}
.ph-calendar-month .ph-next{
    order:3;
}
p#booking_info_text{
  font-family: "Open Sans Hebrew", Sans-serif;
  font-size: clamp(18px, 1.39vw, 24px);
  font-weight: 700;
  position: relative;
  display: flex;
  align-items: center;
  gap: 20px;
  margin: 0;
}

p#booking_info_text::before{
  content:"";
  width:44px;
  height:44px;
  display:inline-block;
  background: no-repeat center/contain url('../assets/images/calendar-icon.svg');
}

.time-calendar-date-section{
  border-radius: 15px;
  border: 1px solid #8C8C8C;
}

li.ph-calendar-date.mouse_hover,
li.ph-calendar-date.today:hover,
li.ph-calendar-date:hover,
.timepicker-selected-date,
.selected-date,
li.ph-calendar-date.today.timepicker-selected-date{
  border-radius: 7px;
}

.ph-calendar-container{
  display: flex;
  gap: 20px;
}

.time-calendar-date-section{
  margin-top: 1em;
  width: 70%;
}

#ivy-bw__calendar .time-picker{
  padding: 20px !important;
  flex:0 0  30%;
  max-height: 500px !important;
  border-radius: 15px;
}

ul#ph-calendar-time{
  display: flex;
  flex-direction: column;
  gap: 30px;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

#ivy-bw__calendar .time-picker-wraper #ph-calendar-time li.ph-calendar-date{
  padding: 15px !important;
  border: none !important;
  background: #20222A;
  border: none;
  display: flex;
  justify-content: center;
  align-items: center;
  max-width: 300px;
  border-radius: 15px !important;
  transition:all 0.3s ease;
  cursor: pointer;
}

.time-picker-wraper #ph-calendar-time li.ph-calendar-date:hover{ opacity: 0.8; }

.time-picker .ph-calendar-days .ph-calendar-date{
  font-size: clamp(16px, 1.39vw, 24px) !important;
}

#ivy-bw__calendar .participant_inner_section{ display: none !important; }
#ivy-bw__calendar .woocommerce div.product div.summary{ margin-bottom: 0; }
#ivy-bw__calendar p#booking_price_text{ display: none; }
#ivy-bw__calendar p.price{ display: none; }

.product-type-phive_booking button.ph_book_now_button{ display: none !important; }
.product-type-phive_booking .resources-wraper{ display: none !important; }

.woocommerce div#ivy-bw__calendar div.product form.cart{ margin-bottom: 0; }
#ivy-bw__calendar form.cart{ max-width: 1024px; }

#ivy-bw__calendar .time-picker li.ph-calendar-date{
  width: 100% !important;
  font-size: 16px !important;
  line-height: 2;
}


/* ==========================================================================
   10) Step 4 — Resources cards (Programs)
   ========================================================================== */

#ivy-bw__resources{
  display:grid;
  grid-template-columns: repeat(3, minmax(260px,1fr));
  gap:20px;
  counter-reset: pbwcard;
}

.pbw-card{
  display:flex;
  flex-direction:column;
  border-radius:20px;
  background:#1e2227;
  box-shadow: 0 2px 0 rgba(255,255,255,.06) inset, 0 1px 18px rgba(0,0,0,.25);
  padding:20px;
  color:#e8eef3;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  border:1px solid rgba(255,255,255,.08);
  cursor:pointer;
  position:relative;
}

.pbw-card:hover{
  transform: translateY(-3px);
  box-shadow: 0 2px 0 rgba(255,255,255,.08) inset, 0 10px 24px rgba(0,0,0,.35);
  border-color: rgba(255,255,255,.14);
}

.pbw-card--active{
  border-color: #4cc9a6;
  box-shadow: 0 0 0 2px rgba(76,201,166,.25), 0 14px 30px rgba(0,0,0,.35);
}

.pbw-card--active::after{
  content:"";
  position:absolute;
  inset:10px;
  border:2px dashed rgba(76,201,166,.65);
  border-radius:15px;
  pointer-events:none;
}

.pbw-card__img{
  width:100%;
  aspect-ratio:16/9;
  overflow:hidden;
  border-radius:20px;
  margin-bottom:20px;
}

.pbw-card__img img{ width:100%; height:100%; object-fit:cover; display:block; }

.pbw-card__title{
  font-size: clamp(24px, 2.08vw, 36px);
  font-weight:700;
  margin:0 0 20px;
  letter-spacing:.3px;
}

.pbw-card__sub{ margin:0 0 5px; line-height:1.35; }
.pbw-card__sub--primary{ font-size:18px; font-weight:700; opacity:.95; }
.pbw-card__sub--secondary{ font-size:16px; font-weight:500; opacity:.75; }

.pbw-card__price{
  font-size: clamp(24px, 2.08vw, 36px);
  font-weight:700;
  margin:10px 0;
  color:#78C68D;
}

.pbw-card__price small{ font-weight:600; opacity:.85; color:#e8eef3; }

.pbw-card__desc{
  margin-top:10px;
  margin-bottom: 20px;
  line-height:1.1;
  color:#dfe7ee;
}

.pbw-card__desc p{ margin:10px 0; font-size: 16px; }
.pbw-card__desc ul{ padding-right: 20px; margin:10px 0 0 20px; font-size: 14px; }
.pbw-card__desc li{ margin:10px 0; }

.pbw-card__btn{
  margin-top: auto;
  margin-bottom: 20px;
  text-align:center;
  font-size: 18px;
  font-weight:700;
  border-radius:15px;
  padding:.5rem 1rem;
  border: 1px solid #D5D4DF;
  transition: background .18s ease, border-color .18s ease, transform .12s ease;
  cursor:pointer;
  user-select:none;
}

.pbw-card:hover .pbw-card__btn{ 
    background: linear-gradient(90deg, #4FABBF 0%, #78C68D 100%) !important;
    border: 1px solid transparent !important;
}
.pbw-card__btn:active{ transform: translateY(1px) scale(.995); }

.pbw-card--active .pbw-card__btn{
  background:#4cc9a6;
  color:#10251f;
  border-color:#4cc9a6;
}

.pbw-card:focus-visible{ outline: 3px solid #4cc9a6; outline-offset: 3px; }


/* ==========================================================================
   11) Overlay / Progress (checkout)
   ========================================================================== */

.ivy-bw__overlay{
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(15, 22, 36, .72);
  display: none;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(3px);
}

.ivy-bw__overlay.is-visible{ display: flex; }

.ivy-bw__overlay.is-visible .ivy-bw__steps{
  justify-content: space-between;
  gap: 20px;
}

.ivy-bw__overlay.is-visible{
  width: 100%;
  padding: 30px;
  text-align: center;
}

.ivy-bw__progress-head{
  margin-bottom: 15px;
  font-size: clamp(13px, 1.39vw, 24px);
}

.ivy-bw__spinner{
  margin: auto;
  width: 18px;
  height: 18px;
  border: 2px solid rgba(255,255,255,.25);
  border-top-color: #fff;
  border-radius: 50%;
  animation: ivyspin 1s linear infinite;
}

@keyframes ivyspin{ to { transform: rotate(360deg); } }


/* ==========================================================================
   12) Scroll progress bar (inside #ivy-bw)
   ========================================================================== */

.ivy-bw__scroll-progress{
  position: relative;
  width: 100%;
  overflow: hidden;
  z-index: 999;
  background: #111111;
}

.ivy-bw__scroll-progress.is-fixed{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
}

.ivy-bw__scroll-progress-inner{
  height: 100%;
  transition: width 0.1s linear;
}


/* ==========================================================================
   13) Loaders / Skeletons (rooms + legacy calendar skel)
   ========================================================================== */

.ivy-bw__progress{
  display:flex;
  align-items:center;
  gap:10px;
  padding:14px;
  background:#1b1b1b;
  border:1px solid #2b2b2b;
  border-radius:10px;
}

.spinner{
  width:18px; height:18px;
  border-radius:50%;
  border:2px solid rgba(255,255,255,.2);
  border-top-color:#78C68D;
  animation:spin .8s linear infinite;
}

@keyframes spin{ to{ transform:rotate(360deg); } }

.ivy-bw__skeletons{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:15px;
}

.ivy-bw__room.skeleton{
  background:#1b1b1b;
  border:1px solid #2b2b2b;
  border-radius:15px;
  padding:10px;
}

.ivy-bw__room.skeleton .img{
  height:140px;
  border-radius:10px;
  background:linear-gradient(90deg,#2a2a2a, #333, #2a2a2a);
  background-size:200% 100%;
  animation:skeleton 1.2s ease-in-out infinite;
}

.ivy-bw__room.skeleton .line{
  height:14px;
  width:60%;
  margin:15px auto 0;
  border-radius:6px;
  background:linear-gradient(90deg,#2a2a2a, #333, #2a2a2a);
  background-size:200% 100%;
  animation:skeleton 1.2s ease-in-out infinite;
}

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

/* Legacy calendar skeleton (older) */
.ivy-bw__calendar-skel{background:#111111;border:1px solid #D5D4DF;border-radius:12px;padding:12px}
.ivy-bw__calendar-skel .skel-head{height:16px;background:#1a1a1a;border-radius:6px;margin-bottom:12px}
.ivy-bw__calendar-skel .skel-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:8px;margin-bottom:12px}
.ivy-bw__calendar-skel .skel-grid .cell{height:36px;background:#1a1a1a;border-radius:8px}
.ivy-bw__calendar-skel .skel-times .t-row{height:14px;background:#1a1a1a;border-radius:6px;margin:8px 0}

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


/* ==========================================================================
   14) Global loader GIF
   ========================================================================== */

#ivy-bw .ivy-bw__global-loader{
  position: fixed;
  inset: 0;
  width: 30vw;
  height: 30vw;
  bottom: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: url(./images/loading.gif) center center no-repeat;
  background-size: 50px;
  z-index: 9999;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
}

#ivy-bw.is-step-loading .ivy-bw__global-loader{
  opacity: 1;
  pointer-events: all;
}


/* ==========================================================================
   15) Modern Calendar skeleton (ivy-cal-skel) — SINGLE SOURCE OF TRUTH
   ========================================================================== */

/* ===== Shared skeleton shimmer (single definition) ===== */
.ivy-skel{
  background: linear-gradient(
    90deg,
    rgba(255,255,255,.06),
    rgba(255,255,255,.14),
    rgba(255,255,255,.06)
  );
  background-size: 200% 100%;
  animation: ivySkel 1.1s linear infinite;
}

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

/* ===== Calendar skeleton ===== */
.ivy-cal-skel{
  max-width: 920px;
  margin: 0 auto;
  margin-top: 40px;
  direction: rtl;
}

.ivy-cal-skel__summary{ margin-bottom: 20px; }
.ivy-cal-skel__summary-line{
  height: 32px;
  width: 420px;
  border-radius: 14px;
}

@media (max-width: 768px){
  .ivy-cal-skel__summary-line{ width: 100%; }
    #ivy-bw .ivy-bw__actions{
    position: fixed !important;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 999999 !important;
  }
}

.ivy-cal-skel__frame{
  border: 1px solid rgba(255,255,255,.35);
  border-radius: 22px;
  overflow: hidden;
  background: rgba(255,255,255,.02);
  box-shadow: 0 18px 55px rgba(0,0,0,.35);
}

.ivy-cal-skel__head{
  display: grid;
  grid-template-columns: 44px 1fr 44px;
  align-items: center;
  gap: 14px;
  padding: 18px 18px 14px;
  border-bottom: 1px solid rgba(255,255,255,.18);
}

.ivy-cal-skel__nav{ height: 30px; border-radius: 10px; }
.ivy-cal-skel__title{
  height: 22px;
  border-radius: 10px;
  justify-self: center;
  width: 180px;
}

.ivy-cal-skel__dow{
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0;
  padding: 12px 18px;
  border-bottom: 1px solid rgba(255,255,255,.12);
}

.ivy-cal-skel__dow-cell{
  height: 14px;
  border-radius: 8px;
  width: 28px;
  justify-self: center;
  opacity: .75;
}

.ivy-cal-skel__grid{
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 10px;
  padding: 16px 18px 18px;
}

.ivy-cal-skel__cell{
  height: 34px;
  border-radius: 12px;
  justify-self: stretch;
}

.ivy-cal-skel__below{
  padding: 16px 6px 0;
  opacity: .85;
}

.ivy-cal-skel__line{
  height: 14px;
  border-radius: 10px;
  margin: 10px 12px;
}

/* Desktop position: skeleton lives on right half (calendar is 70% / time 30%) */
@media (min-width: 1024px){
  #ivy-bw__calendar .ivy-cal-skel{
    width: 65%;
    max-width: 920px;
    margin-left: auto;
    margin-right: 0;
     margin-top: 40px;
  }
}


/* ==========================================================================
   16) Step 4 + Step 5 skeletons
   ========================================================================== */

/* Step 4 skeleton (resources) */
.ivy-res-skel{
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 28px;
}

@media (max-width: 1024px){
  .ivy-res-skel{ grid-template-columns: 1fr; gap: 18px; }
}

.ivy-res-skel__card{
  border-radius: 26px;
  background: rgba(255,255,255,.04);
  padding: 26px;
  box-shadow: 0 18px 55px rgba(0,0,0,.35);
}

.ivy-res-skel__title{ height: 34px; border-radius: 14px; width: 70%; margin-bottom: 16px; }
.ivy-res-skel__img{ height: 220px; border-radius: 22px; width: 100%; margin-bottom: 16px; }
.ivy-res-skel__line{ height: 16px; border-radius: 10px; width: 92%; margin-top: 10px; }
.ivy-res-skel__line.short{ width: 66%; }
.ivy-res-skel__btn{ height: 56px; border-radius: 18px; width: 100%; margin-top: 18px; }

/* Step 5 skeleton (services) */
.ivy-svc-skel{
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 28px;
}

@media (max-width: 1024px){
  .ivy-svc-skel{ grid-template-columns: 1fr; gap: 18px; }
}

.ivy-svc-skel__card{
  border-radius: 26px;
  background: rgba(255,255,255,.04);
  padding: 26px;
  box-shadow: 0 18px 55px rgba(0,0,0,.35);
}

.ivy-svc-skel__title{ height: 34px; border-radius: 14px; width: 68%; margin-bottom: 18px; }
.ivy-svc-skel__img{ height: 220px; border-radius: 22px; width: 100%; margin-bottom: 18px; }
.ivy-svc-skel__lines{ margin-bottom: 22px; }
.ivy-svc-skel__line{ height: 16px; border-radius: 10px; margin-top: 10px; width: 92%; }
.ivy-svc-skel__line:nth-child(2){ width: 70%; }
.ivy-svc-skel__btn{ height: 56px; border-radius: 18px; width: 100%; margin-top: 8px; }


/* ==========================================================================
   17) Misc tweaks
   ========================================================================== */

li.ph-next{ direction: ltr; }
li.ph-prev{ direction: ltr; }


/* ==========================================================================
   18) Responsive
   ========================================================================== */

@media (max-width: 1024px){
  #ivy-bw__rooms{ grid-template-columns: repeat(2, minmax(260px,1fr)); }
  .ivy-bw__skeletons{ grid-template-columns: repeat(2, minmax(260px,1fr)); }
  #ivy-bw__resources{ grid-template-columns: repeat(2, minmax(260px,1fr)); }
}

@media (max-width: 768px){
  .ivy-bw__steps{ padding: 24px 5px; }
  .ivy-bw__step{ padding: 10px 20px; }

#ivy-bw .ivy-bw__actions{
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: #111111;
    display: flex;
    justify-content: space-between;
    padding: 15px 20px;
    z-index: 9999;
  }

  .ivy-bw__actions:before{
    box-shadow: 0 -10px 20px 10px currentColor;
    color: hsla(0, 0%, 80%, .3);
    content: "";
    height: 100%;
    right: 0;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 0;
  }

  .ivy-bw__step.is-active{ padding-bottom: 90px; }

  #ivy-bw__rooms{ grid-template-columns: 1fr; }
  .ivy-bw__skeletons{ grid-template-columns: 1fr; }

  .ivy-bw__steps span.step-wrapper:not(:last-child)::after{
    content: "";
    margin-inline-start: 0;
    margin-inline-end: 0;
    display: block;
    position: absolute;
    left: 0;
    top: 13px;
  }

  .ivy-bw__room{
    width: 100%;
    padding: 20px 20px 40px;
    gap: 0;
  }

  .ivy-bw__room.is-disabled{ order: 1; }

  .ivy-bw__room-title{ margin-bottom: 20px; }
  .ivy-bw__room img{ margin-bottom: 20px; }
  .ivy-bw__room-desc{ margin-bottom: 20px; }

  .ph-calendar-container{
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
  }

  #ivy-bw__calendar .time-picker{ max-height: 900px !important; }
  .time-calendar-date-section{ margin-top: 1em; width: 100%; }

  p#booking_info_text::before{ width: 100%; height: 24px; }
  p#booking_info_text{ justify-content: center; }

  p#booking_info_text b:first-child{
    width: 100%;
    text-align: center;
  }

  #ivy-bw__calendar .booking-info-wraper{
    margin: 0 !important;
    padding: 10px 0 !important;
  }

  #ivy-bw__calendar .time-picker{
    padding: 0 20px !important;
    flex: 0 0 100%;
  }

  #ivy-bw__calendar .time-picker li.ph-calendar-date{
    width: 100% !important;
    font-size: 16px !important;
    line-height: 2;
  }

  #ivy-bw__calendar .time-calendar-date-section{ margin-top: 0 !important; }

  #ivy-bw__calendar p#booking_info_text{
    flex-wrap: wrap;
    gap: 10px;
    font-size: 16px;
  }

  section.ivy-bw__step[data-step="4"]{ padding-top: 0; }

  section.ivy-bw__step[data-step="5"] .step-title{ margin-bottom: 5px; }

  button.ivy-bw__to-checkout{ padding: .5rem 1rem !important; }
}

@media (max-width: 640px){
  #ivy-bw__resources{ grid-template-columns: 1fr; }
}

@media (max-width: 500px){
  #ivy-bw__calendar .time-picker-wraper #ph-calendar-time li.ph-calendar-date{
    font-size: 16px !important;
  }
}