/*
 * IBF Theme — Frontend Override
 * International Buddhist Family · ibf.net.in
 *
 * HOW TO USE:
 * Add this line AFTER the existing frontend CSS links in
 * resources/views/layouts/include_top.blade.php
 * (place it after the custom.css line):
 *
 *   <link rel="stylesheet" href="{{ asset('assets/frontend/css/ibf-theme.css') }}">
 *
 * Then copy this file to:
 *   public/assets/frontend/css/ibf-theme.css
 *
 * ─────────────────────────────────────────────────────────
 * COLOR PALETTE
 *
 *   Gold (primary accent)  #F5C518
 *   Gold hover             #FFD84A
 *   Gold dim               #C49D12
 *   Gold glow bg           rgba(245, 197, 24, 0.10)
 *   Gold border            rgba(245, 197, 24, 0.20)
 *
 *   Background (page)      #1a2744   ← deep navy-black
 *   Surface (cards/nav)    #1e3057
 *   Card elevated          #243668
 *
 *   Text primary           #F0EDE6   ← warm off-white
 *   Text secondary         #8A8D9A   ← muted slate
 *   Border default         rgba(245, 197, 24, 0.18)
 * ─────────────────────────────────────────────────────────
 */

/* ── 1. CSS Variable Overrides ────────────────────────────
   These shadow every var() call in style.css / custom.css.
   No selectors need to change — just swapping the values. */

:root {
    /* Primary accent: gold replaces the purple #6C1CFF */
    --themeColor:  #F5C518;

    /* Alternate skin colours (used by some widgets/badges) */
    --skinColor2:  #C49D12;   /* gold-dim  */
    --skinColor3:  #FFD84A;   /* gold-hover */
    --skinColor4:  #F5C518;   /* keep gold  */
    --skinColor5:  #C49D12;
    --skinColor6:  #FFD84A;

    /* Background / surface */
    --whiteColor:  #F0EDE6;   /* warm off-white — replaces pure #FFF for text/cards */
    --blackColor:  #1a2744;   /* deep navy-black */

    /* Dark tones */
    --darkColor:   #F0EDE6;   /* headings & strong text become off-white on dark bg */
    --nightColor:  #B0B3BF;   /* slightly lighter than muted for sub-headings */
    --grayColor:   #8A8D9A;   /* body copy */
}

/* ── 2. Page Background & Base Text ───────────────────────
   Force the whole page onto the dark navy background.      */

html,
body {
    background-color: #1a2744 !important;
    color: #8A8D9A;
}

/* ── 3. Surface / Card Backgrounds ───────────────────────
   Any element that was white (#fff / var(--whiteColor))
   becomes the dark surface colour instead.                 */

.ol-card,
.card,
.listing-card,
.blog-card,
.agent-card,
.review-card,
.modal-content,
.dropdown-menu,
.ol-sidebar,
.sidebar,
.widget,
.widget-box,
.ol-widget,
.filter-box,
.search-box,
.ol-search-box,
.account-box,
.login-box,
.register-box,
.breadcrumb-area,
.hero-section,
.section-bg,
.ol-section-bg,
[class*="bg-white"],
[class*="bg-light"] {
    background-color: #1e3057 !important;
    border-color: rgba(245, 197, 24, 0.18) !important;
}

/* Elevated / inner cards */
.inner-card,
.card-body,
.ol-card-body,
.ol-form-control,
.form-control,
.input-group,
select,
textarea {
    background-color: #243668 !important;
    border-color: rgba(245, 197, 24, 0.20) !important;
    color: #F0EDE6 !important;
}

/* ── 4. Navigation ────────────────────────────────────────*/

.navbar,
.header,
.ol-header,
.main-header,
.sticky-header,
.site-header {
    background-color: rgba(8, 12, 24, 0.97) !important;
    border-bottom: 0.5px solid rgba(245, 197, 24, 0.18) !important;
    box-shadow: none !important;
}

