/*!
Theme Name: Helpotkotisivut
Theme URI: https://www.helpotkotisivut.fi/wordpress-kotisivut/
Template: kadence
Author: Helpotkotisivut
Author URI: https://www.helpotkotisivut.fi/
Description: Helppojen kotisivujen lapsiteema pohjautuen Kadence teemaan
Version: 0.3
License: GNU General Public License v3.0 (or later)
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Text Domain: kadence-child
*/

/* Theme customization starts here
-------------------------------------------------------------- */

/* Wordbreak */
h1, h2, h3, h4, h5, h6, p, h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
	word-break: keep-all;
	hyphens: none;
	word-wrap: initial;
}

/* Main Header shadow */
#masthead .item-at-start {
	transition: box-shadow ease-in-out 200ms;
}
#masthead .item-is-stuck {
	box-shadow: 0 20px 40px -12px rgba(0,0,0,0.05);
	transition: all ease-in-out 200ms;
}

/* Mobile menu */
.drawer-header {padding: 0 1rem 0!important;}
.popup-drawer .drawer-content {padding: 0 1rem 2rem!important;}

/* Links no underline */
a, p a {text-decoration: none!important;}

/* Fluent Forms */
.fluentform form {
	margin: 0!important;
}
.fluentform input, .fluentform textarea , .fluentform select {
	padding: .6rem !important;
	border-radius: 0!important;
	font-size: 0.95rem!important;
}
.fluentform .ff-el-group {
	margin-bottom: 0.8rem !important;
}
[type="checkbox"], [type="radio"] {
    accent-color: #ffffff;
}
.wpsr-reviews-badge-wrapper {
	text-align: left !important;
}
.gdpr-consent-clause {
	font-size: 13px !important;
}
.gdpr-consent-clause a {
	font-weight: 700 !important;
}
.tummataustainen-lomake a {
	color: #FFF !important;
	text-decoration: underline !important;
}
@media (max-width:767px) {
	.ff-el-group.ff_list_inline label > span, .ff-el-input--content label > span {
		font-size: 1rem !important;
	}
	.fluentform .ff-el-form-check-label .ff-el-form-check-input {
		top: 0! important;
		width: 1.3rem !important;
		height: 1.3rem !important;
		margin-right: .4rem !important;
	}
}
@media (min-width:768px) {
	.fluentform .ff-el-form-check-label .ff-el-form-check-input {
		top: 0! important;
		width: 1.2rem !important;
		height: 1.2rem !important;
		margin-right: .4rem !important;
	}
	.ff-el-group.ff_list_inline label > span, .ff-el-input--content label > span {
		font-size: 1rem !important;
	}
	.fluentform .ff-el-form-check {
    	margin-bottom: 0px !important;
	}
	.fluentform .ff-el-tc {
		margin-top: -0.4rem !important;
    	font-size: 0.95rem !important;
    	margin-bottom: 0.4rem !important;
	}
}

@media only screen and (min-width: 641px) {
    .fluentform .ff-el-group.ff_list_inline .ff-el-form-check {
        margin: 0 15px 0px 0 !important;
    }
}
.fluentform .ff-el-form-control:focus {
	border-color: var(--global-palette1) !important;
}
.fluentform .ff-el-form-control {
	border: none !important;
	font-family: var(--global-body-font-family) !important;
}
.single-content .fluentform {
	padding-top: 0.5rem;
	margin-bottom: -0.5rem !important;
}
[type="checkbox"], [type="radio"] {
	accent-color: var(--global-palette1);
}
@media only screen and (max-width:767px) {
	.fluentform .ff-el-tc label.ff_tc_label>div, .fluentform .ff-el-tc label.ff_tc_label>span {
		display: inline !important;
		font-size: 0.8rem !important;
	}
	.fluentform .ff-el-tc {
		margin-top: -5px !important;
		margin-bottom: -3px !important;
	}
}
.ff-default textarea {
    min-height: 40px !important;
}
.ff-default .ff-el-input--label label {
    font-size: 1.1rem;
}
.tummataustainen-lomake .ff-el-is-required.asterisk-right label:after {
    color: #FFF !important;
}

