/* Basic styling */
body {
    font-family: 'Inter', sans-serif;
    background-color: #f3f4f6; /* Fallback background color */
    position: relative; /* Needed for the ::before pseudo-element */
    min-height: 100vh; /* Ensure body covers viewport height */
    /* Note: Tailwind classes handle most styling directly in HTML */
}

/* Semi-transparent background image using a pseudo-element */
body::before {
    content: "";
    position: fixed; /* Fixed position to cover the whole viewport */
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 0; /* Place it behind the content */

    /* --- Using your background image path --- */
    background-image: url('/img/BLUEHOUSE.png');
    background-size: cover; /* Cover the entire area */
    background-position: center center; /* Center the image */
    background-repeat: no-repeat;

    /* --- Set Transparency --- */
    opacity: 0.15; /* Adjust opacity value (0.0 to 1.0) as needed */

    /* Prevent pseudo-element from intercepting mouse events */
    pointer-events: none;
}

/* --- Your sticky footer style --- */
/* Note: For position:sticky to work reliably within the acknowledgements */
/* div, that div needs a defined height and overflow:auto. */
/* Applying it directly might make it sticky relative to the viewport instead. */
/* Consider if this should be applied differently in the HTML structure. */
.sticky-footer {
    position: sticky;
    bottom: 1rem; /* Adjust bottom offset as needed */
    /* background: inherit; */ /* Inherit might not work well with opacity, specify color */
    background-color: rgba(255, 255, 255, 0.9); /* Use semi-transparent white */
    padding-top: 0.5rem;
    padding-bottom: 1rem;
    /* Ensure it's above other content within its container if needed */
    /* z-index: 10; */
    width: 100%; /* Take full width of its container */
    left: 0; /* Align to the left */
}

/* Ensure content sections are above the background */
#acknowledgements, #mainContent {
    position: relative; /* Establishes stacking context */
    z-index: 1; /* Ensures content is above body::before */
}


/* --- Styles for Overlay Layout (Merged) --- */

#baseImageContainer {
    position: relative; /* Crucial for absolute positioning of overlays */
    overflow: hidden; /* Hide parts of overlays outside the bounds */
    /* --- Enforce Aspect Ratio --- */
    /* Set to match the base image dimensions (15000 / 1875) */
    aspect-ratio: 15000 / 1875; /* Corrected aspect ratio */
    width: 100%; /* Let width fill available space */
    /* max-width: 1500px; */ /* Adjust max-width if needed, consider the wide ratio */
    margin: 0 auto; /* Center the container */
    background-color: #e2e8f0; /* Added background for visibility */
    border-radius: 0.5rem; /* Match other elements */
    box-shadow: inset 0 2px 4px 0 rgba(0,0,0,0.05); /* Subtle inner shadow */
}

#cleanBaseImage {
    /* Ensure the base image itself doesn't break the container's aspect ratio */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Cover the container, will likely crop vertically */
    /* Or use object-fit: contain; if you want to see the whole base image, */
    /* which will result in significant letterboxing vertically */
    border-radius: 0.5rem; /* Match container */
    /* opacity: 0.9; */ /* Optional: Make base slightly transparent */
}

#overlayContainer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none; /* Allow clicks to pass through to base image if needed */
    border-radius: 0.5rem; /* Match container */
}

.overlay-image {
    position: absolute;
    /* border: 1px solid rgba(59, 130, 246, 0.6); */ /* Using user's version */
    /* box-shadow: 0 0 5px rgba(59, 130, 246, 0.5); */ /* Using user's version */
    /* background-color: rgba(255, 255, 255, 0.1); */ /* Using user's version */
    object-fit: cover; /* Or contain */
    pointer-events: auto;
    transition: opacity 0.3s ease;
    /* filter: brightness(1.05); */ /* Removing this to use user's border/shadow */
}

#selectedImagesArea {
    display: flex;
    flex-wrap: wrap;
    gap: 10px; /* Space between thumbnails */
    padding: 10px;
    border: 1px solid #e5e7eb; /* Tailwind gray-200 */
    background-color: #ffffff;
    min-height: 60px; /* Ensure area is visible even when empty */
    border-radius: 0.5rem; /* rounded-lg */
}