.nav-link,
.navbar-nav .nav-link {
    color: #8A8D9A !important;
}

.nav-link:hover,
.navbar-nav .nav-link:hover,
.nav-link.active,
.navbar-nav .nav-link.active {
    color: #F5C518 !important;
}

.navbar-brand,
.site-logo {
    color: #F5C518 !important;
}

/* ── 5. Buttons ───────────────────────────────────────────*/

/* Primary filled button */
.btn-primary,
.ol-btn-primary,
.theme-btn,
.ol-theme-btn,
[class*="btn-theme"],
[class*="btn-main"] {
    background-color: #F5C518 !important;
    border-color: #F5C518 !important;
    color: #1a2744 !important;
    font-weight: 500 !important;
}

.btn-primary:hover,
.ol-btn-primary:hover,
.theme-btn:hover,
.ol-theme-btn:hover,
[class*="btn-theme"]:hover,
[class*="btn-main"]:hover {
    background-color: #FFD84A !important;
    border-color: #FFD84A !important;
    color: #1a2744 !important;
}

/* Outline / ghost button */
.btn-outline-primary,
.ol-btn-outline,
[class*="btn-outline-theme"],
[class*="btn-border"] {
    background-color: transparent !important;
    border-color: rgba(245, 197, 24, 0.40) !important;
    color: #F5C518 !important;
}

.btn-outline-primary:hover,
.ol-btn-outline:hover,
[class*="btn-outline-theme"]:hover,
[class*="btn-border"]:hover {
    background-color: #F5C518 !important;
    color: #1a2744 !important;
}

/* Secondary / ghost (dark bg, light text) */
.btn-secondary,
.ol-btn-secondary,
.btn-light,
.btn-white {
    background-color: #243668 !important;
    border-color: rgba(240, 237, 230, 0.20) !important;
    color: #F0EDE6 !important;
}

.btn-secondary:hover,
.ol-btn-secondary:hover,
.btn-light:hover,
.btn-white:hover {
    border-color: #F5C518 !important;
    color: #F5C518 !important;
}

/* ── 6. Typography ────────────────────────────────────────*/

h1, h2, h3, h4, h5, h6,
.ol-heading,
.section-title,
.card-title,
.listing-title,
.blog-title,
.agent-name {
    color: #F0EDE6 !important;
}

a {
    color: #F5C518;
}

a:hover {
    color: #FFD84A;
}

p,
.ol-body-text,
.listing-desc,
.blog-excerpt {
    color: #8A8D9A;
}

/* Accent text (was purple) */
.text-theme,
.ol-text-theme,
.text-primary,
[class*="text-color-theme"] {
    color: #F5C518 !important;
}

/* ── 7. Badges & Pills ────────────────────────────────────*/

.badge,
.ol-badge,
.tag,
.ol-tag,
[class*="badge-theme"],
[class*="tag-theme"] {
    background-color: rgba(245, 197, 24, 0.12) !important;
    border: 0.5px solid rgba(245, 197, 24, 0.30) !important;
    color: #F5C518 !important;
}

.badge-primary,
.ol-badge-primary,
[class*="badge-primary"] {
    background-color: #F5C518 !important;
    color: #1a2744 !important;
    border-color: #F5C518 !important;
}

/* ── 8. Forms & Inputs ────────────────────────────────────*/

.form-control:focus,
.ol-form-control:focus,
input:focus,
select:focus,
textarea:focus {
    border-color: #F5C518 !important;
    box-shadow: 0 0 0 3px rgba(245, 197, 24, 0.15) !important;
    outline: none !important;
}

.form-label,
.ol-form-label,
label {
    color: #B0B3BF !important;
}

/* Input placeholder */
::placeholder {
    color: #5a5d6b !important;
}

/* ── 9. Borders & Dividers ────────────────────────────────*/

