/*
 * plans-analysis.css — Plans & Analysis listing + detail page styles
 * Generated by Claude Code Phase 2B — Developer review required
 *
 * Compiled from (SCSS → CSS, variables resolved):
 *   _planblock.scss  → .planblock-wrap, .plan-img, .plan-point, .plan-no-info,
 *                       .plan-tab-nav, .plan-slider-arrow, .download-plan
 *
 * Also loaded on this page (from other CSS files — NOT duplicated here):
 *   blog.css         → .blog-category-page-title, .home-recent-blog-wrap, .blog-list, .blog-item
 *   homepage.css     → .home-banner-wrap, .home-banner-wrap--boxed, .banner-wrap, .banner-content
 *   swiper-bundle    → Swiper core styles
 *
 * Variable values (from _variables.scss):
 *   $primary          = #e78125
 *   $secondary        = #19263a
 *   $color_nile_blue  = #173055
 *   $color_raven      = #7b7c7e
 *   $color_shark      = #232528
 *   $color_silver     = #bbbcbe  (inferred from Sass color map — TODO: verify exact hex)
 *   $white            = #ffffff
 */

/* ============================================================
   PLAN BLOCK WRAPPER
   Source: _planblock.scss — .planblock-wrap
   ============================================================ */

.planblock-wrap .container {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
}

/* ============================================================
   LEFT PANEL — floor plan image + clickable pins
   Source: _planblock.scss — .left
   ============================================================ */

.planblock-wrap .left {
	width: calc(100% - 420px);
}

@media (max-width: 991px) {
	.planblock-wrap .left {
		width: 100%;
	}
}

.planblock-wrap .left .plan-img-box {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	padding-bottom: 20px;
}

.planblock-wrap .left .plan-img {
	position: relative;
}

/* ── Clickable plan point pins ── */

.planblock-wrap .plan-point {
	position: absolute;
	width: 36px;
	height: 36px;
	background: #e78125;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	font-size: 10px;
	color: #ffffff;
	text-transform: uppercase;
	border: 0;
	-webkit-border-radius: 100%;
	-moz-border-radius: 100%;
	border-radius: 100%;
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
	cursor: pointer;
	line-height: 1;
}

@media (max-width: 1024px) {
	.planblock-wrap .plan-point {
		width: 30px;
		height: 30px;
		font-size: 8px;
	}
}

.planblock-wrap .plan-point.active {
	-webkit-transform: scale(1.4);
	-moz-transform: scale(1.4);
	-ms-transform: scale(1.4);
	transform: scale(1.4);
}

@media (max-width: 1024px) {
	.planblock-wrap .plan-point.active {
		-webkit-transform: scale(1.3);
		-moz-transform: scale(1.3);
		-ms-transform: scale(1.3);
		transform: scale(1.3);
	}
}

/* NR (Not Relevant) pins — use secondary brand colour instead of primary */
.planblock-wrap .plan-point.point-nr {
	background: #173055;
}

/* ============================================================
   RIGHT PANEL — tab nav + swiper slides + download
   Source: _planblock.scss — .right
   ============================================================ */

.planblock-wrap .right {
	width: 390px;
	background: #19263a;
	color: #ffffff;
	padding: 32px;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-direction: column;
	flex-direction: column;
	-webkit-border-radius: 12px;
	-moz-border-radius: 12px;
	border-radius: 12px;
	-webkit-box-shadow: 4px 6px 32px rgba(39, 39, 39, 0.08);
	-moz-box-shadow: 4px 6px 32px rgba(39, 39, 39, 0.08);
	box-shadow: 4px 6px 32px rgba(39, 39, 39, 0.08);
}

@media (max-width: 991px) {
	.planblock-wrap .right {
		width: 100%;
		padding: 20px;
	}
}

/* ── Plan info row: number + description text ── */

.planblock-wrap .plan-no-info {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	font-size: 18px;
	line-height: 160%;
	padding-bottom: 20px;
}

