/* ============================================================
   The Wayang — Black / Gold / White theme override
   Scope: loaded on every visitor-facing search/listing page that shares
   the .serch-container search bar + card-result partials: page_csr,
   job_page, article_list, reels_page, view_celebrities_list,
   view_celebrities_search, view_films_list, view_films_search,
   view_search_main, happening_list, happening_list_search,
   view_csr_list, view_csr_list_search, view_users_list, view_type_group,
   auth/view_claim.
   NOT loaded on dashboard-context pages (e.g. profile/save_profile) —
   the body/.btn-primary !important overrides below would bleed into the
   rest of the /system dashboard chrome, which uses a separate light theme.
   Goal: black background, gold accent, white text.
   Uses !important to win over the page-specific stylesheets
   (csr.css / job.css / reel.css / main.css) regardless of load order.
   ============================================================ */

:root {
    --tw-bg: #0b0b0b;
    --tw-surface: #161616;
    --tw-surface-2: #1f1f1f;
    --tw-border: #2a2a2a;
    --tw-gold: #e6b450;
    --tw-gold-soft: #f0c24b;
    --tw-gold-dim: #c79836;
    --tw-text: #ffffff;
    --tw-muted: #b0b0b0;
}

/* ---- Page canvas ---- */
body {
    background: var(--tw-bg) !important;
    color: var(--tw-text) !important;
}

/* Keep the shared navbar/footer readable on the now-dark page */
body .section-main > .nav-main,
body .section-main {
    background: transparent !important;
}

/* Generic helpers reused across these pages */
.bg-homepage {
    background: var(--tw-bg) !important;
}

/* Bootstrap primary buttons -> gold (gallery "View", modal actions, etc.) */
.btn-primary {
    background-color: var(--tw-gold) !important;
    border-color: var(--tw-gold) !important;
    color: #1a1a1a !important;
}
.btn-primary:hover,
.btn-primary:focus {
    background-color: var(--tw-gold-soft) !important;
    border-color: var(--tw-gold-soft) !important;
    color: #111 !important;
}

/* ============================================================
   1) CSR PAGE  (page_csr.blade.php + csr.css)
   ============================================================ */
/* Light container backgrounds -> dark (these also re-declare inside
   media queries, so !important is required to win). */
.csr-info,
.csr-info2 {
    background: linear-gradient(to bottom, #161616, #0b0b0b) !important;
}
/* csr-info has a fixed height:440px which leaves a big empty band
   above csr-container; let it shrink to its content instead. */
.csr-info {
    height: auto !important;
    padding-bottom: 60px !important;
}
.csr-container {
    margin-top: -30px !important;
}
.csr-container,
.csr-info3,
.gallery-csr,
.gallery-footer-csr {
    background: var(--tw-bg) !important;
}

/* CSR carousel card info strip */
.banner-info,
.banner_item,
.banner-csr {
    background: var(--tw-surface) !important;
}
.total-colected,
.total-colected span,
.duration-banner,
.duration-banner span,
.donate-msg-card p {
    color: var(--tw-text) !important;
}
.donate-msg-card {
    background: var(--tw-surface-2) !important;
}
.outer-barcsr {
    background: var(--tw-surface-2) !important;
}
.inner-barcsr {
    background: var(--tw-gold) !important;
}

/* CSR carousel headings / links */
.title-banner,
.title-banner-sub {
    color: var(--tw-text) !important;
}
.title-banner a,
.viewmore {
    color: var(--tw-gold) !important;
}

/* Old gallery template button */
.btn-read-more {
    background: var(--tw-gold) !important;
    color: #1a1a1a !important;
}

.csr-info h1,
.csr-info p,
.csr-info2 h1,
.csr-info3 h1,
.csr-title-page,
.gallery-title,
.banner-content h2,
.csr-content h2 {
    color: var(--tw-text) !important;
}
.csr-info p {
    color: var(--tw-muted) !important;
}

.csr-info2 h1,
.csr-info3 h1,
.gallery-title,
.csr-title-page {
    color: var(--tw-gold) !important;
}

/* CSR toggle buttons */
.btn-csr-active {
    background: var(--tw-gold) !important;
    color: #1a1a1a !important;
    border: 1px solid var(--tw-gold) !important;
}
.btn-csr-active2 {
    background: transparent !important;
    color: var(--tw-gold) !important;
    border: 1px solid var(--tw-gold) !important;
}
.btn-csr-active2:hover {
    background: var(--tw-gold) !important;
    color: #1a1a1a !important;
}

/* CSR request modal */
#csrleModal .modal-content {
    background: var(--tw-surface) !important;
    color: var(--tw-text) !important;
    border: 1px solid var(--tw-border) !important;
}
#csrleModal .modal-header,
#csrleModal .modal-footer-custom {
    border-color: var(--tw-border) !important;
}
#csrleModal .modal-title,
#csrleModal label,
#csrleModal .form-check-label,
#csrleModal .upload-csr-title {
    color: var(--tw-text) !important;
}
#csrleModal .btn-close {
    filter: invert(1) grayscale(1) brightness(2);
}

