/*
 * Tijara Rental OS — public-facing base styles.
 * Uses CSS logical properties throughout so RTL (Arabic/Persian) is
 * first-class rather than a mirrored afterthought.
 */

.tijara-registration {
	--tijara-primary: #0f6e5c;
	--tijara-primary-dark: #0b5346;
	--tijara-border: #e2e5e4;
	--tijara-text: #1a2422;
	--tijara-muted: #6b7573;
	--tijara-danger: #b3261e;
	--tijara-success: #1e7a4c;
	--tijara-radius: 10px;

	max-inline-size: 720px;
	margin-inline: auto;
	padding: 2rem;
	font-family: -apple-system, "Segoe UI", Tahoma, Arial, sans-serif;
	color: var( --tijara-text );
}

.tijara-form h2 {
	margin-block-end: 0.25rem;
	font-size: 1.5rem;
}

.tijara-form__intro {
	color: var( --tijara-muted );
	margin-block-end: 1.5rem;
}

.tijara-form__row {
	margin-block-end: 1.1rem;
}

.tijara-form__row--split {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1rem;
}

@media ( max-width: 560px ) {
	.tijara-form__row--split {
		grid-template-columns: 1fr;
	}
}

.tijara-form label {
	display: block;
	margin-block-end: 0.35rem;
	font-weight: 600;
	font-size: 0.9rem;
}

.tijara-form input,
.tijara-form select,
.tijara-form textarea {
	inline-size: 100%;
	padding: 0.65rem 0.8rem;
	border: 1px solid var( --tijara-border );
	border-radius: var( --tijara-radius );
	font-size: 0.95rem;
	text-align: start;
}

.tijara-form input:focus,
.tijara-form select:focus,
.tijara-form textarea:focus {
	outline: 2px solid var( --tijara-primary );
	outline-offset: 1px;
}

.tijara-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.75rem 1.5rem;
	border-radius: var( --tijara-radius );
	border: none;
	font-weight: 600;
	font-size: 0.95rem;
	cursor: pointer;
}

.tijara-btn--primary {
	background: var( --tijara-primary );
	color: #fff;
}

.tijara-btn--primary:hover {
	background: var( --tijara-primary-dark );
}

.tijara-btn:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

.tijara-form__status {
	min-block-size: 1.4rem;
	margin-block-end: 0.75rem;
	font-size: 0.9rem;
}

.tijara-form__status.is-success {
	color: var( --tijara-success );
}

.tijara-form__status.is-error {
	color: var( --tijara-danger );
}

.tijara-pending-notice {
	padding: 1rem;
	border: 1px dashed var( --tijara-border, #e2e5e4 );
	border-radius: 10px;
	color: #6b7573;
	font-size: 0.9rem;
}

/* ---------------------------------------------------------------------
 * Marketplace (Phase 5)
 * ------------------------------------------------------------------- */

.tijara-marketplace {
	--tijara-primary: #0f6e5c;
	--tijara-primary-dark: #0b5346;
	--tijara-border: #e2e5e4;
	--tijara-text: #1a2422;
	--tijara-muted: #6b7573;
	--tijara-danger: #b3261e;
	--tijara-success: #1e7a4c;
	--tijara-radius: 10px;

	max-inline-size: 1200px;
	margin-inline: auto;
	padding: 1.5rem;
	font-family: -apple-system, "Segoe UI", Tahoma, Arial, sans-serif;
	color: var( --tijara-text );
}

.tijara-verified-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	padding: 0.1rem 0.5rem;
	background: #d8f3e2;
	color: var( --tijara-primary );
	border-radius: 999px;
	font-size: 0.75rem;
	font-weight: 600;
}

.tijara-rating {
	color: #b8860b;
	font-size: 0.85rem;
	font-weight: 600;
}

.tijara-badge-inline {
	display: inline-block;
	margin-inline-start: 0.4rem;
	padding: 0.1rem 0.5rem;
	background: #f0f0f1;
	border-radius: 999px;
	font-size: 0.72rem;
	color: var( --tijara-muted );
}

/* Search widget */
.tijara-search-widget {
	background: #fff;
	border: 1px solid var( --tijara-border );
	border-radius: var( --tijara-radius );
	padding: 1.25rem;
	margin-block-end: 1.5rem;
	box-shadow: 0 2px 10px rgba( 0, 0, 0, 0.04 );
}

.tijara-search-widget__row {
	display: grid;
	grid-template-columns: repeat( 4, 1fr ) auto;
	gap: 0.9rem;
	align-items: end;
}

@media ( max-width: 900px ) {
	.tijara-search-widget__row {
		grid-template-columns: 1fr 1fr;
	}
}

.tijara-search-widget__field label {
	display: block;
	font-size: 0.8rem;
	font-weight: 600;
	margin-block-end: 0.3rem;
}

.tijara-search-widget select,
.tijara-search-widget input {
	inline-size: 100%;
	padding: 0.6rem 0.7rem;
	border: 1px solid var( --tijara-border );
	border-radius: 8px;
}

.tijara-search-widget__submit {
	white-space: nowrap;
}

