/* The one-screen claim form, built from banksouksawda.psd (1920x1440).
   --u is one PSD pixel at the current width, so every size below is a PSD measurement. */

* {
    box-sizing: border-box;
}

[hidden] {
    display: none !important;
}

/* No underlines anywhere. */
a {
    color: inherit;
    text-decoration: none;
}

body {
    margin: 0;
    background: #14310b;
    font-family: 'Montserrat', sans-serif;
    font-weight: 800;
    color: #fff;
}

.claim-stage {
    width: min(100%, 133.3vh);
    margin: 0 auto;
    container-type: inline-size;
}

.claim-frame {
    --u: calc(100cqw / 1920);
    position: relative;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    padding: 0 calc(52 * var(--u));
    background: #348019;
}

/* Side borders */
.claim-frame::before,
.claim-frame::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 1;
    width: calc(52 * var(--u));
    background: url(../images/claim/border-left.png) top / 100% auto repeat-y;
    image-rendering: pixelated;
}

.claim-frame::before {
    left: 0;
}

.claim-frame::after {
    right: 0;
    background-image: url(../images/claim/border-right.png);
}

.claim-header {
    display: flex;
    align-items: flex-start;
    min-height: calc(325 * var(--u));
    padding: 0 calc(20 * var(--u)) calc(150 * var(--u)) calc(71 * var(--u));
    background: url(../images/claim/bg-top.png) bottom / calc(16 * var(--u)) calc(136 * var(--u)) repeat-x, #14310b;
    image-rendering: pixelated;
}

.claim-logo {
    display: block;
    width: calc(508 * var(--u));
    height: calc(160 * var(--u));
}

.claim-header-text {
    margin: calc(56 * var(--u)) 0 0 calc(257 * var(--u));
}

.claim-title {
    margin: 0;
    font-size: calc(42 * var(--u));
    line-height: 1;
}

.claim-note {
    margin: calc(8 * var(--u)) 0 0;
    font-size: calc(22 * var(--u));
    line-height: 1.2;
}

