/* =========================
   Base & Globals
   ========================= */
   * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
html, body {
    margin: 0 !important;
    padding: 0 !important;
    scroll-behavior: smooth;
}
html {
    scrollbar-width: none;
    -ms-overflow-style: none;
}
html::-webkit-scrollbar {
    width: 0px;
    height: 0px;
    background: transparent;
}
.scroll-container {
    -webkit-overflow-scrolling: touch;

    scrollbar-width: none;
    -ms-overflow-style: none;
}
div, span, p {
    -webkit-font-smoothing: antialiased;
}
img {
    user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    -webkit-font-smoothing: antialiased;
}
:not(input):not(select):not(textarea):not(button):focus {
    outline: none;
}
img {
    user-select: none; 
    -webkit-user-drag: none;
}
iframe {
    z-index: 0 !important;
}

input#rememberme[type="checkbox"] {
    accent-color: #1A3B57;
}
input.notification-checkbox[type="checkbox"] {
    accent-color: #1A3B57;
}
input[type="checkbox"] {
    accent-color: #1B2B12;
}
input:-webkit-autofill {
    box-shadow: 0 0 0px 1000px #FEFDF8 inset;
    -webkit-text-fill-color: #000; /* Set desired text color */
    transition: background-color 5000s ease-in-out 0s;
}

input,
textarea,
select {
    transition: background-color 9999s ease-in-out 0s, color 9999s ease-in-out 0s;
}

/* Chrome, Safari */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-internal-autofill-selected {
    -webkit-box-shadow: 0 0 0px 1000px #FEFDF8 inset !important;
    box-shadow: 0 0 0px 1000px #FEFDF8 inset !important;
    -webkit-text-fill-color: #000 !important;
    transition: background-color 9999s ease-in-out 0s, color 9999s ease-in-out 0s;
}

/* Firefox */
input:-moz-autofill {
    box-shadow: 0 0 0px 1000px #FEFDF8 inset !important;
    -moz-text-fill-color: #000 !important;
}

/* =========================
   Scrollbars
   ========================= */
.overflow-x-scroll::-webkit-scrollbar,
.overflow-y-scroll::-webkit-scrollbar {
    display: none;
    width: 0px;
    height: 0px;
    background: transparent;
}

/* =========================
   Input Number
   ========================= */
/* Chrome, Safari, Edge, Opera */
input[type='number']::-webkit-outer-spin-button,
input[type='number']::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Firefox */
input[type='number'] {
    -moz-appearance: textfield;
}

/* =========================
   Prevents double-tapping on increment / decrement button from zooming in
   ========================= */
html {
    touch-action: manipulation; /* Hints at no double-tap */
}

button:focus {
    outline: none;
    box-shadow: none;
}

button,
a,
input,
label,
textarea {
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

.apply-now-button {
    background-color: #32518D;

    transition: background-color 0.2s;
}

.apply-now-button .inner-border {
    width: calc(100% - 8px);
    height: calc(100% - 8px);

    transition: all 0.2s;
}

.apply-now-button:hover {
    background-color: #2B4578;
}

#hero-image-label {
    background-color: #32518D;

    transition: background-color 0.3s ease;
}

#hero-image-label:hover {
    background-color: #2B4578;
}

.apply-now-button:hover .inner-border {
    width: calc(100% - 12px);
    height: calc(100% - 12px);
}

.why-virginia-creek-item {
    background-color: #32518D;

    transition: background-color 0.6s ease;
}
.why-virginia-creek-item:hover {
    background-color: #2D4A80;
}

.gallery-step {
    background-color: white;

    transition: background-color 0.6s ease;
}
.gallery-step:hover {
    background-color: #2D4A80;
}

.gallery-container > div {
    transition: transform 0.3s ease;
}

#more-nearby-container {
    max-height: 0px;
    opacity: 0;

    transition: max-height 0.3s ease, opacity 0.3s ease;
}
#more-nearby-container.expanded {
    max-height: 640px;
    opacity: 1;
}

#housing-type-menu {
    max-height: 0px;
    opacity: 0;
    overflow: hidden;

    transition: max-height 0.3s ease, opacity 0.3s ease;
}
#housing-type-menu.expanded {
    max-height: 200px;
    opacity: 1;
}

.housing-type-menu-option {
    background-color: transparent;

    transition: background-color 0.25s ease;
}
.housing-type-menu-option:hover {
    background-color: #F2F2F2;
}

