/*!
Theme Name: PageBolt Child
Theme URI: https://uicore.co
Description: Landing Page WordPress Theme
Author: UiCore
Author URI: https://uicore.co
Template: pagebolt
Version: 1.0.0
Text Domain: pagebolt
*/

/* ==========================================================================
   Design tokens — mirrored from UiCore theme options so child CSS stays in
   sync with the parent palette (Theme Options > Colors) and Work Sans stack.
   ========================================================================== */

:root {
	--es-primary: #7afcd0; /* mint       — pColor */
	--es-secondary: #ffb8d1; /* pink       — sColor */
	--es-accent: #cdbcff; /* lavender   — aColor */
	--es-heading: #022f36; /* dark teal  — hColor / dColor */
	--es-body: rgba(2, 47, 54, 0.8); /* bColor */
	--es-light: #defff0; /* lColor */

	--es-surface: #ffffff;
	--es-line: rgba(2, 47, 54, 0.12);
	--es-line-strong: rgba(2, 47, 54, 0.24);
	--es-field-bg: #f5fffb;

	--es-radius-card: 24px;
	--es-radius-field: 12px;
	--es-shadow-card: 0 24px 60px -24px rgba(2, 47, 54, 0.28), 0 2px 8px rgba(2, 47, 54, 0.06);
	--es-ring: 0 0 0 4px rgba(122, 252, 208, 0.4);
	--es-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* ==========================================================================
   Pricing plans — front page section #2bb6487 (3 x bdt-price-table)
   The section shipped with zero vertical padding and no gutters, so the cards
   collided with the neighbouring sections. Match the 100/75/50 rhythm used by
   the rest of the page, plus breathing room inside each card.
   ========================================================================== */

.elementor-element-2bb6487 {
	padding-block: 110px;
}

.elementor-element-2bb6487 > .elementor-container {
	gap: 32px;
	align-items: stretch;
}

/* Elementor sizes columns with percentage widths — let flex absorb the new gap
   instead, but only while the three cards share a row. Below 768px Elementor
   switches the columns to 100% and they must be free to stack. */
@media (min-width: 768px) {
	.elementor-element-2bb6487 > .elementor-container > .elementor-column {
		flex-basis: 0;
		flex-grow: 1;
		min-width: 0;
	}
}

.elementor-element-2bb6487 .elementor-widget-wrap {
	height: 100%;
}

.elementor-element-2bb6487 .elementor-widget-bdt-price-table,
.elementor-element-2bb6487 .elementor-widget-bdt-price-table > .elementor-widget-container {
	height: 100%;
}


/* Padding lives on the card's inner blocks, not the card itself, so the
   coloured plan header stays full-bleed inside the rounded corners instead of
   floating as a square inset. */
.elementor-element-2bb6487 .bdt-price-table {
	height: 100%;
	display: flex;
	flex-direction: column;
	padding: 0;
	overflow: hidden;
	background: var(--es-surface);
	border: 1px solid var(--es-line);
	border-radius: var(--es-radius-card);
	transition: transform 0.35s var(--es-ease), border-color 0.35s var(--es-ease);
}

.elementor-element-2bb6487 .bdt-price-table:hover {
	transform: translateY(-6px);
	border-color: var(--es-line-strong);
}

/* min-height keeps the three coloured headers the same depth despite different
   subheading lengths, so the price rows below them line up across the row. */
.elementor-element-2bb6487 .bdt-price-table-header {
	width: 100%;
	margin: 0;
	padding: 34px 30px 30px;
	border: 0;
	min-height: 168px;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.elementor-element-2bb6487 .bdt-price-table-heading {
	margin: 0 0 10px;
}

.elementor-element-2bb6487 .bdt-price-table-subheading {
	display: block;
	line-height: 1.6;
}

/* Header text defaults to white, which only works on the Free plan's dark
   header. The paid plans use the pastel secondary/accent fills, so switch them
   back to dark teal for contrast. */
.elementor-element-2bb6487 .elementor-element-4fa9ba2 .bdt-price-table-heading,
.elementor-element-2bb6487 .elementor-element-4fa9ba2 .bdt-price-table-subheading {
	color: var(--es-light);
}

.elementor-element-2bb6487 .elementor-element-15e8c9c .bdt-price-table-heading,
.elementor-element-2bb6487 .elementor-element-6a82704 .bdt-price-table-heading {
	color: var(--es-heading);
}

.elementor-element-2bb6487 .elementor-element-15e8c9c .bdt-price-table-subheading,
.elementor-element-2bb6487 .elementor-element-6a82704 .bdt-price-table-subheading {
	color: rgba(2, 47, 54, 0.75);
}

.elementor-element-2bb6487 .bdt-price-table-price {
	padding: 32px 30px 26px;
	margin: 0;
	color: var(--es-heading);
}

.elementor-element-2bb6487 .bdt-price-table-period {
	display: block;
	margin-top: 6px;
	color: var(--es-body);
	letter-spacing: 0.04em;
}

.elementor-element-2bb6487 .bdt-price-table-features-list {
	margin: 0;
	padding: 0 30px 36px;
	list-style: none;
	display: grid;
	gap: 14px;
}

.elementor-element-2bb6487 .bdt-price-table-features-list > li {
	padding: 0;
	border: 0;
}

.elementor-element-2bb6487 .bdt-price-table-feature-inner {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	color: var(--es-body);
	line-height: 1.55;
}

.elementor-element-2bb6487 .bdt-price-table-feature-inner > i {
	flex: 0 0 22px;
	width: 22px;
	height: 22px;
	margin-top: 2px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 11px;
	border-radius: 50%;
	color: var(--es-heading);
	background: var(--es-primary);
}

/* Ribbon ("Popular") sits inside an overflow-hidden card — keep it clear of
   the new corner radius. */
.elementor-element-2bb6487 .bdt-price-table-ribbon {
	z-index: 2;
}

@media (max-width: 1024px) {
	.elementor-element-2bb6487 {
		padding-block: 80px;
	}

	.elementor-element-2bb6487 > .elementor-container {
		gap: 24px;
	}

	/* Narrower columns wrap the plan names onto more lines — give the headers a
	   deeper floor so all three still end at the same height. */
	.elementor-element-2bb6487 .bdt-price-table-header {
		padding: 28px 24px 24px;
		min-height: 200px;
	}

	.elementor-element-2bb6487 .bdt-price-table-price {
		padding: 26px 24px 22px;
	}

	.elementor-element-2bb6487 .bdt-price-table-features-list {
		padding: 0 24px 30px;
	}
}

@media (max-width: 767px) {
	.elementor-element-2bb6487 {
		padding-block: 56px;
	}

	.elementor-element-2bb6487 > .elementor-container {
		gap: 20px;
	}

	.elementor-element-2bb6487 .bdt-price-table-header {
		padding: 26px 22px 22px;
		min-height: 0;
	}

	.elementor-element-2bb6487 .bdt-price-table-price {
		padding: 22px 22px 20px;
	}

	.elementor-element-2bb6487 .bdt-price-table-features-list {
		padding: 0 22px 26px;
	}
}

/* ==========================================================================
   Contact form — front page section #contactform (Qi addons > Contact Form 7)
   Raw CF7 output was inheriting browser defaults on top of the cyan/purple
   gradient. Lift it into a card that matches the page aesthetic.
   ========================================================================== */

#contactform .qodef-qi-contact-form-7 {
	width: 100%;
}

#contactform .elementor-element-4f3b944 {
	width: 100%;
	max-width: 640px;
	margin-inline: auto;
}