@media (max-width: 991px) {
	.planblock-wrap .plan-no-info {
		font-size: 14px;
		line-height: 24px;
	}
}

.planblock-wrap .plan-no-info .no {
	-ms-flex-negative: 0;
	flex-shrink: 0;
	font-size: 16px;
	color: #bbbcbe; /* $color_silver — TODO: verify exact hex from _variables.scss */
	margin-right: 12px;
}

.planblock-wrap .plan-no-info .txt {
	width: 100%;
}

.planblock-wrap .plan-no-info .txt a {
	color: #e78125;
}

/* ── Download link ── */

.planblock-wrap .download-plan {
	padding-top: 30px;
	-ms-flex-negative: 0;
	flex-shrink: 0;
}

.planblock-wrap .download-plan a {
	color: #ffffff;
	font-size: 16px;
	font-weight: 500;
	display: -webkit-inline-box;
	display: -ms-inline-flexbox;
	display: inline-flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	gap: 9px;
	text-decoration: none;
}

.planblock-wrap .download-plan a:hover {
	text-decoration: underline;
}

/* ── Tab-content height fill ── */

.planblock-wrap .right .tab-content {
	height: 100%;
}

.planblock-wrap .right .tab-content .tab-pane,
.planblock-wrap .right .tab-content .plan-tab-info {
	height: 100%;
}

/* ── Previous / Next slider buttons ── */

.planblock-wrap .plan-slider-arrow {
	display: inline-block;
	border: 1px solid #ffffff;
	height: 37px;
	min-width: 100px;
	padding: 0 20px;
	background: transparent;
	font-size: 14px;
	font-weight: 500;
	color: #ffffff;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	-webkit-transition: all 0.3s ease-in-out;
	-moz-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
	cursor: pointer;
	margin-top: 12px;
}

.planblock-wrap .plan-slider-arrow:not(:last-child) {
	margin-right: 20px;
}

.planblock-wrap .plan-slider-arrow:not(.swiper-button-disabled):hover {
	background-color: #ffffff;
	color: #232528;
}

.planblock-wrap .plan-slider-arrow.swiper-button-disabled {
	opacity: 0.6;
	cursor: default;
}

/* ============================================================
   TAB NAVIGATION — shared by both left (mobile) and right (desktop) panels
   Source: _planblock.scss — .plan-tab-nav
   ============================================================ */

.planblock-wrap .plan-tab-nav {
	padding-bottom: 5px;
	margin-bottom: 22px;
	scrollbar-color: #19263a #e5e5e5;
	scrollbar-width: thin;
	overflow: auto;
	-ms-flex-negative: 0;
	flex-shrink: 0;
}

.planblock-wrap .plan-tab-nav::-webkit-scrollbar {
	width: 4px;
	height: 4px;
	-webkit-border-radius: 8px;
	border-radius: 8px;
}

.planblock-wrap .plan-tab-nav::-webkit-scrollbar-track {
	background: rgba(123, 124, 126, 0.2);
	-webkit-border-radius: 8px;
	border-radius: 8px;
}

.planblock-wrap .plan-tab-nav::-webkit-scrollbar-thumb {
	background: rgba(255, 255, 255, 0.5);
	-webkit-border-radius: 8px;
	border-radius: 8px;
}

@media (max-width: 991px) {
	.planblock-wrap .plan-tab-nav::-webkit-scrollbar-thumb {
		background: #19263a;
	}
}

/* ── Tab nav links inside plan block ── */

.planblock-wrap .nav.custom-tabs .nav-link {
	font-size: 12px;
	-ms-flex-negative: 0;
	flex-shrink: 0;
	white-space: nowrap;
	padding: 7px 13px;
}

@media (max-width: 991px) {
	.planblock-wrap .nav.custom-tabs {
		border-color: #19263a;
	}

	.planblock-wrap .nav.custom-tabs .nav-link {
		color: #19263a;
	}

	.planblock-wrap .nav.custom-tabs .nav-link.active {
		color: #ffffff;
	}
}

