/* Page-specific styles for recommendation_engine.css */
/* 1) Use Poppins for this page */
body {
    font-family: "Poppins", var(--font-sans), system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif
    }
/* 2) Hero background using assets image with subtle overlay via global .hero */
.hero {
    background-image: url(assets/inspiring_background_for_recom_3_1310dff9.jpg);
    background-size: cover;
    background-position: center
    }
.hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.65), rgba(255, 255, 255, 0.85))
    }
.hero__content {
    position: relative
    }
/* 3) Form layout refinements */
#wizard, .wizard {
    box-shadow: var(--shadow-sm)
    }
.card-base + .card-base {
    margin-top: var(--space-4)
    }
/* 4) Choices.js theming alignment */
.choices__inner {
    border-radius: 12px;
    border-color: var(--color-border);
    background-color: var(--color-secondary);
    padding: 6px 8px
    }
.choices__list--dropdown {
    border-color: var(--color-border);
    box-shadow: var(--shadow-sm)
    }
.choices__item--selectable.is-highlighted {
    background-color: rgba(219, 188, 223, 0.18);
    color: var(--on-primary)
    }
.choices__button {
    border-color: rgba(0, 0, 0, 0.12)
    }
/* 5) Submit button animation state */
#submitBtn[disabled] {
    opacity: 0.8;
    cursor: not-allowed
    }
/* 6) Recently searched table hover */
#recentTable tbody tr:hover td {
    background: rgba(219, 188, 223, 0.08)
    }
/* 7) Toast positioning */
#inlineToast {
    position: sticky;
    bottom: 24px
    }
/* 8) Improve range slider spacing */
#budgetRange {
    margin-top: 6px;
    margin-bottom: 4px
    }
/* 9) Responsive tweaks */
@media (max-width: 991.98px) {
    .hero__content {
        padding: var(--space-8) var(--space-6)
        }
    }
@media (min-width: 992px) {
    .hero__content {
        padding: var(--space-10) var(--space-8)
        }
    }