/*
 * Banner search bar (components/main-search-bar), shared by the /hire/ pages
 * (inside .category_banner) and the home page (inside .banner_home_box), so the
 * two bars look and behave the same. Loaded on venue_category and home.
 */

:root {
  --wm-ink: #191919;
  --wm-muted: #77776f;
  --wm-lime: #f1ff78;
}

/* Bar 70% white over the banner photo, fields see-through, button column flush right */
@media (min-width: 768px) {
  :is(.category_banner, .banner_home_box) .banner_search_box .search_box.bg-white { background-color: rgba(255, 255, 255, 0.7) !important; backdrop-filter: blur(4px); }
  :is(.category_banner, .banner_home_box) .banner_search_box .home_input input,
  :is(.category_banner, .banner_home_box) .banner_search_box .home_input .form-control,
  :is(.category_banner, .banner_home_box) .banner_search_box .home_input .select2-selection,
  :is(.category_banner, .banner_home_box) .banner_search_box .home_input .select2-selection__rendered { background-color: transparent !important; }
  :is(.category_banner, .banner_home_box) .banner_search_box .col-lg-2.pe-md-0.ms-auto { padding-left: 0 !important; padding-right: 12px !important; }
}

/* Home page: centred fields and grey prompts, which the hire pages get from their banner's text-center
 * and style.css's default placeholder colour (style.css turns .banner_search placeholders black). */
