/* ============================
   Jazeera Room Selection (New Design)
   Scoped under .jz-room-selection-page so it cannot leak
   into the existing .htlDtlsPics / Antd / etc. styles.
   ============================ */

.jz-room-selection-page {
  --jz-primary: #184b92;
  --jz-primary-dark: #004a97;
  --jz-primary-hover: #0d3a78;
  --jz-sky: #0b97eb;
  --jz-text: #001326;
  --jz-muted: #5e6a78;
  --jz-bg: #e8f3ff;
  --jz-bg-soft: #ecf0f4;
  --jz-border-soft: #eef0f4;
  --jz-success: #38a5e3;
  --jz-success-dark: #38a5e3;
  --jz-danger: #d32f2f;
  --jz-white: #ffffff;

  /* Theme typography defaults (match base.css) */
  --jz-font-regular: 'AvenirRegular', 'BukraRegular';
  --jz-font-heavy:   'AvenirHeavy', 'BukraBold';
  --jz-font-black:   'AvenirBlack', 'BukraBold';

  background-color: var(--jz-bg);
  padding: 20px 0;
  color: var(--jz-text);
  box-sizing: border-box;
  font-family: var(--jz-font-regular);
  font-size: 14px;
  line-height: 1.5;
}

.jz-room-selection-page *,
.jz-room-selection-page *::before,
.jz-room-selection-page *::after {
  box-sizing: border-box;
  font-family: inherit;
}

/* Restore Font Awesome font on icon elements so glyphs render correctly */
.jz-room-selection-page .fa,
.jz-room-selection-page .fas,
.jz-room-selection-page .far,
.jz-room-selection-page .fab,
.jz-room-selection-page .fa::before,
.jz-room-selection-page .fas::before,
.jz-room-selection-page .far::before,
.jz-room-selection-page .fab::before {
  font-family: "Font Awesome 5 Free" !important;
}
/* FA 5 solid icons need font-weight 900 to render the glyph */
.jz-room-selection-page .fa,
.jz-room-selection-page .fas,
.jz-room-selection-page .fa::before,
.jz-room-selection-page .fas::before {
  font-weight: 900 !important;
}
.jz-room-selection-page .fab,
.jz-room-selection-page .fab::before {
  font-family: "Font Awesome 5 Brands" !important;
}

/* Strong / bold elements use AvenirBlack (matches base.css `b, strong` rule) */
.jz-room-selection-page b,
.jz-room-selection-page strong {
  font-family: var(--jz-font-black);
  font-weight: normal;
}

/* ---------- Column gap (left rooms list / right summary) ---------- */
@media (min-width: 992px) {
  .jz-room-selection-page > .row > .col-lg-8 { padding-right: 12px; }
  .jz-room-selection-page > .row > .col-lg-4 { padding-left: 12px; }

  /* Arabic / RTL — flip the gap sides */
  [dir="rtl"] .jz-room-selection-page > .row > .col-lg-8,
  .jz-room-selection-page[dir="rtl"] > .row > .col-lg-8 {
    padding-right: 0;
    padding-left: 12px;
  }
  [dir="rtl"] .jz-room-selection-page > .row > .col-lg-4,
  .jz-room-selection-page[dir="rtl"] > .row > .col-lg-4 {
    padding-left: 0;
    padding-right: 12px;
  }
}

/* On smaller screens the columns stack — give the summary breathing room */
@media (max-width: 991.98px) {
  .jz-room-selection-page > .row > .col-md-12 + .col-md-12 {
    margin-top: 14px;
  }
}

/* ---------- Table Header ---------- */
.jz-rooms-table-header {
  background: var(--jz-white);
  border-radius: 10px;
  padding: 14px 18px;
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  color: var(--jz-primary);
  font-family: var(--jz-font-heavy);
  font-size: 14px;
}

.jz-th-cell { padding: 0 8px; }
.jz-th-cell.jz-room-info-th { flex: 0 0 28%; }
.jz-th-cell.jz-options-th   { flex: 0 0 28%; }
.jz-th-cell.jz-price-th     { flex: 0 0 22%; }
.jz-th-cell.jz-action-th    { flex: 0 0 22%; }

