/*============================================
    Site-specific overrides for Ironik dark theme
    Bootstrap utilities assume light backgrounds;
    these overrides adapt them for the dark template.
==============================================*/

/* --- Text utilities --- */
.text-muted {
    color: #b0b0b0 !important;
}

.text-dark {
    color: #e0e0e0 !important;
}

.text-body {
    color: var(--tg-body-color) !important;
}

.text-secondary {
    color: #aaa !important;
}

/* --- Cards --- */
.card {
    background-color: rgba(255, 255, 255, 0.05);
    border-color: var(--tg-border-1);
    color: var(--tg-body-color);
}

.card-title,
.card-title a {
    color: var(--tg-heading-color);
}

.card-title a:hover {
    color: var(--tg-theme-primary);
}

.card-text {
    color: var(--tg-body-color);
}

.card-body small,
.card-body .small {
    color: #b0b0b0;
}

.card-img-top {
    border-bottom: 1px solid var(--tg-border-1);
}

/* --- Badges --- */
.badge.bg-secondary {
    background-color: rgba(255, 255, 255, 0.15) !important;
    color: #e0e0e0;
}

.badge.bg-info {
    background-color: var(--tg-theme-secondary) !important;
    color: #fff;
}

.badge.bg-success {
    color: #fff;
}

.badge.bg-primary {
    background-color: var(--tg-theme-primary) !important;
}

/* --- Buttons --- */
.btn-outline-primary {
    color: var(--tg-theme-primary);
    border-color: var(--tg-theme-primary);
}

.btn-outline-primary:hover {
    background-color: var(--tg-theme-primary);
    border-color: var(--tg-theme-primary);
    color: #fff;
}

.btn-primary {
    background-color: var(--tg-theme-primary);
    border-color: var(--tg-theme-primary);
}

.btn-primary:hover {
    background-color: var(--tg-color-light-blue);
    border-color: var(--tg-color-light-blue);
}

/* --- Form controls --- */
.form-control,
.form-select {
    background-color: rgba(255, 255, 255, 0.05);
    border-color: var(--tg-border-1);
    color: var(--tg-heading-color);
}

.form-control:focus,
.form-select:focus {
    background-color: rgba(255, 255, 255, 0.08);
    border-color: var(--tg-theme-primary);
    color: var(--tg-heading-color);
    box-shadow: 0 0 0 0.2rem rgba(0, 128, 96, 0.25);
}

.form-control::placeholder {
    color: #777;
}

.form-label,
label {
    color: var(--tg-heading-color);
}

.form-check-label {
    color: var(--tg-body-color);
}

.form-text {
    color: #b0b0b0;
}

/* --- Tables --- */
.table {
    color: var(--tg-body-color);
    border-color: var(--tg-border-1);
}

.table thead th {
    color: var(--tg-heading-color);
    border-bottom-color: var(--tg-border-1);
}

.table td {
    border-bottom-color: var(--tg-border-1);
}

/* --- Pagination --- */
.page-link {
    background-color: rgba(255, 255, 255, 0.05);
    border-color: var(--tg-border-1);
    color: var(--tg-body-color);
}

.page-link:hover {
    background-color: rgba(255, 255, 255, 0.1);
    border-color: var(--tg-theme-primary);
    color: var(--tg-heading-color);
}

.page-item.active .page-link {
    background-color: var(--tg-theme-primary);
    border-color: var(--tg-theme-primary);
    color: #fff;
}

/* --- Alerts --- */
.alert {
    border-color: var(--tg-border-1);
}

/* --- List groups --- */
.list-group-item {
    background-color: rgba(255, 255, 255, 0.05);
    border-color: var(--tg-border-1);
    color: var(--tg-body-color);
}

/* --- Dropdown menus --- */
.dropdown-menu {
    background-color: #1a1a1a;
    border-color: var(--tg-border-1);
}

.dropdown-item {
    color: var(--tg-body-color);
}

.dropdown-item:hover,
.dropdown-item:focus {
    background-color: rgba(255, 255, 255, 0.08);
    color: var(--tg-heading-color);
}

.dropdown-divider {
    border-top-color: var(--tg-border-1);
}

/* --- Headings inside content sections --- */
section h1,
section h2,
section h3,
section h4,
section h5,
section h6 {
    color: var(--tg-heading-color);
}

/* --- Links --- */
section a:not(.btn):not(.badge):not(.tg-btn):not(.nav-link):not(.dropdown-item):not(.page-link) {
    color: var(--tg-theme-primary);
}

section a:not(.btn):not(.badge):not(.tg-btn):not(.nav-link):not(.dropdown-item):not(.page-link):hover {
    color: var(--tg-theme-secondary);
}

/* --- Strikethrough sale prices --- */
s.text-muted {
    color: #888 !important;
}

/* --- Accordion (FAQ area already styled, but override Bootstrap defaults) --- */
.accordion-item {
    border-color: var(--tg-border-1);
}

/* --- Footer widget links --- */
.footer__links li {
    margin-bottom: 8px;
}

.footer__links a {
    color: var(--tg-body-color);
    text-decoration: none;
}

.footer__links a:hover {
    color: var(--tg-theme-primary);
}

.footer__widget-title {
    color: var(--tg-heading-color);
}

/* --- Blog/page content areas --- */
.blog-content,
.page-content,
.product-description {
    color: var(--tg-body-color);
}

.blog-content h1, .blog-content h2, .blog-content h3,
.blog-content h4, .blog-content h5, .blog-content h6,
.page-content h1, .page-content h2, .page-content h3,
.page-content h4, .page-content h5, .page-content h6,
.product-description h1, .product-description h2, .product-description h3,
.product-description h4, .product-description h5, .product-description h6 {
    color: var(--tg-heading-color);
}

/* --- Header user dropdown --- */
.tgmenu__action .header-btn .dropdown {
    display: inline-flex;
    align-items: center;
}

.tgmenu__action .tg-btn.dropdown-toggle {
    overflow: visible;
}

.tgmenu__action .tg-btn.dropdown-toggle::after {
    margin-left: 8px;
    margin-right: 6px;
    flex-shrink: 0;
}

.tgmenu__action .tg-btn.dropdown-toggle span {
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: inline-block;
}

@media (max-width: 1199.98px) {
    .tgmenu__action .tg-btn.dropdown-toggle span {
        max-width: 120px;
    }
}

/* --- Shadow replacement for dark theme --- */
.shadow-sm {
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.4) !important;
}
