/*
Theme Name: Beaver Builder Child Theme
Theme URI: http://www.wpbeaverbuilder.com
Version: 1.0
Description: An example child theme that can be used as a starting point for custom development.
Author: The Beaver Builder Team
Author URI: http://www.fastlinemedia.com
template: bb-theme
*/

/* Add your custom styles here... */ 

/********* DEFINE COLOR CODES *********/
:root {
/* 	Logo Color*/
	--logo-color: #C39A73;

/* 	Header */
	--header-bg: #F7F5F2;
	--footer-bg: #E9ECEC;
	
/* 	Menu */
	--menu-link: #757575; 
	--menu-active: #C39A73;
	--menu-hover: #779EC3;
	
/* 	Footer */
	--footer-link: #779EC3;
	--footer-link-hover: #C39A73;
	
/* 	Hyperlink */
	--link-color: #779EC3;
	--link-hover: #C39A73;
	
/* 	CTA Buttons */
	--btn-color: #C39A73;
	--btn-hover: #B6895F;
	--btn-text: #FFFFFF;
	--btn-text-hover: #FFFFFF;

/* 	Primary Background Colors */
	--bg-pri-1: #F5EFE9;
	--bg-pri-2: #EEF3F7;
	--bg-pri-3: #F7F1EA;
	--bg-pri-4: #F2F4F1;
	
/* 	Secondary Background Colors */
	--bg-sec-1: #E6E4E1;
	--bg-sec-2: #E9ECEC;
	--bg-sec-3: #EFE7DF;
	--bg-sec-4: #E4EBE6;
	
/* 	Powerpack Image/Video Gallery Caption */
	--pp-gallery-caption-bg: #C39A73;
	--pp-gallery-caption-text: #000;
	
/* 	Powerpack Advance Tab Color Settings */
	--tab-active-bg: #C39A73;
	--tab-active-text: #FFFFFF;
	--tab-inactive-text: #757575;
	--tab-underline: #C39A73;

/* 	Site Plan Legend Points Color */
	--faci1: #33af4a;
	--faci2: #cdaa2b;
	--faci3: #8daeda;
	--faci4: #b369aa;
	--anci: #cfcfce;
	
/* 	Tablepress Color Settings */
	--table-header-bg: #C39A73;
	--table-header-text: #FFFFFF;
	--table-border: #2d4d58;
	--table-text-color:#757575;
	--table-link-text: #111111;
	--table-hover-bg: #29323A;
	--table-hover-text: #e8e3d6;
	
/* 	Elevation Chart Color Code */
	--2br-premium:	#f0d7c4;
	--2br-study:	#dea178;
	--3br: 			#e2e4d6;
	--3br-hs: 		#bec6a5;
	--3br-hs-study: #93a66f;
	--4br-st: 		#dfe5ee;
	--4br-st-study: #b6c7dd;
	--4br-hs-study: #83a5c8;
	--5br-hs: 		#c2c0bf;
	
/* 	Floor Plans Type Caption Color */
	--base-1br: #000000;
	--base-2br: #f0d7c4; 
	--base-3br: #e2e4d6; 
	--base-4br: #dfe5ee; 
	--base-5br: #c2c0bf;
	--floorplan-caption: #000;

/* 	Bookly Calendar Color */
	--theme-color: red;
}

/********* COLOR SETTINGS *********/
/* Header Background Color */
.fl-page-header,
.fl-page-nav {
	background-color: var(--header-bg);
	border-bottom: 2px solid var(--logo-color);
}
/* Footer & Widgets Background Color  */
.fl-page-footer,
.fl-page-footer-widgets {
	background-color: var(--footer-bg);
}


/********* Home Page Background Colors *********/
.home-row1 {background-color: var(--bg-pri-1);}
.home-row2 {background-color: var(--bg-pri-3);}
.home-row3 {background-color: var(--bg-pri-2);}
.home-row4 {background-color: var(--bg-pri-4);}
.home-row5 {background-color: var(--bg-sec-2);}

/********* Project Details Page Background Colors *********/
.pd-row1 {background-color: var(--bg-sec-1);}
.pd-row2 {background-color: var(--bg-pri-1);}
.pd-row3 {background-color: var(--bg-pri-2);}
.pd-row4 {background-color: var(--bg-pri-3);}