/* Chatbox Fluent forms */
#fluentform_5 {
	margin: -1.5rem 0 !important;
}
#fluentform_5 .ff-btn-lg {
	border-radius: 0 !important;
	font-size: 16px;
}
#fluentform_5 input[type="text"], #fluentform_5 input[type="email"], #fluentform_5 input[type="url"], #fluentform_5 input[type="password"], #fluentform_5 input[type="search"], #fluentform_5 input[type="number"], #fluentform_5 input[type="tel"], #fluentform_5 input[type="range"], #fluentform_5 input[type="date"], #fluentform_5 input[type="month"], #fluentform_5 input[type="week"], #fluentform_5 input[type="time"], #fluentform_5 input[type="datetime"], #fluentform_5 input[type="datetime-local"], #fluentform_5 input[type="color"], #fluentform_5 textarea {
	background: none !important;
}
#fluentform_5 .ff-el-form-control {
	border-bottom: 1px solid #d5d5d5 !important;
	box-shadow: none !important;
	border-left: 0 !important;
	border-right: 0 !important;
	border-top: 0 !important;
	padding-left: 0 !important;
}

@media only screen and (min-width:1025px) and (max-width:1600px) {
	.copyright-palkki > .kt-row-column-wrap {
		grid-template-columns: minmax(0, 1fr) !important;
		row-gap: 0.5rem !important;
	}
	.helpot-backlink {
		text-align: left !important;
	}
}

.palveluotsikko {
    padding-bottom: 0;
    transition: 0.2s all ease-in-out;
}
.palvelupalsta:hover .palveluotsikko {
    padding-bottom: 0.5rem;
    transition: .2s all ease-in-out;
}

.menu-item.non-clickable > a {
    pointer-events: none;
    cursor: default;
}

@media (min-width:1025px) {
	.aikatauluosio:before {
		content: '';
		background: url('../../uploads/2025/12/karkki-1.png');
		background-size: 100% 100%;
		background-repeat: no-repeat;
		position: absolute;
		left: 0;
		top: 5%;
		width: 400px;
		height: 255px;
		transform: translateX(-150%) rotate(0deg); /* start off left */
		opacity: 0;
		transition: transform .4s cubic-bezier(.445,.05,.55,.95), opacity .4s;
	}
	.aikatauluosio.reveal:before {
		transform: translateX(-5%) rotate(0deg);
		opacity: 1;
	}

	.aikatauluosio:after {
		content: '';
		background: url('../../uploads/2025/12/karkki-2.png');
		background-size: 100% 100%;
		background-repeat: no-repeat;
		position: absolute;
		right: 0;
		top: 33%;
		width: 400px;
		height: 281px;
		transform: translateX(150%) rotate(-17deg); /* start off right */
		opacity: 0;
		transition: transform .4s cubic-bezier(.445,.05,.55,.95), opacity .4s;
	}
	.aikatauluosio.reveal:after {
		transform: translateX(0) rotate(-17deg);
		opacity: 1;
	}
}

@media (min-width: 992px) {
    .reittijana .wp-block-getwid-content-timeline__line {
        left: 30px !important;
    }
    .reittijana .wp-block-getwid-content-timeline-item.has-card-right .wp-block-getwid-content-timeline-item__wrapper, .reittijana .wp-block-getwid-content-timeline-item:nth-child(2n) .wp-block-getwid-content-timeline-item__wrapper {
        flex-direction: row !important;
    }
    .wp-block-getwid-content-timeline-item__card {
        order: 1;
		flex: 0 0 92.3333% !important;
    }
	.wp-block-getwid-content-timeline-item__point {
		flex: 50% 1 1;
		order: 0;
	}
	.wp-block-getwid-content-timeline-item__content-wrapper {
        margin-right: 50%;
    }
	.wp-block-getwid-content-timeline-item__card {
		background-color: transparent !important;
	}
}

embed, iframe, object {
    border-radius: 26px !important;
}
.marqueeteksti {
	-webkit-text-stroke: 2px rgba(255,255,255,0.1);
}