/* ---------- Card ---------- */
.jz-room-card {
  background: var(--jz-white);
  border-radius: 10px;
  margin-bottom: 16px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(0, 19, 38, 0.06);
}

.jz-room-card-grid {
  display: flex;
  flex-wrap: wrap;
}

.jz-room-info-cell {
  flex: 0 0 28%;
  max-width: 28%;
  padding: 16px;
  border-right: 1px solid var(--jz-border-soft);
}

.jz-room-image-wrap {
  position: relative;
  width: 100%;
  height: 130px;
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 12px;
  background: #ddd;
}

.jz-room-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.jz-img-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--jz-white);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  color: var(--jz-text);
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0, 19, 38, 0.25);
}
.jz-img-nav.jz-prev { left: 8px; }
.jz-img-nav.jz-next { right: 8px; }
.jz-img-nav:disabled { opacity: 0.4; cursor: default; }
.jz-nav-arrow-img { width: 10px; height: 10px; object-fit: contain; pointer-events: none; }

.jz-img-dots {
  position: absolute;
  bottom: 8px;
  left: 0;
  right: 0;
  z-index: 2;
  display: flex;
  justify-content: center;
  gap: 4px;
}
.jz-img-dots .jz-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.6);
}
.jz-img-dots .jz-dot.jz-active { background: var(--jz-white); }

.jz-room-name {
  font-size: 15px;
  font-family: var(--jz-font-heavy);
  margin: 0 0 8px 0;
  color: var(--jz-text);
  line-height: 18px;
}

.jz-room-amenities-label {
  font-size: 13px;
  font-family: var(--jz-font-heavy);
  color: var(--jz-text);
  margin-bottom: 6px;
}

.jz-amenities-icons {
  display: flex;
  gap: 12px;
  margin-bottom: 8px;
  color: var(--jz-muted);
  font-size: 14px;
}

.jz-amenities-list {
  margin-bottom: 8px;
}

.jz-amenity-item {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
  font-size: 13px;
  color: var(--jz-text);
}

.jz-amenity-icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  object-fit: contain;
}

.jz-amenity-tick {
  color: var(--jz-success);
  font-size: 12px;
  flex-shrink: 0;
}

.jz-amenity-text {
  font-size: 13px;
}

.jz-amenities-modal-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.jz-see-all-link {
  background: none;
  border: 0;
  padding: 0;
  font-size: 14px;
  color: var(--jz-sky);
  text-decoration: underline;
  cursor: pointer;
  display: inline-block;
  margin-bottom: 10px;
}
.jz-see-all-link:hover { color: var(--jz-primary-dark); }

.jz-room-description {
  font-size: 14px;
  color: var(--jz-muted);
  line-height: 1.5;
  margin: 0;
}

/* ---------- Options ---------- */
.jz-room-options-cell {
  flex: 0 0 72%;
  max-width: 72%;
}

.jz-option-row {
  display: flex;
  align-items: center;
  padding: 16px 18px;
  border-bottom: 1px solid var(--jz-border-soft);
}
.jz-option-row:last-of-type { border-bottom: 0; }

.jz-option-cell { padding: 0 10px; }
.jz-option-cell.jz-options-col { flex: 0 0 39%; }
.jz-option-cell.jz-price-col   { flex: 0 0 30%; }
.jz-option-cell.jz-action-col {
  flex: 0 0 31%;
  display: flex;
  justify-content: flex-end;
}

.jz-mobile-label { display: none; }

.jz-badge-best-value {
  display: inline-block;
  background: #38a5e3;
  color: var(--jz-white);
  font-size: 14px;
  padding:3px 12px;
  border-radius: 6px;
  margin-bottom: 8px;
}

.jz-badge-pack {
  display: inline-block;
  background: var(--jz-primary);
  color: var(--jz-white);
  font-size: 14px;
  font-family: var(--jz-font-heavy);
  padding: 5px 12px;
  border-radius: 5px;
  margin-bottom: 8px;
  letter-spacing: 0.3px;
}

