body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

main {
    flex-grow: 1;
}

.container-online-order {
  max-width: 600px; /*border: 1px solid #d3d3d3;*/
  position: relative;
}
.container-online-order-vue {
  /*margin-top: 120px;*/
}
/*.card-img { height: 100%; }*/
.card-body {
  padding: 0 1.25rem;
}
.text-ltr {
  direction: ltr;
  text-align: left;
}
.new-search {
  display: none;
}
.range-date-choose {
  font-size: 1rem;
  cursor: pointer;
}
.required-asterisk {
  color: red;
}
.page-content p {
  padding: 0;
  margin: 0;
}
.modal-popup-footer {
  padding: 15px;
  border-top: 1px solid #eceeef;
}

.reservation_sub_desc {
  font-size: 0.8rem;
}
.ooa-info-opener {
  text-decoration: underline;
  font-size: 70%;
  color: inherit;
}

.navbar-phone, .navbar-website {
  display: inline-block;
  padding-top: 0.3125rem;
  padding-bottom: 0.3125rem;
  margin-right: 1rem;
  /*font-size: 1.25rem;*/
  line-height: inherit;
  white-space: nowrap;
}

.navbar-dark .navbar-phone, .navbar-dark .navbar-website {
  color: #fff !important;
}

.text-to-right {
  text-align: right;
}

.text-to-left {
  text-align: left;
  direction: ltr;
}

.header-style {
  min-height: 100px;
}

.header-logo {
  border-top: 1px solid rgba(0,0,0,.1);
  border-bottom: 1px solid rgba(0,0,0,.1);
  padding: 0.5rem;
}

.header-logo img {
  max-width: 100%;
  max-height: 200px;
}

.header-logo h1 {
  font-size: 1.5rem;
}

#oo-v2 {}
#oo-v2 #search-results { position: relative; }
.cart-desktop { width: 100%; }
body.rtl #oo-v2 #search-results .cart-desktop { position: absolute; left: 0; top: 0; }
body.ltr #oo-v2 #search-results .cart-desktop { position: absolute; right: 0; top: 0; }
/* order-v2 cart fallback: the scroll handler adds this only when the cart cannot fit in the
   viewport below its floating top offset. Normal document flow keeps its submit button reachable. */
body.rtl #oo-v2 #search-results .cart-desktop.cart-desktop--static,
body.ltr #oo-v2 #search-results .cart-desktop.cart-desktop--static { position: static; }

body.rtl .navbar-logo { position: absolute; right:20px; }
body.ltr .navbar-logo { position: absolute; left:20px; }
body.rtl .header-wrapper .navbar { direction: ltr; }
body.ltr .header-wrapper .navbar { direction: rtl; }

body.rtl .apartment-order-price { float: right; }
body.ltr .navbar-logo { float: left; }
body.rtl .apartment-avail-add, body.rtl .apartment-not-avail { float: left; }
body.ltr .apartment-avail-add, body.ltr .apartment-not-avail { float: right; }

.navbar-logo .logo { max-height: 74px; max-width: 200px; }

/*
@media (max-width: 480px) {
    .date-picker-wrapper .month-wrapper table { width: 160px; }
    .date-picker-wrapper .month-wrapper table.month2 { width: 160px; }
    .date-picker-wrapper .gap { width: 5px; }
}
*/

.range-date-opener { }
.range-date-opener span.active {
  border-bottom: 2px solid #008489;
}
#range-date-form .btn-outline-secondary:focus,
#range-date-form .btn-outline-secondary.focus {
  color: #6c757d;
  background-color: transparent;
}
#range-date-form .btn-outline-dark:focus,
#range-date-form .btn-outline-dark.focus {
  color: #343a40;
  background-color: transparent;
}
.new-search-opener {
  cursor: pointer;
}

.date-picker-wrapper .gap { height: 50px !important; }
.date-picker-wrapper-single-custom { width: 90% !important; }
.date-picker-wrapper-single-custom .month1, .single-month .month1 { width: 100% !important; }
.date-picker-wrapper .next,
.date-picker-wrapper .prev {
  font-size: 150%;
}

.company-logo-print {
  max-width: 100%;
  max-height: 100px;
}

.reservation-pay-iframe {
  width: 100%;
  height: 800px;
  border: 0;
}

#order-contact label {
  padding: 0px;
}
#order-contact .form-check-label {
  padding-right: 2.25rem;
  padding-left: inherit;
}


.cursor-pointer {
  cursor: pointer;
}

@media (max-width: 480px) {
  .app-container {
    /*margin-bottom: 320px;*/
  }
  .date-picker-wrapper.no-topbar {
    left: 1.5% !important;
    z-index: 1030;
  }
  .max {
    height: 300px !important;
  }
}

