/* ==========================================================================
   VI Configurator — Veranda brand overrides
   Scoped to .vi-acindex-scope
   ========================================================================== */

/* ---------- Tokens ---------- */
.vi-acindex-scope {
	--vi-primary: #004346;
	--vi-primary-hover: #00585c;
	--vi-primary-active: #003335;
	--vi-secondary: #d1603d;
	--vi-secondary-hover: #b8502f;
	--vi-tertiary: #f0ede5;
	--vi-foreground: #1a1a1a;
	--vi-muted: #6b7280;
	--vi-border: #d1d5db;
	--vi-radius: 6px;
	--vi-font-size-sm: 13px;
	--vi-font-size-base: 14px;
	--vi-field-height: 40px;
	--vi-surface: #fff;
	--vi-surface-muted: #f8f6f0;
	--vi-shadow-soft: 0 10px 24px rgba(26, 26, 26, 0.08);
}

body.vi-acindex-bootbox-open {
	overflow: hidden;
}

body.vi-acindex-bootbox-open .modal-backdrop {
	position: fixed;
	inset: 0;
	z-index: 1040;
	background-color: #000;
}

body.vi-acindex-bootbox-open .modal-backdrop.fade {
	opacity: 0;
	pointer-events: none;
}

body.vi-acindex-bootbox-open .modal-backdrop.show {
	opacity: 0.5;
	pointer-events: auto;
}

/* ---------- Main tab buttons (Tilpass, Vegger, Tilvalg, Forhandler) ---------- */
.vi-acindex-scope .ac-model-main-tab-button {
	background: var(--vi-tertiary);
	color: var(--vi-foreground);
	border: 1px solid var(--vi-border);
	border-radius: var(--vi-radius);
	padding: 8px 16px;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	transition:
		background 0.15s,
		color 0.15s,
		border-color 0.15s;
	margin-right: 4px;
	margin-bottom: 4px;
}

.vi-acindex-scope .ac-model-main-tab-button:hover {
	background: var(--vi-primary);
	color: #fff;
	border-color: var(--vi-primary);
}

.vi-acindex-scope .ac-model-main-tab-button.btn-danger,
.vi-acindex-scope .ac-model-main-tab-button:active,
.vi-acindex-scope .ac-model-main-tab-button.active {
	background: var(--vi-primary);
	color: #fff;
	border-color: var(--vi-primary);
}

/* ---------- Bootstrap btn overrides ---------- */
.vi-acindex-scope .btn-danger {
	background: var(--vi-secondary);
	border-color: var(--vi-secondary);
	color: #fff;
	border-radius: var(--vi-radius);
}

.vi-acindex-scope .btn-danger:hover,
.vi-acindex-scope .btn-danger:focus {
	background: var(--vi-secondary-hover);
	border-color: var(--vi-secondary-hover);
	color: #fff;
}

.vi-acindex-scope .btn-info {
	background: var(--vi-primary);
	border-color: var(--vi-primary);
	color: #fff;
	border-radius: var(--vi-radius);
}

.vi-acindex-scope .btn-info:hover,
.vi-acindex-scope .btn-info:focus {
	background: var(--vi-primary-hover);
	border-color: var(--vi-primary-hover);
	color: #fff;
}

.vi-acindex-scope .btn {
	border-radius: var(--vi-radius);
	font-size: var(--vi-font-size-sm);
	font-weight: 600;
	line-height: 1.35;
	transition:
		background 0.15s,
		border-color 0.15s,
		box-shadow 0.15s;
}

.vi-acindex-scope .btn:focus {
	box-shadow: 0 0 0 3px rgba(0, 67, 70, 0.25);
}

/* ---------- Set store price buttons (Bruk denne prisen) ---------- */
.vi-acindex-scope .set-store-price {
	background: var(--vi-secondary);
	border-color: var(--vi-secondary);
	color: #fff;
	border-radius: var(--vi-radius);
	font-weight: 600;
}

.vi-acindex-scope .set-store-price:hover {
	background: var(--vi-secondary-hover);
	border-color: var(--vi-secondary-hover);
}

/* ---------- Color choose button (Fargevalg) ---------- */
.vi-acindex-scope [class*='viac-color-choose-button'] {
	border-radius: var(--vi-radius);
}

.vi-acindex-scope [class*='viac-color-choose-button'].btn-info {
	background: var(--vi-primary);
	border-color: var(--vi-primary);
}

/* ---------- Info / help buttons (glyphicon-info-sign) ---------- */
.vi-acindex-scope .dialog-information-button,
.vi-acindex-scope .dimension-information-button {
	background: transparent;
	border: none;
	color: var(--vi-primary);
	padding: 4px;
	width: 32px;
	height: 32px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 999px;
	cursor: pointer;
	transition:
		background 0.15s,
		color 0.15s;
}

.vi-acindex-scope .dialog-information-button:hover,
.vi-acindex-scope .dimension-information-button:hover {
	background: rgba(0, 67, 70, 0.08);
	color: var(--vi-primary-hover);
}

