/*
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 {

  /* ================================
     BRAND / PRIMARY COLORS
  ================================= */
  --primary-1: #C3AF8E;   /* Champagne Gold */
  --primary-2: #A89270;   /* Darker Champagne Gold (Hover / Depth) */
  --primary-3: #F5EFE9;   /* Soft Neutral Background */

  /* ================================
     SECONDARY COLORS (COASTAL THEME)
  ================================= */
  --secondary-1: #016486; /* Deep Coastal Blue */
  --secondary-2: #EEF3F7; /* Light Sky */
  --secondary-3: #E4EBE6; /* Soft Sage */
  --secondary-4: #757575; /* Neutral Text */

  /* ================================
     ACCENT COLORS
  ================================= */
  --accent-1: #5FA8C7;    /* Light Blue Highlight */

  /* ================================
     LOGO
  ================================= */
  --logo-color: var(--primary-1);

  /* ================================
     HEADER & FOOTER
  ================================= */
  --header-bg: #F7F5F2;
  --footer-bg: #E9ECEC;

  /* ================================
     MENU
  ================================= */
  --menu-link: var(--secondary-4);
  --menu-active: var(--primary-1);
  --menu-hover: var(--secondary-1);

  /* ================================
     FOOTER LINKS
  ================================= */
  --footer-link: var(--secondary-1);
  --footer-link-hover: var(--primary-1);

  /* ================================
     HYPERLINKS
  ================================= */
  --link-color: var(--secondary-1);
  --link-hover: var(--accent-1);

  /* ================================
     CTA BUTTONS
  ================================= */
  --btn-color: var(--primary-1);
  --btn-hover: var(--secondary-1);
  --btn-text: #ffffff;
  --btn-text-hover: #FFFFFF;

  /* ================================
     PRIMARY BACKGROUND COLORS
  ================================ */
  --bg-pri-1: #F6F1EB;   /* warm ivory sand #F6F1EB*/
  --bg-pri-2: #EDF4F9;   /* very light coastal blue */
  --bg-pri-3: #F8F3EE;   /* soft champagne */
  --bg-pri-4: #F2F6F3;   /* light sage tone */

  /* ================================
     SECONDARY BACKGROUND COLORS
  ================================ */
  --bg-sec-1: #EAE6E1;   /* warm neutral grey */
  --bg-sec-2: #E7EEF3;   /* muted blue-grey */
  --bg-sec-3: #EFE8E2;   /* soft beige blend */
  --bg-sec-4: #E3ECE6;   /* gentle green-grey */

  /* ================================
     POWERPACK GALLERY
  ================================= */
  --pp-gallery-caption-bg: var(--primary-1);
  --pp-gallery-caption-text: #ffffff;

  /* ================================
     POWERPACK TABS
  ================================= */
  --tab-active-bg: var(--primary-1);
  --tab-active-text: #FFFFFF;
  --tab-inactive-text: var(--secondary-4);
  --tab-underline: var(--accent-1);

  /* ================================
     SITE PLAN LEGEND COLORS
  ================================= */
  --faci1: #fdb94d;
  --faci2: #f48480;
  --anci1: #8d58a4;
  --anci2: #4a58a7;

  /* ================================
     TABLEPRESS
  ================================= */
  --table-header-bg: var(--primary-1);
  --table-header-text: #FFFFFF;
  --table-border: #2d4d58;
  --table-text-color: var(--secondary-4);
  --table-link-text: #111111;
  --table-hover-bg: var(--accent-1);
  --table-hover-text: var(--secondary-4);

  /* ================================
     ELEVATION CHART COLORS
  ================================= */
  --1br-study: #e9e6db;
  --2br: #cbe0f5;
  --2br-premium: #a6c9ec;
  --3br: #da9694;
  --3br-premium: #f2dcdb;
  --4br: #bad4c3;
  --4br-pl: #6ea66f;
  --5br-pl: #cabed8;
  --ph: #fdfba7;

  /* ================================
     FLOOR PLAN COLORS
  ================================= */
  --base-1br: #e9e6db;
  --base-2br: #cbe0f5;
  --base-3br: #da9694;
  --base-4br: #bad4c3;
  --base-5br: #cabed8;
  --floorplan-caption: #000000;

  /* ================================
     BOOKLY CALENDAR
  ================================= */
  --theme-color: var(--primary-1);
}

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