/* ---------- Pack row (stacked sub-rows + single action column) ---------- */
.jz-pack-row {
  display: flex;
  align-items: stretch;
  padding: 0 !important;
  border-bottom: 1px solid var(--jz-border-soft);
  border-bottom: #184b92 solid 1px;
}

.jz-pack-rooms-stack {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}

.jz-pack-sub-row {
  display: flex;
  align-items: center;
  padding: 16px 18px;
  border-bottom: 1px solid var(--jz-border-soft);
}
.jz-pack-sub-row:last-child { border-bottom: 0; }

/* Within a sub-row, options + price split the available width.
   The pack action column lives outside, so options/price percentages
   here are relative to the stack (not the whole row). */
.jz-pack-sub-row .jz-option-cell.jz-options-col { flex: 0 0 56%; }
.jz-pack-sub-row .jz-option-cell.jz-price-col   { flex: 0 0 44%; }

.jz-pack-action {
  flex: 0 0 31%;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 16px 18px;
  border-left: 1px solid var(--jz-border-soft);
}

/* Mobile: collapse pack to plain stacked rows */
@media (max-width: 767px) {
  .jz-pack-row { flex-direction: column; }
  .jz-pack-action {
    flex: 0 0 auto;
    width: 100%;
    border-left: 0;
    border-top: 1px solid var(--jz-border-soft);
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 14px 12px;
  }
  .jz-pack-action .jz-select-room-btn,
  .jz-pack-action .jz-qty-selector {
    margin-left: auto;
  }
  .jz-pack-sub-row {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    padding: 14px 12px;
  }
  .jz-pack-sub-row .jz-option-cell.jz-options-col,
  .jz-pack-sub-row .jz-option-cell.jz-price-col {
    flex: 0 0 100%;
    max-width: 100%;
    padding: 0;
  }
}

.jz-meal-text {
  font-size: 13px;
  font-family: var(--jz-font-heavy);
  color: var(--jz-text);
  margin-bottom: 6px;
}

.jz-non-refundable,
.jz-refundable {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  margin-bottom: 6px;
  cursor: pointer;
}
.jz-non-refundable { color: var(--jz-danger); }
.jz-refundable    { color: var(--jz-success-dark); }
.jz-non-refundable .jz-info-icon,
.jz-refundable .jz-info-icon { color: var(--jz-muted); }

.jz-guests-info {
  font-size: 14px;
  color: var(--jz-muted);
  display: flex;
  align-items: center;
  gap: 6px;
}

.jz-price-line {
  font-size: 16px;
  font-family: var(--jz-font-heavy);
  color: var(--jz-text);
  margin-bottom: 6px;
}
.jz-price-currency {
  font-size: 13px;
  color: var(--jz-muted);
  font-family: var(--jz-font-regular);
}
.jz-price-value {
  font-size: 18px;
  font-family: var(--jz-font-heavy);
  color: var(--jz-text);
}
.jz-price-strike {
  font-size: 14px;
  color: var(--jz-muted);
  text-decoration: line-through;
  margin-inline-start: 6px;
}

.jz-basic-discount {
  font-size: 14px;
  color: var(--jz-success-dark);
  display: flex;
  align-items: center;
  gap: 5px;
}

.jz-select-room-btn {
  background: var(--jz-white);
  border: 1px solid var(--jz-primary);
  color: var(--jz-primary);
  font-size: 14px;
  font-family: var(--jz-font-heavy);
  padding:10px 20px;
  border-radius: 50px;
  min-width: 130px;
  cursor: pointer;
  transition: all 0.2s ease;
}
.jz-select-room-btn:hover {
  background: var(--jz-primary);
  color: var(--jz-white);
}
.jz-select-room-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  background: var(--jz-white);
  color: var(--jz-muted);
  border-color: var(--jz-border-soft);
}

.jz-qty-selector {
  display: flex;
  align-items: center;
  background: var(--jz-primary);
  border-radius: 50px;
  color: var(--jz-white);
  min-width: 130px;
  justify-content: space-between;
  padding: 6px 15px;
}
.jz-qty-btn {
  background: transparent;
  border: none;
  color: var(--jz-white);
  width: 30px;
  height: 32px;
  font-size: 16px;
  cursor: pointer;
}
.jz-qty-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.jz-qty-text {
  font-size: 13px;
  font-family: var(--jz-font-heavy);
  color: var(--jz-white);
  white-space: nowrap;
}

