/* style.css */
.logo {
    width: 50px;
    background-color: aliceblue;
}
body {
    font-family: 'Inter', sans-serif;
}

/* Hero section background image and overlay */
.hero-bg {
    background-image: url('/images/peixes.png'); /* Caminho ajustado para o Spring Boot */
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    min-height: calc(100vh - 80px);
    display: flex;
    align-items: center;
    justify-content: center;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.7);
}

/* Custom Message Box styles */
#customMessageBoxContainer {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.custom-message-box {
    background-color: #4CAF50; /* Success */
    color: white;
    padding: 12px 20px;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-20px);
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease;
    min-width: 250px;
}
.custom-message-box.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.custom-message-box.error {
    background-color: #f44336; /* Error */
}
.custom-message-box.info {
    background-color: #2196F3; /* Info */
}

/* Modal Base Styles */
.modal {
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.modal-content {
    transition: transform 0.3s ease;
}

/* Styles for recipe cards */
.recipe-card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.recipe-card img {
    border-radius: 0.5rem; /* rounded-lg */
}

/* Overlay for disabled form (not used with direct submission, but kept for context if needed) */
.disabled-form-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(255, 255, 255, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.75rem; /* rounded-xl */
    z-index: 10;
}

/* Input group styling for auth modal (if re-introduced) */
.auth-modal-input-group {
    position: relative;
    margin-bottom: 1.5rem; /* mb-6 */
}

.auth-modal-input-icon {
    position: absolute;
    left: 1rem; /* px-4 */
    top: 50%;
    transform: translateY(-50%);
    color: #64748B; /* slate-500 */
}

.auth-modal-input {
    padding-left: 3rem; /* Adjust padding to accommodate icon */
}

.divider-or {
    text-align: center;
    margin: 1.5rem 0; /* my-6 */
    position: relative;
    color: #64748B; /* slate-500 */
}

.divider-or::before,
.divider-or::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 40%;
    height: 1px;
    background-color: #CBD5E1; /* slate-300 */
}

.divider-or::before {
    left: 0;
}

.divider-or::after {
    right: 0;
}

/* Social Login Buttons (if re-introduced) */
.social-login-button {
    width: 100%;
    padding: 0.75rem 1.5rem; /* py-3 px-6 */
    border-radius: 0.5rem; /* rounded-lg */
    font-weight: 600; /* font-semibold */
    transition: background-color 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.75rem; /* mb-3 */
    border: 1px solid #CBD5E1; /* slate-300 */
}

.social-login-button i {
    margin-right: 0.75rem; /* mr-3 */
    font-size: 1.25rem; /* text-xl */
}

.google-login-button {
    background-color: #DB4437; /* Google Red */
    color: white;
}

.google-login-button:hover {
    background-color: #C1352A; /* Darker Google Red */
}

.instagram-login-button {
    background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
    color: white;
}

.instagram-login-button:hover {
    filter: brightness(1.1); /* Slightly brighter on hover */
}