.pms-app {
	max-width: 620px;
	margin: 24px auto;
	background: #fff;
	border-radius: 16px;
	box-shadow: 0 4px 24px rgba(0,0,0,.08);
	padding: 28px;
	font-family: inherit;
}
.pms-hidden { display: none !important; }
.pms-title { margin: 0 0 6px; font-size: 20px; font-weight: 700; color: #16324f; }
.pms-sub { margin: 0 0 18px; color: #667; font-size: 14px; }

.pms-field { display: block; margin-bottom: 14px; }
.pms-field span { display: block; margin-bottom: 6px; font-size: 13px; color: #445; font-weight: 600; }
.pms-field input, .pms-field select {
	width: 100%;
	box-sizing: border-box;
	padding: 11px 14px;
	border: 1px solid #d7dde5;
	border-radius: 10px;
	font-size: 15px;
	background: #f8fafc;
	transition: border-color .15s, box-shadow .15s;
}
.pms-field input:focus, .pms-field select:focus {
	outline: none;
	border-color: #2563eb;
	box-shadow: 0 0 0 3px rgba(37,99,235,.12);
	background: #fff;
}

.pms-btn {
	display: inline-block;
	padding: 11px 22px;
	border-radius: 10px;
	border: none;
	cursor: pointer;
	font-size: 15px;
	font-weight: 700;
	margin-top: 6px;
}
.pms-btn-primary { background: #1e40af; color: #fff; }
.pms-btn-primary:hover { background: #1c3a9c; }
.pms-btn-primary:disabled { background: #9db3d8; cursor: not-allowed; }
.pms-btn-link { background: transparent; color: #667; font-weight: 500; margin-inline-start: 8px; }
.pms-btn-link:hover { color: #1e40af; }

.pms-error { color: #c0392b; font-size: 13.5px; margin: 6px 0; min-height: 18px; }

.pms-type-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 18px; }
.pms-type-card {
	background: #f1f5f9;
	border: 2px solid transparent;
	border-radius: 14px;
	padding: 20px 8px;
	cursor: pointer;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	font-weight: 700;
	color: #22344a;
	transition: all .15s;
}
.pms-type-card:hover { border-color: #93c5fd; background: #eef4ff; }
.pms-type-card.pms-selected { border-color: #1e40af; background: #e0e9ff; }
.pms-type-icon { font-size: 30px; }

/* --- ویجت پلاک ایرانی --- */
.pms-plate {
	display: flex;
	align-items: stretch;
	direction: ltr;
	border: 3px solid #16324f;
	border-radius: 10px;
	overflow: hidden;
	max-width: 340px;
	margin: 10px 0 16px;
	background: #fff;
	box-shadow: 0 2px 8px rgba(0,0,0,.08);
}
.pms-plate-part {
	border: none !important;
	text-align: center;
	font-size: 20px;
	font-weight: 700;
	letter-spacing: 2px;
	background: #fff !important;
	border-radius: 0 !important;
	padding: 10px 4px !important;
	width: 56px;
}
.pms-plate-part:focus { box-shadow: none !important; background: #fef9e7 !important; }
.pms-plate-letter {
	border: none !important;
	border-inline: 1px solid #dcdcdc !important;
	text-align: center;
	font-size: 18px;
	font-weight: 700;
	background: #fff !important;
	border-radius: 0 !important;
	padding: 10px 2px !important;
	width: 66px;
}
.pms-plate-ir {
	background: #16324f;
	color: #fff;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 4px 8px;
	font-size: 11px;
	font-weight: 700;
	gap: 3px;
}
.pms-plate-ir .pms-plate-region {
	width: 42px;
	background: #16324f !important;
	color: #fff !important;
	font-size: 16px !important;
	padding: 2px !important;
}
.pms-plate-moto-shape { max-width: 260px; }
.pms-plate-moto-shape .pms-plate-part { width: 90px; }
.pms-plate-dash { display: flex; align-items: center; padding: 0 6px; font-weight: 900; color: #16324f; }

/* --- شبکه‌ی جایگاه‌ها --- */
.pms-legend { display: flex; gap: 16px; margin-bottom: 14px; font-size: 13px; color: #556; }
.pms-legend-item { display: flex; align-items: center; gap: 6px; }
.pms-dot { width: 12px; height: 12px; border-radius: 4px; display: inline-block; }
.pms-dot-free { background: #d7e3f4; border: 1px solid #9db3d8; }
.pms-dot-taken { background: #cbd2db; }
.pms-dot-selected { background: #1e40af; }

.pms-row-block { margin-bottom: 18px; }
.pms-row-title { font-size: 14px; font-weight: 700; color: #22344a; margin-bottom: 8px; display: flex; justify-content: space-between; }
.pms-row-price { color: #667; font-weight: 500; }
.pms-slot-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(46px, 1fr)); gap: 8px; }
.pms-slot {
	aspect-ratio: 1;
	border-radius: 8px;
	background: #d7e3f4;
	border: 1px solid #9db3d8;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 13px;
	font-weight: 700;
	color: #16324f;
	cursor: pointer;
}
.pms-slot:hover { background: #bcd2f0; }
.pms-slot.pms-taken { background: #e2e5e9; border-color: #cbd2db; color: #99a1ab; cursor: not-allowed; }
.pms-slot.pms-selected { background: #1e40af; border-color: #1e40af; color: #fff; }

.pms-slot.pms-slot-group {
	flex-direction: column;
	gap: 2px;
	border-style: dashed;
	border-width: 2px;
}
.pms-slot-group .pms-slot-num { font-size: 13px; font-weight: 800; }
.pms-slot-group .pms-slot-cap { font-size: 9.5px; font-weight: 600; opacity: .85; }

.pms-success { text-align: center; padding: 10px 0; }
.pms-receipt {
	display: inline-block;
	background: #f1f5f9;
	border: 2px dashed #1e40af;
	border-radius: 12px;
	padding: 16px 26px;
	font-size: 16px;
	line-height: 2;
	margin: 14px 0;
	text-align: right;
}

@media (max-width: 480px) {
	.pms-app { padding: 18px; border-radius: 0; }
	.pms-type-grid { gap: 8px; }
}