/*
 * calculator.css
 *
 * Converted from:
 *   frontend-nextjs/src/views/pages/calculator/CalculatorContent/_calculator-content.scss
 *   frontend-nextjs/src/views/pages/CalculatorsSearch/_calculator-list.scss
 *   frontend-nextjs/src/views/pages/CalculatorsSearch/_calculator-form.scss
 *   frontend-nextjs/src/assets/scss/_base.scss              (.row.gap-24, .primary-bg-light)
 *   frontend-nextjs/src/views/pages/More/_exclusive-page.scss (.exclusive-banner)
 *
 * Used by: single-calculator.php (/calculators/:slug/)
 * Generated by Claude Code Phase 2B — Developer review required
 *
 * Load order: bootstrap → gharpedia-main → gharpedia-blog → gharpedia-calculator
 *
 * Variables resolved:
 *   $color_shark   → #232528
 *   $primary       → #e78125
 *   $white         → #ffffff
 *   $color_raven   → #7b7c7e
 *   $color_gray    → #838383
 *   $secondary     → #19263a
 *   $color_nile_blue → #173055
 *   $color_fantasy → #f9f5f2
 *   $danger        → #f74641
 *
 * Sections:
 *   1.  Exclusive Banner          (.exclusive-banner)
 *   2.  Calculator Content Wrap   (.calculator-content-wrap)
 *   3.  Calculator Info           (.calculator-info)
 *   4.  Calculator Content Box    (.calculator-content-box)
 *   5.  Likely View               (.likely-view-wrap)
 *   6.  Calculator List Sidebar   (.calculator-list-wrap)
 *   7.  Search Box                (.search-box)
 *   8.  Calculator List Items     (.calculator-list, .calculator-list__item)
 *   9.  Calculator Form           (.calculator-form-wrap)
 *   10. Cost Info                 (.cost-info, .cost-list, .cost-bookmark)
 *   11. Form Error                (.form-error)
 *   12. Blog CTA margin reset     (.blog-cta-box--style2)
 *   13. Row gap-24                (.row.gap-24)
 *   14. Primary BG Light          (.primary-bg-light)
 */


/* ── 1. EXCLUSIVE BANNER ──────────────────────────────────────────────────────
   Source: _exclusive-page.scss → .exclusive-banner
   React:  <div className="exclusive-banner"> title + excerpt banner
*/
.exclusive-banner {
	padding: 66px 0 108px;
	text-align: center;
}

.exclusive-banner p {
	max-width: 636px;
	margin: 0 auto;
	font-size: 16px;
	line-height: 150%;
	padding-top: 20px;
	color: #7b7c7e; /* $color_raven */
}

@media (max-width: 767px) {
	.exclusive-banner .h1 {
		font-size: 40px;
	}
}


/* ── 2. CALCULATOR CONTENT WRAP ───────────────────────────────────────────────
   Source: _calculator-content.scss → .calculator-content-wrap
   React:  <div className="calculator-content-wrap">
*/
.calculator-content-wrap {
	padding-bottom: 60px;
}

.calculator-content-wrap h4 {
	font-size: 16px;
	font-weight: 500;
	color: #232528; /* $color_shark */
}


/* ── 3. CALCULATOR INFO ───────────────────────────────────────────────────────
   Source: _calculator-content.scss → .calculator-info
   React:  <div className="calculator-info"> article content + video
*/
.calculator-info {
	font-size: 18px;
	line-height: 160%;
	color: #7b7c7e; /* $color_raven */
	padding-bottom: 30px;
}

.calculator-info h4 {
	padding-bottom: 7px;
}

.calculator-info p {
	margin-bottom: 7px;
}

/* Iframe inside content (e.g. YouTube embed) */
.calculator-info .iframe,
.calculator-info iframe {
	max-width: 100%;
}


/* ── 4. CALCULATOR CONTENT BOX ────────────────────────────────────────────────
   Source: _calculator-content.scss → .calculator-content-box
   React:  <div className="calculator-content-box">
*/
.calculator-content-box {
	padding: 40px;
	border: 1px solid rgba(123, 124, 126, 0.4); /* rgba($color_raven, 0.4) */
	border-radius: 7px;
}

@media (max-width: 991px) {
	.calculator-content-box {
		padding: 20px 15px;
	}
}


