/* --- Global Reset & Base Styles --- */
{ box-sizing: border-box; }
body {
font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
background-color: #f4f7f6;
margin: 0;
color: #333;
line-height: 1.6;
}
/* --- Navigation Bar Base --- */
.nav-bar {
    background: white;
    padding: 10px 50px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    position: sticky;
    top: 0;
    z-index: 1000;
}

.logo { font-size: 24px; font-weight: bold; color: #00ab6b; text-decoration: none; }

/* Hide the checkbox */
.nav-toggle { display: none; }

/* Desktop Navigation */
.nav-links { display: flex; align-items: center; }
.nav-links a {
    text-decoration: none;
    color: #555;
    margin-left: 25px;
    font-weight: 500;
    transition: 0.3s;
}
.nav-links a:hover { color: #00ab6b; }
.btn-upload { background: #00ab6b; color: white !important; padding: 8px 20px; border-radius: 25px; }

/* --- Mobile Navigation Logic --- */
@media (max-width: 768px) {
    .nav-bar { padding: 15px 20px; }

    /* Show the hamburger icon */
    .nav-toggle-label {
        display: block;
        cursor: pointer;
        padding: 10px;
    }
    .nav-toggle-label span, .nav-toggle-label span::before, .nav-toggle-label span::after {
        display: block;
        background: #333;
        height: 3px;
        width: 25px;
        border-radius: 2px;
        position: relative;
    }
    .nav-toggle-label span::before, .nav-toggle-label span::after { content: ''; position: absolute; }
    .nav-toggle-label span::before { bottom: 8px; }
    .nav-toggle-label span::after { top: 8px; }

    /* The Hidden Menu */
    .nav-links {
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        background: white;
        flex-direction: column;
        align-items: flex-start;
        padding: 0;
        height: 0; /* Hidden by default */
        overflow: hidden;
        transition: all 0.3s ease-in-out;
        box-shadow: 0 5px 10px rgba(0,0,0,0.1);
    }

    .nav-links a {
        width: 100%;
        padding: 15px 25px;
        margin: 0;
        border-bottom: 1px solid #f4f4f4;
    }

    /* Logic: When checkbox is checked, show the menu */
    .nav-toggle:checked ~ .nav-links {
        height: auto; /* Menu drops down */
        padding-bottom: 20px;
    }

    /* Adjust the upload button for mobile dropdown */
    .btn-upload {
        background: transparent;
        color: #00ab6b !important;
        padding: 15px 25px;
        border-radius: 0;
    }
}
/* --- Search Section (From previous steps) --- */
.search-container {
background: #fff;
padding: 60px 20px;
text-align: center;
border-bottom: 1px solid #eee;
}
.search-container h1 { font-size: 32px; margin-bottom: 20px; }
/* --- Improved Gallery Grid --- */
.gallery {
display: grid;
/ Desktop: Uses 350px min-width */
grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
gap: 30px;
padding: 40px;
max-width: 1400px;
margin: 0 auto;
}
.image-card {
background: white;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 4px 15px rgba(0,0,0,0.05);
display: flex;
flex-direction: column;
transition: transform 0.3s ease;
}
.image-card:hover { transform: translateY(-5px); }
.image-card img {
width: 100%;
height: 280px;
object-fit: cover;
display: block;
}
/* --- Desktop Image Info (Larger Text Request) --- */
.info {
padding: 20px;
flex-grow: 1;
}
.info h3 {
margin: 0 0 10px 0;
font-size: 20px; /* Larger for desktop */
color: #2c3e50;
}
.author-tag, .category-tag {
font-size: 15px; /* Larger for desktop */
color: #666;
margin-bottom: 8px;
display: block;
}
/* --- Buttons (Larger Text Request) --- */
.mini-download-btn {
display: block;
background: #00ab6b;
color: white;
text-decoration: none;
padding: 12px; /* Larger padding */
border-radius: 6px;
font-size: 16px; /* Larger font size */
font-weight: bold;
text-align: center;
transition: background 0.2s;
}
.mini-download-btn:hover { background: #008f59; color: white; }
.mini-download-btn small { font-size: 12px; opacity: 0.9; display: block; }
/* --- Centered Layout for Login/Register --- */
.auth-container {
display: flex;
justify-content: center;
align-items: center;
min-height: 80vh; /* Using 80 instead of 90 to allow for mobile nav bars */
padding: 20px;
}
.auth-card {
background: white;
padding: 40px;
border-radius: 12px;
box-shadow: 0 10px 25px rgba(0,0,0,0.05);
width: 100%;
max-width: 420px; /* Slightly wider for desktop */
text-align: center;
}
.auth-card h2 {
margin-bottom: 25px;
font-weight: 600;
color: #2c3e50;
font-size: 28px;
}
/* Form Elements */
.auth-card input, .auth-card select {
width: 100%;
padding: 14px 15px; /* Slightly taller for easier tapping */
margin-bottom: 15px;
border: 1px solid #ddd;
border-radius: 8px;
outline: none;
font-size: 16px; /* CRITICAL: Prevents iOS auto-zoom */
transition: border 0.3s;
}
.auth-card input:focus {
border-color: #00ab6b;
box-shadow: 0 0 0 3px rgba(0, 171, 107, 0.1);
}
.auth-card button {
width: 100%;
padding: 14px;
background-color: #00ab6b;
color: white;
border: none;
border-radius: 8px;
font-size: 18px; /* Larger text as requested */
font-weight: bold;
cursor: pointer;
transition: background 0.3s;
margin-top: 10px;
}
/* MOBILE AUTH OPTIMIZATIONS */
@media (max-width: 768px) {
.auth-container {
padding: 10px;
min-height: 70vh; /* Adjust for mobile viewports */
align-items: flex-start; /* Start from top on small screens if keyboard opens */
margin-top: 20px;
}

.auth-card {
    padding: 30px 20px;
    border-radius: 10px;
    box-shadow: none; /* Cleaner look on mobile */
    background: transparent; /* Makes it feel more integrated */
}

/* Make the links at the bottom easier to tap */
.auth-card p {
    font-size: 16px;
    line-height: 1.8;
}

.auth-card h2 {
    font-size: 24px;
}
}
/* --- Utility Classes --- */
.msg { padding: 12px; border-radius: 6px; margin-bottom: 20px; font-size: 15px; text-align: center; }
.msg-error { background: #fee2e2; color: #b91c1c; border: 1px solid #f87171; }
.msg-success { background: #dcfce7; color: #15803d; border: 1px solid #4ade80; }
/* Progress Bar */
#progress-container { width: 100%; background: #eee; border-radius: 10px; margin: 20px 0; display: none; height: 10px; overflow: hidden; }
#progress-bar { width: 0%; height: 100%; background: #00ab6b; transition: width 0.2s; }