Redesign movie and show search pages with new UI

Major UI/UX overhaul for SearchMovies.razor and SearchShows.razor, including new navigation toggles, animated search forms, improved results display, and enhanced styling. Moved layout and header styles from MainLayout.razor to CSS, unified button styles on Home.razor, and added interactive elements and animations for a more engaging user experience.

MovieActorLookup/Components/Layout/MainLayout.razor

@@ -28,42 +28,4 @@
         height: 100vh;
         overflow: hidden;
     }
-
-    .sidebar {
-        width: 250px;
-        background: #ffffff;
-        border-right: 1px solid rgba(0, 0, 0, 0.06);
-        position: relative;
-        z-index: 100;
-    }
-
-    .main-content {
-        flex: 1;
-        display: flex;
-        flex-direction: column;
-        min-height: 0;
-        width: 100%;
-    }
-
-    .top-row {
-        background: rgba(255, 255, 255, 0.95);
-        border-bottom: 1px solid rgba(0, 0, 0, 0.06);
-        display: flex;
-        justify-content: flex-end;
-        align-items: center;
-        height: 3.5rem;
-        padding: 0 24px;
-    }
-
-        .top-row a {
-            color: #6c757d;
-            text-decoration: none;
-            font-weight: 500;
-            font-size: 14px;
-            transition: color 0.2s ease;
-        }
-
-            .top-row a:hover {
-                color: #667eea;
-            }
 </style>

MovieActorLookup/Components/Layout/MainLayout.razor.css

@@ -8,34 +8,6 @@ main {
     flex: 1;
 }
 
-.sidebar {
-    background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%);
-}
-
-.top-row {
-    background-color: #f7f7f7;
-    border-bottom: 1px solid #d6d5d5;
-    justify-content: flex-end;
-    height: 3.5rem;
-    display: flex;
-    align-items: center;
-}
-
-    .top-row ::deep a, .top-row ::deep .btn-link {
-        white-space: nowrap;
-        margin-left: 1.5rem;
-        text-decoration: none;
-    }
-
-    .top-row ::deep a:hover, .top-row ::deep .btn-link:hover {
-        text-decoration: underline;
-    }
-
-    .top-row ::deep a:first-child {
-        overflow: hidden;
-        text-overflow: ellipsis;
-    }
-
 @media (max-width: 640.98px) {
     .top-row {
         justify-content: space-between;