/*
 * Land Record form.
 * The dynamic property detail fields the renderer builds, plus the step furniture around them -
 * the back links and the document step's Next bar. No per document rules anywhere in here.
 */

.dynamic-fields {
    padding: 0 15px;
}

.dynamic-field {
    margin-bottom: 18px;
    position: relative;
}

.dynamic-field__label {
    display: block;
    margin-bottom: 6px;
    font-weight: 600;
    font-size: 15px;
    color: #292929;
}

.dynamic-field__required {
    color: #c0392b;
}

.dynamic-field__input {
    width: 100%;
    height: 44px;
    padding: 10px 12px;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    background: #fafafa;
    box-shadow: none;
    font-size: 15px;
}

.dynamic-field__input:focus {
    border-color: #c0392b;
    background: #fff;
    outline: none;
    box-shadow: none;
}

.dynamic-field__input[disabled] {
    background: #f0f0f0;
    color: #9e9e9e;
    cursor: not-allowed;
}

.dynamic-field__textarea {
    height: auto;
    min-height: 104px;
    resize: vertical;
}

.dynamic-field__error {
    display: block;
    margin-top: 5px;
    color: #c0392b;
    font-size: 13px;
}

.dynamic-field--invalid .dynamic-field__input {
    border-color: #c0392b;
    background: #fdf3f2;
}

/* ----------------------------------------------------------- autocompletes */

.dynamic-field__autocomplete {
    position: relative;
}

.dynamic-field__suggestions {
    position: absolute;
    z-index: 1050;
    top: 100%;
    left: 0;
    right: 0;
    max-height: 240px;
    overflow-y: auto;
    margin: 2px 0 0;
    padding: 0;
    list-style: none;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .12);
}

.dynamic-field__suggestion {
    padding: 9px 12px;
    font-size: 14px;
    color: #292929;
    cursor: pointer;
    border-bottom: 1px solid #f2f2f2;
}

.dynamic-field__suggestion:last-child {
    border-bottom: 0;
}

.dynamic-field__suggestion:hover {
    background: #fdf3f2;
    color: #c0392b;
}

/* Status rows such as "Searching..." are not selectable. */
.dynamic-field__suggestion--message,
.dynamic-field__suggestion--message:hover {
    color: #9e9e9e;
    background: #fff;
    cursor: default;
}

/* ----------------------------------------------------------- repeatable rows */

.dynamic-field__repeat-row {
    display: table;
    width: 100%;
    margin-bottom: 8px;
}

.dynamic-field__repeat-row .dynamic-field__input {
    display: table-cell;
    width: 100%;
}

.dynamic-field__repeat-remove {
    display: table-cell;
    width: 34px;
    padding-left: 10px;
    vertical-align: middle;
    text-align: center;
    font-size: 20px;
    line-height: 1;
    color: #c0392b;
    text-decoration: none;
}

.dynamic-field__repeat-remove:hover,
.dynamic-field__repeat-remove:focus {
    color: #8e2a1e;
    text-decoration: none;
}

.dynamic-field__repeat-add {
    display: inline-block;
    margin-top: 2px;
    font-size: 14px;
    font-weight: 600;
    color: #c0392b;
    text-decoration: none;
}

.dynamic-field__repeat-add:hover,
.dynamic-field__repeat-add:focus {
    color: #8e2a1e;
    text-decoration: underline;
}

@media (max-width: 767px) {
    .dynamic-fields {
        padding: 0 5px;
    }

    .dynamic-field__label {
        font-size: 14px;
    }
}

/* ---------------------------------------------------------------- back link
 *
 * The step a visitor is on is a block on one page, so the browser's Back button leaves the
 * service instead of undoing a choice. These links are the way back through the steps, and they
 * sit above the heading of each one - the first thing read on arriving, which is where someone
 * who has just realised they picked the wrong document will look for it.
 */
.landrecord-back {
    margin-bottom: 12px;
}

.landrecord-back__link {
    display: inline-block;
    padding: 4px 0;
    font-size: 14px;
    font-weight: 600;
    color: #337ab7;
    text-decoration: none;
    cursor: pointer;
}

.landrecord-back__link:hover,
.landrecord-back__link:focus {
    color: #b83523;
    text-decoration: underline;
}

/* ------------------------------------------------- document step: the Next bar
 *
 * Eleven documents do not fit on a phone screen, so Next sat below the fold: choosing a record
 * and then finding nothing to press is a dead end, and the way on was a scroll nobody knew to
 * make. Once a document is chosen the button pins itself to the bottom of the screen instead and
 * stays in reach, however far down the list the choice was made.
 *
 * position: fixed rather than sticky, which is what this wants to be. The site sets
 * `overflow-x: hidden` on <body>, and that makes body a scroll container: sticky descendants then
 * measure themselves against a scrollport that never moves, so they never stick. Lifting that
 * rule would risk a sideways scrollbar on every page, so the bar is pinned by hand instead.
 *
 * Being fixed takes the bar out of the flow, so it is positioned and shown by
 * syncAdhocNextBar/positionAdhocNextBar in LandRecords.cshtml: they match it to the panel's own
 * left edge and width rather than letting it span a wide screen, and take it away again once the
 * document list is scrolled past. The padding below keeps the last document clear of it.
 *
 * Hidden until there is something to press. Nothing above needs a Next button, and a phone has
 * no room to spend on a control that does nothing yet.
 */
#btnAdhocNext {
    display: none;
}