.claim-form {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.claim-fields {
    position: relative;
    width: calc(1210 * var(--u));
    max-width: 100%;
    /* The PSD has four fields; the gaps are tightened so five still fit above the banker. */
    margin: calc(40 * var(--u)) auto 0;
    display: flex;
    flex-direction: column;
    gap: calc(14 * var(--u));
}

/* Pages with only a couple of fields keep the PSD's own spacing. */
.claim-fields-roomy {
    margin-top: calc(145 * var(--u));
    gap: calc(24 * var(--u));
}

/* The small row under the fields: a tick box on the left, a link on the right. */
.claim-small {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: calc(16 * var(--u)) calc(40 * var(--u));
    padding: 0 calc(20 * var(--u));
    font-family: 'Tiny5', monospace;
    font-weight: 400;
    font-size: calc(34 * var(--u));
    line-height: 1;
}

.claim-small a {
    color: #fff;
    text-decoration: none;
}

.claim-small a:hover {
    color: #c7e9c0;
}

.claim-check {
    display: flex;
    align-items: center;
    gap: calc(14 * var(--u));
    cursor: pointer;
}

.claim-check input {
    appearance: none;
    width: calc(26 * var(--u));
    height: calc(26 * var(--u));
    margin: 0;
    border: calc(4 * var(--u)) solid #c7e9c0;
    border-radius: 0;
    background: #14310b;
    cursor: pointer;
}

.claim-check input:checked {
    background: #c7e9c0;
    box-shadow: inset 0 0 0 calc(4 * var(--u)) #14310b;
}

/* Sits in the gap above the first field so it never moves the layout. */
.claim-status {
    position: absolute;
    bottom: 100%;
    left: 0;
    right: 0;
    margin: 0 0 calc(8 * var(--u));
    font-size: calc(22 * var(--u));
    line-height: 1.2;
    text-align: center;
}

.claim-field {
    height: calc(96 * var(--u));
    display: flex;
    align-items: center;
    border: calc(20 * var(--u)) solid transparent;
    border-image: url(../images/claim/field.png) 20 fill stretch;
    image-rendering: pixelated;
}

/* The field being typed in: a pale line around it, so no colour outside the PSD's is needed. */
.claim-field:focus-within {
    outline: calc(4 * var(--u)) solid #c7e9c0;
}

.claim-field-error {
    outline: calc(6 * var(--u)) solid #fff;
}

.claim-input {
    flex: 1;
    min-width: 0;
    height: calc(70 * var(--u));
    margin: 0;
    padding: 0 calc(38 * var(--u));
    font: inherit;
    font-size: calc(52 * var(--u));
    color: #fff;
    background: transparent;
    border: 0;
    outline: 0;
}

.claim-input::placeholder {
    color: #fff;
    opacity: 1;
}

.claim-bill {
    line-height: calc(70 * var(--u));
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.claim-done-note {
    margin: 0;
    font-size: calc(24 * var(--u));
    line-height: 1.2;
    text-align: center;
}

.claim-scan {
    flex-shrink: 0;
    font: inherit;
    font-size: calc(30 * var(--u));
    color: #fff;
    background: #14310b;
    border: calc(4 * var(--u)) solid #5ec548;
    border-radius: 0;
    padding: calc(8 * var(--u)) calc(22 * var(--u));
    cursor: pointer;
}

.claim-scan:hover {
    background: #1d5010;
}

/* The banker standing behind the SEND plate, on the dark strip at the bottom. */
.claim-bottom {
    position: relative;
    height: calc(536 * var(--u));
    margin: auto calc(-52 * var(--u)) 0;
    display: flex;
    justify-content: center;
    background: url(../images/claim/bg-bottom.png) 0 calc(233 * var(--u)) / calc(16 * var(--u)) calc(136 * var(--u)) repeat-x,
        linear-gradient(180deg, rgba(20, 49, 11, 0) calc(300 * var(--u)), #14310b calc(300 * var(--u)));
    image-rendering: pixelated;
}

.claim-banker {
    width: calc(304 * var(--u));
    height: calc(503 * var(--u));
}

.claim-send {
    position: absolute;
    top: calc(346 * var(--u));
    left: 50%;
    transform: translateX(-50%);
    width: calc(374 * var(--u));
    height: calc(119 * var(--u));
    display: flex;
    align-items: center;
    justify-content: center;
    font: inherit;
    font-size: calc(58 * var(--u));
    color: #fff;
    text-decoration: none;
    background: url(../images/claim/send.png) center / 100% 100% no-repeat;
    border: 0;
    padding: 0;
    cursor: pointer;
}

.claim-send:hover {
    color: #c7e9c0;
}

/* The scan screen: the camera picture inside the same frame the fields use. */
.claim-viewfinder {
    position: relative;
    align-self: center;
    width: calc(480 * var(--u));
    max-width: 100%;
    aspect-ratio: 1;
    border: calc(20 * var(--u)) solid transparent;
    border-image: url(../images/claim/field.png) 20 stretch;
    background: #14310b padding-box;
    image-rendering: pixelated;
}

.claim-viewfinder-small {
    width: calc(300 * var(--u));
}

.claim-viewfinder > video,
#qr-reader {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#qr-reader video {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
}

.claim-viewfinder-idle {
    position: absolute;
    inset: 0;
    margin: 0;
    padding: calc(16 * var(--u));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: calc(22 * var(--u));
    line-height: 1.3;
    text-align: center;
}

.claim-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: calc(14 * var(--u));
}

.claim-logout {
    position: absolute;
    top: calc(200 * var(--u));
    right: calc(90 * var(--u));
    z-index: 2;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* Phones: same art, stacked and enlarged. */
@media (max-width: 700px) {
    .claim-stage {
        width: 100%;
    }

    .claim-frame {
        --u: calc(100cqw / 860);
        padding: 0 calc(30 * var(--u));
    }

    .claim-frame::before,
    .claim-frame::after {
        width: calc(30 * var(--u));
    }

    .claim-header {
        flex-direction: column;
        align-items: center;
        padding: 0 calc(30 * var(--u)) calc(160 * var(--u));
    }

    .claim-header-text {
        margin: calc(30 * var(--u)) 0 0;
        text-align: center;
    }

    .claim-note,
    .claim-status,
    .claim-done-note,
    .claim-viewfinder-idle {
        font-size: calc(28 * var(--u));
    }

    .claim-fields {
        width: auto;
        margin: calc(90 * var(--u)) calc(30 * var(--u)) 0;
        gap: calc(20 * var(--u));
    }

    .claim-viewfinder {
        width: calc(600 * var(--u));
    }

    .claim-viewfinder-small {
        width: calc(440 * var(--u));
    }

    .claim-scan {
        font-size: calc(34 * var(--u));
    }

    .claim-logout {
        top: calc(8 * var(--u));
        right: calc(40 * var(--u));
    }

    .claim-input {
        padding: 0 calc(16 * var(--u));
        font-size: calc(40 * var(--u));
    }

    .claim-bottom {
        height: calc(626 * var(--u));
        margin: auto calc(-30 * var(--u)) 0;
        padding-top: calc(90 * var(--u));
        background-position: 0 calc(323 * var(--u)), 0 0;
        background-image: url(../images/claim/bg-bottom.png),
            linear-gradient(180deg, rgba(20, 49, 11, 0) calc(390 * var(--u)), #14310b calc(390 * var(--u)));
    }

    .claim-send {
        top: calc(436 * var(--u));
    }
}