/* ===================================================================
   MohsenTajikWeb — Booking (رزرو مشاوره)
=================================================================== */

.booking-hero { background: var(--mt-green-dark); color: #fff; padding: 2.25rem 0; }
.booking-hero .kicker { color: #9cc3b0; font-size: 0.8rem; margin-bottom: 0.4rem; }
.booking-hero h1 { color: #fff; font-size: 1.6rem; font-weight: 700; margin: 0 0 0.35rem; }
.booking-hero p { color: #9aa89f; font-size: 0.9rem; margin: 0; }

.booking-section { padding: 2rem 0 3rem; }
.booking-card { background: var(--mt-white); border: 1px solid var(--mt-border); border-radius: 12px; padding: 1.75rem; max-width: 760px; }

.booking-alert { background: var(--color-background-danger, #fce-beb); border: 1px solid #f0c1c1; color: #a32d2d; border-radius: 8px; padding: 0.8rem 1rem; font-size: 0.88rem; margin-bottom: 1.25rem; display: flex; align-items: center; gap: 0.5rem; }
.booking-alert.danger { background: #fcebeb; border-color: #f0c1c1; color: #a32d2d; }

.booking-step { margin-bottom: 1.5rem; }
.booking-step-label { font-size: 0.85rem; font-weight: 500; color: var(--mt-text); margin-bottom: 0.6rem; display: flex; align-items: center; gap: 0.4rem; }
.booking-step-label .num { width: 22px; height: 22px; border-radius: 50%; background: var(--mt-green); color: #fff; font-size: 0.75rem; display: inline-flex; align-items: center; justify-content: center; }

/* type pills */
.type-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.6rem; }
.type-opt { border: 1px solid var(--mt-border); border-radius: 8px; padding: 0.9rem; text-align: center; cursor: pointer; transition: all var(--mt-ease); background: var(--mt-white); }
.type-opt:hover { border-color: var(--mt-green); }
.type-opt.active { background: var(--mt-green-dark); border-color: var(--mt-green-dark); color: #fff; }
.type-opt i { display: block; font-size: 1.4rem; margin-bottom: 0.3rem; }
.type-opt span { font-size: 0.85rem; }

/* date + slots */
.booking-date-input { width: 100%; border: 1px solid var(--mt-border); border-radius: 8px; padding: 0.7rem 0.9rem; font-family: inherit; font-size: 0.95rem; background: var(--mt-bone); color: var(--mt-text); outline: none; }
.slots-grid { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.75rem; min-height: 2.5rem; }
.slot-btn { border: 1px solid var(--mt-border); background: var(--mt-white); color: var(--mt-text); border-radius: 40px; padding: 0.45rem 1.1rem; font-size: 0.88rem; font-family: inherit; cursor: pointer; transition: all var(--mt-ease); }
.slot-btn:hover { border-color: var(--mt-green); color: var(--mt-green); }
.slot-btn.active { background: var(--mt-green-dark); color: #fff; border-color: var(--mt-green-dark); }
.slots-hint { font-size: 0.83rem; color: var(--mt-muted-light); padding: 0.5rem 0; }

/* fields */
.booking-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
.field { margin-bottom: 0.85rem; }
.field label { font-size: 0.82rem; color: var(--mt-muted); display: block; margin-bottom: 0.35rem; }
.field input, .field select, .field textarea { width: 100%; border: 1px solid var(--mt-border); border-radius: 8px; padding: 0.6rem 0.8rem; font-family: inherit; font-size: 0.9rem; background: var(--mt-bone); color: var(--mt-text); outline: none; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--mt-green); }
.field textarea { resize: none; height: 70px; }
.field .err { color: #a32d2d; font-size: 0.78rem; margin-top: 0.25rem; display: block; }

/* fee notice */
.fee-notice { background: var(--mt-green-tint); border: 1px solid var(--mt-green-border); border-radius: 8px; padding: 0.85rem 1rem; font-size: 0.9rem; color: var(--mt-green); margin-bottom: 1.25rem; display: flex; align-items: center; gap: 0.5rem; }
.fee-notice.free { color: var(--mt-text); }

.booking-submit { width: 100%; background: var(--mt-green); color: #fff; border: none; padding: 0.85rem; border-radius: 8px; font-size: 1rem; font-weight: 500; cursor: pointer; font-family: inherit; }
.booking-submit:hover { background: var(--mt-green-dark); }
.booking-submit:disabled { background: var(--mt-muted-light); cursor: default; }

/* استایل مرحله‌ی تأیید شماره در otp.css است (مشترک با فرم ثبت نظر). */

.booking-track-link { text-align: center; margin-top: 1rem; font-size: 0.85rem; }

/* ── Result page ── */
.result-section { padding: 3rem 0; }
.result-card { background: var(--mt-white); border: 1px solid var(--mt-border); border-radius: 12px; padding: 2rem; max-width: 560px; margin: 0 auto; text-align: center; }
.result-icon { width: 64px; height: 64px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 2rem; margin: 0 auto 1rem; }
.result-icon.ok { background: var(--mt-green-tint); color: var(--mt-green); }
.result-icon.pending { background: #faeeda; color: #854f0b; }
.result-icon.fail { background: #fcebeb; color: #a32d2d; }
.result-card h1 { font-size: 1.4rem; font-weight: 700; margin-bottom: 0.5rem; color: var(--mt-text); }
.result-card .msg { color: var(--mt-muted); font-size: 0.92rem; margin-bottom: 1.5rem; }
.result-code { background: var(--mt-bone); border: 1px dashed var(--mt-border); border-radius: 8px; padding: 0.75rem; margin-bottom: 1.5rem; }
.result-code .label { font-size: 0.78rem; color: var(--mt-muted-light); display: block; }
.result-code .code { font-size: 1.3rem; font-weight: 700; color: var(--mt-green); letter-spacing: 1px; }
.result-table { width: 100%; text-align: start; font-size: 0.9rem; border-top: 1px solid var(--mt-border); }
.result-table td { padding: 0.6rem 0; border-bottom: 1px solid var(--mt-border); }
.result-table td:first-child { color: var(--mt-muted); width: 38%; }
.result-badge { display: inline-block; padding: 0.2rem 0.7rem; border-radius: 40px; font-size: 0.8rem; }
.result-badge.confirmed { background: var(--mt-green-tint); color: var(--mt-green); }
.result-badge.pending { background: #faeeda; color: #854f0b; }
.result-badge.cancelled { background: #fcebeb; color: #a32d2d; }

/* ── Track page ── */
.track-section { padding: 3rem 0; }
.track-card { background: var(--mt-white); border: 1px solid var(--mt-border); border-radius: 12px; padding: 2rem; max-width: 460px; margin: 0 auto; text-align: center; }
.track-card h1 { font-size: 1.4rem; font-weight: 700; margin-bottom: 0.5rem; }
.track-card p { color: var(--mt-muted); font-size: 0.9rem; margin-bottom: 1.5rem; }
.track-card input { width: 100%; border: 1px solid var(--mt-border); border-radius: 8px; padding: 0.7rem 0.9rem; font-family: inherit; font-size: 1rem; text-align: center; letter-spacing: 1px; background: var(--mt-bone); margin-bottom: 1rem; outline: none; }

@media (max-width: 575px) {
  .type-grid { grid-template-columns: 1fr; }
  .booking-row { grid-template-columns: 1fr; }
}