/**
 * hsb/assets/css/booking.css
 *
 * Additions for the booking wizard. Loaded last, after the vendor
 * stylesheets, so nothing here needs !important to win and none of the
 * theme files have to be edited.
 *
 *   1. Postcode autocomplete - a real dropdown instead of a bare <ul>
 *      rendered into the page flow
 *   2. Bin cards on step 3
 */

/* =====================================================================
   1. Postcode autocomplete
   =====================================================================

   The list used to render as a bulleted list inside the form group,
   which pushed the Next button down the page as soon as it appeared.
   It is now an overlay anchored to the input: the layout no longer
   moves, and a long list scrolls instead of growing.
   ===================================================================== */

.postcode01 .form-group.lbd {
    position: relative;
}

.list-postcodes {
    position: absolute;
    z-index: 1000;
    top: 100%;
    left: 0;
    right: 0;
    margin: 4px 0 0;
    padding: 0;
    max-height: 260px;
    overflow-y: auto;
    list-style: none;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .14);
    text-align: left;

    display: block;
}

/* Visibility follows the content, not a class.
 *
 * This used to be display:none plus an .is-open class that the page's
 * script added. That coupled the stylesheet to the script: if one file
 * reached the server and the other did not, results were fetched and
 * then hidden, and the autocomplete looked completely dead. Keying off
 * :empty means any code that fills this element makes it visible and
 * any code that clears it hides it - including the older inline
 * handlers. .is-open is still set for scripting, but nothing depends
 * on it for display. */
.list-postcodes:empty {
    display: none;
}

.list-postcodes li {
    padding: 10px 14px;
    margin: 0;
    font-size: 15px;
    line-height: 1.3;
    color: #333;
    list-style: none;
    border-bottom: 1px solid #f2f2f2;
}

.list-postcodes li:last-child {
    border-bottom: 0;
}

.list-postcodes li.selectpostcode {
    cursor: pointer;
}

/* :hover for the mouse, .is-active for the arrow keys - both look the
   same so keyboard and mouse users see one highlight, never two. */
.list-postcodes li.selectpostcode:hover,
.list-postcodes li.selectpostcode.is-active {
    background: #fff3e8;
    color: #d35400;
}

.list-postcodes li.text-muted {
    cursor: default;
    color: #888;
    font-style: italic;
}

/* The map behind step 1 sits in its own stacking context; without this
   the dropdown disappears underneath it. */
.postcode01 {
    position: relative;
    z-index: 5;
}

/* =====================================================================
   2. Bin cards (step 3)
   =====================================================================

   Previously each bin was a full-width row with a hairline underneath,
   so the selected one was hard to pick out and the three spec panels
   crowded together on narrow screens.
   ===================================================================== */

.hsb-bin-list {
    padding: 10px 0 0;
}

.wizard-card .choice.hsb-bin {
    display: block;
    width: 100%;
    padding: 22px 24px;
    margin: 0 0 16px;
    border: 2px solid #e6e6e6;
    border-bottom: 2px solid #e6e6e6;   /* overrides the old inline hairline */
    border-radius: 10px;
    background: #fff;
    cursor: pointer;
    transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}

/* The theme styles hover and active identically - grey fill, green
   border, the border marked !important - so a card the mouse merely
   passed over looked exactly like the chosen one. These two selectors
   carry the same specificity as the theme's and load after it, so the
   !important here is what it takes to separate the two states again. */

.wizard-card .choice.hsb-bin:hover {
    border: 2px solid #9bd4a4 !important;
    background: #fff;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .08);
}

.wizard-card .choice.hsb-bin.active,
.wizard-card .choice.hsb-bin.active:hover {
    border: 2px solid #4caf50 !important;
    background: #f6fbf6;
    box-shadow: 0 4px 16px rgba(76, 175, 80, .18);
}

/* ---- the name / price column ---------------------------------- */

.hsb-bin-head {
    position: relative;
    padding-top: 4px;
}

.hsb-bin-name {
    margin: 0 0 4px;
    font-size: 26px;
    font-weight: 700;
    line-height: 1.2;
    color: #2c3e50;
}

.hsb-bin-price {
    display: block;
    font-size: 22px;
    font-weight: 600;
    color: #4caf50;
}

/* The tick. Every card shows an empty circle so it is obvious they are
   choices; only the selected one fills in and reveals the check. */
.hsb-bin-tick {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    margin-bottom: 10px;
    border: 2px solid #cfcfcf;
    border-radius: 50%;
    color: transparent;
    background: #fff;
    transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}

.hsb-bin-tick i {
    font-size: 18px;
    line-height: 1;
}

.wizard-card .choice.hsb-bin:hover .hsb-bin-tick {
    border-color: #9bd4a4;
}

.wizard-card .choice.hsb-bin.active .hsb-bin-tick {
    border-color: #4caf50;
    background: #4caf50;
    color: #fff;
}

/* ---- the three spec panels ------------------------------------- */

.hsb-bin-spec {
    padding: 0 8px;
}

.hsb-bin-spec img {
    display: inline-block;
    max-height: 92px;
    width: auto;
    margin-bottom: 8px;
}

.hsb-bin-spec-value {
    display: block;
    font-size: 16px;
    font-weight: 600;
    color: #2c3e50;
    line-height: 1.3;
}

.hsb-bin-spec-label {
    display: block;
    font-size: 13px;
    color: #777;
    line-height: 1.3;
}

/* Keep the radio reachable for screen readers and form validation
   without showing the raw control. */
.hsb-bin input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    pointer-events: none;
}

/* ---- narrow screens -------------------------------------------- */

@media (max-width: 767px) {
    .wizard-card .choice.hsb-bin {
        padding: 18px 14px;
        text-align: center;
    }

    .hsb-bin-name {
        font-size: 22px;
    }

    .hsb-bin-price {
        font-size: 20px;
        margin-bottom: 14px;
    }

    .hsb-bin-spec {
        padding: 0 4px;
    }

    .hsb-bin-spec img {
        max-height: 64px;
    }

    .hsb-bin-spec-value {
        font-size: 14px;
    }

    .hsb-bin-spec-label {
        font-size: 12px;
    }

    .list-postcodes {
        max-height: 210px;
    }
}