.jz-show-more-btn {
  width: 100%;
  background: #d2e3fa;
  border: none;
  padding: 10px;
  font-size: 13px;
  font-family: var(--jz-font-heavy);
  color: var(--jz-primary);
  cursor: pointer;
}
.jz-show-more-btn:hover { background: var(--jz-bg-soft); }

/* ---------- Right Sidebar ---------- */
.jz-package-summary {
  background: var(--jz-white);
  border-radius: 10px;
  padding: 18px;
  position: sticky;
  top: 20px;
  box-shadow: 0 1px 2px rgba(0, 19, 38, 0.06);
}

.jz-summary-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 14px;
  flex-wrap: wrap;
  gap: 8px;
}

.jz-for-rooms-text {
  font-size: 13px;
  color: var(--jz-muted);
}

/* Right column: package label stacked above the price, aligned to the end */
.jz-summary-price-col {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: end;
}

.jz-package-fare-label {
  font-size: 12px;
  color: var(--jz-muted);
  margin-bottom: 2px;
}

.jz-total-price {
  font-size: 18px;
  font-family: var(--jz-font-heavy);
  color: var(--jz-text);
}
.jz-total-currency {
  font-size: 13px;
  color: var(--jz-muted);
  font-family: var(--jz-font-regular);
}
.jz-base-price-highlight{
	font-size: 14px;
}
.jz-total-strike {
  font-size: 14px;
  color: var(--jz-muted);
  text-decoration: line-through;
  margin-inline-start: 6px;
}

.jz-reserve-btn {
  width: 100%;
  background: var(--jz-primary);
  color: var(--jz-white);
  border: none;
  padding: 12px;
  font-size: 14px;
  font-family: var(--jz-font-heavy);
  border-radius: 50px;
  cursor: pointer;
  margin-bottom: 12px;
  transition: background 0.2s;
}
.jz-reserve-btn:hover:not(:disabled) { background: var(--jz-primary-hover); }
.jz-reserve-btn:disabled { opacity: 0.6; cursor: not-allowed; }

.jz-benefits-list {
  list-style: none;
  padding: 0;
  margin: 0 0 14px 0;
  font-size: 13px;
  color: var(--jz-text);
}
.jz-benefits-list li { padding: 2px 0; }

.jz-your-package-title {
  font-size: 14px;
  font-family: var(--jz-font-heavy);
  color: var(--jz-text);
  margin-bottom: 10px;
}

.jz-package-room-line {
  font-size: 13px;
  color: var(--jz-text);
  margin-bottom: 4px;
  font-family: var(--jz-font-heavy);
}
.jz-package-room-meta {
  font-size: 14px;
  color: var(--jz-muted);
  margin-bottom: 4px;
}

.jz-package-non-refundable {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--jz-danger);
  font-size: 14px;
  margin-bottom: 8px;
}
.jz-package-refundable {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--jz-success-dark);
  font-size: 14px;
  margin-bottom: 8px;
}

.jz-package-divider {
  border: 0;
  border-top: 1px solid var(--jz-border-soft);
  margin: 8px 0;
}

.jz-empty-summary {
  font-size: 13px;
  color: var(--jz-muted);
  margin: 8px 0;
}


.jz-pack-action .jz-tax-fee-line{
      font-size: 13px;
}
.jz-pack-action .jz-price-wrapper{
    padding-top: 10px;
}
.jz-pack-action .jz-price-line{
    line-height: 22px;
    margin-bottom: 0;
	text-align: center;
}
.jz-pack-action .jz-price-value{
    font-size: 14px;
}

.jz-package-summary .jz-reserve-btn{
	color: #1c1b1f !important;
	background: #ffce00;
	border: 1px solid #004a97 !important;
}
.jz-package-summary  .jz-reserve-btn:hover:not(:disabled){
	color: #1c1b1f !important;
	background: #ffd423;
	border: 1px solid #004a97 !important;
}