.someikoniosio {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

@media (min-width:1125px) {
	.someikonit {
		width: 1100px !important;
	}
	.somepalsta > .kt-inside-inner-col {
		width: 248px !important;
	}
}
@media (min-width:1025px) and (max-width:1124px) {
	.someikonit {
		width: 900px !important;
	}
	.somepalsta > .kt-inside-inner-col {
		width: 200px !important;
		height: 200px !important;
		min-height: 200px !important;
	}
}
@media (min-width:768px) and (max-width:1024px) {
	.someikonit {
		width: 700px !important;
	}
	.somepalsta > .kt-inside-inner-col {
		width: 150px !important;
		height: 150px !important;
		min-height: 150px !important;
	}
}

@media (min-width:481px) and (max-width:767px) {
	.someikonit {
		width: 380px !important;
	}
	.somepalsta > .kt-inside-inner-col {
		width: 100px !important;
		height: 100px !important;
		min-height: 100px !important;
	}
	.someikonit > .kt-row-column-wrap > .wp-block-kadence-column {
		text-align: center !important;
		margin: 0 auto !important;
	}
	.somepalsta-parent > .kt-inside-inner-col {
		min-height: 150px !important;
	}
}

@media (max-width:480px) {
	.someikonit {
		width: 340px !important;
	}
	.somepalsta > .kt-inside-inner-col {
		width: 80px !important;
		height: 80px !important;
		min-height: 80px !important;
	}
	.someikonit > .kt-row-column-wrap > .wp-block-kadence-column {
		text-align: center !important;
		margin: 0 auto !important;
	}
	.somepalsta-parent > .kt-inside-inner-col {
		min-height: 100px !important;
	}
	.somekuvake {
	    max-width: 50px !important;
	}
}

.wpgmza_map {
    border-radius: 25px !important;
}

/* Yhteydenotto */
.ff-btn-submit, .fluentform .ff_upload_btn.ff-btn {
    border: 2px solid #f5b6dc !important;
    border-radius: 8px !important;
	background: transparent !important;
}
.ff-btn-submit:hover, .ff-btn-submit:focus, .ff-btn-submit:active, .fluentform .ff_upload_btn.ff-btn {
	background: #F5B6DC !important;
	color: var(--global-palette4) !important;
}

.fluentform .ff-el-form-control {
    border-radius: 8px !important;
	color: var(--global-palette4) !important;
	font-family: antique-olive !important;
	font-weight: 300 !important;
}

/* Valikko */
@media (min-width:1025px) and (max-width:1200px) {
	.main-navigation .primary-menu-container > ul li.menu-item > a, .secondary-navigation .secondary-menu-container > ul li.menu-item > a {
		font-size: 1.3rem !important;
	}
}

@media (min-width:1025px) {
	.someosio:before {
		content: '';
		background: url('../../uploads/2025/12/karkki-3.png');
		background-size: 100% 100%;
		background-repeat: no-repeat;
		position: absolute;
		left: 0;
		top: -4%;
		width: 400px;
		height: 247px;
		transform: translateX(-150%) rotate(0deg); /* start off-screen LEFT */
		opacity: 0;
		transition: transform .4s cubic-bezier(.445,.05,.55,.95), opacity .4s;
		z-index: 10;
	}
	
	.someosio.reveal:before {
		transform: translateX(-5%) rotate(0deg);
		opacity: 1;
	}

	.someosio:after {
		content: '';
		background: url('../../uploads/2025/12/karkki-4.png');
		background-size: 100% 100%;
		background-repeat: no-repeat;
		position: absolute;
		right: 0;
		bottom: -5%;
		width: 400px;
		height: 277px;
		z-index: 10;
		transform: translateX(150%) rotate(-17deg);
		opacity: 0;
		transition: transform .4s cubic-bezier(.445,.05,.55,.95), opacity .4s;
	}
	.someosio.reveal:after {
		transform: translateX(0) rotate(-17deg);
		opacity: 1;
	}
}

@media (min-width:1025px) {
	.mika-makee-osio:before {
		content: '';
		background: url('../../uploads/2025/12/karkki-5.png');
		background-size: 100% 100%;
		background-repeat: no-repeat;
		position: absolute;
		left: 0;
		top: -13%;
		width: 400px;
		height: 253px;
		transform: translateX(-150%) rotate(0deg); /* start off-screen LEFT */
		opacity: 0;
		transition: transform .4s cubic-bezier(.445,.05,.55,.95), opacity .4s;
		z-index: 10;
	}
	
	.mika-makee-osio.reveal:before {
		transform: translateX(-5%) rotate(0deg);
		opacity: 1;
	}
}

/* Kartta */
.wpgmza_map .wpgmza-inner-stack > .grouping.visible {
    background: #f5b6dc !important;
	color: var(--global-palette4) !important;
}

.wpgmza_map .wpgmza-inner-stack .wpgmza-panel-view svg.wpgmza-mark path, .wpgmza-standalone-component .wpgmza-panel-view svg.wpgmza-mark path {
    fill: var(--global-palette4) !important;
}

.wpgmza_map .wpgmza-inner-stack .wpgmza-panel-view svg.wpgmza-mark circle, .wpgmza-standalone-component .wpgmza-panel-view svg.wpgmza-mark circle {
    stroke: var(--global-palette4) !important;
}

.hidden-by-weekday {
	display: none !important;
}

.hidden-by-js {
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s;
	height: 0 !important;
}

.torstaipainike.active,
.perjantaipainike.active,
.lauantaipainike.active,
.sunnuntaipainike.active {
    background-color: #60112d !important;
	border: 1px solid #60112d !important;
}

@media (max-width:767px) {
	.wp-block-kadence-tabs .kt-tabs-title-list {
		margin-right: 0px !important;
	}
}

.wpsr-container {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

.wpsr-ig-post {
    margin-bottom: 15px !important;
}

.wpgmza-marker-listing-category-filter {
	display: none !important;
}

.cky-banner-element {
	cursor: pointer;
}

/* karkkitekstari */
.candy-phone-wink {
  display: inline-block;
  animation: candy-phone-float 5.5s ease-in-out infinite;
  transform-origin: center center;
  will-change: transform;
}

.candy-phone-wink img {
  display: block;
  height: auto;
}

@keyframes candy-phone-float {
  0%, 100% {
    transform: translate3d(0, 0, 0) rotate(-1deg);
  }

  50% {
    transform: translate3d(0, -10px, 0) rotate(1.5deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .candy-phone-wink {
    animation: none;
  }
}



/* =========================================================
   MAKEE SMS FORM — Fluent Forms scoped CSS
   Current target: Fluent Form ID 15

   Future second form option:
   Wrap another form in:
   <div class="makee-sms-form">[fluentform id="XX"]</div>
   ========================================================= */


/* ---------- Main scope ---------- */

:is(#fluentform_15, .makee-sms-form .fluentform) {
  --makee-blue: #1a26ba;
  --makee-blue-dark: #111a8f;
  --makee-blue-lite: rgba(26, 38, 186, 0.08);
  --makee-blue-glow: rgba(26, 38, 186, 0.18);

  --makee-white: #ffffff;
  --makee-off: #f8f8f8;
  --makee-light: #f2f2f2;
  --makee-border: #e5e5e5;
  --makee-text: #1a1a1a;
  --makee-text-soft: #555555;
  --makee-muted: #999999;
  --makee-warning-bg: #fffbf0;
  --makee-warning-border: #f0e0b0;
  --makee-shadow: 0 2px 20px rgba(0, 0, 0, 0.07);

  display: block !important;
  width: min(500px, calc(100vw - 28px)) !important;
  max-width: 500px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  float: none !important;
  clear: both !important;
  font-family: "Poppins", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--makee-text);
}

#fluentform_15,
#fluentform_15 * {
  box-sizing: border-box;
}

:is(#fluentform_15, .makee-sms-form .fluentform) form {
  width: 100%;
  margin: 0 auto !important;
}


/* ---------- Prevent page layout from pushing form right ---------- */

body .entry-content:has(#fluentform_15),
body .wp-block-post-content:has(#fluentform_15),
body .elementor-widget-container:has(#fluentform_15),
body .fluentform-widget-wrapper:has(#fluentform_15) {
  display: block !important;
  justify-content: initial !important;
  align-items: initial !important;
  text-align: initial !important;
}


/* =========================================================
   STEP INDICATOR — separate segmented lines, no visible mask
   ========================================================= */

#fluentform_15 .ff-step-container {
  width: 100% !important;
  max-width: 500px !important;
  margin: 0 auto !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  overflow: visible !important;
}

#fluentform_15 .ff-step-header {
  width: 100% !important;
  max-width: 500px !important;
  margin: 0 auto !important;
  padding: 0 0 1.45rem !important;
  background: transparent !important;
  overflow: visible !important;
}

/* Step row */
#fluentform_15 .ff-step-titles {
  --circle: 30px;
  --line-top: 23px;
  --progress-opacity-1: 0;
  --progress-opacity-2: 0;

  position: relative !important;
  display: grid !important;
  grid-template-columns: 1fr 1fr 1fr !important;
  align-items: center !important;
  width: 100% !important;
  min-height: 46px !important;
  margin: 0 !important;
  padding: 8px 0 !important;
  list-style: none !important;
  overflow: visible !important;
}

#fluentform_15 .ff-step-titles::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  top: var(--line-top) !important;
  height: 2px !important;
  background:
    linear-gradient(
      to right,
      transparent 0%,
      transparent 20%,
      var(--makee-border) 20%,
      var(--makee-border) 41%,
      transparent 41%,
      transparent 59%,
      var(--makee-border) 59%,
      var(--makee-border) 78%,
      transparent 78%,
      transparent 100%
    ) !important;
  border-radius: 999px !important;
  transform: translateY(-50%) !important;
  z-index: 0 !important;
  pointer-events: none !important;
}

#fluentform_15 .ff-step-titles::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  top: var(--line-top) !important;
  height: 2px !important;
  background:
    linear-gradient(
      to right,
      transparent 0%,
      transparent 20%,
      rgba(26, 38, 186, var(--progress-opacity-1)) 20%,
      rgba(26, 38, 186, var(--progress-opacity-1)) 41%,
      transparent 41%,
      transparent 59%,
      rgba(26, 38, 186, var(--progress-opacity-2)) 59%,
      rgba(26, 38, 186, var(--progress-opacity-2)) 78%,
      transparent 78%,
      transparent 100%
    ) !important;
  border-radius: 999px !important;
  transform: translateY(-50%) !important;
  z-index: 1 !important;
  pointer-events: none !important;
}

