/* ========================================================================= */
/* DWELLER REFINED MODERN AESTHETIC STYLES */
/* ========================================================================= */

/* --- Variables --- */
:root {
    --primary-color: #ff5a5f; /* Airbnb Red */
    --secondary-color: #00a699; /* Teal/Accent (for success messages, certain buttons) */
    --text-dark: #222222;
    --text-light: #717171;
    --background-light: #ffffff;
    --border-color: #e4e4e4;
    --card-radius: 16px;
    --small-radius: 8px;
    --font-primary: 'Inter', -apple-system, BlinkMacMacFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --shadow-subtle: 0 1px 3px rgba(0, 0, 0, 0.05);
}

/* ---------------- Reset & Base ---------------- */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: var(--font-primary);
    background: #f7f7f7; /* Light gray background for contrast */
    color: var(--text-dark);
    line-height: 1.6;
    width: 100%;
    overflow-x: hidden; 
}
}

a {
    text-decoration: none;
    color: var(--text-dark);
    transition: color 0.2s;
}

/* --- Inbox Page Styles (inbox.php) --- */
.inbox-list {
    display: flex;
    flex-direction: column;
    gap: 1px; /* Subtle separator */
    background: #ffffff;
    border: 1px solid var(--border-color);
    border-radius: var(--card-radius);
    overflow: hidden; /* Contains the border-radius */
    max-width: 800px; /* Optional: Constrain the list width */
    margin: 0 auto; /* Center the list */
}

.inbox-item {
    display: flex;
    align-items: center;
    padding: 15px 20px;
    background-color: var(--background-light);
    border-bottom: 1px solid #f7f7f7; /* Very subtle separator */
    transition: background-color 0.15s ease;
}

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

.inbox-item:hover {
    background-color: #f9f9f9;
}

.inbox-item .profile-pic {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    object-fit: cover;
    margin-right: 15px;
    flex-shrink: 0;
    border: 1px solid var(--border-color);
}

.inbox-content {
    flex-grow: 1;
    min-width: 0; /* Ensures content respects the flex container */
}

.inbox-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 3px;
}

.chatter-name {
    font-weight: 600;
    color: var(--text-dark);
    font-size: 1rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-right: 10px;
}

.last-message-time {
    font-size: 0.75rem;
    color: var(--text-light);
    flex-shrink: 0; /* Prevents time from shrinking */
}

.last-message-text {
    color: var(--text-light);
    font-size: 0.9rem;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ---------------- Utility & Buttons ---------------- */
.btn, .btn-small, .logout-form button, .primary-btn {
    display: inline-block;
    padding: 0.6rem 1.2rem;
    border-radius: var(--small-radius);
    cursor: pointer;
    font-weight: 600;
    transition: background-color 0.2s, opacity 0.2s, transform 0.1s;
    border: none;
    text-align: center;
    font-size: 0.95rem;
    line-height: 1; 
    vertical-align: middle; 
}
.btn, .logout-form button, .auth-card button, .primary-btn {
    background: var(--primary-color);
    color: #fff;
    box-shadow: 0 2px 4px rgba(255, 90, 95, 0.2);
}
.btn:hover, .logout-form button:hover, .auth-card button:hover, .primary-btn:hover {
    background: #e64d52;
    transform: translateY(-1px);
}
.btn-small {
    /* Standard padding restored for clean look */
    padding: 0.4rem 0.8rem;
    font-size: 0.85rem;
    vertical-align: middle; 
}

/* Secondary button style (e.g., 'Host your home' if not primary) */
.btn-small:not(.primary-btn) { 
    background: transparent;
    color: var(--text-dark);
    border: 1px solid var(--border-color);
    box-shadow: none;
    padding: 0.5rem 0.9rem;
}
.btn-small:not(.primary-btn):hover {
    background: #f7f7f7;
    border-color: var(--text-light);
    transform: translateY(0);
}


/* DESTRUCTIVE/CANCEL BUTTON */
.btn-small.btn-cancel-booking,
.btn-small.delete-btn 
{
    background: #dc3545; /* Red/Danger color */
    color: #fff;
    box-shadow: 0 2px 4px rgba(220, 53, 69, 0.2);
    border: none;
}
.btn-small.btn-cancel-booking:hover,
.btn-small.delete-btn:hover
{
    background: #c82333;
    transform: translateY(-1px);
}

/* Listing Edit Button */
.btn-small.listing-edit-btn {
    background: #2a6496; /* Blue */
    color: #fff;
    box-shadow: 0 2px 4px rgba(42, 100, 150, 0.2);
}
.btn-small.listing-edit-btn:hover {
    background: #204d74;
    transform: translateY(-1px);
}

/* Listing Delete Button */
.btn-small.listing-delete-btn { 
    background: #d9534f; /* Red */
    color: #fff;
    box-shadow: 0 2px 4px rgba(217, 83, 79, 0.2);
}
.btn-small.listing-delete-btn:hover {
    background: #c9302c;
    transform: translateY(-1px);
}

/* Listing View Live Button */
.btn-small.listing-view-btn {
    background: var(--secondary-color); /* Teal accent color */
    color: #fff;
    box-shadow: 0 2px 4px rgba(0, 166, 153, 0.2);
}
.btn-small.listing-view-btn:hover {
    background: #008f83;
    transform: translateY(-1px);
}

.primary-btn.full-width {
    width: 100%;
    padding: 12px;
    font-size: 1.1rem;
    font-weight: 700;
}
.booking-note {
    color: var(--text-light); 
    text-align: center; 
    margin-top: 10px; 
    font-size: 0.9rem;
}

/* ---------------- Navbar ---------------- */
.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 20px; 
    background: #fff;
    border-bottom: 1px solid var(--border-color);
    position: sticky;
    top: 0;
    z-index: 1000;
    box-shadow: 0 1px 10px rgba(0, 0, 0, 0.05);
}
.nav-logo {
    font-size: 1.8rem;
    font-weight: 800;
    color: var(--primary-color);
}

