@font-face {
    font-family: 'Swei Marker Leg CJK SC';
    src: url('../fonts/CJK%20SC/SweiMarkerLegCJKsc-Medium.ttf') format('truetype');
    font-style: normal;
    font-weight: 500;
    font-display: swap;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    color: #2b5e9a;
    font-family: 'Swei Marker Leg CJK SC', 'Microsoft JhengHei', Arial, sans-serif;
}

.registration-page {
    position: relative;
    container-type: inline-size;
}

.page-image,
.image-button img {
    display: block;
    width: 100%;
    height: auto;
}

.page-image--phone {
    display: none;
}

.brand {
    position: absolute;
    top: 2.3cqw;
    left: 42%;
    width: 16%;
    height: 7.5cqw;
    overflow: hidden;
}

.brand img {
    /* Reuse the logo region of the phone artwork, absent from the web background. */
    position: absolute;
    top: -6.5cqw;
    left: -262.5%;
    width: 625%;
    height: auto;
}

#redemption-form {
    position: absolute;
    top: 26%;
    left: 17.2%;
    width: 65.6%;
    font-weight: 500;
}

.form-field {
    margin-bottom: .8cqw;
}

.form-field label {
    display: block;
    font-size: 1.5cqw;
    line-height: 1.3;
}

.form-field small {
    display: block;
    font-size: 1cqw;
    line-height: 1.3;
}

.form-field input,
.form-field select {
    display: block;
    width: 100%;
    height: 2.1cqw;
    margin-top: .2cqw;
    padding: 0 .6cqw;
    border: 0;
    border-radius: 0;
    background-color: #dfe5f6;
    color: #2b5e9a;
    font: inherit;
    font-size: 1.4cqw;
}

.form-field select {
    appearance: none;
    background-image: url('../images/form/select_icon.png');
    background-repeat: no-repeat;
    background-position: right .5cqw center;
    background-size: 1.35cqw auto;
    padding-right: 2.4cqw;
}

.consents {
    margin-top: 1.4cqw;
    font-size: .7cqw;
    line-height: 1.3;
}

.checkline {
    display: flex;
    align-items: flex-start;
    gap: .25cqw;
}

.receipt-notice {
    margin: 0 0 1em;
}

.checkline input {
    flex: none;
    width: .7cqw;
    height: .7cqw;
    margin: .1cqw 0 0;
    accent-color: #2b5e9a;
}

a {
    color: inherit;
}

.form-actions {
    display: flex;
    justify-content: center;
    margin-top: .7cqw;
}

.image-button {
    position: relative;
    display: block;
    width: 25.75%;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
}

.upload-button input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

:focus-visible,
.upload-button:focus-within {
    outline: 3px solid #e3a540;
    outline-offset: 3px;
}

.image-button:disabled {
    cursor: wait;
    opacity: .6;
}

#form-feedback {
    margin: 0;
    padding-top: 0;
    font-size: .8cqw;
    overflow-wrap: anywhere;
}

.form-error {
    padding: 1rem;
    color: #9b2027;
    background: white;
}

@media (max-width: 767px) {
    .page-image--web,
    .brand {
        display: none;
    }

    .page-image--phone {
        display: block;
    }

    #redemption-form {
        top: 20.65%;
        left: 12.2%;
        width: 75.6%;
    }

    .form-field {
        margin-bottom: 2.2cqw;
    }

    .form-field label {
        font-size: 3cqw;
    }

    .email-label-help {
        display: block;
    }

    .form-field small {
        font-size: 1.9cqw;
    }

    .form-field input,
    .form-field select {
        height: 4.3cqw;
        font-size: 2.6cqw;
        margin-top: .3cqw;
    }

    .form-field select {
        background-size: 2.8cqw auto;
        background-position: right 1cqw center;
        padding-right: 4.5cqw;
    }

    .consents {
        margin-top: 4cqw;
        font-size: 1.4cqw;
    }

    .checkline input {
        width: 1.4cqw;
        height: 1.4cqw;
        margin-top: .2cqw;
    }

    .form-actions {
        flex-direction: column;
        align-items: center;
        gap: 3cqw;
        margin-top: 4cqw;
    }

    .image-button {
        width: 53.6%;
    }

    #form-feedback {
        margin-top: .4cqw;
        font-size: 1.5cqw;
    }
}