body {
           font-family: sans-serif;
           margin: 0;
           background-color: #f4f4f4;
           display: flex;
           justify-content: center;
       }

       .container {
           width: 100%;
           max-width: 400px;
           min-height: 100vh;
           background-color: white;
           border: 1px solid #e0e0e0;
           box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
           display: flex;
           flex-direction: column;
       }

       .header {
           display: flex;
           align-items: center;
           justify-content: space-between;
           padding: 0 15px;
           height: 70px;
           box-sizing: border-box;
       }

       .header h1 {
           display: flex;
           align-items: center;
           font-size: 1.2em;
           margin: 0;
           flex-grow: 1;
           justify-content: center;
       }

       .header h1 .header-logo-img {
           height: 70px;
           width: auto;
       }

       .header .cart-link {
           text-decoration: none;
           color: inherit;
           display: flex;
           align-items: center;
       }

       .header .cart-icon {
           font-size: 1.5em;
           color: #555;
           flex-shrink: 0;
           cursor: pointer;
       }

       .header .cart-link:hover .cart-icon {
           opacity: 0.8;
       }

       .search-bar {
           padding: 10px;
           background-color: white;
       }

       .search-input-container {
           display: flex;
           align-items: center;
           background-color: #f0f0f0;
           border-radius: 25px;
           padding: 10px 15px;
       }

       .search-input-container .search-icon {
           margin-right: 10px;
           color: #777;
       }

       .search-input-container input {
           flex-grow: 1;
           border: none;
           background-color: transparent;
           outline: none;
           font-size: 1em;
       }

       .search-input-container .clear-icon {
           margin-left: 10px;
           color: #aaa;
           cursor: pointer;
       }

       .content-list {
           flex-grow: 1;
           padding: 0 15px;
           overflow-y: auto;
       }

       .restaurant-item {
           display: flex;
           align-items: center;
           padding: 15px 0;
           border-bottom: 1px solid #eee;
       }

       .restaurant-item:last-child {
           border-bottom: none;
       }

       .restaurant-item img {
           width: 80px;
           height: 80px;
           border-radius: 8px;
           margin-right: 15px;
           object-fit: cover;
           background-color: #eee;
       }

       .restaurant-info {
           flex-grow: 1;
           display: flex;
           justify-content: space-between;
       }

       .restaurant-info .details h2 {
           font-size: 1.1em;
           margin: 0 0 5px 0;
       }

       .restaurant-info .details p {
           font-size: 0.9em;
           margin: 0;
       }

       .restaurant-info .rating {
           display: flex;
           flex-direction: column;
           align-items: flex-end;
           min-width: 60px;
       }

       .restaurant-info .rating .star {
           font-size: 1em;
           color: #ffc107;
           margin-bottom: 5px;
       }

       .restaurant-info .rating .reviews {
           font-size: 0.9em;
       }

       .bottom-nav {
           display: flex;
           justify-content: space-around;
           align-items: center;
           padding: 10px 0;
           border-top: 1px solid #eee;
           background-color: white;
       }

       .bottom-nav a {
           color: #555;
           font-size: 1.5em;
           text-decoration: none;
           padding: 5px 10px;
           transition: color 0.2s;
       }

       .bottom-nav a:hover,
       .bottom-nav a.active {
           color: #007bff;
       }