/* Upload Styles */

/* FAB Button */
.fab-container {
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 1000;
}

.fab-button {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background-color: #2e7d32;
    /* Forest Green */
    color: white;
    border: none;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease, background-color 0.3s ease;
}

.fab-button:hover {
    background-color: #1b5e20;
    transform: scale(1.1) rotate(-10deg);
}

.fab-button:active {
    transform: scale(0.95);
}

/* Modal Styles */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    z-index: 2000;
    display: flex;
    justify-content: center;
    align-items: center;
    backdrop-filter: blur(5px);
}

/* Hide Back to Top if we have Upload FAB (simplest way is to just hide it on pages that load this CSS) */
#back-to-top,
.back-to-top-container {
    display: none !important;
}

.modal-container {
    background-color: #ffffff;
    width: 75%;
    /* Widened */
    max-width: 1200px;
    /* Increased max-width */
    height: auto;
    max-height: 90vh;
    border-radius: 12px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: slideUp 0.3s ease-out;
}

@keyframes slideUp {
    from {
        transform: translateY(50px);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.modal-header {
    padding: 20px 40px;
    /* More padding */
    border-bottom: 1px solid #eee;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #f9fff9;
}

.modal-header h2 {
    margin: 0;
    color: #2e7d32;
    font-size: 1.8rem;
    /* Larger title */
    flex: 1;
    text-align: center;
    /* Center Title */
}

.close-button {
    background: none;
    border: none;
    font-size: 2.5rem;
    cursor: pointer;
    color: #666;
    line-height: 1;
    position: absolute;
    /* Position close button absolutely so title stays centered */
    right: 20px;
    top: 15px;
}

.modal-body {
    padding: 30px 40px;
    overflow-y: auto;
    flex-grow: 1;
    display: flex;
    /* Use flex to align children */
    flex-direction: column;
    align-items: center;
    /* Center children horizontally */
}

/* Upload Sections */
.upload-section {
    margin-bottom: 30px;
    width: 100%;
    /* Ensure sections take full width but contents center */
    max-width: 800px;
    /* Limit content width for readability */
}

.upload-section h3 {
    margin-top: 0;
    margin-bottom: 15px;
    color: #444;
    border-left: 4px solid #2e7d32;
    padding-left: 10px;
    font-size: 1.2rem;
}

.form-group {
    margin-bottom: 15px;
    text-align: center;
    /* Center labels */
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    /* More spacing */
    font-weight: bold;
    color: #555;
    text-align: left;
    /* Keep labels left aligned for readability or center? User said "input box and overall modal center aligned". Let's try centering inputs, but keeping labels left usually looks better. Let's Center the container of the input. */
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}

.form-group input {
    width: 100%;
    /* take full width of parent */
    padding: 12px;
    /* Bigger input */
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 1rem;
    box-sizing: border-box;
}

.required {
    color: red;
}

/* File Drop Area */
.file-drop-area {
    position: relative;
    display: flex;
    flex-direction: column;
    /* Stack content */
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 40px;
    border: 2px dashed #2e7d32;
    border-radius: 8px;
    transition: 0.2s;
    background-color: #f1f8f3;
    cursor: pointer;
    box-sizing: border-box;
}

.drop-area-content {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

.drop-area-sub {
    margin: 10px 0 0 0;
    color: #666;
    font-size: 0.9rem;
    font-style: italic;
}

.file-drop-area:hover {
    background-color: #e8f5e9;
}

.fake-btn {
    flex-shrink: 0;
    background-color: #2e7d32;
    border: 1px solid #2e7d32;
    border-radius: 4px;
    padding: 8px 15px;
    margin-right: 15px;
    font-size: 14px;
    color: white;
    text-transform: uppercase;
}

.file-msg {
    font-size: 16px;
    color: #555;
}

.file-input {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    cursor: pointer;
    opacity: 0;
}

/* Preview Grid */
.preview-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 15px;
    margin-top: 20px;
}

.preview-item {
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    aspect-ratio: 1;
    border: 1px solid #eee;
    background-color: #f9f9f9;
}

.preview-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s;
}

.preview-item:hover img {
    transform: scale(1.05);
}

.preview-actions {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: opacity 0.2s;
}

.preview-item:hover .preview-actions {
    opacity: 1;
}

.action-btn {
    background: white;
    border: none;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    margin: 5px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

.action-btn.delete {
    color: #d32f2f;
}

.action-btn.edit {
    color: #1976d2;
}

.description-indicator {
    position: absolute;
    bottom: 5px;
    right: 5px;
    background: rgba(0, 0, 0, 0.6);
    color: white;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    font-size: 12px;
    display: flex;
    justify-content: center;
    align-items: center;
    pointer-events: none;
    display: none;
}

.has-description .description-indicator {
    display: flex;
}

/* Edit Description Overlay */
.edit-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background: white;
    padding: 10px;
    transform: translateY(100%);
    transition: transform 0.3s;
    box-sizing: border-box;
}

.preview-item.editing .edit-overlay {
    transform: translateY(0);
}

.edit-overlay textarea {
    width: 100%;
    height: 60px;
    resize: none;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 12px;
    padding: 5px;
    box-sizing: border-box;
}

/* Progress Bar */
.progress-bar-bg {
    width: 100%;
    height: 10px;
    background-color: #eee;
    border-radius: 5px;
    overflow: hidden;
    margin-top: 10px;
}

.progress-bar-fill {
    height: 100%;
    background-color: #2e7d32;
    transition: width 0.3s ease;
}

/* Footer */
.modal-footer {
    padding: 20px;
    border-top: 1px solid #eee;
    text-align: right;
    background-color: #f9fff9;
}

.primary-button {
    background-color: #2e7d32;
    color: white;
    border: none;
    padding: 12px 30px;
    border-radius: 30px;
    font-size: 1rem;
    cursor: pointer;
    transition: background-color 0.2s;
}

.primary-button:hover {
    background-color: #1b5e20;
}

.primary-button:disabled {
    background-color: #ccc;
    cursor: not-allowed;
}