/* 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);
}

/* 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: var(--bg-sec-1);}
.fp-row2 {background-color: var(--bg-pri-2);}
.fp-row3 {background-color: var(--bg-pri-1);}
/******** Site Plan Legend Facilities Colors ********/
.faci1 { background-color: var(--faci1); }
.faci2 { background-color: var(--faci2); }
.anci1 { background-color: var(--anci1); }
.anci2 { background-color: var(--anci2); }

/********* 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);}

/* ================================
     HYPERLINKS
================================= */

/* 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;
}

/* ================================
   CTA BUTTONS (BASE)
================================= */
/* Set CTA Button Color */
/* Set Ninja Form Submit Button Active Color */
/* Set "Download Brochure" Button Active Color */
.ninjaformbtn, .ninjaformbtn:visited,
.pp-modal-trigger, .pp-modal-trigger:visited,
.fl-button, .fl-button:visited {
  background: linear-gradient(145deg, #d2bea0, var(--btn-color)) !important;
  border: none !important;
  border-radius: 8px !important;
  transition: all 0.25s ease !important;

  /* 3D Effect */
  box-shadow: 
    0 4px 10px rgba(0, 0, 0, 0.15),
    inset 0 -2px 0 rgba(0,0,0,0.15);
}

/* ================================
   FORCE BUTTON TEXT COLOR
================================ */
.fl-button,
.fl-button:visited,
.fl-button *,
.fl-button:visited *,
.ninjaformbtn,
.ninjaformbtn *,
.pp-modal-trigger,
.pp-modal-trigger * {
  color: var(--btn-text) !important;
}

/* Hover */
.fl-button:hover,
.fl-button:hover *,
.ninjaformbtn:hover,
.ninjaformbtn:hover *,
.pp-modal-trigger:hover,
.pp-modal-trigger:hover * {
  color: var(--btn-text-hover) !important;
}

/* ================================
   HOVER STATE
================================ */
/* 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: linear-gradient(145deg, #01779f, var(--btn-hover)) !important;

  box-shadow: 
    0 6px 14px rgba(0, 0, 0, 0.2),
    inset 0 -2px 0 rgba(0,0,0,0.2),
    0 0 8px rgba(1, 100, 134, 0.3);

  transform: translateY(-1px);
}

/* ================================
   ACTIVE / CLICK STATE
================================ */
.ninjaformbtn:active,
.pp-modal-trigger:active,
.fl-button:active {
  transform: translateY(1px);

  box-shadow: 
    0 2px 6px rgba(0,0,0,0.2),
    inset 0 2px 4px rgba(0,0,0,0.2);
}

/* ===================================
             FONT SETTINGS
   =================================== */

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

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

body {
	font-family: "body-font",Sans-serif;
	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;
}


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

/* ===================================
               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;
}

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

/* ===================================
          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%;
	height:100vh;
    aspect-ratio: 6000 / 2649;
    max-height: 750px;   /* optional */
	background: transparent !important;
}

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

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

/* ===================================
       Site Plan & Floor Plan Page
   =================================== */

/* ===== Site Plan ===== */
/* Site Plan Map */
#site-plan-map {
    width: 100%;
    aspect-ratio: 1140 / 1184;  /* keep original ratio */
    background: transparent !important;
}

/* Site plan Legend */
.vela-legend {
  font-family: Arial, sans-serif;
  font-size: 13px;
  line-height: 1.4;
  padding-right: 5px;
  /* 🔥 removed max-height and overflow */
}

.legend-section {
  margin-bottom: 18px;
}

.legend-title {
  font-weight: 700;
  margin-bottom: 6px;
  font-size: 14px;
}

.legend-title span {
  font-weight: 500;
  font-size: 12px;
}

.legend-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5px 10px;
}

.legend-item {
  display: flex;
  align-items: flex-start;
  word-break: break-word;
}

.circle {
  width: 22px;          /* 🔥 reduced */
  height: 22px;         /* 🔥 reduced */
  min-width: 22px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-right: 6px;    /* slightly tighter */
  font-size: 11px;
  font-weight: bold;
  color: #fff;
}

/* 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;
}

/* ===== Floor Plan ===== */
/* Download Brochure CTA Popup Windown Top Right Close Button*/
.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 {
	width: 180px;
  	max-width: 100%;
  	height: auto;
  	display: block;
  	margin: 0 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;
}

/* Caption Settings */
.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: relative;
	align-items: bottom;
	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;
	}
}