/**
 * Custom CSS for Joomcar Demo Site - Night/Dark View
 */

/* Night/Dark Mode Base Colors */
:root {
    --night-bg: #121212;
    --night-bg-secondary: #1e1e1e;
    --night-bg-tertiary: #2d2d2d;
    --night-text: #e0e0e0;
    --night-text-secondary: #a0a0a0;
    --night-border: #3d3d3d;
    --night-accent: #4da6ff;
    --night-accent-hover: #66b3ff;
}

body { 
    background: var(--night-bg);
    color: var(--night-text);
}

/* Container - Transparent */
.container, 
.container-fluid,
.site-grid,
.container-component,
.grid-child {
    background-color: transparent !important;
}

/* Cards */
.card,
.card-body {
    background-color: var(--night-bg-secondary) !important;
    color: var(--night-text) !important;
    border-color: var(--night-border) !important;
}

/* Hide article-info */
.article-info,
.item-page .article-info,
.com-content-article .article-info {
    display: none !important;
}

/* Hide custom fields */
.com-content-article .fields-container,
.item-page .fields-container {
    display: none !important;
}

#gsearch-results .fields-container { display: block !important; }

/* Footer */
.site-footer {
    background-color: var(--night-bg-secondary) !important;
    color: var(--night-text-secondary) !important;
    padding: 20px 0;
    margin-top: 40px;
    border-top: 1px solid var(--night-border) !important;
}

.site-footer .footer-links {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 12px;
}

.site-footer .footer-links > a {
    color: var(--night-accent) !important;
    text-decoration: none;
}

.site-footer .footer-links nav,
.site-footer .footer-links div {
    display: contents;
}

.site-footer .footer-links ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: contents;
}

.site-footer .footer-links ul li a {
    color: var(--night-accent) !important;
    text-decoration: none;
}

.site-footer .footer-copyright,
.site-footer .footer-separator {
    color: var(--night-text-secondary) !important;
}

.site-footer .footer-module-title {
    color: var(--night-text) !important;
}

/* Hide Joomla frontend module edit links */
.jmodedit,
.jmodedit + [role="tooltip"],
.edit-module,
.module-edit,
[class*="jmodedit"] {
    display: none !important;
}

/* Header */
.header,
.container-header {
    background-color: var(--night-bg-secondary) !important;
    background-image: none !important;
    border-bottom: 1px solid var(--night-border) !important;
}

.header .nav-item a,
.header .nav-link,
.header a {
    color: #fff !important;
}

.header .navbar-toggler {
    border-color: rgba(255,255,255,0.5);
}

/* Buttons */
.btn-primary, .btn-secondary {
    background-color: var(--night-accent);
    border-color: var(--night-accent);
    color: #000;
}

a {
    color: #fff;
}
a.page-link {
    color: #000;
}

/* Brand */
.brand-logo {
    display: inline-block;
}

.brand-logo img {
    max-height: 50px;
    width: auto;
}

.navbar-brand {
    display: flex;
    align-items: center;
    gap: 10px;
}

.site-description {
    font-size: 12px;
    color: #ccc !important;
    margin-top: 5px;
}

/* Buy Button */
.btn.buy-with-crypto {
    background-color: var(--night-accent) !important;
    border-color: var(--night-accent) !important;
    color: #000 !important;
    display: inline-flex;
    align-items: center;
    padding: 12px 24px;
    font-size: 16px;
    font-weight: 600;
}

.btn.buy-with-crypto:hover {
    background-color: var(--night-accent-hover) !important;
    border-color: var(--night-accent-hover) !important;
}

.buy-button-container {
    text-align: center;
    background: var(--night-bg-secondary) !important;
    border-radius: 8px;
    padding: 35px 10px 10px;
    margin-bottom: 40px;
}

/* Forms - with borders */
input, select, textarea {
    background-color: var(--night-bg-secondary) !important;
    color: var(--night-text) !important;
    border: 1px solid var(--night-border) !important;
}

.form-control {
    background-color: var(--night-bg-secondary) !important;
    color: var(--night-text) !important;
    border: 1px solid var(--night-border) !important;
}

/* Page Headers */
.page-header h1,
.page-header h2,
.item-page h1,
.item-page h2,
.item-page h3,
.item-page h4,
.item-page h5,
.item-page h6 {
    color: var(--night-text) !important;
}

/* Main */
main {
    padding-top: 20px;
}

/* Search */
.search-input {
    background-color: var(--night-bg-secondary) !important;
    color: var(--night-text) !important;
    border: 1px solid var(--night-border) !important;
}

/* Module */
.module {
    background-color: var(--night-bg-secondary) !important;
    color: var(--night-text) !important;
}

/* Tags */
.tags {
    background-color: var(--night-bg) !important;
}

/* Pagination */
.pagination {
    display: flex;
    gap: 10px;
}

.top-a {
    margin-top: 40px;
}

/* AG Module Overrides - Night View */
.ags-field select,
.ags-field select.form-control,
.ags-field select.inputbox,
.ags-module select,
.ags-module select.form-control,
.ags-module select.inputbox,
.ags-filter select,
select.ags-select,
select {
    background-color: var(--night-bg-secondary) !important;
    color: var(--night-text) !important;
    border: 1px solid var(--night-border) !important;
}

.ags-field input,
.ags-field input.form-control,
.ags-field input.inputbox,
.ags-module input,
.ags-module input.form-control,
.ags-module input.inputbox,
input.ags-input,
input[type="text"],
input[type="search"],
input[type="email"],
input[type="number"] {
    background-color: var(--night-bg-secondary) !important;
    color: var(--night-text) !important;
    border: 1px solid var(--night-border) !important;
}

.ags-field input::placeholder,
.ags-module input::placeholder {
    color: var(--night-text-secondary) !important;
}