/* ---------- Responsive ---------- */
@media (max-width: 991px) {
  .jz-room-info-cell,
  .jz-room-options-cell {
    flex: 0 0 100%;
    max-width: 100%;
    border-right: 0;
  }
  .jz-room-info-cell {
    border-bottom: 1px solid var(--jz-border-soft);
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
  }
  .jz-room-info-cell .jz-room-image-wrap {
    flex: 0 0 180px;
    height: 130px;
    margin-bottom: 0;
  }
  .jz-room-info-cell .jz-room-info-text {
    flex: 1 1 0;
    min-width: 220px;
  }
  .jz-package-summary {
    position: static;
    margin-top: 16px;
  }
}

@media (max-width: 767px) {
  .jz-rooms-table-header { display: none; }
  .jz-room-info-cell {
    display: block;
    padding: 12px;
  }
  .jz-room-info-cell .jz-room-image-wrap {
    width: 100%;
    height: 180px;
    margin-bottom: 12px;
  }
  .jz-option-row {
    flex-direction: column;
    align-items: stretch;
    padding: 14px 12px;
    gap: 10px;
  }
  .jz-option-cell {
    padding: 0;
    flex: 0 0 100% !important;
    max-width: 100%;
    width: 100%;
  }
  .jz-option-cell.jz-action-col {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
  }
  .jz-option-cell.jz-action-col .jz-select-room-btn,
  .jz-option-cell.jz-action-col .jz-qty-selector {
    margin-left: auto;
  }
  /* Price on one line: label left, amount right (like the rooms row) */
  .jz-option-cell.jz-price-col {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
  }
  .jz-option-cell.jz-price-col .jz-price-line { margin-bottom: 0; }
  .jz-option-cell.jz-price-col .jz-mobile-label { margin-bottom: 0; }
  .jz-option-cell.jz-price-col .jz-option-price-summary,
  .jz-option-cell.jz-price-col .jz-price-wrapper { text-align: right; }
  [dir="rtl"] .jz-option-cell.jz-price-col .jz-option-price-summary,
  [dir="rtl"] .jz-option-cell.jz-price-col .jz-price-wrapper { text-align: left; }
  /* Separate the info block from the price / action lines */
  .jz-option-cell.jz-price-col,
  .jz-option-cell.jz-action-col {
    border-top: 1px dashed var(--jz-border-soft);
    padding-top: 10px;
  }
  .jz-mobile-label {
    display: block;
    font-size: 11px;
    text-transform: uppercase;
    color: var(--jz-muted);
    font-weight: 600;
    margin-bottom: 0;
    letter-spacing: 0.3px;
  }
  .jz-select-room-btn,
  .jz-qty-selector { width: auto; min-width: 120px; }
  .jz-qty-btn { width: 32px; height: 36px; font-size: 16px; }
  .jz-price-value { font-size: 18px; }
  .jz-price-line { font-size: 14px; }
  .jz-package-summary { padding: 14px; }
}

@media (max-width: 480px) {
  .jz-rooms-table-header { display: none !important; }
  .jz-room-card { border-radius: 6px; }
  .jz-room-info-cell .jz-room-image-wrap { height: 160px; }
  .jz-room-name { font-size: 14px; }
  .jz-badge-best-value { font-size: 11px; padding: 4px 10px; }
  .jz-badge-pack { font-size: 12px; padding: 4px 10px; }
  .jz-reserve-btn { padding: 13px; font-size: 15px; }
  .jz-total-price { font-size: 17px; }
  .jz-price-value { font-size: 16px; }
  .jz-meal-text { font-size: 12px; }
  .jz-non-refundable,
  .jz-refundable { font-size: 12px; }
  .jz-guests-info { font-size: 12px; }
  .jz-select-room-btn { min-width: 110px; padding: 8px 14px; font-size: 13px; }
  .jz-qty-selector { min-width: 110px; padding: 5px 10px; }
  .jz-qty-text { font-size: 12px; }
  .jz-option-row,
  .jz-pack-sub-row { padding: 12px 10px; }
  .jz-pack-action { padding: 12px 10px; }
}

