/* ============================================================
   /generate-my-site/ page styles.
   All rules prefixed .gms-. Single-column form, 64px controls,
   right-edge preview tab that opens a full-screen slide-in overlay.
   Custom color picker (no native OS pickers).
   ============================================================ */


/* ---------- Hero ---------- */

.gms-hero {
	min-height: 100vh;
	padding-top: 140px;
	padding-bottom: 60px;
	display: flex;
	align-items: center;
}
.gms-h1 {
	font-size: 52px;
	line-height: 1.05;
	margin: 0 0 24px;
	letter-spacing: -0.02em;
}
.gms-lede {
	font-size: 26px;
	line-height: 1.45;
	color: #C8CDD4;
	max-width: none;
}
.gms-hero-cta {
	margin-top: 48px;
}
.gms-btn-hero {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 64px;
	min-width: 240px;
	padding: 0 40px;
	font-size: 15px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	font-weight: 700;
	text-decoration: none;
	white-space: nowrap;
}
.gms-btn-hero:hover,
.gms-btn-hero:focus { text-decoration: none; }


/* ---------- Tool section (single column, centered form) ---------- */

.gms-tool-section {
	padding: 80px 0 100px;
	background: #0A0A0A;
}
.gms-form-wrap {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 32px;
}
.gms-form {
	background: transparent;
	border: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}


/* ---------- Row layout ----------
   Every row: label on left (fixed width), control on right (fluid).
   .gms-row-stack overrides to vertical for long content (description, keywords). */
.gms-row {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 24px 0;
}

/* Native file input: fully suppressed, label handles all UI */
.gms-file-hidden {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
	opacity: 0 !important;
	pointer-events: none !important;
}
/* Split row: two label+control pairs side by side.
   Grid ensures both halves are the same height. Inside each half the
   label sits at top, control pinned to the bottom, so controls line up
   horizontally even if one label has more hint text than the other. */
.gms-row-split {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 32px;
	align-items: stretch;
}
.gms-half {
	display: grid;
	grid-template-rows: 1fr auto;
	gap: 14px;
	min-width: 0;
}
.gms-half .gms-row-label { align-self: start; }
.gms-half .gms-row-control {
	max-width: none;
	align-self: end;
}

/* 2-col grid: labels top row, controls bottom row. Both labels and both
   controls line up horizontally regardless of hint length. */
.gms-grid-2 {
	display: grid;
	grid-template-columns: 1fr 1fr;
	column-gap: 32px;
	row-gap: 14px;
}
.gms-grid-2 .gms-row-control { max-width: none; }

/* 3-col grid: labels top row, controls bottom row. */
.gms-grid-3 {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	column-gap: 32px;
	row-gap: 14px;
}
.gms-grid-3 .gms-row-control { max-width: none; }

/* Light/Dark theme toggle: 64px pill split into two halves */
.gms-theme-toggle {
	position: relative;
	width: 100%;
	height: 64px;
	background: #0A0A0A;
	border: 1px solid #2A2F36;
	color: #F5F2EC;
	font: inherit;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	cursor: pointer;
	padding: 0;
	display: grid;
	grid-template-columns: 1fr 1fr;
	overflow: hidden;
}
.gms-theme-option {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: color 0.15s ease, background 0.15s ease;
	color: #8A929B;
	z-index: 1;
	position: relative;
}
.gms-theme-toggle[aria-checked="false"] .gms-theme-option-light {
	background: var(--mm-accent);
	color: #fff;
}
.gms-theme-toggle[aria-checked="true"] .gms-theme-option-dark {
	background: var(--mm-accent);
	color: #fff;
}

.gms-row-label {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding-top: 0;
}
.gms-row-num {
	font-family: 'IBM Plex Mono', 'SFMono-Regular', Consolas, monospace;
	font-size: 13px;
	letter-spacing: 0.14em;
	color: var(--mm-accent);
	font-weight: 500;
}
.gms-row-title {
	font-size: 20px;
	font-weight: 600;
	color: #F5F2EC;
	line-height: 1.3;
}
.gms-row-hint {
	font-size: 13px;
	color: #8A929B;
	line-height: 1.5;
}

