:root {

    --parkqr-primary:#1E3A8A;
    --parkqr-success:#16A34A;
    --parkqr-danger:#DC2626;
    --parkqr-bg:#F8FAFC;
    --parkqr-card:#FFFFFF;
    --parkqr-border:#E5E7EB;
    --parkqr-text:#1F2937;
    --parkqr-muted:#6B7280;

}


body {

    margin:0;
    background:var(--parkqr-bg);
    font-family:Arial, sans-serif;
    color:var(--parkqr-text);

}



.parkqr-page {

    max-width:520px;
    margin:20px auto;
    padding:20px;

}



.parkqr-logo {

    text-align:center;
    margin-bottom:15px;

}



.parkqr-logo h1 {

    margin:0;
    font-size:36px;
    color:var(--parkqr-primary);
    font-weight:700;

}



.parkqr-location {

    text-align:center;
    color:var(--parkqr-muted);
    font-size:18px;
    font-weight:600;
    margin-top:10px;
    margin-bottom:30px;

}



.parkqr-subtitle {

    text-align:center;
    color:var(--parkqr-muted);
    margin-bottom:30px;
    font-size:18px;

}



.parkqr-registration-box {

    margin-top:10px;

}



.parkqr-form {

    background:#fff;
    padding:25px;
    border-radius:16px;
    box-shadow:0 5px 20px rgba(0,0,0,.08);

}



.parkqr-form label {

    display:block;
    margin-bottom:8px;
    font-weight:600;

}



.parkqr-form input[type=text],
.parkqr-license-input {

    width:100%;
    padding:18px;
    font-size:22px;
    border:1px solid var(--parkqr-border);
    border-radius:12px;
    box-sizing:border-box;
    text-transform:uppercase;

}



.parkqr-form input[type=email],
.parkqr-form select,
.parkqr-form textarea,
.parkqr-form input[type=file] {

    width:100%;
    padding:18px;
    font:inherit;
    border:1px solid var(--parkqr-border);
    border-radius:12px;
    box-sizing:border-box;
    background:#fff;

}

.parkqr-form textarea {

    min-height:140px;
    resize:vertical;

}

.parkqr-form input[type=text]:focus,
.parkqr-license-input:focus,
.parkqr-form input[type=email]:focus,
.parkqr-form select:focus,
.parkqr-form textarea:focus,
.parkqr-form input[type=file]:focus {

    outline:none;
    border-color:var(--parkqr-primary);

}



.parkqr-form button,
.parkqr-btn,
.parkqr-register-button {

    width:100%;
    margin-top:20px;
    padding:18px;
    background:var(--parkqr-primary);
    color:white;
    border:0;
    border-radius:12px;
    font-size:20px;
    font-weight:600;
    cursor:pointer;

}



.parkqr-form button:active,
.parkqr-register-button:active {

    transform:scale(.98);

}



.parkqr-success {

    margin-bottom:20px;
    padding:18px;
    border-radius:12px;
    background:#ECFDF5;
    color:#166534;
    border:1px solid #BBF7D0;
    font-size:17px;

}



.parkqr-demo-completion {

    margin:28px 0 20px;
    padding:36px;
    border:1px solid #E2E8F0;
    border-radius:16px;
    background:var(--parkqr-card);
    color:var(--parkqr-text);
    box-shadow:0 16px 36px rgba(8,43,90,.08);
    text-align:center;

}

.parkqr-demo-completion h2 {

    margin:0;
    color:#082B5A;
    max-width:430px;
    margin:0 auto;
    font-size:26px;
    line-height:1.2;

}

.parkqr-demo-completion > p {

    max-width:440px;
    margin:16px auto 0;
    line-height:1.6;

}

.parkqr-demo-completion > .parkqr-demo-completion-benefits {

    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:10px;
    margin-top:24px;
    font-weight:600;

}

