/* Sharm Voyager – homepage search box: white, orange, dark grey; mobile first */
.svs {
  --svs-orange: #e8892b; --svs-orange-dark: #c4661a; --svs-ink: #2b2f33; --svs-muted: #5f6b76; --svs-line: #e2ddd6;
  position: relative; z-index: 5; max-width: 1200px; margin: 1rem auto; padding: 0 .75rem; color: var(--svs-ink);
}
.svs-overlap { margin-top: calc(-1 * var(--svs-overlap, 90px)); }
.svs-form { background: #fff; border-radius: 14px; box-shadow: 0 10px 30px rgba(31, 41, 51, .18); padding: 1rem; border-top: 4px solid var(--svs-orange); }
.svs-heading { margin: 0 0 .75rem; font-weight: 700; font-size: 1.1rem; color: var(--svs-ink); }
.svs-grid { display: grid; gap: .75rem; grid-template-columns: 1fr; }
@media (min-width: 576px) { .svs-grid { grid-template-columns: 1fr 1fr; } .svs-submit-field, .svs-guests-field { grid-column: 1 / -1; } }
@media (min-width: 992px) {
  /* row 1: airport, destination, dates · row 2: rooms and guests + search button (no truncated values) */
  .svs-grid { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1.15fr) minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
  .svs-guests-field, .svs-submit-field { grid-column: span 2; }
  .svs-submit-field { padding-top: 1.55rem; }
}
.svs-field { position: relative; display: flex; flex-direction: column; gap: .25rem; min-width: 0; }
.svs-field label, .svs-label { font-size: .8rem; font-weight: 600; color: var(--svs-muted); text-transform: uppercase; letter-spacing: .02em; }
.svs .form-select, .svs .form-control { min-height: 46px; border-color: var(--svs-line); color: var(--svs-ink); }
.svs .form-select:focus, .svs .form-control:focus, .svs-guests:focus { border-color: var(--svs-orange); box-shadow: 0 0 0 3px rgba(232, 137, 43, .25); outline: none; }
.svs-hint { color: var(--svs-muted); font-size: .78rem; min-height: 1em; }
.svs-guests { text-align: left; background-color: #fff; cursor: pointer; width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.svs-panel { position: absolute; top: 100%; left: 0; right: 0; min-width: min(340px, 92vw); margin-top: .35rem; background: #fff; border: 1px solid var(--svs-line); border-radius: 12px; box-shadow: 0 12px 28px rgba(31, 41, 51, .2); padding: .75rem; z-index: 20; max-height: 70vh; overflow: auto; }
@media (min-width: 992px) { .svs-panel { right: auto; width: 400px; } }
.svs-room { border-bottom: 1px dashed var(--svs-line); padding-bottom: .6rem; margin-bottom: .6rem; }
.svs-room-title { font-weight: 700; display: flex; justify-content: space-between; align-items: center; margin-bottom: .35rem; }
.svs-remove { background: none; border: 0; color: var(--svs-orange-dark); font-size: .85rem; text-decoration: underline; cursor: pointer; }
.svs-room-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.svs-room-grid label { display: flex; flex-direction: column; gap: .2rem; font-size: .8rem; color: var(--svs-muted); }
.svs-panel-actions { display: flex; justify-content: space-between; align-items: center; gap: .5rem; }
.svs-add { color: var(--svs-orange-dark); padding-left: 0; }
.svs-done { background: var(--svs-ink); color: #fff; border-radius: 8px; }
.svs-done:hover, .svs-done:focus { background: #000; color: #fff; }
.svs-submit { width: 100%; min-height: 50px; border: 0; border-radius: 10px; background: var(--svs-orange); color: #fff; font-weight: 800; letter-spacing: .03em; padding: 0 1.4rem; font-size: 1rem; cursor: pointer; box-shadow: 0 4px 12px rgba(232, 137, 43, .35); white-space: nowrap; }
.svs-submit:hover, .svs-submit:focus { background: var(--svs-orange-dark); outline: none; }
.svs-error { color: #b42318; margin: .5rem 0 0; }
@media (max-width: 575.98px) { .svs-overlap { margin-top: calc(-0.5 * var(--svs-overlap, 90px)); } .svs-form { padding: .85rem; } }
/* When Joomla wraps the module in a "card" (Cassiopeia positions top-a, top-b, main-top...), keep only our box */
.card:has(> .card-body > .svs) { background: transparent; border: 0; box-shadow: none; overflow: visible; }
.card-body:has(> .svs) { padding: 0; overflow: visible; }
.card:has(> .card-body > .svs) > .card-header { display: none; }
/* Phones / tablets: the rooms panel opens inside the box (never covers the search button) */
@media (max-width: 991.98px) { .svs-panel { position: static; min-width: 0; box-shadow: none; max-height: none; } }