/* =============================================================================
   Chologhuri - search form redesign
   -----------------------------------------------------------------------------
   Covers the search box on the home page (the all-service block with its tabs
   and the single-service blocks) and the search box on every service search
   page (hotel / tour / car / event / space / boat / flight).

   On the home page the white card is .g-form-control, so the tabs and the
   fields sit inside one single box. On the search pages there are no tabs and
   the card is the form itself.

   This is hand written CSS on purpose: it is NOT imported by
   public/sass/app.scss, so it survives a rebuild of dist/frontend/css/app.css.
   It is linked after custom-css in Layout::app so it can win ties against the
   brand colours generated from the theme settings.
   ========================================================================== */

:root {
    /* --cg-main-color is printed by Layout::parts.custom-css from style_main_color */
    --cg-search-main: var(--cg-main-color, #5191fa);
    --cg-search-ink: #1a2b48;
    --cg-search-muted: #5e6d77;
    --cg-search-placeholder: #8b97a5;
    --cg-search-line: #e6eaf0;
    --cg-search-radius: 18px;
    --cg-search-shadow: 0 20px 45px rgba(26, 43, 72, .18);
    --cg-search-width: 1080px;
    /* every field cell is this tall, so the box keeps one height on every tab */
    --cg-search-field-height: 84px;
}

/* -----------------------------------------------------------------------------
   1. One centred box holding the tabs and the fields
   -------------------------------------------------------------------------- */
.bravo_wrap .page-template-content [class*="bravo-form-search-"] .g-form-control {
    max-width: var(--cg-search-width);
    margin-left: auto;
    margin-right: auto;
    padding: 0;
    background: #fff;
    border-radius: var(--cg-search-radius);
    box-shadow: var(--cg-search-shadow);
}

.bravo_wrap .page-template-content [class*="bravo-form-search-"] .text-heading,
.bravo_wrap .page-template-content [class*="bravo-form-search-"] .sub-heading {
    text-align: center;
}

.bravo_wrap .page-template-content [class*="bravo-form-search-"] .sub-heading {
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
}

/* Search pages have no tabs, there the form itself is the box */
.bravo_wrap .bravo_form_search .bravo_form {
    max-width: var(--cg-search-width);
    margin-left: auto;
    margin-right: auto;
    border-radius: var(--cg-search-radius);
    box-shadow: var(--cg-search-shadow);
}

/* The card is taller now, keep a sensible overlap with the page banner */
.bravo_wrap [class*="bravo_search_"] .bravo_form_search {
    margin-top: -72px;
}

/* -----------------------------------------------------------------------------
   2. Service tabs - a strip along the top of the box
   -------------------------------------------------------------------------- */
.bravo_wrap .page-template-content .bravo-form-search-all .g-form-control .nav-tabs {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    width: auto;
    max-width: none;
    margin: 0;
    padding: 4px 12px 0;
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--cg-search-line);
    border-radius: 0;
    box-shadow: none;
}

.bravo_wrap .page-template-content .bravo-form-search-all .g-form-control .nav-tabs li a {
    position: relative;
    display: flex;
    align-items: center;
    margin: 0 2px;
    padding: 16px 24px 15px;
    background-color: transparent;
    border: none;
    border-radius: 0;
    color: var(--cg-search-muted);
    font-size: 15px;
    font-weight: 500;
    line-height: 1.2;
    white-space: nowrap;
    transition: color .2s ease;
}

.bravo_wrap .page-template-content .bravo-form-search-all .g-form-control .nav-tabs li a i {
    top: 0;
    margin-right: 8px;
    font-size: 19px;
    line-height: 1;
}

.bravo_wrap .page-template-content .bravo-form-search-all .g-form-control .nav-tabs li a:hover {
    background-color: transparent;
    color: var(--cg-search-ink);
}

/* Same selector as the generated custom-css so the later link wins the tie */
.bravo_wrap .page-template-content .bravo-form-search-all .g-form-control .nav-tabs li a.active {
    background-color: transparent;
    border-color: transparent;
    color: var(--cg-search-main);
}

/* the underline sits on top of the strip's bottom border */
.bravo_wrap .page-template-content .bravo-form-search-all .g-form-control .nav-tabs li a.active:after {
    content: "";
    position: absolute;
    right: 12px;
    bottom: -1px;
    left: 12px;
    height: 3px;
    border-radius: 3px 3px 0 0;
    background: var(--cg-search-main);
}

/* The tabs and the fields share one box now, drop the old joining corner */
.bravo_wrap .page-template-content .bravo-form-search-all .g-form-control .tab-content:before {
    display: none;
}

