:root {
            --black: #111111;
            --orange: #f58220;
            --orange-dark: #db6c0c;
            --orange-light: #fff2e6;
            --white: #ffffff;
            --gray-100: #f2f2f2;
            --gray-200: #e2e2e2;
            --gray-300: #cccccc;
            --gray-500: #777777;
            --gray-700: #444444;
            --green: #347451;
            --red: #a72d2d;
            --red-light: #fdeaea;
        }

        * {
            box-sizing: border-box;
        }

        html {
            min-height: 100%;
        }

        body {
            margin: 0;
            min-height: 100vh;

            background:
                linear-gradient(
                    180deg,
                    #ececec 0,
                    var(--gray-100) 220px
                );

            color: var(--black);

            font-family:
                -apple-system,
                BlinkMacSystemFont,
                "Segoe UI",
                Arial,
                sans-serif;
        }

        button,
        input,
        textarea {
            font: inherit;
        }

        button {
            -webkit-tap-highlight-color: transparent;
        }

        .hidden {
            display: none !important;
        }


        /* =====================================================
           HEADER
        ===================================================== */

        .topbar {
            background: var(--black);

            padding:
                17px 20px 14px;

            text-align: center;

            border-bottom:
                4px solid var(--orange);
        }

        .logo {
            display: block;

            width:
                min(285px, 78vw);

            max-height: 82px;

            margin: 0 auto;

            object-fit: contain;
        }

        .fallback-logo {
            display: none;

            color: var(--white);

            font-size: 24px;
            font-weight: 900;

            letter-spacing: 1px;
        }



        /* =====================================================
           APP
        ===================================================== */

        .app {
            width: 100%;
            max-width: 1020px;

            margin: 0 auto;

            padding:
                30px 22px
                calc(
                    45px
                    +
                    env(safe-area-inset-bottom)
                );
        }

        .title {
            margin-bottom: 22px;

            text-align: center;
        }

        .title h1 {
            margin: 0;

            font-size: 32px;
            font-weight: 900;
        }

        .title p {
            max-width: 620px;

            margin:
                7px auto 0;

            color: var(--gray-500);

            font-size: 14px;
            line-height: 1.5;
        }


        /* =====================================================
           KORT
        ===================================================== */

        .card {
            width: 100%;

            padding: 26px;

            background: var(--white);

            border:
                1px solid var(--gray-200);

            border-radius: 14px;

            box-shadow:
                0 5px 22px
                rgba(0,0,0,0.055);
        }

        /* =====================================================
           FORM
        ===================================================== */

        .form-grid {
            display: grid;

            grid-template-columns:
                minmax(0, 1fr)
                minmax(0, 1fr);

            gap:
                21px 22px;

            width: 100%;
        }

        .field {
            position: relative;

            min-width: 0;
        }

        .field.full {
            grid-column:
                1 / -1;
        }

        label {
            display: block;

            margin-bottom: 7px;

            color: var(--gray-700);

            font-size: 14px;
            font-weight: 800;
        }

        .required {
            color: var(--orange-dark);
        }

        .optional {
            color: #999999;

            font-weight: 400;
        }

        .field-info {
            margin-top: 7px;

            color: var(--gray-500);

            font-size: 12px;
            line-height: 1.4;
        }

        input,
        textarea {
            width: 100%;
            max-width: 100%;
            min-width: 0;

            border:
                1px solid var(--gray-300);

            border-radius: 9px;

            background: var(--white);
            color: var(--black);

            outline: none;

            font-size: 16px;
        }

        input {
            height: 51px;

            padding:
                0 13px;
        }

        textarea {
            min-height: 125px;

            padding:
                12px 13px;

            resize: vertical;
        }

        input:focus,
        textarea:focus {
            border-color: var(--orange);

            box-shadow:
                0 0 0 3px
                rgba(245,130,32,0.16);
        }

        input.invalid,
        textarea.invalid {
            border-color: var(--red);

            box-shadow:
                0 0 0 3px
                rgba(167,45,45,0.12);
        }


        /* =====================================================
           DATUM + TID
           DESKTOP

           Vänsterställd text.
           Centrerad i höjdled.
        ===================================================== */

        .picker-field {
            position: relative;

            width: 100%;
            min-width: 0;
        }

        .picker-native {
            display: block;

            position: relative;

            width: 100%;
            max-width: 100%;
            min-width: 0;

            height: 51px;

            padding:
                0 13px;

            border:
                1px solid var(--gray-300);

            border-radius: 9px;

            background: var(--white);
            color: var(--black);

            opacity: 1;

            outline: none;

            cursor: pointer;

            font-size: 16px;

            text-align: left;
        }

        .picker-native:focus {
            border-color: var(--orange);

            box-shadow:
                0 0 0 3px
                rgba(245,130,32,0.16);
        }

        .picker-native.invalid {
            border-color: var(--red);

            box-shadow:
                0 0 0 3px
                rgba(167,45,45,0.12);
        }

        .picker-native::-webkit-datetime-edit {
            display: flex;

            align-items: center;

            height: 100%;

            padding: 0;

            text-align: left;
        }

        .picker-native::-webkit-datetime-edit-fields-wrapper {
            display: flex;

            align-items: center;

            height: 100%;

            padding: 0;

            text-align: left;
        }

        .picker-native::-webkit-date-and-time-value {
            display: flex;

            align-items: center;

            height: 100%;

            margin: 0;

            text-align: left;
        }

        .picker-native::-webkit-datetime-edit-text,
        .picker-native::-webkit-datetime-edit-month-field,
        .picker-native::-webkit-datetime-edit-day-field,
        .picker-native::-webkit-datetime-edit-year-field,
        .picker-native::-webkit-datetime-edit-hour-field,
        .picker-native::-webkit-datetime-edit-minute-field,
        .picker-native::-webkit-datetime-edit-ampm-field {
            padding-top: 0;
            padding-bottom: 0;

            text-align: left;
        }

        .picker-display {
            display: none;
        }


        /* =====================================================
           KNAPP
        ===================================================== */

        .submit-area {
            margin-top: 25px;

            display: flex;
            justify-content: center;
        }

        .submit-button {
            width: 100%;
            max-width: 430px;

            min-height: 58px;

            border: 0;

            border-radius: 10px;

            background: var(--orange);
            color: var(--black);

            cursor: pointer;

            font-size: 17px;
            font-weight: 900;
        }

        .submit-button:hover {
            background: #ff9335;
        }

        .submit-button:active {
            background: var(--orange-dark);

            transform:
                translateY(1px);
        }

        .submit-button:disabled {
            opacity: 0.55;

            cursor: default;
        }


        /* =====================================================
           MEDDELANDEN
        ===================================================== */

        .message {
            display: none;

            margin-bottom: 18px;

            padding:
                14px 15px;

            border-radius: 9px;

            text-align: center;

            font-size: 14px;
            font-weight: 800;
        }

        .message.error {
            display: block;

            background: var(--red-light);
            color: var(--red);

            border:
                1px solid #efbcbc;
        }


        /* =====================================================
           BEKRÄFTELSE
        ===================================================== */

        .confirmation {
            max-width: 660px;

            margin: 0 auto;

            padding:
                38px 28px;

            text-align: center;
        }

        .confirmation-icon {
            display: flex;

            align-items: center;
            justify-content: center;

            width: 70px;
            height: 70px;

            margin:
                0 auto 18px;

            border-radius: 50%;

            background: var(--green);
            color: var(--white);

            font-size: 34px;
            font-weight: 900;
        }

        .confirmation h2 {
            margin:
                0 0 9px;

            font-size: 25px;
        }

        .confirmation p {
            max-width: 470px;

            margin:
                0 auto 20px;

            color: var(--gray-500);

            font-size: 14px;
            line-height: 1.55;
        }

        .order-number {
            display: inline-block;

            margin-bottom: 24px;

            padding:
                8px 14px;

            background: var(--gray-100);

            border-radius: 20px;

            color: var(--gray-700);

            font-size: 13px;
            font-weight: 800;
        }

        .new-button {
            display: block;

            width: 100%;
            max-width: 360px;

            min-height: 52px;

            margin: 0 auto;

            border:
                1px solid var(--black);

            border-radius: 9px;

            background: var(--black);
            color: var(--white);

            cursor: pointer;

            font-weight: 850;
        }


        /* =====================================================
           FOOTER
        ===================================================== */

        .help-note {
            margin-top: 24px;

            text-align: center;

            color: var(--gray-500);

            font-size: 13px;
            line-height: 1.6;
        }

        .help-note strong {
            display: block;

            margin-bottom: 3px;

            color: var(--gray-700);

            font-size: 14px;
            font-weight: 800;
        }

        .help-note a {
            color: var(--black);

            font-weight: 800;
            text-decoration: underline;
            text-underline-offset: 2px;
        }

        .help-note a:hover,
        .help-note a:focus-visible {
            color: var(--orange-dark);
        }


        /* =====================================================
           TABLET
        ===================================================== */

        @media (max-width: 760px) {

            .app {
                max-width: 680px;

                padding:
                    24px 14px
                    calc(
                        40px
                        +
                        env(safe-area-inset-bottom)
                    );
            }

            .title h1 {
                font-size: 28px;
            }

            .card {
                padding:
                    22px 18px;
            }

            .form-grid {
                grid-template-columns: 1fr;

                gap: 18px;
            }

            .field.full {
                grid-column: auto;
            }

            .submit-button {
                max-width: none;
            }

        }


        /* =====================================================
           MOBIL
        ===================================================== */

        @media (max-width: 600px) {

            body {
                background: var(--gray-100);
            }

            .topbar {
                padding:
                    14px 15px 12px;
            }

            .logo {
                width:
                    min(250px, 80vw);
            }

            .app {
                padding:
                    16px 8px
                    calc(
                        32px
                        +
                        env(safe-area-inset-bottom)
                    );
            }

            .title {
                margin-bottom: 17px;
            }

            .title h1 {
                font-size: 25px;
            }

            .title p {
                font-size: 13px;
            }

            .card {
                padding:
                    18px 14px;

                border-radius: 14px;
            }

            label {
                margin-bottom: 8px;

                font-size: 17px;
            }

            input {
                height: 56px;

                padding:
                    0 14px;

                font-size: 17px;
            }

            textarea {
                min-height: 132px;

                padding:
                    13px 14px;

                font-size: 17px;
            }

            .field-info {
                margin-top: 8px;

                font-size: 12px;
            }

            .form-grid {
                grid-template-columns:
                    1fr;

                gap: 17px;
            }

            .field.full {
                grid-column: auto;
            }


            /*
             * MOBIL:
             * Egen display för datum/tid.
             * Vänsterställd och vertikalt centrerad.
            */

            .picker-field {
                position: relative;

                width: 100%;
                height: 56px;

                overflow: hidden;

                border:
                    1px solid var(--gray-300);

                border-radius: 9px;

                background: var(--white);
            }

            .picker-field:focus-within {
                border-color: var(--orange);

                box-shadow:
                    0 0 0 3px
                    rgba(245,130,32,0.16);
            }

            .picker-field.invalid {
                border-color: var(--red);

                box-shadow:
                    0 0 0 3px
                    rgba(167,45,45,0.12);
            }

            .picker-display {
                position: absolute;

                inset: 0;

                display: flex;

                align-items: center;
                justify-content: flex-start;

                padding:
                    0 13px;

                color: var(--black);

                font-size: 15px;

                text-align: left;

                white-space: nowrap;

                pointer-events: none;

                z-index: 1;
            }

            .picker-display.empty {
                color: #999999;
            }

            .picker-native {
                position: absolute;

                inset: 0;

                z-index: 2;

                width: 100%;
                height: 100%;

                margin: 0;
                padding: 0;

                border: 0;

                opacity: 0;

                cursor: pointer;

                -webkit-appearance: none;
                appearance: none;
            }

            .submit-area {
                margin-top: 22px;
            }

            .submit-button {
                max-width: none;
                min-height: 60px;

                font-size: 18px;
            }

            .confirmation {
                padding:
                    28px 18px;
            }

        }