/* ==========================================================================
   بوابة العملاء - تصميم Frontend (Dark / Gold, RTL, Mobile First)
   ========================================================================== */

.cp-wrap {
	--cp-primary: #c9a227;
	--cp-secondary: #e8c766;
	--cp-bg: #141110;
	--cp-card-bg: #1c1815;
	--cp-card-bg-alt: #201b17;
	--cp-text: #f3ead9;
	--cp-text-muted: #b7a98d;
	--cp-border: rgba(201, 162, 39, 0.35);

	font-family: 'Cairo', sans-serif;
	direction: rtl;
	max-width: 640px;
	margin: 0 auto;
	padding: 16px;
	color: var(--cp-text);
	box-sizing: border-box;
}

.cp-wrap * {
	box-sizing: border-box;
	font-family: 'Cairo', sans-serif;
}

/* ---------- Hero ---------- */
.cp-hero {
	text-align: center;
	padding: 24px 12px 8px;
}
.cp-hero h1 {
	font-size: 22px;
	font-weight: 800;
	color: var(--cp-secondary);
	margin: 0 0 10px;
}
.cp-hero p {
	font-size: 14px;
	color: var(--cp-text-muted);
	margin: 0;
	line-height: 1.7;
}

/* ---------- Card base ---------- */
.cp-card {
	background: linear-gradient(180deg, var(--cp-card-bg) 0%, #16130f 100%);
	border: 1px solid var(--cp-border);
	border-radius: 14px;
	padding: 18px;
	margin-bottom: 16px;
	box-shadow: 0 4px 18px rgba(0, 0, 0, 0.35);
}

/* ---------- Lookup form ---------- */
.cp-lookup-form {
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.cp-lookup-form input[type="text"] {
	width: 100%;
	background: #0f0d0b;
	border: 1px solid var(--cp-border);
	border-radius: 10px;
	padding: 14px 16px;
	color: var(--cp-text);
	font-size: 15px;
	text-align: center;
}
.cp-lookup-form input[type="text"]::placeholder {
	color: var(--cp-text-muted);
}
.cp-lookup-form input[type="text"]:focus {
	outline: none;
	border-color: var(--cp-primary);
	box-shadow: 0 0 0 3px rgba(201, 162, 39, 0.15);
}

.cp-btn-gold {
	display: inline-block;
	width: 100%;
	text-align: center;
	background: linear-gradient(180deg, var(--cp-secondary) 0%, var(--cp-primary) 100%);
	color: #1a1408;
	font-weight: 700;
	font-size: 15px;
	border: none;
	border-radius: 10px;
	padding: 14px 18px;
	cursor: pointer;
	text-decoration: none;
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.cp-btn-gold:hover {
	transform: translateY(-1px);
	box-shadow: 0 6px 16px rgba(201, 162, 39, 0.35);
	color: #1a1408;
}

.cp-hint {
	text-align: center;
	font-size: 12px;
	color: var(--cp-text-muted);
	margin-top: 10px;
}

/* ---------- Loading / error ---------- */
.cp-loading {
	text-align: center;
	color: var(--cp-text-muted);
	padding: 20px;
}
.cp-error-box {
	background: rgba(180, 40, 40, 0.12);
	border: 1px solid rgba(220, 80, 80, 0.4);
	color: #f2b3b3;
	padding: 14px 16px;
	border-radius: 10px;
	text-align: center;
	font-size: 14px;
	margin-bottom: 16px;
}

/* ---------- Customer card ---------- */
.cp-customer-header {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	margin-bottom: 16px;
	border-bottom: 1px solid var(--cp-border);
	padding-bottom: 14px;
}
.cp-customer-header h2 {
	margin: 0 0 4px;
	font-size: 18px;
	color: var(--cp-secondary);
}
.cp-phone {
	direction: ltr;
	display: inline-block;
	color: var(--cp-text-muted);
	font-size: 13px;
}
.cp-status-badge {
	background: rgba(201, 162, 39, 0.15);
	border: 1px solid var(--cp-primary);
	color: var(--cp-secondary);
	font-size: 12px;
	font-weight: 700;
	padding: 6px 12px;
	border-radius: 20px;
	white-space: nowrap;
}

.cp-fields-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 10px;
}
.cp-field-box {
	background: var(--cp-card-bg-alt);
	border: 1px solid rgba(201, 162, 39, 0.18);
	border-radius: 10px;
	padding: 12px 14px;
}
.cp-field-label {
	display: block;
	font-size: 12px;
	color: var(--cp-text-muted);
	margin-bottom: 4px;
}
.cp-field-value {
	font-size: 14.5px;
	font-weight: 600;
	color: var(--cp-text);
}

.cp-last-update-box {
	margin-top: 14px;
	background: var(--cp-card-bg-alt);
	border: 1px dashed var(--cp-border);
	border-radius: 10px;
	padding: 14px;
}
.cp-last-update-box p {
	margin: 6px 0 4px;
	font-size: 14.5px;
	line-height: 1.7;
}
.cp-timestamp {
	font-size: 11px;
	color: var(--cp-text-muted);
}

/* ---------- Financial ---------- */
.cp-financial-card h3,
.cp-history-card-front h3 {
	margin: 0 0 14px;
	font-size: 16px;
	color: var(--cp-secondary);
	text-align: center;
}
.cp-fin-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 10px;
}
.cp-fin-box {
	background: var(--cp-card-bg-alt);
	border: 1px solid rgba(201, 162, 39, 0.18);
	border-radius: 10px;
	padding: 14px;
	text-align: center;
}
.cp-fin-label {
	display: block;
	font-size: 12px;
	color: var(--cp-text-muted);
	margin-bottom: 6px;
}
.cp-fin-value {
	font-size: 20px;
	font-weight: 800;
	color: var(--cp-secondary);
}
.cp-fin-sub {
	display: block;
	font-size: 11px;
	color: var(--cp-text-muted);
	margin-top: 4px;
}

/* ---------- History timeline ---------- */
.cp-history-timeline {
	list-style: none;
	margin: 0;
	padding: 0;
	border-right: 2px solid var(--cp-border);
	padding-right: 16px;
}
.cp-history-timeline li {
	position: relative;
	margin-bottom: 16px;
	padding-bottom: 4px;
}
.cp-history-timeline li::before {
	content: '';
	position: absolute;
	right: -21px;
	top: 4px;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--cp-primary);
}
.cp-history-date {
	display: block;
	font-size: 12px;
	color: var(--cp-secondary);
	font-weight: 700;
	margin-bottom: 3px;
}
.cp-history-note {
	font-size: 14px;
	line-height: 1.6;
	color: var(--cp-text);
}

