:root{--bg:#f7f9fc;--card:#fff;--accent:#0b74de;--muted:#666;}
    body{font-family:Inter,system-ui,Arial,sans-serif;background:var(--bg);margin:0;padding:20px}
    .container{max-width:920px;margin:20px auto;padding:20px;background:var(--card);border-radius:12px;box-shadow:0 6px 20px rgba(10,20,40,0.06)}
    h1{margin:0 0 12px;font-size:20px}

.wizard{max-width:940px;margin:20px auto;padding:16px}
header h1{margin:0 0 12px}
.card{background:#fff;padding:12px;border-radius:10px;margin:10px 0;box-shadow:0 6px 18px rgba(20,30,60,0.06)}
.row{display:flex;gap:8px;align-items:center;margin-top:8px}
.btn{padding:8px 12px;border-radius:8px;border:0;cursor:pointer}
.btn.primary{background:#0066ff;color:#fff}
.btn.secondary{background:#e6eefc}
.preview{background:#0b1220;color:#e6eefc;padding:12px;border-radius:8px;white-space:pre-wrap}
label{font-weight:600;margin-bottom:6px;display:block}
.small{font-size:12px;color:#6b7280}
input,select,textarea{width:100%;padding:8px;border-radius:8px;border:1px solid #dfe7f4}
.actions{margin-top:12px}
/* Class to fade out and disable an entire section */
.area-disabled {
    opacity: 0.5;                /* Visual fade-out effect */
    pointer-events: none;        /* Disables all clicks and interactions */
    user-select: none;           /* Prevents text selection */
    filter: grayscale(100%);     /* Optional: makes the area look more "inactive" */
}

/* Parent wrapper to show the 'not-allowed' cursor */
.area-disabled-wrapper {
    cursor: not-allowed;         /* Shows disabled cursor on hover */
}

/* Custom class for a disabled button appearance */
.btn-disabled {
    background-color: #cccccc !important;
    color: #666666 !important;
    border: 1px solid #999999 !important;
    cursor: not-allowed;         /* Standard disabled cursor */
    pointer-events: none;        /* Blocks click events */
    opacity: 0.65;
}

/* Targeting native HTML disabled buttons */
button:disabled {
    cursor: not-allowed;
    filter: alpha(opacity=65);
    -webkit-box-shadow: none;
    box-shadow: none;
    opacity: .65;
}
.hide{display: none;}

.step {
  border-left: 4px solid #0070d2;
}
.form-check-input:checked + .form-check-label {
  font-weight: 600;
  color: #0070d2;
}
/* Force button alignment */
.step > .d-flex {
  display: flex !important;
  justify-content: space-between !important;
}

.step > .d-flex .btn {
  width: auto !important;
}