.border,
.border-top,
.border-bottom,
.border-left,
.border-right,
hr,
.divider,
.ol-divider {
    border-color: rgba(245, 197, 24, 0.15) !important;
}

/* Active / selected borders */
.border-theme,
.ol-border-theme,
[class*="border-primary"] {
    border-color: #F5C518 !important;
}

/* ── 10. Hero / Banner Sections ──────────────────────────*/

.hero-area,
.banner-area,
.ol-hero,
.ol-banner,
.hero-wrapper,
.banner-wrapper {
    background-color: #1a2744 !important;
    background-image:
        radial-gradient(ellipse 60% 40% at 50% 0%, rgba(245, 197, 24, 0.08) 0%, transparent 70%) !important;
}

/* Featured / highlight badge in hero */
.hero-badge,
.ol-hero-badge,
.featured-badge {
    background: rgba(245, 197, 24, 0.10) !important;
    border: 0.5px solid rgba(245, 197, 24, 0.30) !important;
    color: #F5C518 !important;
    border-radius: 20px !important;
}

/* ── 11. Category / Feature Tiles ────────────────────────
   The gold tiles visible at the bottom of the IBF hero.   */

.category-tile,
.feature-tile,
.ol-feature-box,
.ol-category-box,
[class*="icon-box"],
[class*="cat-box"],
[class*="feature-box"] {
    background-color: #F5C518 !important;
    color: #1a2744 !important;
    border-color: #F5C518 !important;
}

.category-tile:hover,
.feature-tile:hover,
.ol-feature-box:hover,
.ol-category-box:hover,
[class*="icon-box"]:hover,
[class*="cat-box"]:hover,
[class*="feature-box"]:hover {
    background-color: #FFD84A !important;
}

.category-tile .title,
.feature-tile .title,
.ol-feature-box .title,
[class*="icon-box"] .title,
[class*="feature-box"] .title {
    color: #1a2744 !important;
}

/* ── 12. Stats / Counter Sections ────────────────────────*/

.stat-number,
.counter-number,
.ol-counter,
[class*="count-num"],
[class*="counter-num"] {
    color: #F5C518 !important;
}

.stat-label,
.counter-label,
[class*="count-label"],
[class*="counter-label"] {
    color: #8A8D9A !important;
}

/* ── 13. Sidebar & Filters ───────────────────────────────*/

.ol-sidebar .widget-title,
.sidebar .widget-title,
.filter-title,
.ol-filter-title {
    color: #F0EDE6 !important;
    border-bottom: 1px solid rgba(245, 197, 24, 0.18) !important;
    padding-bottom: 10px !important;
}

.ol-sidebar .widget,
.sidebar .widget {
    background-color: #1e3057 !important;
    border: 0.5px solid rgba(245, 197, 24, 0.15) !important;
    border-radius: 10px !important;
}

/* ── 14. Pagination ──────────────────────────────────────*/

.page-link {
    background-color: #1e3057 !important;
    border-color: rgba(245, 197, 24, 0.18) !important;
    color: #8A8D9A !important;
}

.page-link:hover {
    background-color: #F5C518 !important;
    color: #1a2744 !important;
}

.page-item.active .page-link {
    background-color: #F5C518 !important;
    border-color: #F5C518 !important;
    color: #1a2744 !important;
}

/* ── 15. Footer ──────────────────────────────────────────*/

.footer,
.site-footer,
.ol-footer {
    background-color: #111c36 !important;
    border-top: 0.5px solid rgba(245, 197, 24, 0.18) !important;
    color: #8A8D9A !important;
}

.footer .footer-title,
.site-footer .footer-title,
.ol-footer .footer-title {
    color: #F0EDE6 !important;
}

.footer a,
.site-footer a,
.ol-footer a {
    color: #8A8D9A !important;
}

.footer a:hover,
.site-footer a:hover,
.ol-footer a:hover {
    color: #F5C518 !important;
}

