@import url('https://fonts.googleapis.com/css2?family=Vazirmatn:wght@400;700&display=swap');

body { background: #121826; color: white; font-family: 'Vazirmatn', sans-serif; margin: 0; padding: 0; text-align: center; overflow-x: hidden; }

header { background-color: #0f172a; color: white; padding: 15px 20px; text-align: center; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); position: relative; z-index: 10; }

header h1 { font-size: 32px; font-weight: bold; color: #60a5fa; text-shadow: 0 0 10px rgba(255, 255, 255, 0.6); }

.menu-btn { position: absolute; left: 20px; top: 50%; transform: translateY(-50%); font-size: 28px; cursor: pointer; background: none; border: none; color: white; }

.menu { position: absolute; left: 20px; top: 60px; background: #1e293b; border-radius: 8px; display: none; flex-direction: column; padding: 10px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); z-index: 9; }

.menu a { color: white; text-decoration: none; padding: 10px; display: block; transition: background 0.3s; }

.menu a:hover { background: #334155; }

.search-box { margin: 20px auto; width: 80%; max-width: 350px; position: relative; }

.search-box input { width: 100%; padding: 10px; font-size: 16px; border-radius: 8px; border: none; outline: none; text-align: center; }

.movies-wrapper { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 15px; padding: 20px; }

.movie-card { background: rgba(255, 255, 255, 0.1); border-radius: 12px; text-align: center; cursor: pointer; padding: 8px; transition: transform 0.3s ease, opacity 0.3s ease; }

.movie-card:hover { transform: scale(1.05); opacity: 1; }

.movie-card img { width: 100%; height: 140px; object-fit: cover; border-radius: 8px; }

.movie-title { margin-top: 8px; color: white; font-size: 14px; font-weight: bold; }

.no-results-card { background: rgba(255, 0, 0, 0.2); color: white; padding: 15px; border-radius: 12px; margin: 20px auto; width: 80%; max-width: 350px; animation: fadeIn 1s; }

@keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } }

.product-page { background: #1e293b; padding: 20px; border-radius: 12px; text-align: center; }

.product-page img { width: 100%; max-width: 400px; border-radius: 12px; }

.product-title { font-size: 28px; color: #60a5fa; margin-top: 20px; }

.product-description { color: white; margin-top: 10px; font-size: 16px; }

.share-button { margin-top: 20px; padding: 12px 30px; background: #60a5fa; color: white; border: none; border-radius: 8px; cursor: pointer; font-size: 18px; }

.share-button:hover { background: #3b82f6; }