@font-face {
font-family: IRANYekan;
src: url("../fonts/iranyekanwebblackfanum.ttf") format("truetype");
font-weight: 100 900;
font-style: normal;
font-display: swap;
}

:root {
--bg: #ffffff;
--page: #f6f7fb;
--card: #ffffff;
--stroke: #e7e9f3;
--text: #111827;
--muted: #6b7280;
--black: #0b0f19;
--blue: #2f6cf6;
--blue-weak: #e9f0ff;
--seat-av-bg: #edf0f7;
--seat-av-br: #cfd6e5;
--seat-av-tx: #1f2a44;
--seat-sold-bg: #e11d48;
--seat-sold-br: #b31234;
--seat-sel-bg: #16a34a;
--seat-sel-br: #11803a;
--seat-hold-bg: #f59e0b;
--seat-hold-br: #c07a06;
--shadow: 0 14px 40px rgba(10, 20, 40, .08);
}

* {
box-sizing: border-box
}

body {
padding-top: 30px;
font-family: IRANYekan, Tahoma, Arial;
color: var(--text);
background: var(--page);
}
/* ---------- Variable ---------- */

.m-0{
margin: 0;
}
.border-t-1{
border-top: 1px solid var(--stroke);
}
.border-b-1{
border-bottom: 1px solid var(--stroke);
}
.d-flex{
display: flex;
}
.align-items-center{
align-items: center;
}
.justify-content-center{
justify-content: center;
}
.flex-wrap{
flex-wrap: wrap;
}
.d-grid{
display: grid;
}
.gap-14 {
    gap: 14px;
}
/* ---------- Wizard Steps ---------- */
.stepsWrap {
background: var(--bg);
}

.steps {
max-width: 1200px;
margin: 0 auto;
padding: 16px;
gap: 40px;
}

.step {
gap: 10px;
color: var(--muted);
font-weight: 900;
font-size: 13px;
}

.dot {
width: 28px;
height: 28px;
border-radius: 999px;
place-items: center;
background: #eef0f6;
border: 1px solid var(--stroke);
font-size: 12px;
}

.step.active {
color: var(--text)
}

.step.active .dot {
background: #111827;
color: #fff;
border-color: #111827
}

/* ---------- Page Layout ---------- */
.page {
max-width: 1300px;
margin: 0 auto;
padding: 24px 16px 40px;
}

.infoRow {
grid-template-columns: 1fr 1fr;
}

@media(max-width:920px) {
.infoRow {
grid-template-columns: 1fr
}
}

.card {
background: var(--card);
border: 1px solid var(--stroke);
border-radius: 14px;
box-shadow: var(--shadow);
}

.card .hd {
padding: 12px 14px;
border-bottom: 1px solid var(--stroke);
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
font-weight: 900;
}

.card .bd {
padding: 12px 14px
}

.muted {
color: var(--muted);
font-weight: 800;
font-size: 12px
}

.line {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 8px 0;
border-bottom: 1px dashed rgba(17, 24, 39, .08);
}

.pill {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 10px;
border-radius: 12px;
background: #f2f4f9;
border: 1px solid var(--stroke);
font-weight: 900;
font-size: 12px;
color: #111827;
}

.pill.red {
background: #fff1f3;
border-color: #ffd1da;
color: #be123c
}

.pill.blue {
background: #eef4ff;
border-color: #d9e6ff;
color: #1d4ed8
}

.controls {
grid-template-columns: 1fr 1fr;
}

.field {
display: grid;
gap: 8px
}

label {
font-size: 12px;
font-weight: 900;
color: var(--muted)
}

.selectWrap {
position: relative
}

select,
input {
width: 100%;
border-radius: 12px;
padding: 12px 42px 12px 12px;
border: 1px solid var(--stroke);
background: #fff;
font-family: IRANYekan;
font-weight: 900;
outline: none;
}