.selected-thumbnail {
    position: relative;
    width: 60px;
    height: 60px;
    border-radius: 0.25rem; /* rounded-sm */
    overflow: hidden;
    cursor: pointer; /* Indicate it can be clicked (for removal) */
    border: 1px solid #d1d5db; /* Tailwind gray-300 */
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}

.selected-thumbnail img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.selected-thumbnail .remove-btn {
    position: absolute;
    top: -5px;
    right: -5px;
    width: 18px;
    height: 18px;
    background-color: #ef4444; /* Tailwind red-500 */
    color: white;
    border-radius: 50%;
    font-size: 12px;
    font-weight: bold;
    line-height: 18px; /* Center the 'x' vertically */
    text-align: center;
    cursor: pointer;
    opacity: 0.8;
    transition: opacity 0.2s ease;
    border: 1px solid white;
}

.selected-thumbnail:hover .remove-btn {
    opacity: 1;
}

/* --- End Overlay Styles --- */


/* Style for the grid items */
.grid-item img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0.375rem;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
    cursor: pointer; /* Explicitly set cursor */
}

.grid-item:hover img {
    transform: scale(1.03);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

/* Simple fade-in animation */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.fade-in {
    animation: fadeIn 0.3s ease-in-out forwards; /* Adjusted timing slightly */
}

/* Loading Spinner */
.loading-spinner {
    border: 4px solid #f3f4f6;
    border-top: 4px solid #4f46e5; /* indigo-600 */
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: spin 1s linear infinite;
    margin: 20px auto;
}

.dog-ear-link {
    position: fixed; /* Fixed position relative to viewport */
    top: 0;
    right: 0;
    /* --- Size --- */
    width: 90px; /* Keep it relatively small */
    height: 90px;
    overflow: hidden; /* Hide parts outside the triangle */
    z-index: 40; /* Below acknowledgements (z-50) but above most content */
    cursor: pointer; /* Indicate it's clickable */
}

/* Creates the colored triangle shape */
.dog-ear-link::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    /* --- Adjusted border to match size --- */
    border-width: 0 90px 90px 0; /* Match width/height */
    border-style: solid;
    /* Sets the color - transparent on 3 sides, colored on the top-right edge */
    /* Adjust the color (#60a5fa = Tailwind blue-400) */
    border-color: transparent #60a5fa transparent transparent;
    transition: border-color 0.3s ease;
}
/* Changes color on hover */
.dog-ear-link:hover::before {
     /* Adjust hover color (#3b82f6 = Tailwind blue-500) */
     border-color: transparent #3b82f6 transparent transparent;
}

/* Styles the text and icon inside the link */
.dog-ear-link span, .dog-ear-link svg {
    position: absolute;
    /* --- Adjusted positioning for VISIBILITY --- */
    /* Position based on the center of the visible triangle edge */
    top: 22px;  /* Move down */
    right: 22px; /* Move left */
    width: 80px; /* Give it some width */
    text-align: center; /* Center text */
    transform: rotate(45deg) translate(10px, -10px); /* Rotate and nudge */
    transform-origin: center center; /* Rotate around center */
    color: white; /* Text/icon color */
    font-size: 0.7rem; /* Adjust font size if needed */
    line-height: 1.2; /* Adjust line height */
    font-weight: 600; /* Semibold */
    pointer-events: none; /* Text/icon doesn't block link click */
    display: flex; /* Align icon and text if both are present */
    align-items: center;
    justify-content: center; /* Center content horizontally */
    white-space: nowrap; /* Prevent text wrapping */
}
/* Specific adjustments for the SVG icon */
.dog-ear-link svg {
     width: 0.8rem; /* Adjust icon size */
     height: 0.8rem;
     margin-left: 0.2rem; /* Adjust space */
     /* Remove absolute positioning overrides, let flexbox handle it */
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Removed #imageModal styles as the modal is no longer used */