/* ============================
   RTL / Arabic flipping
   With dir="rtl" on the wrapper, flexbox already reverses item order
   automatically — we only flip the explicitly directional rules
   (borders, absolute-positioned arrows, justify-content end/start, etc.)
   ============================ */
[dir="rtl"] .jz-room-selection-page,
.rtl .jz-room-selection-page { direction: rtl; text-align: right; }

/* Card divider: flip from right border to left border */
[dir="rtl"] .jz-room-info-cell,
.rtl .jz-room-info-cell {
  border-right: 0;
  border-left: 1px solid var(--jz-border-soft);
}

/* Image carousel arrows: swap left/right anchoring */
[dir="rtl"] .jz-img-nav.jz-prev,
.rtl .jz-img-nav.jz-prev { left: auto; right: 8px; }
[dir="rtl"] .jz-img-nav.jz-next,
.rtl .jz-img-nav.jz-next { right: auto; left: 8px; }

/* Action column was justify-content: flex-end for LTR
   In RTL flex-end is the LEFT edge — we still want the button on the
   trailing side of the row, which is now the left, so leave as-is.
   But on desktop the action column should sit at the inline-end of the
   row — flex auto-handles this thanks to dir="rtl". */

/* Pack-row action column border: flip side */
[dir="rtl"] .jz-pack-action,
.rtl .jz-pack-action {
  border-left: 0;
  border-right: 1px solid var(--jz-border-soft);
}

/* Mobile: when option-row stacks, RTL doesn't need to do anything special
   because the column direction isn't directional. We just need to make
   sure the room-info-cell border swaps properly. */
@media (max-width: 991px) {
  [dir="rtl"] .jz-room-info-cell,
  .rtl .jz-room-info-cell {
    border-left: 0;
    border-bottom: 1px solid var(--jz-border-soft);
  }
}

/* Mobile pack-row action column: top border instead of side border */
@media (max-width: 767px) {
  [dir="rtl"] .jz-pack-action,
  .rtl .jz-pack-action {
    border-right: 0;
    border-top: 1px solid var(--jz-border-soft);
  }
}

/* ============================
   Mobile Fixed Reserve Bar
   Hidden on desktop, fixed at bottom on mobile (≤767px)
   ============================ */
.jz-mobile-reserve-bar {
  display: none;
}

@media (max-width: 767px) {
  /* Show fixed bottom bar */
  .jz-mobile-reserve-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 999;
    background: #fff;
    padding: 12px 16px;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.15);
  }

  /* Price area takes remaining space */
  .jz-mobile-bar-price {
    flex: 1;
    min-width: 0;
  }

  /* Larger price emphasis in the mobile reserve bar */
  .jz-total-currency {
    font-size: 18px;
  }
  .jz-base-price-highlight {
    font-size: 18px;
  }

  /* Reserve button in the bar */
  .jz-mobile-reserve-btn {
    width: auto;
    min-width: 120px;
    margin-bottom: 0 !important;
    padding: 10px 16px;
    white-space: nowrap;
    font-size: 14px;
  }

  /* Hide the desktop sidebar on mobile since we have the fixed bar */
  .col-lg-4.col-md-12 .jz-package-summary {
    display: none;
  }

  /* Add bottom padding so page content is not hidden behind the fixed bar */
  .jz-room-selection-page {
    padding-bottom: 0px;
  }

  /* RTL: explicitly set direction on position:fixed bar (inheritance not reliable) */
  /* Natural RTL flex order: price (first child) on RIGHT, button (second) on LEFT */
  [dir="rtl"] .jz-mobile-reserve-bar,
  .rtl .jz-mobile-reserve-bar {
    direction: rtl;
  }

  /* RTL: price area — text right-aligned, Arabic direction */
  [dir="rtl"] .jz-mobile-bar-price,
  .rtl .jz-mobile-bar-price {
    text-align: right;
    direction: rtl;
  }

  /* RTL: tax/fee line right-aligned */
  [dir="rtl"] .jz-mobile-reserve-bar .jz-tax-fee-line,
  .rtl .jz-mobile-reserve-bar .jz-tax-fee-line {
    text-align: right;
    direction: rtl;
  }
}