location search beta 1

frontend/styles.css

@@ -257,6 +257,86 @@ body {
     transition: var(--transition);
 }
 
+/* Location Search */
+.location-search {
+    margin-bottom: 1rem;
+}
+
+.location-input-group {
+    display: flex;
+    gap: 0.75rem;
+    align-items: center;
+    justify-content: center;
+    flex-wrap: wrap;
+}
+
+.postcode-input {
+    width: auto;
+    max-width: 180px;
+    padding: 0.6rem 1rem;
+    font-size: 0.95rem;
+    text-transform: uppercase;
+}
+
+.radius-select {
+    width: auto;
+    min-width: 100px;
+}
+
+.location-btn {
+    padding: 0.6rem 1.25rem;
+    font-size: 0.9rem;
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+}
+
+.location-clear-btn {
+    padding: 0.6rem 1rem;
+    font-size: 0.9rem;
+    background: var(--bg-secondary);
+    color: var(--text-secondary);
+    border: 1px solid var(--border-color);
+    border-radius: var(--radius-md);
+    cursor: pointer;
+    transition: var(--transition);
+}
+
+.location-clear-btn:hover {
+    background: var(--border-color);
+    color: var(--text-primary);
+}
+
+.location-info {
+    text-align: center;
+    margin-bottom: 1rem;
+    padding: 0.75rem 1.25rem;
+    background: var(--accent-teal);
+    color: var(--text-inverse);
+    border-radius: var(--radius-md);
+    font-size: 0.9rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.5rem;
+}
+
+.location-info svg {
+    width: 16px;
+    height: 16px;
+}
+
+.distance-badge {
+    display: inline-block;
+    padding: 0.25rem 0.5rem;
+    background: var(--accent-teal);
+    color: var(--text-inverse);
+    border-radius: var(--radius-sm);
+    font-size: 0.75rem;
+    font-weight: 600;
+    margin-left: 0.5rem;
+}
+
 .filter-select:focus {
     outline: none;
     border-color: var(--accent-teal);
@@ -1056,6 +1136,26 @@ body {
         flex-direction: column;
     }
     
+    .location-input-group {
+        flex-direction: column;
+        width: 100%;
+    }
+    
+    .postcode-input {
+        max-width: 100%;
+        width: 100%;
+    }
+    
+    .radius-select {
+        width: 100%;
+    }
+    
+    .location-btn,
+    .location-clear-btn {
+        width: 100%;
+        justify-content: center;
+    }
+    
     .schools-grid {
         grid-template-columns: 1fr;
     }