/* ── 5. LIKELY VIEW ───────────────────────────────────────────────────────────
   Source: _calculator-content.scss → .likely-view-wrap
   React:  <div className="likely-view-wrap"> shown after selecting a radio category
*/
.likely-view-wrap {
	padding-bottom: 40px;
}

.likely-view-wrap h4 {
	padding-bottom: 14px;
}

.likely-view-wrap .img img {
	width: 100%;
	border-radius: 4px;
}


/* ── 6. CALCULATOR LIST SIDEBAR ───────────────────────────────────────────────
   Source: _calculator-list.scss → .calculator-list-wrap
   React:  <div className="calculator-list-wrap"> (left col-lg-4)
*/
.calculator-list-wrap {
	max-width: 318px;
}

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

/* Mobile toggle button — hidden on desktop */
.calculator-list-wrap .filter-btn {
	background: transparent;
	border: 0;
	color: #e78125; /* $primary */
	font-size: 14px;
	font-weight: 500;
	border-bottom: 2px solid #e78125;
	margin-bottom: 20px;
	cursor: pointer;
	display: none; /* hidden on desktop */
}

.calculator-list-wrap .filter-btn .filter-icon {
	font-size: 20px;
	margin-right: 6px;
	vertical-align: middle;
}

@media (max-width: 991px) {
	.calculator-list-wrap .filter-btn {
		display: inline-flex;
		align-items: center;
	}
}

/* Collapse: always visible on desktop, toggled by JS on mobile */
.calculator-list-box {
	display: none; /* collapsed by default on mobile */
}

.calculator-list-box.show {
	display: block;
}

@media (min-width: 992px) {
	/* Always visible on desktop regardless of JS state */
	.calculator-list-box {
		display: block !important;
	}
}


/* ── 7. SEARCH BOX ────────────────────────────────────────────────────────────
   Source: _calculator-list.scss → .search-box .form-group
*/
.calculator-list-wrap .search-box .form-group {
	position: relative;
	padding-bottom: 18px;
}

.calculator-list-wrap .search-box .form-group .search-icon {
	position: absolute;
	left: 0;
	top: 0;
	width: 35px;
	height: 56px;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	font-size: 18px;
	color: #838383; /* $color_gray */
	pointer-events: none;
}

.calculator-list-wrap .search-box .form-group .form-control {
	height: 56px;
	padding-left: 46px;
	    font-size: 15px;
    line-height: 1.3;
    color: #19263a;
}


/* ── 8. CALCULATOR LIST ITEMS ─────────────────────────────────────────────────
   Source: _calculator-list.scss → .calculator-list ul li, .calculator-list__item
*/
.calculator-list .calculator-list-items {
	list-style: none;
	padding: 0;
	margin: 0;
}

.calculator-list .calculator-list-items li {
	padding-bottom: 2px;
}

.calculator-list__item {
	display: block;
	width: 100%;
	padding: 16px 24px;
	font-size: 18px;
	line-height: 160%;
	color: #232528; /* $color_shark */
	background: transparent;
	border: 0;
	text-align: left;
	border-radius: 4px;
	transition: all 0.3s ease-in-out;
	text-decoration: none;
}

.calculator-list__item:hover {
	color: #e78125; /* $primary */
}

.calculator-list__item.active {
	background: #e78125; /* $primary */
	color: #ffffff;
	font-weight: 600;
}


/* ── 9. CALCULATOR FORM ───────────────────────────────────────────────────────
   Source: _calculator-form.scss → .calculator-form-wrap
   React:  <div className="calculator-form-wrap"> inside .calculator-content-box
*/
/* .calculator-form-wrap {
	padding-bottom: 40px;
} */
.calculator-form-wrap .form-group{
	padding-bottom: 18px;
}
.calculator-form-wrap h3 {
	font-size: 24px;
	line-height: 160%;
	font-weight: 600;
	color: #232528; /* $color_shark */
	padding-bottom: 40px;
}

/* Unit selector label */
.calculator-form-wrap .form-label.label-lg {
font-size: 14px;
    color: #19263a;
    margin-bottom: 6px;
}

/* Native <select> replaces react-select */
.calculator-form-wrap .gp-unit-select,.calculator-form-wrap .gp-calc-input {
padding: 10px 12px;
    border: 1px solid #dee2e6;
    border-radius: 4px;
    font-size: 14px;
    width: 100%;
    cursor: pointer;
	height: 45px;
}

