/* ==================== اتوسالار — یافتن تعمیرگاه / رزرو نوبت / نوبت‌های من ==================== */

/* سرصفحه‌ی صفحات اپ */
.app-head { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-bottom: 24px; }
.app-title { font-size: 24px; font-weight: 800; margin: 0 0 4px; color: var(--text-primary); }
.app-sub { margin: 0; color: var(--text-secondary); font-size: 14px; }

/* جستجو */
.search-card { margin-bottom: 24px; }
.search-row { display: grid; grid-template-columns: 1fr 200px; gap: 12px; }
@media (max-width: 600px) { .search-row { grid-template-columns: 1fr; } }
.search-input { position: relative; }
.search-input i { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); color: var(--text-muted); }
.search-input .form-control { padding-right: 38px; }

/* فیلتر تگ نوع سرویس (چندانتخابی) */
.svc-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.svc-tag { border: 1px solid var(--border-color); background: var(--bg-white); color: var(--text-secondary); border-radius: 50px; padding: 6px 14px; font-size: 13px; cursor: pointer; font-family: inherit; transition: var(--transition-fast); }
.svc-tag:hover { border-color: var(--primary-light); color: var(--primary-color); }
.svc-tag.active { background: var(--primary-gradient); color: #fff; border-color: transparent; }

/* گرید تعمیرگاه‌ها */
.shops-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.shop-card { background: var(--bg-white); border: 1px solid var(--border-color); border-radius: var(--border-radius); padding: 20px; transition: var(--transition); display: flex; flex-direction: column; }
.shop-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.shop-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.shop-card h3 { font-size: 17px; font-weight: 700; margin: 0; color: var(--text-primary); }
.shop-meta { display: flex; align-items: center; gap: 6px; color: var(--text-secondary); font-size: 13px; margin-bottom: 12px; }
.shop-meta i { color: var(--primary-color); }
.shop-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }
.shop-chip { font-size: 12px; background: var(--gray-50); border: 1px solid var(--border-color); color: var(--text-secondary); border-radius: 50px; padding: 3px 10px; }
.shop-card .btn { margin-top: auto; }