/* app.css caps a few panes at 1000px by id, so match the id specificity */
.bravo_wrap .page-template-content .bravo-form-search-all .g-form-control .tab-content .tab-pane,
.bravo_wrap .page-template-content .bravo-form-search-all .g-form-control .tab-content #bravo_tour,
.bravo_wrap .page-template-content .bravo-form-search-all .g-form-control .tab-content #bravo_car,
.bravo_wrap .page-template-content .bravo-form-search-all .g-form-control .tab-content #bravo_event {
    max-width: none;
}

/* -----------------------------------------------------------------------------
   3. The form inside the box
   -------------------------------------------------------------------------- */
.bravo_wrap .page-template-content .g-form-control .bravo_form,
.bravo_wrap .bravo_form_search .bravo_form {
    align-items: stretch;
    padding: 8px;
}

/* on the home page the box is .g-form-control, the form is only its contents */
.bravo_wrap .page-template-content .g-form-control .bravo_form {
    max-width: none;
    background: transparent;
    border-radius: 0;
    box-shadow: none;
}

.bravo_wrap .page-template-content .g-form-control .bravo_form .g-field-search,
.bravo_wrap .bravo_form_search .bravo_form .g-field-search {
    flex: 1 1 0;
    min-width: 0;
    max-width: none;
    padding: 0;
}

.bravo_wrap .page-template-content .g-form-control .bravo_form .g-field-search > .row,
.bravo_wrap .bravo_form_search .bravo_form .g-field-search > .row {
    margin-left: 0;
    margin-right: 0;
}

.bravo_wrap .page-template-content .g-form-control .bravo_form .border-right,
.bravo_wrap .bravo_form_search .bravo_form .border-right {
    border-right-color: var(--cg-search-line);
}

.bravo_wrap .page-template-content .g-form-control .bravo_form .row > [class*="col-"]:last-child,
.bravo_wrap .bravo_form_search .bravo_form .row > [class*="col-"]:last-child {
    border-right: none;
}

/* -----------------------------------------------------------------------------
   4. Fields - fixed height so every tab renders the same box height
   -------------------------------------------------------------------------- */
.bravo_wrap .page-template-content .g-form-control .bravo_form .form-content,
.bravo_wrap .bravo_form_search .bravo_form .form-content {
    height: var(--cg-search-field-height);
    padding: 18px 16px 16px 42px;
}

.bravo_wrap .page-template-content .g-form-control .bravo_form .field-icon,
.bravo_wrap .bravo_form_search .bravo_form .field-icon {
    left: 16px;
    margin-top: -13px;
    font-size: 26px;
}

.bravo_wrap .page-template-content .g-form-control .bravo_form .form-content label,
.bravo_wrap .bravo_form_search .bravo_form .form-content label {
    display: block;
    overflow: hidden;
    margin-bottom: 6px;
    color: var(--cg-search-muted);
    font-size: 12px;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: .06em;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
}

.bravo_wrap .page-template-content .g-form-control .bravo_form .form-content .render,
.bravo_wrap .page-template-content .g-form-control .bravo_form .form-content .form-control,
.bravo_wrap .bravo_form_search .bravo_form .form-content .render,
.bravo_wrap .bravo_form_search .bravo_form .form-content .form-control {
    height: 28px;
    color: var(--cg-search-ink);
    font-size: 17px;
    font-weight: 500;
    line-height: 28px;
    white-space: nowrap;
}

.bravo_wrap .page-template-content .g-form-control .bravo_form .form-content .form-control::placeholder,
.bravo_wrap .bravo_form_search .bravo_form .form-content .form-control::placeholder {
    color: var(--cg-search-placeholder);
    font-weight: 400;
    opacity: 1;
}

.bravo_wrap .page-template-content .g-form-control .bravo_form .form-content .form-control::-webkit-input-placeholder,
.bravo_wrap .bravo_form_search .bravo_form .form-content .form-control::-webkit-input-placeholder {
    color: var(--cg-search-placeholder);
    font-weight: 400;
    opacity: 1;
}

.bravo_wrap .page-template-content .g-form-control .bravo_form .form-content .form-control::-moz-placeholder,
.bravo_wrap .bravo_form_search .bravo_form .form-content .form-control::-moz-placeholder {
    color: var(--cg-search-placeholder);
    font-weight: 400;
    opacity: 1;
}