.parkqr-demo-completion-benefits span {

    display:flex;
    align-items:center;
    justify-content:center;
    gap:7px;
    min-height:42px;
    padding:8px 10px;
    border:1px solid #DCFCE7;
    border-radius:10px;
    background:#F0FDF4;
    color:#166534;
    font-size:14px;

}

.parkqr-demo-completion-benefits span::before {

    content:"✓";
    color:#00A651;
    font-size:16px;
    font-weight:800;

}

.parkqr-demo-completion-actions {

    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:16px;
    max-width:360px;
    margin:30px auto 0;

}

.parkqr-demo-completion-actions::before {

    content:"eller";
    order:2;
    color:var(--parkqr-muted);
    font-size:14px;
    line-height:1;

}

.parkqr-demo-completion-button {

    display:inline-flex;
    width:100%;
    min-width:0;
    align-items:center;
    justify-content:center;
    min-height:48px;
    box-sizing:border-box;
    padding:12px 20px;
    border:1px solid transparent;
    border-radius:10px;
    font-size:16px;
    font-weight:700;
    line-height:1.25;
    text-align:center;
    text-decoration:none;
    transition:background-color .18s ease,border-color .18s ease,color .18s ease,box-shadow .18s ease,transform .18s ease;

}

.parkqr-demo-completion-button:hover {

    transform:translateY(-1px);

}

.parkqr-demo-completion-button:focus-visible {

    outline:3px solid #082B5A;
    outline-offset:3px;

}

.parkqr-demo-completion-button-primary {

    order:1;
    background:#00A651;
    border-color:#00A651;
    color:#FFFFFF;

}

.parkqr-demo-completion-button-primary:hover {

    background:#008A43;
    border-color:#008A43;
    box-shadow:0 6px 14px rgba(0,166,81,.18);

}

.parkqr-demo-completion-button-secondary {

    order:3;
    background:#FFFFFF;
    border-color:#082B5A;
    color:#082B5A;

}

.parkqr-demo-completion-button-tertiary {

    order:4;
    border-color:#CBD5E1;
    background:transparent;
    color:#48637C;
    font-weight:600;

}

.parkqr-demo-completion-button-tertiary:hover {

    border-color:#94A3B8;
    background:#F8FAFC;
    color:#082B5A;

}

.parkqr-demo-completion-button-secondary:hover {

    background:#F8FAFC;
    box-shadow:0 6px 14px rgba(8,43,90,.10);

}

.parkqr-error {

    margin-bottom:20px;
    padding:18px;
    border-radius:12px;
    background:#FEF2F2;
    color:#991B1B;
    border:1px solid #FECACA;

}



.parkqr-footer {

    text-align:center;
    margin-top:25px;
    color:var(--parkqr-muted);
    font-size:14px;

}



@media (max-width:600px) {


    .parkqr-page {

        margin:10px auto;
        padding:15px;

    }


    .parkqr-logo h1 {

        font-size:34px;

    }


    .parkqr-location {

        font-size:18px;
        margin-bottom:30px;

    }


    .parkqr-subtitle {

        font-size:18px;
        margin-bottom:30px;

    }


    .parkqr-form {

        padding:22px;

    }


    .parkqr-form label {

        font-size:18px;

    }


    .parkqr-form input[type=text],
    .parkqr-license-input {

        font-size:24px;
        padding:20px;
        min-height:64px;

    }


    .parkqr-form button,
    .parkqr-register-button {

        font-size:20px;
        padding:20px;
        min-height:64px;

    }

    .parkqr-demo-completion {

        padding:22px;

    }

    .parkqr-demo-completion h2 {

        font-size:23px;

    }

    .parkqr-demo-completion > .parkqr-demo-completion-benefits {

        grid-template-columns:1fr;

    }

    .parkqr-demo-completion-actions {

        flex-direction:column;

    }

    .parkqr-demo-completion-button {

        width:100%;
        flex-basis:auto;

    }


}