#contactform .wpcf7 {
	padding: 44px 40px;
	background: rgba(255, 255, 255, 0.94);
	border: 1px solid rgba(255, 255, 255, 0.7);
	border-radius: var(--es-radius-card);
	box-shadow: var(--es-shadow-card);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
}

#contactform .wpcf7-form label {
	display: block;
	margin-bottom: 20px;
	font-family: inherit;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: 0.01em;
	color: var(--es-heading);
}

#contactform .wpcf7-form .wpcf7-form-control-wrap {
	display: block;
	margin-top: 8px;
}

#contactform .wpcf7-form input[type="text"],
#contactform .wpcf7-form input[type="email"],
#contactform .wpcf7-form input[type="tel"],
#contactform .wpcf7-form input[type="url"],
#contactform .wpcf7-form textarea {
	width: 100%;
	padding: 14px 16px;
	font-family: inherit;
	font-size: 16px; /* >=16px keeps iOS from zooming on focus */
	font-weight: 400;
	line-height: 1.5;
	color: var(--es-heading);
	background: var(--es-field-bg);
	border: 1.5px solid var(--es-line);
	border-radius: var(--es-radius-field);
	box-shadow: none;
	appearance: none;
	transition: border-color 0.25s var(--es-ease), box-shadow 0.25s var(--es-ease),
		background-color 0.25s var(--es-ease);
}

