/* ==========================================================================
   04-buttons-forms.css — Sunrise button system + form submit styles
   --------------------------------------------------------------------------
   Source of truth: reports/figma-style-guide.md §5 "Components — Buttons"
   Figma file: mIY3xFtVxnPjx9zUEZHWEN, Components frame 6501-3021

   Mapping from vc_button palette picks → Sunrise variants:

     button_color="color-213373"                  → Solid Dark
     button_color="color-213373"  outline="yes"   → Outline Dark
     button_color="color-118909"                  → Solid Dark (alt - blue-led)
     button_color="color-118909"  outline="yes"   → Outline Dark (alt)
     button_color="color-vyce"                    → Solid Light
     button_color="color-vyce"     outline="yes"  → Outline Light

   Sizes:
     size="btn-sm" → Sm   (40h, 16px-h-pad, 28r)
     (default)     → Med  (48h, 20px-h-pad, 24r)
     size="btn-lg" → Lrg  (56h, 20px-h-pad, 28r)

   Status: Sunrise spec. Replaces Goodman heritage palette (210407/589256/
   206917/169803/154758/xsdn). Last updated 2026-05-02.
   ========================================================================== */

/* ==========================================================================
   1. Shared base (typography + transitions only — NO global size override)
   ========================================================================== */

.btn {
	font-family: var(--sd-font-body, "Mona Sans"), system-ui, sans-serif !important;
	font-weight: 500 !important;
	letter-spacing: 0 !important;
	text-decoration: none !important;
	transition: background-color 0.2s ease-in-out,
	            border-color 0.2s ease-in-out,
	            color 0.2s ease-in-out,
	            opacity 0.2s ease-in-out !important;
}

/* ==========================================================================
   2. Sizes — Sm / Med / Lrg per Figma §5
   --------------------------------------------------------------------------
   Targets Uncode's vc_button size classes:
     size="btn-sm"  → .btn-sm
     (default)      → .btn (no size class)
     size="btn-lg"  → .btn-lg
   ========================================================================== */

/* Sm */
.btn.btn-sm {
	height: 40px !important;
	min-height: 40px !important;
	padding: 0 16px !important;
	border-radius: 28px !important;
	font-size: 14px !important;
	line-height: 38px !important;
	font-weight: 500 !important;
}

/* Med (default — no .btn-sm and no .btn-lg) */
.btn:not(.btn-sm):not(.btn-lg) {
	height: 48px !important;
	min-height: 48px !important;
	padding: 0 20px !important;
	border-radius: 24px !important;
	font-size: 16px !important;
	line-height: 46px !important;
	font-weight: 500 !important;
}

/* Lrg */
.btn.btn-lg {
	height: 56px !important;
	min-height: 56px !important;
	padding: 0 20px !important;
	border-radius: 28px !important;
	font-size: 18px !important;
	line-height: 54px !important;
	font-weight: 600 !important;
}

/* ==========================================================================
   3. Solid Dark — color-213373 (Blue Gray) + color-118909 (Blue)
   --------------------------------------------------------------------------
   Default fills with the picked palette color. Hover transitions to Sunrise
   Blue (#216ca2 = color-118909) for the blue-gray variant; for the blue-led
   variant we keep blue and overlay 20% white on :active.
   ========================================================================== */