/* -------------------------
 * Housing gallery variants — both variants are always rendered in the DOM and
 * stacked in the same grid cell. Toggling .is-hidden cascades the per-row
 * opacity transition via transition-delay on each row (nth-child). Pure CSS,
 * GPU-only — JS just flips the class.
 *
 *   HOUSING_VARIANT_ROW_FADE_MS = 250ms  duration of each row's fade
 *   HOUSING_VARIANT_ROW_STAGGER_MS = 100ms  delay between each row's start
 * ------------------------- */
#housing-gallery {
    display: grid;
}
.housing-gallery-variant {
    grid-area: 1 / 1;
}
.housing-gallery-variant.is-hidden {
    pointer-events: none;
}

.housing-gallery-variant > div {
    transition: opacity 0.5s ease;
}
.housing-gallery-variant > div:nth-child(1) { transition-delay:   0ms; }
.housing-gallery-variant > div:nth-child(2) { transition-delay: 200ms; }
.housing-gallery-variant > div:nth-child(3) { transition-delay: 400ms; }
.housing-gallery-variant > div:nth-child(4) { transition-delay: 600ms; }
.housing-gallery-variant > div:nth-child(5) { transition-delay: 800ms; }
.housing-gallery-variant > div:nth-child(6) { transition-delay: 1000ms; }
.housing-gallery-variant > div:nth-child(7) { transition-delay: 1200ms; }
.housing-gallery-variant.is-hidden > div {
    opacity: 0;
}

#virtual-tour-bedroom-menu {
    max-height: 0px;
    opacity: 0;
    overflow: hidden;

    transition: max-height 0.3s ease, opacity 0.3s ease;
}
#virtual-tour-bedroom-menu.expanded {
    max-height: 200px;
    opacity: 1;
}

.virtual-tour-bedroom-option {
    background-color: transparent;

    transition: background-color 0.25s ease;
}
.virtual-tour-bedroom-option:hover {
    background-color: #F2F2F2;
}

#nearby-expand-toggle img {
    transform: rotate(0deg);

    transition: transform 0.3s ease;
}
#nearby-expand-toggle.expanded img {
    transform: rotate(-180deg);
}

.faq-item .faq-question {
    background-color: #32518D;

    transition: background-color 0.3s ease;
}

.faq-item .faq-question:hover {
    background-color: #2B4578;
}

/* -------------------------
 * Benefits container —
 *   Desktop: wheel-hijack drives horizontal scroll via translateX on the
 *     inner track. touch-action: pan-y stops the browser from claiming
 *     horizontal touch axis (irrelevant on desktop, future-proofs hybrids).
 *   Mobile: native overflow-x scroll on the container (sm:overflow-x-auto in
 *     the markup). touch-action returns to default so the browser owns
 *     horizontal panning of the scroll container.
 * ------------------------- */
#benefits-container {
    touch-action: pan-y;

    /* Hide the native horizontal scrollbar on mobile where overflow-x is auto.
     * Firefox / IE / Edge legacy via the standard properties, Chrome / Safari
     * via the WebKit pseudo-element. */
    scrollbar-width: none;
    -ms-overflow-style: none;
}
#benefits-container::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
    background: transparent;
}
@media (max-width: 769px) {
    #benefits-container {
        touch-action: auto;
    }
}

/* -------------------------
 * Housing gallery modal — overlay fades in, modal scales 70% → 100%.
 * Same 300ms duration on both for synchronized entrance/exit.
 * pointer-events toggle prevents the hidden modal from blocking clicks.
 * body.modal-active locks page scroll while the modal is open.
 * ------------------------- */
body.modal-active {
    overflow: hidden;
}

.housing-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.55);
    opacity: 0;
    pointer-events: none;
    z-index: 100;

    transition: opacity 300ms ease;
}
.housing-modal-overlay.is-open {
    opacity: 1;
    pointer-events: auto;
}

.housing-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.7);
    opacity: 0;
    pointer-events: none;
    z-index: 101;

    transition: transform 300ms ease, opacity 300ms ease;
}
.housing-modal.is-open {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
    pointer-events: auto;
}

.housing-gallery-modal-thumb {
    filter: brightness(0.55);
    cursor: pointer;

    transition: filter 250ms ease;
}
.housing-gallery-modal-thumb:hover {
    filter: brightness(0.8);
}
.housing-gallery-modal-thumb.is-active {
    filter: brightness(1);
    outline: 2px solid #2B4578;
    outline-offset: -2px;
}