.selectWrap:before {
content: "";
position: absolute;
left: 12px;
top: 50%;
transform: translateY(-50%);
width: 18px;
height: 18px;
opacity: .75;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M6 9l6 6 6-6' stroke='%23111827' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center/18px 18px;
}

.mapCard {
padding: 14px
}

.mapOuter {
background: #f0f2f8;
border: 1px solid var(--stroke);
border-radius: 14px;
padding: 14px;
}

.stageBar {
text-align: center;
margin: 0 auto 10px;
width: min(720px, 100%);
position: relative;
padding-top: 10px;
}

.stageArc {
height: 18px;
border-top: 3px solid var(--blue);
border-radius: 999px;
opacity: .95;
}

.stageTitle {
position: absolute;
top: -8px;
left: 50%;
transform: translateX(-50%);
background: #f0f2f8;
padding: 0 10px;
color: #111827;
font-weight: 900;
font-size: 12px;
}

.seatArea {
display: grid;
grid-template-columns: 40px 1fr 40px;
gap: 10px;
align-items: start;
justify-items: stretch;
}

.rowsCol {
display: grid;
gap: 8px;
padding-top: 9px
}

.rowNum {
height: 19px;
display: grid;
place-items: center;
font-weight: 900;
font-size: 12px;
color: #111827;
opacity: .8;
}

.gridWrap {
overflow: auto;
padding: 6px 0
}

.rows {
width: fit-content;
margin: 0 auto;
display: grid;
gap: 8px
}

.row {
display: flex;
gap: 10px;
align-items: center;
justify-content: center
}

.block {
display: flex;
gap: 10px;
}

.row {
display: flex;
gap: 45px;
align-items: center;
justify-content: center;
}

.seat {
width: 19px;
height: 19px;
border-radius: 6px;
border: 2px solid var(--seat-av-br);
background: var(--seat-av-bg);
color: var(--seat-av-tx);
display: grid;
place-items: center;
font-weight: 900;
font-size: 11px;
cursor: pointer;
user-select: none;
transition: transform .08s ease, filter .12s ease;
}

.seat.sold {
background: var(--seat-sold-bg);
border-color: var(--seat-sold-br);
color: #fff;
cursor: not-allowed
}

.seat.selected {
background: var(--seat-sel-bg);
border-color: var(--seat-sel-br);
color: #fff
}

.seat.hold {
background: var(--seat-hold-bg);
border-color: var(--seat-hold-br);
color: #111827
}

.legend {
display: flex;
gap: 14px;
flex-wrap: wrap;
align-items: center;
justify-content: center;
margin-top: 25px;
font-weight: 900;
font-size: 12px;
color: #111827;
}

.lg {
display: flex;
align-items: center;
gap: 8px;
color: var(--muted)
}

.sq {
width: 14px;
height: 14px;
border-radius: 5px;
border: 2px solid transparent
}

.sq.av {
background: var(--seat-av-bg);
border-color: var(--seat-av-br)
}

.sq.so {
background: var(--seat-sold-bg);
border-color: var(--seat-sold-br)
}

.sq.se {
background: var(--seat-sel-bg);
border-color: var(--seat-sel-br)
}

.sq.ho {
background: var(--seat-hold-bg);
border-color: var(--seat-hold-br)
}

.sumBar {
margin-top: 12px;
background: #eef0f6;
border: 1px solid var(--stroke);
border-radius: 12px;
padding: 12px 14px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
flex-wrap: wrap;
font-weight: 900;
}

.cta {
margin: 18px auto 0;
display: flex;
justify-content: center
}

.cta .btnBig {
background: #0b0f19;
color: #fff;
border: none;
border-radius: 14px;
padding: 14px 22px;
font-family: IRANYekan;
font-weight: 900;
font-size: 13px;
cursor: pointer;
min-width: 220px;
box-shadow: 0 16px 40px rgba(0, 0, 0, .18);
}

@media(max-width:520px) {
.seat {
width: 24px;
height: 24px;
font-size: 10px
}

.seatArea {
grid-template-columns: 30px 1fr 30px
}
}