/* RanksIQ Customer Portal - Custom CSS */

:root {
	--bg-dark: #1a1a2e;
	--bg-mid: #16213e;
	--bg-light: #0f3460;
	--accent: #e94560;
	--accent-light: #ff6b6b;
	--text: #333;
	--text-light: #666;
	--white: #ffffff;
}

/* Base Typography */
body {
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
	color: var(--text);
	line-height: 1.6;
}

/* Headings */
h1, h2, h3, h4, h5, h6 {
	color: var(--bg-dark);
	font-weight: 700;
}

/* Links */
a {
	color: var(--accent);
	text-decoration: none;
	transition: color 0.2s;
}

a:hover {
	color: var(--accent-light);
	text-decoration: underline;
}

/* Primary Buttons */
button[type="submit"],
.btn-primary,
.button-primary,
input[type="submit"] {
	background: var(--accent) !important;
	color: var(--white) !important;
	border: none !important;
	padding: 14px 32px !important;
	border-radius: 30px !important;
	font-weight: 600 !important;
	font-size: 1em !important;
	cursor: pointer;
	transition: transform 0.2s, box-shadow 0.2s, background 0.2s !important;
}

button[type="submit"]:hover,
.btn-primary:hover,
.button-primary:hover,
input[type="submit"]:hover {
	background: var(--accent-light) !important;
	transform: translateY(-2px);
	box-shadow: 0 10px 30px rgba(233, 69, 96, 0.3);
}

/* Secondary Buttons */
.btn-secondary,
.button-secondary {
	background: transparent !important;
	color: var(--bg-dark) !important;
	border: 2px solid var(--bg-dark) !important;
	padding: 12px 28px !important;
	border-radius: 30px !important;
	font-weight: 600 !important;
	transition: all 0.2s !important;
}

.btn-secondary:hover,
.button-secondary:hover {
	background: var(--bg-dark) !important;
	color: var(--white) !important;
}

/* Form Inputs */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
textarea,
select {
	border: 2px solid #e0e0e0 !important;
	border-radius: 8px !important;
	padding: 12px 16px !important;
	font-size: 1em !important;
	transition: border-color 0.2s !important;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="number"]:focus,
textarea:focus,
select:focus {
	border-color: var(--accent) !important;
	outline: none !important;
	box-shadow: 0 0 0 3px rgba(233, 69, 96, 0.1) !important;
}

/* Cards and Panels */
.card,
.panel,
.box {
	background: var(--white);
	border-radius: 16px !important;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08) !important;
	border: none !important;
}

/* Pricing Cards */
.pricing-card,
.plan-card,
.product-card {
	background: var(--white);
	border-radius: 16px !important;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08) !important;
	padding: 30px !important;
	transition: transform 0.2s, box-shadow 0.2s !important;
}

.pricing-card:hover,
.plan-card:hover,
.product-card:hover {
	transform: translateY(-5px);
	box-shadow: 0 15px 40px rgba(0, 0, 0, 0.12) !important;
}

/* Featured/Highlighted Plan */
.featured,
.recommended,
.popular {
	border: 2px solid var(--accent) !important;
	position: relative;
}

/* Tables */
table {
	width: 100%;
	border-collapse: collapse;
}

th {
	background: #f8f9fa !important;
	color: var(--bg-dark) !important;
	font-weight: 600 !important;
	text-align: left;
	padding: 12px 15px !important;
}

td {
	padding: 12px 15px !important;
	border-bottom: 1px solid #e0e0e0 !important;
}

tr:hover {
	background: #fafafa;
}

/* Alerts and Notices */
.alert,
.notice,
.message {
	border-radius: 8px !important;
	padding: 15px 20px !important;
	border-left: 4px solid !important;
}

.alert-success,
.notice-success {
	background: #e8f8ed !important;
	border-left-color: #28a745 !important;
	color: #155724 !important;
}

.alert-error,
.notice-error,
.alert-danger {
	background: #f8d7da !important;
	border-left-color: #dc3545 !important;
	color: #721c24 !important;
}

.alert-warning,
.notice-warning {
	background: #fff8e6 !important;
	border-left-color: #ffc107 !important;
	color: #856404 !important;
}

.alert-info,
.notice-info {
	background: #e8f4fd !important;
	border-left-color: #007bff !important;
	color: #004085 !important;
}

/* Header/Navigation */
header,
.header,
.navbar {
	background: linear-gradient(135deg, var(--bg-dark) 0%, var(--bg-mid) 100%) !important;
	color: var(--white) !important;
}

header a,
.header a,
.navbar a {
	color: var(--white) !important;
}

header a:hover,
.header a:hover,
.navbar a:hover {
	color: var(--accent-light) !important;
}

/* Footer */
footer,
.footer {
	background: var(--bg-dark) !important;
	color: var(--white) !important;
}

footer a,
.footer a {
	color: var(--accent-light) !important;
}

/* Badges and Tags */
.badge,
.tag,
.label {
	background: var(--bg-light) !important;
	color: var(--white) !important;
	padding: 4px 12px !important;
	border-radius: 20px !important;
	font-size: 0.85em !important;
	font-weight: 600 !important;
}

.badge-success {
	background: #28a745 !important;
}

.badge-warning {
	background: #ffc107 !important;
	color: #333 !important;
}

.badge-danger {
	background: var(--accent) !important;
}

/* Progress Bars */
.progress-bar,
.usage-bar {
	background: #e0e0e0 !important;
	border-radius: 10px !important;
	overflow: hidden;
}

.progress-bar-fill,
.usage-bar-fill {
	background: linear-gradient(135deg, var(--accent) 0%, var(--accent-light) 100%) !important;
	border-radius: 10px !important;
}

/* Modal/Dialog */
.modal,
.dialog {
	border-radius: 16px !important;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2) !important;
}

/* Subscription Status */
.status-active {
	color: #28a745 !important;
	font-weight: 600;
}

.status-inactive,
.status-cancelled {
	color: var(--text-light) !important;
}

.status-past-due {
	color: var(--accent) !important;
	font-weight: 600;
}

/* API Key Display */
.api-key,
.token,
code {
	background: #f4f4f4 !important;
	padding: 8px 12px !important;
	border-radius: 6px !important;
	font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace !important;
	font-size: 0.9em !important;
	color: var(--accent) !important;
	word-break: break-all;
}

/* Copy Button */
.copy-btn,
.copy-button {
	background: var(--bg-light) !important;
	color: var(--white) !important;
	border: none !important;
	padding: 8px 16px !important;
	border-radius: 6px !important;
	cursor: pointer;
	transition: background 0.2s !important;
}

.copy-btn:hover,
.copy-button:hover {
	background: var(--bg-mid) !important;
}

/* Loading Spinner */
.spinner,
.loading {
	border-color: #e0e0e0 !important;
	border-top-color: var(--accent) !important;
}

/* Tooltip */
.tooltip {
	background: var(--bg-dark) !important;
	color: var(--white) !important;
	border-radius: 6px !important;
	padding: 8px 12px !important;
	font-size: 0.85em !important;
}