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

body {
    background-color: #fff0f5; 
    color: #333;
    font-family: 'Quicksand', sans-serif;
    overflow-x: hidden;
  
}
body::-webkit-scrollbar { display: none; }

/* --- BACK BUTTON (Scaled Down) --- */
.back-btn {
    position: fixed; top: 10px; left: 10px;
    background-color: rgba(255, 255, 255, 0.9);
    color: #ffb7c5; 
    padding: 6px 12px; /* Smaller padding */
    border-radius: 20px;
    text-decoration: none; 
    font-weight: 700; 
    font-size: 11px; /* Smaller text */
    border: 2px solid #ffb7c5;
    box-shadow: 0 2px 5px rgba(255, 183, 197, 0.3);
    transition: all 0.2s ease;
    display: flex; align-items: center; gap: 5px; 
    z-index: 1000;
    backdrop-filter: blur(5px);
}
.back-btn:hover {
    background-color: #ffb7c5; color: white;
    transform: translateY(-2px);
}

/* --- NAVBAR (Compact) --- */
.navbar {
    position: fixed; top: 0; width: 100%;
    height: 50px; /* Reduced height */
    display: flex; justify-content: space-between; align-items: center;
    padding: 0 20px 0 90px; /* Space for back button */
    z-index: 500;
    transition: background 0.3s;
    background: linear-gradient(to bottom, rgba(0,0,0,0.6) 0%, transparent 100%);
}

.navbar.scrolled {
    background-color: #fff0f5;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}

.logo {
    font-family: 'Playfair Display', serif;
    font-size: 18px; /* Smaller Logo */
    color: #ffb7c5;
    text-shadow: 0 1px 3px rgba(0,0,0,0.3);
    font-weight: bold; font-style: italic;
}
.navbar.scrolled .logo { text-shadow: none; }

.search-container {
    background: rgba(255,255,255,0.2);
    border: 1px solid rgba(255,255,255,0.5);
    border-radius: 15px;
    padding: 4px 10px;
    display: flex; align-items: center; gap: 5px;
    backdrop-filter: blur(5px);
}
.navbar.scrolled .search-container { background: white; border: 1px solid #ffb7c5; }

.search-container i { color: white; font-size: 10px; }
.navbar.scrolled .search-container i { color: #ffb7c5; }

.search-container input {
    background: transparent; border: none; outline: none;
    color: white; font-family: 'Quicksand', sans-serif; font-weight: bold;
    width: 120px; font-size: 11px;
}
.navbar.scrolled .search-container input { color: #555; }
.search-container input::placeholder { color: rgba(255,255,255,0.7); }

/* --- HERO SECTION (Scaled) --- */
.hero {
    position: relative; 
    height: 350px; /* Fixed smaller height for iPad screen */
    width: 100%;
}

.hero-bg {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background-size: cover; background-position: center;
}

.hero-overlay {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(to top, #fff0f5 0%, transparent 60%, rgba(0,0,0,0.4) 100%);
}

.hero-content {
    position: absolute; bottom: 20px; left: 20px;
    max-width: 350px;
    padding-right: 20px;
}

.hero-title {
    font-family: 'Playfair Display', serif;
    font-size: 32px; /* Smaller Title */
    color: #fff;
    text-shadow: 2px 2px 8px rgba(0,0,0,0.6);
    margin-bottom: 5px; line-height: 1;
}

.hero-meta {
    display: flex; gap: 10px; align-items: center;
    color: #fff; font-weight: bold; margin-bottom: 8px;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.5);
    font-size: 11px;
}
.match-score { color: #ffb7c5; } 
.rating { border: 1px solid #fff; padding: 1px 4px; font-size: 10px; }

.hero-desc {
    color: #fff; font-size: 11px; line-height: 1.3;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.5);
    margin-bottom: 12px;
    display: -webkit-box;
    -webkit-line-clamp: 3; /* Limit text lines */
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.hero-buttons { display: flex; gap: 10px; }

.btn {
    padding: 6px 15px; border-radius: 4px; border: none;
    font-size: 12px; font-weight: bold; cursor: pointer;
    display: flex; align-items: center; gap: 5px;
    text-decoration: none; transition: transform 0.2s;
}
.btn:hover { transform: scale(1.05); }

.play-btn { background: #fff; color: #333; }
.info-btn { background: rgba(109, 109, 110, 0.7); color: white; backdrop-filter: blur(5px); }

/* --- MOVIE ROWS --- */
.main-content {
    position: relative; z-index: 10;
    margin-top: -20px; 
    padding-bottom: 30px;
}

.row { margin-bottom: 20px; padding-left: 20px; }

.row h2 {
    font-family: 'Playfair Display', serif;
    font-size: 16px; color: #555;
    margin-bottom: 8px; display: flex; align-items: center; gap: 5px;
}
.row h2::after { content: '˗ˏˋ ♡ ˎˊ˗'; font-size: 12px; color: #b07781;}

.row-posters {
    display: flex; gap: 10px;
    overflow-y: hidden; overflow-x: scroll;
    padding: 10px 0;
    scroll-behavior: smooth;
}
.row-posters::-webkit-scrollbar { display: none; } 

/* --- MOVIE CARD (Mini) --- */
.movie-card {
    position: relative;
    width: 100px; /* Much smaller width */
    flex-shrink: 0;
    transition: transform 0.3s;
    cursor: pointer;
    border-radius: 6px;
}

.movie-card:hover {
    transform: scale(1.1);
    z-index: 100;
}

.movie-poster {
    width: 100%; height: 150px; /* Adjusted aspect ratio */
    object-fit: cover;
    border-radius: 6px;
    box-shadow: 0 3px 8px rgba(189, 143, 163, 0.4);
}

/* Hover Info Overlay */
.movie-info {
    position: absolute; bottom: 0; left: 0; width: 100%;
    padding: 5px;
    background: rgba(255, 255, 255, 0.95);
    border-radius: 0 0 6px 6px;
    opacity: 0; transition: opacity 0.3s;
    text-align: center;
}
.movie-card:hover .movie-info { opacity: 1; }

.movie-title { font-size: 10px; font-weight: bold; color: #d88998; margin-bottom: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.movie-rating { color: #ffb7c5; font-size: 8px; }

/* --- SEARCH RESULTS --- */
.hidden { display: none; }
#search-results-area { padding: 20px; min-height: 50vh; }
.movie-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); /* Responsive grid */
    gap: 10px;
}