.nav-right {
    display: flex;
    align-items: center;
    gap: 8px; 
}
.nav-right > .btn-small[href="logout.php"] {
    /* Hide the direct logout link, as it is now in the dropdown menu */
    display: none; 
}

/* ========================================================================= */
/* USER DROPDOWN MENU STYLES (for consolidated buttons) */
/* ========================================================================= */

.user-menu-wrapper {
    position: relative; 
}

/* User Menu Trigger Styling (The visible button in the navbar) */
.user-menu-trigger {
    display: flex;
    align-items: center;
    padding: 6px 10px;
    border: 1px solid var(--border-color);
    border-radius: 50px; 
    transition: box-shadow 0.2s;
    cursor: pointer;
    text-decoration: none;
    background: white;
}
.user-menu-trigger:hover {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.nav-username {
    font-weight: 600;
    color: var(--text-dark);
    font-size: 0.9rem;
}
.nav-pfp {
    width: 32px; 
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--border-color);
    margin-left: 10px; 
}


/* The Hidden Dropdown Box */
.user-dropdown-menu {
    position: absolute;
    top: calc(100% + 10px); /* Position 10px below the trigger */
    right: 0;
    width: 250px;
    background: #fff;
    border: 1px solid var(--border-color);
    border-radius: var(--small-radius);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    padding: 10px 0;
    z-index: 1001; 
    
    /* Initially hidden */
    display: none; 
    opacity: 0;
    transition: opacity 0.2s, transform 0.2s;
    transform: translateY(10px);
}

/* Dropdown Links */
.user-dropdown-menu a {
    display: block;
    padding: 10px 15px;
    font-size: 0.95rem;
    color: var(--text-dark);
    text-decoration: none;
    transition: background-color 0.1s;
}
.user-dropdown-menu a:hover {
    background-color: #f7f7f7;
    color: var(--primary-color);
}
.user-dropdown-menu .logout-link {
    font-weight: 600;
    color: var(--primary-color);
}
.user-dropdown-menu .logout-link:hover {
    background-color: #ffe0e0;
}

.menu-divider {
    border: none;
    border-top: 1px solid var(--border-color);
    margin: 8px 0;
}


/* VISIBLE CLASS TOGGLE (You MUST add JavaScript to toggle 'open' class on .user-menu-wrapper) */
.user-menu-wrapper.open .user-dropdown-menu {
    display: block;
    opacity: 1;
    transform: translateY(0);
}
/* ========================================================================= */
/* END USER DROPDOWN MENU STYLES */
/* ========================================================================= */


/* ========================================================================= */
/* NAV BAR SEARCH FORM STYLES */
/* ========================================================================= */
.nav-center {
    flex-grow: 1; /* Allow the center to take up available space */
    display: flex;
    justify-content: center;
    margin: 0 15px; 
}

.search-form {
    display: flex;
    align-items: center;
    width: 100%;
    max-width: 550px; /* Max width for the search bar */
    background: var(--background-light);
    border: 1px solid var(--border-color);
    border-radius: 50px; 
    padding: 4px 6px 4px 20px; 
    box-shadow: var(--shadow-subtle);
    transition: box-shadow 0.2s, border-color 0.2s;
}

.search-form:focus-within {
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1); 
    border-color: var(--text-light);
}

.search-input {
    flex-grow: 1;
    border: none !important; 
    outline: none !important;
    padding: 8px 0 !important; 
    font-size: 1rem;
    font-family: var(--font-primary);
    background: transparent;
    color: var(--text-dark);
    height: auto !important; 
    margin-top: 0 !important; 
}

.search-input::placeholder {
    color: var(--text-light);
}

.search-button {
    background: var(--primary-color);
    color: #fff;
    border: none;
    border-radius: 50%; 
    width: 38px;
    height: 38px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    font-size: 1.1rem;
    transition: background-color 0.2s;
    box-shadow: 0 2px 4px rgba(255, 90, 95, 0.3);
}

.search-button:hover {
    background: #e64d52; 
}
/* ========================================================================= */
/* END NAV BAR SEARCH FORM STYLES */
/* ========================================================================= */


/* ---------------- Main Layout ---------------- */
.main-container {
    max-width: 1400px;
    margin: 30px auto;
    padding: 0 40px;
}
h2 {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 30px;
}

/* ---------------- Listings Grid ---------------- */
.listings-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px 25px;
}

.listing-card {
    display: block;
    transition: opacity 0.2s;
}
.listing-card:hover {
    opacity: 0.95;
}

/* --- Listing Image --- */
.listing-img-slider {
    position: relative;
    width: 100%;
    height: 280px;
    overflow: hidden;
    border-radius: var(--card-radius);
    margin-bottom: 15px;
    background-color: #eee;
}
.listing-img-slider img.listing-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 0.4s ease-in-out;
}
.listing-img-slider img.listing-img.active {
    opacity: 1;
    position: relative;
}

/* --- Image Carousel Buttons --- */
.listing-img-slider .prev,
.listing-img-slider .next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255,255,255,0.95);
    width: 35px;
    height: 35px;
    border-radius: 50%;
    font-size: 1.2rem;
    color: var(--text-dark);
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: opacity 0.2s;
    z-index: 20;
    cursor: pointer;
}
.listing-card:hover .listing-img-slider .prev,
.listing-card:hover .listing-img-slider .next {
    opacity: 1;
}
.listing-img-slider .prev { left: 15px; }
.listing-img-slider .next { right: 15px; }