.btn.btn-color-213373:not(.btn-outline),
.btn.btn-color-118909:not(.btn-outline) {
	background-color: var(--uncode-palette-color-213373) !important;
	border: 1px solid var(--uncode-palette-color-213373) !important;
	color: var(--uncode-palette-color-966107, #fcfaf7) !important;
}

.btn.btn-color-118909:not(.btn-outline) {
	background-color: var(--uncode-palette-color-118909) !important;
	border-color: var(--uncode-palette-color-118909) !important;
}

/* Uncode's inline CSS hover rules use a (0,6,0)-specific selector chain
   (.btn-color-XXX:not(.btn-hover-nobg):not(.btn-text-skin):not(.icon-animated):hover).
   We must match that chain or Uncode's hover (which fills solid + flips text white)
   will beat ours and clobber Figma states. */
.btn.btn-color-213373:not(.btn-outline):not(.btn-hover-nobg):not(.btn-text-skin):not(.icon-animated):hover,
.btn.btn-color-213373:not(.btn-outline):not(.btn-hover-nobg):not(.btn-text-skin):not(.icon-animated):focus,
.btn.btn-color-118909:not(.btn-outline):not(.btn-hover-nobg):not(.btn-text-skin):not(.icon-animated):hover,
.btn.btn-color-118909:not(.btn-outline):not(.btn-hover-nobg):not(.btn-text-skin):not(.icon-animated):focus {
	background-color: var(--uncode-palette-color-118909) !important;
	border-color: var(--uncode-palette-color-118909) !important;
	color: var(--uncode-palette-color-966107, #fcfaf7) !important;
}

.btn.btn-color-213373:not(.btn-outline):not(.btn-hover-nobg):not(.btn-text-skin):not(.icon-animated):active,
.btn.btn-color-118909:not(.btn-outline):not(.btn-hover-nobg):not(.btn-text-skin):not(.icon-animated):active {
	background-color: var(--uncode-palette-color-118909) !important;
	border-color: var(--uncode-palette-color-118909) !important;
	background-image: linear-gradient(rgba(255, 255, 255, 0.20), rgba(255, 255, 255, 0.20)) !important;
	color: var(--uncode-palette-color-966107, #fcfaf7) !important;
}

.btn.btn-color-213373:not(.btn-outline):disabled,
.btn.btn-color-213373:not(.btn-outline)[disabled],
.btn.btn-color-118909:not(.btn-outline):disabled,
.btn.btn-color-118909:not(.btn-outline)[disabled] {
	opacity: 0.7 !important;
	cursor: not-allowed !important;
}

/* ==========================================================================
   4. Solid Light — color-vyce (Yellow)
   --------------------------------------------------------------------------
   Yellow fill on dark surfaces, blue-gray text. Hover/active layer literal
   rgb(255,0,0) at 10%/20% alpha over the yellow per Figma spec — this is
   intentional and darkens yellow toward amber. Do not substitute.
   ========================================================================== */

.btn.btn-color-vyce:not(.btn-outline) {
	background-color: var(--uncode-palette-color-vyce) !important;
	border: 1px solid var(--uncode-palette-color-vyce) !important;
	color: var(--uncode-palette-color-213373) !important;
}

.btn.btn-color-vyce:not(.btn-outline):not(.btn-hover-nobg):not(.btn-text-skin):not(.icon-animated):hover,
.btn.btn-color-vyce:not(.btn-outline):not(.btn-hover-nobg):not(.btn-text-skin):not(.icon-animated):focus {
	background-color: var(--uncode-palette-color-vyce) !important;
	border-color: var(--uncode-palette-color-vyce) !important;
	background-image: linear-gradient(rgba(255, 0, 0, 0.10), rgba(255, 0, 0, 0.10)) !important;
	color: var(--uncode-palette-color-213373) !important;
}

.btn.btn-color-vyce:not(.btn-outline):not(.btn-hover-nobg):not(.btn-text-skin):not(.icon-animated):active {
	background-color: var(--uncode-palette-color-vyce) !important;
	border-color: var(--uncode-palette-color-vyce) !important;
	background-image: linear-gradient(rgba(255, 0, 0, 0.20), rgba(255, 0, 0, 0.20)) !important;
	color: var(--uncode-palette-color-213373) !important;
}

.btn.btn-color-vyce:not(.btn-outline):disabled,
.btn.btn-color-vyce:not(.btn-outline)[disabled] {
	opacity: 0.7 !important;
	cursor: not-allowed !important;
}

/* ==========================================================================
   5. Outline Dark — color-213373 / color-118909 with outline="yes"
   ========================================================================== */

.btn.btn-color-213373.btn-outline,
.btn.btn-color-118909.btn-outline {
	background-color: transparent !important;
	border: 1px solid var(--uncode-palette-color-213373) !important;
	color: var(--uncode-palette-color-213373) !important;
}

.btn.btn-color-118909.btn-outline {
	border-color: var(--uncode-palette-color-118909) !important;
	color: var(--uncode-palette-color-118909) !important;
}

.btn.btn-color-213373.btn-outline:not(.btn-hover-nobg):not(.btn-text-skin):not(.icon-animated):hover,
.btn.btn-color-213373.btn-outline:not(.btn-hover-nobg):not(.btn-text-skin):not(.icon-animated):focus,
.btn.btn-color-118909.btn-outline:not(.btn-hover-nobg):not(.btn-text-skin):not(.icon-animated):hover,
.btn.btn-color-118909.btn-outline:not(.btn-hover-nobg):not(.btn-text-skin):not(.icon-animated):focus {
	background-color: transparent !important;
	border-color: var(--uncode-palette-color-118909) !important;
	color: var(--uncode-palette-color-118909) !important;
}

.btn.btn-color-213373.btn-outline:not(.btn-hover-nobg):not(.btn-text-skin):not(.icon-animated):active,
.btn.btn-color-118909.btn-outline:not(.btn-hover-nobg):not(.btn-text-skin):not(.icon-animated):active {
	background-color: transparent !important;
	background-image: linear-gradient(rgba(255, 255, 255, 0.20), rgba(255, 255, 255, 0.20)) !important;
	border-color: var(--uncode-palette-color-118909) !important;
	color: var(--uncode-palette-color-118909) !important;
}

.btn.btn-color-213373.btn-outline:disabled,
.btn.btn-color-213373.btn-outline[disabled],
.btn.btn-color-118909.btn-outline:disabled,
.btn.btn-color-118909.btn-outline[disabled] {
	opacity: 0.7 !important;
	cursor: not-allowed !important;
}

/* ==========================================================================
   6. Outline Light — color-vyce with outline="yes"
   ========================================================================== */

.btn.btn-color-vyce.btn-outline {
	background-color: transparent !important;
	border: 1px solid var(--uncode-palette-color-vyce) !important;
	color: var(--uncode-palette-color-vyce) !important;
}

.btn.btn-color-vyce.btn-outline:not(.btn-hover-nobg):not(.btn-text-skin):not(.icon-animated):hover,
.btn.btn-color-vyce.btn-outline:not(.btn-hover-nobg):not(.btn-text-skin):not(.icon-animated):focus {
	background-color: transparent !important;
	background-image: linear-gradient(rgba(255, 0, 0, 0.10), rgba(255, 0, 0, 0.10)) !important;
	border-color: var(--uncode-palette-color-vyce) !important;
	color: var(--uncode-palette-color-vyce) !important;
}

.btn.btn-color-vyce.btn-outline:not(.btn-hover-nobg):not(.btn-text-skin):not(.icon-animated):active {
	background-color: transparent !important;
	background-image: linear-gradient(rgba(255, 0, 0, 0.20), rgba(255, 0, 0, 0.20)) !important;
	border-color: var(--uncode-palette-color-vyce) !important;
	color: var(--uncode-palette-color-vyce) !important;
}

.btn.btn-color-vyce.btn-outline:disabled,
.btn.btn-color-vyce.btn-outline[disabled] {
	opacity: 0.7 !important;
	cursor: not-allowed !important;
}

/* ==========================================================================
   7. :visited color protection — prevent browser purple-link recolor
   ========================================================================== */

/* :visited must match the default text color of each variant. Bundling
   solid + outline into one rule causes the wrong color to apply to one
   side (e.g. yellow text on yellow bg for Solid Light = invisible). */

/* Solid Dark visited → cream text (same as default) */
.btn.btn-color-213373:not(.btn-outline):visited,
.btn.btn-color-118909:not(.btn-outline):visited {
	color: var(--uncode-palette-color-966107, #fcfaf7) !important;
}

/* Outline Dark visited → blue-gray / blue text (same as default border + text) */
.btn.btn-color-213373.btn-outline:visited {
	color: var(--uncode-palette-color-213373) !important;
}
.btn.btn-color-118909.btn-outline:visited {
	color: var(--uncode-palette-color-118909) !important;
}

/* Solid Light visited → blue-gray text (same as default; NOT yellow) */
.btn.btn-color-vyce:not(.btn-outline):visited {
	color: var(--uncode-palette-color-213373) !important;
}

/* Outline Light visited → yellow text (same as default border + text) */
.btn.btn-color-vyce.btn-outline:visited {
	color: var(--uncode-palette-color-vyce) !important;
}

/* ==========================================================================
   8. .btn-wrap — flex container for groups of buttons (preserved from port)
   ========================================================================== */

.btn-wrap {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 16px;
}

.btn-wrap .btn {
	margin: 0;
}

/* ==========================================================================
   9. Mobile minimums (preserved from port)
   ========================================================================== */

@media (max-width: 569px) {
	.btn-sm-min {
		min-width: 240px !important;
	}
}

/* ==========================================================================
   10. Gravity Forms — submit button + global field tweaks (preserved)
   --------------------------------------------------------------------------
   Submit button repainted to Solid Dark per Sunrise standard (was Goodman
   gradient blue). Form-internal styles (chevron, field 14 spacing) untouched.
   ========================================================================== */

.gform_wrapper .gform_button {
	background-color: var(--uncode-palette-color-213373) !important;
	border: 1px solid var(--uncode-palette-color-213373) !important;
	border-radius: 24px !important;
	font-family: var(--sd-font-body, "Mona Sans"), system-ui, sans-serif !important;
	font-weight: 500 !important;
	font-size: 16px !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
	color: var(--uncode-palette-color-966107, #fcfaf7) !important;
	height: 48px !important;
	padding: 0 20px !important;
	line-height: 46px !important;
	cursor: pointer !important;
	transition: background-color 0.2s ease-in-out,
	            border-color 0.2s ease-in-out !important;
}

.gform_wrapper .gform_button:hover,
.gform_wrapper .gform_button:focus {
	background-color: var(--uncode-palette-color-118909) !important;
	border-color: var(--uncode-palette-color-118909) !important;
	color: var(--uncode-palette-color-966107, #fcfaf7) !important;
}

.gform_wrapper .gform_button:focus {
	outline: 2px solid var(--uncode-palette-color-118909) !important;
	outline-offset: 2px !important;
}

input[type="submit"] {
	font-family: var(--sd-font-body, "Mona Sans"), system-ui, sans-serif;
	font-size: 16px;
	font-weight: 500;
	line-height: 46px;
	border-radius: 24px;
	padding: 0 20px;
	height: 48px;
	background-color: var(--uncode-palette-color-213373);
	border: 1px solid var(--uncode-palette-color-213373);
	color: var(--uncode-palette-color-966107, #fcfaf7);
	cursor: pointer;
	transition: background-color 0.2s ease-in-out,
	            border-color 0.2s ease-in-out;
}

input[type="submit"]:hover,
input[type="submit"]:focus {
	background-color: var(--uncode-palette-color-118909);
	border-color: var(--uncode-palette-color-118909);
	color: var(--uncode-palette-color-966107, #fcfaf7);
}

/* Gravity Forms select chevron (preserved verbatim from port) */
.gform_wrapper .gfield--type-select select {
    background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0.292893 0.292893C0.683417 -0.097631 1.31658 -0.097631 1.70711 0.292893L5 3.58579L8.29289 0.292893C8.68342 -0.0976311 9.31658 -0.0976311 9.70711 0.292893C10.0976 0.683417 10.0976 1.31658 9.70711 1.70711L5.70711 5.70711C5.31658 6.09763 4.68342 6.09763 4.29289 5.70711L0.292893 1.70711C-0.0976311 1.31658 -0.0976311 0.683418 0.292893 0.292893Z' fill='rgba(17, 35, 55, 0.65)'/%3E%3C/svg%3E") !important;
    background-size: 12px !important;
    background-position: calc(100% - 14px) center !important;
    background-repeat: no-repeat !important;
    padding-right: 36px !important;
}

/* Gravity Forms — Consultation form (#14) — preserved from port */

#gform_wrapper_14 .gform_fields {
    row-gap: 13px !important;
}

#gform_wrapper_14 .gform_required_legend {
    margin-top: 0 !important;
    margin-bottom: 4px !important;
}

#gform_wrapper_14 #field_14_33 {
    display: none !important;
}

#gform_wrapper_14 #field_14_35 {
    font-size: 14px !important;
    font-style: italic !important;
}

.sd-contact-form-image .background-inner {
    border-radius: 16px !important;
}

#gform_wrapper_14 {
    margin-top: -5px !important;
    margin-bottom: -5px !important;
}