/**
 * ShopeeRental Homepage - Modern Styling & Animations
 */

/* ── Reset & Base Fonts ── */
.shrental-body {
	font-family: 'Plus Jakarta Sans', 'Be Vietnam Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	background-color: #020617; /* slate-950 */
	color: #f8fafc;
	margin: 0;
	padding: 0;
	overflow-x: hidden;
}

.shrental-wrapper {
	min-height: 100vh;
	display: flex;
	flex-direction: column;
}

/* ── Typography & Gradients ── */
.shrental-text-gradient {
	background: linear-gradient(135deg, #FF6600 0%, #FF8C00 40%, #FFD700 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

.shrental-btn-glow {
	position: relative;
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.shrental-btn-glow:hover {
	box-shadow: 0 0 25px rgba(238, 77, 45, 0.45);
}

/* ── Tabs Styling ── */
.shrental-tab-btn {
	background-color: rgba(15, 23, 42, 0.8); /* slate-900 */
	border: 1px solid rgba(51, 65, 85, 0.6); /* slate-700 */
	color: #94a3b8; /* slate-400 */
	cursor: pointer;
}

.shrental-tab-btn:hover {
	color: #f8fafc;
	background-color: #1e293b;
	border-color: #475569;
}

.shrental-tab-btn.active {
	background: linear-gradient(135deg, #EE4D2D, #FF6600);
	border-color: #FF6600;
	color: #ffffff;
	box-shadow: 0 4px 15px rgba(238, 77, 45, 0.3);
}

.shrental-tab-pane {
	display: none;
	animation: shrentalFadeIn 0.35s ease-in-out forwards;
}

.shrental-tab-pane.active {
	display: block;
}

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

/* ── FAQ Accordion ── */
.shrental-faq-item {
	transition: border-color 0.2s ease, background-color 0.2s ease;
}

.shrental-faq-item.active {
	border-color: rgba(238, 77, 45, 0.5);
	background-color: rgba(15, 23, 42, 0.95);
}

.shrental-faq-item.active .shrental-faq-content {
	display: block;
	animation: shrentalFadeIn 0.3s ease forwards;
}

.shrental-faq-item.active .shrental-faq-icon {
	transform: rotate(45deg);
	color: #EE4D2D;
}

.shrental-faq-icon {
	transition: transform 0.25s ease, color 0.25s ease;
	display: inline-block;
}

/* ── Custom Utilities ── */
.shrental-glass {
	background: rgba(15, 23, 42, 0.7);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border: 1px solid rgba(255, 255, 255, 0.08);
}

/* ── Responsive adjustments ── */
@media (max-width: 640px) {
	.shrental-tab-btn {
		font-size: 11px;
		padding: 8px 12px;
	}
}

/* ── Custom Scrollbar ── */
::-webkit-scrollbar {
	width: 8px;
	height: 8px;
}

::-webkit-scrollbar-track {
	background: #020617;
}

::-webkit-scrollbar-thumb {
	background: #334155;
	border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
	background: #EE4D2D;
}