#contactform .wpcf7-form textarea {
	min-height: 148px;
	resize: vertical;
}

#contactform .wpcf7-form input::placeholder,
#contactform .wpcf7-form textarea::placeholder {
	color: rgba(2, 47, 54, 0.45);
}

#contactform .wpcf7-form input[type="text"]:hover,
#contactform .wpcf7-form input[type="email"]:hover,
#contactform .wpcf7-form textarea:hover {
	border-color: var(--es-line-strong);
}

#contactform .wpcf7-form input[type="text"]:focus,
#contactform .wpcf7-form input[type="email"]:focus,
#contactform .wpcf7-form input[type="tel"]:focus,
#contactform .wpcf7-form input[type="url"]:focus,
#contactform .wpcf7-form textarea:focus {
	outline: none;
	background: var(--es-surface);
	border-color: var(--es-primary);
	box-shadow: var(--es-ring);
}

/* Submit — mint pill, inverting to dark teal on hover */
#contactform .wpcf7-form .wpcf7-submit {
	width: 100%;
	margin-top: 4px;
	padding: 16px 32px;
	font-family: inherit;
	font-size: 15px;
	font-weight: 600;
	letter-spacing: 0.02em;
	color: var(--es-heading);
	background: var(--es-primary);
	border: 0;
	border-radius: 100px;
	cursor: pointer;
	appearance: none;
	transition: background-color 0.25s var(--es-ease), color 0.25s var(--es-ease),
		transform 0.25s var(--es-ease), box-shadow 0.25s var(--es-ease);
}

#contactform .wpcf7-form .wpcf7-submit:hover,
#contactform .wpcf7-form .wpcf7-submit:focus-visible {
	color: var(--es-primary);
	background: var(--es-heading);
	transform: translateY(-2px);
	box-shadow: 0 16px 30px -14px rgba(2, 47, 54, 0.55);
}

#contactform .wpcf7-form .wpcf7-submit:focus-visible {
	outline: none;
	box-shadow: var(--es-ring), 0 16px 30px -14px rgba(2, 47, 54, 0.55);
}

#contactform .wpcf7-form .wpcf7-submit:active {
	transform: translateY(0);
}

#contactform .wpcf7-form .wpcf7-submit[disabled] {
	opacity: 0.6;
	cursor: not-allowed;
	transform: none;
}

/* Spinner sits next to a full-width button — centre it below instead */
#contactform .wpcf7-spinner {
	display: block;
	margin: 14px auto 0;
}

/* Validation + response messaging */
#contactform .wpcf7-not-valid-tip {
	margin-top: 8px;
	font-size: 13px;
	font-weight: 500;
	color: #b3305c;
}

#contactform .wpcf7-form input.wpcf7-not-valid,
#contactform .wpcf7-form textarea.wpcf7-not-valid {
	border-color: var(--es-secondary);
	background: #fff6f9;
}

#contactform .wpcf7-response-output {
	margin: 24px 0 0;
	padding: 14px 18px;
	font-size: 14px;
	line-height: 1.5;
	color: var(--es-heading);
	border: 1px solid var(--es-line);
	border-left: 4px solid var(--es-primary);
	border-radius: 10px;
	background: var(--es-light);
}

#contactform .wpcf7-form.invalid .wpcf7-response-output,
#contactform .wpcf7-form.unaccepted .wpcf7-response-output,
#contactform .wpcf7-form.failed .wpcf7-response-output,
#contactform .wpcf7-form.aborted .wpcf7-response-output {
	border-left-color: var(--es-secondary);
	background: #fff6f9;
}

#contactform .wpcf7-form.sent .wpcf7-response-output {
	border-left-color: var(--es-primary);
	background: var(--es-light);
}

@media (max-width: 767px) {
	#contactform .wpcf7 {
		padding: 32px 22px;
		border-radius: 18px;
	}

	#contactform .wpcf7-form label {
		margin-bottom: 16px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.elementor-element-2bb6487 .bdt-price-table,
	#contactform .wpcf7-form .wpcf7-submit {
		transition: none;
	}

	.elementor-element-2bb6487 .bdt-price-table:hover,
	#contactform .wpcf7-form .wpcf7-submit:hover {
		transform: none;
	}
}