/* --- Listing Content (NEW & CLEAN STRUCTURE) --- */

/* 1. Primary Text Block (Title & Location) */
.listing-title {
    font-size: 1.15rem; 
    font-weight: 700;
    color: var(--text-dark); 
    margin-bottom: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.listing-location {
    color: var(--text-light); 
    font-size: 0.95rem;
    font-weight: 400; 
    margin-bottom: 8px; /* Space before Host Name */
}

/* 2. Host Info (Separated for clarity) */
.listing-details {
    /* Use for the host name and the price badge */
    display: block; /* Force blocks for vertical stack */
    margin-top: 5px; /* Space below location */
}

.host-info {
    font-size: 0.9rem;
    color: var(--text-light); 
    margin-bottom: 6px; /* Space between host name and price badge */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
}

.host-name-color {
    font-weight: 600; 
    color: var(--secondary-color); /* Use Teal accent for the name only */
}

/* 3. The Colorful, Rounded Price Badge (The "Shoul Button") */
.price-badge {
    /* Make the badge stand out visually, sitting on its own line */
    background: var(--primary-color); /* Red background */
    color: #fff; /* White text */
    padding: 6px 10px; /* Slightly reduced horizontal padding */
    border-radius: 50px; /* Full rounding for the 'round button' look */
    font-size: 0.9rem; /* Slightly smaller text inside the badge */
    display: inline-flex; /* Use inline-flex to shrink to content width */
    align-items: center;
    box-shadow: 0 2px 5px rgba(255, 90, 95, 0.4); 
    transition: background-color 0.2s;
}

.price-badge:hover {
    background: #e64d52; 
}

.price-amount-color {
    font-weight: 800; /* Extra bold currency amount */
    font-size: 1.0rem; /* Prominent size for the amount */
    margin-right: 3px; 
    color: inherit; 
}

.price-suffix {
    font-weight: 500;
    color: inherit; 
}

/* ========================================================================= */
/* LISTING DETAIL PAGE */
/* ========================================================================= */

.listing-detail-view {
    max-width: 1200px;
    margin: 2rem auto;
}

.detail-title {
    font-size: 2.5rem;  
    font-weight: 700;  
    margin-bottom: 0.5rem;
}
.detail-subtitle {
    font-size: 1.1rem;  
    color: var(--text-light);  
    margin-bottom: 2rem;
}

/* --- Image Collage Grid --- */
.detail-img-grid {
    display: grid;
    /* Adjusted grid to prevent too many columns on detail page */
    grid-template-columns: 1fr 1fr;  
    grid-template-rows: 200px 200px;
    gap: 10px;
    height: 400px;  
    overflow: hidden;
    border-radius: var(--card-radius);
    margin-bottom: 3rem;
    position: relative;
}
.detail-img-grid img {
    object-fit: cover;
    width: 100%;
    height: 100%;
    cursor: pointer;
    transition: opacity 0.2s;
}
.detail-img-grid img:hover {
    opacity: 0.9;
}
/* Large image spanning two rows */
.detail-img-grid img:first-child {
    grid-row: 1 / 3;
    border-top-left-radius: var(--card-radius);  
    border-bottom-left-radius: var(--card-radius);
}
/* Specific corner radii for the smaller images */
.detail-img-grid img:nth-child(2) { border-top-right-radius: var(--card-radius); }
.detail-img-grid img:nth-child(5) { border-bottom-right-radius: var(--card-radius); }

/* Show All Photos Button */
.show-all-btn {
    position: absolute;
    bottom: 20px;
    right: 20px;
    padding: 8px 15px;
    background: #fff;
    color: var(--text-dark);
    border: 1px solid var(--text-dark);
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    z-index: 10;
    transition: background 0.2s;
}
.show-all-btn:hover {
    background: #f0f0f0;
}

/* --- Main Content Layout --- */
.detail-content-wrapper {
    display: flex;  
    gap: 40px;
    align-items: flex-start;
}
.detail-content-main {
    flex: 2;
}
.detail-content-sidebar {
    flex: 1;
    min-width: 320px; /* Slightly wider sidebar */
    padding: 25px;
    border: 1px solid var(--border-color);
    border-radius: var(--card-radius);
    background: var(--background-light);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); /* Stronger shadow */
    position: sticky; /* Sticky booking form */
    top: 100px;
    height: fit-content;
}

/* Headings and Dividers */
.section-heading {
    font-size: 1.5rem;  
    font-weight: 700;  
    margin-bottom: 0.5rem;
}
.listing-specs {
    font-size: 1.1rem;
    font-weight: 400;
    color: var(--text-dark);  
    margin-bottom: 2rem;
}
.section-divider {
    border: 0;  
    border-top: 1px solid var(--border-color);  
    margin: 30px 0;
}
.subsection-heading {
    font-size: 1.3rem;  
    font-weight: 700;  
    margin-bottom: 1rem;
}
.listing-description {
    margin-bottom: 30px;
    font-size: 1rem;
}

/* Amenities List */
.amenities-list-grid {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* Two columns for detail page */
    gap: 15px;  
    padding: 0;
}
.amenities-list-grid li {
    display: flex;  
    align-items: center;  
    gap: 10px;  
    font-size: 1rem;  
    color: var(--text-dark);
}
.amenities-list-grid li span:first-child { /* Icon */
    font-size: 1.4rem;
    color: var(--secondary-color);
}

