/* Main CSS for Sincerra */

:root {
    --primary-color: #2c3e50;
    --secondary-color: #3498db;
    --accent-color: #e74c3c;
    --text-color: #2c3e50;
    --light-bg: #f8f9fa;
    --gradient-primary: linear-gradient(135deg, #000000 0%, #727272 100%);
    --gradient-primary-2: linear-gradient(
        135deg,
        #000000 0%,
        #1d1d1d 45%,
        #6a6a6a 100%
    );
    --gradient-secondary: linear-gradient(135deg, #ffffff 0%, #9a9a9a 100%);
    --gradient-accent: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
    --gradient-success: linear-gradient(135deg, #10b981 0%, #059669 100%);
    /*--gradient-success: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);*/

    --navbar-bg: rgba(13, 13, 13, 0.95);
    --navbar-glass: rgba(255, 255, 255, 0.05);
    --navbar-border: rgba(255, 255, 255, 0.1);

    --primary: #000000;
    --primary-dark: #727272;
    --secondary: #868686;
    --accent: #4facfe;
    --success: #00f2fe;
    --gold: #ffd700;

    --shadow: rgba(200, 200, 200, 0.4);
    --shadow-hover: rgba(200, 200, 200, 0.6);
    --shadow-dark: rgba(0, 0, 0, 0.4);
    --shadow-dark-hover: rgba(0, 0, 0, 0.6);

    /* override Bootstrap primary color RGB for consistency */
    --bs-primary-rgb: 0, 0, 0;
    --bs-success-rgb: 14, 81, 50;
}

/* UI mapping variables (use these across components so palette swaps are easy) */
:root {
    --ui-link: var(--primary-dark);
    --ui-link-hover: var(--primary);
    --ui-focus-shadow-color: rgba(0, 0, 0, 0.12);
    --btn-primary-hover: var(--primary-dark);
    --placeholder-color: #6c757d;
}

body {
    font-family: "Arial", sans-serif;
    line-height: 1.6;
    color: var(--text-color);
    background-color: #ffffff;
}

/* Ensure form inputs maintain proper styling - Exclude navbar/footer inputs */
main .form-control,
main .form-select,
main input[type="text"],
main input[type="email"],
main input[type="password"],
main input[type="number"],
main input[type="tel"],
main input[type="url"],
main input[type="date"],
main input[type="search"],
main textarea,
main select,
.container .form-control,
.container .form-select,
.container input[type="text"],
.container input[type="email"],
.container input[type="password"],
.container input[type="number"],
.container input[type="tel"],
.container input[type="url"],
.container input[type="date"],
.container input[type="search"],
.container textarea,
.container select {
    background-color: #ffffff !important;
    color: #2c3e50 !important;
    border: 1px solid #ced4da !important;
}

/* Exclude checkboxes and radio inputs from generic focus styling so their native
   appearance (checkmark) isn't visually hidden by background coloring. */
main .form-control:focus,
main .form-select:focus,
main input:not([type="checkbox"]):not([type="radio"]):focus,
main textarea:focus,
main select:focus,
.container .form-control:focus,
.container .form-select:focus,
.container input:not([type="checkbox"]):not([type="radio"]):focus,
.container textarea:focus,
.container select:focus {
    background-color: #ffffff !important;
    color: #2c3e50 !important;
    border-color: var(--ui-link) !important;
    box-shadow: 0 0 0 0.2rem var(--ui-focus-shadow-color) !important;
}

/* Fix placeholder text colors - All browsers */
main input::placeholder,
main textarea::placeholder,
main select::placeholder,
main .form-control::placeholder,
main .form-select::placeholder,
.container input::placeholder,
.container textarea::placeholder,
.container select::placeholder,
.container .form-control::placeholder,
.container .form-select::placeholder {
    color: var(--placeholder-color) !important;
    opacity: 1 !important;
}

main input::-webkit-input-placeholder,
main textarea::-webkit-input-placeholder,
main select::-webkit-input-placeholder,
main .form-control::-webkit-input-placeholder,
main .form-select::-webkit-input-placeholder,
.container input::-webkit-input-placeholder,
.container textarea::-webkit-input-placeholder,
.container select::-webkit-input-placeholder,
.container .form-control::-webkit-input-placeholder,
.container .form-select::-webkit-input-placeholder {
    color: var(--placeholder-color) !important;
    opacity: 1 !important;
}

main input::-moz-placeholder,
main textarea::-moz-placeholder,
main select::-moz-placeholder,
main .form-control::-moz-placeholder,
main .form-select::-moz-placeholder,
.container input::-moz-placeholder,
.container textarea::-moz-placeholder,
.container select::-moz-placeholder,
.container .form-control::-moz-placeholder,
.container .form-select::-moz-placeholder {
    color: var(--placeholder-color) !important;
    opacity: 1 !important;
}

main input:-ms-input-placeholder,
main textarea:-ms-input-placeholder,
main select:-ms-input-placeholder,
main .form-control:-ms-input-placeholder,
main .form-select:-ms-input-placeholder,
.container input:-ms-input-placeholder,
.container textarea:-ms-input-placeholder,
.container select:-ms-input-placeholder,
.container .form-control:-ms-input-placeholder,
.container .form-select:-ms-input-placeholder {
    color: var(--placeholder-color) !important;
}

main input::-ms-input-placeholder,
main textarea::-ms-input-placeholder,
main select::-ms-input-placeholder,
main .form-control::-ms-input-placeholder,
main .form-select::-ms-input-placeholder,
.container input::-ms-input-placeholder,
.container textarea::-ms-input-placeholder,
.container select::-ms-input-placeholder,
.container .form-control::-ms-input-placeholder,
.container .form-select::-ms-input-placeholder {
    color: #6c757d !important;
}

.property-card {
    transition: transform 0.3s ease;
    border: none;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.property-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
}

.htmx-indicator {
    opacity: 0;
    transition: opacity 0.3s ease;
}

.htmx-request .htmx-indicator {
    opacity: 1;
}

.htmx-request.htmx-indicator {
    opacity: 1;
}

/* Loading spinner */
.spinner {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 3px solid #f3f3f3;
    border-top: 3px solid var(--ui-link);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* HTMX specific styles */
.htmx-settling {
    opacity: 0;
}

.htmx-swapping {
    opacity: 0;
}

/* Property specific styles */
.property-price {
    font-size: 1.5rem;
    font-weight: bold;
    color: var(--accent-color);
}

.property-features {
    font-size: 0.9rem;
    color: #666;
}

/* Form styles */
.form-control:focus {
    border-color: var(--ui-link);
    box-shadow: 0 0 0 0.2rem var(--ui-focus-shadow-color);
}

.btn-primary {
    background-color: var(--ui-link);
    border-color: var(--ui-link);
}

.btn-primary:hover {
    background-color: var(--btn-primary-hover);
    border-color: var(--btn-primary-hover);
}

/* Blog-specific enhancements */
.blog-image-placeholder {
    background: var(--gradient-primary);
    display: flex;
    align-items: center;
    justify-content: center;
}

.blog-icon-placeholder {
    font-size: 3rem;
    color: rgba(255, 255, 255, 0.7);
}

/* Smooth transitions */
* {
    transition: background-color 0.3s ease, color 0.3s ease,
        border-color 0.3s ease;
}

a {
    transition: all 0.3s ease;
}

button {
    transition: all 0.3s ease;
}

/* Utility classes */
.gradient-primary {
    background: var(--gradient-primary);
}

.gradient-success {
    background: var(--gradient-success);
}

.shadow-hover:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* CRITICAL FIX: Override any conflicting styles for form inputs and placeholders */
/* body input:not([type="radio"]):not([type="checkbox"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not(.search-input):not(.newsletter-input),
body textarea:not(.search-input):not(.newsletter-input),
body select:not(.search-input):not(.newsletter-input) {
    background-color: #ffffff !important;
    color: #2c3e50 !important;
}

body input:not([type="radio"]):not([type="checkbox"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not(.search-input):not(.newsletter-input)::placeholder,
body textarea:not(.search-input):not(.newsletter-input)::placeholder,
body select:not(.search-input):not(.newsletter-input)::placeholder {
    color: #6c757d !important;
    opacity: 1 !important;
}

body input:not([type="radio"]):not([type="checkbox"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not(.search-input):not(.newsletter-input)::-webkit-input-placeholder,
body textarea:not(.search-input):not(.newsletter-input)::-webkit-input-placeholder,
body select:not(.search-input):not(.newsletter-input)::-webkit-input-placeholder {
    color: #6c757d !important;
    opacity: 1 !important;
}

body input:not([type="radio"]):not([type="checkbox"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not(.search-input):not(.newsletter-input)::-moz-placeholder,
body textarea:not(.search-input):not(.newsletter-input)::-moz-placeholder,
body select:not(.search-input):not(.newsletter-input)::-moz-placeholder {
    color: #6c757d !important;
    opacity: 1 !important;
} */