/* --- 1. GLOBAL & FONTS --- */
html {
    font-size: 14px;
    position: relative;
    min-height: 100%;
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

body {
    margin-bottom: 60px;
    background: radial-gradient(circle at top, #1a1d21 0%, #0d0e10 100%);
    color: #e0e0e0; /* Off-white for luxury readability */
}

/* --- 2. NAVIGATION & HEADER --- */
.navbar {
    background: rgba(18, 20, 23, 0.8) !important;
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(212, 175, 55, 0.3); /* Gold accent line */
}

.nav-link, .navbar-brand {
    color: #D4AF37 !important;
    text-shadow: 0 0 5px rgba(0,0,0,0.5);
}

/* --- 3. THE PREMIUM CARDS --- */
/* Merged Obsidian & Gold styling */
.card.gold-card {
    background: #121417 !important; /* Deep obsidian background */
    border: 1px solid rgba(212, 175, 55, 0.2) !important;
    border-radius: 12px;
    color: white !important;
    overflow: hidden;
    transition: all 0.4s ease;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

    .card.gold-card:hover {
        transform: translateY(-10px);
        border-color: #D4AF37 !important;
        box-shadow: 0 15px 35px rgba(0, 0, 0, 0.7), 0 0 15px rgba(212, 175, 55, 0.2);
    }

/* --- 4. BADGES & BUTTONS --- */
/* High-Visibility Price Badge (Black text on Gold) */
.price-badge {
    background: linear-gradient(135deg, #D4AF37 0%, #f1d27b 50%, #c5a028 100%) !important;
    color: #000000 !important; /* Fixed visibility for image_7cb8f1.png */
    font-weight: 800;
    padding: 5px 12px;
    border-radius: 4px;
    display: inline-block;
    box-shadow: 0 4px 15px rgba(0,0,0,0.4);
    text-transform: uppercase;
}

/* Gold Outline Buttons */
.btn-outline-gold {
    border: 2px solid #D4AF37 !important;
    color: #D4AF37 !important;
    background: transparent;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: 0.3s all ease;
}

    .btn-outline-gold:hover {
        background: #D4AF37 !important;
        color: #000 !important;
        box-shadow: 0 0 15px rgba(212, 175, 55, 0.4);
    }

/* --- 5. TEXT & FORM INPUTS --- */
.card-title {
    color: #ffffff !important;
    font-weight: 600;
    letter-spacing: 0.5px;
}

.text-muted {
    color: #a0a0a0 !important;
}

.bi-geo-alt, .bi-eye {
    color: #D4AF37 !important;
}

/* Luxury Search & Filter Inputs */
.gold-card input, .gold-card select {
    background-color: #0d0e10 !important;
    color: white !important;
    border: 1px solid rgba(212, 175, 55, 0.2) !important;
}

    .gold-card input:focus, .gold-card select:focus {
        border-color: #D4AF37 !important;
        box-shadow: 0 0 10px rgba(212, 175, 55, 0.2) !important;
    }


/* Premium Gold Button */
.btn-gold {
    background: linear-gradient(135deg, #D4AF37 0%, #F1D27B 50%, #C5A028 100%) !important;
    color: #000000 !important; /* Black text for maximum visibility */
    border: none !important;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 8px 20px;
    border-radius: 6px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

    .btn-gold:hover {
        transform: scale(1.05);
        box-shadow: 0 0 20px rgba(212, 175, 55, 0.5);
        color: #000 !important;
        filter: brightness(1.1);
    }

/* Styling for the Search and Category section */
/* Fix for image_1128ae.png */
.search-container select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    /* The Gold Arrow SVG */
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23D4AF37' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e") !important;
    /* KEY FIXES BELOW */
    background-repeat: no-repeat !important; /* Stops the tiling/repeating */
    background-position: right 1rem center !important; /* Puts one arrow on the right */
    background-size: 18px !important; /* Sizes the arrow correctly */

    background-color: transparent !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    padding-right: 2.5rem !important; /* Leaves room so text doesn't hit the arrow */
}

/* Styling for the Create Form Inputs */
.gold-card .form-control,
.gold-card .form-select {
    background-color: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(212, 175, 55, 0.3) !important;
    color: white !important;
    font-weight: 600;
}

    .gold-card .form-control:focus {
        background-color: rgba(255, 255, 255, 0.1) !important;
        border-color: #D4AF37 !important;
        box-shadow: 0 0 10px rgba(212, 175, 55, 0.2) !important;
    }

/* Fix for the 'Choose Files' button visibility */
.custom-file-input::file-selector-button {
    background: #D4AF37;
    color: black;
    border: none;
    font-weight: bold;
    border-radius: 4px;
    margin-right: 15px;
    padding: 5px 10px;
}

/* Label text color */
.text-gold {
    color: #D4AF37 !important;
}

/* 1. Make the placeholder text brighter */
.gold-card input::placeholder,
.search-container input::placeholder {
    color: rgba(255, 255, 255, 0.7) !important; /* Brighter white with slight transparency */
    font-weight: 600;
    letter-spacing: 0.5px;
}

/* 2. Make the text you actually type bright white and bold */
.gold-card input,
.gold-card textarea,
.search-container input {
    color: #ffffff !important;
    font-weight: 700 !important;
}

    /* 3. Optional: Add a slight gold glow when the user clicks inside */
    .gold-card input:focus {
        color: #ffffff !important;
        background-color: rgba(255, 255, 255, 0.1) !important;
        box-shadow: 0 0 8px rgba(212, 175, 55, 0.4) !important;
    }

    /* 1. Make the placeholder text brighter */
    .gold-card input::placeholder,
    .search-container input::placeholder {
        color: rgba(255, 255, 255, 0.7) !important; /* Brighter white with slight transparency */
        font-weight: 600;
        letter-spacing: 0.5px;
    }

/* 2. Make the text you actually type bright white and bold */
.gold-card input,
.gold-card textarea,
.search-container input {
    color: #ffffff !important;
    font-weight: 700 !important;
}

    /* 3. Optional: Add a slight gold glow when the user clicks inside */
    .gold-card input:focus {
        color: #ffffff !important;
        background-color: rgba(255, 255, 255, 0.1) !important;
        box-shadow: 0 0 8px rgba(212, 175, 55, 0.4) !important;
    }

/* Gold Profile Accents */
.border-gold {
    border-color: #D4AF37 !important;
}

/* Enhancing the profile image border */
.rounded-circle.border-warning {
    border-width: 3px !important;
    border-color: #D4AF37 !important;
}

/* Ensure the 'Member since' text stays visible but subtle */
.text-muted {
    color: rgba(255, 255, 255, 0.5) !important;
}

/* Reusing the gold-card input style for consistency */
.gold-card input, .gold-card textarea {
    background-color: rgba(0, 0, 0, 0.2) !important;
    border: 1px solid rgba(212, 175, 55, 0.3) !important;
    color: white !important;
}

/* FORCE ELITE THEME */
body {
    background-color: #000000 !important; /* Total Obsidian */
}

.gold-card, .search-container {
    background: #0f0f0f !important;
    border: 1px solid #D4AF37 !important;
    border-radius: 12px !important;
}

/* Fix the repeating arrows from image_1128ae.png */
select.form-select {
    background-color: #0f0f0f !important;
    color: #ffffff !important;
    border: 1px solid #D4AF37 !important;
    background-repeat: no-repeat !important;
    background-position: right 1rem center !important;
    background-size: 16px 12px !important;
    appearance: none !important;
    -webkit-appearance: none !important;
}

/* Brighten the input text and placeholders from image_213bcc.png */
input.form-control, textarea.form-control {
    background-color: rgba(255, 255, 255, 0.05) !important;
    color: #ffffff !important;
    border: 1px solid rgba(212, 175, 55, 0.4) !important;
    font-weight: 600 !important;
}

input::placeholder {
    color: rgba(255, 255, 255, 0.7) !important;
}

/* The Gold Button */
.btn-gold, .btn-primary {
    background: linear-gradient(45deg, #D4AF37, #F4D03F) !important;
    color: #000 !important;
    border: none !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
}
    .btn-gold:hover, .btn-primary:hover {
        background: linear-gradient(45deg, #F4D03F, #D4AF37) !important;
        color: #000 !important;
        filter: brightness(1.1) !important;
    }


/* Global Obsidian Base */
body {
    background-color: #0b0b0b !important; /* Deepest black/grey */
    color: #ffffff !important;
    min-height: 100vh;
}

/* Ensure the main container doesn't have a white background */
.container, .main-content {
    background-color: transparent !important;
}

/* Elite Obsidian Card */
.gold-card, .card {
    background-color: #1a1a1a !important; /* Slightly lighter than body for depth */
    border: 1px solid rgba(212, 175, 55, 0.3) !important; /* Subtle gold border */
    border-radius: 15px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5) !important;
}

/* Fix for the white horizontal lines */
hr {
    border-top: 1px solid rgba(212, 175, 55, 0.2) !important;
    opacity: 1;
}

.form-control, .form-select {
    background-color: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(212, 175, 55, 0.2) !important;
    color: #ffffff !important;
    font-weight: 500;
}

    /* Ensure the text you type is actually visible */
    .form-control:focus {
        background-color: rgba(255, 255, 255, 0.1) !important;
        color: #ffffff !important;
        border-color: #D4AF37 !important;
        box-shadow: 0 0 0 0.25rem rgba(212, 175, 55, 0.25) !important;
    }

/* Force all text in gold cards and profile headers to white */
.gold-card h2,
.gold-card h4,
.gold-card p,
.gold-card label {
    color: #ffffff !important;
}

/* Specifically target the Display Name and 'Member since' text */
h2, .text-white, .text-muted {
    color: #ffffff !important;
}

/* Ensure the 'Member since' date is slightly softer but still readable */
p.small, .text-muted {
    color: rgba(255, 255, 255, 0.7) !important;
}

/* Profile Display Name Styling */
.profile-name {
    color: #ffffff !important;
    font-weight: 800 !important;
    text-transform: none; /* Keeps 'Baddie' exactly as typed */
    letter-spacing: 1px;
    margin-bottom: 0.5rem;
    display: block;
}

    /* Ensure the white spans inside also stay white */
    .profile-name .text-white {
        color: #ffffff !important;
    }

/* Force all text inside the gold-card to white */
.gold-card,
.gold-card label,
.gold-card h2,
.gold-card h4,
.gold-card .form-label,
.gold-card .text-muted {
    color: #ffffff !important;
    opacity: 1 !important;
}

/* Specifically target the 'Display Name', 'Bio', etc labels */
label.form-label {
    color: #ffffff !important;
    font-weight: 700 !important;
    text-shadow: 0px 0px 5px rgba(0,0,0,0.5); /* Helps them pop */
}

/* Ensure typed input text is high-contrast white */
.gold-card .form-control {
    color: #ffffff !important;
    font-size: 1.1rem;
    font-weight: 600;
}

/* 1. Turn all form labels Gold and Bold */
.gold-card label,
.form-label,
label {
    color: #D4AF37 !important; /* Signature Gold */
    font-weight: 800 !important;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 0.85rem;
    margin-bottom: 8px;
}

/* 2. Fix the Display Name (Baddie) and Title Text */
.profile-name,
h2,
h4 {
    color: #D4AF37 !important;
    font-weight: 900 !important;
    text-shadow: 0 0 10px rgba(212, 175, 55, 0.3); /* Subtle gold glow */
}

/* 3. Style the Input Borders to match the Search Bar */
.gold-card .form-control,
.gold-card .form-select {
    border: 1px solid rgba(212, 175, 55, 0.5) !important;
    background-color: rgba(0, 0, 0, 0.2) !important;
    color: #ffffff !important; /* Keep typed text white for readability */
}

    /* 4. Highlight the input when clicking (Focus) */
    .gold-card .form-control:focus {
        border-color: #D4AF37 !important;
        box-shadow: 0 0 8px rgba(212, 175, 55, 0.4) !important;
    }