/* Host Details */
.host-details {
    display: flex;  
    align-items: center;  
    gap: 15px;
}
.host-details img {
    width: 50px;  
    height: 50px;  
    border-radius: 50%;  
    object-fit: cover;
}
.host-details h4 {
    font-size: 1.2rem;
    font-weight: 600;
    margin: 0;
}

/* Sidebar Price */
.price-box {
    text-align: center;  
    margin-bottom: 20px;
}
.price-amount {
    font-size: 2.2rem;  
    font-weight: 800;  
    color: var(--primary-color);
}
.price-box small {
    display: block;
    color: var(--text-light);
    font-size: 1rem;
    margin-top: 5px;
}

/* --- Comments Section --- */
.comments-section h2 {
    margin-bottom: 20px;
}
.comment-form textarea {
    width:100%;  
    padding:10px;  
    border:1px solid var(--border-color);  
    border-radius:var(--small-radius);  
    margin-bottom:10px;
    font-family: inherit;
    font-size: 1rem;
}
.comment-item {
    border-bottom: 1px dashed var(--border-color);  
    padding: 15px 0;
}
.comment-item:last-child {
    border-bottom: none;
}
.comment-item > div {
    display: flex;  
    align-items: center;  
    gap: 10px;  
    margin-bottom: 5px;
}
.comment-item img {
    width: 30px;  
    height: 30px;  
    border-radius: 50%;  
    object-fit: cover;
}
.comment-item small {
    color: var(--text-light);  
    font-size: 0.8rem;
}
.comment-item p {
    margin-left: 40px;
}

/* ========================================================================= */
/* DASHBOARD STYLES */
/* ========================================================================= */
.dashboard-container {
    max-width: 1400px;
    margin: 30px auto;
    padding: 0 40px;
    display: flex;
    gap: 40px;
    align-items: flex-start;
}

/* Sidebar Structure */
.sidebar {
    flex: 0 0 250px;
    padding: 20px 0;
    position: sticky;
    top: 80px; /* Stick below navbar */
}
.user-info {
    text-align: center;
    margin-bottom: 30px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--border-color);
}
.user-info img {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: 10px;
    border: 3px solid var(--primary-color);
}
.user-info h3 {
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0;
}
.sidebar a.btn {
    display: block;
    width: 100%;
    margin-bottom: 15px;
    text-align: center;
    box-shadow: var(--shadow-subtle);
}

/* Listings Section Structure */

.listings-section {
    flex: 1;
}
.dashboard-listing-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
}

/* Dashboard Listing Card Overrides */
.dashboard-listing-grid .listing-card {
    border: 1px solid var(--border-color);
    border-radius: var(--card-radius);
    padding: 15px;
    background: #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}
.dashboard-listing-grid .listing-img-slider {
    height: 200px;
    margin-bottom: 10px;
    border-radius: var(--small-radius);
}
.listing-info {
    padding: 5px;
}
.listing-info h3 {
    margin-bottom: 5px;
    font-size: 1.2rem;
}
.listing-info p {
    color: var(--text-light);
    font-size: 0.95rem;
    margin-bottom: 3px;
}
.listing-actions {
    margin-top: 15px;
    display: flex;
    gap: 10px;
    align-items: center;
}


/* ========================================================================= */
/* CREATE LISTING / BOOKING / EDIT PROFILE FORM STYLES */
/* ========================================================================= */

.create-listing-page {
    max-width: 850px;
    margin: 30px auto;
    padding: 0 20px;
}
.form-page-title {
    margin-bottom: 20px;
    text-align: center;
}

/* Form Messages (for error/success alerts) */
.form-message {
    padding: 10px 15px;
    border-radius: var(--small-radius);
    margin-bottom: 20px;
    font-weight: 600;
    text-align: center;
}
.form-message.error-message {
    background-color: #ffe0e0;
    color: var(--primary-color);
}
.form-message.success-message {
    background-color: #e0fff0;
    color: var(--secondary-color);
}

/* Form Structure */
.modern-form {
    display: grid;
    gap: 25px;
}

.form-section-card {
    padding: 30px;
    border: 1px solid var(--border-color);
    border-radius: var(--card-radius);
    background: var(--background-light);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}
.form-section-card .subsection-heading {
    margin-top: 0;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border-color);
    font-size: 1.4rem;
}

/* General Form Elements */
.modern-form label, 
.auth-card label,
.booking-form label /* Added booking-form label */ {
    display: block;
    font-weight: 600;
    margin-top: 15px;
    margin-bottom: 5px;
    color: var(--text-dark);
}

/* --- Consolidated Input Styling for ALL Forms (FIXED) --- */
/* Selects all relevant text/date/tel/number inputs across all form types */
.modern-form input[type="text"], 
.modern-form input[type="number"], 
.modern-form input[type="email"], 
.modern-form input[type="tel"], /* Corrected Phone Input */
.modern-form input[type="date"],
.modern-form textarea, 
.modern-form select, 
.modern-form input[type="file"],

.auth-card input[type="text"],
.auth-card input[type="email"],
.auth-card input[type="password"],
.auth-card input[type="tel"], /* Corrected Phone Input */
.auth-card select,
.auth-card textarea,

.booking-form input[type="text"],
.booking-form input[type="number"],
.booking-form input[type="date"],
.booking-form input[type="tel"] /* Corrected Phone Input */
{
    width: 100%;
    padding: 12px;
    border: 1px solid var(--border-color);
    border-radius: var(--small-radius);
    font-family: var(--font-primary);
    font-size: 1rem;
    transition: border-color 0.2s, box-shadow 0.2s;
    background-color: #fff;
    margin-top: 0;
    height: 48px; /* Standard height for inputs/selects */
    -webkit-appearance: none; /* Reset appearance */
    -moz-appearance: none;
    appearance: none;
}