.calculator-form-wrap .gp-calc-radio-wrap {
	gap: 10px 18px;
	padding-bottom: 18px;
}

.calculator-form-wrap .gp-calc-radio-wrap .form-check-inline {
	align-items: center;
	display: inline-flex;
	margin-right: 0;
	min-height: 18px;
}

.calculator-form-wrap .gp-calc-radio-wrap .form-check-input {
	-webkit-appearance: none;
	appearance: none;
	background-color: #fff;
	border: 2px solid #7b7c7e;
	border-radius: 50%;
	box-shadow: none;
	cursor: pointer;
	flex: 0 0 auto;
	height: 18px;
	margin-top: 0;
	width: 18px;
}

.calculator-form-wrap .gp-calc-radio-wrap .form-check-input:checked {
	background-color: #fff;
	border-color: #f58220;
	box-shadow: inset 0 0 0 4px #fff, inset 0 0 0 9px #f58220;
}

.calculator-form-wrap .gp-calc-radio-wrap .form-check-input:focus {
	box-shadow: 0 0 0 3px rgba(245, 130, 32, 0.2);
	outline: 0;
}

.calculator-form-wrap .gp-calc-radio-wrap .form-check-input:checked:focus {
	box-shadow: inset 0 0 0 4px #fff, inset 0 0 0 9px #f58220, 0 0 0 3px rgba(245, 130, 32, 0.2);
}

.calculator-form-wrap .gp-calc-radio-wrap .form-check-label {
	color: #19263a;
	cursor: pointer;
	font-size: 14px;
	line-height: 18px;
	margin-left: 6px;
}

/* Form footer — Calculate + Reset buttons */
.calculator-form-wrap .form-footer {
	padding-top: 8px;
}


/* ── 10. COST INFO ────────────────────────────────────────────────────────────
   Source: _calculator-form.scss → .cost-info, .cost-list, .cost-bookmark
   #gp-calc-cost-info is hidden by default; JS adds .is-visible to show it.
   ID selector (0-1-0-0) beats the class rule (0-0-1-0) so hidden wins initially.
*/
#gp-calc-cost-info {
	display: none;
}

.cost-info {
	padding-top: 50px;
	display: flex;
	justify-content: space-between;
}

#gp-calc-cost-info.is-visible {
	display: flex;
}

@media (max-width: 767px) {
	.cost-info,
	#gp-calc-cost-info.is-visible {
		display: block;
	}
}

.cost-list {
	width: 100%;
	padding-right: 20px;
}

.cost-list ul {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-wrap: wrap;
}

.cost-list ul li span#gp-calc-result-total {
	font-size: 28px;
	color: #19263a; /* $secondary */
	font-weight: 500;
}

.cost-list ul li:not(:last-child) {
	margin-right: 48px;
}

@media (max-width: 991px) {
	.cost-list ul li:not(:last-child) {
		margin-right: 20px;
	}
}

@media (max-width: 767px) {
	.cost-list ul li {
		font-size: 18px;
		margin-bottom: 15px;
	}
	.cost-list ul li:not(:last-child) {
		margin-right: 15px;
	}
}

.cost-list ul li span {
	display: block;
	font-size: 16px;
	font-weight: 400;
	color: #173055; /* $color_nile_blue */
	padding-bottom: 2px;
}

@media (max-width: 767px) {
	.cost-list ul li span {
		font-size: 14px;
	}
}

.cost-bookmark {
	flex-shrink: 0;
}

/* Save This Calculation button */
.cost-bookmark .bookmark {
	background: transparent;
	border: 0;
	color: #e78125; /* $primary */
	font-size: 14px;
	font-weight: 500;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 0;
}

.cost-bookmark .bookmark svg,
.cost-bookmark .bookmark .bookmark-icon {
	font-size: 18px;
}

.cost-bookmark .bookmark.active {
	color: #e78125;
}


/* ── 11. FORM ERROR ───────────────────────────────────────────────────────────
   Source: _calculator-form.scss → .form-error
*/
.form-error {
	font-size: 12px;
	font-weight: 500;
	color: #f74641; /* $danger */
	padding-top: 6px;
	display: none; /* shown by JS when validation fails */
}


/* ── 12. BLOG CTA MARGIN RESET ────────────────────────────────────────────────
   Source: _calculator-content.scss → .blog-cta-box.blog-cta-box--style2 { margin-top:0 }
   Same override as in calculator-list.css — prevents negative-margin overlap.
*/
.blog-cta-box.blog-cta-box--style2 {
	margin-top: 0 !important;
}


