/* css/style.css */
    /* General Reset and Base Styles */
    * {
        box-sizing: border-box;
        margin: 0;
        padding: 0;
    }

    body {
        font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
        background-color: #f4f4f9;
        color: #333;
        line-height: 1.6;
        display: flex;
        flex-direction: column;
        min-height: 100vh;
        font-size: 16px;
        /* Base font size for better readability */
    }

    .container {
        width: 90%;
        max-width: 800px;
        /* Max width for content */
        margin: 20px auto;
        padding: 20px;
        background-color: #fff;
        border-radius: 8px;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    }

    /* Header and Navigation */
    header {
        background-color: #007bff;
        /* A pleasant blue */
        color: #fff;
        padding: 15px 0;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }

    header .nav-container {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 90%;
        max-width: 1000px;
        /* Wider for nav */
        margin: 0 auto;
        padding: 0;
        /* Reset container padding */
        background-color: transparent;
        /* Reset container background */
        box-shadow: none;
        /* Reset container shadow */
    }

    header h1 {
        font-size: 1.8em;
        margin: 0;
    }

    header nav a,
    header nav .button-link {
        color: #fff;
        text-decoration: none;
        margin-left: 15px;
        padding: 8px 12px;
        border-radius: 5px;
        transition: background-color 0.3s ease;
    }

    header nav a:hover,
    header nav .button-link:hover {
        background-color: #0056b3;
        /* Darker blue on hover */
    }

    header nav a.active {
        background-color: #0056b3;
        font-weight: bold;
    }

    .button-link {
        background: none;
        border: none;
        color: white;
        font-family: inherit;
        font-size: inherit;
        cursor: pointer;
    }


    /* Forms */
    form {
        margin-top: 20px;
    }

    form div {
        margin-bottom: 15px;
    }

    label {
        display: block;
        margin-bottom: 5px;
        font-weight: bold;
        color: #555;
    }

    input[type="email"],
    input[type="password"],
    input[type="text"],
    input[type="date"],
    input[type="file"],
    select,
    textarea {
        width: 100%;
        padding: 12px;
        /* Increased padding */
        border: 1px solid #ddd;
        border-radius: 5px;
        font-size: 1em;
        /* Ensure consistent font size */
    }

    textarea {
        resize: vertical;
        min-height: 80px;
    }

    button[type="submit"],
    .button {
        background-color: #28a745;
        /* Green for primary actions */
        color: white;
        padding: 12px 20px;
        /* Increased padding */
        border: none;
        border-radius: 5px;
        cursor: pointer;
        font-size: 1.1em;
        /* Larger font for buttons */
        transition: background-color 0.3s ease;
        text-decoration: none;
        /* For <a> styled as buttons */
        display: inline-block;
        /* For <a> styled as buttons */
    }

    button[type="submit"]:hover,
    .button:hover {
        background-color: #218838;
        /* Darker green */
    }

    /* Messages and Notifications */
    #message,
    #profileMessage,
    #matchNotification {
        padding: 10px;
        margin-top: 15px;
        border-radius: 5px;
        text-align: center;
    }

    .success-message {
        background-color: #d4edda;
        color: #155724;
        border: 1px solid #c3e6cb;
    }

    .error-message {
        background-color: #f8d7da;
        color: #721c24;
        border: 1px solid #f5c6cb;
    }

    #matchNotification {
        /* Specific styling for match pop-up */
        background-color: #e6ffed;
        /* Light, celebratory green */
        color: #006200;
        border: 1px solid #a3e0a3;
        font-weight: bold;
    }


    /* Index Page Specific */
    .tagline {
        font-size: 1.2em;
        text-align: center;
        margin: 10px 0 30px;
        color: #555;
    }

    .navigation ul {
        list-style-type: none;
        padding: 0;
        text-align: center;
        margin-bottom: 30px;
    }

    .navigation ul li {
        display: inline-block;
        margin: 0 10px;
    }

    .info {
        background-color: #e9ecef;
        padding: 20px;
        border-radius: 5px;
    }

    /* Profile Page Specific */
    #profile_picture_display {
        display: block;
        width: 120px;
        /* Larger display */
        height: 120px;
        border-radius: 50%;
        object-fit: cover;
        margin-bottom: 10px;
        border: 3px solid #eee;
    }

    /* Dashboard - Swiping Interface */
    #swiping-interface {
        margin-top: 20px;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .profile-card {
        background-color: #fff;
        border: 1px solid #ddd;
        border-radius: 15px;
        /* More rounded */
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
        width: 100%;
        max-width: 380px;
        /* Typical card width */
        overflow: hidden;
        margin-bottom: 20px;
        position: relative;
        /* For potential future animations or overlays */
        transition: transform 0.3s ease-out;
        /* For swipe animation */
    }

    .profile-card img#profileImage {
        width: 100%;
        height: 350px;
        /* Fixed height for image */
        object-fit: cover;
        display: block;
    }

    .profile-card .profile-info {
        padding: 15px;
    }

    .profile-card h3#profileNameAge {
        font-size: 1.6em;
        /* Larger name/age */
        margin-bottom: 5px;
        color: #333;
    }

    .profile-card p#profileCity {
        font-size: 1.1em;
        color: #666;
        margin-bottom: 10px;
    }

    .profile-card p#profileBio {
        font-size: 1em;
        color: #444;
        margin-bottom: 10px;
        min-height: 60px;
        /* Ensure some space for bio */
    }

    .profile-card p#profileInterests {
        font-size: 0.9em;
        color: #555;
    }

    .profile-card p#profileInterests span {
        font-weight: normal;
    }


    .swipe-actions {
        display: flex;
        justify-content: space-around;
        /* Space out buttons */
        width: 100%;
        max-width: 380px;
    }

    .swipe-actions button {
        font-size: 1.5em;
        /* Larger icons/text */
        padding: 15px 25px;
        /* Generous padding */
        border-radius: 50%;
        /* Circular buttons */
        width: 80px;
        /* Fixed width */
        height: 80px;
        /* Fixed height */
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    }

    #likeBtn {
        background-color: #28a745;
        /* Green */
        color: white;
    }

    #likeBtn:hover {
        background-color: #218838;
    }

    #dislikeBtn {
        background-color: #dc3545;
        /* Red */
        color: white;
    }

    #dislikeBtn:hover {
        background-color: #c82333;
    }

    #noMoreProfiles {
        padding: 30px;
        text-align: center;
        color: #777;
    }

    #noMoreProfiles h3 {
        font-size: 1.4em;
        margin-bottom: 10px;
    }


    /* Matches Page */
    #matchesList {
        margin-top: 20px;
    }

    .match-item {
        display: flex;
        align-items: center;
        background-color: #fff;
        border: 1px solid #e0e0e0;
        padding: 15px;
        margin-bottom: 10px;
        border-radius: 8px;
        transition: box-shadow 0.2s ease-in-out;
    }

    .match-item:hover {
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    }

    .match-item img {
        width: 70px;
        /* Larger image */
        height: 70px;
        border-radius: 50%;
        object-fit: cover;
        margin-right: 15px;
    }

    .match-item .match-info {
        flex-grow: 1;
    }

    .match-item h3 {
        margin: 0 0 5px 0;
        font-size: 1.2em;
    }

    .match-item p {
        margin: 0;
        color: #666;
        font-size: 0.9em;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 300px;
        /* Adjust as needed */
    }

    .match-item .unread-badge {
        background-color: #007bff;
        color: white;
        border-radius: 50%;
        padding: 3px 7px;
        font-size: 0.75em;
        margin-left: 8px;
        display: inline-block;
        /* To sit next to text */
    }


    .match-item .chat-button {
        background-color: #007bff;
        color: white;
        padding: 8px 15px;
        border: none;
        border-radius: 5px;
        cursor: pointer;
        font-size: 0.9em;
    }

    .match-item .chat-button:hover {
        background-color: #0056b3;
    }

    /* Chat Page */
    #chatWindow {
        border: 1px solid #ddd;
        border-radius: 8px;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        height: 60vh;
        /* Or a fixed height like 500px */
        max-height: 500px;
        margin-top: 15px;
    }

    #messagesContainer {
        flex-grow: 1;
        padding: 15px;
        overflow-y: auto;
        background-color: #f9f9f9;
    }

    .message {
        margin-bottom: 12px;
        max-width: 75%;
        padding: 10px 15px;
        border-radius: 18px;
        /* More bubbly */
        word-wrap: break-word;
    }

    .message p {
        margin: 0;
        font-size: 1em;
    }

    .message .timestamp {
        display: block;
        font-size: 0.75em;
        color: #888;
        margin-top: 4px;
        text-align: right;
    }

    .message.self {
        background-color: #007bff;
        /* Blue for own messages */
        color: white;
        margin-left: auto;
        /* Align to right */
        border-bottom-right-radius: 5px;
        /* Flat corner for speech bubble effect */
    }

    .message.self .timestamp {
        color: #e0e0e0;
    }

    .message.other {
        background-color: #e9e9eb;
        /* Grey for other's messages */
        color: #333;
        margin-right: auto;
        /* Align to left */
        border-bottom-left-radius: 5px;
        /* Flat corner */
    }

    .message.other .timestamp {
        text-align: left;
    }


    #messageForm {
        display: flex;
        padding: 10px;
        background-color: #f1f1f1;
        border-top: 1px solid #ddd;
    }

    #messageForm textarea {
        flex-grow: 1;
        margin-right: 10px;
        border-radius: 20px;
        /* Pill shape */
        padding: 10px 15px;
        min-height: 40px;
        /* Adjust for single line initially */
        height: 40px;
        resize: none;
        /* Prevent manual resize, allow auto-grow via JS if desired */
    }

    #messageForm button {
        background-color: #007bff;
        padding: 10px 20px;
        border-radius: 20px;
        /* Pill shape */
    }

    #messageForm button:hover {
        background-color: #0056b3;
    }

    /* Small screen adjustments */
    @media (max-width: 600px) {
        body {
            font-size: 15px;
        }

        .container {
            width: 95%;
            margin: 10px auto;
            padding: 15px;
        }

        header h1 {
            font-size: 1.5em;
        }

        header nav a,
        header nav .button-link {
            margin-left: 8px;
            padding: 6px 10px;
            font-size: 0.9em;
        }

        input[type="email"],
        input[type="password"],
        input[type="text"],
        input[type="date"],
        input[type="file"],
        select,
        textarea {
            padding: 10px;
        }

        button[type="submit"],
        .button {
            padding: 10px 15px;
            font-size: 1em;
        }

        .profile-card {
            max-width: 95%;
        }

        .swipe-actions button {
            font-size: 1.3em;
            padding: 12px 20px;
            width: 70px;
            height: 70px;
        }

        .match-item {
            padding: 10px;
        }

        .match-item img {
            width: 50px;
            height: 50px;
            margin-right: 10px;
        }

        .match-item h3 {
            font-size: 1.1em;
        }

        #chatWindow {
            height: 70vh;
            /* More height on mobile */
        }
    }