.vi-acindex-scope .dialog-information-button:focus,
.vi-acindex-scope .dimension-information-button:focus {
	outline: none;
	box-shadow: 0 0 0 3px rgba(0, 67, 70, 0.15);
}

.vi-acindex-scope .large-glyphicon {
	font-size: 18px;
}

/* ---------- Video instruction button ---------- */
.vi-acindex-scope .btn-video-instructions,
.vi-acindex-scope .btn-video-instructions-reseller {
	background: transparent;
	border: 1px solid var(--vi-border);
	color: var(--vi-foreground);
	border-radius: var(--vi-radius);
	font-size: 12px;
	padding: 6px 10px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	min-height: 40px;
	line-height: 1.4;
	text-align: center;
	white-space: normal;
	margin-top: 0;
}

.vi-acindex-scope .btn-video-instructions:hover,
	.vi-acindex-scope .btn-video-instructions:focus,
.vi-acindex-scope .btn-video-instructions-reseller:hover,
.vi-acindex-scope .btn-video-instructions-reseller:focus {
	background: var(--vi-primary);
	border-color: var(--vi-primary);
	color: #fff;
	margin-top: 0;
}

/* ---------- Price display ---------- */
.vi-acindex-scope .vi-panel-top-price {
	font-size: 24px;
	font-weight: 700;
	color: var(--vi-foreground);
}

/* ---------- Wall accordion panels ---------- */
.vi-acindex-scope .panel-default {
	border-color: var(--vi-border);
	border-radius: var(--vi-radius);
	margin-bottom: 8px;
}

.vi-acindex-scope .vi-panel-heading-wall {
	background: var(--vi-tertiary);
	border-color: var(--vi-border);
}

.vi-acindex-scope .wall-button {
	color: var(--vi-foreground);
	font-weight: 600;
	text-decoration: none;
}

.vi-acindex-scope .wall-button:hover {
	color: var(--vi-primary);
	text-decoration: none;
}

/* ---------- Add product button (+) ---------- */
.vi-acindex-scope .asset-configuration-product-add {
	background: var(--vi-primary);
	border-color: var(--vi-primary);
	color: #fff;
	border-radius: var(--vi-radius);
}

.vi-acindex-scope .asset-configuration-product-add:hover {
	background: var(--vi-primary-hover);
	border-color: var(--vi-primary-hover);
}

/* ---------- Form inputs ---------- */
.vi-acindex-scope .dimension-input,
.vi-acindex-scope .dialog-value[type='text'],
.vi-acindex-scope input.dialog-value:not([type='radio']):not([type='checkbox']),
.vi-acindex-scope .asset-configuration-name-input,
.vi-acindex-scope input.extras-input,
.vi-acindex-scope .customer-info-name,
.vi-acindex-scope .customer-info-company,
.vi-acindex-scope .customer-info-email,
.vi-acindex-scope .customer-info-cell-phone,
.vi-acindex-scope .customer-info-product-count {
	border: 1px solid var(--vi-border);
	border-radius: var(--vi-radius);
	padding: 6px 10px;
	font-size: var(--vi-font-size-base);
	color: var(--vi-foreground);
	line-height: 1.4;
	min-height: var(--vi-field-height);
	background: #fff;
	transition: border-color 0.15s;
}

.vi-acindex-scope .dimension-input:focus,
.vi-acindex-scope input.dialog-value:focus,
.vi-acindex-scope .asset-configuration-name-input:focus,
.vi-acindex-scope input.extras-input:focus {
	border-color: var(--vi-primary);
	outline: none;
	box-shadow: 0 0 0 3px rgba(0, 67, 70, 0.15);
}

.vi-acindex-scope .asset-configuration-name-input {
	width: 100%;
	max-width: 360px;
	display: block;
}

/* ---------- Select dropdowns ---------- */
.vi-acindex-scope select.dimension-input {
	appearance: auto;
	padding: 6px 10px;
	border: 1px solid var(--vi-border);
	border-radius: var(--vi-radius);
	background: #fff;
	max-width: 100%;
}

/* ---------- Labels ---------- */
.vi-acindex-scope .dialog-item-host-base label,
.vi-acindex-scope .dialog-item-host-extra label,
.vi-acindex-scope .dialog-item-host-factory label,
.vi-acindex-scope .dialog-item-host-reseller label,
.vi-acindex-scope .dimension-host label {
	font-weight: 600;
	color: var(--vi-foreground);
	font-size: var(--vi-font-size-base);
	display: inline-block;
	margin-bottom: 6px;
}

/* ---------- Dimension tab normalization ---------- */
.vi-acindex-scope #dimensionTab,
.vi-acindex-scope #dimensionTab .dimension-host,
.vi-acindex-scope #dimensionTab .dialog-host,
.vi-acindex-scope #dimensionTab .dialog-item-host-base {
	font-size: var(--vi-font-size-base);
	line-height: 1.5;
	color: var(--vi-foreground);
}

