/* CSS Variables */

:root {
    --body-bg-color: whitesmoke;
    --container-bg-color: #fdfbf8;
    --primary-btn-color: #4682A9;
    --hover-btn-color: #749BC2;
}

body, html {
    height: 100%;
}

body {
    max-height: none;
    overflow-x: hidden;
    overflow-y: hidden;
    font-family: 'Arial', sans-serif;
    background-color: var(--body-bg-color);
    color: #333;
    display: flex;
    max-width: 100vw;
    justify-content: center;  
}


.main-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    flex: 1 0 auto; /* This allows the content to grow and occupy available space */

   
} 

.main-content.image-present {
    justify-content: flex-start;  
    padding-top: 5%;  
    overflow-x: hidden;
    overflow-y: auto;
    flex: 1;
    
}

.footer {
    width: 100%;
    margin: 0;
    padding: 0;
    flex-shrink: 0; /* This ensures the footer doesn't shrink */
}

.stripe-button-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
}


.container-fluid {
    flex: 1;
} 


.hero {
    height: auto;  
    background: url('/static/hero.jpg') center/cover no-repeat; 
    opacity: 0.9; /* Adjust this value as needed; 0 is fully transparent and 1 is fully opaque */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    color: white;  /* Making the text color white for better visibility on a darker image background */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7); /* Gives a shadow to text for better legibility */
}

.hide-hero {
    height: auto;  
    background: none; 
    display: block;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-start;
    color: initial;
    text-shadow: none;
}

.prominent-btn {
    margin-top: 20px;
    padding: 10px 20px;
    font-size: 18px;
    background-color: #007bff;
    border-color: #007bff;
    transition: background-color 0.3s, transform 0.3s;
}

.prominent-btn:hover {
    background-color: #0056b3;
    transform: scale(1.05);  /* Slightly enlarges the button on hover */
}

h1 {
    font-weight: 700;  /* Bold weight for h1 */
    font-size: 2.5rem;  /* Adjust font size */
    letter-spacing: -0.5px;  /* Tighten letter spacing */
    margin-bottom: 15px;
}

h2 {
    font-weight: 400;  /* Normal weight for h2 */
    font-size: 1.6rem;  /* Adjust font size */
    letter-spacing: -0.25px;  /* Tighten letter spacing */
}

h1 .fab {
    margin-right: 8px;
    font-size: 1.5em;
    vertical-align: middle;
    background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
    color: transparent;
    background-clip: text;
    -webkit-background-clip: text;
    display: inline-block;
}

.row img { 
    max-height: 50vh; 
    width: 100%;
    max-width: 85%; 
    height: auto; 
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.uploaded-image {
    margin-top: 15px;
    opacity: 0.9;
    border-radius: 8px;    
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
} 

/* Adjust the width of the custom button */
.custom-button {
    width: 150px; /* Change this value as needed */
}

/* Custom CSS to remove bullet point from list */
.error-message-list {
    list-style-type: none; /* Remove bullet points */
    padding-left: 0; /* Remove left padding */
}

#initial-content { 
    display: flex;
    flex-direction: column;
} 

#copy-tooltip {
    background-color: #333;
    color: rgb(255, 255, 255);
    padding: 10px 10px;
    border-radius: 5px;
    position: absolute;
    z-index: 2;
    bottom: 0%; 
    left: 50%;
    transform: translateX(-50%);
    opacity: 0; 
    pointer-events: none; /* Ensure tooltip doesn't interfere with other interactions */
}

#uploaded-image[src=""],
#caption-area:not(:empty),
#button-container {
    display: none;
}

/* CSS for the fixed height wrapper and its children */
.fixed-height-wrapper {
    min-height: 170px;  /* or whatever height you prefer */
    margin-top: 10px;
}

#caption-area {
    margin-left: 5px;
    margin-right: 5px;
    background-color: var(--body-bg-color);
    border: 1px solid white;
    border-radius: 2px; 
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
    min-height: 160px;
    height: 100%;
 
}

#button-container {
    display: flex;
    gap: 5px;  
    justify-content: center; 
}

#caption-count {
    padding-top: 15px;
    padding-bottom: 10px;
}

.action-button:hover {
    background-color: var(--hover-btn-color);
}

#buy-captions {
    margin-bottom: 20px;
}

/* Styling for the subscription message */
#subscription-message {
    background-color: #FFFFFF26; 
    border-radius: 4px;
    padding: 10px 12px;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.08);
    margin: 5px 0;
}

/* Responsive Media Query for Mobile Devices */
@media screen and (max-width: 500px) {
    h1 {
        font-size: 1.8rem;
    }

    h2 {
        font-size: 1.15rem;  /* or whatever size you prefer */
    }

    input[type="file"], input[type="submit"] {
        padding: 8px;
    }
}

/* When the screen width is 768px (typical tablet breakpoint) or more, apply these styles */
@media (min-width: 768px) { 
    .fixed-height-wrapper {
        width: 50%;
        margin-left: auto;
        margin-right: auto;
    }
}