/* ── 13. ROW GAP-24 ───────────────────────────────────────────────────────────
   Source: _base.scss → .row.gap-24
   Used in Related Blogs grid on the calculator detail page.
*/
.row.gap-24 {
	margin-left: -12px;
	margin-right: -12px;
}

.row.gap-24 [class*="col-"] {
	padding-left: 12px;
	padding-right: 12px;
}

@media (max-width: 767px) {
	.row.gap-24 {
		margin-left: -10px;
		margin-right: -10px;
	}
	.row.gap-24 [class*="col-"] {
		padding-left: 10px;
		padding-right: 10px;
	}
}


/* ── 14. PRIMARY BG LIGHT ─────────────────────────────────────────────────────
   Source: _base.scss → .primary-bg-light { background: $color_fantasy }
   Used by Related Blogs section: home-recent-blog-wrap.primary-bg-light
   $color_fantasy = #f9f5f2
*/
.primary-bg-light {
	background: #f9f5f2; /* $color_fantasy */
}


/* ── 15. LIKELY VIEW ──────────────────────────────────────────────────────────
   Source: _calculator-content.scss → .likely-view-wrap
   Rendered by JS (calculator.js → updateLikelyView) into #gp-likely-view
*/
.likely-view-wrap {
	padding: 40px 0;
}

.likely-view-wrap h4 {
	padding-bottom: 14px;
}

.likely-view-wrap .img img {
	width: 100%;
	border-radius: 4px;
}


/* ── 16. COST CALCULATION TABLES ──────────────────────────────────────────────
   Source: _cost-calculation.scss → .cost-calculation-table
   Rendered by JS (calculator.js → renderCostTables / buildTable) into #gp-calc-table-wrap
*/
.cost-calculation-table {
	padding-bottom: 40px;
}

.cost-calculation-table h4 {
	padding-bottom: 14px;
}

.cost-calculation-table .table th {
	border: 0;
	font-size: 12px;
	line-height: 150%;
	font-weight: 500;
	padding: 13px 20px;
	color: #7b7c7e;
	vertical-align: top;
}

.cost-calculation-table .table td {
	padding: 20px;
	font-size: 16px;
	color: #232528;
	border: 0;
}

.cost-calculation-table .table tfoot td {
	color: #fff;
	background: #173055;
}

.cost-calculation-table .table tfoot td:first-child {
	border-radius: 4px 0 0 4px;
}

.cost-calculation-table .table tfoot td:last-child {
	border-radius: 0 4px 4px 0;
}

.cost-calculation-table .table .nowrap {
	white-space: nowrap;
}


/* ── 17. ASSUMPTIONS LIST ─────────────────────────────────────────────────────
   Source: _assumptions.scss → .assumptions-list
   Rendered by JS (calculator.js → updateAssumptions) into #gp-assumptions
*/
.assumptions-list {
	padding-bottom: 40px;
}

.assumptions-list h4 {
	padding-bottom: 14px;
}

.assumptions-list ul {
	list-style: none;
	padding: 0;
	margin: 0;
}

.assumptions-list ul li {
	display: flex;
	padding-bottom: 24px;
}

.assumptions-list ul li:last-child {
	padding-bottom: 0;
}

.assumptions-list ul li .img {
	width: 149px;
	flex-shrink: 0;
}

.assumptions-list ul li .img img {
	border-radius: 4px;
}

.assumptions-list ul li .txt {
	width: 100%;
	padding-left: 30px;
}

.assumptions-list ul li .txt h5 {
	font-size: 16px;
	font-weight: 500;
	color: #232528;
	padding-bottom: 6px;
}

.assumptions-list ul li .txt p {
	font-size: 18px;
	line-height: 160%;
	color: #7b7c7e;
	margin-bottom: 0;
}

@media (max-width: 767px) {
	.assumptions-list ul li {
		flex-wrap: wrap;
	}

	.assumptions-list ul li .img {
		width: 100%;
		padding-bottom: 15px;
	}

	.assumptions-list ul li .img img {
		width: 100%;
	}

	.assumptions-list ul li .txt {
		padding-left: 0;
	}
}
.gp-calc-radio-wrap .form-check-label{
font-size: 16px;
    color: #7b7c7e;
}