/*
 * Gemstone Visualizer — public tool styles
 *
 * Ported from the Atlanta widget. That widget ran inside an iframe and
 * deliberately rendered no shell: "the parent modal owns the close button +
 * footer". Here it IS the page, so this file adds the shell the modal used to
 * provide — page background, centred card, a slim brand bar, and the contact
 * footer visitors would otherwise lose.
 */

/* ---------- page shell (new; the iframe parent used to supply this) ------- */
.gemv-page { min-height: 100vh; background: #F4F6F8; padding: 0 0 48px; }
.gemv-bar { display: flex; align-items: center; justify-content: space-between;
            gap: 16px; padding: 14px 20px; background: #fff;
            border-bottom: 1px solid #E6EAED; }
.gemv-bar img, .gemv-bar svg { height: 26px; width: auto; display: block; }
.gemv-bar-cta { font-size: 13px; font-weight: 600; color: #1B9CD4; text-decoration: none; white-space: nowrap; }
.gemv-bar-cta:hover { color: #14171A; }
.gemv-shell { max-width: 700px; margin: 0 auto; padding: 24px 16px 0; }
.gemv-card { background: #fff; border: 1px solid #E6EAED; border-radius: 18px;
             box-shadow: 0 1px 3px rgba(16,24,32,.06); overflow: hidden; padding-bottom: 22px; }
/* The contact route the modal footer used to carry. */
.gemv-footer { max-width: 700px; margin: 18px auto 0; padding: 0 16px;
               text-align: center; font-size: 12.5px; color: #6B757C; line-height: 1.6; }
.gemv-footer a { color: #1B9CD4; text-decoration: none; }
.gemv-footer a:hover { text-decoration: underline; }
@media (max-width: 560px) {
  .gemv-shell { padding: 12px 10px 0; }
  .gemv-card { border-radius: 14px; }
}

/* ---------- native quote form (replaces the GoHighLevel iframe) ---------- */
.gemv-field { display: flex; flex-direction: column; gap: 6px; }
.gemv-label { font-size: 11.5px; font-weight: 600; letter-spacing: .04em;
              text-transform: uppercase; color: #7C8791; }
.gemv-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 480px) { .gemv-row { grid-template-columns: 1fr; } }
.gemv-select { width: 100%; border: 1px solid #E3E8EB; border-radius: 12px;
               padding: 11px 12px; font-size: 14px; background: #fff; color: #14171A; }
.gemv-select:focus { outline: none; border-color: #1B9CD4; }
.gemv-remaining { font-size: 12px; color: #6B757C; text-align: center; margin-top: 2px; }
.gemv-remaining strong { color: #14171A; }

/* ---------- confirmation panel -------------------------------------------
   These rules were deleted from the Atlanta widget when GoHighLevel took over
   the quote step and rendered its own confirmation. The native form needs them
   back, or the tick and message render as bare unstyled text. */
.gs-success { border: 1px solid #C7E9F7; background: #F1FAFE; border-radius: 16px;
              padding: 18px; display: flex; gap: 12px; align-items: flex-start;
              animation: gsFade .3s ease; }
.gs-success-check { width: 26px; height: 26px; border-radius: 50%; background: #1B9CD4;
                    color: #fff; display: flex; align-items: center; justify-content: center;
                    font-size: 13px; font-weight: 700; flex: none; line-height: 1; }
.gs-success-title { font-size: 14.5px; font-weight: 600; margin-bottom: 2px; }
.gs-success-body  { font-size: 12.5px; color: #5D686F; line-height: 1.5; }

/* ---------- autofill ------------------------------------------------------
   Chrome paints autofilled inputs with its own pale blue background, which
   overrides the field styling and looks broken next to the untouched fields.
   The inset shadow is the only reliable way to restore the white fill. */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
select:-webkit-autofill {
  -webkit-text-fill-color: #14171A;
  -webkit-box-shadow: 0 0 0 1000px #fff inset;
          box-shadow: 0 0 0 1000px #fff inset;
  caret-color: #14171A;
  transition: background-color 9999s ease-out 0s; /* outruns Chrome's repaint */
}

/* ---------- ported from the Atlanta widget ------------------------------ */

		*, *::before, *::after { box-sizing: border-box; }
		html, body { margin: 0; padding: 0; min-height: 100%; background: transparent; }
		body {
			font: 14px/1.45 Poppins, "Helvetica Neue", Helvetica, Arial, sans-serif;
			color: #14171A;
			background: #FFFFFF;
			-webkit-font-smoothing: antialiased;
		}
		a { color: #1B9CD4; text-decoration: none; }
		a:hover { color: #14171A; }
		input, button, textarea { font: inherit; }
		input[type=number] { -moz-appearance: textfield; }
		input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }

		/* Animations */
		@keyframes gsSpin { to { transform: rotate(360deg); } }
		@keyframes gsShake { 0%,100% { transform: none; } 20% { transform: translateX(-6px); } 40% { transform: translateX(5px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(2px); } }
		@keyframes gsFade { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }


		/* Widget content — the parent (atlanta site) provides the modal shell, so
		   we do NOT render a card wrapper, close button, or footer here. Just the
		   content sections: eyebrow/headline/subhead, progress bar, and body. The
		   max-width matches the design's 660px card. When the parent iframe is
		   narrower, content shrinks to fit; wider, content stays centered. */
		.gs-widget { max-width: 660px; margin: 0 auto; }
		.gs-header { display: flex; flex-direction: column; gap: 10px; padding: 26px 28px 0; animation: gsFade .25s ease; }
		.gs-header-text { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
		.gs-eyebrow { display: flex; align-items: center; gap: 9px; }
		.gs-eyebrow-dot { width: 16px; height: 16px; border-radius: 50%; background: linear-gradient(140deg,#6FD3F2,#1B9CD4); flex: none; }
		.gs-eyebrow-text { font-size: 11px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: #7C8791; }
		.gs-headline { font-size: 23px; font-weight: 600; line-height: 1.2; letter-spacing: -.01em; }
		.gs-subhead { font-size: 13.5px; line-height: 1.5; color: #5D686F; max-width: 460px; }
		.gs-progress { display: flex; align-items: center; gap: 7px; padding: 20px 28px 0; }
		.gs-progress-bar { height: 4px; flex: 1; border-radius: 99px; background: #E3E8EB; transition: background .25s ease; }
		.gs-progress-bar.done { background: #1B9CD4; }
		.gs-progress-bar.active { background: #6FD3F2; }
		.gs-step-label { font-size: 11px; font-weight: 600; letter-spacing: .1em; color: #97A1A8; padding-left: 6px; white-space: nowrap; }

		.gs-body { padding: 22px 28px 26px; }

		.gs-stack { display: flex; flex-direction: column; gap: 16px; }

		/* Dropzone */
		.gs-drop { border: 1.5px dashed #D5DDE2; background: #FCFDFE; border-radius: 16px; padding: 38px 24px; display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; transition: background .18s, border-color .18s; }
		.gs-drop.drag { border-color: #1B9CD4; background: #F1FAFE; }
		.gs-drop.err { border-color: #E0A3A3; }
		.gs-drop-icon { width: 46px; height: 46px; border-radius: 50%; background: #E8F6FD; display: flex; align-items: center; justify-content: center; }
		.gs-drop-title { font-size: 15px; font-weight: 600; }
		.gs-drop-sub { font-size: 12.5px; color: #6B757C; }
		.gs-file-input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

		.gs-file-card { display: flex; align-items: center; gap: 14px; border: 1px solid #E3E8EB; border-radius: 14px; padding: 12px 14px; }
		.gs-file-thumb { width: 74px; height: 54px; border-radius: 9px; background: repeating-linear-gradient(135deg,#DCE3E8 0 6px,#EDF1F4 6px 12px); background-size: cover; background-position: center; flex: none; }
		.gs-file-meta { min-width: 0; display: flex; flex-direction: column; gap: 3px; flex: 1; }
		.gs-file-name { font-size: 13.5px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
		.gs-file-size { font-size: 11.5px; color: #7C8791; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
		.gs-file-remove { border: none; background: none; color: #7C8791; font-size: 12.5px; cursor: pointer; text-decoration: underline; }
		.gs-file-remove:hover { color: #14171A; }

		.gs-alert { display: flex; gap: 9px; align-items: flex-start; background: #FDF0F0; border: 1px solid #F4CFCF; color: #A32B2B; border-radius: 12px; padding: 11px 13px; font-size: 12.5px; line-height: 1.45; animation: gsShake .34s ease; }
		.gs-alert b { font-weight: 700; }

		.gs-info-card { display: flex; flex-direction: column; gap: 7px; background: #F5F8FA; border-radius: 14px; padding: 14px 16px; }
		.gs-info-eyebrow { font-size: 11px; font-weight: 600; letter-spacing: .13em; text-transform: uppercase; color: #7C8791; }
		.gs-info-body { font-size: 12.5px; line-height: 1.55; color: #5D686F; }

		/* Primary CTA */
		.gs-btn { width: 100%; border: none; cursor: pointer; background: #1B9CD4; color: #fff; border-radius: 99px; padding: 15px 20px; font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 46px; }
		.gs-btn:hover:not(:disabled) { background: #14171A; }
		.gs-btn:disabled { background: #93C5FD; cursor: not-allowed; opacity: .8; }
		.gs-btn-ghost { background: #fff; color: #14171A; border: 1px solid #E3E8EB; }
		.gs-btn-ghost:hover:not(:disabled) { background: #F2F5F7; color: #14171A; }
		.gs-btn-row { display: flex; gap: 10px; flex-wrap: wrap; }
		.gs-btn-row .gs-btn { flex: 1; min-width: 150px; }
		.gs-btn.sending { background: #6FD3F2; }

		.gs-spinner { width: 13px; height: 13px; border-radius: 50%; border: 2px solid rgba(255,255,255,.4); border-top-color: #fff; animation: gsSpin .7s linear infinite; display: inline-block; }
		.gs-spinner-dark { border: 2px solid #DCE3E8; border-top-color: #1B9CD4; }

		/* Phone step */
		.gs-security { display: flex; gap: 12px; background: #F5F8FA; border-radius: 14px; padding: 15px 16px; }
		.gs-security-icon { width: 26px; height: 26px; border-radius: 50%; background: #E8F6FD; display: flex; align-items: center; justify-content: center; flex: none; }
		.gs-security-body { font-size: 12.5px; line-height: 1.55; color: #5D686F; }

		.gs-trustpilot { display: flex; align-items: center; gap: 12px; border: 1px solid #E3E8EB; border-radius: 12px; padding: 11px 14px; text-decoration: none; color: inherit; }
		.gs-trustpilot:hover { background: #F5F8FA; color: inherit; }
		.gs-trustpilot-stars { display: flex; gap: 2px; flex: none; }
		.gs-trustpilot-text { font-size: 12.5px; line-height: 1.4; color: #5D686F; }
		.gs-trustpilot-text b { color: #14171A; font-weight: 600; }

		.gs-field-label { font-size: 11px; font-weight: 600; letter-spacing: .13em; text-transform: uppercase; color: #7C8791; }
		.gs-phone-wrap { display: flex; align-items: center; gap: 10px; border: 1.5px solid #E3E8EB; border-radius: 13px; padding: 0 14px; background: #fff; transition: border-color .15s; }
		.gs-phone-wrap.err { border-color: #E0A3A3; }
		.gs-phone-wrap.focus { border-color: #1B9CD4; }
		.gs-phone-prefix { font-size: 14.5px; color: #5D686F; font-weight: 500; }
		.gs-phone-sep { width: 1px; height: 22px; background: #E3E8EB; }
		.gs-phone-input { flex: 1; border: none; outline: none; padding: 15px 0; font-size: 15px; letter-spacing: .01em; background: transparent; color: #14171A; }
		.gs-phone-input:disabled { color: #97A1A8; cursor: not-allowed; }
		.gs-phone-change { border: none; background: none; padding: 0; font-size: 12px; font-weight: 600; color: #1B9CD4; cursor: pointer; }
		.gs-phone-change:hover { color: #14171A; }

		/* Code boxes */
		.gs-code-header { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
		.gs-resend { border: none; background: none; padding: 0; font-size: 12px; font-weight: 500; color: #1B9CD4; cursor: pointer; }
		.gs-resend:disabled { color: #A9B3B9; cursor: default; }
		.gs-code-boxes { display: flex; gap: 10px; }
		.gs-code-boxes.shake { animation: gsShake .34s ease; }
		.gs-code-box { width: 100%; height: 50px; text-align: center; font-size: 19px; font-weight: 600; border: 1.5px solid #D5DDE2; border-radius: 12px; outline: none; background: #fff; color: #14171A; box-shadow: inset 0 1px 2px rgba(20,23,26,.05); caret-color: #1B9CD4; transition: border-color .15s, box-shadow .15s; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
		.gs-code-box.filled { border-color: #B9DFF1; }
		.gs-code-box:focus { border-color: #1B9CD4; box-shadow: 0 0 0 3px rgba(27,156,212,.18); }
		.gs-code-box.err { border-color: #E0A3A3; }
		.gs-code-box:disabled { background: #F5F8FA; }
		.gs-code-verifying { display: flex; align-items: center; gap: 9px; font-size: 12.5px; color: #5D686F; }
		.gs-code-verifying .gs-spinner { width: 13px; height: 13px; }

		/* Loading step */
		.gs-loading { display: flex; flex-direction: column; gap: 14px; min-height: 100%; justify-content: center; }
		.gs-loading-row { display: flex; align-items: center; gap: 12px; }
		.gs-loading-row .gs-spinner { width: 18px; height: 18px; }
		.gs-loading-label { font-size: 13px; font-weight: 600; flex: 1; }
		.gs-loading-pct { font-size: 12px; color: #7C8791; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
		.gs-loading-bar { height: 5px; border-radius: 99px; background: #EEF1F3; overflow: hidden; }
		.gs-loading-fill { height: 100%; border-radius: 99px; background: linear-gradient(90deg,#6FD3F2,#1B9CD4); width: 0%; transition: width .5s linear; }
		.gs-feature { border: 1px solid #E3E8EB; border-radius: 14px; padding: 14px 16px; display: flex; flex-direction: column; gap: 7px; }
		.gs-feature-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
		.gs-feature-tag { font-size: 10px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: #1B9CD4; }
		.gs-feature-dots { display: flex; align-items: center; gap: 8px; }
		.gs-feature-dot { height: 6px; width: 8px; border-radius: 99px; border: none; padding: 0; cursor: pointer; background: #DCE3E8; transition: width .25s, background .25s; }
		.gs-feature-dot.active { background: #1B9CD4; width: 22px; }
		.gs-feature-next { width: 24px; height: 24px; margin-left: 4px; border-radius: 50%; border: 1px solid #E3E8EB; background: #fff; color: #5D686F; font-size: 11px; cursor: pointer; }
		.gs-feature-next:hover { background: #F2F5F7; }
		.gs-feature-title { font-size: 14.5px; font-weight: 600; line-height: 1.3; }
		.gs-feature-body { font-size: 12.5px; line-height: 1.5; color: #5D686F; }
		.gs-note { font-size: 11.5px; color: #97A1A8; }

		/* Result step */
		.gs-result-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
		.gs-result-tile { cursor: zoom-in; display: flex; flex-direction: column; gap: 8px; }
		.gs-result-img { position: relative; border-radius: 14px; overflow: hidden; aspect-ratio: 4 / 3; background: #F3F4F6; display: block; width: 100%; height: auto; object-fit: cover; }
		.gs-result-img-placeholder { position: relative; border-radius: 14px; overflow: hidden; aspect-ratio: 4 / 3; background: repeating-linear-gradient(135deg,#DCE3E8 0 7px,#EDF1F4 7px 14px); }
		.gs-result-caption { display: flex; align-items: center; justify-content: space-between; }
		.gs-result-caption b { font-size: 11px; font-weight: 600; letter-spacing: .13em; text-transform: uppercase; color: #7C8791; }
		.gs-result-caption span { font-size: 11px; color: #97A1A8; }
		.gs-badge-after { position: absolute; top: 12px; left: 12px; font-size: 10px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: #fff; background: #1B9CD4; padding: 5px 9px; border-radius: 99px; z-index: 2; }

		.gs-notice { font-size: 12.5px; color: #1B9CD4; font-weight: 500; }

		/* Quote form */
		.gs-quote { border: 1px solid #E3E8EB; border-radius: 16px; padding: 18px; display: flex; flex-direction: column; gap: 14px; }
		.gs-quote-title { font-size: 15.5px; font-weight: 600; }
		.gs-quote-sub { font-size: 12.5px; color: #5D686F; }
		.gs-input-wrap { display: flex; align-items: center; gap: 9px; border: 1.5px solid #E3E8EB; border-radius: 12px; padding: 0 13px; background: #fff; transition: border-color .15s; }
		.gs-input-wrap.err { border-color: #E0A3A3; }
		.gs-input-wrap.focus { border-color: #1B9CD4; }
		.gs-input-wrap.locked { background: #F5F8FA; }
		.gs-input-wrap input { flex: 1; border: none; outline: none; padding: 13px 0; font-size: 14px; background: transparent; color: #14171A; }
		.gs-input-wrap input:disabled { color: #7C8791; }

		/* Lightbox */
		#gs-lightbox { position: fixed; inset: 0; background: rgba(9,14,19,.86); display: none; align-items: center; justify-content: center; padding: 40px; cursor: zoom-out; z-index: 40; animation: gsFade .2s ease; }
		#gs-lightbox.active { display: flex; }
		#gs-lightbox-inner { width: min(900px, 100%); display: flex; flex-direction: column; gap: 12px; }
		#gs-lightbox-img { border-radius: 16px; max-width: 100%; max-height: calc(100vh - 140px); object-fit: contain; background: #0C1218; }
		#gs-lightbox-meta { display: flex; align-items: center; justify-content: space-between; color: #E7EDF1; font-size: 12px; }
		#gs-lightbox-label { font-weight: 600; letter-spacing: .13em; text-transform: uppercase; }
		#gs-lightbox-hint { color: #9FAAB2; }

		.gs-hide { display: none !important; }
		.gs-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }

		/* Google Places Autocomplete dropdown — restyled to match Poppins + our palette.
		   Default z-index is 1000, higher than our lightbox (40), so no stacking fix needed. */
		.pac-container { font: 14px/1.4 Poppins, "Helvetica Neue", Helvetica, Arial, sans-serif; border-radius: 12px; box-shadow: 0 12px 30px rgba(9,16,22,.18); border: 1px solid #E3E8EB; margin-top: 6px; }
		.pac-item { padding: 10px 14px; cursor: pointer; border-top: 1px solid #F3F5F7; color: #14171A; }
		.pac-item:first-child { border-top: 0; }
		.pac-item:hover, .pac-item-selected { background: #F1FAFE; }
		.pac-icon { display: none; }
		.pac-item-query { font-size: 14px; color: #14171A; padding-right: 6px; }
		.pac-matched { color: #1B9CD4; font-weight: 600; }
		.pac-item span:not(.pac-item-query):not(.pac-matched) { font-size: 12.5px; color: #6B757C; }
	
/* =========================================================================
   Theme override layer
   =========================================================================
   The Atlanta widget rendered inside an iframe, so nothing else on the page
   could reach its inputs. Here the tool shares a document with Astra, Elementor
   and Gravity Forms, all of which style bare `input` elements — which flattened
   the phone field and the code boxes into plain grey rectangles.
   These are the same values as the design above, re-asserted with !important so
   the fields look exactly as they do on Atlanta regardless of what loads. */

.gs-input-wrap {
	display: flex !important;
	align-items: center !important;
	gap: 9px !important;
	border: 1.5px solid #E3E8EB !important;
	border-radius: 12px !important;
	padding: 0 13px !important;
	background: #fff !important;
	box-shadow: none !important;
	min-height: 0 !important;
}
.gs-input-wrap.focus { border-color: #1B9CD4 !important; }
.gs-input-wrap.err   { border-color: #E0A3A3 !important; }

/* The phone field is borderless by design — the wrapper draws the border. */
.gs-input-wrap input,
.gs-phone-input {
	flex: 1 !important;
	width: 100% !important;
	border: none !important;
	outline: none !important;
	background: transparent !important;
	box-shadow: none !important;
	padding: 15px 0 !important;
	margin: 0 !important;
	font-size: 15px !important;
	line-height: 1.3 !important;
	color: #14171A !important;
	height: auto !important;
	min-height: 0 !important;
	border-radius: 0 !important;
}
.gs-phone-input:disabled { color: #97A1A8 !important; cursor: not-allowed !important; }

/* The four code boxes. */
.gs-code-boxes { display: flex !important; gap: 10px !important; }
.gs-code-box {
	width: 100% !important;
	height: 50px !important;
	min-height: 0 !important;
	text-align: center !important;
	font-size: 19px !important;
	font-weight: 600 !important;
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace !important;
	border: 1.5px solid #D5DDE2 !important;
	border-radius: 12px !important;
	outline: none !important;
	background: #fff !important;
	color: #14171A !important;
	box-shadow: inset 0 1px 2px rgba(20,23,26,.05) !important;
	caret-color: #1B9CD4 !important;
	padding: 0 !important;
	margin: 0 !important;
}
.gs-code-box.filled  { border-color: #B9DFF1 !important; }
.gs-code-box:focus   { border-color: #1B9CD4 !important; box-shadow: 0 0 0 3px rgba(27,156,212,.18) !important; }
.gs-code-box.err     { border-color: #E0A3A3 !important; }
.gs-code-box:disabled{ background: #F5F8FA !important; }

/* The quote-form selects, same treatment. */
.gemv-select {
	width: 100% !important;
	border: 1.5px solid #E3E8EB !important;
	border-radius: 12px !important;
	padding: 12px 13px !important;
	font-size: 14px !important;
	background-color: #fff !important;
	color: #14171A !important;
	height: auto !important;
	box-shadow: none !important;
}
.gemv-select:focus { border-color: #1B9CD4 !important; outline: none !important; }

/* Buttons, so theme button styling cannot reshape them. */
.gs-btn {
	border-radius: 12px !important;
	font-size: 14.5px !important;
	line-height: 1.2 !important;
	text-transform: none !important;
	letter-spacing: 0 !important;
	width: 100% !important;
}

/* Turnstile sits above the send button on the phone step. */
.gemv-turnstile { display: flex; justify-content: center; margin: 2px 0 4px; min-height: 0; }
.gemv-turnstile:empty { display: none; }

/* ---------- Upload step: example + clear upload button (2026-11-02) ---------- */
/* Two small images side by side; on a phone each is ~44vw wide, so the upload button stays above the fold. */
.gs-example { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 8px; }
.gs-example-fig { margin: 0 !important; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.gs-example-fig img { display: block; width: 100% !important; height: auto !important; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 10px; background: #EEF2F5; }
.gs-example-fig figcaption { font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: #7C8791; text-align: center; line-height: 1.3; }
.gs-example-arrow { display: flex; color: #1B9CD4; margin-top: -20px; }
.gs-drop { padding: 22px 18px; gap: 10px; }
.gs-upload-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: 100%; max-width: 380px; min-height: 52px;
	padding: 14px 20px; border-radius: 12px; background: #1B9CD4; color: #fff; font-size: 15.5px; font-weight: 600; line-height: 1.2;
	box-shadow: 0 6px 16px rgba(27, 156, 212, .28); }
.gs-drop:hover .gs-upload-btn { background: #1689BB; }
/* Drag and drop only means something with a mouse; on phones the hint stays hidden. */
.gs-drop-hint { display: none; font-size: 12.5px; font-weight: 500; color: #7C8791; }
@media (hover: hover) and (pointer: fine) { .gs-drop-hint { display: block; } }
.gs-drop.drag .gs-drop-hint { display: block; color: #1B9CD4; }
/* As many equal columns as looks on offer (Halloween only in October). */
.gs-style-opts { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
@media (max-width: 420px) {
	.gs-example { gap: 6px; }
	.gs-example-fig figcaption { font-size: 10px; letter-spacing: .06em; }
	.gs-drop { padding: 16px 12px; }
	.gs-upload-btn { font-size: 15px; padding: 14px 12px; gap: 8px; }
}
@media (min-width: 360px) { .gs-upload-btn { white-space: nowrap; } }

/* ---------- "Don't have a photo? Request a quote" (2026-11-02) ---------- */
.gs-noquote { margin-top: 16px; padding: 12px 14px; border-radius: 12px; background: #F5F8FA; font-size: 13.5px; color: #5D686F; text-align: center; line-height: 1.5; }
.gs-noquote.gs-noquote--inline { margin-top: -4px; padding: 0 4px; background: none; font-size: 13px; }
.gs-noquote-btn, .gs-direct-back { display: inline !important; width: auto !important; min-height: 0 !important; padding: 0 !important; margin: 0 !important;
	background: none !important; border: 0 !important; box-shadow: none !important; color: #1B9CD4 !important; font: inherit !important;
	font-weight: 600 !important; text-transform: none !important; letter-spacing: 0 !important; text-decoration: underline !important; cursor: pointer; }
.gs-direct-back { display: block !important; margin: 2px auto 0 !important; font-size: 13.5px !important; text-decoration: none !important; }
.gs-direct-only { display: none; }
.gs-is-direct .gs-direct-only { display: flex; }
.gs-hp { position: absolute !important; left: -9999px !important; width: 1px !important; height: 1px !important; overflow: hidden !important; }

/* =========================================================================
   Hiding must win — keep this block LAST in the file
   =========================================================================
   `.gs-hide` and `.gs-input-wrap` are both single-class selectors, so they have
   equal specificity. When both carry !important the one declared later wins, and
   the override layer above declares `.gs-input-wrap { display: flex !important }`
   after it — which un-hid every element carrying both classes. The email prompt
   (`class="gs-input-wrap gs-hide"`) was the visible casualty: it rendered open on
   arrival instead of waiting for "Email it to me".
   Raising the specificity here settles it regardless of source order. */
.gs-hide,
.gs-widget .gs-hide,
.gs-widget .gs-input-wrap.gs-hide { display: none !important; }

/* The feature-carousel arrow. Without these the theme's button rules stretch it
   into an ellipse — it needs a fixed box to stay a circle. */
.gs-feature-next {
	width: 24px !important;
	height: 24px !important;
	min-width: 24px !important;
	max-width: 24px !important;
	padding: 0 !important;
	margin: 0 0 0 4px !important;
	border-radius: 50% !important;
	border: 1px solid #E3E8EB !important;
	background: #fff !important;
	color: #5D686F !important;
	font-size: 11px !important;
	line-height: 1 !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	flex: 0 0 24px !important;
	box-shadow: none !important;
	text-transform: none !important;
	letter-spacing: 0 !important;
	cursor: pointer !important;
}
.gs-feature-next:hover { background: #F2F5F7 !important; }

/* SMS consent shown above the send button on the phone step. Quieter than body
   copy but larger than the fine print below it, so it is legible rather than
   decorative - it is the disclosure the send relies on. */
.gs-consent{font-size:12.5px;line-height:1.5;color:#5A646D;margin:2px 0 -2px}

/* Quote form: highlighted card with trust cues (popup A/B test — identical on both pages). */
.gs-quote { background: linear-gradient(180deg, #F2F9FD 0%, #FFFFFF 140px); border: 1.5px solid #CBE6F4; box-shadow: 0 8px 28px rgba(16, 98, 140, 0.09); }
.gs-quote-head { display: flex; align-items: flex-start; gap: 12px; }
.gs-quote-shield { flex: 0 0 38px; height: 38px; border-radius: 11px; background: #E2F3FB; color: #1B9CD4; display: flex; align-items: center; justify-content: center; }
.gs-quote-trust { list-style: none; margin: 0; padding: 10px 12px; display: flex; flex-wrap: wrap; gap: 6px 16px; background: #FFFFFF; border: 1px solid #E1EEF5; border-radius: 12px; font-size: 12px; color: #3B4850; }
.gs-quote-trust li { display: flex; align-items: center; gap: 6px; margin: 0; padding: 0; }
.gs-quote-trust svg { color: #17955A; flex: none; }
.gs-quote .gs-input-wrap, .gs-quote .gemv-select { background: #FFFFFF; }
.gs-quote-safe { margin: 0; display: flex; align-items: flex-start; gap: 6px; font-size: 11.5px; line-height: 1.45; color: #5D686F; }
.gs-quote-safe svg { color: #17955A; flex: none; margin-top: 2px; }
.gs-quote-safe a { color: #1B9CD4; text-decoration: underline; }

/* Lighting style picker (photo step) and "see this home in" (result step). */
.gs-style { border: 0; margin: 0; padding: 0; min-width: 0; display: flex; flex-direction: column; gap: 9px; }
.gs-style legend { padding: 0; margin: 0 0 9px; }
.gs-style-opts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; }
.gs-style-opt { position: relative; cursor: pointer; display: flex; }
.gs-style-opt input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.gs-style-card { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 8px; border: 1.5px solid #E3E8EB; border-radius: 14px; padding: 11px 6px 10px; background: #fff; transition: border-color .15s, background .15s, box-shadow .15s; }
.gs-style-opt:hover .gs-style-card { border-color: #B9DDF0; }
.gs-style-opt input:checked + .gs-style-card { border-color: #1B9CD4; background: #F1FAFE; box-shadow: 0 0 0 3px rgba(27,156,212,.12); }
.gs-style-opt input:focus-visible + .gs-style-card { outline: 2px solid #1B9CD4; outline-offset: 2px; }
.gs-style-dots { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; max-width: 116px; height: 26px; border-radius: 99px; background: #14171A; }
.gs-style-dots i { display: block; width: 7px; height: 7px; border-radius: 50%; }
.gs-style-dots--warm_white i { background: #FFD27A; box-shadow: 0 0 6px 1px rgba(255,200,110,.85); }
.gs-style-dots--halloween i:nth-child(odd) { background: #FF8A1F; box-shadow: 0 0 6px 1px rgba(255,138,31,.85); }
.gs-style-dots--halloween i:nth-child(even) { background: #A66BFF; box-shadow: 0 0 6px 1px rgba(166,107,255,.85); }
.gs-style-dots--christmas i:nth-child(3n+1) { background: #FF4D4D; box-shadow: 0 0 6px 1px rgba(255,77,77,.85); }
.gs-style-dots--christmas i:nth-child(3n+2) { background: #3DDC6A; box-shadow: 0 0 6px 1px rgba(61,220,106,.8); }
.gs-style-dots--christmas i:nth-child(3n) { background: #FFE7B0; box-shadow: 0 0 6px 1px rgba(255,231,176,.85); }
.gs-style-name { flex: 1; display: flex; align-items: center; justify-content: center; font-size: 12.5px; font-weight: 600; color: #14171A; text-align: center; line-height: 1.2; }
.gs-relook { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.gs-relook-label { font-size: 11px; font-weight: 600; letter-spacing: .13em; text-transform: uppercase; color: #7C8791; }
.gs-relook-btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.gs-relook-btn { display: inline-flex; align-items: center; gap: 8px; border: 1px solid #E3E8EB; background: #fff; color: #14171A; border-radius: 99px; padding: 8px 14px 8px 8px; font-size: 12.5px; font-weight: 600; cursor: pointer; }
.gs-relook-btn:hover { border-color: #1B9CD4; }
.gs-relook-btn .gs-style-dots { width: 52px; height: 20px; gap: 4px; }
.gs-relook-btn .gs-style-dots i { width: 5px; height: 5px; }
@media (max-width: 420px) { .gs-style-card { padding: 10px 6px 9px; gap: 7px; } .gs-style-name { font-size: 12px; } .gs-style-dots { gap: 4px; } .gs-style-dots i { width: 6px; height: 6px; } }