.footer-bottom,
.ol-footer-bottom {
    border-top: 0.5px solid rgba(245, 197, 24, 0.12) !important;
    color: #5a5d6b !important;
}

/* ── 16. Alerts & Notifications ──────────────────────────*/

.alert-success {
    background-color: rgba(245, 197, 24, 0.10) !important;
    border-color: rgba(245, 197, 24, 0.30) !important;
    color: #F5C518 !important;
}

.alert-info {
    background-color: rgba(245, 197, 24, 0.07) !important;
    border-color: rgba(245, 197, 24, 0.20) !important;
    color: #B0B3BF !important;
}

/* ── 17. Scrollbar (Webkit) ──────────────────────────────*/

::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: #1e3057;
}

::-webkit-scrollbar-thumb {
    background: #C49D12;
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
    background: #F5C518;
}

/* ── 18. Selection Highlight ─────────────────────────────*/

::selection {
    background: rgba(245, 197, 24, 0.25);
    color: #F0EDE6;
}

/* ── Fix: Active tab / pill text — navy on gold background ── */
.nav-pills .nav-link.active,
.nav-tabs .nav-link.active,
.nav .nav-link.active,
[class*="tab"] .active,
[class*="pill"] .active,
.tab-btn.active,
.filter-btn.active,
.category-tab.active,
.at-tab.active,
a.active,
button.active {
    color: #1a2744 !important;
}

/* ── Fix: Nav links default text — readable on light bg ── */
.nav-pills .nav-link,
.nav-tabs .nav-link,
.tab-btn,
.filter-btn,
.category-tab,
.at-tab {
    color: #1a2744 !important;
}

.nav-pills .nav-link:hover,
.nav-tabs .nav-link:hover,
.tab-btn:hover,
.filter-btn:hover,
.category-tab:hover,
.at-tab:hover {
    color: #1a2744 !important;
}

/* ── Fix: Any gold background should have navy text ── */
[style*="background-color: #F5C518"],
[style*="background:#F5C518"],
.bg-theme,
.bg-primary {
    color: #1a2744 !important;
}

/* ── Fix: Active tab — white text on gold background ── */
.nav-pills .nav-link.active,
.nav-tabs .nav-link.active,
.nav .nav-link.active,
[class*="tab"] .active,
[class*="pill"] .active,
.tab-btn.active,
.filter-btn.active,
.category-tab.active,
.at-tab.active,
a.active,
button.active {
    color: #ffffff !important;
}

/* ── Fix: Nav links default — white text ── */
.nav-pills .nav-link,
.nav-tabs .nav-link,
.tab-btn,
.filter-btn,
.category-tab,
.at-tab {
    color: #ffffff !important;
}

.nav-pills .nav-link:hover,
.nav-tabs .nav-link:hover,
.tab-btn:hover,
.filter-btn:hover,
.category-tab:hover,
.at-tab:hover {
    color: #F5C518 !important;
}

/* ── Fix: Dropdown menu text readable on white background ── */
.dropdown-menu,
.nice-select .list,
.select2-dropdown,
.nice-select-dropdown {
    background-color: #ffffff !important;
    border: 1px solid #e0e0e0 !important;
}

.dropdown-menu .dropdown-item,
.dropdown-item,
.nice-select .option,
.nice-select li,
.select2-results__option {
    color: #1a2744 !important;
    background-color: transparent !important;
}

.dropdown-menu .dropdown-item:hover,
.dropdown-item:hover,
.nice-select .option:hover,
.nice-select li:hover,
.select2-results__option:hover {
    background-color: #F5C518 !important;
    color: #1a2744 !important;
}

/* Choose Type selected value text */
.nice-select .current,
.nice-select span,
.search-select .current {
    color: #1a2744 !important;
}