/* Progress states */
#fluentform_15 .ff-step-titles:has(li:nth-child(1).ff_active) {
  --progress-opacity-1: 0;
  --progress-opacity-2: 0;
}

#fluentform_15 .ff-step-titles:has(li:nth-child(2).ff_active) {
  --progress-opacity-1: 1;
  --progress-opacity-2: 0;
}

#fluentform_15 .ff-step-titles:has(li:nth-child(3).ff_active) {
  --progress-opacity-1: 1;
  --progress-opacity-2: 1;
}

/* Step items */
#fluentform_15 .ff-step-titles > li {
  position: relative !important;
  z-index: 3 !important;
  display: flex !important;
  align-items: center !important;
  gap: 0.45rem !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  filter: none !important;
  color: var(--makee-muted) !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  overflow: visible !important;
}

/* Position steps */
#fluentform_15 .ff-step-titles > li:nth-child(1) {
  justify-self: start !important;
}

#fluentform_15 .ff-step-titles > li:nth-child(2) {
  justify-self: center !important;
}

#fluentform_15 .ff-step-titles > li:nth-child(3) {
  justify-self: end !important;
}

/* Disable old Fluent/previous connector lines */
#fluentform_15 .ff-step-titles > li::after {
  display: none !important;
  content: none !important;
}

