/* ==========================================================================
   Cosmics Car Listing – Public Styles
   Design tokens and base component styles.
   Full component styles added phase-by-phase (Phase 2 → Phase 9).
   ========================================================================== */

/* ── Design Tokens ──────────────────────────────────────────────────────── */
:root {
	--ccl-primary:     #E03040;
	--ccl-secondary1:  #E8408A;
	--ccl-secondary2:  #FF6070;
	--ccl-secondary3:  #CC2A3A;
	--ccl-dark1:       #2B1B4E;
	--ccl-dark2:       #3D2870;
	--ccl-gradient:    #EF1D26;

	--ccl-white:       #FFFFFF;
	--ccl-light-gray:  #F5F5F7;
	--ccl-mid-gray:    #9CA3AF;
	--ccl-dark-text:   #1A1A2E;
	--ccl-success:     #22C55E;
	--ccl-warning:     #F59E0B;
	--ccl-error:       #EF4444;

	--ccl-font-base:   'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	--ccl-font-size:   16px;
	--ccl-line-height: 1.6;

	--ccl-space-xs:    4px;
	--ccl-space-sm:    8px;
	--ccl-space-md:    16px;
	--ccl-space-lg:    24px;
	--ccl-space-xl:    40px;
	--ccl-space-2xl:   64px;

	--ccl-radius-sm:   6px;
	--ccl-radius-md:   12px;
	--ccl-radius-lg:   20px;
	--ccl-radius-xl:   28px;
	--ccl-radius-pill: 100px;

	--ccl-text-xs:   12px;
	--ccl-text-sm:   14px;
	--ccl-text-base: 16px;
	--ccl-text-lg:   18px;
	--ccl-text-xl:   22px;
	--ccl-text-2xl:  28px;
	--ccl-text-3xl:  36px;
	--ccl-text-4xl:  48px;

	--ccl-shadow-sm:   0 1px 3px rgba(0,0,0,0.08);
	--ccl-shadow-md:   0 4px 16px rgba(0,0,0,0.12);
	--ccl-shadow-lg:   0 12px 40px rgba(0,0,0,0.16);
}

/* ── Base Reset (scoped to plugin elements) ─────────────────────────────── */
.ccl-wrap *,
.ccl-wrap *::before,
.ccl-wrap *::after {
	box-sizing: border-box;
}

.ccl-wrap {
	font-family: var(--ccl-font-base);
	font-size: var(--ccl-font-size);
	line-height: var(--ccl-line-height);
	color: var(--ccl-dark-text);
}

/* ── Buttons ────────────────────────────────────────────────────────────── */
.ccl-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 12px 28px;
	border-radius: var(--ccl-radius-pill);
	font-family: var(--ccl-font-base);
	font-weight: 600;
	font-size: 15px;
	cursor: pointer;
	transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
	border: none;
	text-decoration: none;
	line-height: 1;
}

.ccl-btn--primary {
	background: var(--ccl-gradient);
	color: var(--ccl-white);
	box-shadow: 0 4px 14px rgba(237, 39, 117, 0.35);
}

.ccl-btn--primary:hover,
.ccl-btn--primary:focus {
	transform: translateY(-2px);
	box-shadow: 0 6px 20px rgba(237, 39, 117, 0.50);
	color: var(--ccl-white);
	text-decoration: none;
}

.ccl-btn--outline {
	background: transparent;
	border: 2px solid var(--ccl-primary);
	color: var(--ccl-primary);
}

.ccl-btn--outline:hover {
	background: var(--ccl-primary);
	color: var(--ccl-white);
}

.ccl-btn--danger {
	background: var(--ccl-error);
	color: var(--ccl-white);
}

.ccl-btn--sm {
	padding: 8px 18px;
	font-size: 13px;
}

.ccl-btn:disabled,
.ccl-btn[disabled] {
	opacity: 0.6;
	cursor: not-allowed;
	transform: none !important;
	box-shadow: none !important;
}