/* Reset height for textarea to allow resizing */
.modern-form textarea, 
.auth-card textarea,
.booking-form textarea {
    height: auto; 
    min-height: 100px;
}

/* Consolidated Focus Styling */
.modern-form input:focus, 
.modern-form textarea:focus, 
.modern-form select:focus,
.auth-card input:focus,
.auth-card select:focus,
.booking-form input:focus {
    border-color: var(--primary-color);
    outline: none;
    box-shadow: 0 0 0 3px rgba(255, 90, 95, 0.2);
}
/* --- End Consolidated Input Styling (FIXED) --- */

.modern-form textarea {
    resize: vertical;
}
.hint-text {
    color: var(--text-light);
    font-size: 0.9rem;
    margin-bottom: 15px;
}

/* Split Layouts for Inputs */
.form-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}
.form-triple-split {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}
.form-split > div, .form-triple-split > div {
    display: flex;
    flex-direction: column;
}

/* Amenities Checkbox Grid */
.amenities-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 10px;
    margin-top: 10px;
}
.amenity-checkbox-label {
    display: flex !important; 
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 10px 15px;
    border: 2px solid var(--border-color);
    border-radius: var(--small-radius);
    cursor: pointer;
    transition: background-color 0.2s, border-color 0.2s, color 0.2s;
    font-weight: 500 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    background-color: #fff;
    color: var(--text-dark);
}
.amenity-checkbox-label:hover {
    border-color: var(--primary-color);
}
.amenity-checkbox-label input[type="checkbox"] {
    opacity: 0;
    width: 0;
    height: 0;
}
.amenity-checkbox-label span {
    flex-grow: 1; 
}
.amenity-checkbox-label:has(input[type="checkbox"]:checked) {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    color: var(--background-light);
    box-shadow: 0 2px 6px rgba(255, 90, 95, 0.2);
}

.form-submit-btn {
    margin-top: 10px;
}


/* ========================================================================= */
/* LOGIN / REGISTER AUTH CARD STYLES */
/* ========================================================================= */

.auth-center-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: calc(100vh - 150px);
    padding: 20px;
}

.auth-card {
    width: 100%;
    max-width: 400px;
    padding: 40px;
    border: 1px solid var(--border-color);
    border-radius: var(--card-radius);
    background: var(--background-light);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
}

.auth-card h2 {
    text-align: center;
    margin-bottom: 25px;
    font-size: 2rem;
    color: var(--primary-color);
}

.auth-card button {
    margin-top: 25px;
}

.auth-card p {
    text-align: center;
    margin-top: 20px;
    font-size: 0.95rem;
    color: var(--text-light);
}

.auth-card a {
    color: var(--primary-color);
    font-weight: 600;
}
/* ========================================================================= */
/* MY BOOKINGS & HOST BOOKINGS STYLES (Final Corrected) */
/* ========================================================================= */

.mybookings-wrapper,
.host-bookings-wrapper {
    max-width: 1200px;
    margin: 40px auto;
    padding: 0 20px;
}

.mybookings-header,
.host-bookings-header {
    margin-bottom: 30px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.mybookings-header h1,
.host-bookings-header h1 {
    font-size: 2.2rem;
    margin-bottom: 5px;
}
.mybookings-header .subtitle,
.host-bookings-header .subtitle {
    color: var(--text-light);
    font-size: 1rem;
    margin: 0;
}

.bookings-list-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 30px;
    margin-top: 20px;
}

/* Card Style */
.booking-card {
    background: var(--background-light);
    border: 1px solid var(--border-color);
    border-radius: var(--card-radius);
    padding: 20px;
    box-shadow: var(--shadow-subtle);
    display: flex;
    flex-direction: column;
    transition: box-shadow 0.3s;
}
.booking-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.booking-header h3 {
    font-size: 1.3rem;
    margin-bottom: 5px;
}
.booking-header h3 a {
    color: var(--text-dark);
    text-decoration: none;
    transition: color 0.2s;
}
.booking-header h3 a:hover {
    color: var(--primary-color);
}

.booking-location {
    font-size: 0.9rem;
    color: var(--text-light);
    margin-bottom: 15px;
}

/* Guest Details (Host View) */
.subsection-heading {
    font-size: 1.1rem;
    margin-bottom: 8px;
    font-weight: 600;
}
.guest-profile-info {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}
.guest-profile-info .guest-name {
    font-weight: 600;
    margin: 0;
}
.guest-profile-info .guest-email {
    color: var(--text-light);
}
.guest-details .phone-link {
    color: var(--secondary-color);
    font-weight: 600;
}

/* Special Requests Box */
.special-requests-box {
    margin-bottom: 15px;
    padding: 10px;
    border: 1px solid var(--border-color);
    background: #fcfcfc;
    border-radius: 8px;
    font-size: 0.95rem;
}
.special-requests-box strong {
    display: block;
    margin-bottom: 5px;
}
.special-requests-box .request-text {
    color: var(--text-light);
    display: block;
}


/* Dates and Nights Layout */
.booking-dates {
    display: grid;
    grid-template-columns: 1fr 1fr 100px;
    gap: 10px;
    margin: 10px 0 15px 0;
}
.date-info strong {
    display: block;
    color: var(--text-dark);
    font-weight: 600;
}
.nights-info {
    text-align: right;
    font-weight: 700;
    color: var(--secondary-color);
    align-self: center;
}

/* ========================================================================= */
/* REFACTORED BOOKING FOOTER & ACTIONS */
/* ========================================================================= */

.booking-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 15px;
    margin-top: auto; 
    border-top: 1px solid #f0f0f0;
}