/********* Location Page Background Colors *********/
.loc-row1 {background-color: var(--bg-pri-2);}
.loc-row2 {background-color: var(--bg-sec-1);}
.loc-row3 {background-color: var(--bg-pri-1);}
.loc-row4 {background-color: var(--bg-pri-4);}
.loc-row5 {background-color: var(--bg-pri-3);}

/********* Floor Plan Page Background Colors *********/
.fp-row1 {background-color: #fcfdf6;}
.fp-row2 {background-color: var(--bg-pri-2);}
.fp-row3 {background-color: var(--bg-pri-1);}

/********* Developer Page Background Colors *********/
.dev-row1 {background-color: var(--bg-pri-2);}
/* .dev-row2 {background-color: var(--bg-pri-1);} */

/********* Contact Us Page Background Colors *********/
.contact-row1 {background-color: var(--bg-pri-1);}

/********* Download Brochure Page Background Color *********/
.brochure-row1 {background-color: var(--bg-pri-1);}

/********* Privacy Policy Page Background Color *********/
.privacy-row1 {background-color: var(--bg-pri-1);}

/********* Contact and Booking Appt form section background *********/
.bg-form {background-color: var(--bg-sec-3);}


/********* GENERAL SETTINGS *********/
.fl-theme-header {
    z-index: 10000;
}

/* Set size of header logo */
.fl-logo-img {
	height: 40% !important;
	width: 40% !important;
}

/* Set Font Family and Size */
h1,
h2,
h3,
h4,
h5,
h6,
th {
	font-family: "heading-font";
}

.fl-page-nav .navbar-nav a {
	font-family: "heading-font";
	font-size:16px;
}

body {
    font-family: "body-font";
    font-size: 16px;
}

.pp-tab-title {
	font-size: 1.3em;
}


/* Justify Text in Paragraphs */
p {
	text-align: justify;
}

/* Justify Text in Widgets */
.wp-block-column {
	text-align: justify;
}

/* === DISCLAIMER === */

/* Disclaimer for Project Details, Unit Types, Perspectives, Video, Site Plan, Elevation Chart, Floor Plan */

.project-details-disclaimer,
.unit-types-disclaimer,
.perspective-disclaimer,
.yt-video-disclaimer,
.site-plan-disclaimer,
.echart-disclaimer,
.floorplan-disclaimer {
	display:none;
}


/* Menu Link Color */
.fl-page-nav-right .fl-page-nav-wrap .navbar-nav li>a,
.fl-page-nav-toggle-icon.fl-page-nav-toggle-visible-mobile .fl-page-nav-collapse ul.navbar-nav>li>a,
.fl-page-footer a {
    color: var(--menu-link);
}

/* Menu Active */
.fl-page-nav-right .fl-page-nav-wrap .navbar-nav li.current-menu-item>a,
.fl-page-nav-toggle-icon.fl-page-nav-toggle-visible-mobile .fl-page-nav-collapse ul.navbar-nav>li.current-menu-item>a, .fl-page-nav-toggle-icon.fl-page-nav-toggle-visible-mobile .fl-page-nav-collapse ul.navbar-nav>li.current-menu-item>.fl-submenu-icon-wrap .fl-submenu-toggle-icon {
	color: var(--menu-active);
}

/* Menu Hover Color */
.fl-page-nav-right .fl-page-nav-wrap .navbar-nav li>a:hover,
.fl-page-nav-toggle-icon.fl-page-nav-toggle-visible-mobile .fl-page-nav-collapse ul.navbar-nav>li>a:hover {
	color: var(--menu-hover);
}

/* === PRESET SETTINGS === */

/* Set hyperlink color */
p a,
.fa-phone,
.fa-envelope,
.fa-facebook,
.fa-youtube,
h2 a {
	color: var(--link-color);
}

.fl-page-footer-widgets a {
	color: var(--footer-link);
}

/* Set hyperlink hover color */
p a:hover,
.fa-phone:hover,
.fa-envelope:hover,
.fa-facebook:hover,
.fa-youtube:hover,
h2 a:hover {
	color: var(--link-hover);
}
.fl-page-footer-widgets a:hover {
	color: var(--footer-link-hover);
}


/* Remove underscore from hyperlink */
a:link,
a:visited,
a:hover,
a:active {
	text-decoration: none;
}

/* Set CTA Button Color */
/* Set Ninja Form Submit Button Active Color */
/* Set "Download Brochure" Button Active Color */
.ninjaformbtn,
.pp-modal-trigger,
.fl-button {
	background-color: var(--btn-color) !important;
	color: var(--btn-text) !important;
	border: none !important;
	transition: all 0.25s ease !important;
	border-radius: 6px !important;
}

/* Set CTA Button Hover Color */
/* Set Ninja Form Submit Button Hover Color */
/* Set "Download Brochure" Button Hover Color */
.ninjaformbtn:hover,
.pp-modal-trigger:hover,
.fl-button:hover {
	background-color: var(--btn-hover) !important;
	color: var (--btn-text-hover) !important;
}

/* Photo Gallery Lightbox */
/* .fancybox-button,
.fancybox-button:focus {
	background: var(--btn-color);
	color: var(--btn-text);
}
.fancybox-button:hover {
	background: var(--btn-hover);
	color: var(--btn-hover-text);
}
.fancybox-button[disabled],
.fancybox-button[disabled]:hover {
	background: rgba(0,0,0,0);
	color: rgba(0,0,0,0);
} */

/* ===== Project Details Page ===== */
/* Set Image & Video Gallery Caption Color */
.photogallery .pp-photo-gallery-caption,
.videogallery .pp-video-title {
	background-color: var(--pp-gallery-caption-bg);
	color: var(--pp-gallery-caption-text);
}

/* ===== Location Page ===== */
#location-map {
    width: 100%;
    aspect-ratio: 2560 / 2452;
    max-height: 950px;   /* optional */
	background: transparent !important;
}

