/**
 * Aprendi - Main Stylesheet
 * Cashback/Affiliate Platform
 */

/* ============================================================================
   RESET & BASE STYLES
   ============================================================================ */

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

:root {
	/* GitHub Dark Theme - matching dashboard.css */
	--primary-color: #58a6ff;
	--primary-dark: #1f6feb;
	--primary-light: #79c0ff;
	--secondary-color: #3fb950;
	--danger-color: #f85149;
	--warning-color: #d29922;
	--text-primary: #e6edf3;
	--text-secondary: #7d8590;
	--bg-primary: #161b22;
	--bg-secondary: #0d1117;
	--border-color: #30363d;
	--shadow-sm: 0 0 transparent;
	--shadow-md: 0 8px 24px rgba(1, 4, 9, 0.4);
	--shadow-lg: 0 16px 32px rgba(1, 4, 9, 0.6);
}

body {
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
	line-height: 1.6;
	color: var(--text-primary);
	background-color: var(--bg-secondary);
}

/* ============================================================================
   LAYOUT
   ============================================================================ */

.container {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 1rem;
}

.container-sm {
	max-width: 500px;
	margin: 0 auto;
	padding: 0 1rem;
}

/* ============================================================================
   HEADER & NAVIGATION
   ============================================================================ */

header {
	background-color: var(--bg-primary);
	border-bottom: 1px solid var(--border-color);
	box-shadow: var(--shadow-sm);
}

nav {
	display: flex;
	align-items: center;
	padding: 1rem 0;
}

.logo {
	font-size: 1.5rem;
	font-weight: bold;
	color: var(--primary-color);
	text-decoration: none;
}

.nav-links {
	display: flex;
	gap: 1.5rem;
	list-style: none;
}

.nav-links a {
	color: var(--text-primary);
	text-decoration: none;
	font-weight: 500;
	transition: color 0.2s;
}

.nav-links a:hover {
	color: var(--primary-color);
}

.user-menu {
	display: flex;
	align-items: center;
	gap: 1rem;
}

.user-name {
	font-weight: 500;
	color: var(--text-primary);
}

/* ============================================================================
   BUTTONS
   ============================================================================ */

button,
.btn {
	padding: 0.625rem 1.25rem;
	font-size: 1rem;
	font-weight: 500;
	border: none;
	border-radius: 0.5rem;
	cursor: pointer;
	transition: all 0.2s;
	text-decoration: none;
	display: inline-block;
	text-align: center;
}

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

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

.btn-secondary {
	background-color: var(--secondary-color);
	color: white;
}

.btn-secondary:hover {
	background-color: #059669;
}

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

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

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

.btn-danger:hover {
	background-color: #dc2626;
}

.btn-sm {
	padding: 0.5rem 1rem;
	font-size: 0.875rem;
}

.btn-lg {
	padding: 0.75rem 1.5rem;
	font-size: 1.125rem;
}

.btn-block {
	display: block;
	width: 100%;
}

/* ============================================================================
   FORMS
   ============================================================================ */

.form-group {
	margin-bottom: 1.25rem;
}

label {
	display: block;
	margin-bottom: 0.5rem;
	font-weight: 500;
	color: var(--text-primary);
}

input[type='text'],
input[type='email'],
input[type='password'],
input[type='tel'],
textarea,
select {
	width: 100%;
	padding: 0.625rem 0.875rem;
	font-size: 1rem;
	border: 1px solid var(--border-color);
	border-radius: 0.5rem;
	background-color: var(--bg-primary);
	color: var(--text-primary);
	transition: border-color 0.2s, box-shadow 0.2s;
}

input:focus,
textarea:focus,
select:focus {
	outline: none;
	border-color: var(--primary-color);
	box-shadow: 0 0 0 3px rgba(88, 166, 255, 0.1);
}

input::placeholder,
textarea::placeholder {
	color: var(--text-secondary);
	opacity: 0.6;
}

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

.error-message,
#error-message {
	color: var(--danger-color);
	font-size: 0.875rem;
	margin-top: 0.25rem;
	display: none;
}

.success-message,
#success-message {
	color: var(--secondary-color);
	font-size: 0.875rem;
	margin-top: 0.25rem;
	display: none;
}

/* ============================================================================
   CARDS
   ============================================================================ */

.card {
	background-color: var(--bg-primary);
	border-radius: 0.75rem;
	box-shadow: var(--shadow-md);
	padding: 1.5rem;
	margin-bottom: 1.5rem;
}