/* --- Total Price Box --- */
.total-price-box {
    display: flex;
    flex-direction: column;
    text-align: left;
}

.total-price-box .price-label {
    font-size: 0.9rem;
    color: var(--text-light);
    font-weight: 500;
}

.total-price-box .price-amount {
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--text-dark); /* Default color */
    margin-top: 2px;
}

/* --- Host Specific Price Color (Green for Income) --- */
.total-price-box.host-price .price-amount {
    /* !! THIS IS THE FIX FOR THE GREEN PRICE !! */
    color: #4CAF50; 
}

/* --- Booking Actions Group --- */
.booking-actions {
    display: flex;
    flex-direction: column; 
    align-items: flex-end;
    gap: 10px;
}

.action-buttons-group {
    display: flex;
    gap: 8px; 
    flex-wrap: wrap;
    justify-content: flex-end;
}

/* --- Status Badges --- */
.booking-status-badge {
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.status-pending {
    background: #fff8e1; 
    color: #ffa000; 
}
.status-upcoming {
    background: #e0f7fa; 
    color: var(--secondary-color); 
}
.status-active, .status-in-progress {
    background: #e8f5e9; 
    color: #4caf50; 
}
.status-past, .status-completed {
    background: #f5f5f5; 
    color: var(--text-light); 
}
.status-cancelled, .status-rejected {
    background: #fbecec; 
    color: var(--primary-color); 
}

/* --- Custom Button Styles for Actions (Fixed Priority) --- */

/* Primary action: Check-in button */
.btn-checkin {
    /* !! Added !important to ensure specific color override !! */
    background-color: #1a73e8 !important; 
    border: 1px solid #1a73e8 !important;
    color: white !important;
    transition: background-color 0.2s;
    font-weight: 500 !important;
}
.btn-checkin:hover {
    background-color: #1558b0 !important;
}

.btn-checkin-disabled {
    padding: 8px 15px; 
    border-radius: var(--small-radius); 
    font-size: 0.9rem;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background-color: #e6e6e6;
    color: var(--text-dark);
    border: 1px solid #e6e6e6;
    pointer-events: none;
    opacity: 0.8;
}

/* Message button */
.btn-message {
    /* !! Added !important for override !! */
    background-color: #ffffff !important;
    border: 1px solid var(--border-color) !important;
    color: var(--text-dark) !important;
}
.btn-message:hover {
    background-color: #f7f7f7 !important;
}

/* Approve/Reject */
.btn-approve {
    /* !! Added !important for override !! */
    background-color: #4caf50 !important;
    border: 1px solid #4caf50 !important;
    color: white !important;
}
.btn-reject {
    /* !! Added !important for override !! */
    background-color: var(--primary-color) !important;
    border: 1px solid var(--primary-color) !important;
    color: white !important;
}

/* Empty State Message */
.empty-state {
    text-align: center;
    padding: 40px;
    border: 2px dashed var(--border-color);
    border-radius: var(--card-radius);
    color: var(--text-light);
    margin-top: 20px;
}
.empty-state a {
    color: var(--background-light);
    font-weight: 600;
}
/* --- Host Specific Price Color (Green for Income) --- */
.total-price-box.host-price .price-amount {
    color: #4CAF50; /* A distinct green color */
}

/* ========================================================================= */
/* CHAT SYSTEM STYLES (NEWLY ADDED) */
/* ========================================================================= */

.chat-container {
    max-width: 800px;
    margin: 40px auto;
    background: var(--background-light);
    border: 1px solid var(--border-color);
    border-radius: var(--card-radius);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    display: flex;
    flex-direction: column;
    height: 70vh; /* Set a fixed height for the chat window */
    min-height: 500px; /* Added min-height */
}

.chat-header {
    padding: 15px 25px;
    border-bottom: 1px solid var(--border-color);
    background-color: #f7f7f7;
    border-top-left-radius: var(--card-radius);
    border-top-right-radius: var(--card-radius);
}
.chat-header h3 {
    margin: 0;
    font-size: 1.5rem;
}
.chat-header p {
    color: var(--text-light);
    font-size: 0.9rem;
}

.message-area {
    flex-grow: 1;
    padding: 20px;
    overflow-y: auto; /* Scrollable message history */
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.message-bubble {
    max-width: 80%;
    padding: 10px 15px;
    border-radius: 20px;
    line-height: 1.4;
    font-size: 1rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

/* Sender (Current User) Styling */
.message-bubble.sender {
    align-self: flex-end; /* Push to the right */
    background-color: var(--primary-color);
    color: #fff;
    border-bottom-right-radius: 5px; /* Squared off corner */
}

/* Receiver (Other Party) Styling */
.message-bubble.receiver {
    align-self: flex-start; /* Push to the left */
    background-color: #f0f0f0;
    color: var(--text-dark);
    border-bottom-left-radius: 5px; /* Squared off corner */
}

.message-meta {
    display: block;
    font-size: 0.75rem;
    margin-top: 5px;
    opacity: 0.8;
}

/* Input Form */
.chat-input-form {
    display: flex;
    padding: 15px 20px;
    border-top: 1px solid var(--border-color);
}

.chat-input-form textarea {
    flex-grow: 1;
    padding: 10px;
    border: 1px solid var(--border-color);
    border-radius: var(--small-radius);
    resize: none;
    margin-right: 10px;
    font-family: var(--font-primary);
}

.chat-input-form button {
    background: var(--primary-color);
    color: #fff;
    border: none;
    padding: 10px 20px;
    border-radius: var(--small-radius);
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s;
}
.chat-input-form button:hover {
    background: #e64d52;
}
.chat-input-form button:disabled {
    background: #ccc;
    cursor: not-allowed;
}

/* Message button on booking cards */
.btn-message {
    background: #3498db; /* A nice blue for chat */
    color: #fff;
    padding: 0.4rem 0.8rem;
    font-size: 0.85rem; 
    line-height: 1.2;
    border-radius: var(--small-radius);
    text-decoration: none;
    transition: background-color 0.2s;
}
.btn-message:hover {
    background: #2980b9;
    color: #fff; 
}


/* ========================================================================= */
/* MEDIA QUERIES (RESPONSIVENESS) */
/* ========================================================================= */

@media (max-width: 1024px) {
    /* Detail Page: Switch to a single-column layout */
    .detail-content-wrapper {
        flex-direction: column;
        gap: 30px;
    }
    
    /* Ensure the sidebar (booking form) is full width and not sticky on mobile */
    .detail-content-sidebar {
        width: 100%;
        min-width: 0;
        position: static;
        order: -1; /* Move the booking form above the main content on small screens */
    }

    /* Dashboard: Stack sidebar and main content */
    .dashboard-container {
        flex-direction: column;
        padding: 0 20px;
    }
    
    /* Remove fixed width on sidebar on mobile */
    .sidebar {
        flex: 1 1 100%;
        width: 100%;
        position: static;
        padding: 0;
    }
    
    /* Center user info and put buttons side-by-side */
    .user-info {
        text-align: left;
        display: flex;
        align-items: center;
        gap: 20px;
        border: 1px solid var(--border-color);
        border-radius: var(--card-radius);
        padding: 15px;
    }
    .user-info h3 { margin: 0; }
    .user-info img {
        width: 60px;
        height: 60px;
        border: 2px solid var(--primary-color);
    }
    .sidebar a.btn {
        display: inline-block;
        width: auto;
    }
    .sidebar-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        margin-top: 20px;
    }
}

@media (max-width: 768px) {
    /* General container padding adjustment */
    .main-container {
        padding: 0 20px;
        margin: 20px auto;
        box-sizing: border-box; 
        width: 100%;
        min-width: 0;
    }
    }
    
    /* Navbar adjustments */
    .navbar {
        padding: 0.8rem 15px;
    }
    .nav-center {
        margin: 0 10px;
    }
    .search-form {
        max-width: 400px;
    }
    .nav-username {
        display: none; /* Hide username next to pfp */
    }

    /* Listing Detail Adjustments */
    .detail-img-grid {
        grid-template-columns: 1fr; /* Full width for all images */
        grid-template-rows: 250px 100px 100px 100px; /* Stack smaller images */
        height: auto;
    }
    .detail-img-grid img:first-child {
        grid-row: 1 / 2;
        border-radius: var(--card-radius) var(--card-radius) 0 0;
    }
    .detail-img-grid img {
        border-radius: 0;
    }
    .detail-img-grid img:nth-child(2) { border-top-right-radius: 0; }
    .detail-img-grid img:nth-child(5) { border-bottom-right-radius: var(--card-radius); }

    /* Form Layouts */
    .form-split, .form-triple-split {
        grid-template-columns: 1fr; /* Stack all split forms vertically */
    }
}

@media (max-width: 480px) {
    /* Typography adjustments */
    h2 { font-size: 1.8rem; margin-bottom: 20px; }
    .detail-title { font-size: 2rem; }
    .price-amount { font-size: 1.8rem; }
    
    /* Booking Dates: Stack date inputs */
    .booking-dates {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto;
    }
    .nights-info {
        text-align: left;
    }
    
    /* Booking Card: Stack actions */
    .booking-footer {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
    .booking-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
    }
}/* New CSS to fix button spacing */
.booking-actions {
    display: flex; /* Makes the actions flow horizontally */
    gap: 8px; /* Adds space between each item (button/link/form) */
    flex-wrap: wrap;
    align-items: center;
}

.booking-actions form {
    margin: 0; /* Remove default form margin */
    padding: 0;
}
/* End New CSS */

/* Add the new CSS styles for the extended details and new statuses */
.booking-details-extended {
    margin: 15px 0;
    padding: 10px 0;
    border-top: 1px solid var(--border-color); /* Assuming --border-color is defined in style.css */
}
.booking-details-extended p {
    font-size: 0.95rem;
    margin-bottom: 5px;
    color: var(--text-dark);
}
.booking-details-extended strong {
    font-weight: 700;
    min-width: 120px; /* Aligns the start of the values */
    display: inline-block;
    color: var(--primary-color);
}
/* Existing Status Badges */
.booking-status-badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
    margin-bottom: 10px;
    text-transform: uppercase;
}
.booking-status-badge.upcoming {
    background-color: #e6f7ff; /* Light blue */
    color: #1890ff;
}
.booking-status-badge.active {
    background-color: #fffbe6; /* Light yellow */
    color: #faad14;
}
.booking-status-badge.past {
    background-color: #f0f0f0; /* Light gray */
    color: #717171;
}
/* New Statuses */
.booking-status-badge.pending {
    background-color: #fff7e6; /* Light orange/yellow for pending */
    color: #fa8c16;
}
.booking-status-badge.cancelled {
    background-color: #fff1f0; /* Light red for cancelled */
    color: #f5222d;
}
/* ========================================================= */
/* --- RESPONSIVE NAVIGATION STYLES (Mobile First Overrides) --- */
/* ========================================================= */

