/* ---------------------------------------------------------------------------
   service-booking.css - the shared lead form's styles, on its own so the home
   page can load them without new-style.css (which the home page does not load).
   Moved out of the end of new-style.css unchanged; _Layout loads this file right
   after new-style.css, so every other page's cascade is exactly what it was.
   --------------------------------------------------------------------------- */

/* ---------------------------------------------------------------------------
   Service booking form (Views/Shared/_ServiceBookingForm.cshtml)

   The service's own photograph fills the block and the form sits on it as a
   card. Colours are the site's own: #101828 ink, #475467 secondary, #98A2B3
   rules. WCL blue does one job here - it marks the field being typed in - so
   the brand shows up exactly where the visitor is working and nowhere else.
   --------------------------------------------------------------------------- */
.service-booking {
    position: relative;
    border-radius: 24px;
    overflow: hidden;
    isolation: isolate;
}

.service-booking__photo {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.service-booking__photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.service-booking__inner {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    min-height: 600px;
    padding: 64px;
}

.service-booking__card {
    width: min(452px, 100%);
    padding: 40px 36px;
    border-radius: 20px;
    background: #FCFCFD;
    box-shadow: 0 18px 48px rgba(16, 24, 40, 0.18);
}

.service-booking__heading {
    margin: 0;
    text-align: center;
    color: #101828;
    font-size: clamp(1.625rem, 1.15rem + 1.5vw, 2.125rem);
    font-weight: 600;
    line-height: 1.16;
    letter-spacing: -0.02em;
}

.service-booking__sub {
    max-width: 34ch;
    margin: 12px auto 0;
    text-align: center;
    color: #475467;
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.5;
}

.service-booking__form {
    margin-top: 28px;
}

/* Floating label: the field reads as a labelled line at rest, and the label
   lifts out of the way once there is something to read underneath it. */
.service-booking__field {
    position: relative;
    margin-top: 26px;
}

/* Paired fields (First/Last name, Job title/Company, Phone/Volume, Product/Service) - the row
   carries the vertical rhythm so its two children don't each add their own and double it up. */
.service-booking__row {
    display: flex;
    gap: 20px;
    margin-top: 26px;
}

.service-booking__row .service-booking__field {
    flex: 1 1 0;
    margin-top: 0;
    min-width: 0; /* lets a long value ellipsize/wrap instead of forcing the row wider */
}

.service-booking__required {
    margin-left: 2px;
    color: #D92D20;
}

.service-booking__input {
    width: 100%;
    padding: 6px 0 8px;
    border: 0;
    border-bottom: 1px solid #98A2B3;
    border-radius: 0;
    background: transparent;
    color: #101828;
    font-family: inherit;
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.4;
}

.service-booking__input:focus {
    outline: none;
    border-bottom-color: #007DB0;
    /* A second line rather than a thicker border, so focus never reflows the row. */
    box-shadow: 0 1px 0 0 #007DB0;
}

.service-booking__textarea {
    min-height: 40px;
    max-height: 220px;
    resize: none;
    overflow-y: auto;
}

.service-booking__label {
    position: absolute;
    left: 0;
    top: 6px;
    margin: 0;
    color: #667085;
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.4;
    transform-origin: left top;
    pointer-events: none;
    transition: transform .18s ease, color .18s ease;
}

.service-booking__input:focus + .service-booking__label,
.service-booking__input:not(:placeholder-shown) + .service-booking__label {
    transform: translateY(-19px) scale(0.75);
    color: #475467;
}

/* Average monthly orders / Product type. Same underlined field as the rest, with the native
   arrow swapped for one that matches the form's line weight. */
/* Shared with .service-booking__dropdown-trigger below: a <select> and a <button> are both
   "replaced-ish" controls whose intrinsic height a browser can compute slightly differently even
   with identical padding/line-height CSS - a plain <input> doesn't have that risk, these two do.
   Pinning an explicit height (measured from the shared padding + line-height) makes it certain
   rather than relying on every engine agreeing, so this row can never drift from the others. */
.service-booking__select,
.service-booking__dropdown-trigger {
    box-sizing: border-box;
    height: 37px;
}

.service-booking__select {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 22px;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5 6 6.5l5-5' stroke='%23475467' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1px center;
    cursor: pointer;
}

/* A select is never empty, so its label starts where the others land once they float. */
/* Always raised, so it never wraps: the label is laid out at full size and only *painted* at 75%
   by the transform, so a two-word-too-long label like "Average monthly orders" would break onto a
   second line that then sits on top of the field's own value. */
.service-booking__label--static {
    transform: translateY(-19px) scale(0.75);
    color: #475467;
    white-space: nowrap;
}

/* "Choose Your Service" - a button standing in for the field, plus a floating panel of the real
   checkboxes. Closed, it costs no more vertical space than any other field; open, it stays open
   across several ticks instead of collapsing after each one. */
.service-booking__dropdown {
    position: relative;
}

.service-booking__dropdown-trigger {
    display: block;
    width: 100%;
    text-align: left;
    background: transparent;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    padding-right: 22px;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5 6 6.5l5-5' stroke='%23475467' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1px center;
    /* Several full department names joined by ", " can run long (e.g. picking Import, Export
       and the Amazon services one) - truncate to one line with an ellipsis rather than wrapping
       and breaking the row height every other field on this form relies on. */
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* The trigger sits in the right-hand half of its row, so the panel is allowed to grow wider than
   the trigger rather than wrapping every service name onto two lines - anchored right so it grows
   inwards across the card instead of off its edge. Stacked on a phone, min-width keeps it aligned
   to the full-width field as before. */
.service-booking__dropdown-panel {
    position: absolute;
    right: 0;
    top: calc(100% + 6px);
    min-width: 100%;
    width: max-content;
    max-width: 280px;
    z-index: 5;
    max-height: 260px;
    overflow-y: auto;
    padding: 6px;
    background: #FCFCFD;
    border: 1px solid #E4E7EC;
    border-radius: 10px;
    box-shadow: 0 12px 28px rgba(16, 24, 40, 0.14);
}

.service-booking__dropdown-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 6px;
    color: #101828;
    font-size: 0.9375rem;
    font-weight: 500;
    cursor: pointer;
}

.service-booking__dropdown-option:hover {
    background: #F2F4F7;
}

.service-booking__dropdown-option input {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    accent-color: #101828;
}

.service-booking__consent {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-top: 28px;
}

.service-booking__consent label {
    margin: 0;
    color: #475467;
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1.5;
}

.service-booking__consent a {
    color: #475467;
    text-decoration: underline;
}

.service-booking__checkbox {
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
    margin-top: 1px;
    accent-color: #101828;
}

.service-booking__submit {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 28px;
    padding: 8px 8px 8px 22px;
    border: 0;
    border-radius: 200px;
    background: #101828;
    color: #FCFCFD;
    font-size: 0.9375rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    transition: background .4s ease;
}

.service-booking__submit:hover {
    background: #007DB0;
}

.service-booking__submit:focus-visible {
    outline: 2px solid #007DB0;
    outline-offset: 3px;
}

.service-booking__arrow {
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #FCFCFD;
    color: #101828;
}

@media (max-width: 991px) {
    .service-booking__inner {
        min-height: 0;
        padding: 40px 24px;
    }

    .service-booking__card {
        width: 100%;
        padding: 32px 24px;
    }
}

@media (max-width: 575px) {
    .service-booking__inner {
        padding: 24px 16px;
    }

    .service-booking__row {
        flex-direction: column;
        gap: 26px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .service-booking__label,
    .service-booking__submit {
        transition: none;
    }
}

/* The home page's style-2.css sets -webkit-appearance: none on every element, which leaves a
   native checkbox with nothing to draw. The form's checkboxes (consent, and the service list's
   options) take their native look back; elsewhere that is already their default. */
.service-booking input[type="checkbox"] {
    -webkit-appearance: checkbox;
    appearance: auto;
}

/* The home page's Booking block (Views/Home/Index.cshtml): the same form, last before the footer,
   given the room a service page's .wrapper.container gives it. The home page's .wrapper is
   another thing entirely (320px side gutters), so it is not reused here. */
.home-booking {
    background-color: #FCFCFD;
    padding: 80px 0;
}

/* style-2.css gives every element on the home page will-change: transform, opacity, which makes
   each one its own stacking context. Inside the form that would trap the "Choose your service"
   panel (z-index 5) under the next row, so the block opts out, as the hero's h1 does. */
.home-booking,
.home-booking * {
    will-change: auto;
}

@media (max-width: 991px) {
    .home-booking {
        padding: 48px 0;
    }
}