/* ==========================================================================
   /support/ — banner + contact form.
   Numbers from baseline/css/inline/support__elementor-frontend-inline-css.css
   (the .elementor-247 block) and the Elementor form/slides defaults in
   baseline/css/knzyeiyc-4hw4h.css + baseline/css/4koia.css.
   ========================================================================== */

/* --------------------------------------------------- banner (Slides widget) */
/* .elementor-element-1ba1857{margin-bottom:30px}  .swiper-slide{height:200px} */
.hero--page { margin-bottom: 30px; }
.hero--page .hero__inner { height: 200px; padding: 0 50px; }
.hero--page .hero__overlay { background-color: rgba(0, 0, 0, .25); }

.hero__bg--support {
	background-color: #833ca3;
	background-image: url(/wp-content/uploads/2018/04/sms-gateway-banner-2.jpg);
}

/* .elementor-slide-heading{font-size:35px;font-weight:700;line-height:1}
   page override: .elementor-slide-heading:not(:last-child){margin-bottom:20px}
   .elementor-slide-description{font-size:17px;line-height:1.4} (last child -> no margin) */
.hero--page .hero__heading { font-size: 35px; font-weight: 700; line-height: 1; margin-bottom: 20px; }
.hero--page .hero__description { font-size: 17px; font-weight: 400; line-height: 1.4; margin-bottom: 0; }

/* ------------------------------------------------------------------- intro */
.section-support-intro p { margin: 0 0 1.5em; }

/* -------------------------------------------------------------------- form */
/* .elementor-element-5bacddf > .elementor-container{max-width:590px} */
.container--form { max-width: 590px; }

/* .elementor-element-5e53d31 > .elementor-widget-container{margin:0 0 50px 0} */
.support-form { margin-bottom: 50px; }

/* .elementor-form-fields-wrapper{display:flex;flex-wrap:wrap;
    margin-left:calc(-10px/2);margin-right:calc(-10px/2);margin-bottom:-10px} */
.support-form__fields {
	display: flex;
	flex-wrap: wrap;
	margin: 0 -5px -10px;
}

/* .elementor-field-group{align-items:center;flex-wrap:wrap;
    padding-right:calc(10px/2);padding-left:calc(10px/2);margin-bottom:10px}
   .elementor-col-100{width:100%} */
.support-form__group {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	width: 100%;
	padding: 0 5px;
	margin-bottom: 10px;
}

/* .elementor-field-group > label{color:#5c5e5e;font-size:16.79px} — the live
   labels carry .elementor-screen-only, so they never paint. Kept for a11y and
   for parity with the baseline's mainText. */
.support-form__label { color: #5c5e5e; font-size: 16.79px; }

/* .elementor-field-textual.elementor-size-md{font-size:16px;line-height:1.4;
    min-height:47px;padding:6px 16px;border-radius:4px}  +  page override
   .elementor-field-group .elementor-field{background:#fff;border:1px solid #dacaca;
    border-radius:0} */
.support-form__field {
	display: block;
	width: 100%;
	max-width: 100%;
	flex-grow: 1;
	font-family: inherit;
	font-size: 16px;
	line-height: 1.4;
	min-height: 47px;
	padding: 6px 16px;
	color: #1f2124;
	background-color: #fff;
	border: 1px solid #dacaca;
	border-radius: 0;
	vertical-align: middle;
}
.support-form__field::placeholder { color: inherit; font-family: inherit; opacity: .6; }
.support-form__field:focus { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .1); outline: 0; }
/* rows="4" at 16px/1.4 + 6px padding + 1px borders = the live 104px box */
.support-form__field--textarea { resize: vertical; overflow: auto; }

/* .elementor-field-subgroup{display:flex;flex-wrap:wrap}
   .elementor-subgroup-inline .elementor-field-option{padding-inline-end:10px}
   .elementor-field-subgroup label{color:#5c5e5e} */
.support-form__subgroup { display: flex; flex-wrap: wrap; width: 100%; }
.support-form__option { padding-inline-end: 10px; color: #5c5e5e; }
.support-form__option input,
.support-form__option label { display: inline; }
/* GeneratePress reset: button,input,select,textarea{margin:0;vertical-align:baseline}.
   Without it Chrome's own `margin:3px 3px 0 5px` on a radio pushes the whole row
   right and widens the gaps. */
.support-form input,
.support-form textarea,
.support-form button { margin: 0; vertical-align: baseline; }
.support-form__option label { cursor: pointer; }

/* .elementor-button-align-start .elementor-field-type-submit{justify-content:flex-start}
   .elementor-form .elementor-button{border:none;padding-block:0}
   .elementor-form .elementor-button.elementor-size-sm{min-height:40px}
   .elementor-button{font-size:15px;line-height:1;padding:12px 24px;border-radius:3px}
   page override: .elementor-button[type=submit]{background-color:#148dce;color:#fff} */
.support-form__group--submit { justify-content: flex-start; }
.btn--submit {
	font-size: 15px;
	line-height: 1;
	min-height: 40px;
	padding: 0 24px;
	border-radius: 3px;
}
.btn--submit .btn__content { gap: 5px; }
/* the live icon is Font Awesome 4 `fa-arrow-right` at 14px — 13px of ink wide */
.btn--submit .btn__icon svg { width: 13px; height: 13.8px; }
.btn--submit[disabled] { opacity: .6; cursor: default; }

/* honeypot — off-screen wrapper, the input itself stays a normal rendered
   control so headless bots that check `display` still fill it in. */
.support-form__hp {
	position: absolute;
	left: -10000px;
	top: auto;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* .elementor-message{font-size:1em;line-height:1;margin:10px 0}
   .form-message-success{color:#5cb85c} .elementor-message-danger{color:#d9534f} */
.support-form__message { font-size: 1em; line-height: 1; margin: 10px 0 0; }
.support-form__message--success { color: var(--success); }
.support-form__message--error { color: #d9534f; }

/* -------------------------------------------------------------- breakpoints */
@media (max-width: 767px) {
	/* .elementor-slides .swiper-slide-inner{padding:30px}
	   .elementor-slide-heading{font-size:23px}
	   .elementor-slide-description{font-size:13px;margin-bottom:15px} */
	.hero--page .hero__inner { padding: 0 30px; }
	/* site.css widens the home hero to 95% at phone width; the Slides widget on
	   /support/ keeps .swiper-slide-contents{max-width:66%} at every width. */
	.hero--page .hero__contents { max-width: 66%; }
	.hero--page .hero__heading { font-size: 23px; }
	.hero--page .hero__description { font-size: 13px; margin-bottom: 15px; }
}