/* ==========================================================================
   booking-ui11.css
   ASA-Booking public-site UI, cloned 1:1 for the agency panel.

   Class names are booking's OWN (.card-package, .room-item, .cover, .title,
   .capacity-box, .diet-box, .night-price-box, .btn-select, .card__dateil-container,
   .reserve__steps-box, .step__item, .reserve-final-container ...), so the markup
   in the new agency pages is a straight copy of
       reserve/hotelname/hotel.php
       reserve/hotelname/guest_name.php
       reserve/hotelname/reserve_accept.php
   with only the PHP data expressions swapped for the agency queries.

   Every value below - colours, radii, sizes, shadows - was read out of the
   compiled booking bundle  reserve/hotelname/asset/theme/main.js  (the public
   site keeps its whole stylesheet inside that webpack bundle; there is no
   source .css to copy). Where a rule is reproduced verbatim the original
   selector is quoted above it.

   Everything is scoped under .bk11 on <body> so loading this beside app4.css
   cannot restyle any other page in the panel.
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. Tokens - booking's palette, verbatim
   -------------------------------------------------------------------------- */
.bk11 {
    --bk-green:      rgb(9, 178, 136);      /* #09b288  primary            */
    --bk-green-dark: rgb(25, 128, 102);     /* #198066  hover / active     */
    --bk-green-pale: rgb(223, 235, 229);    /* #dfebe5  soft green fill    */
    --bk-peach:      #f2d0a4;               /* capacity + diet badges      */
    --bk-peach-ink:  #755833;
    --bk-blue:       #3396db;               /* discount badge              */

    --bk-ink:        #424c55;               /* all body copy               */
    --bk-muted:      #757f88;
    --bk-grey:       #999;
    --bk-rule:       #d9d9d9;               /* dividers                    */
    --bk-line:       #d0dbd6;               /* filter borders              */
    --bk-bg:         #f5f5f5;

    --bk-card-shadow: 0rem .25rem 1rem rgba(0, 0, 0, .06);
}

.bk11 {
    background-color: var(--bk-bg) !important;
    color: var(--bk-ink);
    font-family: "primary-font", "IRANYekanX", "IRANYekan", "segoe ui", tahoma, sans-serif;
    font-size: 1rem;
}
.bk11 *, .bk11 *::before, .bk11 *::after { box-sizing: border-box; }
.bk11 a { text-decoration: none; color: inherit; }
.bk11 p { margin: 0; }

/* the funnel pages do not include sidebar4 - reclaim the full width */
.bk11 .bk-main { margin: 0 !important; padding: 0 !important; max-width: 100% !important; }

/* --------------------------------------------------------------------------
   1. Grid subset (booking is Bootstrap 5.3.2; scoped so the panel's own
      bootstrap cannot fight it)
   -------------------------------------------------------------------------- */
.bk11 .container { width: 100%; max-width: 1140px; margin-inline: auto; padding-inline: .75rem; }
.bk11 .row {
    --bs-gutter-x: 1.5rem;
    display: flex; flex-wrap: wrap;
    margin-right: calc(-.5 * var(--bs-gutter-x));
    margin-left:  calc(-.5 * var(--bs-gutter-x));
}
.bk11 .row > * {
    flex-shrink: 0; width: 100%; max-width: 100%;
    padding-right: calc(var(--bs-gutter-x) * .5);
    padding-left:  calc(var(--bs-gutter-x) * .5);
}
.bk11 .col        { flex: 1 0 0%; }
.bk11 .col-auto   { flex: 0 0 auto; width: auto; }
.bk11 .col-2      { flex: 0 0 auto; width: 16.6666666667%; }
.bk11 .col-4      { flex: 0 0 auto; width: 33.3333333333%; }
.bk11 .col-6      { flex: 0 0 auto; width: 50%; }
.bk11 .col-12     { flex: 0 0 auto; width: 100%; }
@media (min-width: 992px) {
    .bk11 .col-lg-auto { flex: 0 0 auto; width: auto; }
    .bk11 .mt-lg-0   { margin-top: 0 !important; }
    .bk11 .mt-lg-3   { margin-top: 1rem !important; }
    .bk11 .col-lg-2  { flex: 0 0 auto; width: 16.6666666667%; }
    .bk11 .col-lg-4  { flex: 0 0 auto; width: 33.3333333333%; }
    .bk11 .col-lg-6  { flex: 0 0 auto; width: 50%; }
    .bk11 .col-lg-8  { flex: 0 0 auto; width: 66.6666666667%; }
    .bk11 .col-lg-10 { flex: 0 0 auto; width: 83.3333333333%; }
}
.bk11 .d-flex   { display: flex !important; }
.bk11 .d-block  { display: block !important; }
.bk11 .d-none   { display: none !important; }

/* The .d-lg-* responsive utilities MUST come after .d-none. Bootstrap relies on
   source order here: `d-none d-lg-flex` means hidden on phones, flex on desktop,
   and both rules are !important with the same specificity, so whichever is
   declared last wins. Having .d-none last kept the room sort chips, the
   side-nav rail and the divider line hidden on desktop. */
@media (min-width: 992px) {
    .bk11 .d-lg-none   { display: none !important; }
    .bk11 .d-lg-flex   { display: flex !important; }
    .bk11 .d-lg-inline { display: inline !important; }
    .bk11 .d-lg-block  { display: block !important; }
}
.bk11 .flex-column { flex-direction: column !important; }
.bk11 .flex-wrap   { flex-wrap: wrap !important; }
.bk11 .align-items-center  { align-items: center !important; }
.bk11 .align-items-start   { align-items: flex-start !important; }
.bk11 .align-self-end      { align-self: flex-end !important; }
.bk11 .justify-content-between { justify-content: space-between !important; }
.bk11 .justify-content-center  { justify-content: center !important; }
.bk11 .justify-content-start   { justify-content: flex-start !important; }
.bk11 .text-center { text-align: center !important; }
.bk11 .text-start  { text-align: start !important; }
.bk11 .w-100 { width: 100% !important; }
.bk11 .gap-1 { gap: .25rem !important; }
.bk11 .gap-2 { gap: .5rem !important;  }
.bk11 .gap-3 { gap: 1rem !important;   }
.bk11 .mt-1 { margin-top: .25rem !important; }
.bk11 .mt-2 { margin-top: .5rem !important;  }
.bk11 .mt-3 { margin-top: 1rem !important;   }
.bk11 .mt-4 { margin-top: 1.5rem !important; }
.bk11 .mb-0 { margin-bottom: 0 !important; }
.bk11 .mb-2 { margin-bottom: .5rem !important; }
.bk11 .mb-3 { margin-bottom: 1rem !important; }
.bk11 .mb-5 { margin-bottom: 3rem !important; }
.bk11 .px-0 { padding-inline: 0 !important; }
.bk11 .text-success { color: var(--bk-green) !important; }
.bk11 .text-danger  { color: #ef0e0e !important; }

/* --------------------------------------------------------------------------
   2. Buttons - booking derives every button from Bootstrap .btn
   -------------------------------------------------------------------------- */
.bk11 .btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .35rem;
    padding: .375rem .75rem;
    font-size: 1rem; font-weight: 400; line-height: 1.5;
    border: 1px solid transparent; border-radius: .375rem;
    cursor: pointer; font-family: inherit;
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out;
}
.bk11 .btn:disabled, .bk11 .btn.disabled { opacity: .65; pointer-events: none; }

/* .btn-success, section.rooms .card-package .btn-select { --bs-btn-bg: rgb(9,178,136); ... } */
.bk11 .btn-success,
.bk11 .btn-select,
.bk11 .btn-accept-reserve {
    color: #fff;
    background-color: var(--bk-green);
    border-color: var(--bk-green);
    font-weight: 700;
}
.bk11 .btn-success:hover,
.bk11 .btn-select:hover,
.bk11 .btn-accept-reserve:hover {
    color: #fff;
    background-color: var(--bk-green-dark);
    border-color: var(--bk-green-dark);
}

/* .btn-more, .hotel__about-text-btn { border-radius:50rem;display:flex;align-items:center;gap:3px;margin:auto;padding:4px 12px } */
.bk11 .btn-more {
    border-radius: 50rem; display: flex; align-items: center; gap: 3px;
    margin: auto; padding: 4px 12px;
    color: var(--bk-green-dark); border: 1px solid var(--bk-green);
    background-color: transparent;
}
.bk11 .btn-more:hover { background-color: var(--bk-green-pale); }

/* --------------------------------------------------------------------------
   3. Section divider   (verbatim)
      .section-divider{display:flex;align-items:center;gap:.8rem;margin:.9rem 0}
   -------------------------------------------------------------------------- */
.bk11 .section-divider { display: flex; align-items: center; gap: .8rem; margin: .9rem 0; }

/* .section-divider>p.divider-title{white-space:nowrap;color:#424c55;font-weight:bolder;font-size:1.75rem;margin:0;order:1} */
.bk11 .section-divider > p.divider-title,
.bk11 .section-divider > .divider-title {
    white-space: nowrap; color: var(--bk-ink); font-weight: bolder;
    font-size: 1.75rem; margin: 0; order: 1;
}
/* .section-divider>p.divider-info{white-space:nowrap;margin:0;font-size:.875rem;color:#424c55;order:2} */
.bk11 .section-divider > .divider-info {
    white-space: nowrap; margin: 0; font-size: .875rem; color: var(--bk-ink); order: 2;
}
/* .section-divider>hr.divider-line{order:3;width:100%;border:1px solid #d9d9d9;border-radius:50rem} */
.bk11 .section-divider > hr.divider-line {
    order: 3; width: 100%; border: 1px solid var(--bk-rule); border-radius: 50rem;
    margin: 0; opacity: 1;
}
/* .divider-icon{...;min-width:12px;height:28px}  - the little green bracket */
.bk11 .divider-icon {
    min-width: 12px; height: 28px; order: 0;
    background: linear-gradient(var(--bk-green), var(--bk-green)) no-repeat center / 4px 100%;
    border-radius: 50rem;
}
.bk11 .divider-inline { flex: 1; height: 1px; background: var(--bk-rule); order: 3; }

/* --------------------------------------------------------------------------
   4. Hotel page header  (hotel.php)
   -------------------------------------------------------------------------- */
