/**
 * Frontend Stylesheet - Advanced Account Registration System
 * Responsive Social-Inspired Design System
 */

:root {
	--ars-primary: #1877f2;
	--ars-primary-hover: #166fe5;
	--ars-background: #f0f2f5;
	--ars-card: #ffffff;
	--ars-text: #1c1e21;
	--ars-muted: #65676b;
	--ars-border: #ccd0d5;
	--ars-success: #31a24c;
	--ars-danger: #fa383e;
	--ars-warning: #f7b125;
	--ars-info: #1877f2;
	--ars-border-radius: 12px;
	--ars-input-bg: #ffffff;
	--ars-shadow: 0 8px 28px rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(0, 0, 0, 0.04);
}

@media (prefers-color-scheme: dark) {
	:root {
		--ars-background: #18191a;
		--ars-card: #242526;
		--ars-text: #e4e6eb;
		--ars-muted: #b0b3b8;
		--ars-border: #3a3b3c;
		--ars-input-bg: #3a3b3c;
		--ars-shadow: 0 8px 28px rgba(0, 0, 0, 0.35);
	}
}

.ars-container {
	width: 100%;
	max-width: 580px;
	margin: 32px auto;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	color: var(--ars-text);
	box-sizing: border-box;
}

.ars-container *,
.ars-container *::before,
.ars-container *::after {
	box-sizing: border-box;
}

.ars-card {
	background: var(--ars-card);
	border: 1px solid var(--ars-border);
	border-radius: var(--ars-border-radius);
	box-shadow: var(--ars-shadow);
	padding: 32px;
	transition: background 0.2s ease, border-color 0.2s ease;
}

.ars-card-header {
	text-align: center;
	margin-bottom: 24px;
}

.ars-card-title {
	margin: 0;
	font-size: 24px;
	font-weight: 700;
	letter-spacing: -0.3px;
	color: var(--ars-text);
}

.ars-card-subtitle {
	margin: 8px 0 0;
	font-size: 14px;
	color: var(--ars-muted);
}

/* Progress Indicators */
.ars-progress-wrapper {
	margin-bottom: 28px;
}

.ars-progress-bar-track {
	height: 6px;
	background: var(--ars-border);
	border-radius: 6px;
	overflow: hidden;
	margin-bottom: 16px;
}