/* ============================================================
   BLOG-CTA5 — .blog-cta-box--style3
   Source: _blog_cta.scss — &.blog-cta-box--style3 {}
   Used in: template-parts/home/blog-cta5.php
   Appears mid-list in plans-list.php after the 9th post.
   NOTE: .blog-cta-wrap, .blog-cta-box base styles are in blog.css.
         Only the --style3 modifier is defined here.
   ============================================================ */

.blog-cta-box.blog-cta-box--style3 {
	padding: 75px 94px;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
	position: relative;
	-ms-flex-wrap: nowrap;
	flex-wrap: nowrap;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
}

@media (max-width: 767px) {
	.blog-cta-box.blog-cta-box--style3 {
		-ms-flex-wrap: wrap;
		flex-wrap: wrap;
		padding: 30px 20px;
	}
}

.blog-cta-box.blog-cta-box--style3 .cta {
	-ms-flex-negative: 0;
	flex-shrink: 0;
}

@media (max-width: 767px) {
	.blog-cta-box.blog-cta-box--style3 .cta {
		width: 100%;
		padding-top: 15px;
	}
}

/* Decorative logo watermark at bottom-right of style3 box */
.blog-cta-box.blog-cta-box--style3::after {
	content: "";
	width: 148px;
	height: 184px;
	position: absolute;
	right: 0;
	bottom: 0;
	background: url('../images/logo-icon-bg.png') no-repeat;
	pointer-events: none;
}

/* ============================================================
   LOAD MORE BUTTON (plans listing page)
   Source: PlanAnalysisList.js — <button className="btn btn-outline-primary">Load More</button>
   The .btn and .btn-outline-primary styles come from Bootstrap 5 + main.css brand overrides.
   This block just ensures the wrapper has breathing room.
   ============================================================ */

#gp-plans-load-more-wrap {
	padding-top: 20px;
	padding-bottom: 40px;
}

#gp-plans-load-more.loading {
	opacity: 0.6;
	pointer-events: none;
}

/* ============================================================
   BLOG-CTA5 mid-list banner (plans listing)
   Source: PlanAnalysisList.js — <BlogCta5 title="Need help in planning your home?" />
   The BlogCta5 component shares .blog-cta-wrap styles with BlogCta in blog.css.
   Only the title override is needed here.
   ============================================================ */

.gp-blog-cta5 .blog-cta-title,
.gp-blog-cta5 .title {
	/* Override if BlogCta5 has a distinct title style vs BlogCta */
	/* TODO: Verify BlogCta5 markup in src/components/BlogCta/BlogCta5.js */
}

/* ============================================================
   BLOG-CTA OVERLAP FIX (plans-analysis page)
   blog-cta-box normally uses margin-top:-88px to overlap the section
   above it. On this page that causes it to cover Nearby Professionals.
   Cancel the negative margin so the section sits below, not on top of it.
   ============================================================ */

.quick-link-cta-wrap .blog-cta-box {
	margin-top: 0;
}

@media (max-width: 767px) {
	.quick-link-cta-wrap .blog-cta-box {
		margin-top: 0;
	}
	.page-id-198428 .banner-wrap .banner-content .banner-title h2.h1 a{
	font-size: 28px;
}
}

.page-id-198428 .banner-wrap .banner-content .cta{
	padding-top: 0;
}
.page-id-198428 .home-banner-wrap .banner-content{
	padding-bottom: 0;
}
.page-id-198428  .home-banner-wrap.home-banner-wrap--boxed .other_banner_inr_sec{
	left: 0;
}
.page-id-198428 .banner-wrap .banner-content .banner-title {
	padding-bottom: 0;
}
.page-id-198428 .banner-wrap .banner-content .banner-title  a{
	font-size: 42px;
    line-height: 115%;
    font-weight: 400;
    margin-bottom: 0;
}
.page-id-198428  .material-exhibition-wrap{
background: transparent;
}
.banner-wrap .banner-img {
	object-fit: inherit;
}