/**
 * 360 Broadway - Nova Child: Overview Section layout (about/availability bar, split, content block, carousel variants).
 * Loaded only on pages that use it (see bw_css_components() in inc/enqueue.php).
 * Loads after style.css; rules keep their original order.
 */

.align-items-center {
  -ms-flex-align: center !important;
  align-items: center !important;
}
.about_section {
    text-align: center;
    padding-bottom: 60px;
}
.about_section_top {
    width: auto;
    display: inline-block;
    background: var(--bw-teal);
    color: var(--bw-white);
    padding: 20px 90px;
    line-height: 35px;
}
.about_section_inner {
    margin-top: -130px;
}
.about_section_main {
    background: var(--bw-tertiary);
    padding: 20px;
}
.about_section_main_inner {
    border: 1px solid var(--bw-white);
    padding: 30px;
    color: var(--bw-white);
}
.content_block .container-fluid {
    padding: 0;
}
.content_block_image_bg {
    height: 100%;
    min-height: 450px;
}
.content_block.color_default {
    padding:  0;
}
.content_block_content_inner ul li:last-child {
    margin: 0;
}
.about_section_main_inner a:hover {
    border-color: var(--bw-text);
}
.content_block_slider_content_block .content_block_content_inner ul {
    margin: 0 auto;
    width: auto;
}
.content_block_slider_content_block .content_block_content_inner ul {
    transform: translateX(60px);
    opacity: 0;
}
.about_section {
    z-index: 25;
    position: relative;
}
.content_block_content_inner h2 br {
    display: none;
}

@media all and (max-width:  767px) {
	.about_section_inner {
		    margin: 0 -15px;
		}
	.content_block_image_bg {
		    min-height: 300px;
		    margin-bottom: 30px;
		}
	.about_section_top {
		    padding: 20px;
		    width: 100%;
		}
	.content_block_content_inner h2 br {
			display: block;
		}
	.content_block_slider_content_block .content_block_image_bg {
		    margin-bottom: -90px;
		    z-index: 1000;
		    position: relative;
		    margin-right: -15px;
		    min-height: 250px;
		    margin-left: 20px;
		}
	.content_block.color_blue.image_position_left .content_block_content_inner h2::after {
		    margin-left: 0;
		    position: absolute;
		    right: -15px;
		    bottom: 0;
		    width: calc(100% + 15px);
		}
	.content_block.color_blue.image_position_left .content_block_content_inner h2 {
		    padding-bottom: 16px;
		}
	.content_block_slider_content_block .content_block_content_inner ul li {text-align: center;
		}
	.content_block_slider_content_block .content_block_image_bg {margin-left: 0;width: 100%;
		}
}

.check-availability-widget .fp-filter {
	margin-bottom: 0;
}
.check-availability-widget .fp-filter-form {
	gap: 8px;
	justify-content: center;
}
.about_section {
}
.about_section_inner {
	margin-top: -135px;
}
.about_section_main {
	background: none;
	color: var(--bw-text);
	max-width: 800px;
	margin: 0 auto;
}

@media (max-width: 767px) {
	.about_section_main {
			padding: 0;
		}
}

.about_section_top {
	margin-bottom: 60px;
	padding-top: 25px;
	padding-bottom: 25px;
	background: var(--bw-primary);
}
.about_section_main_inner {
	border: 0;
}
.about_section_main_inner {
	color: var(--bw-text);
}
.about_section_main_inner a:hover {
    border-color: var(--bw-secondary);
}
.about_section_top {
	background: var(--bw-secondary);
}
.content_block.color_blue.image_position_left {
	background: var(--bw-primary);
}
.content_block.color_blue .content_block_content_inner p a {
	color: var(--bw-white);
}
.content_block.color_blue .content_block_content_inner ul li a {
	color: var(--bw-secondary);
}
.content_block.color_blue .content_block_content_inner ul li a::after {
	background: var(--bw-secondary);
}
.content_block.color_blue .content_block_content_inner a::after {
	background: var(--bw-white);
}
.content_block.color_gray.image_position_left {
	background: var(--bw-cream);
}

@media (min-width: 767px) {
	.content_block.color_gray.image_position_left {
			background: linear-gradient(90deg, var(--bw-white) 20%, var(--bw-cream) 20%);
		}
	.content_block.color_blue.image_position_left {
			background: linear-gradient(-90deg, var(--bw-primary) 80%, var(--bw-white) 50%);
		}
}

.swiper-pagination {
	right: 30px;
	bottom: 30px!important;
	left: auto!important;
	width: auto!important;
	z-index: 20;
}