#btnAdhocNext.is-ready {
    display: block;
    position: fixed;
    /* top, left, width and the side padding are all set per scroll position by
       positionAdhocNextBar, measured off the panel itself. Never `bottom`, which would pin the bar
       to the window and leave it hanging below the panel once the end of the list is on screen. */
    z-index: 1030;
    float: none;
    /* The panel's own background and rule, so the bar reads as the bottom of the box rather than
       as a card sitting on top of it. No drop shadow for the same reason - the hairline is enough
       to separate it from the list passing behind.

       Not quite opaque, so the next document shows faintly through: solid beige made the list look
       as though it simply stopped at whichever document the bar happened to land on, with nothing
       to say that five more were waiting below. */
    background: rgba(237, 232, 226, 0.88);
    border-top: 1px solid #d8d1c7;
    padding-top: 14px;
    padding-bottom: 14px;
}

/*
 * The documents fade out as they pass under the bar rather than being cut off by a hard edge -
 * the usual way of saying "this carries on, keep scrolling". Sits above the bar, and lets clicks
 * through to the document it covers.
 */
#btnAdhocNext.is-ready::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 100%;
    height: 34px;
    pointer-events: none;
    background: -webkit-linear-gradient(top, rgba(237, 232, 226, 0), rgba(237, 232, 226, 0.88));
    background: linear-gradient(to bottom, rgba(237, 232, 226, 0), rgba(237, 232, 226, 0.88));
}

/* Scrolled past the document list, or the step is no longer on screen. */
#btnAdhocNext.is-off-step {
    display: none;
}

#btnAdhocNext .btn {
    min-width: 120px;
}

/*
 * Room for the pinned bar, so the last document can always be scrolled out from under it.
 *
 * The exact amount is set by reserveSpaceForAdhocNextBar in LandRecords.cshtml, because a fixed
 * figure here is wrong twice over: the bar settles inside the panel and overlaps the panel's own
 * bottom padding, which itself changes with the breakpoint. Reserving a flat 72px on top of that
 * padding left a conspicuous band of empty beige between the last document and the bar.
 */

/* ----------------------------------------------- certified / non certified
 *
 * Asked on the property details step for documents sold both ways, so the payment page can show
 * one option and its price rather than a second question. Styled as two plain radios rather than
 * the page's custom radio sprite, because this is a small either/or beneath a form, not the
 * headline choice the document list is.
 */
.copy-type {
    /* The anchor for the tooltips below, so they can span this block instead of trailing
       off an icon and past the edge of the panel. */
    position: relative;
    margin-bottom: 18px;
}

.copy-type__label {
    margin-bottom: 8px;
    font-weight: 600;
    font-size: 15px;
    color: #292929;
}

.copy-type__required {
    color: #c0392b;
}

.copy-type__choice {
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
    margin: 0 22px 0 0;
    white-space: nowrap;
}

.copy-type__option {
    display: inline-block;
    margin: 0;
    font-weight: 500;
    font-size: 15px;
    color: #292929;
    cursor: pointer;
}

.copy-type__option input {
    margin: 0 7px 0 0;
    vertical-align: middle;
    cursor: pointer;
}

.copy-type__text {
    vertical-align: middle;
}

.copy-type__error {
    display: block;
    margin-top: 6px;
    color: #c0392b;
    font-size: 13px;
}

@media (max-width: 767px) {
    /*
     * One option per line, and flex so the label and its icon stay on that line together.
     * Something in the site's mobile stylesheet blockifies the icon span - it came out 307px
     * wide and dropped below its own label - and a flex row settles it whatever that rule is.
     */
    .copy-type__choice {
        display: flex;
        align-items: center;
        margin: 0 0 10px 0;
    }

    .copy-type__choice .copy-type__option {
        flex: 0 1 auto;
    }

    .copy-type__choice .copy-type__info {
        flex: 0 0 auto;
        width: auto;
    }
}

/*
 * The same explanation the payment page gives, offered here where the choice is actually made.
 * Opens on hover for a mouse and on tap or keyboard focus for everything else - a phone has no
 * hover, so hover alone would put the answer out of reach of the people most likely to need it.
 */
.copy-type__info {
    display: inline-block;
    margin-left: 6px;
    color: #777;
    cursor: pointer;
}

.copy-type__info:hover,
.copy-type__info:focus {
    color: #c0392b;
    outline: none;
}

.copy-type__tooltip {
    visibility: hidden;
    position: absolute;
    /* Anchored to the whole block and stretched across it, rather than hung off the icon at a
       fixed 240px. On the narrow details panel that fixed width ran past the right edge and was
       clipped, and the second option fared worst because it starts furthest right. */
    top: 100%;
    left: 0;
    right: 0;
    margin-top: 6px;
    z-index: 1060;
    padding: 8px 10px;
    border-radius: 4px;
    background: #333;
    color: #fff;
    font-size: 12px;
    font-weight: normal;
    line-height: 1.45;
    white-space: normal;
    text-align: left;
}

/*
 * Hover is for a mouse, tap is for a phone, and the two must not be mixed: on a laptop a click
 * used to leave the tooltip pinned open, because the icon takes focus and the old :focus rule
 * kept it up long after the pointer had moved away.
 *
 * (hover: hover) is the pointer test - true for a mouse or trackpad, false for a touchscreen.
 * :focus-visible, not :focus, so only keyboard users get it and a mouse click never does.
 */
@media (hover: hover) {
    .copy-type__info:hover .copy-type__tooltip {
        visibility: visible;
    }
}

.copy-type__info:focus-visible .copy-type__tooltip,
.copy-type__info.show .copy-type__tooltip {
    visibility: visible;
}

/* The second one would otherwise run off a narrow screen. */
.copy-type__choice:last-child .copy-type__tooltip {
    left: auto;
    right: -10px;
}