.req-csr-input,
.req-csr-area,
.req-csr-select {
    background: var(--tw-surface-2) !important;
    color: var(--tw-text) !important;
    border: 1px solid var(--tw-border) !important;
}
.req-csr-input:focus,
.req-csr-area:focus,
.req-csr-select:focus {
    background: var(--tw-surface-2) !important;
    color: var(--tw-text) !important;
}
.req-csr-input::placeholder,
.req-csr-area::placeholder {
    color: #777 !important;
}
.req-csr-select option {
    background: var(--tw-surface-2) !important;
    color: var(--tw-text) !important;
}

.upload-csr {
    background: var(--tw-surface-2) !important;
    border: 1px dashed var(--tw-border) !important;
    color: var(--tw-muted) !important;
}
.upload-csr .link {
    color: var(--tw-gold) !important;
}
.file-item-csr {
    background: var(--tw-surface-2) !important;
    color: var(--tw-text) !important;
}

.btn-submit-request {
    background: var(--tw-gold) !important;
    color: #1a1a1a !important;
    border: none !important;
}
.btn-submit-request:hover {
    background: var(--tw-gold-soft) !important;
}

.gallery-overlay h3 {
    color: #fff !important;
}

/* ============================================================
   2) JOB PAGE  (job_page.blade.php + job.css)
   The page's native accent is cyan (#00b3df) -> recolor to gold.
   ============================================================ */
.job-page-title h1,
.title-job-page h1,
.job-list-header h2,
.job-name-title h1,
.receive-email-job-title h1 {
    color: var(--tw-text) !important;
}
.job-page-title p {
    color: var(--tw-muted) !important;
}
.title-job-page h1 span {
    color: var(--tw-gold) !important;
}

/* Search + filter bar */
.search-job-section {
    background: transparent !important;
}
.input-wrapper {
    background: var(--tw-surface) !important;
    border: 1px solid var(--tw-border) !important;
}
.input-wrapper input {
    background: transparent !important;
    color: var(--tw-text) !important;
}
.input-wrapper input::placeholder {
    color: #777 !important;
}
.input-wrapper button svg path {
    fill: var(--tw-gold) !important;
}

.filter-btn {
    background: var(--tw-surface) !important;
    color: var(--tw-text) !important;
    border: 1px solid var(--tw-border) !important;
}
.filter-btn.has-value {
    background: var(--tw-gold) !important;
    color: #1a1a1a !important;
}
.filter-btn.has-value svg path {
    stroke: #1a1a1a !important;
}
.filter-btn .arrow-down svg path {
    stroke: var(--tw-text) !important;
}
.job-filter-menu {
    background: var(--tw-surface) !important;
    border: 1px solid var(--tw-border) !important;
}
.job-filter-menu a {
    color: var(--tw-text) !important;
}
.job-filter-menu a:hover,
.job-filter-menu a.is-selected {
    color: var(--tw-gold) !important;
}
.job-checkbox label {
    color: var(--tw-text) !important;
}

/* Job cards */
.job-card {
    background: var(--tw-surface) !important;
    border: 1px solid var(--tw-border) !important;
    color: var(--tw-text) !important;
}
.job-card:hover {
    border-color: var(--tw-gold) !important;
}
.job-card .company-name,
.job-card .job-detail p {
    color: var(--tw-muted) !important;
}
.job-card .job-detail svg path {
    fill: var(--tw-gold) !important;
}
.job-card .close-job svg path {
    fill: #888 !important;
}
.job-post-date p {
    color: #888 !important;
}
.new-badge {
    background: var(--tw-gold) !important;
    color: #1a1a1a !important;
}