/* Fixed bubble numbers */
#fluentform_15 .ff-step-titles > li::before {
  width: var(--circle) !important;
  height: var(--circle) !important;
  flex: 0 0 var(--circle) !important;
  border-radius: 50% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #ffffff !important;
  border: 2px solid var(--makee-border) !important;
  color: var(--makee-muted) !important;
  font-size: 0.72rem !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  box-sizing: border-box !important;
  position: relative !important;
  z-index: 4 !important;
  transition: all 0.25s ease !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08) !important;
}

#fluentform_15 .ff-step-titles > li:nth-child(1)::before {
  content: "1" !important;
}

#fluentform_15 .ff-step-titles > li:nth-child(2)::before {
  content: "2" !important;
}

#fluentform_15 .ff-step-titles > li:nth-child(3)::before {
  content: "3" !important;
}

/* Labels */
#fluentform_15 .ff-step-title-text {
  display: inline-block !important;
  position: relative !important;
  z-index: 4 !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  filter: none !important;
  color: inherit !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  text-align: left !important;
}

/* Active step */
#fluentform_15 .ff-step-titles > li.ff_active {
  color: var(--makee-blue) !important;
}

#fluentform_15 .ff-step-titles > li.ff_active::before {
  background: var(--makee-blue) !important;
  border-color: var(--makee-blue) !important;
  color: #ffffff !important;
  box-shadow: 0 0 0 6px var(--makee-blue-glow) !important;
}

/* Completed step support */
#fluentform_15 .ff-step-titles > li.ff_completed,
#fluentform_15 .ff-step-titles > li.ff_complete,
#fluentform_15 .ff-step-titles > li.ff_done {
  color: var(--makee-blue) !important;
}

#fluentform_15 .ff-step-titles > li.ff_completed::before,
#fluentform_15 .ff-step-titles > li.ff_complete::before,
#fluentform_15 .ff-step-titles > li.ff_done::before {
  background: var(--makee-blue) !important;
  border-color: var(--makee-blue) !important;
  color: #ffffff !important;
}

/* Prevent active bubble glow clipping */
#fluentform_15,
#fluentform_15 form,
#fluentform_15 .ff-step-container,
#fluentform_15 .ff-step-header,
#fluentform_15 .ff-step-titles,
#fluentform_15 .ff-step-titles > li {
  overflow: visible !important;
}


/* =========================================================
   CARD BODY
   ========================================================= */

#fluentform_15 .ff-step-body {
  background: #ffffff !important;
  border: 1px solid var(--makee-border) !important;
  border-radius: 16px !important;
  box-shadow: var(--makee-shadow) !important;
  padding: 1.5rem !important;
  overflow: hidden !important;
}


/* ---------- General field spacing + labels ---------- */

:is(#fluentform_15, .makee-sms-form .fluentform) .ff-el-group {
  margin-bottom: 1.1rem;
}

:is(#fluentform_15, .makee-sms-form .fluentform) .ff-el-input--label {
  margin-bottom: 0.45rem;
}