/* Layout: filters sidebar + results */
.tijara-marketplace__layout {
	display: grid;
	grid-template-columns: 240px 1fr;
	gap: 1.5rem;
	align-items: start;
}

@media ( max-width: 800px ) {
	.tijara-marketplace__layout {
		grid-template-columns: 1fr;
	}
}

.tijara-marketplace__filters {
	background: #fff;
	border: 1px solid var( --tijara-border );
	border-radius: var( --tijara-radius );
	padding: 1.25rem;
}

.tijara-filter-group {
	margin-block-end: 1rem;
}

.tijara-filter-group--split {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.6rem;
}

.tijara-filter-group label {
	display: block;
	font-size: 0.8rem;
	font-weight: 600;
	margin-block-end: 0.3rem;
}

.tijara-filter-group select,
.tijara-filter-group input {
	inline-size: 100%;
	padding: 0.5rem 0.6rem;
	border: 1px solid var( --tijara-border );
	border-radius: 8px;
}

.tijara-marketplace__toolbar {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-block-end: 1rem;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.tijara-marketplace__sort {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.85rem;
}

.tijara-marketplace__sort select {
	padding: 0.4rem 0.6rem;
	border: 1px solid var( --tijara-border );
	border-radius: 8px;
}

/* Listing grid */
.tijara-listing-grid {
	display: grid;
	grid-template-columns: repeat( auto-fill, minmax( 260px, 1fr ) );
	gap: 1.25rem;
}

.tijara-vehicle-card {
	position: relative;
	background: #fff;
	border: 1px solid var( --tijara-border );
	border-radius: var( --tijara-radius );
	overflow: hidden;
	display: flex;
	flex-direction: column;
	transition: box-shadow 0.15s ease;
}

.tijara-vehicle-card:hover {
	box-shadow: 0 4px 16px rgba( 0, 0, 0, 0.08 );
}

.tijara-vehicle-card__badge {
	position: absolute;
	inset-block-start: 0.6rem;
	inset-inline-start: 0.6rem;
	background: #b8860b;
	color: #fff;
	padding: 0.15rem 0.6rem;
	border-radius: 999px;
	font-size: 0.7rem;
	font-weight: 700;
	z-index: 1;
}

.tijara-vehicle-card__media {
	display: block;
	background: #f6fbf8;
}

.tijara-vehicle-card__placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	block-size: 150px;
	color: var( --tijara-muted );
	font-weight: 600;
}

.tijara-vehicle-card__body {
	padding: 1rem;
	flex: 1;
}

.tijara-vehicle-card__title {
	margin: 0 0 0.3rem;
	font-size: 1.05rem;
}

.tijara-vehicle-card__title a {
	color: inherit;
	text-decoration: none;
}

.tijara-vehicle-card__specs {
	color: var( --tijara-muted );
	font-size: 0.82rem;
	margin: 0 0 0.5rem;
}

.tijara-vehicle-card__vendor {
	font-size: 0.82rem;
	margin: 0 0 0.3rem;
	display: flex;
	align-items: center;
	gap: 0.4rem;
	flex-wrap: wrap;
}

.tijara-vehicle-card__vendor a {
	color: var( --tijara-primary );
	text-decoration: none;
}

.tijara-vehicle-card__location {
	color: var( --tijara-muted );
	font-size: 0.8rem;
	margin: 0;
}

.tijara-vehicle-card__footer {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0.85rem 1rem;
	border-block-start: 1px solid var( --tijara-border );
}

.tijara-vehicle-card__price strong {
	display: block;
	font-size: 1.1rem;
}

.tijara-vehicle-card__price span {
	font-size: 0.72rem;
	color: var( --tijara-muted );
}

.tijara-empty-state {
	grid-column: 1 / -1;
	text-align: center;
	padding: 3rem 1rem;
	color: var( --tijara-muted );
}

.tijara-pagination {
	display: flex;
	gap: 0.4rem;
	margin-block-start: 1.5rem;
	justify-content: center;
}

.tijara-pagination a {
	padding: 0.4rem 0.8rem;
	border: 1px solid var( --tijara-border );
	border-radius: 8px;
	text-decoration: none;
	color: var( --tijara-text );
}

.tijara-pagination a.is-current {
	background: var( --tijara-primary );
	color: #fff;
	border-color: var( --tijara-primary );
}

/* Breadcrumbs */
.tijara-breadcrumbs {
	font-size: 0.82rem;
	color: var( --tijara-muted );
	margin-block-end: 1rem;
}

.tijara-breadcrumbs a {
	color: var( --tijara-muted );
}

/* Vehicle detail */
.tijara-vehicle-detail__layout {
	display: grid;
	grid-template-columns: 1fr 320px;
	gap: 2rem;
	align-items: start;
}

@media ( max-width: 900px ) {
	.tijara-vehicle-detail__layout {
		grid-template-columns: 1fr;
	}
}

.tijara-gallery {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 140px, 1fr ) );
	gap: 0.5rem;
	margin-block-end: 1.25rem;
}

.tijara-gallery img {
	inline-size: 100%;
	block-size: 140px;
	object-fit: cover;
	border-radius: 8px;
}