.job-type-pill {
    background: rgba(230, 180, 80, 0.15) !important;
    color: var(--tw-gold) !important;
}
.job-card:hover .job-type-pill {
    background: var(--tw-gold) !important;
    color: #1a1a1a !important;
}

/* Job detail panel */
.job-details-section {
    background: var(--tw-surface) !important;
    border: 2px solid var(--tw-border) !important;
    color: var(--tw-text) !important;
}
.job-details-title h1,
.job-details-title h2,
.job-details-body,
.job-details-body * {
    color: var(--tw-text) !important;
}
#job_salary {
    color: var(--tw-gold) !important;
}
.close-job-detail {
    color: #888 !important;
}
.close-job-detail:hover {
    color: #fff !important;
}
.apply-job-now-btn {
    display: none !important;
}

/* No results */
.no-results-container h3 {
    color: var(--tw-text) !important;
}
.no-results-container p {
    color: var(--tw-muted) !important;
}

/* Email alert box */
.receive-email-job {
    background: transparent !important;
    border: none !important;
}
.btn-email-receive-job {
    background: var(--tw-surface-2) !important;
    color: var(--tw-text) !important;
    border: 1px solid var(--tw-border) !important;
}
.btn-email-receive-job::placeholder {
    color: #777 !important;
}
.btn-create-alert {
    background: var(--tw-gold) !important;
    color: #1a1a1a !important;
    border: none !important;
}

/* Pagination (job + article share the look) */
.pagination-number,
.pagination-btn {
    background: var(--tw-surface) !important;
    color: var(--tw-text) !important;
    border: 1px solid var(--tw-border) !important;
}
.pagination-number.active {
    background: var(--tw-gold) !important;
    color: #1a1a1a !important;
    border-color: var(--tw-gold) !important;
}
.pagination-btn.disabled {
    opacity: 0.4 !important;
}

.clear-filter-btn {
    background: transparent !important;
    color: var(--tw-gold) !important;
    border: 1px solid var(--tw-gold) !important;
}
.clear-filter-btn:hover {
    background: var(--tw-gold) !important;
    color: #1a1a1a !important;
}

/* ============================================================
   3) ARTICLE LIST  (article_list.blade.php + main.css)
   ============================================================ */
.serch-container {
    background: var(--tw-surface) !important;
    border-bottom: 1px solid var(--tw-border) !important;
}
.search-form h6 {
    color: var(--tw-muted) !important;
}
/* The search form wrappers were light containers */
.search-topmain,
.search-left,
.search-wrapper,
.search-form {
    background: transparent !important;
}
.search-form .form-container,
.search-form .form-container.name {
    background: var(--tw-surface-2) !important;
    border: none !important;
}
.search-form .form-container:focus-within {
    border: none !important;
}
.search-form .form-container input {
    background: transparent !important;
    color: var(--tw-text) !important;
}
.input-search {
    background: var(--tw-surface-2) !important;
    color: var(--tw-text) !important;
}
.input-search::placeholder {
    color: #777 !important;
}
.btn-search {
    background: var(--tw-gold) !important;
    color: #1a1a1a !important;
    border: none !important;
}
.btn-search:hover {
    background: var(--tw-gold-soft) !important;
}

/* bootstrap-select dropdowns */
.serch-container .bootstrap-select .btn,
.select-input.btn,
.bootstrap-select .dropdown-toggle {
    background: var(--tw-surface-2) !important;
    color: var(--tw-text) !important;
    border: 1px solid var(--tw-border) !important;
}
.bootstrap-select .dropdown-menu {
    background: var(--tw-surface) !important;
    border: 1px solid var(--tw-border) !important;
}
.bootstrap-select .dropdown-menu li a {
    color: var(--tw-text) !important;
}
.bootstrap-select .dropdown-menu li a:hover,
.bootstrap-select .dropdown-menu .selected a {
    background: var(--tw-surface-2) !important;
    color: var(--tw-gold) !important;
}

.title-head,
.desc-count {
    color: var(--tw-text) !important;
}
.bck-title a {
    color: var(--tw-gold) !important;
}
.info-search {
    color: var(--tw-muted) !important;
}

/* Article cards */
.article-slide,
.article-slider {
    background: var(--tw-surface) !important;
}
.article-slider-content {
    background: var(--tw-surface) !important;
}
.article-slider-title h4 {
    color: var(--tw-text) !important;
}
.article-slider-title p {
    color: var(--tw-muted) !important;
}
.article-slider-btn button {
    background: var(--tw-gold) !important;
    color: #1a1a1a !important;
    border: none !important;
}
.article-slider-btn button:hover {
    background: var(--tw-gold-soft) !important;
}