.vi-acindex-scope #dimensionTab .dimension-host > .row,
.vi-acindex-scope #dimensionTab .dialog-item-host-base > .row {
	align-items: flex-start;
	margin-bottom: 12px;
}

.vi-acindex-scope #dimensionTab .dimension-host > .row:last-child,
.vi-acindex-scope #dimensionTab .dialog-item-host-base > .row:last-child {
	margin-bottom: 0;
}

.vi-acindex-scope #dimensionTab .dimension-host [class*='col-'],
.vi-acindex-scope #dimensionTab .dialog-item-host-base [class*='col-'],
.vi-acindex-scope #dimensionTab [class*='dialog-item-value-host'],
.vi-acindex-scope #dimensionTab [class*='viac-choices-group'],
.vi-acindex-scope #dimensionTab [class*='viac-price-host'] {
	font-size: var(--vi-font-size-base);
	color: var(--vi-foreground);
}

.vi-acindex-scope #dimensionTab [class*='viac-choices-group'] {
	line-height: 1.75;
}

.vi-acindex-scope #dimensionTab input[type='radio'],
.vi-acindex-scope #dimensionTab input[type='checkbox'] {
	margin-right: 8px;
	vertical-align: middle;
}

.vi-acindex-scope #dimensionTab .dimension-constraint,
.vi-acindex-scope #dimensionTab .warning,
.vi-acindex-scope #dimensionTab .error,
.vi-acindex-scope #dimensionTab .dialog-item-error-host,
.vi-acindex-scope #dimensionTab .check-constraint-results,
.vi-acindex-scope #dimensionTab .check-constraint-results-dimension {
	font-size: var(--vi-font-size-sm);
	line-height: 1.5;
}

.vi-acindex-scope #dimensionTab .dimension-constraint {
	color: var(--vi-muted);
	display: inline-block;
	margin-top: 6px;
}

.vi-acindex-scope #dimensionTab .warning,
.vi-acindex-scope #dimensionTab .error,
.vi-acindex-scope #dimensionTab .dialog-item-error-host,
.vi-acindex-scope #dimensionTab .check-constraint-results,
.vi-acindex-scope #dimensionTab .check-constraint-results-dimension {
	margin-top: 6px;
}

.vi-acindex-scope #dimensionTab .dimension-info-bottom h5,
.vi-acindex-scope #dimensionTab .sun-porch-bearing-warnings {
	font-size: var(--vi-font-size-sm);
	line-height: 1.6;
}

/* ---------- Nav tabs (hidden but styled if shown) ---------- */
.vi-acindex-scope .nav-tabs > li > a {
	color: var(--vi-muted);
	border-radius: var(--vi-radius) var(--vi-radius) 0 0;
}

.vi-acindex-scope .nav-tabs > li.active > a,
.vi-acindex-scope .nav-tabs > li.active > a:hover {
	color: var(--vi-primary);
	border-bottom-color: var(--vi-primary);
}

/* ---------- Warnings ---------- */
.vi-acindex-scope .sun-porch-bearing-warnings {
	background: var(--vi-tertiary);
	border-left: 3px solid var(--vi-secondary);
	padding: 12px 16px;
	border-radius: 0 var(--vi-radius) var(--vi-radius) 0;
	margin-top: 16px;
	font-size: 13px;
	line-height: 1.6;
	color: var(--vi-foreground);
}

/* ---------- Price detail table ---------- */
.vi-acindex-scope .price-detail-host table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	min-width: 680px;
}

.vi-acindex-scope .price-detail-host th {
	color: var(--vi-foreground);
	font-weight: 600;
	font-size: 13px;
	padding: 8px 12px;
	border-bottom: 2px solid var(--vi-primary);
	background: var(--vi-surface-muted);
	vertical-align: top;
}

.vi-acindex-scope .price-detail-host td {
	padding: 8px 12px;
	border-bottom: 1px solid var(--vi-border);
	font-size: 14px;
	vertical-align: top;
}

/* ---------- Quote type radios ---------- */
.vi-acindex-scope #quoteType .radio label {
	font-weight: 400;
	color: var(--vi-foreground);
}

/* ---------- Chosen color box ---------- */
.vi-acindex-scope .choosen-bounding-box {
	border: 1px solid var(--vi-border);
	border-radius: var(--vi-radius);
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 12px 14px;
	min-height: 76px;
	background: var(--vi-surface-muted);
}

.vi-acindex-scope .choose-text-box {
	font-size: 13px;
	color: var(--vi-foreground);
	font-weight: 500;
	line-height: 1.5;
	flex: 1;
}

.vi-acindex-scope .choosen-color-box {
	display: inline-block;
	width: 44px !important;
	min-width: 44px;
	height: 44px;
	border-radius: 999px;
	border: 1px solid rgba(26, 26, 26, 0.12);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.5);
}