.tijara-gallery__placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	block-size: 240px;
	background: #f6fbf8;
	border-radius: var( --tijara-radius );
	font-weight: 600;
	color: var( --tijara-muted );
	grid-column: 1 / -1;
}

.tijara-vehicle-detail__vendor {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	flex-wrap: wrap;
}

.tijara-vehicle-detail__vendor a {
	color: var( --tijara-primary );
	font-weight: 600;
	text-decoration: none;
}

.tijara-spec-table {
	inline-size: 100%;
	border-collapse: collapse;
	margin-block-end: 1.5rem;
}

.tijara-spec-table th,
.tijara-spec-table td {
	text-align: start;
	padding: 0.5rem 0;
	border-block-end: 1px solid var( --tijara-border );
	font-size: 0.9rem;
}

.tijara-spec-table th {
	color: var( --tijara-muted );
	font-weight: 500;
	inline-size: 40%;
}

.tijara-branch-list {
	list-style: none;
	margin: 0 0 1.5rem;
	padding: 0;
}

.tijara-branch-list li {
	padding: 0.5rem 0;
	border-block-end: 1px solid var( --tijara-border );
	font-size: 0.9rem;
}

.tijara-review {
	padding: 1rem 0;
	border-block-end: 1px solid var( --tijara-border );
}

.tijara-review__rating {
	color: #b8860b;
	font-weight: 700;
	margin-block-end: 0.3rem;
}

.tijara-review__response {
	margin-block-start: 0.6rem;
	padding-inline-start: 1rem;
	border-inline-start: 3px solid var( --tijara-border );
	font-size: 0.9rem;
}

.tijara-booking-box {
	position: sticky;
	inset-block-start: 1rem;
	background: #fff;
	border: 1px solid var( --tijara-border );
	border-radius: var( --tijara-radius );
	padding: 1.25rem;
	box-shadow: 0 2px 10px rgba( 0, 0, 0, 0.04 );
}

.tijara-booking-box__price {
	margin-block-end: 1rem;
}

.tijara-booking-box__price strong {
	font-size: 1.4rem;
}

.tijara-booking-box__price span {
	color: var( --tijara-muted );
	font-size: 0.8rem;
	margin-inline-start: 0.3rem;
}

.tijara-booking-box__quote {
	font-size: 0.85rem;
	color: var( --tijara-muted );
	margin-block-end: 0.75rem;
	min-block-size: 1.2rem;
}

.tijara-btn--block {
	display: flex;
	inline-size: 100%;
	margin-block-start: 0.75rem;
}

/* Company profile */
.tijara-company-header {
	display: flex;
	align-items: center;
	gap: 1.25rem;
	margin-block-end: 1rem;
}

.tijara-company-header__logo {
	inline-size: 80px;
	block-size: 80px;
	object-fit: contain;
	border-radius: 8px;
	border: 1px solid var( --tijara-border );
}

.tijara-company-header__contact {
	color: var( --tijara-muted );
	font-size: 0.9rem;
}

.tijara-company-profile__description {
	margin-block-end: 1.5rem;
	color: var( --tijara-text );
}

/* Booking wizard */
.tijara-wizard-steps {
	display: flex;
	list-style: none;
	padding: 0;
	margin: 0 0 1.5rem;
	gap: 0.5rem;
}

.tijara-wizard-steps li {
	flex: 1;
	text-align: center;
	padding: 0.6rem;
	border-radius: 8px;
	background: #f0f0f1;
	color: var( --tijara-muted );
	font-size: 0.85rem;
	font-weight: 600;
}

.tijara-wizard-steps li.is-active {
	background: var( --tijara-primary );
	color: #fff;
}

.tijara-wizard-panel {
	max-inline-size: 640px;
	margin-inline: auto;
}

.tijara-trip-summary {
	display: flex;
	flex-direction: column;
	background: #f6fbf8;
	border-radius: 8px;
	padding: 0.8rem 1rem;
	margin-block-end: 1.25rem;
}

.tijara-trip-summary span {
	color: var( --tijara-muted );
	font-size: 0.85rem;
}

.tijara-extras-list {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	margin-block-end: 1rem;
}

.tijara-extra-option {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	padding: 0.6rem 0.8rem;
	border: 1px solid var( --tijara-border );
	border-radius: 8px;
	cursor: pointer;
}

.tijara-extra-option input {
	inline-size: auto;
}

.tijara-extra-option__price {
	margin-inline-start: auto;
	color: var( --tijara-muted );
	font-size: 0.85rem;
}

.tijara-totals-panel table {
	inline-size: 100%;
	border-collapse: collapse;
}

.tijara-totals-panel th {
	text-align: start;
	font-weight: normal;
	color: var( --tijara-muted );
	padding: 0.25rem 0;
}

.tijara-totals-panel td {
	text-align: end;
	padding: 0.25rem 0;
}

.tijara-totals-panel tr.total th,
.tijara-totals-panel tr.total td {
	border-block-start: 1px solid var( --tijara-border );
	padding-block-start: 0.6rem;
	font-weight: 700;
	font-size: 1.05rem;
}