/* ── Fix: Search input text and placeholder readable ── */
input[type="search"],
input[type="text"],
.search-input,
.search-field,
[class*="search"] input,
.header-search input,
.ol-search-box input {
    color: #ffffff !important;
    background-color: #1e3057 !important;
}

input[type="search"]::placeholder,
input[type="text"]::placeholder,
.search-input::placeholder,
[class*="search"] input::placeholder {
    color: #a0aec0 !important;
}

/* ── Fix: Navbar dropdown items — navy blue text ── */
.navbar .dropdown-menu .dropdown-item,
.nav .dropdown-menu .dropdown-item,
.header .dropdown-menu .dropdown-item,
.dropdown-menu li a,
.dropdown-menu a {
    color: #1a2744 !important;
}

.navbar .dropdown-menu .dropdown-item:hover,
.nav .dropdown-menu .dropdown-item:hover,
.dropdown-menu li a:hover,
.dropdown-menu a:hover {
    background-color: #F5C518 !important;
    color: #1a2744 !important;
}

/* Active/highlighted item */
.dropdown-menu .dropdown-item.active,
.dropdown-menu li.active a {
    background-color: #F5C518 !important;
    color: #1a2744 !important;
}

/* ── Fix: All dropdown text force navy blue ── */
.dropdown-menu *,
.dropdown-menu li,
.dropdown-menu li a,
.dropdown-menu li span,
.dropdown-item,
.dropdown-item:not(.active):not(:active) {
    color: #1a2744 !important;
}

/* ── Fix: .first-sub-menu items — navy blue text ── */
.first-sub-menu a,
.first-sub-menu li a,
.first-sub-menu li a:link,
.first-sub-menu li a:visited {
    color: #1a2744 !important;
}

.first-sub-menu a:hover,
.first-sub-menu li a:hover {
    color: #1a2744 !important;
    background: #F5C518 !important;
}

/* ── Fix: Filter/category tabs — navy blue unselected text ── */
.at-filter-btn,
.at-tab-btn,
.filter-tab-btn,
.ua-filter-btn,
.listing-filter-btn,
.at-listing-tab,
.directory-tab,
.at-directory-tab,
[class*="filter-btn"],
[class*="tab-btn"] {
    color: #1a2744 !important;
}

.at-filter-btn.active,
.at-tab-btn.active,
.filter-tab-btn.active,
.ua-filter-btn.active,
[class*="filter-btn"].active,
[class*="tab-btn"].active {
    background-color: #F5C518 !important;
    color: #1a2744 !important;
}

/* ── Fix: All nav-link default text — navy blue ── */
.nav-pills .nav-link:not(.active),
.nav-tabs .nav-link:not(.active),
.tab-btn:not(.active),
.filter-btn:not(.active),
.category-tab:not(.active),
.at-tab:not(.active),
.nav-link:not(.active) {
    color: #1a2744 !important;
}

/* ── Fix: atn-search-nav-link hover — navy text on gold bg ── */
.atn-search-nav-link:hover,
.atn-search-nav-link:focus {
    color: #1a2744 !important;
    background-color: #F5C518 !important;
}

.atn-search-nav-link.active {
    color: #1a2744 !important;
    background-color: #F5C518 !important;
}

.atn-search-nav-link:not(.active) {
    color: #1a2744 !important;
}

/* ── Fix: Active tab hover — always navy text on gold bg ── */
.nav-pills .nav-link.active:hover,
.nav-tabs .nav-link.active:hover,
.tab-btn.active:hover,
.filter-btn.active:hover,
.category-tab.active:hover,
.at-tab.active:hover,
.atn-search-nav-link.active:hover,
a.active:hover,
button.active:hover {
    color: #1a2744 !important;
    background-color: #F5C518 !important;
}

/* ── Fix: Real-estate header — match site navy theme ── */
.real-home-header,
.header-section,
.real-header-banner-wrap .real-home-header {
    background-color: #1e3057 !important;
    border-bottom: 1px solid rgba(245, 197, 24, 0.18) !important;
}