/* Select dropdown options */
.ags-field select option,
.ags-module select option,
select.ags-select option,
select option {
    background-color: var(--night-bg-secondary) !important;
    color: var(--night-text) !important;
}

/* Checkbox and Radio */
.ags-field input[type="checkbox"],
.ags-field input[type="radio"],
.ags-module input[type="checkbox"],
.ags-module input[type="radio"] {
    background-color: var(--night-bg-secondary) !important;
    border-color: var(--night-border) !important;
}

/* Labels */
.ags-field label,
.ags-module label,
.ags-filter label {
    color: var(--night-text) !important;
}

/* Module title */
.ags-module .module-title,
.ags-module .mod-title {
    color: var(--night-text) !important;
}

/* Search button */
.ags-field button,
.ags-module button,
button.ags-search-btn,
.btn.ags-btn {
    background-color: var(--night-accent) !important;
    color: #000 !important;
    border: 1px solid var(--night-accent) !important;
}

.ags-field button:hover,
.ags-module button:hover,
button.ags-search-btn:hover,
.btn.ags-btn:hover {
    background-color: var(--night-accent-hover) !important;
}

/* Results */
.ags-results,
.ags-list,
.ags-items {
    background-color: var(--night-bg) !important;
    color: var(--night-text) !important;
}

.ags-results .ags-item,
.ags-list .ags-item {
    border-color: var(--night-border) !important;
}

/* Price range slider */
.ags-range-slider .noUi-connect,
.ags-range-slider .noUi-connects {
    background-color: var(--night-accent) !important;
}

.ags-range-slider .noUi-handle {
    background-color: var(--night-accent) !important;
    border-color: var(--night-border) !important;
}

/* Choices.js Select Boxes - Force override */
.choices,
.choices__inner,
.choices[data-type="select-one"] .choices__inner,
.choices.is-focused .choices__inner,
.choices.is-open .choices__inner,
body .choices__inner,
div.choices__inner {
    background-color: var(--night-bg-secondary) !important;
    background: var(--night-bg-secondary) !important;
    border: 1px solid var(--night-border) !important;
    color: var(--night-text) !important;
}

.choices__list--dropdown,
.choices__list[aria-expanded],
.choices__list--dropdown .choices__list,
div.choices__list--dropdown,
.is-active.choices__list--dropdown {
    background-color: var(--night-bg-secondary) !important;
    background: var(--night-bg-secondary) !important;
    border: 1px solid var(--night-border) !important;
}

.choices__list--dropdown .choices__item,
.choices__item,
.choices__item--choice,
.choices__placeholder,
.choices__list--dropdown .choices__item--selectable,
.choices .choices__item {
    color: var(--night-text) !important;
    background-color: transparent !important;
}

.choices__item:hover,
.choices__item--choice:hover,
.choices__list--dropdown .choices__item:hover,
.choices__item--selectable:hover,
.choices.is-highlighted .choices__item,
.choices__list--dropdown .choices__item.is-highlighted,
.choices__item--choice.is-highlighted,
.choices .is-highlighted {
    background-color: var(--night-bg-tertiary) !important;
    color: var(--night-accent) !important;
}

.choices__input,
.choices__input--cloned {
    background-color: var(--night-bg-secondary) !important;
    color: var(--night-text) !important;
    border-color: var(--night-border) !important;
}

.choices__list--single .choices__item {
    color: var(--night-text) !important;
}

/* Chosen Select Boxes */
.chzn-container,
.chzn-container-single .chzn-single,
.chzn-drop {
    background-color: var(--night-bg-secondary) !important;
    border-color: var(--night-border) !important;
}

.chzn-container-single .chzn-single span {
    color: var(--night-text) !important;
}

.chzn-container .chzn-results li {
    color: var(--night-text) !important;
}

.chzn-container .chzn-results li.highlighted {
    background-color: var(--night-bg-tertiary) !important;
    color: var(--night-accent) !important;
}

.chzn-container .chzn-drop .chzn-search input {
    background-color: var(--night-bg-tertiary) !important;
    color: var(--night-text) !important;
    border-color: var(--night-border) !important;
}

/* Select2 */
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple,
.select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-container--default.select2-container--open .select2-selection--single {
    background-color: var(--night-bg-secondary) !important;
    color: var(--night-text) !important;
    border-color: var(--night-border) !important;
}

.select2-selection__rendered,
.select2-selection__placeholder {
    color: var(--night-text) !important;
}

.select2-dropdown,
.select2-container--default .select2-results__option,
.select2-results__option {
    background-color: var(--night-bg-secondary) !important;
    color: var(--night-text) !important;
}

.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted[data-selected] {
    background-color: var(--night-bg-tertiary) !important;
    color: var(--night-accent) !important;
}

.select2-search input {
    background-color: var(--night-bg-tertiary) !important;
    color: var(--night-text) !important;
    border-color: var(--night-border) !important;
}

.select2-selection__arrow {
    border-color: var(--night-text) transparent transparent !important;
}

.card-header {
    padding: 20px;
}

/* ============================================================
   Articles Good Search — CLS prevention + loading shimmer
   ============================================================ */

.ags-module {
    min-height: 280px;
    position: relative;
}

@keyframes ags-shimmer {
    from { background-position: 200% 0; }
    to   { background-position: -200% 0; }
}

@keyframes ags-fade {
    to { opacity: 0; }
}

.ags-module::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 8px;
    pointer-events: none;
    z-index: 2;
    background: linear-gradient(
        90deg,
        transparent            0%,
        rgba(255,255,255,0.05) 50%,
        transparent            100%
    );
    background-size: 200% 100%;
    animation:
        ags-shimmer 1.2s ease-in-out 4,
        ags-fade    0.4s ease       4.8s forwards;
}