@media (max-width: 768px) {
	.full-screen-slider .swiper-pagination {
			display: none;
		}
}

.btn-line.btn-line-light::before {
	background: var(--bw-white);
}
.content_block_content_inner .cta-button {
	border-radius: 0;
	margin-top: 20px;
	background-color: var(--bw-primary);
	color: var(--bw-white);
	font-size: 15px;
	padding: 10px 20px;
}
.content_block_content_inner .cta-button::before {
	z-index: 0!important;
}
.content_block_content_inner .cta-button span {
	position: relative;
	z-index: 1;
}
.content_block_content_inner ul,
.content_block_content_inner ol {
	list-style-position: outside;
	padding-left: 18px;
}
.content_block_content_inner ol li {
	margin-top: 5px;
	margin-bottom: 15px;
}
.content_block_content_inner ul {
	max-width: none;
	list-style-position: outside;
}
.content_block_content_inner ul {
	padding-left: 18px;
}

.content-block-carousel .swiper-wrapper {
	min-height: 450px;
}
.content-block-carousel .swiper-slide {
	height: 100%;
}
.image_position_left .content-block-carousel .swiper-pagination {
	right: auto;
	left: 30px!important;
}

@media (max-width: 767px) {
	.content-block-carousel-swiper {
			margin-bottom: 30px;
		}
}

.pet-checklist {
	list-style: none;
	padding: 0;
	margin: 1rem 0;
}
.pet-checklist li::before {
	content: ""; 
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	color: var(--bw-primary);
	position: absolute;
	left: 0;
	top: 0;
}
.check-availability-widget .fp-filter-form .select-wrapper,
.check-availability-widget .fp-filter-form .date-picker-wrapper {
	border-color: #111111;
	background: transparent;
}
.check-availability-widget .fp-filter-form .date-picker-wrapper::before,
.check-availability-widget .fp-filter-form .select-wrapper.baths-select-wrapper::before,
.check-availability-widget .fp-filter-form .select-wrapper::after {
	background-color: #111111;
}
.check-availability-widget .fp-filter-form .date-picker-wrapper input,
.check-availability-widget .fp-filter-form .select-wrapper select {
	color: #111111;
}
.check-availability-widget .bed-btn {
	background: transparent;
	border-color: #111111;
	color: #111111;
}
.check-availability-widget .bed-btn:hover {
	background: #111111;
	border-color: #111111;
	color: #FAF8F1;
}
.check-availability-widget .bed-btn.active,
.check-availability-widget .bed-btn:has(input:checked) {
	background: #111111;
	border-color: #111111;
	color: #FAF8F1;
}
.content-block-carousel .swiper-slide {
	min-height: 450px;
}
.bw-split-section.image_position_left .row {
	flex-direction: row-reverse;
}
.bw-split-image img {
	width: 100%;
	height: auto;
}
.r360-amenities.r360-amenities--apartment {
	list-style: disc;
	margin: 30px 0 0;
	padding: 0 0 0 18px;
}
.r360-amenities.r360-amenities--apartment li {
	font-size: inherit;
	margin: 5px 0 15px;
}
.r360-amenities.r360-amenities--apartment li::before {
	content: none;
}
.py-4 {
	padding-top: 1.5rem !important;
	padding-bottom: 1.5rem !important;
}
.content-block-carousel-swiper {
	--swiper-pagination-bullet-horizontal-gap: 8px;
}

/* ── Bellaview: availability bar → Bellaview Gold sign plate ── */
.about_section:has(.check-availability-widget) {
	background: #CB9608;
}
.about_section .about_section_top p {
	color: #111111;
}
.check-availability-widget .bed-btn {
	background: transparent;
	border-color: #111111;
	color: #111111;
}
.check-availability-widget .bed-btn:hover,
.check-availability-widget .bed-btn.active,
.check-availability-widget .bed-btn:has(input:checked) {
	background: #111111;
	border-color: #111111;
	color: #FAF8F1;
}

/* ── Bellaview: availability bar correction — section stays light, the widget bar is gold ── */
.about_section:has(.check-availability-widget) {
	background: var(--bw-cream);
}
.about_section .about_section_top {
	background: #CB9608;
	padding: 1.75rem 2rem;
}
.about_section .about_section_top p {
	color: #111111;
}

