.venue-page {
    min-height: 100vh;
    background: radial-gradient(circle at top, #121a2b 0%, #060913 55%, #04060c 100%);
    padding: 1.2rem 1.4rem;
    max-width: 620px;
    margin: 0 auto;
}
.venue-page .rz-button.rz-button-primary {
    background: #0f8a8e;        /* softer cyan */
    border: none;
    color: #031019;
    border-radius: 14px;
    font-weight: 600;
    box-shadow: none;
}

.venue-page .rz-button.rz-button-primary:hover {
    background: #00c9f1;
}

/* header */
.top-header {
    display: flex;
    gap: 1rem;
    align-items: center;
    margin-bottom: 1rem;
}
.icon-wrap {
    width: 42px;
    height: 42px;
    border-radius: 16px;
    background: rgba(0, 212, 255, 0.12);
    display: grid;
    place-items: center;
    color: #00d4ff;
}
.top-header h2 {
    color: #fff;
    font-size: 1.3rem;
    margin: 0;
}
.top-header p {
    color: rgba(255,255,255,.55);
    font-size: .75rem;
    margin: .25rem 0 0 0;
}

/* stepper */
.stepper {
    display: flex;
    align-items: center;
    gap: .6rem;
    margin-bottom: 1.25rem;
    padding-left: .4rem;   /* ✅ give it some breathing room */
    padding-right: .4rem;
}
.step {
    display: flex;
    align-items: center;
    gap: .5rem;
}
.dot {
    width: 28px;
    height: 28px;
    flex: 0 0 28px;        /* ✅ don’t let flex shrink it */
    border-radius: 999px;
    background: rgba(255,255,255,.02);
    border: 1px solid rgba(255,255,255,.08);
    display: grid;
    place-items: center;
    font-size: .7rem;
    color: rgba(255,255,255,.4);
    transition: all .25s ease;
}
.step span {
    font-size: .7rem;
    color: rgba(255,255,255,.4);
}
.step.active .dot {
    background: linear-gradient(135deg, #00d4ff 0%, #00a8cc 100%);
    color: #001018;
    border: none;
    box-shadow: 0 8px 28px rgba(0, 212, 255, .3);
}
.step.active span {
    color: #fff;
}
/* completed steps */
.dot.done {
    background: rgba(72, 187, 120, 1);
    border: none;
    color: #021018;
    box-shadow: 0 5px 20px rgba(72, 187, 120, .35);
}
.step.done span {
    color: rgba(255,255,255,.7);
}
.line {
    width: 26px;
    height: 1px;
    background: rgba(255,255,255,.08);
}
.line.done {
    background: rgba(72, 187, 120, .8);
}

/* form card */
.form-box {
    background: rgba(11, 16, 28, 0.35);
    border: 1px solid rgba(255,255,255,0.035);
    backdrop-filter: blur(12px);
}

/* fields */
.field-label {
    font-size: .72rem;
    color: rgba(255,255,255,.6);
    font-weight: 500;
}

.field {
    display: flex;
    align-items: center;
    gap: .6rem;
    background: rgba(255, 255, 255, 0.06); /* a tad lighter */
    border: 1px solid rgba(255,255,255,.04);
    border-radius: 14px;
    padding: .4rem .6rem;
    transition: background .25s ease, border-color .25s ease, box-shadow .25s ease;
}



.field:focus-within {
    border: 1px solid rgba(0, 212, 255, 0.55);
    background: rgba(6, 12, 19, 0.9);
    box-shadow: 0 0 0 3px rgba(0, 212, 255, 0.08);
}

.field-icon {
    color: #00d4ff;
    font-size: 1.25rem;
    transition: transform .2s ease, opacity .2s ease;
    opacity: .85;
}

.field:focus-within .field-icon {
    transform: scale(1.05);
    opacity: 1;
}

/* for textareas */
.field-textarea {
    align-items: flex-start;
    padding-top: .5rem;
}

/* two columns (postal + district) */
.field-row {
    display: flex;
    gap: .75rem;
}
.field-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: .4rem;
}

/* alerts */
.status-alert {
    margin-top: .4rem;
    border-radius: 12px;
}

/* buttons row */
.btn-row {
    display: flex;
    justify-content: space-between;
    gap: .7rem;
    margin-top: .8rem;
}

/* responsive */
@media (max-width: 480px) {
    .venue-page {
        padding: 1rem .75rem;
    }
    .btn-row {
        flex-direction: column;
    }
    .btn-row > * {
        width: 100% !important;
    }
    .field-row {
        flex-direction: column;
    }
}