.card-header {
	border-bottom: 1px solid var(--border-color);
	padding-bottom: 1rem;
	margin-bottom: 1rem;
}

.card-header h2,
.card-header h3 {
	color: var(--text-primary);
}

.profile-card,
.order-card,
.payable-card,
.partner-card {
	background-color: var(--bg-primary);
	border-radius: 0.75rem;
	box-shadow: var(--shadow-md);
	padding: 1.5rem;
	margin-bottom: 1rem;
	transition: transform 0.2s, box-shadow 0.2s;
}

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

.partner-image {
	width: 100%;
	height: 200px;
	object-fit: cover;
	border-radius: 0.5rem;
	margin-bottom: 1rem;
}

/* ============================================================================
   AUTH PAGES (Login/Register)
   ============================================================================ */

.auth-container {
	min-height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 2rem 1rem;
}

.auth-card {
	background-color: var(--bg-primary);
	border-radius: 0.75rem;
	box-shadow: var(--shadow-lg);
	padding: 2rem;
	width: 100%;
	max-width: 450px;
}

.auth-header {
	text-align: center;
	margin-bottom: 2rem;
}

.auth-header h1 {
	font-size: 1.875rem;
	color: var(--text-primary);
	margin-bottom: 0.5rem;
}

.auth-header p {
	color: var(--text-secondary);
}

.auth-footer {
	text-align: center;
	margin-top: 1.5rem;
	color: var(--text-secondary);
}

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

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

/* ============================================================================
   DASHBOARD
   ============================================================================ */

.dashboard-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 1.5rem;
	margin-top: 2rem;
}

.dashboard-section {
	margin-bottom: 2rem;
}

.dashboard-section h2 {
	margin-bottom: 1rem;
	color: var(--text-primary);
}

.cashback-total {
	background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
	color: white;
	border-radius: 0.75rem;
	padding: 2rem;
	text-align: center;
	margin-bottom: 1.5rem;
	box-shadow: var(--shadow-lg);
}

.total-amount {
	font-size: 2.5rem;
	font-weight: bold;
	margin-top: 0.5rem;
}

.empty-state {
	text-align: center;
	padding: 3rem 1rem;
	color: var(--text-secondary);
	font-style: italic;
}

/* ============================================================================
   STATUS BADGES
   ============================================================================ */

.status-1 {
	color: var(--warning-color);
	font-weight: 500;
}

.status-2 {
	color: var(--secondary-color);
	font-weight: 500;
}

.status-3 {
	color: var(--danger-color);
	font-weight: 500;
}

.status-4 {
	color: var(--primary-color);
	font-weight: 500;
}

.order-header,
.payable-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 1rem;
}

.order-id {
	font-weight: bold;
	color: var(--primary-color);
}

.cashback-rate {
	color: var(--secondary-color);
	font-weight: 600;
	margin-top: 0.5rem;
}

/* ============================================================================
   HERO SECTION (Landing Page)
   ============================================================================ */

.hero {
	background: linear-gradient(135deg, var(--primary-color), var(--primary-light));
	color: white;
	padding: 4rem 1rem;
	text-align: center;
}

.hero h1 {
	font-size: 3rem;
	margin-bottom: 1rem;
}

.hero p {
	font-size: 1.25rem;
	margin-bottom: 2rem;
	opacity: 0.95;
}

.hero-buttons {
	display: flex;
	gap: 1rem;
	justify-content: center;
	flex-wrap: wrap;
}

/* ============================================================================
   UTILITIES
   ============================================================================ */

.mt-1 {
	margin-top: 0.5rem;
}
.mt-2 {
	margin-top: 1rem;
}
.mt-3 {
	margin-top: 1.5rem;
}
.mt-4 {
	margin-top: 2rem;
}

.mb-1 {
	margin-bottom: 0.5rem;
}
.mb-2 {
	margin-bottom: 1rem;
}
.mb-3 {
	margin-bottom: 1.5rem;
}
.mb-4 {
	margin-bottom: 2rem;
}

.text-center {
	text-align: center;
}

.text-muted {
	color: var(--text-secondary);
}

.d-none {
	display: none;
}

/* ============================================================================
   RESPONSIVE
   ============================================================================ */

@media (max-width: 768px) {
	.nav-links {
		display: none;
	}

	.hero h1 {
		font-size: 2rem;
	}

	.hero p {
		font-size: 1rem;
	}

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

	.total-amount {
		font-size: 2rem;
	}
}