/* Custom styles for PropertyAI Analyzer */
[data-bs-theme="dark"] {
    /*--bs-body-bg: #121212;*/
    /*--bs-body-color: #f8f9fa;*/
    --bs-primary-rgb: 121, 94, 255;
    --bs-info-rgb: 52, 58, 64;
    /*--bs-success-rgb: 121, 94, 255;*/
    --bs-primary: #795EFF;
    --bs-info: #343a40; /* #795EFF; */
    --bs-danger: #cf6679;
    --bs-btn-bg: #795EFF;
}

.btn-primary {
    --bs-btn-bg: #343a40; /* Green background */
}

.navbar-btn:hover{
  background-color: #1c1c1c;
}

.navbar-btn{
    padding: 0.25em;
}

/* Add to your existing CSS */
.invalid-feedback {
    display: block;
    color: #dc3545;
    margin-top: 0.25rem;
    font-size: 0.875em;
}

.is-invalid {
    border-color: #dc3545;
    padding-right: calc(1.5em + 0.75rem);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' width='12' height='12' fill='none' stroke='%23dc3545'%3e%3ccircle cx='6' cy='6' r='4.5'/%3e%3cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3e%3ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right calc(0.375em + 0.1875rem) center;
    background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}

/* Give more height to custom prompt textarea */
#custom_prompt {
    min-height: 100px;
}

/* Analysis content formatting */
.analysis-content {
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    line-height: 1.6;
    white-space: normal;
    border: 1px solid var(--bs-border-color);
    font-size: 1rem;
}

/* Markdown heading styles */
.analysis-content h1 {
    font-size: 1.2rem;
    /*margin-top: 0.5rem;*/
    margin-bottom: 1rem;
    font-weight: 600;
    border-bottom: 1px solid var(--bs-border-color);
    padding-bottom: 0.5rem;
}

.analysis-content h2 {
    font-size: 1.2rem;
    /*margin-top: 0.75rem;*/
    margin-bottom: 1rem;
    font-weight: 600;
    color: var(--bs-primary);
    border-bottom: 1px solid var(--bs-border-color);
    padding-bottom: 0.5rem;
}

.analysis-content h3 {
    font-size: 1.2rem;
    /*margin-top: 1.25rem;*/
    margin-bottom: 0.75rem;
    font-weight: 500;
    color: var(--bs-primary);
}

.analysis-content h4 {
    font-size: 1.1rem;
    /*margin-top: 1rem;*/
    margin-bottom: 0.5rem;
    font-weight: 500;
    color: var(--bs-primary);
}

.analysis-content p {
    font-size: 1rem;
    margin-bottom: 1rem;
}

.analysis-content ul, .analysis-content ol {
    margin-bottom: 1rem;
    font-size: 1rem;
}

.analysis-content li {
    font-size: 1rem;
}

.analysis-content strong {
    font-size: inherit;
}

.btn-analyze{
    --bs-btn-padding-y: 0.3rem;
    --bs-btn-font-size: 1.1rem;
    --bs-btn-border-radius: 0.65rem;
}

.text-white-footer {
    text-decoration: none;
}

/* Feature icons in "How it works" section */
.feature-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 80px;
}

/* Ensure form elements have consistent spacing */
.form-check {
    padding-left: 1.75rem;
}

/* Improve responsive layout on small screens */
@media (max-width: 576px) {
    .card-header {
        flex-direction: column;
        align-items: start !important;
    }
    
    .card-header a {
        margin-top: 0.5rem;
    }
}

/* On small screens, make the dropdown always visible */
@media (max-width: 992px) {
    .dropdown-menu {
        display: block !important; /* Force visibility */
        position: static !important; /* Remove floating */
        transform: none !important; /* Remove Bootstrap positioning */
        width: 100%; /* Full width */
        border: none !important; /* Optional: Remove border */
        margin-top: 0.5rem; /* Spacing from toggle */
    }

    /* Hide the dropdown arrow on mobile */
    .dropdown-toggle::after {
        display: none !important;
    }
}

/* Custom CSS */
#paypal-button-container {
    min-width: 300px;
    max-width: 500px;
    margin: 0 auto;
}

/* Mobile-specific styling */
@media (max-width: 768px) {
    #paypal-button-container {
        width: 100% !important;
    }
}
/* Nicer table */
table {
  width: 100%;
  border-collapse: collapse;
}

@media (max-width: 768px) {
  table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
  }
}