/* Global */
:root{
    --accent:#0066d6; /* primary brand */
    --accent-dark:#024ea1;
    --muted:#6c757d;
    --card-bg: linear-gradient(180deg, rgba(255,255,255,0.9), rgba(250,250,252,0.9));
}

html,body{height:100%;}
body {
    background: linear-gradient(180deg,#f4f7fb 0%, #eef3f8 100%);
    font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
}

.page-wrap{min-height:100vh;display:flex;align-items:center}

.form-card{border-radius:14px;overflow:hidden}
.form-card .bg-accent{background:linear-gradient(135deg,var(--accent),var(--accent-dark));}
.form-card .bg-accent h2, .form-card .bg-accent p, .form-card .bg-accent li{color:#fff}

.brand{width:48px;height:48px}

.form-label.required::after{content:" *";color:#e74c3c}

.input-group-text{background:#fff;border-right:0}
.form-control{border-left:0}
.has-validation .form-control:focus{box-shadow:0 0 0 .15rem rgba(0,102,214,0.08);border-color:var(--accent)}

.qr-placeholder{width:200px;height:200px;display:block;object-fit:contain;border-radius:6px;border:1px dashed rgba(0,0,0,0.08);padding:10px;background:#fff}

.btn-gradient{background:linear-gradient(90deg,var(--accent),#1a9bff);border:0;color:#fff}
.btn-gradient:active,.btn-gradient:focus{box-shadow:0 6px 18px rgba(26,155,255,0.18)}

.opacity-85{opacity:0.85}

/* result area */
#resultArea .alert{border-radius:8px}

/* small screens: make left promo stack above form */
@media (max-width:767.98px){
    .form-card .bg-accent{display:none}
    .form-card .brand{width:40px;height:40px}
}

.invalid-feedback{font-size:.875rem}

.spinner-border-sm{width:1rem;height:1rem}

/* subtle card shadow */
.shadow-lg{box-shadow:0 12px 30px rgba(18,38,63,0.08)!important}

/* small improvement to list icons */
.fa-check-circle{color:rgba(255,255,255,0.95)}

/* Accessibility: focus states for buttons */
.btn:focus{outline:3px solid rgba(0,102,214,0.12);outline-offset:2px}

/* Ensure textarea resize is vertical only */
textarea.form-control{resize:vertical}

/* Tech background SVG sits behind content but subtle */
.bg-accent{position:relative;overflow:hidden}
.bg-accent .tech-bg{position:absolute;inset:0;opacity:1;pointer-events:none}
.bg-accent .tech-bg rect{mix-blend-mode:overlay}

.illustration-svg{max-width:100%;height:auto;border-radius:8px}

@media (min-width:992px){
    /* Keep the illustration inside left column with a gentle offset */
    .bg-accent .illustration-svg{transform:translateY(6%);}

    /* Full page background SVG */
    .page-bg-svg{position:fixed;left:0;top:0;width:100%;height:100%;z-index:0;pointer-events:none;opacity:1}

    /* Make sure main content sits above the background */
    .page-wrap{position:relative;z-index:1}
}