/* =========================================================================
search11.css --- ASA Booking (reserve) look & feel for the agency panel
Scope: only the search / filter / sort / result-list area of search11.php
Everything is prefixed with .asa-s11 (class added on of search11.php)
so this file can never leak into any other page of the panel.
========================================================================= */
.asa-s11 {
--s11-green: #09b288;
--s11-green-dark: #198066;
--s11-green-soft: #dfebe5;
--s11-ink: #424c55;
--s11-ink-soft: #757f88;
--s11-muted: #a6a6a6;
--s11-line: #d0dbd6;
--s11-line-soft: #d9d9d9;
--s11-field-bg: #f7f7f7;
--s11-field-line: #cccccc;
--s11-star: #ffbf00;
--s11-container: 1140px; /* bootstrap .container - measured 833px cards */
--s11-gutter: 1.5rem; /* space between filter and results */
--s11-field-h: 3.625rem; /* .form-control height on asabooking */
--s11-radius-card: 1.25rem;
--s11-radius-field: .75rem;
--s11-shadow: 0 .25rem 1rem rgba(0, 0, 0, .06);
}
/* keep the page canvas neutral, like the booking site */
.asa-s11 .main-content .card,
.asa-s11 .main-content .card-body {
background-color: transparent !important;
box-shadow: none !important;
border: 0 !important;
}
.asa-s11 .page-header {
max-width: var(--s11-container);
margin-inline: auto;
padding-bottom: .25rem;
}
.asa-s11 .page-header h4 {
color: var(--s11-muted); /* .breadcrumb-item a */
font-weight: 500;
font-size: .875rem;
margin: 0;
}
/* the booking site puts everything inside a bootstrap .container, which stops
growing at 1320px. Without this the agency panel stretches the cards across
the whole screen and the layout stops feeling like asabooking.com. */
.asa-s11 .main-content .card-body {
max-width: var(--s11-container);
margin-inline: auto;
padding-left: 0;
padding-right: 0;
}
/* filter column / results column = the booking site's col-lg-3 / col-lg-9 */
.asa-s11 .s11-layout {
width: 100%;
max-width: var(--s11-container);
margin-inline: auto;
gap: var(--s11-gutter);
align-items: flex-start;
}
/* -------------------------------------------------------------------------
1. SEARCH BOX (tabs + destination / dates / nights / search button)
------------------------------------------------------------------------- */
/* plain wrapper around the search card - no tinted band behind it */
.asa-s11 .s11-hero {
width: 100%;
padding: 0;
margin: 0 0 .25rem 0;
}
.asa-s11 .quick-search {
width: 100%;
background-color: #fff;
border: 1px solid var(--s11-line);
border-radius: var(--s11-radius-card);
box-shadow: var(--s11-shadow);
overflow: visible;
}
.asa-s11 .quick-search-type {
border-bottom: 1px solid var(--s11-line);
padding: 0 1rem !important;
font-size: 1rem;
font-weight: 700;
}
.asa-s11 .quick-search-type > li {
padding: .9rem .25rem;
margin: 0 1rem;
border-bottom: 2px solid transparent;
transition: all .2s;
}
.asa-s11 .quick-search-type > li > a {
color: var(--s11-ink-soft);
text-decoration: none;
}
.asa-s11 .quick-search-type > li.selected {
border-bottom: 2px solid var(--s11-green);
color: var(--s11-green);
}
.asa-s11 .quick-search-type > li.selected > a {
color: var(--s11-green);
font-weight: 700;
}
.asa-s11 .quick-search-from-group {
width: 100%;
gap: .75rem;
flex-wrap: wrap;
align-items: stretch;
}
.asa-s11 .quick-search-from-group-box {
width: max(calc((100% - 3rem) / 5), 11rem);
margin: 0;
background-color: var(--s11-field-bg);
border: .09rem solid var(--s11-field-line);
border-radius: var(--s11-radius-field);
padding: .55rem .75rem;
display: flex;
flex-direction: column;
justify-content: center;
min-height: var(--s11-field-h);
transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}
.asa-s11 .quick-search-from-group-box:focus-within {
border-color: var(--s11-green);
box-shadow: 0 0 0 .2rem rgba(9, 178, 136, .12);
}
.asa-s11 .quick-search-from-group-box > label {
width: 100%;
margin: 0 0 .15rem 0;
padding: 0;
line-height: 1rem;
font-size: .75rem;
font-weight: 400;
color: var(--s11-muted);
}
.asa-s11 .quick-search-from-group-box > input {
background-color: transparent;
border: none;
border-radius: 0;
padding: 0;
width: 100%;
font-size: .95rem;
font-weight: 500;
color: #575757;
text-align: start;
}
.asa-s11 .quick-search-from-group-box > input:focus {
outline: none;
}
.asa-s11 .quick-search-from-group-box.error {
border-color: #ff6969;
}
.asa-s11 .quick-search-from-group-box.error label {
color: #ff6969;
}
/* select2 inside the destination field */
.asa-s11 .quick-search-from-group-box .select2.select2-container {
width: 100% !important;
}
.asa-s11 .quick-search-from-group-box .select2-container--default .select2-selection--single {
background-color: transparent;
border: 0;
height: auto;
}
.asa-s11 .quick-search-from-group-box .select2-container--default .select2-selection--single .select2-selection__rendered {
padding: 0;
line-height: 1.5;
font-size: .95rem;
font-weight: 500;
color: #575757;
}
.asa-s11 .quick-search-from-group-box .select2-container--default .select2-selection--single .select2-selection__arrow {
height: 100%;
top: 0;
}
/* nights box (plain text, not an input) */
.asa-s11 .quick-search-from-group-box > div[style] {
font-size: .95rem !important;
font-weight: 500;
color: #575757;
text-align: start !important;
}
/* the big green search button */
.asa-s11 .quick-search-from-group-button {
width: max(calc((100% - 3rem) / 5), 11rem);
margin: 0;
background-color: transparent;
border-radius: var(--s11-radius-field);
min-height: var(--s11-field-h);
}
.asa-s11 .quick-search-from-group-button button,
.asa-s11 .quick-search-from-group-button .btn {
width: 100%;
height: 100%;
min-height: var(--s11-field-h);
border: 1px solid var(--s11-green);
background-color: var(--s11-green);
color: #fff;
border-radius: var(--s11-radius-field);
font-size: 1rem;
font-weight: 700;
transition: all .2s;
}
.asa-s11 .quick-search-from-group-button button:hover,
.asa-s11 .quick-search-from-group-button .btn:hover {
background-color: var(--s11-green-dark);
border-color: var(--s11-green-dark);
color: #fff;
}
/* passenger pop-over used by the flight / tour tabs */
.asa-s11 .flight_passenger {
border-radius: var(--s11-radius-field);
box-shadow: 0 .25rem 1.5rem rgba(0, 0, 0, .12);
}
/* -------------------------------------------------------------------------
2. RESULT HEADER (title + "lowest price / highest price" sort chips)
------------------------------------------------------------------------- */
.asa-s11 .s11-results-head {
width: 100%;
display: flex;
flex-direction: column;
gap: .5rem;
margin-bottom: .25rem;
}
.asa-s11 .s11-section-divider {
display: flex;
align-items: center;
gap: .8rem;
margin: .9rem 0 .6rem 0;
}
.asa-s11 .s11-divider-title {
white-space: nowrap;
color: var(--s11-ink);
font-weight: bolder; /* .section-divider > .divider-title */
font-size: 1.75rem;
margin: 0;
}
.asa-s11 .s11-divider-info {
white-space: nowrap;
margin: 0;
font-size: .875rem;
color: var(--s11-ink);
}
.asa-s11 .s11-divider-line {
width: 100%;
border: 1px solid var(--s11-line-soft);
border-radius: 50rem;
margin: 0;
}
.asa-s11 .s11-sort-bar {
display: flex;
justify-content: flex-start;
align-items: center;
gap: .3rem;
margin-bottom: .75rem;
}
.asa-s11 .s11-sort-btn {
background-color: transparent;
color: var(--s11-ink);
border: 1px solid rgba(23, 42, 58, .2);
border-radius: 50rem;
padding: .3rem 1rem;
font-size: .875rem;
font-weight: 500;
cursor: pointer;
transition: all .2s;
line-height: 1.6;
}
.asa-s11 .s11-sort-btn:hover {
color: #fff;
background-color: var(--s11-green-dark);
border-color: var(--s11-green-dark);
}
.asa-s11 .s11-sort-btn.s11-selected {
color: #fff;
background-color: var(--s11-green);
border-color: var(--s11-green);
}
/* -------------------------------------------------------------------------
3. FILTER SIDEBAR
------------------------------------------------------------------------- */
.asa-s11 .search-filter-area {
width: 25%;
min-width: 15rem;
max-width: 20rem;
flex: 0 0 auto;
height: max-content;
background-color: #fff;
border: 1px solid var(--s11-line) !important;
border-radius: var(--s11-radius-card);
margin: 0;
overflow: visible;
}
.asa-s11 .s11-filter-head {
display: flex;
align-items: center;
gap: .5rem;
border-bottom: 1px solid var(--s11-line);
padding: 1rem;
font-weight: 700;
color: var(--s11-ink);
font-size: 1rem;
}
.asa-s11 .s11-filter-head svg {
width: 1.1rem;
height: 1.1rem;
stroke: var(--s11-ink);
}
.asa-s11 .s11-filter-head a {
color: var(--s11-green) !important;
text-decoration: underline;
font-size: .8rem;
font-weight: 500;
margin-inline-start: auto;
}
.asa-s11 .search-filter-area .filter-box {
max-width: none;
padding: 1rem;
border: 0;
border-bottom: 1px solid var(--s11-line);
border-radius: 0;
background-color: transparent;
}
.asa-s11 .search-filter-area .filter-box:last-child {
border-bottom: 0 !important;
}
.asa-s11 .search-filter-area .filter-box > div:first-child {
cursor: pointer;
align-items: center;
}
.asa-s11 .search-filter-area .filter-box h5 {
margin: 0;
padding: 0;
font-size: 1rem;
font-weight: 500;
color: var(--s11-ink);
}
.asa-s11 .chevron-area {
width: 1.5rem;
height: 1.5rem;
border-radius: 100%;
}
.asa-s11 .chevron-area svg {
width: 1.15rem;
height: 1.15rem;
stroke: var(--s11-ink);
}
.asa-s11 .chevron-area:hover {
background-color: var(--s11-green-soft);
}
.asa-s11 .filter-options {
padding-top: .75rem;
}
.asa-s11 .filter-options > div {
background: transparent;
border-radius: 0;
padding: 0;
width: 100%;
}
/* ---- checkbox rows: stars / accommodation type / room type / amenities --- */
.asa-s11 .filter_stars,
.asa-s11 .filter_cap {
flex-wrap: wrap;
flex-direction: column;
justify-content: flex-start !important;
gap: .85rem;
}
.asa-s11 .filter_stars.less2 {
margin-top: .85rem !important;
}
.asa-s11 .filter_stars > input,
.asa-s11 .filter_cap > input,
.asa-s11 .filter-room-kind > div > input {
display: none;
}
.asa-s11 .filter_stars > label,
.asa-s11 .filter_cap > label,
.asa-s11 .filter-room-kind > div > label {
position: relative;
display: flex;
align-items: center;
gap: .5rem;
width: 100%;
margin: 0;
padding: 0;
border: 0 !important;
border-radius: 0;
background-color: transparent !important;
text-align: start;
font-size: 1rem;
font-weight: 400;
color: var(--s11-ink);
cursor: pointer;
user-select: none;
}
.asa-s11 .filter_stars > label:hover,
.asa-s11 .filter_cap > label:hover,
.asa-s11 .filter-room-kind > div > label:hover {
background-color: transparent;
color: var(--s11-green-dark);
}
/* the square check box drawn in front of every label */
.asa-s11 .filter_stars > label:before,
.asa-s11 .filter_cap > label:before,
.asa-s11 .filter-room-kind > div > label:before {
content: "";
flex: 0 0 auto;
width: 1.25rem;
height: 1.25rem;
margin: 0;
background-color: var(--s11-field-bg);
border: 1px solid rgba(0, 0, 0, .25);
border-radius: 6px;
transition: all .15s;
}
.asa-s11 .filter_stars > label:after,
.asa-s11 .filter_cap > label:after,
.asa-s11 .filter-room-kind > div > label:after {
content: "";
position: absolute;
inset-inline-start: .34rem;
top: 50%;
width: .34rem;
height: .62rem;
border: solid #fff;
border-width: 0 2px 2px 0;
transform: translateY(-60%) rotate(45deg);
display: none;
font-size: 0;
line-height: 0;
right: auto;
}
.asa-s11 .filter_stars > input:checked + label:before,
.asa-s11 .filter_cap > input:checked + label:before,
.asa-s11 .filter-room-kind > div > input:checked + label:before {
background-color: var(--s11-green);
border-color: var(--s11-green);
}
.asa-s11 .filter_stars > input:checked + label:after,
.asa-s11 .filter_cap > input:checked + label:after,
.asa-s11 .filter-room-kind > div > input:checked + label:after {
display: block;
}
.asa-s11 .filter_stars > input:checked + label,
.asa-s11 .filter_cap > input:checked + label,
.asa-s11 .filter-room-kind > div > input:checked + label {
font-weight: 500;
background-color: transparent;
}
.asa-s11 .filter-room-kind {
gap: .85rem;
}
.asa-s11 .filter-room-kind > div {
width: 100%;
}
/* small grey count badge, e.g. هتل (۴) */
.asa-s11 .s11-count {
font-size: .75rem;
color: #7a7a7a;
font-weight: 400;
margin-inline-start: .25rem;
}
/* ---- price range slider ---- */
.asa-s11 .filter-rate {
gap: .5rem;
}
.asa-s11 .filter-rate > div:first-child {
font-size: .875rem;
font-weight: 400;
color: var(--s11-ink);
padding: 0 !important;
}
.asa-s11 .filter-rate-range {
position: relative;
width: 100%;
height: 6px;
background: #e4e4e4;
border-radius: 5px;
margin: 1.25rem 0 1rem 0;
}
.asa-s11 .filter-rate-range-area {
position: absolute;
height: 100%;
background: var(--s11-green);
border-radius: 5px;
}
.asa-s11 .filter-rate-range-area-bg {
position: absolute;
width: 100%;
height: 100%;
cursor: pointer;
}
.asa-s11 .filter-rate-range > span#min_rate,
.asa-s11 .filter-rate-range > span#max_rate {
position: absolute;
top: 50%;
width: 18px;
height: 18px;
margin-left: -9px;
border-radius: 70%;
background: #fff;
box-shadow: 0 4px 4px 0 rgba(0, 0, 0, .15);
border: 1px solid #e4e4e4;
transform: translateY(-50%);
cursor: pointer;
z-index: 2;
}
.asa-s11 .filter-rate .btn,
.asa-s11 .filter-rate .btn-success {
width: max-content;
margin: .25rem auto 0 auto;
background-color: transparent !important;
color: var(--s11-green) !important;
border: 1px solid var(--s11-green) !important;
border-radius: var(--s11-radius-field);
padding: .5rem 1.5rem;
font-size: .95rem;
font-weight: 500;
box-shadow: none;
transition: all .2s;
}
.asa-s11 .filter-rate .btn:hover,
.asa-s11 .filter-rate .btn-success:hover {
background-color: var(--s11-green) !important;
color: #fff !important;
}
/* -------------------------------------------------------------------------
4. RESULT CARDS
------------------------------------------------------------------------- */
.asa-s11 .search-result-area {
flex: 1 1 0;
min-width: 0;
width: auto;
}
.asa-s11 #s11-results-body {
width: 100%;
}
.asa-s11 .search-result-area ul {
width: 100%;
list-style: none;
padding: 0;
margin: 0;
/* flex gap instead of margins: sibling margins collapse and would halve
the 24px spacing measured between the cards on asabooking */
display: flex;
flex-direction: column;
gap: 24px;
}
.asa-s11 .search-result-area ul > li {
width: 100%;
display: flex;
align-items: stretch;
background-color: #fff;
border: 0;
border-radius: var(--s11-radius-card);
box-shadow: var(--s11-shadow);
padding: 10px; /* measured on asabooking: card = cover + 20px */
margin: 0 !important; /* spacing comes from the ul's 24px gap */
transition: box-shadow .2s;
}
.asa-s11 .search-result-area ul > li:hover {
box-shadow: 0 .35rem 1.4rem rgba(0, 0, 0, .1);
}
.asa-s11 .search-result-img {
width: 11.25rem;
height: 11.25rem;
flex: 0 0 auto;
border-radius: var(--s11-radius-field);
margin: 0;
overflow: hidden;
display: block;
}
.asa-s11 .search-result-img > img {
width: 11.25rem;
height: 11.25rem;
border-radius: var(--s11-radius-field);
object-fit: cover;
}
.asa-s11 .search-result-info {
flex: 1 1 auto;
min-width: 0;
width: auto;
padding: .35rem 1.5rem 0 1.5rem; /* .card-package-box-title */
display: flex;
flex-direction: column;
justify-content: flex-start;
gap: .7rem;
}
.asa-s11 .search-result-info h4 {
font-weight: 700; /* .room-item .title */
font-size: 1.125rem;
line-height: 1.7;
color: var(--s11-ink);
margin: 0;
}
.asa-s11 .search-result-info div {
font-size: .875rem; /* .location-box / .hotel-rating */
font-weight: 400;
line-height: 1.6;
color: var(--s11-ink);
display: flex;
align-items: center;
gap: .25rem;
}
.asa-s11 .search-result-info .s11-tags {
gap: .4rem;
margin: 0 !important;
flex-wrap: wrap;
}
.asa-s11 .search-result-info svg {
width: 1.05rem;
height: 1.05rem;
flex: 0 0 auto;
}
.asa-s11 .search-result-info .s11-star svg {
fill: var(--s11-star);
stroke: var(--s11-star);
}
.asa-s11 .search-result-info .s11-loc svg {
stroke: var(--s11-ink);
}
/* meal tags: صبحانه / ناهار / شام */
.asa-s11 .tag {
display: inline-flex;
align-items: center;
padding: .125rem .5rem;
margin: 0;
background-color: var(--s11-green-soft);
color: var(--s11-green-dark);
border: 0;
border-radius: .5rem;
font-size: .875rem;
line-height: 1.5rem;
width: max-content;
}
.asa-s11 .search-result-order {
width: 30%; /* .price-container-page-hotel-list */
flex: 0 0 auto;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 5px;
color: var(--s11-ink);
background-color: transparent !important;
padding: 0 .5rem;
margin: 0 !important;
border-radius: 0;
}
.asa-s11 .search-result-order > div:nth-child(1) {
font-size: .75rem; /* .price-box .detail-text */
font-weight: 400;
color: var(--s11-ink);
}
.asa-s11 .search-result-order > div:nth-child(2) {
display: flex;
gap: .3rem;
align-items: center;
justify-content: center;
margin: 0;
color: var(--s11-ink);
font-weight: 900; /* .price-box .price */
font-size: 1.5rem;
line-height: 2.563rem;
letter-spacing: -.1rem;
}
.asa-s11 .search-result-order > div:nth-child(2) span {
letter-spacing: normal; /* .price .currency */
font-size: 1.125rem;
line-height: 1.938rem;
font-weight: 300;
}
.asa-s11 .search-result-order a.btn,
.asa-s11 .search-result-order a.btn-success {
width: 100%; /* .btn-select { width:100% } */
margin-top: .35rem;
padding: .875rem 1rem;
line-height: 1.5; /* -> 54px tall, same as asabooking */
display: flex;
justify-content: center;
align-items: center;
background-color: var(--s11-green) !important;
border: 1px solid var(--s11-green) !important;
border-radius: var(--s11-radius-field);
color: #fff !important;
font-size: 1rem;
font-weight: 500;
box-shadow: none;
transition: all .2s;
}
.asa-s11 .search-result-order a.btn:hover,
.asa-s11 .search-result-order a.btn-success:hover {
background-color: var(--s11-green-dark) !important;
border-color: var(--s11-green-dark) !important;
}
/* the "first available date" suggestion card keeps an amber action button */
.asa-s11 .search-result-order a.btn-warning {
background-color: #f2d0a4 !important;
border-color: #f2d0a4 !important;
color: #755833 !important;
}
.asa-s11 .search-result-order a.btn-warning:hover {
background-color: #e5bd88 !important;
border-color: #e5bd88 !important;
}
/* "show more" button under the list */
.asa-s11 #load-more {
background-color: var(--s11-green-soft);
color: var(--s11-green);
border: 0;
border-radius: 50rem;
padding: .5rem 2rem;
font-size: 1rem;
font-weight: 500;
margin-top: .5rem;
}
.asa-s11 #load-more:hover {
background-color: var(--s11-green-dark);
color: #fff;
transform: none;
}
.asa-s11 .s11-empty {
background-color: #fff;
border-radius: var(--s11-radius-card);
box-shadow: var(--s11-shadow);
padding: 3rem 1rem;
text-align: center;
color: var(--s11-ink);
font-size: 1rem;
}
/* -------------------------------------------------------------------------
5. RESPONSIVE
------------------------------------------------------------------------- */
@media screen and (max-width: 1200px) {
.asa-s11 .s11-layout {
gap: 0;
}
.asa-s11 .search-filter-area {
width: 100% !important;
min-width: 0;
max-width: none;
flex: 1 1 100%;
display: flex;
background-color: transparent !important;
border: 0 !important;
overflow-x: auto;
margin-bottom: 1rem;
}
.asa-s11 .s11-filter-head {
display: none;
}
.asa-s11 .search-filter-area .filter-box {
max-width: max-content;
border: 1px solid var(--s11-line) !important;
border-radius: 50rem;
padding: .3rem .75rem;
background-color: #fff;
flex-shrink: 0;
margin-inline-end: .5rem;
}
.asa-s11 .search-filter-area .filter-box h5 {
font-size: .85rem;
}
.asa-s11 .filter-options {
position: fixed;
bottom: 0;
right: 0;
left: 0;
width: 100%;
background-color: #fff;
padding: 1.5rem 1rem 2rem 1rem;
border-radius: var(--s11-radius-card) var(--s11-radius-card) 0 0;
z-index: 1000;
box-shadow: 0 -.25rem 1.5rem rgba(0, 0, 0, .15);
display: flex;
justify-content: center;
}
.asa-s11 .filter-options > div {
width: min(24rem, 92%);
}
.asa-s11 .search-result-area {
flex: 1 1 100%;
width: 100%;
}
}
@media screen and (max-width: 991px) {
.asa-s11 .search-result-area ul > li {
flex-wrap: wrap;
}
.asa-s11 .search-result-img,
.asa-s11 .search-result-img > img {
width: 100%;
height: 164px;
}
.asa-s11 .search-result-info {
width: 100%;
padding: 1rem 0 0 0;
}
.asa-s11 .search-result-order {
width: 100%;
flex-direction: row !important;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
border-top: .063rem solid var(--s11-line-soft);
padding-top: 1rem;
margin-top: 1rem !important;
}
.asa-s11 .search-result-order a.btn,
.asa-s11 .search-result-order a.btn-success {
max-width: none;
}
.asa-s11 .quick-search-from-group-box,
.asa-s11 .quick-search-from-group-button {
width: calc(50% - .5rem) !important;
}
}
@media screen and (max-width: 575px) {
.asa-s11 .quick-search-from-group-box,
.asa-s11 .quick-search-from-group-button {
width: 100% !important;
}
.asa-s11 .s11-divider-title {
font-size: 1.2rem;
white-space: normal;
}
}
/* ==========================================================================
search11 : full-bleed layout
The page deliberately does NOT load layouts/sidebar4.php or layouts/header4.php.
app4.css still reserves the 250px sidebar gutter on #main and a 4rem top gap
on .main-content for the fixed .header1, so both have to be reclaimed here.
Scoped to body.asa-s11 - no other page in the panel is affected.
========================================================================== */
body.asa-s11 #main {
width: 100% !important;
max-width: 100% !important;
margin-right: 0 !important;
margin-left: 0 !important;
}
body.asa-s11 #main footer { right: 0 !important; }
body.asa-s11 .main-content {
margin-top: 0 !important;
padding: 1rem !important;
height: auto !important;
min-height: 100vh;
}
/* the sidebar/header are gone, so neither toggle class should shift anything */
body.asa-s11.small-navigation #main,
body.asa-s11.hidden-navigation #main {
width: 100% !important;
margin-right: 0 !important;
}
/* stray panel chrome that only makes sense next to the sidebar */
body.asa-s11 .sidebar1,
body.asa-s11 .header1,
body.asa-s11 .sidebar-overlay { display: none !important; }
/* ---------- mobile ---------- */
@media screen and (max-width: 991px) {
body.asa-s11 .main-content { padding: .75rem !important; }
/* filter rail above the results, full width */
.asa-s11 .s11-layout { flex-direction: column-reverse; }
.asa-s11 .search-filter-area {
position: static !important;
width: 100% !important;
max-width: 100% !important;
margin-bottom: 1rem;
}
.asa-s11 .s11-results-head { flex-direction: column; align-items: stretch; gap: .5rem; }
.asa-s11 .s11-sort-bar { justify-content: flex-start; flex-wrap: wrap; }
/* result card stacks: image, details, then price + button */
.asa-s11 .search-result-img { width: 100% !important; max-width: 100% !important; }
.asa-s11 .search-result-img img { width: 100%; height: 11rem; object-fit: cover; }
.asa-s11 li.d-flex { flex-wrap: wrap; }
.asa-s11 .search-result-info { width: 100% !important; }
.asa-s11 .search-result-order {
width: 100% !important;
display: flex !important;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: .5rem;
border-top: 1px solid #d0dbd6;
padding-top: .6rem;
margin-top: .6rem;
text-align: start;
}
.asa-s11 .search-result-order .btn { flex: 0 0 auto; padding-inline: 1.75rem; }
}
@media screen and (max-width: 575px) {
body.asa-s11 .main-content { padding: .5rem !important; }
.asa-s11 .search-result-order { flex-direction: column; align-items: stretch; }
.asa-s11 .search-result-order .btn { width: 100%; }
}
/* ==========================================================================
search11 mobile corrections
At <=1200px the base stylesheet turns every .filter-options into a
`position:fixed; bottom:0` sheet. More than one filter group can be open at
the same time, so the sheets pile up on top of each other and cover the
results. Render them inline under their own chip instead - predictable,
no overlap, no JS needed.
========================================================================== */
@media screen and (max-width: 1200px) {
.asa-s11 .filter-options {
position: static !important;
bottom: auto !important;
right: auto !important;
left: auto !important;
width: 100% !important;
padding: .5rem 0 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
z-index: auto !important;
display: block !important;
justify-content: flex-start !important;
}
.asa-s11 .filter-options.collapse:not(.show) { display: none !important; }
.asa-s11 .filter-options > div { width: 100% !important; }
/* one chip per row so an open group cannot be pushed off-screen */
.asa-s11 .search-filter-area {
flex-direction: column !important;
overflow-x: visible !important;
gap: .5rem;
background-color: #fff !important;
border: 1px solid var(--s11-line) !important;
border-radius: var(--s11-radius-card);
padding: .75rem;
}
.asa-s11 .search-filter-area .filter-box {
max-width: none !important;
width: 100%;
border-radius: var(--s11-radius-card) !important;
margin-inline-end: 0 !important;
padding: .6rem .85rem;
}
.asa-s11 .s11-filter-head { display: flex !important; }
}
@media screen and (max-width: 991px) {
/* results first, filters underneath - matches booking's mobile order */
.asa-s11 .s11-layout { flex-direction: column !important; }
.asa-s11 .search-filter-area { order: 2; margin-top: 1rem; }
.asa-s11 .search-result-area { order: 1; }
/* the quick-search box was overflowing its container */
.asa-s11 .s11-hero, .asa-s11 .quick-search { width: 100% !important; }
.asa-s11 .quick-search-from-group-box,
.asa-s11 .quick-search-from-group-button { min-width: 0 !important; }
}
@media screen and (max-width: 575px) {
.asa-s11 .search-result-img img { height: 9.5rem; }
.asa-s11 .s11-divider-title { font-size: 1.05rem; }
}
/* top bar (logout) — header4 is not loaded on this page */
.asa-s11 .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: #424c55;
position: sticky; top: 0; z-index: 1030;
}
.asa-s11 .bk-topbar__back { font-weight: 800; color: #198066; letter-spacing: .5px; text-decoration: none; }
.asa-s11 .bk-topbar__user { font-weight: 700; }
.asa-s11 .bk-topbar__spacer { flex: 1 1 auto; }
.asa-s11 .bk-topbar__exit {
background: #e03131; color: #fff !important; border-radius: .5rem;
padding: .3rem 1.1rem; font-weight: 700; white-space: nowrap; text-decoration: none;
}
.asa-s11 .bk-topbar__exit:hover { background: #c92a2a; }
@media (max-width: 575px) { .asa-s11 .bk-topbar { padding: .5rem .6rem; font-size: .8rem; } }
/* ==========================================================================
BOOKING SKIN
search11.php renders its own markup (.search-result-*, .filter-box), not
booking's class names. Rather than rewrite 260 KB of PHP + JS, every value
below is the one read out of booking's compiled bundle
(reserve/hotelname/asset/theme/main.js) and re-pointed at the classes this
page actually emits, so the live page matches the preview 1:1.
Loaded last, so it wins.
========================================================================== */
/* --- page title: .section-divider > p.divider-title {1.75rem, bolder, #424c55}
+ hr.divider-line {1px solid #d9d9d9; border-radius:50rem} --- */
.asa-s11 .s11-divider-title {
font-size: 1.75rem !important;
font-weight: bolder !important;
color: #424c55 !important;
white-space: nowrap;
}
.asa-s11 .s11-divider-line {
border: 1px solid #d9d9d9 !important;
border-radius: 50rem !important;
background: none !important;
height: 0 !important;
opacity: 1 !important;
}
/* the little green bracket booking puts before the title */
.asa-s11 .s11-section-divider { display: flex; align-items: center; gap: .8rem; margin: .9rem 0; }
.asa-s11 .s11-section-divider::before {
content: "";
min-width: 4px; width: 4px; height: 28px;
background: #09b288;
border-radius: 50rem;
order: -1;
}
/* --- sort chips: .btn__room-filter --- */
.asa-s11 .s11-sort-btn {
background-color: transparent !important;
color: #424c55 !important;
padding: .25rem .75rem !important;
border-radius: 50rem !important;
font-weight: 400 !important;
font-size: .875rem !important;
border: 1px solid rgba(23, 42, 58, .2) !important;
}
.asa-s11 .s11-sort-btn:hover,
.asa-s11 .s11-sort-btn.s11-selected {
color: #fff !important;
background-color: #198066 !important;
border-color: #198066 !important;
}
/* --- result card: .card-package-page-list-hotel --- */
.asa-s11 .search-result-area ul > li {
background-color: #fff !important;
box-shadow: 0rem .25rem 1rem rgba(0, 0, 0, .06) !important;
border-radius: 1.25rem !important;
border: 0 !important;
margin: .85rem 0 !important;
padding: 15px !important;
align-items: center;
gap: 1rem;
}
.asa-s11 .search-result-area ul > li:hover {
box-shadow: 0rem .35rem 1.4rem rgba(0, 0, 0, .10) !important;
}
/* .cover { width:11.25rem; height:11.25rem; border-radius:.75rem } */
.asa-s11 .search-result-img { flex: 0 0 auto !important; }
.asa-s11 .search-result-img > img {
width: 11.25rem !important;
height: 11.25rem !important;
object-fit: cover !important;
border-radius: .75rem !important;
background-color: #dfebe5;
}
/* .title { font-weight:bolder; font-size:1.125rem; color:#424c55 } */
.asa-s11 .search-result-info h4 {
font-weight: bolder !important;
font-size: 1.125rem !important;
color: #424c55 !important;
margin: 0 0 .5rem !important;
}
/* .card__our-suggestion-hotel-rating + .location-box {400, #424c55, .875rem} */
.asa-s11 .search-result-info .s11-star,
.asa-s11 .search-result-info .s11-loc {
font-weight: 400 !important;
color: #424c55 !important;
font-size: .875rem !important;
}
.asa-s11 .search-result-info .s11-star svg { color: #f5a623 !important; }
/* .diet-box > .item { bg #f2d0a4; color #755833; radius .5rem; .875rem/1.5rem } */
.asa-s11 .tag {
background-color: #f2d0a4 !important;
color: #755833 !important;
padding: .125rem .5rem !important;
border-radius: .5rem !important;
font-size: .875rem !important;
line-height: 1.5rem !important;
}
.asa-s11 .search-result-info .s11-tags { gap: .6rem !important; }
/* .price-box { column, centered } / .price 1.375rem / .currency 1.125rem 300 */
.asa-s11 .search-result-order {
display: flex !important;
flex-direction: column;
justify-content: center;
align-items: center;
gap: .35rem;
width: 27.9% !important;
}
.asa-s11 .search-result-order > div:nth-child(1) {
color: #424c55 !important;
font-size: 1rem !important;
}
.asa-s11 .search-result-order > div:nth-child(2) {
color: #424c55 !important;
font-weight: 700 !important;
font-size: 1.375rem !important;
}
.asa-s11 .search-result-order > div:nth-child(2) span {
letter-spacing: normal !important;
font-size: 1.125rem !important;
line-height: 1.938rem !important;
font-weight: 300 !important;
}
/* .btn-select { bg rgb(9,178,136); hover rgb(25,128,102) } */
.asa-s11 .search-result-order a.btn,
.asa-s11 .search-result-order a.btn-success {
background-color: #09b288 !important;
border-color: #09b288 !important;
color: #fff !important;
font-weight: 700 !important;
border-radius: .5rem !important;
padding: .55rem 1.5rem !important;
width: 100%;
text-align: center;
}
.asa-s11 .search-result-order a.btn:hover,
.asa-s11 .search-result-order a.btn-success:hover {
background-color: #198066 !important;
border-color: #198066 !important;
}
/* --- filter rail: .page-hotel-list-filter --- */
.asa-s11 .search-filter-area {
border: 1px solid #d0dbd6 !important;
border-radius: 1.25rem !important;
background-color: #fff !important;
overflow: hidden;
}
/* .page-hotel-list-filter .title { border-bottom:1px solid #d0dbd6; padding:1rem;
font-weight:700; color:#424c55; font-size:1rem } */
.asa-s11 .s11-filter-head {
border-bottom: 1px solid #d0dbd6 !important;
padding: 1rem !important;
font-weight: 700 !important;
color: #424c55 !important;
font-size: 1rem !important;
margin: 0 !important;
}
.asa-s11 .s11-filter-head a { color: #09b288 !important; font-size: .875rem !important; }
/* the five filter containers: {padding:1rem; border-bottom:1px solid #d0dbd6} */
.asa-s11 .search-filter-area .filter-box {
padding: 1rem !important;
border: 0 !important;
border-bottom: 1px solid #d0dbd6 !important;
border-radius: 0 !important;
margin: 0 !important;
background: transparent !important;
}
.asa-s11 .search-filter-area .filter-box:last-child { border-bottom: 0 !important; }
.asa-s11 .search-filter-area .filter-box h5 {
font-weight: 700 !important;
color: #424c55 !important;
font-size: 1rem !important;
margin: 0 !important;
}
/* Checkboxes: the page already hides the real and draws the box with
label::before / label::after (see .filter_stars > label:before above). An
input[type=checkbox] rule here would un-hide the input and stack a second
box next to the drawn one, so only the pseudo-element is restyled. */
.asa-s11 .search-filter-area .filter_stars > input,
.asa-s11 .search-filter-area .filter_cap > input,
.asa-s11 .search-filter-area .filter-room-kind > div > input { display: none !important; }
.asa-s11 .filter_stars > label:before,
.asa-s11 .filter_cap > label:before,
.asa-s11 .filter-room-kind > div > label:before {
width: 1.125rem;
height: 1.125rem;
border: 1px solid #d0dbd6;
border-radius: .25rem;
background-color: #fff;
}
.asa-s11 .filter_stars > input:checked + label:before,
.asa-s11 .filter_cap > input:checked + label:before,
.asa-s11 .filter-room-kind > div > input:checked + label:before {
background-color: #09b288;
border-color: #09b288;
}
.asa-s11 .filter_stars > input:checked + label:after,
.asa-s11 .filter_cap > input:checked + label:after,
.asa-s11 .filter-room-kind > div > input:checked + label:after { display: block; }
.asa-s11 .search-filter-area label {
color: #424c55; font-size: .9375rem; cursor: pointer;
border: 0 !important; background: transparent !important;
}
/* --- "نمایش بیشتر": .btn-more --- */
.asa-s11 .s11-loadmore .btn,
.asa-s11 .btn-more {
border-radius: 50rem !important;
color: #198066 !important;
border: 1px solid #09b288 !important;
background-color: transparent !important;
padding: .4rem 1.5rem !important;
}
.asa-s11 .s11-loadmore .btn:hover,
.asa-s11 .btn-more:hover { background-color: #dfebe5 !important; }
@media screen and (max-width: 1200px) {
.asa-s11 .search-result-img > img { width: 100% !important; height: 11rem !important; }
.asa-s11 .search-result-order { width: 100% !important; }
.asa-s11 .s11-divider-title { font-size: 1.25rem !important; white-space: normal; }
}
@media screen and (max-width: 991px) {
.asa-s11 .search-result-order {
flex-direction: row !important;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
}
.asa-s11 .search-result-order a.btn,
.asa-s11 .search-result-order a.btn-success { width: auto !important; flex: 0 0 auto; }
}
/* --- filter order ---
The visual order now lives with the markup: each group in search11.php
carries style="order:N". Counting with :nth-of-type broke every time the rail
gained a child - adding the sticky apply bar shifted every index by one,
which is how بازه قیمتی ended up first. */
.asa-s11 .search-filter-area { display: flex !important; flex-direction: column !important; }
.asa-s11 .search-filter-area .filter-box { border-bottom: 1px solid #d0dbd6 !important; }
.asa-s11 .search-filter-area .filter-box[style*="order:6"] { border-bottom: 0 !important; }
/* --- hero: booking wraps its search in a dark strip, not floating white --- */
.asa-s11 .s11-hero {
background: #2f4858 !important;
border-radius: 0 !important;
box-shadow: none !important;
margin-inline: calc(50% - 50vw) !important;
padding: 1rem calc(50vw - 50%) !important;
max-width: none !important;
width: auto !important;
}
.asa-s11 .s11-hero .quick-search {
background: transparent !important;
box-shadow: none !important;
border: 0 !important;
padding: 0 !important;
max-width: 1320px;
margin-inline: auto;
}
.asa-s11 .s11-hero .quick-search-from-group-box {
background: #fff !important;
border-radius: .75rem !important;
border: 0 !important;
}
.asa-s11 .s11-hero .nav-tabs .nav-link,
.asa-s11 .s11-hero .nav-link { color: rgba(255,255,255,.75) !important; }
.asa-s11 .s11-hero .nav-link.active {
color: #fff !important;
border-bottom-color: #09b288 !important;
background: transparent !important;
}
@media screen and (max-width: 991px) {
.asa-s11 .s11-hero { padding-inline: .85rem !important; }
}
/* ==========================================================================
Mobile filters — booking's «فیلترها» pill opening a full-screen panel.
No transforms and no direction-dependent offsets: the panel is simply
display:none -> display:flex over the whole viewport, so it cannot half-open
or slide in from the wrong side in RTL. Desktop is untouched — every rule
here lives inside the <=991px query.
========================================================================== */
.asa-s11 .s11-filter-pill,
.asa-s11 .s11-filter-backdrop,
.asa-s11 .s11-filter-close { display: none; }
@media screen and (max-width: 991px) {
.asa-s11 .s11-filter-pill {
display: inline-flex;
align-items: center;
gap: .4rem;
position: fixed;
bottom: 1rem;
left: 50%;
margin-inline-start: -4.5rem; /* half the pill, direction-neutral */
width: 9rem;
justify-content: center;
z-index: 1035;
background: #2f4858;
color: #fff;
border: 0;
border-radius: 50rem;
padding: .55rem 1rem;
font: inherit;
font-weight: 700;
font-size: .9rem;
box-shadow: 0 4px 16px rgba(0, 13, 26, .25);
cursor: pointer;
transition: opacity .2s ease, transform .2s ease;
}
body.s11-filters-open .s11-filter-pill {
opacity: 0;
pointer-events: none;
transform: translateY(1rem);
}
/* No backdrop on phones. The sheet already covers the whole viewport, so a
dimmer adds nothing visually - and while it was present it painted over
the sheet and swallowed every click on a checkbox. */
.asa-s11 .s11-filter-backdrop { display: none !important; }
body.s11-filters-open { overflow: hidden; }
/* the rail is always the full-screen sheet on phones; it slides up from
the bottom rather than appearing instantly. visibility (not display)
keeps it transitionable while staying untabbable when closed. */
.asa-s11 .search-filter-area {
display: flex !important;
flex-direction: column !important;
position: fixed !important;
inset: 0 !important;
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
border-radius: 0 !important;
background: #fff !important;
z-index: 2147483000; /* above .bk-topbar (1030) and the pill (1035) */
overflow-y: auto;
overscroll-behavior: contain;
visibility: hidden;
opacity: 0;
transform: translateY(2.5rem);
transition: transform .26s cubic-bezier(.22, .61, .36, 1),
opacity .2s ease,
visibility 0s linear .26s;
}
body.s11-filters-open .search-filter-area {
visibility: visible;
opacity: 1;
transform: translateY(0);
transition: transform .26s cubic-bezier(.22, .61, .36, 1),
opacity .2s ease,
visibility 0s linear 0s;
}
@media (prefers-reduced-motion: reduce) {
.asa-s11 .search-filter-area,
.asa-s11 .s11-filter-backdrop { transition: none; }
}
.asa-s11 .s11-filter-head {
position: sticky;
top: 0;
background: #fff;
z-index: 2;
display: flex !important;
align-items: center;
gap: .6rem;
border-bottom: 1px solid #d0dbd6 !important;
}
body.s11-filters-open .search-filter-area,
body.s11-filters-open .search-filter-area * { pointer-events: auto; }
.asa-s11 .s11-filter-close {
display: inline-flex;
align-items: center;
justify-content: center;
margin-inline-start: auto;
width: 2rem;
height: 2rem;
flex: 0 0 2rem;
border: 0;
border-radius: 50%;
background: #f1f4f3;
color: #424c55;
font-size: 1rem;
cursor: pointer;
}
/* results own the full width; the rail never sits inline on phones */
.asa-s11 .s11-layout { display: block !important; }
.asa-s11 .search-result-area { width: 100% !important; flex: 1 1 100% !important; }
/* clear the floating pill */
body.asa-s11 .main-content { padding-bottom: 5.5rem !important; }
}
/* --- destination field: long hotel names must ellipsize, never overflow ---
#_search is a select2 widget, so the text lives in .select2-selection__rendered
rather than in an ; both are covered here. */
/* NOTE: the popup and the swap button must escape the box, so this element
must NOT clip. Ellipsizing is done by the child rules below, which already
set overflow/text-overflow on the input / select / select2 themselves.
With overflow:hidden here, .flight_passenger (the passenger stepper, absolutely
positioned under the field) and .swap (the round button at left:-1rem) were
both clipped away - the stepper opened but was invisible, so the passenger
count could not be changed, and the swap button showed as a green sliver. */
.asa-s11 .quick-search-from-group-box { min-width: 0; overflow: visible; }
.asa-s11 .quick-search-from-group-box > label { min-width: 0; }
.asa-s11 .quick-search-from-group-box input,
.asa-s11 .quick-search-from-group-box select,
.asa-s11 .quick-search-from-group-box .select2-selection__rendered,
.asa-s11 .quick-search-from-group-box .select2-selection,
.asa-s11 .quick-search-from-group-box .select2-container {
max-width: 100% !important;
min-width: 0 !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
display: block;
}
.asa-s11 .quick-search-from-group-box .select2-selection__rendered {
padding-inline-end: 1.25rem !important; /* room for the caret */
}
/* remaining-credit chip in the top bar */
.asa-s11 .bk-topbar__credit { color: #757f88; white-space: nowrap; font-size: .82rem; }
.asa-s11 .bk-topbar__credit b { color: #424c55; }
@media (max-width: 575px) { .asa-s11 .bk-topbar__credit { display: none; } }
/* ==========================================================================
Mobile: kill the legacy .overlay1 dimmer inside the filter sheet.
toggle_filter_option() (search11.php:3227-3238) appends
→ position:fixed; inset:0; z-index:999
into .search-filter-area every time a group is expanded. On desktop that
dims the page behind the bottom-sheet. On phones the rail IS the full-screen
sheet, so the overlay lands on top of it — that is what greyed the panel out
and swallowed every tap on a checkbox.
The JS is left alone; the element is simply not rendered here.
========================================================================== */
@media screen and (max-width: 991px) {
.asa-s11 .search-filter-area .overlay1,
body.s11-filters-open .overlay1 { display: none !important; }
}
/* sticky "اعمال فیلتر" inside the mobile sheet — desktop keeps the one that
already lives in the price group */
.asa-s11 .s11-filter-apply { display: none; }
@media screen and (max-width: 991px) {
.asa-s11 .s11-filter-apply {
display: block;
position: sticky;
bottom: 0;
margin-top: auto;
background: #fff;
border-top: 1px solid #d0dbd6;
padding: .75rem 1rem calc(.75rem + env(safe-area-inset-bottom, 0px));
z-index: 3;
}
.asa-s11 .s11-filter-apply .btn {
width: 100%;
background-color: #09b288 !important;
border-color: #09b288 !important;
color: #fff !important;
font-weight: 700;
border-radius: .6rem;
padding: .7rem 1rem;
}
.asa-s11 .s11-filter-apply .btn:hover {
background-color: #198066 !important;
border-color: #198066 !important;
}
/* leave room so the last group is not hidden behind the apply bar */
.asa-s11 .search-filter-area .filter-box:last-of-type { margin-bottom: .5rem; }
}
/* --- flight tab: swap button + passenger stepper ------------------------- */
.asa-s11 .swap { z-index: 5; }
.asa-s11 .flight_passenger { z-index: 1001; } /* above .overlay1 (999) */
/* --- flight card meta (route, flight no, duration, aircraft, child fare) --- */
.asa-s11 .s11-flight-no {
font-size: .72rem; font-weight: 600; color: #09b288;
background: #e7f7f2; border-radius: 100rem; padding: .05rem .5rem;
margin-inline-start: .35rem; vertical-align: middle;
}
.asa-s11 .s11-flight-dur {
font-size: .72rem; color: #757f88;
background: #f1f4f3; border-radius: 100rem; padding: .1rem .55rem;
margin-inline-start: .35rem; white-space: nowrap;
}
.asa-s11 .s11-flight-meta { font-size: .82rem; color: #424c55; }
.asa-s11 .s11-flight-chd {
font-size: .72rem; color: #757f88; margin-inline-start: .6rem; white-space: nowrap;
}
/* ==========================================================================
BANNER + LANGUAGE SWITCH (2026-09-07)
Ported from deploy/asabooking (assets/css/app.css:28-52) and adapted:
there the skyline sits on a LIGHT header, here the hero is dark, so the
gradient is deepened and the skyline is redrawn in a light teal
(images/s11-skyline.svg) instead of carrying its own white sky.
Everything is appended - no existing rule is edited. The old flat
`background:#2f4858` block above still applies; these override only the
background layer and add the new title/lang pieces.
========================================================================== */
.asa-s11 .s11-hero {
position: relative !important;
overflow: hidden !important;
/* deep teal, lightened toward the horizon so the skyline reads */
background: linear-gradient(180deg, #223b49 0%, #2f4858 55%, #35505f 100%) !important;
/* the hero is .d-flex in the markup and held one child (.quick-search);
stacking lets the headline sit above the search box instead of beside it */
flex-direction: column !important;
}
/* the skyline itself - decorative only, never intercepts a click */
.asa-s11 .s11-hero::after {
content: "";
position: absolute;
inset-inline: 0;
bottom: 0;
height: 160px;
background: url('../images/s11-skyline.svg') center bottom / 1400px 160px no-repeat;
pointer-events: none;
z-index: 0;
}
/* a soft glow behind the search box so the white card never fights the art */
.asa-s11 .s11-hero::before {
content: "";
position: absolute;
inset: 0;
background: radial-gradient(120% 130% at 50% 120%, rgba(9,178,136,.20) 0%, rgba(9,178,136,0) 62%);
pointer-events: none;
z-index: 0;
}
/* keep every real control above the decoration */
.asa-s11 .s11-hero > * { position: relative; z-index: 1; }
/* --- banner headline ---------------------------------------------------- */
.asa-s11 .s11-banner-head {
max-width: 1320px;
margin: 0 auto .85rem;
color: #fff;
display: flex;
align-items: baseline;
gap: .6rem;
flex-wrap: wrap;
}
.asa-s11 .s11-banner-head h2 {
margin: 0;
font-size: 1.35rem;
font-weight: 800;
letter-spacing: .2px;
color: #fff;
}
.asa-s11 .s11-banner-head span {
font-size: .85rem;
color: rgba(255,255,255,.72);
font-weight: 500;
}
/* --- language switch (topbar) -------------------------------------------
Mechanism already existed: language/multi_languages.php reads ?lang=fa|en|ar
and writes $_SESSION['lang']. Only the control was missing. */
.asa-s11 .s11-lang {
display: inline-flex;
align-items: center;
gap: .35rem;
margin-inline-start: .5rem;
}
.asa-s11 .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;
}
.asa-s11 .s11-lang a:hover { background: #eef2f4; color: #2f4858; }
.asa-s11 .s11-lang a.active {
background: #fff;
border-color: #d8e0e4;
color: #1f2d36;
box-shadow: 0 1px 0 #eef1f3;
}
.asa-s11 .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) {
.asa-s11 .s11-hero::after { height: 110px; background-size: 900px 110px; }
.asa-s11 .s11-banner-head h2 { font-size: 1.1rem; }
.asa-s11 .s11-banner-head span { font-size: .78rem; }
}
@media screen and (max-width: 575px) {
.asa-s11 .s11-hero::after { opacity: .55; }
.asa-s11 .s11-lang a span { display: none; } /* flags only on small screens */
.asa-s11 .s11-lang a { padding: .3rem; }
}
/* ==========================================================================
DATEPICKER FIX + UI POLISH (2026-09-07)
1. THE ARROW BUG
The picker is jQuery UI's (.ui-datepicker) despite the vendor filename.
The minified build in vendors/datepicker-jalali ships:
.ui-datepicker .ui-datepicker-prev,
.ui-datepicker .ui-datepicker-next { position:absolute; top:1px }
... span { position:absolute; left:50%; margin-left:-8px; ... }
and NEVER gives the
a width or height. Its only child is absolutely
positioned, so the anchor collapses to a 0x0 box: the glyph paints (the
span is positioned off it) but there is nothing to click, and it sits at
top:1px instead of on the title line. Upstream jQuery UI supplies
width:1.8em;height:1.8em - that rule was dropped in this build.
Fixed by giving both a real box, centring the glyph in flow, and putting
them on the same baseline as the month title.
========================================================================== */
.asa-s11 .ui-datepicker,
.ui-datepicker {
width: 19.5em;
padding: .35rem .4rem .5rem;
border: 1px solid var(--s11-line, #d0dbd6);
border-radius: 1rem;
box-shadow: 0 .75rem 2rem rgba(31, 45, 54, .16);
background: #fff;
font-family: inherit;
z-index: 1200 !important;
}
/* ---- header: title centred, arrows as real round buttons --------------- */
.ui-datepicker .ui-datepicker-header {
position: relative;
display: flex;
align-items: center;
justify-content: space-between;
gap: .25rem;
padding: .35rem .25rem .5rem;
border-bottom: 1px solid #eef1f3;
background: transparent;
border-radius: 0;
}
/* THE FIX (2nd pass): a real, clickable box, glyph on the ANCHOR.
v1 put the chevron on `span::before` and set font-size:0 on the anchor to
hide the "قبل"/"بعد" label. The circles rendered but stayed empty, so this
build's prev/next do not hold the jQuery UI normally emits. Drawing
on the anchor works whatever is (or is not) inside it.
Ordering matters too: jQuery UI emits prev, next, THEN title, so a plain
space-between pushed both buttons together and left the title stranded -
which is what the screenshot showed. `order` puts them back as
prev | title | next. */
.ui-datepicker .ui-datepicker-prev,
.ui-datepicker .ui-datepicker-next {
position: static !important; /* was absolute + top:1px */
top: auto !important;
left: auto !important;
right: auto !important;
display: inline-flex !important;
align-items: center;
justify-content: center;
width: 2rem;
height: 2rem;
flex: 0 0 2rem;
border-radius: 50%;
background: #f2f5f7;
color: var(--s11-ink, #424c55);
cursor: pointer;
text-decoration: none;
border: 0;
overflow: hidden; /* clip any leftover label text */
text-indent: 0 !important;
transition: background .15s ease, color .15s ease, transform .15s ease;
-webkit-user-select: none; user-select: none;
}
.ui-datepicker .ui-datepicker-prev { order: 1; }
.ui-datepicker .ui-datepicker-title { order: 2; }
.ui-datepicker .ui-datepicker-next { order: 3; }
/* hide whatever label the plugin put inside, however it is marked up */
.ui-datepicker .ui-datepicker-prev *,
.ui-datepicker .ui-datepicker-next * {
display: none !important;
}
/* the chevron, drawn on the anchor itself */
.ui-datepicker .ui-datepicker-prev::before,
.ui-datepicker .ui-datepicker-next::before {
font-family: system-ui, "Segoe UI", Tahoma, sans-serif;
font-size: 1.25rem;
line-height: 1;
font-weight: 700;
display: block;
}
/* RTL (fa / ar): "previous month" points right */
.ui-datepicker .ui-datepicker-prev::before { content: "\203A"; }
.ui-datepicker .ui-datepicker-next::before { content: "\2039"; }
/* LTR (en): mirror them back */
.ui-datepicker:not(.ui-datepicker-rtl) .ui-datepicker-prev::before { content: "\2039"; }
.ui-datepicker:not(.ui-datepicker-rtl) .ui-datepicker-next::before { content: "\203A"; }
.ui-datepicker .ui-datepicker-prev:hover,
.ui-datepicker .ui-datepicker-next:hover {
background: var(--s11-green, #09b288);
color: #fff;
}
.ui-datepicker .ui-datepicker-prev:active,
.ui-datepicker .ui-datepicker-next:active { transform: scale(.94); }
/* jQuery UI adds .ui-state-disabled at the minDate boundary */
.ui-datepicker .ui-datepicker-prev.ui-state-disabled,
.ui-datepicker .ui-datepicker-next.ui-state-disabled {
opacity: .3;
pointer-events: none;
}
.ui-datepicker .ui-datepicker-title {
margin: 0 !important; /* was 0 3.3em, to clear the absolute arrows */
flex: 1 1 auto;
text-align: center;
font-size: .95rem;
font-weight: 800;
color: var(--s11-ink, #424c55);
line-height: 2rem;
}
/* ---- grid ------------------------------------------------------------- */
.ui-datepicker table { margin: .35rem 0 .15rem; font-size: .85rem; }
.ui-datepicker th {
padding: .4rem .2rem;
font-size: .72rem;
font-weight: 700;
color: var(--s11-ink-soft, #757f88);
}
.ui-datepicker td { padding: 2px; }
.ui-datepicker td span,
.ui-datepicker td a {
display: block;
padding: .45rem .2rem;
border-radius: .5rem;
text-align: center;
line-height: 1.1;
transition: background .12s ease, color .12s ease;
}
.ui-datepicker td a:hover { background: var(--s11-green-soft, #dfebe5); color: var(--s11-green-dark, #198066); }
.ui-datepicker .ui-state-active,
.ui-datepicker .ui-widget-content .ui-state-active {
background: var(--s11-green, #09b288) !important;
color: #fff !important;
font-weight: 700;
}
.ui-datepicker .ui-datepicker-today .ui-state-default {
background: #fff7e0;
box-shadow: inset 0 0 0 1px #f0d69a;
}
.ui-datepicker .ui-datepicker-other-month a,
.ui-datepicker .ui-datepicker-other-month span { opacity: .35; }
/* ==========================================================================
BANNER, second pass - depth instead of a flat plate
========================================================================== */
.asa-s11 .s11-hero {
background:
radial-gradient(90% 120% at 15% -10%, rgba(9,178,136,.28) 0%, rgba(9,178,136,0) 55%),
radial-gradient(70% 100% at 88% 0%, rgba(80,170,255,.16) 0%, rgba(80,170,255,0) 60%),
linear-gradient(165deg, #1e3947 0%, #2f4858 52%, #375563 100%) !important;
padding-block: 1.35rem 1.15rem !important;
}
/* faint star field, top third only - pure CSS, no extra request */
.asa-s11 .s11-hero .s11-banner-head::before {
content: "";
position: absolute;
inset-inline: 0;
top: -1.35rem;
height: 6rem;
background-image:
radial-gradient(1.5px 1.5px at 12% 30%, rgba(255,255,255,.55) 50%, transparent 51%),
radial-gradient(1.2px 1.2px at 28% 62%, rgba(255,255,255,.40) 50%, transparent 51%),
radial-gradient(1.6px 1.6px at 47% 22%, rgba(255,255,255,.50) 50%, transparent 51%),
radial-gradient(1.2px 1.2px at 63% 55%, rgba(255,255,255,.35) 50%, transparent 51%),
radial-gradient(1.7px 1.7px at 78% 28%, rgba(255,255,255,.50) 50%, transparent 51%),
radial-gradient(1.3px 1.3px at 91% 60%, rgba(255,255,255,.38) 50%, transparent 51%);
pointer-events: none;
z-index: -1;
}
.asa-s11 .s11-banner-head { position: relative; }
.asa-s11 .s11-banner-head h2 {
font-size: 1.5rem;
text-shadow: 0 1px 2px rgba(0,0,0,.18);
}
/* a small brand rule under the headline */
.asa-s11 .s11-banner-head h2::after {
content: "";
display: block;
width: 2.5rem;
height: 3px;
margin-top: .4rem;
border-radius: 2px;
background: linear-gradient(90deg, var(--s11-green, #09b288), rgba(9,178,136,0));
}
/* the white search card lifted off the art */
.asa-s11 .s11-hero .quick-search-from-group-box {
box-shadow: 0 .5rem 1.25rem rgba(12, 26, 34, .18) !important;
transition: box-shadow .18s ease, transform .18s ease;
}
.asa-s11 .s11-hero .quick-search-from-group-box:focus-within {
box-shadow: 0 .6rem 1.5rem rgba(9, 178, 136, .30) !important;
transform: translateY(-1px);
}
/* ==========================================================================
GENERAL POLISH - motion and focus, nothing structural
========================================================================== */
.asa-s11 .btn,
.asa-s11 .search-result-item,
.asa-s11 .filter-box { transition: box-shadow .18s ease, transform .18s ease, background-color .18s ease; }
.asa-s11 .btn-success:hover { box-shadow: 0 .35rem .9rem rgba(9,178,136,.32); transform: translateY(-1px); }
.asa-s11 .btn-success:active { transform: translateY(0); }
.asa-s11 .search-result-item:hover {
box-shadow: 0 .6rem 1.5rem rgba(31,45,54,.12);
transform: translateY(-2px);
}
/* keyboard users get a visible ring everywhere */
.asa-s11 a:focus-visible,
.asa-s11 button:focus-visible,
.asa-s11 input:focus-visible,
.asa-s11 select:focus-visible {
outline: 2px solid var(--s11-green, #09b288);
outline-offset: 2px;
border-radius: .35rem;
}
/* respect the OS "reduce motion" setting */
@media (prefers-reduced-motion: reduce) {
.asa-s11 *, .asa-s11 *::before, .asa-s11 *::after {
transition-duration: .01ms !important;
animation-duration: .01ms !important;
}
}
/* ==========================================================================
SOURCE BADGE + LIVELIER UI (2026-09-07)
========================================================================== */
/* --- which system the room came from ------------------------------------
Keyed off hotel.Hotel_Kind_Import_Data, emitted by s11SourceBadge().
Deliberately quiet: it is provenance, not a selling point, so it reads as
a small tinted pill beside the name rather than a shouty ribbon. */
.asa-s11 .s11-src {
display: inline-flex;
align-items: center;
gap: .25rem;
font-size: .68rem;
font-weight: 700;
line-height: 1;
padding: .22rem .45rem;
border-radius: .35rem;
vertical-align: middle;
margin-inline-start: .4rem;
border: 1px solid transparent;
white-space: nowrap;
letter-spacing: .1px;
}
.asa-s11 .s11-src::before {
content: "";
width: .38rem; height: .38rem;
border-radius: 50%;
background: currentColor;
opacity: .75;
}
.asa-s11 .s11-src--asa { background: #e6f7f1; color: #0b7d60; border-color: #c3ebdd; }
.asa-s11 .s11-src--egh { background: #e8f1fd; color: #1c5fb0; border-color: #cbe0f8; }
.asa-s11 .s11-src--snp { background: #fdeceb; color: #c0392b; border-color: #f8d3d0; }
.asa-s11 .s11-src--gar { background: #f3ecfd; color: #6b3fb5; border-color: #e2d5f7; }
.asa-s11 .s11-src--irq { background: #fff4e0; color: #a5691a; border-color: #f6e0b8; }
/* the name line has to wrap gracefully once a pill sits in it */
.asa-s11 .search-result-info h4 {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: .15rem .1rem;
}
/* --- results feel alive -------------------------------------------------- */
.asa-s11 .search-result-img { overflow: hidden; border-radius: var(--s11-radius-field, .75rem); }
.asa-s11 .search-result-img img {
transition: transform .35s cubic-bezier(.2,.7,.3,1);
will-change: transform;
}
.asa-s11 li:hover .search-result-img img { transform: scale(1.05); }
/* cards arrive instead of snapping in */
@keyframes s11-rise {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: none; }
}
.asa-s11 .search-result-list > li {
animation: s11-rise .32s ease-out both;
border-radius: var(--s11-radius-card, 1.25rem);
}
/* stagger the first handful; anything past that appears immediately */
.asa-s11 .search-result-list > li:nth-child(1) { animation-delay: .00s }
.asa-s11 .search-result-list > li:nth-child(2) { animation-delay: .04s }
.asa-s11 .search-result-list > li:nth-child(3) { animation-delay: .08s }
.asa-s11 .search-result-list > li:nth-child(4) { animation-delay: .12s }
.asa-s11 .search-result-list > li:nth-child(5) { animation-delay: .16s }
.asa-s11 .search-result-list > li:nth-child(6) { animation-delay: .20s }
/* price is the thing the agent scans for - give it weight */
.asa-s11 .search-result-order > div:nth-child(2) {
font-weight: 800;
color: var(--s11-green-dark, #198066);
}
/* the book button reads as the primary action */
.asa-s11 .search-result-order .btn-success {
box-shadow: 0 .2rem .6rem rgba(9,178,136,.22);
font-weight: 700;
}
/* meal tags: softer, consistent with the source pill */
.asa-s11 .s11-tags .tag {
transition: background-color .15s ease, color .15s ease;
}
.asa-s11 .s11-tags .tag:hover {
background: var(--s11-green-soft, #dfebe5);
color: var(--s11-green-dark, #198066);
}
/* --- skeleton shimmer while a search is running -------------------------- */
@keyframes s11-shimmer { to { background-position-x: -200%; } }
.asa-s11 .s11-loading .search-result-img,
.asa-s11 .s11-loading .search-result-info h4 {
background: linear-gradient(90deg, #eef1f3 8%, #f7f9fa 18%, #eef1f3 33%);
background-size: 200% 100%;
animation: s11-shimmer 1.2s linear infinite;
}
/* --- filter rail: quieter until touched ---------------------------------- */
.asa-s11 .search-filter-area .filter-box { transition: background-color .15s ease; }
.asa-s11 .search-filter-area .filter-box:hover { background-color: #fbfcfc; }
/* --- scrollbar, so long result lists do not look like a system dialog ---- */
.asa-s11 *::-webkit-scrollbar { width: 10px; height: 10px; }
.asa-s11 *::-webkit-scrollbar-thumb {
background: #cfd8dc; border-radius: 6px; border: 2px solid transparent;
background-clip: content-box;
}
.asa-s11 *::-webkit-scrollbar-thumb:hover { background: #b0bec5; background-clip: content-box; }
.asa-s11 *::-webkit-scrollbar-track { background: transparent; }
/* the reduce-motion guard above already covers these animations */
@media (prefers-reduced-motion: reduce) {
.asa-s11 .search-result-list > li { animation: none !important; }
.asa-s11 li:hover .search-result-img img { transform: none !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.
========================================================================== */
.asa-s11 .u11-nav { display: inline-flex; align-items: center; }
.asa-s11 .u11-nav__in,
.asa-s11 .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;
}
.asa-s11 .u11-nav__in:hover,
.asa-s11 .u11-nav__me:hover { background: #d8ece3; }
.asa-s11 .u11-nav__dot { width: .5rem; height: .5rem; border-radius: 50%; background: #0b7a56; }
@media (max-width: 575px) {
.asa-s11 .u11-nav__in, .asa-s11 .u11-nav__me { padding: .3rem .6rem; font-size: .78rem; }
}
/* ==========================================================================
PUBLIC HOST TOP BAR — see bk11_public_host() / the note in search11.php
========================================================================== */
.asa-s11 .bk-topbar--public { padding-block: .7rem; gap: .6rem; }
.asa-s11 .bk-topbar__brand {
font-weight: 800; font-size: 1rem; color: #22333f; text-decoration: none;
display: inline-flex; align-items: center; gap: .5rem; letter-spacing: -.01em;
}
.asa-s11 .bk-topbar__brand::before {
content: ""; width: .55rem; height: 1.15rem; border-radius: .3rem; flex: 0 0 auto;
background: linear-gradient(180deg, #09b288, #0b7a56);
}
.asa-s11 .bk-topbar__brand:hover { color: #0b7a56; }
@media (max-width: 575px) { .asa-s11 .bk-topbar__brand { font-size: .9rem; } }