/* * Hide the mobile menu toggle button on screens wider than 900px, 
 * as the full navigation is visible.
 */
.menu-toggle {
    display: none;
    cursor: pointer;
    font-size: 24px;
    background: none;
    border: none;
    color: inherit; /* Inherit color from the parent nav */
}

/* * --- MOBILE MEDIA QUERY (screens 900px wide or less) --- 
 * This targets most tablets held vertically and all phones.
 */
@media (max-width: 900px) { 
    .navbar {
        flex-wrap: wrap; /* Allow nav items to wrap to the next line */
        padding: 10px 15px;
    }
    
    .nav-left {
        order: 1; 
        flex-grow: 1; /* Allow logo area to grow */
        display: flex;
        justify-content: space-between; /* Space between logo and toggle button */
        align-items: center;
    }

    /* Show the hamburger icon on mobile */
    .menu-toggle {
        display: block; 
        order: 2; /* Place toggle button on the right */
        font-weight: 600; /* Make it bold for visibility */
    }
    
    /* Hide the main search and navigation links by default on mobile */
    .nav-center, 
    .nav-right {
        display: none; /* Hidden by default */
        width: 100%; 
        order: 3; /* Force them to the next line */
        flex-direction: column; 
        align-items: stretch; 
        margin-top: 5px;
        text-align: center;
    }
    
    /* When the menu is open (class added by JavaScript), display them */
    .navbar.open .nav-center, 
    .navbar.open .nav-right {
        display: flex;
    }
    
    /* Search form adjustments */
    .search-form {
        width: 100%;
        margin: 10px 0;
        display: flex; /* Keep input and button side-by-side */
    }
    
    .search-input {
        flex-grow: 1;
        padding: 10px;
    }

    /* Style buttons and links for mobile */
    .nav-right a, 
    .nav-right button {
        margin: 5px 0;
        width: 100%;
        text-align: center;
        box-sizing: border-box; 
    }

    /* User menu adjustments */
    .user-menu-wrapper {
        width: 100%;
        margin: 10px 0;
        position: static; /* Allows dropdown to flow naturally */
    }
    
    /* Trigger becomes a full-width block to tap */
    .user-menu-trigger {
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 10px 0;
        border-bottom: 1px solid #eee;
    }

    /* Dropdown menu takes full width and stacks */
    .user-dropdown-menu {
        position: static; 
        width: 100%;
        box-shadow: none;
        border: none;
        border-top: 1px solid #eee;
        display: none; /* Hide by default */
    }
    
    /* Show dropdown menu when wrapper is 'open' */
    .user-menu-wrapper.open .user-dropdown-menu {
        display: block; 
    }

    .user-dropdown-menu a {
        padding: 10px 20px;
        border-bottom: 1px solid #f7f7f7;
        display: block;
        text-align: center;
    }
}
}
/* --- FIX 1: HIGH PRIORITY OVERFLOW HIDE --- */
html, body {
    /* Critical: Ensures the top-level container is 100% wide */
    width: 100%;
    /* The most important line: Hides horizontal content */
    overflow-x: hidden !important; 
    /* Ensures no default browser margin/padding is involved */
    margin: 0 !important;
    padding: 0 !important;
}