/* "check in - check out" has to stay on one line or the box grows */
.bravo_wrap .page-template-content .g-form-control .bravo_form .date-wrapper .check-in-wrapper,
.bravo_wrap .bravo_form_search .bravo_form .date-wrapper .check-in-wrapper {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.bravo_wrap .page-template-content .g-form-control .bravo_form .date-wrapper span,
.bravo_wrap .bravo_form_search .bravo_form .date-wrapper span {
    top: 0;
    padding: 0 4px;
    color: var(--cg-search-placeholder);
}

/* Carets sit next to the value rather than floating at a fixed offset */
.bravo_wrap .page-template-content .g-form-control .bravo_form .smart-search:after,
.bravo_wrap .page-template-content .g-form-control .bravo_form .input-search:after,
.bravo_wrap .bravo_form_search .bravo_form .smart-search:after,
.bravo_wrap .bravo_form_search .bravo_form .input-search:after {
    top: 12px;
}

.bravo_wrap .page-template-content .g-form-control .bravo_form .dropdown-toggle:after,
.bravo_wrap .bravo_form_search .bravo_form .dropdown-toggle:after {
    top: 50%;
    right: 16px;
    margin-top: -2px;
}

/* -----------------------------------------------------------------------------
   5. Search button
   -------------------------------------------------------------------------- */
.bravo_wrap .page-template-content .g-form-control .bravo_form .g-button-submit,
.bravo_wrap .bravo_form_search .bravo_form .g-button-submit {
    display: flex;
    flex: 0 0 auto;
    align-items: stretch;
    max-width: none;
    padding: 0;
}

.bravo_wrap .page-template-content .g-form-control .bravo_form .g-button-submit button,
.bravo_wrap .bravo_form_search .bravo_form .g-button-submit button {
    width: auto;
    min-width: 156px;
    height: var(--cg-search-field-height);
    padding: 0 34px;
    border-radius: 12px;
    color: #fff;
    font-size: 16px;
    font-weight: 500;
    letter-spacing: .04em;
    transition: filter .2s ease, box-shadow .2s ease;
}

.bravo_wrap .page-template-content .g-form-control .bravo_form .g-button-submit button:hover,
.bravo_wrap .bravo_form_search .bravo_form .g-button-submit button:hover {
    filter: brightness(1.08);
    box-shadow: 0 8px 18px rgba(26, 43, 72, .22);
}

/* -----------------------------------------------------------------------------
   6. Tablet and mobile
   -------------------------------------------------------------------------- */
@media (max-width: 1199px) {
    :root {
        --cg-search-width: 100%;
    }
}

@media (max-width: 1023px) {
    .bravo_wrap .page-template-content .g-form-control .bravo_form .g-button-submit,
    .bravo_wrap .bravo_form_search .bravo_form .g-button-submit {
        display: block;
        padding: 0;
    }

    .bravo_wrap .page-template-content .g-form-control .bravo_form .g-button-submit button,
    .bravo_wrap .bravo_form_search .bravo_form .g-button-submit button {
        height: auto;
        margin: 12px 15px;
        padding: 12px 30px;
    }

    .bravo_wrap .page-template-content .g-form-control .bravo_form .row > [class*="col-"]:last-child .form-group,
    .bravo_wrap .bravo_form_search .bravo_form .row > [class*="col-"]:last-child .form-group {
        border-bottom: none;
    }
}

@media (max-width: 766px) {
    :root {
        --cg-search-field-height: 74px;
    }

    .bravo_wrap .page-template-content [class*="bravo-form-search-"] .g-form-control {
        border-radius: 14px;
    }

    .bravo_wrap .page-template-content .bravo-form-search-all .g-form-control .nav-tabs {
        flex-wrap: nowrap;
        justify-content: flex-start;
        padding: 2px 6px 0;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .bravo_wrap .page-template-content .bravo-form-search-all .g-form-control .nav-tabs li a {
        padding: 13px 14px 12px;
        font-size: 14px;
    }

    .bravo_wrap .page-template-content .bravo-form-search-all .g-form-control .nav-tabs li a.active:after {
        right: 6px;
        left: 6px;
    }

    .bravo_wrap .page-template-content .g-form-control .bravo_form,
    .bravo_wrap .bravo_form_search .bravo_form {
        padding: 4px;
    }

    .bravo_wrap .bravo_form_search .bravo_form {
        border-radius: 14px;
    }

    .bravo_wrap .page-template-content .g-form-control .bravo_form .form-content,
    .bravo_wrap .bravo_form_search .bravo_form .form-content {
        padding: 14px 12px 12px 36px;
    }

    .bravo_wrap .page-template-content .g-form-control .bravo_form .field-icon,
    .bravo_wrap .bravo_form_search .bravo_form .field-icon {
        left: 12px;
        margin-top: -11px;
        font-size: 22px;
    }

    .bravo_wrap [class*="bravo_search_"] .bravo_form_search {
        margin-top: -40px;
    }
}