/* ── Bellaview: availability bar FINAL — white section, GOLD bar, Classic Black text (WCAG AA on #CB9608) ── */
.about_section:has(.check-availability-widget) {
	background: #FFFFFF;
}
.about_section .about_section_top {
	background: #CB9608;
	padding: 1.75rem 2rem;
}
.about_section .about_section_top p {
	color: #111111;
}
.about_section .about_section_top a {
	color: #111111;
}
.check-availability-widget .bed-btn,
.check-availability-widget button {
	background: transparent !important;
	border: 1px solid #FFFFFF !important;
	color: #FFFFFF !important;
}
.check-availability-widget .bed-btn:hover,
.check-availability-widget .bed-btn.active,
.check-availability-widget .bed-btn:has(input:checked),
.check-availability-widget button:hover,
.check-availability-widget button.active {
	background: #285F48 !important;
	border-color: #FFFFFF !important;
	color: #FFFFFF !important;
}
.check-availability-widget input.date-picker,
.check-availability-widget input[type="text"],
.check-availability-widget select {
	background: #FFFFFF !important;
	color: #111111 !important;
	border-color: #FFFFFF !important;
}
.check-availability-widget .date-picker-wrapper::before,
.check-availability-widget .select-wrapper::before,
.check-availability-widget .select-wrapper::after {
	color: #174B3A;
}

/* ── Bellaview: gold bar fields — white text + white icons ── */
.check-availability-widget input.date-picker,
.check-availability-widget input[type="text"],
.check-availability-widget select {
	background: transparent !important;
	color: #FFFFFF !important;
	border: 1px solid #FFFFFF !important;
}
.check-availability-widget select option {
	color: #111111;
	background: #FFFFFF;
}
.check-availability-widget .date-picker-wrapper::before,
.check-availability-widget .select-wrapper::before,
.check-availability-widget .select-wrapper::after {
	background-color: #FFFFFF !important;
}

/* ── Bellaview: gold bar — uniform border boxes, aligned heights ── */
.check-availability-widget input.date-picker,
.check-availability-widget input[type="text"],
.check-availability-widget select {
	border: 0 !important;
	height: 100% !important;
}
.check-availability-widget .fp-filter-form {
	align-items: center;
}
.check-availability-widget .date-picker-wrapper,
.check-availability-widget .select-wrapper,
.check-availability-widget .bed-btn {
	height: 46px !important;
	box-sizing: border-box !important;
	border: 1px solid #FFFFFF !important;
	display: inline-flex;
	align-items: center;
}
.check-availability-widget .beds-buttons-wrapper {
	height: 46px;
	display: flex;
	align-items: stretch;
	border: 0 !important;
	gap: 0;
}
.check-availability-widget .beds-buttons-wrapper .bed-btn + .bed-btn {
	margin-left: -1px;
}

/* ── Bellaview: restore spacing between bed buttons ── */
.check-availability-widget .beds-buttons-wrapper {
	gap: 10px !important;
}
.check-availability-widget .beds-buttons-wrapper .bed-btn + .bed-btn {
	margin-left: 0 !important;
}

/* ── QA round 1 (Pastel #7): gold bar WCAG AA — Classic Black on #CB9608 (≈7.1:1).
   Supersedes the white !important blocks above. ── */
.check-availability-widget .bed-btn,
.check-availability-widget button {
	background: transparent !important;
	border: 1px solid #111111 !important;
	color: #111111 !important;
}
.check-availability-widget .bed-btn:hover,
.check-availability-widget .bed-btn.active,
.check-availability-widget .bed-btn:has(input:checked),
.check-availability-widget button:hover,
.check-availability-widget button.active {
	background: #111111 !important;
	border-color: #111111 !important;
	color: #FAF8F1 !important;
}
.check-availability-widget input.date-picker,
.check-availability-widget input[type="text"],
.check-availability-widget select {
	background: transparent !important;
	color: #111111 !important;
	border: 0 !important;
}
.check-availability-widget .date-picker-wrapper,
.check-availability-widget .select-wrapper,
.check-availability-widget .bed-btn {
	border: 1px solid #111111 !important;
}
.check-availability-widget .date-picker-wrapper::before,
.check-availability-widget .select-wrapper::before,
.check-availability-widget .select-wrapper::after {
	background-color: #111111 !important;
}
/* The submit action gets a black plate with ivory text so it stands off the gold bar. */
.check-availability-widget .fp-filter-form button[type="submit"] {
	background: #111111 !important;
	border: 1px solid #111111 !important;
}
.check-availability-widget .fp-filter-form button[type="submit"] span {
	color: #FAF8F1 !important;
}
.check-availability-widget .fp-filter-form button[type="submit"]:hover {
	background: #174B3A !important;
	border-color: #174B3A !important;
}