@font-face {
    font-family: "Vazirmatn";
    src: url("./fonts/Vazirmatn.woff2") format("woff2-variations");
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
}

:root {
    color-scheme: light;
    --ink: #14231f;
    --muted: #62716c;
    --surface: #ffffff;
    --canvas: #f3f6f4;
    --brand: #087f5b;
    --brand-dark: #056046;
    --line: #dce5e1;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    min-height: 100vh;
    color: var(--ink);
    background:
        radial-gradient(circle at 90% 10%, #d9f3e8 0, transparent 28rem),
        var(--canvas);
    font-family: "Vazirmatn", Tahoma, Arial, sans-serif;
}

button, input, select, textarea { font-family: inherit; }

.shell {
    width: min(68rem, calc(100% - 2rem));
    margin: 0 auto;
    min-height: 100vh;
    display: grid;
    align-content: center;
    gap: 2rem;
    padding: 3rem 0;
}

.hero {
    max-width: 48rem;
    padding: clamp(1.5rem, 5vw, 4rem);
    background: color-mix(in srgb, var(--surface) 94%, transparent);
    border: 1px solid var(--line);
    border-radius: 2rem;
    box-shadow: 0 1.5rem 4rem rgb(20 35 31 / 8%);
}

.eyebrow { color: var(--brand); font-weight: 700; }
h1 { margin: .75rem 0 1rem; font-size: clamp(2rem, 6vw, 4rem); line-height: 1.25; }
p { color: var(--muted); font-size: 1.1rem; line-height: 2; }
.actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2rem; }
.button { padding: .85rem 1.25rem; border-radius: .8rem; text-decoration: none; font-weight: 700; }
.primary { color: white; background: var(--brand); }
.primary:hover { background: var(--brand-dark); }
.secondary { color: var(--ink); border: 1px solid var(--line); background: white; }
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.steps article { display: flex; gap: .8rem; align-items: center; padding: 1rem; background: white; border: 1px solid var(--line); border-radius: 1rem; }
.steps b { display: grid; place-items: center; min-width: 2rem; height: 2rem; color: var(--brand); background: #e5f7f0; border-radius: 50%; }

@media (max-width: 42rem) {
    .steps { grid-template-columns: 1fr; }
    .actions { display: grid; }
    .button { text-align: center; }
}

.form-shell { width: min(34rem, calc(100% - 2rem)); margin: 0 auto; padding: 2rem 0; }
.card { padding: 1.5rem; background: white; border: 1px solid var(--line); border-radius: 1.4rem; box-shadow: 0 1rem 3rem rgb(20 35 31 / 7%); }
.card h1 { font-size: 1.8rem; }
form { display: grid; gap: 1rem; }
label { display: grid; gap: .45rem; font-weight: 700; }
input { width: 100%; padding: .85rem 1rem; color: var(--ink); background: white; border: 1px solid #bfcac6; border-radius: .75rem; font: inherit; }
select { width: 100%; padding: .85rem 1rem; color: var(--ink); background: white; border: 1px solid #bfcac6; border-radius: .75rem; font: inherit; }
textarea { width: 100%; min-height: 6rem; padding: .85rem 1rem; border: 1px solid #bfcac6; border-radius: .75rem; font: inherit; resize: vertical; }
input:focus { outline: 3px solid #bde8d8; border-color: var(--brand); }
input:disabled { color: #53605c; background: #f1f4f3; }
.full { width: 100%; border: 0; cursor: pointer; font: inherit; }
.alert { margin: 1rem 0; padding: .9rem 1rem; border-radius: .75rem; line-height: 1.7; }
.error { color: #861d1d; background: #fff0f0; border: 1px solid #facaca; }
.success { color: #075f45; background: #e7f8f1; border: 1px solid #b7ead7; }
.back-link, .text-button { color: var(--brand); text-decoration: none; }
.text-button { padding: 0; border: 0; background: none; cursor: pointer; font: inherit; }
.toolbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.toolbar form { display: block; }
.two-column { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
fieldset { display: grid; gap: .6rem; margin: 0; padding: 1rem; border: 1px solid var(--line); border-radius: .8rem; }
.radio { display: flex; align-items: center; font-weight: 400; }
.radio input { width: auto; }
small { color: var(--muted); font-weight: 400; line-height: 1.7; }
.desktop-block { display: none; min-height: 100vh; place-items: center; padding: 2rem; }
.centered { display: block; margin-top: 1rem; text-align: center; }
.warning { color: #714b00; background: #fff8df; border: 1px solid #f1d990; }
.counter { color: var(--muted); font-size: .9rem; }
.member-list { display: grid; gap: .75rem; margin: 1.5rem 0; }
.member-item { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: 1rem; border: 1px solid var(--line); border-radius: .9rem; }
.member-item > div:first-child { display: grid; gap: .35rem; }
.item-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: .5rem; }
.item-actions form { display: block; }
.traveler-selection { margin-top: 1rem; background: #f7faf8; }
.selection-toggle { padding: .55rem .7rem; color: var(--muted); background: white; border: 1px solid var(--line); border-radius: 99rem; font: inherit; font-size: .78rem; cursor: pointer; }
.selection-toggle.active { color: #075f45; background: #e7f8f1; border-color: #9edbc5; }
.icon-button { padding: .45rem .6rem; color: var(--brand); background: white; border: 1px solid var(--line); border-radius: .55rem; cursor: pointer; font: inherit; font-size: .85rem; }
.icon-button.danger { color: #9a2525; }
.empty-state { padding: 2rem 1rem; color: var(--muted); text-align: center; border: 1px dashed #bfcac6; border-radius: .9rem; }
button:disabled { opacity: .5; cursor: not-allowed; }
dialog { width: min(32rem, calc(100% - 1.5rem)); padding: 0; border: 0; border-radius: 1.2rem; box-shadow: 0 2rem 5rem rgb(0 0 0 / 25%); }
dialog::backdrop { background: rgb(10 25 20 / 55%); backdrop-filter: blur(2px); }
.dialog-card { padding: 1.25rem; }
.dialog-card h2 { margin: 0; }
.status-pill { padding: .35rem .65rem; color: var(--brand-dark); background: #e5f7f0; border-radius: 99rem; font-size: .8rem; }
.turn-card { display: grid; justify-items: center; gap: .5rem; margin: 1.5rem 0; padding: 2rem; color: white; background: linear-gradient(135deg, var(--brand), #0b9d72); border-radius: 1.2rem; }
.turn-card strong { font-size: 4rem; line-height: 1; }
.turn-card small { color: #e6fff6; }
.review-section { margin: 1rem 0; padding: 1rem; background: #f7faf8; border: 1px solid var(--line); border-radius: .9rem; }
.review-section h2 { margin: 0 0 .75rem; font-size: 1.1rem; }
.review-section dl { display: grid; gap: .6rem; margin: 0; }
.review-section dl div { display: flex; justify-content: space-between; gap: 1rem; }
.review-section dt { color: var(--muted); }
.review-section dd { margin: 0; font-weight: 700; }
.registration-item { display: grid; gap: .75rem; padding: 1rem 0; border-top: 1px solid var(--line); }
.registration-item:first-of-type { border-top: 0; }
.registration-item > div { display: grid; gap: .3rem; }
.registration-item small, .ticket-waiting { color: var(--muted); }
.registration-item .button { padding: .7rem 1rem; }
.passenger-registrations { margin: 1rem 0 1.25rem; }
.passenger-registrations h2 { margin: 0; font-size: 1.05rem; }
.registration-table-wrap { margin-top: .65rem; overflow-x: auto; border: 1px solid var(--line); border-radius: .8rem; }
.registration-table { width: 100%; border-collapse: collapse; background: white; font-size: .78rem; white-space: nowrap; }
.registration-table th, .registration-table td { padding: .7rem .55rem; text-align: right; border-bottom: 1px solid var(--line); }
.registration-table tr:last-child td { border-bottom: 0; }
.registration-table th { color: var(--muted); background: #f7faf8; }
.table-download { color: var(--brand); font-weight: 700; text-decoration: none; }
.dashboard-brand { color: var(--brand-dark); }
.passenger-quick-actions { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; margin: 1rem 0 1.25rem; }
.passenger-quick-actions a { display: grid; gap: .2rem; min-height: 7.5rem; padding: 1rem; color: var(--ink); background: #f7faf8; border: 1px solid var(--line); border-radius: 1rem; text-decoration: none; align-content: center; }
.passenger-quick-actions a:last-child { grid-column: 1 / -1; min-height: 6rem; }
.passenger-quick-actions a:active { background: #e5f7f0; transform: scale(.99); }
.passenger-quick-actions .quick-icon { font-size: 1.6rem; }
.passenger-quick-actions small { font-size: .78rem; }
.review-member { display: grid; gap: .3rem; padding: .7rem 0; border-top: 1px solid var(--line); }
.confirmation { margin-bottom: .5rem; padding: .8rem; background: #f7faf8; border-radius: .7rem; }

@media (min-width: 769px) {
    .mobile-only { display: none; }
    .desktop-block { display: grid; }
}

.mobile-block { display: none; min-height: 100vh; place-items: center; padding: 2rem; }
.admin-login { width: min(30rem, calc(100% - 2rem)); min-height: 100vh; margin: auto; align-content: center; }
.admin-body { background: #f2f5f4; }
.admin-shell { width: min(90rem, calc(100% - 3rem)); margin: 0 auto; padding: 2rem 0 4rem; }
.admin-header { display: flex; align-items: center; justify-content: space-between; gap: 2rem; }
.admin-header h1 { margin: .3rem 0; font-size: 2.4rem; }
.admin-account { display: flex; align-items: center; gap: 1rem; }
.admin-account form { display: block; }
.metrics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin: 1.5rem 0; }
.metrics article { display: grid; gap: .5rem; padding: 1.2rem; background: white; border: 1px solid var(--line); border-radius: 1rem; }
.metrics span { color: var(--muted); }
.metrics strong { font-size: 2rem; }
.admin-panel { padding: 1.2rem; background: white; border: 1px solid var(--line); border-radius: 1.2rem; }
.filters { display: grid; grid-template-columns: minmax(15rem, 1fr) 14rem auto; align-items: end; gap: 1rem; margin-bottom: 1.2rem; }
.filters .button { border: 0; font: inherit; }
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; white-space: nowrap; }
th, td { padding: .85rem .75rem; text-align: right; border-bottom: 1px solid var(--line); }
th { color: var(--muted); font-size: .85rem; }
.turn-cell { color: var(--brand); font-size: 1.2rem; font-weight: 800; }
.copy-value { padding: .25rem; color: inherit; background: transparent; border: 0; border-bottom: 1px dashed #9aaba5; cursor: copy; font: inherit; }
.pagination { display: flex; align-items: center; justify-content: center; gap: 1rem; padding-top: 1rem; }
.pagination a { color: var(--brand); }
.detail-list { display: grid; gap: .2rem; }
.detail-list div { display: grid; grid-template-columns: 7rem 1fr; align-items: center; padding: .8rem 0; border-bottom: 1px solid var(--line); }
.detail-list dt { color: var(--muted); }
.detail-list dd { margin: 0; }
.copy-toast { position: fixed; bottom: 2rem; left: 2rem; padding: .7rem 1rem; color: white; background: var(--ink); border-radius: .7rem; opacity: 0; transform: translateY(1rem); transition: .2s; pointer-events: none; }
.copy-toast.visible { opacity: 1; transform: none; }
.operation-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(20rem, 1fr); gap: 1.2rem; align-items: start; }
.operation-panel { display: grid; gap: 1rem; }
.operation-panel > form { padding-top: 1rem; border-top: 1px solid var(--line); }
.link-token { display: grid; gap: .5rem; margin: 1rem 0; padding: 1rem; direction: ltr; text-align: center; background: #f2f5f4; border: 1px dashed #9aaba5; border-radius: .8rem; overflow-wrap: anywhere; }
.link-token strong { font-family: monospace; font-size: 1rem; }

@media (max-width: 768px) {
    .desktop-only { display: none; }
    .mobile-block { display: grid; }
}
/* Passenger login — inspired by the supplied split-card reference */
.passenger-login-page { background: radial-gradient(circle at 15% 12%, rgb(255 255 255 / 58%) 0 1px, transparent 2px), linear-gradient(145deg, #edf3ef, #dfe8e3); background-size: 22px 22px, auto; }
.passenger-login-shell { width: min(31rem, 100%); min-height: 100vh; margin: 0 auto; padding: 1rem; align-content: center; }
.passenger-login-card { overflow: hidden; background: #fff; border: 1px solid rgb(50 80 70 / 10%); border-radius: 1.75rem; box-shadow: 0 1.75rem 5rem rgb(29 54 46 / 18%); }
.login-visual { position: relative; min-height: 15.5rem; display: grid; align-content: end; justify-items: center; padding: 1.35rem 1.5rem 1.25rem; color: #163e35; background: radial-gradient(circle at 22% 28%, #f1cf79 0 .22rem, transparent .25rem), radial-gradient(circle at 76% 25%, #fff 0 .18rem, transparent .21rem), linear-gradient(150deg, #c6ded5 0%, #a9cec0 58%, #9fc6b8 100%); }
.login-back { position: absolute; inset: 1rem auto auto 1rem; width: 2.25rem; height: 2.25rem; display: grid; place-items: center; color: #204b41; background: rgb(255 255 255 / 48%); border: 1px solid rgb(255 255 255 / 62%); border-radius: 50%; text-decoration: none; font-size: 1.25rem; backdrop-filter: blur(6px); }
.train-illustration { position: absolute; top: 1.7rem; left: 50%; width: 7.8rem; height: 7.6rem; translate: -50% 0; background: linear-gradient(145deg, #ef745e, #c94d47); border: .35rem solid #fff4dc; border-radius: 3.2rem 3.2rem 1.25rem 1.25rem; box-shadow: 0 .8rem 1.8rem rgb(63 75 65 / 20%); }
.train-illustration::before, .train-illustration::after { content: ""; position: absolute; bottom: -.85rem; width: 1.15rem; height: 1.15rem; background: #344b46; border: .25rem solid #eff4ee; border-radius: 50%; }
.train-illustration::before { right: .75rem; } .train-illustration::after { left: .75rem; }
.train-light { position: absolute; top: .65rem; left: 50%; width: .72rem; height: .72rem; translate: -50% 0; background: #ffe18a; border: .16rem solid #fff7d6; border-radius: 50%; box-shadow: 0 0 1rem #ffe59b; }
.train-window { position: absolute; top: 1.75rem; width: 2.35rem; height: 2.8rem; background: linear-gradient(160deg, #dff3ee, #83b5ad); border: .3rem solid #fff4dc; border-radius: .65rem; }
.window-one { right: .75rem; } .window-two { left: .75rem; }
.train-rail { position: absolute; bottom: -1.75rem; width: .22rem; height: 3.3rem; background: #5d766f; border-radius: 1rem; }
.rail-one { right: 2.45rem; rotate: 12deg; } .rail-two { left: 2.45rem; rotate: -12deg; }
.login-visual-copy { position: relative; z-index: 1; display: grid; gap: .25rem; max-width: 19rem; text-align: center; }
.login-visual-copy strong { font-size: 1.05rem; } .login-visual-copy span { font-size: .76rem; line-height: 1.7; color: #3b655b; }
.login-dots { display: flex; gap: .3rem; margin-top: .8rem; } .login-dots i { width: .32rem; height: .32rem; background: rgb(255 255 255 / 62%); border-radius: 50%; } .login-dots i:first-child { width: 1rem; border-radius: 1rem; background: #fff; }
.login-form-panel { padding: 1.75rem 1.6rem 1.55rem; }
.login-brand { margin-bottom: 1.35rem; color: #253a35; font-size: 1.35rem; font-weight: 300; letter-spacing: -.04em; } .login-brand b { color: #d75d50; font-weight: 850; }
.login-kicker { color: #789087; font-size: .72rem; font-weight: 600; }
.login-form-panel h1 { margin: .35rem 0 .3rem; font-size: 1.65rem; color: #263a35; }
.login-form-panel > p { margin: 0 0 1.1rem; font-size: .8rem; line-height: 1.75; color: #86948f; }
.minimal-login-form { gap: 1rem; }
.login-field { gap: .25rem; color: #73827d; font-size: .72rem; font-weight: 600; }
.login-field input { padding: .5rem 0 .65rem; direction: ltr; text-align: right; color: #293c37; background: transparent; border: 0; border-bottom: 1px solid #dfe6e3; border-radius: 0; font-size: .95rem; }
.login-field input::placeholder { color: #bdc7c3; } .login-field input:focus { outline: 0; border-color: #678e82; box-shadow: 0 1px 0 #678e82; }
.login-submit { min-height: 2.8rem; margin-top: .35rem; color: #fff; background: #4f665f; border: 0; border-radius: 99rem; box-shadow: 0 .6rem 1.2rem rgb(46 71 64 / 16%); cursor: pointer; font-size: .87rem; font-weight: 750; transition: transform .18s ease, background .18s ease, box-shadow .18s ease; }
.login-submit:hover { background: #3f554f; box-shadow: 0 .8rem 1.4rem rgb(46 71 64 / 22%); } .login-submit:active { transform: translateY(1px); }
.login-note { display: block; margin-top: 1rem; text-align: center; color: #a1aaa7; font-size: .66rem; }
@media (max-width: 380px) { .passenger-login-shell { padding: .65rem; } .login-visual { min-height: 14.5rem; } .login-form-panel { padding: 1.4rem 1.25rem; } }
/* Two-part home entry screen */
.entry-page { background: linear-gradient(145deg, #e8eeeb, #dce5e1); }
.entry-shell { width: min(62rem, calc(100% - 2rem)); min-height: 100vh; display: grid; place-items: center; margin: 0 auto; padding: 2rem 0; }
.entry-card { width: 100%; min-height: 36rem; display: grid; grid-template-columns: minmax(20rem, .92fr) minmax(24rem, 1.08fr); direction: ltr; overflow: hidden; background: #fff; border: 1px solid rgb(40 70 60 / 10%); border-radius: 1.8rem; box-shadow: 0 2rem 6rem rgb(30 55 47 / 20%); }
.entry-card > * { direction: rtl; }
.entry-visual { position: relative; display: grid; align-content: end; justify-items: center; min-height: 36rem; padding: 2.5rem; color: #163e35; background: radial-gradient(circle at 22% 24%, #f1cf79 0 .25rem, transparent .28rem), radial-gradient(circle at 74% 18%, #fff 0 .2rem, transparent .23rem), linear-gradient(150deg, #c7ded6, #a6ccbd); }
.entry-train { top: 7.2rem; width: 9.2rem; height: 9rem; }
.entry-visual-copy { display: grid; gap: .45rem; max-width: 22rem; text-align: center; }
.entry-visual-copy strong { font-size: 1.25rem; }
.entry-visual-copy span { color: #456a61; font-size: .84rem; line-height: 1.9; }
.entry-access { display: grid; align-content: center; padding: clamp(2rem, 5vw, 4.5rem); }
.entry-access .login-brand { margin-bottom: 2.25rem; }
.entry-access h1 { margin: .5rem 0 .3rem; color: #273b36; font-size: clamp(1.75rem, 3vw, 2.4rem); }
.entry-access > p { margin: 0 0 1.75rem; color: #899792; font-size: .9rem; }
.entry-options { display: grid; gap: .85rem; }
.entry-option { display: grid; grid-template-columns: 3rem 1fr auto; align-items: center; gap: .9rem; padding: 1rem; color: #2d423c; background: #f8faf9; border: 1px solid #e2e9e6; border-radius: 1rem; text-decoration: none; transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; }
.entry-option:hover { transform: translateY(-2px); border-color: #a9c5bb; box-shadow: 0 .75rem 1.8rem rgb(38 68 59 / 10%); }
.entry-option > span:nth-child(2) { display: grid; gap: .18rem; }
.entry-option strong { font-size: .95rem; }
.entry-option small { color: #83918c; font-size: .72rem; }
.entry-option > b { color: #78938a; font-size: 1.1rem; }
.entry-option-icon { width: 3rem; height: 3rem; display: grid; place-items: center; color: #fff; background: #5d796f; border-radius: .85rem; font-weight: 800; }
.agency-option .entry-option-icon { background: #d76b5c; }
.entry-footer { margin-top: 1.5rem; text-align: center; color: #a1aca8; font-size: .68rem; }
.login-page-back { display: inline-flex; margin-bottom: 1.25rem; font-size: .8rem; }
.simple-login-card { margin-top: 2rem; }

@media (max-width: 720px) {
    .entry-shell { width: min(32rem, 100%); padding: .8rem; }
    .entry-card { min-height: 0; grid-template-columns: 1fr; border-radius: 1.5rem; }
    .entry-visual { min-height: 15rem; padding: 1.25rem; }
    .entry-train { top: 1.5rem; width: 7rem; height: 6.8rem; }
    .entry-visual-copy { position: relative; z-index: 1; }
    .entry-visual-copy strong { font-size: 1rem; }
    .entry-visual-copy span { max-width: 19rem; font-size: .72rem; line-height: 1.7; }
    .entry-access { padding: 1.7rem 1.35rem; }
    .entry-access .login-brand { margin-bottom: 1.2rem; }
    .entry-access h1 { font-size: 1.55rem; }
}
.period-layout { display: grid; grid-template-columns: minmax(22rem, .8fr) minmax(30rem, 1.2fr); gap: 1.2rem; align-items: start; margin-top: 1.5rem; }
.period-layout h2 { margin: 0 0 1rem; font-size: 1.2rem; }
.period-form-actions { display: flex; gap: .75rem; }
.period-form-actions .button { border: 1px solid var(--line); font: inherit; cursor: pointer; }
.period-list { display: grid; gap: .8rem; }
.period-item { padding: 1rem; border: 1px solid var(--line); border-radius: .9rem; background: #fbfcfb; }
.period-item.active-period { border-color: #65ad91; background: #f0faf6; box-shadow: inset 4px 0 #15966e; }
.period-item-head, .period-item-head > div { display: flex; align-items: center; justify-content: space-between; gap: .7rem; }
.period-item dl { display: grid; gap: .35rem; margin: .85rem 0 0; }
.period-item dl div { display: flex; justify-content: space-between; gap: 1rem; padding-top: .35rem; border-top: 1px solid #e8eeeb; }
.period-item dt { color: var(--muted); font-size: .76rem; }
.period-item dd { margin: 0; font-size: .78rem; direction: ltr; }
.copy-value { position: relative; border-radius: .35rem; transition: color .15s ease, background .15s ease; }
.copy-value:hover, .copy-value:focus-visible { color: var(--brand-dark); background: #eaf6f1; outline: none; }
.copy-value::after { content: "کپی"; position: absolute; inset: auto 50% calc(100% + .35rem) auto; translate: 50% .2rem; padding: .2rem .4rem; color: #fff; background: #263b35; border-radius: .35rem; font-size: .6rem; opacity: 0; pointer-events: none; transition: .15s; }
.copy-value:hover::after, .copy-value:focus-visible::after { opacity: 1; translate: 50% 0; }
.copy-ltr { direction: ltr; unicode-bidi: isolate; }
.admin-member-copy { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem 1rem; padding: .9rem 0; }
.admin-member-copy span { display: grid; gap: .15rem; }
.admin-member-copy small { font-size: .68rem; }