/* --- 15. Accordion styles --- */
.accordion-item {
    background-color: var(--card-bg);
    border-color: var(--border-color);
}

.accordion-button {
    background-color: var(--card-bg);
    color: var(--text-main);
}

.accordion-button:not(.collapsed) {
    background-color: var(--bg-light);
    color: var(--primary-color);
}

/* --- 16. Modal styles --- */
.modal-content {
    background-color: var(--card-bg);
    color: var(--text-main);
    border: 1px solid var(--border-color);
    border-radius: 22px;
}

.modal-header,
.modal-footer {
    border-color: var(--border-color);
}

.btn-close {
    filter: invert(var(--invert-val));
    opacity: 0.9;
}

.btn-close:hover {
    opacity: 1;
}

.modal-backdrop.show {
    opacity: 0.72;
}

.modal .text-muted,
.modal small,
.modal .form-text {
    color: var(--text-muted) !important;
}

.accordion-button {
    color: var(--text-main);
}

.accordion-button::after {
    filter: invert(var(--invert-val));
}

.accordion-body {
    color: var(--text-muted);
}

.dropdown-menu,
.offcanvas,
.offcanvas-header,
.offcanvas-body {
    background-color: var(--card-bg);
    color: var(--text-main);
    border-color: var(--border-color);
}

.dropdown-item {
    color: var(--text-main);
}

.dropdown-item:hover,
.dropdown-item:focus {
    background-color: var(--bg-light);
    color: var(--text-main);
}

/* --- 17. Responsive --- */
@media (max-width: 768px) {
    .headline { font-size: 2rem !important; }
    .stat-num { font-size: 2rem; }
    .stat-item { border-right: none; border-bottom: 2px solid var(--border-color); margin-bottom: 15px; }
    .nav-custom-pills { justify-content: flex-start !important; }
    .floating-actions { top: 15px; right: 15px; left: auto; }
    .package-card.featured { transform: scale(1); }
    .package-card.featured:hover { transform: translateY(-10px); }
}

/* --- 18. Utility classes --- */
.text-primary-custom { color: var(--primary-color) !important; }