/* ---------- 3D viewer container ---------- */
.vi-acindex-scope #threeDContainer {
	border: 1px solid var(--vi-border);
	border-radius: var(--vi-radius);
	overflow: hidden;
}

/* ---------- Right-side panel shell ---------- */
.vi-acindex-scope .vi-sunporch-right-side-panel {
	font-size: var(--vi-font-size-base);
	line-height: 1.5;
	color: var(--vi-foreground);
}

.vi-acindex-scope .vi-sunporch-right-side-panel .tab-content {
	min-height: 220px;
}

.vi-acindex-scope .config-tab-pane {
	padding-top: 8px;
	font-size: var(--vi-font-size-base);
	line-height: 1.5;
}

.vi-acindex-scope .config-tab-pane > .container,
.vi-acindex-scope .config-tab-pane > .row > .col > .container,
.vi-acindex-scope .config-tab-pane > .row > .col > .dialog-host > .container {
	max-width: 100%;
}

.vi-acindex-scope .main-tab-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 16px;
}

.vi-acindex-scope .main-tab-buttons > span {
	display: flex;
}

.vi-acindex-scope .main-tab-buttons .ac-model-main-tab-button {
	margin: 0;
	min-height: 40px;
}

.vi-acindex-scope .config-tabs {
	margin-bottom: 0;
	border-bottom: 0;
}

.vi-acindex-scope .information-for-user-host:not(.hidden),
.vi-acindex-scope .dimension-info-top:not(:empty),
.vi-acindex-scope .check-constraint-results:not(.hidden),
.vi-acindex-scope .check-constraints-warning-item-host:not(:empty) {
	background: var(--vi-surface-muted);
	border: 1px solid var(--vi-border);
	border-radius: var(--vi-radius);
	padding: 12px 14px;
	margin-bottom: 14px;
}

/* ---------- Dialog and configuration cards ---------- */
.vi-acindex-scope .dialog-item-host-base,
.vi-acindex-scope .dialog-item-host-extra,
.vi-acindex-scope .dialog-item-host-factory,
.vi-acindex-scope .dialog-item-host-reseller,
.vi-acindex-scope #assetConfigurationExtraHost,
.vi-acindex-scope #assetConfigurationProductHost,
.vi-acindex-scope .customer-info-controls {
	background: var(--vi-surface);
	border: 1px solid var(--vi-border);
	border-radius: calc(var(--vi-radius) + 2px);
	box-shadow: 0 1px 2px rgba(26, 26, 26, 0.04);
	padding: 16px 18px;
}

.vi-acindex-scope .dialog-item-host-base,
.vi-acindex-scope .dialog-item-host-extra,
.vi-acindex-scope .dialog-item-host-factory,
.vi-acindex-scope .dialog-item-host-reseller,
.vi-acindex-scope #assetConfigurationExtraHost,
.vi-acindex-scope .customer-info-controls,
.vi-acindex-scope #assetConfigurationProductHost {
	margin-top: 12px;
}

.vi-acindex-scope .dialog-item-host-base > [class*='dialog-summary-item-'],
.vi-acindex-scope .dialog-item-host-extra > [class*='dialog-summary-item-'],
.vi-acindex-scope .dialog-item-host-factory > [class*='dialog-summary-item-'],
.vi-acindex-scope .dialog-item-host-reseller > [class*='dialog-summary-item-'] {
	margin-bottom: 12px !important;
}

.vi-acindex-scope [class*='viac-price-host'],
.vi-acindex-scope [class*='dork-viac-price-host-'] {
	font-size: var(--vi-font-size-sm);
	font-weight: 600;
	line-height: 1.5;
	color: var(--vi-primary);
	text-align: right;
	min-height: 20px;
}

.vi-acindex-scope [class*='dialog-item-value-host-large-'] {
	font-size: var(--vi-font-size-sm);
	color: var(--vi-muted);
	line-height: 1.5;
}

.vi-acindex-scope [class*='viac-color-control-finish-'] {
	font-size: var(--vi-font-size-sm) !important;
	line-height: 1.5;
	color: var(--vi-muted);
	margin-top: 8px;
}

.vi-acindex-scope [class*='color-control-surface-'] h4 {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--vi-muted);
	margin: 16px 0 8px;
}

/* ---------- Wall configurator ---------- */
.vi-acindex-scope .walls-tab,
.vi-acindex-scope .factory-tab,
.vi-acindex-scope .price-tab,
.vi-acindex-scope .summary-tab {
	font-size: var(--vi-font-size-base);
	line-height: 1.5;
}

.vi-acindex-scope .panel-group {
	margin-bottom: 0;
}

.vi-acindex-scope .panel-title {
	font-size: 16px;
	font-weight: 600;
	margin: 0;
}

.vi-acindex-scope .panel-body {
	padding: 16px 18px;
	background: var(--vi-surface);
}