.ars-progress-bar-fill {
	height: 100%;
	background: linear-gradient(90deg, var(--ars-primary), #00c6ff);
	border-radius: 6px;
	transition: width 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.ars-steps-indicator {
	display: flex;
	justify-content: space-between;
}

.ars-step-badge {
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: var(--ars-card);
	border: 2px solid var(--ars-border);
	color: var(--ars-muted);
	font-size: 13px;
	font-weight: 600;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.25s ease;
}

.ars-step-badge.active {
	border-color: var(--ars-primary);
	color: var(--ars-primary);
	background: rgba(24, 119, 242, 0.08);
	transform: scale(1.1);
}

.ars-step-badge.completed {
	background: var(--ars-primary);
	border-color: var(--ars-primary);
	color: #ffffff;
}

/* Steps */
.ars-wizard-step {
	display: none;
	animation: arsFadeIn 0.3s ease-out;
}

.ars-wizard-step.active {
	display: block;
}

@keyframes arsFadeIn {
	from { opacity: 0; transform: translateY(6px); }
	to { opacity: 1; transform: translateY(0); }
}

.ars-step-title {
	font-size: 17px;
	font-weight: 600;
	margin: 0 0 16px;
	padding-bottom: 8px;
	border-bottom: 1px solid var(--ars-border);
	color: var(--ars-text);
}

/* Forms & Inputs */
.ars-form-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
}

@media (max-width: 480px) {
	.ars-form-row {
		grid-template-columns: 1fr;
		gap: 0;
	}
	.ars-card {
		padding: 24px 16px;
		border-radius: 0;
		box-shadow: none;
	}
}

.ars-input-group {
	margin-bottom: 18px;
}

.ars-input-group label {
	display: block;
	font-size: 13px;
	font-weight: 600;
	margin-bottom: 6px;
	color: var(--ars-text);
}

.ars-required {
	color: var(--ars-danger);
	margin-left: 2px;
}

.ars-input-group input[type="text"],
.ars-input-group input[type="email"],
.ars-input-group input[type="tel"],
.ars-input-group input[type="date"],
.ars-input-group input[type="password"],
.ars-input-group select {
	width: 100%;
	height: 44px;
	padding: 10px 14px;
	border: 1.5px solid var(--ars-border);
	border-radius: 8px;
	background: var(--ars-input-bg);
	color: var(--ars-text);
	font-size: 15px;
	outline: none;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.ars-input-group input:focus,
.ars-input-group select:focus {
	border-color: var(--ars-primary);
	box-shadow: 0 0 0 3px rgba(24, 119, 242, 0.15);
}

.ars-input-group.has-error input {
	border-color: var(--ars-danger);
}

.ars-field-error {
	display: block;
	font-size: 12px;
	color: var(--ars-danger);
	margin-top: 4px;
	min-height: 16px;
}

.ars-field-hint {
	font-size: 12px;
	color: var(--ars-muted);
	display: block;
	margin-top: 4px;
}

/* Live Status Indicators */
.ars-input-with-status,
.ars-input-with-action {
	position: relative;
	display: flex;
	align-items: center;
}

.ars-status-icon {
	position: absolute;
	right: 12px;
	font-size: 16px;
}

.ars-status-icon.is-loading::after {
	content: "";
	display: inline-block;
	width: 16px;
	height: 16px;
	border: 2px solid var(--ars-border);
	border-top-color: var(--ars-primary);
	border-radius: 50%;
	animation: arsSpin 0.7s linear infinite;
}

@keyframes arsSpin {
	to { transform: rotate(360deg); }
}

.ars-status-icon.is-valid {
	color: var(--ars-success);
}
.ars-status-icon.is-valid::after {
	content: "✓";
	font-weight: 700;
}

.ars-status-icon.is-invalid {
	color: var(--ars-danger);
}
.ars-status-icon.is-invalid::after {
	content: "✕";
	font-weight: 700;
}

/* Password Toggle */
.ars-toggle-pw-btn {
	position: absolute;
	right: 12px;
	background: none;
	border: none;
	color: var(--ars-muted);
	cursor: pointer;
	padding: 4px;
	display: flex;
	align-items: center;
}

.ars-toggle-pw-btn:hover {
	color: var(--ars-text);
}

/* Password Strength Meter */
.ars-strength-meter {
	margin-top: 8px;
}

.ars-strength-bar {
	height: 5px;
	background: var(--ars-border);
	border-radius: 4px;
	overflow: hidden;
}

.ars-strength-bar-fill {
	height: 100%;
	width: 0%;
	transition: width 0.3s ease, background-color 0.3s ease;
}

.ars-strength-text {
	font-size: 11px;
	font-weight: 600;
	margin-top: 4px;
	display: inline-block;
	color: var(--ars-muted);
}

/* Strength Colors */
.ars-strength-0 { width: 10%; background: var(--ars-danger); }
.ars-strength-1 { width: 25%; background: #ff7043; }
.ars-strength-2 { width: 50%; background: var(--ars-warning); }
.ars-strength-3 { width: 75%; background: #26a69a; }
.ars-strength-4 { width: 100%; background: var(--ars-success); }

/* Phone with country code */
.ars-phone-input-wrap {
	display: flex;
	gap: 8px;
}

.ars-country-select {
	max-width: 105px !important;
}

/* Gender Selector */
.ars-gender-selector {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 10px;
}

.ars-radio-card {
	display: block;
	cursor: pointer;
	position: relative;
}

.ars-radio-card input {
	position: absolute;
	opacity: 0;
}

.ars-radio-card-content {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 44px;
	border: 1.5px solid var(--ars-border);
	border-radius: 8px;
	font-size: 14px;
	font-weight: 500;
	background: var(--ars-input-bg);
	color: var(--ars-text);
	transition: all 0.2s ease;
}

.ars-radio-card input:checked + .ars-radio-card-content {
	border-color: var(--ars-primary);
	background: rgba(24, 119, 242, 0.08);
	color: var(--ars-primary);
	font-weight: 600;
}

/* Avatar Dropzone */
.ars-avatar-uploader {
	border: 2px dashed var(--ars-border);
	border-radius: 12px;
	padding: 24px;
	text-align: center;
	cursor: pointer;
	background: var(--ars-input-bg);
	transition: border-color 0.2s ease, background 0.2s ease;
}

.ars-avatar-uploader:hover,
.ars-avatar-uploader.is-dragover {
	border-color: var(--ars-primary);
	background: rgba(24, 119, 242, 0.04);
}

.ars-avatar-preview-wrap {
	position: relative;
	width: 100px;
	height: 100px;
	margin: 0 auto;
}

.ars-avatar-preview-wrap img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 50%;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}

.ars-avatar-remove-btn {
	position: absolute;
	top: -4px;
	right: -4px;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: var(--ars-danger);
	color: #fff;
	border: 2px solid #fff;
	font-size: 18px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}

/* Summary Card */
.ars-summary-card {
	background: var(--ars-background);
	border-radius: 8px;
	padding: 16px;
}

.ars-summary-card h4 {
	margin: 0 0 12px;
	font-size: 14px;
	color: var(--ars-muted);
	text-transform: uppercase;
	letter-spacing: 0.5px;
}

.ars-summary-item {
	display: flex;
	justify-content: space-between;
	padding: 8px 0;
	border-bottom: 1px solid var(--ars-border);
	font-size: 14px;
}

.ars-summary-item:last-child {
	border-bottom: none;
}

.ars-summary-label {
	color: var(--ars-muted);
}

.ars-summary-val {
	font-weight: 600;
	color: var(--ars-text);
}

/* Buttons */
.ars-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 15px;
	font-weight: 600;
	border-radius: 8px;
	padding: 10px 20px;
	cursor: pointer;
	border: none;
	transition: all 0.2s ease;
	text-decoration: none;
}

.ars-btn-primary {
	background: var(--ars-primary);
	color: #ffffff;
}

.ars-btn-primary:hover {
	background: var(--ars-primary-hover);
	color: #ffffff;
}

.ars-btn-secondary {
	background: var(--ars-border);
	color: var(--ars-text);
}

.ars-btn-outline {
	background: none;
	border: 1.5px solid var(--ars-border);
	color: var(--ars-text);
}

.ars-btn-lg {
	height: 48px;
	font-size: 16px;
}

.ars-btn-sm {
	padding: 6px 14px;
	font-size: 13px;
	height: 36px;
}

.ars-btn-full {
	width: 100%;
}

.ars-btn:disabled {
	opacity: 0.65;
	cursor: not-allowed;
}

/* Footer / Actions */
.ars-wizard-footer {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: 28px;
	padding-top: 20px;
	border-top: 1px solid var(--ars-border);
}

.ars-card-footer {
	text-align: center;
	margin-top: 20px;
	font-size: 14px;
	color: var(--ars-muted);
}

.ars-link {
	color: var(--ars-primary);
	font-weight: 600;
	text-decoration: none;
}

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

.ars-link-sm {
	font-size: 12px;
	color: var(--ars-primary);
	text-decoration: none;
}

.ars-link-sm:hover {
	text-decoration: underline;
}

/* Alerts */
.ars-alert {
	padding: 12px 16px;
	border-radius: 8px;
	font-size: 14px;
	margin-bottom: 20px;
	line-height: 1.5;
}

.ars-alert-danger {
	background: #ffebee;
	color: #c62828;
	border: 1px solid #ffcdd2;
}

.ars-alert-success {
	background: #e8f5e9;
	color: #2e7d32;
	border: 1px solid #c8e6c9;
}

.ars-alert-info {
	background: #e3f2fd;
	color: #1565c0;
	border: 1px solid #bbdefb;
}

.ars-alert-warning {
	background: #fff8e1;
	color: #f57f17;
	border: 1px solid #ffecb3;
}

/* Badges */
.ars-badge {
	display: inline-block;
	padding: 3px 8px;
	border-radius: 10px;
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
}

.ars-badge-success { background: #e8f5e9; color: #2e7d32; }
.ars-badge-warning { background: #fff8e1; color: #f57f17; }
.ars-badge-danger  { background: #ffebee; color: #c62828; }

/* Standalone Status Pages */
.ars-status-icon-circle {
	width: 80px;
	height: 80px;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto;
}

.ars-icon-success {
	background: #e8f5e9;
	color: #2e7d32;
}

.ars-icon-danger {
	background: #ffebee;
	color: #c62828;
}

.ars-icon-muted {
	background: var(--ars-background);
	color: var(--ars-muted);
}

/* Account Dashboard Specific */
.ars-account-dashboard {
	max-width: 720px;
}

.ars-account-user-banner {
	display: flex;
	align-items: center;
	gap: 20px;
	padding-bottom: 24px;
	border-bottom: 1px solid var(--ars-border);
}

.ars-user-avatar-large img {
	width: 84px;
	height: 84px;
	border-radius: 50%;
	object-fit: cover;
	border: 3px solid var(--ars-primary);
}

.ars-user-name {
	margin: 0;
	font-size: 22px;
	font-weight: 700;
}

.ars-user-username {
	color: var(--ars-muted);
	font-size: 14px;
}

.ars-account-nav {
	display: flex;
	gap: 12px;
	margin-top: 16px;
	flex-wrap: wrap;
}

.ars-account-tab-btn {
	background: none;
	border: none;
	font-size: 14px;
	font-weight: 600;
	padding: 8px 16px;
	border-radius: 6px;
	cursor: pointer;
	color: var(--ars-muted);
	transition: background 0.2s, color 0.2s;
}

.ars-account-tab-btn:hover {
	background: var(--ars-background);
	color: var(--ars-text);
}

.ars-account-tab-btn.active {
	background: var(--ars-primary);
	color: #ffffff;
}

.ars-account-tab-content {
	display: none;
}

.ars-account-tab-content.active {
	display: block;
}

.ars-section-title {
	font-size: 18px;
	font-weight: 700;
	margin: 0 0 20px;
}