/* ── Cards ──────────────────────────────────────────────────────────────── */
.ccl-card {
	background: var(--ccl-white);
	border-radius: var(--ccl-radius-md);
	box-shadow: var(--ccl-shadow-md);
	padding: var(--ccl-space-lg);
	transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.ccl-card:hover {
	box-shadow: var(--ccl-shadow-lg);
	transform: translateY(-2px);
}

/* ── Status Badges ──────────────────────────────────────────────────────── */
.ccl-badge {
	display: inline-block;
	padding: 4px 12px;
	border-radius: var(--ccl-radius-pill);
	font-size: 13px;
	font-weight: 600;
}

.ccl-badge--pending  { background: #FEF3C7; color: #92400E; }
.ccl-badge--approved { background: #D1FAE5; color: #065F46; }
.ccl-badge--rejected { background: #FEE2E2; color: #991B1B; }

/* ── Form Elements ──────────────────────────────────────────────────────── */
.ccl-form__field {
	margin-bottom: var(--ccl-space-md);
}

.ccl-form__label {
	display: block;
	font-weight: 600;
	margin-bottom: 6px;
	color: var(--ccl-dark1);
	font-size: 14px;
}

.ccl-form__label .ccl-required {
	color: var(--ccl-error);
	margin-left: 2px;
}

.ccl-form__input,
.ccl-form__textarea,
.ccl-form__select {
	width: 100%;
	padding: 12px 16px;
	border: 2px solid #E5E7EB;
	border-radius: var(--ccl-radius-sm);
	font-family: var(--ccl-font-base);
	font-size: 15px;
	color: var(--ccl-dark-text);
	background: var(--ccl-white);
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
	outline: none;
}

.ccl-form__input:focus,
.ccl-form__textarea:focus,
.ccl-form__select:focus {
	border-color: var(--ccl-primary);
	box-shadow: 0 0 0 3px rgba(224, 48, 64, 0.12);
}

.ccl-form__textarea {
	resize: vertical;
	min-height: 120px;
}

.ccl-form__optional {
	font-size: 12px;
	font-weight: 400;
	color: #9CA3AF;
	margin-left: 4px;
}

.ccl-form__help {
	display: block;
	font-size: 12px;
	color: #6B7280;
	margin-top: 4px;
}

.ccl-form__error {
	color: var(--ccl-error);
	font-size: 13px;
	margin-top: 4px;
	display: block;
}

.ccl-form__hint {
	color: var(--ccl-mid-gray);
	font-size: 13px;
	margin-top: 4px;
	display: block;
}

/* ── Alerts ─────────────────────────────────────────────────────────────── */
.ccl-alert {
	padding: 14px 18px;
	border-radius: var(--ccl-radius-sm);
	margin-bottom: var(--ccl-space-md);
	font-size: 14px;
	border-left: 4px solid currentColor;
}

.ccl-alert--success { background: #F0FDF4; color: #15803D; }
.ccl-alert--error   { background: #FEF2F2; color: #991B1B; }
.ccl-alert--info    { background: #EFF6FF; color: #1D4ED8; }
.ccl-alert--warning { background: #FFFBEB; color: #92400E; }

/* ── Grid ───────────────────────────────────────────────────────────────── */
.ccl-grid {
	display: grid;
	gap: var(--ccl-space-lg);
	grid-template-columns: 1fr;
}

@media (min-width: 768px) {
	.ccl-grid--2 { grid-template-columns: repeat(2, 1fr); }
	.ccl-grid--3 { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 1024px) {
	.ccl-grid--4 { grid-template-columns: repeat(4, 1fr); }
}

/* ── Utility ────────────────────────────────────────────────────────────── */
.ccl-text-center { text-align: center; }
.ccl-mt-md  { margin-top: var(--ccl-space-md); }
.ccl-mt-lg  { margin-top: var(--ccl-space-lg); }
.ccl-mb-md  { margin-bottom: var(--ccl-space-md); }

.ccl-spinner {
	display: inline-block;
	width: 16px;
	height: 16px;
	border: 2px solid rgba(255,255,255,0.4);
	border-top-color: #fff;
	border-radius: 50%;
	animation: ccl-spin 0.7s linear infinite;
}

@keyframes ccl-spin {
	to { transform: rotate(360deg); }
}

.ccl-empty-state {
	text-align: center;
	padding: var(--ccl-space-xl);
	color: var(--ccl-mid-gray);
}

.ccl-empty-state__icon {
	font-size: 48px;
	margin-bottom: var(--ccl-space-md);
	opacity: 0.4;
}

/* ==========================================================================
   Phase 2 – Authentication Styles
   ========================================================================== */

/* ── Auth Page Wrapper ──────────────────────────────────────────────────── */
.ccl-auth-wrapper {
/*	min-height: 100vh; */
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--ccl-space-xl) var(--ccl-space-md);
	background: #ffffff00;
}

/* ── Auth Card ──────────────────────────────────────────────────────────── */
.ccl-auth-card {
	width: 100%;
	max-width: 460px;
	background: var(--ccl-white);
	border-radius: var(--ccl-radius-lg);
	box-shadow: var(--ccl-shadow-lg);
	overflow: hidden;
}

/* ── Auth Header (gradient strip) ──────────────────────────────────────── */
.ccl-auth-header {
	background: var(--ccl-gradient);
	padding: 32px 40px;
	text-align: center;
	color: var(--ccl-white);
}

.ccl-auth-header__icon {
	font-size: 36px;
	margin-bottom: 8px;
}

.ccl-auth-header__title {
	margin: 0 0 6px;
	font-size: var(--ccl-text-xl);
	font-weight: 700;
	color: var(--ccl-white);
	letter-spacing: -0.3px;
}

.ccl-auth-header__subtitle {
	margin: 0;
	font-size: var(--ccl-text-sm);
	color: rgba(255, 255, 255, 0.85);
}

/* ── Auth Body ──────────────────────────────────────────────────────────── */
.ccl-auth-body {
	padding: 32px 40px;
}

.ccl-auth-form {
	margin-bottom: 0;
}

/* ── Auth Footer (links below form) ────────────────────────────────────── */
.ccl-auth-footer {
	margin-top: 20px;
	padding-top: 20px;
	border-top: 1px solid #E5E7EB;
	text-align: center;
	font-size: 14px;
	color: var(--ccl-mid-gray);
}

.ccl-auth-footer a {
	color: var(--ccl-primary);
	font-weight: 600;
	text-decoration: none;
}

.ccl-auth-footer a:hover {
	text-decoration: underline;
}

/* ── Full-width button modifier ─────────────────────────────────────────── */
.ccl-btn--full {
	width: 100%;
	justify-content: center;
	margin-top: 8px;
}

/* ── Password input with toggle ─────────────────────────────────────────── */
.ccl-input-group {
	position: relative;
	display: flex;
	align-items: center;
}

.ccl-input-group .ccl-form__input {
	padding-right: 44px;
}

.ccl-toggle-password {
	position: absolute;
	right: 12px;
	background: none;
	border: none;
	cursor: pointer;
	color: var(--ccl-mid-gray);
	padding: 4px;
	display: flex;
	align-items: center;
	transition: color 0.2s;
}

.ccl-toggle-password:hover {
	color: var(--ccl-primary);
}

.ccl-eye-icon {
	display: block;
}

/* ── Password strength indicator ───────────────────────────────────────── */
.ccl-password-strength {
	margin-top: 8px;
	display: flex;
	align-items: center;
	gap: 10px;
}

.ccl-password-strength__bar {
	flex: 1;
	height: 4px;
	background: #E5E7EB;
	border-radius: 4px;
	overflow: hidden;
}

.ccl-password-strength__fill {
	height: 100%;
	width: 0;
	border-radius: 4px;
	transition: width 0.3s ease, background 0.3s ease;
}

.ccl-strength--weak   .ccl-password-strength__fill { width: 25%; background: var(--ccl-error);   }
.ccl-strength--fair   .ccl-password-strength__fill { width: 50%; background: var(--ccl-warning);  }
.ccl-strength--good   .ccl-password-strength__fill { width: 75%; background: #3B82F6;             }
.ccl-strength--strong .ccl-password-strength__fill { width: 100%; background: var(--ccl-success); }

.ccl-password-strength__label {
	font-size: 12px;
	font-weight: 600;
	min-width: 44px;
	color: var(--ccl-mid-gray);
}

/* ── Remember me / forgot password row ─────────────────────────────────── */
.ccl-form__field--row {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.ccl-checkbox-label {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	cursor: pointer;
	color: var(--ccl-dark-text);
}

.ccl-checkbox {
	width: 16px;
	height: 16px;
	accent-color: var(--ccl-primary);
	cursor: pointer;
}

.ccl-forgot-link {
	font-size: 14px;
	color: var(--ccl-primary);
	text-decoration: none;
	font-weight: 600;
}

.ccl-forgot-link:hover {
	text-decoration: underline;
}

/* ── Form field required / optional labels ──────────────────────────────── */
.ccl-required {
	color: var(--ccl-error);
	margin-left: 3px;
}

.ccl-optional {
	color: var(--ccl-mid-gray);
	font-weight: 400;
	font-size: 12px;
	margin-left: 4px;
}

/* ── Responsive auth card ───────────────────────────────────────────────── */
@media (max-width: 520px) {
	.ccl-auth-header { padding: 24px 24px; }
	.ccl-auth-body   { padding: 24px 24px; }
	.ccl-auth-card   { border-radius: var(--ccl-radius-md); }
}

/* ==========================================================================
   Phase 3 – Seller Dashboard & Listing Form
   ========================================================================== */

/* ── Dashboard layout ───────────────────────────────────────────────────── */
.ccl-dashboard {
	display: grid;
	grid-template-columns: 260px 1fr;
	min-height: 80vh;
	gap: 0;
	background: var(--ccl-light-gray);
}

.ccl-dashboard__sidebar {
	background: var(--ccl-white);
	border-right: 1px solid #E5E7EB;
	padding: 24px 0;
	display: flex;
	flex-direction: column;
}

.ccl-dashboard__seller-info {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 0 20px 20px;
	border-bottom: 1px solid #E5E7EB;
}

.ccl-dashboard__avatar-img {
	border-radius: 50%;
	width: 48px;
	height: 48px;
}

.ccl-dashboard__seller-name {
	font-weight: 700;
	font-size: 14px;
	color: var(--ccl-dark-text);
	margin: 0 0 2px;
}

.ccl-dashboard__seller-email {
	font-size: 12px;
	color: var(--ccl-mid-gray);
	margin: 0;
}

.ccl-dashboard__nav {
	flex: 1;
	padding: 12px 0;
}

.ccl-dashboard__nav-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.ccl-dashboard__nav-item {
	margin: 0;
}

.ccl-dashboard__nav-link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 11px 20px;
	font-size: 14px;
	font-weight: 500;
	color: var(--ccl-dark-text);
	text-decoration: none;
	border-left: 3px solid transparent;
	transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.ccl-dashboard__nav-link:hover {
	background: var(--ccl-light-gray);
	color: var(--ccl-primary);
}

.ccl-dashboard__nav-link--active {
	background: #FFF0F2;
	color: var(--ccl-primary);
	border-left-color: var(--ccl-primary);
	font-weight: 600;
}

.ccl-nav-badge {
	font-size: 10px;
	padding: 2px 6px;
}

.ccl-dashboard__sidebar-actions {
	padding: 16px 20px;
	border-top: 1px solid #E5E7EB;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.ccl-dashboard__main {
	padding: 28px 32px;
	overflow-y: auto;
}

/* ── Dashboard section wrapper ──────────────────────────────────────────── */
.ccl-dashboard-section {
	max-width: 900px;
}

.ccl-dashboard-section__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 20px;
}

.ccl-dashboard-section__title {
	font-size: 22px;
	font-weight: 700;
	color: var(--ccl-dark-text);
	margin: 0 0 20px;
}

.ccl-dashboard-section__header .ccl-dashboard-section__title {
	margin-bottom: 0;
}

/* ── Stats grid ─────────────────────────────────────────────────────────── */
.ccl-stats-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
	gap: 16px;
	margin-bottom: 28px;
}

.ccl-stat-card {
	background: var(--ccl-white);
	border-radius: var(--ccl-radius-lg);
	padding: 20px;
	border-left: 4px solid var(--ccl-mid-gray);
	box-shadow: var(--ccl-shadow-sm);
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.ccl-stat-card--pending { border-left-color: var(--ccl-warning); }
.ccl-stat-card--success { border-left-color: var(--ccl-success); }
.ccl-stat-card--danger  { border-left-color: var(--ccl-error); }
.ccl-stat-card--info    { border-left-color: #3B82F6; }

.ccl-stat-card__value {
	font-size: 28px;
	font-weight: 800;
	color: var(--ccl-dark-text);
	line-height: 1;
}

.ccl-stat-card__label {
	font-size: 12px;
	font-weight: 500;
	color: var(--ccl-mid-gray);
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

/* ── Overview CTA & recent ──────────────────────────────────────────────── */
.ccl-dashboard-cta {
	margin-bottom: 28px;
}

.ccl-dashboard-recent__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 12px;
}

.ccl-dashboard-recent__title {
	font-size: 16px;
	font-weight: 700;
	color: var(--ccl-dark-text);
	margin: 0;
}

/* ── Table ──────────────────────────────────────────────────────────────── */
.ccl-table-wrap {
	overflow-x: auto;
	border-radius: var(--ccl-radius-md);
	box-shadow: var(--ccl-shadow-sm);
}

.ccl-table {
	width: 100%;
	border-collapse: collapse;
	background: var(--ccl-white);
	font-size: 14px;
}

.ccl-table th,
.ccl-table td {
	padding: 12px 16px;
	text-align: left;
	border-bottom: 1px solid #F0F0F5;
}

.ccl-table th {
	background: #FAFAFA;
	font-weight: 600;
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--ccl-mid-gray);
}

.ccl-table tbody tr:hover {
	background: #FAFBFF;
}

.ccl-table tbody tr:last-child td {
	border-bottom: none;
}

.ccl-table__actions {
	white-space: nowrap;
	display: flex;
	gap: 6px;
	align-items: center;
}

/* ── Badges ─────────────────────────────────────────────────────────────── */
.ccl-badge {
	display: inline-block;
	padding: 3px 10px;
	border-radius: 999px;
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.ccl-badge--primary   { background: #FFF0F2; color: var(--ccl-primary); }
.ccl-badge--success   { background: #DCFCE7; color: #16A34A; }
.ccl-badge--warning   { background: #FEF9C3; color: #92400E; }
.ccl-badge--danger    { background: #FEE2E2; color: #DC2626; }
.ccl-badge--info      { background: #DBEAFE; color: #1D4ED8; }
.ccl-badge--secondary { background: #F3F4F6; color: #6B7280; }
.ccl-badge--sold      { background: #6B7280; color: #fff; }

/* ── Pagination ─────────────────────────────────────────────────────────── */
.ccl-pagination {
	display: flex;
	gap: 6px;
	margin-top: 20px;
	flex-wrap: wrap;
}

.ccl-pagination__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: var(--ccl-radius-sm);
	border: 1px solid #E5E7EB;
	background: var(--ccl-white);
	color: var(--ccl-dark-text);
	font-size: 13px;
	font-weight: 500;
	text-decoration: none;
	transition: background 0.15s, border-color 0.15s;
}

.ccl-pagination__btn:hover {
	background: var(--ccl-light-gray);
	border-color: var(--ccl-primary);
}

.ccl-pagination__btn--active {
	background: var(--ccl-gradient);
	color: var(--ccl-white);
	border-color: transparent;
}

/* ── Empty state ────────────────────────────────────────────────────────── */
.ccl-empty-state {
	background: var(--ccl-white);
	border-radius: var(--ccl-radius-lg);
	padding: 48px 24px;
	text-align: center;
	box-shadow: var(--ccl-shadow-sm);
}

.ccl-empty-state p {
	color: var(--ccl-mid-gray);
	font-size: 15px;
	margin-bottom: 20px;
}

/* ── Notification list ──────────────────────────────────────────────────── */
.ccl-notification-list {
	list-style: none;
	margin: 0;
	padding: 0;
	background: var(--ccl-white);
	border-radius: var(--ccl-radius-lg);
	overflow: hidden;
	box-shadow: var(--ccl-shadow-sm);
}

.ccl-notification-item {
	display: grid;
	grid-template-columns: 28px 1fr auto;
	align-items: start;
	gap: 10px;
	padding: 14px 20px;
	border-bottom: 1px solid #F0F0F5;
	transition: background 0.1s;
}

.ccl-notification-item:last-child {
	border-bottom: none;
}

.ccl-notification-item--unread {
	background: #FAFBFF;
}

.ccl-notification-item__icon {
	font-size: 16px;
	margin-top: 2px;
}

.ccl-notification-item__message {
	font-size: 14px;
	color: var(--ccl-dark-text);
	line-height: 1.5;
}

.ccl-notification-item__time {
	font-size: 11px;
	color: var(--ccl-mid-gray);
	white-space: nowrap;
	margin-top: 3px;
}

/* ── Profile card ───────────────────────────────────────────────────────── */
.ccl-profile-card {
	background: var(--ccl-white);
	border-radius: var(--ccl-radius-lg);
	padding: 28px;
	box-shadow: var(--ccl-shadow-sm);
	display: flex;
	gap: 24px;
	align-items: flex-start;
}

.ccl-profile-card__avatar-img {
	border-radius: 50%;
	width: 80px;
	height: 80px;
	flex-shrink: 0;
}

.ccl-profile-card__dl {
	display: grid;
	grid-template-columns: 140px 1fr;
	gap: 10px 16px;
	margin: 0 0 16px;
}

.ccl-profile-card__dl dt {
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--ccl-mid-gray);
	padding-top: 3px;
}

.ccl-profile-card__dl dd {
	font-size: 15px;
	color: var(--ccl-dark-text);
	margin: 0;
}

.ccl-profile-card__note {
	font-size: 12px;
	color: var(--ccl-mid-gray);
	margin: 0;
}

/* ── Sell car form ──────────────────────────────────────────────────────── */
.ccl-sell-car-wrapper {
	align-items: flex-start;
	padding-top: 40px;
}

.ccl-sell-car-card {
	width: 100%;
	max-width: 620px;
	margin: 0 auto;
	background: var(--ccl-white);
	border-radius: var(--ccl-radius-xl);
	overflow: hidden;
	box-shadow: var(--ccl-shadow-lg);
}

.ccl-sell-car-card__body {
	padding: 32px;
}

/* ── Price input with prefix ────────────────────────────────────────────── */
.ccl-input-prefix-wrap {
	display: flex;
	align-items: center;
	border: 1px solid #D1D5DB;
	border-radius: var(--ccl-radius-sm);
	overflow: hidden;
	transition: border-color 0.15s;
}

.ccl-input-prefix-wrap:focus-within {
	border-color: var(--ccl-primary);
	box-shadow: 0 0 0 3px rgba(224, 48, 64, 0.12);
}

.ccl-input-prefix {
	padding: 0 12px;
	background: var(--ccl-light-gray);
	color: var(--ccl-mid-gray);
	font-weight: 600;
	border-right: 1px solid #D1D5DB;
	height: 44px;
	display: flex;
	align-items: center;
}

.ccl-input--prefixed {
	border: none;
	box-shadow: none;
	border-radius: 0;
	flex: 1;
}

.ccl-input--prefixed:focus {
	box-shadow: none;
	border: none;
	outline: none;
}

/* ── Upload zone ────────────────────────────────────────────────────────── */
.ccl-upload-zone {
	border: 2px dashed #D1D5DB;
	border-radius: var(--ccl-radius-md);
	padding: 32px 20px;
	text-align: center;
	cursor: pointer;
	position: relative;
	transition: border-color 0.2s, background 0.2s;
}

.ccl-upload-zone:hover,
.ccl-upload-zone:focus,
.ccl-upload-zone--active {
	border-color: var(--ccl-primary);
	background: #FFF0F2;
}

.ccl-upload-zone__input {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	opacity: 0;
	cursor: pointer;
}

.ccl-upload-zone__icon {
	font-size: 36px;
	margin-bottom: 8px;
}

.ccl-upload-zone__text {
	font-size: 15px;
	font-weight: 600;
	color: var(--ccl-dark-text);
	margin: 0 0 4px;
}

.ccl-upload-zone__hint {
	font-size: 12px;
	color: var(--ccl-mid-gray);
	margin: 0;
}

/* ── Upload progress bar ────────────────────────────────────────────────── */
.ccl-upload-progress {
	margin-top: 12px;
	display: flex;
	align-items: center;
	gap: 10px;
}

.ccl-upload-progress__bar {
	flex: 1;
	height: 6px;
	background: #E5E7EB;
	border-radius: 999px;
	overflow: hidden;
}

.ccl-upload-progress__fill {
	height: 100%;
	background: var(--ccl-gradient);
	border-radius: 999px;
	transition: width 0.2s ease;
}

.ccl-upload-progress__label {
	font-size: 12px;
	font-weight: 600;
	color: var(--ccl-mid-gray);
	min-width: 36px;
}

/* ── Video preview ──────────────────────────────────────────────────────── */
.ccl-video-preview {
	margin-top: 12px;
	border-radius: var(--ccl-radius-md);
	overflow: hidden;
	position: relative;
}

.ccl-video-preview__player {
	width: 100%;
	max-height: 240px;
	display: block;
	background: #000;
}

.ccl-video-preview__remove {
	position: absolute;
	top: 8px;
	right: 8px;
	background: rgba(0, 0, 0, 0.7);
	color: #fff;
	border: none;
	border-radius: var(--ccl-radius-sm);
	padding: 4px 10px;
	font-size: 12px;
	cursor: pointer;
	transition: background 0.15s;
}

.ccl-video-preview__remove:hover {
	background: rgba(224, 48, 64, 0.9);
}

/* ── Modal ──────────────────────────────────────────────────────────────── */
.ccl-modal {
	position: fixed;
	inset: 0;
	z-index: 10000;
	display: flex;
	align-items: center;
	justify-content: center;
}

.ccl-modal__overlay {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.55);
}

.ccl-modal__box {
	position: relative;
	background: var(--ccl-white);
	border-radius: var(--ccl-radius-xl);
	width: 100%;
	max-width: 520px;
	max-height: 90vh;
	overflow-y: auto;
	box-shadow: var(--ccl-shadow-lg);
	padding: 28px;
}

.ccl-modal__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 20px;
}

.ccl-modal__title {
	font-size: 20px;
	font-weight: 700;
	color: var(--ccl-dark-text);
	margin: 0;
}

.ccl-modal__close {
	background: none;
	border: none;
	cursor: pointer;
	font-size: 22px;
	color: var(--ccl-mid-gray);
	line-height: 1;
	padding: 0 4px;
	transition: color 0.15s;
}

.ccl-modal__close:hover {
	color: var(--ccl-primary);
}

.ccl-modal__footer {
	display: flex;
	gap: 10px;
	margin-top: 24px;
}

/* ── Textarea ───────────────────────────────────────────────────────────── */
.ccl-textarea {
	resize: vertical;
	min-height: 100px;
}

/* ── Link style ─────────────────────────────────────────────────────────── */
.ccl-link {
	color: var(--ccl-primary);
	text-decoration: none;
	font-size: 13px;
	font-weight: 500;
}

.ccl-link:hover {
	text-decoration: underline;
}

/* ── Additional button sizes ────────────────────────────────────────────── */
.ccl-btn--sm {
	padding: 8px 16px;
	font-size: 13px;
}

.ccl-btn--xs {
	padding: 5px 12px;
	font-size: 12px;
}

.ccl-btn--block {
	display: block;
	width: 100%;
	text-align: center;
	background: var(--ccl-gradient);
    color: #fff;
}

.ccl-btn--gradient{
    background: var(--ccl-gradient);
    color: var(--ccl-white);
    box-shadow: 0 4px 14px rgba(237, 39, 117, 0.35);
}

.ccl-btn--danger {
	background: var(--ccl-error);
	color: var(--ccl-white);
	border: 1px solid var(--ccl-error);
}

.ccl-btn--danger:hover {
	background: #DC2626;
	border-color: #DC2626;
}

/* ── Form actions spacing ───────────────────────────────────────────────── */
.ccl-form__actions {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-top: 8px;
}

/* ── Dashboard responsive ───────────────────────────────────────────────── */
@media (max-width: 768px) {
	.ccl-dashboard {
		grid-template-columns: 1fr;
	}

	.ccl-dashboard__sidebar {
		border-right: none;
		border-bottom: 1px solid #E5E7EB;
	}

	.ccl-dashboard__sidebar-actions {
		flex-direction: row;
	}

	.ccl-dashboard__main {
		padding: 20px 16px;
	}

	.ccl-stats-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.ccl-profile-card {
		flex-direction: column;
	}

	.ccl-modal__box {
		margin: 16px;
		max-width: 100%;
	}
}

/* ==========================================================================
   Phase 4 – Payment Result Pages
   ========================================================================== */

.ccl-payment-result-card {
	width: 100%;
	max-width: 480px;
	margin: 0 auto;
	background: var(--ccl-white);
	border-radius: var(--ccl-radius-xl);
	padding: 48px 40px;
	text-align: center;
	box-shadow: var(--ccl-shadow-lg);
}

.ccl-payment-result-card__icon {
	width: 72px;
	height: 72px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto 24px;
}

.ccl-payment-result-card__icon--success {
	background: #DCFCE7;
	color: #16A34A;
}

.ccl-payment-result-card__icon--cancel {
	background: #FEF9C3;
	color: #92400E;
}

.ccl-payment-result-card__icon svg {
	width: 40px;
	height: 40px;
}

.ccl-payment-result-card__title {
	font-size: 26px;
	font-weight: 800;
	color: var(--ccl-dark-text);
	margin: 0 0 12px;
}

.ccl-payment-result-card__message {
	font-size: 15px;
	color: var(--ccl-mid-gray);
	line-height: 1.6;
	margin: 0 0 28px;
}

.ccl-payment-result-card__ref {
	font-size: 12px;
	color: var(--ccl-mid-gray);
	margin: 0 0 24px;
}

.ccl-payment-result-card__ref code {
	display: block;
	margin-top: 4px;
	font-size: 11px;
	word-break: break-all;
	color: var(--ccl-dark-text);
}

.ccl-payment-result-card__actions {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

/* Admin filters */
.ccl-admin-filters {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 16px;
	flex-wrap: wrap;
}

.ccl-admin-filter-select {
	min-width: 160px;
}

.ccl-admin-filter-search {
	min-width: 260px;
}

.ccl-admin-sub {
	display: block;
	font-size: 11px;
	color: #9CA3AF;
	margin-top: 2px;
}

.ccl-admin-table-wrap {
	overflow-x: auto;
}

/* ==========================================================================
   Phase 6 – Advertisement Gallery & Make Your Car Famous Form
   ========================================================================== */

/* ── Gallery wrapper ────────────────────────────────────────────────────── */
.ccl-ads-gallery-wrap {
	padding: 32px 0;
}

/* ── Ads grid ───────────────────────────────────────────────────────────── */
.ccl-ads-gallery {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}

@media (max-width: 900px) {
	.ccl-ads-gallery {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 560px) {
	.ccl-ads-gallery {
		grid-template-columns: 1fr;
	}
}

/* ── Ad card ────────────────────────────────────────────────────────────── */
.ccl-ad-card {
	background: var(--ccl-white);
	border-radius: var(--ccl-radius-lg);
	overflow: hidden;
	box-shadow: var(--ccl-shadow-sm);
	transition: transform 0.2s, box-shadow 0.2s;
	cursor: default;
	display: flex;
	flex-direction: column;
}

.ccl-ad-card:hover {
	transform: translateY(-3px);
	box-shadow: var(--ccl-shadow-lg);
}

/* ── Video wrapper ──────────────────────────────────────────────────────── */
.ccl-ad-card__video-wrap {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	background: #000;
	overflow: hidden;
}

.ccl-ad-card__video-wrap--placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--ccl-light-gray);
}

.ccl-ad-card__video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* ── Play overlay (hidden on hover via JS) ──────────────────────────────── */
.ccl-ad-card__play-overlay {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(0, 0, 0, 0.25);
	transition: background 0.2s;
}

.ccl-ad-card:hover .ccl-ad-card__play-overlay {
	background: rgba(0, 0, 0, 0.1);
}

.ccl-ad-card__play-icon {
	font-size: 40px;
	color: #fff;
	filter: drop-shadow(0 2px 8px rgba(0,0,0,.5));
	transition: transform 0.2s;
}

.ccl-ad-card:hover .ccl-ad-card__play-icon {
	transform: scale(1.1);
}

/* ── Card body ──────────────────────────────────────────────────────────── */
.ccl-ad-card__body {
	padding: 14px 16px 16px;
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.ccl-ad-card__title {
	font-size: 14px;
	font-weight: 700;
	color: var(--ccl-dark-text);
	margin: 0;
	line-height: 1.4;
}

.ccl-ad-card__desc {
	font-size: 13px;
	color: var(--ccl-mid-gray);
	margin: 0;
	line-height: 1.5;
}

.ccl-ad-card__date {
	font-size: 11px;
	color: var(--ccl-mid-gray);
	margin-top: auto;
	padding-top: 6px;
}

/* ── Make Your Car Famous CTA card ─────────────────────────────────────── */
.ccl-make-famous-cta {
	background: var(--ccl-gradient);
	border-radius: var(--ccl-radius-lg);
	display: flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	min-height: 160px;
	transition: opacity 0.2s, transform 0.2s;
}

.ccl-make-famous-cta:hover {
	opacity: 0.92;
	transform: translateY(-3px);
}

.ccl-make-famous-cta__inner {
	text-align: center;
	padding: 24px;
}

.ccl-make-famous-cta__icon {
	font-size: 36px;
	display: block;
	margin-bottom: 8px;
}

.ccl-make-famous-cta__title {
	font-size: 18px;
	font-weight: 800;
	color: #fff;
	margin: 0 0 4px;
}

.ccl-make-famous-cta__sub {
	font-size: 13px;
	color: rgba(255, 255, 255, 0.85);
	margin: 0;
}

/* ── Make Your Car Famous submission page ───────────────────────────────── */
.ccl-make-famous-wrapper {
	max-width: 640px;
	margin: 0 auto;
	padding: 40px 16px;
}

.ccl-make-famous-header {
	text-align: center;
	margin-bottom: 28px;
}

.ccl-make-famous-header__title {
	font-size: 28px;
	font-weight: 800;
	color: var(--ccl-dark-text);
	margin: 0 0 8px;
}

.ccl-make-famous-header__sub {
	font-size: 15px;
	color: var(--ccl-mid-gray);
	margin: 0;
	line-height: 1.6;
}

.ccl-make-famous-card {
	background: var(--ccl-white);
	border-radius: var(--ccl-radius-xl);
	padding: 32px;
	box-shadow: var(--ccl-shadow-lg);
}

@media (max-width: 520px) {
	.ccl-make-famous-card {
		padding: 20px 16px;
	}
}

.ccl-form__hint {
	font-size: 12px;
	color: var(--ccl-mid-gray);
	margin: 0 0 8px;
	line-height: 1.5;
}

/* ── Phase 7: Buyer-Facing Listings ──────────────────────────────────────── */

/* Page wrapper */
.ccl-listings-page {
	max-width: 1200px;
	margin: 0 auto;
}

/* Page header */
.ccl-page-header {
	background: var(--ccl-gradient);
	border-radius: var(--ccl-radius-xl);
	padding: 48px 40px;
	margin-bottom: 32px;
	text-align: center;
	color: var(--ccl-white);
}

.ccl-page-header__title {
	font-size: clamp(1.75rem, 4vw, 2.5rem);
	font-weight: 700;
	margin: 0 0 8px;
	color: var(--ccl-white);
}

.ccl-page-header__sub {
	margin: 0;
	font-size: 1.05rem;
	opacity: 0.9;
}

/* Filter bar */
.ccl-filter-bar {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: center;
	margin-bottom: 20px;
}

.ccl-filter-bar__search {
	flex: 1 1 220px;
}

.ccl-filter-bar__prices {
	display: flex;
	align-items: center;
	gap: 8px;
	flex: 0 1 auto;
}

.ccl-filter-bar__separator {
	color: var(--ccl-mid-gray);
	font-weight: 600;
}

.ccl-filter-bar__input {
	width: 100%;
	padding: 10px 14px;
	border: 1.5px solid #D1D5DB;
	border-radius: var(--ccl-radius-md);
	font-size: 0.95rem;
	background: var(--ccl-white);
	color: var(--ccl-dark-text);
	transition: border-color 0.2s;
}

.ccl-filter-bar__input--price {
	width: 110px;
}

.ccl-filter-bar__input:focus {
	outline: none;
	border-color: var(--ccl-primary);
}

.ccl-filter-bar__select {
	padding: 10px 14px;
	border: 1.5px solid #D1D5DB;
	border-radius: var(--ccl-radius-md);
	font-size: 0.95rem;
	background: var(--ccl-white);
	color: var(--ccl-dark-text);
	cursor: pointer;
	transition: border-color 0.2s;
}

.ccl-filter-bar__select:focus {
	outline: none;
	border-color: var(--ccl-primary);
}

/* Results count */
.ccl-results-count {
	font-size: 0.9rem;
	color: var(--ccl-mid-gray);
	margin: 0 0 16px;
}

/* Listings grid */
.ccl-listings-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 28px;
	margin-bottom: 40px;
}

@media (max-width: 900px) {
	.ccl-listings-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 560px) {
	.ccl-listings-grid {
		grid-template-columns: 1fr;
	}
}

/* Listing card */
.ccl-listing-card {
	background: var(--ccl-white);
	border-radius: var(--ccl-radius-xl);
	box-shadow: var(--ccl-shadow-md);
	overflow: hidden;
	transition: transform 0.2s, box-shadow 0.2s;
	display: flex;
	flex-direction: column;
}

.ccl-listing-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--ccl-shadow-lg);
}

.ccl-listing-card__media {
	position: relative;
	aspect-ratio: 16 / 9;
	background: var(--ccl-dark1);
	overflow: hidden;
}

.ccl-listing-card__video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.ccl-listing-card__play-overlay {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(0, 0, 0, 0.35);
	color: var(--ccl-white);
	pointer-events: none;
}

.ccl-listing-card__play-overlay svg {
	width: 48px;
	height: 48px;
	filter: drop-shadow(0 2px 4px rgba(0,0,0,0.4));
}

.ccl-listing-card__no-video {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: rgba(255,255,255,0.3);
}

.ccl-listing-card__no-video svg {
	width: 56px;
	height: 56px;
}

.ccl-listing-card__body {
	padding: 20px;
	display: flex;
	flex-direction: column;
	flex: 1;
}

.ccl-listing-card__title {
	font-size: 1rem;
	font-weight: 600;
	margin: 0 0 8px;
	line-height: 1.4;
}

.ccl-listing-card__title a {
	color: var(--ccl-dark-text);
	text-decoration: none;
}

.ccl-listing-card__title a:hover {
	color: var(--ccl-primary);
}

.ccl-listing-card__price {
	font-size: 1.25rem;
	font-weight: 700;
	background: var(--ccl-gradient);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	margin: 0 0 6px;
}

.ccl-listing-card__meta {
	font-size: 0.82rem;
	color: var(--ccl-mid-gray);
	margin: 0 0 16px;
}

.ccl-listing-card__cta {
	margin-top: auto;
}

/* Pagination */
.ccl-pagination {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	justify-content: center;
	margin-top: 8px;
}

.ccl-pagination__page {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: var(--ccl-radius-md);
	border: 1.5px solid #D1D5DB;
	text-decoration: none;
	font-weight: 600;
	font-size: 0.9rem;
	color: var(--ccl-dark-text);
	transition: border-color 0.2s, background 0.2s, color 0.2s;
}

.ccl-pagination__page:hover {
	border-color: var(--ccl-primary);
	color: var(--ccl-primary);
}

.ccl-pagination__page--active {
	background: var(--ccl-gradient);
	border-color: transparent;
	color: var(--ccl-white);
}

.ccl-pagination__page--active:hover {
	color: var(--ccl-white);
}

/* Single listing */
.ccl-single-listing {
	max-width: 900px;
	margin: 0 auto;
	padding: 40px 20px;
}

.ccl-single-listing__back {
	margin-bottom: 24px;
}

.ccl-single-listing__back-link {
	font-size: 0.9rem;
	color: var(--ccl-mid-gray);
	text-decoration: none;
	font-weight: 500;
	transition: color 0.2s;
}

.ccl-single-listing__back-link:hover {
	color: var(--ccl-primary);
}

.ccl-single-listing__video-wrap {
	aspect-ratio: 16 / 9;
	border-radius: var(--ccl-radius-xl);
	overflow: hidden;
	background: var(--ccl-dark1);
	margin-bottom: 32px;
}

.ccl-single-listing__video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.ccl-single-listing__body {
	background: var(--ccl-white);
	border-radius: var(--ccl-radius-xl);
	box-shadow: var(--ccl-shadow-md);
	padding: 36px;
}

@media (max-width: 600px) {
	.ccl-single-listing__body {
		padding: 24px 20px;
	}
}

.ccl-single-listing__header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	margin-bottom: 24px;
	padding-bottom: 24px;
	border-bottom: 1px solid #EBEBEB;
}

.ccl-single-listing__title {
	font-size: clamp(1.3rem, 3vw, 1.75rem);
	font-weight: 700;
	margin: 0;
	color: var(--ccl-dark-text);
}

.ccl-single-listing__price {
	font-size: 1.6rem;
	font-weight: 700;
	background: var(--ccl-gradient);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	margin: 0;
	white-space: nowrap;
}

.ccl-single-listing__description {
	font-size: 1rem;
	line-height: 1.75;
	color: var(--ccl-dark-text);
	margin-bottom: 28px;
}

.ccl-single-listing__description p {
	margin-bottom: 1em;
}

.ccl-single-listing__meta {
	display: flex;
	gap: 32px;
	flex-wrap: wrap;
	margin-bottom: 32px;
	padding: 20px;
	background: var(--ccl-light-gray);
	border-radius: var(--ccl-radius-md);
}

.ccl-single-listing__meta > div {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.ccl-single-listing__meta-label {
	font-size: 0.78rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--ccl-mid-gray);
}

.ccl-single-listing__meta-value {
	font-size: 0.95rem;
	font-weight: 600;
	color: var(--ccl-dark-text);
}

.ccl-single-listing__actions {
	display: flex;
	gap: 12px;
}

.ccl-single-listing__actions .ccl-btn[disabled] {
	opacity: 0.5;
	cursor: not-allowed;
}

/* Contact box */
/* Payment method selector */
.ccl-payment-methods {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
}

.ccl-payment-method {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 12px 20px;
	border: 2px solid #E5E7EB;
	border-radius: var(--ccl-radius-sm, 8px);
	cursor: pointer;
	transition: border-color 0.2s, background 0.2s;
	font-weight: 500;
}

.ccl-payment-method:has(input:checked) {
	border-color: var(--ccl-primary, #E03040);
	background: #FFF5F5;
}

.ccl-payment-method input[type="radio"] {
	accent-color: var(--ccl-primary, #E03040);
}

.ccl-payment-method__label {
	display: flex;
	align-items: center;
	gap: 6px;
}

.ccl-payment-method__icon { font-size: 18px; }

/* Contact box */
.ccl-single-listing__contact {
	margin-top: 32px;
	padding: 20px 24px;
	background: #F9FAFB;
	border: 1px solid #E5E7EB;
	border-radius: var(--ccl-radius-md, 8px);
}

.ccl-single-listing__contact-title {
	font-size: 1rem;
	font-weight: 700;
	color: var(--ccl-dark-text, #2B1B4E);
	margin: 0 0 12px;
	text-transform: uppercase;
	letter-spacing: .04em;
}

.ccl-single-listing__contact-row {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 8px 0;
	border-bottom: 1px solid #E5E7EB;
}

.ccl-single-listing__contact-row:last-child {
	border-bottom: none;
}

.ccl-single-listing__contact-label {
	font-size: 0.8rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: #6B7280;
	width: 60px;
	flex-shrink: 0;
}

.ccl-single-listing__contact-link {
	color: var(--ccl-primary, #E03040);
	text-decoration: none;
	font-size: 0.95rem;
	font-weight: 500;
}

.ccl-single-listing__contact-link:hover {
	text-decoration: underline;
}

/* 404 state */
.ccl-single-listing--not-found .ccl-single-listing__404 {
	text-align: center;
	padding: 80px 20px;
}

.ccl-single-listing--not-found h2 {
	font-size: 1.75rem;
	font-weight: 700;
	color: var(--ccl-dark-text);
	margin-bottom: 12px;
}

.ccl-single-listing--not-found p {
	color: var(--ccl-mid-gray);
	margin-bottom: 28px;
}

/* ==========================================================================
   Phase 9 – UI/UX Polish
   ========================================================================== */

/* ── Toast notifications (proper CSS, replaces JS-injected styles) ───────── */
.ccl-toast {
	position: fixed;
	bottom: 24px;
	right: 24px;
	padding: 14px 20px;
	border-radius: var(--ccl-radius-md);
	box-shadow: var(--ccl-shadow-lg);
	z-index: 99999;
	font-family: var(--ccl-font-base);
	font-size: var(--ccl-text-sm);
	font-weight: 600;
	color: var(--ccl-white);
	max-width: 340px;
	animation: ccl-toast-in 0.3s ease;
}

@keyframes ccl-toast-in {
	from { transform: translateY(16px); opacity: 0; }
	to   { transform: translateY(0);    opacity: 1; }
}

.ccl-toast--success { background: var(--ccl-success); }
.ccl-toast--error   { background: var(--ccl-primary); }
.ccl-toast--info    { background: var(--ccl-dark1);   }

@media (max-width: 480px) {
	.ccl-toast {
		bottom: 12px;
		right: 12px;
		left: 12px;
		max-width: none;
	}
}

/* ── Skeleton loading cards ──────────────────────────────────────────────── */
@keyframes ccl-shimmer {
	0%   { background-position: 200% 0; }
	100% { background-position: -200% 0; }
}

.ccl-skeleton-card {
	background: var(--ccl-white);
	border-radius: var(--ccl-radius-xl);
	overflow: hidden;
	box-shadow: var(--ccl-shadow-md);
}

.ccl-skeleton {
	background: linear-gradient(90deg, #f0f0f0 25%, #e8e8e8 50%, #f0f0f0 75%);
	background-size: 200% 100%;
	animation: ccl-shimmer 1.4s infinite;
}

.ccl-skeleton-card__media {
	aspect-ratio: 16 / 9;
}

.ccl-skeleton-card__body {
	padding: 20px;
}

.ccl-skeleton-card__line {
	height: 14px;
	border-radius: 4px;
	margin-bottom: 10px;
}

.ccl-skeleton-card__line--title  { width: 75%; height: 18px; }
.ccl-skeleton-card__line--price  { width: 40%; height: 22px; }
.ccl-skeleton-card__line--meta   { width: 55%; height: 12px; }
.ccl-skeleton-card__line--btn    { width: 100%; height: 40px; border-radius: var(--ccl-radius-pill); margin-top: 16px; }

/* ── Dashboard sidebar gradient + active nav ─────────────────────────────── */
.ccl-dashboard__sidebar {
	background: linear-gradient(180deg, var(--ccl-dark1) 0%, var(--ccl-dark2) 100%) !important;
	border-right: none !important;
}

.ccl-dashboard__seller-name,
.ccl-dashboard__seller-email {
	color: rgba(255, 255, 255, 0.9) !important;
}

.ccl-dashboard__seller-info {
	border-bottom-color: rgba(255, 255, 255, 0.12) !important;
}

.ccl-dashboard__nav-link {
	color: rgba(255, 255, 255, 0.7) !important;
	border-left: 3px solid transparent;
	padding-left: 17px !important;
	transition: color 0.2s, background 0.2s, border-color 0.2s;
}

.ccl-dashboard__nav-link:hover {
	color: var(--ccl-white) !important;
	background: rgba(255, 255, 255, 0.08) !important;
}

.ccl-dashboard__nav-link--active {
	color: var(--ccl-white) !important;
	background: rgba(255, 255, 255, 0.12) !important;
	border-left-color: var(--ccl-secondary2) !important;
}

.ccl-nav-badge {
	background: var(--ccl-secondary1) !important;
	color: var(--ccl-white) !important;
}

/* (ghost button fully defined at end of file) */

/* ── Pending badge pulse animation ───────────────────────────────────────── */
@keyframes ccl-pulse {
	0%, 100% { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.4); }
	50%       { box-shadow: 0 0 0 6px rgba(245, 158, 11, 0);  }
}

.ccl-badge--pending {
	animation: ccl-pulse 2s infinite;
}

/* ── Sell car step indicator ─────────────────────────────────────────────── */
.ccl-steps {
	list-style: none;
	margin: 0 0 28px;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0;
	counter-reset: step;
}

.ccl-steps__step {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	flex: 1;
	position: relative;
}

.ccl-steps__step:not(:last-child)::after {
	content: '';
	position: absolute;
	top: 16px;
	left: 50%;
	width: 100%;
	height: 2px;
	background: #E5E7EB;
	z-index: 0;
}

.ccl-steps__num {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: var(--ccl-text-sm);
	font-weight: 700;
	background: #E5E7EB;
	color: var(--ccl-mid-gray);
	position: relative;
	z-index: 1;
	transition: background 0.3s, color 0.3s;
}

.ccl-steps__label {
	font-size: var(--ccl-text-xs);
	font-weight: 600;
	color: var(--ccl-mid-gray);
	transition: color 0.3s;
}

.ccl-steps__step--active .ccl-steps__num {
	background: var(--ccl-gradient);
	color: var(--ccl-white);
}

.ccl-steps__step--active .ccl-steps__label {
	color: var(--ccl-primary);
}

.ccl-steps__step--done .ccl-steps__num {
	background: var(--ccl-success);
	color: var(--ccl-white);
}

.ccl-steps__step--done::after {
	background: var(--ccl-success);
}

/* ── Upload zone drag-over animation ─────────────────────────────────────── */
@keyframes ccl-border-pulse {
	0%, 100% { border-color: var(--ccl-primary); }
	50%       { border-color: var(--ccl-secondary1); }
}

.ccl-upload-zone--drag-over {
	animation: ccl-border-pulse 0.8s ease infinite;
	background: rgba(224, 48, 64, 0.04) !important;
	transform: scale(1.01);
}

/* ── Progress bar gradient fill ──────────────────────────────────────────── */
.ccl-upload-progress__fill {
	background: var(--ccl-gradient) !important;
	transition: width 0.2s ease;
}

/* ── Mobile dashboard toggle button ──────────────────────────────────────── */
.ccl-dashboard__mobile-toggle {
	display: none;
	flex-direction: column;
	gap: 5px;
	padding: 12px 16px;
	background: var(--ccl-dark1);
	border: none;
	cursor: pointer;
	width: 100%;
}

.ccl-dashboard__mobile-toggle span {
	display: block;
	width: 22px;
	height: 2px;
	background: var(--ccl-white);
	border-radius: 2px;
	transition: transform 0.25s, opacity 0.25s;
}

.ccl-dashboard__mobile-toggle[aria-expanded="true"] span:nth-child(1) {
	transform: translateY(7px) rotate(45deg);
}

.ccl-dashboard__mobile-toggle[aria-expanded="true"] span:nth-child(2) {
	opacity: 0;
}

.ccl-dashboard__mobile-toggle[aria-expanded="true"] span:nth-child(3) {
	transform: translateY(-7px) rotate(-45deg);
}

@media (max-width: 768px) {
	.ccl-dashboard__mobile-toggle {
		display: flex;
	}

	.ccl-dashboard {
		grid-template-columns: 1fr;
	}

	.ccl-dashboard__sidebar {
		display: none;
		position: fixed;
		inset: 0;
		z-index: 9000;
		overflow-y: auto;
		padding-top: 60px;
	}

	.ccl-dashboard__sidebar.ccl-sidebar--open {
		display: flex;
	}

	.ccl-dashboard__main {
		width: 100%;
	}
}

/* ── Focus states (accessibility) ───────────────────────────────────────── */
.ccl-btn:focus-visible,
.ccl-form__input:focus-visible,
.ccl-form__textarea:focus-visible,
.ccl-form__select:focus-visible,
.ccl-dashboard__nav-link:focus-visible,
.ccl-toggle-password:focus-visible {
	outline: 3px solid var(--ccl-primary);
	outline-offset: 2px;
}

/* ── Input error state (aria-invalid) ───────────────────────────────────── */
.ccl-form__input[aria-invalid="true"],
.ccl-form__textarea[aria-invalid="true"],
.ccl-input--error {
	border-color: var(--ccl-error) !important;
	box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.12) !important;
}

/* ── Hero shimmer animation ──────────────────────────────────────────────── */
@keyframes ccl-hero-shimmer {
	0%   { background-position: 0% 50%; }
	50%  { background-position: 100% 50%; }
	100% { background-position: 0% 50%; }
}

.ccl-page-header {
	background-size: 200% 200% !important;
	animation: ccl-hero-shimmer 6s ease infinite;
}

/* ── Video player accent ──────────────────────────────────────────────────── */
video::-webkit-media-controls-panel {
	background: linear-gradient(to top, rgba(43, 27, 78, 0.9), transparent);
}

video::-webkit-media-controls-play-button,
video::-webkit-media-controls-mute-button {
	filter: drop-shadow(0 0 4px rgba(237, 39, 117, 0.6));
}

/* ── Dashboard avatar ring ───────────────────────────────────────────────── */
.ccl-dashboard__avatar-img {
	border: 2px solid rgba(255, 255, 255, 0.3);
}

/* ── Responsive improvements ─────────────────────────────────────────────── */
@media (max-width: 375px) {
	.ccl-auth-header { padding: 20px 16px; }
	.ccl-auth-body   { padding: 20px 16px; }
	.ccl-btn         { padding: 12px 18px; font-size: 14px; }
	.ccl-filter-bar  { flex-direction: column; }
	.ccl-filter-bar__prices { width: 100%; }
	.ccl-filter-bar__input--price { width: 100%; }
	.ccl-filter-bar__select { width: 100%; }
}

@media (max-width: 768px) {
	.ccl-sell-car-card__body { padding: 20px 16px; }
}

/* ── Sell car form card body padding (if missing) ────────────────────────── */
.ccl-sell-car-card__body {
	padding: 28px 36px 36px;
}

@media (max-width: 600px) {
	.ccl-sell-car-card__body {
		padding: 20px 20px 28px;
	}
}

/* ── .ccl-input base (sell-car + ads forms) ─────────────────────────────── */
.ccl-input {
	display: block;
	width: 100%;
	padding: 11px 14px;
	border: 2px solid #E5E7EB;
	border-radius: var(--ccl-radius-sm);
	font-family: var(--ccl-font-base);
	font-size: 15px;
	color: var(--ccl-dark-text);
	background: var(--ccl-white);
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
	outline: none;
	box-sizing: border-box;
	-webkit-appearance: none;
	appearance: none;
}

.ccl-input:focus {
	border-color: var(--ccl-primary);
	box-shadow: 0 0 0 3px rgba(224, 48, 64, 0.12);
}

.ccl-input::placeholder {
	color: #9CA3AF;
}

.ccl-input.ccl-textarea {
	resize: vertical;
	min-height: 130px;
	line-height: 1.5;
}

/* ── Ghost button – general (light backgrounds) ──────────────────────────── */
.ccl-btn--ghost {
	background: transparent !important;
	border: 2px solid #D1D5DB !important;
	color: var(--ccl-mid-gray) !important;
}

.ccl-btn--ghost:hover,
.ccl-btn--ghost:focus {
	border-color: var(--ccl-primary) !important;
	color: var(--ccl-primary) !important;
	text-decoration: none;
}

/* Ghost button on dark sidebar ─────────────────────────────────────────── */
.ccl-dashboard__sidebar-actions .ccl-btn--ghost {
	border: 1px solid rgba(255, 255, 255, 0.3) !important;
	color: rgba(255, 255, 255, 0.75) !important;
	background: transparent !important;
}

.ccl-dashboard__sidebar-actions .ccl-btn--ghost:hover {
	border-color: rgba(255, 255, 255, 0.6) !important;
	color: var(--ccl-white) !important;
	background: rgba(255, 255, 255, 0.08) !important;
}

/* ── Dashboard: full-width breakout (override block-theme content width) ─── */
body.ccl-page--dashboard .wp-block-post-content,
body.ccl-page--dashboard .wp-block-post-content > *,
body.ccl-page--dashboard .entry-content,
body.ccl-page--dashboard .entry-content > *,
body.ccl-page--dashboard .post-content,
body.ccl-page--dashboard article.page,
body.ccl-page--dashboard .page-content {
	max-width: 100% !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
	width: 100% !important;
}

body.ccl-page--dashboard .ccl-dashboard__mobile-toggle,
body.ccl-page--dashboard .ccl-dashboard {
	width: 100% !important;
	max-width: 100% !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
	position: static !important;
}

body.ccl-page--dashboard {
	overflow-x: hidden;
}