.vi-acindex-scope .vi-collapse-wall,
.vi-acindex-scope [id^='toolboxHost'] {
	font-size: var(--vi-font-size-base);
	color: var(--vi-foreground);
}

.vi-acindex-scope .asset-configuration-product-item,
.vi-acindex-scope .asset-configuration-Extra-item {
	align-items: center;
	margin-bottom: 12px;
}

.vi-acindex-scope .configuration-tool,
.vi-acindex-scope .walls-tab .btn-group,
.vi-acindex-scope .price-tab > div:first-child {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 16px;
}

.vi-acindex-scope .draw-surface-tab .adhoc-help-button {
	background: var(--vi-surface-muted);
	border: 1px solid var(--vi-border);
	border-radius: 999px;
	width: 36px;
	height: 36px;
	padding: 0;
	color: var(--vi-primary);
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.vi-acindex-scope .construction-instructions {
	margin-top: 12px;
	font-size: var(--vi-font-size-base);
	line-height: 1.6;
	color: var(--vi-foreground);
}

/* ---------- Price and reseller sections ---------- */
.vi-acindex-scope .price-tab-subcategory {
	margin-top: 14px;
}

.vi-acindex-scope .price-detail-host {
	overflow-x: auto;
	background: var(--vi-surface);
	border: 1px solid var(--vi-border);
	border-radius: calc(var(--vi-radius) + 2px);
	padding: 12px 14px;
}

.vi-acindex-scope .price-detail-host label,
.vi-acindex-scope .freight-warning,
.vi-acindex-scope .freight-info {
	font-size: var(--vi-font-size-sm);
	line-height: 1.6;
	margin-top: 8px;
	display: inline-block;
}

.vi-acindex-scope .price-tab .btn.btn-xl,
.vi-acindex-scope .price-tab .btn-video-instructions-reseller {
	min-height: 40px;
	padding: 8px 14px;
}

/* ---------- Customer info ---------- */
.vi-acindex-scope #customerInfoHostEdit table {
	width: 100% !important;
	max-width: none !important;
	border-collapse: separate;
	border-spacing: 0 10px;
}

.vi-acindex-scope #customerInfoHostEdit td {
	font-size: var(--vi-font-size-sm);
	line-height: 1.5;
	vertical-align: middle;
	padding-right: 12px;
}

.vi-acindex-scope #customerInfoHostEdit td:first-child {
	width: 32%;
	font-weight: 600;
	color: var(--vi-muted);
}

.vi-acindex-scope #customerInfoHostEdit td:last-child {
	width: 68%;
	padding-right: 0;
}

.vi-acindex-scope #customerInfoHostEdit input {
	width: 100%;
}

.vi-acindex-scope .customer-info-controls .form-group {
	margin: 16px 0 12px;
}

.vi-acindex-scope #quoteType .radio {
	margin-bottom: 8px;
}

.vi-acindex-scope #quoteType .radio:last-child {
	margin-bottom: 0;
}

.vi-acindex-scope .report-with-price {
	max-width: 100%;
}

/* ---------- Extras and product tools ---------- */
.vi-acindex-scope #assetConfigurationExtraHost .container,
.vi-acindex-scope #assetConfigurationProductHost .container {
	max-width: 100%;
	padding-left: 0;
	padding-right: 0;
}

.vi-acindex-scope #assetConfigurationExtrasContainer > .row:first-child {
	font-size: var(--vi-font-size-sm);
	font-weight: 700;
	color: var(--vi-muted);
	margin-bottom: 8px;
}

.vi-acindex-scope .extras-price {
	text-align: right;
}