.gms-row-control { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.gms-two-up { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }


/* ---------- Base 64px controls ----------
   Text inputs, textareas, selects, upload button, buttons.
   All uniform height, uniform radius (0), uniform border, uniform fill. */

.gms-input,
.gms-select,
.gms-upload-btn,
.gms-textarea,
.gms-color-field,
.gms-btn {
	height: 64px;
	background: #0A0A0A;
	border: 1px solid #2A2F36;
	color: #F5F2EC;
	font: inherit;
	font-size: 15px;
	padding: 0 20px;
	box-sizing: border-box;
	transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.gms-input,
.gms-select,
.gms-upload-btn,
.gms-color-field {
	width: 100%;
	display: flex;
	align-items: center;
}
.gms-input:focus,
.gms-select:focus,
.gms-textarea:focus {
	outline: 0;
	border-color: var(--mm-accent);
	background: #0D1116;
}
.gms-input::placeholder,
.gms-textarea::placeholder { color: #6A7078; }

.gms-textarea {
	width: 100%;
	min-height: 64px;
	height: auto;
	padding: 18px 20px;
	line-height: 1.5;
	resize: vertical;
	scrollbar-width: none;
}
.gms-textarea::-webkit-scrollbar { display: none; }
.gms-textarea-sm { min-height: 108px; }

.gms-keyword-meter {
	margin-top: 10px;
	font-size: 12px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #8A929B;
	font-weight: 600;
}
.gms-keyword-meter.is-under { color: #F5A79A; }
.gms-keyword-meter.is-ok    { color: #F0C86A; }
.gms-keyword-meter.is-good  { color: #55C8E6; }


/* ---------- Select wrap ---------- */
.gms-select-wrap {
	position: relative;
	width: 100%;
}
/* Fallback chevron only shown if Choices.js hasn't upgraded the select yet.
   Once Choices upgrades, .choices sibling appears and this chevron is hidden. */
.gms-select-wrap:not(:has(.choices))::after {
	content: '';
	position: absolute;
	right: 22px;
	top: 50%;
	width: 8px;
	height: 8px;
	border-right: 2px solid #8A929B;
	border-bottom: 2px solid #8A929B;
	transform: translateY(-70%) rotate(45deg);
	pointer-events: none;
}

/* Choices.js: force 64px height and match the rest of the form controls */
.gms-select-wrap .choices { width: 100%; }
.gms-select-wrap .choices__inner {
	background: #0A0A0A !important;
	border: 1px solid #2A2F36 !important;
	border-radius: 0 !important;
	min-height: 64px !important;
	height: 64px !important;
	padding: 0 48px 0 20px !important;
	display: flex !important;
	align-items: center !important;
	font-size: 15px !important;
	color: #F5F2EC !important;
}
.gms-select-wrap .choices.is-open .choices__inner,
.gms-select-wrap .choices.is-focused .choices__inner {
	border-color: var(--mm-accent) !important;
}
.gms-select-wrap .choices__list--single { padding: 0 !important; }
.gms-select-wrap .choices__list--single .choices__item {
	color: #F5F2EC !important;
	padding-right: 0 !important;
	font-size: 15px !important;
}
/* Only Choices.js chevron, sized/positioned for a 64px control */
.gms-select-wrap .choices[data-type*=select-one]::after {
	right: 22px !important;
	margin-top: -3px !important;
	border-top-color: #8A929B !important;
}

/* Font-preview options: each label rendered in its own family */
.gms-font-sample {
	font-size: 17px;
	line-height: 1.2;
	display: inline-block;
}
/* Muted state when nothing chosen yet */
.gms-font-placeholder {
	color: #6A7078;
	font-size: 15px;
}
/* Choices.js dropdown for the font selects: taller, scrollable, dark */
.gms-select-wrap .choices__list--dropdown .choices__list {
	max-height: 320px;
	scrollbar-width: none;
}
.gms-select-wrap .choices__list--dropdown .choices__list::-webkit-scrollbar {
	display: none;
}
.gms-select-wrap .choices__list--dropdown .choices__item {
	padding: 20px 20px !important;
	color: #C8CDD4 !important;
	line-height: 1.4 !important;
}
.gms-select-wrap .choices__list--dropdown .choices__item--selectable.is-highlighted {
	background: rgba(0, 180, 255, 0.08) !important;
	color: #F5F2EC !important;
}

/* Search input inside Choices dropdown (font search) */
.gms-select-wrap .choices__input {
	background: #060809 !important;
	color: #F5F2EC !important;
	border: 0 !important;
	border-bottom: 1px solid #1E242C !important;
	padding: 12px 16px !important;
	font-size: 13px !important;
	margin: 0 !important;
}


/* ---------- Upload button (styled label, matches every other 64px control) ---------- */
.gms-upload-btn {
	cursor: pointer;
	justify-content: flex-start;
	color: #C8CDD4;
}
.gms-upload-btn:hover {
	border-color: var(--mm-accent);
	color: #F5F2EC;
}
.gms-upload-btn.has-file {
	border-color: var(--mm-accent);
	color: #F5F2EC;
}


/* ---------- Color fields (open custom picker on click) ---------- */
.gms-color-row {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 16px;
	width: 100%;
}
.gms-color-field {
	cursor: pointer;
	justify-content: flex-start;
	gap: 14px;
	position: relative;
	width: 100%;
	text-align: left;
}
.gms-color-field:hover { border-color: var(--mm-accent); }
.gms-color-field:focus-visible {
	outline: 0;
	border-color: var(--mm-accent);
}
.gms-color-tip {
	position: absolute;
	left: 0;
	right: 0;
	bottom: calc(100% + 12px);
	z-index: 20;
	display: block;
	padding: 18px 20px;
	background: #0A0A0A;
	border: 1px solid #2A2F36;
	color: #F5F2EC;
	font-size: 13px;
	line-height: 1.55;
	text-transform: none;
	letter-spacing: 0;
	white-space: normal;
	opacity: 0;
	visibility: hidden;
	transform: translateY(4px);
	transition: opacity 0.15s ease, transform 0.15s ease, visibility 0s linear 0.15s;
	pointer-events: none;
	box-shadow: 0 12px 32px rgba(0,0,0,0.55);
}
.gms-color-tip strong {
	display: block;
	font-size: 13px;
	color: var(--mm-accent);
	margin-bottom: 6px;
	letter-spacing: 0.04em;
}
.gms-color-tip::after {
	content: "";
	position: absolute;
	left: 32px;
	bottom: -6px;
	width: 10px;
	height: 10px;
	background: #0A0A0A;
	border-right: 1px solid #2A2F36;
	border-bottom: 1px solid #2A2F36;
	transform: rotate(45deg);
}
.gms-color-field:hover .gms-color-tip,
.gms-color-field:focus-visible .gms-color-tip {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
	transition: opacity 0.15s ease, transform 0.15s ease, visibility 0s linear 0s;
}
.gms-color-name {
	font-size: 11px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #8A929B;
	flex-shrink: 0;
}
.gms-color-swatch {
	width: 28px;
	height: 28px;
	background: var(--swatch-color, #00B4FF);
	border: 1px solid rgba(255,255,255,0.15);
	flex-shrink: 0;
}
.gms-color-hex {
	font-family: 'IBM Plex Mono', Consolas, monospace;
	font-size: 13px;
	color: #C8CDD4;
	letter-spacing: 0.02em;
	margin-left: auto;
}


/* ---------- Buttons ---------- */
.gms-btn {
	cursor: pointer;
	width: auto;
	min-width: 160px;
	padding: 0 32px;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	white-space: nowrap;
}
.gms-btn-primary {
	background: var(--mm-accent);
	border-color: var(--mm-accent);
	color: #fff;
}
.gms-btn-primary:hover {
	background: #0099dd;
	border-color: #0099dd;
	color: #fff;
}
.gms-btn-ghost {
	background: transparent;
	border-color: #2A2F36;
	color: #F5F2EC;
}
.gms-btn-ghost:hover {
	border-color: var(--mm-accent);
	color: var(--mm-accent);
}
.gms-btn-sm {
	height: 40px;
	min-width: 0;
	padding: 0 18px;
	font-size: 12px;
}

.gms-actions {
	display: flex;
	gap: 12px;
	padding-top: 24px;
	flex-wrap: wrap;
	justify-content: flex-end;
}


/* ---------- Preview tab (fixed right edge, 40x120, pulses) ---------- */
.gms-preview-tab {
	position: fixed;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 40px;
	height: 120px;
	background: var(--mm-accent);
	border: 0;
	color: #fff;
	cursor: pointer;
	z-index: 90;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 0;
	animation: gmsPreviewPulse 2.6s ease-in-out infinite;
	transition: right 0.25s ease, background 0.15s ease;
}
.gms-preview-tab:hover {
	background: #0099dd;
	animation: none;
}
.gms-preview-tab-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.gms-preview-tab-label {
	writing-mode: vertical-rl;
	transform: rotate(180deg);
	font-size: 11px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	font-weight: 600;
}
@keyframes gmsPreviewPulse {
	0%, 100% { box-shadow: 0 0 0 0 rgba(0, 180, 255, 0.55); }
	50%      { box-shadow: -8px 0 32px 4px rgba(0, 180, 255, 0.25), 0 0 0 8px rgba(0, 180, 255, 0); }
}


/* ---------- Preview overlay (full-screen, sits above MM nav) ----------
   Nothing from middlemaan.com should be visible while the overlay is open.
   Just the iframe and two floating action buttons (open-in-new-tab, close).
*/
body.gms-overlay-open { overflow: hidden; }

.gms-preview-overlay {
	position: fixed;
	inset: 0;
	background: #0A0A0A;
	z-index: 2000;             /* MM nav is 1030, we sit above */
	transform: translateX(100%);
	transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
	visibility: hidden;
}
.gms-preview-overlay.is-open {
	transform: translateX(0);
	visibility: visible;
}
.gms-preview-overlay-frame {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	background: #fff;
	display: block;
}

/* "Open in new tab" button, bottom-left of overlay, blue */
.gms-preview-newtab-link {
	position: absolute;
	bottom: 20px;
	left: 20px;
	color: #fff;
	background: var(--mm-accent);
	padding: 12px 20px;
	font-size: 12px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	font-weight: 600;
	text-decoration: none;
	border: 0;
	z-index: 2;
	transition: background 0.15s ease;
}
.gms-preview-newtab-link:hover {
	background: #0099dd;
	color: #fff;
}

/* Preview tab: same element stays visible when overlay is open, sits ABOVE
   the overlay (z-index higher) so click always toggles. Label morphs. */
.gms-preview-overlay.is-open ~ .gms-preview-tab,
.gms-preview-tab.is-active {
	z-index: 2100;  /* above the overlay (2000) */
}
/* Tab stays blue whether open or closed */

/* Kill any FB messenger / chat widget bleed on this page */
.fb_dialog, .fb-customerchat, iframe[src*="facebook"] {
	display: none !important;
}


/* ---------- Custom color picker (modal) ---------- */
.gms-picker-overlay {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.72);
	z-index: 300;
	display: none;
	align-items: center;
	justify-content: center;
	padding: 20px;
}
.gms-picker-overlay.is-open { display: flex; }

.gms-picker {
	background: #101317;
	border: 1px solid #2A2F36;
	width: 100%;
	max-width: 360px;
	display: flex;
	flex-direction: column;
}
.gms-picker-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 16px 20px;
	border-bottom: 1px solid #1E242C;
}
.gms-picker-title {
	font-size: 13px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #8A929B;
	font-weight: 500;
}
.gms-picker-close {
	background: transparent;
	border: 0;
	color: #8A929B;
	cursor: pointer;
	padding: 4px;
	display: inline-flex;
}
.gms-picker-close:hover { color: var(--mm-accent); }

/* SV (saturation/value) plane, background set via CSS var --hue in JS */
.gms-picker-sv {
	position: relative;
	height: 220px;
	margin: 20px;
	cursor: crosshair;
	background:
		linear-gradient(to top, #000, transparent),
		linear-gradient(to right, #fff, hsl(var(--gms-hue, 200), 100%, 50%));
	touch-action: none;
}
.gms-picker-sv-cursor {
	position: absolute;
	left: var(--sv-x, 0);
	top:  var(--sv-y, 0);
	width: 16px;
	height: 16px;
	border-radius: 50%;
	border: 2px solid #fff;
	box-shadow: 0 0 0 1px rgba(0,0,0,0.4);
	transform: translate(-50%, -50%);
	pointer-events: none;
}

.gms-picker-hue {
	margin: 0 20px 20px;
}
.gms-picker-hue input[type="range"] {
	-webkit-appearance: none;
	appearance: none;
	width: 100%;
	height: 16px;
	border: 0;
	padding: 0;
	background: linear-gradient(to right,
		hsl(0,100%,50%),   hsl(60,100%,50%),
		hsl(120,100%,50%), hsl(180,100%,50%),
		hsl(240,100%,50%), hsl(300,100%,50%),
		hsl(360,100%,50%));
	cursor: pointer;
	outline: 0;
}
.gms-picker-hue input[type="range"]::-webkit-slider-thumb {
	-webkit-appearance: none;
	width: 8px;
	height: 22px;
	background: #fff;
	border: 1px solid #000;
	cursor: pointer;
}
.gms-picker-hue input[type="range"]::-moz-range-thumb {
	width: 8px;
	height: 22px;
	background: #fff;
	border: 1px solid #000;
	cursor: pointer;
}

.gms-picker-foot {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 0 20px 20px;
}
.gms-picker-preview {
	width: 40px;
	height: 40px;
	border: 1px solid #2A2F36;
	background: var(--swatch-color, #00B4FF);
	flex-shrink: 0;
}
.gms-picker-hex-input {
	flex: 1;
	height: 40px;
	background: #0A0A0A;
	border: 1px solid #2A2F36;
	color: #F5F2EC;
	padding: 0 12px;
	font-family: 'IBM Plex Mono', Consolas, monospace;
	font-size: 13px;
	letter-spacing: 0.02em;
	min-width: 0;
	box-sizing: border-box;
}
.gms-picker-hex-input:focus {
	outline: 0;
	border-color: var(--mm-accent);
}


/* ---------- Compare ---------- */
.gms-compare {
	padding: 100px 0;
	background: #0E1116;
	border-top: 1px solid #1E242C;
}
.gms-h2 {
	font-size: 42px;
	line-height: 1.1;
	margin: 16px 0 40px;
	letter-spacing: -0.02em;
}
.gms-compare-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 24px;
	margin-top: 40px;
}
.gms-compare-col {
	background: #0A0A0A;
	border: 1px solid #1E242C;
	padding: 32px;
}
.gms-compare-col-us {
	border-color: var(--mm-accent);
	background: linear-gradient(180deg, #0A0A0A 0%, #071118 100%);
}
.gms-compare-title {
	font-size: 20px;
	color: #F5F2EC;
	margin: 0 0 20px;
	font-weight: 600;
}
.gms-compare-list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.gms-compare-list li {
	font-size: 15px;
	line-height: 1.5;
	color: #C8CDD4;
	padding-left: 28px;
	position: relative;
}
.gms-compare-list-neg li::before {
	content: '\00d7';
	position: absolute;
	left: 4px;
	top: -2px;
	color: #FF3860;
	font-size: 20px;
	line-height: 1.5;
}
.gms-compare-list-pos li::before {
	content: '';
	position: absolute;
	left: 4px;
	top: 8px;
	width: 12px;
	height: 6px;
	border-left: 2px solid var(--mm-accent);
	border-bottom: 2px solid var(--mm-accent);
	transform: rotate(-45deg);
}


/* ---------- Responsive ---------- */
@media (max-width: 900px) {
	.gms-form { padding: 28px 20px; }
	.gms-row,
	.gms-row-stack,
	.gms-row-split,
	.gms-grid-2,
	.gms-grid-3,
	.gms-half {
		grid-template-columns: 1fr;
		gap: 14px;
		padding: 18px 0;
	}
	.gms-half { padding: 0; }
	.gms-row-label { padding-top: 0; }
	.gms-color-row { grid-template-columns: 1fr; }
	.gms-two-up { grid-template-columns: 1fr; }
	.gms-h1 { font-size: 44px; }
	.gms-h2 { font-size: 30px; }
	.gms-compare-grid { grid-template-columns: 1fr; }
	.gms-actions { flex-direction: column; }
	.gms-btn { width: 100%; }
}
@media (max-width: 640px) {
	.gms-hero { padding-top: 110px; padding-bottom: 40px; }
	.gms-h1 { font-size: 34px; }
	.gms-lede { font-size: 17px; }
	.gms-hero-meta { gap: 24px; }
	.gms-meta-num { font-size: 32px; }
	.gms-form-wrap { padding: 0 16px; }
	.gms-preview-tab { height: 100px; width: 36px; }
	.gms-preview-overlay-bar { padding: 12px 14px; gap: 10px; }
	.gms-preview-overlay-actions .gms-btn-sm { display: none; }
}