/* ستاره‌ها */
.stars { display: inline-flex; gap: 1px; color: #f59e0b; font-size: 13px; }
.stars .muted { color: var(--gray-300); }
.rating-num { color: var(--text-secondary); font-size: 12.5px; margin-inline-start: 4px; }

/* حالت خالی */
.empty-state { text-align: center; padding: 56px 20px; color: var(--text-secondary); }
.empty-state i { font-size: 44px; color: var(--gray-300); display: block; margin-bottom: 12px; }
.empty-state p { margin: 0 0 14px; }

/* ==================== صفحه‌ی تعمیرگاه ==================== */
.back-link { display: inline-flex; align-items: center; gap: 6px; color: var(--text-secondary); font-size: 14px; font-weight: 500; margin-bottom: 16px; }
.back-link:hover { color: var(--primary-color); }
.shop-layout { display: grid; grid-template-columns: 1fr 360px; gap: 24px; align-items: start; }
.shop-main { display: flex; flex-direction: column; gap: 20px; }

.shop-hero { display: flex; align-items: center; gap: 16px; }
.shop-logo { width: 64px; height: 64px; flex: 0 0 64px; border-radius: 16px; background: rgba(91,125,255,.12); color: var(--primary-color); display: grid; place-items: center; font-size: 30px; }
.shop-hero-info h2 { font-size: 20px; font-weight: 800; margin: 0 0 4px; color: var(--text-primary); }
.shop-hero-meta { display: flex; flex-wrap: wrap; gap: 4px 14px; color: var(--text-secondary); font-size: 13.5px; }
.shop-hero-meta span { display: inline-flex; align-items: center; gap: 5px; }
.shop-hero-meta i { color: var(--primary-color); }

/* لیست خدمات در صفحه‌ی تعمیرگاه */
.svc-row { display: flex; align-items: center; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid var(--gray-100); }
.svc-row:last-child { border-bottom: none; }
.svc-row .svc-name { font-weight: 600; color: var(--text-primary); font-size: 14.5px; }
.svc-row .svc-dur { color: var(--text-muted); font-size: 12.5px; }
.svc-row .svc-price { font-weight: 700; color: var(--text-primary); font-size: 14px; }

/* ساعات کاری */
.hours-row { display: flex; justify-content: space-between; padding: 8px 0; font-size: 14px; border-bottom: 1px solid var(--gray-100); }
.hours-row:last-child { border-bottom: none; }
.hours-row .day { color: var(--text-primary); }
.hours-row .time { color: var(--text-secondary); direction: ltr; }
.hours-row .closed { color: var(--danger-color); }

/* ==================== ویجت رزرو ==================== */
.shop-aside { position: sticky; top: 88px; }
.booking-card .form-group { margin-bottom: 16px; }
.bk-services { display: flex; flex-direction: column; gap: 8px; }
.bk-service { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid var(--border-color); border-radius: var(--border-radius-sm); cursor: pointer; font-size: 13.5px; transition: var(--transition-fast); }
.bk-service:hover { border-color: var(--primary-light); }
.bk-service input { accent-color: var(--primary-color); }
.bk-service .p { margin-inline-start: auto; color: var(--text-secondary); font-size: 12.5px; }

.date-chips { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; }
.date-chip { flex: 0 0 auto; text-align: center; border: 1px solid var(--border-color); border-radius: var(--border-radius-sm); padding: 8px 10px; cursor: pointer; background: var(--bg-white); transition: var(--transition-fast); min-width: 56px; }
.date-chip:hover { border-color: var(--primary-light); }
.date-chip.selected { background: var(--primary-gradient); color: #fff; border-color: transparent; }
.date-chip.disabled { opacity: .45; cursor: not-allowed; background: var(--gray-50); }
.date-chip.disabled:hover { border-color: var(--border-color); }
.date-chip .dow { font-size: 12px; display: block; }
.date-chip .dnum { font-size: 16px; font-weight: 700; display: block; }

.slot-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.slot { text-align: center; border: 1px solid var(--border-color); border-radius: var(--border-radius-sm); padding: 8px 0; font-size: 13px; cursor: pointer; direction: ltr; transition: var(--transition-fast); background: var(--bg-white); }
.slot:hover { border-color: var(--primary-light); }
.slot.selected { background: var(--primary-gradient); color: #fff; border-color: transparent; }
.slot.disabled { color: var(--text-muted); background: var(--gray-50); cursor: not-allowed; text-decoration: line-through; }
.slot-empty { color: var(--text-muted); font-size: 13px; grid-column: 1 / -1; text-align: center; padding: 8px; }

.booking-total { display: flex; align-items: center; justify-content: space-between; padding: 14px 0; margin: 4px 0 14px; border-top: 1px dashed var(--border-color); color: var(--text-secondary); font-size: 14px; }
.booking-total b { font-size: 17px; color: var(--text-primary); }
.booking-hint { text-align: center; color: var(--text-muted); font-size: 12px; margin: 10px 0 0; }

/* آدرس تعمیرگاه (زیر سرصفحه) */
.shop-address { font-size: 13px; color: var(--text-secondary); margin: 10px 0 0; line-height: 1.7; }
.shop-address i { color: var(--primary-color); margin-inline-end: 4px; }

/* حالت نوبت‌دهی غیرفعال / نیاز به ورود در کارت رزرو */
.booking-off { text-align: center; padding: 10px 4px; }
.booking-off-icon { width: 56px; height: 56px; margin: 0 auto 14px; border-radius: 16px; background: rgba(217,119,6,.10); color: #d97706; display: grid; place-items: center; font-size: 26px; }
.booking-off p { color: var(--text-secondary); font-size: 14px; line-height: 1.8; margin: 0 0 16px; }
.booking-off .btn { width: 100%; }
.booking-off .btn i { margin-inline-end: 4px; }

/* ==================== نوبت‌های من ==================== */
.tabs { display: inline-flex; background: var(--gray-100); border-radius: 50px; padding: 4px; margin-bottom: 20px; }
.tab { border: none; background: transparent; padding: 8px 20px; border-radius: 50px; font-weight: 600; font-size: 14px; color: var(--text-secondary); cursor: pointer; transition: var(--transition-fast); font-family: inherit; }
.tab.active { background: var(--bg-white); color: var(--primary-color); box-shadow: var(--shadow-sm); }

.appt-list { display: flex; flex-direction: column; gap: 14px; }
.appt-card { background: var(--bg-white); border: 1px solid var(--border-color); border-radius: var(--border-radius); padding: 18px 20px; }
.appt-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.appt-provider { font-weight: 700; font-size: 16px; color: var(--text-primary); }
.appt-when { display: flex; align-items: center; gap: 6px; color: var(--text-secondary); font-size: 13.5px; margin-top: 3px; }
.appt-when i { color: var(--primary-color); }
.appt-services { color: var(--text-secondary); font-size: 13.5px; margin-bottom: 12px; }
.appt-foot { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; border-top: 1px solid var(--gray-100); padding-top: 12px; }
.appt-track { color: var(--text-muted); font-size: 12.5px; direction: ltr; }
.appt-actions { display: flex; gap: 8px; }

/* ==================== واکنش‌گرا ==================== */
@media (max-width: 992px) {
    .shop-layout { grid-template-columns: 1fr; }
    /* جلوگیری از سرریز افقی: آیتم‌های گرید باید بتوانند از عرض min-content فرزندان کوچک‌تر شوند */
    .shop-main, .shop-aside { min-width: 0; }
    .shop-aside { position: static; }
    .shops-grid { grid-template-columns: repeat(2, 1fr); }
    .search-row { grid-template-columns: 1fr; }
}
@media (max-width: 576px) {
    .shops-grid { grid-template-columns: 1fr; }
    .slot-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ==================== شناسنامه‌ی خودرو (logbook) ==================== */
.lb-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 20px; }
.lb-stat { display: flex; align-items: center; gap: 14px; background: var(--bg-white); border: 1px solid var(--border-color); border-radius: var(--border-radius); padding: 18px; }
.lb-stat .ci { width: 48px; height: 48px; flex: 0 0 48px; border-radius: 14px; background: rgba(91,125,255,.12); color: var(--primary-color); display: grid; place-items: center; font-size: 22px; }
.lb-stat b { display: block; font-size: 18px; font-weight: 800; color: var(--text-primary); }
.lb-stat span { font-size: 13px; color: var(--text-secondary); }
.lb-parts { display: flex; flex-wrap: wrap; gap: 8px; }
.lb-part { font-size: 13px; background: var(--gray-50); border: 1px solid var(--border-color); color: var(--text-secondary); border-radius: 50px; padding: 5px 12px; }
.lb-part i { color: var(--primary-color); margin-left: 4px; }
.lb-timeline { display: flex; flex-direction: column; }
.lb-event { display: flex; gap: 12px; position: relative; padding-bottom: 18px; }
.lb-event:last-child { padding-bottom: 0; }
.lb-event:not(:last-child)::before { content: ''; position: absolute; top: 18px; bottom: 0; right: 6px; width: 2px; background: var(--gray-200); }
.lb-dot { flex: 0 0 14px; width: 14px; height: 14px; border-radius: 50%; background: var(--primary-gradient); margin-top: 3px; z-index: 1; }
.lb-event-body { flex: 1; }
.lb-event-top { display: flex; justify-content: space-between; gap: 10px; }
.lb-event-top b { font-size: 14.5px; color: var(--text-primary); }
.lb-event-top span { font-weight: 700; color: var(--text-primary); font-size: 14px; }
.lb-event-meta { font-size: 12.5px; color: var(--text-muted); margin-top: 2px; }
@media (max-width: 576px) { .lb-stats { grid-template-columns: 1fr; } }

/* ==================== ثبت نظر ==================== */
.review-wrap { max-width: 640px; margin: 0 auto; }
.star-input { display: inline-flex; gap: 4px; font-size: 28px; color: #f59e0b; cursor: pointer; direction: ltr; }
.star-input i:hover { transform: scale(1.15); }
.star-input.sm { font-size: 18px; }
.rv-subs { display: grid; gap: 10px; margin-bottom: 18px; }
.rv-sub-row { display: flex; align-items: center; justify-content: space-between; padding: 8px 12px; background: var(--gray-50); border-radius: var(--border-radius-sm); }
.rv-sub-label { font-size: 14px; color: var(--text-secondary); }
.rv-recommend { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--text-primary); margin: 8px 0 18px; cursor: pointer; }
.rv-recommend input { accent-color: var(--primary-color); }

/* ==================== فاکتور — جزئیات ==================== */
.inv-layout { display: grid; grid-template-columns: 1fr 340px; gap: 24px; align-items: start; }
.inv-main { display: flex; flex-direction: column; gap: 20px; }
.inv-aside { position: sticky; top: 88px; }
.inv-hero { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.inv-number { font-size: 18px; font-weight: 800; margin: 0 0 6px; color: var(--text-primary); }
.inv-total-row { display: flex; justify-content: space-between; padding: 8px 0; font-size: 14px; color: var(--text-secondary); }
.inv-total-row.grand { border-top: 1px solid var(--border-color); margin-top: 4px; padding-top: 12px; font-weight: 700; }
.inv-total-row.grand b, .inv-total-row.grand span { color: var(--text-primary); font-size: 15px; }
.inv-total-row.due { border-top: 1px dashed var(--border-color); margin-top: 4px; padding-top: 12px; }
.inv-total-row.due b { color: var(--primary-color); font-size: 17px; font-weight: 800; }
.inv-total-row.due span:first-child { color: var(--text-primary); font-weight: 600; }
#invPayBox { margin-top: 12px; }
.pay-row { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--gray-100); font-size: 14px; color: var(--text-secondary); }
.pay-row:last-child { border-bottom: none; }
.pay-row b { color: var(--text-primary); }

/* ==================== کیف پول ==================== */
.wallet-balance { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; background: var(--primary-gradient); color: #fff; border-radius: var(--border-radius-lg); padding: 28px; margin-bottom: 24px; box-shadow: var(--shadow-lg); }
.wb-label { font-size: 14px; opacity: .9; display: flex; align-items: center; gap: 8px; }
.wb-amount { font-size: 32px; font-weight: 800; margin-top: 6px; letter-spacing: -.5px; }
.wallet-tx { display: flex; flex-direction: column; }
.tx-row { display: flex; align-items: center; justify-content: space-between; padding: 14px 0; border-bottom: 1px solid var(--gray-100); }
.tx-row:last-child { border-bottom: none; }
.tx-info { display: flex; align-items: center; gap: 12px; }
.tx-icon { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; font-size: 18px; }
.tx-icon.credit { background: rgba(16,185,129,.12); color: var(--success-color); }
.tx-icon.debit { background: rgba(239,68,68,.10); color: var(--danger-color); }
.tx-info b { display: block; font-size: 14px; color: var(--text-primary); }
.tx-info small { color: var(--text-muted); font-size: 12.5px; }
.tx-amount { font-weight: 700; font-size: 14.5px; direction: ltr; }
.tx-amount.credit { color: var(--success-color); }
.tx-amount.debit { color: var(--danger-color); }

@media (max-width: 992px) { .inv-layout { grid-template-columns: 1fr; } .inv-main, .inv-aside { min-width: 0; } .inv-aside { position: static; } }

/* ==================== شارژ کیف پول (مودال + مبالغ پیشنهادی) ==================== */
.topup-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.topup-chip { border: 1px solid var(--border-color); background: var(--white-color, #fff); color: var(--text-primary); border-radius: 50px; padding: 8px 16px; font-size: 14px; font-weight: 600; cursor: pointer; font-family: inherit; transition: all .15s; }
.topup-chip:hover { border-color: var(--primary-color); color: var(--primary-color); }
.topup-chip.active { background: var(--primary-color); color: #fff; border-color: transparent; }
#topupAmount { font-size: 18px; font-weight: 700; letter-spacing: .5px; }

/* ==================== یافتن تعمیرگاه — کارت‌ها ==================== */
.shop-desc { font-size: 13px; color: var(--text-secondary); margin: 8px 0; line-height: 1.7; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.shop-badge-off { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: #d97706; background: rgba(217,119,6,.10); border-radius: 6px; padding: 4px 8px; margin-bottom: 10px; }