/* --- BUNK & RATIONS: PRO MOBILE UI --- */
/* --- THE MOBILE RESPONSIVE LOCK --- */
* {
    box-sizing: border-box; /* Forces padding to stay inside the box */
    word-wrap: break-word;  /* Prevents long emails/links from stretching the screen */
}

html, body {
    max-width: 100%;
    overflow-x: hidden; /* Instantly kills all horizontal scrolling */
}
body { font-family: 'Segoe UI', Arial, sans-serif; margin: 0; padding: 0; background-color: #f3f4f6; color: #333; padding-bottom: 90px; }

/* --- THE NEW NAVIGATION MENU --- */
.header-container { display: flex; justify-content: space-between; align-items: center; }
.menu-btn { background: none; border: none; color: white; font-size: 1.8rem; cursor: pointer; }
.side-menu { height: 100%; width: 0; position: fixed; z-index: 2000; top: 0; left: 0; background-color: #1e293b; overflow-x: hidden; transition: 0.3s; padding-top: 60px; box-shadow: 2px 0 5px rgba(0,0,0,0.5); }
.side-menu a { padding: 15px 25px; text-decoration: none; font-size: 1.2rem; color: white; display: block; transition: 0.2s; }
.side-menu a:hover { color: #eab308; }
.close-btn { position: absolute; top: 10px; right: 20px; font-size: 2.5rem; }

header { background-color: #1e293b; color: white; padding: 22px; text-align: center; border-bottom: 6px solid #eab308; }
h1 { margin: 0; text-transform: uppercase; letter-spacing: 2px; font-size: 1.7rem; }

.hero { text-align: center; padding: 25px 20px 15px 20px; }
.hero p { color: #4b5563; font-size: 1.1rem; margin-bottom: 15px; margin-top: 0; }

.search-container { 
    display: flex; 
    justify-content: center; 
    gap: 8px; 
    width: 100%; /* Ensures the container respects screen edges */
    max-width: 380px; 
    margin: 0 auto; 
}

input { 
    flex: 1; 
    min-width: 0; /* The magic rule! Allows the text box to shrink on small phones */
    padding: 14px 10px; /* Slightly reduced side padding to save space */
    font-size: 1.1rem; 
    text-align: center; 
    border: 1px solid #9ca3af; 
    border-radius: 6px; 
    background-color: white; 
    color: #333; 
}

input::placeholder { color: #6b7280; }
input:focus { outline: none; border-color: #1d1eb0; }

/* The GPS & Enter Buttons */
.gps-btn, .ok-btn {
    flex-shrink: 0; /* Protects the buttons so they NEVER get squished */
}

.gps-btn { 
    background-color: #eab308; border: none; padding: 0 15px; border-radius: 6px; 
    cursor: pointer; font-size: 1.2rem; box-shadow: 0 2px 4px rgba(0,0,0,0.1); 
}

.ok-btn { 
    padding: 12px 18px; font-size: 1.1rem; background-color: #1d1eb0; color: white; 
    border: none; border-radius: 6px; cursor: pointer; font-weight: bold; box-shadow: 0 2px 4px rgba(0,0,0,0.1); 
}

.gps-btn:active, .ok-btn:active { transform: scale(0.95); }

/* The GPS & Enter Buttons */
.gps-btn { background-color: #eab308; border: none; padding: 0 15px; border-radius: 6px; cursor: pointer; font-size: 1.2rem; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
.ok-btn { padding: 12px 18px; font-size: 1.1rem; background-color: #1d1eb0; color: white; border: none; border-radius: 6px; cursor: pointer; font-weight: bold; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
.gps-btn:active, .ok-btn:active { transform: scale(0.95); }

.card-container { display: flex; flex-direction: column; gap: 15px; padding: 0 20px 20px 20px; max-width: 450px; margin: 0 auto; }
.card { background: white; padding: 15px 20px; border-radius: 8px; display: flex; align-items: center; cursor: pointer; box-shadow: 0 2px 4px rgba(0,0,0,0.05); border-left: 10px solid #ccc; transition: transform 0.1s; }
.card:active { transform: scale(0.98); }

.card-food { border-left-color: #22c55e; } 
.card-shelter { border-left-color: #3b82f6; } 
.card-vet { border-left-color: #eab308; } 

.icon { font-size: 2.2rem; margin-right: 15px; }
.card-text strong { display: block; font-size: 1.2rem; margin-bottom: 3px; color: #1e293b; }
.card-text span { color: #64748b; font-size: 0.9rem; }

footer { background-color: #1d1eb0; color: white; text-align: center; padding: 15px 10px; position: fixed; bottom: 0; width: 100%; box-sizing: border-box; font-weight: bold; font-size: 0.95rem; box-shadow: 0 -4px 10px rgba(0,0,0,0.2); z-index: 1000; }
footer a { color: white; text-decoration: underline; font-size: 1.1rem; margin: 0 2px; }