/* 
 * Bootstrap 5 Component Overrides
 * Centralized styling for Bootstrap 5 components to avoid redundancy
 * This file consolidates all Bootstrap 5 component customizations
 */

/* ========================================
 * Modal Close Button (.btn-close)
 * ======================================== */

.btn-close {
    --bs-btn-close-color: #557281;
    --bs-btn-close-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23557281'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e");
    --bs-btn-close-focus-shadow: none;
    --bs-btn-close-opacity: 1;
    /* background: transparent; */
    border: none;
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    color: var(--bs-btn-close-color);
    background-color: transparent;
}

/* Modal-specific close button styling */
.project-add-box .modal-header .btn-close,
.collection-add-box .modal-header .btn-close,
.modal .modal-header .btn-close {
    color: #557281;
    font-size: 14px;
    font-weight: 600;
    border: none;
    --bs-btn-close-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23557281'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e");
    --bs-btn-close-opacity: 1;
    --bs-btn-close-focus-shadow: none;
    padding-right: 20px;
    padding-top: 10px;
    min-width: fit-content;
}

/* Specific styling for project add modal */
.project-add-box .modal-content .modal-header .btn-close {
    background-color: unset;
}

/* Collection modal specific styling */
.collection-add-box .modal-header .btn-close {
    margin-top: -8px;
    margin-right: -11px;
}

/* ========================================
 * Modal Styling
 * ======================================== */

.project-add-box.modal {
    background-color: rgb(255 255 255 / 55%);
}

.project-add-box .modal-content {
    border: 1px solid #153437;
    border-radius: 10px;
    background-color: #fff;
}

.project-add-box.modal .modal-body .mb-3 {
    width: 100%;
}

/* ========================================
 * Button Styling
 * ======================================== */

.btn-project-add button,
.btn-collection-add-product button {
    color: #fff;
    border-radius: 20px;
    /* font-size: 13px; */
    min-width: 130px;
    border-color: #1C3947;
    background-color: #1C3947;
}

.btn-project-add button:hover,
.btn-collection-add-product button:hover,
.btn-project-add button:focus,
.btn-collection-add-product button:focus {
    color: #fff;
    background-color: #1C3947;
    border-color: #1C3947;
}

.save button {
    border: solid 1px #e4960e;
    background-color: #e4960e;
    border-radius: 20px;
    padding: 1px 26px;
    font-weight: 600;
}

.save button:hover {
    background-color: #e4960e;
    border: solid 1px #e4960e;
}

/* ========================================
 * Form Styling
 * ======================================== */

.project-add-box input,
.project-add-box select {
    font-size: 13px !important;
    font-weight: 400;
}

/* .project-add-box.modal .modal-body label,
.project-add-box.modal p {
    font-size: 14px;
    color: #153437;
    font-weight: 600;
} */

/* ========================================
 * Utility Classes
 * ======================================== */

/* Close buttons for cookies and login popups */
.close-cookies,
.close-login-popup {
    border: none;
    font-size: 30px;
    background: none;
    color: #8b8686;
    margin-top: -8px;
    margin-right: -11px;
}

.close-login-popup {
    color: #fff4f4;
}

/* ========================================
 * Responsive Design
 * ======================================== */

@media (max-width: 768px) {
    .project-add-box .modal-header .btn-close {
        padding-right: 15px;
        padding-top: 8px;
        font-size: 20px;
    }
    
    .project-add-box.modal .modal-body {
        height: 400px;
    }
}

@media (max-width: 576px) {
    .btn-close {
        font-size: 1.25rem;
    }
    
    .project-add-box .modal-header .btn-close {
        font-size: 18px;
    }
}