@media (max-width: 320px) {
  .card-header {
    padding: 0.75rem 0.25rem;
  }
}


.company-images {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-rows: repeat(4, 1fr);
  gap: 20px;
}
.company-images img {
  width: 100%;
  height: 100%;
  aspect-ratio: 1.33;
  object-fit: cover;
  box-shadow: 5px 5px 3px #00000047;
  border-radius: 5px;
}
.apartment.card {
  border-radius: 5px;
  box-shadow: 5px 5px 3px #00000047;
}
.company-images img:nth-of-type(1) {
  grid-area: 1 / 1 / 4 / 4;
}
.company-images img:nth-of-type(2) {
  grid-area: 1 / 4 / 3 / 6;
}
.company-images img:nth-of-type(3) {
  grid-area: 3 / 4 / 5 / 6;
}

#company-images-carousel {
  height: 300px;
  overflow: hidden;
}

#company-images-carousel .carousel-item img {
  height: 300px;
  width: 100%;
  display: block;
  object-fit: cover;
}

.company-images-container {
  position: relative;
  padding: 20px 0;
}

.company-images-container .show-all-images {
  font-weight: 500;
  
  cursor: pointer;
  position: absolute;
  right: 0;
  top: 50%;
  background-color: #fff;
  padding: 10px;
  border-radius: 10px 0 0 10px;
  box-shadow: 0px 5px 0px #00000047;
  transform: translateY(-50%);
}

body.ltr .company-images-container .show-all-images {
    right: unset;
    left: 0;
    border-radius: 0 10px 10px 0;
}

.images-showcase {
  width: 100%;
  display: grid;
  overflow: hidden;
  grid-template-columns: 50% 50%;
  gap: 10px;
}

.images-showcase .item img {
width: 100%;
object-fit: cover;
height: 100%;
}

.images-showcase .item.horizontal {
  grid-column: span 2;
}

.oo-footer {
    margin-top: 3rem;
    background-color: rgba(0,0,0,.03);
    border-top: 1px solid rgba(0, 0, 0, .125);
}
.oo-footer a { color: inherit; }

/* Shared progress/step indicator (partials/components/step_indicator.blade.php).
   position: sticky, not fixed: this theme's own header (order_header.blade.php) is not
   itself sticky/fixed, so there's no existing anchor to sit "under" - sticking this element
   itself at top:0 is the safest choice, confirmed against the rest of this stylesheet to
   avoid conflicting with the mobile cart bar (.fixed-bottom, bottom-anchored, no top z-index
   interaction) and Bootstrap modals (backdrop 1040 / modal 1050) - this sits well below both. */
.step-indicator {
    position: sticky;
    top: 0;
    z-index: 900;
    background: #fff;
    padding: .75rem 0;
    margin-bottom: 1rem;
    border-bottom: 1px solid rgba(0, 0, 0, .08);
}
.step-indicator-item {
    color: #6c757d;
}
.step-indicator-badge {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1px solid #ced4da;
    font-size: .8rem;
    font-weight: 500;
    margin-inline-end: .5rem;
}
.step-indicator-item--current .step-indicator-badge {
    background: #28a745;
    border-color: #28a745;
    color: #fff;
}
.step-indicator-item--current {
    color: #212529;
    font-weight: 500;
}
.step-indicator-item--done .step-indicator-badge {
    border-color: #28a745;
    color: #28a745;
}
.step-indicator-item--done {
    color: #28a745;
}
.step-indicator-connector {
    width: 2rem;
    height: 1px;
    background: #ced4da;
    margin: 0 .5rem;
}
@media (max-width: 575px) {
    .step-indicator-connector {
        width: 1rem;
    }
}

/* Persistent prev/next nav row, sharing the same sticky container as the step list above
   (not a second sticky element) so both move together. */
.step-indicator-nav-row {
    gap: .5rem;
}
.step-indicator-steps {
    flex: 1 1 auto;
}
.step-nav-prev,
.step-nav-next {
    flex: 0 0 auto;
    white-space: nowrap;
}
.step-nav-spacer {
    /* Keeps the step list visually centered on step 4, where no "next" button renders. */
    flex: 0 0 auto;
    min-width: 1px;
}
@media (max-width: 575px) {
    .step-nav-prev,
    .step-nav-next {
        font-size: .75rem;
        padding: .25rem .5rem;
    }
}

body.rtl .btn_accessibility,
body.rtl .btn_accessibility_action {
    right: auto !important;
    left: 10px !important;
}