/* Bootstrap 5 Accordion Custom Colors - High Specificity */

/* Main Category Accordion Buttons */
.accordion .accordion-item .accordion-button {
    background: linear-gradient(135deg, #81236A 0%, #764ba2 100%) !important;
    color: white !important;
    border: none !important;
    box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3) !important;
    transition: all 0.3s ease !important;
    font-weight: 600 !important;
    text-shadow: 0 1px 2px rgba(0,0,0,0.1) !important;
}

.accordion .accordion-item .accordion-button:hover {
    background: linear-gradient(135deg, #5a6fd8 0%, #6a4190 100%) !important;
    color: white !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4) !important;
}

.accordion .accordion-item .accordion-button:focus {
    background: linear-gradient(135deg, #81236A 0%, #764ba2 100%) !important;
    color: white !important;
    border-color: rgba(102, 126, 234, 0.5) !important;
    box-shadow: 0 0 0 0.25rem rgba(102, 126, 234, 0.25) !important;
}

.accordion .accordion-item .accordion-button:not(.collapsed) {
    background: linear-gradient(135deg, #5a6fd8 0%, #6a4190 100%) !important;
    color: white !important;
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4) !important;
}

.accordion .accordion-item .accordion-button::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='white'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e") !important;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.1)) !important;
}

/* Nested FAQ Accordion Buttons - More Specific Selector */
.accordion .accordion-body .accordion .accordion-item .accordion-button {
    background: #81236A !important; /*linear-gradient(135deg, #43B188 0%, #86C6CE 100%) */
    color: #FFFFFF !important;
    box-shadow: 0 2px 6px rgba(116, 185, 255, 0.3) !important;
    font-weight: 500 !important;
    padding: 12px 15px !important;
    border-radius: 6px !important;
    margin-bottom: 5px !important;
    border: none !important;
}

.accordion .accordion-body .accordion .accordion-item .accordion-button:hover {
    /*background: linear-gradient(135deg, #5faeff 0%, #0770c7 100%) !important;*/
    background: #43B188 !important;
    color: white !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 10px rgba(116, 185, 255, 0.4) !important;
}

.accordion .accordion-body .accordion .accordion-item .accordion-button:focus {
    /*background: linear-gradient(135deg, #74b9ff 0%, #0984e3 100%) !important;*/
    color: white !important;
    border-color: rgba(116, 185, 255, 0.5) !important;
    box-shadow: 0 0 0 0.25rem rgba(116, 185, 255, 0.25) !important;
}

.accordion .accordion-body .accordion .accordion-item .accordion-button:not(.collapsed) {
    /*background: linear-gradient(135deg, #5faeff 0%, #0770c7 100%) !important;*/
    color: white !important;
    box-shadow: 0 4px 10px rgba(116, 185, 255, 0.4) !important;
}

.accordion .accordion-body .accordion .accordion-item .accordion-button::after {
    /*background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='white'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e") !important;*/
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.1)) !important;
}

/* Accordion Items */
.accordion .accordion-item {
    border: 1px solid rgba(102, 126, 234, 0.2) !important;
    border-radius: 8px !important;
    margin-bottom: 10px !important;
    overflow: hidden !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
}

.accordion .accordion-body .accordion .accordion-item {
    border: 1px solid rgba(116, 185, 255, 0.2) !important;
    border-radius: 6px !important;
    margin-bottom: 8px !important;
}

/* Accordion Body */
.accordion .accordion-body {
    background-color: #f8f9fa !important;
    border-top: 1px solid rgba(102, 126, 234, 0.1) !important;
}

.accordion .accordion-body .accordion .accordion-body {
    background-color: white !important;
    border-top: 1px solid rgba(116, 185, 255, 0.1) !important;
    padding: 15px !important;
}

/* Container */
.container {
    max-width: 800px;
}

/* Alternative approach - if CSS isolation is the issue, use these global selectors */
/* You can copy these to a regular CSS file in wwwroot/css/ if CSS isolation doesn't work */

/* Global selectors (uncomment if moving to global CSS file) */
.accordion-button {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    color: white !important;
    border: none !important;
    box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3) !important;
    font-weight: 600 !important;
    text-shadow: 0 1px 2px rgba(0,0,0,0.1) !important;
}

.accordion-button:hover {
    background: linear-gradient(135deg, #5a6fd8 0%, #6a4190 100%) !important;
    color: white !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4) !important;
}

.accordion-button:focus,
.accordion-button:not(.collapsed) {
    background: linear-gradient(135deg, #5a6fd8 0%, #6a4190 100%) !important;
    color: white !important;
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4) !important;
}

.accordion-button::after {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='white'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e") !important;
}
/* end global selectors*/

/* Responsive design */
@media (max-width: 768px) {
    .accordion .accordion-item .accordion-button {
        padding: 12px 15px !important;
        font-size: 1.1rem !important;
    }

    .accordion .accordion-body .accordion .accordion-item .accordion-button {
        padding: 10px 12px !important;
        font-size: 0.95rem !important;
    }

    .container {
        padding: 0 10px !important;
    }
}