/* Nav links in real-estate header */
.real-home-navbar-nav .at-home-nav-link,
.real-home-navbar-nav .first-a,
.bt-home-navbar-nav .at-home-nav-link,
.bt-home-navbar-nav .first-a,
.at-home-navbar-nav .at-home-nav-link,
.at-home-navbar-nav .first-a {
    color: #ffffff !important;
}

.real-home-navbar-nav .at-home-nav-link:hover,
.real-home-navbar-nav .first-a:hover,
.bt-home-navbar-nav .at-home-nav-link:hover,
.bt-home-navbar-nav .first-a:hover,
.at-home-navbar-nav .at-home-nav-link:hover,
.at-home-navbar-nav .first-a:hover {
    color: #F5C518 !important;
}

.real-home-navbar-nav .at-home-nav-link.active,
.bt-home-navbar-nav .at-home-nav-link.active,
.at-home-navbar-nav .at-home-nav-link.active {
    color: #F5C518 !important;
}

/* Add Listing & Login buttons */
.re-btn-dark,
.ca-btn-dark,
.at-home-listing-btn,
.re-home-listing-btn {
    background-color: #F5C518 !important;
    border-color: #F5C518 !important;
    color: #1a2744 !important;
}

.re-btn-dark:hover,
.ca-btn-dark:hover,
.at-home-listing-btn:hover {
    background-color: #FFD84A !important;
    color: #1a2744 !important;
}

/* Search input in header */
.real-home-search-input,
.car-home-search-input,
.at-home-search-input {
    background-color: #243668 !important;
    color: #ffffff !important;
    border: 1px solid rgba(245, 197, 24, 0.3) !important;
}

.real-home-search-input::placeholder,
.car-home-search-input::placeholder,
.at-home-search-input::placeholder {
    color: #a0aec0 !important;
}

/* Hamburger menu icon — replace purple with gold */
.at-home-menu-btn svg path,
.re-home-menu-btn svg path,
.ca-home-menu-btn svg path {
    fill: #F5C518 !important;
}

/* Header wrapper white bg on non-banner pages */
.at-home-menu-wrap,
.real-home-menu-wrap {
    background-color: transparent !important;
}

/* ── Fix: Real-estate inner page header — force navy background ── */
header.header-section,
header.real-home-header,
.header-section,
.real-home-header,
.at-home-menu-wrap,
.real-home-menu-wrap {
    background-color: #1e3057 !important;
}

/* Ensure nav text is white on navy */
.at-home-nav-link,
.first-a {
    color: #ffffff !important;
}

.at-home-nav-link:hover,
.first-a:hover,
.at-home-nav-link.active,
.first-a.active {
    color: #F5C518 !important;
}

/* Login link */
a.login.at-home-nav-link {
    color: #ffffff !important;
}

a.login.at-home-nav-link:hover {
    color: #F5C518 !important;
}

/* ── Fix: Real-estate header white container — force navy ── */
.real-header-banner-wrap,
.real-home-header .container,
.real-home-header .container > .row,
header.header-section .container,
header.header-section .at-home-menu-wrap,
.at-home-menu-wrap.real-home-menu-wrap,
div.at-home-menu-wrap {
    background-color: #1e3057 !important;
}

/* Override style.css color for real-estate nav links */
.real-home-navbar-nav .at-home-nav-link,
.real-home-navbar-nav .at-home-nav-link:link,
.real-home-navbar-nav .at-home-nav-link:visited {
    color: #ffffff !important;
    font-weight: 400 !important;
}

.real-home-navbar-nav .at-home-nav-link:hover,
.real-home-navbar-nav .at-home-nav-link.active {
    color: #F5C518 !important;
}

/* The white rounded card wrapping the header */
.real-estate-details-body header,
.real-estate-details-body .header-section,
body header.header-section {
    background-color: #1e3057 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}