.banner_home_box .banner_search_box { text-align: center; }
.banner_home_box .banner_search_box .home_input input::placeholder { color: #6a6e7a; }

/* Field titles (Event Type, Location, Date, Guests) on one line, and the values under them on one line:
 * each title and each value sits in a box of the same height, whatever its icon or field type. */
:is(.category_banner, .banner_home_box) .banner_search_box .home_input > .form-label { display: flex !important; align-items: center; justify-content: center; height: 28px; margin: 0 0 8px !important; line-height: 1 !important; }
:is(.category_banner, .banner_home_box) .banner_search_box .home_input > .form-label img { padding-bottom: 0 !important; }
:is(.category_banner, .banner_home_box) .banner_search_box .home_input > .label-wrapper,
:is(.category_banner, .banner_home_box) .banner_search_box .home_input > .input-wrapper { display: flex !important; align-items: center; justify-content: center; height: 28px; margin-top: 0 !important; }

/* Black "Find your venue" button inset in the bar. From 21st.dev "Glow Button" (waleedkibhen), in black:
 * plain black at rest; on hover a soft light slides from the bottom-right corner to the top-left one,
 * and the button lifts slightly from its centre with an even shadow around it. */
:is(.category_banner, .banner_home_box) .banner_search_box .search_btn { padding: 8px !important; }
:is(.category_banner, .banner_home_box) .banner_search_box .search_btn button { height: 84px !important; width: 100%; border-radius: 12px !important; white-space: nowrap; padding: 0 18px !important; font-size: 17px; background-image: linear-gradient(135deg, #000 0%, #000 58%, #262626 69%, #0d0d0d 84%, #000 100%) !important; background-size: 300% 300% !important; background-position: 34% 34% !important; background-color: #000 !important; box-shadow: 0 0 4px rgba(0,0,0,.2) !important; transform: scale(1); transform-origin: center; transition: background-position 1.1s cubic-bezier(.33,1,.68,1), box-shadow .35s ease-out, transform .35s cubic-bezier(.33,1,.68,1) !important; }
:is(.category_banner, .banner_home_box) .banner_search_box .search_btn button:hover { background-image: linear-gradient(135deg, #000 0%, #000 58%, #262626 69%, #0d0d0d 84%, #000 100%) !important; background-position: 100% 100% !important; background-color: #000 !important; transform: scale(1.025); box-shadow: 0 0 18px rgba(241,255,120,.15), 0 0 16px rgba(0,0,0,.35), 0 0 4px rgba(0,0,0,.2), inset 0 0 0 1px rgba(255,255,255,.07), inset 0 0 8px rgba(255,255,255,.05) !important; }
:is(.category_banner, .banner_home_box) .banner_search_box .search_btn button:active { transform: scale(.95); box-shadow: 0 0 26px rgba(241,255,120,.25), 0 3px 4px -1px rgba(0,0,0,.3), inset 2px 2px 7px rgba(255,255,255,.12), inset -2px -2px 7px rgba(0,0,0,.45) !important; transition: all .2s !important; }
@media (min-width: 992px) {
  /* A little wider so the fields keep their room next to the button */
  .category_banner .banner_search_box .search_box.bg-white.searchaddressspc { max-width: 72% !important; }
  :is(.category_banner, .banner_home_box) .banner_search_box .search_box > .row > .all_col { flex: 1 1 0 !important; width: auto !important; max-width: none !important; }
  :is(.category_banner, .banner_home_box) .banner_search_box .search_box > .row > div:has(.search_btn) { flex: 0 0 auto !important; width: auto !important; max-width: none !important; }
  /* Fields take their column's width, so "Select date" and "Enter Guest" are never cut */
  :is(.category_banner, .banner_home_box) .banner_search_box .home_input input:not([type=hidden]) { width: 100% !important; min-width: 0; }
  :is(.category_banner, .banner_home_box) .banner_search_box .home_input > .input-wrapper { width: 100%; }
}
@media (min-width: 992px) and (max-width: 1299px) {
  /* Laptop widths: the bar uses more of the page so the four fields keep their room next to the button */
  .category_banner .banner_search_box .search_box.bg-white.searchaddressspc { max-width: 94% !important; }
}
@media (max-width: 991px) {
  :is(.category_banner, .banner_home_box) .banner_search_box .search_btn { padding: 0 !important; }
  :is(.category_banner, .banner_home_box) .banner_search_box .search_btn button { height: auto !important; padding: 14px 22px !important; }
  /* Two fields per row or one: each value centred under its title */
  :is(.category_banner, .banner_home_box) .banner_search_box .home_input input:not([type=hidden]) { text-align: center; }
  :is(.category_banner, .banner_home_box) .banner_search_box .home_input > .input-wrapper { padding-left: 0; }
}
/* Home page: the same field spacing and button gap as the hire pages (responsive.css sets those for .category_banner) */
@media (min-width: 768px) and (max-width: 991px) {
  .banner_home_box .banner_search_box .home_input { padding-bottom: 0; }
  .banner_home_box .banner_search_box .search_btn button { margin-top: 20px; }
}
@media (max-width: 767px) {
  .banner_home_box .banner_search_box .home_input { padding-bottom: 20px; }
}

/* Event Type menu, adapted from 21st.dev "Combobox" (prebuiltui): white card, check on the chosen
 * item, black pill with yellow text on the hovered one, quick scale-and-fade opening. search-bar.js
 * keeps it below the field, centred under its column. */
.select2-dropdown:has(#select2-event_name-results) { width: 100% !important; min-width: 0 !important; border: 1px solid #e9e9e4 !important; border-radius: 12px !important; box-shadow: 0 14px 34px rgba(0,0,0,.18), 0 2px 6px rgba(0,0,0,.06) !important; background: #fff !important; overflow: hidden; padding: 6px 0; transform-origin: top center; animation: wm-menu-in .16s cubic-bezier(.2,.8,.2,1); }
@keyframes wm-menu-in { from { opacity: 0; transform: scale(.95); } to { opacity: 1; transform: scale(1); } }
#select2-event_name-results { max-height: 23rem !important; overscroll-behavior: contain; }
#select2-event_name-results .select2-results__option { position: relative; z-index: 0; display: grid; grid-template-columns: .75rem 1fr; align-items: center; gap: 10px; padding: 10px 32px 10px 16px !important; background: transparent !important; color: var(--wm-ink) !important; font-family: "avenir_regularregular", sans-serif; font-size: 16px; line-height: 1.2; transition: color .12s ease; }
#select2-event_name-results .select2-results__option::before { content: ""; width: .75rem; height: .75rem; background-color: currentColor; -webkit-mask: var(--wm-check) center/contain no-repeat; mask: var(--wm-check) center/contain no-repeat; opacity: 0; transform: scale(.6); transition: opacity .15s ease, transform .15s ease; }
#select2-event_name-results .select2-results__option--selected::before { opacity: 1; transform: scale(1); }
#select2-event_name-results .select2-results__option::after,
.pac-container .pac-item::after { content: ""; position: absolute; inset: 0 6px; z-index: -1; border-radius: 8px; background: var(--wm-ink); opacity: 0; transform: scale(.97); transition: opacity .12s ease, transform .12s ease; }
#select2-event_name-results .select2-results__option--highlighted { color: var(--wm-lime) !important; }
#select2-event_name-results .select2-results__option--highlighted::after { opacity: 1; transform: scale(1); }
:root { --wm-check: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2010%2010%27%3E%3Cpath%20d%3D%27M9.16%201.12a.75.75%200%200%201%20.22%201.04L5.14%208.66a.75.75%200%200%201-1.13.15L1.25%206.31a.75.75%200%200%201%201-1.11l2.11%201.9%203.76-5.76a.75.75%200%200%201%201.04-.22Z%27/%3E%3C/svg%3E"); }

/* Location suggestions (Google Places): same look as the Event Type menu, position unchanged.
 * The doubled classes beat style.css's full-row black hover. */
.pac-container { border: 1px solid #e9e9e4 !important; border-radius: 12px !important; box-shadow: 0 14px 34px rgba(0,0,0,.18), 0 2px 6px rgba(0,0,0,.06) !important; background: #fff !important; padding: 6px 0 !important; margin-top: 6px; transform-origin: top center; animation: wm-menu-in .16s cubic-bezier(.2,.8,.2,1); font-family: "avenir_regularregular", sans-serif !important; }
.pac-container .pac-item { position: relative; z-index: 0; border: 0 !important; background: transparent !important; padding: 10px 16px !important; line-height: 1.3 !important; font-size: 14px !important; color: var(--wm-muted) !important; cursor: pointer; transition: color .12s ease; }
.pac-container.pac-container .pac-item.pac-item:hover,
.pac-container.pac-container .pac-item.pac-item-selected,
.pac-container.pac-logo .pac-item.pac-item:hover .pac-item-query { background: transparent !important; background-color: transparent !important; box-shadow: none !important; }
.pac-container .pac-item:hover::after, .pac-container .pac-item-selected::after { opacity: 1; transform: scale(1); }
.pac-container .pac-icon { display: none !important; }
.pac-container .pac-item-query { font-size: 16px !important; color: var(--wm-ink) !important; padding-right: 6px; transition: color .12s ease; }
.pac-container .pac-matched { font-family: "avenirheavy", sans-serif; font-weight: normal !important; }
.pac-container .pac-item:hover, .pac-container .pac-item-selected,
.pac-container .pac-item:hover .pac-item-query, .pac-container .pac-item-selected .pac-item-query { color: var(--wm-lime) !important; }
.pac-container .pac-item:hover > span:last-child, .pac-container .pac-item-selected > span:last-child { color: rgba(241,255,120,.7) !important; }

@media (prefers-reduced-motion: reduce) {
  :is(.category_banner, .banner_home_box) .banner_search_box .search_btn button { transition: none !important; }
  .select2-dropdown:has(#select2-event_name-results), .pac-container { animation: none; }
}