/* Celebrities list cards (celebrities_card_result) — card/overlay are already
   dark; only the name label was light (#000 on #fff). */
.card-name {
    background: transparent !important;
    color: var(--tw-text) !important;
}
.overlay-card {
    background: rgba(0, 0, 0, 0.55) !important;
    color: #fff !important;
}

/* ---- Article detail / "view article" page (article_public.blade.php) ---- */
.article-new-body,
.article-body-title,
.article-descs {
    background: var(--tw-bg) !important;
    color: var(--tw-text) !important;
}
.title-arc {
    color: var(--tw-text) !important;
}
.article-date {
    color: var(--tw-muted) !important;
}
.article-date a {
    color: var(--tw-gold) !important;
}
.article-tag label {
    color: var(--tw-muted) !important;
}
.tag-item-article,
.badge-tag {
    background: var(--tw-surface-2) !important;
    color: var(--tw-text) !important;
}
/* Author HTML body: force readable text, keep links gold */
.article-descs,
.article-descs * {
    color: var(--tw-text) !important;
}
.article-descs a {
    color: var(--tw-gold) !important;
}

/* Like / share / comment action bar under the article */
.article-body-button {
    background: var(--tw-surface) !important;
}

/* "No comments yet" empty state */
.no-comment-section,
.no-comment-section h6,
.no-comment-section p {
    color: var(--tw-text) !important;
}

/* Comments — make all comment text white */
.comment-section,
.comment-sections,
.comment-post,
.comment-post p,
.comment-profile-status p,
.reply-comment-sections .comment-profile-status p,
.comment-time-ago,
.comment-view-count,
.profile-comment,
.bil-comment-section-title,
.bil-comment-section-title h2,
.sort-wrapper p,
.reply-comment-btn,
.share-comment-btn,
.toggle-replies-btn,
.like-comment-btn .like-count {
    color: var(--tw-text) !important;
}
.comment-input,
.comment-sec-input,
.send-comment-input-article {
    background: var(--tw-surface-2) !important;
    color: var(--tw-text) !important;
    border: 1px solid var(--tw-border) !important;
}
.comment-input::placeholder {
    color: #777 !important;
}
.btn-send-article {
    background: var(--tw-gold) !important;
    color: #1a1a1a !important;
    border: none !important;
}

/* Trending / sidebar */
.trending-article-card {
    background: var(--tw-surface) !important;
    border: 1px solid var(--tw-border) !important;
}
.trending-card-title {
    color: var(--tw-text) !important;
}
.trending-title {
    color: var(--tw-gold) !important;
}
.trending-line {
    border-color: var(--tw-border) !important;
}

/* Inline ad block */
.article-ads-section {
    background: var(--tw-surface) !important;
    color: var(--tw-text) !important;
}

/* ============================================================
   4) REELS  (reels_page.blade.php + reel.css)
   Already dark; native accent cyan (#00B3DF) -> gold.
   ============================================================ */
.nav-btn svg path {
    stroke: var(--tw-gold) !important;
}
.follow-btn {
    border: 1px solid var(--tw-gold) !important;
    color: var(--tw-gold) !important;
}
.follow-btn.following,
.follow-btn.following_acc {
    background: var(--tw-gold) !important;
    color: #1a1a1a !important;
    border-color: var(--tw-gold) !important;
}
.video-progress-fill {
    background-color: var(--tw-gold) !important;
}
.video-progress-fill::after {
    background: var(--tw-gold) !important;
}
.send-btn svg path {
    fill: var(--tw-gold) !important;
    opacity: 1 !important;
}
.reels-credit a {
    color: var(--tw-gold) !important;
}

/* ============================================================
   5) HAPPENING CARDS (happening_card_result.blade.php)
   Default is a frosted-white glass panel with black text — clashes
   with every other dark card type on the combined search-results page.
   ============================================================ */
.happening-card {
    background: rgba(0, 0, 0, 0.6) !important;
}
.happening-card .happening-content-wrap .happening-content h4,
.happening-card .happening-content-wrap .happening-content p {
    color: var(--tw-text) !important;
    text-shadow: none !important;
}
.happening-card a.link-readmore {
    background: var(--tw-gold) !important;
    color: #1a1a1a !important;
}