/* style.css - 4Love Horoscope */
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;700;800&display=swap');

/* 1. Add this at the very top of style.css */
@font-face {
	 font-family: "menufont";
	 src: url(https://4love.ge/fonts/bpg_mrgvlovani_caps_2010.eot);
	 src:
		 local(☺),
		 url(https://4love.ge/fonts/bpg_mrgvlovani_caps_2010.woff) format("woff"),
		 url(https://4love.ge/fonts/bpg_mrgvlovani_caps_2010.ttf) format("truetype"),
		 url(https://4love.ge/fonts/bpg_mrgvlovani_caps_2010.svg) format("svg");
	 font-weight: 400;
	 font-style: normal;
}

:root {
	--primary-gradient: linear-gradient(135deg, #4facfe 0%, #ff58a8 100%);
	--glass-bg: rgba(255, 255, 255, 0.85);
	--glass-border: 1px solid rgba(255, 255, 255, 0.6);
	--shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.15);
}

body {
	margin: 0;
	padding: 0;
	font-family: 'Nunito', sans-serif;
	background: #cfefff; /* Fallback */
	background: linear-gradient(135deg, #e0c3fc 0%, #8ec5fc 100%);
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	align-items: center;
}

/* Background Orbs */
.orb {
	position: fixed;
	border-radius: 50%;
	filter: blur(80px);
	z-index: -1;
}
.orb-1 { width: 300px; height: 300px; background: #ff9a9e; top: -50px; left: -50px; opacity: 0.6; }
.orb-2 { width: 400px; height: 400px; background: #a18cd1; bottom: -100px; right: -100px; opacity: 0.6; }

/* Header */
header {
	width: 100%;
	max-width: 1200px;
	padding: 20px;
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
}

.brand-logo {
	display: flex;
	align-items: center;
	gap: 10px;
	text-decoration: none;
	background: white;
	padding: 10px 20px;
	border-radius: 50px;
	box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

.brand-text {
	font-weight: 800;
	font-size: 22px;
	background: var(--primary-gradient);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

/* Grid Layout */
.horoscope-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 20px;
	width: 100%;
	max-width: 1200px;
	padding: 20px;
	box-sizing: border-box;
	padding-bottom: 50px;
}

/* The Card */
.zodiac-card {
	background: var(--glass-bg);
	border: var(--glass-border);
	border-radius: 20px;
	padding: 25px;
	text-align: center;
	box-shadow: var(--shadow);
	transition: transform 0.3s ease, box-shadow 0.3s ease;
	cursor: pointer;
	position: relative;
	overflow: hidden;
}

.zodiac-card:hover {
	transform: translateY(-5px);
	box-shadow: 0 15px 40px rgba(0,0,0,0.2);
}

.zodiac-icon {
	width: 80px;
	height: 80px;
	margin-bottom: 15px;
	filter: drop-shadow(0 4px 6px rgba(0,0,0,0.1));
	transition: transform 0.3s;
}

.zodiac-card:hover .zodiac-icon {
	transform: scale(1.1) rotate(5deg);
}

.zodiac-name {
	font-size: 20px;
	font-weight: 800;
	color: #333;
	margin-bottom: 5px;
}

.zodiac-date {
	font-size: 14px;
	color: #888;
	margin-bottom: 15px;
}

.zodiac-text {
	font-size: 15px;
	color: #555;
	line-height: 1.6;
	display: -webkit-box;
	-webkit-line-clamp: 3; /* Show only 3 lines initially */
	-webkit-box-orient: vertical;
	overflow: hidden;
	transition: all 0.3s;
}

/* Expanded State (When clicked) */
.zodiac-card.active .zodiac-text {
	-webkit-line-clamp: unset;
	color: #222;
}
.zodiac-card.active {
	background: white;
	z-index: 10;
	transform: scale(1.02);
}

/* Loading Spinner */
#loader {
	font-size: 18px;
	font-weight: bold;
	color: white;
	margin-top: 50px;
	text-align: center;
	font-family: menufont;
}

/* --- Logo Icon Styling --- */
.brand-icon {
	width: 32px;
	height: 32px;
	/* Soft shadow to make it pop */
	filter: drop-shadow(0 2px 4px rgba(71, 178, 255, 0.3));
	transition: transform 0.2s ease;
}

/* Hover Effect: The star spins slightly */
.brand-logo:hover .brand-icon {
	transform: scale(1.1) rotate(15deg);
}

/* Text Adjustment */
.brand-text {
	font-family: 'Nunito', sans-serif;
	font-weight: 800;
	font-size: 22px;
	/* Gradient Text */
	background: linear-gradient(135deg, #4facfe 0%, #ff58a8 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	/* Fallback color */
	color: #ff58a8; 
	font-family: menufont;
}

/* Apply custom font ONLY to the Zodiac Sign Names */
.zodiac-name {
	font-family: menufont;
	font-weight: 800; /* Extra Bold */
	font-size: 22px;  /* Make it slightly larger */
	color: #333;
	margin-bottom: 5px;
}

/* --- NEW ADDITIONS FOR TABS & TOOLS --- */

/* 1. Navigation Tabs */
.nav-tabs {
	display: flex;
	justify-content: center;
	gap: 15px;
	margin: 20px 0;
	flex-wrap: wrap;
}

.tab-btn {
	background: rgba(255, 255, 255, 0.4);
	border: 1px solid rgba(255, 255, 255, 0.6);
	padding: 10px 20px;
	border-radius: 30px;
	cursor: pointer;
	font-family: 'Noto Sans Georgian', sans-serif;
	font-weight: 700;
	color: #555;
	transition: all 0.3s ease;
}

.tab-btn.active {
	background: white;
	color: #ff58a8;
	box-shadow: 0 4px 15px rgba(255, 88, 168, 0.3);
	transform: translateY(-2px);
}

/* 2. Compatibility (Matching) Tool - Fixed to match Zodiac Card size */
.match-container {
	/* --- GLASS EFFECT (Same as before) --- */
	background: var(--glass-bg);
	border: var(--glass-border);
	border-radius: 20px;
	padding: 25px;
	text-align: center;
	box-shadow: var(--shadow);
	position: relative;
	overflow: hidden;

	/* --- THE FIX: MIMIC GRID BEHAVIOR --- */
	box-sizing: border-box;  /* Important: Padding won't break width */
	width: 100%;             /* Start full width... */
	max-width: 400px;        /* ...but STOP at 400px (like a card) */
	
	/* Center the card perfectly */
	margin: 20px auto;       
	
	/* Ensure it doesn't touch screen edges on mobile */
	width: 90%; 
}

/* Optional: Ensure the inputs inside fit nicely */
.match-inputs {
	display: flex;
	gap: 10px;
	justify-content: center;
	margin: 20px 0;
}

select {
	padding: 10px;
	border-radius: 10px;
	border: 1px solid #ddd;
	font-family: 'Noto Sans Georgian', sans-serif;
	background: white;
	width: 45%;
}

.match-btn {
	background: var(--primary-gradient);
	border: none;
	padding: 12px 30px;
	border-radius: 50px;
	color: white;
	font-weight: 800;
	cursor: pointer;
	font-size: 16px;
	margin-top: 10px;
	box-shadow: 0 5px 15px rgba(255, 88, 168, 0.4);
}

.match-result {
	margin-top: 20px;
	padding: 15px;
	background: white;
	border-radius: 15px;
	display: none; /* Hidden by default */
}

.score-circle {
	width: 80px;
	height: 80px;
	border-radius: 50%;
	background: var(--primary-gradient);
	display: flex;
	align-items: center;
	justify-content: center;
	color: white;
	font-size: 24px;
	font-weight: 800;
	margin: 0 auto 10px auto;
}

/* --- MOBILE RESPONSIVENESS (Fix for iPhone/Galaxy) --- */
@media (max-width: 600px) {
	
	/* 1. Make the container scrollable instead of breaking lines */
	.nav-tabs {
		flex-wrap: nowrap;         /* Force one line */
		overflow-x: auto;          /* Allow side scrolling if needed */
		justify-content: flex-start; /* Start from left */
		padding: 0 10px;           /* Add side breathing room */
		gap: 8px;                  /* Reduce gap between buttons */
		
		/* Hide scrollbar for cleaner look */
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;     /* Firefox */
	}
	
	.nav-tabs::-webkit-scrollbar { 
		display: none;             /* Chrome/Safari */
	}

	/* 2. Make buttons smaller to fit perfectly */
	.tab-btn {
		padding: 8px 12px;         /* Smaller padding */
		font-size: 14px;           /* Slightly smaller text */
		white-space: nowrap;       /* Prevent text from breaking */
		flex-shrink: 0;            /* Prevent buttons from getting squashed */
	}
}

/* --- Custom Font for Matching Tool Header --- */
.match-container h2 {
	font-family: menufont;
	font-weight: 800; /* Extra Bold */
	margin-bottom: 15px;
}