/* ========================================================================== * css/widgets11.css - widgets that live OUTSIDE any page container * * jQuery UI's datepicker and select2's dropdown are both appended to , * not to the field that opened them. That means page-scoped CSS can never * reach them, and it is why the two pages disagreed: these rules used to sit * in css/search11.css, which only search11.php loads, so the SAME picker * rendered styled on the search page and raw-vendor on the booking funnel. * * Loaded by BOTH search11.php and bk11_page_open() (reserve_new11_state.php) * so there is one definition and one look. Nothing in here may be scoped to a * page wrapper - if a rule needs .asa-s11 or .bk11, it belongs in that page's * own stylesheet instead. * ========================================================================== */ /* ========================================================================== 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; } /* ========================================================================== SELECT2 DROPDOWN The panel is appended to , so search11.css's `.asa-s11 .quick-search-from-group-box .select2-*` rules only ever dressed the CLOSED control - the open dropdown was raw vendor CSS on every page. These give it the same card treatment as the datepicker above. ========================================================================== */ .select2-container--default .select2-dropdown { border: 1px solid var(--s11-line, #d0dbd6); border-radius: .9rem; box-shadow: 0 .75rem 2rem rgba(31, 45, 54, .16); overflow: hidden; font-family: inherit; } .select2-container--default .select2-search--dropdown { padding: .5rem; } .select2-container--default .select2-search--dropdown .select2-search__field { border: 1px solid var(--s11-line, #d0dbd6); border-radius: .55rem; padding: .4rem .6rem; font-family: inherit; font-size: .85rem; outline: 0; } .select2-container--default .select2-search--dropdown .select2-search__field:focus { border-color: var(--s11-green, #09b288); box-shadow: 0 0 0 .16rem rgba(9, 178, 136, .18); } .select2-container--default .select2-results__options { padding: .15rem .3rem .4rem; } .select2-container--default .select2-results__option { border-radius: .5rem; padding: .4rem .6rem; font-size: .85rem; } .select2-container--default .select2-results__option--highlighted[aria-selected], .select2-container--default .select2-results__option--highlighted { background: var(--s11-green-soft, #dfebe5) !important; color: var(--s11-green-dark, #198066) !important; } .select2-container--default .select2-results__option[aria-selected="true"] { background: var(--s11-green, #09b288) !important; color: #fff !important; } /* above the sticky search bar and the funnel's order bar */ .select2-container--open { z-index: 2147483500 !important; }