/* Ensure images cannot be the issue */
img, video {
    max-width: 100%;
    height: auto;
    box-sizing: border-box;
}
/* --- FIX 2: MAIN CONTAINER CONTAINMENT --- */
.main-container {
    box-sizing: border-box !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 1400px; /* Adjust if 1400px is too wide for your desktop view */
    margin: 30px auto;
    padding: 0 40px; /* Use your existing padding */
}
/* --- FIX 3: MOBILE PADDING RESET --- */
@media (max-width: 768px) {
    .main-container {
        /* Reduce side padding for mobile */
        padding: 0 15px !important; 
    }
    
    /* Ensure no flexbox or grid container breaks the flow */
    .listing-detail-view, .detail-content-main {
        overflow: hidden !important;
        width: 100% !important;
        min-width: unset !important;
    }
}
/* --- ULTIMATE IMAGE SIZING FIX (To make sure image content is fully visible) --- */
@media (max-width: 1024px) {
    .img-wrapper img {
        /* Ultimate Width Reset */
        width: 100% !important; 
        max-width: 100% !important;
        min-width: 0 !important;
        
        /* Ensure it behaves like a standard block element */
        display: block !important; 
        
        /* CRITICAL: Forces the entire image to fit within the wrapper, 
           preserving aspect ratio, even if it leaves empty space (letterboxing). */
        object-fit: contain !important; 
        
        /* Center the image within the container */
        object-position: center !important;
        
        /* Ensure no border/padding causes it to expand */
        padding: 0 !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }
}
/* --- THE ULTIMATE CONFLICT-PROOF FIX --- */

/* 1. Global Reset: No scroll and full screen width */
html, body {
    width: 100%;
    overflow-x: hidden !important; 
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}

@media (max-width: 1024px) {
    
    /* 2. Top-Level Container Enforcement (Force view to shrink) */
    .listing-detail-view, 
    .main-container {
        width: 100% !important; 
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
        /* Ensure no padding is causing overflow */
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
    
    /* 3. The Confirmed Culprit Container (.img-wrapper) */
    .detail-img-grid, 
    .detail-image-display, 
    .img-wrapper {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
        /* CRITICAL: Hides any content that breaks out */
        overflow: hidden !important; 
        
        /* FIX FOR BORDER-RADIUS MISCALCULATION */
        border-radius: 0 !important; 
        
        /* Ensure the element is not positioned outside the flow */
        position: relative !important; 
        left: 0 !important;
        right: 0 !important;
        transform: none !important;
    }
    
    /* 4. Image Scaling Fix (Ensures image content is fully visible) */
    .img-wrapper img {
        width: 100% !important;
        height: auto !important;
        min-width: unset !important;
        display: block !important; 
        /* Ensure image fits entirely */
        object-fit: contain !important; 
        object-position: center !important;
        padding: 0 !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }
}