/* -------------------------
 * Housing gallery carousels (in #housing-gallery)
 *
 * Track is moved via translateX during drag and on prev/next clicks.
 * Layout is hand-written (not via Tailwind utilities) so it renders correctly
 * even if the Tailwind output hasn't been rebuilt.
 *
 *  HOUSING_GALLERY_ARROW_SIZE_PX       = 44   square footprint of prev/next
 *  HOUSING_GALLERY_ARROW_INSET_PX      = 12   distance from carousel edge
 *  HOUSING_GALLERY_DOTS_FROM_BOTTOM_PX = 12   distance dots sit above carousel bottom
 * ------------------------- */
.housing-gallery-track {
    will-change: transform;
}

/* Yield the horizontal axis to JS swipe handlers so the browser doesn't claim
 * the first few pixels of a finger swipe as a vertical scroll. Pan-y keeps
 * vertical page scroll working naturally through the carousel area. */
.housing-gallery-carousel {
    touch-action: pan-y;
}

/* Prev / Next arrows — brand-blue square, white chevron, vertically centered.
 * The chevron SVG points left; .housing-gallery-next rotates its img 180°. */
.housing-gallery-prev,
.housing-gallery-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 36px;
    height: 48px;
    background-color: #2B4578;
    opacity: 0.75;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    cursor: pointer;
    border: none;
    padding: 0;

    transition: opacity 200ms ease;
}
.housing-gallery-prev { left: 0; }
.housing-gallery-next { right: 0; }
.housing-gallery-prev:hover,
.housing-gallery-next:hover {
    opacity: 1;
}
.housing-gallery-prev img,
.housing-gallery-next img {
    width: 7px;
    pointer-events: none;
}
.housing-gallery-next img {
    transform: rotate(180deg);
}

/* Step indicator — bottom center, 12px from bottom. */
.housing-gallery-dots-container {
    position: absolute;
    bottom: 12px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    z-index: 10;
}

.housing-gallery-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    border: 1px solid #ffffff;
    background-color: #ffffff;
    cursor: pointer;
    padding: 0;

    transition: background-color 200ms ease, border-color 200ms ease;
}
.housing-gallery-dot.is-active {
    background-color: #2B4578;
    border-color: #2B4578;
}

.faq-item {
    max-height: 49.5px;
    overflow-y: hidden;

    transition: max-height 0.6s ease;
}
.faq-item img {
    transform: rotate(0deg);

    transition: transform 0.6s ease;
}
.faq-item .faq-answer {
    opacity: 0;

    transition: opacity 0.6s ease;
}

.faq-item.expanded {
    max-height: 400px !important;
}
.faq-item.expanded img {
    transform: rotate(-180deg);
}
.faq-item.expanded .faq-answer {
    opacity: 1;
}

@media (max-width: 769px) {
    #more-nearby-container.expanded {
        max-height: 1120px;
        opacity: 1;
    }
}

#cta input:-webkit-autofill,
#cta input:-webkit-autofill:hover,
#cta input:-webkit-autofill:focus,
#cta input:-webkit-autofill:active {
    -webkit-text-fill-color: #ffffff !important;
    -webkit-box-shadow: 0 0 0 1000px transparent inset !important;
    transition: background-color 600000s 0s, color 600000s 0s;
    caret-color: #ffffff;
    background-color: transparent !important;
    background-clip: content-box !important;
}

.fan-card-stack {
    perspective: 1400px;
    perspective-origin: 50% 50%;
    transform-style: preserve-3d;
}

.fan-card-stack > .fan-card {
    top: 0;
    left: 0;
    transform-origin: 50% 100%;
    transform-style: preserve-3d;
    backface-visibility: hidden;
    cursor: pointer;
    transition:
        transform 700ms cubic-bezier(0.22, 0.61, 0.36, 1),
        opacity 700ms ease,
        z-index 0s linear 350ms;
    will-change: transform, opacity;
}

.fan-card-stack > .fan-card-pos-0 {
    transform: translate3d(0, 0, 0);
    opacity: 1;
    z-index: 5;
}

.fan-card-stack > .fan-card-pos-1 {
    transform: translate3d(12px, 10px, 0);
    opacity: 1;
    z-index: 4;
}

.fan-card-stack > .fan-card-pos-2 {
    transform: translate3d(24px, 20px, 0);
    opacity: 1;
    z-index: 3;
}

.fan-card-stack > .fan-card-pos-3 {
    transform: translate3d(36px, 30px, 0);
    opacity: 0;
    z-index: 2;
    pointer-events: none;
}

.fan-card-stack > .fan-card-pos-4 {
    transform: translate3d(48px, 40px, 0);
    opacity: 0;
    z-index: 1;
    pointer-events: none;
}

.fan-card-stack > .fan-card.fan-card-shuffling {
    transform: translate3d(30px, 20px, 40px);
    opacity: 0;
}