.vi-acindex-scope .construction-element-properties {
	border: 1px solid var(--vi-border);
	border-radius: calc(var(--vi-radius) + 2px);
	background: var(--vi-surface-muted) !important;
	padding: 14px;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

.vi-acindex-scope .delete-selected-element {
	background: var(--vi-secondary);
	border: 1px solid var(--vi-secondary);
	color: #fff;
	border-radius: var(--vi-radius);
	padding: 8px 12px;
	font-size: var(--vi-font-size-sm);
	font-weight: 600;
	margin-bottom: 12px;
}

.vi-acindex-scope .construction-element-properties-table {
	width: 100%;
	font-size: var(--vi-font-size-sm);
	line-height: 1.5;
}

/* ---------- Right-side panel sections ---------- */
.vi-acindex-scope .vi-sunporch-right-side-panel-top {
	background: linear-gradient(180deg, #f5f1e8 0%, var(--vi-tertiary) 100%);
	border: 1px solid var(--vi-border);
	box-shadow: var(--vi-shadow-soft);
	border-radius: var(--vi-radius) var(--vi-radius) 0 0;
	padding: 16px 20px;
}

.vi-acindex-scope .vi-sunporch-right-side-panel-middle {
	background: var(--vi-surface);
	padding: 20px;
	border-left: 1px solid var(--vi-border);
	border-right: 1px solid var(--vi-border);
	border-bottom: 1px solid var(--vi-border);
}

.vi-acindex-scope .vi-sunporch-right-side-panel-bottom {
	background: var(--vi-tertiary);
	border-radius: 0 0 var(--vi-radius) var(--vi-radius);
	padding: 16px 20px;
}

.vi-acindex-scope .vi-panel-top-price {
	display: block;
	margin-bottom: 0;
	line-height: 1.15;
}

.vi-acindex-scope .vi-panel-top-button {
	width: 100%;
}

@media (max-width: 991px) {
	.vi-acindex-scope .vi-sunporch-right-side-panel-top,
	.vi-acindex-scope .vi-sunporch-right-side-panel-middle,
	.vi-acindex-scope .vi-sunporch-right-side-panel-bottom,
	.vi-acindex-scope .dialog-item-host-base,
	.vi-acindex-scope .dialog-item-host-extra,
	.vi-acindex-scope .dialog-item-host-factory,
	.vi-acindex-scope .dialog-item-host-reseller,
	.vi-acindex-scope #assetConfigurationExtraHost,
	.vi-acindex-scope #assetConfigurationProductHost,
	.vi-acindex-scope .customer-info-controls {
		padding: 14px;
	}

	.vi-acindex-scope #customerInfoHostEdit td,
	.vi-acindex-scope #customerInfoHostEdit td:first-child,
	.vi-acindex-scope #customerInfoHostEdit td:last-child {
		display: block;
		width: 100%;
		padding-right: 0;
	}

	.vi-acindex-scope #customerInfoHostEdit td:first-child {
		margin-bottom: 4px;
	}

	.vi-acindex-scope .price-detail-host table {
		min-width: 560px;
	}
}

/* ---------- Full shortcode scope ---------- */
.vi-acindex-scope {
	font-size: var(--vi-font-size-base);
	line-height: 1.5;
	color: var(--vi-foreground);
}

.vi-acindex-scope .view-ac-model-sun-porch-container,
.vi-acindex-scope .asset-configuration-search-hosts,
.vi-acindex-scope #pluginObjectEditHost,
.vi-acindex-scope #pluginObjectHost {
	font-size: var(--vi-font-size-base);
	line-height: 1.5;
	color: var(--vi-foreground);
}

.vi-acindex-scope .view-ac-model-sun-porch-container {
	min-height: 1000px;
	height: auto !important;
}

.vi-acindex-scope #pluginObjectEditHost > h2 {
	margin: 0 0 12px;
	font-size: 24px;
	line-height: 1.2;
	font-weight: 600;
	color: var(--vi-foreground);
}

/* ---------- Search and overview ---------- */
.vi-acindex-scope .asset-configuration-search,
.vi-acindex-scope .asset-configuration-search-model,
.vi-acindex-scope .asset-configuration-search-standard,
.vi-acindex-scope #acOverviewControlsHost,
.vi-acindex-scope .report-rendered-host-dock,
.vi-acindex-scope #reportSummaryArea {
	background: var(--vi-surface);
	border: 1px solid var(--vi-border);
	border-radius: calc(var(--vi-radius) + 2px);
	box-shadow: 0 1px 2px rgba(26, 26, 26, 0.04);
	padding: 16px 18px;
	margin-bottom: 14px;
}

.vi-acindex-scope .asset-configuration-search {
	display: flex;
	align-items: center;
	gap: 10px;
	max-width: 520px;
}

.vi-acindex-scope .asset-configuration-search-input,
.vi-acindex-scope .overview-customer-info-name,
.vi-acindex-scope .overview-customer-info-company,
.vi-acindex-scope .overview-customer-info-email,
.vi-acindex-scope .overview-customer-info-cell-phone,
.vi-acindex-scope .search-asset-configuration-id,
.vi-acindex-scope .ask-us-input,
.vi-acindex-scope .ask-us-question,
.vi-acindex-scope .wall-field-input,
.vi-acindex-scope .wall-anchor-field-input,
.vi-acindex-scope .construction-input,
.vi-acindex-scope .segment-quick-edit-length,
.vi-acindex-scope .draw-surface-x-max,
.vi-acindex-scope .draw-surface-y-max,
.vi-acindex-scope .draw-surface-magnification {
	border: 1px solid var(--vi-border);
	border-radius: var(--vi-radius);
	padding: 8px 10px;
	font-size: var(--vi-font-size-base);
	line-height: 1.4;
	color: var(--vi-foreground);
	background: #fff;
	min-height: var(--vi-field-height);
	transition:
		border-color 0.15s,
		box-shadow 0.15s;
}