/* ---------- Registration form ---------- */
.cp-form-title {
	text-align: center;
	color: var(--cp-secondary);
	font-size: 18px;
	margin: 0 0 18px;
}
.cp-front-form {
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.cp-front-form label {
	display: flex;
	flex-direction: column;
	gap: 6px;
	font-size: 13px;
	color: var(--cp-text-muted);
}
.cp-front-form input {
	background: #0f0d0b;
	border: 1px solid var(--cp-border);
	border-radius: 10px;
	padding: 12px 14px;
	color: var(--cp-text);
	font-size: 14.5px;
}
.cp-front-form input:focus {
	outline: none;
	border-color: var(--cp-primary);
}

.cp-reg-result {
	text-align: center;
	padding-top: 10px;
}
.cp-success-icon {
	font-size: 34px;
	color: var(--cp-secondary);
	margin: 0 0 6px;
}
.cp-generated-code {
	font-size: 28px;
	font-weight: 800;
	color: var(--cp-secondary);
	letter-spacing: 1px;
	margin: 10px 0;
}

/* ---------- Responsive (Desktop) ---------- */
@media (min-width: 640px) {
	.cp-wrap {
		padding: 32px 16px;
	}
	.cp-fields-grid,
	.cp-fin-grid {
		grid-template-columns: 1fr 1fr;
	}
}