:is(#fluentform_15, .makee-sms-form .fluentform) .ff-el-input--label label {
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--makee-muted);
  line-height: 1.3;
}

:is(#fluentform_15, .makee-sms-form .fluentform) .ff-el-is-required.asterisk-right label::after {
  color: var(--makee-blue);
}


/* ---------- Inputs / phone field ---------- */

:is(#fluentform_15, .makee-sms-form .fluentform) input.ff-el-form-control,
:is(#fluentform_15, .makee-sms-form .fluentform) .iti input {
  width: 100%;
  min-height: 48px;
  padding: 0.8rem 1rem;
  background: var(--makee-blue-lite) !important;
  border: 1.5px solid rgba(26, 38, 186, 0.22) !important;
  border-radius: 10px !important;
  color: var(--makee-text);
  font-size: 1rem;
  font-weight: 500;
  font-family: inherit;
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

:is(#fluentform_15, .makee-sms-form .fluentform) input.ff-el-form-control:focus,
:is(#fluentform_15, .makee-sms-form .fluentform) .iti input:focus {
  background: #ffffff !important;
  border-color: var(--makee-blue) !important;
  box-shadow: 0 0 0 4px var(--makee-blue-glow) !important;
}

:is(#fluentform_15, .makee-sms-form .fluentform) input::placeholder {
  color: var(--makee-muted);
  font-weight: 400;
}

:is(#fluentform_15, .makee-sms-form .fluentform) .iti {
  width: 100%;
}

:is(#fluentform_15, .makee-sms-form .fluentform) .iti__selected-country {
  border-radius: 10px 0 0 10px;
}


/* ---------- Main area bubbles ---------- */

:is(#fluentform_15, .makee-sms-form .fluentform) .makee-city-bubbles .ff-el-input--content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
}

:is(#fluentform_15, .makee-sms-form .fluentform) .makee-city-bubbles .ff-el-form-check,
:is(#fluentform_15, .makee-sms-form .fluentform) .makee-area-bubbles .ff-el-form-check {
  margin: 0 !important;
  padding: 0 !important;
}

:is(#fluentform_15, .makee-sms-form .fluentform) .makee-city-bubbles input[type="radio"],
:is(#fluentform_15, .makee-sms-form .fluentform) .makee-area-bubbles input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

:is(#fluentform_15, .makee-sms-form .fluentform) .makee-city-bubbles .ff-el-form-check-label {
  display: flex !important;
  align-items: center;
  justify-content: center;
  min-height: 58px;
  width: 100%;
  padding: 0.85rem 0.5rem;
  background: var(--makee-off);
  border: 1.5px solid var(--makee-border) !important;
  border-radius: 10px !important;
  color: var(--makee-text-soft);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}


/* ---------- Subarea bubbles ---------- */

:is(#fluentform_15, .makee-sms-form .fluentform) .makee-area-bubbles {
  animation: makeeSlideIn 0.22s ease;
}

:is(#fluentform_15, .makee-sms-form .fluentform) .makee-area-bubbles .ff-el-input--content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.4rem;
}

:is(#fluentform_15, .makee-sms-form .fluentform) .makee-area-bubbles .ff-el-form-check-label {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  min-height: 44px;
  width: 100%;
  padding: 0.6rem 0.75rem;
  background: var(--makee-off);
  border: 1.5px solid var(--makee-border) !important;
  border-radius: 8px !important;
  color: var(--makee-text-soft);
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.25;
  text-align: left;
  cursor: pointer;
  transition: all 0.15s ease;
}

:is(#fluentform_15, .makee-sms-form .fluentform) .makee-area-bubbles .ff-el-form-check-label span {
  width: 100%;
  display: flex;
  justify-content: space-between;
  gap: 0.45rem;
}


/* ---------- Bubble hover + selected states ---------- */

:is(#fluentform_15, .makee-sms-form .fluentform) .makee-city-bubbles .ff-el-form-check-label:hover,
:is(#fluentform_15, .makee-sms-form .fluentform) .makee-area-bubbles .ff-el-form-check-label:hover {
  border-color: var(--makee-blue) !important;
  background: var(--makee-blue-lite);
  color: var(--makee-text);
}

:is(#fluentform_15, .makee-sms-form .fluentform) .makee-city-bubbles .ff-el-form-check:has(input[type="radio"]:checked) .ff-el-form-check-label,
:is(#fluentform_15, .makee-sms-form .fluentform) .makee-area-bubbles .ff-el-form-check:has(input[type="radio"]:checked) .ff-el-form-check-label {
  border-color: var(--makee-blue) !important;
  background: var(--makee-blue-lite);
  color: var(--makee-blue);
  box-shadow: 0 0 0 3px var(--makee-blue-glow);
}


/* ---------- Summary box ---------- */

:is(#fluentform_15, .makee-sms-form .fluentform) .makee-summary-box {
  background: var(--makee-off);
  border: 1px solid var(--makee-border) !important;
  border-radius: 10px !important;
  padding: 0.9rem 1rem;
  margin-bottom: 1rem;
}

:is(#fluentform_15, .makee-sms-form .fluentform) .makee-summary-row {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  padding: 0.3rem 0;
  border-bottom: 1px solid var(--makee-border);
}

:is(#fluentform_15, .makee-sms-form .fluentform) .makee-summary-row:last-child {
  border-bottom: 0;
}

:is(#fluentform_15, .makee-sms-form .fluentform) .makee-summary-label {
  flex: 0 0 70px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--makee-muted);
}

:is(#fluentform_15, .makee-sms-form .fluentform) .makee-summary-value {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--makee-text);
}

:is(#fluentform_15, .makee-sms-form .fluentform) .makee-green {
  color: var(--makee-blue);
}


/* ---------- Consent / terms box ---------- */

:is(#fluentform_15, .makee-sms-form .fluentform) .ff-el-tc {
  background: var(--makee-warning-bg);
  border: 1.5px solid var(--makee-warning-border) !important;
  border-radius: 10px !important;
  padding: 0.85rem 1rem;
  margin-bottom: 1.1rem;
}

:is(#fluentform_15, .makee-sms-form .fluentform) .ff-el-tc .ff-el-form-check-label {
  display: flex !important;
  align-items: flex-start;
  gap: 0.65rem;
  margin: 0;
  cursor: pointer;
}

:is(#fluentform_15, .makee-sms-form .fluentform) .ff-el-tc input[type="checkbox"] {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  accent-color: var(--makee-blue);
  cursor: pointer;
  flex-shrink: 0;
}

:is(#fluentform_15, .makee-sms-form .fluentform) .ff-el-tc .ff_t_c,
:is(#fluentform_15, .makee-sms-form .fluentform) .ff-el-tc label {
  font-size: 0.74rem;
  color: var(--makee-text-soft);
  line-height: 1.65;
}

:is(#fluentform_15, .makee-sms-form .fluentform) .ff-el-tc a {
  color: var(--makee-blue);
  font-weight: 700;
  text-decoration: none;
}

:is(#fluentform_15, .makee-sms-form .fluentform) .ff-el-tc a:hover {
  text-decoration: underline;
}


/* ---------- Navigation buttons ---------- */

:is(#fluentform_15, .makee-sms-form .fluentform) .step-nav {
  margin-top: 1rem;
}

:is(#fluentform_15, .makee-sms-form .fluentform) .ff-btn {
  border: none !important;
  border-radius: 10px !important;
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
}

:is(#fluentform_15, .makee-sms-form .fluentform) .ff-btn-next,
:is(#fluentform_15, .makee-sms-form .fluentform) .ff-btn-submit {
  min-height: 52px;
  padding: 0.9rem 1rem !important;
  background: var(--makee-blue) !important;
  color: #ffffff !important;
  box-shadow: 0 4px 16px rgba(26, 38, 186, 0.28) !important;
}

:is(#fluentform_15, .makee-sms-form .fluentform) .ff-btn-next:hover,
:is(#fluentform_15, .makee-sms-form .fluentform) .ff-btn-submit:hover {
  background: var(--makee-blue-dark) !important;
  box-shadow: 0 6px 20px rgba(26, 38, 186, 0.38) !important;
  transform: translateY(-1px);
}

:is(#fluentform_15, .makee-sms-form .fluentform) .ff-btn:active {
  transform: translateY(0);
}

:is(#fluentform_15, .makee-sms-form .fluentform) .ff-btn-prev {
  min-height: 44px;
  padding: 0.65rem 0 !important;
  background: transparent !important;
  color: var(--makee-muted) !important;
  box-shadow: none !important;
  font-size: 0.8rem;
  font-weight: 600;
}

:is(#fluentform_15, .makee-sms-form .fluentform) .ff-btn-prev:hover {
  color: var(--makee-text) !important;
  transform: none;
}

:is(#fluentform_15, .makee-sms-form .fluentform) .ff_submit_btn_wrapper,
:is(#fluentform_15, .makee-sms-form .fluentform) .ff-btn-submit {
  width: 100%;
}


/* ---------- Fluent Forms table layout fixes ---------- */

:is(#fluentform_15, .makee-sms-form .fluentform) .ff-step-t-container {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

:is(#fluentform_15, .makee-sms-form .fluentform) .ff-step-t-container .ff-t-cell {
  width: auto;
  flex: 1;
}

:is(#fluentform_15, .makee-sms-form .fluentform) .ff-step-t-container .ff-t-column-1 {
  flex: 0 0 auto;
}


/* ---------- Errors ---------- */

:is(#fluentform_15, .makee-sms-form .fluentform) .error,
:is(#fluentform_15, .makee-sms-form .fluentform) .ff-el-is-error .text-danger,
:is(#fluentform_15, .makee-sms-form .fluentform) .ff-el-is-error .ff-el-help-message {
  background: #fff0f0;
  border: 1px solid #ffcccc;
  color: #c0392b;
  font-size: 0.78rem;
  font-weight: 600;
  padding: 0.55rem 0.85rem;
  border-radius: 8px;
  margin-top: 0.65rem;
}


/* ---------- Smooth transitions ---------- */

:is(#fluentform_15, .makee-sms-form .fluentform) .fluentform-step {
  animation: makeeSlideIn 0.22s ease;
}

@keyframes makeeSlideIn {
  from {
    opacity: 0;
    transform: translateY(6px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}


/* ---------- Mobile ---------- */

@media (max-width: 520px) {
  :is(#fluentform_15, .makee-sms-form .fluentform) {
    width: calc(100vw - 28px) !important;
    max-width: calc(100vw - 28px) !important;
  }

  #fluentform_15 .ff-step-header {
    max-width: calc(100vw - 28px) !important;
    padding-bottom: 1.2rem !important;
  }

  #fluentform_15 .ff-step-titles {
    --circle: 28px;
    --line-top: 22px;
    min-height: 44px !important;
    padding: 8px 0 !important;
  }

	#fluentform_15 .ff-step-titles::before {
	  background:
		linear-gradient(
		  to right,
		  transparent 0%,
		  transparent 21%,
		  var(--makee-border) 21%,
		  var(--makee-border) 41%,
		  transparent 41%,
		  transparent 59%,
		  var(--makee-border) 59%,
		  var(--makee-border) 78%,
		  transparent 78%,
		  transparent 100%
		) !important;
	}

	#fluentform_15 .ff-step-titles::after {
	  background:
		linear-gradient(
		  to right,
		  transparent 0%,
		  transparent 21%,
		  rgba(26, 38, 186, var(--progress-opacity-1)) 21%,
		  rgba(26, 38, 186, var(--progress-opacity-1)) 41%,
		  transparent 41%,
		  transparent 59%,
		  rgba(26, 38, 186, var(--progress-opacity-2)) 59%,
		  rgba(26, 38, 186, var(--progress-opacity-2)) 78%,
		  transparent 78%,
		  transparent 100%
		) !important;
	}

  #fluentform_15 .ff-step-titles > li::before {
    font-size: 0.68rem !important;
  }

  #fluentform_15 .ff-step-title-text {
    font-size: 0.66rem !important;
  }

  #fluentform_15 .ff-step-body {
    padding: 1.25rem 1rem !important;
  }

  :is(#fluentform_15, .makee-sms-form .fluentform) .makee-area-bubbles .ff-el-input--content {
    gap: 0.38rem;
  }

  :is(#fluentform_15, .makee-sms-form .fluentform) .makee-area-bubbles .ff-el-form-check-label {
    padding: 0.58rem 0.62rem;
    font-size: 0.74rem;
  }
}

@media (max-width: 370px) {
  #fluentform_15 .ff-step-title-text {
    font-size: 0.58rem !important;
  }

  :is(#fluentform_15, .makee-sms-form .fluentform) .makee-city-bubbles .ff-el-input--content,
  :is(#fluentform_15, .makee-sms-form .fluentform) .makee-area-bubbles .ff-el-input--content {
    grid-template-columns: 1fr;
  }
}

.fluentform .ff-message-success ~ *,
.fluentform .ff-message-success + *,
.fluentform:has(.ff-message-success) .ff-step-titles,
.fluentform:has(.ff-message-success) .ff-step-header,
.fluentform:has(.ff-message-success) .ff-step-body,
.fluentform:has(.ff-message-success) .ff-btn-submit,
.fluentform:has(.ff-message-success) .ff-btn-next,
.fluentform:has(.ff-message-success) .ff-btn-prev,
.fluentform:has(.ff-message-success) .ff-el-group {
  display: none !important;
}

.fluentform:has(.ff-message-success) {
  min-height: 0 !important;
}

.fluentform:has(.ff-message-success) .ff-message-success {
  display: block !important;
}