.vi-acindex-scope .asset-configuration-search-input:focus,
.vi-acindex-scope .overview-customer-info-name:focus,
.vi-acindex-scope .overview-customer-info-company:focus,
.vi-acindex-scope .overview-customer-info-email:focus,
.vi-acindex-scope .overview-customer-info-cell-phone:focus,
.vi-acindex-scope .search-asset-configuration-id:focus,
.vi-acindex-scope .ask-us-input:focus,
.vi-acindex-scope .ask-us-question:focus,
.vi-acindex-scope .wall-field-input:focus,
.vi-acindex-scope .wall-anchor-field-input:focus,
.vi-acindex-scope .construction-input:focus,
.vi-acindex-scope .segment-quick-edit-length:focus,
.vi-acindex-scope .draw-surface-x-max:focus,
.vi-acindex-scope .draw-surface-y-max:focus,
.vi-acindex-scope .draw-surface-magnification:focus {
	border-color: var(--vi-primary);
	outline: none;
	box-shadow: 0 0 0 3px rgba(0, 67, 70, 0.15);
}

.vi-acindex-scope .asset-configuration-search-input {
	flex: 1 1 auto;
	min-width: 0;
}

.vi-acindex-scope .asset-configuration-search-item,
.vi-acindex-scope .asset-configuration-choice-item {
	align-items: center;
	font-size: var(--vi-font-size-base);
	line-height: 1.6;
	padding: 8px 0;
	border-bottom: 1px solid var(--vi-border);
}

.vi-acindex-scope .asset-configuration-display-container .asset-configuration-search-item:last-child,
.vi-acindex-scope .quality-host .asset-configuration-choice-item:last-child {
	border-bottom: 0;
}

.vi-acindex-scope .asset-configuration-edit,
.vi-acindex-scope [class*='asset-configuration-search-item-'] {
	color: var(--vi-primary);
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
}

.vi-acindex-scope .asset-configuration-edit:hover,
.vi-acindex-scope [class*='asset-configuration-search-item-']:hover {
	color: var(--vi-primary-hover);
	text-decoration: none;
}

.vi-acindex-scope #acOverviewQuote {
	margin-top: 14px;
	padding-top: 14px;
	border-top: 1px solid var(--vi-border);
}

.vi-acindex-scope #customerInfoTable {
	width: 100% !important;
	max-width: none !important;
	border-collapse: separate;
	border-spacing: 0 10px;
}

.vi-acindex-scope #customerInfoTable td {
	font-size: var(--vi-font-size-sm);
	line-height: 1.5;
	vertical-align: middle;
	padding-right: 12px;
}

.vi-acindex-scope #customerInfoTable td:first-child {
	width: 32%;
	font-weight: 600;
	color: var(--vi-muted);
}

.vi-acindex-scope #customerInfoTable td:last-child {
	padding-right: 0;
	width: 68%;
}

.vi-acindex-scope #customerInfoTable input {
	width: 100%;
}

/* ---------- Main stage and viewers ---------- */
.vi-acindex-scope #mainViewControl {
	margin-bottom: 16px;
}

.vi-acindex-scope #mainViewButtonGroup {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 8px;
}

.vi-acindex-scope .vi-main-view-button,
.vi-acindex-scope .vi-main-view-button-short {
	min-height: 40px;
	padding: 8px 14px;
	font-size: var(--vi-font-size-sm);
	font-weight: 600;
	border-radius: var(--vi-radius);
}

.vi-acindex-scope #threeDContainerControls,
.vi-acindex-scope .wall-dimensions {
	margin-top: 12px;
	font-size: var(--vi-font-size-sm);
	font-weight: 600;
	line-height: 1.5;
	color: var(--vi-muted);
}

.vi-acindex-scope #draw3DHost_0,
.vi-acindex-scope #twoDContainer,
.vi-acindex-scope #drawSurfaceHost {
	margin-top: 12px;
	font-size: var(--vi-font-size-base);
	line-height: 1.5;
}

.vi-acindex-scope [id^='selectedWallHost_'],
.vi-acindex-scope [id^='dialogImageHost_'],
.vi-acindex-scope [id^='dialogImageAlternateHost_'],
.vi-acindex-scope #constructionTopViewHost {
	background: var(--vi-surface);
	border: 1px solid var(--vi-border);
	border-radius: calc(var(--vi-radius) + 2px);
	box-shadow: 0 1px 2px rgba(26, 26, 26, 0.04);
	overflow: hidden;
}

.vi-acindex-scope .wall-instructions,
.vi-acindex-scope .construction-instructions,
.vi-acindex-scope .ask-us-explanation {
	background: var(--vi-surface-muted);
	border: 1px solid var(--vi-border);
	border-radius: var(--vi-radius);
	padding: 12px 14px;
	font-size: var(--vi-font-size-sm);
	line-height: 1.7;
	color: var(--vi-muted);
}

/* ---------- Draw surface ---------- */
.vi-acindex-scope .top-surface-controls {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0 8px;
	margin-bottom: 10px;
}

.vi-acindex-scope .top-surface-controls td {
	border: 0 !important;
	padding: 0 12px 0 0 !important;
	vertical-align: middle;
}

.vi-acindex-scope .top-surface-controls label,
.vi-acindex-scope .wall-input-caption {
	font-size: var(--vi-font-size-sm);
	font-weight: 600;
	color: var(--vi-muted);
}