.bk11 .hotel-head h1 { font-size: 1.75rem; font-weight: bolder; color: var(--bk-ink); margin: 0; }
.bk11 .hotel-head .icon { color: var(--bk-ink); font-size: 1.1rem; }
.bk11 .rating-wrapper {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 2rem; height: 2rem; padding-inline: .4rem;
    border-radius: .5rem; background-color: var(--bk-green-pale);
    color: var(--bk-green-dark); font-weight: 700;
}
.bk11 .star-icon { color: #f5a623; }

/* gallery — booking's exact desktop grid (hotel.php:2305-2360)
     #gallery-desktop-box { display:grid; gap:1rem; grid-template-columns: 7fr 3fr 3fr }
     .gallery-item        { background-size:cover; background-position:center; border-radius:20px }
   The cover spans both rows; each thumb row is ~170px, so the whole block is
   170*2 + 16 = 356px tall instead of stretching to the image's own size. */
.bk11 .hotel-gallery {
    display: grid;
    grid-template-columns: 7fr 3fr 3fr;
    grid-auto-rows: 170px;
    gap: 1rem;
    margin-top: 1rem;
}
.bk11 .hotel-gallery > .gallery__item {
    border-radius: 20px;
    overflow: hidden;
    background-color: var(--bk-green-pale);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    position: relative;
    min-height: 0;
    min-width: 0;
}
.bk11 .hotel-gallery > .gallery__item:first-child { grid-row: span 2; }
/* the photo fills its box without distorting - object-fit does the cropping */
.bk11 .hotel-gallery > .gallery__item img,
.bk11 .hotel-gallery > .gallery__item svg {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}
/* booking darkens the 5th tile and puts the button on it */
.bk11 .hotel-gallery > .gallery__item:nth-child(5)::after {
    content: "";
    position: absolute; inset: 0;
    background: rgba(0, 0, 0, .3);
}
.bk11 .gallery__more {
    position: absolute;
    inset-inline-start: 50%;
    top: 50%;
    transform: translate(50%, -50%);
    z-index: 1;
    background: rgba(255, 255, 255, .92);
    color: var(--bk-ink);
    border-radius: 50rem;
    padding: .3rem 1rem;
    font-size: .875rem;
    font-weight: 700;
    white-space: nowrap;
}

/* --------------------------------------------------------------------------
   5. Room sort chips   (verbatim)
      .room-filter-container{gap:.3rem}
      .hotel-amenities-filter-btn-container>.btn__room-filter{
        background-color:rgba(0,0,0,0);color:#424c55;padding:.25rem .75rem;
        border-radius:50rem;font-weight:400;font-size:.875rem;
        border:1px solid rgba(23,42,58,.2)!important}
      :hover/.btn__selected{color:#fff;background-color:#198066;border-color:#198066}
   -------------------------------------------------------------------------- */
.bk11 .room-filter-container { display: flex; gap: .3rem; flex-wrap: wrap; }
.bk11 .btn__room-filter {
    background-color: rgba(0, 0, 0, 0);
    color: var(--bk-ink);
    padding: .25rem .75rem;
    border-radius: 50rem;
    font-weight: 400;
    font-size: .875rem;
    border: 1px solid rgba(23, 42, 58, .2);
}
.bk11 .room-filter-container > .btn__room-filter:hover,
.bk11 .room-filter-container > .btn__room-filter.btn__selected {
    color: #fff; background-color: var(--bk-green-dark); border-color: var(--bk-green-dark);
}

/* --------------------------------------------------------------------------
   6. Room card   section.rooms .card-package   (verbatim)
      .card-package{background-color:#fff;box-shadow:0rem .25rem 1rem rgba(0,0,0,.06);
                    border-radius:1.25rem;margin:.85rem 0}
      .card-package>.room-item{padding:1.75rem 1.5rem}
   -------------------------------------------------------------------------- */
.bk11 section.rooms .card-package {
    background-color: #fff;
    box-shadow: var(--bk-card-shadow);
    border-radius: 1.25rem;
    margin: .85rem 0;
    animation: bk-scale-up-top .4s ease-out both;
}
@keyframes bk-scale-up-top {
    0%   { transform: scale(.8); transform-origin: 50% 0; }
    100% { transform: scale(1);  transform-origin: 50% 0; }
}
.bk11 section.rooms .card-package > .room-item { padding: 1.75rem 1.5rem; }

/* .cover{width:9.875rem;height:9.875rem;border-radius:.75rem} */
.bk11 section.rooms .card-package > .room-item .cover {
    background-position: center; background-repeat: no-repeat; background-size: cover;
    width: 9.875rem; height: 9.875rem; border-radius: .75rem;
    background-color: var(--bk-green-pale); cursor: pointer; overflow: hidden;
}
.bk11 section.rooms .card-package > .room-item .cover img,
.bk11 section.rooms .card-package > .room-item .cover svg {
    width: 100%; height: 100%; object-fit: cover; display: block;
}

/* .title{font-weight:bolder;font-size:1.125rem;color:#424c55;display:inline-block;margin:0} */
.bk11 section.rooms .card-package > .room-item .title {
    font-weight: bolder; font-size: 1.125rem; color: var(--bk-ink);
    display: inline-block; margin: 0;
}

/* .capacity-box{display:flex;justify-content:space-between;align-items:center;height:1.8rem;
                 padding:.2rem .35rem;border-radius:.5rem;gap:.2rem;width:fit-content;
                 background-color:#f2d0a4} */
.bk11 .capacity-box {
    display: flex; justify-content: space-between; align-items: center;
    height: 1.8rem; padding: .2rem .35rem; border-radius: .5rem; gap: .2rem;
    width: fit-content; background-color: var(--bk-peach);
}
/* .capacity-box .item-person{width:.625rem;height:100%} - the little person glyph */
.bk11 .capacity-box .item-person,
.bk11 .capacity-box .item-extra {
    width: .625rem; height: 100%;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 16'><circle cx='5' cy='4' r='3.2'/><path d='M5 8c-2.6 0-4.4 1.7-4.4 3.9V16h8.8v-4.1C9.4 9.7 7.6 8 5 8z'/></svg>") no-repeat center / contain;
            mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 16'><circle cx='5' cy='4' r='3.2'/><path d='M5 8c-2.6 0-4.4 1.7-4.4 3.9V16h8.8v-4.1C9.4 9.7 7.6 8 5 8z'/></svg>") no-repeat center / contain;
    color: #000;
}
/* .capacity-box .item-extra{opacity:65%} */
.bk11 .capacity-box .item-extra { opacity: .65; }
/* .capacity-box .item-plus{position:relative;width:.56rem} + ::after content:"+" */
.bk11 .capacity-box .item-plus { position: relative; width: .56rem; }
.bk11 .capacity-box .item-plus::after {
    content: "+"; position: absolute; top: 3px; transform: translateY(-50%);
    opacity: .65; font-size: 1rem;
}
/* .capacity-box .item-cross{position:relative;width:.56rem} + ::after content:"X" */
.bk11 .capacity-box .item-cross { position: relative; width: .56rem; }
.bk11 .capacity-box .item-cross::after {
    content: "X"; position: absolute; top: 3px; transform: translateY(-50%);
    font-size: 1rem; color: #000;
}
/* .capacity-box .item-number{color:#000;font-weight:400;font-size:18px;line-height:28px;margin:auto} */
.bk11 .capacity-box .item-number {
    color: #000; font-weight: 400; font-size: 18px; line-height: 28px; margin: auto;
}

/* .diet-box{display:flex;gap:.6rem}
   .diet-box>.item{background-color:#f2d0a4;color:#755833;padding:.125rem .5rem;
                   border-radius:.5rem;font-size:.875rem;line-height:1.5rem} */
.bk11 .diet-box { display: flex; gap: .6rem; flex-wrap: wrap; }
.bk11 .diet-box > .item {
    background-color: var(--bk-peach); color: var(--bk-peach-ink);
    padding: .125rem .5rem; border-radius: .5rem;
    font-size: .875rem; line-height: 1.5rem;
    display: flex; align-items: center; justify-content: space-between; gap: .2rem;
}

/* .night-price-box{gap:.29rem} */
.bk11 section.rooms .card-package > .room-item .night-price-box {
    gap: .29rem; align-items: center; color: var(--bk-ink); font-size: .875rem;
}
.bk11 section.rooms .card-package > .room-item .night-price-box .price { font-weight: 700; }
.bk11 section.rooms .card-package > .room-item .night-price-box .currency { font-weight: 300; }
/* .price-info-icon{width:.95rem;height:.95rem} */
.bk11 .price-info-icon {
    width: .95rem; height: .95rem; display: inline-block; border-radius: 50%;
    border: 1px solid var(--bk-muted); color: var(--bk-muted);
    font-size: .7rem; line-height: .85rem; text-align: center;
}
.bk11 .price-info-icon::after { content: "i"; }

/* .btn-box{display:flex;gap:.7rem}
   .btn-facilities,.btn-terms{--bs-btn-color:rgb(25,128,102);--bs-btn-border-color:rgb(25,128,102);
                              --bs-btn-hover-bg:rgb(223,235,229)} */
.bk11 section.rooms .card-package > .room-item .btn-box { display: flex; gap: .7rem; flex-wrap: wrap; }
.bk11 .btn-facilities,
.bk11 .btn-terms,
.bk11 .btn-calendar {
    color: var(--bk-green-dark);
    border: 1px solid var(--bk-green-dark);
    background-color: transparent;
    border-radius: 50rem;
    padding: .25rem .75rem;
    font-size: .875rem; font-weight: 400;
}
.bk11 .btn-facilities:hover,
.bk11 .btn-terms:hover,
.bk11 .btn-calendar:hover {
    color: var(--bk-green-dark); background-color: var(--bk-green-pale);
}

/* .price-container{width:18.9%}
   .price-box{display:flex;justify-content:center;flex-direction:column;align-items:center}
   .price-box .detail-text{margin:auto;color:#424c55;font-size:1rem}
   .price-box .price>.currency{letter-spacing:normal;font-size:1.125rem;line-height:1.938rem;font-weight:300} */
.bk11 section.rooms .card-package > .room-item .price-container { width: 18.9%; }
.bk11 section.rooms .card-package > .room-item .price-container .price-box {
    display: flex; justify-content: center; flex-direction: column; align-items: center;
}
.bk11 section.rooms .card-package > .room-item .price-container .price-box .detail-text {
    margin: auto; color: var(--bk-ink); font-size: 1rem;
}
.bk11 section.rooms .card-package > .room-item .price-container .price-box .price {
    color: var(--bk-ink); font-weight: 700; font-size: 1.375rem; margin: 0;
}
.bk11 section.rooms .card-package > .room-item .price-container .price-box .price > .currency {
    letter-spacing: normal; font-size: 1.125rem; line-height: 1.938rem; font-weight: 300;
}
.bk11 .price-old {
    color: var(--bk-grey); text-decoration: line-through; font-size: .95rem; margin: 0;
}
/* .discount-text{line-height:18px;font-size:10px;font-weight:800;color:#fff;
                  background-color:#3396db;border-radius:1.875rem} */
.bk11 .discount-text {
    line-height: 18px; font-size: 10px; font-weight: 800; color: #fff;
    background-color: var(--bk-blue); border-radius: 1.875rem;
    padding-inline: .5rem; display: inline-block;
}
.bk11 .btn-select { width: 100%; margin-top: .5rem; padding: .5rem 1rem; }

/* .mobile-divider{border:.063rem solid #d9d9d9} */
.bk11 section.rooms .card-package > .room-item .mobile-divider {
    border: .063rem solid var(--bk-rule); opacity: 1; margin: .75rem 0;
}

/* --------------------------------------------------------------------------
   6b. Hotel-list card + filter rail   (list.php)   (verbatim)
       .card-package-page-list-hotel{background-color:#fff;
          box-shadow:0rem .25rem 1rem rgba(0,0,0,.06);border-radius:1.25rem;margin:.85rem 0}
       .card-package-page-list-hotel>.room-item{padding:15px}
       .card-package-page-list-hotel>.room-item .cover{width:11.25rem;height:11.25rem;border-radius:.75rem}
       .card-package>.room-item .price-container-page-hotel-list{width:27.9%}
   -------------------------------------------------------------------------- */
.bk11 section.rooms .card-package-page-list-hotel {
    background-color: #fff; box-shadow: var(--bk-card-shadow);
    border-radius: 1.25rem; margin: .85rem 0;
    animation: bk-scale-up-top .4s ease-out both;
}
.bk11 section.rooms .card-package-page-list-hotel > .room-item { padding: 15px; }
.bk11 section.rooms .card-package-page-list-hotel > .room-item .cover {
    background-position: center; background-repeat: no-repeat; background-size: cover;
    width: 11.25rem; height: 11.25rem; border-radius: .75rem;
    background-color: var(--bk-green-pale); overflow: hidden;
}
.bk11 section.rooms .card-package-page-list-hotel > .room-item .cover img,
.bk11 section.rooms .card-package-page-list-hotel > .room-item .cover svg {
    width: 100%; height: 100%; object-fit: cover; display: block;
}
.bk11 section.rooms .card-package-page-list-hotel > .room-item .title {
    font-weight: bolder; font-size: 1.125rem; color: var(--bk-ink);
    display: inline-block; margin: 0;
}
.bk11 section.rooms .card-package-page-list-hotel > .room-item .btn-box { display: flex; gap: .7rem; flex-wrap: wrap; }
.bk11 section.rooms .card-package-page-list-hotel > .room-item .mobile-divider {
    border: .063rem solid var(--bk-rule); opacity: 1; margin: .75rem 0;
}
/* .card-package .location-box{color:#424c55;font-weight:400;font-size:.875rem} */
.bk11 section.rooms .location-box { color: var(--bk-ink); font-weight: 400; font-size: .875rem; }
/* .card-package .card__our-suggestion-hotel-rating{font-weight:400;color:#424c55;font-size:.875rem} */
.bk11 section.rooms .card__our-suggestion-hotel-rating { font-weight: 400; color: var(--bk-ink); font-size: .875rem; }
/* .card__our-suggestion-discount-info{border-radius:30px;background:rgba(51,150,219,.15);
                                       font-weight:400;color:#3396db;font-size:.875rem;padding:.125rem .5rem} */
.bk11 .card__our-suggestion-discount-info {
    border-radius: 30px; background: rgba(51, 150, 219, .15);
    font-weight: 400; color: var(--bk-blue); font-size: .875rem; padding: .125rem .5rem;
}
.bk11 section.rooms .card-package > .room-item .price-container-page-hotel-list,
.bk11 section.rooms .card-package-page-list-hotel > .room-item .price-container-page-hotel-list { width: 27.9%; }
.bk11 .price-container-page-hotel-list .price-box {
    display: flex; justify-content: center; flex-direction: column; align-items: center;
}
.bk11 .price-container-page-hotel-list .price-box .detail-text { margin: auto; color: var(--bk-ink); font-size: 1rem; }
.bk11 .price-container-page-hotel-list .price-box .price {
    color: var(--bk-ink); font-weight: 700; font-size: 1.375rem; margin: 0;
}
.bk11 .price-container-page-hotel-list .price-box .price > .currency {
    letter-spacing: normal; font-size: 1.125rem; line-height: 1.938rem; font-weight: 300;
}
/* .price-box .discount-box{display:flex;gap:.75rem;margin-top:.2rem}
   .discount-box .price-discount{font-size:1.25rem;text-decoration-line:line-through;color:#757f88} */
.bk11 .price-box .discount-box { display: flex; gap: .75rem; margin-top: .2rem; align-items: center; }
.bk11 .price-box .discount-box .price-discount {
    font-size: 1.25rem; text-decoration-line: line-through; color: var(--bk-muted);
}
/* .card-package-special-offer{border:2px solid #008cff!important;position:relative;overflow:hidden} */
.bk11 section.rooms .card-package-special-offer { border: 2px solid #008cff !important; position: relative; overflow: hidden; }
.bk11 .special-offer-box { color: var(--bk-blue); font-size: .875rem; }

/* --- filter rail --- */
/* .page-hotel-list-filter{border:1px solid #d0dbd6;border-radius:1.25rem} */
.bk11 .page-hotel-list-filter {
    border: 1px solid var(--bk-line); border-radius: 1.25rem;
    background-color: #fff; overflow: hidden; position: sticky; top: 1rem;
}
/* .page-hotel-list-filter .title{border-bottom:1px solid #d0dbd6;padding:1rem;
                                  font-weight:700;color:#424c55;font-size:1rem} */
.bk11 .page-hotel-list-filter .title {
    border-bottom: 1px solid var(--bk-line); padding: 1rem;
    font-weight: 700; color: var(--bk-ink); font-size: 1rem;
    display: flex; align-items: center; justify-content: space-between; gap: .5rem;
}
.bk11 .page-hotel-list-filter .title a { color: var(--bk-green); font-size: .875rem; text-decoration: underline; cursor: pointer; }
/* the five *-filter-container blocks share one rule:
   {padding:1rem;border-bottom:1px solid #d0dbd6;flex-direction:column;gap:.75rem} */
.bk11 .hotel-rating-filter-container,
.bk11 .hotel-accommodation-type-filter-container,
.bk11 .hotel-price-range-filter-container,
.bk11 .hotel-amenities-filter-container,
.bk11 .filter-container {
    display: flex; padding: 1rem; border-bottom: 1px solid var(--bk-line);
    flex-direction: column; gap: .75rem;
}
.bk11 .page-hotel-list-filter > div:last-of-type { border-bottom: 0; }
.bk11 .hotel-rating-filter-title,
.bk11 .accommodation-type-filter-title,
.bk11 .price-range-filter-title,
.bk11 .amenities-filter-title,
.bk11 .filter-item-title {
    font-weight: 700; color: var(--bk-ink); font-size: 1rem; cursor: pointer;
    background: none; border: 0; padding: 0; font-family: inherit;
}
.bk11 .filter-collapse { display: flex; flex-direction: column; gap: .75rem; }
.bk11 .filter-collapse.collapsed { display: none; }
.bk11 .filter-chevron { transition: transform .2s ease; color: var(--bk-muted); }
.bk11 .filter-collapse.collapsed ~ .x, .bk11 .is-collapsed .filter-chevron { transform: rotate(180deg); }
/* .filter__type-box .filter__type-item,.filter__rating-type-box .filter__rating-item
   {display:flex;justify-content:start;align-items:center;gap:.5rem} */
.bk11 .filter__rating-type-box .filter__rating-item,
.bk11 .filter__type-box .filter__type-item,
.bk11 .filter__rating-type-box .filter__type-item {
    display: flex; justify-content: flex-start; align-items: center; gap: .5rem;
}
.bk11 .form-check-input {
    appearance: none; -webkit-appearance: none;
    width: 1.125rem; height: 1.125rem; flex: 0 0 1.125rem; margin: 0;
    border: 1px solid var(--bk-line); border-radius: .25rem; background-color: #fff;
    cursor: pointer; position: relative;
}
.bk11 .form-check-input:checked { background-color: var(--bk-green); border-color: var(--bk-green); }
.bk11 .form-check-input:checked::after {
    content: ""; position: absolute; inset-inline-start: 5px; top: 1px;
    width: 5px; height: 10px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.bk11 .form-check-label { color: var(--bk-ink); font-size: .9375rem; cursor: pointer; }
.bk11 .filter-count { color: var(--bk-muted); font-size: .8125rem; }
.bk11 .scroll-box { max-height: 190px; overflow-y: auto; display: flex; flex-direction: column; gap: .75rem; }
.bk11 .scroll-box::-webkit-scrollbar { width: 6px; }
.bk11 .scroll-box::-webkit-scrollbar-thumb { background: var(--bk-line); border-radius: 50rem; }
/* price slider */
.bk11 .price-range-filter-price-label { display: flex; justify-content: space-between; font-size: .8125rem; color: var(--bk-ink); }
.bk11 .price-range-track { position: relative; height: 6px; border-radius: 50rem; background: var(--bk-line); margin: .85rem .25rem; }
.bk11 .price-range-fill { position: absolute; inset-block: 0; inset-inline: 6% 4%; background: var(--bk-green); border-radius: 50rem; }
.bk11 .price-range-knob { position: absolute; top: 50%; width: 16px; height: 16px; border-radius: 50%; background: #fff; border: 2px solid var(--bk-green); transform: translateY(-50%); }
.bk11 .price-range-knob.min { inset-inline-start: 4%; }
.bk11 .price-range-knob.max { inset-inline-end: 4%; }
.bk11 #filter-price { width: 100%; margin: 0 auto; }
/* sort buttons above the list */
.bk11 .divider__mobile-filter-btn {
    color: var(--bk-ink); border: 1px solid rgba(23, 42, 58, .2);
    background-color: transparent; border-radius: 50rem;
    padding: .25rem .75rem; font-size: .875rem; font-weight: 400;
}
.bk11 .divider__mobile-filter-btn:hover,
.bk11 .divider__mobile-filter-btn.btn__selected {
    color: #fff; background-color: var(--bk-green-dark); border-color: var(--bk-green-dark);
}
/* mobile filter drawer */
.bk11 .filter-backdrop {
    position: fixed; inset: 0; background: rgba(0, 0, 0, .45); z-index: 1040;
    opacity: 0; pointer-events: none; transition: opacity .25s ease;
}
.bk11 .filter-backdrop.show { opacity: 1; pointer-events: auto; }

/* --------------------------------------------------------------------------
   7. Stepper   (verbatim)
      .reserve__steps-box{display:flex;align-items:center;justify-content:center}
      .step__item{min-width:1.5rem;min-height:1.5rem;border:.125rem solid #999;border-radius:50rem}
      .step__item.active{border:.188rem solid #09b288}
      .step__item.passed{border:.188rem solid #09b288;background-color:#09b288}
      .step__item-divider{width:100%;opacity:.2;border:2px dashed #000}
      .reserve__steps-title-box{display:flex;align-items:center;justify-content:space-between}
      .reserve__steps-title-box span{width:9.375rem;max-width:9.375rem;font-weight:400}
      .reserve__steps-title-box span.passed{color:#999}
   -------------------------------------------------------------------------- */
.bk11 .reserve__steps-box { display: flex; align-items: center; justify-content: center; }
.bk11 .reserve__steps-box .step__item {
    min-width: 1.5rem; min-height: 1.5rem;
    border: .125rem solid var(--bk-grey); border-radius: 50rem;
    background-color: #fff;
}
.bk11 .reserve__steps-box .step__item.active { border: .188rem solid var(--bk-green); }
.bk11 .reserve__steps-box .step__item.passed {
    border: .188rem solid var(--bk-green); background-color: var(--bk-green);
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>");
    background-position: center; background-repeat: no-repeat; background-size: .8rem;
}
.bk11 .reserve__steps-box .step__item-divider {
    width: 100%; opacity: .2; border: 2px dashed #000; margin: 0;
}
.bk11 .reserve__steps-box .step__item-divider.passed { border: 2px solid var(--bk-green); opacity: 1; }
.bk11 .reserve__steps-title-box { display: flex; align-items: center; justify-content: space-between; }
.bk11 .reserve__steps-title-box span {
    width: 9.375rem; max-width: 9.375rem; font-weight: 400; color: var(--bk-ink);
}
.bk11 .reserve__steps-title-box span.passed { color: var(--bk-grey); }
@media (min-width: 1200px) { .bk11 .reserve__steps-title-box span { white-space: nowrap; } }

/* --------------------------------------------------------------------------
   8. Guest page: form card   (guest_name.php)   (verbatim)
      .card__form-input{border-radius:1.25rem;padding:0}
      .card__form-input-container{padding:1.5rem 1.5rem}
      .card__form-input p{color:#424c55;font-size:1.125rem;margin:0}
      .card__form-input .form__title{font-weight:800;font-size:1.125rem;color:#424c55}
      .card__form-input .form__input-box>div{margin:0;padding:.4rem}
   -------------------------------------------------------------------------- */
.bk11 .card__form-input { border-radius: 1.25rem; padding: 0; background-color: #fff; box-shadow: var(--bk-card-shadow); }
.bk11 .card__form-input .card__form-input-container { padding: 1.5rem 1.5rem; }
.bk11 .card__form-input p { color: var(--bk-ink); font-size: 1.125rem; margin: 0; }
.bk11 .card__form-input .form__title { font-weight: 800; font-size: 1.125rem; color: var(--bk-ink); }
.bk11 .card__form-input .form__input-box > div { margin: 0; padding: .4rem; }

/* Bootstrap floating labels - booking uses .form-floating everywhere
   .form-floating>.form-control{height:3.68rem;line-height:1.25;padding:1rem .75rem} */
.bk11 .form-floating { position: relative; }
.bk11 .form-floating > .form-control,
.bk11 .form-floating > .form-select {
    height: 3.68rem; line-height: 1.25; padding: 1rem .75rem;
    width: 100%; font: inherit; color: var(--bk-ink);
    background-color: #fff; border: 1px solid var(--bk-line); border-radius: .5rem;
}
.bk11 .form-floating > textarea.form-control { height: auto; min-height: 7rem; }
.bk11 .form-floating > .form-control::placeholder { color: transparent; }
.bk11 .form-floating > .form-control:focus,
.bk11 .form-floating > .form-select:focus { outline: 0; border-color: var(--bk-green); }
.bk11 .form-floating > label {
    position: absolute; top: 0; inset-inline-start: 0; width: 100%; height: 100%;
    padding: 1rem .75rem; overflow: hidden; text-align: start;
    text-overflow: ellipsis; white-space: nowrap; pointer-events: none;
    border: .09rem solid transparent; transform-origin: 0 0; color: var(--bk-muted);
    transition: opacity .1s ease-in-out, transform .1s ease-in-out;
}
.bk11 .form-floating > .form-control:focus ~ label,
.bk11 .form-floating > .form-control:not(:placeholder-shown) ~ label,
.bk11 .form-floating > .form-select ~ label {
    opacity: .65; transform: scale(.85) translateY(-.5rem) translateX(.15rem);
}
.bk11 .form-control { font: inherit; }

/* terms + submit block at the foot of the guest form */
.bk11 .reserve-rules-box {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    background-color: var(--bk-bg); border-radius: 1.25rem; padding: 1rem 1.25rem;
    margin-top: 1rem; flex-wrap: wrap;
}
.bk11 .reserve-rules-box p { font-size: .95rem; }
.bk11 .reserve-rules-box a { color: var(--bk-green-dark); text-decoration: underline; }
.bk11 .reserve-rules-box .btn-select { width: auto; margin: 0; padding: .65rem 2.5rem; }

/* --------------------------------------------------------------------------
   9. Guest page: booking-details card   (verbatim)
      .card__dateil-container .detail__title{font-weight:800;font-size:1.125rem;color:#424c55}
      .detail__room-box{display:flex;flex-direction:column;gap:.6rem}
      .detail__room-item{border-radius:.75rem;padding:8px 12px;background-color:#f5f5f5}
      .detail__room-title{color:#424c55;font-weight:500;font-size:18px;margin:0}
      .room__meal-box{display:flex;gap:.6rem}
      .room__meal-item{background-color:#dfebe5;color:#198066;padding:.125rem .5rem;
                       border-radius:.5rem;font-size:.875rem;line-height:1.5rem}
   -------------------------------------------------------------------------- */
.bk11 .card__dateil-container {
    background-color: #fff; border-radius: 1.25rem; padding: 1.5rem;
    box-shadow: var(--bk-card-shadow);
}
.bk11 .card__dateil-container .detail__title { font-weight: 800; font-size: 1.125rem; color: var(--bk-ink); }
.bk11 .card__dateil-container .detail__room-box { display: flex; flex-direction: column; gap: .6rem; }
.bk11 .card__dateil-container .detail__room-box .detail__room-item {
    border-radius: .75rem; padding: 8px 12px; background-color: var(--bk-bg);
}
.bk11 .card__dateil-container .detail__room-box .detail__room-item .detail__room-title {
    color: var(--bk-ink); font-weight: 500; font-size: 18px; margin: 0;
}
.bk11 .room__meal-box, .bk11 .meal-box { display: flex; gap: .6rem; flex-wrap: wrap; }
.bk11 .room__meal-box > .room__meal-item,
.bk11 .meal-box > .meal-item {
    background-color: var(--bk-green-pale); color: var(--bk-green-dark);
    padding: .125rem .5rem; border-radius: .5rem;
    font-size: .875rem; line-height: 1.5rem;
}
/* check-in / check-out block */
.bk11 .reserve__enter-icon, .bk11 .reserve__exit-icon,
.bk11 .reserve-enter-icon, .bk11 .reserve-exit-icon {
    width: 1.5rem; height: 1.5rem; display: inline-block;
    background: currentColor; color: var(--bk-green-dark);
    -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4'/><polyline points='10 17 15 12 10 7'/><line x1='15' y1='12' x2='3' y2='12'/></svg>") no-repeat center / contain;
            mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4'/><polyline points='10 17 15 12 10 7'/><line x1='15' y1='12' x2='3' y2='12'/></svg>") no-repeat center / contain;
}
.bk11 .reserve__exit-icon, .bk11 .reserve-exit-icon { transform: scaleX(-1); color: #e03131; }
.bk11 .card__dateil-container .reserve__enter-title,
.bk11 .card__dateil-container .reserve__exit-title,
.bk11 .reserve-enter-title, .bk11 .reserve-exit-title {
    margin: 0; color: var(--bk-ink); font-size: 1.125rem;
}
.bk11 .reserve__detail-date {
    margin: 0; margin-top: 4px; color: var(--bk-ink); font-weight: 400; font-size: 1rem;
}
.bk11 .reserve__detail-time {
    margin: 0; margin-top: 4px; color: var(--bk-muted); font-weight: 400; font-size: 1rem;
}
/* .reserve-detail-divider{color:#d9d9d9;border:.063rem solid #d9d9d9} */
.bk11 .reserve-detail-divider,
.bk11 hr.divider { color: var(--bk-rule); border: .063rem solid var(--bk-rule); opacity: 1; margin: 1rem 0; }

.bk11 .reserve__detail-price-title { margin: 0; color: var(--bk-ink); font-weight: 400; font-size: 1rem; }
.bk11 .reserve__detail-price { color: var(--bk-ink); font-weight: 400; font-size: 1rem; }
/* .reserve__total-price{color:#424c55;font-weight:600;font-size:1.125rem;margin:0}
   .reserve__total-price .price-currency{font-weight:300;font-size:1rem} */
.bk11 .reserve__total-price { color: var(--bk-ink); font-weight: 600; font-size: 1.125rem; margin: 0; }
.bk11 .reserve__total-price .price-currency,
.bk11 .price-currency { font-weight: 300; font-size: 1rem; }
.bk11 .reserve__price-old { color: var(--bk-grey); text-decoration: line-through; margin: 0; font-size: .95rem; }

/* --------------------------------------------------------------------------
   10. Review & payment page   (reserve_accept.php)   (verbatim)
       .reserve-final-container .rooms-card{padding:1rem 1.25rem;background-color:#f5f5f5}
       .rooms-card .room-item-card{padding:.5rem .75rem}
       .room-item-card .room-title{color:#424c55;font-weight:500;font-size:18px;margin:0}
       .reserve-final-sticky-container .btn-accept-reserve{width:100%}
   -------------------------------------------------------------------------- */
.bk11 .reserve-final-container .card {
    background-color: #fff; border-radius: 1.25rem; box-shadow: var(--bk-card-shadow); border: 0;
}
.bk11 .reserve-final-container .card-body { padding: 1.5rem; }
.bk11 .reserve-final-container .card-title { font-weight: 800; font-size: 1.125rem; color: var(--bk-ink); }
.bk11 .card-title-icon {
    width: 1.25rem; height: 1.25rem; display: inline-block; border-radius: .25rem;
    background-color: var(--bk-green-pale);
}
.bk11 .reserve-final-container .rooms-card,
.bk11 .rooms-card { padding: 1rem 1.25rem; background-color: var(--bk-bg); border-radius: 1.25rem; }
.bk11 .rooms-card .room-item-card { padding: .5rem .75rem; background-color: #fff; border-radius: .75rem; }
.bk11 .rooms-card .room-item-card .room-title { color: var(--bk-ink); font-weight: 500; font-size: 18px; margin: 0; }
.bk11 .room-night-title { color: var(--bk-ink); font-weight: 700; font-size: 1rem; }

.bk11 .guest-info-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: .5rem 1.5rem; margin-top: .5rem;
}
.bk11 .guest-info-grid .item { display: flex; gap: .5rem; font-size: 1rem; }
.bk11 .guest-info-grid .item .label { color: var(--bk-muted); }
.bk11 .guest-info-grid .item .value { color: var(--bk-ink); font-weight: 500; }

.bk11 .payable-box {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    background-color: var(--bk-green-pale); border-radius: 1.25rem;
    padding: 1rem 1.25rem; margin-top: 1rem; flex-wrap: wrap;
}
.bk11 .payable-box .label { color: var(--bk-ink); font-weight: 700; }
.bk11 .payable-box .amount { color: var(--bk-green-dark); font-weight: 800; font-size: 1.375rem; }

.bk11 .gateway-box { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: .75rem; margin-top: 1rem; }
.bk11 .gateway-item {
    display: flex; align-items: center; gap: .6rem;
    border: 1px solid var(--bk-line); border-radius: .75rem;
    padding: .9rem 1rem; background-color: #fff; cursor: pointer;
}
.bk11 .gateway-item:hover { border-color: var(--bk-green); }
.bk11 .gateway-item.selected { border-color: var(--bk-green); background-color: rgba(9, 178, 136, .06); }
.bk11 .gateway-item input[type="radio"] { accent-color: var(--bk-green); width: 18px; height: 18px; margin: 0; }

.bk11 .reserve-final-sticky-container .btn-accept-reserve { width: 100%; padding: .75rem 1rem; }

/* --------------------------------------------------------------------------
   11. Mobile bottom bar   (verbatim)
       .card__next-step-mobile{border-radius:1.25rem;padding:1.156rem 1rem;
         box-shadow:0px -4px 20px rgba(0,13,26,.08);position:fixed;left:0;right:0;
         bottom:0;margin:auto;width:100%;z-index:99999}
   -------------------------------------------------------------------------- */
.bk11 .card__next-step-mobile {
    border-radius: 1.25rem; padding: 1.156rem 1rem;
    box-shadow: 0px -4px 20px rgba(0, 13, 26, .08);
    position: fixed; left: 0; right: 0; bottom: 0; margin: auto;
    width: 100%; z-index: 99999; background-color: #fff;
    display: none; align-items: center; justify-content: space-between; gap: 1rem;
}
.bk11 .card__next-step-mobile .reserve__detail-price-title { margin: 0; color: var(--bk-ink); font-weight: 400; font-size: 1rem; }
.bk11 .card__next-step-mobile .reserve__total-price { color: var(--bk-ink); font-weight: 600; font-size: 1.125rem; margin: 0; }
.bk11 .card__next-step-mobile .btn-select { width: auto; margin: 0; padding: .65rem 2rem; }

/* --------------------------------------------------------------------------
   12. Breakpoints - booking switches the room card at 1200px, not 992px
   -------------------------------------------------------------------------- */
@media screen and (max-width: 1200px) {
    /* .cover{width:7rem;height:7rem} */
    .bk11 section.rooms .card-package > .room-item .cover { width: 7rem; height: 7rem; }
    /* .price-container{width:100%} */
    .bk11 section.rooms .card-package > .room-item .price-container { width: 100%; }
    /* .price-box{flex-direction:row!important;justify-content:space-between;align-items:center} */
    .bk11 section.rooms .card-package > .room-item .price-container .price-box {
        flex-direction: row !important; justify-content: space-between; align-items: center;
    }
    /* .capacity-box{background-color:#fff} */
    .bk11 section.rooms .card-package > .room-item .capacity-box { background-color: #fff; }
    .bk11 section.rooms .card-package > .room-item .price-container .price-box .detail-text { margin: 0; }
    .bk11 section.rooms .card-package > .room-item { padding: 1rem; }
    .bk11 .btn-select { width: 100%; }
}

@media screen and (max-width: 1200px) {
    /* .card-package-page-list-hotel>.room-item .card-package-box-title{padding:0 1.5rem} */
    .bk11 section.rooms .card-package-page-list-hotel > .room-item .card-package-box-title { padding: 0 1.5rem; }
    .bk11 section.rooms .card-package-page-list-hotel > .room-item .cover { width: 100%; height: 11rem; }
    .bk11 section.rooms .card-package > .room-item .price-container-page-hotel-list,
    .bk11 section.rooms .card-package-page-list-hotel > .room-item .price-container-page-hotel-list { width: 100%; }
    .bk11 .price-container-page-hotel-list .price-box {
        flex-direction: row !important; justify-content: space-between; align-items: center;
    }
    .bk11 .price-container-page-hotel-list .price-box .detail-text { margin: 0; }
}

@media screen and (max-width: 991.98px) {
    .bk11 .card__next-step-mobile { display: flex; }
    /* filter rail becomes a bottom sheet, like booking's .filter-mobile-body */
    .bk11 .page-hotel-list-filter {
        position: fixed; inset: auto 0 0 0; z-index: 1050;
        max-height: 85vh; overflow-y: auto;
        border-radius: 1.25rem 1.25rem 0 0;
        transform: translateY(100%); transition: transform .25s ease;
        box-shadow: 0 -4px 20px rgba(0, 13, 26, .12);
    }
    .bk11 .page-hotel-list-filter.show { transform: translateY(0); }
    .bk11 .page-hotel-list-filter .title { position: sticky; top: 0; background: #fff; z-index: 1; }
    .bk11 .reserve-final-container { padding-bottom: 6rem; }
    .bk11 .card__form-input .card__form-input-container { padding: 1rem; }
    .bk11 .card__dateil-container { padding: 1rem; }
    .bk11 .section-divider > .divider-title { font-size: 1.25rem; white-space: normal; }
    .bk11 .reserve__steps-title-box span { font-size: .8rem; width: auto; max-width: 6.5rem; text-align: center; }
    .bk11 .hotel-head h1 { font-size: 1.35rem; }
    .bk11 .guest-info-grid { grid-template-columns: 1fr; }
}

@media screen and (max-width: 575px) {
    .bk11 .section-divider > .divider-title { font-size: 1.1rem; }
    .bk11 section.rooms .card-package > .room-item .cover { width: 100%; height: 9rem; }
    .bk11 .reserve__steps-title-box span { font-size: .7rem; max-width: 5rem; }
    .bk11 .payable-box .amount { font-size: 1.15rem; }
}

/* --------------------------------------------------------------------------
   13. Print
   -------------------------------------------------------------------------- */
@media print {
    .bk11 .card__next-step-mobile,
    .bk11 .room-filter-container,
    .bk11 .btn-select,
    .bk11 .btn-accept-reserve { display: none !important; }
}

/* ==========================================================================
   14b. Full-bleed layout for the reserve_new11_* pages
        These pages load neither layouts/sidebar4.php nor layouts/header4.php,
        but app4.css still reserves a 250px right gutter on #main and a 4rem
        top gap on .main-content for the fixed .header1. Reclaim both.
        Scoped to body.bk11 - no other panel page is affected.
   ========================================================================== */
body.bk11 #main {
    width: 100% !important;
    max-width: 100% !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
}
body.bk11 #main footer { right: 0 !important; }

body.bk11 .main-content,
body.bk11 .bk-main {
    margin-top: 0 !important;
    padding: 1rem !important;
    height: auto !important;
    min-height: 100vh;
}

body.bk11.small-navigation #main,
body.bk11.hidden-navigation #main {
    width: 100% !important;
    margin-right: 0 !important;
}

body.bk11 .sidebar1,
body.bk11 .header1,
body.bk11 .sidebar-overlay { display: none !important; }

@media screen and (max-width: 991px) {
    body.bk11 .main-content,
    body.bk11 .bk-main { padding: .75rem !important; padding-bottom: 6rem !important; }
}
@media screen and (max-width: 575px) {
    body.bk11 .main-content,
    body.bk11 .bk-main { padding: .5rem !important; padding-bottom: 6rem !important; }
}

/* ==========================================================================
   15. Top bar (bk11_topbar) — keeps the logout button reachable now that
       layouts/header4.php is not loaded.
   ========================================================================== */
.bk11 .bk-topbar {
    display: flex;
    align-items: center;
    gap: .75rem;
    flex-wrap: wrap;
    background: #fff;
    border-bottom: 1px solid #e3e8ea;
    padding: .55rem 1rem;
    font-size: .875rem;
    color: var(--bk-ink);
    position: sticky;
    top: 0;
    z-index: 1030;
}
.bk11 .bk-topbar__back {
    font-weight: 800;
    color: var(--bk-green-dark);
    letter-spacing: .5px;
}
.bk11 .bk-topbar__user   { font-weight: 700; }
.bk11 .bk-topbar__spacer { flex: 1 1 auto; }
.bk11 .bk-topbar__credit { color: var(--bk-muted); white-space: nowrap; }
.bk11 .bk-topbar__exit {
    background: #e03131;
    color: #fff !important;
    border-radius: .5rem;
    padding: .3rem 1.1rem;
    font-weight: 700;
    white-space: nowrap;
}
.bk11 .bk-topbar__exit:hover { background: #c92a2a; }

@media (max-width: 575px) {
    .bk11 .bk-topbar { padding: .5rem .6rem; gap: .5rem; font-size: .8rem; }
    .bk11 .bk-topbar__credit { display: none; }
}

/* ==========================================================================
   16. Mobile corrections
   ========================================================================== */
@media screen and (max-width: 991.98px) {

    /* stepper: labels were colliding and wrapping into each other */
    .bk11 .reserve__steps-box { padding-inline: .5rem; }
    .bk11 .reserve__steps-title-box {
        padding-inline: .25rem;
        align-items: flex-start;
        gap: .25rem;
    }
    .bk11 .reserve__steps-title-box span {
        width: auto;
        max-width: none;
        flex: 1 1 0;
        font-size: .72rem;
        line-height: 1.35;
        white-space: normal;
        word-break: keep-all;
    }

    /* review page: labels and values were running together */
    .bk11 .guest-info-grid { grid-template-columns: 1fr; gap: .35rem; }
    .bk11 .guest-info-grid .item {
        justify-content: space-between;
        gap: .75rem;
        border-bottom: 1px dashed var(--bk-line);
        padding-block: .35rem;
    }
    .bk11 .guest-info-grid .item .value { text-align: end; word-break: break-word; }

    .bk11 .reserve-final-container .card-body { padding: 1rem; }
    .bk11 .rooms-card { padding: .75rem !important; }
    .bk11 .payable-box { padding: .85rem 1rem; }
    .bk11 .payable-box .amount { font-size: 1.05rem; }

    /* the terms + submit block stacked badly */
    .bk11 .reserve-rules-box {
        flex-direction: column;
        align-items: stretch;
        gap: .75rem;
        padding: .85rem 1rem;
    }
    .bk11 .reserve-rules-box .btn,
    .bk11 .reserve-rules-box .btn-select,
    .bk11 .reserve-rules-box .btn-accept-reserve {
        width: 100% !important;
        padding: .75rem 1rem !important;
    }

    /* gateway choices full width */
    .bk11 .gateway-box { grid-template-columns: 1fr; }

    /* the sticky bar was covering the last card */
    .bk11 .card__next-step-mobile {
        border-radius: 1.25rem 1.25rem 0 0;
        padding: .75rem 1rem;
    }
    .bk11 .card__next-step-mobile .btn { flex: 0 0 auto; white-space: nowrap; }

}

@media screen and (max-width: 575px) {
    .bk11 .reserve__steps-title-box span { font-size: .65rem; }
    .bk11 .reserve__steps-box .step__item { min-width: 1.15rem; min-height: 1.15rem; }
    .bk11 .reserve__steps-box .step__item.passed { background-size: .6rem; }

    /* room card: photo full width on top, price row underneath */
    .bk11 section.rooms .card-package > .room-item { padding: .85rem; }
    .bk11 section.rooms .card-package > .room-item .cover { width: 100%; height: 10rem; }
    .bk11 section.rooms .card-package > .room-item .col-auto { width: 100%; }
    .bk11 .btn-facilities, .bk11 .btn-terms, .bk11 .btn-calendar { font-size: .8rem; padding: .25rem .6rem; }

    .bk11 .hotel-head h1 { font-size: 1.15rem; }
}

/* ==========================================================================
   17. Lower hotel-page sections  (facilities / about / rules / side nav)
       Mirrors hotel.php's hotel-special-facilities, about and rules blocks.
   ========================================================================== */
.bk11 .facility-items {
    display: flex; flex-wrap: wrap; gap: .6rem;
    background: #fff; border-radius: 1.25rem;
    box-shadow: var(--bk-card-shadow); padding: 1.25rem;
}
.bk11 .facility-item {
    background-color: var(--bk-green-pale);
    color: var(--bk-green-dark);
    padding: .3rem .85rem;
    border-radius: .5rem;
    font-size: .875rem;
    line-height: 1.5rem;
}

.bk11 .hotel-about__img {
    width: 100%; border-radius: 1.25rem; object-fit: cover;
    max-height: 20rem; background: var(--bk-green-pale);
}
.bk11 .hotel-about__text {
    color: var(--bk-ink); font-size: 1rem; line-height: 2.2; text-align: justify;
}
.bk11 .hotel-about__addr { color: var(--bk-muted); font-size: .9375rem; }

.bk11 .hotel-rules__card {
    background: #fff; border-radius: 1.25rem;
    box-shadow: var(--bk-card-shadow); padding: 1.25rem;
    display: flex; flex-direction: column; gap: 1rem;
}
.bk11 .hotel-rule-item { border-bottom: 1px solid var(--bk-green-pale); padding-bottom: .85rem; }
.bk11 .hotel-rule-item:last-child { border-bottom: 0; padding-bottom: 0; }
.bk11 .hotel-rule-item__title { font-weight: 700; color: var(--bk-ink); font-size: 1rem; }
.bk11 .hotel-rule-item__desc  { color: var(--bk-muted); font-size: .9375rem; margin-top: .25rem; }
/* check-in / check-out rules get booking's red time chip treatment */
.bk11 .hotel-rule-item--time .hotel-rule-item__title { color: #e03131; }

/* right-hand floating section nav (hotel.php's icon rail) */
.bk11 .hotel-sidenav {
    position: fixed;
    inset-inline-end: .75rem;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1020;
    flex-direction: column;
    gap: .35rem;
    background: #fff;
    border-radius: 1.25rem;
    box-shadow: var(--bk-card-shadow);
    padding: .5rem .35rem;
}
.bk11 .hotel-sidenav a {
    width: 2.25rem; height: 2.25rem;
    display: flex; align-items: center; justify-content: center;
    border-radius: .75rem;
    color: var(--bk-muted);
    font-size: 1.05rem;
    text-decoration: none;
}
.bk11 .hotel-sidenav a:hover { background: var(--bk-green-pale); color: var(--bk-green-dark); }

@media screen and (max-width: 991.98px) {
    .bk11 .facility-items,
    .bk11 .hotel-rules__card { padding: 1rem; border-radius: 1rem; }
    .bk11 .hotel-about__text { line-height: 2; font-size: .9375rem; }
    .bk11 .hotel-about__img  { max-height: 13rem; margin-bottom: .85rem; }
}

/* ==========================================================================
   18. Divider extras — booking's "لیست اتاق ها بروز شد" flag and the
       "قیمت از ..." note that sit inside .section-divider on hotel.php
   ========================================================================== */
.bk11 .rooms-updated {
    color: var(--bk-green-dark);
    font-size: .875rem;
    white-space: nowrap;
    margin: 0;
    order: 2;
}
.bk11 .divider__mobile-room-price { font-size: .875rem; color: var(--bk-ink); margin: 0; }

/* the empty state should not look like a broken card */
.bk11 section.rooms .card-package .bk-empty-state {
    padding: 3rem 1rem;
    text-align: center;
    color: var(--bk-muted);
    font-size: 1rem;
}

/* one photo only: a single wide cover rather than four empty frames */
.bk11 .hotel-gallery.is-single {
    grid-template-columns: 1fr;
    grid-auto-rows: 356px;              /* same total height as the 5-up grid */
}
.bk11 .hotel-gallery.is-single > .gallery__item { grid-row: auto !important; }

/* booking's own breakpoint: .gallery-item-1 { height:432px } -> 209.16px at 1200 */
@media screen and (max-width: 1200px) {
    .bk11 .hotel-gallery { grid-auto-rows: 105px; gap: .75rem; }
    .bk11 .hotel-gallery.is-single { grid-auto-rows: 220px; }
}
/* .hotel-gallery-mobile .gallery__item { width:100%; height:17rem } */
@media screen and (max-width: 991.98px) {
    .bk11 .hotel-gallery {
        display: flex;
        gap: .6rem;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        padding-bottom: .25rem;
    }
    .bk11 .hotel-gallery > .gallery__item {
        flex: 0 0 86%;
        height: 17rem;
        scroll-snap-align: center;
        grid-row: auto !important;
    }
    .bk11 .hotel-gallery.is-single > .gallery__item { flex: 0 0 100%; }
    .bk11 .hotel-gallery::-webkit-scrollbar { height: 4px; }
    .bk11 .hotel-gallery::-webkit-scrollbar-thumb { background: var(--bk-line); border-radius: 50rem; }
}
@media screen and (max-width: 575px) {
    .bk11 .hotel-gallery > .gallery__item { height: 13rem; flex: 0 0 88%; }
}

/* real-allotment readout next to the rooms title */
.bk11 .rooms-updated__count { color: var(--bk-muted); font-weight: 400; }
/* booking's low-availability cue on a room card */
.bk11 .room-left {
    color: #e03131;
    font-size: .875rem;
    margin: 0;
}
.bk11 .room-left b { font-weight: 800; }

/* ==========================================================================
   19. Search bar — booking's dark strip (hotel.php header search).
       Booking uses three fields, right-aligned, each sized to its content
       rather than stretched across the full width.
   ========================================================================== */
.bk11 .bk-searchbar { background: #2f4858; padding: 1rem 0; }
.bk11 .bk-searchbar__row {
    display: flex;
    justify-content: flex-start;
    align-items: stretch;
    gap: .75rem;
    flex-wrap: nowrap;
}
.bk11 .bk-searchbar__field {
    display: flex; flex-direction: column; justify-content: center;
    background: #fff; border-radius: .75rem;
    padding: .45rem 1rem; min-height: 58px;
    flex: 0 1 auto; min-width: 0;
}
.bk11 .bk-searchbar__field--dest { flex: 0 1 17rem; }
.bk11 .bk-searchbar__label { font-size: .75rem; color: #9aa4ab; margin-bottom: .1rem; }
.bk11 .bk-searchbar__field input {
    border: 0; outline: 0; padding: 0; width: 100%; background: transparent;
    font: inherit; font-weight: 700; color: var(--bk-ink);
    /* long hotel names must ellipsize, not spill out of the pill */
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bk11 .bk-searchbar__btn {
    min-height: 58px; padding-inline: 3rem; width: auto; margin: 0;
    border-radius: .75rem; flex: 0 0 auto;
}

/* ==========================================================================
   20. Stepper at booking's real size (it was oversized)
   ========================================================================== */
.bk11 .reserve-steps { max-width: 760px; margin-inline: auto; }
.bk11 .reserve__steps-box .step__item { min-width: 1.15rem; min-height: 1.15rem; }
.bk11 .reserve__steps-box .step__item.passed { background-size: .62rem; }
.bk11 .reserve__steps-title-box span { font-size: .82rem; width: auto; max-width: 11rem; flex: 1 1 0; }

/* ==========================================================================
   21. Guest step — the two cards were touching
   ========================================================================== */
.bk11 .card__form-input   { margin-inline-end: .75rem; }
.bk11 .card__dateil-container { margin-inline-start: .75rem; }
@media (max-width: 991.98px) {
    .bk11 .card__form-input,
    .bk11 .card__dateil-container { margin-inline: 0 !important; }
}

/* a room with no photo of its own gets an honest empty frame */
.bk11 section.rooms .card-package > .room-item .cover--empty,
/* a gallery tile whose photo failed to load - bk11ImgFail() in
   reserve_new11_rooms.php adds .is-empty rather than leaving the browser's
   broken-image glyph and the alt text in the tile */
.bk11 .hotel-gallery .gallery__item.is-empty {
    background: repeating-linear-gradient(45deg,
        var(--bk-green-pale) 0 10px, #eaf3ef 10px 20px);
    border: 1px dashed var(--bk-line);
}

/* ==========================================================================
   22. Mobile overflow — content was running past the viewport edge
   ========================================================================== */
@media screen and (max-width: 991.98px) {
    .bk11, .bk11 #main, .bk11 .main-content { overflow-x: hidden; max-width: 100vw; }
    .bk11 .container { padding-inline: .85rem; }

    /* the gallery strip must start and end inside the container */
    .bk11 .hotel-gallery { scroll-padding-inline: .85rem; }


    /* hotel head: name, stars and address on their own lines, inside the edge */
    .bk11 .hotel-head .row { gap: .35rem !important; }
    .bk11 .hotel-head .col-auto { width: 100%; }
    .bk11 .hotel-head .divider-info { white-space: normal; }

    /* the rooms divider was pushing the title off-screen */
    .bk11 .section-divider { flex-wrap: wrap; gap: .4rem; }
    .bk11 .section-divider > .divider-title { white-space: normal; }
    .bk11 .rooms-updated { font-size: .78rem; }
    .bk11 .rooms-updated__count { display: block; }

    /* review page: label and value were bleeding past both edges */
    .bk11 .guest-info-grid .item { flex-wrap: wrap; }
    .bk11 .guest-info-grid .item .label { flex: 0 0 auto; }
    .bk11 .guest-info-grid .item .value { flex: 1 1 auto; min-width: 0; }
    .bk11 .reserve-final-container .card { margin-inline: 0; }
    .bk11 .rooms-card .row { margin-inline: 0; }
    .bk11 .rooms-card .row > * { padding-inline: 0; }
}
@media screen and (max-width: 575px) {
    .bk11 .container { padding-inline: .7rem; }
    .bk11 .reserve__steps-title-box span { font-size: .68rem; }
}

/* ==========================================================================
   23. Mobile: booking's condensed search summary
       A white pill under the top bar. Four columns of label-over-value, then a
       small square pencil. Tapping the pencil expands the bar in place
       (.is-editing) rather than navigating anywhere.
   ========================================================================== */
@media screen and (max-width: 991.98px) {
    .bk11 .bk-searchbar {
        position: sticky;
        top: 42px;
        z-index: 1025;
        padding: .4rem 0;
        background: #2f4858;
    }
    .bk11 .bk-searchbar__row {
        display: grid;
        grid-template-columns: 1.25fr 1fr 1fr 2.2rem;
        align-items: stretch;
        gap: 0;
        background: #fff;
        border-radius: .8rem;
        padding: .35rem .4rem;
        box-shadow: 0 2px 10px rgba(0, 13, 26, .12);
    }
    .bk11 .bk-searchbar__field {
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 0;
        background: transparent;
        box-shadow: none;
        border-radius: 0;
        min-height: 0;
        min-width: 0;
        padding: .15rem .45rem;
        border-inline-end: 1px solid var(--bk-line);
    }
    .bk11 .bk-searchbar__row > .bk-searchbar__field:nth-last-of-type(2) { border-inline-end: 0; }

    /* booking shows three columns on phones - nights is derived, so it goes.
       Declared after the generic .bk-searchbar__field rule (same specificity)
       so display:none actually wins. */
    .bk11 .bk-searchbar__row > .bk-searchbar__field--nights { display: none !important; }

    .bk11 .bk-searchbar__label,
    .bk11 .bk-searchbar__field input {
        display: block;
        width: 100%;
        min-width: 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .bk11 .bk-searchbar__label { font-size: .6rem; line-height: 1.35; color: #9aa4ab; }
    .bk11 .bk-searchbar__field input {
        font-size: .78rem; line-height: 1.4; font-weight: 700;
    }

    .bk11 .bk-searchbar__btn {
        align-self: center;
        justify-self: center;
        width: 2rem; height: 2rem;
        min-height: 0; flex: none; padding: 0;
        border-radius: .55rem;
        font-size: 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
    .bk11 .bk-searchbar__btn::after {
        content: "✎"; font-size: .95rem; line-height: 1; color: #fff;
    }

    /* ---- edit mode: stack the fields and show a real search button ---- */
    .bk11 .bk-searchbar.is-editing .bk-searchbar__row {
        grid-template-columns: 1fr 1fr;
        gap: .4rem;
        padding: .6rem;
    }
    .bk11 .bk-searchbar.is-editing .bk-searchbar__field {
        border: 1px solid var(--bk-line);
        border-radius: .6rem;
        padding: .4rem .6rem;
    }
    .bk11 .bk-searchbar.is-editing .bk-searchbar__field--dest { grid-column: 1 / -1; }
    .bk11 .bk-searchbar.is-editing .bk-searchbar__field--nights { display: none; }
    .bk11 .bk-searchbar.is-editing .bk-searchbar__field input {
        font-size: .9rem;
        white-space: normal;
    }
    .bk11 .bk-searchbar.is-editing .bk-searchbar__field input:not([readonly]):not([disabled]) {
        color: var(--bk-ink);
    }
    .bk11 .bk-searchbar.is-editing .bk-searchbar__btn {
        grid-column: 1 / -1;
        width: 100%; height: auto;
        padding: .65rem 1rem;
        border-radius: .6rem;
        font-size: .95rem;
        justify-self: stretch;
    }
    .bk11 .bk-searchbar.is-editing .bk-searchbar__btn::after { content: none; }
}

@media screen and (max-width: 400px) {
    .bk11 .bk-searchbar__row { grid-template-columns: 1.2fr 1fr 1fr 1.9rem; padding: .3rem .35rem; }
    .bk11 .bk-searchbar__field { padding-inline: .3rem; }
    .bk11 .bk-searchbar__label { font-size: .56rem; }
    .bk11 .bk-searchbar__field input { font-size: .72rem; }
}

/* ==========================================================================
   24. Review page — the guest rows were still ragged on phones
   ========================================================================== */
@media screen and (max-width: 991.98px) {
    .bk11 .guest-info-grid .item {
        display: grid;
        grid-template-columns: minmax(7.5rem, auto) 1fr;
        gap: .5rem;
        align-items: baseline;
        border-bottom: 1px dashed var(--bk-line);
        padding-block: .45rem;
    }
    .bk11 .guest-info-grid .item .label { color: var(--bk-muted); }
    .bk11 .guest-info-grid .item .value {
        text-align: start; font-weight: 700;
        overflow-wrap: anywhere; min-width: 0;
    }
    /* the sticky total bar was sitting on the last card */
    .bk11 .reserve-final-container,
    .bk11 .card__form-input { padding-bottom: .5rem; }
    .bk11 .main-content.bk-main { padding-bottom: 7rem !important; }
}

/* the collapsed bar: tighter box, no hairline crowding, nothing clipped */
@media screen and (max-width: 991.98px) {
    .bk11 .bk-searchbar__row {
        border: 1px solid rgba(255, 255, 255, .12);
    }
    .bk11 .bk-searchbar__field { border-inline-end-color: #eef2f1; }
    .bk11 .bk-searchbar__field:first-of-type { padding-inline-start: .55rem; }
    /* the pencil sits in its own cell, clear of the last divider */
    .bk11 .bk-searchbar__row > .bk-searchbar__btn { margin-inline-start: .2rem; }
}

/* ==========================================================================
   26. Desktop trims to match booking side by side
   ========================================================================== */
/* booking's gallery rows are 170px with the cover spanning both — inside a
   1140px column that lands the cover at ~585x356, the thumbs at ~250x170 */
.bk11 .hotel-gallery { grid-auto-rows: 170px; gap: 1rem; }

/* booking's divider bracket is peach, not green */
.bk11 .divider-icon {
    background: linear-gradient(#f2d0a4, #f2d0a4) no-repeat center / 4px 100%;
}

/* rating chip (hotel.score), booking's rounded ۴.۳ pill */
.bk11 .rating-wrapper {
    min-width: 2.4rem; height: 2rem; padding-inline: .5rem;
    border-radius: .6rem;
    background-color: #e8eef5;
    color: #2f4858;
    font-weight: 700; font-size: .95rem;
}

/* the search fields are editable now, so they must not look disabled */
.bk11 .bk-searchbar__field input { cursor: text; }
.bk11 .bk-searchbar__field input[disabled] { cursor: default; opacity: 1; }
.bk11 .bk-searchbar__field:focus-within { outline: 2px solid rgba(9, 178, 136, .35); outline-offset: 1px; border-radius: .75rem; }

@media screen and (max-width: 991.98px) {
    /* no dark strip behind the compact bar — it sits on the page background */
    .bk11 .bk-searchbar { background: transparent; padding: .35rem 0 .5rem; }
    .bk11 .bk-searchbar__row { border: 1px solid var(--bk-line); }
    .bk11 .bk-searchbar__field:focus-within { outline-offset: 0; border-radius: .5rem; }
}

/* ==========================================================================
   27. Gallery lightbox — booking's #hotel-gallery-modal
       Big stage with prev/next, a thumbnail strip underneath, X to close.
       .swiper-gallery-top is 420px tall in booking; thumbs are 100px.
   ========================================================================== */
.bk11 .gallery__more {
    position: absolute;
    inset-inline-start: 50%;
    top: 50%;
    transform: translate(50%, -50%);
    z-index: 2;
    background: rgba(255, 255, 255, .94);
    color: var(--bk-ink);
    border: 0;
    border-radius: 50rem;
    padding: .4rem 1.15rem;
    font: inherit;
    font-size: .875rem;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
    box-shadow: 0 2px 10px rgba(0, 13, 26, .18);
}
.bk11 .gallery__more:hover { background: #fff; }
.bk11 .hotel-gallery > .gallery__item { cursor: pointer; }

/* Booking's gallery is a centred Bootstrap modal (~800px), not a full-screen
   takeover: .swiper-gallery-top is 420px tall and the thumbs are 100px. */
.bk11 .bk-lightbox {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 2147483600;
    background: rgba(0, 0, 0, .5);
    padding: 1.75rem 1rem;
    overflow-y: auto;
}
.bk11 .bk-lightbox.is-open { display: block; }

.bk11 .bk-lightbox__panel {
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
    background: #fff;
    border-radius: .9rem;
    padding: 1.25rem;
    box-shadow: 0 12px 40px rgba(0, 0, 0, .25);
}

.bk11 .bk-lightbox__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: .85rem;
}
.bk11 .bk-lightbox__title { font-size: 1.35rem; font-weight: 800; color: var(--bk-ink); }
.bk11 .bk-lightbox__close {
    width: 2.2rem; height: 2.2rem;
    border: 0; border-radius: 50%;
    background: #f1f4f3; color: var(--bk-ink);
    font-size: 1rem; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
}
.bk11 .bk-lightbox__close:hover { background: #e3e8e6; }

/* .swiper-gallery-top { height: 420px; border-radius: .75rem } */
.bk11 .bk-lightbox__stage {
    position: relative;
    height: 420px;
    border-radius: .75rem;
    overflow: hidden;
    background: #f5f5f5;
}
.bk11 .bk-lightbox__stage img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
}
.bk11 .bk-lightbox__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 2.4rem; height: 2.4rem;
    border: 0; border-radius: 50%;
    background: rgba(255, 255, 255, .92);
    color: var(--bk-ink);
    font-size: 1.5rem; line-height: 1;
    cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    box-shadow: 0 2px 10px rgba(0, 13, 26, .18);
}
.bk11 .bk-lightbox__nav--prev { inset-inline-start: .6rem; }
.bk11 .bk-lightbox__nav--next { inset-inline-end: .6rem; }

/* .swiper-gallery-thumb .swiper-slide { width:20%; height:100px } */
.bk11 .bk-lightbox__thumbs {
    display: flex;
    gap: .6rem;
    overflow-x: auto;
    padding-top: .85rem;
}
.bk11 .bk-lightbox__thumbs img {
    width: 20%;
    height: 100px;
    flex: 0 0 20%;
    object-fit: cover;
    border-radius: .75rem;
    opacity: .4;
    cursor: pointer;
    transition: opacity .15s ease;
}
.bk11 .bk-lightbox__thumbs img.is-active,
.bk11 .bk-lightbox__thumbs img:hover { opacity: 1; }

@media screen and (max-width: 991.98px) {
    .bk11 .bk-lightbox { padding: 1rem .75rem; }
    .bk11 .bk-lightbox__panel { padding: .85rem; }
    .bk11 .bk-lightbox__title { font-size: 1.1rem; }
    .bk11 .bk-lightbox__stage { height: 15rem; }
    .bk11 .bk-lightbox__thumbs img { width: 28%; flex: 0 0 28%; height: 68px; }
    .bk11 .bk-lightbox__nav { width: 2rem; height: 2rem; font-size: 1.25rem; }
}


/* the sticky bar carries the only CTA on phones, so the in-card twin hides */
@media screen and (max-width: 991.98px) {
    .bk11 .reserve-rules-box .btn-select.d-none,
    .bk11 .reserve-rules-box .btn-accept-reserve.d-none { display: none !important; }
    .bk11 .card__next-step-mobile .btn { flex: 0 0 auto; white-space: nowrap; padding-inline: 1.5rem; }
}

/* ==========================================================================
   28. Discount / organisation code row (booking's کد تخفیف block)
   ========================================================================== */
.bk11 .discount-row__title { color: var(--bk-green-dark); font-size: .9375rem; margin-bottom: .5rem; }
.bk11 .discount-row__box {
    display: flex;
    align-items: center;
    gap: .5rem;
    background: var(--bk-bg);
    border: 1px solid var(--bk-line);
    border-radius: .75rem;
    padding: .4rem;
    max-width: 26rem;
}
.bk11 .discount-row__box input {
    flex: 1 1 auto;
    min-width: 0;
    border: 0;
    background: transparent;
    outline: 0;
    font: inherit;
    padding: .45rem .6rem;
    color: var(--bk-ink);
}
.bk11 .discount-row__btn {
    flex: 0 0 auto;
    background: var(--bk-green-pale);
    color: var(--bk-green-dark);
    border: 0;
    border-radius: .55rem;
    padding: .45rem 1.4rem;
    font-weight: 700;
}
.bk11 .discount-row__btn:hover { background: #cfe6dc; color: var(--bk-green-dark); }
.bk11 .discount-row__msg { color: var(--bk-green-dark); font-size: .85rem; margin-top: .4rem; }
@media screen and (max-width: 991.98px) {
    .bk11 .discount-row__box { max-width: 100%; }
}

/* ==========================================================================
   29. Search bar: make editability obvious
       The destination is a value + "تغییر" link (this page is one hotel);
       the two date fields are real inputs bound to search11's jalali picker.
   ========================================================================== */
.bk11 .bk-searchbar__value {
    display: block;
    font-weight: 700;
    color: var(--bk-ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}
.bk11 .bk-searchbar__field--dest { position: relative; }

/* the date inputs must read and behave as editable */
.bk11 .bk-searchbar__field input:not([disabled]) {
    cursor: text;
    pointer-events: auto;
    user-select: text;
    -webkit-user-select: text;
    caret-color: var(--bk-green-dark);
}
.bk11 .bk-searchbar__field input:not([disabled]):hover { background: rgba(9, 178, 136, .05); border-radius: .3rem; }

/* jQuery-UI datepicker floats above the sticky bar */
.bk11 .ui-datepicker,
.ui-datepicker { z-index: 2147483500 !important; }

/* ==========================================================================
   30. Destination select2, dressed as a search-bar field
   ========================================================================== */
.bk11 .bk-searchbar__field--dest { padding-block: .3rem; }
.bk11 .bk-searchbar__select { width: 100%; }

.bk11 .bk-searchbar__field .select2-container { width: 100% !important; min-width: 0; }
.bk11 .bk-searchbar__field .select2-container--default .select2-selection--single {
    background: transparent;
    border: 0;
    height: auto;
    outline: 0;
}
.bk11 .bk-searchbar__field .select2-container--default .select2-selection--single
      .select2-selection__rendered {
    color: var(--bk-ink);
    font-weight: 700;
    line-height: 1.5;
    padding: 0;
    padding-inline-end: 1.1rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.bk11 .bk-searchbar__field .select2-container--default .select2-selection--single
      .select2-selection__arrow { height: 100%; inset-inline-end: 0; }

/* the dropdown must clear the sticky bar */
.select2-container--open { z-index: 2147483500 !important; }

@media screen and (max-width: 991.98px) {
    .bk11 .bk-searchbar__field .select2-container--default .select2-selection--single
          .select2-selection__rendered { font-size: .78rem; }
}

/* ==========================================================================
   31. جستجو button — match the field height exactly.
       Booking's button is as tall as the white pills beside it with generous
       side padding; ours inherited .btn's small padding and sat short inside a
       stretched flex row.
       Desktop only: below 992px the button is the compact pencil (section 23),
       and this block is declared later in the file, so it must not reach there.
   ========================================================================== */
@media screen and (min-width: 992px) {
    .bk11 .bk-searchbar__row { align-items: stretch; }
    .bk11 .bk-searchbar__btn {
        min-height: 58px;
        height: auto;
        align-self: stretch;
        padding: 0 3.25rem;
        border-radius: .75rem;
        font-size: 1rem;
        font-weight: 700;
        line-height: 1;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        white-space: nowrap;
        flex: 0 0 auto;
    }
    .bk11 .bk-searchbar__field { min-height: 58px; }
}

/* discount feedback, booking's red/green under the field */
.bk11 .discount-row__msg.is-ok      { color: var(--bk-green-dark); }
.bk11 .discount-row__msg.is-bad     { color: #e03131; }
.bk11 .discount-row__msg.is-pending { color: var(--bk-muted); }
.bk11 .discount-row__box:has(input[readonly]) { opacity: .75; }
.bk11 .payable-was {
    color: var(--bk-muted);
    text-decoration: line-through;
    font-size: .95rem;
    font-weight: 400;
    margin-inline-end: .5rem;
}

/* ==========================================================================
   FUNNEL BANNER + LANGUAGE SWITCH                             (2026-09-07)

   Brings the search11 treatment onto the reserve_new11_* pages so the agent
   does not walk from a designed search page into a flat one. Same skyline
   asset (images/s11-skyline.svg) and the same palette; scoped to .bk11
   because the funnel body carries that class, not .asa-s11.
   ========================================================================== */

.bk11 .bk-searchbar {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(90% 120% at 15% -10%, rgba(9,178,136,.26) 0%, rgba(9,178,136,0) 55%),
        radial-gradient(70% 100% at 88% 0%,   rgba(80,170,255,.15) 0%, rgba(80,170,255,0) 60%),
        linear-gradient(165deg, #1e3947 0%, #2f4858 52%, #375563 100%);
    padding: 1.15rem 0 1.05rem;
}
.bk11 .bk-searchbar::after {
    content: "";
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    height: 130px;
    background: url('../images/s11-skyline.svg') center bottom / 1400px 130px no-repeat;
    pointer-events: none;
    z-index: 0;
}
.bk11 .bk-searchbar > * { position: relative; z-index: 1; }

/* the white pills lift off the art, and answer to focus */
.bk11 .bk-searchbar__field {
    box-shadow: 0 .4rem 1rem rgba(12, 26, 34, .18);
    transition: box-shadow .18s ease, transform .18s ease;
}
.bk11 .bk-searchbar__field:focus-within {
    box-shadow: 0 .55rem 1.4rem rgba(9, 178, 136, .30);
    transform: translateY(-1px);
}

/* --- language switch in the funnel topbar -------------------------------
   The topbar here sits on white, so the pills use the same treatment as
   search11's. .s11-lang--dark is passed by bk11_topbar(). */
.bk11 .s11-lang {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    margin-inline-start: .5rem;
}
.bk11 .s11-lang a {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    font-size: .72rem;
    font-weight: 700;
    line-height: 1;
    padding: .3rem .5rem;
    border-radius: 999px;
    border: 1px solid transparent;
    color: #6b7280;
    text-decoration: none;
    transition: background .15s, color .15s, border-color .15s;
}
.bk11 .s11-lang a:hover { background: #eef2f4; color: #2f4858; }
.bk11 .s11-lang a.active {
    background: #fff;
    border-color: #d8e0e4;
    color: #1f2d36;
    box-shadow: 0 1px 0 #eef1f3;
}
.bk11 .s11-lang svg {
    display: block;
    border-radius: 2px;
    box-shadow: 0 0 0 1px rgba(0,0,0,.08);
}

@media screen and (max-width: 991px) {
    .bk11 .bk-searchbar::after { height: 95px; background-size: 900px 95px; }
}
@media screen and (max-width: 575px) {
    .bk11 .bk-searchbar::after { opacity: .5; }
    .bk11 .s11-lang a span { display: none; }   /* flags only */
    .bk11 .s11-lang a { padding: .3rem; }
}

/* --- room cards, same liveliness as the search results ------------------- */
.bk11 section.rooms .card-package > .room-item .cover img {
    transition: transform .35s cubic-bezier(.2,.7,.3,1);
}
.bk11 section.rooms .card-package > .room-item:hover .cover img { transform: scale(1.05); }
.bk11 section.rooms .card-package > .room-item {
    transition: box-shadow .18s ease, transform .18s ease;
}
.bk11 section.rooms .card-package > .room-item:hover {
    box-shadow: 0 .6rem 1.5rem rgba(31,45,54,.10);
}

@media (prefers-reduced-motion: reduce) {
    .bk11 *, .bk11 *::before, .bk11 *::after {
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
    }
}

/* ==========================================================================
   guest ("my account") link in the top bar — u11_nav_links(), pay11/userpage11.php
   Both funnel skins have a LIGHT top bar, so this is a green pill rather than
   the translucent one css/user11.css uses on the guest pages own dark bar.
   ========================================================================== */
.bk11 .u11-nav { display: inline-flex; align-items: center; }
.bk11 .u11-nav__in,
.bk11 .u11-nav__me {
    display: inline-flex; align-items: center; gap: .4rem;
    padding: .3rem .9rem; border-radius: .5rem;
    background: #eaf5f0; color: #0b7a56 !important;
    font-weight: 700; white-space: nowrap; text-decoration: none;
}
.bk11 .u11-nav__in:hover,
.bk11 .u11-nav__me:hover { background: #d8ece3; }
.bk11 .u11-nav__dot { width: .5rem; height: .5rem; border-radius: 50%; background: #0b7a56; }
@media (max-width: 575px) {
    .bk11 .u11-nav__in, .bk11 .u11-nav__me { padding: .3rem .6rem; font-size: .78rem; }
}


/* ==========================================================================
   PUBLIC HOST TOP BAR + HERO BREATHING ROOM
   (bk11_public_host(), reserve_new11_state.php)

   On asabooking.asacrs.com every visitor is bound to the agency by the URL, so the
   bar carries a brand, the language switch and the guest's own account link —
   nothing that belongs to an agent. It also gets more air, because it is the
   first thing a customer sees rather than a panel strip.
   ========================================================================== */
.bk11 .bk-topbar--public {
    padding-block: .7rem;
    gap: .6rem;
}
.bk11 .bk-topbar__brand {
    font-weight: 800;
    font-size: 1rem;
    color: var(--bk-ink, #22333f);
    text-decoration: none;
    letter-spacing: -.01em;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
}
.bk11 .bk-topbar__brand::before {
    content: "";
    width: .55rem; height: 1.15rem;
    border-radius: .3rem;
    background: linear-gradient(180deg, #09b288, #0b7a56);
    flex: 0 0 auto;
}
.bk11 .bk-topbar__brand:hover { color: #0b7a56; }

/* --- the search band reads as a banner, not a strip ---------------------- */
.bk11 .bk-searchbar {
    padding: 2.1rem 0 1.9rem;
    border-bottom-left-radius: 1.25rem;
    border-bottom-right-radius: 1.25rem;
}
/* the skyline was hidden behind the pills at the old height */
.bk11 .bk-searchbar::after { height: 150px; background-size: 1500px 150px; opacity: .85; }

/* a quiet caption above the fields so the band has a subject */
.bk11 .bk-searchbar__cap {
    display: block;
    margin: 0 0 .85rem;
    font-size: .82rem;
    font-weight: 700;
    color: rgba(255,255,255,.72);
    letter-spacing: .01em;
}
.bk11 .bk-searchbar__cap b { color: #fff; font-weight: 800; }

/* the gallery used to float in a wide white gap under the band */
.bk11 .bk-searchbar + .mt-3 { margin-top: 1.25rem !important; }

@media (max-width: 991.98px) {
    .bk11 .bk-searchbar { padding: 1.15rem 0 1rem; border-radius: 0; }
    .bk11 .bk-searchbar__cap { display: none; }
    .bk11 .bk-topbar--public { padding-block: .5rem; }
    .bk11 .bk-topbar__brand { font-size: .9rem; }
}

/* ==========================================================================
   31. Hotel identity strip on the recap cards (bk11_hotel_head)
   ========================================================================== */
.bk11 .bk11-hotelhead{display:flex;align-items:center;gap:.7rem;padding:.6rem .7rem;margin-bottom:.9rem;
    background:#f4f7f6;border:1px solid var(--bk-line,#e6ebea);border-radius:.7rem}
.bk11 .bk11-hotelhead__img{width:3.4rem;height:3.4rem;object-fit:cover;border-radius:.55rem;flex:0 0 auto}
.bk11 .bk11-hotelhead__body{min-width:0}
.bk11 .bk11-hotelhead__name{margin:0;font-weight:700;font-size:.95rem;color:#22313a;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bk11 .bk11-hotelhead__meta{margin:.15rem 0 0;font-size:.75rem;color:#6b7780;display:flex;gap:.5rem;flex-wrap:wrap}
.bk11 .bk11-hotelhead__star{color:#e8a33d;font-weight:700;white-space:nowrap}
.bk11 .bk11-hotelhead__addr{overflow:hidden;text-overflow:ellipsis}

/* ==========================================================================
   32. Back / home buttons (bk11_navbuttons)
   ========================================================================== */
.bk11 .bk11-nav{display:flex;gap:.5rem;margin:.9rem 0 .2rem}
.bk11 .bk11-nav__btn{display:inline-flex;align-items:center;gap:.15rem;padding:.4rem .85rem;
    border:1px solid var(--bk-line,#e6ebea);border-radius:.6rem;background:#fff;color:#2f4858;
    font-size:.82rem;font-weight:600;text-decoration:none;cursor:pointer;line-height:1.6}
.bk11 .bk11-nav__btn:hover{background:#f4f7f6;color:#0b7a56;border-color:#cfe0da;text-decoration:none}
.bk11 .bk11-nav__btn--home{background:#eaf5f0;border-color:#cfe0da;color:#0b7a56}

/* per-kind price on step 3's summary card, shown only for a multi-kind cart */
.bk11 .room-line-price{margin-inline-start:auto;font-size:.85rem;font-weight:700;color:#0b7a56;white-space:nowrap}
.bk11 .room-item-card + .room-item-card{margin-top:.5rem}

/* ==========================================================================
   BIGGER BARS  -  every strip that runs across the top of a page
   --------------------------------------------------------------------------
   The bar controls were sized for a dense admin panel: .8rem type and ~1.6rem
   tap targets. On a public booking site they read as fine print, and on a
   phone they are below the 44px the platforms ask for. This scales the whole
   strip - the brand, the language flags, the account chip and the logout -
   in one place rather than per page, so search11, the three funnel steps and
   anything added later all move together.
   ========================================================================== */
.bk11 .bk-topbar,
.asa-s11 .bk-topbar {
    padding: .8rem 1.15rem;
    font-size: 1rem;
    gap: .9rem;
    min-height: 3.9rem;
}
.bk11 .bk-topbar__brand,
.asa-s11 .bk-topbar__brand { font-size: 1.2rem; gap: .6rem; }
.bk11 .bk-topbar__brand::before,
.asa-s11 .bk-topbar__brand::before { width: .68rem; height: 1.45rem; }

.bk11 .bk-topbar__back,
.asa-s11 .bk-topbar__back { font-size: 1.15rem; padding: .3rem .5rem; }
.bk11 .bk-topbar__user,
.asa-s11 .bk-topbar__user { font-size: 1rem; }
.bk11 .bk-topbar__credit,
.asa-s11 .bk-topbar__credit { font-size: .92rem; }

.bk11 .bk-topbar__exit,
.asa-s11 .bk-topbar__exit {
    padding: .55rem 1.5rem;
    font-size: .98rem;
    border-radius: .6rem;
    min-height: 2.75rem;
    display: inline-flex; align-items: center;
}

/* the language flags */
.bk11 .bk-topbar .s11-lang a,
.asa-s11 .bk-topbar .s11-lang a {
    padding: .45rem .7rem;
    font-size: .92rem;
    border-radius: .55rem;
    min-height: 2.5rem;
}
.bk11 .bk-topbar .s11-lang a svg,
.asa-s11 .bk-topbar .s11-lang a svg { width: 22px; height: 15px; }

/* the guest account chip / "ورود - ثبت نام" */
.bk11 .bk-topbar__acct .u11-nav__in,
.asa-s11 .bk-topbar__acct .u11-nav__in,
.bk11 .bk-topbar__acct .u11-nav__me,
.asa-s11 .bk-topbar__acct .u11-nav__me {
    padding: .55rem 1.15rem;
    font-size: .98rem;
    border-radius: .6rem;
    min-height: 2.75rem;
    display: inline-flex; align-items: center; gap: .45rem;
}

@media (max-width: 575px) {
    .bk11 .bk-topbar,
    .asa-s11 .bk-topbar { padding: .6rem .7rem; gap: .55rem; font-size: .92rem; min-height: 3.4rem; }
    .bk11 .bk-topbar__brand,
    .asa-s11 .bk-topbar__brand { font-size: 1.02rem; }
    .bk11 .bk-topbar__exit,
    .asa-s11 .bk-topbar__exit { padding: .5rem 1rem; }
}

/* ==========================================================================
   هتل‌های عراق  -  the search tab that is reserved but not wired yet
   ========================================================================== */
.asa-s11 li.tabTitle-iq a,
li.tabTitle-iq a {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
}
li.s11-tab--soon a {
    opacity: .62;
    cursor: default;
}
li.s11-tab--soon a:hover { opacity: .78; }
/* the Iraqi flag, drawn rather than fetched so it needs no asset */
.s11-tab__flag {
    width: 1.35rem; height: .92rem; flex: 0 0 auto;
    border-radius: .12rem;
    border: 1px solid rgba(0,0,0,.12);
    background: linear-gradient(180deg,
        #ce1126 0 33.3%, #ffffff 33.3% 66.6%, #000000 66.6% 100%);
}

/* ==========================================================================
   BIGGER ROOM-CARD BUTTONS  -  «امکانات اتاق» / «قوانین کنسلی» / «جزییات قیمت»
   --------------------------------------------------------------------------
   They were .25rem/.75rem pills at .875rem: barely 26px tall, well under the
   44px minimum tap target, and easy to read as decoration rather than
   controls. Now that they actually open something, they are sized like the
   controls they are. Kept as outline pills so they still read as secondary to
   the room stepper.
   ========================================================================== */
.bk11 .btn-facilities,
.bk11 .btn-terms,
.bk11 .btn-calendar {
    padding: .6rem 1.35rem;
    font-size: .95rem;
    font-weight: 600;
    min-height: 2.75rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-width: 1.5px;
    cursor: pointer;
}
.bk11 section.rooms .card-package > .room-item .btn-box,
.bk11 section.rooms .card-package-page-list-hotel > .room-item .btn-box { gap: .6rem; }

@media (max-width: 575.98px) {
    .bk11 .btn-facilities,
    .bk11 .btn-terms,
    .bk11 .btn-calendar {
        padding: .55rem 1rem;
        font-size: .9rem;
        flex: 1 1 auto;          /* three across, full width, on a phone */
    }
}