.leaflet-pane,
.leaflet-top,
.leaflet-bottom {
    z-index: 1 !important;
}

/* Location Map Legend */
/* Wrapper font size */
.loc-map-legend {
    font-size: 10px;
}

/* Section spacing */
.loc-map-legend .legend-section {
    margin-bottom: 20px;
}

/* Title row (icon + heading) */
.loc-map-legend .legend-title {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 6px;
}

/* Remove default h3 size scaling */
.loc-map-legend h2 {
    font-size: 22px;
    margin: 0;
    font-weight: 600;
}

.loc-map-legend h3 {
    font-size: 14px;
    margin: 0;
    font-weight: 600;
}

/* Two-column rows */
.loc-map-legend .legend-row {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 12px;
    align-items: start;
}

/* Icon control */
.loc-map-icon {
    width: 12px;   /* change this */
    height: 12px;  /* change this */
    object-fit: contain;
}

/* Divider */
.loc-map-legend hr {
    margin: 20px 0;
    border: none;
    border-top: 1px solid #ccc;
}

/* Line legend styling */
.legend-lines {
    margin-top: 10px;
}

.legend-line-item {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 5px;
}

/* Colored bars */
.line-color {
    width: 18px;
    height: 4px;
    display: inline-block;
}

/* MRT line colors */
.line-color.ewl { background: #0B6B3A; }     /* Green */
.line-color.dtl { background: #0055A5; }     /* Blue */
.line-color.tel { background: #8B6F5A; }     /* Brown */
.line-color.crl { background: #7CB342; }     /* Light green */

/* Disclaimer text */
.legend-disclaimer {
    margin-top: 12px;
    font-size: 0.9em;
    line-height: 1.4;
}

/* PowerPack Image Caption Overlay */
.pp-photo-caption-overlay {
    color: white !important;
    text-shadow: 1px 2px 2px #000;
    position: absolute;
    bottom: 7px;
}

/* ===== Site Plan and Floor Plan Page ===== */
/* Site Plan Map */
#site-plan-map {
    width: 100%;
    aspect-ratio: 1877 / 2560;  /* keep original ratio */
    background: transparent !important;
}

/* Elevation Chart Slider Arrow Background */
.fl-content-slider-svg-container {
	background-color: var(--link-color);
	width: 35px;
	height: 35px;
	border-radius: 50%;
}
.fl-content-slider-navigation svg {
		padding: 5px;
}

/* Elevation Chart Slider Arrow */
.fl-content-slider-navigation path {
	fill: white;
}

/* Download Brochure CTA */
.pp-modal-wrap .pp-modal-close.box-top-right {
	background-color: var(--btn-color);
}
.pp-modal-close .bar-wrap span {
	background: var(--btn-text);
}
.pp-modal-wrap .pp-modal-close.box-top-right:hover {
    background-color: var(--btn-hover);
}
.pp-modal-close .bar-wrap:hover span {
	background: var(--btn-text-hover);
}

/* Floor Plan Tabs when Active */
.pp-tabs-label.pp-tab-active .pp-tab-label-inner:after {
	background-color: var(--tab-active-bg);
}
.pp-tabs-label.pp-tab-active {
	color: var(--tab-active-text) !important;
}

/* Floor Plan Tabs when Inactive */
.pp-tabs-label .pp-tab-label-inner:after {
	background-color: var(--tab-underline) !important;
}
.floorplan-photo {
	color: var(--tab-inactive-text);
}

/* Set Floorplan Caption Color */
.base-1br-color .pp-photo-gallery-caption {
	background-color: var(--base-1br) !important;
	color: var(--floorplan-caption) !important;
}

.base-2br-color .pp-photo-gallery-caption {
	background-color: var(--base-2br) !important;
	color: var(--floorplan-caption) !important;
}

.base-3br-color .pp-photo-gallery-caption {
	background-color: var(--base-3br) !important;
	color: var(--floorplan-caption) !important;
}

.base-4br-color .pp-photo-gallery-caption {
	background-color: var(--base-4br) !important;
	color: var(--floorplan-caption) !important;
}

.base-5br-color .pp-photo-gallery-caption {
	background-color: var(--base-5br) !important;
	color: var(--floorplan-caption) !important;
}

/* ===== Developer Page ===== */
/* Set Developer Logo maximum height */
.dev-logo img {
	max-height: 60px;
	width: auto;
}

/* Developer Past Project - Powerpack Image Carousel */
.dev-past-project .pp-image-carousel .swiper-pagination-bullet {
	background-color: var(--btn-color);
}

.dev-past-project .pp-image-carousel .swiper-pagination-bullet-active{
	background-color: var(--btn-hover);
	width: 8px;
	height: 8px;
}

.dev-past-project .pp-image-carousel-item .pp-image-overlay.fade {
	opacity: 1;
}

.dev-past-project .pp-image-overlay {
	background: none;
}

.dev-past-project .pp-caption {
	position: absolute;
	bottom: 5px;
/* 	right:10px; */
	text-shadow: 2px 2px 0px #000;
}

/* ===== Misc ===== */
/*Scroll to Top Button*/
#fl-to-top {
  	border-radius:50%;
	width:54px;
	height:54px;
	bottom: 6px;
	background-color: var(--btn-color);
  	opacity: 0.8;
}
#fl-to-top:hover {
	background-color: var(--btn-hover);
	color: var(--btn-text-hover);
}

#fl-to-top i {
	color: var(--btn-text);
	top:21px;
	left:15px;
  	font-size: 28px;
 	line-height: 10px;
}