.vi-acindex-scope .wall-field-input,
.vi-acindex-scope .wall-anchor-field-input,
.vi-acindex-scope .construction-input {
	width: 100%;
}

.vi-acindex-scope .construction-properties {
	border: 1px solid var(--vi-border);
	border-radius: calc(var(--vi-radius) + 2px);
	background: var(--vi-surface);
	padding: 14px;
	box-shadow: 0 1px 2px rgba(26, 26, 26, 0.04);
}

.vi-acindex-scope .construction-segment-quick-edit-object {
	background: var(--vi-surface);
	border: 1px solid var(--vi-border);
	border-radius: calc(var(--vi-radius) + 2px);
	padding: 8px 10px;
	box-shadow: var(--vi-shadow-soft);
}

/* ---------- Toolbox ---------- */
.vi-acindex-scope #configurationToolboxHost {
	font-size: var(--vi-font-size-sm);
}

.vi-acindex-scope .ac-toolbox-group {
	background: var(--vi-surface);
	border: 1px solid var(--vi-border);
	border-radius: calc(var(--vi-radius) + 2px);
	box-shadow: 0 1px 2px rgba(26, 26, 26, 0.04);
	overflow: hidden;
	padding: 0;
	margin-bottom: 10px;
}

.vi-acindex-scope .ac-toolbox-group .panel-heading {
	background: var(--vi-surface-muted);
	border-bottom: 1px solid var(--vi-border);
	padding: 0;
}

.vi-acindex-scope .ac-toolbox-group .panel-title a {
	display: block;
	padding: 10px 12px;
	font-size: var(--vi-font-size-base);
	font-weight: 600;
	color: var(--vi-foreground);
	text-decoration: none;
}

.vi-acindex-scope .toolbox-group-element {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--vi-border);
	border-radius: var(--vi-radius);
	background: #fff;
	overflow: hidden;
}

.vi-acindex-scope .toolbox-element {
	min-width: 56px;
	min-height: 56px;
	padding: 6px;
	margin: 0 8px 8px 0;
	border: 1px solid var(--vi-border);
	background: var(--vi-surface);
	color: var(--vi-foreground);
	vertical-align: top;
}

.vi-acindex-scope .toolbox-element:hover,
.vi-acindex-scope .toolbox-element:focus {
	border-color: var(--vi-primary);
	background: rgba(0, 67, 70, 0.04);
}

.vi-acindex-scope .toolbox-element svg,
.vi-acindex-scope .toolbox-group-element svg {
	width: 100%;
	height: 100%;
	display: block;
}

/* ---------- Ask us and info overlays ---------- */
.vi-acindex-scope .ask-us-dialog-host {
	background: var(--vi-surface);
	border: 1px solid var(--vi-border);
	border-radius: calc(var(--vi-radius) + 2px);
	box-shadow: var(--vi-shadow-soft);
	padding: 16px 18px;
	margin-bottom: 16px;
}

.vi-acindex-scope .ask-us-title {
	font-size: 22px;
	font-weight: 700;
	line-height: 1.2;
	padding: 0;
	margin-bottom: 10px;
	color: var(--vi-foreground);
}

.vi-acindex-scope .ask-us-question {
	width: 100%;
	min-height: 120px;
	resize: vertical;
}

.vi-acindex-scope .ask-us-input {
	width: 100%;
	max-width: 100%;
}

.vi-acindex-scope .information-for-user {
	background: var(--vi-surface);
	border: 1px solid var(--vi-border);
	border-radius: calc(var(--vi-radius) + 2px);
	box-shadow: var(--vi-shadow-soft);
	padding: 16px;
}

.vi-acindex-scope .information-for-user-iframe,
.vi-acindex-scope .information-for-user-video {
	width: 100%;
	border: 0;
	border-radius: var(--vi-radius);
	background: #fff;
}

.vi-acindex-scope .information-for-user-text,
.vi-acindex-scope .help-item-textarea {
	font-size: var(--vi-font-size-sm);
	line-height: 1.7;
	color: var(--vi-foreground);
}

.vi-acindex-scope .help-item-textarea {
	padding: 10px 12px;
	border: 1px solid var(--vi-border);
	border-radius: var(--vi-radius);
	background: #fff;
	resize: vertical;
}

@media (max-width: 991px) {
	.vi-acindex-scope .asset-configuration-search {
		flex-direction: column;
		align-items: stretch;
	}

	.vi-acindex-scope #customerInfoTable td,
	.vi-acindex-scope #customerInfoTable td:first-child,
	.vi-acindex-scope #customerInfoTable td:last-child,
	.vi-acindex-scope .top-surface-controls td {
		display: block;
		width: 100% !important;
		padding-right: 0 !important;
	}

	.vi-acindex-scope #customerInfoTable td:first-child {
		margin-bottom: 4px;
	}
}