/* Set position of Chaty Floating Icons */
.chaty-widget {
	bottom: 68px !important;
	right: 11px !important;
}

/* Remove Border line above footer */
.fl-page-footer {
	border-top: none !important;
}

/* Remove Border line below Bookly Calendar */
.bookly-box.bookly-nav-steps {
	border: none !important;
}

/* Centre Calendar on Mobile Screen */
@media screen (max-width: 750px) {
/* 	.bookly-input-wrap.bookly-slot-calendar.bookly-js-slot-calendar, */
	.bookly-css-root .bookly\:min-w-\[200px\] {
		min-width:300px !important;
	}
	
	.bookly-slot-calendar {
    	margin: auto !important;
    	float: none !important;
	}
	
	.bookly-time-step {
		margin: auto !important;
		margin-top: 15px !important;
	}
}

@media (max-width: 768px) {
	.fl-content-slider {
		padding-right:50px;
		padding-left:50px;
	}	
	.pp-tabs-horizontal .pp-tabs-label.pp-tab-active {
		background-color: var(--tab-active-bg) !important;

	}
	.pp-tabs-panel-label .pp-tab-open {
		color: var(--tab-inactive-text) !important;
	}
	.pp-tabs-label.pp-tab-active,
	.pp-tabs-panel-label .pp-tab-close {
		color: var(--tab-active-text) !important;
	}
}